From c0a5dbac2dad0f0185c9f852b3b8a8c2d268e84f Mon Sep 17 00:00:00 2001
From: zwq <zwq229436@163.com>
Date: Fri, 9 Sep 2022 16:50:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |  43 ++
 package.json                                  |   1 +
 src/icons/svg/上箭头.svg                      |   1 +
 src/icons/svg/下箭头.svg                      |   1 +
 src/icons/svg/历史记录.svg                    |   1 +
 src/views/pages/login.vue                     |   5 +-
 src/views/spc-basic/components/flowMethods.js | 103 +++++
 .../components/processFlow-graph.vue          | 370 ++++++++++++++++++
 .../spc-basic/components/productList-add.vue  | 149 +++----
 .../components/productList-four-add.vue       |  75 ++--
 .../components/productList-four-content.vue   | 339 +++++++++++-----
 .../components/productList-four-history.vue   |  98 +++++
 .../spc-basic/components/productList-four.vue |  38 +-
 .../components/productList-two-table.vue      | 227 +++++++++++
 .../spc-basic/components/productList-two.vue  | 196 +++-------
 src/views/spc-basic/processFlow.vue           |  59 ++-
 16 files changed, 1325 insertions(+), 381 deletions(-)
 create mode 100644 src/icons/svg/上箭头.svg
 create mode 100644 src/icons/svg/下箭头.svg
 create mode 100644 src/icons/svg/历史记录.svg
 create mode 100644 src/views/spc-basic/components/flowMethods.js
 create mode 100644 src/views/spc-basic/components/productList-four-history.vue
 create mode 100644 src/views/spc-basic/components/productList-two-table.vue

diff --git a/package-lock.json b/package-lock.json
index 34782ab..4c7aa5b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,19 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@antv/x6": {
+      "version": "1.33.1",
+      "resolved": "https://registry.npmjs.org/@antv/x6/-/x6-1.33.1.tgz",
+      "integrity": "sha512-NW3mUDW+Od9hqas0URoaeih0we4gLipqdNEC7ozM7wRFEzpi9CDzfPZerHmhdKasUMwjIyyrN56uJEHGVnrp4Q==",
+      "requires": {
+        "csstype": "^3.0.3",
+        "jquery": "^3.5.1",
+        "jquery-mousewheel": "^3.1.13",
+        "lodash-es": "^4.17.15",
+        "mousetrap": "^1.6.5",
+        "utility-types": "^3.10.0"
+      }
+    },
     "@babel/code-frame": {
       "version": "7.0.0-beta.44",
       "resolved": "https://registry.npm.taobao.org/@babel/code-frame/download/@babel/code-frame-7.0.0-beta.44.tgz?cache=0&sync_timestamp=1593529659031&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fcode-frame%2Fdownload%2F%40babel%2Fcode-frame-7.0.0-beta.44.tgz",
@@ -6498,6 +6511,11 @@
         }
       }
     },
+    "csstype": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA=="
+    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npm.taobao.org/currently-unhandled/download/currently-unhandled-0.4.1.tgz",
@@ -9956,6 +9974,16 @@
         }
       }
     },
+    "jquery": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.1.tgz",
+      "integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw=="
+    },
+    "jquery-mousewheel": {
+      "version": "3.1.13",
+      "resolved": "https://registry.npmjs.org/jquery-mousewheel/-/jquery-mousewheel-3.1.13.tgz",
+      "integrity": "sha512-GXhSjfOPyDemM005YCEHvzrEALhKDIswtxSHSR2e4K/suHVJKJxxRCGz3skPjNxjJjQa9AVSGGlYjv1M3VLIPg=="
+    },
     "js-base64": {
       "version": "2.6.3",
       "resolved": "https://registry.npm.taobao.org/js-base64/download/js-base64-2.6.3.tgz?cache=0&sync_timestamp=1595031171987&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-base64%2Fdownload%2Fjs-base64-2.6.3.tgz",
@@ -10205,6 +10233,11 @@
       "resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.19.tgz?cache=0&sync_timestamp=1594226905843&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.19.tgz",
       "integrity": "sha1-5I3e2+MLMyF4PFtDAfvTU7weSks="
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "lodash._basecopy": {
       "version": "3.0.1",
       "resolved": "https://registry.npm.taobao.org/lodash._basecopy/download/lodash._basecopy-3.0.1.tgz",
@@ -10958,6 +10991,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "mousetrap": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
+      "integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",
@@ -16256,6 +16294,11 @@
       "resolved": "https://registry.npm.taobao.org/utila/download/utila-0.4.0.tgz",
       "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw="
     },
+    "utility-types": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz",
+      "integrity": "sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg=="
+    },
     "utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/utils-merge/download/utils-merge-1.0.1.tgz",
