机床设备管理-机床组件机床下拉改为级联选择

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'
+  })
+}

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");
     }
   }

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();
     },
     /** 添加/修改操作 */