台账

ems-ui/src/views/devmgr/el/index.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="对象类型" prop="objType">
-        <el-select v-model="queryParams.objType" placeholder="请选择对象类型" clearable>
+        <el-select v-model="queryParams.objType" placeholder="请选择对象类型" clearable  >
           <el-option
             v-for="dict in dict.type.device_type"
             :key="dict.value"
@@ -12,12 +12,13 @@
         </el-select>
       </el-form-item>
       <el-form-item label="目标对象" prop="objName">
-        <el-input
+        <el-autocomplete
           v-model="queryParams.objName"
           placeholder="请输入对象名称"
           clearable
-          @keyup.enter.native="handleQuery"
-        />
+          :fetch-suggestions="querySearch"
+          @select="handleSelect"
+        ></el-autocomplete>
       </el-form-item>
       <el-form-item label="创建时间" prop="recordTime">
         <el-date-picker clearable
@@ -62,28 +63,6 @@
       </el-col>
       <el-col :span="1.5">
         <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['ems:rbook:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['ems:rbook:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
           type="warning"
           plain
           icon="el-icon-download"
@@ -143,15 +122,15 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="对象代码" prop="objCode" >
-          <el-select v-model="form.objCode" placeholder="请输入对象代码" @change="handleSelect" :disabled="isViewOnly">
-            <el-option
-              v-for="item in AllCode"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            ></el-option>
-          </el-select>
+        <el-form-item label="    " prop="objCode" v-if="showObjCode" >
+          <el-cascader
+            v-model="form.objCode"
+            :options="AllCode"
+            placeholder="请选择具体数据"
+            @change="handleSelect"
+            :props="{ value: 'value', label: 'label', children: 'children' }"
+            :disabled="isViewOnly"
+          ></el-cascader>
         </el-form-item>
         <el-form-item label="创建时间" prop="recordTime">
           <el-date-picker clearable
@@ -207,18 +186,14 @@
             ></el-option>
           </el-select>
         </el-form-item>
-<!--        <el-form-item label="计量对象" prop="objCode">-->
-<!--          <treeselect v-model="objCode" :options="objCodeOptions" :show-count="true" placeholder="请选择计量对象" ref="treeObjCodeOptions" />-->
-<!--        </el-form-item>-->
-        <el-form-item label="对象代码" prop="objCode" >
-          <el-select v-model="form.objCode" placeholder="请输入对象代码" @change="handleSelect"  >
-            <el-option
-              v-for="item in AllCode"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            ></el-option>
-          </el-select>
+        <el-form-item label="   " prop="objCode"  v-if="showObjCode">
+          <el-cascader
+            v-model="form.objCode"
+            :options="AllCode"
+            placeholder="请选择具体数据"
+            @change="handleSelect"
+            :props="{ value: 'value', label: 'label', children: 'children' }"
+          ></el-cascader>
         </el-form-item>
         <el-form-item label="创建时间" prop="recordTime">
           <el-date-picker clearable
@@ -226,7 +201,7 @@
                           type="date"
                           value-format="yyyy-MM-dd"
                           placeholder="请选择日期 "
-                          :disabled="isViewOnly">
+                          >
           </el-date-picker>
         </el-form-item>
         <el-form-item label="目标对象" prop="objName" >
@@ -283,18 +258,18 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
-      addOrUpdateOpen:false,
+      addOrUpdateOpen: false,
       //能源设施全部数据
-      AllCode:[],
+      AllCode: [],
       objCodeOptions: [],
-      areaCode: '', // 你需要根据实际情况设置或获取 areaCode
-      // 日期范围
-      dateRange: [],
+      areaCode: '',
+      // 控制对象代码显示的变量
+      showObjCode: false,
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        selectedRow:null,
+        selectedRow: null,
         recordTime: null,
         recordCode: null,
         objType: null,
@@ -304,39 +279,44 @@ export default {
         maintainTitle: null,
         maintainContent: null,
         maintainPerson: null,
-        recordTimeRange:[]
+        recordTimeRange: []
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
         recordCode: [
-          { required: true, message: "记录编号不能为空", trigger: "blur" }
+          {required: true, message: "记录编号不能为空", trigger: "blur"}
         ],
         objType: [
-          { required: true, message: "对象类型 1：设施 2：设备不能为空", trigger: "change" }
-        ],
-        objCode: [
-          { required: true, message: "对象代码不能为空", trigger: "blur" }
+          {required: true, message: "对象类型不能为空", trigger: "change"}
         ],
         maintainTitle: [
-          { required: true, message: "维护标题不能为空", trigger: "blur" }
+          {required: true, message: "维护标题不能为空", trigger: "blur"}
         ],
         recordTime: [
-          { required: true, message: "日期 yyyy-MM-dd HH:mm:ss不能为空", trigger: "blur" }
+          {required: true, message: "日期 yyyy-MM-dd 不能为空", trigger: "blur"}
         ],
-      }
+      },
+
     };
