sop编辑

src/components/separationPoint/index.vue

@@ -5,7 +5,7 @@
 <script>
 import Konva from "konva";
 import { selectIsIsolationPointById } from "@/api/mes/spm/segregationPoint";
-import {  mapGetters } from 'vuex'
+import { mapGetters } from "vuex";
 
 export default {
   name: "KonvaExample",
@@ -31,16 +31,16 @@ export default {
   mounted() {
     this.initKonva();
     console.log(this.points, "points");
-    console.log(this.getSelectSopPoints, 'selectSopPoints in another page');
-
+    console.log(
+      this.getSelectSopPoints,
+      this.getSopEdit,
+      "selectSopPoints in another page"
+    );
   },
   computed: {
-    ...mapGetters('sopSelectPoints', [
-      'getSelectSopPoints'
-    ])
+    ...mapGetters("sopSelectPoints", ["getSelectSopPoints", "getSopEdit"]),
   },
   methods: {
-
     initKonva() {
       // 创建舞台
       this.stage = new Konva.Stage({
@@ -124,14 +124,14 @@ export default {
       // 检查 this.getSelectSopPoints 是否有内容
       const isLocked = this.getSelectSopPoints.length > 0;
 
-      // 添加或移除全局点击事件监听器
-      if (isLocked) {
-        this.layer.on('click', (e) => {
+      // 添加或移除全局点击事件监听器 this.getSopEdit这是vuex里判断是否可以选择隔离点的操作
+      if (isLocked && this.getSopEdit == true) {
+        this.layer.on("click", (e) => {
           e.cancelBubble = true; // 阻止事件冒泡
           e.stopPropagation(); // 阻止事件传播
         });
       } else {
-        this.layer.off('click'); // 移除全局点击事件监听器
+        this.layer.off("click"); // 移除全局点击事件监听器
       }
 
       positions.forEach((pos, index) => {
@@ -150,71 +150,65 @@ export default {
             height: 50,
             draggable: false,
           });
-
-          if (!isLocked) {
+          // 添加点击事件，仅当 getSopEdit 为 true 时才允许点击
+          if (this.getSopEdit === true) {
             knovaImage.on("click", () => {
               // 切换选中状态，基于文本内容
               this.selectedStates[labelText] = !this.selectedStates[labelText];
 
-              // 判断当前是否选中
               if (this.selectedStates[labelText]) {
-                // 选中状态
-                // 显示红色矩形和文字，隐藏普通矩形和文字
+                // 选中状态，显示红色矩形和文字，切换为选中的图片
                 this.rects[labelText].visible(false);
                 this.texts[labelText].visible(false);
                 this.redrects[labelText].visible(true);
                 this.redtexts[labelText].visible(true);
 
-                // 切换图片为选中状态的图片
                 const selectedImage = new Image();
-                selectedImage.src = require("@/assets/images/localSetSelect.jpg"); // 选中的图片路径
+                selectedImage.src = require("@/assets/images/localSetSelect.jpg");
                 selectedImage.onload = () => {
                   knovaImage.image(selectedImage); // 更新图像
                   this.layer.draw(); // 更新图层
                 };
 
+                // 获取隔离点信息，并将选中的 labelText 推入数组
                 this.$nextTick(() => {
                   selectIsIsolationPointById(pos.pointId).then((res) => {
-                    console.log(res, "拿到的隔离点信息");
-                    // 将选中的 labelText 推入数组
                     this.selectedText.push({
                       pointName: res.data.pointName,
                       pointId: res.data.pointId,
                       pointType: res.data.pointType,
                       powerType: res.data.powerType,
                     });
-
                     this.$emit("selection-changed", this.selectedText);
                   });
                 });
               } else {
-                // 取消选中状态
-                // 显示普通矩形和文字，隐藏红色矩形和文字
+                // 取消选中状态，恢复普通矩形和文字，切换为未选中的图片
                 this.rects[labelText].visible(true);
                 this.texts[labelText].visible(true);
                 this.redrects[labelText].visible(false);
                 this.redtexts[labelText].visible(false);
 
-                // 切换图片为未选中状态的图片
                 const normalImage = new Image();
                 normalImage.src = imageSrc; // 未选中的默认图片路径
                 normalImage.onload = () => {
                   knovaImage.image(normalImage); // 更新图像
                   this.layer.draw(); // 更新图层
                 };
+
                 // 从选中数组中移除该项
                 this.selectedText = this.selectedText.filter(
                   (item) => item.pointName !== labelText
                 );
               }
-              // 最后确保图层重新渲染
-              this.layer.draw();
 
-              // 传递选中的元素文本到父组件
+              // 确保图层重新渲染
+              this.layer.draw();
               this.$emit("selection-changed", this.selectedText);
             });
           }
 
+
           this.layer.add(knovaImage);
 
           // 普通矩形

src/components/separationPoint/workshop.vue

@@ -116,6 +116,7 @@ export default {
           });
           // 调用 Vuex action 来存储 selectSopPoints
           this.setSelectSopPoints(selectSopPoints);
+          this.setSopEdit(true)
           console.log(selectSopPoints, "sop_selectePoints");
         });
       },
@@ -146,6 +147,7 @@ export default {
           // 调用 Vuex action 来存储 selectSopPoints
           this.setSelectSopPoints(selectSopPoints);
           this.setPointTableData(res.data)
+          this.setSopEdit(false)
           console.log(selectSopPoints, "sop_selectePoints");
         });
       },
@@ -158,7 +160,7 @@ export default {
 
   methods: {
     ...mapActions('sopSelectPoints', [
-      'setSelectSopPoints','setPointTableData'
+      'setSelectSopPoints','setPointTableData','setSopEdit'
     ]),
     // 获取车间列表
     getworkshopList() {

src/store/modules/sopSelectPoints.js

@@ -1,7 +1,8 @@
 // store/modules/sopSelectPoints.js
 const state = {
   selectSopPoints: [],
-  PointTableData:[]
+  PointTableData: [],
+  sopEdit:null
 };
 
 const mutations = {
@@ -10,6 +11,9 @@ const mutations = {
   },
   setPointTableData(state, points){
     state.PointTableData = points;
+  },
+  setSopEdit(state, points){
+    state.sopEdit = points;
   }
 };
 
@@ -19,12 +23,16 @@ const actions = {
   },
   setPointTableData({ commit }, points){
     commit('setPointTableData', points);
+  },
+  setSopEdit({ commit }, points){
+    commit('setSopEdit', points);
   }
 };
 
 const getters = {
   getSelectSopPoints: state => state.selectSopPoints,
-  getPointTableData:state => state.PointTableData
+  getPointTableData: state => state.PointTableData,
+  getSopEdit: state => state.sopEdit
 };
 
 export default {

src/views/mes/sop/sopm/NewSop.vue

@@ -54,7 +54,7 @@
                       style="width: 100%"
                     >
                       <el-option
-                        v-for="dict in this.sopTypeList"
+                        v-for="dict in dict.type.sop_type"
                         :key="dict.value"
                         :label="dict.label"
                         :value="dict.value"
@@ -177,7 +177,7 @@ import {
 } from "@/api/mes/sop/sopindex";
 export default {
   name: "addView",
-  dicts: ["power_type", "point_type"],
+  dicts: ["power_type", "point_type", "sop_type"],
   components: {
     SopLeft,
     IsolationLeftVue,
@@ -253,19 +253,6 @@ export default {
     },
 
     // 详情数据
-    // getSopInfo() {
-    //   const sopId = this.$route.query.sopId;
-    //   console.log(this.$route.query.sopId, "接受路由参数");
-
-    //   selectIsSopById(sopId).then((response) => {
-    //     console.log(response, "详细内容");
-    //     this.form = response.data;
-    //     this.sopProps = [response.data];
-    //     this.tableData = response.data.pointDetailVOList;
-    //     // console.log(this.form, "data数据内容");
-    //     this.title = "修改隔离点信息";
-    //   });
-    // },
     getSopInfo() {
       const sopId = this.$route.query.sopId;
       console.log(this.$route.query.sopId, "接受路由参数");
@@ -291,78 +278,19 @@ export default {
         };
       }
     },
-    // 检查 sopId 是否存在且不为 "null"。如果存在，则调用 getSopById 方法从后端获取数据，并将数据填充到 form 和其他相关字段中。
-
-    // 新增sop确认按钮
-    // submit() {
-    //   const selectedpointIds = this.form.spoint.join(",");
-    //   const data = {
-    //     pointIds: selectedpointIds,
-    //     sopContent: this.form.sopContent,
-    //     sopCode: this.form.sopCode,
-    //     sopName: this.form.sopName,
-    //     sopType: this.form.sopType,
-    //     workareaId: this.points.value,
-    //     workshopId: this.emitWorkShop.value,
-    //   };
-    //   if (this.$route.query.sopId !== "null") {
-    //     // this.form.spoint = this.form.spoint.join(",");
-    //     updateIsSop(data).then((res) => {
-    //       console.log(res, "修改接口");
-    //       if (res.code == 200) {
-    //         this.$router.go(-1);
-    //       }
-    //     });
-    //   } else {
-    //     addinsertIsSop(data).then((res) => {
-    //       console.log(res, "新增接口");
-    //       if (res.code == 200) {
-    //         this.$router.go(-1);
-    //       }
-    //     });
-    //   }
-    // },
-
-    // submit() {
-    //   // 确保 this.form.spoint 是一个数组
-    //   if (!Array.isArray(this.form.spoint)) {
-    //     this.form.spoint = [];
-    //   }
-
-    //   const selectedpointIds = this.form.spoint.join(",");
-    //   const data = {
-    //     pointIds: selectedpointIds,
-    //     sopContent: this.form.sopContent,
-    //     sopCode: this.form.sopCode,
-    //     sopName: this.form.sopName,
-    //     sopType: this.form.sopType,
-    //     workareaId: this.points.value,
-    //     workshopId: this.emitWorkShop.value,
-    //   };
-
-    //   if (this.$route.query.sopId) {
-    //     updateIsSop(data).then((res) => {
-    //       console.log(res, "修改接口");
-    //       if (res.code == 200) {
-    //         this.$router.go(-1);
-    //       }
-    //     });
-    //   } else {
-    //     addinsertIsSop(data).then((res) => {
-    //       console.log(res, "新增接口");
-    //       if (res.code == 200) {
-    //         this.$router.go(-1);
-    //       }
-    //     });
-    //   }
-    // },
     submit() {
-      // 确保 this.form.spoint 是一个数组
+      // 确保 this.form.spoint 是一个数组，如果为空则默认空数组
       if (!Array.isArray(this.form.spoint)) {
         this.form.spoint = [];
       }
 
+      // 如果没有选中点，逆向传递为空时，使用当前表格数据中的点
+      if (this.form.spoint.length === 0 && Array.isArray(this.tableData)) {
+        this.form.spoint = this.tableData.map((point) => point.pointId);
+      }
+
       const selectedpointIds = this.form.spoint.join(",");
+
       const data = {
         pointIds: selectedpointIds,
         sopContent: this.form.sopContent,
@@ -373,11 +301,12 @@ export default {
         workshopId: this.emitWorkShop.value,
       };
 
+      // 编辑模式
       if (this.$route.query.sopId) {
         // 确保 sopId 存在
         if (!this.form.sopId) {
           console.error("隔离点id不可为空!");
-          this.$message.error("隔离点id不可为空!"); // 假设你使用的是 Element UI 的消息提示
+          this.$message.error("隔离点id不可为空!"); // 使用消息提示
           return;
         }
 
@@ -390,6 +319,7 @@ export default {
           }
         });
       } else {
+        // 新增模式
         addinsertIsSop(data).then((res) => {
           console.log(res, "新增接口");
           if (res.code == 200) {
@@ -399,93 +329,145 @@ export default {
       }
     },
 
-    submit() {
-      // 确保 this.form.spoint 是一个数组
-      if (!Array.isArray(this.form.spoint)) {
-        this.form.spoint = [this.form.spoint]; // 将其转换为数组
-      }
+    // submit() {
+    //   // 确保 this.form.spoint 是一个数组
+    //   // if (!Array.isArray(this.form.spoint)) {
+    //   //   this.form.spoint = [];
+    //   // }
 
-      const selectedpointIds = this.form.spoint.join(",");
+    //   const selectedpointIds = this.form.spoint.join(",");
+    //   const data = {
+    //     pointIds: selectedpointIds,
+    //     sopContent: this.form.sopContent,
+    //     sopCode: this.form.sopCode,
+    //     sopName: this.form.sopName,
+    //     sopType: this.form.sopType,
+    //     workareaId: this.points.value,
+    //     workshopId: this.emitWorkShop.value,
+    //   };
 
-      const data = {
-        pointIds: selectedpointIds,
-        sopContent: this.form.sopContent,
-        sopCode: this.form.sopCode,
-        sopName: this.form.sopName,
-        sopType: this.form.sopType,
-        workareaId: this.points.value,
-        workshopId: this.emitWorkShop.value,
-      };
+    //   if (this.$route.query.sopId) {
+    //     // 确保 sopId 存在
+    //     if (!this.form.sopId) {
+    //       console.error("隔离点id不可为空!");
+    //       this.$message.error("隔离点id不可为空!"); // 假设你使用的是 Element UI 的消息提示
+    //       return;
+    //     }
 
-      if (this.$route.query.sopId) {
-        // 确保 sopId 存在
-        if (!this.form.sopId) {
-          this.$message.error("sopId不可为空!"); // 假设你使用的是 Element UI 的消息提示
-          return;
-        }
+    //     data.sopId = this.form.sopId;
 
-        data.sopId = this.form.sopId; // 添加 sopId 到 data 对象
-
-        updateIsSop(data)
-          .then((res) => {
-            console.log(res, "修改接口");
-            if (res.code === 200) {
-              this.$router.go(-1);
-            }
-          })
-          .catch((error) => {
-            console.error("修改接口错误:", error);
-            this.$message.error("修改失败，请稍后再试!");
-          });
-      } else {
-        addinsertIsSop(data)
-          .then((res) => {
-            console.log(res, "新增接口");
-            if (res.code === 200) {
-              this.$router.go(-1);
-            }
-          })
-          .catch((error) => {
-            console.error("新增接口错误:", error);
-            this.$message.error("新增失败，请稍后再试!");
-          });
-      }
-    },
+    //     updateIsSop(data).then((res) => {
+    //       console.log(res, "修改接口");
+    //       if (res.code == 200) {
+    //         this.$router.go(-1);
+    //       }
+    //     });
+    //   } else {
+    //     addinsertIsSop(data).then((res) => {
+    //       console.log(res, "新增接口");
+    //       if (res.code == 200) {
+    //         this.$router.go(-1);
+    //       }
+    //     });
+    //   }
+    // },
 
     // 子组件逆向传递选中的隔离点
     handleSelectPoint(points) {
       console.log(points, "父组件接收逆向传递选中的隔离点");
 
-      // 使用 Set 来存储传递过来的点值
-      const newValues = new Set(points.map((point) => point.pointId));
-
-      // 1. 删除取消选中的点
-      this.tableData = this.tableData.filter((item) =>
-        newValues.has(item.pointId)
+      // 使用 Map 存储所有新选中的点，pointId 作为 key
+      const newPointsMap = new Map(
+        points.map((point) => [point.pointId, point])
       );
 
-      // 2. 确保新增点不会重复
-      const existingValues = new Set(
-        this.tableData.map((item) => item.pointId)
-      );
+      // 1. 保留原有的隔离点，更新其数据，如果新选中点中有对应的点，更新 pointType 和 powerType
+      this.tableData = this.tableData.map((existingPoint) => {
+        if (newPointsMap.has(existingPoint.pointId)) {
+          const newPoint = newPointsMap.get(existingPoint.pointId);
+          const updatedPoint = { ...existingPoint, ...newPoint };
+
+          // 删除 undefined 的 pointType 和 powerType
+          if (updatedPoint.pointType === undefined) {
+            delete updatedPoint.pointType;
+          }
+          if (updatedPoint.powerType === undefined) {
+            delete updatedPoint.powerType;
+          }
+
+          return updatedPoint;
+        }
+        return existingPoint; // 如果没有新数据，则保留原点
+      });
 
-      points.forEach((point) => {
-        // 如果当前传递的点不在已有的点集中，则添加
-        if (!existingValues.has(point.pointId)) {
-          this.tableData.push({
-            pointName: point.pointName, // 显示的名称
-            pointId: point.pointId, // 对应的值
-            pointType: point.pointType,
-            powerType: point.powerType,
-          });
-          // 将新点值添加到 Set 中
-          existingValues.add(point.value);
+      // 2. 添加新点到 tableData 中，如果它不存在并且 pointType 和 powerType 不为 undefined
+      points.forEach((newPoint) => {
+        const exists = this.tableData.some(
+          (item) => item.pointId === newPoint.pointId
+        );
+
+        // 确保 pointType 和 powerType 都存在，才添加
+        if (
+          !exists &&
+          newPoint.pointType !== undefined &&
+          newPoint.powerType !== undefined
+        ) {
+          const newPointData = {
+            pointName: newPoint.pointName,
+            pointId: newPoint.pointId,
+            pointType: newPoint.pointType,
+            powerType: newPoint.powerType,
+          };
+
+          this.tableData.push(newPointData);
         }
       });
 
-      // 更新 form.spoint 为最新选中的隔离点数组
-      this.form.spoint = points.map((point) => point.pointId);
+      // 3. 过滤掉 tableData 中不包含 pointType 或 powerType 的数据
+      this.tableData = this.tableData.filter(
+        (item) => item.pointType !== undefined && item.powerType !== undefined
+      );
+
+      // 更新 form.spoint 为最新选中的点的 pointId 数组
+      this.form.spoint = this.tableData.map((point) => point.pointId);
+
+      // 触发其他可能的更新逻辑，比如向父组件发送更新事件
+      this.$emit("selection-changed", this.tableData);
     },
+
+    // handleSelectPoint(points) {
+    //   console.log(points, "父组件接收逆向传递选中的隔离点");
+
+    //   // 使用 Set 来存储传递过来的点值
+    //   const newValues = new Set(points.map((point) => point.pointId));
+
+    //   // 1. 删除取消选中的点
+    //   this.tableData = this.tableData.filter((item) =>
+    //     newValues.has(item.pointId)
+    //   );
+
+    //   // 2. 确保新增点不会重复
+    //   const existingValues = new Set(
+    //     this.tableData.map((item) => item.pointId)
+    //   );
+
+    //   points.forEach((point) => {
+    //     // 如果当前传递的点不在已有的点集中，则添加
+    //     if (!existingValues.has(point.pointId)) {
+    //       this.tableData.push({
+    //         pointName: point.pointName, // 显示的名称
+    //         pointId: point.pointId, // 对应的值
+    //         pointType: point.pointType,
+    //         powerType: point.powerType,
+    //       });
+    //       // 将新点值添加到 Set 中
+    //       existingValues.add(point.value);
+    //     }
+    //   });
+
+    //   // 更新 form.spoint 为最新选中的隔离点数组
+    //   this.form.spoint = points.map((point) => point.pointId);
+    // },
     // 车间你逆向传递拿到的隔离点数据产线
     handleProductLineSelected(selectedOption) {
       // console.log(selectedOption, '父组件接收到的 selectedOption');