Merge remote-tracking branch 'origin/master'

src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue

@@ -1,60 +1,84 @@
 <template>
-  <div class="process-panel__container" :style="{ width: `${width}px` }">
-    <el-collapse v-model="activeTab">
-      <el-collapse-item name="base">
-        <!-- class="panel-tab__title" -->
-        <template #title>
-          <Icon icon="ep:info-filled" />
-          常规</template
-        >
-        <ElementBaseInfo
-          :id-edit-disabled="idEditDisabled"
-          :business-object="elementBusinessObject"
-          :type="elementType"
-          :model="model"
-        />
-      </el-collapse-item>
-      <el-collapse-item name="condition" v-if="elementType === 'Process'" key="message">
-        <template #title><Icon icon="ep:comment" />消息与信号</template>
-        <signal-and-massage />
-      </el-collapse-item>
-      <el-collapse-item name="condition" v-if="conditionFormVisible" key="condition">
-        <template #title><Icon icon="ep:promotion" />流转条件</template>
-        <flow-condition :business-object="elementBusinessObject" :type="elementType" />
-      </el-collapse-item>
-      <el-collapse-item name="condition" v-if="formVisible" key="form">
-        <template #title><Icon icon="ep:list" />表单</template>
-        <element-form :id="elementId" :type="elementType" />
-      </el-collapse-item>
-      <el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
-        <template #title><Icon icon="ep:checked" />任务（审批人）</template>
-        <element-task :id="elementId" :type="elementType" />
-      </el-collapse-item>
-      <el-collapse-item
-        name="multiInstance"
-        v-if="elementType.indexOf('Task') !== -1"
-        key="multiInstance"
-      >
-        <template #title><Icon icon="ep:help-filled" />多实例（会签配置）</template>
-        <element-multi-instance :business-object="elementBusinessObject" :type="elementType" />
-      </el-collapse-item>
-      <el-collapse-item name="listeners" key="listeners">
-        <template #title><Icon icon="ep:bell-filled" />执行监听器</template>
-        <element-listeners :id="elementId" :type="elementType" />
-      </el-collapse-item>
-      <el-collapse-item name="taskListeners" v-if="elementType === 'UserTask'" key="taskListeners">
-        <template #title><Icon icon="ep:bell-filled" />任务监听器</template>
-        <user-task-listeners :id="elementId" :type="elementType" />
-      </el-collapse-item>
-      <el-collapse-item name="extensions" key="extensions">
-        <template #title><Icon icon="ep:circle-plus-filled" />扩展属性</template>
-        <element-properties :id="elementId" :type="elementType" />
-      </el-collapse-item>
-      <el-collapse-item name="other" key="other">
-        <template #title><Icon icon="ep:promotion" />其他</template>
-        <element-other-config :id="elementId" />
-      </el-collapse-item>
-    </el-collapse>
+  <div class="process-panel__container" :style="{ width: `${width}px` }"  v-show="elementType != 'Process'">
+      <el-tabs type="border-card" @tab-click="handleTabClick" v-model="activeName">
+        <!--  -----------------基本---------------------- -->
+        <el-tab-pane :label="('基本')" name="tab_base">
+          <div v-show="tabRefresh.tab_base">
+            <ElementBaseInfo
+              :id-edit-disabled="idEditDisabled"
+              :business-object="elementBusinessObject"
+              :type="elementType"
+              :model="model"
+            />
+          </div>
+        </el-tab-pane>
+        <!--  ------------------审批--------------------- -->
+        <el-tab-pane :label="('审批')" name="tab_approval">
+          <div v-if="tabRefresh.tab_approval">
+            <el-collapse  v-model="tab_active">
+              <el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
+                <template #title><Icon icon="ep:checked" />任务（审批人） </template>
+                <element-task :id="elementId" :type="elementType" />
+              </el-collapse-item>
+            </el-collapse>
+            <el-collapse  v-model="tab_active">
+              <el-collapse-item name="multiInstance" v-if="elementType.indexOf('Task') !== -1" key="multiInstance">
+                <template #title><Icon icon="ep:help-filled" />多实例（会签配置）</template>
+                <element-multi-instance :business-object="elementBusinessObject" :type="elementType" />
+              </el-collapse-item>
+            </el-collapse>
+          </div>
+        </el-tab-pane>
+        <!--  ------------------流转--------------------- -->
+        <el-tab-pane :label="('流转')" name="tab_flow">
+          <div v-if="tabRefresh.tab_flow">
+            <el-collapse  v-model="tab_active">
+              <el-collapse-item name="condition" v-if="elementType === 'Process'" key="message">
+                <template #title><Icon icon="ep:comment" />消息与信号</template>
+                <signal-and-massage />
+              </el-collapse-item>
+              <el-collapse-item name="condition" v-if="conditionFormVisible" key="condition">
+                <template #title><Icon icon="ep:promotion" />流转条件</template>
+                <flow-condition :business-object="elementBusinessObject" :type="elementType" />
+              </el-collapse-item>
+              <el-collapse-item name="listeners" key="listeners">
+                <template #title><Icon icon="ep:bell-filled" />执行监听器</template>
+                <element-listeners :id="elementId" :type="elementType" />
+              </el-collapse-item>
+              <el-collapse-item name="taskListeners" v-if="elementType === 'UserTask'" key="taskListeners">
+                <template #title><Icon icon="ep:bell-filled" />任务监听器</template>
+                <user-task-listeners :id="elementId" :type="elementType" />
+              </el-collapse-item>
+            </el-collapse>
+          </div>
+        </el-tab-pane>
+        <!--  ------------------表单--------------------- -->
+        <el-tab-pane :label="('表单')" name="tab_form">
+          <div v-if="tabRefresh.tab_form">
+            <el-collapse v-model="tab_active">
+              <el-collapse-item name="condition" v-if="formVisible" key="form">
+                <template #title><Icon icon="ep:list" />表单</template>
+                <element-form :id="elementId" :type="elementType" />
+              </el-collapse-item>
+            </el-collapse>
+          </div>
+        </el-tab-pane>
+        <!--  ------------------扩展--------------------- -->
+        <el-tab-pane :label="('扩展')" name="tab_extend">
+          <div v-if="tabRefresh.tab_extend">
+            <el-collapse v-model="tab_active">
+              <el-collapse-item name="extensions" key="extensions">
+                <template #title><Icon icon="ep:circle-plus-filled" />扩展属性</template>
+                <element-properties :id="elementId" :type="elementType" />
+              </el-collapse-item>
+              <el-collapse-item name="other" key="other">
+                <template #title><Icon icon="ep:promotion" />其他</template>
+                <element-other-config :id="elementId" />
+              </el-collapse-item>
+            </el-collapse>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
   </div>
 </template>
 <script lang="ts" setup>
