208 lines
7.0 KiB
Vue
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> |