+
   },
   created() {
     this.getList();
   },
+  // 当对象类型有值时，显示对象代码输入框
+  watch: {
+    'form.objType'(newVal) {
+      this.showObjCode = !!newVal;
+    }
+  },
   methods: {
     /** 查询设备台账列表 */
     getList() {
       this.loading = true;
       listRbook(this.queryParams).then(response => {
-        console.log("设备台账搜索参数！！！！！",this.queryParams)
+        console.log("设备台账搜索参数！！！！！", this.queryParams)
         this.rbookList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -346,7 +326,7 @@ export default {
     // 取消按钮
     cancel() {
       // this.isViewOnly = true; // 切换回只读模式
-      this.addOrUpdateOpen=false;
+      this.addOrUpdateOpen = false;
       this.open = false;
       this.reset();
     },
@@ -369,8 +349,16 @@ export default {
       };
       this.resetForm("form");
       this.dateRange = [];
-      // this.isViewOnly = true; // 重置为可编辑模式
     },
+    // 搜索建议的方法
+    querySearch(queryString, cb) {
+      const results = this.rbookList.filter(item => {
+        return item.objName.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;
+      });
+      // 调用回调函数，返回建议列表
+      cb(results.map(item => ({ value: item.objName })));
+    },
+
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
@@ -385,78 +373,104 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
-    handleSelect(value){
-      //获取能源设施所有信息
-      // this.loading = true
-      listAllFacs(this.areaCode).then(response =>{
-        const data = response.data;
-        //循环输出
-        for (let i = 0; i <data.length ; i++) {
-          if (value === data[i].facsCode){
-            this.form.objName = data[i].facsName
-            this.form.insLocation=data[i].refAreaName
-          }
-        }
-        // this.loading = false;
-      })
-      ///获取能源设备所有信息
-      // this.loading = true
-      listDevRecursionByArea(this.queryParams).then(response => {
-        this.total = response.total
-        //循环输出
-        for (let i = 0; i <this.total ; i++) {
-          if (value === response.rows[i].deviceCode){
-            this.form.objName = response.rows[i].deviceName
-            this.form.insLocation=response.rows[i].areaPath
-          }
-        }
-        // this.loading = false
-      })
-
-    },
 
+    /**对象类型*/
     changeObjOptions(objType) {
       if (objType == 1) {
-        // this.loading = true;
+        // 设施
         listAllFacs(this.areaCode).then(response => {
           this.objCodeOptions = response.data;
+          console.log("设施多少数据！！！", this.objCodeOptions);
           this.AllCode = this.objCodeOptions.map(item => ({
             value: item.facsCode,
-            label: item.facsCode
+            label: item.facsName
           }));
-          // this.loading = false;
-          // 重置对象代码和相关字段，但不刷新整个表单
-          this.form.objCode = null;
-          this.form.objName = null;
-          this.form.insLocation = null;
         });
       } else if (objType == 0) {
-        // this.loading = true;
+        // 设备
         devTreeByFacs(this.areaCode).then(response => {
-          this.objCodeOptions = response.data
-          this.AllCode = response.rows.map(row => ({
-            value: row.deviceCode,
-            label: row.deviceCode
-          }));
-        })
-        // listDevRecursionByArea(this.queryParams).then(response => {
-        //   this.total = response.total;
-          this.AllCode = response.rows.map(row => ({
-            value: row.deviceCode,
-            label: row.deviceCode
-          }));
-        //   // this.loading = false;
-        //   // 重置对象代码和相关字段，但不刷新整个表单
-        //   this.form.objCode = null;
-        //   this.form.objName = null;
-        //   this.form.insLocation = null;
-        // });
+          this.objCodeOptions = response.data;
+          this.AllCode = this.buildTree(this.objCodeOptions);
+          console.log("设备数据:", this.objCodeOptions);
+          console.log("构建后的树形数据:", JSON.parse(JSON.stringify(this.AllCode))); // 打印格式化的 JSON 字符串
+
+        });
+
       }
     },
+    buildTree(data) {
+      return data.map(item => {
+        const node = {
+          value: item.id,
+          label: item.label,
+          children: item.children ? this.buildTree(item.children) : undefined
+        };
+        return node;
+      });
+    },
+    /** 数据自动填补*/
+    handleSelect(value) {
+      // 当用户从下拉列表中选择一个建议时触发
+      this.queryParams.objName = item.value;
+      this.handleQuery(); // 调用查询方法
+      console.log("value", value);
+      // 获取能源设施所有信息
+      listAllFacs(this.areaCode).then(response => {
+        const data = response.data;
+        console.log("data", data);
+        // 循环输出
+        for (let i = 0; i < data.length; i++) {
+          if (value.includes(data[i].facsCode)) {
+            this.form.objName = data[i].facsName;
+            this.form.insLocation = data[i].refAreaName;
+            // console.log("选中设施的对象名称:", this.form.objName);
+            // console.log("选中设施的安装位置:", this.form.insLocation);
+            return;
+          }
+        }
 
+      });
+      // 获取能源设备所有信息
+      devTreeByFacs(this.areaCode).then(response => {
+        const data = response.data;
+        console.log("data", data);
+        function findDeviceById(data, path = [], ids) {
+          for (const item of data) {
+            const currentPath = [...path, item.label];
+            if (ids.includes(item.id)) {
+              let labels = currentPath.length > 2 ? currentPath.slice(0, -1) : currentPath;
+              return {labels, lastLabel: item.label, found: true};
+            }
+            if (item.children && item.children.length) {
+              const result = findDeviceById(item.children, currentPath, ids);
+              if (result.found) {
+                return result;
+              }
+            }
+          }
+          return {labels: [], lastLabel: null, found: false};
+        }
+        let lastResult = {labels: [], lastLabel: null, found: false}; // 初始化最后结果变量
+        value.forEach(id => {
+          const result = findDeviceById(data, [], [id]);
+          if (result.found) {
+            lastResult = result;
+          }
+        });
+
+        if (lastResult.found) {
+          this.form.objName = lastResult.lastLabel;
+          this.form.insLocation = lastResult.labels.join(' / ');
+          console.log("最终选中设备的名称:", this.form.objName);
+          console.log("最终选中设备的安装位置:", this.form.insLocation);
+        } else {
+          console.log("没有找到匹配的设备");
+        }
+      });
+    },
 
     /**编辑按钮操作*/
     handleEdit() {
@@ -470,47 +484,49 @@ export default {
       this.addOrUpdateOpen = true;
       this.title = "添加设备台账";
     },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id || this.ids
-      getRbook(id).then(response => {
-        this.form = response.data;
-        this.addOrUpdateOpen = true;
-        this.title = "修改设备台账";
-      });
-    },
-    /** 查看按钮操作*/
-    handleViewRec(row){
-      this.selectedRow=row
-      // this.reset();
-      const id = row.id || this.ids
+    /**查看按钮*/
+    handleViewRec(row) {
+      this.selectedRow = row;
+      const id = row.id || this.ids;
       getRbook(id).then(response => {
         this.form = response.data;
-        console.log("查看按钮触发的事件",response.data)
+        console.log("this.form",this.form)
+        this.form.objCode = this.form.objCode ? this.form.objCode.split(',') : [];  // 确保 objCode 是数组
+
+        // 调用 changeObjOptions 来更新 AllCode
+        this.changeObjOptions(this.form.objType);
         this.open = true;
         this.title = "查看设备台账";
         this.isViewOnly = true; // 设置为查看模式
+        // if (this.form.objType === 1) {
+        //   this.form.objType = "设施";
+        // } else if (this.form.objType === 0) {
+        //   this.form.objType = "设备";
+        // }
       });
     },
-
     /** 提交按钮 */
     submitForm() {
+      // 确保 objCode 是一个数组
+      if (!Array.isArray(this.form.objCode)) {
+        this.form.objCode = [this.form.objCode];
+      }
+      this.form.objCode = this.form.objCode.join(',');
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
             updateRbook(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
-              console.log('点击确认后response里面的内容',response)
+              console.log('点击确认后response里面的内容', response)
               this.open = false;
-              this.addOrUpdateOpen=false
+              this.addOrUpdateOpen = false
               this.getList();
             });
           } else {
             addRbook(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
-              this.addOrUpdateOpen=false
+              this.addOrUpdateOpen = false
               this.getList();
             });
           }
@@ -521,13 +537,14 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除设备台账编号为"' + ids + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除设备台账编号为"' + ids + '"的数据项？').then(function () {
         return delRbook(ids);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-       this.open=false
-      }).catch(() => {});
+        this.open = false
+      }).catch(() => {
+      });
     },
 
     /** 导出按钮操作 */