id

package.json

@@ -45,9 +45,8 @@
     "@vitejs/plugin-vue-jsx": "^3.0.0",
     "@vue/babel-helper-vue-transform-on": "^1.0.2",
     "@vue/compiler-sfc": "3.2.45",
-    "bpmn-js": "7.4.0",
+    "bpmn-js": "^7.5.0",
-    "bpmn-js-properties-panel": "0.37.2",
+    "camunda-bpmn-moddle": "^4.4.1",
-    "camunda-bpmn-moddle": "4.4.1",
     "sass": "1.56.1",
     "unplugin-auto-import": "0.11.4",
     "vite": "3.2.3",

src/components/Editor/index.vue

@@ -104,7 +104,6 @@ export default {
           },
           customInsert(res, insertFn) {
             // res 即服务端的返回结果
-            // console.log(res);
             // 从 res 中找到 url alt href ，然后插图图片
             insertFn(res.url, null, null);
           },

src/plugins/package/designer/ProcessDesigner.vue

@@ -416,7 +416,6 @@ const moddleExtensions = computed(() => {
   if (prefix.value === "camunda") {
     Extensions.camunda = camundaModdleDescriptor;
   }
-
   return Extensions;
 });
 
@@ -440,6 +439,7 @@ function onSave() {
     });
   });
 }
