update

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

@@ -4,23 +4,24 @@
       <el-col :span="4" :xs="24">
         <div class="head-container">
           <el-input v-model="areaName" placeholder="请输入服务区名称" clearable size="small" prefix-icon="el-icon-search"
-            style="margin-bottom: 20px" />
+                    style="margin-bottom: 20px" />
         </div>
         <div class="head-container">
           <el-tree ref="tree" :data="areaOptions" default-expand-all :expand-on-click-node="false" :filter-node-method="filterNode"
-            node-key="id" highlight-current @node-click="handleNodeClick" />
+                   node-key="id" highlight-current @node-click="handleNodeClick" />
         </div>
       </el-col>
       <el-col :span="18" :xs="24" >
-        <el-tabs v-model="queryParams.objType" @tab-click="resetQuery">
-          <el-tab-pane v-for="dict in dict.type.device_type" :key="dict.value" :label="dict.label" :name="dict.value">
+        <!-- 优化标签页渲染逻辑，添加字典存在性判断 -->
+        <el-tabs v-model="queryParams.objType" @tab-click="resetQuery" v-if="dict.type.device_type && dict.type.device_type.length">
+          <el-tab-pane v-for="dictItem in dict.type.device_type" :key="dictItem.value" :label="dictItem.label" :name="dictItem.value">
           </el-tab-pane>
         </el-tabs>
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
-          label-width="68px">
+                 label-width="68px">
           <el-form-item label="目标对象" prop="objName">
             <el-autocomplete v-model="queryParams.objName" placeholder="请输入对象名称" clearable
-              :fetch-suggestions="querySearch" @select="handleSelect"></el-autocomplete>
+                             :fetch-suggestions="querySearch" @select="handleSelect"></el-autocomplete>
           </el-form-item>
           <el-form-item label="创建时间">
             <el-date-picker
@@ -35,11 +36,11 @@
           </el-form-item>
           <el-form-item label="维护标题" prop="maintainTitle">
             <el-input v-model="queryParams.maintainTitle" placeholder="请输入维护标题" clearable
-              @keyup.enter.native="handleQuery" />
+                      @keyup.enter.native="handleQuery" />
           </el-form-item>
           <el-form-item label="维护人" prop="maintainPerson">
             <el-input v-model="queryParams.maintainPerson" placeholder="请输入维护人" clearable
-              @keyup.enter.native="handleQuery" />
+                      @keyup.enter.native="handleQuery" />
           </el-form-item>
           <el-form-item>
             <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -49,12 +50,12 @@
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
             <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
-              v-hasPermi="['ems:rbook:add']">新增
+                       v-hasPermi="['ems:rbook:add']">新增
             </el-button>
           </el-col>
           <el-col :span="1.5">
             <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
-              v-hasPermi="['ems:rbook:export']">导出
+                       v-hasPermi="['ems:rbook:export']">导出
             </el-button>
           </el-col>
           <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
@@ -85,7 +86,7 @@
           </el-table-column>
         </el-table>
         <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
-          :limit.sync="queryParams.pageSize" @pagination="getList" />
+                    :limit.sync="queryParams.pageSize" @pagination="getList" />
       </el-col>
     </el-row>
     <!-- 查看设备台账对话框 -->
@@ -125,7 +126,7 @@
         </template>
         <el-form-item label="创建时间" prop="recordTime">
           <el-date-picker clearable v-model="form.recordTime" type="date" value-format="yyyy-MM-dd"
-            placeholder="请选择日期 yyyy-MM-dd HH:mm:ss" :disabled="isViewOnly">
+                          placeholder="请选择日期 yyyy-MM-dd HH:mm:ss" :disabled="isViewOnly">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="目标对象" prop="objName">
@@ -155,7 +156,7 @@
           编辑
         </el-button>
         <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(selectedRow)"
