修改树形岗位 设备与工艺

src/views/system/technology/technologyList/index.vue

@@ -1,14 +1,34 @@
 <template>
   <div class="app-container">
     <div class="left">
-      <el-input
-        v-model="queryParams.machineryCode"
-        placeholder="请输入岗位"
-        clearable
-        @keyup.enter.native="handleQuery"
-      />
       <!-- 岗位树 -->
-      <div class="deptTree"></div>
+      <div class="deptTree">
+        <div class="head-container">
+          <el-input
+            v-model="queryParams.workstationName"
+            placeholder="请输入岗位名称"
+            clearable
+            size="small"
+            prefix-icon="el-icon-search"
+            style="margin-bottom: 20px"
+            @input="handleInputChange"
+          />
+        </div>
+        <div class="head-container">
+          <el-tree
+            :data="workstationOptions"
+            :props="defaultProps"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            ref="treeData"
+            node-key="id"
+            default-expand-all
+            @node-click="handleNodeClick"
+            highlight-current
+          />
+
+        </div>
+      </div>
     </div>
     <div class="right">
       <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
@@ -40,14 +60,15 @@
               icon="el-icon-search"
               size="mini"
               @click="handleQuery"
-              >搜索
+            >搜索
             </el-button>
             <el-button
               v-no-more-click
               icon="el-icon-refresh"
               size="mini"
               @click="resetQuery"
-              >重置</el-button
+            >重置
+            </el-button
             >
           </el-form-item>
         </el-form>
@@ -61,7 +82,7 @@
               size="mini"
               @click="handleAdd"
               v-hasPermi="['iscs:machinery:add']"
-              >新增
+            >新增
             </el-button>
           </el-col>
           <el-col :span="1.5">
@@ -74,7 +95,8 @@
               :disabled="multiple"
               @click="handleDelete"
               v-hasPermi="['mes:hw:information:batchremove']"
-              >批量删除</el-button
+            >批量删除
+            </el-button
             >
           </el-col>
           <!-- <el-col :span="1.5">
@@ -103,7 +125,7 @@
           :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
           @selection-change="handleSelectionChange"
         >
-          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column type="selection" width="55" align="center"/>
           <el-table-column
             prop="machineryCode"
             label="工艺编码"
@@ -123,7 +145,7 @@
                 size="mini"
                 type="text"
                 @click="handleLook(scope.row)"
-                >查看
+              >查看
               </el-button>
             </template>
           </el-table-column>
@@ -140,7 +162,7 @@
                 icon="el-icon-edit"
                 @click="handleUpdate(scope.row)"
                 v-hasPermi="['iscs:machinery:edit']"
-                >编辑
+              >编辑
               </el-button>
               <!-- <el-button
                 v-no-more-click
@@ -159,7 +181,7 @@
                 icon="el-icon-delete"
                 @click="handleDelete(scope.row)"
                 v-hasPermi="['iscs:machinery:remove']"
-                >删除
+              >删除
               </el-button>
             </template>
           </el-table-column>
@@ -190,14 +212,15 @@
               icon="el-icon-search"
               size="mini"
               @click="handleQuery"
-              >搜索
+            >搜索
             </el-button>
             <el-button
               v-no-more-click
               icon="el-icon-refresh"
               size="mini"
               @click="resetQuery"
-              >重置</el-button
+            >重置
+            </el-button
             >
           </el-form-item>
         </el-form>
@@ -211,7 +234,7 @@
               size="mini"
               @click="handleAdd"
               v-hasPermi="['iscs:machinery:add']"
-              >新增
+            >新增
             </el-button>
           </el-col>
           <el-col :span="1.5">
@@ -224,7 +247,8 @@
               :disabled="multiple"
               @click="handleDelete"
               v-hasPermi="['mes:hw:information:batchremove']"
-              >批量删除</el-button
+            >批量删除
+            </el-button
             >
           </el-col>
           <!-- <el-col :span="1.5">
@@ -253,7 +277,7 @@
           :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
           @selection-change="handleSelectionChange"
         >
