|
|
@@ -1,7 +1,8 @@
|
|
|
<template>
|
|
|
- <el-dialog v-model="state.dialogVisible" draggable title="延期详情" ref="dialogRef" width="50%" append-to-body destroy-on-close>
|
|
|
+ <el-dialog v-model="state.dialogVisible" draggable title="延期详情" ref="dialogRef" width="50%" append-to-body destroy-on-close @close="close">
|
|
|
<el-form label-width="110px" ref="ruleFormRef" :model="state.ruleForm" class="show-info-form">
|
|
|
- <el-row :gutter="10">
|
|
|
+ <p class="border-title">申请信息</p>
|
|
|
+ <el-row :gutter="10" v-loading="state.loading">
|
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
<el-form-item label="工单编号"> {{ state.ruleForm?.order?.no }} </el-form-item>
|
|
|
</el-col>
|
|
|
@@ -21,7 +22,7 @@
|
|
|
<el-form-item label="当前期满时间"> {{ formatDate(state.ruleForm?.beforeDelay, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
- <el-form-item label="延期申请数量">{{ state.ruleForm?.delayNum }} {{ state.ruleForm?.delayUnitText }} </el-form-item>
|
|
|
+ <el-form-item label="延期申请天数">{{ state.ruleForm?.delayNum }} {{ state.ruleForm?.delayUnitText }} </el-form-item>
|
|
|
</el-col>
|
|
|
<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
|
|
<el-form-item label="延期后期满时间">{{ formatDate(state.ruleForm?.afterDelay, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
|
|
|
@@ -38,37 +39,39 @@
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
+ <p class="border-title mt10 mb10">延期审核明细</p>
|
|
|
+ <vxe-table :expand-config="{ trigger: 'row', padding: true }" border :data="tableData" :loading="state.loading">
|
|
|
+ <vxe-column type="seq" width="70"></vxe-column>
|
|
|
+ <vxe-column type="expand" width="60">
|
|
|
+ <template #content="{ row }">
|
|
|
+ <div class="mb5 formatted-text">审核意见：{{ row.opinion }}</div>
|
|
|
+ <annex-list name="附件" readonly businessId="" classify="查看附件" v-model="row.files" />
|
|
|
+ </template>
|
|
|
+ </vxe-column>
|
|
|
+ <vxe-column field="name" title="节点"></vxe-column>
|
|
|
+ <vxe-column field="handlerName" title="审批人"></vxe-column>
|
|
|
+ <vxe-column field="handleTime" title="审批时间" width="160">
|
|
|
+ <template #default="{ row }">{{ formatDate(row.handleTime, 'YYYY-mm-dd HH:MM:SS') }}</template>
|
|
|
+ </vxe-column>
|
|
|
+ <vxe-column field="traceTypeText" title="状态"></vxe-column>
|
|
|
+ </vxe-table>
|
|
|
</el-form>
|
|
|
<template #footer>
|
|
|
<span class="dialog-footer">
|
|
|
- <el-button @click="closeDialog" class="default-button">取 消</el-button>
|
|
|
- <el-button type="primary" @click="processDetail">流程明细</el-button>
|
|
|
- <el-button type="primary" @click="onAudit" v-if="state.ruleForm?.isCanHandle" v-auths="['business:delay:audit:todo', 'business:delay:audit']"
|
|
|
- >延期审批</el-button
|
|
|
- >
|
|
|
+ <el-button @click="closeDialog" class="default-button">关 闭</el-button>
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
- <!-- 审核记录 -->
|
|
|
- <audit-record ref="auditRecordRef" />
|
|
|
- <!-- 流程审批 -->
|
|
|
- <process-audit ref="processAuditRef" @orderProcessSuccess="orderProcessSuccess" @orderProcessFailed="orderProcessFailed"></process-audit>
|
|
|
</template>
|
|
|
<script setup lang="ts" name="delayDetail">
|
|
|
import { defineAsyncComponent, reactive, ref } from 'vue';
|
|
|
import { delayDetail } from '@/api/business/delay';
|
|
|
import { formatDate } from '@/utils/formatTime';
|
|
|
import { transformFile } from '@/utils/tools';
|
|
|
-import { useThemeConfig } from '@/stores/themeConfig';
|
|
|
-import { storeToRefs } from 'pinia';
|
|
|
-import { ElMessage } from 'element-plus';
|
|
|
+import { workflowTraces } from '@/api/system/workflow';
|
|
|
|
|
|
-const AuditRecord = defineAsyncComponent(() => import('@/components/AuditRecord/index.vue')); // 流程明细
|
|
|
const AnnexList = defineAsyncComponent(() => import('@/components/AnnexList/index.vue')); // 附件列表
|
|
|
-const ProcessAudit = defineAsyncComponent(() => import('@/components/ProcessAudit/index.vue')); // 流程审批
|
|
|
|
|
|
-// 定义子组件向父组件传值/事件
|
|
|
-const emit = defineEmits(['updateList']);
|
|
|
// 定义变量内容
|
|
|
const state = reactive<any>({
|
|
|
dialogVisible: false, // 是否显示弹窗
|
|
|
@@ -76,8 +79,6 @@ const state = reactive<any>({
|
|
|
ruleForm: {},
|
|
|
currentId: '',
|
|
|
});
|
|
|
-const storesThemeConfig = useThemeConfig();
|
|
|
-const { themeConfig } = storeToRefs(storesThemeConfig);
|
|
|
/*
|
|
|
* @param row 工单详情
|
|
|
* @description 打开弹窗
|
|
|
@@ -87,68 +88,41 @@ const openDialog = async (row: any) => {
|
|
|
state.currentId = row.id;
|
|
|
state.dialogVisible = true;
|
|
|
try {
|
|
|
- const res = await delayDetail(state.currentId);
|
|
|
- state.ruleForm = res.result ?? {};
|
|
|
+ const { result } = await delayDetail(state.currentId);
|
|
|
+ state.ruleForm = result ?? {};
|
|
|
state.ruleForm.files = transformFile(state.ruleForm.files);
|
|
|
+ await getWorkflow(result.workflowId);
|
|
|
state.loading = false;
|
|
|
} catch (e) {
|
|
|
state.loading = false;
|
|
|
}
|
|
|
};
|
|
|
-// 关闭弹窗
|
|
|
-const closeDialog = () => {
|
|
|
- state.dialogVisible = false;
|
|
|
+const formatTraces = (val: any) => {
|
|
|
+ if (!val || !val.length) return [];
|
|
|
+ val.forEach((item: any) => {
|
|
|
+ item.files = transformFile(item.files);
|
|
|
+ });
|
|
|
+ return val;
|
|
|
};
|
|
|
-// 延期审批
|
|
|
-const processAuditRef = ref<RefType>(); // 流程审批ref
|
|
|
-const onAudit = () => {
|
|
|
- const params = {
|
|
|
- id: state.ruleForm.workflowId,
|
|
|
- processType: '延期审批',
|
|
|
- orderDetail: state.ruleForm.order,
|
|
|
- extra: {
|
|
|
- dialogTitle: '延期审批',
|
|
|
- inputPlaceholder: '办理意见',
|
|
|
- annexName: '延期附件',
|
|
|
- classify: '延期上传',
|
|
|
- },
|
|
|
- };
|
|
|
- processAuditRef.value.openDialog(params);
|
|
|
-};
|
|
|
-// 流程明细
|
|
|
-const auditRecordRef = ref<RefType>(); // 审核记录ref
|
|
|
-const processDetail = () => {
|
|
|
- if (['ZiGong'].includes(themeConfig.value.appScope)) {
|
|
|
- // 自贡
|
|
|
- if (state.ruleForm?.automaticDelayNum === null) {
|
|
|
- // 没有自动延期正常查看
|
|
|
- const params = {
|
|
|
- dialogTitle: `延期记录 （${state.ruleForm.order?.title}）`,
|
|
|
- ...state.ruleForm,
|
|
|
- };
|
|
|
- auditRecordRef.value.openDialog(params);
|
|
|
- } else {
|
|
|
- // 有自动延期，则不能查看
|
|
|
- ElMessage.warning('该工单已自动延期，没有流程明细');
|
|
|
- }
|
|
|
- } else {
|
|
|
- const params = {
|
|
|
- dialogTitle: `延期记录 （${state.ruleForm.order?.title}）`,
|
|
|
- ...state.ruleForm,
|
|
|
- };
|
|
|
- auditRecordRef.value.openDialog(params);
|
|
|
+// 获取流程
|
|
|
+const tableData = ref<EmptyArrayType>([]);
|
|
|
+const getWorkflow = async (workflowId: string) => {
|
|
|
+ try {
|
|
|
+ // 查询审核记录
|
|
|
+ const { result } = await workflowTraces(workflowId);
|
|
|
+ tableData.value = formatTraces(result?.traces);
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e);
|
|
|
}
|
|
|
};
|
|
|
-// 审核成功
|
|
|
-const orderProcessSuccess = () => {
|
|
|
- emit('updateList');
|
|
|
- closeDialog();
|
|
|
-};
|
|
|
-// 审核失败
|
|
|
-const orderProcessFailed = () => {
|
|
|
- emit('updateList');
|
|
|
- closeDialog();
|
|
|
+// 关闭弹窗
|
|
|
+const closeDialog = () => {
|
|
|
+ state.dialogVisible = false;
|
|
|
};
|
|
|
+const close = ()=>{
|
|
|
+ tableData.value = [];
|
|
|
+ state.ruleForm = {};
|
|
|
+}
|
|
|
defineExpose({
|
|
|
openDialog,
|
|
|
closeDialog,
|
zhangchong