218 lines
8.9 KiB
Vue
218 lines
8.9 KiB
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 label="报销凭证编号" label-align="left" align="left">
|
|
{{ formData.code }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="原始单据日期" label-align="left" align="left">
|
|
{{ formData.expense_time }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="入账月份" label-align="left" align="left">
|
|
{{ formData.income_month }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="附件" label-align="left" align="left">
|
|
<annexLink :annex="formData.annex || []"></annexLink>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
<el-table :data="formData.detail">
|
|
<el-table-column label="报销金额" show-overflow-tooltip prop="amount">
|
|
</el-table-column>
|
|
<el-table-column label="报销项目" show-overflow-tooltip prop="cate_name">
|
|
</el-table-column>
|
|
<el-table-column label="备注信息" show-overflow-tooltip prop="remark">
|
|
</el-table-column>
|
|
</el-table>
|
|
</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() + 1" 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">
|
|
<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()">
|
|
<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="form.check = 3, handCheck()"
|
|
v-if="formData.admin_id == userStore.id">
|
|
撤回
|
|
</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 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 { apiExpenseCheck } from '@/api/oa_financial'
|
|
|
|
|
|
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]
|
|
}
|
|
}
|
|
console.log(formData)
|
|
}
|
|
|
|
|
|
const form = reactive({
|
|
"id": formData.id,
|
|
"check": '',
|
|
"content": "",
|
|
"check_node": 1,
|
|
"check_admin_ids": '',
|
|
check_admin_names: ""
|
|
})
|
|
|
|
|
|
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 handCheck = async () => {
|
|
if (formData.flow_info.check_type != 2) delete form.check_node;
|
|
form.id = formData.id
|
|
const res = await apiExpenseCheck({ ...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)
|
|
}
|
|
}
|
|
|
|
defineExpose({
|
|
open,
|
|
setFormData,
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
:deep(.el-step__icon) {
|
|
margin-top: 10px !important;
|
|
}
|
|
</style>
|