区域配置

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

ems-ui-cloud/src/views/basecfg/area/index.vue

@@ -50,16 +50,16 @@
       <el-table-column label="区域名称" align="left" prop="areaName" />
       <el-table-column label="区域简称" align="left" prop="shortName" />
       <el-table-column label="区域编码" align="left" prop="areaCode" />
-      <el-table-column label="区域状态" align="center">
+      <el-table-column label="区域状态" align="center" >
         <template slot-scope="scope">
           {{ objStatusMapping[scope.row.status] }}
         </template>
       </el-table-column>
       <el-table-column label="区块标签" align="center">
         <template slot-scope="scope">
-              <span v-for="tag in scope.row.tagNames" :key="tag" :style="getTagStyle(tag)" class="tag-label">
-                {{ tag }}
-              </span>
+        <span v-for="tag in (scope.row.tagNames && scope.row.tagNames.split(',')) || []" :key="tag" :style="getTagStyle(tag.trim())" class="tag-label">
+          {{ tag.trim() }}
+        </span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -238,6 +238,7 @@ export default {
       refreshTable: true,
       // 标签选项
       emsTagOptions: [],
+     // emsTagLoaded: false, // 添加一个标志位
       // 查询参数
       queryParams: {
         areaCode: null,
@@ -293,20 +294,48 @@ export default {
   methods: {
     getTagStyle(tag) {
       const styleMap = {
-        '公共区域': 'background-color: rgb(255,255,125); color: rgb(109,109,150); padding: 4px 8px; border-radius: 4px; width: 80px; height: 30px; margin: 4px 8px 4px 0; display: inline-block; vertical-align: top;',
-        '商户区域': 'background-color: rgb(206,206,255); color: rgb(109,109,150); padding: 4px 8px; border-radius: 4px; width: 80px; height: 30px; margin: 4px 8px 4px 0; display: inline-block; vertical-align: top;',
-        '热点区域': 'background-color: rgb(203,255,99); color: rgb(109,109,150); padding: 4px 8px; border-radius: 4px; width: 80px; height: 30px; margin: 4px 8px 4px 0; display: inline-block; vertical-align: top;'
+        '公共区域': 'background-color: rgb(255,255,125); color: rgb(109,109,150); padding: 4px 8px; border-radius: 4px; width: 80px; height: 30px; margin: 4px 8px 4px 0; display: block; vertical-align: top;',
+        '商户区域': 'background-color: rgb(206,206,255); color: rgb(109,109,150); padding: 4px 8px; border-radius: 4px; width: 80px; height: 30px; margin: 4px 8px 4px 0; display: block; vertical-align: top;',
+        '充电车位区': 'background-color: rgb(203,255,99); color: rgb(109,109,150); padding: 4px 8px; border-radius: 4px; width: 88px; height: 30px; margin: 4px 8px 4px 0; display: block; vertical-align: top;',
+        '房建区': 'background-color: #e8f4ff; color: rgb(109,109,150); padding: 4px 8px; border-radius: 4px; width: 80px; height: 30px; margin: 4px 8px 4px 0; display: block; vertical-align: top;'
       };
-      return styleMap[tag] || 'background-color: #FFFFFF; color: #000000; padding: 4px 8px; border-radius: 4px; width: 80px; height: 30px; margin: 4px 8px 4px 0; display: inline-block; vertical-align: top;';
+      return styleMap[tag] || 'background-color: #FFFFFF; color: #000000; padding: 4px 8px; border-radius: 4px; width: 80px; height: 30px; margin: 4px 8px 4px 0; display: block; vertical-align: top;';
     },
     /** 查询区域对象列表 */
+    // getList() {
+    //   this.loading = true;
+    //   listArea(this.queryParams).then(response => {
+    //     this.areaList = this.handleTree(response.data, "areaCode", "parentCode");
+    //     console.log("查询",this.areaList)
+    //     this.loading = false;
+    //   });
+    // },
     getList() {
       this.loading = true;
       listArea(this.queryParams).then(response => {
         this.areaList = this.handleTree(response.data, "areaCode", "parentCode");
+        // 递归处理 tagNames
+        this.areaList = this.extractTagNames(this.areaList);
+        console.log("查询", this.areaList);
         this.loading = false;
       });
     },
+
+    // 递归提取 tagNames
+    extractTagNames(list) {
+      return list.map(item => {
+        if (item.areaAttr && item.areaAttr.tagNames) {
+          item.tagNames = item.areaAttr.tagNames; // 将 tagNames 从 areaAttr 提取到根级别
+        } else {
+          item.tagNames = ''; // 如果没有 tagNames，设置为空字符串
+        }
+        if (item.children) {
+          item.children = this.extractTagNames(item.children); // 递归处理子区域
+        }
+        return item;
+      });
+    },
+
     /** 转换区域对象数据结构 */
     normalizer(node) {
       if (node.children && !node.children.length) {
@@ -370,6 +399,7 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
+
     /** 新增按钮操作 */
     handleAdd(row) {
       this.reset();
@@ -411,6 +441,7 @@ export default {
         this.title = "修改区域对象";
       });
     },
+
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
@@ -423,7 +454,6 @@ export default {
               this.getList();
             });
           } else {
-            console.log("xinzeng",this.form)
             addArea(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
@@ -433,6 +463,7 @@ export default {
         }
       });
     },
+
     /** 删除按钮操作 */
     handleDelete(row) {
       this.$modal.confirm('是否确认删除区域对象编号为"' + row.id + '"的数据项？').then(function() {
@@ -442,13 +473,6 @@ export default {
         this.$modal.msgSuccess("删除成功");
       }).catch(() => {});
     },
-    // getEmsTag(tagModel) {
-    //   console.log("tagModel", tagModel)
-    //   getEmsTag(tagModel).then(response => {
-    //     this.emsTagOptions = response.data
-    //     console.log("分区标签",this.emsTagOptions)
-    //   })
-    // }
     getEmsTag(tagModel) {
       console.log("tagModel", tagModel)
       getEmsTag(tagModel).then(response => {
@@ -461,6 +485,7 @@ export default {
         }
       })
     }
+
   }
 };
 </script>