钥匙信息，挂锁信息功能

src/views/mes/hw/Keys/index.vue

@@ -26,19 +26,20 @@
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>
+
+        <el-form-item style="margin-left: 20px">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            size="mini"
+            @click="handleQuery"
+            >搜索
+          </el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+            >重置
+          </el-button>
+        </el-form-item>
       </el-row>
-      <el-form-item style="margin-left: 50px">
-        <el-button
-          type="primary"
-          icon="el-icon-search"
-          size="mini"
-          @click="handleQuery"
-          >搜索
-        </el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
-          >重置
-        </el-button>
-      </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
@@ -150,13 +151,20 @@
     <!-- 添加或修改设备维修单对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="450px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
-        <el-form-item label="硬件类型" prop="hardwareId">
-          <treeselect
+        <el-form-item label="所属硬件" prop="hardwareId">
+          <el-select
             v-model="form.hardwareId"
-            :options="machinerytypeOptions"
-            :normalizer="normalizer"
-            placeholder="请选择父类型"
-          />
+            placeholder="请选择所属硬件"
+            clearable
+            style="width: 100%"
+          >
+            <el-option
+              v-for="dict in this.hardWareList"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
         </el-form-item>
         <el-row>
           <el-col :span="15">
@@ -185,10 +193,18 @@
           <el-input v-model="form.keyName" placeholder="请输入钥匙名称" />
         </el-form-item>
         <el-form-item label="钥匙NFC" prop="keyNfc">
-          <el-input v-model="form.keyNfc" placeholder="请输入钥匙Nfc" maxlength="16" />
+          <el-input
+            v-model="form.keyNfc"
+            placeholder="请输入钥匙Nfc"
+            maxlength="16"
+          />
         </el-form-item>
         <el-form-item label="MAC地址" prop="macAddress">
-          <el-input v-model="form.macAddress" placeholder="请输入Mac地址" maxlength="17" />
+          <el-input
+            v-model="form.macAddress"
+            placeholder="请输入Mac地址"
+            maxlength="17"
+          />
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注" />
@@ -210,10 +226,11 @@ import {
   delKeyAPI,
   getKeyInfoAPI,
 } from "@/api/mes/Keys/Keys";
+import { listHardware } from "@/api/mes/hw/hardwareinfo";
 import { genCode } from "@/api/system/autocode/rule";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import { listHanrwareType } from "@/api/mes/hw/hadrwareType";
