update 审批记录v2改为v3

src/components/Process/approvalRecord.vue

@@ -1,5 +1,5 @@
 <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
@@ -59,10 +59,10 @@
     </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,
         default: '70%'
@@ -71,60 +71,62 @@ export default {
         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;
 });
-    },
+const loading = ref(false);
-    handleMouseOver(graphic) {
+const src = ref('');
-      this.graphicX = graphic.x + graphic.width + 10;
+const visible = ref(false);
-      this.graphicY = graphic.y - graphic.height + -10;
+const historyList = ref<Array<any>>([]);
-      this.nodeInfo = {};
+const deleteReason = ref<string>('');
-      if (this.nodeListInfo && this.nodeListInfo.length > 0) {
+const graphicInfoVos = ref<Array<any>>([]);
-        let info = this.nodeListInfo.find((e) => e.taskDefinitionKey == graphic.nodeId);
+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 = {
+            nodeInfo.value = {
                 nickName: info.nickName,
                 status: info.status,
                 startTime: info.startTime,
                 endTime: info.endTime,
                 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 {

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"