更新

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}`
     },
     // 表单提交

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',
+      }
+    ],
+}

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>

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>

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() {

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() {},
   },

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>

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() {

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>

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");

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);
+      }
     },
   },
 };