From 8eed7ac30cdf0a3a3d0daebb4dd855b0c584a0df Mon Sep 17 00:00:00 2001
From: xusd <xu13181496959@163.com>
Date: Mon, 2 Sep 2024 11:24:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=BA=E5=BA=8A=E8=AE=BE=E5=A4=87=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86-=E6=9C=BA=E5=BA=8A=E7=BB=84=E4=BB=B6=E6=9C=BA?=
 =?UTF-8?q?=E5=BA=8A=E4=B8=8B=E6=8B=89=E6=94=B9=E4=B8=BA=E7=BA=A7=E8=81=94?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 imt-ui/src/api/system/equip/equipInfo.js      |  8 +++
 .../equip/componentInfo/ComponentInfoForm.vue | 51 ++++++++++++++++---
 .../system/equip/componentInfo/index.vue      | 28 +++++++---
 3 files changed, 72 insertions(+), 15 deletions(-)

diff --git a/imt-ui/src/api/system/equip/equipInfo.js b/imt-ui/src/api/system/equip/equipInfo.js
index bfcdbbd..2e8431e 100644
--- a/imt-ui/src/api/system/equip/equipInfo.js
+++ b/imt-ui/src/api/system/equip/equipInfo.js
@@ -59,3 +59,11 @@ export function getEquipSelection() {
     method: 'get'
   })
 }
+
+// 机床信息级联
+export function getEquipCascader() {
+  return request({
+    url: '/equip/equipInfo/cascader',
+    method: 'get'
+  })
+}
diff --git a/imt-ui/src/views/system/equip/componentInfo/ComponentInfoForm.vue b/imt-ui/src/views/system/equip/componentInfo/ComponentInfoForm.vue
index 6685c11..09cbee1 100644
--- a/imt-ui/src/views/system/equip/componentInfo/ComponentInfoForm.vue
+++ b/imt-ui/src/views/system/equip/componentInfo/ComponentInfoForm.vue
@@ -10,10 +10,12 @@
           <el-input v-model="formData.componentNo" placeholder="请输入组件编号"/>
         </el-form-item>
         <el-form-item label="机床设备" prop="equipId">
-          <el-select v-model="formData.equipId" placeholder="请选择机床设备">
-            <el-option v-for="item in equipSelection"
-                       :key="item.equipId" :label="item.equipNo" :value="item.equipId"/>
-          </el-select>
+          <el-cascader
+            v-model="cascaderValue"
+            :options="equipCascader"
+            :props="{ value: 'id',label: 'name',children: 'children'}"
+            clearable
+            @change="cascaderChange"></el-cascader>
         </el-form-item>
         <el-form-item label="组件类型" prop="componentType">
           <el-select v-model="formData.componentType" placeholder="请选择组件类型">
@@ -41,13 +43,15 @@
 
 <script>
 import * as ComponentInfoApi from '@/api/system/equip/componentInfo';
