diff --git a/src/api/flowable/category.js b/src/api/flowable/category.js
index cec6a71..8cafff0 100644
--- a/src/api/flowable/category.js
+++ b/src/api/flowable/category.js
@@ -6,15 +6,30 @@ export const listAllCategory = (query) =>
     method: "get",
     params: query,
   });
+
 export const addCategory = (data) =>
   request({
     url: "/flowable/category",
     method: "post",
     data
   });
+
 export const delCategory = (ids) =>
   request({
     url: "/flowable/category",
     method: "delete",
     data: { ids }
   });
+
+export const getCategory = (categoryId) =>
+  request({
+    url: `/flowable/category/${categoryId}`,
+    method: "get",
+  });
+
+export const updateCategory = (data) =>
+  request({
+    url: `/flowable/category`,
+    method: "put",
+    data
+  });
diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
index a413437..e879e2e 100644
--- a/src/components/Editor/index.vue
+++ b/src/components/Editor/index.vue
@@ -74,12 +74,10 @@ export default {
   setup(props, context) {
     // 编辑器实例，必须用 shallowRef
     const editorRef = shallowRef();
-    // editorRef.value.on("blur", () => {
-    //   console.log("blur");
-    // });
 
     // 内容 HTML
     const valueHtml = ref("");
+
     watch(
       () => props.modelValue,
       (val) => {
@@ -92,9 +90,7 @@ export default {
     const toolbarConfig = {
       excludeKeys: [],
     };
-    // onBlur: (editor) => {
-    //   console.log("onBlur");
-    // },
+
     const editorConfig = {
       placeholder: props.placeholder,
       readOnly: props.readOnly,
@@ -141,7 +137,6 @@ export default {
 
     const emitBlur = () => {
       context.emit("blur", editorRef.value);
-      // editorRef.value.emit("blur");
     };
 
     return {
diff --git a/src/plugins/package/penal/flow-condition/FlowCondition.vue b/src/plugins/package/penal/flow-condition/FlowCondition.vue
index db6a107..7738193 100644
--- a/src/plugins/package/penal/flow-condition/FlowCondition.vue
+++ b/src/plugins/package/penal/flow-condition/FlowCondition.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="panel-tab__content">
-    <el-form :model="flowConditionForm" label-width="90px" size="small" @submit.native.prevent>
+    <el-form
+      :model="flowConditionForm"
+      label-width="90px"
+      size="small"
+      @submit.native.prevent
+    >
       <el-form-item label="流转类型">
         <el-select v-model="flowConditionForm.type" @change="updateFlowType">
           <el-option label="普通流转路径" value="normal" />
@@ -8,18 +13,42 @@
           <el-option label="条件流转路径" value="condition" />
         </el-select>
       </el-form-item>
-      <el-form-item label="条件格式" v-if="flowConditionForm.type === 'condition'" key="condition">
+      <el-form-item
+        label="条件格式"
+        v-if="flowConditionForm.type === 'condition'"
+        key="condition"
+      >
         <el-select v-model="flowConditionForm.conditionType">
           <el-option label="表达式" value="expression" />
           <el-option label="脚本" value="script" />
         </el-select>
       </el-form-item>
-      <el-form-item label="表达式" v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'expression'" key="express">
-        <el-input v-model="flowConditionForm.body" clearable @change="updateFlowCondition" />
+      <el-form-item
+        label="表达式"
+        v-if="
+          flowConditionForm.conditionType &&
+          flowConditionForm.conditionType === 'expression'
+        "
+        key="express"
+      >
+        <el-input
+          v-model="flowConditionForm.body"
+          clearable
+          @change="updateFlowCondition"
+        />
       </el-form-item>
-      <template v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'script'">
+      <template
+        v-if="
+          flowConditionForm.conditionType &&
+          flowConditionForm.conditionType === 'script'
+        "
+      >
         <el-form-item label="脚本语言" key="language">
-          <el-input v-model="flowConditionForm.language" clearable @change="updateFlowCondition" />
+          <el-input
+            v-model="flowConditionForm.language"
+            clearable
+            @change="updateFlowCondition"
+          />
         </el-form-item>
         <el-form-item label="脚本类型" key="scriptType">
           <el-select v-model="flowConditionForm.scriptType">
@@ -27,116 +56,152 @@
             <el-option label="外部脚本" value="externalScript" />
           </el-select>
         </el-form-item>
-        <el-form-item label="脚本" v-if="flowConditionForm.scriptType === 'inlineScript'" key="body">
-          <el-input v-model="flowConditionForm.body" type="textarea" clearable @change="updateFlowCondition" />
+        <el-form-item
+          label="脚本"
+          v-if="flowConditionForm.scriptType === 'inlineScript'"
+          key="body"
+        >
+          <el-input
+            v-model="flowConditionForm.body"
+            type="textarea"
+            clearable
+            @change="updateFlowCondition"
+          />
         </el-form-item>
-        <el-form-item label="资源地址" v-if="flowConditionForm.scriptType === 'externalScript'" key="resource">
-          <el-input v-model="flowConditionForm.resource" clearable @change="updateFlowCondition" />
+        <el-form-item
+          label="资源地址"
+          v-if="flowConditionForm.scriptType === 'externalScript'"
+          key="resource"
+        >
+          <el-input
+            v-model="flowConditionForm.resource"
+            clearable
+            @change="updateFlowCondition"
+          />
         </el-form-item>
       </template>
     </el-form>
   </div>
 </template>
+<script setup name="FlowCondition">
+import { reactive, toRefs, watch, nextTick, onBeforeUnmount } from "vue";
 
-<script>
-export default {
-  name: "FlowCondition",
-  props: {
-    businessObject: Object,
-    type: String
+const props = defineProps({
+  businessObject: Object,
+  type: String,
+});
+const { businessObject, type } = toRefs(props);
+const data = reactive({ flowConditionForm: {} });
+const { flowConditionForm } = toRefs(data);
+watch(
+  businessObject,
+  (val) => {
+    nextTick(() => {
+      resetFlowCondition();
+    });
   },
-  data() {
-    return {
-      flowConditionForm: {}
-    };
-  },
-  watch: {
-    businessObject: {
-      immediate: true,
-      handler() {
-        this.$nextTick(() => this.resetFlowCondition());
-      }
+  { immediate: true }
+);
+let bpmnElement;
+let bpmnElementSource;
+let bpmnElementSourceRef;
+let flowConditionRef;
+function resetFlowCondition() {
+  bpmnElement = window.bpmnInstances.bpmnElement;
+  bpmnElementSource = bpmnElement.source;
+  bpmnElementSourceRef = bpmnElement.businessObject.sourceRef;
+  if (
+    bpmnElementSourceRef &&
+    bpmnElementSourceRef.default &&
+    bpmnElementSourceRef.default.id === bpmnElement.id
+  ) {
+    // 默认
+    flowConditionForm.value = { type: "default" };
+  } else if (!bpmnElement.businessObject.conditionExpression) {
+    // 普通
+    flowConditionForm.value = { type: "normal" };
+  } else {
+    // 带条件
+    const conditionExpression = bpmnElement.businessObject.conditionExpression;
+    flowConditionForm.value = { ...conditionExpression, type: "condition" };
+    // resource 可直接标识 是否是外部资源脚本
+    if (flowConditionForm.value.resource) {
+      flowConditionForm.value.conditionType = "script";
+      flowConditionForm.value.scriptType = "externalScript";
+      return;
     }
-  },
-  methods: {
-    resetFlowCondition() {
-      this.bpmnElement = window.bpmnInstances.bpmnElement;
-      this.bpmnElementSource = this.bpmnElement.source;
-      this.bpmnElementSourceRef = this.bpmnElement.businessObject.sourceRef;
-      if (this.bpmnElementSourceRef && this.bpmnElementSourceRef.default && this.bpmnElementSourceRef.default.id === this.bpmnElement.id) {
-        // 默认
-        this.flowConditionForm = { type: "default" };
-      } else if (!this.bpmnElement.businessObject.conditionExpression) {
-        // 普通
-        this.flowConditionForm = { type: "normal" };
-      } else {
-        // 带条件
-        const conditionExpression = this.bpmnElement.businessObject.conditionExpression;
-        this.flowConditionForm = { ...conditionExpression, type: "condition" };
-        // resource 可直接标识 是否是外部资源脚本
-        if (this.flowConditionForm.resource) {
-          this.$set(this.flowConditionForm, "conditionType", "script");
-          this.$set(this.flowConditionForm, "scriptType", "externalScript");
-          return;
-        }
-        if (conditionExpression.language) {
-          this.$set(this.flowConditionForm, "conditionType", "script");
-          this.$set(this.flowConditionForm, "scriptType", "inlineScript");
-          return;
-        }
-        this.$set(this.flowConditionForm, "conditionType", "expression");
-      }
-    },
-    updateFlowType(flowType) {
-      // 正常条件类
-      if (flowType === "condition") {
-        this.flowConditionRef = window.bpmnInstances.moddle.create("bpmn:FormalExpression");
-        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
-          conditionExpression: this.flowConditionRef
-        });
-        return;
-      }
-      // 默认路径
-      if (flowType === "default") {
-        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
-          conditionExpression: null
-        });
-        window.bpmnInstances.modeling.updateProperties(this.bpmnElementSource, {
-          default: this.bpmnElement
-        });
-        return;
-      }
-      // 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
-      if (this.bpmnElementSourceRef.default && this.bpmnElementSourceRef.default.id === this.bpmnElement.id) {
-        window.bpmnInstances.modeling.updateProperties(this.bpmnElementSource, {
-          default: null
-        });
-      }
-      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
-        conditionExpression: null
-      });
-    },
-    updateFlowCondition() {
-      let { conditionType, scriptType, body, resource, language } = this.flowConditionForm;
-      let condition;
-      if (conditionType === "expression") {
-        condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body });
-      } else {
-        if (scriptType === "inlineScript") {
-          condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body, language });
-          this.$set(this.flowConditionForm, "resource", "");
-        } else {
-          this.$set(this.flowConditionForm, "body", "");
-          condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { resource, language });
-        }
-      }
-      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { conditionExpression: condition });
+    if (conditionExpression.language) {
+      flowConditionForm.value.conditionType = "script";
+      flowConditionForm.value.scriptType = "inlineScript";
+      return;
     }
-  },
-  beforeDestroy() {
-    this.bpmnElement = null;
-    this.bpmnElementSource = null;
-    this.bpmnElementSourceRef = null;
+    flowConditionForm.value.conditionType = "expression";
   }
-};
+}
+function updateFlowType(flowType) {
+  // 正常条件类
+  if (flowType === "condition") {
+    flowConditionRef = window.bpmnInstances.moddle.create(
+      "bpmn:FormalExpression"
+    );
+    window.bpmnInstances.modeling.updateProperties(bpmnElement, {
+      conditionExpression: flowConditionRef,
+    });
+    return;
+  }
+  // 默认路径
+  if (flowType === "default") {
+    window.bpmnInstances.modeling.updateProperties(bpmnElement, {
+      conditionExpression: null,
+    });
+    window.bpmnInstances.modeling.updateProperties(bpmnElementSource, {
+      default: bpmnElement,
+    });
+    return;
+  }
+  // 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
+  if (
+    bpmnElementSourceRef.default &&
+    bpmnElementSourceRef.default.id === bpmnElement.id
+  ) {
+    window.bpmnInstances.modeling.updateProperties(bpmnElementSource, {
+      default: null,
+    });
+  }
+  window.bpmnInstances.modeling.updateProperties(bpmnElement, {
+    conditionExpression: null,
+  });
+}
+function updateFlowCondition() {
+  let { conditionType, scriptType, body, resource, language } =
+    flowConditionForm.value;
+  let condition;
+  if (conditionType === "expression") {
+    condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", {
+      body,
+    });
+  } else {
+    if (scriptType === "inlineScript") {
+      condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", {
+        body,
+        language,
+      });
+      flowConditionForm.value.resource = "";
+    } else {
+      flowConditionForm.value.body = "";
+      condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", {
+        resource,
+        language,
+      });
+    }
+  }
+  window.bpmnInstances.modeling.updateProperties(bpmnElement, {
+    conditionExpression: condition,
+  });
+}
+onBeforeUnmount(() => {
+  bpmnElement = null;
+  bpmnElementSource = null;
+  bpmnElementSourceRef = null;
+});
 </script>
