114 lines
3.9 KiB
Vue
114 lines
3.9 KiB
Vue
<template>
|
|
<el-card>
|
|
<template #header>
|
|
<div class="card-header">
|
|
<span>审批流程</span>
|
|
</div>
|
|
</template>
|
|
<div>
|
|
<el-row>
|
|
<el-col :span="8">
|
|
<el-form-item label="审批分类">
|
|
<el-select class="flex-1" v-model="formData.flow_type" clearable placeholder="请选择所属分类"
|
|
@change="getFlowTypeList">
|
|
<el-option v-for="(item, index) in flowTyprList" :key="index" :label="item.title"
|
|
:value="(item.id)" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="审批流程" prop="flow_cate">
|
|
<el-select class="flex-1" v-model="formData.flow_path" :disabled="!formData.flow_type" clearable
|
|
@change="getDetail" placeholder="请选择审批类型">
|
|
<el-option v-for="(item, index) in flowTypeList" :key="index" :label="item.name"
|
|
:value="parseInt(item.id)" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row v-if="flowDetail.id">
|
|
<el-col :span="24">
|
|
<el-form-item label="审批流程" prop="mailing_no">
|
|
<el-steps align-center :active="flowDetail.flow_list.length">
|
|
<el-step :title="`第${numberToChinese(index + 1)}级审批`" :description="getDescr(item)"
|
|
v-for="(item, index) in flowDetail.flow_list" :key="idnex" />
|
|
</el-steps>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row v-if="flowDetail.id">
|
|
<el-col :span="24">
|
|
<el-form-item label="抄送人" prop="mailing_no">
|
|
<el-tag v-for="(item, index) in flowDetail.copy_uids" :key="index" class="ml-2">{{ item.name
|
|
}}</el-tag>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-button @click="submit" type="primary">
|
|
提交
|
|
</el-button>
|
|
</el-row>
|
|
</div>
|
|
|
|
</el-card>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive, defineProps } from 'vue'
|
|
import { apiFlowTypeLists, } from '@/api/flow_type'
|
|
import { apiFlowLists, apiFlowDetail, apiFlowDelete } from '@/api/flow'
|
|
import { useRoute } from "vue-router"
|
|
|
|
const route = useRoute()
|
|
const emits = defineEmits(["confirm"]);
|
|
|
|
const formData = reactive({
|
|
flow_type: "",
|
|
flow_path: "",
|
|
path: route.path
|
|
})
|
|
|
|
const flowTyprList = ref([])
|
|
const getFlowtypeList = async () => {
|
|
let res = await apiFlowTypeLists()
|
|
flowTyprList.value = res.lists
|
|
}
|
|
|
|
// 获取对应审批类型
|
|
const flowTypeList = ref([])
|
|
|
|
const getFlowTypeList = async () => {
|
|
if (!formData.flow_type) return
|
|
formData.flow_path = ''
|
|
flowTypeList.value = []
|
|
let res = await apiFlowLists({
|
|
flow_cate: formData.flow_type,
|
|
status: 2
|
|
})
|
|
Object.assign(flowTypeList.value, res.lists)
|
|
}
|
|
|
|
// 获取流程详情
|
|
const flowDetail = ref({})
|
|
const getDetail = async () => {
|
|
let res = await apiFlowDetail({ id: formData.flow_path })
|
|
flowDetail.value = res
|
|
//
|
|
emits("confirm", formData);
|
|
}
|
|
|
|
// 流程说明
|
|
const getDescr = (item) => { return item.flow_step == 1 ? "当前部门负责人" : (item.flow_user.map(val => ([val.name]))).join(',') }
|
|
|
|
// 提交审批
|
|
const submit = () => {
|
|
|
|
}
|
|
|
|
getFlowtypeList()
|
|
|
|
const numberToChinese = (num) => {
|
|
let chineseNum = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
|
|
return chineseNum[num];
|
|
}
|
|
</script> |