修改数据弹出层

gexinzhineng/gxzn27
1 parent 89c366be
Showing 6 changed files with 160 additions and 114 deletions
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/listeners/UserTaskListeners.vue
yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.js
yudao-ui-admin/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
 <template>
-  <div class="process-panel__container" :style="{ width: `${width}px` }">
+  <div class="process-panel__container" :style="{ width: `${width}px;` }">
     <el-collapse v-model="activeTab">
       <el-collapse-item name="base">
         <!-- class="panel-tab__title" -->
@@ -89,7 +89,7 @@ const props = defineProps({
   },
   width: {
     type: Number,
-    default: 480
+    default: 500
   },
   idEditDisabled: {
     type: Boolean,
 <template>
   <div class="panel-tab__content">
     <el-form label-width="90px" :model="needProps" :rules="rules">
-      <div v-if="elementBaseInfo == 'bpmn:Process'">
+      <div v-if="needProps.type == 'bpmn:Process'">
         <!-- 如果是 Process 信息的时候，使用自定义表单 -->
         <el-link
           href="https://doc.iocoder.cn/bpm/#_3-%E6%B5%81%E7%A8%8B%E5%9B%BE%E7%A4%BA%E4%BE%8B"
@@ -9,9 +9,9 @@
           target="_blank"
           >如何实现实现会签、或签？</el-link
         >
-        <el-form-item label="流程标识" prop="key">
+        <el-form-item label="流程标识" prop="id">
           <el-input
-            v-model="needProps.key"
+            v-model="needProps.id"
             placeholder="请输入流标标识"
             :disabled="needProps.id !== undefined && needProps.id.length > 0"
             @change="handleKeyUpdate"
@@ -38,20 +38,20 @@
   </div>
 </template>
 <script setup lang="ts" name="ElementBaseInfo">
-import { ref, reactive, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import { ref, reactive, watch, onMounted, onBeforeUnmount, toRaw } from 'vue'
 import { ElLink, ElForm, ElFormItem, ElInput } from 'element-plus'
 const props = defineProps({
   businessObject: Object,
   model: Object // 流程模型的数据
 })
-const needProps = ref()
+const needProps = ref({})
 const bpmnElement = ref()
 const elementBaseInfo = ref({})
 // 流程表单的下拉框的数据
 // const forms = ref([])
 // 流程模型的校验
 const rules = reactive({
-  key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
+  id: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
   name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }]
 })
  
@@ -60,10 +60,13 @@ const resetBaseInfo = () =&gt; {
   console.log(bpmnElement, 'bpmnElement')
  
   bpmnElement.value = window?.bpmnInstances?.bpmnElement
-  console.log(bpmnElement.value, 'resetBaseInfo')
+  console.log(bpmnElement.value, 'resetBaseInfo11111111111')
   elementBaseInfo.value = bpmnElement.value.businessObject
+  needProps.value['type'] = bpmnElement.value.businessObject.$type
+  // elementBaseInfo.value['typess'] = bpmnElement.value.businessObject.$type
+
   // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
-  console.log(elementBaseInfo.value, 'elementBaseInfo')
+  console.log(elementBaseInfo.value, 'elementBaseInfo22222222222')
 }
 const handleKeyUpdate = (value) => {
   // 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
@@ -104,10 +107,15 @@ const updateBaseInfo = (key) =&gt; {
   //   id: elementBaseInfo.value[key]
   //   // di: { id: `${elementBaseInfo.value[key]}_di` }
   // }
+  console.log(elementBaseInfo, 'elementBaseInfo11111111111')
+  needProps.value = { ...elementBaseInfo.value, ...needProps.value }
  
   if (key === 'id') {
     console.log('jinru')
-    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+    console.log(window, 'window')
+    console.log(bpmnElement.value, 'bpmnElement')
+    console.log(toRaw(bpmnElement.value), 'bpmnElement')
+    window.bpmnInstances.modeling.updateProperties(toRaw(bpmnElement.value), {
       id: elementBaseInfo.value[key],
       di: { id: `${elementBaseInfo.value[key]}_di` }
     })
@@ -131,9 +139,9 @@ watch(
   (val) => {
     console.log(val, 'val11111111111111111111')
     if (val) {
-      nextTick(() => {
-        resetBaseInfo()
-      })
+      // nextTick(() => {
+      resetBaseInfo()
+      // })
     }
   }
 )
@@ -11,15 +11,15 @@
       />
       <el-table-column label="操作" width="90px">
         <template #default="scope">
-          <el-button size="mini" type="text" @click="openListenerForm(scope, scope.$index)"
+          <el-button size="small" type="text" @click="openListenerForm(scope.row, scope.$index)"
             >编辑</el-button
           >
           <el-divider direction="vertical" />
           <el-button
-            size="mini"
+            size="small"
             type="text"
             style="color: #ff4d4f"
-            @click="removeListener(scope, scope.$index)"
+            @click="removeListener(scope.row, scope.$index)"
             >移除</el-button
           >
         </template>
@@ -138,7 +138,7 @@
       <el-divider />
       <p class="listener-filed__title">
         <span><Icon icon="ep:menu" />注入字段：</span>
-        <el-button type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
+        <XButton type="primary" size="mini" @click="openListenerFieldForm(null)" title="添加字段" />
       </p>
       <el-table
         :data="fieldsListOfListener"
@@ -164,15 +164,18 @@
         />
         <el-table-column label="操作" width="100px">
           <template #default="scope">
-            <el-button size="mini" type="text" @click="openListenerFieldForm(scope, scope.$index)"
+            <el-button
+              size="small"
+              type="text"
+              @click="openListenerFieldForm(scope.row, scope.$index)"
               >编辑</el-button
             >
             <el-divider direction="vertical" />
             <el-button
-              size="mini"
+              size="small"
               type="text"
               style="color: #ff4d4f"
-              @click="removeListenerField(scope, scope.$index)"
+              @click="removeListenerField(scope.row, scope.$index)"
               >移除</el-button
             >
           </template>
@@ -180,8 +183,8 @@
       </el-table>
  
       <div class="element-drawer__button">
-        <el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
-        <el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
+        <el-button @click="listenerFormModelVisible = false">取 消</el-button>
+        <el-button type="primary" @click="saveListenerConfig">保 存</el-button>
       </div>
     </el-drawer>
  
@@ -240,8 +243,8 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
-        <el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
+        <el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
       </template>
     </el-dialog>
   </div>
@@ -392,10 +395,10 @@ const saveListenerConfig = async () =&gt; {
     bpmnElement.value.businessObject?.extensionElements?.values?.filter(
       (ex) => ex.$type !== `${prefix}:ExecutionListener`
     ) ?? []
-  updateElementExtensions(
-    bpmnElement.value,
-    otherExtensionList.value.concat(bpmnElementListeners.value)
-  )
+  // updateElementExtensions(
+  //   bpmnElement.value,
+  //   otherExtensionList.value.concat(bpmnElementListeners.value)
+  // )
   // 4. 隐藏侧边栏
   listenerFormModelVisible.value = false
   listenerForm.value = {}
 <template>
   <div class="panel-tab__content">
-    <el-table :data="elementListenersList" size="mini" border>
+    <el-table :data="elementListenersList" size="small" border>
       <el-table-column label="序号" width="50px" type="index" />
       <el-table-column
         label="事件类型"
@@ -17,15 +17,15 @@
       />
       <el-table-column label="操作" width="90px">
         <template #default="scope">
-          <el-button size="mini" type="text" @click="openListenerForm(scope, scope.$index)"
+          <el-button size="small" type="text" @click="openListenerForm(scope.row, scope.$index)"
             >编辑</el-button
           >
           <el-divider direction="vertical" />
           <el-button
-            size="mini"
+            size="small"
             type="text"
             style="color: #ff4d4f"
-            @click="removeListener(scope, scope.$index)"
+            @click="removeListener(scope.row, scope.$index)"
             >移除</el-button
           >
         </template>
@@ -33,7 +33,7 @@
     </el-table>
     <div class="element-drawer__button">
       <XButton
-        size="mini"
+        size="small"
         type="primary"
         preIcon="ep:plus"
         title="添加监听器"
@@ -49,7 +49,7 @@
       append-to-body
       destroy-on-close
     >
-      <el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef">
+      <el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef">
         <el-form-item
           label="事件类型"
           prop="event"
@@ -176,13 +176,13 @@
       <el-divider />
       <p class="listener-filed__title">
         <span><Icon icon="ep:menu" />注入字段：</span>
-        <el-button size="mini" type="primary" @click="openListenerFieldForm(null)"
+        <el-button size="small" type="primary" @click="openListenerFieldForm(null)"
           >添加字段</el-button
         >
       </p>
       <el-table
         :data="fieldsListOfListener"
-        size="mini"
+        size="small"
         max-height="240"
         border
         fit
@@ -204,15 +204,18 @@
         />
         <el-table-column label="操作" width="100px">
           <template #default="scope">
-            <el-button size="mini" type="text" @click="openListenerFieldForm(scope, scope.$index)"
+            <el-button
+              size="small"
+              type="text"
+              @click="openListenerFieldForm(scope.row, scope.$index)"
               >编辑</el-button
             >
             <el-divider direction="vertical" />
             <el-button
-              size="mini"
+              size="small"
               type="text"
               style="color: #ff4d4f"
-              @click="removeListenerField(scope, scope.$index)"
+              @click="removeListenerField(scope.row, scope.$index)"
               >移除</el-button
             >
           </template>
@@ -220,8 +223,8 @@
       </el-table>
  
       <div class="element-drawer__button">
-        <el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
-        <el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
+        <el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="saveListenerConfig">保 存</el-button>
       </div>
     </el-drawer>
  
@@ -235,7 +238,7 @@
     >
       <el-form
         :model="listenerFieldForm"
-        size="mini"
+        size="small"
         label-width="96px"
         ref="listenerFieldFormRef"
         style="height: 136px"
@@ -281,8 +284,8 @@
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
-        <el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
+        <el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
       </template>
     </el-dialog>
   </div>
 // 创建监听器实例
-export function createListenerObject(options, isTask, prefix) {
-  const listenerObj = Object.create(null);
-  listenerObj.event = options.event;
-  isTask && (listenerObj.id = options.id); // 任务监听器特有的 id 字段
+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;
+      listenerObj.script = createScriptObject(options, prefix)
+      break
     case "expressionListener":
-      listenerObj.expression = options.expression;
-      break;
+      listenerObj.expression = options.expression
+      break
     case "delegateExpressionListener":
-      listenerObj.delegateExpression = options.delegateExpression;
-      break;
+      listenerObj.delegateExpression = options.delegateExpression
+      break
     default:
-      listenerObj.class = options.class;
+      listenerObj.class = options.class
   }
   // 注入字段
   if (options.fields) {
     listenerObj.fields = options.fields.map(field => {
-      return createFieldObject(field, prefix);
-    });
+      return createFieldObject(field, prefix)
+    })
   }
   // 任务监听器的 定时器 设置
   if (isTask && options.event === "timeout" && !!options.eventDefinitionType) {
-    const timeDefinition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: options.eventTimeDefinitions });
+    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];
+    })
+    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) {
-  const { name, fieldType, string, expression } = option;
-  const fieldConfig = fieldType === "string" ? { name, string } : { name, expression };
-  return window.bpmnInstances.moddle.create(`${prefix}:Field`, fieldConfig);
+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 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) {
+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
-  });
+    extensionElements: extensions.values
+  })
 }
  
 // 创建一个id
