From dba1b6ced949c468280bcd8265f7bab80de083dc Mon Sep 17 00:00:00 2001 From: LiuHao Date: Mon, 29 Jan 2024 18:11:11 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E4=BF=AE=E6=94=B9=E9=9D=A2=E6=9D=BFfo?= =?UTF-8?q?rmData=E6=9D=A5=E6=BA=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BpmnDesign/panel/GatewayPanel.vue | 11 +- .../BpmnDesign/panel/ProcessPanel.vue | 18 +- .../BpmnDesign/panel/SequenceFlowPanel.vue | 11 +- .../BpmnDesign/panel/StartEndPanel.vue | 15 +- src/components/BpmnDesign/panel/TaskPanel.vue | 175 +++++++----------- .../panel/property/ExecutionListener.vue | 15 +- .../panel/property/TaskListener.vue | 17 +- 7 files changed, 103 insertions(+), 159 deletions(-) diff --git a/src/components/BpmnDesign/panel/GatewayPanel.vue b/src/components/BpmnDesign/panel/GatewayPanel.vue index 15981c8..271ec61 100644 --- a/src/components/BpmnDesign/panel/GatewayPanel.vue +++ b/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(), { - categorys: () => [] -}); +const props = withDefaults(defineProps(), {}); const { nameChange, idChange } = usePanel({ - modeler: props.modeler, element: toRaw(props.element) }); -const { parse, formData } = useParseElement({ - modeler: props.modeler, +const { parseData } = useParseElement({ element: toRaw(props.element) }); +const formData = ref(parseData()); + const formRules = ref({ processCategory: [{ required: true, message: '请选择', trigger: 'blur' }], id: [{ required: true, message: '请输入', trigger: 'blur' }], diff --git a/src/components/BpmnDesign/panel/ProcessPanel.vue b/src/components/BpmnDesign/panel/ProcessPanel.vue index 0262d41..2a25f35 100644 --- a/src/components/BpmnDesign/panel/ProcessPanel.vue +++ b/src/components/BpmnDesign/panel/ProcessPanel.vue @@ -28,27 +28,23 @@ interface PropType { } const props = withDefaults(defineProps(), {}); -const { parse, formData } = useParseElement({ - modeler: props.modeler, - element: toRaw(props.element), - initData: {} as any +const { parseData } = useParseElement({ + element: toRaw(props.element) }); const { idChange, nameChange } = usePanel({ - modeler: props.modeler, element: toRaw(props.element) }); -// const formData = ref({ -// processCategory: '', -// id: '', -// name: '', -// documentation: '' -// }); +const formData = ref(); const formRules = ref({ id: [{ required: true, message: '请输入', trigger: 'blur' }], name: [{ required: true, message: '请输入', trigger: 'blur' }] }); + +onBeforeMount(() => { + formData.value = parseData(); +}); diff --git a/src/components/BpmnDesign/panel/SequenceFlowPanel.vue b/src/components/BpmnDesign/panel/SequenceFlowPanel.vue index c97b61a..f827682 100644 --- a/src/components/BpmnDesign/panel/SequenceFlowPanel.vue +++ b/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(), { - categorys: () => [] -}); +const props = withDefaults(defineProps(), {}); const { nameChange, idChange, updateProperties } = usePanel({ - modeler: props.modeler, element: toRaw(props.element) }); -const { parse, formData } = useParseElement({ - modeler: props.modeler, +const { parseData } = useParseElement({ element: toRaw(props.element) }); +const formData = ref(parseData()); + const formRules = ref({ processCategory: [{ required: true, message: '请选择', trigger: 'blur' }], id: [{ required: true, message: '请输入', trigger: 'blur' }], diff --git a/src/components/BpmnDesign/panel/StartEndPanel.vue b/src/components/BpmnDesign/panel/StartEndPanel.vue index 56a8a42..164684e 100644 --- a/src/components/BpmnDesign/panel/StartEndPanel.vue +++ b/src/components/BpmnDesign/panel/StartEndPanel.vue @@ -8,7 +8,7 @@ - + @@ -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(), { - categorys: () => [] -}); +const props = withDefaults(defineProps(), {}); const { nameChange, idChange } = usePanel({ - modeler: props.modeler, element: toRaw(props.element) }); -const { parse, formData } = useParseElement({ - modeler: props.modeler, +const { parseData } = useParseElement({ element: toRaw(props.element) }); +const formData = ref(parseData()); + const formRules = ref({ - processCategory: [{ required: true, message: '请选择', trigger: 'blur' }], id: [{ required: true, message: '请输入', trigger: 'blur' }], name: [{ required: true, message: '请输入', trigger: 'blur' }] }); diff --git a/src/components/BpmnDesign/panel/TaskPanel.vue b/src/components/BpmnDesign/panel/TaskPanel.vue index 0a5eb31..3a0cf88 100644 --- a/src/components/BpmnDesign/panel/TaskPanel.vue +++ b/src/components/BpmnDesign/panel/TaskPanel.vue @@ -115,7 +115,7 @@
- +
@@ -128,7 +128,7 @@
- +
@@ -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(), {}); -const { nameChange, idChange, showConfig, updateProperties, createModdleElement } = usePanel({ - modeler: props.modeler, +const { nameChange, idChange, showConfig, updateProperties, updateProperty } = usePanel({ element: toRaw(props.element) }); -const { parse, formData } = useParseElement({ - modeler: props.modeler, - element: toRaw(props.element), - initData: { - id: '', - name: '', - dueDate: '', - multipleUserAuditType: MultipleUserAuditTypeEnum.SERIAL, - allocationType: AllocationTypeEnum.USER, - specifyDesc: SpecifyDescEnum.SPECIFY_SINGLE - } +const { parseData } = useParseElement({ + element: toRaw(props.element) }); - +const initData = { + id: '', + name: '', + dueDate: '', + multipleUserAuditType: MultipleUserAuditTypeEnum.SERIAL, + allocationType: AllocationTypeEnum.USER, + specifyDesc: SpecifyDescEnum.SPECIFY_SINGLE +}; +const formData = ref({ ...initData, ...parseData() }); const currentCollapseItem = ref(['1', '2']); const userSelectRef = ref>(); const singleUserSelectRef = ref>(); @@ -214,43 +211,11 @@ const openDueDate = () => { }; const singleUserSelectCallBack = (data: UserVO[]) => { - const modeling = props.modeler.get('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( - () => formData.value.roles, - (newVal: Record[]) => { - if (newVal?.length > 0) { - // 获取userId 用逗号,隔开 - const roleIds = newVal.map((item) => item.roleId).join(','); - updateProperties({ 'flowable:candidateGroups': roleIds }); - } else { - updateProperties({ 'flowable:candidateGroups': undefined }); - } - }, - { deep: true } -); -watch( - () => formData.value.async, - (newVal: boolean) => { - if (newVal) { - updateProperties({ 'flowable:async': true }); - } else { - updateProperties({ 'flowable:async': undefined }); - } - } -); -watch( - () => formData.value.skipExpression, - (newVal: string) => { - if (newVal) { - updateProperties({ 'flowable:skipExpression': newVal }); - } else { - updateProperties({ 'flowable:skipExpression': undefined }); - } - } -); -watch( - () => formData.value.priority, - (newVal: number) => { - if (newVal) { - updateProperties({ 'flowable:priority': newVal }); - } else { - updateProperties({ 'flowable:priority': undefined }); - } - } -); -watch( - () => formData.value.dueDate, - (newVal: string) => { - if (newVal) { - updateProperties({ 'flowable:dueDate': newVal }); - } else { - updateProperties({ 'flowable:dueDate': undefined }); - } - } -); +// watch( +// () => formData.value.roles, +// (newVal: Record[]) => { +// if (newVal?.length > 0) { +// // 获取userId 用逗号,隔开 +// const roleIds = newVal.map((item) => item.roleId).join(','); +// updateProperties({ 'flowable:candidateGroups': roleIds }); +// } else { +// updateProperties({ 'flowable:candidateGroups': undefined }); +// } +// }, +// { deep: true } +// ); +// watch( +// () => formData.value.async, +// (newVal: boolean) => { +// if (newVal) { +// updateProperties({ 'flowable:async': true }); +// } else { +// updateProperties({ 'flowable:async': undefined }); +// } +// } +// ); +// watch( +// () => formData.value.skipExpression, +// (newVal: string) => { +// if (newVal) { +// updateProperties({ 'flowable:skipExpression': newVal }); +// } else { +// updateProperties({ 'flowable:skipExpression': undefined }); +// } +// } +// ); +// watch( +// () => formData.value.priority, +// (newVal: number) => { +// if (newVal) { +// updateProperties({ 'flowable:priority': newVal }); +// } else { +// updateProperties({ 'flowable:priority': undefined }); +// } +// } +// ); +// watch( +// () => formData.value.dueDate, +// (newVal: string) => { +// if (newVal) { +// updateProperties({ 'flowable:dueDate': newVal }); +// } else { +// updateProperties({ 'flowable:dueDate': undefined }); +// } +// } +// ); + +onBeforeMount(() => { + // formData.value = { ...initData, ...parseData() }; +}); const formRules = ref({ id: [{ required: true, message: '请输入', trigger: 'blur' }], diff --git a/src/components/BpmnDesign/panel/property/ExecutionListener.vue b/src/components/BpmnDesign/panel/property/ExecutionListener.vue index e4282f0..5072a41 100644 --- a/src/components/BpmnDesign/panel/property/ExecutionListener.vue +++ b/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(), { - categorys: () => [] -}); +const props = withDefaults(defineProps(), {}); const { proxy } = getCurrentInstance() as ComponentInternalInstance; @@ -97,8 +93,7 @@ const formDialog = useDialog({ title: selectRow.value ? '编辑&保存' : '新增&保存' }); -const { showConfig, elementType, updateProperties } = usePanel({ - modeler: props.modeler, +const { showConfig, elementType, updateProperties, moddle } = usePanel({ 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').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').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').create('flowable:Field'); + const fieldElement = moddle.create('flowable:Field'); fieldElement['name'] = field.name; fieldElement[field.type] = field.value; executionListener.get('fields').push(fieldElement); diff --git a/src/components/BpmnDesign/panel/property/TaskListener.vue b/src/components/BpmnDesign/panel/property/TaskListener.vue index f59744c..d7bf9e2 100644 --- a/src/components/BpmnDesign/panel/property/TaskListener.vue +++ b/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(), { - categorys: () => [] -}); +const props = withDefaults(defineProps(), {}); const selectRow = ref(); const formDialog = useDialog({ title: selectRow.value ? '编辑&保存' : '新增&保存' }); -const { showConfig, elementType, updateProperties } = usePanel({ - modeler: props.modeler, +const { showConfig, elementType, updateProperties, moddle } = usePanel({ 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').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').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').create('flowable:Field'); + const fieldElement = moddle.create('flowable:Field'); fieldElement['name'] = field.name; fieldElement[field.type] = field.value; taskListener.get('fields').push(fieldElement);