-          v-hasPermi="['ems:rbook:remove']">删除
+                   v-hasPermi="['ems:rbook:remove']">删除
         </el-button>
         <el-button v-if="isViewOnly" @click="cancel">取 消</el-button>
       </div>
@@ -202,7 +203,7 @@
 
         <el-form-item label="创建时间" prop="recordTime">
           <el-date-picker clearable v-model="form.recordTime" type="date" value-format="yyyy-MM-dd"
-            placeholder="请选择日期 ">
+                          placeholder="请选择日期 ">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="目标对象" prop="objName">
@@ -238,39 +239,27 @@ import Treeselect from '@riophae/vue-treeselect'
 export default {
   name: 'Rbook',
   components: {Treeselect},
-   dicts: ['device_type'],
+  dicts: ['device_type'], // 声明需要加载的字典
   data () {
     return {
-      isViewOnly: false, // 添加这个标志变量
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 设备台账表格数据
-      rbookList: [],
-      areaOptionsForSelect:[],
-      // 弹出层标题
-      title: '',
-      // 是否显示弹出层
-      open: false,
-      addOrUpdateOpen: false,
-      // 控制台账对象显示的变量
-      isObjCodeVisible: false,
-      //能源设施全部数据
-      AllCode: [],
-      objCodeOptions: [],
-      areaCode: '',
-      objCode: null,
-      // 控制对象代码显示的变量
-      showObjCode: false,
+      isViewOnly: false, // 查看/编辑模式标志
+      loading: true, // 遮罩层
+      ids: [], // 选中数组
+      single: true, // 非单个禁用
+      multiple: true, // 非多个禁用
+      showSearch: true, // 显示搜索条件
+      total: 0, // 总条数
+      rbookList: [], // 设备台账表格数据
+      areaOptionsForSelect:[], // 区域选择器选项
+      title: '', // 弹出层标题
+      open: false, // 查看对话框显示状态
+      addOrUpdateOpen: false, // 新增/编辑对话框显示状态
+      isObjCodeVisible: false, // 台账对象显示控制
+      AllCode: [], // 能源设施全部数据
+      objCodeOptions: [], // 对象代码选项
+      areaCode: '', // 区域代码
+      objCode: null, // 对象代码
+      showObjCode: false, // 对象代码显示控制
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -297,7 +286,7 @@ export default {
         {code: '2', name: '设备'},
         {code: '3', name: '设施'}
       ],
-     // 表单参数
+      // 表单参数
       form: {},
       // 表单校验
       rules: {
@@ -314,26 +303,28 @@ export default {
           {required: true, message: '日期 yyyy-MM-dd 不能为空', trigger: 'blur'}
         ]
       },
-      areaName: undefined,
-      areaOptions: [],
+      areaName: undefined, // 区域名称搜索
+      areaOptions: [], // 区域树数据
+      selectedRow: null // 当前选中行
     }
-
   },
   async created () {
     await this.getAreaTreeByTag('0', 1)
-    // 确保默认选中第一个Tab，并设置 queryParams.objType
-    this.queryParams.objType = this.dict.type.device_type[0].value;
-    this.getList(true); // 调用 getList 并传递一个参数来强制刷新
+    // 等待字典加载完成后再初始化默认Tab（关键修复）
+    this.$nextTick(() => {
+      // 确保字典数据存在再赋值
+      if (this.dict.type.device_type && this.dict.type.device_type.length > 0) {
+        this.queryParams.objType = this.dict.type.device_type[0].value;
+      }
+      this.getList(true);
+    });
   },
-
-  // 当对象类型有值时，显示对象代码输入框
   watch: {
     'form.areaCode': function(newVal) {
       if (newVal) {
         this.updateObjCodeOptions();
       }
     },
-
     'form.objType' (newVal) {
       if (!this.isViewOnly) {
         this.isObjCodeVisible = !!newVal;
@@ -345,7 +336,7 @@ export default {
         this.form.objCode = null;
       }
     },
-    // 根据名称筛选区域树
+    // 区域树筛选
     areaName (val) {
       this.$refs.tree.filter(val)
     },
@@ -354,8 +345,7 @@ export default {
     /** 查询设备台账列表 */
     getList(refresh = false) {
       if (refresh) {
-        // 强制刷新时重置页码
-        this.queryParams.pageNum = 1;
+        this.queryParams.pageNum = 1; // 强制刷新时重置页码
       }
       this.loading = true
       listRbook(this.queryParams).then(response => {
@@ -374,9 +364,8 @@ export default {
           children: []
         }].concat(response.data)
         this.form.areaCode = '-1'
-        // 创建一个新的数组仅包含“全部”下的前三个子项
+        // 取前3个子项作为区域选择器选项
         this.areaOptionsForSelect = response.data.slice(0, 3);
-
       })
     },
 
@@ -385,13 +374,16 @@ export default {
       if (!value) return true
       return data.label.indexOf(value) !== -1
     },
+
     // 节点单击事件
     handleNodeClick(data) {
       this.queryParams.areaCode = data.id
-      this.form.areaCode = data.id; // 更新 form.areaCode
+      this.form.areaCode = data.id;
       this.handleQuery()
-      this.updateObjCodeOptions(); // 调用更新方法
+      this.updateObjCodeOptions();
     },
+
+    // 更新对象代码选项
     updateObjCodeOptions() {
       if (this.form.objType === '2') {
         // 设备逻辑
@@ -401,25 +393,23 @@ export default {
             label: this.getAreaLabelById(this.form.areaCode),
             children: response.data
           }];
-          console.log("this.objCodeOptions ", this.objCodeOptions);
         });
       } else if (this.form.objType === '3') {
         // 设施逻辑
         const devcCategory = 'Z';
         devTreeByFacs(this.form.areaCode, devcCategory).then(response => {
           this.objCodeOptions = response.data;
-          console.log("this.objCodeOptions ", this.objCodeOptions);
         });
       }
     },
