人员配置按钮设置

src/components/separationPoint/index.vue

@@ -134,8 +134,6 @@ export default {
     },
 
 
-
-
     renderGrid(imageSrc) {
 
       this.selectedStates = {} // 用对象来存储选中状态，键为文字内容
@@ -146,9 +144,8 @@ export default {
       this.selectedText = []
 
       // const positions = JSON.parse(this.points.map);
-
-
-
+      // console.log(this.getMapData,'getMapData')
+      const positions=JSON.parse(this.getMapData)
       // 检查 this.getSelectSopPoints 是否有内容
       const isLocked = this.getSelectSopPoints.length > 0
 

src/components/separationPoint/workshop.vue

@@ -5,214 +5,205 @@
       <el-col :span="4" :xs="24">
         <div class="head-container">
           <el-input
-            v-model="deptName"
+            v-model="workareaName"
             placeholder="请输入作业区域"
             clearable
             size="small"
             prefix-icon="el-icon-search"
             style="margin-bottom: 20px"
+            @input="handleInputChange"
           />
         </div>
-        <div class="head-container">
-          <el-tree
-            :data="deptOptions"
-            :props="defaultProps"
-            :expand-on-click-node="false"
-            :filter-node-method="filterNode"
-            ref="tree"
-            default-expand-all
-            @node-click="handleNodeClick"
-          />
-        </div>
+          <div class="head-container">
+            <el-tree
+              :data="deptOptions"
+              :props="defaultProps"
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              ref="tree"
+              default-expand-all
+              @node-click="handleNodeClick"
+            />
+          </div>
       </el-col>
       <el-col :span="4" :xs="24">
-        <div class="middle"></div>
+        <div class="middle">
+          <img :src="imgsrc" alt="" v-if="imgsrc"/>
+          <p v-else>—————— 请选择车间 ——————</p>
+        </div>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-import { listAllWorkshop } from "@/api/mes/md/workshop";
-import { getIsWorkareaList, getMapData } from "@/api/mes/wa/workarea";
-import { selectIsSopById } from "@/api/mes/sop/sopindex";
-import { mapActions, mapGetters } from "vuex";
-import { treeselect } from "@/api/system/dept";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { listAllWorkshop } from '@/api/mes/md/workshop'
+import { getIsWorkareaList, getMapData } from '@/api/mes/wa/workarea'
+import { selectIsSopById } from '@/api/mes/sop/sopindex'
+import { mapActions, mapGetters } from 'vuex'
+import { listWorkarea } from '@/api/mes/wa/workarea'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import Treeselect from '@riophae/vue-treeselect'
 
 export default {
   props: {
     sopProps: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     jobProps: {
       type: Array,
-      default: () => [],
-    },
+      default: () => []
+    }
   },
+  components: { Treeselect },
   data() {
     return {
       form: {
         checkAll: false,
         isIndeterminate: false,
         workShop: [],
-        producLine: "",
-        sopId: "",
+        producLine: '',
+        sopId: ''
       },
       workShopOptions: [],
       producLineOptions: [],
-      imgsrc: "",
+      imgsrc: '',
       // 部门树选项
       deptOptions: undefined,
       defaultProps: {
-        children: "children",
-        label: "label",
+        children: 'children',
+        label: 'label'
       },
-    };
+      // 工作区域名称 树形结构
+      workareaName: undefined,
+      treeSelectMap:null,//单节点点击传递map
+      queryParams: {
+        current: 1,
+        size: -1
+      }
+    }
   },
   watch: {
-    "form.workShop": {
+    'form.workShop': {
       handler(newVal) {
         if (newVal) {
-          this.imgsrc = localStorage.getItem("img");
+          // this.imgsrc = localStorage.getItem("img");
         }
-      },
-    },
-    // 根据名称筛选部门树
-    deptName(val) {
-      this.$refs.tree.filter(val);
+      }
     },
+
     // 监听父组件传递的数据
     sopProps: {
       handler(newVal, oldVal) {
-        console.log("sopProps 发生变化", newVal);
-        this.form.workShop = newVal[0].workshopId;
-        this.form.producLine = newVal[0].workareaId;
+        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);
+            this.handleselectProductLine(newVal[0].workareaId)
           })
           .catch((error) => {
-            console.error("处理车间下拉失败", error);
-          });
+            console.error('处理车间下拉失败', error)
+          })
         // 这里是为了拿到sop模板里默认的隔离点选中的数据
         selectIsSopById(newVal[0].sopId).then((res) => {
-          console.log(res, "sop");
+          console.log(res, 'sop')
           const selectSopPoints = res.data.pointDetailVOList.map((item) => {
-            return item.pointId;
-          });
+            return item.pointId
+          })
           // 调用 Vuex action 来存储 selectSopPoints
