From a0c3e7bd00228bc302185acd6b78c956eed0a166 Mon Sep 17 00:00:00 2001
From: cxc <quantulr@outlook.com>
Date: Tue, 20 Dec 2022 14:34:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=9D=E5=AD=98=E3=80=81=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   7 +-
 src/components/ProcessDesigner/index.vue      |  13 +-
 src/components/ProcessViewer/index.vue        | 574 +++++++++++-------
 .../package/designer/ProcessDesigner.vue      |  60 +-
 .../extension-moddle/flowable/index.js        |   4 +-
 src/plugins/package/designer/test.vue         |   0
 src/plugins/package/highlight/index.js        |   8 +-
 src/plugins/package/penal/PropertiesPanel.vue | 129 ++--
 .../package/penal/base/ElementBaseInfo.vue    |  15 +-
 .../package/penal/form/ElementForm.vue        |   2 +-
 .../penal/listeners/ElementListeners.vue      |  13 +-
 .../penal/listeners/UserTaskListeners.vue     | 323 ++++++++--
 .../package/penal/listeners/template.js       |  39 +-
 .../penal/other/ElementOtherConfig.vue        |  73 +--
 .../penal/properties/ElementProperties.vue    | 283 +++++----
 .../penal/signal-message/SignalAndMessage.vue | 152 ++---
 .../task/task-components/ReceiveTask.vue      |   2 +-
 src/plugins/package/theme/process-panel.scss  |   5 +-
 src/utils/request.js                          | 245 +++++---
 src/views/flowable/form/index.vue             |   6 +-
 src/views/flowable/model/index.vue            | 204 ++++---
 21 files changed, 1301 insertions(+), 856 deletions(-)
 delete mode 100644 src/plugins/package/designer/test.vue

diff --git a/package.json b/package.json
index 9b48b76..467eb6f 100644
--- a/package.json
+++ b/package.json
@@ -22,12 +22,11 @@
     "axios": "0.27.2",
     "bpmn-js-token-simulation": "0.10.0",
     "clipboard": "^2.0.11",
-    "diagram-js": "^11.4.1",
     "echarts": "5.4.0",
     "element-plus": "2.2.21",
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",
-    "highlight.js": "^11.7.0",
+    "highlight.js": "10.5.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.3.1",
     "nprogress": "0.2.0",
@@ -47,8 +46,8 @@
     "@vue/babel-helper-vue-transform-on": "^1.0.2",
     "@vue/compiler-sfc": "3.2.45",
     "bpmn-js": "7.4.0",
-    "bpmn-js-properties-panel": "^1.13.1",
-    "camunda-bpmn-moddle": "^7.0.1",
+    "bpmn-js-properties-panel": "0.37.2",
+    "camunda-bpmn-moddle": "4.4.1",
     "sass": "1.56.1",
     "unplugin-auto-import": "0.11.4",
     "vite": "3.2.3",
diff --git a/src/components/ProcessDesigner/index.vue b/src/components/ProcessDesigner/index.vue
index a65b2e2..6672974 100644
--- a/src/components/ProcessDesigner/index.vue
+++ b/src/components/ProcessDesigner/index.vue
@@ -5,7 +5,7 @@
       v-bind="controlForm"
       keyboard
       ref="processDesigner"
-      :events="[
+      :eventlist="[
         'element.click',
         'connection.added',
         'connection.removed',
@@ -28,10 +28,13 @@
 import BmpnProcessPenal from "@/plugins/package/penal";
 import BpmnProcessDesigner from "@/plugins/package/designer";
 import "@/plugins/package/theme/index.scss";
+// import vuePlugin from "@/plugins/package/highlight";
+// import "highlight.js/styles/atom-one-dark-reasonable.css";
 // import "highlight.js/styles/atom-one-dark-reasonable.css";
 import CustomContentPadProvider from "@/plugins/package/designer/plugins/content-pad";
 import CustomPaletteProvider from "@/plugins/package/designer/plugins/palette";
 import { ref } from "vue";