-import {getEquipSelection}  from '@/api/system/equip/equipInfo';
+import {getEquipCascader}  from '@/api/system/equip/equipInfo';
 
 export default {
   name: "ComponentInfoForm",
   components: {},
   data() {
     return {
+      cascaderValue:[],
+      equipCascader: [],
       equipSelection: [],
       // 弹出层标题
       dialogTitle: "",
@@ -75,11 +79,42 @@ export default {
     };
   },
   created() {
-    getEquipSelection().then(res=>{
-      this.equipSelection = res;
+    getEquipCascader().then(res=>{
+      this.equipCascader = res;
     })
   },
   methods: {
+    //回显(多级)
+    changeDetSelect(key, treeData) {
+      let arr = []; // 在递归时操作的数组
+      let returnArr = []; // 存放结果的数组
+      let depth = 0; // 定义全局层级
+      // 定义递归函数
+      function childrenEach(childrenData, depthN) {
+        for (var j = 0; j < childrenData.length; j++) {
+          depth = depthN; // 将执行的层级赋值 到 全局层级
+          arr[depthN] = childrenData[j].id;
+          if (childrenData[j].id === key) {
+            returnArr = arr.slice(0, depthN + 1); //将目前匹配的数组，截断并保存到结果数组，
+            break;
+          } else {
+            if (childrenData[j].children) {
+              depth++;
+              childrenEach(childrenData[j].children, depth);
+            }
+          }
+        }
+        return returnArr;
+      }
+      return childrenEach(treeData, depth);
+    },
+    cascaderChange(value){
+      if (value.length > 0){
+        this.formData.equipId = value[1];
+      }else {
+        this.formData.equipId = null;
+      }
+    },
     /** 打开弹窗 */
     async open(id) {
       this.dialogVisible = true;
@@ -90,6 +125,7 @@ export default {
         try {
           const res = await ComponentInfoApi.getComponentInfo(id);
           this.formData = res.data;
+          this.cascaderValue = this.changeDetSelect(this.formData.equipId,this.equipCascader);
           this.title = "修改机床组件信息";
         } finally {
           this.formLoading = false;
@@ -132,6 +168,7 @@ export default {
         status: undefined,
         remark: undefined,
       };
+      this.cascaderValue = [];
       this.resetForm("formRef");
     }
   }
diff --git a/imt-ui/src/views/system/equip/componentInfo/index.vue b/imt-ui/src/views/system/equip/componentInfo/index.vue
index cfaf713..309ce9d 100644
--- a/imt-ui/src/views/system/equip/componentInfo/index.vue
+++ b/imt-ui/src/views/system/equip/componentInfo/index.vue
@@ -11,10 +11,12 @@
                   @keyup.enter.native="handleQuery"/>
       </el-form-item>
       <el-form-item label="机床设备" prop="equipId">
-        <el-select v-model="queryParams.equipId" placeholder="请选择机床设备" clearable size="small">
-          <el-option v-for="item in equipSelection"
-                     :key="item.equipId" :label="item.equipNo" :value="item.equipId"/>
-        </el-select>
+        <el-cascader
+          v-model="cascaderValue"
+          :options="equipCascader"
+          :props="{ value: 'id',label: 'name',children: 'children'}"
+          clearable
+          @change="cascaderChange"></el-cascader>
       </el-form-item>
       <el-form-item label="组件类型" prop="componentType">
         <el-select v-model="queryParams.componentType" placeholder="请选择组件类型" clearable size="small">
@@ -86,7 +88,7 @@
 
 <script>
 import * as ComponentInfoApi from '@/api/system/equip/componentInfo';
-import {getEquipSelection}  from '@/api/system/equip/equipInfo';
+import {getEquipCascader}  from '@/api/system/equip/equipInfo';
 import ComponentInfoForm from './ComponentInfoForm.vue';
 
 export default {
@@ -96,7 +98,8 @@ export default {
   },
   data() {
     return {
-      equipSelection: [],
+      cascaderValue:[],
+      equipCascader: [],
       // 遮罩层
       loading: true,
       // 导出遮罩层
@@ -127,11 +130,18 @@ export default {
   },
   created() {
     this.getList();
-    getEquipSelection().then(res=>{
-      this.equipSelection = res;
+    getEquipCascader().then(res=>{
+      this.equipCascader = res;
     })
   },
   methods: {
+    cascaderChange(value){
+      if (value.length > 0){
+        this.queryParams.equipId = value[1];
+      }else {
+        this.queryParams.equipId = null;
+      }
+    },
     /** 查询列表 */
     async getList() {
       try {
@@ -150,7 +160,9 @@ export default {
     },
     /** 重置按钮操作 */
     resetQuery() {
+      this.cascaderValue = [];
       this.resetForm("queryForm");
+      this.queryParams.equipId = null;
       this.handleQuery();
     },
     /** 添加/修改操作 */