-          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column type="selection" width="55" align="center"/>
           <el-table-column
             prop="machineryCode"
             label="设备编码"
@@ -273,7 +297,7 @@
                 size="mini"
                 type="text"
                 @click="handleLook(scope.row)"
-                >查看
+              >查看
               </el-button>
             </template>
           </el-table-column>
@@ -290,7 +314,7 @@
                 icon="el-icon-edit"
                 @click="handleUpdate(scope.row)"
                 v-hasPermi="['iscs:machinery:edit']"
-                >编辑
+              >编辑
               </el-button>
               <!-- <el-button
                 v-no-more-click
@@ -309,7 +333,7 @@
                 icon="el-icon-delete"
                 @click="handleDelete(scope.row)"
                 v-hasPermi="['iscs:machinery:remove']"
-                >删除
+              >删除
               </el-button>
             </template>
           </el-table-column>
@@ -377,14 +401,14 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item label="设备/工艺类型" prop="machineryType">
-          <el-input
-            v-model="form.machineryType"
-            placeholder="请输入设备/工艺类型"
-          />
-        </el-form-item>
+<!--        <el-form-item label="设备/工艺类型" prop="machineryType">-->
+<!--          <el-input-->
+<!--            v-model="form.machineryType"-->
+<!--            placeholder="请输入设备/工艺类型"-->
+<!--          />-->
+<!--        </el-form-item>-->
 
-        <el-form-item label="工艺图" prop="machineryImg">
+        <el-form-item :label="this.tabPosition=='craft'?'工艺图':'设备图'" prop="machineryImg">
           <ImageUploadSingle
             :limit="1"
             :value="form.machineryImg"
@@ -396,7 +420,8 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button v-no-more-click type="primary" @click="submitForm"
-          >确 定</el-button
+        >确 定
+        </el-button
         >
         <el-button v-no-more-click @click="cancel">取 消</el-button>
       </div>
@@ -410,17 +435,17 @@ import {
   addTechnology,
   updateTechnology,
   delTechnology,
-  getTechnologyInfo,
-} from "@/api/system/machinery";
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import { genCode } from "@/api/system/autocode/rule";
-import { listMarsDept } from "@/api/system/marsdept";
-import { listLoto } from "@/api/mes/lotoStation/lotoStation";
+  getTechnologyInfo
+} from '@/api/system/machinery'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { genCode } from '@/api/system/autocode/rule'
+import { listMarsDept } from '@/api/system/marsdept'
+import { listLoto } from '@/api/mes/lotoStation/lotoStation'
 
 export default {
-  name: "Dept",
-  dicts: ["sys_normal_disable"],
+  name: 'Dept',
+  dicts: ['sys_normal_disable'],
   components: { Treeselect },
   data() {
     return {
@@ -428,7 +453,8 @@ export default {
       loading: true,
       //自动生成编码
       autoGenFlag: false,
-      tabPosition: "craft",
+      tabPosition: 'craft',
+      multiple: false,
       // 显示搜索条件
       showSearch: true,
       // 表格树数据
@@ -440,7 +466,7 @@ export default {
       // 电柜
       lotoOptions: [],
       // 弹出层标题
-      title: "",
+      title: '',
       // 是否显示弹出层
       open: false,
       // 是否展开，默认全部展开
@@ -453,230 +479,366 @@ export default {
         size: -1,
         machineryName: undefined,
         machineryCode: undefined,
+        workstationName:undefined,
+        workstationId:undefined,
       },
+
       LotoOptions: [], //电柜绑定
       // 表单参数
       form: {},
       // 表单校验
       rules: {
         machineryCode: [
-          { required: true, message: "设备/工艺编码不能为空", trigger: "blur" },
+          { required: true, message: '设备/工艺编码不能为空', trigger: 'blur' }
         ],
         machineryName: [
-          { required: true, message: "设备/工艺名称不能为空", trigger: "blur" },
+          { required: true, message: '设备/工艺名称不能为空', trigger: 'blur' }
         ],
         workstationId: [
-          { required: true, message: "岗位不能为空", trigger: "blur" },
+          { required: true, message: '岗位不能为空', trigger: 'blur' }
         ],
-        lotoId: [{ required: true, message: "电柜不能为空", trigger: "blur" }],
+        lotoId: [{ required: true, message: '电柜不能为空', trigger: 'blur' }]
       },
-    };
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      workstationOptions: []//岗位
+    }
   },
   created() {
-    this.getList();
+    this.getList()
   },
   watch: {
-    "form.workstationId": function (newVal, oldVal) {
+    'form.workstationId': function(newVal, oldVal) {
       if (newVal) {
         const data = {
           pasge: 1,
           size: -1,
-          workstationId: this.form.workstationId,
-        };
+          workstationId: this.form.workstationId
+        }
         listLoto(data).then((response) => {
           this.LotoOptions = response.data.records.map((item) => {
             return {
               value: item.lotoId,
-              label: item.lotoName,
-            };
-          });
-        });
+              label: item.lotoName
+            }
+          })
+        })
       }