-          this.setSelectSopPoints(selectSopPoints);
+          this.setSelectSopPoints(selectSopPoints)
 
-          this.setSopEdit(true);
-          console.log(selectSopPoints, "sop_selectePoints");
-        });
+          this.setSopEdit(true)
+          console.log(selectSopPoints, 'sop_selectePoints')
+        })
       },
-      immediate: true, // 立即执行一次，确保在组件初始化时也能捕获到 jobProps 的值
+      immediate: true // 立即执行一次，确保在组件初始化时也能捕获到 jobProps 的值
     },
     jobProps: {
       handler(newVal, oldVal) {
-        console.log("jobProps 发生变化", newVal);
+        console.log('jobProps 发生变化', newVal)
         if (newVal.length == 0) {
-          this.setSopEdit(true);
-          this.form.workShop = [];
-          this.form.producLine = "";
-          this.form.sopId = "";
-          this.form.t;
+          this.setSopEdit(true)
+          this.form.workShop = []
+          this.form.producLine = ''
+          this.form.sopId = ''
+          this.form.t
         } else {
           // 在这里处理 jobProps 变化后的逻辑
-          this.form.workShop = newVal[0].workshopId;
-          this.form.producLine = newVal[0].workareaId;
-          this.form.sopId = newVal[0].sopId;
-          console.log(this.form.sopId, "form.sopId jobProps");
+          this.form.workShop = newVal[0].workshopId
+          this.form.producLine = newVal[0].workareaId
+          this.form.sopId = newVal[0].sopId
+          console.log(this.form.sopId, 'form.sopId jobProps')
           // 确保 handleselect 完成后再调用 handleselectProductLine
           this.handleselect(newVal[0].workshopId)
             .then(() => {
-              this.handleselectProductLine(newVal[0].workareaId);
+              this.handleselectProductLine(newVal[0].workareaId)
             })
             .catch((error) => {
-              console.error("处理车间下拉失败", error);
-            });
+              console.error('处理车间下拉失败', error)
+            })
 
           // 这里是为了拿到sop模板里默认的隔离点选中的数据a
           if (!newVal[0].EditBool) {
             selectIsSopById(newVal[0].sopId).then((res) => {
-              console.log(res, "sop");
+              console.log(res, 'sop')
               const selectSopPoints = res.data.pointDetailVOList.map((item) => {
-                return item.pointId;
-              });
+                return item.pointId
+              })
 
               // 调用 Vuex action 来存储 selectSopPoints
-              this.setSelectSopPoints(selectSopPoints);
-              this.setPointTableData(res.data);
+              this.setSelectSopPoints(selectSopPoints)
+              this.setPointTableData(res.data)
 
-              this.setSopEdit(false);
-              console.log(selectSopPoints, "sop_selectePoints");
-            });
+              this.setSopEdit(false)
+              console.log(selectSopPoints, 'sop_selectePoints')
+            })
           } else {
             const selectSopPoints = newVal[0].spoint.map((item) => {
-              return item.pointId;
-            });
-            this.setSelectSopPoints(selectSopPoints);
-            this.setPointTableData(newVal[0].spoint);
-            this.setSopEdit(true);
+              return item.pointId
+            })
+            this.setSelectSopPoints(selectSopPoints)
+            this.setPointTableData(newVal[0].spoint)
+            this.setSopEdit(true)
           }
         }
       },
