update 修改面板formData来源

src/components/BpmnDesign/panel/GatewayPanel.vue

@@ -21,20 +21,17 @@ import { GatewayPanel } from 'bpmnDesign';
 interface PropType {
   modeler: Modeler;
   element: Element;
-  categorys?: any[];
 }
-const props = withDefaults(defineProps<PropType>(), {
+const props = withDefaults(defineProps<PropType>(), {});
-  categorys: () => []
-});
 const { nameChange, idChange } = usePanel({
-  modeler: props.modeler,
   element: toRaw(props.element)
 });
-const { parse, formData } = useParseElement<GatewayPanel>({
+const { parseData } = useParseElement({
-  modeler: props.modeler,
   element: toRaw(props.element)
 });
 
+const formData = ref(parseData<GatewayPanel>());
+
 const formRules = ref<ElFormRules>({
   processCategory: [{ required: true, message: '请选择', trigger: 'blur' }],
   id: [{ required: true, message: '请输入', trigger: 'blur' }],

src/components/BpmnDesign/panel/ProcessPanel.vue

@@ -28,27 +28,23 @@ interface PropType {
 }
 const props = withDefaults(defineProps<PropType>(), {});
 
-const { parse, formData } = useParseElement<ProcessPanel>({
+const { parseData } = useParseElement({
-  modeler: props.modeler,
+  element: toRaw(props.element)
-  element: toRaw(props.element),
-  initData: {} as any
 });
 const { idChange, nameChange } = usePanel({
-  modeler: props.modeler,
   element: toRaw(props.element)
 });
 
-// const formData = ref<ProcessPanel>({
+const formData = ref<ProcessPanel>();
-//   processCategory: '',
-//   id: '',
-//   name: '',
-//   documentation: ''
-// });
 
 const formRules = ref<ElFormRules>({
   id: [{ required: true, message: '请输入', trigger: 'blur' }],
   name: [{ required: true, message: '请输入', trigger: 'blur' }]
 });
+
+onBeforeMount(() => {
+  formData.value = parseData<ProcessPanel>();
+});
 </script>
 
 <style scoped lang="scss"></style>

src/components/BpmnDesign/panel/SequenceFlowPanel.vue

@@ -27,20 +27,17 @@ import { SequenceFlowPanel } from 'bpmnDesign';
 interface PropType {
   modeler: Modeler;
   element: Element;
-  categorys?: any[];
 }
-const props = withDefaults(defineProps<PropType>(), {
+const props = withDefaults(defineProps<PropType>(), {});
-  categorys: () => []
-});
 const { nameChange, idChange, updateProperties } = usePanel({
-  modeler: props.modeler,
   element: toRaw(props.element)
 });
-const { parse, formData } = useParseElement<SequenceFlowPanel>({
+const { parseData } = useParseElement({
-  modeler: props.modeler,
   element: toRaw(props.element)
 });
 
+const formData = ref(parseData<SequenceFlowPanel>());
+
 const formRules = ref<ElFormRules>({
   processCategory: [{ required: true, message: '请选择', trigger: 'blur' }],
   id: [{ required: true, message: '请输入', trigger: 'blur' }],

src/components/BpmnDesign/panel/StartEndPanel.vue

@@ -8,7 +8,7 @@
         <el-input v-model="formData.name" @change="nameChange"> </el-input>
       </el-form-item>
       <el-form-item label="执行监听器" style="margin-bottom: 0"> </el-form-item>
-      <ExecutionListener :modeler="modeler" :element="element"></ExecutionListener>
+      <ExecutionListener :element="element"></ExecutionListener>
     </el-form>
   </div>
 </template>
@@ -19,24 +19,19 @@ import { Modeler, Element } from 'bpmn';
 import { StartEndPanel } from 'bpmnDesign';
 
 interface PropType {
-  modeler: Modeler;
   element: Element;
-  categorys?: any[];
 }
-const props = withDefaults(defineProps<PropType>(), {
+const props = withDefaults(defineProps<PropType>(), {});
-  categorys: () => []
-});
 const { nameChange, idChange } = usePanel({
-  modeler: props.modeler,
   element: toRaw(props.element)
 });
-const { parse, formData } = useParseElement<StartEndPanel>({
+const { parseData } = useParseElement({
-  modeler: props.modeler,
   element: toRaw(props.element)
 });
 
+const formData = ref(parseData<StartEndPanel>());
+
 const formRules = ref<ElFormRules>({
-  processCategory: [{ required: true, message: '请选择', trigger: 'blur' }],
   id: [{ required: true, message: '请输入', trigger: 'blur' }],
   name: [{ required: true, message: '请输入', trigger: 'blur' }]
 });

src/components/BpmnDesign/panel/TaskPanel.vue

@@ -115,7 +115,7 @@
             </div>
           </template>
           <div>
-            <TaskListener v-if="showConfig.taskListener" :modeler="modeler" :element="element"></TaskListener>
+            <TaskListener v-if="showConfig.taskListener" :element="element"></TaskListener>
           </div>
         </el-collapse-item>
         <el-collapse-item v-if="showConfig.executionListener" name="4">
@@ -128,7 +128,7 @@
             </div>
           </template>
           <div>
-            <ExecutionListener v-if="showConfig.executionListener" :modeler="modeler" :element="element"></ExecutionListener>
+            <ExecutionListener v-if="showConfig.executionListener" :element="element"></ExecutionListener>
           </div>
         </el-collapse-item>
         <el-form-item v-if="showConfig.isForCompensation" prop="isForCompensation" label="是否为补偿">
@@ -163,7 +163,7 @@ import usePanel from '@/components/BpmnDesign/hooks/usePanel';
 import UserSelect from '@/components/UserSelect';
 import RoleSelect from '@/components/RoleSelect';
 import DueDate from '@/components/BpmnDesign/panel/property/DueDate.vue';
-import { Element, Moddle, Modeler, Modeling } from 'bpmn';
+import { Element } from 'bpmn';
 import { TaskPanel } from 'bpmnDesign';
 import { AllocationTypeEnum, MultipleUserAuditTypeEnum, SpecifyDescEnum } from '@/enums/bpmn/IndexEnums';
 import { BellFilled, Checked, InfoFilled } from '@element-plus/icons-vue';
@@ -172,27 +172,24 @@ import { UserVO } from '@/api/system/user/types';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 interface PropType {
-  modeler: Modeler;
   element: Element;
 }
 const props = withDefaults(defineProps<PropType>(), {});
-const { nameChange, idChange, showConfig, updateProperties, createModdleElement } = usePanel({
+const { nameChange, idChange, showConfig, updateProperties, updateProperty } = usePanel({
-  modeler: props.modeler,
   element: toRaw(props.element)
 });
-const { parse, formData } = useParseElement<TaskPanel>({
+const { parseData } = useParseElement({
-  modeler: props.modeler,
+  element: toRaw(props.element)
-  element: toRaw(props.element),
-  initData: {
-    id: '',
-    name: '',
-    dueDate: '',
-    multipleUserAuditType: MultipleUserAuditTypeEnum.SERIAL,
-    allocationType: AllocationTypeEnum.USER,
-    specifyDesc: SpecifyDescEnum.SPECIFY_SINGLE
-  }
 });
-
+const initData = {
+  id: '',
+  name: '',
+  dueDate: '',
+  multipleUserAuditType: MultipleUserAuditTypeEnum.SERIAL,
+  allocationType: AllocationTypeEnum.USER,
+  specifyDesc: SpecifyDescEnum.SPECIFY_SINGLE
+};
+const formData = ref({ ...initData, ...parseData<TaskPanel>() });
 const currentCollapseItem = ref(['1', '2']);
 const userSelectRef = ref<InstanceType<typeof UserSelect>>();
 const singleUserSelectRef = ref<InstanceType<typeof UserSelect>>();
@@ -214,43 +211,11 @@ const openDueDate = () => {
 };
 
 const singleUserSelectCallBack = (data: UserVO[]) => {
-  const modeling = props.modeler.get<Modeling>('modeling');
   if (data.length !== 0) {
     const user = data[0];
     formData.value.userName = user.userName;
     const userId = user.userId;
     updateProperties({ 'flowable:assignee': userId });
-    let extensionElements = props.element.businessObject.get('extensionElements');
-    if (!extensionElements) {
-      extensionElements = createModdleElement('bpmn:ExtensionElements', {}, props.element.businessObject);
-      modeling.updateModdleProperties(toRaw(props.element), toRaw(props.element.businessObject), { extensionElements });
-    }
-    let propertiesElements;
-    if (!extensionElements.values) {
-      propertiesElements = createModdleElement('flowable:properties', {}, extensionElements);
-      modeling.updateModdleProperties(toRaw(props.element), extensionElements, {
-        values: [...extensionElements.get('values'), propertiesElements]
-      });
-    } else {
-      propertiesElements = extensionElements.values.find((item) => item.$type === 'flowable:properties');
-    }
-
-    let userNameProperty;
-    if (propertiesElements.values) {
-      userNameProperty = propertiesElements.values.find((item) => {
-        if (item['name'] === 'userName') {
-          return true;
-        }
-        return false;
-      });
-      userNameProperty['name'] = 'userName';
-      userNameProperty['value'] = user.userName;
-    } else {
-      userNameProperty = createModdleElement('flowable:property', { name: 'userName', value: user.userName }, propertiesElements);
-      modeling.updateModdleProperties(toRaw(props.element), propertiesElements, {
-        values: [...propertiesElements.get('values'), userNameProperty]
-      });
-    }
   } else {
     updateProperties({ 'flowable:assignee': undefined });
   }
@@ -288,59 +253,63 @@ const selectRoleLength = computed(() => {
     return 0;
   }
 });
-watch(
+// watch(
-  () => formData.value.roles,
+//   () => formData.value.roles,
-  (newVal: Record<string, any>[]) => {
+//   (newVal: Record<string, any>[]) => {
-    if (newVal?.length > 0) {
+//     if (newVal?.length > 0) {
-      // 获取userId 用逗号,隔开
+//       // 获取userId 用逗号,隔开
-      const roleIds = newVal.map((item) => item.roleId).join(',');
+//       const roleIds = newVal.map((item) => item.roleId).join(',');
-      updateProperties({ 'flowable:candidateGroups': roleIds });
+//       updateProperties({ 'flowable:candidateGroups': roleIds });
-    } else {
+//     } else {
-      updateProperties({ 'flowable:candidateGroups': undefined });
+//       updateProperties({ 'flowable:candidateGroups': undefined });
-    }
+//     }
-  },
+//   },
-  { deep: true }
+//   { deep: true }
-);
+// );
-watch(
+// watch(
-  () => formData.value.async,
+//   () => formData.value.async,
-  (newVal: boolean) => {
+//   (newVal: boolean) => {
-    if (newVal) {
+//     if (newVal) {
-      updateProperties({ 'flowable:async': true });
+//       updateProperties({ 'flowable:async': true });
-    } else {
+//     } else {
-      updateProperties({ 'flowable:async': undefined });
+//       updateProperties({ 'flowable:async': undefined });
-    }
+//     }
-  }
+//   }
-);
+// );
-watch(
+// watch(
-  () => formData.value.skipExpression,
+//   () => formData.value.skipExpression,
-  (newVal: string) => {
+//   (newVal: string) => {
-    if (newVal) {
+//     if (newVal) {
-      updateProperties({ 'flowable:skipExpression': newVal });
+//       updateProperties({ 'flowable:skipExpression': newVal });
-    } else {
+//     } else {
-      updateProperties({ 'flowable:skipExpression': undefined });
+//       updateProperties({ 'flowable:skipExpression': undefined });
-    }
+//     }
-  }
+//   }
-);
+// );
-watch(
+// watch(
-  () => formData.value.priority,
+//   () => formData.value.priority,
-  (newVal: number) => {
+//   (newVal: number) => {
-    if (newVal) {
+//     if (newVal) {
-      updateProperties({ 'flowable:priority': newVal });
+//       updateProperties({ 'flowable:priority': newVal });
-    } else {
+//     } else {
-      updateProperties({ 'flowable:priority': undefined });
+//       updateProperties({ 'flowable:priority': undefined });
-    }
+//     }
-  }
+//   }
-);
+// );
-watch(
+// watch(
-  () => formData.value.dueDate,
+//   () => formData.value.dueDate,
-  (newVal: string) => {
+//   (newVal: string) => {
-    if (newVal) {
+//     if (newVal) {
-      updateProperties({ 'flowable:dueDate': newVal });
+//       updateProperties({ 'flowable:dueDate': newVal });
-    } else {
+//     } else {
-      updateProperties({ 'flowable:dueDate': undefined });
+//       updateProperties({ 'flowable:dueDate': undefined });
-    }
+//     }
-  }
+//   }
-);
+// );
+
+onBeforeMount(() => {
+  // formData.value = { ...initData, ...parseData<TaskPanel>() };
+});
 
 const formRules = ref<ElFormRules>({
   id: [{ required: true, message: '请输入', trigger: 'blur' }],

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

@@ -82,13 +82,9 @@ import useDialog from '@/hooks/useDialog';
 
 const emit = defineEmits(['close']);
 interface PropType {
-  modeler: Modeler;
   element: Element;
-  categorys?: any[];
 }
-const props = withDefaults(defineProps<PropType>(), {
+const props = withDefaults(defineProps<PropType>(), {});
-  categorys: () => []
-});
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -97,8 +93,7 @@ const formDialog = useDialog({
   title: selectRow.value ? '编辑&保存' : '新增&保存'
 });
 
-const { showConfig, elementType, updateProperties } = usePanel({
+const { showConfig, elementType, updateProperties, moddle } = usePanel({
-  modeler: props.modeler,
   element: toRaw(props.element)
 });
 
@@ -177,17 +172,17 @@ const updateElement = () => {
   if (data.length) {
     let extensionElements = props.element.businessObject.get('extensionElements');
     if (!extensionElements) {
-      extensionElements = props.modeler.get<Moddle>('moddle').create('bpmn:ExtensionElements');
+      extensionElements = moddle.create('bpmn:ExtensionElements');
     }
     // 清除旧值
     extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:ExecutionListener') ?? [];
     data.forEach((item) => {
-      const executionListener = props.modeler.get<Moddle>('moddle').create('flowable:ExecutionListener');
+      const executionListener = moddle.create('flowable:ExecutionListener');
       executionListener['event'] = item.event;
       executionListener[item.type] = item.className;
       if (item.params && item.params.length) {
         item.params.forEach((field) => {
-          const fieldElement = props.modeler.get<Moddle>('moddle').create('flowable:Field');
+          const fieldElement = moddle.create('flowable:Field');
           fieldElement['name'] = field.name;
           fieldElement[field.type] = field.value;
           executionListener.get('fields').push(fieldElement);

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

@@ -75,7 +75,7 @@
 import ListenerParam from './ListenerParam.vue';
 import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
 import { TaskListenerVO } from 'bpmnDesign';
-import { Moddle, Modeler, Element } from 'bpmn';
+import { Element } from 'bpmn';
 
 import usePanel from '@/components/BpmnDesign/hooks/usePanel';
 import useDialog from '@/hooks/useDialog';
@@ -83,20 +83,15 @@ import useDialog from '@/hooks/useDialog';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 interface PropType {
-  modeler: Modeler;
   element: Element;
-  categorys?: any[];
 }
-const props = withDefaults(defineProps<PropType>(), {
+const props = withDefaults(defineProps<PropType>(), {});
-  categorys: () => []
-});
 
 const selectRow = ref<TaskListenerVO | null>();
 const formDialog = useDialog({
   title: selectRow.value ? '编辑&保存' : '新增&保存'
 });
-const { showConfig, elementType, updateProperties } = usePanel({
+const { showConfig, elementType, updateProperties, moddle } = usePanel({
-  modeler: props.modeler,
   element: toRaw(props.element)
 });
 
@@ -178,17 +173,17 @@ const updateElement = () => {
   if (data.length) {
     let extensionElements = props.element.businessObject.get('extensionElements');
     if (!extensionElements) {
-      extensionElements = props.modeler.get<Moddle>('moddle').create('bpmn:ExtensionElements');
+      extensionElements = moddle.create('bpmn:ExtensionElements');
     }
     // 清除旧值
     extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:TaskListener') ?? [];
     data.forEach((item) => {
-      const taskListener = props.modeler.get<Moddle>('moddle').create('flowable:TaskListener');
+      const taskListener = moddle.create('flowable:TaskListener');
       taskListener['event'] = item.event;
       taskListener[item.type] = item.className;
       if (item.params && item.params.length) {
         item.params.forEach((field) => {
-          const fieldElement = props.modeler.get<Moddle>('moddle').create('flowable:Field');
+          const fieldElement = moddle.create('flowable:Field');
           fieldElement['name'] = field.name;
           fieldElement[field.type] = field.value;
           taskListener.get('fields').push(fieldElement);