bug

gexinzhineng/gxzn27
1 parent a03f702f
Showing 9 changed files with 89 additions and 63 deletions
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.js → yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.ts
yudao-ui-admin-vue3/src/types/auto-components.d.ts
yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.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) =&gt; {
   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 = () =&gt; {
 }
 /* ------------------------------------------------ 芋道源码 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('保存模型失败，请重试！')
@@ -89,7 +89,7 @@ const props = defineProps({
   },
   width: {
     type: Number,
-    default: 500
+    default: 480
   },
   idEditDisabled: {
     type: Boolean,
@@ -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 = () =&gt; {
   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) =&gt; {
   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>
@@ -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 () =&gt; {
     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 () =&gt; {
 watch(
   () => props.id,
   (val) => {
+    console.log(val, 'propsId变化')
     val &&
       val.length &&
       nextTick(() => {
@@ -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(() => {
@@ -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 = () =&gt; {
   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) =&gt; {
       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) =&gt; {
     .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 = () =&gt; {
     )
   } 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)
 // 创建监听器实例
-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)]
   }
@@ -46,10 +46,12 @@ declare module &#39;@vue/runtime-core&#39; {
     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 &#39;@vue/runtime-core&#39; {
     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']
@@ -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 &#39;@/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) =&gt; {
     ...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) =&gt; {
   createModelApi(data).then((response) => {
     console.log(response, 'response1')
     // this.$modal.msgSuccess("保存成功")
+    ElMessage.success('保存成功')
     // 跳转回去
     close()
   })