engineering_admin/src/components/flowProcess/index.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>
        </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'

const emits = defineEmits(["confirm"]);

const formData = reactive({
    flow_type: "",
    flow_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) => {
    if (item.flow_step == 1) return "当前部门负责人"
    else {
        return (item.flow_user.map(val => ([val.name]))).join(',')
    }
}

const numberToChinese = (num) => {
    let chineseNum = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
    return chineseNum[num];
}
// 选中数据子父传递
getFlowtypeList()
</script>