diff --git a/package.json b/package.json
index dccd7c5..b9c4959 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "build:uat": "vue-cli-service build --mode production.uat"
   },
   "dependencies": {
+    "@antv/x6": "^1.33.1",
     "axios": "^0.19.2",
     "babel-eslint": "^8.0.1",
     "babel-plugin-component": "^1.1.1",
diff --git a/src/icons/svg/上箭头.svg b/src/icons/svg/上箭头.svg
new file mode 100644
index 0000000..648607b
--- /dev/null
+++ b/src/icons/svg/上箭头.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1662347535232" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2275" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M573.056 272l308.8 404.608A76.8 76.8 0 0 1 820.736 800H203.232a76.8 76.8 0 0 1-61.056-123.392L450.976 272a76.8 76.8 0 0 1 122.08 0z" p-id="2276"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/下箭头.svg b/src/icons/svg/下箭头.svg
new file mode 100644
index 0000000..cc25291
--- /dev/null
+++ b/src/icons/svg/下箭头.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1662347550082" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3183" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M573.056 752l308.8-404.608A76.8 76.8 0 0 0 820.736 224H203.232a76.8 76.8 0 0 0-61.056 123.392l308.8 404.608a76.8 76.8 0 0 0 122.08 0z" p-id="3184"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/历史记录.svg b/src/icons/svg/历史记录.svg
new file mode 100644
index 0000000..3f1bde7
--- /dev/null
+++ b/src/icons/svg/历史记录.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1662537336660" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2319" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M798.5152 707.9936v-77.0048c0-12.288-9.8304-22.7328-22.1184-22.7328-13.9264 0-24.1664 11.4688-24.1664 25.3952V739.328c0 8.192 6.7584 14.9504 14.9504 14.9504h83.5584c13.1072 0 24.1664-10.6496 23.7568-23.7568-0.4096-13.7216-11.6736-22.528-25.3952-22.528h-50.5856z m-502.3744-119.1936c-16.384 0-29.2864 13.9264-27.8528 30.5152 1.2288 14.5408 13.9264 25.3952 28.672 25.3952h142.9504c14.5408 0 27.2384-10.8544 28.672-25.3952 1.4336-16.5888-11.4688-30.5152-27.8528-30.5152h-144.5888z m0-231.6288h309.4528c15.7696 0 28.4672-12.9024 28.0576-28.8768-0.4096-14.9504-13.7216-27.2384-28.672-27.2384H296.7552c-14.7456 0-27.8528 11.8784-28.672 26.624-0.4096 7.9872 2.6624 15.5648 8.192 21.2992 5.3248 5.12 12.288 8.192 19.8656 8.192z m241.4592 113.0496c0-15.36-12.4928-28.0576-28.0576-28.0576H296.7552c-14.5408 0-27.2384 10.8544-28.4672 25.3952-1.4336 16.5888 11.6736 30.5152 28.0576 30.5152h213.4016c15.36 0.4096 27.8528-12.288 27.8528-27.8528z m0 0" p-id="2320"></path><path d="M568.5248 846.4384H248.0128c-24.1664 0-44.032-19.8656-44.032-44.032V212.1728c0-24.1664 19.8656-44.032 44.032-44.032h461.0048c24.1664 0 44.032 19.8656 44.032 44.032v223.0272c0 15.5648 11.6736 28.8768 27.0336 30.3104 17.6128 1.6384 32.3584-12.288 32.3584-29.696V212.1728c0-57.1392-46.4896-103.6288-103.424-103.6288H248.0128c-55.296 0-100.5568 43.008-103.424 98.0992v601.4976c2.8672 54.8864 48.3328 97.8944 103.424 97.8944h319.8976c14.9504 0 28.0576-10.6496 30.1056-25.3952 2.6624-18.432-11.6736-34.2016-29.4912-34.2016z m0 0" p-id="2321"></path><path d="M782.7456 502.1696c-111.8208 0-202.752 91.3408-201.9328 203.5712 0.8192 109.7728 90.5216 199.4752 200.4992 200.4992 112.0256 0.8192 203.5712-90.112 203.5712-201.9328-0.2048-111.616-90.7264-202.1376-202.1376-202.1376z m146.432 201.9328c0 81.5104-66.7648 147.456-148.48 146.432-78.848-1.024-143.1552-65.3312-144.384-143.9744-1.2288-81.92 64.9216-148.8896 146.432-148.8896 80.6912 0 146.432 65.536 146.432 146.432z m0 0" p-id="2322"></path></svg>
\ No newline at end of file
diff --git a/src/views/pages/login.vue b/src/views/pages/login.vue
index 885a2bc..e426e6b 100644
--- a/src/views/pages/login.vue
+++ b/src/views/pages/login.vue
@@ -52,7 +52,7 @@
 <script>
 import Cookies from 'js-cookie'
 import debounce from 'lodash/debounce'
-import { getUUID } from '@/utils'
+//import { getUUID } from '@/utils'
 export default {
   data () {
     return {
@@ -60,7 +60,7 @@ export default {
       dataForm: {
         username: 'admin1',
         password: 'admin',
-        uuid: '',
+        uuid: 'string',
         captcha: ''
       }
     }
@@ -86,7 +86,6 @@ export default {
   methods: {
     // 获取验证码
     getCaptcha () {
-      this.dataForm.uuid = getUUID()
       this.captchaPath = `${window.SITE_CONFIG['apiURL']}/captcha?uuid=${this.dataForm.uuid}`
     },
     // 表单提交
diff --git a/src/views/spc-basic/components/flowMethods.js b/src/views/spc-basic/components/flowMethods.js
new file mode 100644
index 0000000..df3b58d
--- /dev/null
+++ b/src/views/spc-basic/components/flowMethods.js
@@ -0,0 +1,103 @@
+import { Addon} from '@antv/x6';
+// 拖拽生成四边形
+export const startDragToGraph  = (graph,data,e) =>{
+    const node = 
+    graph.createNode({
+    width: 100,  //节点的宽度
+    height: 60,   //节点的高度
+    attrs: {
+      label: {
+        text: data.name,
+        workingProcedureId: data.id,
+        fill: 'white',
+        fontSize: 14,
+        textWrap: {
+          width: -10 ,
+          height: -10,
+          ellipsis: true,
+        },
+      },
+      body: {
+        stroke: '#000000',
+        strokeWidth: 1,
+        fill: '#5bdeff',
+      }
+    },
+    ports: ports
+  })
+    const dnd = new Addon.Dnd({target:graph})
+    dnd.start(node,e)
+}
+//下面是锚点的代码。 知道就行了 我就不一一写了。
+export const ports = {
+    groups: {
+      // 输入链接桩群组定义
+      top: {
+        position: 'top',
+        attrs: {
+          circle: {
+            r: 4,
+            magnet: true,
+            stroke: '#2D8CF0',
+            strokeWidth: 2,
+            fill: '#fff',
+          },
+        },
+      },
+      // 输出链接桩群组定义
+      bottom: {
+        position: 'bottom',
+        attrs: {
+          circle: {
+            r: 4,
+            magnet: true,
+            stroke: '#2D8CF0',
+            strokeWidth: 2,
+            fill: '#fff',
+          },
+        },
+      },
+      left: {
+        position: 'left',
+        attrs: {
+          circle: {
+            r: 4,
+            magnet: true,
+            stroke: '#2D8CF0',
+            strokeWidth: 2,
+            fill: '#fff',
+          },
+        },
+      },
+      right: {
+        position: 'right',
+        attrs: {
+          circle: {
+            r: 4,
+            magnet: true,
+            stroke: '#2D8CF0',
+            strokeWidth: 2,
+            fill: '#fff',
+          },
+        },
+      },
+    },
+    items: [
+      {
+        id: 'port1',
+        group: 'top',
+      },
+      {
+        id: 'port2',
+        group: 'bottom',
+      },
+      {
+        id: 'port3',
+        group: 'left',
+      },
+      {
+        id: 'port4',
+        group: 'right',
+      }
+    ],
+}
\ No newline at end of file
diff --git a/src/views/spc-basic/components/processFlow-graph.vue b/src/views/spc-basic/components/processFlow-graph.vue
index e69de29..8421793 100644
--- a/src/views/spc-basic/components/processFlow-graph.vue
+++ b/src/views/spc-basic/components/processFlow-graph.vue
@@ -0,0 +1,370 @@
+<!--
+ * @Author: zwq
+ * @Date: 2022-09-01 15:42:34
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-09-09 13:42:48
+ * @Description: 
+-->
+<template>
+  <el-row :gutter="20">
+    <el-col :span="3">
+      <el-card>
+        <div
+          v-for="(item, index) in processArr"
+          :key="index"
+          class="btn"
+          :title="item.name"
+          @mousedown="startDrag(item, $event)"
+        >
+          {{ item.name }}
+        </div>
+        <!-- <el-button type="primary">保存</el-button> -->
+      </el-card>
+    </el-col>
+    <el-col :span="21">
+      <div id="containerChart"></div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { Graph, Shape, FunctionExt } from "@antv/x6";
+import { startDragToGraph, ports } from "./flowMethods.js";
+
+export default {
+  props: {
+    productId: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      dataList: [],
+      processArr: [],
+      processId: "",
+      graph: "",
+      type: "grid",
+      selectCell: "",
+      connectEdgeType: {
+        //连线方式
+        connector: "normal",
+        router: {
+          name: "",
+        },
+      },
+      grid: {
+        // 网格设置
+        size: 20, // 网格大小 10px
+        visible: true, // 渲染网格背景
+        type: "mesh",
+        args: {
+          color: "#D0D0D0",
+          thickness: 1, // 网格线宽度/网格点大小
+          factor: 10,
+        },
+      },
+    };
+  },
+  activated() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.getArr();
+      this.$nextTick(() => {
+        this.processId = "";
+        if (this.productId) {
+          this.getList();
+        } else {
+          this.dataList = [];
+        }
+      });
+      this.graph = new Graph({
+        container: document.getElementById("containerChart"),
+        height: 600,
+        selecting: true,
+        background: {
+          color: "#fffbe6", // 设置画布背景颜色
+        },
+        snapline: {
+          enabled: true,
+          sharp: true,
+        },
+        // scroller: {
+        //   enabled: true,
+        //   pageVisible: false,
+        //   pageBreak: false,
+        //   pannable: true,
+        // },
+        mousewheel: {
+          enabled: true,
+          modifiers: ["ctrl", "meta"],
+        },
+        grid: this.grid,
+        connecting: {
+          // 节点连接
+          anchor: "center",
+          connectionPoint: "anchor",
+          allowBlank: false,
+          snap: true,
+        },
+        createEdge() {
+          return new Shape.Edge({
+            attrs: {
+              line: {
+                stroke: "#1890ff",
+                strokeWidth: 1,
+                targetMarker: {
+                  name: "classic",
+                  size: 8,
+                },
+                strokeDasharray: 0, //虚线
+                style: {
+                  animation: "ant-line 30s infinite linear",
+                },
+              },
+            },
+            label: {
+              text: "",
+            },
+            connector: _that.connectEdgeType.connector,
+            router: {
+              name: _that.connectEdgeType.router.name || "",
+            },
+            zIndex: 0,
+          });
+        },
+      });
+      // 鼠标移入移出节点
+      this.graph.on(
+        "node:mouseenter",
+        FunctionExt.debounce(() => {
+          const container = document.getElementById("containerChart");
+          const ports = container.querySelectorAll(".x6-port-body");
+          this.showPorts(ports, true);
+        }),
+        500
+      );
+      this.graph.on("node:mouseleave", (e) => {
+        const container = document.getElementById("containerChart");
+        const ports = container.querySelectorAll(".x6-port-body");
+        this.showPorts(ports, false);
+      });
+      //获取放置到画布上节点的位置
+      this.graph.on("node:added", ({ node }) => {
+        const { x, y } = node.position();
+        this.addProcess(node.attrs.label.workingProcedureId, x, y);
+      });
+      //这是鼠标抬起节点事件
+      this.graph.on("node:mouseup", ({ node }) => {
+        const { x, y } = node.position();
+        this.updataNode(node.attrs.label.id, x, y);
+      });
+      //这是点击节点事件
+      this.graph.on("node:click", () => {
+        const cell = this.graph.getSelectedCells();
+        console.log(cell);
+      });
+      //这是右键节点事件
+      this.graph.on("node:contextmenu", (e) => {
+        console.log(e);
+      });
+      this.graph.on("selection:changed", (args) => {
+        args.added.forEach((cell) => {
+          this.selectCell = cell;
+          if (cell.isEdge()) {
+            cell.isEdge() && cell.attr("line/strokeDasharray", 5); //虚线蚂蚁线
+            cell.addTools([
+              {
+                name: "vertices",
+                args: {
+                  padding: 4,
+                  attrs: {
+                    strokeWidth: 0.1,
+                    stroke: "#2d8cf0",
+                    fill: "#ffffff",
+                  },
+                },
+              },
+            ]);
+          }
+        });
+        args.removed.forEach((cell) => {
+          cell.isEdge() && cell.attr("line/strokeDasharray", 0); //正常线
+          cell.removeTools();
+        });
+        console.log(this.graph.toJSON());
+      });
+    },
+    showPorts(ports, show) {
+      for (let i = 0, len = ports.length; i < len; i = i + 1) {
+        ports[i].style.visibility = show ? "visible" : "hidden";
+      }
+    },
+    // 拖拽生成正方形或者圆形
+    startDrag(data, e) {
+      startDragToGraph(this.graph, data, e);
+    },
+    getArr() {
+      this.$http
+        .get("/basic/workingProcedure/page", {
+          params: {
+            page: 1,
+            limit: 500,
+          },
+        })
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.processArr = res.data.list;
+        })
+        .catch(() => {});
+    },
+    getList() {
+      this.$http
+        .get(
+          `/basic/productWorkingprocedureRelation/getWorkingprocedureByProductId/${this.productId}`
+        )
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            this.dataList = [];
+            return this.$message.error(res.msg);
+          }
+          this.dataList = res.data;
+          this.setNode();
+        })
+        .catch(() => {});
+    },
+    setNode() {
+      let nodes = [];
+      this.dataList.forEach((item) => {
+        let obj = {};
+        obj.x = item.x;
+        obj.y = item.y;
+        obj.width = 100;
+        obj.height = 60;
+        obj.attrs = {
+          label: {
+            text: item.workingProcedureName,
+            id: item.id,
+            fill: "white",
+            fontSize: 14,
+            textWrap: {
+              width: -10,
+              height: -10,
+              ellipsis: true,
+            },
+          },
+          body: {
+            stroke: "#000000",
+            strokeWidth: 1,
+            fill: "#5bdeff",
+          },
+        };
+        obj.ports = ports;
+        nodes.push(obj);
+      });
+      const data = {
+        nodes,
+      };
+      this.graph.fromJSON(data);
+    },
+    updataNode(id, x, y) {
+      const data = {
+        id: id,
+        x: x,
+        y: y,
+      };
+      this.$http
+        .put("/basic/productWorkingprocedureRelation", data)
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.$message({
+            message: this.$t("prompt.success"),
+            type: "success",
+            duration: 500,
+          });
+        })
+        .catch(() => {});
+    },
+    addProcess(workingProcedureId, x, y) {
+      this.$http
+        .post("/basic/productWorkingprocedureRelation/save", {
+          workingProcedureId: workingProcedureId,
+          productId: this.productId,
+          x,
+          y,
+        })
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            this.getList();
+            return this.$message.error(res.msg);
+          }
+          this.$message({
+            message: this.$t("prompt.success"),
+            type: "success",
+            duration: 500,
+            onClose: () => {
+              this.getList();
+            },
+          });
+        })
+        .catch(() => {});
+    },
+    // 删除
+    deleteHandle(id, name) {
+      this.$confirm(`确定对[名称=${name}]进行删除操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$http
+            .delete("/basic/productWorkingprocedureRelation", { data: [id] })
+            .then(({ data }) => {
+              if (data && data.code === 0) {
+                this.$message({
+                  message: "操作成功",
+                  type: "success",
+                  duration: 1500,
+                  onClose: () => {
+                    this.getList();
+                  },
+                });
+              } else {
+                this.$message.error(data.msg);
+              }
+            });
+        })
+        .catch(() => {});
+    }, //清空画布
+    deleteAll() {
+      this.graph.clearCells();
+    },
+    //销毁画布
+    GraphDelete() {
+      this.graph.dispose();
+    },
+  },
+  destroyed() {
+    console.log("销毁画布");
+    this.graph.dispose();
+  },
+};
+</script>
+
+<style>
+#containerChart {
+}
+.btn {
+  background-color: #5bdeff;
+  text-align: center;
+  padding: 20px;
+  color: white;
+  cursor: move;
+  margin-bottom: 10px;
+}
+</style>
diff --git a/src/views/spc-basic/components/productList-add.vue b/src/views/spc-basic/components/productList-add.vue
index 02a9d52..eee722f 100644
--- a/src/views/spc-basic/components/productList-add.vue
+++ b/src/views/spc-basic/components/productList-add.vue
@@ -2,14 +2,13 @@
  * @Author: zwq
  * @Date: 2021-11-18 14:16:25
  * @LastEditors: zwq
- * @LastEditTime: 2022-08-31 10:22:30
+ * @LastEditTime: 2022-09-07 15:45:24
  * @Description:
 -->
 <template>
   <el-dialog
     :title="!productId ? '新增' : '修改'"
-    :close-on-click-modal="false"
-    width="90%"
+    :fullscreen="true"
     :visible.sync="visible"
     :before-close="cancle"
   >
@@ -26,7 +25,7 @@
         <one-step
           v-if="oneStepVisible"
           ref="oneStepRef"
-          :product-id = "productId"
+          :product-id="productId"
           @nextStep="nextStep"
           @setPrductId="setPrductId"
           @setInspectionStage="setInspectionStage"
@@ -34,51 +33,46 @@
         <two-step
           v-if="twoStepVisible"
           ref="twoStepRef"
-          :product-id = "productId"
+          :product-id="productId"
           @nextStep="nextStep"
         ></two-step>
         <three-step
           v-if="threeStepVisible"
           ref="threeStepRef"
-          :product-id = "productId"
+          :product-id="productId"
           @nextStep="nextStep"
         ></three-step>
         <four-step
           v-if="fourStepVisible"
           ref="fourStepRef"
-          :product-id = "productId"
-          :inspection-stage-arr = "inspectionStageArr"
+          :product-id="productId"
+          :inspection-stage-arr="inspectionStageArr"
           @nextStep="nextStep"
         ></four-step>
       </div>
     </el-card>
     <span slot="footer" class="dialog-footer">
       <el-button @click="cancle">取消</el-button>
-      <el-button @click="preStep" v-show="active > 0" :disabled="submitBtn"
-        >上一步</el-button
-      >
-      <el-button
-        type="primary"
-        @click="dataFormSubmit()"
-        :loading="submitBtn"
-        >{{ active >= 3 ? "确定" : "下一步" }}</el-button
-      >
+      <el-button @click="preStep" v-show="active > 0" :disabled="submitBtn">上一步</el-button>
+      <el-button type="primary" @click="dataFormSubmit()" :loading="submitBtn">{{
+        active >= 3 ? "确定" : "下一步"
+      }}</el-button>
     </span>
   </el-dialog>
 </template>
 
 <script>
-import oneStep from './productList-one'
-import twoStep from './productList-two'
-import threeStep from './productList-three'
-import fourStep from './productList-four'
+import oneStep from "./productList-one";
+import twoStep from "./productList-two";
+import threeStep from "./productList-three";
+import fourStep from "./productList-four";
 
 export default {
-  data () {
+  data() {
     return {
       visible: false,
       active: 0,
-      productId: '',
+      productId: "",
       dataForm: {},
       inspectionStageArr: [], //检验阶段
       submitBtn: false,
@@ -86,87 +80,74 @@ export default {
       twoStepVisible: false,
       threeStepVisible: false,
       fourStepVisible: false,
-      stepShowObj: ['oneStepVisible', 'twoStepVisible', 'threeStepVisible', 'fourStepVisible'],
-      stepArr: ['oneStepRef', 'twoStepRef', 'threeStepRef', 'fourStepRef']
-    }
+      stepShowObj: ["oneStepVisible", "twoStepVisible", "threeStepVisible", "fourStepVisible"],
+      stepArr: ["oneStepRef", "twoStepRef", "threeStepRef", "fourStepRef"],
+    };
   },
   components: {
     oneStep,
     twoStep,
     threeStep,
-    fourStep
+    fourStep,
   },
   methods: {
-    init (id) {
-      this.productId = id || ''
-      this.active = 0
-      this.oneStepVisible = true
+    init(id) {
+      this.productId = id || "";
+      this.active = 0;
+      this.oneStepVisible = true;
       this.$nextTick(() => {
-        this.$refs.oneStepRef.init(id)
-      })
-      this.submitBtn = false
-      this.visible = true
+        this.$refs.oneStepRef.init(id);
+      });
+      this.submitBtn = false;
+      this.visible = true;
     },
     // 表单提交
-    dataFormSubmit () {
+    dataFormSubmit() {
       if (this.active >= 3) {
-        this.active += 1
-        this.submitBtn = true
-        this.$http({
-          url: this.$http.adornUrl(
-            `/alarmBase/${!this.productId ? 'add' : 'update'}`
-          ),
-          method: 'post',
-          data: this.$http.adornData(this.dataForm)
-        }).then(({ data }) => {
-          if (data && data.code === 0) {
-            this.$message({
-              message: '操作成功',
-              type: 'success',
-              duration: 1500,
-              onClose: () => {
-                this.submitBtn = false
-                this.visible = false
-                this.$emit('refreshDataList')
-              }
-            })
-          } else {
-            this.$message.error(data.msg)
-          }
-        })
+        this.active += 1;
+        this.submitBtn = true;
+        this[this.stepShowObj[0]] = false;
+        this[this.stepShowObj[1]] = false;
+        this[this.stepShowObj[2]] = false;
+        this[this.stepShowObj[3]] = false;
+        this.visible = false;
+        this.$emit("refreshDataList");
       } else {
-        this.$refs[this.stepArr[this.active]].dataFormSubmit()
+        this.$refs[this.stepArr[this.active]].dataFormSubmit();
       }
     },
-    nextStep () {
-      this[this.stepShowObj[this.active]] = false
-      this.active += 1
-      this[this.stepShowObj[this.active]] = true
+    nextStep() {
+      this[this.stepShowObj[this.active]] = false;
+      this.active += 1;
+      this[this.stepShowObj[this.active]] = true;
       this.$nextTick(() => {
-        this.$refs[this.stepArr[this.active]].init()
-      })
+        this.$refs[this.stepArr[this.active]].init();
+      });
     },
-    preStep () {
-      this[this.stepShowObj[this.active]] = false
-      this.active -= 1
-      this[this.stepShowObj[this.active]] = true
+    preStep() {
+      this[this.stepShowObj[this.active]] = false;
+      this.active -= 1;
+      this[this.stepShowObj[this.active]] = true;
       this.$nextTick(() => {
-        this.$refs[this.stepArr[this.active]].init()
-      })
+        this.$refs[this.stepArr[this.active]].init();
+      });
     },
-    cancle(){
-      this[this.stepShowObj[this.active]] = false
-      this.visible = false
-      this.$emit('refreshDataList')
+    cancle() {
+      this[this.stepShowObj[0]] = false;
+      this[this.stepShowObj[1]] = false;
+      this[this.stepShowObj[2]] = false;
+      this[this.stepShowObj[3]] = false;
+      this.visible = false;
+      this.$emit("refreshDataList");
     },
-    setPrductId(id){
-      this.productId = id
+    setPrductId(id) {
+      this.productId = id;
     },
-    setInspectionStage(arr){
-      this.inspectionStageArr = arr
-    }
-  }
-}
+    setInspectionStage(arr) {
+      this.inspectionStageArr = arr;
+    },
+  },
+};
 </script>
 
 <style>
diff --git a/src/views/spc-basic/components/productList-four-add.vue b/src/views/spc-basic/components/productList-four-add.vue
index d6e40e7..c022925 100644
--- a/src/views/spc-basic/components/productList-four-add.vue
+++ b/src/views/spc-basic/components/productList-four-add.vue
@@ -2,15 +2,11 @@
  * @Author: zwq
  * @Date: 2021-11-18 14:16:25
  * @LastEditors: zwq
- * @LastEditTime: 2022-08-31 11:25:21
+ * @LastEditTime: 2022-09-07 10:49:27
  * @Description:
 -->
 <template>
-  <el-dialog
-    :title="!fourDataForm.id ? '新增' : '修改'"
-    append-to-body
-    :visible.sync="fourVisible"
-  >
+  <el-dialog :title="!fourDataForm.id ? '新增' : '修改'" append-to-body :visible.sync="fourVisible">
     <el-row :gutter="10">
       <el-form
         :model="fourDataForm"
@@ -88,13 +84,28 @@
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="分析图形" prop="controlGraphName">
-            <el-input v-model="fourDataForm.controlGraphName" placeholder="分析图形"></el-input>
+          <el-form-item label="分析图形" prop="controlGraphId">
+            <el-select
+              v-model="fourDataForm.controlGraphId"
+              placeholder="请选择分析图形"
+              clearable
+              :style="{ width: '100%' }"
+            >
+              <el-option
+                v-for="(item, index) in GraphName"
+                :key="index"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="样本大小" prop="sampleSize">
-            <el-input-number v-model="fourDataForm.sampleSize" placeholder="样本大小"></el-input-number>
+            <el-input-number
+              v-model="fourDataForm.sampleSize"
+              placeholder="样本大小"
+            ></el-input-number>
           </el-form-item>
         </el-col>
         <el-col :span="8">
@@ -121,7 +132,10 @@
         </el-col>
         <el-col :span="8">
           <el-form-item label="小数位数" prop="decimalPlaces">
-            <el-input-number v-model="fourDataForm.decimalPlaces" placeholder="小数位数"></el-input-number>
+            <el-input-number
+              v-model="fourDataForm.decimalPlaces"
+              placeholder="小数位数"
+            ></el-input-number>
           </el-form-item>
         </el-col>
         <el-col :span="8">
@@ -146,12 +160,18 @@
         </el-col>
         <el-col :span="8">
           <el-form-item label="目标CPK" prop="targetCpk">
-            <el-input-number v-model="fourDataForm.targetCpk" placeholder="目标CPK"></el-input-number>
+            <el-input-number
+              v-model="fourDataForm.targetCpk"
+              placeholder="目标CPK"
+            ></el-input-number>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="目标PPK" prop="targetPpk">
-            <el-input-number v-model="fourDataForm.targetPpk" placeholder="目标PPK"></el-input-number>
+            <el-input-number
+              v-model="fourDataForm.targetPpk"
+              placeholder="目标PPK"
+            ></el-input-number>
           </el-form-item>
         </el-col>
         <el-col :span="8">
@@ -181,19 +201,19 @@ export default {
         type: "",
         defectLevel: "",
         measureToolId: "",
-        isSpc: '',
-        controlGraphName: '',
-        sampleSize: '',
-        samplingFrequency: '',
+        isSpc: "",
+        controlGraphId: "",
+        sampleSize: "",
+        samplingFrequency: "",
         unitId: "",
-        decimalPlaces: '',
-        specifications: '',
-        lsl: '',
-        sl: '',
-        usl: '',
-        targetCpk: '',
-        targetPpk: '',
-        remark: ''
+        decimalPlaces: "",
+        specifications: "",
+        lsl: "",
+        sl: "",
+        usl: "",
+        targetCpk: "",
+        targetPpk: "",
+        remark: "",
       },
       typeArr: [
         {
@@ -220,6 +240,7 @@ export default {
         },
       ],
       measureToolArr: [],
+      GraphName: [],
       unitArr: [],
       dataRule: {
         code: [{ required: true, message: "编码不能为空", trigger: "blur" }],
@@ -279,6 +300,12 @@ export default {
           this.measureToolArr = res.data.list;
         })
         .catch(() => {});
+      this.$http
+        .post("/qualityPlanning/controlGraph/list")
+        .then(({ data: res }) => {
+          this.GraphName = res;
+        })
+        .catch(() => {});
     },
     // 表单提交
     dataFormSubmit() {
diff --git a/src/views/spc-basic/components/productList-four-content.vue b/src/views/spc-basic/components/productList-four-content.vue
index f795f3c..a20e9f0 100644
--- a/src/views/spc-basic/components/productList-four-content.vue
+++ b/src/views/spc-basic/components/productList-four-content.vue
@@ -2,108 +2,144 @@
  * @Author: zwq
  * @Date: 2021-11-18 14:16:25
  * @LastEditors: zwq
- * @LastEditTime: 2022-08-31 11:22:26
+ * @LastEditTime: 2022-09-07 16:04:53
  * @Description:
 -->
 <template>
   <div>
-    <el-tabs @tab-click="tabClick">
-      <el-tab-pane label="控制矩阵">
-        <el-checkbox-group v-model="productFeaturesArr" @change="$forceUpdate()" size="medium">
-          <el-checkbox
-            v-for="(item, index) in productFeaturesOptions"
-            :key="index"
-            :label="item.id"
-            >{{ item.name }}</el-checkbox
+    <div v-if="workingProcedure.length && productFeaturesOptions.length">
+      <el-tabs @tab-click="tabClick">
+        <el-tab-pane label="控制矩阵">
+          <el-button style="float:right" size="small" type="primary" @click="deleteFeatures()">
+            <svg class="icon-svg"><use xlink:href="#icon-新建"></use></svg>
+            保存
+          </el-button>
+          <el-table
+            :data="productFeaturesList"
+            v-loading="dataListLoading"
+            border
+            style="width: 50%;"
           >
-        </el-checkbox-group>
-      </el-tab-pane>
-      <el-tab-pane label="特性列表">
-        <el-table
-          :data="dataList"
-          :stripe="true"
-          :header-cell-style="{
-            background: '#eef1f6',
-            color: '#606266',
-            height: '56px',
-          }"
-          style="width: 100%;"
-        >
-          <el-table-column
-            type="index"
-            header-align="center"
-            align="center"
-            label="序号"
-            width="50"
+            <el-table-column prop="name"> </el-table-column>
+            <el-table-column
+              v-for="(item, index) in workingProcedure"
+              :key="item.id"
+              :label="item.workingProcedureName"
+            >
+              <template slot-scope="scope">
+                <el-checkbox
+                  @change="
+                    (checked) => CheckboxChange(checked, scope.row.id, item.workingProcedureId)
+                  "
+                  :checked="scope.row['checked' + index]"
+                >
+                </el-checkbox>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane label="特性列表">
+          <el-table
+            :data="dataList"
+            :stripe="true"
+            :header-cell-style="{
+              background: '#eef1f6',
+              color: '#606266',
+              height: '56px',
+            }"
+            style="width: 100%;"
           >
-          </el-table-column>
-          <el-table-column prop="code" label="编号"> </el-table-column>
-          <el-table-column prop="name" label="名称"></el-table-column>
-          <el-table-column prop="type" label="特性类型">
-            <template slot-scope="scope">
-              <span>{{ scope.row.type === 2 ? "计数" : "计量" }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="defectLevel" label="缺陷等级">
-            <template slot-scope="scope">
-              <span>{{
-                scope.row.defectLevel === 1
-                  ? "致命缺陷"
-                  : scope.row.defectLevel === 2
-                  ? "严重缺陷"
-                  : "轻微缺陷"
-              }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="measureToolName" label="量具"></el-table-column>
-          <el-table-column prop="isSpc" label="SPC">
-            <template slot-scope="scope">
-              <span>{{ scope.row.isSpc === 1 ? "是" : "否" }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="controlGraphName" label="分析图形"></el-table-column>
-          <el-table-column prop="sampleSize" label="样本大小"></el-table-column>
-          <el-table-column prop="samplingFrequency" label="抽样频率"></el-table-column>
-          <el-table-column prop="unitName" label="单位"></el-table-column>
-          <el-table-column prop="decimalPlaces" label="小数位数"></el-table-column>
-          <el-table-column prop="specifications" label="规格"></el-table-column>
-          <el-table-column prop="lsl" label="LSL"></el-table-column>
-          <el-table-column prop="sl" label="SL"></el-table-column>
-          <el-table-column prop="usl" label="USL"></el-table-column>
-          <el-table-column prop="targetCpk" label="目标CPK"></el-table-column>
-          <el-table-column prop="targetPpk" label="目标PPK"></el-table-column>
-          <el-table-column prop="remark" label="OPC取值标签"></el-table-column>
-          <el-table-column prop="remark" label="备注"></el-table-column>
-          <el-table-column
-            fixed="right"
-            header-align="center"
-            align="center"
-            width="150"
-            label="操作"
-          >
-            <template slot-scope="scope">
-              <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">
-                <el-tooltip class="item" effect="dark" content="修改" placement="top">
-                  <svg class="icon-svg aui-sidebar__menu-icon">
-                    <use xlink:href="#icon-编辑"></use>
-                  </svg>
-                </el-tooltip>
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-tab-pane>
-    </el-tabs>
+            <el-table-column
+              type="index"
+              header-align="center"
+              align="center"
+              label="序号"
+              width="50"
+            >
+            </el-table-column>
+            <el-table-column prop="code" label="编号"> </el-table-column>
+            <el-table-column prop="name" label="名称"></el-table-column>
+            <el-table-column prop="type" label="特性类型">
+              <template slot-scope="scope">
+                <span>{{ scope.row.type === 2 ? "计数" : "计量" }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="defectLevel" label="缺陷等级">
+              <template slot-scope="scope">
+                <span>{{
+                  scope.row.defectLevel === 1
+                    ? "致命缺陷"
+                    : scope.row.defectLevel === 2
+                    ? "严重缺陷"
+                    : "轻微缺陷"
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="measureToolName" label="量具"></el-table-column>
+            <el-table-column prop="isSpc" label="SPC">
+              <template slot-scope="scope">
+                <span>{{ scope.row.isSpc === 1 ? "是" : "否" }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="controlGraphName" label="分析图形"></el-table-column>
+            <el-table-column prop="sampleSize" label="样本大小"></el-table-column>
+            <el-table-column prop="samplingFrequency" label="抽样频率"></el-table-column>
+            <el-table-column prop="unitName" label="单位"></el-table-column>
+            <el-table-column prop="decimalPlaces" label="小数位数"></el-table-column>
+            <el-table-column prop="specifications" label="规格"></el-table-column>
+            <el-table-column prop="lsl" label="LSL"></el-table-column>
+            <el-table-column prop="sl" label="SL"></el-table-column>
+            <el-table-column prop="usl" label="USL"></el-table-column>
+            <el-table-column prop="targetCpk" label="目标CPK"></el-table-column>
+            <el-table-column prop="targetPpk" label="目标PPK"></el-table-column>
+            <el-table-column prop="remark" label="备注"></el-table-column>
+            <el-table-column
+              fixed="right"
+              header-align="center"
+              align="center"
+              width="150"
+              label="操作"
+            >
+              <template slot-scope="scope">
+                <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">
+                  <el-tooltip class="item" effect="dark" content="修改" placement="top">
+                    <svg class="icon-svg aui-sidebar__menu-icon">
+                      <use xlink:href="#icon-编辑"></use>
+                    </svg>
+                  </el-tooltip>
+                </el-button>
+                <el-button type="text" size="small" @click="productFeaturesHis(scope.row.id)">
+                  <el-tooltip class="item" effect="dark" content="历史记录" placement="top">
+                    <svg class="icon-svg aui-sidebar__menu-icon">
+                      <use xlink:href="#历史记录"></use>
+                    </svg>
+                  </el-tooltip>
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+    <el-empty
+      v-else
+      description="该产品没有配置产品特性或工序，暂时不能分配过程控制特性"
+    ></el-empty>
     <four-add-or-update
       v-if="fourAddOrUpdateVisible"
       ref="fourAddOrUpdate"
       @refreshFourDataList="getFourDataList"
     ></four-add-or-update>
+    <four-history
+      v-if="productFeaturesHisVisible"
+      ref="productFeaturesHisRef"
+    ></four-history>
   </div>
 </template>
 
 <script>
 import fourAddOrUpdate from "./productList-four-add";
+import fourHistory from "./productList-four-history";
 export default {
   props: {
     productFeaturesOptions: {
@@ -112,58 +148,153 @@ export default {
         return [];
       },
     },
+    workingProcedure: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    productId: {
+      type: String,
+    },
   },
   data() {
     return {
       fourAddOrUpdateVisible: false,
+      productFeaturesList: [],
       dataList: [],
-      Id: '',
-      productFeaturesArr: [],
+      setBatchInsert: [],
+      inspectionStage: 0,
+      dataListLoading: false,
+      productFeaturesHisVisible:false,
     };
   },
   components: {
     fourAddOrUpdate,
+    fourHistory,
   },
   methods: {
-    init(label, productId) {
-      console.log(label);
-      this.Id = productId;
+    init(index) {
+      this.dataListLoading = false;
+      this.inspectionStage = parseInt(index) + 1;
+      this.productFeaturesList.splice(0, this.productFeaturesList.length);
       this.$nextTick(() => {
-        if (this.Id) {
+        this.getSelection();
+        if (this.productId) {
         }
       });
     },
+    getSelection() {
+      this.setBatchInsert.splice(0, this.setBatchInsert.length);
+      this.dataListLoading = true;
+      this.$http
+        .post(
+          `/basic/productFeatures/getFeaturesByStageProcedure?inspectionStage=${this.inspectionStage}&productId=${this.productId}`
+        )
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.productFeaturesList = this.productFeaturesOptions.map((item) => {
+            const obj = Object.assign({}, item);
+            this.workingProcedure.forEach((item1, index) => {
+              res.data.forEach((item2) => {
+                if (item2.productFeaturesId === item.id) {
+                  if (item2.workingProcedureId === item1.workingProcedureId) {
+                    Object.assign(obj, { ["checked" + index]: true });
+                    this.CheckboxChange(true, item2.productFeaturesId, item2.workingProcedureId);
+                  }
+                }
+              });
+            });
+            return obj;
+          });
+          this.dataListLoading = false;
+        })
+        .catch((e) => {
+          console.log(e);
+          this.dataListLoading = false;
+        });
+    },
     tabClick(val) {
       if (val.label === "特性列表") {
-        this.dataList = this.productFeaturesOptions.filter((item) => {
-          if (this.productFeaturesArr.indexOf(item.id) > -1) {
-            return item;
-          }
-        });
+        this.getFourDataList();
       }
     },
     // 新增 / 修改
     addOrUpdateHandle(id) {
       this.fourAddOrUpdateVisible = true;
       this.$nextTick(() => {
-        this.$refs.fourAddOrUpdate.init(id, this.Id);
+        this.$refs.fourAddOrUpdate.init(id, this.productId);
       });
     },
+    deleteFeatures() {
+      this.workingProcedure.forEach((item, index) => {
+        this.$http
+          .delete(`/basic/featuresStageProcedureRelation/deleteByStageProcedure?inspectionStage=${this.inspectionStage}&productId=${this.productId}&workingProcedureId=${item.workingProcedureId}`)
+          .then(({ data: res }) => {
+            if (res.code !== 0) {
+              return this.$message.error(res.msg);
+            }
+            if (index === this.workingProcedure.length - 1) {
+              this.addFeatures();
+            }
+          })
+          .catch(() => {});
+      });
+    },
+    addFeatures() {
+      this.$http
+        .post("/basic/featuresStageProcedureRelation/batchInsert", [...this.setBatchInsert])
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+        })
+        .catch(() => {});
+    },
+    CheckboxChange(checked, productFeaturesId, workingProcedureId) {
+      this.setBatchInsert = [...this.setBatchInsert];
+      if (checked) {
+        const obj = {
+          inspectionStage: parseInt(this.inspectionStage),
+          productFeaturesId: productFeaturesId,
+          workingProcedureId: workingProcedureId,
+        };
+        this.setBatchInsert.push(obj);
+      } else {
+        const id1 = this.setBatchInsert.findIndex((item) => {
+          if (
+            item.productFeaturesId === productFeaturesId &&
+            item.workingProcedureId === workingProcedureId
+          ) {
+            return true;
+          }
+        });
+        this.setBatchInsert.splice(id1, 1);
+      }
+    },
     getFourDataList() {
       this.$http
-        .post("/basic/productFeatures/getProductFeaturesByProductId", {
-          id: this.Id,
-        })
+        .post(
+          `/basic/productFeatures/getFeaturesList?inspectionStage=${this.inspectionStage}&productId=${this.productId}`
+        )
         .then(({ data: res }) => {
           if (res.code !== 0) {
-            this.productFeaturesOptions = [];
+            this.dataList = [];
             return this.$message.error(res.msg);
           }
-          this.productFeaturesOptions = res.data;
-          this.tabClick()
+          this.dataList = res.data;
+          this.tabClick();
         })
         .catch(() => {});
     },
+    productFeaturesHis(id){
+        this.productFeaturesHisVisible = true;
+        this.$nextTick(() => {
+          this.$refs.productFeaturesHisRef.init(id);
+        });
+    },
     // 表单提交
     dataFormSubmit() {},
   },
diff --git a/src/views/spc-basic/components/productList-four-history.vue b/src/views/spc-basic/components/productList-four-history.vue
new file mode 100644
index 0000000..03a5218
--- /dev/null
+++ b/src/views/spc-basic/components/productList-four-history.vue
@@ -0,0 +1,98 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-11-18 14:16:25
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-09-07 16:06:00
+ * @Description:
+-->
+<template>
+  <el-dialog title="历史记录" append-to-body :visible.sync="hisVisible">
+    <el-table
+      :data="dataList"
+      :stripe="true"
+      :header-cell-style="{
+        background: '#eef1f6',
+        color: '#606266',
+        height: '56px',
+      }"
+      style="width: 100%;"
+    >
+      <el-table-column type="index" header-align="center" align="center" label="序号" width="50">
+      </el-table-column>
+      <el-table-column prop="code" label="编号"> </el-table-column>
+      <el-table-column prop="name" label="名称"></el-table-column>
+      <el-table-column prop="type" label="特性类型">
+        <template slot-scope="scope">
+          <span>{{ scope.row.type === 2 ? "计数" : "计量" }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="defectLevel" label="缺陷等级">
+        <template slot-scope="scope">
+          <span>{{
+            scope.row.defectLevel === 1
+              ? "致命缺陷"
+              : scope.row.defectLevel === 2
+              ? "严重缺陷"
+              : "轻微缺陷"
+          }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="measureToolName" label="量具"></el-table-column>
+      <el-table-column prop="isSpc" label="SPC">
+        <template slot-scope="scope">
+          <span>{{ scope.row.isSpc === 1 ? "是" : "否" }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="controlGraphName" label="分析图形"></el-table-column>
+      <el-table-column prop="sampleSize" label="样本大小"></el-table-column>
+      <el-table-column prop="samplingFrequency" label="抽样频率"></el-table-column>
+      <el-table-column prop="unitName" label="单位"></el-table-column>
+      <el-table-column prop="decimalPlaces" label="小数位数"></el-table-column>
+      <el-table-column prop="specifications" label="规格"></el-table-column>
+      <el-table-column prop="lsl" label="LSL"></el-table-column>
+      <el-table-column prop="sl" label="SL"></el-table-column>
+      <el-table-column prop="usl" label="USL"></el-table-column>
+      <el-table-column prop="targetCpk" label="目标CPK"></el-table-column>
+      <el-table-column prop="targetPpk" label="目标PPK"></el-table-column>
+      <el-table-column prop="remark" label="备注"></el-table-column>
+    </el-table>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="hisVisible = false">关闭</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      hisVisible: false,
+      dataList: [],
+    };
+  },
+  created() {},
+  methods: {
+    init(id) {
+      this.hisVisible = true;
+      this.$nextTick(() => {
+        this.$http
+          .get("/basic/productFeaturesHis/page", {
+            params: {
+              id: id,
+              page: 1,
+              limit: 100,
+            },
+          })
+          .then(({ data: res }) => {
+            if (res.code !== 0) {
+              this.dataList = [];
+              return this.$message.error(res.msg);
+            }
+            this.dataList = res.data.list;
+          })
+          .catch(() => {});
+      });
+    },
+  },
+};
+</script>
diff --git a/src/views/spc-basic/components/productList-four.vue b/src/views/spc-basic/components/productList-four.vue
index a570f29..e06dccb 100644
--- a/src/views/spc-basic/components/productList-four.vue
+++ b/src/views/spc-basic/components/productList-four.vue
@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-11-18 14:16:25
  * @LastEditors: zwq
- * @LastEditTime: 2022-09-01 10:22:48
+ * @LastEditTime: 2022-09-05 15:25:52
  * @Description:
 -->
 <template>
@@ -13,13 +13,15 @@
         :key="index"
         :label="inspectionStageOptions[item]"
       >
-    <four-content
-      style="margin-left:10px"
-      v-if="inspectionStageArr.length"
-      ref="fourContentRef"
-      :product-features-options="dataList"
-    ></four-content>
-    </el-tab-pane>
+        <four-content
+          style="margin-left:10px"
+          v-if="inspectionStageArr.length"
+          ref="fourContentRef"
+          :product-id="productId"
+          :product-features-options="dataList"
+          :working-procedure="workingProcedure"
+        ></four-content>
+      </el-tab-pane>
     </el-tabs>
   </div>
 </template>
@@ -41,6 +43,7 @@ export default {
   data() {
     return {
       dataList: [],
+      workingProcedure: [],
       inspectionStageOptions: {
         "1": "进货检验",
         "2": "过程检验",
@@ -54,7 +57,7 @@ export default {
   },
   methods: {
     init() {
-      this.inspectionStageArr.sort()
+      this.inspectionStageArr.sort();
       this.$nextTick(() => {
         if (this.productId) {
           this.getFourDataList();
@@ -74,9 +77,22 @@ export default {
           this.dataList = res.data;
         })
         .catch(() => {});
+      this.$http
+        .get(
+          `/basic/productWorkingprocedureRelation/getWorkingprocedureByProductId/${this.productId}`
+        )
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            this.workingProcedure = [];
+            return this.$message.error(res.msg);
+          }
+          this.workingProcedure = res.data;
+          this.$refs.fourContentRef[0].init(0);
+        })
+        .catch(() => {});
     },
-    tabClick(val){
-        this.$refs.fourContentRef[val.index].init(val.label, this.productId);
+    tabClick(val) {
+      this.$refs.fourContentRef[val.index].init(val.index);
     },
     // 表单提交
     dataFormSubmit() {
diff --git a/src/views/spc-basic/components/productList-two-table.vue b/src/views/spc-basic/components/productList-two-table.vue
new file mode 100644
index 0000000..5659b6e
--- /dev/null
+++ b/src/views/spc-basic/components/productList-two-table.vue
@@ -0,0 +1,227 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-11-18 14:16:25
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-09-07 15:25:36
+ * @Description:
+-->
+<template>
+  <div>
+    <div style="margin-bottom:20px">
+      <el-tooltip content="选择工序,新增到表格" placement="top">
+        <el-select
+          size="small"
+          v-model="processId"
+          @change="addProcess"
+          clearable
+          filterable
+          placeholder="请选择"
+        >
+          <el-option v-for="item in processArr" :key="item.id" :label="item.name" :value="item.id">
+          </el-option>
+        </el-select>
+      </el-tooltip>
+    </div>
+    <el-table
+      :data="dataList"
+      :stripe="true"
+      :header-cell-style="{
+        background: '#eef1f6',
+        color: '#606266',
+        height: '56px',
+      }"
+      v-loading="dataListLoading"
+      style="width: 100%;"
+    >
+      <el-table-column type="index" header-align="center" align="center" label="序号" width="50">
+      </el-table-column>
+      <el-table-column prop="workingProcedureName" label="工序名称"> </el-table-column>
+      <el-table-column prop="workingProcedureCode" label="工序编码"> </el-table-column>
+      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            style="color:red"
+            size="small"
+            @click="deleteHandle(scope.row.id, scope.row.workingProcedureName)"
+          >
+            <el-tooltip class="item" effect="dark" content="删除" placement="top">
+              <svg class="icon-svg aui-sidebar__menu-icon"><use xlink:href="#icon-删除"></use></svg>
+            </el-tooltip>
+          </el-button>
+          <el-button
+            type="text"
+            style="color:#57e1ff"
+            :disabled="scope.$index === 0"
+            size="small"
+            @click="setSequence(scope.$index + 1, true)"
+          >
+            <el-tooltip class="item" effect="dark" content="上移" placement="top">
+              <svg class="icon-svg aui-sidebar__menu-icon"><use xlink:href="#上箭头"></use></svg>
+            </el-tooltip>
+          </el-button>
+          <el-button
+            type="text"
+            style="color:#57e1ff"
+            size="small"
+            :disabled="scope.$index === dataList.length - 1"
+            @click="setSequence(scope.$index + 1, false)"
+          >
+            <el-tooltip class="item" effect="dark" content="下移" placement="top">
+              <svg class="icon-svg aui-sidebar__menu-icon"><use xlink:href="#下箭头"></use></svg>
+            </el-tooltip>
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    productId: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      dataListLoading: false,
+      dataList: [],
+      processArr: [],
+      processId: "",
+    };
+  },
+  methods: {
+    getArr() {
+      this.$http
+        .get("/basic/workingProcedure/page", {
+          params: {
+            page: 1,
+            limit: 500,
+          },
+        })
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.processArr = res.data.list;
+        })
+        .catch(() => {});
+    },
+    getList() {
+      this.dataListLoading = true;
+      this.$http
+        .get(
+          `/basic/productWorkingprocedureRelation/getWorkingprocedureByProductId/${this.productId}`
+        )
+        .then(({ data: res }) => {
+          this.dataListLoading = false;
+          if (res.code !== 0) {
+            this.dataList = [];
+            return this.$message.error(res.msg);
+          }
+          this.dataList = res.data;
+        })
+        .catch(() => {
+          this.dataListLoading = false;
+        });
+    },
+    init() {
+      this.getArr();
+      this.dataListLoading = false;
+      this.$nextTick(() => {
+        this.processId = "";
+        if (this.productId) {
+          this.getList();
+        } else {
+          this.dataList = [];
+        }
+      });
+    },
+    addProcess() {
+      if (this.processId) {
+        this.$confirm(`确定新增此工序?`, "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }).then(() => {
+          this.$http
+            .post("/basic/productWorkingprocedureRelation/save", {
+              workingProcedureId: this.processId,
+              productId: this.productId,
+            })
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                return this.$message.error(res.msg);
+              }
+              this.$message({
+                message: this.$t("prompt.success"),
+                type: "success",
+                duration: 500,
+                onClose: () => {
+                  this.getList();
+                },
+              });
+            })
+            .catch(() => {});
+        });
+      }
+    },
+    setSequence(index, isUp) {
+      var url = "";
+      if (isUp) {
+        url = "/basic/productWorkingprocedureRelation/sequenceUp";
+      } else {
+        url = "/basic/productWorkingprocedureRelation/sequenceDown";
+      }
+      this.$http
+        .put(url, {
+          index: index,
+          productId: this.productId,
+        })
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.$message({
+            message: this.$t("prompt.success"),
+            type: "success",
+            duration: 500,
+            onClose: () => {
+              this.getList();
+            },
+          });
+        })
+        .catch(() => {});
+    },
+    // 删除
+    deleteHandle(id, name) {
+      this.$confirm(`确定对[名称=${name}]进行删除操作?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$http
+            .delete("/basic/productWorkingprocedureRelation", { data: [id] })
+            .then(({ data }) => {
+              if (data && data.code === 0) {
+                this.$message({
+                  message: "操作成功",
+                  type: "success",
+                  duration: 1500,
+                  onClose: () => {
+                    this.getList();
+                  },
+                });
+              } else {
+                this.$message.error(data.msg);
+              }
+            });
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
diff --git a/src/views/spc-basic/components/productList-two.vue b/src/views/spc-basic/components/productList-two.vue
index c4bce17..58ebea9 100644
--- a/src/views/spc-basic/components/productList-two.vue
+++ b/src/views/spc-basic/components/productList-two.vue
@@ -1,61 +1,33 @@
 <!--
  * @Author: zwq
- * @Date: 2021-11-18 14:16:25
+ * @Date: 2022-08-22 15:53:16
  * @LastEditors: zwq
- * @LastEditTime: 2022-08-31 09:38:20
- * @Description:
+ * @LastEditTime: 2022-09-08 14:28:56
+ * @Description: 
 -->
 <template>
-  <div>
-    <div style="margin-bottom:20px">
-      <el-tooltip content="选择工序,新增到表格" placement="top">
-      <el-select
-        size="small"
-        v-model="processId"
-        @change="addProcess"
-        clearable
-        filterable
-        placeholder="请选择"
-      >
-        <el-option v-for="item in processArr" :key="item.id" :label="item.name" :value="item.id">
-        </el-option>
-      </el-select>
-      </el-tooltip>
-    </div>
-    <el-table
-      :data="dataList"
-      :stripe="true"
-      :header-cell-style="{
-        background: '#eef1f6',
-        color: '#606266',
-        height: '56px',
-      }"
-      v-loading="dataListLoading"
-      style="width: 100%;"
-    >
-      <el-table-column type="index" header-align="center" align="center" label="序号" width="50">
-      </el-table-column>
-      <el-table-column prop="workingProcedureName" label="工序名称"> </el-table-column>
-      <el-table-column prop="workingProcedureCode" label="工序编码"> </el-table-column>
-      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
-        <template slot-scope="scope">
-          <el-button
-            type="text"
-            style="color:red"
-            size="small"
-            @click="deleteHandle(scope.row.id, scope.row.workingProcedureName)"
-          >
-            <el-tooltip class="item" effect="dark" content="删除" placement="top">
-              <svg class="icon-svg aui-sidebar__menu-icon"><use xlink:href="#icon-删除"></use></svg>
-            </el-tooltip>
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
+  <el-tabs @tab-click="tabClick">
+    <el-tab-pane label="表格模式">
+      <two-step-table
+        v-show="twoStepVisible"
+        ref="twoStepRef"
+        :product-id="productId"
+      ></two-step-table>
+    </el-tab-pane>
+    <el-tab-pane label="图形模式">
+      <process-flow-graph
+        v-show="graphVisible"
+        ref="graphRef"
+        :product-id="productId"
+      ></process-flow-graph>
+    </el-tab-pane>
+  </el-tabs>
 </template>
 
 <script>
+import processFlowGraph from "./processFlow-graph";
+import twoStepTable from "./productList-two-table";
+
 export default {
   props: {
     productId: {
@@ -64,109 +36,45 @@ export default {
   },
   data() {
     return {
-      dataListLoading: false,
-      dataList: [],
-      processArr: [],
-      processId: "",
+      flowDataList: [],
+      graphVisible: true,
+      twoStepVisible: false,
+      dataForm: {
+        paramKey: "",
+      },
+      paneName: "图形模式",
     };
   },
+  components: {
+    processFlowGraph,
+    twoStepTable,
+  },
+  created() {},
   methods: {
-    getArr() {
-      this.$http
-        .get("/basic/workingProcedure/page", {
-          params: {
-            page: 1,
-            limit: 500,
-          },
-        })
-        .then(({ data: res }) => {
-          if (res.code !== 0) {
-            return this.$message.error(res.msg);
-          }
-          this.processArr = res.data.list;
-        })
-        .catch(() => {});
-    },
-    getList() {
-      this.dataListLoading = true;
-      this.$http
-        .get(`/basic/productWorkingprocedureRelation/getWorkingprocedureByProductId/${this.productId}`)
-        .then(({ data: res }) => {
-          this.dataListLoading = false;
-          if (res.code !== 0) {
-            this.dataList = [];
-            return this.$message.error(res.msg);
-          }
-          this.dataList = res.data;
-        })
-        .catch(() => {
-          this.dataListLoading = false;
-        });
-    },
     init() {
-      this.getArr();
-      this.dataListLoading = false;
+      this.graphVisible = false;
+      this.twoStepVisible = true;
       this.$nextTick(() => {
-        this.processId = "";
-        if (this.productId) {
-          this.getList();
-        }
+        this.$refs.twoStepRef.init();
       });
     },
-    addProcess() {
-      if(this.processId){
-      this.$confirm(`确定新增此工序?`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      }).then(() => {
-        this.$http
-          .post("/basic/productWorkingprocedureRelation/save", {
-            workingProcedureId: this.processId,
-            productId: this.productId,
-          })
-          .then(({ data: res }) => {
-            if (res.code !== 0) {
-              return this.$message.error(res.msg);
-            }
-            this.$message({
-              message: this.$t("prompt.success"),
-              type: "success",
-              duration: 500,
-              onClose: () => {
-                this.getList();
-              },
-            });
-          })
-          .catch(() => {});
-      });
+    tabClick(val) {
+      this.paneName = val.label;
+      if (val.label === "图形模式") {
+        this.twoStepVisible = false;
+        this.graphVisible = true;
+        this.$nextTick(() => {
+          this.$refs.graphRef.init();
+        });
+      } else {
+        this.graphVisible = false;
+        this.twoStepVisible = true;
+        this.$refs.graphRef.GraphDelete();
+        this.$nextTick(() => {
+          this.$refs.twoStepRef.init();
+        });
       }
     },
-    // 删除
-    deleteHandle(id, name) {
-      this.$confirm(`确定对[名称=${name}]进行删除操作?`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          this.$http.delete("/basic/productWorkingprocedureRelation", { data: [id] }).then(({ data }) => {
-            if (data && data.code === 0) {
-              this.$message({
-                message: "操作成功",
-                type: "success",
-                duration: 1500,
-                onClose: () => {
-                  this.getList();
-                },
-              });
-            } else {
-              this.$message.error(data.msg);
-            }
-          });
-        })
-        .catch(() => {});
-    },
     // 表单提交
     dataFormSubmit() {
       this.$emit("nextStep");
diff --git a/src/views/spc-basic/processFlow.vue b/src/views/spc-basic/processFlow.vue
index 0366633..992025a 100644
--- a/src/views/spc-basic/processFlow.vue
+++ b/src/views/spc-basic/processFlow.vue
@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2022-08-22 15:53:16
  * @LastEditors: zwq
- * @LastEditTime: 2022-09-01 15:45:42
+ * @LastEditTime: 2022-09-01 16:42:08
  * @Description: 
 -->
 <template>
@@ -52,35 +52,51 @@
           <el-table-column prop="code" label="编码" fixed="left"> </el-table-column>
         </el-table>
       </el-col>
-      <el-col :span="14">
-    <process-flow-graph
-      ref="graphRef"
-      @refreshDataList="getDataList"
-    ></process-flow-graph>
+      <el-col :span="13" :offset="1">
+        <el-tabs @tab-click="tabClick">
+          <el-tab-pane label="图形模式">
+            <process-flow-graph
+              v-show="graphVisible"
+              ref="graphRef"
+              :product-id="productId"
+              @refreshDataList="getDataList"
+            ></process-flow-graph>
+          </el-tab-pane>
+          <el-tab-pane label="表格模式">
+            <two-step v-show="twoStepVisible" ref="twoStepRef" :product-id="productId"></two-step>
+          </el-tab-pane>
+        </el-tabs>
       </el-col>
     </el-row>
   </el-card>
 </template>
 
 <script>
-import processFlowGraph from './components/processFlow-graph'
+import processFlowGraph from "./components/processFlow-graph";
+import twoStep from "./components/productList-two";
 
 export default {
   data() {
     return {
       dataListLoading: false,
       dataList: [],
+      flowDataList: [],
+      graphVisible: true,
+      twoStepVisible: false,
       dataForm: {
         paramKey: "",
       },
-      currentRow: "",
+      productId: "",
+      paneName: "图形模式",
     };
   },
   components: {
     processFlowGraph,
+    twoStep,
   },
-  activated() {
+  created() {
     this.getDataList();
+    this.productId = ''
   },
   methods: {
     getDataList() {
@@ -106,9 +122,30 @@ export default {
           this.dataListLoading = false;
         });
     },
+    tabClick(val) {
+      this.paneName = val.label;
+      if (val.label === "图形模式") {
+        this.twoStepVisible = false;
+        this.graphVisible = true;
+        this.$nextTick(() => {
+          this.$refs.graphRef.init();
+        });
+      } else {
+        this.graphVisible = false;
+        this.twoStepVisible = true;
+        this.$nextTick(() => {
+          this.$refs.twoStepRef.init();
+        });
+      }
+    },
     handleCurrentChange(val) {
-      console.log(val);
-      this.currentRow = val;
+      if (val) {
+        this.productId = val.id;
+        const obj = {
+          label: this.paneName,
+        };
+        this.tabClick(obj);
+      }
     },
   },
 };