-      immediate: true, // 立即执行一次，确保在组件初始化时也能捕获到 jobProps 的值
-    },
-  },
-  created() {
-    this.getTreeselect();
-  },
-  /** 查询部门下拉树结构 */
-  getTreeselect() {
-    treeselect().then((response) => {
-      debugger;
-      console.log(response.data, "部门下拉树形结构");
-      this.deptOptions = response.data;
-    });
-  },
-  // 筛选节点
-  filterNode(value, data) {
-    if (!value) return true;
-    return data.label.indexOf(value) !== -1;
-  },
-  // 节点单击事件
-  handleNodeClick(data) {
-    this.queryParams.deptId = data.id;
-    this.handleQuery();
+      immediate: true // 立即执行一次，确保在组件初始化时也能捕获到 jobProps 的值
+    }
   },
+
   mounted() {
-    this.getworkshopList();
+    this.getworkshopList()
+    this.getTreeselect()//获取工作区域下拉
   },
   computed: {
-    ...mapGetters("sopSelectPoints", ["getSopLook"]),
+    ...mapGetters('sopSelectPoints', ['getSopLook'])
   },
   methods: {
-    ...mapActions("sopSelectPoints", [
-      "setSelectSopPoints",
-      "setPointTableData",
-      "setSopEdit",
-      "setMapData",
+    ...mapActions('sopSelectPoints', [
+      'setSelectSopPoints',
+      'setPointTableData',
+      'setSopEdit',
+      'setMapData'
     ]),
 
     // 获取车间列表
     getworkshopList() {
       listAllWorkshop().then((response) => {
-        console.log(response, "车间信息");
+        console.log(response, '车间信息')
         this.workShopOptions = response.data.map((item) => {
           return {
             label: item.workshopName,
             value: item.workshopId,
             key: item.workshopCode,
-            attr1: item.attr1,
-          };
-        });
-      });
+            attr1: item.attr1
+          }
+        })
+      })
     },
 
     // 单选车间下拉
@@ -225,116 +216,152 @@ export default {
                 label: item.workareaName,
                 value: item.workareaId,
                 key: item.workareaCode,
-                map: item.map,
-              };
-            });
+                map: item.map
+              }
+            })
 
             // 根据选择的车间更新 imgsrc
             const selectedWorkshop = this.workShopOptions.find(
               (item) => item.value === value
-            );
-            localStorage.setItem("img", selectedWorkshop.attr1);
+            )
+            localStorage.setItem('img', selectedWorkshop.attr1)
 
             if (selectedWorkshop) {
-              this.imgsrc = selectedWorkshop.attr1;
+              this.imgsrc = selectedWorkshop.attr1
             } else {
-              this.imgsrc = ""; // 如果没有找到，清空 imgsrc
+              this.imgsrc = '' // 如果没有找到，清空 imgsrc
             }
 
