134 lines
5.6 KiB
Vue
134 lines
5.6 KiB
Vue
<template>
|
|
<div class="process-monitoring-page">
|
|
<a-spin :spinning="spinning" tip="请稍后...">
|
|
<a-tabs tab-position="top" v-model:activeKey="activeKey" type="card">
|
|
<a-tab-pane :key="1" :tab="'表单信息'" force-render> </a-tab-pane>
|
|
<a-tab-pane :key="2" :tab="'流程信息'"> </a-tab-pane>
|
|
<a-tab-pane :key="3" :tab="'流转记录'" style="overflow: auto"> </a-tab-pane>
|
|
<!-- <a-tab-pane :key="4" :tab="'附件汇总'">
|
|
<SummaryOfAttachments :processId="processId"/>
|
|
</a-tab-pane> -->
|
|
<a-tab-pane :key="5" :tab="'流程变更记录'"> </a-tab-pane>
|
|
<a-tab-pane :key="6" :tab="'审批记录'"> </a-tab-pane>
|
|
<a-tab-pane :key="7" :tab="'流程变量'"> </a-tab-pane>
|
|
<!-- <a-tab-pane :key="8 + index" v-for="(item, index) in predecessorTasks" :tab="item.schemaName">
|
|
<LookRelationTask
|
|
v-show="activeKey === 8 + index"
|
|
:taskId="item.taskId"
|
|
:processId="item.processId"
|
|
position="left"
|
|
/>
|
|
</a-tab-pane> -->
|
|
</a-tabs>
|
|
<div class="tab-content" v-if="dataComplete">
|
|
<processMonitoringFlowPage :data="data" :flowData="flowData" v-show="activeKey == '1'"></processMonitoringFlowPage>
|
|
<ProcessInformationWithInfo :process-id="processId" :data="data" :flowData="flowData" v-if="activeKey == '2'" :canClick="true" :key="ProcessInformationKey" />
|
|
<FlowRecord :list="data.taskRecords" :processId="processId" v-show="activeKey == '3'" />
|
|
<ChangeRecord v-if="activeKey == 5" :processId="processId" :formDataId="data.formInfos[0].formData.id" :formInfos="data.formInfos" />
|
|
<AuditRecord :processId="processId" :schemaId="schemaId" :xml="xml" v-show="activeKey == '6'" />
|
|
<ProcVarPage :processId="processId" :schemaId="schemaId" :xml="xml" v-show="activeKey == '7'" />
|
|
</div>
|
|
</a-spin>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, unref, provide } from 'vue';
|
|
|
|
import FlowRecord from '/@/views/workflow/task/components/flow/FlowRecord.vue';
|
|
import ProcessInformationWithInfo from '/@/views/workflow/task/components/flow/ProcessInformationWithInfo.vue';
|
|
import SummaryOfAttachments from '/@/views/workflow/task/components/flow/SummaryOfAttachments.vue';
|
|
import LookRelationTask from '/@/views/workflow/task/components/flow/LookRelationTask.vue';
|
|
import { SchemaTaskItem } from '/@/model/workflow/bpmnConfig';
|
|
import ChangeRecord from '/@/views/formChange/formChangeLog/index.vue';
|
|
import AuditRecord from '/@/views/auditOpt/auditRecord/index.vue';
|
|
import processMonitoringFlowPage from './processMonitoringFlowPage.vue';
|
|
// import ProcVarPage from '/@/views/editProVar/procVarManage/index.vue';
|
|
import { getApprovalProcess } from '/@/api/workflow/task';
|
|
import { Modal } from 'ant-design-vue';
|
|
|
|
import userTaskItem from '/@/views/workflow/task/hooks/userTaskItem';
|
|
const { data, initProcessData } = userTaskItem();
|
|
|
|
import { useRouter } from 'vue-router';
|
|
const router = useRouter();
|
|
const currentRoute = router.currentRoute.value;
|
|
const fullPath = currentRoute.fullPath;
|
|
const rQuery = currentRoute.query;
|
|
const rParams = currentRoute.params;
|
|
const schemaId = ref(rParams.arg1);
|
|
const processId = ref(rParams.arg2);
|
|
const ProcessInformationKey = ref(0);
|
|
|
|
const spinning = ref(false);
|
|
const dataComplete = ref(false);
|
|
|
|
const flowInfo = ref({
|
|
schemaId: schemaId.value,
|
|
processId: processId.value
|
|
});
|
|
const flowData = ref({});
|
|
provide('flowInfo', flowInfo);
|
|
provide('refreshApproveInfo', getApproveInfo);
|
|
|
|
const activeKey = ref(1);
|
|
|
|
onMounted(async () => {
|
|
await getApproveInfo();
|
|
});
|
|
async function getApproveInfo() {
|
|
try {
|
|
spinning.value = true;
|
|
let res = await getApprovalProcess('', unref(processId.value));
|
|
initProcessData(res);
|
|
flowData.value = res;
|
|
spinning.value = false;
|
|
dataComplete.value = true;
|
|
ProcessInformationKey.value++;
|
|
} catch (error) {
|
|
console.error('processMonitoringPage Error', error);
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.process-monitoring-page {
|
|
height: 100%;
|
|
width: 100%;
|
|
:deep(.ant-spin-nested-loading) {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
.ant-spin-container {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
padding: 20px;
|
|
.ant-tabs-nav {
|
|
margin: 0;
|
|
}
|
|
.top-toolbar {
|
|
display: flex;
|
|
border-bottom: none;
|
|
padding: 16px 0;
|
|
}
|
|
.tab-content {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
.process-information-with-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.flow-record-box {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|