From 3ce663c7a5894e193fc0c57567840ff46eca2db6 Mon Sep 17 00:00:00 2001 From: gexinzhineng/gxzn27 <1348660141@qq.com> Date: Sat, 28 Jan 2023 15:30:52 +0800 Subject: [PATCH] bug --- yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue | 22 +++++++++++++--------- yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue | 2 +- yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue | 20 ++++++++++---------- yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue | 17 +++++++++++------ yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue | 11 +++++++---- yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue | 18 ++++++++++-------- yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.js | 73 ------------------------------------------------------------------------- yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ yudao-ui-admin-vue3/src/types/auto-components.d.ts | 3 +++ yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue | 8 ++++++-- 10 files changed, 139 insertions(+), 113 deletions(-) delete mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.js create mode 100644 yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue index 5ef0e6c..2e740d2 100644 --- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue +++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue @@ -7,22 +7,24 @@ - - + + 下载为XML文件 + - - + 下载为SVG文件 + - + 下载为BPMN文件 + - 预览XML + 预览XML - 预览JSON + 预览JSON { const Align = bpmnModeler.get('alignElements') const Selection = bpmnModeler.get('selection') const SelectedElements = Selection.get() - console.log(SelectedElements, 'SelectedElements') if (!SelectedElements || SelectedElements.length <= 1) { ElMessage.warning('请按住 Shift 键选择多个元素对齐') - // alert('请按住 Ctrl 键选择多个元素对齐') + // alert('请按住 Ctrl 键选择多个元素对齐 return } ElMessageBox.confirm('自动对齐可能造成图形变形,是否继续?', '警告', { @@ -636,7 +637,10 @@ const previewProcessJson = () => { } /* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */ const processSave = async () => { + console.log(bpmnModeler, 'bpmnModelerbpmnModelerbpmnModelerbpmnModeler') const { err, xml } = await bpmnModeler.saveXML() + console.log(err, 'errerrerrerrerr') + console.log(xml, 'xmlxmlxmlxmlxml') // 读取异常时抛出异常 if (err) { // this.$modal.msgError('保存模型失败,请重试!') diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue index d7378fc..a649cd7 100644 --- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue +++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue @@ -89,7 +89,7 @@ const props = defineProps({ }, width: { type: Number, - default: 500 + default: 480 }, idEditDisabled: { type: Boolean, diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue index 7708d46..c294344 100644 --- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue +++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue @@ -45,7 +45,7 @@ const props = defineProps({ model: Object // 流程模型的数据 }) const needProps = ref({}) -const bpmnElement = ref() +let bpmnElement const elementBaseInfo = ref({}) // 流程表单的下拉框的数据 // const forms = ref([]) @@ -59,10 +59,10 @@ const resetBaseInfo = () => { console.log(window, 'window') console.log(bpmnElement, 'bpmnElement') - bpmnElement.value = window?.bpmnInstances?.bpmnElement - console.log(bpmnElement.value, 'resetBaseInfo11111111111') - elementBaseInfo.value = bpmnElement.value.businessObject - needProps.value['type'] = bpmnElement.value.businessObject.$type + bpmnElement = window?.bpmnInstances?.bpmnElement + console.log(bpmnElement, 'resetBaseInfo11111111111') + elementBaseInfo.value = bpmnElement.businessObject + needProps.value['type'] = bpmnElement.businessObject.$type // elementBaseInfo.value['typess'] = bpmnElement.value.businessObject.$type // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject)) @@ -113,15 +113,15 @@ const updateBaseInfo = (key) => { if (key === 'id') { console.log('jinru') console.log(window, 'window') - console.log(bpmnElement.value, 'bpmnElement') - console.log(toRaw(bpmnElement.value), 'bpmnElement') - window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), { + console.log(bpmnElement, 'bpmnElement') + console.log(toRaw(bpmnElement), 'bpmnElement') + window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement), { id: elementBaseInfo.value[key], di: { id: `${elementBaseInfo.value[key]}_di` } }) } else { console.log(attrObj, 'attrObj') - window.bpmnInstances.modeling.updateProperties(bpmnElement.value, attrObj) + window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement), attrObj) } } onMounted(() => { @@ -165,6 +165,6 @@ watch( // } // } onBeforeUnmount(() => { - bpmnElement.value = null + bpmnElement = null }) diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue index b2f38e0..f07d5d5 100644 --- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue +++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue @@ -11,13 +11,12 @@ /> - 编辑 移除 { bpmnElement.value.businessObject?.extensionElements?.values?.filter( (ex) => ex.$type !== `${prefix}:ExecutionListener` ) ?? [] - // updateElementExtensions( - // bpmnElement.value, - // otherExtensionList.value.concat(bpmnElementListeners.value) - // ) + console.log(bpmnElement.value.height, 'bpmnElement.value') + console.log( + otherExtensionList.value.concat(bpmnElementListeners.value), + 'otherExtensionList.value.concat(bpmnElementListeners.value).value' + ) + updateElementExtensions( + bpmnElement.value, + otherExtensionList.value.concat(bpmnElementListeners.value) + ) // 4. 隐藏侧边栏 listenerFormModelVisible.value = false listenerForm.value = {} @@ -407,6 +411,7 @@ const saveListenerConfig = async () => { watch( () => props.id, (val) => { + console.log(val, 'propsId变化') val && val.length && nextTick(() => { diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue index 9f56209..e65fc7d 100644 --- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue +++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue @@ -25,13 +25,16 @@ const props = defineProps({ const documentation = ref('') const bpmnElement = ref() const updateDocumentation = () => { - ;(bpmnElement.value && bpmnElement.value.id === props.id) || - (bpmnElement.value = window.bpmnInstances.elementRegistry.get(props.id)) - const documentation = window.bpmnInstances.bpmnFactory.create('bpmn:Documentation', { + if (bpmnElement.value && bpmnElement.value.id === props.id) { + bpmnElement.value = window.bpmnInstances.elementRegistry.get(props.id) + } + // (bpmnElement.value && bpmnElement.value.id === props.id) || + // (bpmnElement.value = window.bpmnInstances.elementRegistry.get(props.id)) + const documentations = window.bpmnInstances.bpmnFactory.create('bpmn:Documentation', { text: documentation.value }) window.bpmnInstances.modeling.updateProperties(bpmnElement.value, { - documentation: [documentation] + documentation: [documentations] }) } onBeforeUnmount(() => { diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue index 2b7a3c1..b304bcb 100644 --- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue +++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue @@ -6,12 +6,14 @@ - 编辑 + 编辑 移除 @@ -84,10 +86,10 @@ const resetAttributesList = () => { otherExtensionList.value = [] // 其他扩展配置 bpmnElementProperties.value = bpmnElement.value.businessObject?.extensionElements?.values?.filter((ex) => { - if (ex.$type !== `${prefix.value}:Properties`) { + if (ex.$type !== `${prefix}:Properties`) { otherExtensionList.value.push(ex) } - return ex.$type === `${prefix.value}:Properties` + return ex.$type === `${prefix}:Properties` }) ?? [] // 保存所有的 扩展属性字段 @@ -116,7 +118,7 @@ const removeAttributes = (attr, index) => { elementPropertyList.value.splice(index, 1) bpmnElementPropertyList.value.splice(index, 1) // 新建一个属性字段的保存列表 - const propertiesObject = window.bpmnInstances.moddle.create(`${prefix.value}:Properties`, { + const propertiesObject = window.bpmnInstances.moddle.create(`${prefix}:Properties`, { values: bpmnElementPropertyList.value }) updateElementExtensions(propertiesObject) @@ -125,8 +127,8 @@ const removeAttributes = (attr, index) => { .catch(() => console.info('操作取消')) } const saveAttribute = () => { + console.log(propertyForm.value, 'propertyForm.value') const { name, value } = propertyForm.value - console.log(bpmnElementPropertyList.value) if (editingPropertyIndex.value !== -1) { window.bpmnInstances.modeling.updateModdleProperties( bpmnElement.value, @@ -138,12 +140,12 @@ const saveAttribute = () => { ) } else { // 新建属性字段 - const newPropertyObject = window.bpmnInstances.moddle.create(`${prefix.value}:Property`, { + const newPropertyObject = window.bpmnInstances.moddle.create(`${prefix}:Property`, { name, value }) // 新建一个属性字段的保存列表 - const propertiesObject = window.bpmnInstances.moddle.create(`${prefix.value}:Properties`, { + const propertiesObject = window.bpmnInstances.moddle.create(`${prefix}:Properties`, { values: bpmnElementPropertyList.value.concat([newPropertyObject]) }) updateElementExtensions(propertiesObject) diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.js b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.js deleted file mode 100644 index 58f08e1..0000000 --- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.js +++ /dev/null @@ -1,73 +0,0 @@ -// 创建监听器实例 -export function createListenerObject (options, isTask, prefix) { - const listenerObj = Object.create(null) - listenerObj.event = options.event - isTask && (listenerObj.id = options.id) // 任务监听器特有的 id 字段 - switch (options.listenerType) { - case "scriptListener": - listenerObj.script = createScriptObject(options, prefix) - break - case "expressionListener": - listenerObj.expression = options.expression - break - case "delegateExpressionListener": - listenerObj.delegateExpression = options.delegateExpression - break - default: - listenerObj.class = options.class - } - // 注入字段 - if (options.fields) { - listenerObj.fields = options.fields.map(field => { - return createFieldObject(field, prefix) - }) - } - // 任务监听器的 定时器 设置 - if (isTask && options.event === "timeout" && !!options.eventDefinitionType) { - const timeDefinition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: options.eventTimeDefinitions }) - const TimerEventDefinition = window.bpmnInstances.moddle.create("bpmn:TimerEventDefinition", { - id: `TimerEventDefinition_${uuid(8)}`, - [`time${options.eventDefinitionType.replace(/^\S/, s => s.toUpperCase())}`]: timeDefinition - }) - listenerObj.eventDefinitions = [TimerEventDefinition] - } - return window.bpmnInstances.moddle.create(`${prefix}:${isTask ? "TaskListener" : "ExecutionListener"}`, listenerObj) -} - -// 创建 监听器的注入字段 实例 -export function createFieldObject (option, prefix) { - const { name, fieldType, string, expression } = option - const fieldConfig = fieldType === "string" ? { name, string } : { name, expression } - return window.bpmnInstances.moddle.create(`${prefix}:Field`, fieldConfig) -} - -// 创建脚本实例 -export function createScriptObject (options, prefix) { - const { scriptType, scriptFormat, value, resource } = options - const scriptConfig = scriptType === "inlineScript" ? { scriptFormat, value } : { scriptFormat, resource } - return window.bpmnInstances.moddle.create(`${prefix}:Script`, scriptConfig) -} - -// 更新元素扩展属性 -export function updateElementExtensions (element, extensionList) { - console.log(element, 'element') - console.log(extensionList, 'extensionList') - const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", { - values: extensionList - }) - console.log(extensions, 'extensionsextensions') - console.log(window.bpmnInstances.modeling, 'window.bpmnInstances.modeling') - window.bpmnInstances.modeling.updateProperties(element, { - extensionElements: extensions.values - }) -} - -// 创建一个id -export function uuid (length = 8, chars) { - let result = "" - let charsString = chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ" - for (let i = length; i > 0; --i) { - result += charsString[Math.floor(Math.random() * charsString.length)] - } - return result -} diff --git a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts new file mode 100644 index 0000000..5123baf --- /dev/null +++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts @@ -0,0 +1,78 @@ +// 创建监听器实例 +export function createListenerObject(options, isTask, prefix) { + const listenerObj = Object.create(null) + listenerObj.event = options.event + isTask && (listenerObj.id = options.id) // 任务监听器特有的 id 字段 + switch (options.listenerType) { + case 'scriptListener': + listenerObj.script = createScriptObject(options, prefix) + break + case 'expressionListener': + listenerObj.expression = options.expression + break + case 'delegateExpressionListener': + listenerObj.delegateExpression = options.delegateExpression + break + default: + listenerObj.class = options.class + } + // 注入字段 + if (options.fields) { + listenerObj.fields = options.fields.map((field) => { + return createFieldObject(field, prefix) + }) + } + // 任务监听器的 定时器 设置 + if (isTask && options.event === 'timeout' && !!options.eventDefinitionType) { + const timeDefinition = window.bpmnInstances.moddle.create('bpmn:FormalExpression', { + body: options.eventTimeDefinitions + }) + const TimerEventDefinition = window.bpmnInstances.moddle.create('bpmn:TimerEventDefinition', { + id: `TimerEventDefinition_${uuid(8)}`, + [`time${options.eventDefinitionType.replace(/^\S/, (s) => s.toUpperCase())}`]: timeDefinition + }) + listenerObj.eventDefinitions = [TimerEventDefinition] + } + return window.bpmnInstances.moddle.create( + `${prefix}:${isTask ? 'TaskListener' : 'ExecutionListener'}`, + listenerObj + ) +} + +// 创建 监听器的注入字段 实例 +export function createFieldObject(option, prefix) { + const { name, fieldType, string, expression } = option + const fieldConfig = fieldType === 'string' ? { name, string } : { name, expression } + return window.bpmnInstances.moddle.create(`${prefix}:Field`, fieldConfig) +} + +// 创建脚本实例 +export function createScriptObject(options, prefix) { + const { scriptType, scriptFormat, value, resource } = options + const scriptConfig = + scriptType === 'inlineScript' ? { scriptFormat, value } : { scriptFormat, resource } + return window.bpmnInstances.moddle.create(`${prefix}:Script`, scriptConfig) +} + +// 更新元素扩展属性 +export function updateElementExtensions(element, extensionList) { + const extensions = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', { + values: extensionList + }) + console.log(element, 'elementelementelementelement') + console.log(extensions.values, 'extensionsextensionsextensions') + window.bpmnInstances.modeling.updateProperties(element, { + extensionElements: extensions.values + }) + console.log('ssss') +} + +// 创建一个id +export function uuid(length = 8, chars) { + let result = '' + const charsString = chars || '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ' + for (let i = length; i > 0; --i) { + result += charsString[Math.floor(Math.random() * charsString.length)] + } + return result +} diff --git a/yudao-ui-admin-vue3/src/types/auto-components.d.ts b/yudao-ui-admin-vue3/src/types/auto-components.d.ts index aaf0d35..81b2d6a 100644 --- a/yudao-ui-admin-vue3/src/types/auto-components.d.ts +++ b/yudao-ui-admin-vue3/src/types/auto-components.d.ts @@ -46,10 +46,12 @@ declare module '@vue/runtime-core' { ElIcon: typeof import('element-plus/es')['ElIcon'] ElImageViewer: typeof import('element-plus/es')['ElImageViewer'] ElInput: typeof import('element-plus/es')['ElInput'] + ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] ElLink: typeof import('element-plus/es')['ElLink'] ElOption: typeof import('element-plus/es')['ElOption'] ElPopover: typeof import('element-plus/es')['ElPopover'] ElRadio: typeof import('element-plus/es')['ElRadio'] + ElRadioButton: typeof import('element-plus/es')['ElRadioButton'] ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] ElRow: typeof import('element-plus/es')['ElRow'] ElSelect: typeof import('element-plus/es')['ElSelect'] @@ -60,6 +62,7 @@ declare module '@vue/runtime-core' { ElTabs: typeof import('element-plus/es')['ElTabs'] ElTag: typeof import('element-plus/es')['ElTag'] ElTooltip: typeof import('element-plus/es')['ElTooltip'] + ElTree: typeof import('element-plus/es')['ElTree'] ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect'] ElUpload: typeof import('element-plus/es')['ElUpload'] Error: typeof import('./../components/Error/src/Error.vue')['default'] diff --git a/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue b/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue index 9aec8d3..a16fe11 100644 --- a/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue +++ b/yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue @@ -27,7 +27,7 @@