-            console.log(this.producLineOptions, "this.producLineOptions");
-            resolve(); // 异步操作成功后 resolve
+            console.log(this.producLineOptions, 'this.producLineOptions')
+            resolve() // 异步操作成功后 resolve
           })
           .catch((error) => {
-            console.error("获取区域下拉列表失败", error);
-            reject(error); // 异步操作失败后 reject
-          });
-      });
+            console.error('获取区域下拉列表失败', error)
+            reject(error) // 异步操作失败后 reject
+          })
+      })
     },
     // 区域下拉
     handleselectProductLine(val) {
-      console.log(val, "区域下拉");
+      console.log(val, '区域下拉')
 
       // 获取区域map解析数据
-      const data = val;
+      const data = val
 
-      let data1 = "";
-      let data2 = "";
+      let data1 = ''
+      let data2 = ''
 
-      if (this.$route.query.sopId !== "null" && this.$route.query.sopId) {
-        data1 = this.$route.query.sopId;
+      if (this.$route.query.sopId !== 'null' && this.$route.query.sopId) {
+        data1 = this.$route.query.sopId
       } else if (
-        this.$route.query.ticketId !== "null" &&
+        this.$route.query.ticketId !== 'null' &&
         this.$route.query.ticketId
       ) {
-        data2 = this.$route.query.ticketId; // ticketId 存在时，data1 设置为空字符串
+        data2 = this.$route.query.ticketId // ticketId 存在时，data1 设置为空字符串
       }
-      console.log(this.form.sopId, "form.sopId");
+      console.log(this.form.sopId, 'form.sopId')
       if (this.jobProps.length == 0) {
         console.log(
           this.jobProps,
-          "如果jobProps是空数组表示编辑情况下修改sop为空值需要重新拿到所有渲染隔离点"
-        );
-        data2 = "";
+          '如果jobProps是空数组表示编辑情况下修改sop为空值需要重新拿到所有渲染隔离点'
+        )
+        data2 = ''
       }
       if (this.form.sopId) {
-        data1 = this.form.sopId;
+        data1 = this.form.sopId
       }
 
       getMapData(data, data1, data2)
         .then((res) => {
-          console.log(res, "获取区域map的解析数据");
-          const mapdata = res.data;
-          this.setMapData(mapdata);
+          console.log(res, '获取区域map的解析数据')
+          const mapdata = res.data
+          this.setMapData(mapdata)
         })
         .catch((error) => {
-          console.error("获取区域map数据失败", error);
-        });
+          console.error('获取区域map数据失败', error)
+        })
 
       //   利用组件逆传递 selectProductLine方法传递数据给兄弟组件
       const selectedOption = this.producLineOptions.filter((item) => {
-        return item.value == val;
-      });
+        return item.value == val
+      })
       const selectworkShop = this.workShopOptions.filter((item) => {
-        return item.value == this.form.workShop;
-      });
+        return item.value == this.form.workShop
+      })
       // 这里两个赋值是为了方式页面切换数据丢失
 
-      console.log(selectworkShop, selectedOption, "workshop-components");
+      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]);
+      console.log(selectedOption, 'selectedOption[0]', this.producLineOptions)
+      this.$emit('product-line-selected', selectedOption[0])
+      this.$emit('work-shop-selected', selectworkShop[0])
     },
 
-    // 多选车间下拉框选择事件
-    // handleSelect(value) {
-    //   console.log(value, "value");
-    //   const checkedCount = value.length;
-    //   this.checkAll = checkedCount === this.workShopOptions.length;
-    //   this.isIndeterminate =
-    //     checkedCount > 0 && checkedCount < this.workShopOptions.length;
-    //   const data = value.map((item) => {
-    //     return item;
-    //   });
-    //   this.form.workShop = value.length > 0 ? data : [];
-    //
-    //   console.log(this.form.workShop, " form.workShop");
-    // },
-    // 全选事件
-    handleCheckAllChange(val) {
-      const data = this.workShopOptions.map((item) => {
-        return item.value;
+    /** 查询工作区域下拉树结构 */
+    getTreeselect() {
+      listWorkarea(this.queryParams).then(response => {
+        console.log(response.data.records, '工作区域下拉树形结构');
+        // 转换为树形结构
+        this.deptOptions = this.transformToTree(response.data.records);
+        console.log(this.deptOptions, 'deptOptions');
       });
-      this.form.workShop = val ? data : [];
-      this.isIndeterminate = false;
     },
-  },
-};
-</script>
 
+    /** 转换数据为树形结构 */
+    transformToTree(records) {
+      const recordMap = {}; // 创建一个 Map 以存储所有记录
+      const tree = []; // 最终返回的树形结构
 
+      // 初始化所有记录到 Map
+      records.forEach(record => {
+        recordMap[record.workareaId] = {
+          id: record.workareaId,
+          label: record.workareaName,
+          map: record.map,
+          mapImg:record.mapImg,
+          children: []
+        };
+      });
 
+      // 遍历记录并构建树
+      records.forEach(record => {
+        const parentId = record.parentId;
 
+        if (parentId === "0") {
+          // 如果是顶层节点，直接添加到树中
+          tree.push(recordMap[record.workareaId]);
+        } else if (recordMap[parentId]) {
+          // 如果有父节点，则将当前节点加入父节点的 children 中
+          recordMap[parentId].children.push(recordMap[record.workareaId]);
+        }
+      });
+
+      return tree;
+    },
+
+    // 树节点筛选逻辑
+    filterNode(value, data) {
+      if (!value) return true; // 如果没有输入值，显示所有节点
+      return data.label.indexOf(value) !== -1; // 判断节点 label 是否包含输入值
+    },
+    // 监听输入框变化
+    handleInputChange() {
+      this.$refs.tree.filter(this.workareaName); // 调用树的 filter 方法
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      console.log(data,'单节点点击')
+      this.treeSelectMap=data
+      // vuex来传递map给选择隔离点
+      this.setMapData(data.map)
+      // 传递车间地图
+      this.imgsrc=data.mapImg
+      this.workareaName = data.label;
+      this.handleInputChange();
+    },
+  }
+}
+</script>
 
 
 <style scoped>