-export function uuid(length = 8, chars) {
-  let result = "";
-  let charsString = chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+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)];
+    result += charsString[Math.floor(Math.random() * charsString.length)]
   }
-  return result;
+  return result
 }
 <template>
   <div class="panel-tab__content">
-    <el-form size="mini" label-width="90px" :model="model" :rules="rules" @submit.native.prevent>
-      <div v-if="elementBaseInfo.$type === 'bpmn:Process'"> <!-- 如果是 Process 信息的时候，使用自定义表单 -->
-        <el-link href="https://doc.iocoder.cn/bpm/#_3-%E6%B5%81%E7%A8%8B%E5%9B%BE%E7%A4%BA%E4%BE%8B"
-                 type="danger" target="_blank">如何实现实现会签、或签？</el-link>
+    <el-form
+      size="mini"
+      label-width="90px"
+      :model="model"
+      :rules="rules"
+      @submit.native.prevent
+    >
+      <div v-if="elementBaseInfo.$type === 'bpmn:Process'">
+        <!-- 如果是 Process 信息的时候，使用自定义表单 -->
+        <el-link
+          href="https://doc.iocoder.cn/bpm/#_3-%E6%B5%81%E7%A8%8B%E5%9B%BE%E7%A4%BA%E4%BE%8B"
+          type="danger"
+          target="_blank"
+          >如何实现实现会签、或签？</el-link
+        >
         <el-form-item label="流程标识" prop="key">
