From 1dd9983f0fc8aeab4a72d0d0ad4d152d763fdc28 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: 星期五, 08 三月 2024 15:59:27 +0800
Subject: [PATCH] update 流程图和审批信息分开展示
---
src/components/Process/approvalRecord.vue | 156 +++++++++++++++++++++++++++++-----------------------
1 files changed, 87 insertions(+), 69 deletions(-)
diff --git a/src/components/Process/approvalRecord.vue b/src/components/Process/approvalRecord.vue
index eb40228..2c43dc5 100644
--- a/src/components/Process/approvalRecord.vue
+++ b/src/components/Process/approvalRecord.vue
@@ -1,37 +1,50 @@
<template>
- <el-dialog v-model="visible" draggable title="瀹℃壒璁板綍" :width="props.width" :height="props.height" append-to-body
- :close-on-click-modal="false">
- <div v-loading="loading">
- <div style="width: 100%;height: 300px;overflow: auto;position: relative;">
- <div v-for="(graphic, index) in graphicInfoVos" :key="index" :style="{
- position: 'absolute',
- left: `${graphic.x}px`,
- top: `${graphic.y}px`,
- width: `${graphic.width}px`,
- height: `${graphic.height}px`,
- cursor: 'pointer',
- zIndex: 99
- }" @mouseover="handleMouseOver(graphic)" @mouseleave="handleMouseLeave()"></div>
- <!-- 寮瑰嚭鐨� div 鍏冪礌 -->
- <div v-show="popupVisible" class="triangle" :style="{
- position: 'absolute',
- left: `${graphicX}px`,
- top: `${graphicY}px`,
- backgroundColor: '#fff',
- padding: '10px',
- zIndex: 100
- }">
- <p>瀹℃壒浜哄憳: {{ nodeInfo.nickName }}</p>
- <p>鑺傜偣鐘舵�侊細{{ nodeInfo.status }}</p>
- <p>寮�濮嬫椂闂达細{{ nodeInfo.startTime }}</p>
- <p>缁撴潫鏃堕棿锛歿{ nodeInfo.endTime }}</p>
- <p>瀹℃壒鑰楁椂锛歿{ nodeInfo.runDuration }}</p>
+ <el-dialog v-model="visible" draggable title="瀹℃壒璁板綍" :width="props.width" :height="props.height" append-to-body :close-on-click-modal="false">
+ <el-tabs v-model="tabActiveName" class="demo-tabs">
+ <el-tab-pane label="娴佺▼鍥�" name="bpmn">
+ <div v-loading="loading">
+ <div style="width: 100%; height: 300px; overflow: auto; position: relative">
+ <div
+ v-for="(graphic, index) in graphicInfoVos"
+ :key="index"
+ :style="{
+ position: 'absolute',
+ left: `${graphic.x}px`,
+ top: `${graphic.y}px`,
+ width: `${graphic.width}px`,
+ height: `${graphic.height}px`,
+ cursor: 'pointer',
+ zIndex: 99
+ }"
+ @mouseover="handleMouseOver(graphic)"
+ @mouseleave="handleMouseLeave()"
+ ></div>
+ <!-- 寮瑰嚭鐨� div 鍏冪礌 -->
+ <div
+ v-show="popupVisible"
+ class="triangle"
+ :style="{
+ position: 'absolute',
+ left: `${graphicX}px`,
+ top: `${graphicY}px`,
+ backgroundColor: '#fff',
+ padding: '10px',
+ zIndex: 100
+ }"
+ >
+ <p>瀹℃壒浜哄憳: {{ nodeInfo.nickName }}</p>
+ <p>鑺傜偣鐘舵�侊細{{ nodeInfo.status }}</p>
+ <p>寮�濮嬫椂闂达細{{ nodeInfo.startTime }}</p>
+ <p>缁撴潫鏃堕棿锛歿{ nodeInfo.endTime }}</p>
+ <p>瀹℃壒鑰楁椂锛歿{ nodeInfo.runDuration }}</p>
+ </div>
+ <el-image :src="src" />
+ </div>
</div>
- <el-image :src="src" />
- </div>
- <div>
- <el-table :data="historyList" style="width: 100%" border fit max-height="570">
- <el-table-column label="娴佺▼瀹℃壒鍘嗗彶璁板綍" align="center">
+ </el-tab-pane>
+ <el-tab-pane label="瀹℃壒淇℃伅" name="info">
+ <div>
+ <el-table :data="historyList" style="width: 100%" border fit max-height="570">
<el-table-column type="index" label="搴忓彿" align="center" width="50"></el-table-column>
<el-table-column prop="name" label="浠诲姟鍚嶇О" sortable align="center"></el-table-column>
<el-table-column prop="nickName" label="鍔炵悊浜�" sortable align="center"></el-table-column>
@@ -43,44 +56,47 @@
<el-table-column prop="comment" label="瀹℃壒鎰忚" sortable align="center"></el-table-column>
<el-table-column prop="attachmentList" label="闄勪欢" sortable align="center">
<template #default="scope">
- <el-popover placement="right" v-if="scope.row.attachmentList && scope.row.attachmentList.length > 0" :width="310" trigger="click">
- <template #reference>
- <el-button style="margin-right: 16px">闄勪欢</el-button>
- </template>
- <el-table border :data="scope.row.attachmentList">
- <el-table-column prop="name" width="202" :show-overflow-tooltip="true" label="闄勪欢鍚嶇О"></el-table-column>
- <el-table-column prop="name" width="80" align="center" :show-overflow-tooltip="true" label="鎿嶄綔">
- <template #default="tool">
- <el-button type="text" @click="handleDownload(tool.row.contentId)">涓嬭浇</el-button>
- </template>
- </el-table-column>
- </el-table>
-
- </el-popover>
+ <el-popover v-if="scope.row.attachmentList && scope.row.attachmentList.length > 0" placement="right" :width="310" trigger="click">
+ <template #reference>
+ <el-button style="margin-right: 16px">闄勪欢</el-button>
+ </template>
+ <el-table border :data="scope.row.attachmentList">
+ <el-table-column prop="name" width="202" :show-overflow-tooltip="true" label="闄勪欢鍚嶇О"></el-table-column>
+ <el-table-column prop="name" width="80" align="center" :show-overflow-tooltip="true" label="鎿嶄綔">
+ <template #default="tool">
+ <el-button type="text" @click="handleDownload(tool.row.contentId)">涓嬭浇</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-popover>
</template>
</el-table-column>
<el-table-column prop="startTime" label="寮�濮嬫椂闂�" sortable align="center"></el-table-column>
<el-table-column prop="endTime" label="缁撴潫鏃堕棿" sortable align="center"></el-table-column>
<el-table-column prop="runDuration" label="杩愯鏃堕暱" sortable align="center"></el-table-column>
- </el-table-column>
- </el-table>
- </div>
- </div>
+ </el-table>
+ </div>
+ </el-tab-pane>
+ </el-tabs>
</el-dialog>
</template>
<script lang="ts" setup>
-import { getHistoryImage, getHistoryRecord } from '@/api/workflow/processInstance';
+import processApi from '@/api/workflow/processInstance';
+import { propTypes } from '@/utils/propTypes';
+
+type NodeInfo = {
+ nickName?: string;
+ status?: string;
+ startTime?: string;
+ endTime?: string;
+ runDuration?: string;
+};
+
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-import { ref } from 'vue';
+
const props = defineProps({
- width: {
- type: String,
- default: '70%'
- },
- height: {
- type: String,
- default: '100%'
- }
+ width: propTypes.string.def('70%'),
+ height: propTypes.string.def('100%')
});
const loading = ref(false);
const src = ref('');
@@ -90,23 +106,25 @@
const graphicInfoVos = ref<Array<any>>([]);
const nodeListInfo = ref<Array<any>>([]);
const popupVisible = ref(false);
-const nodeInfo = ref<any>({});
+const nodeInfo = ref<NodeInfo>({});
const graphicX = ref<number | string>(0);
const graphicY = ref<number | string>(0);
+const tabActiveName = ref('bpmn');
+
//鍒濆鍖栨煡璇㈠鎵硅褰�
-const init = async (processInstanceId: string) => {
+const init = async (instanceId: string) => {
visible.value = true;
loading.value = true;
historyList.value = [];
graphicInfoVos.value = [];
- getHistoryImage(processInstanceId).then((res) => {
- src.value = 'data:image/png;base64,' + res.data
+ processApi.getHistoryImage(instanceId).then((res) => {
+ src.value = 'data:image/png;base64,' + res.data;
});
- getHistoryRecord(processInstanceId).then((response) => {
- historyList.value = response.data.historyRecordList;
- graphicInfoVos.value = response.data.graphicInfoVos;
- nodeListInfo.value = response.data.nodeListInfo;
- deleteReason.value = response.data.deleteReason;
+ processApi.getHistoryRecord(instanceId).then((resp) => {
+ historyList.value = resp.data.historyRecordList;
+ graphicInfoVos.value = resp.data.graphicInfoVos;
+ nodeListInfo.value = resp.data.nodeListInfo;
+ deleteReason.value = resp.data.deleteReason;
loading.value = false;
});
};
--
Gitblit v1.9.3