diff --git a/src/plugins/package/penal/listeners/UserTaskListeners.vue b/src/plugins/package/penal/listeners/UserTaskListeners.vue
index e2e5bbe..54e02eb 100644
--- a/src/plugins/package/penal/listeners/UserTaskListeners.vue
+++ b/src/plugins/package/penal/listeners/UserTaskListeners.vue
@@ -21,7 +21,7 @@
         :formatter="(row) => listenerTypeObject[row.listenerType]"
       />
       <el-table-column label="操作" width="90px">
-        <template slot-scope="{ row, $index }">
+        <template #default="{ row, $index }">
           <el-button size="small" link @click="openListenerForm(row, $index)"
             >编辑</el-button
           >
@@ -340,8 +340,9 @@
     </el-dialog>
   </div>
 </template>
-<script>
+<script setup name="UserTaskListeners">
 import { ElMessageBox } from "element-plus";
+import { toRefs, nextTick, ref, watch, inject } from "vue";
 import { createListenerObject, updateElementExtensions } from "../../utils";
 import {
   initListenerForm,
@@ -351,172 +352,162 @@ import {
   fieldType,
 } from "./utilSelf";
 
-export default {
-  name: "UserTaskListeners",
-  props: {
-    id: String,
-    type: String,
+const props = defineProps({
+  id: String,
+  type: String,
+});
+const { id, type } = toRefs(props);
+const prefix = inject("prefix");
+const width = inject("width");
+
+const elementListenersList = ref([]);
+const listenerEventTypeObject = ref(eventType);
+const listenerTypeObject = ref(listenerType);
+const listenerFormModelVisible = ref(false);
+const fieldTypeObject = ref(fieldType);
+const fieldsListOfListener = ref([]);
+const listenerFieldFormModelVisible = ref(false); // 监听器 注入字段表单弹窗 显示状
+const editingListenerIndex = ref(-1); // 监听器所在下标，-1 为新
+const editingListenerFieldIndex = ref(-1); // 字段所在下标，-1 为新
+const listenerFieldFormRef = ref();
+const listenerFormRef = ref();
+
+let bpmnElement;
+let otherExtensionList;
+let bpmnElementListeners;
+const data = reactive({
+  listenerForm: {},
+  listenerFieldForm: {}, // 监听器 注入字段 详情表单
+});
+const { listenerForm, listenerFieldForm } = toRefs(data);
+watch(
+  id,
+  (val) => {
+    val && val.length && nextTick(() => resetListenersList());
   },
-  inject: {
-    prefix: "prefix",
-    width: "width",
-  },
-  data() {
-    return {
-      elementListenersList: [],
-      listenerEventTypeObject: eventType,
-      listenerTypeObject: listenerType,
-      listenerFormModelVisible: false,
-      listenerForm: {},
-      fieldTypeObject: fieldType,
-      fieldsListOfListener: [],
-      listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态
-      editingListenerIndex: -1, // 监听器所在下标，-1 为新增
-      editingListenerFieldIndex: -1, // 字段所在下标，-1 为新增
-      listenerFieldForm: {}, // 监听器 注入字段 详情表单
-    };
-  },
-  watch: {
-    id: {
-      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)
-      );
-    },
-    openListenerForm(listener, index) {
-      if (listener) {
-        this.listenerForm = initListenerForm(listener);
-        this.editingListenerIndex = index;
-      } else {
-        this.listenerForm = {};
-        this.editingListenerIndex = -1; // 标记为新增
-      }
-      if (listener && listener.fields) {
-        this.fieldsListOfListener = listener.fields.map((field) => ({
-          ...field,
-          fieldType: field.string ? "string" : "expression",
-        }));
-      } else {
-        this.fieldsListOfListener = [];
-        this.$set(this.listenerForm, "fields", []);
-      }
-      // 打开侧边栏并清楚验证状态
-      this.listenerFormModelVisible = true;
-      this.$nextTick(() => {
-        if (this.$refs["listenerFormRef"])
-          this.$refs["listenerFormRef"].clearValidate();
-      });
-    },
-    // 移除监听器
-    removeListener(listener, index) {
-      ElMessageBox.confirm("确认移除该监听器吗？", "提示", {
-        confirmButtonText: "确 认",
-        cancelButtonText: "取 消",
-      })
-        .then(() => {
-          this.bpmnElementListeners.splice(index, 1);
-          this.elementListenersList.splice(index, 1);
-          updateElementExtensions(
-            this.bpmnElement,
-            this.otherExtensionList.concat(this.bpmnElementListeners)
-          );
-        })
-        .catch(() => console.info("操作取消"));
-    },
-    // 保存监听器
-    async saveListenerConfig() {
-      let validateStatus = await this.$refs["listenerFormRef"].validate();
-      if (!validateStatus) return; // 验证不通过直接返回
-      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.otherExtensionList =
-        this.bpmnElement.businessObject?.extensionElements?.values?.filter(
-          (ex) => ex.$type !== `${this.prefix}:TaskListener`
-        ) ?? [];
+  { immediate: true }
+);
+
+function resetListenersList() {
+  bpmnElement = window.bpmnInstances.bpmnElement;
+  otherExtensionList = [];
+  bpmnElementListeners =
+    bpmnElement.businessObject?.extensionElements?.values?.filter(
+      (ex) => ex.$type === `${prefix}:TaskListener`
+    ) ?? [];
+  elementListenersList.value = bpmnElementListeners.map((listener) =>
+    initListenerType(listener)
+  );
+}
+function openListenerForm(listener, index) {
+  if (listener) {
+    listenerForm.value = initListenerForm(listener);
+    editingListenerIndex.value = index;
+  } else {
+    listenerForm.value = {};
+    editingListenerIndex.value = -1; // 标记为新增
+  }
+  if (listener && listener.fields) {
+    fieldsListOfListener.value = listener.fields.map((field) => ({
+      ...field,
+      fieldType: field.string ? "string" : "expression",
+    }));
+  } else {
+    fieldsListOfListener.value = [];
+    listenerForm.value.fields = [];
+  }
+  // 打开侧边栏并清楚验证状态
+  listenerFormModelVisible.value = true;
+  nextTick(() => {
+    if (listenerFormRef.value) listenerFormRef.value.clearValidate();
+  });
+}
+// 移除监听器
+function removeListener(listener, index) {
+  ElMessageBox.confirm("确认移除该监听器吗？", "提示", {
+    confirmButtonText: "确 认",
+    cancelButtonText: "取 消",
+  })
+    .then(() => {
+      bpmnElementListeners.splice(index, 1);
+      elementListenersList.value.splice(index, 1);
       updateElementExtensions(
-        this.bpmnElement,
-        this.otherExtensionList.concat(this.bpmnElementListeners)
+        bpmnElement,
+        otherExtensionList.concat(bpmnElementListeners)
       );
-      // 4. 隐藏侧边栏
-      this.listenerFormModelVisible = false;
-      this.listenerForm = {};
-    },
-    // 打开监听器字段编辑弹窗
-    openListenerFieldForm(field, index) {
-      this.listenerFieldForm = field ? JSON.parse(JSON.stringify(field)) : {};
-      this.editingListenerFieldIndex = field ? index : -1;
-      this.listenerFieldFormModelVisible = true;
-      this.$nextTick(() => {
-        if (this.$refs["listenerFieldFormRef"])
-          this.$refs["listenerFieldFormRef"].clearValidate();
-      });
-    },
-    // 保存监听器注入字段
-    async saveListenerFiled() {
-      let validateStatus = await this.$refs["listenerFieldFormRef"].validate();
-      if (!validateStatus) return; // 验证不通过直接返回
-      if (this.editingListenerFieldIndex === -1) {
-        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.listenerFieldFormModelVisible = false;
-      this.$nextTick(() => (this.listenerFieldForm = {}));
-    },
-    // 移除监听器字段
-    removeListenerField(field, index) {
-      this.$confirm("确认移除该字段吗？", "提示", {
-        confirmButtonText: "确 认",
-        cancelButtonText: "取 消",
-      })
-        .then(() => {
-          this.fieldsListOfListener.splice(index, 1);
-          this.listenerForm.fields.splice(index, 1);
-        })
-        .catch(() => console.info("操作取消"));
-    },
-  },
-};
+    })
+    .catch(() => console.info("操作取消"));
+}
+// 保存监听器
+async function saveListenerConfig() {
+  let validateStatus = await listenerFormRef.value.validate();
+  if (!validateStatus) return; // 验证不通过直接返回
+  const listenerObject = createListenerObject(listenerForm.value, true, prefix);
+  if (editingListenerIndex.value === -1) {
+    bpmnElementListeners.push(listenerObject);
+    elementListenersList.value.push(listenerForm.value);
+  } else {
+    bpmnElementListeners.splice(editingListenerIndex.value, 1, listenerObject);
+    elementListenersList.value.splice(
+      editingListenerIndex.value,
+      1,
+      listenerForm.value
+    );
+  }
+  // 保存其他配置
+  otherExtensionList =
+    bpmnElement.businessObject?.extensionElements?.values?.filter(
+      (ex) => ex.$type !== `${prefix}:TaskListener`
+    ) ?? [];
+  updateElementExtensions(
+    bpmnElement,
+    otherExtensionList.concat(bpmnElementListeners)
+  );
+  // 4. 隐藏侧边栏
+  listenerFormModelVisible.value = false;
+  listenerForm.value = {};
+}
+// 打开监听器字段编辑弹窗
+function openListenerFieldForm(field, index) {
+  listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {};
+  editingListenerFieldIndex.value = field ? index : -1;
+  listenerFieldFormModelVisible.value = true;
+  nextTick(() => {
+    if (listenerFieldFormRef.value) listenerFieldFormRef.value.clearValidate();
+  });
+}
+// 保存监听器注入字段
+async function saveListenerFiled() {
+  let validateStatus = await listenerFieldFormRef.value.validate();
+  if (!validateStatus) return; // 验证不通过直接返回
+  if (editingListenerFieldIndex.value === -1) {
+    fieldsListOfListener.value.push(listenerFieldForm.value);
+    listenerForm.value.fields.push(listenerFieldForm.value);
+  } else {
+    fieldsListOfListener.value.splice(
+      editingListenerFieldIndex.value,
+      1,
+      listenerFieldForm.value
+    );
+    listenerForm.value.fields.splice(
+      editingListenerFieldIndex.value,
+      1,
+      listenerFieldForm.value
+    );
+  }
+  listenerFieldFormModelVisible.value = false;
+  nextTick(() => (listenerFieldForm.value = {}));
+}
+// 移除监听器字段
+function removeListenerField(field, index) {
+  ElMessageBox.confirm("确认移除该字段吗？", "提示", {
+    confirmButtonText: "确 认",
+    cancelButtonText: "取 消",
+  })
+    .then(() => {
+      fieldsListOfListener.value.splice(index, 1);
+      listenerForm.value.fields.splice(index, 1);
+    })
+    .catch(() => console.info("操作取消"));
+}
 </script>
diff --git a/src/plugins/package/penal/task/ElementTask.vue b/src/plugins/package/penal/task/ElementTask.vue
index 3ce9a34..04c6cbe 100644
--- a/src/plugins/package/penal/task/ElementTask.vue
+++ b/src/plugins/package/penal/task/ElementTask.vue
@@ -1,72 +1,70 @@
 <template>
   <div class="panel-tab__content">
     <el-form size="small" label-width="90px" @submit.native.prevent>
-<!--      <el-form-item label="异步延续">-->
-<!--        <el-checkbox v-model="taskConfigForm.asyncBefore" label="异步前" @change="changeTaskAsync" />-->
-<!--        <el-checkbox v-model="taskConfigForm.asyncAfter" label="异步后" @change="changeTaskAsync" />-->
-<!--        <el-checkbox v-model="taskConfigForm.exclusive" v-if="taskConfigForm.asyncAfter || taskConfigForm.asyncBefore" label="排除" @change="changeTaskAsync" />-->
-<!--      </el-form-item>-->
+      <!--      <el-form-item label="异步延续">-->
+      <!--        <el-checkbox v-model="taskConfigForm.asyncBefore" label="异步前" @change="changeTaskAsync" />-->
+      <!--        <el-checkbox v-model="taskConfigForm.asyncAfter" label="异步后" @change="changeTaskAsync" />-->
+      <!--        <el-checkbox v-model="taskConfigForm.exclusive" v-if="taskConfigForm.asyncAfter || taskConfigForm.asyncBefore" label="排除" @change="changeTaskAsync" />-->
+      <!--      </el-form-item>-->
       <component :is="witchTaskComponent" v-bind="$props" />
     </el-form>
   </div>
 </template>
-
-<script>
+<script setup name="ElementTaskConfig">
 import UserTask from "./task-components/UserTask";
 import ScriptTask from "./task-components/ScriptTask";
 import ReceiveTask from "./task-components/ReceiveTask";
+import { toRefs, ref } from "vue";
+const props = defineProps({
+  id: String,
+  type: String,
+});
+const { id, type } = toRefs(props);
+const data = reactive({
+  taskConfigForm: {
+    asyncAfter: false,
+    asyncBefore: false,
+    exclusive: false,
+  },
+  installedComponent: {
+    // 手工任务与普通任务一致，不需要其他配置
+    // 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
+    // 发送任务、服务任务、业务规则任务共用一个相同配置
+    UserTask: "UserTask", // 用户任务配置
+    ScriptTask: "ScriptTask", // 脚本任务配置
+    ReceiveTask: "ReceiveTask", // 消息接收任务
+  },
+});
+const { taskConfigForm, installedComponent } = toRefs(data);
+const witchTaskComponent = ref("");
+let bpmnElement;
+watch(
+  id,
+  (val) => {
+    bpmnElement = window.bpmnInstances.bpmnElement;
+    taskConfigForm.value.asyncBefore = bpmnElement?.businessObject?.asyncBefore;
+    taskConfigForm.value.asyncAfter = bpmnElement?.businessObject?.asyncAfter;
+    taskConfigForm.value.exclusive = bpmnElement?.businessObject?.exclusive;
+  },
+  { immediate: true }
+);
+watch(
+  type,
+  (val) => {
+    witchTaskComponent.value = installedComponent.value[type.value];
+  },
+  { immediate: true }
+);
 
-export default {
-  name: "ElementTaskConfig",
-  components: { UserTask, ScriptTask, ReceiveTask },
-  props: {
-    id: String,
-    type: String
-  },
-  data() {
-    return {
-      taskConfigForm: {
-        asyncAfter: false,
-        asyncBefore: false,
-        exclusive: false
-      },
-      witchTaskComponent: "",
-      installedComponent: {
-        // 手工任务与普通任务一致，不需要其他配置
-        // 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
-        // 发送任务、服务任务、业务规则任务共用一个相同配置
-        UserTask: "UserTask", // 用户任务配置
-        ScriptTask: "ScriptTask", // 脚本任务配置
-        ReceiveTask: "ReceiveTask" // 消息接收任务
-      }
-    };
-  },
-  watch: {
-    id: {
-      immediate: true,
-      handler() {
-        this.bpmnElement = window.bpmnInstances.bpmnElement;
-        this.taskConfigForm.asyncBefore = this.bpmnElement?.businessObject?.asyncBefore;
-        this.taskConfigForm.asyncAfter = this.bpmnElement?.businessObject?.asyncAfter;
-        this.taskConfigForm.exclusive = this.bpmnElement?.businessObject?.exclusive;
-      }
-    },
-    type: {
-      immediate: true,
-      handler() {
-        this.witchTaskComponent = this.installedComponent[this.type];
-      }
-    }
-  },
-  methods: {
-    changeTaskAsync() {
-      if (!this.taskConfigForm.asyncBefore && !this.taskConfigForm.asyncAfter) {
-        this.taskConfigForm.exclusive = false;
-      }
-      window.bpmnInstances.modeling.updateProperties(window.bpmnInstances.bpmnElement, {
-        ...this.taskConfigForm
-      });
-    }
+function changeTaskAsync() {
+  if (!taskConfigForm.value.asyncBefore && !taskConfigForm.value.asyncAfter) {
+    taskConfigForm.value.exclusive = false;
   }
-};
+  window.bpmnInstances.modeling.updateProperties(
+    window.bpmnInstances.bpmnElement,
+    {
+      ...taskConfigForm.value,
+    }
+  );
+}
 </script>
diff --git a/src/plugins/package/penal/task/task-components/ReceiveTask.vue b/src/plugins/package/penal/task/task-components/ReceiveTask.vue
index 81df7e8..fd73e98 100644
--- a/src/plugins/package/penal/task/task-components/ReceiveTask.vue
+++ b/src/plugins/package/penal/task/task-components/ReceiveTask.vue
@@ -1,15 +1,45 @@
 <template>
   <div style="margin-top: 16px">
     <el-form-item label="消息实例">
-      <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap">
+      <div
+        style="
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          flex-wrap: nowrap;
+        "
+      >
         <el-select v-model="bindMessageId" @change="updateTaskMessage">
-          <el-option v-for="id in Object.keys(messageMap)" :value="id" :label="messageMap[id]" :key="id" />
+          <el-option
+            v-for="id in Object.keys(messageMap)"
+            :value="id"
+            :label="messageMap[id]"
+            :key="id"
+          />
         </el-select>
-        <el-button size="small" type="primary" icon="el-icon-plus" style="margin-left: 8px" @click="openMessageModel" />
+        <el-button
+          size="small"
+          type="primary"
+          icon="el-icon-plus"
+          style="margin-left: 8px"
+          @click="openMessageModel"
+        />
       </div>
     </el-form-item>
-    <el-dialog v-model="messageModelVisible" :close-on-click-modal="false" title="创建新消息" width="400px" append-to-body destroy-on-close>
-      <el-form :model="newMessageForm" size="small" label-width="90px" @submit.native.prevent>
+    <el-dialog
+      v-model="messageModelVisible"
+      :close-on-click-modal="false"
+      title="创建新消息"
+      width="400px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form
+        :model="newMessageForm"
+        size="small"
+        label-width="90px"
+        @submit.native.prevent
+      >
         <el-form-item label="消息ID">
           <el-input v-model="newMessageForm.id" clearable />
         </el-form-item>
@@ -18,80 +48,87 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button size="small" type="primary" @click="createNewMessage">确 认</el-button>
+        <el-button size="small" type="primary" @click="createNewMessage"
+          >确 认</el-button
+        >
       </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
-export default {
-  name: "ReceiveTask",
-  props: {
-    id: String,
-    type: String
+<script setup name="ReceiveTask">
+import { ElMessage } from "element-plus";
+import { toRefs, ref, reactive, onBeforeUnmount, watch } from "vue";
+
+const props = defineProps({
+  id: String,
+  type: String,
+});
+const { id, type } = toRefs(props);
+const bindMessageId = ref("");
+const messageModelVisible = ref(false);
+let bpmnMessageRefsMap;
+let bpmnRootElements;
+const data = reactive({
+  newMessageForm: {},
+  messageMap: {},
+});
+const { newMessageForm, messageMap } = toRefs(data);
+watch(
+  id,
+  () => {
+    nextTick(() => getBindMessage());
   },
-  data() {
-    return {
-      bindMessageId: "",
-      newMessageForm: {},
-      messageMap: {},
-      messageModelVisible: false
-    };
-  },
-  watch: {
-    id: {
-      immediate: true,
-      handler() {
-        this.$nextTick(() => this.getBindMessage());
-      }
-    }
-  },
-  created() {
-    this.bpmnMessageRefsMap = Object.create(null);
-    this.bpmnRootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
-    this.bpmnRootElements
-      .filter(el => el.$type === "bpmn:Message")
-      .forEach(m => {
-        this.bpmnMessageRefsMap[m.id] = m;
-        this.$set(this.messageMap, m.id, m.name);
-      });
-    this.$set(this.messageMap, "-1", "无"); // 添加一个空对象，保证可以取消原消息绑定
-  },
-  methods: {
-    getBindMessage() {
-      this.bpmnElement = window.bpmnInstances.bpmnElement;
-      this.bindMessageId = this.bpmnElement.businessObject?.messageRef?.id || "-1";
-    },
-    openMessageModel() {
-      this.messageModelVisible = true;
-      this.newMessageForm = {};
-    },
-    createNewMessage() {
-      if (this.messageMap[this.newMessageForm.id]) {
-        this.$message.error("该消息已存在，请修改id后重新保存");
-        return;
-      }
-      const newMessage = window.bpmnInstances.moddle.create("bpmn:Message", this.newMessageForm);
-      this.bpmnRootElements.push(newMessage);
-      this.$set(this.messageMap, this.newMessageForm.id, this.newMessageForm.name);
-      this.bpmnMessageRefsMap[this.newMessageForm.id] = newMessage;
-      this.messageModelVisible = false;
-    },
-    updateTaskMessage(messageId) {
-      if (messageId === "-1") {
-        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
-          messageRef: null
-        });
-      } else {
-        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
-          messageRef: this.bpmnMessageRefsMap[messageId]
-        });
-      }
-    }
-  },
-  beforeDestroy() {
-    this.bpmnElement = null;
+  {
+    immediate: true,
   }
-};
+);
+
+function getBindMessage() {
+  bpmnElement = window.bpmnInstances.bpmnElement;
+  bindMessageId.value = bpmnElement.businessObject?.messageRef?.id || "-1";
+}
+function openMessageModel() {
+  messageModelVisible.value = true;
+  newMessageForm.value = {};
+}
+function createNewMessage() {
+  if (messageMap.value[newMessageForm.value.id]) {
+    ElMessage.success("该消息已存在，请修改id后重新保存");
+    return;
+  }
+  const newMessage = window.bpmnInstances.moddle.create(
+    "bpmn:Message",
+    newMessageForm.value
+  );
+  bpmnRootElements.push(newMessage);
+  messageMap.value[newMessageForm.value.id] = newMessageForm.value.name;
+  bpmnMessageRefsMap[newMessageForm.value.id] = newMessage;
+  messageModelVisible.value = false;
+}
+function updateTaskMessage(messageId) {
+  if (messageId === "-1") {
+    window.bpmnInstances.modeling.updateProperties(bpmnElement, {
+      messageRef: null,
+    });
+  } else {
+    window.bpmnInstances.modeling.updateProperties(bpmnElement, {
+      messageRef: bpmnMessageRefsMap[messageId],
+    });
+  }
+}
+
+bpmnMessageRefsMap = Object.create(null);
+bpmnRootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
+bpmnRootElements
+  .filter((el) => el.$type === "bpmn:Message")
+  .forEach((m) => {
+    bpmnMessageRefsMap[m.id] = m;
+    messageMap.value[m.id] = m.name;
+  });
+messageMap[-1] = "无";
+
+onBeforeUnmount(() => {
+  bpmnElement = null;
+});
 </script>
