engineering_admin/src/components/flowDetail/index.vue

<template>
    <div class="edit-popup">
        <el-card>
            {{ userInfo }}
            {{ formData?.check_status }}
            {{ formData.create_user }}
            {{ formData?.check_status == 0 && formData.create_user == userInfo.id }}
            <el-descriptions :column="3" title="审21批详情" border>
                <el-descriptions-item label="审批主题" label-align="left" align="left" label-class-name="my-label">
                    {{ formData.title }}
                </el-descriptions-item>
                <el-descriptions-item label="审批流程" label-align="left" align="left" label-class-name="my-label">
                    {{ formData.flow_name }}
                </el-descriptions-item>
                <el-descriptions-item label="审核状态" label-align="left" align="left" label-class-name="my-label">
                    {{ formData.check_status_text }}
                </el-descriptions-item>
                <el-descriptions-item label="申请人" label-align="left" align="left" label-class-name="my-label">
                    {{ formData.create_user_name }}
                </el-descriptions-item>
                <el-descriptions-item label="当前审批人" label-align="left" align="left" label-class-name="my-label">
                    {{ formData.current_check_user }}
                </el-descriptions-item>
                <el-descriptions-item label="抄送人" label-align="left" align="left" label-class-name="my-label">
                    {{ formData.copy_user }}
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions :column="1" border>
                <el-descriptions-item label="审批流程" label-align="left" align="left">
                    <el-steps :active="activeStep" simple :align-center="true">
                        <el-step :title="getStep(item, index)" :icon="index == 0 ? Avatar : Clock"
                            v-for="(item, index) in formData.step" :key="index" />
                        <el-step :title="getStep(item, index)" :icon="index == 0 ? Avatar : Clock"
                            v-for="(item, index) in formData.step" :key="index" />
                    </el-steps>
                </el-descriptions-item>
                <el-descriptions-item label="审批记录" label-align="left" align="left">
                    <el-steps direction="vertical" :active="formData.record.length" :align-center="true" :space="50"
                        style="margin-top: 20px">
                        <el-step :title="item.check_time + item.title" v-for="(item, index) in formData.record"
                            :key="index" />
                        <el-step :title="item.check_time + item.title" v-for="(item, index) in formData.record"
                            :key="index" />
                    </el-steps>
                </el-descriptions-item>
                <div v-if="formData?.current_check_user_ids?.includes(String(userInfo.id))">
                    <el-descriptions-item label="操作" label-align="left" align="left">
                        <el-form-item label="意见">
                            <el-input v-model="remark" clearable placeholder="请输入" type="textarea" />
                        </el-form-item>
                        <el-form-item label="审批">
                            <el-button type="primary" @click="checkFn(1)">
                                通过1212
                            </el-button>
                            <el-button @click="checkFn(2)">
                                拒绝
                            </el-button>
                        </el-form-item>
                    </el-descriptions-item>
                </div>

                <!-- <div v-if="formData?.check_status == 0 && formData.create_user == userInfo.id">
                    <el-descriptions-item label="操作1" label-align="left" align="left">
                        <el-form-item label="意见">
                            <el-input v-model="remark" clearable placeholder="请输入" type="textarea" />
                        </el-form-item>
                        <el-form-item label="审批">
                            <el-button @click="revokeFn">
                                撤销121212
                            </el-button>
                        </el-form-item>
                    </el-descriptions-item>
                </div> -->

            </el-descriptions>
        </el-card>
    </div>
</template>

<script lang="ts" setup name="projectEdit">
import Popup from '@/components/popup/index.vue'
import { Avatar, Clock } from '@element-plus/icons-vue'
import { flowapproveDetail, flowapproveCheck, flowapproveRevoke } from '@/api/approve.ts'
import { defineProps } from "vue"
import useUserStore from '@/stores/modules/user'
const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)

const props = defineProps({
    approve_id: Number
})

let activeStep = ref(0)
const remark = ref('')

const emit = defineEmits(['success', 'close'])
const popupRef = shallowRef<InstanceType<typeof Popup>>()

// 表单数据
const formData = reactive({
    "id": 11,
    "title": "",
    "create_user": 1,
    "check_status": 0,
    "flow_name": "",
    "check_status_text": "",
    "current_check_user": "",
    "create_user_name": "admin",
    "copy_user": "admin",
    current_check_user_ids: [],
    "content": {

    },
    "step": [
        {
            "flow_step": 0,
            "flow_user": "",
            "is_active": 0,
            "flow_step_text": ""
        },
        {
            "flow_step": 2,
            "flow_user": "测试添加管理,测试",
            "is_active": 1,
            "flow_step_text": "指定用户（任意一人）"
        },
        {
            "flow_step": 2,
            "flow_user": "测试添加管理,测试",
            "is_active": 0,
            "flow_step_text": "指定用户（任意一人）"
        },
        {
            "flow_step": 3,
            "flow_user": "究极张伟,赵明军",
            "is_active": 0,
            "flow_step_text": "指定用户（多人会签）"
        }
    ],
    "record": [
        {
            "title": "admin提交了此申请",
            "content": "提交申请",
            "check_time": "2024-02-03",
            "status": 0,
            "status_text": "发起申请"
        }
    ]
})


// 获取详情
const setFormData = async (data: Record<any, any>) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
}


// 提交按钮
const handleSubmit = async () => {
    popupRef.value?.close()
    emit('success')
}

//打开弹窗
const open = () => {
    popupRef.value?.open()
}

// 关闭回调
const handleClose = () => {
    emit('close')
}

// 撤销申请
const revokeFn = () => {
    flowapproveRevoke({
        id: props.approve_id,
        revoke_reason: remark.value
    })
}

// 审核操作
const checkFn = (i) => {
    flowapproveCheck({
        id: props.approve_id,
        check_status: i,
        check_reason: remark.value
    })
}

const getStep = (item, index) => {
    if (index == 0) { return formData.create_user_name + '创建' }
    else { return item.flow_step_text }
}

flowapproveDetail({ id: props.approve_id }).then(res => {
    activeStep.value = res.step.findIndex(item => item.is_active == 1)
    setFormData(res)
})


defineExpose({
    open,
    setFormData,
})
</script>


<style lang="scss">
.el-step.is-simple .el-step__icon {
    margin-top: 15px;
}
</style>