From dbf21954682892a67b09e2737c0c88ee76a966d0 Mon Sep 17 00:00:00 2001
From: songgaoshuai <1742057357@qq.com>
Date: Fri, 28 Jul 2023 13:45:36 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E5=AE=A1=E6=89=B9=E8=AE=B0=E5=BD=95v2?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BAv3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Process/approvalRecord.vue | 172 +++++++++++-----------
 src/components/Process/submitVerify.vue   |   5 +-
 src/views/workflow/category/index.vue     |   4 +-
 3 files changed, 91 insertions(+), 90 deletions(-)

diff --git a/src/components/Process/approvalRecord.vue b/src/components/Process/approvalRecord.vue
index 1e59f20..27d1694 100644
--- a/src/components/Process/approvalRecord.vue
+++ b/src/components/Process/approvalRecord.vue
@@ -1,19 +1,19 @@
 <template>
-  <el-dialog v-model="visible" draggable title="审批记录" :width="width" :height="height" append-to-body :close-on-click-modal="false">
+  <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
-         }"
+          :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>
@@ -21,14 +21,14 @@
         <div
           v-show="popupVisible"
           class="triangle"
-          :style="{ 
-              position: 'absolute',
-              left: `${graphicX}px`,
-              top: `${graphicY}px`,
-              backgroundColor: '#fff',
-              padding: '10px',
-              zIndex: 100
-            }"
+          :style="{
+                    position: 'absolute',
+                    left: `${graphicX}px`,
+                    top: `${graphicY}px`,
+                    backgroundColor: '#fff',
+                    padding: '10px',
+                    zIndex: 100
+                }"
         >
           <p>审批人员: {{ nodeInfo.nickName }}</p>
           <p>节点状态：{{ nodeInfo.status }}</p>
@@ -46,7 +46,7 @@
             <el-table-column prop="nickName" label="办理人" sortable align="center"></el-table-column>
             <el-table-column label="状态" sortable align="center">
               <template #default="scope">
-                <el-tag type="success">{{scope.row.statusName}}</el-tag>
+                <el-tag type="success">{{ scope.row.statusName }}</el-tag>
               </template>
             </el-table-column>
             <el-table-column prop="comment" label="审批意见" sortable align="center"></el-table-column>
@@ -59,85 +59,87 @@
     </div>
   </el-dialog>
 </template>
-<script>
+<script lang="ts" setup>
 import { getHistoryProcessImage, getHistoryRecord } from '@/api/workflow/processInstance';