diff --git a/src/plugins/package/penal/task/task-components/ScriptTask.vue b/src/plugins/package/penal/task/task-components/ScriptTask.vue
index 34ed9fd..34895e2 100644
--- a/src/plugins/package/penal/task/task-components/ScriptTask.vue
+++ b/src/plugins/package/penal/task/task-components/ScriptTask.vue
@@ -1,7 +1,12 @@
 <template>
   <div style="margin-top: 16px">
     <el-form-item label="脚本格式">
-      <el-input v-model="scriptTaskForm.scriptFormat" clearable @input="updateElementTask()" @change="updateElementTask()" />
+      <el-input
+        v-model="scriptTaskForm.scriptFormat"
+        clearable
+        @input="updateElementTask()"
+        @change="updateElementTask()"
+      />
     </el-form-item>
     <el-form-item label="脚本类型">
       <el-select v-model="scriptTaskForm.scriptType">
@@ -20,66 +25,82 @@
         @change="updateElementTask()"
       />
     </el-form-item>
-    <el-form-item label="资源地址" v-show="scriptTaskForm.scriptType === 'external'">
-      <el-input v-model="scriptTaskForm.resource" clearable @input="updateElementTask()" @change="updateElementTask()" />
+    <el-form-item
+      label="资源地址"
+      v-show="scriptTaskForm.scriptType === 'external'"
+    >
+      <el-input
+        v-model="scriptTaskForm.resource"
+        clearable
+        @input="updateElementTask()"
+        @change="updateElementTask()"
+      />
     </el-form-item>
     <el-form-item label="结果变量">