-    },
+    }
   },
+
   methods: {
     /** 查询部门列表 */
     getList() {
-      this.loading = true;
+      this.loading = true
       listTechnology(this.queryParams).then((response) => {
         debugger;
+        if(this.tabPosition == 'craft'){
+          this.deptList = response.data.records.filter(item => {return item.machineryType == '工艺'})
+          console.log(this.deptList, '设备/工艺列表---a')
+        }else{
+          this.deptList = response.data.records.filter(item => { return item.machineryType == '设备'})
+          console.log(this.deptList, '设备/工艺列表---v')
+        }
         this.deptList = this.handleTree(
           response.data.records,
-          "machineryId",
-          "parentId"
-        );
+          'machineryId',
+          'parentId'
+        )
+
+        // 岗位新增的下拉
         this.machineryOptions = this.handleTree(
           response.data.records,
-          "machineryId",
-          "parentId"
-        );
-        console.log(this.deptList, "设备/工艺列表");
-        this.loading = false;
-      });
+          'machineryId',
+          'parentId'
+        )
+        this.loading = false
+      })
       const data = {
         pasge: 1,
-        size: -1,
-      };
-      listMarsDept(data).then((response) => {
-        this.marsOptions = this.handleTree(
-          response.data.records,
-          "workstationId",
-          "parentId"
-        );
-      });
+        size: -1
+      }
+
       listLoto(data).then((response) => {
         this.LotoOptions = response.data.records.map((item) => {
           return {
             value: item.lotoId,
-            label: item.lotoName,
-          };
-        });
-      });
+            label: item.lotoName
+          }
+        })
+      })
+
+      listMarsDept(data).then((response) => {
+        // 新增岗位单选
+        this.marsOptions = this.handleTree(
+          response.data.records,
+          'workstationId',
+          'parentId'
+        )
+        // mars岗位树数据
+        this.workstationOptions = this.transformToTree(response.data.records)
+        // 使用递归函数查找匹配的节点
+        const selectedTreeNode = this.findNodeById(this.workstationOptions, this.queryParams.workstationId)
+        // 调用 handleNodeClick 方法
+        if (selectedTreeNode) {
+          this.handleNodeClick(selectedTreeNode)
+        } else {
+          console.log('未找到匹配的节点')
+        }
+
+      })
     },