+
 const props = defineProps({
   bpmnXml: {
     type: String,
@@ -43,12 +46,12 @@ const props = defineProps({
   },
 });
 const { bpmnXml, designerForm } = toRefs(props);
+let element;
 const modeler = ref(null);
 const height = ref(document.documentElement.clientHeight - 94.5 + "px;");
 const xmlString = ref(bpmnXml.value);
 const emit = defineEmits(["save"]);
 const data = reactive({
-  element: null,
   controlForm: {
     processId: designerForm.value.processKey || "",
     processName: designerForm.value.processName || "",
@@ -60,16 +63,14 @@ const data = reactive({
     additionalModel: [CustomContentPadProvider, CustomPaletteProvider],
   },
 });
-const { controlForm, element } = toRefs(data);
+const { controlForm } = toRefs(data);
 
 function elementClick(elementArgv) {
-  element.value = elementArgv;
-  console.log(elementArgv);
+  element = elementArgv;
 }
 function initModeler(modelerArgv) {
   setTimeout(() => {
     modeler.value = modelerArgv;
-    console.log(modeler.value.get("eventBus"), "71");
   }, 10);
 }
 function handlerEvent(eventName, element) {}
diff --git a/src/components/ProcessViewer/index.vue b/src/components/ProcessViewer/index.vue
index 3bc6594..c02d26e 100644
--- a/src/components/ProcessViewer/index.vue
+++ b/src/components/ProcessViewer/index.vue
@@ -1,49 +1,183 @@
 <template>
   <div class="process-viewer">
-    <div class="process-canvas" style="height: 100%;" ref="processCanvas" v-show="!isLoading" />
+    <div
+      class="process-canvas"
+      style="height: 100%"
+      ref="processCanvas"
+      v-show="!isLoading"
+    />
     <!-- 自定义箭头样式，用于成功状态下流程连线箭头 -->
     <defs ref="customSuccessDefs">
-      <marker id="sequenceflow-end-white-success" viewBox="0 0 20 20" refX="11" refY="10" markerWidth="10" markerHeight="10" orient="auto">
-        <path class="success-arrow" d="M 1 5 L 11 10 L 1 15 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;"></path>
+      <marker
+        id="sequenceflow-end-white-success"
+        viewBox="0 0 20 20"
+        refX="11"
+        refY="10"
+        markerWidth="10"
+        markerHeight="10"
+        orient="auto"
+      >
+        <path
+          class="success-arrow"
+          d="M 1 5 L 11 10 L 1 15 Z"
+          style="
+            stroke-width: 1px;
+            stroke-linecap: round;
+            stroke-dasharray: 10000, 1;
+          "
+        ></path>
       </marker>
-      <marker id="conditional-flow-marker-white-success" viewBox="0 0 20 20" refX="-1" refY="10" markerWidth="10" markerHeight="10" orient="auto">
-        <path class="success-conditional" d="M 0 10 L 8 6 L 16 10 L 8 14 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;"></path>
+      <marker
+        id="conditional-flow-marker-white-success"
+        viewBox="0 0 20 20"
+        refX="-1"
+        refY="10"
+        markerWidth="10"
+        markerHeight="10"
+        orient="auto"
+      >
+        <path
+          class="success-conditional"
+          d="M 0 10 L 8 6 L 16 10 L 8 14 Z"
+          style="
+            stroke-width: 1px;
+            stroke-linecap: round;
+            stroke-dasharray: 10000, 1;
+          "
+        ></path>
       </marker>
     </defs>
     <!-- 自定义箭头样式，用于失败状态下流程连线箭头 -->
     <defs ref="customFailDefs">
-      <marker id="sequenceflow-end-white-fail" viewBox="0 0 20 20" refX="11" refY="10" markerWidth="10" markerHeight="10" orient="auto">
-        <path class="fail-arrow" d="M 1 5 L 11 10 L 1 15 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;"></path>
+      <marker
+        id="sequenceflow-end-white-fail"
+        viewBox="0 0 20 20"
+        refX="11"
+        refY="10"
+        markerWidth="10"
+        markerHeight="10"
+        orient="auto"
+      >
+        <path
+          class="fail-arrow"
+          d="M 1 5 L 11 10 L 1 15 Z"
+          style="
+            stroke-width: 1px;
+            stroke-linecap: round;
+            stroke-dasharray: 10000, 1;
+          "
+        ></path>
       </marker>
-      <marker id="conditional-flow-marker-white-fail" viewBox="0 0 20 20" refX="-1" refY="10" markerWidth="10" markerHeight="10" orient="auto">
-        <path class="fail-conditional" d="M 0 10 L 8 6 L 16 10 L 8 14 Z" style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1;"></path>
+      <marker
+        id="conditional-flow-marker-white-fail"
+        viewBox="0 0 20 20"
+        refX="-1"
+        refY="10"
+        markerWidth="10"
+        markerHeight="10"
+        orient="auto"
+      >
+        <path
+          class="fail-conditional"
+          d="M 0 10 L 8 6 L 16 10 L 8 14 Z"
+          style="
+            stroke-width: 1px;
+            stroke-linecap: round;
+            stroke-dasharray: 10000, 1;
+          "
+        ></path>
       </marker>
     </defs>
     <!-- 已完成节点悬浮弹窗 -->
-    <el-dialog class="comment-dialog" :title="dlgTitle || '审批记录'" :visible.sync="dialogVisible">
+    <el-dialog
+      class="comment-dialog"
+      :title="dlgTitle || '审批记录'"
+      v-model="dialogVisible"
+    >
       <el-row>
-        <el-table :data="taskCommentList" size="mini" border header-cell-class-name="table-header-gray">
-          <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" />
-          <el-table-column label="候选办理" prop="candidate" width="150px" align="center"/>
-          <el-table-column label="实际办理" prop="assigneeName" width="100px" align="center"/>
-          <el-table-column label="处理时间" prop="createTime" width="140px" align="center"/>
-          <el-table-column label="办结时间" prop="finishTime" width="140px" align="center" />
-          <el-table-column label="耗时" prop="duration" width="100px" align="center"/>
+        <el-table
+          :data="taskCommentList"
+          size="mini"
+          border
+          header-cell-class-name="table-header-gray"
+        >
+          <el-table-column
+            label="序号"
+            header-align="center"
+            align="center"
+            type="index"
+            width="55px"
+          />
+          <el-table-column
+            label="候选办理"
+            prop="candidate"
+            width="150px"
+            align="center"
+          />
+          <el-table-column
+            label="实际办理"
+            prop="assigneeName"
+            width="100px"
+            align="center"
+          />
+          <el-table-column
+            label="处理时间"
+            prop="createTime"
+            width="140px"
+            align="center"
+          />
+          <el-table-column
+            label="办结时间"
+            prop="finishTime"
+            width="140px"
+            align="center"
+          />
+          <el-table-column
+            label="耗时"
+            prop="duration"
+            width="100px"
+            align="center"
+          />
           <el-table-column label="审批意见" align="center">
-            <template slot-scope="scope">
-              {{scope.row.commentList&&scope.row.commentList[0]?scope.row.commentList[0].fullMessage:''}}
+            <template #default="{ row }">
+              {{
+                row.commentList && row.commentList[0]
+                  ? row.commentList[0].fullMessage
+                  : ""
+              }}
             </template>
           </el-table-column>
         </el-table>
       </el-row>
     </el-dialog>
-    <div style="position: absolute; top: 0px; left: 0px; width: 100%;">
+    <div style="position: absolute; top: 0px; left: 0px; width: 100%">
       <el-row type="flex" justify="end">
-        <el-button-group key="scale-control" size="medium">
-          <el-button size="medium" type="default" :plain="true" :disabled="defaultZoom <= 0.3" icon="el-icon-zoom-out" @click="processZoomOut()" />
-          <el-button size="medium" type="default" style="width: 90px;">{{ Math.floor(this.defaultZoom * 10 * 10) + "%" }}</el-button>
-          <el-button size="medium" type="default" :plain="true" :disabled="defaultZoom >= 3.9" icon="el-icon-zoom-in" @click="processZoomIn()" />
-          <el-button size="medium" type="default" icon="el-icon-c-scale-to-original" @click="processReZoom()" />
+        <el-button-group key="scale-control" size="default">
+          <el-button
+            size="default"
+            type="default"
+            :plain="true"
+            :disabled="defaultZoom <= 0.3"
+            icon="zoom-out"
+            @click="processZoomOut()"
+          />
+          <el-button size="default" type="default" style="width: 90px">{{
+            Math.floor(defaultZoom * 10 * 10) + "%"
+          }}</el-button>
+          <el-button
+            size="default"
+            type="default"
+            :plain="true"
+            :disabled="defaultZoom >= 3.9"
+            icon="zoom-in"
+            @click="processZoomIn()"
+          />
+          <el-button
+            size="default"
+            type="default"
+            icon="scale-to-original"
+            @click="processReZoom()"
+          />
           <slot />
         </el-button-group>
       </el-row>
@@ -51,209 +185,215 @@
   </div>
 </template>
 
-<script>
-import '@/plugins/package/theme/index.scss';
-import BpmnViewer from 'bpmn-js/lib/Viewer';
-import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
-
-export default {
-  props: {
-    xml: {
-      type: String
-    },
-    finishedInfo: {
-      type: Object
-    },
-    // 所有节点审批记录
-    allCommentList: {
-      type: Array
-    }
+<script setup name="">
+import "@/plugins/package/theme/index.scss";
+import BpmnViewer from "bpmn-js/lib/Viewer";
+import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas";
+import { nextTick, onBeforeUnmount, toRefs } from "vue";
+const props = defineProps({
+  xml: {
+    type: String,
   },
-  data () {
-    return {
-      dialogVisible: false,
-      dlgTitle: undefined,
-      defaultZoom: 1,
-      // 是否正在加载流程图
-      isLoading: false,
-      bpmnViewer: undefined,
-      // 已完成流程元素
-      processNodeInfo: undefined,
-      // 当前任务id
-      selectTaskId: undefined,
-      // 任务节点审批记录
-      taskCommentList: [],
-      // 已完成任务悬浮延迟Timer
-      hoverTimer: null
-    }
+  finishedInfo: {
+    type: Object,
   },
-  watch: {
-    xml: {
-      handler(newXml) {
-        this.importXML(newXml);
-      },
-      immediate: true
-    },
-    finishedInfo: {
-      handler(newInfo) {
-        this.setProcessStatus(newInfo);
-      },
-      immediate: true
-    }
+  // 所有节点审批记录
+  allCommentList: {
+    type: Array,
   },
-  created() {
-    this.$nextTick(() => {
-      this.importXML(this.xml)
-      this.setProcessStatus(this.finishedInfo);
-    })
+});
+
+const { xml, finishedInfo, allCommentList } = toRefs(props);
+const dialogVisible = ref(false);
+const dlgTitle = ref(undefined);
+const defaultZoom = ref(1);
+// 是否正在加载流程图
+const isLoading = ref(false);
+const bpmnViewer = ref(undefined);
+// 已完成流程元素
+const processNodeInfo = ref(undefined);
+// 当前任务id
+const selectTaskId = ref(undefined);
+// 任务节点审批记录
+const taskCommentList = ref([]);
+// 已完成任务悬浮延迟Timer
+const hoverTimer = ref(null);
+
+const processCanvas = ref();
+const customFailDefs = ref();
+const customSuccessDefs = ref();
+
+watch(
+  xml,
+  (newXml) => {
+    importXML(newXml);
   },
-  methods: {
-    processReZoom() {
-      this.defaultZoom = 1;
-      this.bpmnViewer.get('canvas').zoom('fit-viewport', 'auto');
-    },
-    processZoomIn(zoomStep = 0.1) {
-      let newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100;
-      if (newZoom > 4) {
-        throw new Error('[Process Designer Warn ]: The zoom ratio cannot be greater than 4');
-      }
-      this.defaultZoom = newZoom;
-      this.bpmnViewer.get('canvas').zoom(this.defaultZoom);
-    },
-    processZoomOut(zoomStep = 0.1) {
-      let newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100;
-      if (newZoom < 0.2) {
-        throw new Error('[Process Designer Warn ]: The zoom ratio cannot be less than 0.2');
-      }
-      this.defaultZoom = newZoom;
-      this.bpmnViewer.get('canvas').zoom(this.defaultZoom);
-    },
-    getOperationTagType(type) {
-      return 'success';
-      // switch (type) {
-      //   case this.SysFlowTaskOperationType.AGREE:
-      //   case this.SysFlowTaskOperationType.MULTI_AGREE:
-      //     return 'success';
-      //   case this.SysFlowTaskOperationType.REFUSE:
-      //   case this.SysFlowTaskOperationType.PARALLEL_REFUSE:
-      //   case this.SysFlowTaskOperationType.MULTI_REFUSE:
-      //     return 'warning';
-      //   case this.SysFlowTaskOperationType.STOP:
-      //     return 'danger'
-      //   default:
-      //     return 'primary';
-      // }
-    },
-    // 流程图预览清空
-    clearViewer() {
-      if (this.$refs.processCanvas) {
-        this.$refs.processCanvas.innerHTML = '';
-      }
-      if (this.bpmnViewer) {
-        this.bpmnViewer.destroy();
-      }
-      this.bpmnViewer = null;
-    },
-    // 添加自定义箭头
-    addCustomDefs() {
-      const canvas = this.bpmnViewer.get('canvas');
-      const svg = canvas._svg;
-      const customSuccessDefs = this.$refs.customSuccessDefs;
-      const customFailDefs = this.$refs.customFailDefs;
-      svg.appendChild(customSuccessDefs);
-      svg.appendChild(customFailDefs);
-    },
-    // 任务悬浮弹窗
-    onSelectElement(element) {
-      this.selectTaskId = undefined;
-      this.dlgTitle = undefined;
+  { immediate: true }
+);
 
-      if (this.processNodeInfo == null || this.processNodeInfo.finishedTaskSet == null) return;
+watch(
+  finishedInfo,
+  (newInfo) => {
+    setProcessStatus(newInfo);
+  },
+  { immediate: true }
+);
+nextTick(() => {
+  importXML(xml.value);
+  setProcessStatus(finishedInfo.value);
+});
+function processReZoom() {
+  defaultZoom.value = 1;
+  bpmnViewer.value.get("canvas").zoom("fit-viewport", "auto");
+}
+function processZoomIn(zoomStep = 0.1) {
+  let newZoom = Math.floor(defaultZoom.value * 100 + zoomStep * 100) / 100;
+  if (newZoom > 4) {
+    throw new Error(
+      "[Process Designer Warn ]: The zoom ratio cannot be greater than 4"
+    );
+  }
+  defaultZoom.value = newZoom;
+  bpmnViewer.value.get("canvas").zoom(defaultZoom.value);
+}
+function processZoomOut(zoomStep = 0.1) {
+  let newZoom = Math.floor(defaultZoom.value * 100 - zoomStep * 100) / 100;
+  if (newZoom < 0.2) {
+    throw new Error(
+      "[Process Designer Warn ]: The zoom ratio cannot be less than 0.2"
+    );
+  }
+  defaultZoom.value = newZoom;
+  bpmnViewer.value.get("canvas").zoom(defaultZoom.value);
+}
 
-      if (element == null || this.processNodeInfo.finishedTaskSet.indexOf(element.id) === -1) {
-        return;
-      }
+// 流程图预览清空
+function clearViewer() {
+  if (processCanvas.value) {
+    processCanvas.value.innerHTML = "";
+  }
+  if (bpmnViewer.value) {
+    bpmnViewer.value.destroy();
+  }
+  bpmnViewer.value = null;
+}
+// 添加自定义箭头
+function addCustomDefs() {
+  const canvas = bpmnViewer.value.get("canvas");
+  const svg = canvas._svg;
+  // const customSuccessDefs = customSuccessDefs.value;
+  // const customFailDefs = customFailDefs.value;
+  svg.appendChild(customSuccessDefs.value);
+  svg.appendChild(customFailDefs.value);
+}
+// 任务悬浮弹窗
+function onSelectElement(element) {
+  selectTaskId.value = undefined;
+  dlgTitle.value = undefined;
 
-      this.selectTaskId = element.id;
-      this.dlgTitle = element.businessObject ? element.businessObject.name : undefined;
-      // 计算当前悬浮任务审批记录，如果记录为空不显示弹窗
-      this.taskCommentList = (this.allCommentList || []).filter(item => {
-        return item.activityId === this.selectTaskId;
+  if (
+    processNodeInfo.value == null ||
+    processNodeInfo.value.finishedTaskSet == null
+  )
+    return;
+
+  if (
+    element == null ||
+    processNodeInfo.value.finishedTaskSet.indexOf(element.id) === -1
+  ) {
+    return;
+  }
+
+  selectTaskId.value = element.id;
+  dlgTitle.value = element.businessObject
+    ? element.businessObject.name
+    : undefined;
+  // 计算当前悬浮任务审批记录，如果记录为空不显示弹窗
+  taskCommentList.value = (allCommentList.value || []).filter((item) => {
+    return item.activityId === selectTaskId.value;
+  });
+  dialogVisible.value = true;
+}
+// 显示流程图
+async function importXML(xml) {
+  clearViewer();
+  if (xml != null && xml !== "") {
+    try {
+      bpmnViewer.value = new BpmnViewer({
+        additionalModules: [
+          // 移动整个画布
+          MoveCanvasModule,
+        ],
+        container: processCanvas.value,
+      });
+      // 任务节点悬浮事件
+      bpmnViewer.value.on("element.click", ({ element }) => {
+        onSelectElement(element);
       });
-      this.dialogVisible = true;
-    },
-    // 显示流程图
-    async importXML(xml) {
-      this.clearViewer();
-      if (xml != null && xml !== '') {
-        try {
-          this.bpmnViewer = new BpmnViewer({
-            additionalModules: [
-              // 移动整个画布
-              MoveCanvasModule
-            ],
-            container: this.$refs.processCanvas,
-          });
-          // 任务节点悬浮事件
-          this.bpmnViewer.on('element.click', ({ element }) => {
-            this.onSelectElement(element);
-          });
 
-          this.isLoading = true;
-          await this.bpmnViewer.importXML(xml);
-          this.addCustomDefs();
-        } catch (e) {
-          this.clearViewer();
-        } finally {
-          this.isLoading = false;
-          this.setProcessStatus(this.processNodeInfo);
-        }
-      }
-    },
-    // 设置流程图元素状态
-    setProcessStatus (processNodeInfo) {
-      this.processNodeInfo = processNodeInfo;
-      if (this.isLoading || this.processNodeInfo == null || this.bpmnViewer == null) return;
-      let { finishedTaskSet, rejectedTaskSet, unfinishedTaskSet, finishedSequenceFlowSet } = this.processNodeInfo;
-      const canvas = this.bpmnViewer.get('canvas');
-      const elementRegistry = this.bpmnViewer.get('elementRegistry');
-      if (Array.isArray(finishedSequenceFlowSet)) {
-        finishedSequenceFlowSet.forEach(item => {
-          if (item != null) {
-            canvas.addMarker(item, 'success');
-            let element = elementRegistry.get(item);
-            const conditionExpression = element.businessObject.conditionExpression;
-            if (conditionExpression) {
-              canvas.addMarker(item, 'condition-expression');
-            }
-          }
-        });
-      }
-      if (Array.isArray(finishedTaskSet)) {
-        finishedTaskSet.forEach(item => canvas.addMarker(item, 'success'));
-      }
-      if (Array.isArray(unfinishedTaskSet)) {
-        unfinishedTaskSet.forEach(item => canvas.addMarker(item, 'primary'));
-      }
-      if (Array.isArray(rejectedTaskSet)) {
-        rejectedTaskSet.forEach(item => {
-          if (item != null) {
-            let element = elementRegistry.get(item);
-            if (element.type.includes('Task')) {
-              canvas.addMarker(item, 'danger');
-            } else {
-              canvas.addMarker(item, 'warning');
-            }
-          }
-        })
-      }
+      isLoading.value = true;
+      await bpmnViewer.value.importXML(xml);
+      addCustomDefs();
+    } catch (e) {
+      clearViewer();
+    } finally {
+      isLoading.value = false;
+      setProcessStatus(processNodeInfo.value);
     }
-  },
-  destroyed() {
-    this.clearViewer();
   }
 }
+// 设置流程图元素状态
+function setProcessStatus(processNodeInfoArgv) {
+  processNodeInfo.value = processNodeInfoArgv;
+  if (
+    isLoading.value ||
+    processNodeInfo.value == null ||
+    bpmnViewer.value == null
+  )
+    return;
+  let {
+    finishedTaskSet,
+    rejectedTaskSet,
+    unfinishedTaskSet,
+    finishedSequenceFlowSet,
+  } = processNodeInfo.value;
+  const canvas = bpmnViewer.value.get("canvas");
+  const elementRegistry = bpmnViewer.value.get("elementRegistry");
+  if (Array.isArray(finishedSequenceFlowSet)) {
+    finishedSequenceFlowSet.forEach((item) => {
+      if (item != null) {
+        canvas.addMarker(item, "success");
+        let element = elementRegistry.get(item);
+        const conditionExpression = element.businessObject.conditionExpression;
+        if (conditionExpression) {
+          canvas.addMarker(item, "condition-expression");
+        }
+      }
+    });
+  }
+  if (Array.isArray(finishedTaskSet)) {
+    finishedTaskSet.forEach((item) => canvas.addMarker(item, "success"));
+  }
+  if (Array.isArray(unfinishedTaskSet)) {
+    unfinishedTaskSet.forEach((item) => canvas.addMarker(item, "primary"));
+  }
+  if (Array.isArray(rejectedTaskSet)) {
+    rejectedTaskSet.forEach((item) => {
+      if (item != null) {
+        let element = elementRegistry.get(item);
+        if (element.type.includes("Task")) {
+          canvas.addMarker(item, "danger");
+        } else {
+          canvas.addMarker(item, "warning");
+        }
+      }
+    });
+  }
+}
+
+onBeforeUnmount(() => {
+  clearViewer();
+});
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/src/plugins/package/designer/ProcessDesigner.vue b/src/plugins/package/designer/ProcessDesigner.vue
index 2517b80..826cf52 100644
--- a/src/plugins/package/designer/ProcessDesigner.vue
+++ b/src/plugins/package/designer/ProcessDesigner.vue
@@ -259,7 +259,8 @@ import { ElMessage, ElMessageBox } from "element-plus";
 const bpmnCanvasRef = ref();
 const refFile = ref();
 const props = defineProps({
-  value: String, // xml 字符串
+  modelValue: String, // xml 字符串
+  // value: String,
   processId: String,
   processName: String,
   translations: Object, // 自定义的翻译文件
@@ -285,7 +286,7 @@ const props = defineProps({
     type: String,
     default: "flowable",
   },
-  events: {
+  eventlist: {
     type: Array,
     default: () => ["element.click"],
   },
@@ -305,7 +306,8 @@ const props = defineProps({
   },
 });
 const {
-  value,
+  // value,
+  modelValue,
   processId,
   processName,
   translations,
@@ -316,7 +318,7 @@ const {
   simulation,
   keyboard,
   prefix,
-  events,
+  eventlist,
   headerButtonSize,
   headerButtonType,
 } = toRefs(props);
@@ -375,22 +377,21 @@ const additionalModules = computed(() => {
   }
 
   // 根据需要的流程类型设置扩展元素构建模块
-  // if (prefix.value === "bpmn") {
-  //   Modules.push(bpmnModdleExtension);
-  // }
+  // // if (prefix.value === "bpmn") {
+  // //   Modules.push(bpmnModdleExtension);
+  // // }
   if (prefix.value === "camunda") {
     Modules.push(camundaModdleExtension);
   }
-  // FIXME: Function.prototype.bind.apply(...) is not a constructor
-  // if (prefix.value === "flowable") {
-  //   Modules.push(flowableModdleExtension);
-  // }
+
+  if (prefix.value === "flowable") {
+    Modules.push(flowableModdleExtension);
+  }
   if (prefix.value === "activiti") {
     Modules.push(activitiModdleExtension);
   }
   return Modules;
 });
-console.log(additionalModules.value);
 const moddleExtensions = computed(() => {
   const Extensions = {};
   // 仅使用用户自定义模块
@@ -421,7 +422,7 @@ const moddleExtensions = computed(() => {
 
 onMounted(() => {
   initBpmnModeler();
-  createNewDiagram(value.value);
+  createNewDiagram(modelValue.value);
 });
 onBeforeUnmount(() => {
   if (bpmnModeler) bpmnModeler.destroy();
@@ -447,19 +448,14 @@ function initBpmnModeler() {
     additionalModules: additionalModules.value,
     moddleExtensions: moddleExtensions.value,
   });
-  console.log("init-finished");
   emit("init-finished", bpmnModeler);
   initModelListeners();
 }
 function initModelListeners() {
   const EventBus = bpmnModeler.get("eventBus");
-  console.log(EventBus);
-  // const that = this;
   // 注册需要的监听事件, 将. 替换为 - , 避免解析异常
-  events.value.forEach((event) => {
-    bpmnModeler.on(event, function (eventObj) {
-      console.log("element-click", eventObj);
-
+  eventlist.value.forEach((event) => {
+    EventBus.on(event, function (eventObj) {
       let eventName = event.replace(/\./g, "-");
       let element = eventObj ? eventObj.element : null;
       emit(eventName, element, eventObj);
@@ -467,18 +463,18 @@ function initModelListeners() {
     });
   });
   //FIXME: 监听图形改变返回xml
-  // EventBus.on("commandStack.changed", async (event) => {
-  //   try {
-  //     recoverable.value = bpmnModeler.get("commandStack").canRedo();
-  //     revocable.value = bpmnModeler.get("commandStack").canUndo();
-  //     let { xml } = await bpmnModeler.saveXML({ format: true });
-  //     emit("commandStack-changed", event);
-  //     emit("input", xml);
-  //     emit("change", xml);
-  //   } catch (e) {
-  //     console.error(`[Process Designer Warn]: ${e.message || e}`);
-  //   }
-  // });
+  EventBus.on("commandStack.changed", async (event) => {
+    try {
+      recoverable.value = bpmnModeler.get("commandStack").canRedo();
+      revocable.value = bpmnModeler.get("commandStack").canUndo();
+      let { xml } = await bpmnModeler.saveXML({ format: true });
+      emit("commandStack-changed", event);
+      emit("input", xml);
+      emit("change", xml);
+    } catch (e) {
+      console.error(`[Process Designer Warn]: ${e.message || e}`);
+    }
+  });
   // 监听视图缩放变化
   bpmnModeler.on("canvas.viewbox.changed", ({ viewbox }) => {
     emit("canvas-viewbox-changed", { viewbox });
diff --git a/src/plugins/package/designer/plugins/extension-moddle/flowable/index.js b/src/plugins/package/designer/plugins/extension-moddle/flowable/index.js
index 7ee2863..66f64ba 100644
--- a/src/plugins/package/designer/plugins/extension-moddle/flowable/index.js
+++ b/src/plugins/package/designer/plugins/extension-moddle/flowable/index.js
@@ -2,8 +2,8 @@
  * @author igdianov
  * address https://github.com/igdianov/activiti-bpmn-moddle
  * */
-
+import flowableExtension from './flowableExtension'
 export default {
   __init__: ["FlowableModdleExtension"],
-  FlowableModdleExtension: ["type", () => import("./flowableExtension")],
+  FlowableModdleExtension: ["type", flowableExtension],
 };
diff --git a/src/plugins/package/designer/test.vue b/src/plugins/package/designer/test.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/plugins/package/highlight/index.js b/src/plugins/package/highlight/index.js
index e047311..aa8ed27 100644
--- a/src/plugins/package/highlight/index.js
+++ b/src/plugins/package/highlight/index.js
@@ -1,5 +1,5 @@
-// import hljs from "highlight.js/lib/core";
-// hljs.registerLanguage("xml", () => import("highlight.js/lib/languages/xml"));
-// hljs.registerLanguage("json", () => import("highlight.js/lib/languages/json"));
+import hljs from "highlight.js/lib/core";
+hljs.registerLanguage("xml", () => import("highlight.js/lib/languages/xml"));
+hljs.registerLanguage("json", () => import("highlight.js/lib/languages/json"));
 
-// export default hljs;
+export default hljs;
diff --git a/src/plugins/package/penal/PropertiesPanel.vue b/src/plugins/package/penal/PropertiesPanel.vue
index 9a8f057..0decdd9 100644
--- a/src/plugins/package/penal/PropertiesPanel.vue
+++ b/src/plugins/package/penal/PropertiesPanel.vue
@@ -2,9 +2,11 @@
   <div class="process-panel__container" :style="{ width: `${this.width}px` }">
     <el-collapse v-model="activeTab">
       <el-collapse-item name="base">
-        <div slot="title" class="panel-tab__title">
-          <i class="el-icon-info"></i>常规
-        </div>
+        <template #title>
+          <div class="panel-tab__title">
+            <el-icon><InfoFilled /></el-icon>常规
+          </div>
+        </template>
         <element-base-info
           :id-edit-disabled="idEditDisabled"
           :business-object="elementBusinessObject"
@@ -16,9 +18,11 @@
         v-if="elementType === 'Process'"
         key="message"
       >
-        <div slot="title" class="panel-tab__title">
-          <i class="el-icon-s-comment"></i>消息与信号
-        </div>
+        <template #title>
+          <div class="panel-tab__title">
+            <el-icon><Comment /></el-icon>消息与信号
+          </div>
+        </template>
         <signal-and-massage />
       </el-collapse-item>
       <el-collapse-item
@@ -26,18 +30,22 @@
         v-if="conditionFormVisible"
         key="condition"
       >
-        <div slot="title" class="panel-tab__title">
-          <i class="el-icon-s-promotion"></i>流转条件
-        </div>
+        <template #title>
+          <div class="panel-tab__title">
+            <el-icon><Promotion /></el-icon>流转条件
+          </div>
+        </template>
         <flow-condition
           :business-object="elementBusinessObject"
           :type="elementType"
         />
       </el-collapse-item>
       <el-collapse-item name="condition" v-if="formVisible" key="form">
-        <div slot="title" class="panel-tab__title">
-          <i class="el-icon-s-order"></i>表单
-        </div>
+        <template #title>
+          <div class="panel-tab__title">
+            <el-icon><Document /></el-icon>表单
+          </div>
+        </template>
         <element-form :id="elementId" :type="elementType" />
       </el-collapse-item>
       <el-collapse-item
@@ -45,9 +53,11 @@
         v-if="elementType.indexOf('Task') !== -1"
         key="task"
       >
-        <div slot="title" class="panel-tab__title">
-          <i class="el-icon-s-claim"></i>任务
-        </div>
+        <template #title
+          ><div class="panel-tab__title">
+            <el-icon><Checked /></el-icon>任务
+          </div>
+        </template>
         <element-task :id="elementId" :type="elementType" />
       </el-collapse-item>
       <el-collapse-item
@@ -55,18 +65,22 @@
         v-if="elementType.indexOf('Task') !== -1 && elementType !== 'UserTask'"
         key="multiInstance"
       >
-        <div slot="title" class="panel-tab__title">
-          <i class="el-icon-s-help"></i>多实例
-        </div>
+        <template #title
+          ><div class="panel-tab__title">
+            <el-icon><Help /></el-icon>多实例
+          </div>
+        </template>
         <element-multi-instance
           :business-object="elementBusinessObject"
           :type="elementType"
         />
       </el-collapse-item>
       <el-collapse-item name="listeners" key="listeners">
-        <div slot="title" class="panel-tab__title">
-          <i class="el-icon-message-solid"></i>执行监听器
-        </div>
+        <template #title
+          ><div class="panel-tab__title">
+            <el-icon><Message /></el-icon>执行监听器
+          </div>
+        </template>
         <element-listeners :id="elementId" :type="elementType" />
       </el-collapse-item>
       <el-collapse-item
@@ -74,21 +88,27 @@
         v-if="elementType === 'UserTask'"
         key="taskListeners"
       >
-        <div slot="title" class="panel-tab__title">
-          <i class="el-icon-message-solid"></i>任务监听器
-        </div>
+        <template #title
+          ><div class="panel-tab__title">
+            <el-icon><Message /></el-icon>任务监听器
+          </div></template
+        >
         <user-task-listeners :id="elementId" :type="elementType" />
       </el-collapse-item>
       <el-collapse-item name="extensions" key="extensions">
-        <div slot="title" class="panel-tab__title">
-          <i class="el-icon-circle-plus"></i>扩展属性
-        </div>
+        <template #title
+          ><div class="panel-tab__title">
+            <el-icon><CirclePlus /></el-icon>扩展属性
+          </div></template
+        >
         <element-properties :id="elementId" :type="elementType" />
       </el-collapse-item>
       <el-collapse-item name="other" key="other">
-        <div slot="title" class="panel-tab__title">
-          <i class="el-icon-s-promotion"></i>其他
-        </div>
+        <template #title
+          ><div class="panel-tab__title">
+            <el-icon><Promotion /></el-icon>其他
+          </div></template
+        >
         <element-other-config :id="elementId" />
       </el-collapse-item>
     </el-collapse>
@@ -128,11 +148,6 @@ const props = defineProps({
 const { bpmnModeler, prefix, width, idEditDisabled } = toRefs(props);
 provide("prefix", prefix.value);
 provide("width", width.value);
-const bpmnStore = useBpmnStore();
-// const data = reactive({
-//   timer: undefined,
-// });
-// const { timer } = toRefs(data);
 
 const activeTab = ref("base");
 const elementId = ref("");
@@ -143,49 +158,15 @@ const formVisible = ref(false); // 表单配置
 let timer;
 let bpmnElement;
 function initModels() {
-  // bpmnStore.count = 123;
-  console.log(bpmnModeler.value);
   // 初始化 modeler 以及其他 moddle
   if (!bpmnModeler.value) {
     // 避免加载时 流程图 并未加载完成
     timer = setTimeout(() => initModels(), 10);
     return;
   }
-  // console.log(timer);
+
   if (timer) clearTimeout(timer);
-  // timer = null;
-  console.log(bpmnModeler.value);
-  // bpmnStore.bpmnInstances = {
-  //   test: bpmnModeler.value,
-  // };
-  // bpmnModeler.value.get = undefined;
-  // console.log(JSON.stringify(bpmnModeler.value));
-  // bpmnStore.setBpmnInstances({
-  //   modeler: { _container: bpmnModeler.value._container },
-  //   // modeling: bpmnModeler.value.get("modeling"),
-  //   // moddle: bpmnModeler.value.get("moddle"),
-  //   // eventBus: bpmnModeler.value.get("eventBus"),
-  //   // bpmnFactory: bpmnModeler.value.get("bpmnFactory"),
-  //   // elementFactory: bpmnModeler.value.get("elementFactory"),
-  //   elementRegistry: {
-  //     _elements: bpmnModeler.value.get("elementRegistry")._elements,
-  //   },
-  //   // replace: bpmnModeler.value.get("replace"),
-  //   // selection: bpmnModeler.value.get("selection"),
-  // });
-  // bpmnStore.bpmnInstances =
-  // {
-  //   modeler: bpmnModeler.value,
-  //   modeling: bpmnModeler.value.get("modeling"),
-  //   moddle: bpmnModeler.value.get("moddle"),
-  //   eventBus: bpmnModeler.value.get("eventBus"),
-  //   bpmnFactory: bpmnModeler.value.get("bpmnFactory"),
-  //   elementFactory: bpmnModeler.value.get("elementFactory"),
-  //   elementRegistry: bpmnModeler.value.get("elementRegistry"),
-  //   replace: bpmnModeler.value.get("replace"),
-  //   selection: bpmnModeler.value.get("selection"),
-  // };
-  console.log(bpmnStore.bpmnInstances, "167");
+
   window.bpmnInstances = {
     modeler: bpmnModeler.value,
     modeling: bpmnModeler.value.get("modeling"),
@@ -200,7 +181,6 @@ function initModels() {
   getActiveElement();
 }
 function getActiveElement() {
-  console.log("select first");
   // 初始第一个选中元素 bpmn:Process
   initFormOnChanged(null);
   bpmnModeler.value.on("import.done", (e) => {
@@ -208,7 +188,6 @@ function getActiveElement() {
   });
   // 监听选择事件，修改当前激活的元素以及表单
   bpmnModeler.value.on("selection.changed", ({ newSelection }) => {
-    console.log("selection.changed");
     initFormOnChanged(newSelection[0] || null);
   });
   bpmnModeler.value.on("element.changed", ({ element }) => {
@@ -254,9 +233,9 @@ function initFormOnChanged(element) {
   formVisible.value =
     elementType.value === "UserTask" || elementType.value === "StartEvent";
 }
-function beforeDestroy() {
+onBeforeUnmount(() => {
   window.bpmnInstances = null;
-}
+});
 
 watch(elementId, (val) => {
   activeTab.value = "base";
diff --git a/src/plugins/package/penal/base/ElementBaseInfo.vue b/src/plugins/package/penal/base/ElementBaseInfo.vue
index 8a93e3f..6412d4c 100644
--- a/src/plugins/package/penal/base/ElementBaseInfo.vue
+++ b/src/plugins/package/penal/base/ElementBaseInfo.vue
@@ -40,8 +40,7 @@
 
 <script setup name="ElementBaseInfo">
 import { nextTick, onBeforeUnmount, toRefs } from "vue";
-import useBpmnStore from "@/store/modules/bpmn";
-const bpmnStore = useBpmnStore();
+let bpmnElement;
 const props = defineProps({
   businessObject: Object,
   type: String,
@@ -55,7 +54,7 @@ const data = reactive({
   elementBaseInfo: {},
   bpmnElement: undefined,
 });
-const { elementBaseInfo, bpmnElement } = toRefs(data);
+const { elementBaseInfo } = toRefs(data);
 watch(
   businessObject,
   (val) => {
@@ -69,24 +68,24 @@ watch(
 );
 
 function resetBaseInfo() {
-  bpmnElement.value = window?.bpmnInstances?.bpmnElement;
+  bpmnElement = window?.bpmnInstances?.bpmnElement;
   elementBaseInfo.value = JSON.parse(
-    JSON.stringify(bpmnElement.value.businessObject)
+    JSON.stringify(bpmnElement.businessObject)
   );
 }
 function updateBaseInfo(key) {
   const attrObj = Object.create(null);
   attrObj[key] = elementBaseInfo.value[key];
   if (key === "id") {
-    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+    window.bpmnInstances.modeling.updateProperties(bpmnElement, {
       id: elementBaseInfo.value[key],
       di: { id: `${elementBaseInfo.value[key]}_di` },
     });
   } else {
-    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, attrObj);
+    window.bpmnInstances.modeling.updateProperties(bpmnElement, attrObj);
   }
 }
 onBeforeUnmount(() => {
-  bpmnElement.value = null;
+  bpmnElement = null;
 });
 </script>
diff --git a/src/plugins/package/penal/form/ElementForm.vue b/src/plugins/package/penal/form/ElementForm.vue
index 106aee1..86baf2a 100644
--- a/src/plugins/package/penal/form/ElementForm.vue
+++ b/src/plugins/package/penal/form/ElementForm.vue
@@ -181,7 +181,7 @@
           <el-input v-model="fieldOptionForm.value" clearable />
         </el-form-item>
       </el-form>
-      <template slot="footer">
+      <template #footer>
         <el-button size="small" @click="fieldOptionModelVisible = false"
           >取 消</el-button
         >
diff --git a/src/plugins/package/penal/listeners/ElementListeners.vue b/src/plugins/package/penal/listeners/ElementListeners.vue
index 80285f2..9071603 100644
--- a/src/plugins/package/penal/listeners/ElementListeners.vue
+++ b/src/plugins/package/penal/listeners/ElementListeners.vue
@@ -11,16 +11,13 @@
       />
       <el-table-column label="操作" width="90px">
         <template slot-scope="{ row, $index }">
-          <el-button
-            size="small"
-            type="text"
-            @click="openListenerForm(row, $index)"
+          <el-button size="small" link @click="openListenerForm(row, $index)"
             >编辑</el-button
           >
           <el-divider direction="vertical" />
           <el-button
             size="small"
-            type="text"
+            link
             style="color: #ff4d4f"
             @click="removeListener(row, $index)"
             >移除</el-button
@@ -196,14 +193,14 @@
           <template slot-scope="{ row, $index }">
             <el-button
               size="small"
-              type="text"
+              link
               @click="openListenerFieldForm(row, $index)"
               >编辑</el-button
             >
             <el-divider direction="vertical" />
             <el-button
               size="small"
-              type="text"
+              link
               style="color: #ff4d4f"
               @click="removeListenerField(row, $index)"
               >移除</el-button
@@ -278,7 +275,7 @@
           <el-input v-model="listenerFieldForm.expression" clearable />
         </el-form-item>
       </el-form>
-      <template slot="footer">
+      <template #footer>
         <el-button size="small" @click="listenerFieldFormModelVisible = false"
           >取 消</el-button
         >
diff --git a/src/plugins/package/penal/listeners/UserTaskListeners.vue b/src/plugins/package/penal/listeners/UserTaskListeners.vue
index 4b02b36..e2e5bbe 100644
--- a/src/plugins/package/penal/listeners/UserTaskListeners.vue
+++ b/src/plugins/package/penal/listeners/UserTaskListeners.vue
@@ -2,35 +2,98 @@
   <div class="panel-tab__content">
     <el-table :data="elementListenersList" size="small" border>
       <el-table-column label="序号" width="50px" type="index" />
-      <el-table-column label="事件类型" min-width="80px" show-overflow-tooltip :formatter="row => listenerEventTypeObject[row.event]" />
-      <el-table-column label="事件id" min-width="80px" prop="id" show-overflow-tooltip />
-      <el-table-column label="监听器类型" min-width="80px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
+      <el-table-column
+        label="事件类型"
+        min-width="80px"
+        show-overflow-tooltip
+        :formatter="(row) => listenerEventTypeObject[row.event]"
+      />
+      <el-table-column
+        label="事件id"
+        min-width="80px"
+        prop="id"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        label="监听器类型"
+        min-width="80px"
+        show-overflow-tooltip
+        :formatter="(row) => listenerTypeObject[row.listenerType]"
+      />
       <el-table-column label="操作" width="90px">
         <template slot-scope="{ row, $index }">
-          <el-button size="small" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
+          <el-button size="small" link @click="openListenerForm(row, $index)"
+            >编辑</el-button
+          >
           <el-divider direction="vertical" />
-          <el-button size="small" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
+          <el-button
+            size="small"
+            link
+            style="color: #ff4d4f"
+            @click="removeListener(row, $index)"
+            >移除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
     <div class="element-drawer__button">
-      <el-button size="small" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
+      <el-button
+        size="small"
+        type="primary"
+        icon="el-icon-plus"
+        @click="openListenerForm(null)"
+        >添加监听器</el-button
+      >
     </div>
 
     <!-- 监听器 编辑/创建 部分 -->
-    <el-drawer v-model="listenerFormModelVisible" title="任务监听器" :size="`${width}px`" append-to-body destroy-on-close>
-      <el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
-        <el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
+    <el-drawer
+      v-model="listenerFormModelVisible"
+      title="任务监听器"
+      :size="`${width}px`"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form
+        size="small"
+        :model="listenerForm"
+        label-width="96px"
+        ref="listenerFormRef"
+        @submit.native.prevent
+      >
+        <el-form-item
+          label="事件类型"
+          prop="event"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
           <el-select v-model="listenerForm.event">
-            <el-option v-for="i in Object.keys(listenerEventTypeObject)" :key="i" :label="listenerEventTypeObject[i]" :value="i" />
+            <el-option
+              v-for="i in Object.keys(listenerEventTypeObject)"
+              :key="i"
+              :label="listenerEventTypeObject[i]"
+              :value="i"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item label="监听器ID" prop="id" :rules="{ required: true, trigger: ['blur', 'change'] }">
+        <el-form-item
+          label="监听器ID"
+          prop="id"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
           <el-input v-model="listenerForm.id" clearable />
         </el-form-item>
-        <el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
+        <el-form-item
+          label="监听器类型"
+          prop="listenerType"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
           <el-select v-model="listenerForm.listenerType">
-            <el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
+            <el-option
+              v-for="i in Object.keys(listenerTypeObject)"
+              :key="i"
+              :label="listenerTypeObject[i]"
+              :value="i"
+            />
           </el-select>
         </el-form-item>
         <el-form-item
@@ -65,7 +128,11 @@
             label="脚本格式"
             prop="scriptFormat"
             key="listener-script-format"
-            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
+            :rules="{
+              required: true,
+              trigger: ['blur', 'change'],
+              message: '请填写脚本格式',
+            }"
           >
             <el-input v-model="listenerForm.scriptFormat" clearable />
           </el-form-item>
@@ -73,7 +140,11 @@
             label="脚本类型"
             prop="scriptType"
             key="listener-script-type"
-            :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
+            :rules="{
+              required: true,
+              trigger: ['blur', 'change'],
+              message: '请选择脚本类型',
+            }"
           >
             <el-select v-model="listenerForm.scriptType">
               <el-option label="内联脚本" value="inlineScript" />
@@ -85,7 +156,11 @@
             label="脚本内容"
             prop="value"
             key="listener-script"
-            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
+            :rules="{
+              required: true,
+              trigger: ['blur', 'change'],
+              message: '请填写脚本内容',
+            }"
           >
             <el-input v-model="listenerForm.value" clearable />
           </el-form-item>
@@ -94,14 +169,22 @@
             label="资源地址"
             prop="resource"
             key="listener-resource"
-            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
+            :rules="{
+              required: true,
+              trigger: ['blur', 'change'],
+              message: '请填写资源地址',
+            }"
           >
             <el-input v-model="listenerForm.resource" clearable />
           </el-form-item>
         </template>
 
         <template v-if="listenerForm.event === 'timeout'">
-          <el-form-item label="定时器类型" prop="eventDefinitionType" key="eventDefinitionType">
+          <el-form-item
+            label="定时器类型"
+            prop="eventDefinitionType"
+            key="eventDefinitionType"
+          >
             <el-select v-model="listenerForm.eventDefinitionType">
               <el-option label="日期" value="date" />
               <el-option label="持续时长" value="duration" />
@@ -110,11 +193,18 @@
             </el-select>
           </el-form-item>
           <el-form-item
-            v-if="!!listenerForm.eventDefinitionType && listenerForm.eventDefinitionType !== 'null'"
+            v-if="
+              !!listenerForm.eventDefinitionType &&
+              listenerForm.eventDefinitionType !== 'null'
+            "
             label="定时器"
             prop="eventTimeDefinitions"
             key="eventTimeDefinitions"
-            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写定时器配置' }"
+            :rules="{
+              required: true,
+              trigger: ['blur', 'change'],
+              message: '请填写定时器配置',
+            }"
           >
             <el-input v-model="listenerForm.eventTimeDefinitions" clearable />
           </el-form-item>
@@ -124,37 +214,100 @@
       <el-divider />
       <p class="listener-filed__title">
         <span><i class="el-icon-menu"></i>注入字段：</span>
-        <el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
+        <el-button
+          size="small"
+          type="primary"
+          @click="openListenerFieldForm(null)"
+          >添加字段</el-button
+        >
       </p>
-      <el-table :data="fieldsListOfListener" size="small" max-height="240" border fit style="flex: none">
+      <el-table
+        :data="fieldsListOfListener"
+        size="small"
+        max-height="240"
+        border
+        fit
+        style="flex: none"
+      >
         <el-table-column label="序号" width="50px" type="index" />
         <el-table-column label="字段名称" min-width="100px" prop="name" />
-        <el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
-        <el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
+        <el-table-column
+          label="字段类型"
+          min-width="80px"
+          show-overflow-tooltip
+          :formatter="(row) => fieldTypeObject[row.fieldType]"
+        />
+        <el-table-column
+          label="字段值/表达式"
+          min-width="100px"
+          show-overflow-tooltip
+          :formatter="(row) => row.string || row.expression"
+        />
         <el-table-column label="操作" width="100px">
           <template slot-scope="{ row, $index }">
-            <el-button size="small" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
+            <el-button
+              size="small"
+              link
+              @click="openListenerFieldForm(row, $index)"
+              >编辑</el-button
+            >
             <el-divider direction="vertical" />
-            <el-button size="small" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
+            <el-button
+              size="small"
+              link
+              style="color: #ff4d4f"
+              @click="removeListenerField(row, $index)"
+              >移除</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
 
       <div class="element-drawer__button">
-        <el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
-        <el-button size="small" type="primary" @click="saveListenerConfig">保 存</el-button>
+        <el-button size="small" @click="listenerFormModelVisible = false"
+          >取 消</el-button
+        >
+        <el-button size="small" type="primary" @click="saveListenerConfig"
+          >保 存</el-button
+        >
       </div>
     </el-drawer>
 
     <!-- 注入西段 编辑/创建 部分 -->
-    <el-dialog title="字段配置" v-model="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
-      <el-form :model="listenerFieldForm" size="small" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
-        <el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
+    <el-dialog
+      title="字段配置"
+      v-model="listenerFieldFormModelVisible"
+      width="600px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form
+        :model="listenerFieldForm"
+        size="small"
+        label-width="96px"
+        ref="listenerFieldFormRef"
+        style="height: 136px"
+        @submit.native.prevent
+      >
+        <el-form-item
+          label="字段名称："
+          prop="name"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
           <el-input v-model="listenerFieldForm.name" clearable />
         </el-form-item>
-        <el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
+        <el-form-item
+          label="字段类型："
+          prop="fieldType"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
           <el-select v-model="listenerFieldForm.fieldType">
-            <el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
+            <el-option
+              v-for="i in Object.keys(fieldTypeObject)"
+              :key="i"
+              :label="fieldTypeObject[i]"
+              :value="i"
+            />
           </el-select>
         </el-form-item>
         <el-form-item
@@ -176,26 +329,37 @@
           <el-input v-model="listenerFieldForm.expression" clearable />
         </el-form-item>
       </el-form>
-      <template slot="footer">
-        <el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
-        <el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
+      <template #footer>
+        <el-button size="small" @click="listenerFieldFormModelVisible = false"
+          >取 消</el-button
+        >
+        <el-button size="small" type="primary" @click="saveListenerFiled"
+          >确 定</el-button
+        >
       </template>
     </el-dialog>
   </div>
 </template>
 <script>
+import { ElMessageBox } from "element-plus";
 import { createListenerObject, updateElementExtensions } from "../../utils";
-import { initListenerForm, initListenerType, eventType, listenerType, fieldType } from "./utilSelf";
+import {
+  initListenerForm,
+  initListenerType,
+  eventType,
+  listenerType,
+  fieldType,
+} from "./utilSelf";
 
 export default {
   name: "UserTaskListeners",
   props: {
     id: String,
-    type: String
+    type: String,
   },
   inject: {
     prefix: "prefix",
-    width: "width"
+    width: "width",
   },
   data() {
     return {
@@ -209,7 +373,7 @@ export default {
       listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态
       editingListenerIndex: -1, // 监听器所在下标，-1 为新增
       editingListenerFieldIndex: -1, // 字段所在下标，-1 为新增
-      listenerFieldForm: {} // 监听器 注入字段 详情表单
+      listenerFieldForm: {}, // 监听器 注入字段 详情表单
     };
   },
   watch: {
@@ -217,15 +381,20 @@ export default {
       immediate: true,
       handler(val) {
         val && val.length && this.$nextTick(() => this.resetListenersList());
-      }
-    }
+      },
+    },
   },
   methods: {
     resetListenersList() {
       this.bpmnElement = window.bpmnInstances.bpmnElement;
       this.otherExtensionList = [];
-      this.bpmnElementListeners = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `${this.prefix}:TaskListener`) ?? [];
-      this.elementListenersList = this.bpmnElementListeners.map(listener => initListenerType(listener));
+      this.bpmnElementListeners =
+        this.bpmnElement.businessObject?.extensionElements?.values?.filter(
+          (ex) => ex.$type === `${this.prefix}:TaskListener`
+        ) ?? [];
+      this.elementListenersList = this.bpmnElementListeners.map((listener) =>
+        initListenerType(listener)
+      );
     },
     openListenerForm(listener, index) {
       if (listener) {
@@ -236,7 +405,10 @@ export default {
         this.editingListenerIndex = -1; // 标记为新增
       }
       if (listener && listener.fields) {
-        this.fieldsListOfListener = listener.fields.map(field => ({ ...field, fieldType: field.string ? "string" : "expression" }));
+        this.fieldsListOfListener = listener.fields.map((field) => ({
+          ...field,
+          fieldType: field.string ? "string" : "expression",
+        }));
       } else {
         this.fieldsListOfListener = [];
         this.$set(this.listenerForm, "fields", []);
@@ -244,19 +416,23 @@ export default {
       // 打开侧边栏并清楚验证状态
       this.listenerFormModelVisible = true;
       this.$nextTick(() => {
-        if (this.$refs["listenerFormRef"]) this.$refs["listenerFormRef"].clearValidate();
+        if (this.$refs["listenerFormRef"])
+          this.$refs["listenerFormRef"].clearValidate();
       });
     },
     // 移除监听器
     removeListener(listener, index) {
-      this.$confirm("确认移除该监听器吗？", "提示", {
+      ElMessageBox.confirm("确认移除该监听器吗？", "提示", {
         confirmButtonText: "确 认",
-        cancelButtonText: "取 消"
+        cancelButtonText: "取 消",
       })
         .then(() => {
           this.bpmnElementListeners.splice(index, 1);
           this.elementListenersList.splice(index, 1);
-          updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
+          updateElementExtensions(
+            this.bpmnElement,
+            this.otherExtensionList.concat(this.bpmnElementListeners)
+          );
         })
         .catch(() => console.info("操作取消"));
     },
@@ -264,17 +440,35 @@ export default {
     async saveListenerConfig() {
       let validateStatus = await this.$refs["listenerFormRef"].validate();
       if (!validateStatus) return; // 验证不通过直接返回
-      const listenerObject = createListenerObject(this.listenerForm, true, this.prefix);
+      const listenerObject = createListenerObject(
+        this.listenerForm,
+        true,
+        this.prefix
+      );
       if (this.editingListenerIndex === -1) {
         this.bpmnElementListeners.push(listenerObject);
         this.elementListenersList.push(this.listenerForm);
       } else {
-        this.bpmnElementListeners.splice(this.editingListenerIndex, 1, listenerObject);
-        this.elementListenersList.splice(this.editingListenerIndex, 1, this.listenerForm);
+        this.bpmnElementListeners.splice(
+          this.editingListenerIndex,
+          1,
+          listenerObject
+        );
+        this.elementListenersList.splice(
+          this.editingListenerIndex,
+          1,
+          this.listenerForm
+        );
       }
       // 保存其他配置
-      this.otherExtensionList = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type !== `${this.prefix}:TaskListener`) ?? [];
-      updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
+      this.otherExtensionList =
+        this.bpmnElement.businessObject?.extensionElements?.values?.filter(
+          (ex) => ex.$type !== `${this.prefix}:TaskListener`
+        ) ?? [];
+      updateElementExtensions(
+        this.bpmnElement,
+        this.otherExtensionList.concat(this.bpmnElementListeners)
+      );
       // 4. 隐藏侧边栏
       this.listenerFormModelVisible = false;
       this.listenerForm = {};
@@ -285,7 +479,8 @@ export default {
       this.editingListenerFieldIndex = field ? index : -1;
       this.listenerFieldFormModelVisible = true;
       this.$nextTick(() => {
-        if (this.$refs["listenerFieldFormRef"]) this.$refs["listenerFieldFormRef"].clearValidate();
+        if (this.$refs["listenerFieldFormRef"])
+          this.$refs["listenerFieldFormRef"].clearValidate();
       });
     },
     // 保存监听器注入字段
@@ -296,8 +491,16 @@ export default {
         this.fieldsListOfListener.push(this.listenerFieldForm);
         this.listenerForm.fields.push(this.listenerFieldForm);
       } else {
-        this.fieldsListOfListener.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
-        this.listenerForm.fields.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
+        this.fieldsListOfListener.splice(
+          this.editingListenerFieldIndex,
+          1,
+          this.listenerFieldForm
+        );
+        this.listenerForm.fields.splice(
+          this.editingListenerFieldIndex,
+          1,
+          this.listenerFieldForm
+        );
       }
       this.listenerFieldFormModelVisible = false;
       this.$nextTick(() => (this.listenerFieldForm = {}));
@@ -306,14 +509,14 @@ export default {
     removeListenerField(field, index) {
       this.$confirm("确认移除该字段吗？", "提示", {
         confirmButtonText: "确 认",
-        cancelButtonText: "取 消"
+        cancelButtonText: "取 消",
       })
         .then(() => {
           this.fieldsListOfListener.splice(index, 1);
           this.listenerForm.fields.splice(index, 1);
         })
         .catch(() => console.info("操作取消"));
-    }
-  }
+    },
+  },
 };
 </script>
diff --git a/src/plugins/package/penal/listeners/template.js b/src/plugins/package/penal/listeners/template.js
index 5bc8ec7..6852383 100644
--- a/src/plugins/package/penal/listeners/template.js
+++ b/src/plugins/package/penal/listeners/template.js
@@ -7,9 +7,9 @@ export const template = isTaskListener => {
       <el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
       <el-table-column label="操作" width="90px">
         <template slot-scope="{ row, $index }">
-          <el-button size="small" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
+          <el-button size="small" link @click="openListenerForm(row, $index)">编辑</el-button>
           <el-divider direction="vertical" />
-          <el-button size="small" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
+          <el-button size="small" link style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -97,21 +97,20 @@ export const template = isTaskListener => {
             <el-input v-model="listenerForm.resource" clearable />
           </el-form-item>
         </template>
-        ${
-          isTaskListener
-            ? "<el-form-item label='定时器类型' prop='eventDefinitionType' key='eventDefinitionType'>" +
-              "<el-select v-model='listenerForm.eventDefinitionType'>" +
-              "<el-option label='日期' value='date' />" +
-              "<el-option label='持续时长' value='duration' />" +
-              "<el-option label='循环' value='cycle' />" +
-              "<el-option label='无' value='' />" +
-              "</el-select>" +
-              "</el-form-item>" +
-              "<el-form-item v-if='!!listenerForm.eventDefinitionType' label='定时器' prop='eventDefinitions' key='eventDefinitions'>" +
-              "<el-input v-model='listenerForm.eventDefinitions' clearable />" +
-              "</el-form-item>"
-            : ""
-        }
+        ${isTaskListener
+      ? "<el-form-item label='定时器类型' prop='eventDefinitionType' key='eventDefinitionType'>" +
+      "<el-select v-model='listenerForm.eventDefinitionType'>" +
+      "<el-option label='日期' value='date' />" +
+      "<el-option label='持续时长' value='duration' />" +
+      "<el-option label='循环' value='cycle' />" +
+      "<el-option label='无' value='' />" +
+      "</el-select>" +
+      "</el-form-item>" +
+      "<el-form-item v-if='!!listenerForm.eventDefinitionType' label='定时器' prop='eventDefinitions' key='eventDefinitions'>" +
+      "<el-input v-model='listenerForm.eventDefinitions' clearable />" +
+      "</el-form-item>"
+      : ""
+    }
       </el-form>
       <el-divider />
       <p class="listener-filed__title">
@@ -125,9 +124,9 @@ export const template = isTaskListener => {
         <el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
         <el-table-column label="操作" width="100px">
           <template slot-scope="{ row, $index }">
-            <el-button size="small" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
+            <el-button size="small" link @click="openListenerFieldForm(row, $index)">编辑</el-button>
             <el-divider direction="vertical" />
-            <el-button size="small" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
+            <el-button size="small" link style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -168,7 +167,7 @@ export const template = isTaskListener => {
           <el-input v-model="listenerFieldForm.expression" clearable />
         </el-form-item>
       </el-form>
-      <template slot="footer">
+      <template #footer>
         <el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
         <el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
       </template>
diff --git a/src/plugins/package/penal/other/ElementOtherConfig.vue b/src/plugins/package/penal/other/ElementOtherConfig.vue
index 868ee89..6f6380a 100644
--- a/src/plugins/package/penal/other/ElementOtherConfig.vue
+++ b/src/plugins/package/penal/other/ElementOtherConfig.vue
@@ -16,44 +16,47 @@
     </div>
   </div>
 </template>
+<script setup name="ElementOtherConfig">
+import { toRefs } from "vue";
 
-<script>
-export default {
-  name: "ElementOtherConfig",
-  props: {
-    id: String
-  },
-  data() {
-    return {
-      documentation: ""
-    };
-  },
-  watch: {
-    id: {
-      immediate: true,
-      handler: function(id) {
-        if (id && id.length) {
-          this.$nextTick(() => {
-            const documentations = window.bpmnInstances.bpmnElement.businessObject?.documentation;
-            this.documentation = documentations && documentations.length ? documentations[0].text : "";
-          });
-        } else {
-          this.documentation = "";
-        }
-      }
-    }
-  },
-  methods: {
-    updateDocumentation() {
-      (this.bpmnElement && this.bpmnElement.id === this.id) || (this.bpmnElement = window.bpmnInstances.elementRegistry.get(this.id));
-      const documentation = window.bpmnInstances.bpmnFactory.create("bpmn:Documentation", { text: this.documentation });
-      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
-        documentation: [documentation]
+const props = defineProps({
+  id: String,
+});
+const { id } = toRefs(props);
+let bpmnElement;
+const documentation = ref("");
+
+watch(
+  id,
+  (val) => {
+    if (id && id.length) {
+      nextTick(() => {
+        const documentations =
+          window.bpmnInstances.bpmnElement.businessObject?.documentation;
+        documentation.value =
+          documentations && documentations.length ? documentations[0].text : "";
       });
+    } else {
+      documentation.value = "";
     }
   },
-  beforeDestroy() {
-    this.bpmnElement = null;
+  {
+    immediate: true,
   }
-};
+);
+
+function updateDocumentation() {
+  (bpmnElement && bpmnElement.id === this.id) ||
+    (bpmnElement = window.bpmnInstances.elementRegistry.get(this.id));
+  const documentation = window.bpmnInstances.bpmnFactory.create(
+    "bpmn:Documentation",
+    { text: this.documentation }
+  );
+  window.bpmnInstances.modeling.updateProperties(bpmnElement, {
+    documentation: [documentation],
+  });
+}
+onBeforeUnmount(() => {
+  bpmnElement = null;
+});
 </script>
diff --git a/src/plugins/package/penal/properties/ElementProperties.vue b/src/plugins/package/penal/properties/ElementProperties.vue
index c0df1e1..6ffeb94 100644
--- a/src/plugins/package/penal/properties/ElementProperties.vue
+++ b/src/plugins/package/penal/properties/ElementProperties.vue
@@ -1,23 +1,65 @@
 <template>
   <div class="panel-tab__content">
-    <el-table :data="elementPropertyList" size="small" max-height="240" border fit>
+    <el-table
+      :data="elementPropertyList"
+      size="small"
+      max-height="240"
+      border
+      fit
+    >
       <el-table-column label="序号" width="50px" type="index" />
-      <el-table-column label="属性名" prop="name" min-width="100px" show-overflow-tooltip />
-      <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
+      <el-table-column
+        label="属性名"
+        prop="name"
+        min-width="100px"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        label="属性值"
+        prop="value"
+        min-width="100px"
+        show-overflow-tooltip
+      />
       <el-table-column label="操作" width="90px">
         <template slot-scope="{ row, $index }">
-          <el-button size="small" type="text" @click="openAttributesForm(row, $index)">编辑</el-button>
+          <el-button size="small" link @click="openAttributesForm(row, $index)"
+            >编辑</el-button
+          >
           <el-divider direction="vertical" />
-          <el-button size="small" type="text" style="color: #ff4d4f" @click="removeAttributes(row, $index)">移除</el-button>
+          <el-button
+            size="small"
+            link
+            style="color: #ff4d4f"
+            @click="removeAttributes(row, $index)"
+            >移除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
     <div class="element-drawer__button">
-      <el-button size="small" type="primary" icon="el-icon-plus" @click="openAttributesForm(null, -1)">添加属性</el-button>
+      <el-button
+        size="small"
+        type="primary"
+        icon="el-icon-plus"
+        @click="openAttributesForm(null, -1)"
+        >添加属性</el-button
+      >
     </div>
 
-    <el-dialog v-model="propertyFormModelVisible" title="属性配置" width="600px" append-to-body destroy-on-close>
-      <el-form :model="propertyForm" label-width="80px" size="small" ref="attributeFormRef" @submit.native.prevent>
+    <el-dialog
+      v-model="propertyFormModelVisible"
+      title="属性配置"
+      width="600px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form
+        :model="propertyForm"
+        label-width="80px"
+        size="small"
+        ref="attributeFormRef"
+        @submit.native.prevent
+      >
         <el-form-item label="属性名：" prop="name">
           <el-input v-model="propertyForm.name" clearable />
         </el-form-item>
@@ -25,110 +67,139 @@
           <el-input v-model="propertyForm.value" clearable />
         </el-form-item>
       </el-form>
-      <template slot="footer">
-        <el-button size="small" @click="propertyFormModelVisible = false">取 消</el-button>
-        <el-button size="small" type="primary" @click="saveAttribute">确 定</el-button>
+      <template #footer>
+        <el-button size="small" @click="propertyFormModelVisible = false"
+          >取 消</el-button
+        >
+        <el-button size="small" type="primary" @click="saveAttribute"
+          >确 定</el-button
+        >
       </template>
     </el-dialog>
   </div>
 </template>
+<script setup name="ElementProperties">
+import { ElMessageBox } from "element-plus";
+import { toRefs } from "vue";
 
-<script>
-export default {
-  name: "ElementProperties",
-  props: {
-    id: String,
-    type: String
-  },
-  inject: {
-    prefix: "prefix",
-    width: "width"
-  },
-  data() {
-    return {
-      elementPropertyList: [],
-      propertyForm: {},
-      editingPropertyIndex: -1,
-      propertyFormModelVisible: false
-    };
-  },
-  watch: {
-    id: {
-      immediate: true,
-      handler(val) {
-        val && val.length && this.resetAttributesList();
-      }
-    }
-  },
-  methods: {
-    resetAttributesList() {
-      this.bpmnElement = window.bpmnInstances.bpmnElement;
-      this.otherExtensionList = []; // 其他扩展配置
-      this.bpmnElementProperties =
-        this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => {
-          if (ex.$type !== `${this.prefix}:Properties`) {
-            this.otherExtensionList.push(ex);
-          }
-          return ex.$type === `${this.prefix}:Properties`;
-        }) ?? [];
+const props = defineProps({
+  id: String,
+  type: String,
+});
+const { id, type } = toRefs(props);
+const prefix = inject("prefix");
+const width = inject("width");
+const data = reactive({
+  propertyForm: {},
+});
+const { propertyForm } = toRefs(data);
 
-      // 保存所有的 扩展属性字段
-      this.bpmnElementPropertyList = this.bpmnElementProperties.reduce((pre, current) => pre.concat(current.values), []);
-      // 复制 显示
-      this.elementPropertyList = JSON.parse(JSON.stringify(this.bpmnElementPropertyList ?? []));
-    },
-    openAttributesForm(attr, index) {
-      this.editingPropertyIndex = index;
-      this.propertyForm = index === -1 ? {} : JSON.parse(JSON.stringify(attr));
-      this.propertyFormModelVisible = true;
-      this.$nextTick(() => {
-        if (this.$refs["attributeFormRef"]) this.$refs["attributeFormRef"].clearValidate();
-      });
-    },
-    removeAttributes(attr, index) {
-      this.$confirm("确认移除该属性吗？", "提示", {
-        confirmButtonText: "确 认",
-        cancelButtonText: "取 消"
-      })
-        .then(() => {
-          this.elementPropertyList.splice(index, 1);
-          this.bpmnElementPropertyList.splice(index, 1);
-          // 新建一个属性字段的保存列表
-          const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
-            values: this.bpmnElementPropertyList
-          });
-          this.updateElementExtensions(propertiesObject);
-          this.resetAttributesList();
-        })
-        .catch(() => console.info("操作取消"));
-    },
-    saveAttribute() {
-      const { name, value } = this.propertyForm;
-      if (this.editingPropertyIndex !== -1) {
-        window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.bpmnElementPropertyList[this.editingPropertyIndex], {
-          name,
-          value
-        });
-      } else {
-        // 新建属性字段
-        const newPropertyObject = window.bpmnInstances.moddle.create(`${this.prefix}:Property`, { name, value });
-        // 新建一个属性字段的保存列表
-        const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
-          values: this.bpmnElementPropertyList.concat([newPropertyObject])
-        });
-        this.updateElementExtensions(propertiesObject);
+let bpmnElement;
+let otherExtensionList;
+let bpmnElementPropertyList;
+let bpmnElementProperties;
+const elementPropertyList = ref([]);
+const editingPropertyIndex = ref(-1);
+const propertyFormModelVisible = ref(false);
+
+watch(
+  id,
+  (val) => {
+    val && val.length && resetAttributesList();
+  },
+  { immediate: true }
+);
+
+function resetAttributesList() {
+  bpmnElement = window.bpmnInstances.bpmnElement;
+  otherExtensionList = []; // 其他扩展配置
+  bpmnElementProperties =
+    bpmnElement.businessObject?.extensionElements?.values?.filter((ex) => {
+      if (ex.$type !== `${prefix}:Properties`) {
+        otherExtensionList.push(ex);
       }
-      this.propertyFormModelVisible = false;
-      this.resetAttributesList();
-    },
-    updateElementExtensions(properties) {
-      const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
-        values: this.otherExtensionList.concat([properties])
-      });
-      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
-        extensionElements: extensions
-      });
-    }
+      return ex.$type === `${prefix}:Properties`;
+    }) ?? [];
+
+  // 保存所有的 扩展属性字段
+  bpmnElementPropertyList = bpmnElementProperties.reduce(
+    (pre, current) => pre.concat(current.values),
+    []
+  );
+  // 复制 显示
+  elementPropertyList.value = JSON.parse(
+    JSON.stringify(bpmnElementPropertyList ?? [])
+  );
+}
+const attributeFormRef = ref();
+
+function openAttributesForm(attr, index) {
+  editingPropertyIndex.value = index;
+  propertyForm.value = index === -1 ? {} : JSON.parse(JSON.stringify(attr));
+  propertyFormModelVisible.value = true;
+  nextTick(() => {
+    if (attributeFormRef.value) attributeFormRef.value.clearValidate();
+  });
+}
+
+function removeAttributes(attr, index) {
+  ElMessageBox.confirm("确认移除该属性吗？", "提示", {
+    confirmButtonText: "确 认",
+    cancelButtonText: "取 消",
+  })
+    .then(() => {
+      elementPropertyList.value.splice(index, 1);
+      bpmnElementPropertyList.splice(index, 1);
+      // 新建一个属性字段的保存列表
+      const propertiesObject = window.bpmnInstances.moddle.create(
+        `${prefix}:Properties`,
+        {
+          values: bpmnElementPropertyList,
+        }
+      );
+      updateElementExtensions(propertiesObject);
+      resetAttributesList();
+    })
+    .catch(() => console.info("操作取消"));
+}
+function saveAttribute() {
+  const { name, value } = propertyForm.value;
+  if (editingPropertyIndex.value !== -1) {
+    window.bpmnInstances.modeling.updateModdleProperties(
+      bpmnElement,
+      bpmnElementPropertyList[editingPropertyIndex.value],
+      {
+        name,
+        value,
+      }
+    );
+  } else {
+    // 新建属性字段
+    const newPropertyObject = window.bpmnInstances.moddle.create(
+      `${prefix}:Property`,
+      { name, value }
+    );
+    // 新建一个属性字段的保存列表
+    const propertiesObject = window.bpmnInstances.moddle.create(
+      `${prefix}:Properties`,
+      {
+        values: bpmnElementPropertyList.concat([newPropertyObject]),
+      }
+    );
+    updateElementExtensions(propertiesObject);
   }
-};
+  propertyFormModelVisible.value = false;
+  resetAttributesList();
+}
+function updateElementExtensions(properties) {
+  const extensions = window.bpmnInstances.moddle.create(
+    "bpmn:ExtensionElements",
+    {
+      values: otherExtensionList.concat([properties]),
+    }
+  );
+  window.bpmnInstances.modeling.updateProperties(bpmnElement, {
+    extensionElements: extensions,
+  });
+}
 </script>
diff --git a/src/plugins/package/penal/signal-message/SignalAndMessage.vue b/src/plugins/package/penal/signal-message/SignalAndMessage.vue
index 53d3158..e584d03 100644
--- a/src/plugins/package/penal/signal-message/SignalAndMessage.vue
+++ b/src/plugins/package/penal/signal-message/SignalAndMessage.vue
@@ -8,7 +8,7 @@
       <el-button
         size="small"
         type="primary"
-        icon="el-icon-plus"
+        icon="plus"
         @click="openModel('message')"
         >创建新消息</el-button
       >
@@ -39,7 +39,7 @@
       <el-button
         size="small"
         type="primary"
-        icon="el-icon-plus"
+        icon="plus"
         @click="openModel('signal')"
         >创建新信号</el-button
       >
@@ -81,7 +81,7 @@
           <el-input v-model="modelObjectForm.name" clearable />
         </el-form-item>
       </el-form>
-      <template slot="footer">
+      <template #footer>
         <el-button size="small" @click="modelVisible = false">取 消</el-button>
         <el-button size="small" type="primary" @click="addNewObject"
           >保 存</el-button
@@ -90,77 +90,77 @@
     </el-dialog>
   </div>
 </template>
-<script>
-export default {
-  name: "SignalAndMassage",
-  data() {
-    return {
-      signalList: [],
-      messageList: [],
-      modelVisible: false,
-      modelType: "",
-      modelObjectForm: {},
-    };
-  },
-  computed: {
-    modelConfig() {
-      if (this.modelType === "message") {
-        return { title: "创建消息", idLabel: "消息ID", nameLabel: "消息名称" };
-      } else {
-        return { title: "创建信号", idLabel: "信号ID", nameLabel: "信号名称" };
-      }
-    },
-  },
-  mounted() {
-    this.initDataList();
-  },
-  methods: {
-    initDataList() {
-      this.rootElements =
-        window.bpmnInstances.modeler.getDefinitions().rootElements;
-      this.messageIdMap = {};
-      this.signalIdMap = {};
-      this.messageList = [];
-      this.signalList = [];
-      this.rootElements.forEach((el) => {
-        if (el.$type === "bpmn:Message") {
-          this.messageIdMap[el.id] = true;
-          this.messageList.push({ ...el });
-        }
-        if (el.$type === "bpmn:Signal") {
-          this.signalIdMap[el.id] = true;
-          this.signalList.push({ ...el });
-        }
-      });
-    },
-    openModel(type) {
-      this.modelType = type;
-      this.modelObjectForm = {};
-      this.modelVisible = true;
-    },
-    addNewObject() {
-      if (this.modelType === "message") {
-        if (this.messageIdMap[this.modelObjectForm.id]) {
-          return ElMessage.error("该消息已存在，请修改id后重新保存");
-        }
-        const messageRef = window.bpmnInstances.moddle.create(
-          "bpmn:Message",
-          this.modelObjectForm
-        );
-        this.rootElements.push(messageRef);
-      } else {
-        if (this.signalIdMap[this.modelObjectForm.id]) {
-          return this.$message.error("该信号已存在，请修改id后重新保存");
-        }
-        const signalRef = window.bpmnInstances.moddle.create(
-          "bpmn:Signal",
-          this.modelObjectForm
-        );
-        this.rootElements.push(signalRef);
-      }
-      this.modelVisible = false;
-      this.initDataList();
-    },
-  },
-};
+<script setup name="SignalAndMassage">
+import { ElMessage } from "element-plus";
+import { ref } from "vue";
+
+let rootElements;
+let messageIdMap;
+let signalIdMap;
+const signalList = ref([]);
+const messageList = ref([]);
+const modelVisible = ref(false);
+const modelType = ref("");
+const data = reactive({
+  modelObjectForm: {},
+});
+const { modelObjectForm } = toRefs(data);
+
+const modelConfig = computed(() => {
+  if (modelType.value === "message") {
+    return { title: "创建消息", idLabel: "消息ID", nameLabel: "消息名称" };
+  } else {
+    return { title: "创建信号", idLabel: "信号ID", nameLabel: "信号名称" };
+  }
+});
+
+function initDataList() {
+  rootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
+  messageIdMap = {};
+  signalIdMap = {};
+  messageList.value = [];
+  signalList.value = [];
+  rootElements.forEach((el) => {
+    if (el.$type === "bpmn:Message") {
+      messageIdMap[el.id] = true;
+      messageList.value.push({ ...el });
+    }
+    if (el.$type === "bpmn:Signal") {
+      signalIdMap[el.id] = true;
+      signalList.value.push({ ...el });
+    }
+  });
+}
+function openModel(type) {
+  modelType.value = type;
+  modelObjectForm.value = {};
+  modelVisible.value = true;
+}
+function addNewObject() {
+  if (modelType.value === "message") {
+    if (messageIdMap[modelObjectForm.value.id]) {
+      return ElMessage.error("该消息已存在，请修改id后重新保存");
+    }
+    const messageRef = window.bpmnInstances.moddle.create(
+      "bpmn:Message",
+      modelObjectForm.value
+    );
+    rootElements.push(messageRef);
+  } else {
+    if (signalIdMap[modelObjectForm.value.id]) {
+      return ElMessage.error("该信号已存在，请修改id后重新保存");
+    }
+    const signalRef = window.bpmnInstances.moddle.create(
+      "bpmn:Signal",
+      modelObjectForm.value
+    );
+    rootElements.push(signalRef);
+  }
+  modelVisible.value = false;
+  initDataList();
+}
+
+onMounted(() => {
+  initDataList();
+});
 </script>
diff --git a/src/plugins/package/penal/task/task-components/ReceiveTask.vue b/src/plugins/package/penal/task/task-components/ReceiveTask.vue
index c8d8195..81df7e8 100644
--- a/src/plugins/package/penal/task/task-components/ReceiveTask.vue
+++ b/src/plugins/package/penal/task/task-components/ReceiveTask.vue
@@ -17,7 +17,7 @@
           <el-input v-model="newMessageForm.name" clearable />
         </el-form-item>
       </el-form>
-      <template slot="footer">
+      <template #footer>
         <el-button size="small" type="primary" @click="createNewMessage">确 认</el-button>
       </template>
     </el-dialog>
diff --git a/src/plugins/package/theme/process-panel.scss b/src/plugins/package/theme/process-panel.scss
index 5c7c3df..390e84f 100644
--- a/src/plugins/package/theme/process-panel.scss
+++ b/src/plugins/package/theme/process-panel.scss
@@ -8,6 +8,8 @@
     overflow-y: scroll;
   }
   .panel-tab__title {
+    display: flex;
+    align-items: center;
     font-weight: 600;
     padding: 0 8px;
     font-size: 1.1em;
@@ -93,7 +95,7 @@
   .element-drawer__button > .el-button {
     width: 100%;
   }
-  
+
   .el-collapse-item__content {
     padding-bottom: 0;
   }
@@ -107,4 +109,3 @@
     }
   }
 }
-
diff --git a/src/utils/request.js b/src/utils/request.js
index 001ec11..f87ec7d 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,108 +1,146 @@
-import axios from 'axios'
-import { ElNotification , ElMessageBox, ElMessage, ElLoading } from 'element-plus'
-import { getToken } from '@/utils/auth'
-import errorCode from '@/utils/errorCode'
-import { tansParams, blobValidate } from '@/utils/ruoyi'
-import cache from '@/plugins/cache'
-import { saveAs } from 'file-saver'
-import useUserStore from '@/store/modules/user'
+import axios from "axios";
+import {
+  ElNotification,
+  ElMessageBox,
+  ElMessage,
+  ElLoading,
+} from "element-plus";
+import { getToken } from "@/utils/auth";
+import errorCode from "@/utils/errorCode";
+import { tansParams, blobValidate } from "@/utils/ruoyi";
+import cache from "@/plugins/cache";
+import { saveAs } from "file-saver";
+import useUserStore from "@/store/modules/user";
 
 let downloadLoadingInstance;
 // 是否显示重新登录
 export let isRelogin = { show: false };
 
-axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
 // 创建axios实例
 const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
   baseURL: import.meta.env.VITE_APP_BASE_API,
   // 超时
-  timeout: 10000
-})
+  timeout: 10000,
+});
 
 // request拦截器
-service.interceptors.request.use(config => {
-  // 是否需要设置 token
-  const isToken = (config.headers || {}).isToken === false
-  // 是否需要防止数据重复提交
-  const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
-  if (getToken() && !isToken) {
-    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
-  }
-  // get请求映射params参数
-  if (config.method === 'get' && config.params) {
-    let url = config.url + '?' + tansParams(config.params);
-    url = url.slice(0, -1);
-    config.params = {};
-    config.url = url;
-  }
-  if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
-    const requestObj = {
-      url: config.url,
-      data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
-      time: new Date().getTime()
+service.interceptors.request.use(
+  (config) => {
+    // 是否需要设置 token
+    const isToken = (config.headers || {}).isToken === false;
+    // 是否需要防止数据重复提交
+    const isRepeatSubmit = (config.headers || {}).repeatSubmit === false;
+    if (getToken() && !isToken) {
+      config.headers["Authorization"] = "Bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
     }
-    const sessionObj = cache.session.getJSON('sessionObj')
-    if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
-      cache.session.setJSON('sessionObj', requestObj)
-    } else {
-      const s_url = sessionObj.url;                // 请求地址
-      const s_data = sessionObj.data;              // 请求数据
-      const s_time = sessionObj.time;              // 请求时间
-      const interval = 1000;                       // 间隔时间(ms)，小于此时间视为重复提交
-      if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
-        const message = '数据正在处理，请勿重复提交';
-        console.warn(`[${s_url}]: ` + message)
-        return Promise.reject(new Error(message))
+    // get请求映射params参数
+    if (config.method === "get" && config.params) {
+      let url = config.url + "?" + tansParams(config.params);
+      url = url.slice(0, -1);
+      config.params = {};
+      config.url = url;
+    }
+    if (
+      !isRepeatSubmit &&
+      (config.method === "post" || config.method === "put")
+    ) {
+      const requestObj = {
+        url: config.url,
+        data:
+          typeof config.data === "object"
+            ? JSON.stringify(config.data)
+            : config.data,
+        time: new Date().getTime(),
+      };
+      const sessionObj = cache.session.getJSON("sessionObj");
+      if (
+        sessionObj === undefined ||
+        sessionObj === null ||
+        sessionObj === ""
+      ) {
+        cache.session.setJSON("sessionObj", requestObj);
       } else {
-        cache.session.setJSON('sessionObj', requestObj)
+        const s_url = sessionObj.url; // 请求地址
+        const s_data = sessionObj.data; // 请求数据
+        const s_time = sessionObj.time; // 请求时间
+        const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交
+        if (
+          s_data === requestObj.data &&
+          requestObj.time - s_time < interval &&
+          s_url === requestObj.url
+        ) {
+          const message = "数据正在处理，请勿重复提交";
+          console.warn(`[${s_url}]: ` + message);
+          return Promise.reject(new Error(message));
+        } else {
+          cache.session.setJSON("sessionObj", requestObj);
+        }
       }
     }
+    return config;
+  },
+  (error) => {
+    console.log(error);
+    Promise.reject(error);
   }
-  return config
-}, error => {
-    console.log(error)
-    Promise.reject(error)
-})
+);
 
 // 响应拦截器
-service.interceptors.response.use(res => {
+service.interceptors.response.use(
+  (res) => {
     // 未设置状态码则默认成功状态
     const code = res.data.code || 200;
     // 获取错误信息
-    const msg = errorCode[code] || res.data.msg || errorCode['default']
+    const msg = errorCode[code] || res.data.msg || errorCode["default"];
     // 二进制数据则直接返回
-    if(res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer'){
-      return res.data
+    if (
+      res.request.responseType === "blob" ||
+      res.request.responseType === "arraybuffer"
+    ) {
+      return res.data;
     }
     if (code === 401) {
       if (!isRelogin.show) {
         isRelogin.show = true;
-        ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
-          isRelogin.show = false;
-          useUserStore().logOut().then(() => {
-            location.href = '/index';
+        ElMessageBox.confirm(
+          "登录状态已过期，您可以继续留在该页面，或者重新登录",
+          "系统提示",
+          {
+            confirmButtonText: "重新登录",
+            cancelButtonText: "取消",
+            type: "warning",
+          }
+        )
+          .then(() => {
+            isRelogin.show = false;
+            useUserStore()
+              .logOut()
+              .then(() => {
+                location.href = "/index";
+              });
           })
-      }).catch(() => {
-        isRelogin.show = false;
-      });
-    }
-      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
+          .catch(() => {
+            isRelogin.show = false;
+          });
+      }
+      return Promise.reject("无效的会话，或者会话已过期，请重新登录。");
     } else if (code === 500) {
-      ElMessage({ message: msg, type: 'error' })
-      return Promise.reject(new Error(msg))
+      ElMessage({ message: msg, type: "error" });
+      return Promise.reject(new Error(msg));
     } else if (code === 601) {
-      ElMessage({ message: msg, type: 'warning' })
-      return Promise.reject(new Error(msg))
+      ElMessage({ message: msg, type: "warning" });
+      return Promise.reject(new Error(msg));
     } else if (code !== 200) {
-      ElNotification.error({ title: msg })
-      return Promise.reject('error')
+      ElNotification.error({ title: msg });
+      return Promise.reject("error");
     } else {
-      return  Promise.resolve(res.data)
+      return Promise.resolve(res.data);
     }
   },
-  error => {
-    console.log('err' + error)
+  (error) => {
+    console.log("err" + error);
     let { message } = error;
     if (message == "Network Error") {
       message = "后端接口连接异常";
@@ -111,36 +149,47 @@ service.interceptors.response.use(res => {
     } else if (message.includes("Request failed with status code")) {
       message = "系统接口" + message.substr(message.length - 3) + "异常";
     }
-    ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
-    return Promise.reject(error)
+    ElMessage({ message: message, type: "error", duration: 5 * 1000 });
+    return Promise.reject(error);
   }
-)
+);
 
 // 通用下载方法
 export function download(url, params, filename, config) {
-  downloadLoadingInstance = ElLoading.service({ text: "正在下载数据，请稍候", background: "rgba(0, 0, 0, 0.7)", })
-  return service.post(url, params, {
-    transformRequest: [(params) => { return tansParams(params) }],
-    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    responseType: 'blob',
-    ...config
-  }).then(async (data) => {
-    const isLogin = await blobValidate(data);
-    if (isLogin) {
-      const blob = new Blob([data])
-      saveAs(blob, filename)
-    } else {
-      const resText = await data.text();
-      const rspObj = JSON.parse(resText);
-      const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
-      ElMessage.error(errMsg);
-    }
-    downloadLoadingInstance.close();
-  }).catch((r) => {
-    console.error(r)
-    ElMessage.error('下载文件出现错误，请联系管理员！')
-    downloadLoadingInstance.close();
-  })
+  downloadLoadingInstance = ElLoading.service({
+    text: "正在下载数据，请稍候",
+    background: "rgba(0, 0, 0, 0.7)",
+  });
+  return service
+    .post(url, params, {
+      transformRequest: [
+        (params) => {
+          return tansParams(params);
+        },
+      ],
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      responseType: "blob",
+      ...config,
+    })
+    .then(async (data) => {
+      const isLogin = await blobValidate(data);
+      if (isLogin) {
+        const blob = new Blob([data]);
+        saveAs(blob, filename);
+      } else {
+        const resText = await data.text();
+        const rspObj = JSON.parse(resText);
+        const errMsg =
+          errorCode[rspObj.code] || rspObj.msg || errorCode["default"];
+        ElMessage.error(errMsg);
+      }
+      downloadLoadingInstance.close();
+    })
+    .catch((r) => {
+      console.error(r);
+      ElMessage.error("下载文件出现错误，请联系管理员！");
+      downloadLoadingInstance.close();
+    });
 }
 
-export default service
+export default service;
diff --git a/src/views/flowable/form/index.vue b/src/views/flowable/form/index.vue
index 025874d..a615d72 100644
--- a/src/views/flowable/form/index.vue
+++ b/src/views/flowable/form/index.vue
@@ -100,14 +100,14 @@
         <template slot-scope="scope">
           <el-button
             size="mini"
-            type="text"
+            link
             icon="el-icon-view"
             @click="handleDetail(scope.row)"
             >详情</el-button
           >
           <el-button
             size="mini"
-            type="text"
+            link
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['workflow:form:edit']"
@@ -115,7 +115,7 @@
           >
           <el-button
             size="mini"
-            type="text"
+            link
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['workflow:form:remove']"
diff --git a/src/views/flowable/model/index.vue b/src/views/flowable/model/index.vue
index 7ca29e6..19812f7 100644
--- a/src/views/flowable/model/index.vue
+++ b/src/views/flowable/model/index.vue
@@ -125,7 +125,7 @@
         :show-overflow-tooltip="true"
       >
         <template #default="{ row }">
-          <el-button link @click="handleProcessView(row)">
+          <el-button type="primary" link @click="handleProcessView(row)">
             <span>{{ row.modelName }}</span>
           </el-button>
         </template>
@@ -159,60 +159,62 @@
         class-name="small-padding fixed-width"
       >
         <template #default="{ row }">
-          <el-button
-            size="small"
-            link
-            icon="edit"
-            @click="handleUpdate(row)"
-            v-hasPermi="['flowable:model:edit']"
-            >修改</el-button
-          >
-          <el-button
-            link
-            size="small"
-            icon="brush"
-            @click="handleDesigner(row)"
-            v-hasPermi="['flowable:model:designer']"
-            >设计</el-button
-          >
-          <el-button
-            link
-            size="small"
-            icon="video-play"
-            v-hasPermi="['flowable:model:deploy']"
-            @click.native="handleDeploy(row)"
-            >部署</el-button
-          >
-          <el-dropdown>
-            <span class="el-dropdown-link">
-              <el-icon>
-                <ArrowDown />
-              </el-icon>
-              更多
-            </span>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <!-- TODO: v-hasPermi="['flowable:model:query']" -->
-                <el-dropdown-item
-                  icon="view"
-                  @click.native="handleProcessView(row)"
-                  >流程图</el-dropdown-item
-                >
-                <!-- TODO: v-hasPermi="['flowable:model:list']" -->
-                <el-dropdown-item
-                  icon="price-tag"
-                  @click.native="handleHistory(row)"
-                  >历史</el-dropdown-item
-                >
-                <!-- TODO: v-hasPermi="['flowable:model:remove']" -->
-                <el-dropdown-item
-                  icon="delete"
-                  @click.native="handleDelete(row)"
-                  >删除</el-dropdown-item
-                >
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
+          <div class="model-operation">
+            <el-button
+              size="small"
+              link
+              icon="edit"
+              @click="handleUpdate(row)"
+              v-hasPermi="['flowable:model:edit']"
+              >修改</el-button
+            >
+            <el-button
+              link
+              size="small"
+              icon="brush"
+              @click="handleDesigner(row)"
+              v-hasPermi="['flowable:model:designer']"
+              >设计</el-button
+            >
+            <el-button
+              link
+              size="small"
+              icon="video-play"
+              v-hasPermi="['flowable:model:deploy']"
+              @click.native="handleDeploy(row)"
+              >部署</el-button
+            >
+            <el-dropdown>
+              <span class="el-dropdown-link">
+                <el-icon>
+                  <ArrowDown />
+                </el-icon>
+                更多
+              </span>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <!-- TODO: v-hasPermi="['flowable:model:query']" -->
+                  <el-dropdown-item
+                    icon="view"
+                    @click.native="handleProcessView(row)"
+                    >流程图</el-dropdown-item
+                  >
+                  <!-- TODO: v-hasPermi="['flowable:model:list']" -->
+                  <el-dropdown-item
+                    icon="price-tag"
+                    @click.native="handleHistory(row)"
+                    >历史</el-dropdown-item
+                  >
+                  <!-- TODO: v-hasPermi="['flowable:model:remove']" -->
+                  <el-dropdown-item
+                    icon="delete"
+                    @click.native="handleDelete(row)"
+                    >删除</el-dropdown-item
+                  >
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
         </template>
       </el-table-column>
     </el-table>
@@ -323,16 +325,16 @@
     <!-- 流程图 -->
     <el-dialog
       :title="processView.title"
-      :visible.sync="processView.open"
+      v-model="processView.open"
       width="70%"
       append-to-body
     >
       <!-- TODO: -->
-      <!-- <process-viewer
+      <process-viewer
         :key="`designer-${processView.index}`"
         :xml="processView.xmlData"
         :style="{ height: '400px' }"
-      /> -->
+      />
     </el-dialog>
 
     <el-dialog title="模型历史" v-model="history.open" width="70%">
@@ -452,10 +454,11 @@ import {
 import { listCategory } from "@/api/flowable/category";
 import { ArrowDown } from "@element-plus/icons-vue";
 import ProcessDesigner from "@/components/ProcessDesigner";
-// import ProcessViewer from "@/components/ProcessViewer";
+import ProcessViewer from "@/components/ProcessViewer";
 import { getToken } from "@/utils/auth";
 import { toRefs } from "vue";
-import { ElMessage } from "element-plus";
+import { ElMessage, ElMessageBox } from "element-plus";
+let bpmnXml;
 // 显示搜索条件
 const showSearch = ref(true);
 // 遮罩层
@@ -598,12 +601,12 @@ function handleSelectionChange(selection) {
 }
 /** 部署流程 */
 function handleDeploy(row) {
-  this.loading = true;
+  loading.value = true;
   deployModel({
     modelId: row.modelId,
   })
     .then((response) => {
-      this.$modal.msgSuccess(response.msg);
+      ElMessage.success(response.msg);
       let obj = { name: "Deploy", path: "/workflow/deploy" };
       return this.$store
         .dispatch("tagsView/delCachedView", obj)
@@ -613,36 +616,36 @@ function handleDeploy(row) {
         });
     })
     .finally(() => {
-      this.loading = false;
+      loading.value = false;
     });
 }
 /** 查看流程图 */
 function handleProcessView(row) {
   let modelId = row.modelId;
-  this.processView.title = "流程图";
-  this.processView.index = modelId;
+  processView.value.title = "流程图";
+  processView.value.index = modelId;
   // 发送请求，获取xml
   getBpmnXml(modelId).then((response) => {
-    this.processView.xmlData = response.data;
+    processView.value.xmlData = response.data;
   });
-  this.processView.open = true;
+  processView.value.open = true;
 }
 function getHistoryList() {
-  this.history.loading = true;
-  historyModel(this.queryHistoryParams).then((response) => {
-    this.historyTotal = response.total;
-    this.historyList = response.rows;
-    this.history.loading = false;
+  history.value.loading = true;
+  historyModel(queryHistoryParams.value).then((response) => {
+    historyTotal.value = response.total;
+    historyList.value = response.rows;
+    history.value.loading = false;
   });
 }
 function handleHistory(row) {
-  this.history.open = true;
-  this.queryHistoryParams.modelKey = row.modelKey;
-  this.getHistoryList();
+  history.value.open = true;
+  queryHistoryParams.value.modelKey = row.modelKey;
+  getHistoryList();
 }
 /** 设为最新版 */
 function handleLatest(row) {
-  this.$modal.confirm("是否确认将此版本设为最新？").then(() => {
+  ElMessageBox.confirm("是否确认将此版本设为最新？").then(() => {
     this.history.loading = true;
     latestModel({
       modelId: row.modelId,
@@ -650,7 +653,7 @@ function handleLatest(row) {
       .then((response) => {
         this.history.open = false;
         this.getList();
-        this.$modal.msgSuccess(response.msg);
+        ElMessage.success(response.msg);
       })
       .finally(() => {
         this.history.loading = false;
@@ -719,59 +722,58 @@ function handleDesigner(row) {
     });
   }
 }
-function onSaveDesigner(bpmnXml) {
-  this.bpmnXml = bpmnXml;
+function onSaveDesigner(bpmnXmlArgv) {
+  // bpmnXml = bpmnXmlArgv;
   let dataBody = {
-    modelId: this.designerData.modelId,
-    bpmnXml: this.bpmnXml,
+    modelId: designerData.value.modelId,
+    bpmnXml: bpmnXmlArgv,
   };
-  this.$confirm("是否将此模型保存为新版本？", "提示", {
+  ElMessageBox.confirm("是否将此模型保存为新版本？", "提示", {
     distinguishCancelAndClose: true,
     confirmButtonText: "是",
     cancelButtonText: "否",
   })
     .then(() => {
-      this.confirmSave(dataBody, true);
+      confirmSave(dataBody, true);
     })
     .catch((action) => {
       if (action === "cancel") {
-        this.confirmSave(dataBody, false);
+        confirmSave(dataBody, false);
       }
     });
 }
 function confirmSave(body, newVersion) {
-  this.designerData.loading = true;
+  designerData.value.loading = true;
   saveModel(
     Object.assign(body, {
       newVersion: newVersion,
     })
   )
     .then((res) => {
-      this.$modal.msgSuccess(res.msg);
-      this.designerOpen = false;
-      this.getList();
+      ElMessage.success(res.msg);
+      designerOpen.value = false;
+      getList();
     })
     .catch((res) => {
-      this.$modal.msgError(res.msg);
-      this.designerData.loading = false;
+      ElMessage.error(res.msg);
+      designerData.value.loading = false;
     });
 }
 /** 删除按钮操作 */
 function handleDelete(row) {
-  const modelIds = row.modelId || this.ids;
-  this.$modal
-    .confirm('是否确认删除模型编号为"' + modelIds + '"的数据项？')
+  const modelIds = row.modelId || ids.value;
+  ElMessageBox.confirm('是否确认删除模型编号为"' + modelIds + '"的数据项？')
     .then(() => {
-      this.loading = true;
+      loading.value = true;
       return delModel(modelIds);
     })
     .then(() => {
-      this.loading = false;
-      this.getList();
-      this.$modal.msgSuccess("删除成功");
+      loading.value = false;
+      getList();
+      ElMessage.success("删除成功");
     })
     .finally(() => {
-      this.loading = false;
+      loading.value = false;
     });
 }
 /** 导出按钮操作 */
@@ -821,6 +823,12 @@ function submitSave() {
 getList();
 getCategoryList();
 </script>
+<style scoped>
+.model-operation {
+  display: flex;
+  align-items: center;
+}
+</style>
 <!--
 
   <script>