+// import { listHanrwareType } from "@/api/mes/hw/hadrwareType";
 
 export default {
   name: "lock",
@@ -252,7 +269,11 @@ export default {
         keyNfc: null,
         macAddress: null,
       },
-
+      hardWareList: [],
+      queryhwParams: {
+        current: 1,
+        size: -1,
+      },
       // 表单参数
       form: {
         hardwareId: null,
@@ -313,9 +334,22 @@ export default {
   },
   created() {
     this.getList();
-    this.getTreeselect();
+    this.getHardWare();
   },
   methods: {
+    // 硬件信息
+    getHardWare() {
+      listHardware(this.queryhwParams).then((response) => {
+        this.hardWareList = response.data.records.map((item) => {
+          return {
+            value: item.id,
+            label: item.hardwareName,
+          };
+        });
+
+        console.log(response, this.hardWareList, "获取硬件信息");
+      });
+    },
     //自动生成编码
     handleAutoGenChange(autoGenFlag) {
       if (autoGenFlag) {
@@ -340,30 +374,30 @@ export default {
       });
     },
     /** 查询锁具类型下拉树结构 */
-    getTreeselect() {
-      listHanrwareType().then((response) => {
-        debugger;
-        this.machinerytypeOptions = [];
-        const data = this.handleTree(
-          response.data.records,
-          "id",
-          "parentTypeId"
-        )[0];
-        // console.log(data, "父类型回显");
-        this.machinerytypeOptions.push(data);
-      });
-    },
+    // getTreeselect() {
+    //   listHanrwareType().then((response) => {
+    //     debugger;
+    //     this.machinerytypeOptions = [];
+    //     const data = this.handleTree(
+    //       response.data.records,
+    //       "id",
+    //       "parentTypeId"
+    //     )[0];
+    //     // console.log(data, "父类型回显");
+    //     this.machinerytypeOptions.push(data);
+    //   });
+    // },
     /** 转换设备类型数据结构 */
-    normalizer(node) {
-      if (node.children && !node.children.length) {
-        delete node.children;
-      }
-      return {
-        id: node.id,
-        label: node.hardwareTypeName,
-        children: node.children,
-      };
-    },
+    // normalizer(node) {
+    //   if (node.children && !node.children.length) {
+    //     delete node.children;
+    //   }
+    //   return {
+    //     id: node.id,
+    //     label: node.hardwareTypeName,
+    //     children: node.children,
+    //   };
+    // },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -377,6 +411,7 @@ export default {
         keyNfc: null,
         macAddress: null,
         remark: null,
+        macAddress: null,
       };
 
       this.autoGenFlag = false;

src/views/mes/hw/padLocks/index.vue

@@ -9,40 +9,37 @@
       label-width="100px"
     >
       <el-row>
-
-        <el-form-item label="锁具编码" prop="locksetCode">
+        <el-form-item label="挂锁编码" prop="lockCode">
           <el-input
-            v-model="queryParams.locksetCode"
-            placeholder="请输入锁具编码"
+            v-model="queryParams.lockCode"
+            placeholder="请输入挂锁编码"
             clearable
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>
 
-        <el-form-item label="锁具名称" prop="locksetName">
+        <el-form-item label="挂锁名称" prop="lockName">
           <el-input
-            v-model="queryParams.locksetName"
-            placeholder="请输入锁具名称"
+            v-model="queryParams.lockName"
+            placeholder="请输入挂锁名称"
             clearable
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>
 
+        <el-form-item style="margin-left: 20px">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            size="mini"
+            @click="handleQuery"
+            >搜索
+          </el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+            >重置
+          </el-button>
+        </el-form-item>
       </el-row>
-      <el-form-item style="margin-left: 50px">
-        <el-button
-          type="primary"
-          icon="el-icon-search"
-          size="mini"
-          @click="handleQuery"
-        >搜索
-        </el-button
-        >
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
-        >重置
-        </el-button
-        >
-      </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
@@ -54,9 +51,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['mes:hw:information:add']"
-        >新增
-        </el-button
-        >
+          >新增
+        </el-button>
       </el-col>
 
       <el-col :span="1.5">
@@ -68,9 +64,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['mes:hw:information:batchremove']"
-        >批量删除
-        </el-button
-        >
+          >批量删除
+        </el-button>
       </el-col>
       <right-toolbar
         :showSearch.sync="showSearch"
@@ -83,38 +78,29 @@
       :data="repairList"
       @selection-change="handleSelectionChange"
     >
-      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column type="selection" width="55" align="center" />
       <el-table-column
         label="挂锁编码"
-        width="120px"
+        width="150px"
         align="center"
         prop="lockCode"
       />
       <el-table-column
         label="挂锁名称"
-        width="120px"
+        width="200px"
         align="center"
         prop="lockName"
       />
       <el-table-column
         label="挂锁NFC"
-        width="150px"
+        width="180px"
         align="center"
         prop="lockNfc"
         :show-overflow-tooltip="true"
       />
 
-
-      <el-table-column
-        label="硬件类型Id"
-        align="center"
-        prop="hardwareId"
-      />
-      <el-table-column
-        label="挂锁类型Id"
-        align="center"
-        prop="lockTypeId"
-      />
+      <el-table-column label="硬件信息" align="center" prop="hardwareName" />
+      <el-table-column label="挂锁类型" align="center" prop="lockTypeName" />
       <el-table-column
         label="创建时间"
         align="center"
@@ -139,18 +125,16 @@
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['mes:hw:information:edit']"
-          >编辑
-          </el-button
-          >
+            >编辑
+          </el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['mes:hw:information:remove']"
-          >删除
-          </el-button
-          >
+            >删除
+          </el-button>
           <!--          <el-button size="mini" type="text">预览</el-button>-->
         </template>
       </el-table-column>
@@ -165,22 +149,31 @@
     />
 
     <!-- 添加或修改设备维修单对话框 -->
-    <el-dialog
-      :title="title"
-      :visible.sync="open"
-      width="450px"
-      append-to-body
-    >
+    <el-dialog :title="title" :visible.sync="open" width="450px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
-        <el-form-item label="硬件类型" prop="hardwareId">
-          <treeselect
+        <el-form-item label="所属硬件" prop="hardwareId">
+          <el-select
             v-model="form.hardwareId"
-            :options="machinerytypeOptions"
-            :normalizer="normalizer"
-            placeholder="请选择硬件类型"
+            placeholder="请选择所属硬件"
+            clearable
+            style="width: 100%"
+          >
+            <el-option
+              v-for="dict in this.hardWareList"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="挂锁类型" prop="lockTypeId">
+          <!-- <el-input v-model="form.lockTypeId" placeholder="请输入挂锁类型Id" /> -->
+          <treeselect
+            v-model="form.lockTypeId"
+            :options="lockTypeOption"
+            placeholder="请选择"
           />
         </el-form-item>
-
         <el-row>
           <el-col :span="15">
             <el-form-item label="挂锁编码" prop="lockCode">
@@ -205,28 +198,14 @@
         </el-row>
 
         <el-form-item label="挂锁名称" prop="lockName">
-          <el-input
-            v-model="form.lockName"
-            placeholder="请输入挂锁名称"
-          />
+          <el-input v-model="form.lockName" placeholder="请输入挂锁名称" />
         </el-form-item>
         <el-form-item label="挂锁NFC" prop="lockNfc">
-          <el-input
-            v-model="form.lockNfc"
-            placeholder="请输入挂锁Nfc"
-          />
-        </el-form-item>
-        <el-form-item label="挂锁类型Id" prop="lockTypeId">
-          <el-input
-            v-model="form.lockTypeId"
-            placeholder="请输入挂锁类型Id"
-          />
+          <el-input v-model="form.lockNfc" placeholder="请输入挂锁Nfc" />
         </el-form-item>
+
         <el-form-item label="备注" prop="remark">
-          <el-input
-            v-model="form.remark"
-            placeholder="请输入备注"
-          />
+          <el-input v-model="form.remark" placeholder="请输入备注" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -243,17 +222,18 @@ import {
   addPadLockAPI,
   updatePadLockAPI,
   delPadLockAPI,
-  getPadLockInfoAPI
-} from '@/api/mes/padLocks/padLocks'
-import { genCode } from '@/api/system/autocode/rule'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-import { listHanrwareType } from '@/api/mes/hw/hadrwareType'
-
+  getPadLockInfoAPI,
+} from "@/api/mes/padLocks/padLocks";
+import { listHardware } from "@/api/mes/hw/hardwareinfo";
+import { listPadLockTypeAPI } from "@/api/mes/padLockType/padLockType";
+import { genCode } from "@/api/system/autocode/rule";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+// import { listHanrwareType } from "@/api/mes/hw/hadrwareType";
 
 export default {
-  name: 'lock',
-  dicts: ['hardware_status'],
+  name: "lock",
+  dicts: ["hardware_status"],
   components: { Treeselect },
   data() {
     return {
@@ -275,225 +255,277 @@ export default {
       // 设备维修单表格数据
       repairList: [],
       // 弹出层标题
-      title: '',
+      title: "",
       // 是否显示弹出层
       open: false,
       // 查询参数
-      createTime: '',
+      createTime: "",
       queryParams: {
         current: 1,
         size: 10,
         lockCode: null,
         lockName: null,
         lockNfc: null,
-        lockTypeId:null
+        lockTypeId: null,
+      },
+      hardWareList: [],
+      queryhwParams: {
+        current: 1,
+        size: -1,
       },
 
       // 表单参数
       form: {
-        hardwareId:null,
-        lockTypeId:null,
-        lockCode:null
+        hardwareId: null,
+        lockTypeId: null,
       },
       // 表单校验
       rules: {
         lockCode: [
-          { required: true, message: '挂锁编码不能为空', trigger: 'blur' }
+          { required: true, message: "挂锁编码不能为空", trigger: "blur" },
         ],
         lockName: [
-          { required: true, message: '挂锁名称不能为空', trigger: 'blur' }
-        ]
+          { required: true, message: "挂锁名称不能为空", trigger: "blur" },
+        ],
+        lockNfc: [
+          { required: true, message: "挂锁NFC不能为空", trigger: "blur" },
+        ],
       },
       // 日期选择
       pickerOptions: {
         shortcuts: [
           {
-            text: '最近一周',
+            text: "最近一周",
             onClick(picker) {
-              const end = new Date()
-              const start = new Date()
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-              picker.$emit('pick', [start, end])
-            }
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
           },
           {
-            text: '最近一个月',
+            text: "最近一个月",
             onClick(picker) {
-              const end = new Date()
-              const start = new Date()
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-              picker.$emit('pick', [start, end])
-            }
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
           },
           {
-            text: '最近三个月',
+            text: "最近三个月",
             onClick(picker) {
-              const end = new Date()
-              const start = new Date()
-              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-              picker.$emit('pick', [start, end])
-            }
-          }
-        ]
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
       },
-
       // 新增状态
-
       EditId: 0, //修改判断
-      machinerytypeOptions:[],//锁具类型
-    }
+      lockTypeOption: [], //挂锁类型
+      flatlockTypeOption: [], // 用于快速查找
+    };
   },
   created() {
-    this.getList()
-    this.getTreeselect()
+    this.getList();
+    this.getHardWare();
+    this.getHardwareTypeList();
+    this.convertToTreeStructure();
   },
   methods: {
+    // 硬件信息
+    getHardWare() {
+      listHardware(this.queryhwParams).then((response) => {
+        this.hardWareList = response.data.records.map((item) => {
+          return {
+            value: item.id,
+            label: item.hardwareName,
+          };
+        });
+
+        // console.log(response, this.hardWareList, "获取硬件信息");
+      });
+    },
     //自动生成编码
     handleAutoGenChange(autoGenFlag) {
       if (autoGenFlag) {
-        genCode('PAD_LOCK_CODE').then((response) => {
-          this.form.lockCode = response
-          console.log(response,this.form.lockCode,'lockCode')
-        })
+        genCode("PAD_LOCK_CODE").then((response) => {
+          this.form.lockCode = response;
+          console.log(response, this.form.lockCode, "lockCode");
+        });
       } else {
-        this.form.lockCode = null
+        this.form.lockCode = null;
       }
     },
-    /** 查询设备维修单列表 */
-
+    /** 查询列表 */
     getList() {
-      this.loading = true
+      this.loading = true;
 
       // 锁具数据
       listPadLockAPI(this.queryParams).then((response) => {
-        this.repairList = response.data.records
-        this.total = response.data.total
-        this.loading = false
-      })
+        this.repairList = response.data.records;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
 
+    // 获取硬件类型-所有
+    getHardwareTypeList() {
+      const data = {
+        current: 1,
+        size: 10000,
+      };
+      listPadLockTypeAPI(data).then((response) => {
+        // console.log(response, "Type");
+        this.flatlockTypeOption = response.data.records; // 保存扁平数据
+        this.lockTypeOption = this.convertToTreeStructure(
+          response.data.records
+        );
+      });
     },
-    /** 查询锁具类型下拉树结构 */
-    getTreeselect() {
-      listHanrwareType().then((response) => {
-        debugger;
-        this.machinerytypeOptions = [];
-        const data = this.handleTree(
-          response.data.records,
-          "id",
-          "parentTypeId"
-        )[0];
-        // console.log(data, "父类型回显");
-        this.machinerytypeOptions.push(data);
+
+    // 将扁平数据转换为树形结构
+    convertToTreeStructure(data) {
+      const map = {};
+      const tree = [];
+
+      // console.log(data, "convertToTreeStructure-data");
+
+      data.forEach((item) => {
+        map[item.lockTypeId] = {
+          id: item.lockTypeId,
+          label: item.lockTypeName,
+          children: [],
+        };
       });
+
+      data.forEach((item) => {
+        const node = map[item.lockTypeId];
+        if (item.parentTypeId === "0") {
+          tree.push(node);
+        } else {
+          const parent = map[item.parentTypeId];
+          if (parent) {
+            parent.children.push(node);
+          }
+        }
+      });
+
+      return tree;
     },
-    /** 转换设备类型数据结构 */
-    normalizer(node) {
-      if (node.children && !node.children.length) {
-        delete node.children;
+    // 处理选择变化
+    onSelectChange(selectedId) {
+      this.form.lockTypeId = selectedId;
+
+      // 查找对应的 hardwareTypeName
+      const selectedOption = this.flatHardwareTypeOption.find(
+        (option) => option.id === selectedId
+      );
+      if (selectedOption) {
+        this.form.lockTypeName = selectedOption.lockTypeName;
+      } else {
+        console.error("Selected ID not found:", selectedId);
       }
-      return {
-        id: node.id,
-        label: node.hardwareTypeName,
-        children: node.children,
-      };
+
+      console.log("Selected ID:", selectedId);
+      console.log("Selected Name:", this.form.lockTypeName);
     },
     // 取消按钮
     cancel() {
-      this.open = false
-      this.reset()
+      this.open = false;
+      this.reset();
     },
     // 表单重置
     reset() {
       this.form = {
-        keyName: null,
-        keyCode: null,
-        keyNfc: null,
-        macAddress:null,
+        lockName: null,
+        lockCode: null,
+        lockNfc: null,
         remark: null,
-      }
+      };
 
-      this.autoGenFlag = false
-      this.resetForm('form')
+      this.autoGenFlag = false;
+      this.resetForm("form");
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.current = 1
-      this.getList()
+      this.queryParams.current = 1;
+      this.getList();
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.queryParams.lockCode = ''
-      this.queryParams.lockName = ''
-      this.queryParams.lockId = ''
-      this.resetForm('queryForm')
-      this.handleQuery()
+      this.queryParams.lockCode = "";
+      this.queryParams.lockName = "";
+      this.queryParams.lockId = "";
+      this.resetForm("queryForm");
+      this.handleQuery();
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.lockId)
-      this.codes = selection.map((item) => item.lockCode)
-      this.single = selection.length !== 1
-      this.multiple = !selection.length
+      this.ids = selection.map((item) => item.lockId);
+      this.codes = selection.map((item) => item.lockCode);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset()
-      this.open = true
-      this.EditId = null
-      this.title = '新增挂锁信息'
+      this.reset();
+      this.open = true;
+      this.EditId = null;
+      this.title = "新增挂锁信息";
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset()
-      this.EditId = row.lockId || this.ids
+      this.reset();
+      this.EditId = row.lockId || this.ids;
       getPadLockInfoAPI(this.EditId).then((response) => {
-        this.form = response.data
-        this.open = true
-        this.title = '编辑挂锁信息'
-      })
+        this.form = response.data;
+        this.open = true;
+        this.title = "编辑挂锁信息";
+      });
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs['form'].validate((valid) => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.EditId != null) {
             updatePadLockAPI(this.form).then((response) => {
-              this.$modal.msgSuccess('修改成功')
-              this.open = false
-              this.getList()
-            })
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
           } else {
-            console.log(this.form, 'form')
+            console.log(this.form, "form");
             addPadLockAPI(this.form).then((response) => {
-              this.$modal.msgSuccess('新增成功')
-              this.open = false
-              this.EditId = null
-              this.getList()
-            })
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.EditId = null;
+              this.getList();
+            });
           }
         }
-      })
+      });
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const repairIds = row.lockId || this.ids
-      const repairCodes = row.lockCode || this.codes
+      const repairIds = row.lockId || this.ids;
+      const repairCodes = row.lockCode || this.codes;
       this.$modal
         .confirm('是否确认删除编码为"' + repairCodes + '"的数据项？')
-        .then(function() {
-          return delPadLockAPI(repairIds)
+        .then(function () {
+          return delPadLockAPI(repairIds);
         })
         .then(() => {
-          this.getList()
-          this.$modal.msgSuccess('删除成功')
-        })
-        .catch(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
         })
+        .catch(() => {});
     },
-
-
-  }
-}
+  },
+};
 </script>
 <style scoped>
 .imgstatus {