-    /** 转换部门数据结构 */
+    // mars岗位数深层次遍历
+    findNodeById(nodes, targetId) {
+      for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i]
+        if (node.id === targetId) {
+          return node
+        }
+        if (node.children && node.children.length > 0) {
+          const foundNode = this.findNodeById(node.children, targetId)
+          if (foundNode) {
+            return foundNode
+          }
+        }
+      }
+      return null
+    },
+    /** 转换mars岗位树数据为树形结构 */
+    transformToTree(records) {
+      const recordMap = {} // 创建一个 Map 以存储所有记录
+      const tree = [] // 最终返回的树形结构
+
+      // 初始化所有记录到 Map
+      records.forEach(record => {
+        recordMap[record.workstationId] = {
+          id: record.workstationId,
+          label: record.workstationName,
+          children: []
+        }
+      })
+
+      // 遍历记录并构建树
+      records.forEach(record => {
+        const parentId = record.parentId
+
+        if (parentId === '0') {
+          // 如果是顶层节点，直接添加到树中
+          tree.push(recordMap[record.workstationId])
+        } else if (recordMap[parentId]) {
+          // 如果有父节点，则将当前节点加入父节点的 children 中
+          recordMap[parentId].children.push(recordMap[record.workstationId])
+        }
+      })
+
+      return tree
+    },
+    // mars岗位树点击事件
+    handleNodeClick(data) {
+      this.queryParams.workstationId = data.id;//这里给查询传递参数
+      this.queryParams.workstationName = data.label;//这里给回显框显示中文
+      listMarsDept(this.queryParams).then((response) => {
+        // 新增岗位单选
+        this.marsOptions = this.handleTree(
+          response.data.records,
+          'workstationId',
+          'parentId'
+        )
+        // mars岗位树数据
+        this.workstationOptions = this.transformToTree(response.data.records)
+        // 使用递归函数查找匹配的节点
+        const selectedTreeNode = this.findNodeById(this.workstationOptions, this.queryParams.workstationId)
+        // 不再递归调用 handleNodeClick
+        if (selectedTreeNode) {
+          // 可以在这里执行其他逻辑，但不要再次调用 handleNodeClick
+          console.log('找到匹配的节点:', selectedTreeNode)
+        } else {
+          console.log('未找到匹配的节点')
+        }
+      })
+    },
+    /** 转换mars岗位数据结构 */
     Marsnormalizer(node) {
       if (node.children && !node.children.length) {
-        delete node.children;
+        delete node.children
       }
       return {
         id: node.workstationId,
         label: node.workstationName,
-        children: node.children,
-      };
+        children: node.children
+      }
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    // mars树形输入框回显监听
+    handleInputChange() {
+      this.$refs.treeData.filter(this.queryParams.workstationId) // 调用树的 filter 方法
+      listMarsDept(this.queryParams).then((response) => {
+        // 新增岗位单选
+        this.marsOptions = this.handleTree(
+          response.data.records,
+          'workstationId',
+          'parentId'
+        )
+        // mars岗位树数据
+        this.workstationOptions = this.transformToTree(response.data.records)
+        // 使用递归函数查找匹配的节点
+        const selectedTreeNode = this.findNodeById(this.workstationOptions, this.queryParams.workstationId)
+        // 不再递归调用 handleNodeClick
+        if (selectedTreeNode) {
+          // 可以在这里执行其他逻辑，但不要再次调用 handleNodeClick
+          console.log('找到匹配的节点:', selectedTreeNode)
+        } else {
+          console.log('未找到匹配的节点')
+        }
+      })
     },
     normalizer(node) {
       if (node.children && !node.children.length) {
-        delete node.children;
+        delete node.children
       }
       return {
         id: node.machineryId,
         label: node.machineryName,
-        children: node.children,
-      };
+        children: node.children
+      }
     },
