设备台账

Signed-off-by: hsshuxian <3049816743@qq.com>

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

@@ -62,7 +62,7 @@
 
         <el-table v-loading="loading" :data="rbookList" @selection-change="handleSelectionChange">
           <el-table-column type="selection" width="55" align="center" />
-          <el-table-column label="园区编号" align="center" prop="areaCode" />
+          <el-table-column label="园区名称" align="center" prop="areaName" />
           <el-table-column label="记录编号" align="center" prop="recordCode" />
           <el-table-column label="目标对象" align="center" prop="objName">
             <template slot-scope="scope">
@@ -91,25 +91,40 @@
       </el-col>
     </el-row>
     <!-- 查看设备台账对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="650px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="园区编码" prop="areaCode">
-          <el-select v-model="form.areaCode">
-            <el-option v-for="item in areaOptionsForSelect" :label="item.label" :value="item.id" :key="item.id" />
-          </el-select>
-        </el-form-item>
         <el-form-item label="记录编号" prop="recordCode">
           <el-input v-model="form.recordCode" placeholder="请输入记录编号" :disabled="isViewOnly" />
         </el-form-item>
         <el-form-item label="对象类型" >
-          <el-radio-group v-model="form.objType" size="medium" @change="changeObjOptions">
-            <el-radio v-for="(item, index) in dict.type.device_type" :key="value" :label="dict.label"
+          <el-radio-group v-model="form.objType" size="medium" @change="changeObjOptions" :disabled="isViewOnly">
+            <el-radio v-for="(item, index) in dict.type.device_type" :key="index" :label="item.value"
                       :disabled="item.disabled">{{item.label}}</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label=" " prop="objCode">
-          <treeselect v-model="form.objCode" :options="objCodeOptions" :show-count="true" placeholder="请选择具体数据"  @select="handleSelect"/>
-        </el-form-item>
+        <template v-if="form.objType" >
+          <el-form-item label="台账对象" prop="objCode">
+            <template v-if="form.objType === '1'">
+              <treeselect v-model="form.objCode" :options="objCodeOptions" :show-count="true" placeholder="请选择具体数据" @select="handleSelect" :disabled="isViewOnly"/>
+            </template>
+            <template v-else-if="form.objType === '2' || form.objType === '3'">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="" prop="areaCode" class="el-form-item--inline">
+                    <el-select v-model="form.areaCode" :disabled="isViewOnly">
+                      <el-option v-for="item in areaOptionsForSelect" :label="item.label" :value="item.id" :key="item.id" />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="" prop="objCode" class="el-form-item--inline">
+                    <treeselect v-model="form.objCode" :options="objCodeOptions" :show-count="true" placeholder="请选择具体数据" @select="handleSelect" :disabled="isViewOnly"/>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </template>
+          </el-form-item>
+        </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">
@@ -149,25 +164,44 @@
     </el-dialog>
 
     <!-- 添加或修改设备台账对话框 -->
-    <el-dialog :title="title" :visible.sync="addOrUpdateOpen" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="addOrUpdateOpen" width="650px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="园区编码" prop="areaCode">
-          <el-select v-model="form.areaCode">
-            <el-option v-for="item in areaOptionsForSelect" :label="item.label" :value="item.id" :key="item.id" />
-          </el-select>
-        </el-form-item>
         <el-form-item label="记录编号" prop="recordCode">
           <el-input v-model="form.recordCode" placeholder="请输入记录编号" />
         </el-form-item>
         <el-form-item label="对象类型" >
           <el-radio-group v-model="form.objType" size="medium" @change="changeObjOptions">
-            <el-radio v-for="(item, index) in dict.type.device_type" :key="value" :label="dict.label"
+            <el-radio v-for="(item, index) in dict.type.device_type" :key="index" :label="item.value"
                       :disabled="item.disabled">{{item.label}}</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label=" " prop="objCode">
-          <treeselect v-model="form.objCode" :options="objCodeOptions" :show-count="true" placeholder="请选择具体数据"  @select="handleSelect"/>
-        </el-form-item>
+        <template v-if="form.objType">
+          <el-form-item label="台账对象" prop="objCode">
+            <template v-if="form.objType === '1'">
+              <el-form-item label="" prop="objCode" class="el-form-item--inline">
+                <treeselect v-model="form.objCode" :options="objCodeOptions" :show-count="true" placeholder="请选择具体数据" @select="handleSelect"/>
+              </el-form-item>
+            </template>
+            <template v-else-if="form.objType === '2' || form.objType === '3'">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="" prop="areaCode" class="el-form-item--inline">
+                    <el-select v-model="form.areaCode">
+                      <el-option v-for="item in areaOptionsForSelect" :label="item.label" :value="item.id" :key="item.id" />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="" prop="objCode" class="el-form-item--inline">
+                    <treeselect v-model="form.objCode" :options="objCodeOptions" :show-count="true" placeholder="请选择具体数据" @select="handleSelect"/>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </template>
+
+          </el-form-item>
+        </template>
+
         <el-form-item label="创建时间" prop="recordTime">
           <el-date-picker clearable v-model="form.recordTime" type="date" value-format="yyyy-MM-dd"
             placeholder="请选择日期 ">
@@ -199,8 +233,7 @@
 
 <script>
 import {listRbook, getRbook, delRbook, addRbook, updateRbook} from '@/api/device/rbook'
-import {listAllFacs} from '@/api/basecfg/emsfacs'
-import {devTreeByFacs, listDevice, listDevRecursionByArea} from '@/api/device/device'
+import {devTreeByFacs} from '@/api/device/device'
 import {areaTreeSelect} from '@/api/basecfg/area'
 import Treeselect from '@riophae/vue-treeselect'
 