@@ -342,10 +369,23 @@ export default {
   width: 100%;
   height: 100%;
 }
+
 .middle {
-  width: 1180px;
+  width: 1000px;
   height: 850px;
+  margin: 10px 0 0 60px;
   background-color: rgb(255, 255, 255);
   box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.12);
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+
+  p {
+    text-align: center;
+    //margin: 30% 0;
+    line-height: 850px;
+  }
 }
-</style>
+</style>

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

@@ -27,7 +27,7 @@
             <span
               style="
                 float: right;
-                padding: 1px 0;
+                padding: 1px 15px;
                 font-size: 22px;
                 cursor: pointer;
               "
@@ -35,6 +35,13 @@
               @click="goBack"
               >×</span
             >
+            <el-tooltip content="开启人员配置" placement="top" style="float: right;margin-top: 3px">
+              <el-switch v-model="openStaffing"
+                         active-color="#13ce66"
+                         active-text=""
+                         @change="handleOpenStaffing(openStaffing)"  >
+              </el-switch>
+            </el-tooltip>
           </div>
           <div class="text item">
             <el-tabs v-model="activeName" @tab-click="handleClick">
@@ -194,12 +201,143 @@
                   </el-form-item>
                 </el-form>
               </el-tab-pane>
+              <el-tab-pane label="人员选择" name="third" v-if="openStaffing  ">
+                <!--人员选择-->
+                <el-form ref="form" :model="form" label-width="70px">
+                  <el-form-item label="开始时间" prop="ticketStartTime">
+                    <el-date-picker
+                      :disabled="this.getSopLook"
+                      v-model="form.ticketStartTime"
+                      type="datetime"
+                      placeholder="选择日期时间"
+                      align="right"
+                      :picker-options="pickerOptions"
+                      style="width: 100%"
+                      @change="ticketStartTimeChange"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                  <el-form-item label="结束时间" prop="ticketEndTime">
+                    <el-date-picker
+                      :disabled="this.getSopLook"
+                      v-model="form.ticketEndTime"
+                      type="datetime"
+                      placeholder="选择日期时间"
+                      align="right"
+                      :picker-options="pickerOptions"
+                      style="width: 100%"
+                      @change="ticketEndTimeChange"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                  <el-form-item label="上锁人" prop="locker">
+                    <el-select
+                      :disabled="this.getSopLook"
+                      v-model="form.locker"
+                      placeholder="上锁人"
+                      clearable
+                      style="width: 100%"
+                      @change="handlelockerChage"
+                    >
+                      <el-option
+                        v-for="dict in this.listUserOption"
+                        :key="dict.value"
+                        :label="dict.label"
+                        :value="dict.value"
+                      />
+                    </el-select>
+                  </el-form-item>
+                  <!--
+                  <el-form-item label="共锁人" prop="coLocker">
+                    <el-select
+                      v-model="form.coLocker"
+                      placeholder="共锁人"
+                      clearable
+                      multiple
+                      style="width: 100%"
+                      @change="handleCoLockerChange"
+                      ref="coLockerSelect"
+                    >
+                      <el-option
+                        v-for="dict in sortedTicketUserDTOList"
+                        :key="dict.userId"
+                        :label="dict.username"
+                        :value="dict.username"
+                      >
+                      </el-option>
+                    </el-select>
+                  </el-form-item> -->
+                  <el-form-item label="共锁人" prop="coLocker">
+                    <el-button
+                      type="primary"
+                      @click="addInside"
+                      class="gsr"
+                      size="mini"
+                    >添加内部人员
+                    </el-button>
+                    <el-button type="primary" @click="addOutside" size="mini"
+                    >添加外部人员
+                    </el-button>
+                  </el-form-item>
+                  <div class="text item">
+                    <el-table
+                      :data="sortedTicketUserDTOList"
+                      stripe
+                      height="400"
+                      style="width: 100%"
+                    >
+                      <el-table-column prop="userId" label="序号" width="50">
+                      </el-table-column>
+                      <el-table-column
+                        prop="userName"
+                        label="共锁人"
+                        width="120"
+                      >
+                        <template slot-scope="scope">
+                          <span style="color: #2a87ff">{{
+                              scope.row.userName
+                            }}</span>
+                        </template>
+                      </el-table-column>
+                      <el-table-column prop="userRole" label="共锁人来源">
+                        <template slot-scope="scope">
+                          <span>{{
+                              scope.row.userRole == "0" ? "内部" : "外部"
+                            }}</span>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="" width="80">
+                        <template slot-scope="scope">
+                          <el-button
+                            @click.native.prevent="
+                              deleteRow(scope.$index, sortedTicketUserDTOList)
+                            "
+                            type="text"
+                            size="small"
+                          >
+                            移除
+                          </el-button>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </div>
+
+                  <el-form-item label="" prop="">
+                    <el-button
+                      style="float: right; height: 30px; line-height: 10px"
+                      type="primary"
+                      @click="confirm"
+                    >完 成
+                    </el-button>
+                  </el-form-item>
+                </el-form>
+              </el-tab-pane>
             </el-tabs>
           </div>
         </el-card>
       </div>
     </div>
