324 lines
12 KiB
Vue
324 lines
12 KiB
Vue
<template>
|
|
<div class="detail-popup">
|
|
<popup ref="popupRef" :showFootBtn="false" title="审批详情" :async="true" width="60vw" @close='hdClose'>
|
|
<el-card>
|
|
<template #header>审批内容</template>
|
|
<el-descriptions :column="3" border>
|
|
<el-descriptions-item v-for="(item,value) in fromValue" :label="item" label-align="left"
|
|
align="left">
|
|
{{formData.extends[value]}}
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
<el-descriptions :column="1" border v-if='formData.extends?.annex'>
|
|
<el-descriptions-item label="附件" label-align="left" align="left">
|
|
<annexLink :annex='formData.extends.annex'></annexLink>
|
|
</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-steps class="mb-4" style="max-width: 50vw" :space="200" :active="findActive() + 2" simple>
|
|
<el-step :icon="Clock"
|
|
:title="formData.record[formData.record.length - 1].check_user_name + '创建'" />
|
|
<el-step :icon="Clock" :title="flowTypeToText(item.flow_type, item)"
|
|
v-for="item in formData.steps" />
|
|
</el-steps>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="审批记录" label-align="left" align="left">
|
|
<p v-for="item in formData.record">
|
|
<span>{{ item.check_user_name + item.status_text }} </span>了申请
|
|
{{ item.check_time }}
|
|
<span>
|
|
操作意见：
|
|
{{ item.content }}
|
|
</span>
|
|
</p>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="审批节点" label-align="left" align="left"
|
|
v-if="formData.flow_info.check_type == 2 && formData.check_status != 3 && formData.check_status != 2 && formData.admin_id != userStore.id && showTextarea()">
|
|
<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"
|
|
v-if="showTextarea() && formData.admin_id != userStore.id">
|
|
<el-input type="textarea" v-model="form.content"></el-input>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="操作" label-align="left" align="left" v-if="showTextarea()">
|
|
<el-button type="primary" @click="form.check = 1, handCheck()"
|
|
v-if="formData.admin_id != userStore.id">
|
|
通过
|
|
</el-button>
|
|
<el-button @click="form.check = 2, handCheck()"
|
|
v-if="formData.admin_id != userStore.id && formData.flow_info.check_type != 3">
|
|
拒绝
|
|
</el-button>
|
|
<el-button @click="form.check = 2, handCheck()"
|
|
v-if="formData.admin_id != userStore.id && formData.flow_info.check_type == 3">
|
|
回退
|
|
</el-button>
|
|
<el-button type="info" @click=" showBackDialog = true" v-if="formData.admin_id == userStore.id">
|
|
撤回
|
|
</el-button>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="操作" label-align="left" align="left"
|
|
v-if="formData.check_status == 3 && formData.record[formData.record.length - 1].check_user_id == userStore.id">
|
|
<el-button type="info" @click="reEdit">
|
|
重新编辑
|
|
</el-button>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</el-card>
|
|
<div v-if="showPerDialog">
|
|
<personnelselector ref="personnel" @confirm="submituser" type="1">
|
|
</personnelselector>
|
|
</div>
|
|
<el-dialog v-model="showBackDialog" title="撤回审批" width="550px">
|
|
<el-form-item label="撤回原因">
|
|
<el-input v-model="form.content" type="textarea"> </el-input>
|
|
</el-form-item>
|
|
<el-form-item label="">
|
|
<el-button type="primary" @click="backFn">撤回</el-button>
|
|
<el-button @click="showBackDialog = false">取消</el-button>
|
|
</el-form-item>
|
|
</el-dialog>
|
|
</popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="customdetail">
|
|
import annexLink from './../../components/annexLink/index.vue'
|
|
import Popup from '@/components/popup/index.vue'
|
|
import { apiOaoaApproveCheck } from "@/api/oa_initiate"
|
|
import useUserStore from "@/stores/modules/user";
|
|
import { Clock } from '@element-plus/icons-vue'
|
|
import feedback from './../../utils/feedback'
|
|
|
|
import {ref,reactive} from "vue"
|
|
import qja from './form/jq/qja.js'
|
|
import cca from './form/jq/cca.js'
|
|
import wca from './form/jq/wca.js'
|
|
import jba from './form/jq/jba.js'
|
|
import hysyda from './form/xz/hysyda.js'
|
|
import gwlza from './form/xz/gwlza.js'
|
|
import wpwxa from './form/xz/wpwxa.js'
|
|
import zzjya from './form/xz/zzjya.js'
|
|
import yza from './form/xz/yza.js'
|
|
import yca from './form/xz/yca.js'
|
|
import ycgha from './form/xz/ycgha.js'
|
|
import jka from './form/cw/jka.js'
|
|
import fka from './form/cw/fka.js'
|
|
import jla from './form/cw/jla.js'
|
|
import cga from './form/cw/cga.js'
|
|
import hdjfa from './form/cw/hdjfa.js'
|
|
import rza from './form/rs/rza.js'
|
|
import zza from './form/rs/zza.js'
|
|
import lza from './form/rs/lza.js'
|
|
import zga from './form/rs/zga.js'
|
|
import zpxqa from './form/rs/zpxqa.js'
|
|
import tyspa from './form/qt/tyspa.js'
|
|
|
|
|
|
let props = defineProps({
|
|
typeName: {
|
|
type: String,
|
|
}
|
|
})
|
|
|
|
|
|
|
|
let fromValue=ref({})
|
|
const getFormValue=()=>{
|
|
if(props.typeName=='请假')fromValue.value=qja;
|
|
if(props.typeName=='出差')fromValue.value=cca;
|
|
if(props.typeName=='外出')fromValue.value=wca;
|
|
if(props.typeName=='加班')fromValue.value=jba;
|
|
if(props.typeName=='会议室预定')fromValue.value=hysyda;
|
|
if(props.typeName=='公文流转')fromValue.value=gwlza;
|
|
if(props.typeName=='物品维修')fromValue.value=wpwxa;
|
|
if(props.typeName=='资质借用')fromValue.value=zzjya;
|
|
if(props.typeName=='用章')fromValue.value=yza;
|
|
if(props.typeName=='用车')fromValue.value=yca;
|
|
if(props.typeName=='用车归还')fromValue.value=ycgha;
|
|
if(props.typeName=='借款')fromValue.value=jka;
|
|
if(props.typeName=='付款')fromValue.value=fka;
|
|
if(props.typeName=='奖励')fromValue.value=cga;
|
|
if(props.typeName=='采购')fromValue.value=qja;
|
|
if(props.typeName=='活动经费')fromValue.value=hdjfa;
|
|
if(props.typeName=='入职')fromValue.value=rza;
|
|
if(props.typeName=='转正')fromValue.value=zza;
|
|
if(props.typeName=='离职')fromValue.value=lza;
|
|
if(props.typeName=='转岗')fromValue.value=zga;
|
|
if(props.typeName=='招聘需求')fromValue.value=zpxqa;
|
|
if(props.typeName=='通用审批')fromValue.value=tyspa;
|
|
console.log(fromValue.value)
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
getFormValue()
|
|
const emit = defineEmits(['close', 'reEdit'])
|
|
const popupRef = shallowRef<InstanceType<typeof Popup>>()
|
|
const showPerDialog = ref(false);
|
|
const personnel = ref(null);
|
|
const userStore = useUserStore().userInfo;
|
|
const showBackDialog = ref(false)
|
|
|
|
// 表单数据
|
|
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 backFn = () => {
|
|
if (!form.content) return feedback.msgError("请填写撤回原因");
|
|
form.check = 3
|
|
handCheck()
|
|
}
|
|
const userclick = async () => {
|
|
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 flowTypeToText = (type, item) => {
|
|
if (type == 0) return item.user_id_info[0].name;
|
|
if (type == 1) return "部门负责人";
|
|
if (type == 2) return "或签";
|
|
if (type == 3) return "会签";
|
|
if (type == 4) return item.user_id_info[0].name;
|
|
}
|
|
|
|
|
|
const findActive = () => {
|
|
let index = formData.steps.findIndex(item => { return item.sort == formData.check_step_sort })
|
|
return index
|
|
}
|
|
|
|
// 关闭回调
|
|
const handleClose = () => {
|
|
emit('close')
|
|
}
|
|
|
|
const hdClose=()=>{
|
|
emit('close')
|
|
|
|
}
|
|
|
|
|
|
// 审批
|
|
const handCheck = async () => {
|
|
if (formData.check_admin_ids && formData.record[formData.record.length - 1].check_user_id == form.check_admin_ids) {
|
|
feedback.msgError("下一级审批人不能是发起审批人")
|
|
return
|
|
}
|
|
if (formData.flow_info.check_type != 2) delete form.check_node;
|
|
form.id = formData.id
|
|
const res = await apiOaoaApproveCheck({ ...form })
|
|
handleClose()
|
|
}
|
|
|
|
// 显示
|
|
const showActionList = reactive([4, 3, 2])
|
|
|
|
const showTextarea = () => {
|
|
if (showActionList.includes(formData.check_status)) return false;
|
|
if (formData.admin_id == userStore.id) return true;
|
|
if (formData?.check_admin_ids.length > 1) {
|
|
if (formData.steps[findActive()].check_list.map(item => item.check_user_id).includes(userStore.id)) return false;
|
|
else return (formData?.check_admin_ids.split(',').map(Number).includes(userStore.id)); // 判断是否是当前用户
|
|
} else {
|
|
return (formData?.check_admin_ids == userStore.id)
|
|
}
|
|
}
|
|
|
|
|
|
//重新编辑
|
|
|
|
const reEdit = () => {
|
|
emit('reEdit', { extends: formData.extends, flow_info: formData.flow_info })
|
|
}
|
|
|
|
defineExpose({
|
|
open,
|
|
setFormData,
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
:deep(.el-step__icon) {
|
|
margin-top: 10px !important;
|
|
}
|
|
</style>
|