bug

2024-11-22 23:31:52 +08:00 · 2023-01-28 15:30:52 +08:00 · 2023-01-28 15:30:52 +08:00 · 3ce663c7a5
commit 3ce663c7a5
parent a03f702fa1
9 changed files with 89 additions and 63 deletions
--- 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 @@
          <XButton preIcon="ep:folder-opened" title="打开文件" @click="refFile.click()" />
          <el-tooltip effect="light" placement="bottom">
            <template #content>
-              <XButton type="text" title="下载为XML文件" @click="downloadProcessAsXml()" />
-              <br />
+              <div style="color: #409eff">
+                <el-button link @click="downloadProcessAsXml()">下载为XML文件</el-button>
+                <br />

-              <XButton type="text" title="下载为SVG文件" @click="downloadProcessAsSvg()" />
-              <br />
+                <el-button link @click="downloadProcessAsSvg()">下载为SVG文件</el-button>
+                <br />

-              <XButton type="text" title="下载为BPMN文件" @click="downloadProcessAsBpmn()" />
+                <el-button link @click="downloadProcessAsBpmn()">下载为BPMN文件</el-button>
+              </div>
            </template>
            <XButton title="下载文件" preIcon="ep:download" />
          </el-tooltip>
          <el-tooltip effect="light">
            <XButton preIcon="ep:view" title="浏览" />
            <template #content>
-              <el-button type="text" @click="previewProcessXML">预览XML</el-button>
+              <el-button link @click="previewProcessXML">预览XML</el-button>
              <br />
-              <el-button type="text" @click="previewProcessJson">预览JSON</el-button>
+              <el-button link @click="previewProcessJson">预览JSON</el-button>
            </template>
          </el-tooltip>
          <el-tooltip
@ -594,10 +596,9 @@ const elementsAlign = (align) => {
  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('保存模型失败，请重试！')
--- 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,
--- 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
 })
 </script>
--- 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 @@
      />
      <el-table-column label="操作" width="90px">
        <template #default="scope">
-          <el-button size="small" type="text" @click="openListenerForm(scope.row, scope.$index)"
+          <el-button size="small" @click="openListenerForm(scope.row, scope.$index)"
            >编辑</el-button
          >
          <el-divider direction="vertical" />
          <el-button
            size="small"
-            type="text"
            style="color: #ff4d4f"
            @click="removeListener(scope.row, scope.$index)"
            >移除</el-button
@ -395,10 +394,15 @@ const saveListenerConfig = async () => {
    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(() => {
--- 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(() => {
--- 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 @@
      <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
      <el-table-column label="操作" width="90px">
        <template #default="scope">
-          <el-button type="text" @click="openAttributesForm(scope, scope.$index)">编辑</el-button>
+          <el-button type="text" @click="openAttributesForm(scope.row, scope.$index)"
+            >编辑</el-button
+          >
          <el-divider direction="vertical" />
          <el-button
            type="text"
            style="color: #ff4d4f"
-            @click="removeAttributes(scope, scope.$index)"
+            @click="removeAttributes(scope.roww, scope.$index)"
            >移除</el-button
          >
        </template>
@ -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)
--- a/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts
+++ b/yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts
@ -1,16 +1,16 @@
 // 创建监听器实例
-export function createListenerObject (options, isTask, prefix) {
+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":
+    case 'scriptListener':
      listenerObj.script = createScriptObject(options, prefix)
      break
-    case "expressionListener":
+    case 'expressionListener':
      listenerObj.expression = options.expression
      break
-    case "delegateExpressionListener":
+    case 'delegateExpressionListener':
      listenerObj.delegateExpression = options.delegateExpression
      break
    default:
@ -18,54 +18,59 @@ export function createListenerObject (options, isTask, prefix) {
  }
  // 注入字段
  if (options.fields) {
-    listenerObj.fields = options.fields.map(field => {
+    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", {
+  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
+      [`time${options.eventDefinitionType.replace(/^\S/, (s) => s.toUpperCase())}`]: timeDefinition
    })
    listenerObj.eventDefinitions = [TimerEventDefinition]
  }
-  return window.bpmnInstances.moddle.create(`${prefix}:${isTask ? "TaskListener" : "ExecutionListener"}`, listenerObj)
+  return window.bpmnInstances.moddle.create(
+    `${prefix}:${isTask ? 'TaskListener' : 'ExecutionListener'}`,
+    listenerObj
+  )
 }

 // 创建 监听器的注入字段 实例
-export function createFieldObject (option, prefix) {
+export function createFieldObject(option, prefix) {
  const { name, fieldType, string, expression } = option
-  const fieldConfig = fieldType === "string" ? { name, string } : { name, expression }
+  const fieldConfig = fieldType === 'string' ? { name, string } : { name, expression }
  return window.bpmnInstances.moddle.create(`${prefix}:Field`, fieldConfig)
 }

 // 创建脚本实例
-export function createScriptObject (options, prefix) {
+export function createScriptObject(options, prefix) {
  const { scriptType, scriptFormat, value, resource } = options
-  const scriptConfig = scriptType === "inlineScript" ? { scriptFormat, value } : { scriptFormat, resource }
+  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", {
+export function updateElementExtensions(element, extensionList) {
+  const extensions = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', {
    values: extensionList
  })
-  console.log(extensions, 'extensionsextensions')
-  console.log(window.bpmnInstances.modeling, 'window.bpmnInstances.modeling')
+  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 = ""
-  let charsString = chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
+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)]
  }
--- 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']
--- 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 @@
 </template>

 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onBeforeMount } from 'vue'
 // import { translations } from '@/components/bpmnProcessDesigner/src/translations'
 // 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
 import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad'
@ -39,7 +39,7 @@ import CustomPaletteProvider from '@/components/bpmnProcessDesigner/package/desi
 import { createModelApi, getModelApi, updateModelApi } from '@/api/bpm/model'

 import { useRouter } from 'vue-router'
-import { onBeforeMount } from 'vue'
+import { ElMessage } from 'element-plus'
 const router = useRouter()

 // 自定义侧边栏
@ -115,12 +115,15 @@ const save = (bpmnXml) => {
    ...model.value,
    bpmnXml: bpmnXml // this.bpmnXml 只是初始化流程图，后续修改无法通过它获得
  }
+  console.log(data, 'data')

  // 修改的提交
  if (data.id) {
    updateModelApi(data).then((response) => {
      console.log(response, 'response')
      // this.$modal.msgSuccess("修改成功")
+      ElMessage.success('修改成功')
+
      // 跳转回去
      close()
    })
@ -130,6 +133,7 @@ const save = (bpmnXml) => {
  createModelApi(data).then((response) => {
    console.log(response, 'response1')
    // this.$modal.msgSuccess("保存成功")
+    ElMessage.success('保存成功')
    // 跳转回去
    close()
  })