diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue index 49e5d9f6..ae931724 100644 --- a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue +++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue @@ -381,7 +381,7 @@ const fieldOptions = computed(() => { /** 获取字段名称 */ const getFieldTitle = (field: string) => { - const item = fieldsInfo.find((item) => item.field === field) + const item = fieldOptions.value.find((item) => item.field === field) return item?.title } diff --git a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss index 516756e2..8cf2681d 100644 --- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss +++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss @@ -173,13 +173,16 @@ height: 100%; padding-top: 32px; background-color: #fafafa; + overflow-x: auto; + width: 100%; + .simple-process-model { display: flex; flex-direction: column; justify-content: center; align-items: center; transform-origin: 50% 0 0; - overflow: auto; + min-width: fit-content; transform: scale(1); transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); background: url(@/assets/svgs/bpm/simple-process-bg.svg) 0 0 repeat; @@ -473,6 +476,7 @@ .branch-node-container { position: relative; display: flex; + min-width: fit-content; &::before { position: absolute; @@ -548,6 +552,7 @@ background: transparent; border-top: 2px solid #dedede; border-bottom: 2px solid #dedede; + flex-shrink: 0; &::before { position: absolute; diff --git a/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue b/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue index e9427292..9d2fa5ba 100644 --- a/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue +++ b/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue @@ -309,18 +309,26 @@ const props = defineProps({ }) // 监听value变化,重新加载流程图 -watch(() => props.value, (newValue) => { - if (newValue && bpmnModeler) { - createNewDiagram(newValue) - } -}, { immediate: true }) +watch( + () => props.value, + (newValue) => { + if (newValue && bpmnModeler) { + createNewDiagram(newValue) + } + }, + { immediate: true } +) // 监听processId和processName变化 -watch([() => props.processId, () => props.processName], ([newId, newName]) => { - if (newId && newName && !props.value) { - createNewDiagram(null) - } -}, { immediate: true }) +watch( + [() => props.processId, () => props.processName], + ([newId, newName]) => { + if (newId && newName && !props.value) { + createNewDiagram(null) + } + }, + { immediate: true } +) provide('configGlobal', props) let bpmnModeler: any = null @@ -599,16 +607,6 @@ const processZoomOut = (zoomStep = 0.1) => { defaultZoom.value = newZoom bpmnModeler.get('canvas').zoom(defaultZoom.value) } -// const processZoomTo = (newZoom = 1) => { -// if (newZoom < 0.2) { -// throw new Error('[Process Designer Warn ]: The zoom ratio cannot be less than 0.2') -// } -// if (newZoom > 4) { -// throw new Error('[Process Designer Warn ]: The zoom ratio cannot be greater than 4') -// } -// defaultZoom = newZoom -// bpmnModeler.get('canvas').zoom(newZoom) -// } const processReZoom = () => { defaultZoom.value = 1 bpmnModeler.get('canvas').zoom('fit-viewport', 'auto') @@ -647,62 +645,19 @@ const previewProcessXML = () => { } const previewProcessJson = () => { bpmnModeler.saveXML({ format: true }).then(({ xml }) => { - // console.log(xml, 'xml') - - // const rootNode = parseXmlString(xml) - // console.log(rootNode, 'rootNoderootNode') const rootNodes = new XmlNode(XmlNodeType.Root, parseXmlString(xml)) - // console.log(rootNodes, 'rootNodesrootNodesrootNodes') - // console.log(rootNodes.parent.toJsObject(), 'rootNodes.toJSON()') - // console.log(JSON.stringify(rootNodes.parent.toJsObject()), 'rootNodes.toJSON()') - // console.log(JSON.stringify(rootNodes.parent.toJSON()), 'rootNodes.toJSON()') - - // const parser = new xml2js.XMLParser() - // let jObj = parser.parse(xml) - // console.log(jObj, 'jObjjObjjObjjObjjObj') - // const builder = new xml2js.XMLBuilder(xml) - // const xmlContent = builder - // console.log(xmlContent, 'xmlContent') - // console.log(xml2js, 'convertconvertconvert') previewResult.value = rootNodes.parent?.toJSON() as unknown as string - // previewResult.value = jObj - // previewResult.value = convert.xml2json(xml, {explicitArray : false},{ spaces: 2 }) previewType.value = 'json' previewModelVisible.value = true }) } + /* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */ -const processSave = async () => { - try { - const { err, xml } = await bpmnModeler.saveXML() - if (err) { - ElMessage.error('保存流程设计失败,请重试!') - return - } - emit('save', xml) - } catch (error) { - console.error(error) - ElMessage.error('保存流程设计失败,请重试!') - } -} -/** 高亮显示 */ -// const highlightedCode = (previewType, previewResult) => { -// console.log(previewType, 'previewType, previewResult') -// console.log(previewResult, 'previewType, previewResult') -// console.log(hljs.highlight, 'hljs.highlight') -// const result = hljs.highlight(previewType, previewResult.value || '', true) -// return result.value || ' ' -// } -onBeforeMount(() => { - console.log(props, 'propspropspropsprops') -}) onMounted(() => { initBpmnModeler() createNewDiagram(props.value) }) onBeforeUnmount(() => { - // this.$once('hook:beforeDestroy', () => { - // }) if (bpmnModeler) bpmnModeler.destroy() emit('destroy', bpmnModeler) bpmnModeler = null diff --git a/src/views/bpm/model/editor/index.vue b/src/views/bpm/model/editor/index.vue index 9e754fcc..37eff739 100644 --- a/src/views/bpm/model/editor/index.vue +++ b/src/views/bpm/model/editor/index.vue @@ -221,7 +221,7 @@ onBeforeUnmount(() => { } }) -/** 获取XML字符串 */ +/** 获取 XML 字符串 */ const saveXML = async () => { if (!modeler.value) { return { xml: xmlString.value } @@ -273,7 +273,7 @@ defineExpose({ diff --git a/src/views/bpm/model/form/index.vue b/src/views/bpm/model/form/index.vue index 50d54e67..4585fc60 100644 --- a/src/views/bpm/model/form/index.vue +++ b/src/views/bpm/model/form/index.vue @@ -79,14 +79,14 @@