sop编辑选择隔离点修改问题冲突合并

src/components/separationPoint/index.vue

@@ -4,15 +4,15 @@
 
 <script>
 import Konva from "konva";
-import {selectIsIsolationPointById} from "@/api/mes/spm/segregationPoint"
+import { selectIsIsolationPointById } from "@/api/mes/spm/segregationPoint";
 
 export default {
   name: "KonvaExample",
   props: {
     points: {
       type: Object,
-      default: null
-    }
+      default: null,
+    },
   },
   data() {
     return {
@@ -20,16 +20,16 @@ export default {
       layer: null,
       selectedStates: [], // 用于存储每个元素的选中状态
       selectedText: [], // 用于存储未选中的元素文本
-      rects:[],//白色rect合集
-      texts:[],//白色text合集
-      redrects:[],//红色rect合集
-      redtexts:[],//白色text合集
+      rects: [], //白色rect合集
+      texts: [], //白色text合集
+      redrects: [], //红色rect合集
+      redtexts: [], //白色text合集
     };
   },
 
-
   mounted() {
     this.initKonva();
+    console.log(this.points, "points");
   },
   methods: {
     initKonva() {
@@ -109,8 +109,8 @@ export default {
       this.redtexts = {};
       this.selectedText = [];
 
-      const positions=JSON.parse(this.points.map)
-      console.log(positions,'this.points')
+      const positions = JSON.parse(this.points.map);
+      console.log(positions, "this.points");
       // const positions = [
       //   { row: 2, col: 9 },
       //   { row: 2, col: 11 },
@@ -166,15 +166,15 @@ export default {
 
               // 切换图片为选中状态的图片
               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(); // 更新图层
               };
 
-              this.$nextTick(()=>{
-                selectIsIsolationPointById(pos.pointId).then((res)=>{
-                  console.log(res,'拿到的隔离点信息');
+              this.$nextTick(() => {
+                selectIsIsolationPointById(pos.pointId).then((res) => {
+                  console.log(res, "拿到的隔离点信息");
                   //将选中的 labelText 推入数组
                   this.selectedText.push({
                     pointName: res.data.pointName,
@@ -188,9 +188,8 @@ export default {
                   // });
 
                   this.$emit("selection-changed", this.selectedText);
-                })
-              })
-
+                });
+              });
             } else {
               // 取消选中状态
               // 显示普通矩形和文字，隐藏红色矩形和文字
@@ -218,7 +217,6 @@ export default {
             this.$emit("selection-changed", this.selectedText);
           });
 
-
           this.layer.add(knovaImage);
 
           // 普通矩形
@@ -280,11 +278,6 @@ export default {
       });
     },
 
-
-
-
-
-
     //     methods结束
   },
 };

src/components/separationPoint/workshop.vue

@@ -67,23 +67,20 @@
 <script>
 import { listAllWorkshop } from "@/api/mes/md/workshop";
 import { getIsWorkareaList } from "@/api/mes/wa/workarea";
-import {selectIsSopById} from "@/api/mes/sop/sopindex"
-import { mapActions, mapGetters } from 'vuex';
+import { selectIsSopById } from "@/api/mes/sop/sopindex";
+import { mapActions, mapGetters } from "vuex";
+
 export default {
   props: {
     sopProps: {
-      type: Object,
-      default: function () {
-        return {};
-      },
+      type: Array,
+      default: () => [],
+    },
+    jobProps: {
+      type: Array,
+      default: () => [],
     },
-    jobProps:{
-      type:Array,
-      default:()=>[]
-    }
   },
-
-
   data() {
     return {
       form: {
@@ -104,48 +101,56 @@ export default {
   watch: {
     // 监听父组件传递的数据
     sopProps: {
-      handler(newValue) {
-        this.form.workShop = newValue.workshopId;
-        this.form.producLine = newValue.workareaId;
+      handler(newVal, oldVal) {
+        console.log("sopProps 发生变化", newVal);
+        this.form.workShop = newVal[0].workshopId;
+        this.form.producLine = newVal[0].workareaId;
+        // 确保 handleselect 完成后再调用 handleselectProductLine
+        this.handleselect(newVal[0].workshopId)
+          .then(() => {
+            this.handleselectProductLine(newVal[0].workareaId);
+          })
+          .catch((error) => {
+            console.error("处理车间下拉失败", error);
+          });
       },
+      immediate: true, // 立即执行一次，确保在组件初始化时也能捕获到 jobProps 的值
     },
     jobProps: {
       handler(newVal, oldVal) {
-        console.log('jobProps 发生变化', newVal, oldVal);
+        console.log("jobProps 发生变化", newVal, oldVal);
         // 在这里处理 jobProps 变化后的逻辑
-        this.form.workShop=newVal[0].workshopId
-        this.form.producLine=newVal[0].workareaId
-        // this.handleselect(newVal[0].workshopId)
-        // this.handleselectProductLine(newVal[0].workareaId)
-
+        this.form.workShop = newVal[0].workshopId;
+        this.form.producLine = newVal[0].workareaId;
         // 确保 handleselect 完成后再调用 handleselectProductLine
-        this.handleselect(newVal[0].workshopId).then(() => {
-          this.handleselectProductLine(newVal[0].workareaId);
-        }).catch((error) => {
-          console.error('处理车间下拉失败', error);
-        });
+        this.handleselect(newVal[0].workshopId)
+          .then(() => {
+            this.handleselectProductLine(newVal[0].workareaId);
+          })
+          .catch((error) => {
+            console.error("处理车间下拉失败", error);
+          });
 
-       // 这里是为了拿到sop模板里默认的隔离点选中的数据
-        selectIsSopById(newVal[0].sopId).then(res => {
-            console.log(res,'sop')
-            const selectSopPoints=res.data.pointDetailVOList.map((item)=>{
-                return item.pointId
-            })
+        // 这里是为了拿到sop模板里默认的隔离点选中的数据
+        selectIsSopById(newVal[0].sopId).then((res) => {
+          console.log(res, "sop");
+          const selectSopPoints = res.data.pointDetailVOList.map((item) => {
+            return item.pointId;
+          });
           // 调用 Vuex action 来存储 selectSopPoints
-            this.setSelectSopPoints(selectSopPoints)
-          console.log(selectSopPoints,'sop_selectePoints')
-        })
+          this.setSelectSopPoints(selectSopPoints);
+          console.log(selectSopPoints, "sop_selectePoints");
+        });
       },
-      immediate: true // 立即执行一次，确保在组件初始化时也能捕获到 jobProps 的值
-    }
+      immediate: true, // 立即执行一次，确保在组件初始化时也能捕获到 jobProps 的值
+    },
   },
   mounted() {
     this.getworkshopList();
-
   },
 
   methods: {
-    ...mapActions(['setSelectSopPoints']),//这里是为了调用 存储数据的方法
+    ...mapActions(["setSelectSopPoints"]), //这里是为了调用 存储数据的方法
     // 获取车间列表
     getworkshopList() {
       listAllWorkshop().then((response) => {
@@ -159,26 +164,27 @@ export default {
       });
     },
 
-    // 单选车间下拉
     // 单选车间下拉
     handleselect(value) {
       return new Promise((resolve, reject) => {
-        getIsWorkareaList(value).then((response) => {
-          this.producLineOptions = response.data.map((item) => {
-            return {
-              label: item.workareaName,
-              value: item.workareaId,
-              key: item.workareaCode,
-              map: item.map,
-            };
-          });
+        getIsWorkareaList(value)
+          .then((response) => {
+            this.producLineOptions = response.data.map((item) => {
+              return {
+                label: item.workareaName,
+                value: item.workareaId,
+                key: item.workareaCode,
+                map: item.map,
+              };
+            });
 
-          console.log(this.producLineOptions, 'this.producLineOptions');
-          resolve(); // 异步操作成功后 resolve
-        }).catch((error) => {
-          console.error('获取生产线下拉列表失败', error);
-          reject(error); // 异步操作失败后 reject
-        });
+            console.log(this.producLineOptions, "this.producLineOptions");
+            resolve(); // 异步操作成功后 resolve
+          })
+          .catch((error) => {
+            console.error("获取生产线下拉列表失败", error);
+            reject(error); // 异步操作失败后 reject
+          });
       });
     },
     // 生产线下拉
@@ -193,6 +199,7 @@ export default {
       });
       console.log(selectworkShop, selectedOption, "workshop-components");
       // 触发自定义事件，传递 selectedOption[0] 数据给父组件
+      console.log(selectedOption, "selectedOption[0]", this.producLineOptions);
       this.$emit("product-line-selected", selectedOption[0]);
       this.$emit("work-shop-selected", selectworkShop[0]);
     },

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

@@ -7,7 +7,7 @@
         v-if="this.activeName == 'first'"
         @product-line-selected="handleProductLineSelected"
         @work-shop-selected="handleWorkshopSelected"
-        :sopProps="this.form"
+        :sopProps="sopProps"
       />
       <!-- 隔离点 -->
       <IsolationLeftVue
@@ -96,6 +96,7 @@
                       style="width: 100%"
                     />
                   </el-form-item>
+
                   <div class="text item">
                     <p>已选隔离点</p>
                     <el-table
@@ -190,6 +191,7 @@ export default {
         SOPType: "",
         workshopName: "", //车间名称
         workline: "", //产线
+        workareaName: "",
         spoint: [], //已选隔离点
       },
 
@@ -229,6 +231,7 @@ export default {
       tableData: [],
       points: null, //车间逆向传递拿到的隔离点数据
       emitWorkShop: null, //车间逆向传递拿到车间相关数据
+      sopProps: [], //正传递
     };
   },
   mounted() {
@@ -257,6 +260,7 @@ export default {
       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 = "修改隔离点信息";
@@ -298,10 +302,14 @@ export default {
       const newValues = new Set(points.map((point) => point.pointId));
 
       // 1. 删除取消选中的点
-      this.tableData = this.tableData.filter((item) => newValues.has(item.pointId));
+      this.tableData = this.tableData.filter((item) =>
+        newValues.has(item.pointId)
+      );
 
       // 2. 确保新增点不会重复
-      const existingValues = new Set(this.tableData.map((item) => item.pointId));
+      const existingValues = new Set(
+        this.tableData.map((item) => item.pointId)
+      );
 
       points.forEach((point) => {
         // 如果当前传递的点不在已有的点集中，则添加
@@ -309,9 +317,8 @@ export default {
           this.tableData.push({
             pointName: point.pointName, // 显示的名称
             pointId: point.pointId, // 对应的值
-            pointType:point.pointType,
-            powerType:point.powerType,
-
+            pointType: point.pointType,
+            powerType: point.powerType,
           });
           // 将新点值添加到 Set 中
           existingValues.add(point.value);
@@ -328,11 +335,11 @@ export default {
       this.form.workline = selectedOption.label;
     },
     // 车间子组件逆传递车间相关数据车间
-    handleWorkshopSelected(selectedOption){
-      console.log(selectedOption,'handleWorkshopSelected')
-      this.emitWorkShop=selectedOption
-      this.form.workshopName=selectedOption.label
-    }
+    handleWorkshopSelected(selectedOption) {
+      console.log(selectedOption, "handleWorkshopSelected");
+      this.emitWorkShop = selectedOption;
+      this.form.workshopName = selectedOption.label;
+    },
     //   methods结束
   },
 };