-      <el-input v-model="scriptTaskForm.resultVariable" clearable @input="updateElementTask()" @change="updateElementTask()" />
+      <el-input
+        v-model="scriptTaskForm.resultVariable"
+        clearable
+        @input="updateElementTask()"
+        @change="updateElementTask()"
+      />
     </el-form-item>
   </div>
 </template>
+<script setup name="ScriptTask">
+import { reactive, watch, onBeforeUnmount } from "vue";
 
-<script>
-export default {
-  name: "ScriptTask",
-  props: {
-    id: String,
-    type: String
+const props = defineProps({
+  id: String,
+  type: String,
+});
+
+const { id, type } = toRefs(props);
+
+const data = reactive({
+  defaultTaskForm: {
+    scriptFormat: "",
+    script: "",
+    resource: "",
+    resultVariable: "",
   },
-  data() {
-    return {
-      defaultTaskForm: {
-        scriptFormat: "",
-        script: "",
-        resource: "",
-        resultVariable: ""
-      },
-      scriptTaskForm: {}
-    };
-  },
-  watch: {
-    id: {
-      immediate: true,
-      handler() {
-        this.bpmnElement = window.bpmnInstances.bpmnElement;
-        this.$nextTick(() => this.resetTaskForm());
-      }
-    }
-  },
-  methods: {
-    resetTaskForm() {
-      for (let key in this.defaultTaskForm) {
-        let value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
-        this.$set(this.scriptTaskForm, key, value);
-      }
-      this.$set(this.scriptTaskForm, "scriptType", this.scriptTaskForm.script ? "inline" : "external");
-    },
-    updateElementTask() {
-      let taskAttr = Object.create(null);
-      taskAttr.scriptFormat = this.scriptTaskForm.scriptFormat || null;
-      taskAttr.resultVariable = this.scriptTaskForm.resultVariable || null;
-      if (this.scriptTaskForm.scriptType === "inline") {
-        taskAttr.script = this.scriptTaskForm.script || null;
-        taskAttr.resource = null;
-      } else {
-        taskAttr.resource = this.scriptTaskForm.resource || null;
-        taskAttr.script = null;
-      }
-      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
-    }
-  },
-  beforeDestroy() {
-    this.bpmnElement = null;
+  scriptTaskForm: {},
+});
+const { defaultTaskForm, scriptTaskForm } = toRefs(data);
+
+let bpmnElement;
+
+watch(id, () => {
+  bpmnElement = window.bpmnInstances.bpmnElement;
+  nextTick(() => {
+    resetTaskForm();
+  });
+});
+
+function resetTaskForm() {
+  for (let key in defaultTaskForm.value) {
+    let value = bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
+    scriptTaskForm.value[key] = value;
   }
-};
+  scriptTaskForm.value.scriptType = scriptTaskForm.value.script
+    ? "inline"
+    : "external";
+}
+
+function updateElementTask() {
+  let taskAttr = Object.create(null);
+  taskAttr.scriptFormat = scriptTaskForm.value.scriptFormat || null;
+  taskAttr.resultVariable = scriptTaskForm.value.resultVariable || null;
+  if (scriptTaskForm.value.scriptType === "inline") {
+    taskAttr.script = scriptTaskForm.value.script || null;
+    taskAttr.resource = null;
+  } else {
+    taskAttr.resource = scriptTaskForm.value.resource || null;
+    taskAttr.script = null;
+  }
+  window.bpmnInstances.modeling.updateProperties(bpmnElement, taskAttr);
+}
+
+onBeforeUnmount(() => {
+  bpmnElement = null;
+});
 </script>
diff --git a/src/plugins/package/penal/task/task-components/UserTask.vue b/src/plugins/package/penal/task/task-components/UserTask.vue
index 82aff31..720eae8 100644
--- a/src/plugins/package/penal/task/task-components/UserTask.vue
+++ b/src/plugins/package/penal/task/task-components/UserTask.vue
@@ -11,21 +11,38 @@
     </el-row>
     <el-row>
       <div v-if="dataType === 'USERS'">
-        <el-tag v-for="userText in selectedUser.text" :key="userText" effect="plain">
-          {{userText}}
+        <el-tag
+          v-for="userText in selectedUser.text"
+          :key="userText"
+          effect="plain"
+        >
+          {{ userText }}
         </el-tag>
         <div class="element-drawer__button">
-          <el-button size="small" type="primary" icon="el-icon-plus" @click="onSelectUsers()">添加用户</el-button>
+          <el-button
+            size="small"
+            type="primary"
+            icon="el-icon-plus"
+            @click="onSelectUsers()"
+            >添加用户</el-button
+          >
         </div>
       </div>
       <div v-if="dataType === 'ROLES'">
-        <el-select v-model="roleIds" multiple size="small" placeholder="请选择 角色" @change="changeSelectRoles">
+        <el-select
+          v-model="roleIds"
+          multiple
+          size="small"
+          placeholder="请选择 角色"
+          @change="changeSelectRoles"
+        >
           <el-option
             v-for="item in roleOptions"
             :key="item.roleId"
             :label="item.roleName"
             :value="`ROLE${item.roleId}`"
-            :disabled="item.status === 1">
+            :disabled="item.status === 1"
+          >
           </el-option>
         </el-select>
       </div>
@@ -41,7 +58,8 @@
           checkStrictly
           nodeKey="id"
           :checkedKeys="deptIds"
-          @checked-change="checkedDeptChange">
+          @checked-change="checkedDeptChange"
+        >
         </tree-select>
       </div>
     </el-row>
@@ -52,12 +70,24 @@
         <el-row>
           <el-radio-group v-model="multiLoopType" @change="changeMultiLoopType">
             <el-row><el-radio label="Null">无</el-radio></el-row>
-            <el-row><el-radio label="SequentialMultiInstance">会签（需所有审批人同意）</el-radio></el-row>
-            <el-row><el-radio label="ParallelMultiInstance">或签（一名审批人同意即可）</el-radio></el-row>
+            <el-row
+              ><el-radio label="SequentialMultiInstance"
+                >会签（需所有审批人同意）</el-radio
+              ></el-row
+            >
+            <el-row
+              ><el-radio label="ParallelMultiInstance"
+                >或签（一名审批人同意即可）</el-radio
+              ></el-row
+            >
           </el-radio-group>
         </el-row>
         <el-row v-if="multiLoopType !== 'Null'">
-          <el-tooltip content="开启后，实例需按顺序轮流审批" placement="top-start" @click.stop.prevent>
+          <el-tooltip
+            content="开启后，实例需按顺序轮流审批"
+            placement="top-start"
+            @click.stop.prevent
+          >
             <i class="header-icon el-icon-info"></i>
           </el-tooltip>
           <span class="custom-label">顺序审批：</span>
@@ -97,7 +127,13 @@
           </el-card>
         </el-col>
         <el-col :span="17">
-          <el-table ref="multipleTable" height="600" :data="userTableList" border @selection-change="handleSelectionChange">
+          <el-table
+            ref="multipleTable"
+            height="600"
+            :data="userTableList"
+            border
+            @selection-change="handleSelectionChange"
+          >
             <el-table-column type="selection" width="50" align="center" />
             <el-table-column label="用户名" align="center" prop="nickName" />
             <el-table-column label="部门" align="center" prop="dept.deptName" />
@@ -111,360 +147,397 @@
         </el-col>
       </el-row>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="handleTaskUserComplete">确 定</el-button>
+        <el-button type="primary" @click="handleTaskUserComplete"
+          >确 定</el-button
+        >
         <el-button @click="userOpen = false">取 消</el-button>
       </div>
     </el-dialog>
   </div>
-
 </template>
 
-<script>
+<script setup>
 import { listUser, deptTreeSelect } from "@/api/system/user";
 import { listRole } from "@/api/system/role";
 import TreeSelect from "@/components/TreeSelect";
-
+import { ref, reactive, watch } from "vue";
+import { ElMessage } from "element-plus";
 const userTaskForm = {
-  dataType: '',
-  assignee: '',
-  candidateUsers: '',
-  candidateGroups: '',
-  text: '',
-  // dueDate: '',
-  // followUpDate: '',
-  // priority: ''
-}
-
-export default {
-  name: "UserTask",
-  props: {
-    id: String,
-    type: String
-  },
-  components: { TreeSelect },
-  data() {
-    return {
-      loading: false,
-      dataType: 'USERS',
-      selectedUser: {
-        ids: [],
-        text: []
-      },
-      userOpen: false,
-      deptName: undefined,
-      deptOptions: [],
-      deptProps: {
-        children: "children",
-        label: "label"
-      },
-      deptTempOptions: [],
-      userTableList: [],
-      userTotal: 0,
-      selectedUserDate: [],
-      roleOptions: [],
-      roleIds: [],
-      deptTreeData: [],
-      deptIds: [],
-      // 查询参数
-      queryParams: {
-        deptId: undefined
-      },
-      showMultiFlog: false,
-      isSequential: false,
-      multiLoopType: 'Null',
-    };
-  },
-  watch: {
-    id: {
-      immediate: true,
-      handler() {
-        this.bpmnElement = window.bpmnInstances.bpmnElement;
-        this.$nextTick(() => this.resetTaskForm());
-      }
-    }
-  },
-  beforeDestroy() {
-    this.bpmnElement = null;
-  },
-  methods: {
-    resetTaskForm() {
-      const bpmnElementObj = this.bpmnElement?.businessObject;
-      if (!bpmnElementObj) {
-        return;
-      }
-      this.clearOptionsData()
-      this.dataType = bpmnElementObj['dataType'];
-      if (this.dataType === 'USERS') {
-        let userIdData = bpmnElementObj['candidateUsers'] || bpmnElementObj['assignee'];
-        let userText = bpmnElementObj['text'] || [];
-        if (userIdData && userIdData.toString().length > 0 && userText && userText.length > 0) {
-          this.selectedUser.ids = userIdData?.toString().split(',');
-          this.selectedUser.text = userText?.split(',');
-        }
-        if (this.selectedUser.ids.length > 1) {
-          this.showMultiFlog = true;
-        }
-      } else if (this.dataType === 'ROLES') {
-        this.getRoleOptions();
-        let roleIdData = bpmnElementObj['candidateGroups'] || [];
-        if (roleIdData && roleIdData.length > 0) {
-          this.roleIds = roleIdData.split(',')
-        }
-        this.showMultiFlog = true;
-      } else if (this.dataType === 'DEPTS') {
-        this.getDeptTreeData().then(() => {
-          let deptIdData = bpmnElementObj['candidateGroups'] || [];
-          if (deptIdData && deptIdData.length > 0) {
-            this.deptIds = deptIdData.split(',');
-          }
-        });
-        this.showMultiFlog = true;
-      }
-      this.getElementLoop(bpmnElementObj);
-    },
-    /**
-     * 清空选项数据
-     */
-    clearOptionsData() {
-      this.selectedUser.ids = [];
-      this.selectedUser.text = [];
-      this.roleIds = [];
-      this.deptIds = [];
-    },
-    /**
-     * 跟新节点数据
-     */
-    updateElementTask() {
-      const taskAttr = Object.create(null);
-      for (let key in userTaskForm) {
-          taskAttr[key] = userTaskForm[key];
-      }
-      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
-    },
-    /**
-     * 查询部门下拉树结构
-     */
-    getDeptOptions() {
-      return new Promise((resolve, reject) => {
-        if (!this.deptOptions || this.deptOptions.length <= 0) {
-          deptTreeSelect().then(response => {
-            this.deptTempOptions = response.data;
-            this.deptOptions = response.data;
-            resolve()
-          })
-        } else {
-          reject()
-        }
-      });
-    },
-    /**
-     * 查询部门下拉树结构（含部门前缀）
-     */
-    getDeptTreeData() {
-      function refactorTree(data) {
-        return data.map(node => {
-          let treeData = { id: `DEPT${node.id}`, label: node.label, parentId: node.parentId, weight: node.weight };
-          if (node.children && node.children.length > 0) {
-            treeData.children = refactorTree(node.children);
-          }
-          return treeData;
-        });
-      }
-      return new Promise((resolve, reject) => {
-        if (!this.deptTreeData || this.deptTreeData.length <= 0) {
-          this.getDeptOptions().then(() => {
-            this.deptTreeData = refactorTree(this.deptOptions);
-            resolve()
-          }).catch(() => {
-            reject()
-          })
-        } else {
-          resolve()
-        }
-      })
-    },
-    /**
-     * 查询部门下拉树结构
-     */
-    getRoleOptions() {
-      if (!this.roleOptions || this.roleOptions.length <= 0) {
-        listRole().then(response => this.roleOptions = response.rows);
-      }
-    },
-    /** 查询用户列表 */
-    getUserList() {
-      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
-        this.userTableList = response.rows;
-        this.userTotal = response.total;
-      });
-    },
-    // 筛选节点
-    filterNode(value, data) {
-      if (!value) return true;
-      return data.label.indexOf(value) !== -1;
-    },
-    // 节点单击事件
-    handleNodeClick(data) {
-      this.queryParams.deptId = data.id;
-      this.getUserList();
-    },
-    // 关闭标签
-    handleClose(tag) {
-      this.selectedUserDate.splice(this.selectedUserDate.indexOf(tag), 1);
-      this.$refs.multipleTable.toggleRowSelection(tag);
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.selectedUserDate = selection;
-    },
-    onSelectUsers() {
-      this.selectedUserDate = []
-      this.$refs.multipleTable?.clearSelection();
-      this.getDeptOptions();
-      this.userOpen = true;
-    },
-    handleTaskUserComplete() {
-      if (!this.selectedUserDate || this.selectedUserDate.length <= 0) {
-        this.$modal.msgError('请选择用户');
-        return;
-      }
-      userTaskForm.dataType = 'USERS';
-      this.selectedUser.text = this.selectedUserDate.map(k => k.nickName) || [];
-      if (this.selectedUserDate.length === 1) {
-        let data = this.selectedUserDate[0];
-        userTaskForm.assignee = data.userId;
-        userTaskForm.text = data.nickName;
-        userTaskForm.candidateUsers = null;
-        this.showMultiFlog = false;
-        this.multiLoopType = 'Null';
-        this.changeMultiLoopType(this.multiLoopType);
-      } else {
-        userTaskForm.candidateUsers = this.selectedUserDate.map(k => k.userId).join() || null;
-        userTaskForm.text = this.selectedUserDate.map(k => k.nickName).join() || null;
-        userTaskForm.assignee = null;
-        this.showMultiFlog = true;
-      }
-      this.updateElementTask()
-      this.userOpen = false;
-    },
-    changeSelectRoles(val) {
-      userTaskForm.dataType = 'ROLES';
-      userTaskForm.candidateGroups = val.join() || null;
-      let textArr = this.roleOptions.filter(k => val.indexOf(`ROLE${k.roleId}`) >= 0);
-      userTaskForm.text = textArr?.map(k => k.roleName).join() || null;
-      this.updateElementTask();
-    },
-    checkedDeptChange(checkedIds, checkedData) {
-      userTaskForm.dataType = 'DEPTS';
-      if (checkedIds && checkedIds.length > 0) {
-        this.deptIds = checkedIds;
-      }
-      if (checkedData && checkedData.length > 0) {
-        userTaskForm.candidateGroups = checkedData.map(k => k.id).join() || null
-        userTaskForm.text = checkedData.map(k => k.label).join() || null
-        this.updateElementTask();
-      }
-    },
-    changeDataType(val) {
-      // 清空 userTaskForm 所有属性值
-      Object.keys(userTaskForm).forEach(key => userTaskForm[key] = null);
-      userTaskForm.dataType = val;
-      if (val === 'USERS') {
-        if (this.selectedUser && this.selectedUser.ids && this.selectedUser.ids.length > 0) {
-          if (this.selectedUser.ids.length === 1) {
-            userTaskForm.assignee = this.selectedUser.ids[0];
-          } else {
-            userTaskForm.candidateUsers = this.selectedUser.ids.join()
-          }
-          userTaskForm.text = this.selectedUser.text?.join() || null
-        }
-      } else if (val === 'ROLES') {
-        this.getRoleOptions();
-        if (this.roleIds && this.roleIds.length > 0) {
-          userTaskForm.candidateGroups = this.roleIds.join() || null;
-          let textArr = this.roleOptions.filter(k => this.roleIds.indexOf(`ROLE${k.roleId}`) >= 0);
-          userTaskForm.text = textArr?.map(k => k.roleName).join() || null;
-        }
-      } else if (val === 'DEPTS') {
-        this.getDeptTreeData();
-        if (this.deptIds && this.deptIds.length > 0) {
-          userTaskForm.candidateGroups = this.deptIds.join() || null;
-          let textArr = []
-          let treeStarkData = JSON.parse(JSON.stringify(this.deptTreeData));
-          this.deptIds.forEach(id => {
-            let stark = []
-            stark = stark.concat(treeStarkData);
-            while(stark.length) {
-              let temp = stark.shift();
-              if(temp.children) {
-                stark = temp.children.concat(stark);
-              }
-              if(id === temp.id) {
-                textArr.push(temp);
-              }
-            }
-          })
-          userTaskForm.text = textArr?.map(k => k.label).join() || null;
-        }
-      } else if (val === 'INITIATOR') {
-        userTaskForm.assignee = "${initiator}";
-        userTaskForm.text = "流程发起人";
-      }
-      this.updateElementTask();
-      if (val === 'ROLES' || val === 'DEPTS' || (val === 'USERS' && this.selectedUser.ids.length > 1)) {
-        this.showMultiFlog = true;
-      } else {
-        this.showMultiFlog = false;
-      }
-      this.multiLoopType = 'Null';
-      this.changeMultiLoopType(this.multiLoopType);
-    },
-    getElementLoop(businessObject) {
-      if (!businessObject.loopCharacteristics) {
-        this.multiLoopType = "Null";
-        return;
-      }
-      this.isSequential = businessObject.loopCharacteristics.isSequential;
-      if (businessObject.loopCharacteristics.completionCondition) {
-        if (businessObject.loopCharacteristics.completionCondition.body === "${nrOfCompletedInstances >= nrOfInstances}") {
-          this.multiLoopType = "SequentialMultiInstance";
-        } else {
-          this.multiLoopType = "ParallelMultiInstance";
-
-        }
-      }
-    },
-    changeMultiLoopType(type) {
-      // 取消多实例配置
-      if (type === "Null") {
-        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { loopCharacteristics: null });
-        return;
-      }
-      this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics", { isSequential: this.isSequential });
-      // 更新多实例配置
-      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
-        loopCharacteristics: this.multiLoopInstance,
-        assignee: '${assignee}'
-      });
-      // 完成条件
-      let completionCondition = null;
-      // 会签
-      if (type === "SequentialMultiInstance") {
-        completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: "${nrOfCompletedInstances >= nrOfInstances}" });
-      }
-      // 或签
-      if (type === "ParallelMultiInstance") {
-        completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: "${nrOfCompletedInstances > 0}" });
-      }
-      // 更新模块属性信息
-      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, {
-        collection: '${multiInstanceHandler.getUserIds(execution)}',
-        elementVariable: 'assignee',
-        completionCondition
-      });
-    },
-  }
+  dataType: "",
+  assignee: "",
+  candidateUsers: "",
+  candidateGroups: "",
+  text: "",
 };