+
     // 取消按钮
     cancel () {
-      // 切换回只读模式
-      // this.isViewOnly = true;
       this.addOrUpdateOpen = false
       this.open = false
       this.reset()
     },
+
     // 表单重置
     reset () {
       this.form = {
@@ -439,12 +429,12 @@ export default {
       this.resetForm('form')
       this.dateRange = []
     },
-    // 搜索建议的方法
+
+    // 搜索建议方法
     querySearch (queryString, cb) {
       const results = this.rbookList.filter(item => {
         return item.objName.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
       })
-      // 调用回调函数，返回建议列表
       cb(results.map(item => ({value: item.objName})))
     },
 
@@ -452,8 +442,8 @@ export default {
     handleQuery () {
       this.queryParams.pageNum = 1
       this.getList()
-      console.log(this.queryParams.recordTime)
     },
+
     /** 重置按钮操作 */
     resetQuery () {
       this.resetForm('queryForm')
@@ -466,71 +456,64 @@ export default {
       this.single = selection.length !== 1
       this.multiple = !selection.length
     },
+
+    // 根据ID获取区域名称
     getAreaLabelById(id) {
       const item = this.areaOptions.find(item => item.id === id);
       return item ? item.label : 'default';
     },
+
+    // 切换对象类型时更新选项
     changeObjOptions (objType) {
-      this.objCodeOptions = []; // 清空台账对象列表数据
-      console.log("objType",objType)
+      this.objCodeOptions = [];
       if (objType === '1') {
         // 区域逻辑
         areaTreeSelect('0', 1).then(response => {
-          console.log("areaTreeSelect response:", response); // 检查返回的数据
-          // 只保留“default”下的前三个子项
           if (response.data && response.data.length > 0) {
             const firstItem = response.data[0];
             if (firstItem.label === 'default' && firstItem.children) {
               this.objCodeOptions = [{
                 id: firstItem.id,
                 label: firstItem.label,
-                children: firstItem.children.slice(0, 3) // 只保留前三个子项
+                children: firstItem.children.slice(0, 3)
               }];
             } else {
               this.objCodeOptions = response.data;
             }
-          } else {
-            this.objCodeOptions = [];
           }
-          console.log("this.objCodeOptions ", this.objCodeOptions)
         })
       } else if (objType === 2) {
         // 设备逻辑
-        console.log("this.form.areaCode",this.form.areaCode)
         areaTreeSelect(this.form.areaCode, 3).then(response => {
           this.objCodeOptions = [{
             id: this.form.areaCode,
             label: this.getAreaLabelById(this.form.areaCode),
             children: response.data
           }]
-          console.log("this.objCodeOptions ",this.objCodeOptions )
         })
       } else if (objType === 3) {
         // 设施逻辑
         const devcCategory = 'Z';
         devTreeByFacs(this.form.areaCode, devcCategory).then(response => {
           this.objCodeOptions = response.data
-          console.log("this.objCodeOptions ",this.objCodeOptions )
         })
       }
     },
 
-    /** 数据自动填补*/
+    /** 数据自动填补 */
     handleSelect(value) {
-      console.log("数据自动填补", value);
       if (value && value.id && value.label) {
         this.form.objName = value.label;
         const pathLabels = this.findPathLabels(this.objCodeOptions, value.id);
         if (pathLabels) {
-          if (pathLabels.length > 1) {
-            this.form.insLocation = pathLabels.slice(0, -1).join('/');
-          } else {
-            this.form.insLocation = pathLabels[0];
-          }
+          this.form.insLocation = pathLabels.length > 1
+            ? pathLabels.slice(0, -1).join('/')
+            : pathLabels[0];
         }
       }
     },
 
+    // 查找路径标签
     findPathLabels(options, id, path = []) {
       for (let i = 0; i < options.length; i++) {
         const option = options[i];
@@ -546,7 +529,7 @@ export default {
       return null;
     },
 
-    /**编辑按钮操作*/
+    /** 编辑按钮操作 */
     handleEdit () {
       this.isViewOnly = false // 切换到编辑模式
       this.title = '编辑设备台账'
@@ -557,30 +540,28 @@ export default {
       this.reset()
       this.addOrUpdateOpen = true
       this.title = '添加设备台账'
-
     },
-    /**查看按钮*/
+
+    /** 查看按钮操作 */
     handleViewRec (row) {
       this.selectedRow = row
       const id = row.id || this.ids
       getRbook(id).then(response => {
         this.form = response.data
-        console.log('this.form', this.form)
         this.form.objCode = this.form.objCode ? this.form.objCode.split(',') : []
         this.$nextTick(() => {
           this.changeObjOptions(this.form.objType);
         });
-        this.isObjCodeVisible = false; // 查看模式下隐藏台账对象输入框
+        this.isObjCodeVisible = false;
         this.open = true
         this.title = '查看设备台账'
-        this.isViewOnly = true // 设置为查看模式
-
-
+        this.isViewOnly = true
       })
     },
-    /** 提交按钮 */
+
+    /** 提交按钮操作 */
     submitForm () {
-      // 确保 objCode 是一个数组
+      // 确保objCode是数组并转为字符串
       if (!Array.isArray(this.form.objCode)) {
         this.form.objCode = [this.form.objCode]
       }
@@ -590,7 +571,6 @@ export default {
           if (this.form.id != null) {
             updateRbook(this.form).then(response => {
               this.$modal.msgSuccess('修改成功')
-              console.log('点击确认后response里面的内容', response)
               this.open = false
               this.addOrUpdateOpen = false
               this.getList()
@@ -616,8 +596,7 @@ export default {
         this.getList()
         this.$modal.msgSuccess('删除成功')
         this.open = false
-      }).catch(() => {
-      })
+      }).catch(() => {})
     },
 
     /** 导出按钮操作 */