update 审批记录v2改为v3

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',
+                    position: 'absolute',
-           left: `${graphic.x}px`,
+                    left: `${graphic.x}px`,
-           top: `${graphic.y}px`,
+                    top: `${graphic.y}px`,
-           width: `${graphic.width}px`,
+                    width: `${graphic.width}px`,
-           height: `${graphic.height}px`,
+                    height: `${graphic.height}px`,
-           cursor: 'pointer',
+                    cursor: 'pointer',
-           zIndex: 99
+                    zIndex: 99
-         }"
+                }"
           @mouseover="handleMouseOver(graphic)"
           @mouseleave="handleMouseLeave()"
         ></div>
@@ -22,13 +22,13 @@
           v-show="popupVisible"
           class="triangle"
           :style="{
-              position: 'absolute',
+                    position: 'absolute',
-              left: `${graphicX}px`,
+                    left: `${graphicX}px`,
-              top: `${graphicY}px`,
+                    top: `${graphicY}px`,
-              backgroundColor: '#fff',
+                    backgroundColor: '#fff',
-              padding: '10px',
+                    padding: '10px',
-              zIndex: 100
+                    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 {
+import { ref } from 'vue';
-  props: {
+const props = defineProps({
     width: {
-      type: String,
+        type: String,
-      default: '70%'
+        default: '70%'
     },
     height: {
-      type: String,
+        type: String,
-      default: '100%'
+        default: '100%'
     }
-  },
+});
-  data() {
+const loading = ref(false);
-    return {
+const src = ref('');
-      loading: false,
+const visible = ref(false);
-      src: '',
+const historyList = ref<Array<any>>([]);
-      visible: false,
+const deleteReason = ref<string>('');
-      historyList: [],
+const graphicInfoVos = ref<Array<any>>([]);
-      deleteReason: '',
+const nodeListInfo = ref<Array<any>>([]);
-      graphicInfoVos: [],
+const popupVisible = ref(false);
-      nodeListInfo: [],
+const nodeInfo = ref<any>({});
-      popupVisible: false,
+const graphicX = ref<number | string>(0);
-      nodeInfo: {},
+const graphicY = ref<number | string>(0);
-      graphicX: '',
+//初始化查询审批记录
-      graphicY: ''
+const init = async (processInstanceId: string) => {
-    };
+    visible.value = true;
-  },
+    loading.value = true;
-  methods: {
+    historyList.value = [];
-    init(processInstanceId) {
+    graphicInfoVos.value = [];
-      this.visible = true;
+    src.value = getHistoryProcessImage(processInstanceId);
-      this.loading = true;
+    getHistoryRecord(processInstanceId).then((response) => {
-      this.historyList = [];
+        historyList.value = response.data.historyRecordList;
-      this.graphicInfoVos = [];
+        graphicInfoVos.value = response.data.graphicInfoVos;
-      this.src = getHistoryProcessImage(processInstanceId);
+        nodeListInfo.value = response.data.nodeListInfo;
-      getHistoryRecord(processInstanceId).then((response) => {
+        deleteReason.value = response.data.deleteReason;
-        this.historyList = response.data.historyRecordList;
+        loading.value = false;
-        this.graphicInfoVos = response.data.graphicInfoVos;
+    });
-        this.nodeListInfo = response.data.nodeListInfo;
+}
-        this.deleteReason = response.data.deleteReason;
+//悬浮事件
-        this.loading = false;
+const handleMouseOver = async (graphic: any) => {
-      });
+    graphicX.value = graphic.x + graphic.width + 10;
-    },
+    graphicY.value = graphic.y - graphic.height + -10;
-    handleMouseOver(graphic) {
+    nodeInfo.value = {};
-      this.graphicX = graphic.x + graphic.width + 10;
+    if (nodeListInfo.value && nodeListInfo.value.length > 0) {
-      this.graphicY = graphic.y - graphic.height + -10;
+        let info = nodeListInfo.value.find((e: any) => e.taskDefinitionKey == graphic.nodeId);
-      this.nodeInfo = {};
-      if (this.nodeListInfo && this.nodeListInfo.length > 0) {
-        let info = this.nodeListInfo.find((e) => e.taskDefinitionKey == graphic.nodeId);
         if (info) {
-          this.nodeInfo = {
+            nodeInfo.value = {
-            nickName: info.nickName,
+                nickName: info.nickName,
-            status: info.status,
+                status: info.status,
-            startTime: info.startTime,
+                startTime: info.startTime,
-            endTime: info.endTime,
+                endTime: info.endTime,
-            runDuration: info.runDuration
+                runDuration: info.runDuration
-          };
+            };
-          this.popupVisible = true;
+            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);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-  border-radius: 6px;
+    border-radius: 6px;
 }
 
 .triangle::after {
-  content: ' ';
+    content: ' ';
-  position: absolute;
+    position: absolute;
-  top: 8em;
+    top: 8em;
-  right: 215px;
+    right: 215px;
-  border: 15px solid;
+    border: 15px solid;
-  border-color: transparent #fff transparent transparent;
+    border-color: transparent #fff transparent transparent;
 }
 </style>

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>
-  

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>