+const loading = ref(false);
+const dataType = ref("USERS");
+const userOpen = ref(false);
+const deptName = ref(undefined);
+const deptOptions = ref([]);
+const deptTempOptions = ref([]);
+const userTableList = ref([]);
+const userTotal = ref(0);
+const selectedUserDate = ref([]);
+const roleOptions = ref([]);
+const roleIds = ref([]);
+const deptTreeData = ref([]);
+const deptIds = ref([]);
+const showMultiFlog = ref(false);
+const isSequential = ref(false);
+const multiLoopType = ref("Null");
+
+const data = reactive({
+  selectedUser: {
+    ids: [],
+    text: [],
+  },
+  deptProps: {
+    children: "children",
+    label: "label",
+  },
+  // 查询参数
+  queryParams: {
+    deptId: undefined,
+  },
+});
+const { selectedUser, deptProps, queryParams } = toRefs(data);
+let bpmnElement;
+let multiLoopInstance;
+let dateRange;
+
+watch(
+  id,
+  () => {
+    bpmnElement = window.bpmnInstances.bpmnElement;
+    nextTick(() => resetTaskForm());
+  },
+  { immediate: true }
+);
+
+function resetTaskForm() {
+  const bpmnElementObj = bpmnElement?.businessObject;
+  if (!bpmnElementObj) {
+    return;
+  }
+  clearOptionsData();
+  dataType.value = bpmnElementObj["dataType"];
+  if (dataType.value === "USERS") {
+    let userIdData =
+      bpmnElementObj["candidateUsers"] || bpmnElementObj["assignee"];
+    let userText = bpmnElementObj["text"] || [];
+    if (
+      userIdData &&
+      userIdData.toString().length > 0 &&
+      userText &&
+      userText.length > 0
+    ) {
+      selectedUser.value.ids = userIdData?.toString().split(",");
+      selectedUser.value.text = userText?.split(",");
+    }
+    if (selectedUser.value.ids.length > 1) {
+      showMultiFlog.value = true;
+    }
+  } else if (dataType.value === "ROLES") {
+    getRoleOptions();
+    let roleIdData = bpmnElementObj["candidateGroups"] || [];
+    if (roleIdData && roleIdData.length > 0) {
+      roleIds.value = roleIdData.split(",");
+    }
+    showMultiFlog.value = true;
+  } else if (dataType.value === "DEPTS") {
+    getDeptTreeData().then(() => {
+      let deptIdData = bpmnElementObj["candidateGroups"] || [];
+      if (deptIdData && deptIdData.length > 0) {
+        deptIds.value = deptIdData.split(",");
+      }
+    });
+    showMultiFlog.value = true;
+  }
+  getElementLoop(bpmnElementObj);
+}
+/**
+ * 清空选项数据
+ */
+function clearOptionsData() {
+  selectedUser.value.ids = [];
+  selectedUser.value.text = [];
+  roleIds.value = [];
+  deptIds.value = [];
+}
+/**
+ * 跟新节点数据
+ */
+function updateElementTask() {
+  const taskAttr = Object.create(null);
+  for (let key in userTaskForm) {
+    taskAttr[key] = userTaskForm[key];
+  }
+  window.bpmnInstances.modeling.updateProperties(bpmnElement, taskAttr);
+}
+/**
+ * 查询部门下拉树结构
+ */
+function getDeptOptions() {
+  return new Promise((resolve, reject) => {
+    if (!deptOptions.value || deptOptions.value.length <= 0) {
+      deptTreeSelect().then((response) => {
+        deptTempOptions.value = response.data;
+        deptOptions.value = response.data;
+        resolve();
+      });
+    } else {
+      reject();
+    }
+  });
+}
+/**
+ * 查询部门下拉树结构（含部门前缀）
+ */
+function getDeptTreeData() {
+  function refactorTree(data) {
+    return data.map((node) => {
+      let treeData = {
+        id: `DEPT${node.id}`,
+        label: node.label,
+        parentId: node.parentId,
+        weight: node.weight,
+      };
+      if (node.children && node.children.length > 0) {
+        treeData.children = refactorTree(node.children);
+      }
+      return treeData;
+    });
+  }
+  return new Promise((resolve, reject) => {
+    if (!deptTreeData.value || deptTreeData.value.length <= 0) {
+      getDeptOptions()
+        .then(() => {
+          deptTreeData.value = refactorTree(deptOptions.value);
+          resolve();
+        })
+        .catch(() => {
+          reject();
+        });
+    } else {
+      resolve();
+    }
+  });
+}
+/**
+ * 查询部门下拉树结构
+ */
+function getRoleOptions() {
+  if (!roleOptions.value || roleOptions.value.length <= 0) {
+    listRole().then((response) => (roleOptions.value = response.rows));
+  }
+}
+/** 查询用户列表 */
+function getUserList() {
+  listUser(addDateRange(queryParams.value, dateRange)).then((response) => {
+    userTableList.value = response.rows;
+    userTotal.value = response.total;
+  });
+}
+// 筛选节点
+function filterNode(value, data) {
+  if (!value) return true;
+  return data.label.indexOf(value) !== -1;
+}
+// 节点单击事件
+function handleNodeClick(data) {
+  queryParams.value.deptId = data.id;
+  getUserList();
+}
+// 关闭标签
+const multipleTable = ref();
+function handleClose(tag) {
+  selectedUserDate.value.splice(selectedUserDate.value.indexOf(tag), 1);
+  multipleTable.value.toggleRowSelection(tag);
+}
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  selectedUserDate.value = selection;
+}
+function onSelectUsers() {
+  selectedUserDate.value = [];
+  multipleTable.value?.clearSelection();
+  getDeptOptions();
+  userOpen.value = true;
+}
+function handleTaskUserComplete() {
+  if (!selectedUserDate.value || selectedUserDate.value.length <= 0) {
+    ElMessage.error("请选择用户");
+    return;
+  }
+  userTaskForm.dataType = "USERS";
+  selectedUser.value.text = selectedUserDate.value.map((k) => k.nickName) || [];
+  if (selectedUserDate.value.length === 1) {
+    let data = selectedUserDate.value[0];
+    userTaskForm.assignee = data.userId;
+    userTaskForm.text = data.nickName;
+    userTaskForm.candidateUsers = null;
+    showMultiFlog.value = false;
+    multiLoopType.value = "Null";
+    changeMultiLoopType(multiLoopType.value);
+  } else {
+    userTaskForm.candidateUsers =
+      selectedUserDate.value.map((k) => k.userId).join() || null;
+    userTaskForm.text =
+      selectedUserDate.value.map((k) => k.nickName).join() || null;
+    userTaskForm.assignee = null;
+    showMultiFlog.value = true;
+  }
+  updateElementTask();
+  userOpen.value = false;
+}
+function changeSelectRoles(val) {
+  userTaskForm.dataType = "ROLES";
+  userTaskForm.candidateGroups = val.join() || null;
+  let textArr = roleOptions.value.filter(
+    (k) => val.indexOf(`ROLE${k.roleId}`) >= 0
+  );
+  userTaskForm.text = textArr?.map((k) => k.roleName).join() || null;
+  updateElementTask();
+}
+function checkedDeptChange(checkedIds, checkedData) {
+  userTaskForm.dataType = "DEPTS";
+  if (checkedIds && checkedIds.length > 0) {
+    deptIds.value = checkedIds;
+  }
+  if (checkedData && checkedData.length > 0) {
+    userTaskForm.candidateGroups = checkedData.map((k) => k.id).join() || null;
+    userTaskForm.text = checkedData.map((k) => k.label).join() || null;
+    updateElementTask();
+  }
+}
+function changeDataType(val) {
+  // 清空 userTaskForm 所有属性值
+  Object.keys(userTaskForm).forEach((key) => (userTaskForm[key] = null));
+  userTaskForm.dataType = val;
+  if (val === "USERS") {
+    if (
+      selectedUser.value &&
+      selectedUser.value.ids &&
+      selectedUser.value.ids.length > 0
+    ) {
+      if (selectedUser.value.ids.length === 1) {
+        userTaskForm.assignee = selectedUser.value.ids[0];
+      } else {
+        userTaskForm.candidateUsers = selectedUser.value.ids.join();
+      }
+      userTaskForm.text = selectedUser.value.text?.join() || null;
+    }
+  } else if (val === "ROLES") {
+    getRoleOptions();
+    if (roleIds.value && roleIds.value.length > 0) {
+      userTaskForm.candidateGroups = roleIds.value.join() || null;
+      let textArr = roleOptions.value.filter(
+        (k) => roleIds.value.indexOf(`ROLE${k.roleId}`) >= 0
+      );
+      userTaskForm.text = textArr?.map((k) => k.roleName).join() || null;
+    }
+  } else if (val === "DEPTS") {
+    getDeptTreeData();
+    if (deptIds.value && deptIds.value.length > 0) {
+      userTaskForm.candidateGroups = deptIds.value.join() || null;
+      let textArr = [];
+      let treeStarkData = JSON.parse(JSON.stringify(deptTreeData.value));
+      deptIds.value.forEach((id) => {
+        let stark = [];
+        stark = stark.concat(treeStarkData);
+        while (stark.length) {
+          let temp = stark.shift();
+          if (temp.children) {
+            stark = temp.children.concat(stark);
+          }
+          if (id === temp.id) {
+            textArr.push(temp);
+          }
+        }
+      });
+      userTaskForm.text = textArr?.map((k) => k.label).join() || null;
+    }
+  } else if (val === "INITIATOR") {
+    userTaskForm.assignee = "${initiator}";
+    userTaskForm.text = "流程发起人";
+  }
+  updateElementTask();
+  if (
+    val === "ROLES" ||
+    val === "DEPTS" ||
+    (val === "USERS" && selectedUser.value.ids.length > 1)
+  ) {
+    showMultiFlog.value = true;
+  } else {
+    showMultiFlog.value = false;
+  }
+  multiLoopType.value = "Null";
+  changeMultiLoopType(multiLoopType.value);
+}
+function getElementLoop(businessObject) {
+  if (!businessObject.loopCharacteristics) {
+    multiLoopType.value = "Null";
+    return;
+  }
+  isSequential.value = businessObject.loopCharacteristics.isSequential;
+  if (businessObject.loopCharacteristics.completionCondition) {
+    if (
+      businessObject.loopCharacteristics.completionCondition.body ===
+      "${nrOfCompletedInstances >= nrOfInstances}"
+    ) {
+      multiLoopType.value = "SequentialMultiInstance";
+    } else {
+      multiLoopType.value = "ParallelMultiInstance";
+    }
+  }
+}
+function changeMultiLoopType(type) {
+  // 取消多实例配置
+  if (type === "Null") {
+    window.bpmnInstances.modeling.updateProperties(bpmnElement, {
+      loopCharacteristics: null,
+    });
+    return;
+  }
+  multiLoopInstance = window.bpmnInstances.moddle.create(
+    "bpmn:MultiInstanceLoopCharacteristics",
+    { isSequential: isSequential.value }
+  );
+  // 更新多实例配置
+  window.bpmnInstances.modeling.updateProperties(bpmnElement, {
+    loopCharacteristics: multiLoopInstance,
+    assignee: "${assignee}",
+  });
+  // 完成条件
+  let completionCondition = null;
+  // 会签
+  if (type === "SequentialMultiInstance") {
+    completionCondition = window.bpmnInstances.moddle.create(
+      "bpmn:FormalExpression",
+      { body: "${nrOfCompletedInstances >= nrOfInstances}" }
+    );
+  }
+  // 或签
+  if (type === "ParallelMultiInstance") {
+    completionCondition = window.bpmnInstances.moddle.create(
+      "bpmn:FormalExpression",
+      { body: "${nrOfCompletedInstances > 0}" }
+    );
+  }
+  // 更新模块属性信息
+  window.bpmnInstances.modeling.updateModdleProperties(
+    bpmnElement,
+    multiLoopInstance,
+    {
+      collection: "${multiInstanceHandler.getUserIds(execution)}",
+      elementVariable: "assignee",
+      completionCondition,
+    }
+  );
+}
+onBeforeUnmount(() => {
+  bpmnElement = null;
+});
 </script>
 
 <style scoped lang="scss">
