engineering_admin/src/views/oa_Initiate/detail.vue

<template>
    <div class="detail-popup">
        <popup ref="popupRef" :showFootBtn="false" title="审批详情" :async="true" width="60vw">
            <el-card>
                <template #header>审批内容</template>
                <el-descriptions :column="3" border>
                    <el-descriptions-item v-for="item in formData.extends" :label="item.label" label-align="left"
                        align="left">
                        {{ item.text || item.value }}
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>
            <el-card>
                <template #header>审批流程</template>
                <el-descriptions :column="3" border>

                    <el-descriptions-item label="审批状态" label-align="left" align="left">
                        {{ formData.check_status_text }}
                    </el-descriptions-item>
                    <el-descriptions-item label="当前审核人" label-align="left" align="left">
                        {{ formData.check_admin_users }}
                    </el-descriptions-item>
                    <el-descriptions-item label="抄送人" label-align="left" align="left">
                        {{ formData.copy_users }}
                    </el-descriptions-item>
                </el-descriptions>
                <el-descriptions :column="1" border>
                    <el-descriptions-item label="审批流程" label-align="left" align="left">
                        审批流程
                    </el-descriptions-item>
                    <el-descriptions-item label="审批记录" label-align="left" align="left">
                        审批记录
                    </el-descriptions-item>
                    <el-descriptions-item label="审批节点" label-align="left" align="left">
                        <div class="flex" style="position: relative;">
                            <el-radio-group v-model="form.check_node">
                                <el-radio :label="1">审批结束</el-radio>
                                <el-radio :label="2">下一审批人</el-radio>
                            </el-radio-group>
                            <div class="w-280[px]" style="position: absolute;left:250px">
                                <el-input v-show="form.check_node == 2" v-model="form.check_admin_names"
                                    placeholder="点击选择下一审批人" clearable readonly @click="userclick" />
                            </div>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="审批意见" label-align="left" align="left">
                        <el-input type="textarea" v-model="form.content"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="操作" label-align="left" align="left">
                        <el-button type="primary" @click="form.check = 1, handCheck()">
                            通过
                        </el-button>
                        <el-button @click="form.check = 2, handCheck()">
                            拒绝
                        </el-button>
                        <el-button type="info" @click="form.check = 3, handCheck()">
                            撤回
                        </el-button>
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>
            <div v-if="showPerDialog">
                <personnelselector ref="personnel" @confirm="submituser" type="1">
                </personnelselector>
            </div>
        </popup>
    </div>
</template>

<script lang="ts" setup name="customdetail">
import Popup from '@/components/popup/index.vue'
import { apiOaoaApproveCheck } from "@/api/oa_initiate"
import useUserStore from "@/stores/modules/user";


const emit = defineEmits(['close'])
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const showPerDialog = ref(false);
const personnel = ref(null);
const userStore = useUserStore().userInfo;

// 表单数据
const formData = reactive({
    id: 0,
    extends: {}
})

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


const form = reactive({
    "id": formData.id,
    "check": '',
    "content": "",
    "check_node": 1,
    "check_admin_ids": '',
    check_admin_names: ""
})


const userclick = async (type) => {
    showPerDialog.value = true;
    await nextTick();
    personnel.value.open();
};

const submituser = (e) => {
    form.check_admin_names = e.name;
    form.check_admin_ids = e.id;
    showPerDialog.value = false;
};


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


// 提交按钮
const handleSubmit = async () => {
    popupRef.value?.close()
}
// 关闭回调
const handleClose = () => {
    emit('close')
}


// 审批
const handCheck = async () => {
    const res = await apiOaoaApproveCheck({ ...form })
    handleClose()
}



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