cnhis-design-vue 3.1.6-beta.1 → 3.1.6-beta.2

package/es/packages/bpmn-workflow/src/BpmnWorkflow.vue_vue_type_script_setup_true_lang.mjs

@@ -1 +1,252 @@
-import{defineComponent as e,ref as t,reactive as n,onMounted as o,openBlock as i,createElementBlock as r,createCommentVNode as s,createElementVNode as a}from"vue";import"bpmn-js/dist/assets/diagram-js.css";import"bpmn-js/dist/assets/bpmn-font/css/bpmn.css";import"bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";import"bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";import{attr as l}from"../../../node_modules/tiny-svg/dist/index.esm.mjs";import{useMessage as d}from"naive-ui";import p from"axios";import m from"moment";import c from"bpmn-js/lib/Viewer";import u from"./custom/customOtherModule/zoomScroll2.mjs";import b from"bpmn-js/lib/features/modeling";import v from"../../../node_modules/diagram-js/lib/navigation/movecanvas/index.mjs";import f from"./custom/customOtherModule/customViewerRenderer2.mjs";const y={class:"containers"};var g=e({name:"BpmnWorkflow",props:{flowType:{type:String,default:"workflow"},processId:String,instanceId:String,token:String,getBpmnXml:{type:Function},getInstanceHistory:{type:Function},getNodeApprovaler:{type:Function}},setup(e){const g=e;d();const h=t(null),w=n({nodeMenu:[],currentCanvasXml:null,eventType:["element.click","element.hover","element.out"]});p.create({withCredentials:!0,timeout:5e3,headers:{"Content-Type":"application/x-www-form-urlencoded",Authorization:"bearer "+g.token},baseURL:"/"}),o((()=>{console.log("生成bpmnModeler,展示画布"),x(g.processId,g.instanceId)}));const x=async(e,t)=>{"function"==typeof g.getBpmnXml&&(w.currentCanvasXml=await g.getBpmnXml(e),k(e,t))},k=async(e,t)=>{w.bpmnModeler&&w.bpmnModeler.destroy(),w.bpmnModeler=new c({container:h.value,additionalModules:[b,v,u,f,{bendpoints:["value",{}]}]});try{const{err:n}=await w.bpmnModeler.importXML(w.currentCanvasXml);if(n&&n.length)return console.error(n);w.bpmnModeler.get("canvas").zoom("fit-viewport","auto"),I(),j(e,t)}catch(e){console.error(`[Process Designer Warn]: ${(null==e?void 0:e.message)||e}`)}},I=()=>{let e=w.bpmnModeler.get("eventBus"),t=w.bpmnModeler.get("overlays"),n=w.bpmnModeler.get("selection");w.eventType.forEach((o=>{e.on(o,(e=>{let{element:i}=e;if(i.parent){if(!e||"bpmn:Process"===i.type)return!1;switch(o){case"element.hover":(async(e,t)=>{var n;let o="",{id:i,type:r}=e;if(!["label","bpmn:SequenceFlow"].includes(e.type)){const t=w.bpmnModeler.get("selection");t.select(null),t.select(e,!0)}if("bpmn:UserTask"==r){let e=w.nodeMenu.find((e=>e.key==i));(null==(n=null==e?void 0:e.auditor)?void 0:n.length)&&(o=`审核人：${e.auditor.map((e=>e.name)).join("、")}`,t.add(i,"tip",{position:{top:0,right:-12},html:`<div style="position: absolute;\n                    top: calc(50% - 5px);\n                    left: -10px;\n                    width: 0px;\n                    height: 0px;\n                    border:5px solid rgba(0, 0, 0, 0.75);\n                    border-top: 5px solid transparent;\n                    border-left: 5px solid transparent;\n                    border-bottom: 5px solid transparent;">\n                    </div>\n                    <div class="diagram-note"\n                    style="background-color: rgba(0, 0, 0, 0.75);\n                    color: #fff;\n                    font-size: 14px;\n                    text-align:left;\n                    width: 200px;\n                    max-height: 71px;\n                    padding: 5px;\n                    border-radius: 4px;\n                    word-break: break-word;\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                    display: -webkit-box;\n                    -webkit-box-orient: vertical;\n                    -webkit-line-clamp: 3;">\n                    ${o}\n                    </div>`}))}})(i,t);break;case"element.out":n.select(null),t.clear()}}}))}))},M=(e,t)=>{const n=w.bpmnModeler.get("modeling");e.renderPathColor=t,n.setColor(e,{stroke:t})},j=async(e,t)=>{if("function"!=typeof g.getInstanceHistory)return;const n=w.bpmnModeler.get("elementRegistry");let o=n.filter((e=>!["label","bpmn:Process","bpmn:SequenceFlow"].includes(e.type))),i=await g.getInstanceHistory(e,t),r={},s=[],a=[];var d,p,c;i.historyActivity.map((e=>{-1!=e.activityId.indexOf("#multiInstanceBody")&&(s.push(e.activityId.replace("#multiInstanceBody","")),a.push(e))})),(d=i.historyActivity,p="activityId",c={},d.reduce((function(e,t){return!c[t[p]]&&(c[t[p]]=e.push(t)),e}),[])).filter((e=>![...new Set(s)].includes(e.activityId)&&"StartEvent_1"!=e.activityId&&!e.activityId.startsWith("Event_"))).map((e=>{let t=e.activityId.replace("#multiInstanceBody",""),n=e,o=a.filter((t=>e.activityId==t.activityId));(null==o?void 0:o.length)&&(n=o.reduce(((e,t)=>m(e.endTime).isBefore(t.endTime)?t:e))),r[t]=n.activityState}));let u=[];await Promise.all(o.map((async t=>{var o;if(Object.keys(r).includes(t.id)){let i=n.getGraphics(t.id).childNodes[2];l(i,{rx:10,ry:10,strokeWidth:3,strokeDasharray:0});let s=n.get(t.id);4==r[t.id]&&M(s,"#5aa36a"),2==r[t.id]&&M(s,"#d14141");let a={};if("bpmn:UserTask"==t.type){if("function"!=typeof g.getNodeApprovaler)return;a=await g.getNodeApprovaler(e,t.id),u.push({key:t.id,value:null==(o=null==t?void 0:t.businessObject)?void 0:o.name,auditor:null==a?void 0:a.auditor})}}}))),w.nodeMenu=u};return(e,t)=>(i(),r("div",y,[s(" 流程画布部分 "),a("div",{class:"canvas",ref_key:"canva",ref:h},null,512)]))}});export{g as default};
+import { defineComponent, ref, reactive, onMounted, openBlock, createElementBlock, createCommentVNode, createElementVNode } from 'vue';
+import 'bpmn-js/dist/assets/diagram-js.css';
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
+import { attr } from '../../../node_modules/tiny-svg/dist/index.esm.mjs';
+import { useMessage } from 'naive-ui';
+import axios from 'axios';
+import moment from 'moment';
+import BpmnViewer from 'bpmn-js/lib/Viewer';
+import ZoomScroll from './custom/customOtherModule/zoomScroll2.mjs';
+import ModelingModule from 'bpmn-js/lib/features/modeling';
+import MoveCanvasModule from '../../../node_modules/diagram-js/lib/navigation/movecanvas/index.mjs';
+import customViewerRenderer from './custom/customOtherModule/customViewerRenderer2.mjs';
+
+const _hoisted_1 = { class: "containers" };
+var script = /* @__PURE__ */ defineComponent({
+  name: "BpmnWorkflow",
+  props: {
+    flowType: {
+      type: String,
+      default: "workflow"
+    },
+    processId: String,
+    instanceId: String,
+    token: String,
+    getBpmnXml: { type: Function },
+    getInstanceHistory: { type: Function },
+    getNodeApprovaler: { type: Function }
+  },
+  setup(__props) {
+    const props = __props;
+    useMessage();
+    const canva = ref(null);
+    const state = reactive({
+      nodeMenu: [],
+      currentCanvasXml: null,
+      eventType: ["element.click", "element.hover", "element.out"]
+    });
+    axios.create({
+      withCredentials: true,
+      timeout: 5e3,
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+        Authorization: "bearer " + props.token
+      },
+      baseURL: "/"
+    });
+    onMounted(() => {
+      console.log("\u751F\u6210bpmnModeler,\u5C55\u793A\u753B\u5E03");
+      initDetails(props.processId, props.instanceId);
+    });
+    const unique = (objArray, key) => {
+      var hash = {};
+      objArray = objArray.reduce(function(item, next) {
+        hash[next[key]] ? "" : hash[next[key]] = item.push(next);
+        return item;
+      }, []);
+      return objArray;
+    };
+    const initDetails = async (processId, instanceId) => {
+      if (typeof props.getBpmnXml !== "function") {
+        return;
+      }
+      state.currentCanvasXml = await props.getBpmnXml(processId);
+      previewTemp(processId, instanceId);
+    };
+    const previewTemp = async (processId, instanceId) => {
+      state.bpmnModeler && state.bpmnModeler.destroy();
+      state.bpmnModeler = new BpmnViewer({
+        container: canva.value,
+        additionalModules: [
+          ModelingModule,
+          MoveCanvasModule,
+          ZoomScroll,
+          customViewerRenderer,
+          { bendpoints: ["value", {}] }
+        ]
+      });
+      try {
+        const { err } = await state.bpmnModeler.importXML(state.currentCanvasXml);
+        if (err && err.length) {
+          return console.error(err);
+        }
+        const canvas = state.bpmnModeler.get("canvas");
+        canvas.zoom("fit-viewport", "auto");
+        addEventListener();
+        handleNodeMenuData(processId, instanceId);
+      } catch (e) {
+        console.error(`[Process Designer Warn]: ${(e == null ? void 0 : e.message) || e}`);
+      }
+    };
+    const handleNodeTip = async (element, overlays) => {
+      var _a;
+      let tipStr = "";
+      let { id, type } = element;
+      if (!["label", "bpmn:SequenceFlow"].includes(element.type)) {
+        const selections = state.bpmnModeler.get("selection");
+        selections.select(null);
+        selections.select(element, true);
+      }
+      if (type == "bpmn:UserTask") {
+        let obj = state.nodeMenu.find((v) => v.key == id);
+        if ((_a = obj == null ? void 0 : obj.auditor) == null ? void 0 : _a.length) {
+          tipStr = `\u5BA1\u6838\u4EBA\uFF1A${obj.auditor.map((v) => v.name).join("\u3001")}`;
+          overlays.add(id, "tip", {
+            position: {
+              top: 0,
+              right: -12
+            },
+            html: `<div style="position: absolute;
+                    top: calc(50% - 5px);
+                    left: -10px;
+                    width: 0px;
+                    height: 0px;
+                    border:5px solid rgba(0, 0, 0, 0.75);
+                    border-top: 5px solid transparent;
+                    border-left: 5px solid transparent;
+                    border-bottom: 5px solid transparent;">
+                    </div>
+                    <div class="diagram-note"
+                    style="background-color: rgba(0, 0, 0, 0.75);
+                    color: #fff;
+                    font-size: 14px;
+                    text-align:left;
+                    width: 200px;
+                    max-height: 71px;
+                    padding: 5px;
+                    border-radius: 4px;
+                    word-break: break-word;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-box-orient: vertical;
+                    -webkit-line-clamp: 3;">
+                    ${tipStr}
+                    </div>`
+          });
+        }
+      }
+    };
+    const addEventListener = () => {
+      let eventBus = state.bpmnModeler.get("eventBus");
+      let overlays = state.bpmnModeler.get("overlays");
+      let selections = state.bpmnModeler.get("selection");
+      state.eventType.forEach((item) => {
+        eventBus.on(item, (eventParam) => {
+          let { element } = eventParam;
+          if (!element.parent)
+            return;
+          if (!eventParam || element.type === "bpmn:Process") {
+            return false;
+          } else {
+            switch (item) {
+              case "element.hover":
+                handleNodeTip(element, overlays);
+                break;
+              case "element.out":
+                selections.select(null);
+                overlays.clear();
+                break;
+            }
+          }
+        });
+      });
+    };
+    const setNodeColor = (element, color) => {
+      const modeling = state.bpmnModeler.get("modeling");
+      element.renderPathColor = color;
+      modeling.setColor(element, {
+        stroke: color
+      });
+    };
+    const handleNodeMenuData = async (processId, instanceId) => {
+      if (typeof props.getInstanceHistory !== "function") {
+        return;
+      }
+      const elementRegistry = state.bpmnModeler.get("elementRegistry");
+      let nodeArray = elementRegistry.filter((element) => {
+        return !["label", "bpmn:Process", "bpmn:SequenceFlow"].includes(element.type);
+      });
+      let nodeStateList = await props.getInstanceHistory(processId, instanceId);
+      let nodeStateObj = {};
+      let multiInstanceIds = [];
+      let multiInstanceNodes = [];
+      nodeStateList.historyActivity.map((v) => {
+        if (v.activityId.indexOf("#multiInstanceBody") != -1) {
+          multiInstanceIds.push(v.activityId.replace("#multiInstanceBody", ""));
+          multiInstanceNodes.push(v);
+        }
+      });
+      let nodeHistoryList = unique(nodeStateList.historyActivity, "activityId");
+      let nodeHistoryIdList = nodeHistoryList.filter((v) => ![...new Set(multiInstanceIds)].includes(v.activityId) && v.activityId != "StartEvent_1" && !v.activityId.startsWith("Event_"));
+      nodeHistoryIdList.map((v) => {
+        let activityId = v.activityId.replace("#multiInstanceBody", "");
+        let node = v;
+        let multiDataList = multiInstanceNodes.filter((m) => v.activityId == m.activityId);
+        if (multiDataList == null ? void 0 : multiDataList.length) {
+          node = multiDataList.reduce((pre, item) => {
+            return moment(pre.endTime).isBefore(item.endTime) ? item : pre;
+          });
+        }
+        nodeStateObj[activityId] = node.activityState;
+      });
+      let nodeMenu = [];
+      await Promise.all(nodeArray.map(async (v) => {
+        var _a;
+        if (Object.keys(nodeStateObj).includes(v.id)) {
+          let rect = elementRegistry.getGraphics(v.id).childNodes[2];
+          attr(rect, {
+            rx: 10,
+            ry: 10,
+            strokeWidth: 3,
+            strokeDasharray: 0
+          });
+          let shape = elementRegistry.get(v.id);
+          if (nodeStateObj[v.id] == 4) {
+            setNodeColor(shape, "#5aa36a");
+          }
+          if (nodeStateObj[v.id] == 2) {
+            setNodeColor(shape, "#d14141");
+          }
+          let obj = {};
+          if (v.type == "bpmn:UserTask") {
+            if (typeof props.getNodeApprovaler !== "function") {
+              return;
+            }
+            obj = await props.getNodeApprovaler(processId, v.id);
+            nodeMenu.push({
+              key: v.id,
+              value: (_a = v == null ? void 0 : v.businessObject) == null ? void 0 : _a.name,
+              auditor: obj == null ? void 0 : obj.auditor
+            });
+          }
+        }
+      }));
+      state.nodeMenu = nodeMenu;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createCommentVNode(" \u6D41\u7A0B\u753B\u5E03\u90E8\u5206 "),
+        createElementVNode("div", {
+          class: "canvas",
+          ref_key: "canva",
+          ref: canva
+        }, null, 512)
+      ]);
+    };
+  }
+});
+
+export { script as default };

package/es/packages/bpmn-workflow/src/BpmnWorkflow2.mjs

@@ -1 +1,4 @@
-import e from"./BpmnWorkflow.vue_vue_type_script_setup_true_lang.mjs";export{default}from"./BpmnWorkflow.vue_vue_type_script_setup_true_lang.mjs";e.__file="packages/bpmn-workflow/src/BpmnWorkflow.vue";
+import script from './BpmnWorkflow.vue_vue_type_script_setup_true_lang.mjs';
+export { default } from './BpmnWorkflow.vue_vue_type_script_setup_true_lang.mjs';
+
+script.__file = "packages/bpmn-workflow/src/BpmnWorkflow.vue";

package/es/packages/bpmn-workflow/src/custom/customModeler/customBpmn/BpmnRenderer.mjs

@@ -1 +1 @@
-export{default}from"./BpmnRenderer2.mjs";
+export { default } from './BpmnRenderer2.mjs';