+window.BpmnModeler = BpmnModeler;
 function initBpmnModeler() {
   if (bpmnModeler) return;
   bpmnModeler = new BpmnModeler({

src/plugins/package/penal/PropertiesPanel.vue

@@ -209,14 +209,14 @@ function initFormOnChanged(element) {
       );
   }
   if (!activatedElement) return;
-  console.log(`
+  // console.log(`
-              ----------
+  //             ----------
-      select element changed:
+  //     select element changed:
-                id:  ${activatedElement.id}
+  //               id:  ${activatedElement.id}
-              type:  ${activatedElement.businessObject.$type}
+  //             type:  ${activatedElement.businessObject.$type}
-              ----------
+  //             ----------
-              `);
+  //             `);
-  console.log("businessObject: ", activatedElement.businessObject);
+  // console.log("businessObject: ", activatedElement.businessObject);
   window.bpmnInstances.bpmnElement = activatedElement;
   bpmnElement = activatedElement;
   elementId.value = activatedElement.id;

src/plugins/package/penal/listeners/UserTaskListeners.vue

@@ -22,7 +22,11 @@
       />
       <el-table-column label="操作" width="90px">
         <template #default="{ row, $index }">
-          <el-button size="small" link @click="openListenerForm(row, $index)"
+          <el-button
+            size="small"
+            type="primary"
+            link
+            @click="openListenerForm(row, $index)"
             >编辑</el-button
           >
           <el-divider direction="vertical" />
@@ -244,8 +248,9 @@
           :formatter="(row) => row.string || row.expression"
         />
         <el-table-column label="操作" width="100px">
-          <template slot-scope="{ row, $index }">
+          <template #default="{ row, $index }">
             <el-button
+              type="primary"
               size="small"
               link
               @click="openListenerFieldForm(row, $index)"
@@ -255,6 +260,7 @@
             <el-button
               size="small"
               link
+              type="danger"
               style="color: #ff4d4f"
               @click="removeListenerField(row, $index)"
               >移除</el-button
@@ -395,6 +401,7 @@ function resetListenersList() {
     bpmnElement.businessObject?.extensionElements?.values?.filter(
       (ex) => ex.$type === `${prefix}:TaskListener`
     ) ?? [];
+  // debugger;
   elementListenersList.value = bpmnElementListeners.map((listener) =>
     initListenerType(listener)
   );
@@ -443,6 +450,7 @@ async function saveListenerConfig() {
   let validateStatus = await listenerFormRef.value.validate();
   if (!validateStatus) return; // 验证不通过直接返回
   const listenerObject = createListenerObject(listenerForm.value, true, prefix);
+
   if (editingListenerIndex.value === -1) {
     bpmnElementListeners.push(listenerObject);
     elementListenersList.value.push(listenerForm.value);
@@ -463,6 +471,7 @@ async function saveListenerConfig() {
     bpmnElement,
     otherExtensionList.concat(bpmnElementListeners)
   );
+
   // 4. 隐藏侧边栏
   listenerFormModelVisible.value = false;
   listenerForm.value = {};

src/plugins/package/penal/listeners/tst.json

@@ -0,0 +1,5 @@
+{
+  "msg": "操作成功",
+  "code": 200,
+  "data": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<definitions xmlns=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:flowable=\"http://flowable.org/bpmn\" xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\" xmlns:omgdc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:omgdi=\"http://www.omg.org/spec/DD/20100524/DI\" xmlns:bpmn2=\"http://www.omg.org/spec/BPMN/20100524/MODEL\" xmlns:dc=\"http://www.omg.org/spec/DD/20100524/DC\" xmlns:di=\"http://www.omg.org/spec/DD/20100524/DI\" typeLanguage=\"http://www.w3.org/2001/XMLSchema\" expressionLanguage=\"http://www.w3.org/1999/XPath\" targetNamespace=\"http://flowable.org/bpmn\" id=\"diagram_Process_1671673403370\" xsi:schemaLocation=\"http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd\">\n  <process id=\"Process_1671673403370\" name=\"请假\" isExecutable=\"true\">\n    <startEvent id=\"Event_0o5vpsf\" flowable:formKey=\"key_1\"></startEvent>\n    <userTask id=\"Activity_1qoq75d\" flowable:candidateGroups=\"DEPT100,DEPT103,DEPT209\" xmlns:flowable=\"http://flowable.org/bpmn\" flowable:dataType=\"DEPTS\" flowable:text=\"若依科技,研发部门,高新分公司\">\n      <extensionElements>\n        <flowable:taskListener event=\"complete\" class=\"print('1233);\"></flowable:taskListener>\n        <flowable:taskListener event=\"create\" expression=\"阿萨大大\"></flowable:taskListener>\n        <flowable:taskListener event=\"delete\" delegateExpression=\"rr24344\"></flowable:taskListener>\n        <flowable:taskListener event=\"update\" delegateExpression=\"tertert\"></flowable:taskListener>\n        <flowable:taskListener event=\"delete\" delegateExpression=\"34er13232\"></flowable:taskListener>\n        <flowable:taskListener event=\"update\" expression=\"4234\"></flowable:taskListener>\n      </extensionElements>\n    </userTask>\n    <sequenceFlow id=\"Flow_01oskyz\" sourceRef=\"Event_0o5vpsf\" targetRef=\"Activity_1qoq75d\"></sequenceFlow>\n    <userTask id=\"Activity_0iuhaqx\"></userTask>\n    <sequenceFlow id=\"Flow_0f843wd\" sourceRef=\"Activity_1qoq75d\" targetRef=\"Activity_0iuhaqx\"></sequenceFlow>\n    <intermediateThrowEvent id=\"Event_10fq4h9\"></intermediateThrowEvent>\n    <sequenceFlow id=\"Flow_0ditwq0\" sourceRef=\"Activity_0iuhaqx\" targetRef=\"Event_10fq4h9\"></sequenceFlow>\n  </process>\n  <bpmndi:BPMNDiagram id=\"BPMNDiagram_Process_1671673403370\">\n    <bpmndi:BPMNPlane bpmnElement=\"Process_1671673403370\" id=\"BPMNPlane_Process_1671673403370\">\n      <bpmndi:BPMNShape bpmnElement=\"Event_0o5vpsf\" id=\"BPMNShape_Event_0o5vpsf\">\n        <omgdc:Bounds height=\"36.0\" width=\"36.0\" x=\"292.0\" y=\"152.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"Activity_1qoq75d\" id=\"BPMNShape_Activity_1qoq75d\">\n        <omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"380.0\" y=\"130.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"Activity_0iuhaqx\" id=\"BPMNShape_Activity_0iuhaqx\">\n        <omgdc:Bounds height=\"80.0\" width=\"100.0\" x=\"540.0\" y=\"130.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement=\"Event_10fq4h9\" id=\"BPMNShape_Event_10fq4h9\">\n        <omgdc:Bounds height=\"36.0\" width=\"36.0\" x=\"702.0\" y=\"152.0\"></omgdc:Bounds>\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNEdge bpmnElement=\"Flow_0ditwq0\" id=\"BPMNEdge_Flow_0ditwq0\">\n        <omgdi:waypoint x=\"640.0\" y=\"170.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"702.0\" y=\"170.0\"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement=\"Flow_0f843wd\" id=\"BPMNEdge_Flow_0f843wd\">\n        <omgdi:waypoint x=\"480.0\" y=\"170.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"540.0\" y=\"170.0\"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement=\"Flow_01oskyz\" id=\"BPMNEdge_Flow_01oskyz\">\n        <omgdi:waypoint x=\"328.0\" y=\"170.0\"></omgdi:waypoint>\n        <omgdi:waypoint x=\"380.0\" y=\"170.0\"></omgdi:waypoint>\n      </bpmndi:BPMNEdge>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</definitions>"
+}

src/plugins/package/penal/task/task-components/UserTask.vue

@@ -47,20 +47,28 @@
         </el-select>
       </div>
       <div v-if="dataType === 'DEPTS'">
-        <tree-select
+        <!-- :width="320"
-          :width="320"
         :height="400"
         size="small"
-          :data="deptTreeData"
         :defaultProps="deptProps"
         multiple
         clearable
-          checkStrictly
         nodeKey="id"
         :checkedKeys="deptIds"
-          @checked-change="checkedDeptChange"
+        checkStrictly -->
-        >
+        <!-- <tree-select :options="deptTreeData" @update:value="checkedDeptChange">
-        </tree-select>
+        </tree-select> -->
+        <el-cascader
+          :options="deptTreeData"
+          :modelValue="deptCascaderData"
+          clearable
+          @change="checkedDeptChange"
+          :props="{
+            checkStrictly: true,
+            value: 'id',
+            multiple: true,
+          }"
+        ></el-cascader>
       </div>
     </el-row>
     <el-row>
@@ -111,7 +119,7 @@
                 placeholder="请输入部门名称"
                 clearable
                 size="small"
-                prefix-icon="el-icon-search"
+                prefix-icon="search"
                 style="margin-bottom: 20px"
               />
               <el-tree
@@ -140,8 +148,8 @@
           </el-table>
           <pagination
             :total="userTotal"
-            :page.sync="queryParams.pageNum"
+            v-model:page="queryParams.pageNum"
-            :limit.sync="queryParams.pageSize"
+            v-model:limit="queryParams.pageSize"
             @pagination="getUserList"
           />
         </el-col>
@@ -163,6 +171,7 @@ import { addDateRange } from "@/utils/ruoyi";
 import TreeSelect from "@/components/TreeSelect";
 import { ref, reactive, watch } from "vue";
 import { ElMessage } from "element-plus";
+const testResult = ref([]);
 const userTaskForm = {
   dataType: "",
   assignee: "",
@@ -191,7 +200,7 @@ const deptIds = ref([]);
 const showMultiFlog = ref(false);
 const isSequential = ref(false);
 const multiLoopType = ref("Null");
-
+const deptCascaderData = ref([]); // 部门级联 modelValue
 const data = reactive({
   selectedUser: {
     ids: [],
@@ -255,6 +264,9 @@ function resetTaskForm() {
       let deptIdData = bpmnElementObj["candidateGroups"] || [];
       if (deptIdData && deptIdData.length > 0) {
         deptIds.value = deptIdData.split(",");
+        deptCascaderData.value = deptIds.value.map((id) => [
+          ...getParentId(deptTreeData.value, id).reverse(),
+        ]);
       }
     });
     showMultiFlog.value = true;
@@ -405,14 +417,64 @@ function changeSelectRoles(val) {
   userTaskForm.text = textArr?.map((k) => k.roleName).join() || null;
   updateElementTask();
 }
-function checkedDeptChange(checkedIds, checkedData) {
+// function checkedDeptChange(checkedIds, checkedData) {
+//   userTaskForm.dataType = "DEPTS";
+//   if (checkedIds && checkedIds.length > 0) {
+//     deptIds.value = checkedIds;
+//   }
+//   if (checkedData && checkedData.length > 0) {
+//     userTaskForm.candidateGroups = checkedData.map((k) => k.id).join() || null;
+//     userTaskForm.text = checkedData.map((k) => k.label).join() || null;
+//     updateElementTask();
+//   }
+// }
+
+function findInDeptTree(id) {
+  let hasFound = false, // 表示是否有找到id值
+    result = null;
+  var fn = function (data) {
+    if (Array.isArray(data) && !hasFound) {
+      // 判断是否是数组并且没有的情况下，
+      data.forEach((item) => {
+        if (item.id === id) {
+          // 数据循环每个子项，并且判断子项下边是否有id值
+          result = item; // 返回的结果等于每一项
+          hasFound = true; // 并且找到id值
+        } else if (item.children) {
+          fn(item.children); // 递归调用下边的子项
+        }
+      });
+    }
+  };
+  fn(deptTreeData.value); // 调用一下
+  return result;
+}
+// 获取所有父级
+function getParentId(list, id) {
+  for (let i in list) {
+    if (list[i].id == id) {
+      return [list[i].id];
+    }
+    if (list[i].children) {
+      let node = getParentId(list[i].children, id);
+      if (node !== undefined) {
+        return node.concat(list[i].id);
+      }
+    }
+  }
+}
+function checkedDeptChange(checkedIds) {
+  const ids = checkedIds.map((el) => el[el.length - 1]);
+  const checkedData = ids.map((el) => findInDeptTree(el));
+
   userTaskForm.dataType = "DEPTS";
-  if (checkedIds && checkedIds.length > 0) {
+  if (ids && ids.length > 0) {
-    deptIds.value = checkedIds;
+    deptIds.value = ids;
   }
   if (checkedData && checkedData.length > 0) {
     userTaskForm.candidateGroups = checkedData.map((k) => k.id).join() || null;
     userTaskForm.text = checkedData.map((k) => k.label).join() || null;
+
     updateElementTask();
   }
 }

src/plugins/package/utils.js

@@ -60,10 +60,7 @@ export function createScriptObject(options, prefix) {
     scriptType === "inlineScript"
       ? { scriptFormat, value }
       : { scriptFormat, resource };
-  return window.bpmnInstances.moddle.create(
+  return window.bpmnInstances.moddle.create(`${prefix}:Script`, scriptConfig);
-    `${prefix}:Script`,
-    scriptConfig
-  );
 }
 
 // 更新元素扩展属性

src/store/modules/bpmn.js

@@ -1,17 +0,0 @@
-// import { defineStore } from "pinia";
-
-const useBpmnStore = defineStore("bpmn", {
-  state: () => ({
-    bpmnInstances: {},
-    count: 1,
-  }),
-  actions: {
-    setBpmnInstances(data) {
-      console.log(data);
-      this.bpmnInstances = data;
-      //   this.bpmnInstances.name = "423";
-    },
-  },
-});
-
-export default useBpmnStore;