+
     // 地图预览
     look(row) {
-      console.log(row, "row预览");
-      const data = row.lotoId;
+      console.log(row, 'row预览')
+      const data = row.lotoId
       this.$router.push(
         `/system/technology/technologyList/index/MapData?lotoId=${data}&machineryId=${row.machineryId}`
-      );
+      )
       // this.dialogVisibleMap = true; // 显示地图预览弹框
     },
     // 取消按钮
     cancel() {
-      this.open = false;
-      this.reset();
+      this.open = false
+      this.reset()
     },
     // 表单重置
     reset() {
       this.form = {
         machineryId: undefined,
         parentId: undefined,
-        machineryName: undefined,
-      };
-      this.autoGenFlag = false;
-      this.resetForm("form");
+        machineryName: undefined
+      }
+      this.autoGenFlag = false
+      this.resetForm('form')
     },
     //自动生成编码
     handleAutoGenChange(autoGenFlag) {
       if (autoGenFlag) {
-        genCode("TECHNOLOGY_CODE").then((response) => {
-          console.log(response, "设备工艺编码");
-          this.form.machineryCode = response;
-        });
+        genCode('TECHNOLOGY_CODE').then((response) => {
+          console.log(response, '设备工艺编码')
+          this.form.machineryCode = response
+        })
       } else {
-        this.form.machineryCode = null;
+        this.form.machineryCode = null
       }
     },
     //图标上传成功
     handleIconUplaoded(imgUrl) {
-      this.form.machineryImg = imgUrl[0].url;
+      this.form.machineryImg = imgUrl[0].url
     },
     // 图标移除
     handleIconRemoved(imgUrl) {
-      this.form.machineryImg = null;
+      this.form.machineryImg = null
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.getList();
+      this.getList()
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+      this.resetForm('queryForm')
+      this.handleQuery()
     },
 
     /** 展开/折叠操作 */
     toggleExpandAll() {
-      this.refreshTable = false;
-      this.isExpandAll = !this.isExpandAll;
+      this.refreshTable = false
+      this.isExpandAll = !this.isExpandAll
       this.$nextTick(() => {
-        this.refreshTable = true;
-      });
+        this.refreshTable = true
+      })
     },
     /** 新增按钮操作 */
     handleAdd(row) {
-      this.reset();
+      this.reset()
       if (row != null && row.machineryId) {
-        this.form.parentId = row.machineryId;
+        this.form.parentId = row.machineryId
       } else {
-        this.form.parentId = 0;
+        this.form.parentId = 0
       }
-      this.open = true;
-      this.title = "添加部门";
+      // 在工艺新增就是工艺 设备新增就是设备
+      if(this.tabPosition=='craft'){
+        this.form.machineryType='工艺'
+      }else if(this.tabPosition=='equipment'){
+        this.form.machineryType='设备'
+      }
+      this.open = true
+      this.title = '添加部门'
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
+      this.reset()
       getTechnologyInfo(row.machineryId).then((response) => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改部门";
-      });
+        this.form = response.data
+        this.open = true
+        this.title = '修改部门'
+      })
     },
     /** 提交按钮 */
-    submitForm: function () {
-      this.$refs["form"].validate((valid) => {
+    submitForm: function() {
+      this.$refs['form'].validate((valid) => {
         if (valid) {
           if (this.form.machineryId != undefined) {
             updateTechnology(this.form).then((response) => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            })
           } else {
             addTechnology(this.form).then((response) => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            })
           }
         }
-      });
+      })
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.id);
-      this.codes = selection.map((item) => item.machineryCode);
-      this.single = selection.length !== 1;
-      this.multiple = !selection.length;
+      this.ids = selection.map((item) => item.id)
+      this.codes = selection.map((item) => item.machineryCode)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
     },
     /** 删除按钮操作 */
     handleDelete(row) {
       this.$modal
         .confirm('是否确认删除名称为"' + row.machineryName + '"的数据项？')
-        .then(function () {
-          return delTechnology(row.machineryId);
+        .then(function() {
+          return delTechnology(row.machineryId)
         })
         .then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
+          this.getList()
+          this.$modal.msgSuccess('删除成功')
         })
-        .catch(() => {});
-    },
-  },
-};
+        .catch(() => {
+        })
+    }
+  }
+}
 </script>
 <style scoped>
 .app-container {
@@ -684,20 +846,23 @@ export default {
   height: 100%;
   display: flex;
 }
+
 .left {
   width: 15%;
   height: 100%;
   margin-right: 10px;
   /* background: green; */
 }
+
 .deptTree {
   width: 100%;
   height: 90%;
   /* background: pink; */
 }
+
 .right {
   width: 83%;
   height: 100%;
   /* background: yellow; */
 }
-</style>
+</style>