2024-02-24 14:11:23 +08:00

208 lines
7.0 KiB
Vue

<template>
<div class="edit-popup">
<el-card>
<el-descriptions :column="3" title="审批详情" 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">
{{ showFlow() }}
{{ showDel() }}
{{ 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-steps>
</el-descriptions-item>
<el-descriptions-item label="审批记录" label-align="left" align="left">
<div class="steps-cls">
<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-steps>
</div>
</el-descriptions-item>
<div>
<el-descriptions-item label="操作" label-align="left" align="left"
v-if="formData?.current_check_user_ids?.includes(String(userInfo.id)) && formData.check_status != 3 || formData?.check_status == 0 && formData.create_user == userInfo.id">
<el-form-item label="意见"
v-if="formData?.current_check_user_ids?.includes(String(userInfo.id)) && formData.check_status != 3 || formData?.check_status == 0 && formData.create_user == userInfo.id">
<el-input v-model="remark" clearable placeholder="请输入" type="textarea" />
</el-form-item>
<el-form-item label="审批">
<el-button type="primary" @click="checkFn(1)"
v-if="formData?.current_check_user_ids?.includes(String(userInfo.id)) && formData.check_status != 3">
通过
</el-button>
<el-button @click="checkFn(2)"
v-if="formData?.current_check_user_ids?.includes(String(userInfo.id)) && formData.check_status != 3">
拒绝
</el-button>
<el-button @click="revokeFn"
v-if="formData?.check_status == 0 && formData.create_user == userInfo.id">
撤销
</el-button>
</el-form-item>
</el-descriptions-item>
</div>
</el-descriptions>
</el-card>
</div>
</template>
<script lang="ts" setup name="projectEdit">
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 remark2 = ref('')
const emit = defineEmits(['off'])
const popupRef = shallowRef<InstanceType<typeof Popup>>()
// 表单数据
const formData = reactive({
"id": '',
"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": '',
"flow_user": "",
"is_active": '',
"flow_step_text": ""
},
],
"record": [
{
"title": "",
"content": "",
"check_time": "",
"status": 0,
"status_text": ""
}
]
})
// 展示审批操作
const showFlow = () => {
return Boolean(formData?.current_check_user_ids?.includes(String(userInfo.id)) && formData.check_status != 3)
}
// 撤回
const showDel = () => {
return Boolean(formData?.check_status == 0 && formData.create_user == userInfo.id)
}
// 获取详情
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 open = () => {
popupRef.value?.open()
}
// 撤销申请
const revokeFn = async () => {
await flowapproveRevoke({
id: props.approve_id,
revoke_reason: remark.value
})
emit('off')
}
// 审核操作
const checkFn = async (i: Number) => {
await flowapproveCheck({
id: props.approve_id,
check_status: i,
check_reason: remark.value
})
emit('off')
}
const getStep = (item: Object, index: Number) => {
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: Object) => item?.is_active == 1)
setFormData(res)
})
defineExpose({
open,
setFormData,
})
</script>
<style lang="scss">
.el-step.is-simple .el-step__icon {
margin-top: 15px;
}
.steps-cls {
max-height: 200px;
overflow-y: auto;
}
.el-step__title {
font-size: 14px;
}
.el-step.is-simple .el-step__title {
font-size: 14px;
}
</style>