@@ -68,7 +92,48 @@ import ElementListeners from './listeners/ElementListeners.vue'
 import ElementProperties from './properties/ElementProperties.vue'
 // import ElementForm from './form/ElementForm.vue'
 import UserTaskListeners from './listeners/UserTaskListeners.vue'
-
+// 切换tab自动刷新实现 begin+++++++++++++
+export type TabRefresh = {
+  tab_base: boolean
+  tab_approval: boolean
+  tab_flow: boolean
+  tab_form: boolean
+  tab_extend:boolean
+}
+const tab_active = ref(['task', 'multiInstance','message','condition','listeners','taskListeners','form','extensions','other'])
+const activeName = ref('tab_base')
+const tabRefresh = reactive<TabRefresh>({
+  tab_base: true,
+  tab_approval: false,
+  tab_flow: false,
+  tab_form:false,
+  tab_extend: false
+})
+const handleTabClick = async (tab) => {
+  activeName.value = tab.props.name
+  switch (activeName.value) {
+    case 'tab_base':
+      await switchTab('tab_base')
+      break
+    case 'tab_approval':
+      await switchTab('tab_approval')
+      break
+    case 'tab_flow':
+      await switchTab('tab_flow')
+      break
+    case 'tab_form':
+      await switchTab('tab_form')
+      break
+    case 'tab_extend':
+      await switchTab('tab_extend')
+      break
+  }}
+const switchTab = async (tab) => {
+  Object.keys(tabRefresh).forEach((k) => {
+    tabRefresh[k as keyof TabRefresh] = tab == k
+  })
+}
+// 切换tab自动刷新实现end--------------------
 defineOptions({ name: 'MyPropertiesPanel' })
 
 /**

src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue

@@ -21,10 +21,10 @@
         </el-form-item>
       </div>
       <div v-else>
-        <el-form-item label="ID">
+        <el-form-item label="节点ID">
           <el-input v-model="elementBaseInfo.id" clearable @change="updateBaseInfo('id')" />
         </el-form-item>
-        <el-form-item label="名称">
+        <el-form-item label="节点名称">
           <el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
         </el-form-item>
       </div>

src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfobk.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form label-width="90px" :model="needProps" :rules="rules">
+      <div v-if="needProps.type == 'bpmn:Process'">
+        <!-- 如果是 Process 信息的时候，使用自定义表单 -->
+        <el-form-item label="流程标识" prop="id">
+          <el-input
+            v-model="needProps.id"
+            placeholder="请输入流标标识"
+            :disabled="needProps.id !== undefined && needProps.id.length > 0"
+            @change="handleKeyUpdate"
+          />
+        </el-form-item>
+        <el-form-item label="流程名称" prop="name">
+          <el-input
+            v-model="needProps.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-form-item>
+        <el-form-item label="名称">
+          <el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
+        </el-form-item>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script lang="ts" setup>
+defineOptions({ name: 'ElementBaseInfo' })
+
+const props = defineProps({
+  businessObject: {
+    type: Object,
+    default: () => {}
+  },
+  model: {
+    type: Object,
+    default: () => {}
+  }
+})
+const needProps = ref<any>({})
+const bpmnElement = ref()
+const elementBaseInfo = ref<any>({})
+// 流程表单的下拉框的数据
+// const forms = ref([])
+// 流程模型的校验
+const rules = reactive({
+  id: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }]
+})
+
+const bpmnInstances = () => (window as any)?.bpmnInstances
+const resetBaseInfo = () => {
+  console.log(window, 'window')
+  console.log(bpmnElement.value, 'bpmnElement')
+
+  bpmnElement.value = bpmnInstances()?.bpmnElement
+  // 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, 'elementBaseInfo22222222222')
+}
+const handleKeyUpdate = (value) => {
+  // 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
+  if (!value) {
+    return
+  }
+  if (!value.match(/[a-zA-Z_][\-_.0-9a-zA-Z$]*/)) {
+    console.log('key 不满足 XML NCName 规则，所以不进行赋值')
+    return
+  }
+  console.log('key 满足 XML NCName 规则，所以进行赋值')
+
+  // 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
+  elementBaseInfo.value['id'] = value
+
+  setTimeout(() => {
+    updateBaseInfo('id')
+  }, 100)
+}
+const handleNameUpdate = (value) => {
+  console.log(elementBaseInfo, 'elementBaseInfo')
+  if (!value) {
+    return
+  }
+  elementBaseInfo.value['name'] = value
+
+  setTimeout(() => {
+    updateBaseInfo('name')
+  }, 100)
+}
+// const handleDescriptionUpdate=(value)=> {
+// TODO 芋艿：documentation 暂时无法修改，后续在看看
+// this.elementBaseInfo['documentation'] = value;
+// this.updateBaseInfo('documentation');
+// }
+const updateBaseInfo = (key) => {
+  console.log(key, 'key')
+  // 触发 elementBaseInfo 对应的字段
+  const attrObj = Object.create(null)
+  // console.log(attrObj, 'attrObj')
+  attrObj[key] = elementBaseInfo.value[key]
+  // console.log(attrObj, 'attrObj111')
+  // const attrObj = {
+  //   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')
+    console.log(window, 'window')
+    console.log(bpmnElement.value, 'bpmnElement')
+    console.log(toRaw(bpmnElement.value), 'bpmnElement')
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      id: elementBaseInfo.value[key],
+      di: { id: `${elementBaseInfo.value[key]}_di` }
+    })
+  } else {
+    console.log(attrObj, 'attrObj')
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), attrObj)
+  }
+}
+
+watch(
+  () => props.businessObject,
+  (val) => {
+    // console.log(val, 'val11111111111111111111')
+    if (val) {
+      // nextTick(() => {
+      resetBaseInfo()
+      // })
+    }
+  }
+)
+
+watch(
+  () => props.model?.key,
+  (val) => {
+    // 针对上传的 bpmn 流程图时，保证 key 和 name 的更新
+    if (val) {
+      handleKeyUpdate(props.model.key)
+      handleNameUpdate(props.model.name)
+    }
+  }
+)
+
+// watch(
+//   () => ({ ...props }),
+//   (oldVal, newVal) => {
+//     console.log(oldVal, 'oldVal')
+//     console.log(newVal, 'newVal')
+//     if (newVal) {
+//       needProps.value = newVal
+//     }
+//   },
+//   {
+//     immediate: true
+//   }
+// )
+// 'model.key': {
+//   immediate: false,
+//   handler: function (val) {
+//     this.handleKeyUpdate(val)
+//   }
+// }
+onBeforeUnmount(() => {
+  bpmnElement.value = null
+})
+</script>