oa表单列表及流程样式模拟渲染

zkqy-ui/babel.config.js

@@ -9,5 +9,8 @@ module.exports = {
       // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
       'plugins': ['dynamic-import-node']
     }
-  }
+  },
+  plugins: [
+    ["@babel/plugin-proposal-optional-chaining"]  //解析 可选链式语法
+  ]
 }

zkqy-ui/src/components/customBpmn/index.js

@@ -0,0 +1,13 @@
+import inherits from "inherits";
+import Viewer from "bpmn-js/lib/Viewer";
+import ZoomScrollModule from "diagram-js/lib/navigation/zoomscroll";
+import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas";
+function CustomViewer(options) {
+  Viewer.call(this, options);
+}
+inherits(CustomViewer, Viewer);
+CustomViewer.prototype._modules = [].concat(Viewer.prototype._modules, [
+  ZoomScrollModule,
+  MoveCanvasModule,
+]);
+export { CustomViewer };

zkqy-ui/src/views/bpmprocess/components/preview.vue

@@ -28,6 +28,7 @@ export default {
   created() {},
   methods: {
     async getImg(xmlUrl) {
+      console.log(xmlUrl);
       this.bpmnViewer && this.bpmnViewer.destroy();
       // this.$refs.canvas.innerHTML = "";
       this.scale = 1; // 放大缩小比例

zkqy-ui/src/views/bussiness/detail/FlowChart.vue

@@ -0,0 +1,316 @@
+<template>
+  <div class="containers main-box">
+    <el-button
+      type="success"
+      size="small"
+      icon="el-icon-zoom-in"
+      @click="zoomViewport(true)"
+      >放大</el-button
+    >
+    <el-button
+      type="warning"
+      size="small"
+      icon="el-icon-zoom-out"
+      @click="zoomViewport(false)"
+      >缩小</el-button
+    >
+    <el-button type="info" size="small" icon="el-icon-rank" @click="fitViewport"
+      >适中</el-button
+    >
+    <div class="canvas" ref="flowCanvas"></div>
+  </div>
+</template>
+<script>
+import BpmnViewer from "bpmn-js/lib/Viewer";
+import MoveCanvasModule from "diagram-js/lib/navigation/movecanvas";
+// import { CustomViewer as BpmnViewer } from "@/components/customBpmn/index";
+
+// import flowData from "./flowData";
+export default {
+  name: "FlowChart",
+  props: {
+    flowData: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      bpmnViewer: null,
+    };
+  },
+  watch: {
+    // myFlowData: {
+    //   handler(newVal) {
+    //     if (Object.keys(newVal).length > 0) {
+    //       // 生成实例
+    //       console.log(this.$refs.flowCanvas);
+    //       this.bpmnViewer && this.bpmnViewer.destroy();
+    //       this.bpmnViewer = new BpmnViewer({
+    //         container: this.$refs.flowCanvas,
+    //         height: "calc(100vh - 200px)",
+    //         additionalModules: [MoveCanvasModule],
+    //       });
+    //       console.log(this.bpmnViewer);
+    //       this.loadFlowCanvas(newVal);
+    //     }
+    //   },
+    //   immediate: true, // 立即生效
+    //   deep: true, //监听对象或数组的时候，要用到深度监听
+    // },
+  },
+  computed: {
+    myFlowData() {
+      return this.flowData;
+    },
+  },
+  mounted() {},
+  methods: {
+    // 初始化实例
+    initViewer(flowData) {
+      console.log(flowData);
+      if (Object.keys(flowData).length > 0) {
+        // 生成实例
+        console.log(this.$refs.flowCanvas);
+        this.bpmnViewer && this.bpmnViewer.destroy();
+        this.bpmnViewer = new BpmnViewer({
+          container: this.$refs.flowCanvas,
+          height: "calc(100vh - 200px)",
+          additionalModules: [MoveCanvasModule],
+        });
+        console.log(this.bpmnViewer);
+        this.loadFlowCanvas(flowData);
+      }
+    },
+    // 加载流程
+    async loadFlowCanvas(flowData) {
+      const self = this;
+      try {
+        console.log(flowData.xmlData);
+        await self.bpmnViewer.importXML(flowData.xmlData);
+        self.fitViewport();
+        if (flowData.nodeData !== undefined && flowData.nodeData.length > 0) {
+          self.fillColor(flowData.nodeData);
+        }
+      } catch (err) {
+        console.error(err.message, err.warnings);
+      }
+    },
+    // 设置高亮颜色的class
+    setNodeColor(nodeCodes, colorClass, canvas) {
+      for (let i = 0; i < nodeCodes.length; i++) {
+        canvas.addMarker(nodeCodes[i], colorClass);
+      }
+    },
+    // 让图能自适应屏幕
+    fitViewport() {
+      this.zoom = this.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
+    },
+    // 放大缩小
+    zoomViewport(zoomIn = true) {
+      this.zoom = this.bpmnViewer.get("canvas").zoom();
+      this.zoom += zoomIn ? 0.1 : -0.1;
+      if (this.zoom >= 0.2) this.bpmnViewer.get("canvas").zoom(this.zoom);
+    },
+
+    // 设置高亮颜色的
+    fillColor(nodeData) {
+      const canvas = this.bpmnViewer.get("canvas");
+      this.bpmnViewer
+        .getDefinitions()
+        .rootElements[0].flowElements.forEach((n) => {
+          const completeTask = nodeData.find((m) => m.key === n.id);
+          const todoTask = nodeData.find((m) => !m.completed);
+          const endTask = nodeData[nodeData.length - 1];
+          if (n.$type === "bpmn:UserTask") {
+            if (completeTask) {
+              canvas.addMarker(
+                n.id,
+                completeTask.completed ? "highlight" : "highlight-todo"
+              );
+              n.outgoing?.forEach((nn) => {
+                const targetTask = nodeData.find(
+                  (m) => m.key === nn.targetRef.id
+                );
+                if (targetTask) {
+                  if (
+                    todoTask &&
+                    completeTask.key === todoTask.key &&
+                    !todoTask.completed
+                  ) {
+                    canvas.addMarker(
+                      nn.id,
+                      todoTask.completed ? "highlight" : "highlight-todo"
+                    );
+                    canvas.addMarker(
+                      nn.targetRef.id,
+                      todoTask.completed ? "highlight" : "highlight-todo"
+                    );
+                  } else {
+                    canvas.addMarker(
+                      nn.id,
+                      targetTask.completed ? "highlight" : "highlight-todo"
+                    );
+                    canvas.addMarker(
+                      nn.targetRef.id,
+                      targetTask.completed ? "highlight" : "highlight-todo"
+                    );
+                  }
+                }
+              });
+            }
+          }
+          // 排他网关
+          else if (n.$type === "bpmn:ExclusiveGateway") {
+            if (completeTask) {
+              canvas.addMarker(
+                n.id,
+                completeTask.completed ? "highlight" : "highlight-todo"
+              );
+              n.outgoing?.forEach((nn) => {
+                const targetTask = nodeData.find(
+                  (m) => m.key === nn.targetRef.id
+                );
+                if (targetTask) {
+                  canvas.addMarker(
+                    nn.id,
+                    targetTask.completed ? "highlight" : "highlight-todo"
+                  );
+                  canvas.addMarker(
+                    nn.targetRef.id,
+                    targetTask.completed ? "highlight" : "highlight-todo"
+                  );
+                }
+              });
+            }
+          }
+          // 并行网关
+          else if (n.$type === "bpmn:ParallelGateway") {
+            if (completeTask) {
+              canvas.addMarker(
+                n.id,
+                completeTask.completed ? "highlight" : "highlight-todo"
+              );
+              n.outgoing?.forEach((nn) => {
+                const targetTask = nodeData.find(
+                  (m) => m.key === nn.targetRef.id
+                );
+                if (targetTask) {
+                  canvas.addMarker(
+                    nn.id,
+                    targetTask.completed ? "highlight" : "highlight-todo"
+                  );
+                  canvas.addMarker(
+                    nn.targetRef.id,
+                    targetTask.completed ? "highlight" : "highlight-todo"
+                  );
+                }
+              });
+            }
+          } else if (n.$type === "bpmn:StartEvent") {
+            n.outgoing.forEach((nn) => {
+              const completeTask = nodeData.find(
+                (m) => m.key === nn.targetRef.id
+              );
+              if (completeTask) {
+                canvas.addMarker(nn.id, "highlight");
+                canvas.addMarker(n.id, "highlight");
+                return;
+              }
+            });
+          } else if (n.$type === "bpmn:EndEvent") {
+            if (endTask.key === n.id && endTask.completed) {
+              canvas.addMarker(n.id, "highlight");
+              return;
+            }
+          }
+        });
+    },
+  },
+};
+</script>
+<style lang="scss">
+.bjs-powered-by {
+  display: none;
+}
+.view-mode {
+  .el-header,
+  .el-aside,
+  .djs-palette,
+  .bjs-powered-by {
+    display: none;
+  }
+  .el-loading-mask {
+    background-color: initial;
+  }
+  .el-loading-spinner {
+    display: none;
+  }
+}
+.containers {
+  // background-color: #ffffff;
+  width: 100%;
+  height: 100%;
+  .canvas {
+    width: 100%;
+    height: 100%;
+    // height: 1000px;
+  }
+  .panel {
+    position: absolute;
+    right: 0;
+    top: 50px;
+    width: 300px;
+  }
+  .load {
+    margin-right: 10px;
+  }
+  .el-form-item__label {
+    font-size: 13px;
+  }
+
+  .djs-palette {
+    left: 0px !important;
+    top: 0px;
+    border-top: none;
+  }
+
+  .djs-container svg {
+    min-height: 650px;
+  }
+
+  .highlight.djs-shape .djs-visual > :nth-child(1) {
+    fill: green !important;
+    stroke: green !important;
+    fill-opacity: 0.2 !important;
+  }
+  .highlight.djs-shape .djs-visual > :nth-child(2) {
+    fill: green !important;
+  }
+  .highlight.djs-shape .djs-visual > path {
+    fill: green !important;
+    fill-opacity: 0.2 !important;
+    stroke: green !important;
+  }
+  .highlight.djs-connection > .djs-visual > path {
+    stroke: green !important;
+  }
+  .highlight-todo.djs-connection > .djs-visual > path {
+    stroke: orange !important;
+    stroke-dasharray: 4px !important;
+    fill-opacity: 0.2 !important;
+  }
+  .highlight-todo.djs-shape .djs-visual > :nth-child(1) {
+    fill: orange !important;
+    stroke: orange !important;
+    stroke-dasharray: 4px !important;
+    fill-opacity: 0.2 !important;
+  }
+  .overlays-div {
+    font-size: 10px;
+    color: red;
+    width: 100px;
+    top: -20px !important;
+  }
+}
+</style>

zkqy-ui/src/views/bussiness/detail/flowData.js

@@ -0,0 +1,164 @@
+const flowData = {
+  nodeData: [
+    {
+      key: 'Event_bd987f6e-9659-4624-9d0c-c1804d9dd73b',
+      completed: true,
+    },
+    {
+      key: 'Activity_98180a47-5854-405a-82e8-75378ee3936b',
+      completed: true,
+    },
+    {
+      key: 'Activity_117cb232-ec7c-4b57-a04b-81f256b00a09',
+      completed: false,
+    },
+    {
+      key: 'Activity_24128e99-5622-49ac-9578-8c8182fe1659',
+      completed: false,
+    },
+  ],
+  xmlData: `<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" id="Definitions_0001">
+  <bpmn:process id="Process_1703658160159" name="MES测试流程" isExecutable="true" camunda:asyncIndustryType="4" camunda:executeUserType="1" camunda:executeUser="" camunda:virtuallyRole="838317c0-e76b-475e-a78b-070df94d0d1b" camunda:nodeExecuteType="false">
+    <bpmn:startEvent id="Event_bd987f6e-9659-4624-9d0c-c1804d9dd73b" name="开始" camunda:asyncIndustryType="4" camunda:executeUserType="1" camunda:executeUser="" camunda:virtuallyRole="7b51acae-de8f-4a60-8229-7f9e2cfe77fe" camunda:nodeExecuteType="false" camunda:IndustryType="0" camunda:NormalScriptKey="commonStartNodeProductionScheduling" camunda:NormalScriptTriggerType="1">
+      <bpmn:outgoing>Flow_9ad9e6ec-b2ef-433e-aff8-a6607b5cb0e4</bpmn:outgoing>
+    </bpmn:startEvent>
+    <bpmn:userTask id="Activity_98180a47-5854-405a-82e8-75378ee3936b" name="工艺校验" camunda:executeUserType="1" camunda:executeUser="219" camunda:virtuallyRole="f3b2b6ad-842a-461a-a6e8-dbe0d25449da" camunda:nodeExecuteType="false" camunda:asyncIndustryType="4" camunda:nodeFormKey="NodeShow" camunda:IndustryType="5" camunda:NormalScriptKey="38508d71-ce2a-41de-b1e4-7c48f4f4ff7e" camunda:NormalScriptTriggerType="1" camunda:tableName="goods">
+      <bpmn:incoming>Flow_9ad9e6ec-b2ef-433e-aff8-a6607b5cb0e4</bpmn:incoming>
+      <bpmn:outgoing>Flow_d70d6a63-c165-48c4-a7e9-2b5ba89c018a</bpmn:outgoing>
+    </bpmn:userTask>
+    <bpmn:sequenceFlow id="Flow_9ad9e6ec-b2ef-433e-aff8-a6607b5cb0e4" sourceRef="Event_bd987f6e-9659-4624-9d0c-c1804d9dd73b" targetRef="Activity_98180a47-5854-405a-82e8-75378ee3936b" />
+    <bpmn:userTask id="Activity_117cb232-ec7c-4b57-a04b-81f256b00a09" name="绑定主制班组" camunda:asyncIndustryType="4" camunda:executeUserType="1" camunda:executeUser="219" camunda:virtuallyRole="817182cd-b962-4f55-b63c-f5395ce2ae2c" camunda:nodeExecuteType="false" camunda:nodeFormKey="AssignEmployees" camunda:IndustryType="5" camunda:NormalScriptKey="b83c419b-59cb-4f56-9b53-fd85811be20d" camunda:NormalScriptTriggerType="1" camunda:tableName="goods">
+      <bpmn:extensionElements>
+        <camunda:unusualTask scriptKey="4c163c35-6005-48cf-9dc0-3f07af04c70b" scriptTriggerType="0" scriptName="重绑工艺规程" industryType="0" compName="GY06" tableName="goods" />
+      </bpmn:extensionElements>
+      <bpmn:incoming>Flow_d70d6a63-c165-48c4-a7e9-2b5ba89c018a</bpmn:incoming>
+      <bpmn:outgoing>Flow_ac85664a-1c98-4a4c-8113-3c9deec61961</bpmn:outgoing>
+    </bpmn:userTask>
+    <bpmn:sequenceFlow id="Flow_d70d6a63-c165-48c4-a7e9-2b5ba89c018a" sourceRef="Activity_98180a47-5854-405a-82e8-75378ee3936b" targetRef="Activity_117cb232-ec7c-4b57-a04b-81f256b00a09" />
+    <bpmn:userTask id="Activity_24128e99-5622-49ac-9578-8c8182fe1659" name="物料配套" camunda:asyncIndustryType="4" camunda:executeUserType="1" camunda:executeUser="219" camunda:virtuallyRole="e13382ff-659f-42fa-8a0c-c52a6725fe27" camunda:nodeExecuteType="false" camunda:nodeFormKey="Notes" camunda:IndustryType="5" camunda:NormalScriptKey="a4ca30eb-805c-4c83-a71a-ccdf0f568fb2" camunda:NormalScriptTriggerType="1" camunda:tableName="goods">
+      <bpmn:extensionElements>
+        <camunda:unusualTask scriptKey="4c163c35-6005-48cf-9dc0-3f07af04c70b" scriptTriggerType="0" scriptName="重绑工艺规程" industryType="0" compName="GY06" tableName="goods" />
+      </bpmn:extensionElements>
+      <bpmn:incoming>Flow_ac85664a-1c98-4a4c-8113-3c9deec61961</bpmn:incoming>
+      <bpmn:outgoing>Flow_6ed2baa6-4379-47ed-90ba-52d8b5fdc410</bpmn:outgoing>
+    </bpmn:userTask>
+    <bpmn:sequenceFlow id="Flow_ac85664a-1c98-4a4c-8113-3c9deec61961" sourceRef="Activity_117cb232-ec7c-4b57-a04b-81f256b00a09" targetRef="Activity_24128e99-5622-49ac-9578-8c8182fe1659" />
+    <bpmn:userTask id="Activity_f0325f77-e328-4428-a52d-6ac2addba361" name="记录质控卡" camunda:asyncIndustryType="4" camunda:executeUserType="1" camunda:executeUser="219" camunda:virtuallyRole="94b51d4a-179e-493a-8a2f-44cf83792c26" camunda:nodeExecuteType="false" camunda:nodeFormKey="RecordQuality" camunda:IndustryType="5" camunda:NormalScriptKey="ca0e7a45-ea6b-45f7-b721-cfb28d106735" camunda:NormalScriptTriggerType="1" camunda:tableName="goods">
+      <bpmn:extensionElements>
+        <camunda:unusualTask scriptKey="4c163c35-6005-48cf-9dc0-3f07af04c70b" scriptTriggerType="0" scriptName="重绑工艺规程" industryType="0" compName="GY06" tableName="goods" />
+      </bpmn:extensionElements>
+      <bpmn:incoming>Flow_6ed2baa6-4379-47ed-90ba-52d8b5fdc410</bpmn:incoming>
+      <bpmn:outgoing>Flow_50b622d4-fe74-42d8-9454-59fab1d6d04a</bpmn:outgoing>
+    </bpmn:userTask>
+    <bpmn:sequenceFlow id="Flow_6ed2baa6-4379-47ed-90ba-52d8b5fdc410" sourceRef="Activity_24128e99-5622-49ac-9578-8c8182fe1659" targetRef="Activity_f0325f77-e328-4428-a52d-6ac2addba361" />
+    <bpmn:userTask id="Activity_fc91a2e3-373b-4d1c-bea7-0c980d60b2fb" name="工序1：领料" camunda:asyncIndustryType="4" camunda:executeUserType="1" camunda:executeUser="219" camunda:virtuallyRole="cb1afa03-fb8e-40ad-86f9-df778798a697" camunda:nodeExecuteType="false" camunda:nodeFormKey="ProductionProcesses" camunda:IndustryType="5" camunda:NormalScriptKey="d16766d9-d568-4776-b05c-6fe144e89321" camunda:NormalScriptTriggerType="1" camunda:tableName="goods">
+      <bpmn:extensionElements>
+        <camunda:unusualTask scriptKey="4c163c35-6005-48cf-9dc0-3f07af04c70b" scriptTriggerType="0" scriptName="重绑工艺规程" industryType="0" compName="GY06" tableName="goods" />
+      </bpmn:extensionElements>
+      <bpmn:incoming>Flow_50b622d4-fe74-42d8-9454-59fab1d6d04a</bpmn:incoming>
+      <bpmn:outgoing>Flow_f42217ee-cf62-48f4-8b0b-03283b730451</bpmn:outgoing>
+    </bpmn:userTask>
+    <bpmn:sequenceFlow id="Flow_50b622d4-fe74-42d8-9454-59fab1d6d04a" sourceRef="Activity_f0325f77-e328-4428-a52d-6ac2addba361" targetRef="Activity_fc91a2e3-373b-4d1c-bea7-0c980d60b2fb" />
+    <bpmn:userTask id="Activity_ebe6e915-222f-4bf9-84d3-834630439be1" name="工序2：检验" camunda:asyncIndustryType="4" camunda:executeUserType="1" camunda:executeUser="219" camunda:virtuallyRole="4da22333-adf7-4289-ad2f-bf4d57ef6bf1" camunda:nodeExecuteType="false" camunda:nodeFormKey="PersonalDistribution" camunda:IndustryType="5" camunda:NormalScriptKey="2ba2eac6-d196-40d2-be2c-f6e2758d2635" camunda:NormalScriptTriggerType="1" camunda:tableName="goods">
+      <bpmn:extensionElements>
+        <camunda:unusualTask scriptKey="4c163c35-6005-48cf-9dc0-3f07af04c70b" scriptTriggerType="0" scriptName="重绑工艺规程" industryType="0" compName="GY06" tableName="goods" />
+      </bpmn:extensionElements>
+      <bpmn:incoming>Flow_f42217ee-cf62-48f4-8b0b-03283b730451</bpmn:incoming>
+      <bpmn:outgoing>Flow_da7b8c30-0009-4ad3-ae2b-71a88abe96b3</bpmn:outgoing>
+    </bpmn:userTask>
+    <bpmn:sequenceFlow id="Flow_f42217ee-cf62-48f4-8b0b-03283b730451" sourceRef="Activity_fc91a2e3-373b-4d1c-bea7-0c980d60b2fb" targetRef="Activity_ebe6e915-222f-4bf9-84d3-834630439be1" />
+    <bpmn:userTask id="Activity_fc7cbe9f-9a10-43c0-a841-0af7ff12e01b" name="打印交接单" camunda:asyncIndustryType="4" camunda:executeUserType="1" camunda:executeUser="219" camunda:virtuallyRole="2658bc04-b036-465c-b883-9b5b1a597d74" camunda:nodeExecuteType="false" camunda:nodeFormKey="Print" camunda:IndustryType="5" camunda:NormalScriptKey="c0abcdde-3562-4bd3-ae86-00aaf333cbfc" camunda:NormalScriptTriggerType="1" camunda:tableName="goods">
+      <bpmn:extensionElements>
+        <camunda:unusualTask scriptKey="4c163c35-6005-48cf-9dc0-3f07af04c70b" scriptTriggerType="0" scriptName="重绑工艺规程" industryType="0" compName="GY06" tableName="goods" />
+      </bpmn:extensionElements>
+      <bpmn:incoming>Flow_da7b8c30-0009-4ad3-ae2b-71a88abe96b3</bpmn:incoming>
+      <bpmn:outgoing>Flow_76b0335b-f875-4544-bf2b-27139717c20f</bpmn:outgoing>
+    </bpmn:userTask>
+    <bpmn:sequenceFlow id="Flow_da7b8c30-0009-4ad3-ae2b-71a88abe96b3" sourceRef="Activity_ebe6e915-222f-4bf9-84d3-834630439be1" targetRef="Activity_fc7cbe9f-9a10-43c0-a841-0af7ff12e01b" />
+    <bpmn:endEvent id="Event_cc872c83-2afd-45a8-87a5-daa9e7dab99d" name="结束" camunda:asyncIndustryType="4" camunda:executeUserType="1" camunda:executeUser="" camunda:virtuallyRole="7ab698e9-d42f-45ca-99d4-5a0409b30865" camunda:nodeExecuteType="false" camunda:IndustryType="0" camunda:NormalScriptKey="commonEndEvent" camunda:NormalScriptTriggerType="1">
+      <bpmn:incoming>Flow_76b0335b-f875-4544-bf2b-27139717c20f</bpmn:incoming>
+    </bpmn:endEvent>
+    <bpmn:sequenceFlow id="Flow_76b0335b-f875-4544-bf2b-27139717c20f" sourceRef="Activity_fc7cbe9f-9a10-43c0-a841-0af7ff12e01b" targetRef="Event_cc872c83-2afd-45a8-87a5-daa9e7dab99d" />
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1703658160159">
+      <bpmndi:BPMNShape id="Event_bd987f6e-9659-4624-9d0c-c1804d9dd73b_di" bpmnElement="Event_bd987f6e-9659-4624-9d0c-c1804d9dd73b">
+        <dc:Bounds x="272" y="342" width="36" height="36" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="279" y="385" width="23" height="14" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_98180a47-5854-405a-82e8-75378ee3936b_di" bpmnElement="Activity_98180a47-5854-405a-82e8-75378ee3936b">
+        <dc:Bounds x="408" y="300" width="120" height="120" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_117cb232-ec7c-4b57-a04b-81f256b00a09_di" bpmnElement="Activity_117cb232-ec7c-4b57-a04b-81f256b00a09">
+        <dc:Bounds x="628" y="300" width="120" height="120" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_24128e99-5622-49ac-9578-8c8182fe1659_di" bpmnElement="Activity_24128e99-5622-49ac-9578-8c8182fe1659">
+        <dc:Bounds x="848" y="300" width="120" height="120" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_f0325f77-e328-4428-a52d-6ac2addba361_di" bpmnElement="Activity_f0325f77-e328-4428-a52d-6ac2addba361">
+        <dc:Bounds x="1068" y="300" width="120" height="120" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_fc91a2e3-373b-4d1c-bea7-0c980d60b2fb_di" bpmnElement="Activity_fc91a2e3-373b-4d1c-bea7-0c980d60b2fb">
+        <dc:Bounds x="1288" y="300" width="120" height="120" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_ebe6e915-222f-4bf9-84d3-834630439be1_di" bpmnElement="Activity_ebe6e915-222f-4bf9-84d3-834630439be1">
+        <dc:Bounds x="1508" y="300" width="120" height="120" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_fc7cbe9f-9a10-43c0-a841-0af7ff12e01b_di" bpmnElement="Activity_fc7cbe9f-9a10-43c0-a841-0af7ff12e01b">
+        <dc:Bounds x="1728" y="300" width="120" height="120" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Event_cc872c83-2afd-45a8-87a5-daa9e7dab99d_di" bpmnElement="Event_cc872c83-2afd-45a8-87a5-daa9e7dab99d">
+        <dc:Bounds x="1948" y="342" width="36" height="36" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="1955" y="385" width="23" height="14" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="Flow_9ad9e6ec-b2ef-433e-aff8-a6607b5cb0e4_di" bpmnElement="Flow_9ad9e6ec-b2ef-433e-aff8-a6607b5cb0e4">
+        <di:waypoint x="308" y="360" />
+        <di:waypoint x="408" y="360" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_d70d6a63-c165-48c4-a7e9-2b5ba89c018a_di" bpmnElement="Flow_d70d6a63-c165-48c4-a7e9-2b5ba89c018a">
+        <di:waypoint x="528" y="360" />
+        <di:waypoint x="628" y="360" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_ac85664a-1c98-4a4c-8113-3c9deec61961_di" bpmnElement="Flow_ac85664a-1c98-4a4c-8113-3c9deec61961">
+        <di:waypoint x="748" y="360" />
+        <di:waypoint x="848" y="360" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_6ed2baa6-4379-47ed-90ba-52d8b5fdc410_di" bpmnElement="Flow_6ed2baa6-4379-47ed-90ba-52d8b5fdc410">
+        <di:waypoint x="968" y="360" />
+        <di:waypoint x="1068" y="360" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_50b622d4-fe74-42d8-9454-59fab1d6d04a_di" bpmnElement="Flow_50b622d4-fe74-42d8-9454-59fab1d6d04a">
+        <di:waypoint x="1188" y="360" />
+        <di:waypoint x="1288" y="360" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_f42217ee-cf62-48f4-8b0b-03283b730451_di" bpmnElement="Flow_f42217ee-cf62-48f4-8b0b-03283b730451">
+        <di:waypoint x="1408" y="360" />
+        <di:waypoint x="1508" y="360" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_da7b8c30-0009-4ad3-ae2b-71a88abe96b3_di" bpmnElement="Flow_da7b8c30-0009-4ad3-ae2b-71a88abe96b3">
+        <di:waypoint x="1628" y="360" />
+        <di:waypoint x="1728" y="360" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_76b0335b-f875-4544-bf2b-27139717c20f_di" bpmnElement="Flow_76b0335b-f875-4544-bf2b-27139717c20f">
+        <di:waypoint x="1848" y="360" />
+        <di:waypoint x="1948" y="360" />
+      </bpmndi:BPMNEdge>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>
+`
+}
+
+export default flowData

zkqy-ui/src/views/bussiness/detail/formList.js

@@ -178,62 +178,67 @@ const List = [
 		defaultValue: {},
 	}
 	, {
-		list: [
-			{
-				type: "input",
-				label: "货品名称",
-				options: {
-					type: "text",
-					width: "100%",
-					defaultValue: "",
-					placeholder: "请输入",
-					clearable: false,
-					maxLength: null,
-					addonBefore: "",
-					addonAfter: "",
-					showLabel: true,
-					hidden: false,
-					disabled: false,
-				},
-				model: "goodsname",
-				key: "input_1703555460307",
-				help: "",
-				rules: [
-					{
-						required: false,
-						message: "必填项",
+		jsonData: {
+			list: [
+				{
+					type: "input",
+					label: "货品名称",
+					options: {
+						type: "text",
+						width: "100%",
+						defaultValue: "",
+						placeholder: "请输入",
+						clearable: false,
+						maxLength: null,
+						addonBefore: "",
+						addonAfter: "",
+						showLabel: true,
+						hidden: false,
+						disabled: false,
 					},
-				],
-				tableName: "goods",
-			},
-		],
-		config: {
-			layout: "horizontal",
-			labelCol: {
-				xs: 4,
-				sm: 4,
-				md: 4,
-				lg: 4,
-				xl: 4,
-				xxl: 4,
-			},
-			labelWidth: 100,
-			labelLayout: "flex",
-			wrapperCol: {
-				xs: 18,
-				sm: 18,
-				md: 18,
-				lg: 18,
-				xl: 18,
-				xxl: 18,
+					model: "goodsname",
+					key: "input_1703555460307",
+					help: "",
+					rules: [
+						{
+							required: false,
+							message: "必填项",
+						},
+					],
+					tableName: "goods",
+				},
+			],
+			config: {
+				layout: "horizontal",
+				labelCol: {
+					xs: 4,
+					sm: 4,
+					md: 4,
+					lg: 4,
+					xl: 4,
+					xxl: 4,
+				},
+				labelWidth: 100,
+				labelLayout: "flex",
+				wrapperCol: {
+					xs: 18,
+					sm: 18,
+					md: 18,
+					lg: 18,
+					xl: 18,
+					xxl: 18,
+				},
+				hideRequiredMark: false,
+				customStyle: "",
+				formName: "货品表单",
+				nickFormName: "HPBD",
+				mainTableName: "goods",
+				tdId: 1,
 			},
-			hideRequiredMark: false,
-			customStyle: "",
-			formName: "货品表单",
-			nickFormName: "HPBD",
-			mainTableName: "goods",
-			tdId: 1,
 		},
+		dynamicData: {},
+		defaultValue: {},
+
 	},
 ]
 export default List

zkqy-ui/src/views/bussiness/detail/formList.vue

@@ -1,33 +1,76 @@
 <template>
   <div class="list-wrap">
-    <k-form-build
-      v-if="jsonData"
-      class="formBuild"
-      ref="addFromRef"
-      :dynamicData="dynamicData"
-      :defaultValue="defaultValue"
-      :value="jsonData"
-    />
+    <div class="list-item" v-for="(item, index) in formList" :key="index">
+      <!--  :dynamicData="dynamicData"
+        :defaultValue="defaultValue" -->
+      <k-form-build
+        :dynamicData="item.dynamicData"
+        :defaultValue="item.defaultValue"
+        class="formBuild"
+        ref="addFromRef"
+        :value="item.jsonData"
+      />
+    </div>
   </div>
 </template>
 
 <script>
+import formList from "./formList.js";
 export default {
   name: "FormList",
   props: [],
   components: {},
   data() {
     return {
-      formList: [
-        {
-          formJson: formList,
-        },
-      ],
+      // formList: [
+      //   {
+      //     formJson: formList,
+      //   },
+      // ],
     };
   },
-  computed: {},
-  methods: {},
+  computed: {
+    formList() {
+      return this.disableHandler(formList);
+    },
+  },
+  methods: {
+    /**
+     *
+     * @param {array} formList 表单列表
+     * @return {array} 处理后的表单列表-添加disable属性
+
+     */
+    disableHandler(formList) {
+      if (formList.length == 0) return [];
+      let last = formList.pop();
+      formList.forEach((item) => {
+        item.jsonData.list.forEach((i) => {
+          i.options.disabled = true;
+        });
+      });
+      formList.push(last);
+      return formList;
+    },
+  },
+  mounted() {},
 };
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+.list-wrap {
+  display: flex;
+  flex-direction: column;
+  .list-item {
+    margin-top: 10px;
+    &::after {
+      content: "";
+      display: block;
+      border: 1px dashed #41baeb; /* 设置虚线样式 */
+    }
+    &:last-child::after {
+      display: none;
+    }
+  }
+}
+</style>

zkqy-ui/src/views/bussiness/detail/index.vue

@@ -11,19 +11,27 @@
           >关闭</el-button
         >
       </div>
-      <el-tabs tab-position="top" v-model="activeName" @tab-click="() => {}">
+      <el-tabs
+        tab-position="top"
+        v-model="activeName"
+        @tab-click="tabChangeHandler"
+      >
         <!--表单信息-->
         <el-tab-pane label="表单信息" name="1">
           <el-col :span="16" :offset="4">
-            <div class="test-form"></div>
+            <div class="test-form">
+              <FormList></FormList>
+            </div>
           </el-col>
         </el-tab-pane>
         <!--流程流转记录-->
-        <el-tab-pane label="流转记录" name="2">
+        <!-- <el-tab-pane label="流转记录" name="2">
           <el-col :span="16" :offset="4"> </el-col>
-        </el-tab-pane>
+        </el-tab-pane> -->
         <!--流程图-->
-        <el-tab-pane label="流程图" name="3"> </el-tab-pane>
+        <el-tab-pane label="流程图" name="3">
+          <FlowChart ref="flowChartRef" :flowData="flowData"></FlowChart>
+        </el-tab-pane>
       </el-tabs>
     </el-card>
   </div>
@@ -31,12 +39,14 @@
 
 <script>
 import FormList from "./formList.vue";
+import FlowChart from "@/views/bussiness/detail/FlowChart";
 
 // 模拟表单列表数据
 import formList from "./formList.js";
+import flowData from "./flowData.js";
 export default {
   name: "Record",
-  components: { FormList },
+  components: { FormList, FlowChart },
   props: {},
   data() {
     return {
@@ -44,7 +54,20 @@ export default {
     };
   },
   created() {},
-  methods: {},
+  methods: {
+    tabChangeHandler(val) {
+      if (this.activeName == "3") {
+        this.$nextTick(() => {
+          this.$refs.flowChartRef.initViewer(this.flowData);
+        });
+      }
+    },
+  },
+  computed: {
+    flowData() {
+      return flowData;
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>