-export default {
-  props: {
+import { ref } from 'vue';
+const props = defineProps({
     width: {
-      type: String,
-      default: '70%'
+        type: String,
+        default: '70%'
     },
     height: {
-      type: String,
-      default: '100%'
+        type: String,
+        default: '100%'
     }
-  },
-  data() {
-    return {
-      loading: false,
-      src: '',
-      visible: false,
-      historyList: [],
-      deleteReason: '',
-      graphicInfoVos: [],
-      nodeListInfo: [],
-      popupVisible: false,
-      nodeInfo: {},
-      graphicX: '',
-      graphicY: ''
-    };
-  },
-  methods: {
-    init(processInstanceId) {
-      this.visible = true;
-      this.loading = true;
-      this.historyList = [];
-      this.graphicInfoVos = [];
-      this.src = getHistoryProcessImage(processInstanceId);
-      getHistoryRecord(processInstanceId).then((response) => {
-        this.historyList = response.data.historyRecordList;
-        this.graphicInfoVos = response.data.graphicInfoVos;
-        this.nodeListInfo = response.data.nodeListInfo;
-        this.deleteReason = response.data.deleteReason;
-        this.loading = false;
-      });
-    },
-    handleMouseOver(graphic) {
-      this.graphicX = graphic.x + graphic.width + 10;
-      this.graphicY = graphic.y - graphic.height + -10;
-      this.nodeInfo = {};
-      if (this.nodeListInfo && this.nodeListInfo.length > 0) {
-        let info = this.nodeListInfo.find((e) => e.taskDefinitionKey == graphic.nodeId);
+});
+const loading = ref(false);
+const src = ref('');
+const visible = ref(false);
+const historyList = ref<Array<any>>([]);
+const deleteReason = ref<string>('');
+const graphicInfoVos = ref<Array<any>>([]);
+const nodeListInfo = ref<Array<any>>([]);
+const popupVisible = ref(false);
+const nodeInfo = ref<any>({});
+const graphicX = ref<number | string>(0);
+const graphicY = ref<number | string>(0);
+//初始化查询审批记录
+const init = async (processInstanceId: string) => {
+    visible.value = true;
+    loading.value = true;
+    historyList.value = [];
+    graphicInfoVos.value = [];
+    src.value = getHistoryProcessImage(processInstanceId);
+    getHistoryRecord(processInstanceId).then((response) => {
+        historyList.value = response.data.historyRecordList;
+        graphicInfoVos.value = response.data.graphicInfoVos;
+        nodeListInfo.value = response.data.nodeListInfo;
+        deleteReason.value = response.data.deleteReason;
+        loading.value = false;
+    });
+}
+//悬浮事件
+const handleMouseOver = async (graphic: any) => {
+    graphicX.value = graphic.x + graphic.width + 10;
+    graphicY.value = graphic.y - graphic.height + -10;
+    nodeInfo.value = {};
+    if (nodeListInfo.value && nodeListInfo.value.length > 0) {
+        let info = nodeListInfo.value.find((e: any) => e.taskDefinitionKey == graphic.nodeId);
         if (info) {
-          this.nodeInfo = {
-            nickName: info.nickName,
-            status: info.status,
-            startTime: info.startTime,
-            endTime: info.endTime,
-            runDuration: info.runDuration
-          };
-          this.popupVisible = true;
+            nodeInfo.value = {
+                nickName: info.nickName,
+                status: info.status,
+                startTime: info.startTime,
+                endTime: info.endTime,
+                runDuration: info.runDuration
+            };
+            popupVisible.value = true;
         }
-      }
-    },
-    handleMouseLeave() {
-      this.popupVisible = false;
     }
-  }
-};
+}
+//关闭
+const handleMouseLeave = async () => {
+    popupVisible.value = false;
+}
+/**
+ * 对外暴露子组建方法
+ */
+ defineExpose({
+  init
+});
 </script>
 <style scoped>
 .triangle {
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-  border-radius: 6px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+    border-radius: 6px;
 }
 
 .triangle::after {
-  content: ' ';
-  position: absolute;
-  top: 8em;
-  right: 215px;
-  border: 15px solid;
-  border-color: transparent #fff transparent transparent;
+    content: ' ';
+    position: absolute;
+    top: 8em;
+    right: 215px;
+    border: 15px solid;
+    border-color: transparent #fff transparent transparent;
 }
 </style>
diff --git a/src/components/Process/submitVerify.vue b/src/components/Process/submitVerify.vue
index d84a427..7ff0b1a 100644
--- a/src/components/Process/submitVerify.vue
+++ b/src/components/Process/submitVerify.vue
@@ -32,9 +32,9 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 //遮罩层
 const loading = ref(true);
 //流程状态
-const businessStatus = ref('');
+const businessStatus = ref<string>('');
 //任务id
-const taskId = ref('');
+const taskId = ref<string>('');
 
 const dialog = reactive<DialogOption>({
   visible: false,
@@ -93,4 +93,3 @@ defineExpose({
   openDialog
 });
 </script>
-  
\ No newline at end of file
diff --git a/src/views/workflow/category/index.vue b/src/views/workflow/category/index.vue
index 971e1e5..8da4ddb 100644
--- a/src/views/workflow/category/index.vue
+++ b/src/views/workflow/category/index.vue
@@ -57,7 +57,7 @@
     </el-card>
     <!-- 添加或修改流程分类对话框 -->
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
-      <el-form ref="categoryFormRef" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="categoryFormRef" :model="form" :rules="rules" label-width="80px" v-loading="loading">
         <el-form-item label="父级分类" prop="parentId">
           <el-tree-select
             v-model="form.parentId"
@@ -75,7 +75,7 @@
           <el-input v-model="form.categoryCode" placeholder="请输入分类编码" />
         </el-form-item>
         <el-form-item label="排序" prop="sortNum">
-          <el-input-number v-model="form.sortNum" placeholder="请输入排序" controls-position="right" :min="0"/>
+          <el-input-number v-model="form.sortNum" placeholder="请输入排序" controls-position="right" :min="0" />
         </el-form-item>
       </el-form>
       <template #footer>