-    <!--    newOperations盒子结束-->
+    <!--    newSop盒子结束-->
   </div>
 </template>
 
@@ -268,6 +406,7 @@ export default {
       emitWorkShop: null, //车间逆向传递拿到车间相关数据
       sopProps: [], //正传递
       worklineMap: "",
+      openStaffing:null
     };
   },
   mounted() {
@@ -459,6 +598,18 @@ export default {
         this.form.sopCode = null;
       }
     },
+    //自动生成编码
+    handleOpenStaffing(openStaffing){
+      if(openStaffing){
+        console.log(openStaffing,'开启人员配置')
+          this.openStaffing = openStaffing;
+
+      }else {
+        console.log(openStaffing,'开启人员配置')
+        this.openStaffing = openStaffing;
+        this.activeName='first'
+      }
+    },
     // 侧边X关闭
     goBack() {
       this.$router.push("/sop/sopm");
@@ -484,8 +635,10 @@ export default {
     margin-right: 10px;
   }
   .right {
+    //width: 25%;
     flex: 1;
     height: 100%;
+    //background: #000;
     .right_top {
       height: 540px;
     }
@@ -518,8 +671,9 @@ export default {
 
 .box-card {
   // width: 390px;
-  width: 95%;
+  width: 100%;
   height: 850px;
+  //background: pink;
 }
 
 ::v-deeep .el-tabs--top .el-tabs__item.is-top:nth-child(2),
@@ -529,7 +683,7 @@ export default {
   padding-left: 100px !important;
 }
 ::v-deep .el-tabs .el-tabs__item {
-  padding: 0 50px !important;
+  padding: 0 30px !important;
 }
 
 //右侧卡片样式结束