update 优化面板工具

src/components/BpmnDesign/PropertyPanel.vue

@@ -80,7 +80,8 @@ const handleModeler = () => {
     }
   });
   props.modeler.on('selection.changed', (e) => {
-    // element.value = null;
+    // 先给null为了让vue刷新
+    element.value = null;
     const newElement = e.newSelection[0];
     if (newElement) {
       nextTick(() => {

src/components/BpmnDesign/panel/TaskPanel.vue

@@ -1,19 +1,28 @@
 <template>
   <div>
     <el-form ref="formRef" v-model="formData" label-width="80px">
-      <el-form-item prop="id" label="节点 id">
-        <el-input v-model="formData.id" placeholder="请输入"> </el-input>
+      <el-form-item prop="id" label="节点 ID">
+        <el-input v-model="formData.id"> </el-input>
       </el-form-item>
+      <el-form-item prop="name" label="节点名称">
+        <el-input v-model="formData.name"> </el-input>
+      </el-form-item>
+      <el-form-item prop="documentation" label="节点描述">
+        <el-input v-model="formData.documentation"> </el-input>
+      </el-form-item>
+      <el-form-item prop="userType" label="人员类型">
+        <el-input v-model="formData.userType"> </el-input>
+      </el-form-item>
+      <el-form-item label="执行监听器" style="margin-bottom: 0"> </el-form-item>
+      <ExecutionListener :modeler="modeler" :element="element"></ExecutionListener>
       <el-form-item label="任务监听器" style="margin-bottom: 0"> </el-form-item>
       <TaskListener :modeler="modeler" :element="element"></TaskListener>
     </el-form>
   </div>
 </template>
 <script setup lang="ts">
-import showConfig from '@/components/BpmnDesign/assets/showConfig';
-import TaskListener from './property/TaskListener.vue';
 import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
-import { ProcessPanel } from 'bpmnDesign';
+import { TaskPanel } from 'bpmnDesign';
 
 interface PropType {
   modeler: any;
@@ -23,7 +32,7 @@ interface PropType {
 const props = withDefaults(defineProps<PropType>(), {
   categorys: () => []
 });
-const { parse, formData } = useParseElement<ProcessPanel>({
+const { parse, formData } = useParseElement<TaskPanel>({
   modeler: props.modeler,
   element: toRaw(props.element)
 });

src/components/BpmnDesign/panel/property/ExecutionListener.vue

@@ -89,13 +89,6 @@ const props = withDefaults(defineProps<PropType>(), {
 });
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const initData: ExecutionListenerVO = {
-  event: '',
-  type: '',
-  className: '',
-  params: []
-};
-const formData = ref<ExecutionListenerVO>(initData);
 
 const selectRow = ref<ExecutionListenerVO | null>();
 const formDialog = useDialog({
@@ -113,7 +106,14 @@ const { showConfig, elementType, updateProperties } = usePanel({
 const listenerParamRef = ref<InstanceType<typeof ListenerParam>>();
 const tableRef = ref<VxeTableInstance<ExecutionListenerVO>>();
 const formRef = ref<ElFormInstance>();
-const currentIndex = ref(0);
+
+const initData: ExecutionListenerVO = {
+  event: '',
+  type: '',
+  className: '',
+  params: []
+};
+const formData = ref<ExecutionListenerVO>({ ...initData });
 const tableData = ref<ExecutionListenerVO[]>([]);
 const tableRules = ref<ElFormRules>({
   event: [{ required: true, message: '请选择', trigger: 'blur' }],

src/components/BpmnDesign/panel/property/TaskListener.vue

@@ -99,6 +99,11 @@ const { showConfig, elementType, updateProperties } = usePanel({
   modeler: props.modeler,
   element: toRaw(props.element)
 });
+
+const listenerParamRef = ref<InstanceType<typeof ListenerParam>>();
+const tableRef = ref<VxeTableInstance<TaskListenerVO>>();
+const formRef = ref<ElFormInstance>();
+
 const initData: TaskListenerVO = {
   event: '',
   type: '',
@@ -106,11 +111,7 @@ const initData: TaskListenerVO = {
   name: '',
   params: []
 };
-const listenerParamRef = ref<InstanceType<typeof ListenerParam>>();
-const tableRef = ref<VxeTableInstance<TaskListenerVO>>();
-const formRef = ref<ElFormInstance>();
-
-const formData = ref<TaskListenerVO>(initData);
+const formData = ref<TaskListenerVO>({ ...initData });
 const currentIndex = ref(0);
 const tableData = ref<TaskListenerVO[]>([]);
 const tableRules = ref<VxeTablePropTypes.EditRules>({

src/types/bpmn.d.ts

@@ -21,9 +21,20 @@ declare module 'bpmnDesign' {
   }
 
   export interface ProcessPanel {
+    processCategory: string;
+    id: string;
+    name: string;
+    documentation?: string;
+  }
+
+  export interface TaskPanel {
     processCategory: string;
     id: string;
     name: string;
     documentation: string;
+    userType: string;
+    assignee: string;
+    candidateUsers: string;
+    candidateGroups: string;
   }
 }