diff --git a/src/components/BpmnDesign/hooks/usePanel.ts b/src/components/BpmnDesign/hooks/usePanel.ts index c7f68df..7a600ea 100644 --- a/src/components/BpmnDesign/hooks/usePanel.ts +++ b/src/components/BpmnDesign/hooks/usePanel.ts @@ -21,10 +21,34 @@ export default (ops: Options) => { modeling.updateProperties(element, properties); }; + const idChange = (newVal: string) => { + if (newVal) { + updateProperties({ id: newVal }); + } + }; + const nameChange = (newVal: string) => { + if (newVal) { + updateProperties({ name: newVal }); + } + }; + const documentationChange = (newVal: string) => { + if (newVal) { + const documentationElement = modeler.get('moddle').create('bpmn:Documentation', { text: newVal }); + updateProperties({ documentation: [documentationElement] }); + } else { + const elements = element.businessObject; + delete elements.documentation; + updateProperties({ process: elements }); + } + }; + return { elementType, showConfig: config, - updateProperties + updateProperties, + idChange, + nameChange, + documentationChange }; }; diff --git a/src/components/BpmnDesign/hooks/useParseElement.ts b/src/components/BpmnDesign/hooks/useParseElement.ts index f4514c1..c5fb419 100644 --- a/src/components/BpmnDesign/hooks/useParseElement.ts +++ b/src/components/BpmnDesign/hooks/useParseElement.ts @@ -1,12 +1,19 @@ +import { Ref } from 'vue'; +import usePanel from '@/components/BpmnDesign/hooks/usePanel'; + interface Options { modeler: any; element: any; } -export default (ops: Options) => { + +interface Data { + id: string; +} + +export default (ops: Options) => { const { modeler, element } = ops; - const formData = ref(); - + const formData = ref({}); const parse = () => { const result = { ...element.businessObject, @@ -32,8 +39,12 @@ export default (ops: Options) => { return formData; }; + onBeforeMount(() => { + parse(); + }); + return { parse, - formData + formData: formData as Ref }; }; diff --git a/src/components/BpmnDesign/panel/ProcessPanel.vue b/src/components/BpmnDesign/panel/ProcessPanel.vue index a0605d4..b555909 100644 --- a/src/components/BpmnDesign/panel/ProcessPanel.vue +++ b/src/components/BpmnDesign/panel/ProcessPanel.vue @@ -7,13 +7,13 @@ - + - + - - + + @@ -21,10 +21,11 @@ - diff --git a/src/components/BpmnDesign/panel/TaskPanel.vue b/src/components/BpmnDesign/panel/TaskPanel.vue index 5031d00..5d2de6f 100644 --- a/src/components/BpmnDesign/panel/TaskPanel.vue +++ b/src/components/BpmnDesign/panel/TaskPanel.vue @@ -4,19 +4,16 @@ - - - 编辑 - - + + - - - diff --git a/src/components/BpmnDesign/panel/property/ExecutionListener.vue b/src/components/BpmnDesign/panel/property/ExecutionListener.vue index 85f69b8..a899b7b 100644 --- a/src/components/BpmnDesign/panel/property/ExecutionListener.vue +++ b/src/components/BpmnDesign/panel/property/ExecutionListener.vue @@ -15,8 +15,6 @@ keep-source :data="tableData" :menu-config="menuConfig" - :edit-rules="tableRules" - :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }" @cell-dblclick="cellDBLClickEvent" @menu-click="contextMenuClickEvent" > @@ -97,7 +95,7 @@ const initData: ExecutionListenerVO = { className: '', params: [] }; -const formData = reactive(initData); +const formData = ref(initData); const selectRow = ref(); const formDialog = useDialog({ @@ -129,11 +127,11 @@ const submitEvent = async () => { if (validate && !error) { const $table = tableRef.value; if ($table) { - formData.params = listenerParamRef.value.getTableData(); + formData.value.params = listenerParamRef.value.getTableData(); if (selectRow.value) { - Object.assign(selectRow.value, formData); + Object.assign(selectRow.value, formData.value); } else { - $table.insertAt({ ...formData }, -1); + $table.insertAt({ ...formData.value }, -1); } updateElement(); formDialog.closeDialog(); @@ -155,13 +153,13 @@ const removeSelectRowEvent = async () => { } }; const insertEvent = async () => { - Object.assign(formData, initData); + Object.assign(formData.value, initData); selectRow.value = null; formDialog.openDialog(); }; const editEvent = (row: ExecutionListenerVO) => { - Object.assign(formData, row); + Object.assign(formData.value, row); selectRow.value = row; formDialog.openDialog(); }; @@ -258,6 +256,38 @@ const eventSelect = [ { id: '6da97c1e-15fc-4445-8943-75d09f49778e', label: 'end', value: 'end' }, { id: '6a2cbcec-e026-4f11-bef7-fff0b5c871e2', label: 'take', value: 'take' } ]; + +const initTableData = () => { + tableData.value = + props.element.businessObject.extensionElements?.values + .filter((item) => item.$type === 'flowable:ExecutionListener') + .map((item) => { + let type; + if ('class' in item) type = 'class'; + if ('expression' in item) type = 'expression'; + if ('delegateExpression' in item) type = 'delegateExpression'; + return { + event: item.event, + type: type, + className: item[type], + params: + item.fields?.map((field) => { + let fieldType; + if ('stringValue' in field) fieldType = 'stringValue'; + if ('expression' in field) fieldType = 'expression'; + return { + name: field.name, + type: fieldType, + value: field[fieldType] + }; + }) ?? [] + }; + }) ?? []; +}; + +onMounted(() => { + initTableData(); +});