@@ -487,5 +560,4 @@ export default {
   font-size: 14px;
   color: #606266;
 }
-
 </style>
diff --git a/src/plugins/package/theme/process-designer.scss b/src/plugins/package/theme/process-designer.scss
index f25e98d..d97dab3 100644
--- a/src/plugins/package/theme/process-designer.scss
+++ b/src/plugins/package/theme/process-designer.scss
@@ -39,7 +39,7 @@
         &:after {
           content: "|";
           position: absolute;
-          transform: rotate(90deg) translate(200%, 60%);
+          transform: rotate(90deg) translate(196%, -8%);
         }
       }
     }
@@ -58,13 +58,13 @@
     .align.align-center i {
       transform: rotate(90deg);
       &:after {
-        transform: rotate(90deg) translate(0, 60%);
+        transform: rotate(90deg) translate(0, -8%);
       }
     }
     .align.align-middle i {
       transform: rotate(0deg);
       &:after {
-        transform: rotate(90deg) translate(0, 60%);
+        transform: rotate(90deg) translate(0, -8%);
       }
     }
   }
@@ -77,7 +77,7 @@
       height: 100%;
       position: relative;
       background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+")
-      repeat !important;
+        repeat !important;
       div.toggle-mode {
         display: none;
       }
diff --git a/src/utils/generator/config.js b/src/utils/generator/config.js
index aa31e62..959717f 100644
--- a/src/utils/generator/config.js
+++ b/src/utils/generator/config.js
@@ -136,7 +136,7 @@ export const inputComponents = [
       changeTag: true,
       labelWidth: null,
       tag: "editor",
-      tagIcon: "document",
+      tagIcon: "edit",
       defaultValue: null,
       span: 24,
       layout: "colFormItem",
diff --git a/src/views/flowable/category/index.vue b/src/views/flowable/category/index.vue
index b4d585e..ccbc515 100644
--- a/src/views/flowable/category/index.vue
+++ b/src/views/flowable/category/index.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <el-form
       :model="queryParams"
-      ref="queryForm"
+      ref="queryFormRef"
       :inline="true"
       v-show="showSearch"
       label-width="68px"
@@ -174,13 +174,14 @@
 import { download } from "@/utils/request";
 import {
   listAllCategory,
-  // getCategory,
+  getCategory,
   delCategory,
   addCategory,
-  // updateCategory,
+  updateCategory,
 } from "@/api/flowable/category";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { ref } from "vue";
+
 // 按钮loading
 const buttonLoading = ref(false);
 // 遮罩层
@@ -203,6 +204,7 @@ const title = ref("");
 const open = ref(false);
 
 const formRef = ref();
+const queryFormRef = ref();
 const data = reactive({
   // 查询参数
   queryParams: {
@@ -265,14 +267,19 @@ function handleQuery() {
 }
 /** 重置按钮操作 */
 function resetQuery() {
-  resetForm("queryForm");
+  if (queryFormRef.value) {
+    queryFormRef.value.resetFields();
+  }
   handleQuery();
 }
 // 多选框选中数据
 function handleSelectionChange(selection) {
-  this.ids = selection.map((item) => item.categoryId);
-  this.single = selection.length !== 1;
-  this.multiple = !selection.length;
+  ids.value = selection.map((item) => ({
+    id: item.categoryId,
+    uuid: item.uuid,
+  }));
+  single.value = selection.length !== 1;
+  multiple.value = !selection.length;
 }
 /** 新增按钮操作 */
 function handleAdd() {
@@ -282,14 +289,14 @@ function handleAdd() {
 }
 /** 修改按钮操作 */
 function handleUpdate(row) {
-  this.loading = true;
-  this.reset();
-  const categoryId = row.categoryId || this.ids;
+  loading.value = true;
+  reset();
+  const categoryId = row.categoryId || ids.value[0].id;
   getCategory(categoryId).then((response) => {
-    this.loading = false;
-    this.form = response.data;
-    this.open = true;
-    this.title = "修改流程分类";
+    loading.value = false;
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改流程分类";
   });
 }
 /** 提交按钮 */
@@ -325,7 +332,9 @@ function submitForm() {
 function handleDelete(row) {
   const categoryIds = [{ id: row.categoryId, uuid: row.uuid }] || ids.value;
   ElMessageBox.confirm(
-    '是否确认删除【请填写功能名称】编号为"' + categoryIds + '"的数据项？'
+    '是否确认删除【请填写功能名称】编号为"' +
+      categoryIds.map((el) => el.id).join(",") +
+      '"的数据项？'
   )
     .then(() => {
       loading.value = true;
@@ -343,7 +352,7 @@ function handleDelete(row) {
 /** 导出按钮操作 */
 function handleExport() {
   download(
-    "workflow/category/export",
+    "flowable/category/export",
     {
       ...queryParams.value,
     },
diff --git a/src/views/flowable/deploy/index.vue b/src/views/flowable/deploy/index.vue
index 64e4a1f..9199b7e 100644
--- a/src/views/flowable/deploy/index.vue
+++ b/src/views/flowable/deploy/index.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <el-form
       :model="queryParams"
-      ref="queryForm"
+      ref="queryFormRef"
       :inline="true"
       v-show="showSearch"
       label-width="68px"
@@ -75,7 +75,7 @@
           size="small"
           :disabled="multiple"
           @click="handleDelete"
-          v-hasPermi="['workflow:deploy:remove']"
+          v-hasPermi="['flowable:deploy:remove']"
           >删除</el-button
         >
       </el-col>
@@ -141,18 +141,20 @@
           <template #default="{ row }">
             <el-button
               link
+              type="primary"
               size="small"
               icon="price-tag"
               @click.native="handlePublish(row)"
-              v-hasPermi="['workflow:deploy:list']"
+              v-hasPermi="['flowable:deploy:list']"
               >版本管理</el-button
             >
             <el-button
               link
+              type="danger"
               size="small"
               icon="delete"
               @click="handleDelete(row)"
-              v-hasPermi="['workflow:deploy:remove']"
+              v-hasPermi="['flowable:deploy:remove']"
               >删除</el-button
             >
           </template>
@@ -230,7 +232,7 @@
               icon="video-pause"
               v-if="!row.suspended"
               @click.native="handleChangeState(row, 'suspended')"
-              v-hasPermi="['workflow:deploy:status']"
+              v-hasPermi="['flowable:deploy:status']"
               >挂起</el-button
             >
             <el-button
@@ -239,7 +241,7 @@
               icon="video-play"
               v-if="row.suspended"
               @click.native="handleChangeState(row, 'active')"
-              v-hasPermi="['workflow:deploy:status']"
+              v-hasPermi="['flowable:deploy:status']"
               >激活</el-button
             >
             <el-button
@@ -247,7 +249,7 @@
               size="small"
               icon="delete"
               @click="handleDelete(row)"
-              v-hasPermi="['workflow:deploy:remove']"
+              v-hasPermi="['flowable:deploy:remove']"
               >删除</el-button
             >
           </template>
@@ -359,8 +361,9 @@ function handleQuery() {
   getList();
 }
 /** 重置按钮操作 */
+const queryFormRef = ref();
 function resetQuery() {
-  resetForm("queryForm");
+  queryFormRef.value && queryFormRef.value.resetFields();
   handleQuery();
 }
 // 多选框选中数据
@@ -414,6 +417,9 @@ function handleDelete(row) {
     .then(() => {
       loading.value = false;
       getList();
+      if (publishQueryParams.value.processKey) {
+        getPublishList();
+      }
       ElMessage.success("删除成功");
     })
     .finally(() => {
diff --git a/src/views/flowable/form/index.vue b/src/views/flowable/form/index.vue
index c564912..2f5d52d 100644
--- a/src/views/flowable/form/index.vue
+++ b/src/views/flowable/form/index.vue
@@ -133,7 +133,7 @@
 
     <!-- 添加或修改流程表单对话框 -->
     <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="表单名称" prop="formName">
           <el-input v-model="form.formName" placeholder="请输入表单名称" />
         </el-form-item>
@@ -202,6 +202,7 @@ const formConfOpen = ref(false);
 const formTitle = ref("");
 // 是否显示弹出层
 const open = ref(false);
+const formRef = ref();
 const data = reactive({
   formConf: {}, // 默认表单数据
   // 查询参数
@@ -285,7 +286,7 @@ function handleUpdate(row) {
 }
 /** 提交按钮 */
 function submitForm() {
-  this.$refs["form"].validate((valid) => {
+  formRef.value.validate((valid) => {
     if (valid) {
       if (form.value.formId != null) {
         updateForm(form.value).then((response) => {
@@ -295,9 +296,9 @@ function submitForm() {
         });
       } else {
         addForm(form.value).then((response) => {
-          this.$modal.msgSuccess("新增成功");
-          this.open = false;
-          this.getList();
+          ElMessage.success("新增成功");
+          open.value = false;
+          getList();
         });
       }
     }
@@ -325,16 +326,16 @@ function handleDelete(row) {
 }
 /** 导出按钮操作 */
 function handleExport() {
-  let _this = this;
-  this.$confirm("是否确认导出所有流程表单数据项?", "警告", {
+  // let _this = this;
+  ElMessageBox.confirm("是否确认导出所有流程表单数据项?", "警告", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
     type: "warning",
   }).then(function () {
-    _this.download(
+    download(
       "/workflow/form/export",
       {
-        ..._this.queryParams,
+        ...queryParams.value,
       },
       `form_${new Date().getTime()}.xlsx`
     );
diff --git a/src/views/flowable/model/index.vue b/src/views/flowable/model/index.vue
index a8a3f7c..52bf466 100644
--- a/src/views/flowable/model/index.vue
+++ b/src/views/flowable/model/index.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <el-form
       :model="queryParams"
-      ref="queryForm"
+      ref="queryFormRef"
       :inline="true"
       v-show="showSearch"
       label-width="68px"
@@ -163,6 +163,7 @@
             <el-button
               size="small"
               link
+              type="primary"
               icon="edit"
               @click="handleUpdate(row)"
               v-hasPermi="['flowable:model:edit']"
@@ -170,6 +171,7 @@
             >
             <el-button
               link
+              type="primary"
               size="small"
               icon="brush"
               @click="handleDesigner(row)"
@@ -178,6 +180,7 @@
             >
             <el-button
               link
+              type="primary"
               size="small"
               icon="video-play"
               v-hasPermi="['flowable:model:deploy']"
@@ -329,7 +332,6 @@
       width="70%"
       append-to-body
     >
-      <!-- TODO: -->
       <process-viewer
         :key="`designer-${processView.index}`"
         :xml="processView.xmlData"
@@ -426,7 +428,6 @@
       append-to-body
       fullscreen
     >
-      <!-- TODO: -->
       <process-designer
         :key="designerOpen"
         style="border: 1px solid rgba(0, 0, 0, 0.1)"
@@ -585,19 +586,20 @@ function reset() {
 }
 /** 搜索按钮操作 */
 function handleQuery() {
-  this.queryParams.pageNum = 1;
-  this.getList();
+  queryParams.value.pageNum = 1;
+  getList();
 }
 /** 重置按钮操作 */
+const queryFormRef = ref();
 function resetQuery() {
-  this.$refs.queryForm.resetFields();
-  this.handleQuery();
+  queryFormRef.value.resetFields();
+  handleQuery();
 }
 // 多选框选中数据
 function handleSelectionChange(selection) {
-  this.ids = selection.map((item) => item.modelId);
-  this.single = selection.length !== 1;
-  this.multiple = !selection.length;
+  ids.value = selection.map((item) => item.modelId);
+  single.value = selection.length !== 1;
+  multiple.value = !selection.length;
 }
 /** 部署流程 */
 function handleDeploy(row) {