-          <el-input v-model="model.key" placeholder="请输入流标标识"
-                    :disabled="model.id !== undefined && model.id.length > 0" @change="handleKeyUpdate" />
+          <el-input
+            v-model="model.key"
+            placeholder="请输入流标标识"
+            :disabled="model.id !== undefined && model.id.length > 0"
+            @change="handleKeyUpdate"
+          />
         </el-form-item>
         <el-form-item label="流程名称" prop="name">
-          <el-input v-model="model.name" placeholder="请输入流程名称" clearable @change="handleNameUpdate" />
+          <el-input
+            v-model="model.name"
+            placeholder="请输入流程名称"
+            clearable
+            @change="handleNameUpdate"
+          />
         </el-form-item>
       </div>
       <div v-else>
         <el-form-item label="ID">
-          <el-input v-model="elementBaseInfo.id" clearable @change="updateBaseInfo('id')"/>
+          <el-input
+            v-model="elementBaseInfo.id"
+            clearable
+            @change="updateBaseInfo('id')"
+          />
         </el-form-item>
         <el-form-item label="名称">
-          <el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
+          <el-input
+            v-model="elementBaseInfo.name"
+            clearable
+            @change="updateBaseInfo('name')"
+          />
         </el-form-item>
       </div>
     </el-form>