@@ -235,6 +268,7 @@ export default {
       AllCode: [],
       objCodeOptions: [],
       areaCode: '',
+      objCode: null,
       // 控制对象代码显示的变量
       showObjCode: false,
       // 查询参数
@@ -267,9 +301,6 @@ export default {
       form: {},
       // 表单校验
       rules: {
-        areaCode: [
-          {required: true, message: '园区编号不能为空', trigger: 'blur'}
-        ],
         recordCode: [
           {required: true, message: '记录编号不能为空', trigger: 'blur'}
         ],
@@ -297,6 +328,11 @@ export default {
 
   // 当对象类型有值时，显示对象代码输入框
   watch: {
+    'form.areaCode': function(newVal) {
+      if (newVal) {
+        this.updateObjCodeOptions(); // 当 areaCode 变化时更新 objCodeOptions
+      }
+    },
     'form.objType' (newVal) {
       this.showObjCode = !!newVal
     },
@@ -335,6 +371,7 @@ export default {
 
       })
     },
+
     // 筛选节点
     filterNode (value, data) {
       if (!value) return true
@@ -343,7 +380,29 @@ export default {
     // 节点单击事件
     handleNodeClick(data) {
       this.queryParams.areaCode = data.id
+      this.form.areaCode = data.id; // 更新 form.areaCode
       this.handleQuery()
+      this.updateObjCodeOptions(); // 调用更新方法
+    },
+    updateObjCodeOptions() {
+      if (this.form.objType === '2') {
+        // 设备逻辑
+        areaTreeSelect(this.form.areaCode, true).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 (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 () {
@@ -401,21 +460,33 @@ export default {
       const item = this.areaOptions.find(item => item.id === id);
       return item ? item.label : 'default';
     },
-
     changeObjOptions (objType) {
+      this.objCodeOptions = []; // 清空台账对象列表数据
       console.log("objType",objType)
       if (objType === '1') {
         // 区域逻辑
         areaTreeSelect('0', false).then(response => {
-          this.objCodeOptions = [{
-            id: this.form.areaCode,
-            label: this.getAreaLabelById(this.form.areaCode),
-            children: response.data
-          }]
-          console.log("this.objCodeOptions ",this.objCodeOptions )
+          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) // 只保留前三个子项
+              }];
+            } else {
+              this.objCodeOptions = response.data;
+            }
+          } else {
+            this.objCodeOptions = [];
+          }
+          console.log("this.objCodeOptions ", this.objCodeOptions)
         })
-      } else if (objType === '2') {
+      } else if (objType === 2) {
         // 设备逻辑
+        console.log("this.form.areaCode",this.form.areaCode)
         areaTreeSelect(this.form.areaCode, true).then(response => {
           this.objCodeOptions = [{
             id: this.form.areaCode,
@@ -424,7 +495,7 @@ export default {
           }]
           console.log("this.objCodeOptions ",this.objCodeOptions )
         })
-      } else if (objType === '3') {
+      } else if (objType === 3) {
         // 设施逻辑
         const devcCategory = 'Z';
         devTreeByFacs(this.form.areaCode, devcCategory).then(response => {
@@ -433,28 +504,34 @@ export default {
         })
       }
     },
+
     /** 数据自动填补*/
-    handleSelect (value) {
+    handleSelect(value) {
       console.log("数据自动填补", value);
       if (value && value.id && value.label) {
         // 将 label 值填入“目标对象”输入框
         this.form.objName = value.label;
-        // 找到选中的id所在的层级路径，并以"/"连接
-        const pathLabels = this.findPathLabel(this.objCodeOptions, value.id);
+        // 找到选中的id所在的层级路径
+        const pathLabels = this.findPathLabels(this.objCodeOptions, value.id);
         if (pathLabels) {
-          this.form.insLocation = pathLabels.join('/');
+          // 如果路径长度大于1，即包含父级路径，则去除当前层级
+          if (pathLabels.length > 1) {
+            this.form.insLocation = pathLabels.slice(0, -1).join('/');
+          } else {
+            // 如果路径长度为1，即只有当前层级，则直接使用当前层级的label
+            this.form.insLocation = pathLabels[0];
+          }
         }
       }
     },
 
-// 递归函数，用于找到id所在的层级路径，并返回路径上的label数组
-    findPathLabel (options, id, path = []) {
+    findPathLabels(options, id, path = []) {
       for (let i = 0; i < options.length; i++) {
         const option = options[i];
         if (option.id === id) {
           return path.concat(option.label);
         } else if (option.children && option.children.length > 0) {
-          const foundLabels = this.findPathLabel(option.children, id, path.concat(option.label));
+          const foundLabels = this.findPathLabels(option.children, id, path.concat(option.label));
           if (foundLabels) {
             return foundLabels;
           }
@@ -485,7 +562,11 @@ export default {
         console.log('this.form', this.form)
         this.form.objCode = this.form.objCode ? this.form.objCode.split(',') : []
         // 调用 changeObjOptions 来更新 AllCode
-        this.changeObjOptions(this.form.objType)
+        console.log("查看",this.form.objType)
+        // 确保在数据加载完成后调用 changeObjOptions
+        this.$nextTick(() => {
+          this.changeObjOptions(this.form.objType);
+        });
         this.open = true
         this.title = '查看设备台账'
         this.isViewOnly = true // 设置为查看模式
@@ -542,3 +623,9 @@ export default {
   }
 }
 </script>
+<style lang="css">
+.el-form-item--inline {
+  display: inline-block;
+  margin-right: 10px; /* 根据需要调整间距 */
+}
+</style>