@@ -31,7 +59,7 @@ export default {
     businessObject: Object,
     model: Object, // 流程模型的数据
   },
-  data() {
+  data () {
     return {
       elementBaseInfo: {},
       // 流程表单的下拉框的数据
@@ -41,14 +69,14 @@ export default {
         key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }],
         name: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
       },
-    };
+    }
   },
   watch: {
     businessObject: {
       immediate: false,
-      handler: function(val) {
+      handler: function (val) {
         if (val) {
-          this.$nextTick(() => this.resetBaseInfo());
+          this.$nextTick(() => this.resetBaseInfo())
         }
       }
     },
@@ -59,7 +87,7 @@ export default {
     //   }
     // }
   },
-  created() {
+  created () {
     // 针对上传的 bpmn 流程图时，需要延迟 1 秒的时间，保证 key 和 name 的更新
     setTimeout(() => {
       this.handleKeyUpdate(this.model.key)
@@ -67,53 +95,53 @@ export default {
     }, 1000)
   },
   methods: {
-    resetBaseInfo() {
-      this.bpmnElement = window?.bpmnInstances?.bpmnElement;
-      this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject));
+    resetBaseInfo () {
+      this.bpmnElement = window?.bpmnInstances?.bpmnElement
+      this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject))
     },
-    handleKeyUpdate(value) {
+    handleKeyUpdate (value) {
       // 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
       if (!value) {
-        return;
+        return
       }
       if (!value.match(/[a-zA-Z_][\-_.0-9a-zA-Z$]*/)) {
-        console.log('key 不满足 XML NCName 规则，所以不进行赋值');
-        return;
+        console.log('key 不满足 XML NCName 规则，所以不进行赋值')
+        return
       }
-      console.log('key 满足 XML NCName 规则，所以进行赋值');
+      console.log('key 满足 XML NCName 规则，所以进行赋值')
  
       // 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
-      this.elementBaseInfo['id'] = value;
-      this.updateBaseInfo('id');
+      this.elementBaseInfo['id'] = value
+      this.updateBaseInfo('id')
     },
-    handleNameUpdate(value) {
+    handleNameUpdate (value) {
       if (!value) {
         return
       }
-      this.elementBaseInfo['name'] = value;
-      this.updateBaseInfo('name');
+      this.elementBaseInfo['name'] = value
+      this.updateBaseInfo('name')
     },
-    handleDescriptionUpdate(value) {
+    handleDescriptionUpdate (value) {
       // TODO 芋艿：documentation 暂时无法修改，后续在看看
       // this.elementBaseInfo['documentation'] = value;
       // this.updateBaseInfo('documentation');
     },
-    updateBaseInfo(key) {
+    updateBaseInfo (key) {
       // 触发 elementBaseInfo 对应的字段
-      const attrObj = Object.create(null);
-      attrObj[key] = this.elementBaseInfo[key];
+      const attrObj = Object.create(null)
+      attrObj[key] = this.elementBaseInfo[key]
       if (key === "id") {
         window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
           id: this.elementBaseInfo[key],
           di: { id: `${this.elementBaseInfo[key]}_di` }
-        });
+        })
       } else {
-        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj);
+        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj)
       }
     }
   },
-  beforeDestroy() {
-    this.bpmnElement = null;
+  beforeDestroy () {
+    this.bpmnElement = null
   }
 };
 </script>