标签管理

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

ems-ui-application/src/views/basecfg/zoning/index.vue

@@ -332,8 +332,10 @@ export default {
       )
     },
     getEmsTag(tagModel) {
+      console.log("tagModel", tagModel)
       getEmsTag(tagModel).then(response => {
         this.emsTagOptions = response.data
+        console.log("分区标签",this.emsTagOptions)
       })
     }
   }

ems-ui-cloud/src/api/basecfg/area.js

@@ -9,6 +9,14 @@ export function listArea(query) {
   })
 }
 
+export function listDetailArea(query) {
+  return request({
+    url: '/ems/basecfg/area/listDetail',
+    method: 'get',
+    params: query
+  })
+}
+
 // 查询区域对象详细
 export function getArea(id) {
   return request({

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

@@ -55,13 +55,13 @@
           {{ 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 && 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">
+          <template slot-scope="scope">
+          <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">
         <template slot-scope="scope">
           <el-button
@@ -150,12 +150,12 @@
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="所有单位" prop="areaAttr.attrOrg">
-              <el-input v-model="form.areaAttr.attrOrg" placeholder="请输入属性组织" />
+              <el-input v-model="form.areaAttr.attrOrg" placeholder="请输入所有单位" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="管理单位" prop="areaAttr.mgrOrg">
-              <el-input v-model="form.areaAttr.mgrOrg" placeholder="请输入管理组织" />
+              <el-input v-model="form.areaAttr.mgrOrg" placeholder="请输入管理单位" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -167,7 +167,7 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="联系电话" prop="areaAttr.phone">
-              <el-input v-model="form.areaAttr.phone" placeholder="请输入电话" />
+              <el-input v-model="form.areaAttr.phone" placeholder="请输入联系电话" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -179,14 +179,14 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="建筑面积" prop="areaAttr.floorArea">
-              <el-input v-model="form.areaAttr.floorArea" placeholder="请输入楼层面积" />
+              <el-input v-model="form.areaAttr.floorArea" placeholder="请输入建筑面积" />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="使用面积" prop="areaAttr.usableArea">
-              <el-input v-model="form.areaAttr.usableArea" placeholder="请输入可用面积" />
+              <el-input v-model="form.areaAttr.usableArea" placeholder="请输入使用面积" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -206,7 +206,7 @@
 </template>
 
 <script>
-import { listArea, getArea, delArea, addArea, updateArea } from "@/api/basecfg/area";
+import {  getArea, delArea, addArea, updateArea, listDetailArea } from '@/api/basecfg/area'
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import SubTitle from '@/components/SubTitle/index.vue'
@@ -238,7 +238,7 @@ export default {
       refreshTable: true,
       // 标签选项
       emsTagOptions: [],
-     // emsTagLoaded: false, // 添加一个标志位
+      tagCodeToColorMap:{},
       // 查询参数
       queryParams: {
         areaCode: null,
@@ -290,16 +290,25 @@ export default {
   created() {
     this.getList();
     this.getEmsTag('Area');
+    // 初始化 form.areaAttr 为一个空对象
+    this.form.areaAttr = {};
   },
   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: 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;'
+    getTagStyle(tagName) {
+      // 从tagName找到对应的tagCode
+      const tagCode = this.emsTagOptions.find(tag => tag.label === tagName)?.value;
+      const color = this.tagCodeToColorMap[tagCode] || '#FFFFFF'; // 默认白色
+      return {
+        backgroundColor: color,
+        color:'#808080',
+        padding: '4px 8px',
+        borderRadius: '4px',
+        width: '80px',
+        height: '30px',
+        margin: '4px 8px 4px 0',
+        display: 'inline-block',
+        verticalAlign: '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() {
@@ -312,8 +321,9 @@ export default {
     // },
     getList() {
       this.loading = true;
-      listArea(this.queryParams).then(response => {
+      listDetailArea(this.queryParams).then(response => {
         this.areaList = this.handleTree(response.data, "areaCode", "parentCode");
+        console.log("areaList",this.areaList)
         // 递归处理 tagNames
         this.areaList = this.extractTagNames(this.areaList);
         console.log("查询", this.areaList);
@@ -349,7 +359,7 @@ export default {
     },
 	/** 查询区域对象下拉树结构 */
     getTreeselect() {
-      listArea().then(response => {
+    listDetailArea().then(response => {
         this.areaOptions = [];
         const data = { areaCode: 0, areaName: '顶级节点', children: [] };
         data.children = this.handleTree(response.data, "areaCode", "parentCode");
@@ -372,10 +382,9 @@ export default {
         shortName: null,
         desc: null,
         orderNum: null,
-        status: null
-      };
-      this.form.areaAttr={
-          areaCode:null,
+        status: null,
+        areaAttr: {
+          areaCode: null,
           attrOrg: null,
           mgrOrg: null,
           leader: null,
@@ -384,10 +393,25 @@ export default {
           floorArea: null,
           usableArea: null,
           floor: null,
-          tagCodes:null,
-          tagNames:null,
-          tagCodeList:null
-      }
+          tagCodes: null,
+          tagNames: null,
+          tagCodeList: []
+      }// 确保 areaAttr 始终为一个空对象
+      };
+      // this.form.areaAttr={
+      //     areaCode:null,
+      //     attrOrg: null,
+      //     mgrOrg: null,
+      //     leader: null,
+      //     phone: null,
+      //     openDate: null,
+      //     floorArea: null,
+      //     usableArea: null,
+      //     floor: null,
+      //     tagCodes:null,
+      //     tagNames:null,
+      //     tagCodeList:null
+      // }
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -411,7 +435,9 @@ export default {
       }
       // 确保 areaAttr 和 tagCodeList 是对象和数组
       this.form.areaAttr = this.form.areaAttr || {};
+      console.log("this.form.areaAttr",this.form.areaAttr)
       this.form.areaAttr.tagCodeList = this.form.areaAttr.tagCodeList || [];
+      console.log("this.form.areaAttr.tagCodeList",this.form.areaAttr.tagCodeList)
       this.open = true;
       this.title = "添加区域对象";
     },
@@ -447,7 +473,6 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
-            console.log("修改",this.form)
             updateArea(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
@@ -479,9 +504,15 @@ export default {
         if (response && response.data) {
           this.emsTagOptions = response.data.map(item => ({
             label: item.tagName,
-            value: item.tagCode
+            value: item.tagCode,
+            color: item.tagColor
           }));
-          console.log("分区标签", this.emsTagOptions)
+          //颜色映射
+          this.tagCodeToColorMap = {};
+          this.emsTagOptions.forEach(item => {
+            this.tagCodeToColorMap[item.value] = item.color;
+          });
+
         }
       })
     }

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

@@ -1,31 +1,16 @@
 <template>
   <div class="app-container">
+    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
+      <el-tab-pane
+        v-for="item in tagModelOptions"
+        :key="item.code"
+        :label="item.name"
+        :name="item.code">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="标签分类" prop="tagModel">
-        <el-select v-model="queryParams.tagModel">
-          <el-option v-for="item in tagModelOptions" :label="item.name" :value="item.code" :key="item.code" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="标签代码" prop="tagCode">
-        <el-input
-          v-model="queryParams.tagCode"
-          placeholder="请输入标签代码"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="标签名称" prop="tagName">
-        <el-input
-          v-model="queryParams.tagName"
-          placeholder="请输入标签名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <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-item>-->
+<!--        <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">
@@ -76,13 +61,19 @@
 
     <el-table v-loading="loading" :data="tagList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="标签分类" align="center" prop="tagModel" >
+<!--      <el-table-column label="标签分类" align="center" prop="tagModel" >-->
+<!--        <template slot-scope="scope">-->
+<!--          <span>{{ getTagModelName(scope.row.tagModel)}}</span>-->
+<!--        </template>-->
+<!--      </el-table-column>-->
+      <el-table-column label="标签代码" align="center" prop="tagCode" />
+      <el-table-column label="标签名称" align="center" prop="tagName" />
+      <el-table-column label="标签颜色" align="center" prop="tagColor" >
         <template slot-scope="scope">
-          <span>{{ getTagModelName(scope.row.tagModel)}}</span>
+          <div v-if="scope.row.tagColor" class="color-display" :style="{ backgroundColor: scope.row.tagColor }"></div>
+          <div v-else>暂无颜色</div>
         </template>
       </el-table-column>
-      <el-table-column label="标签代码" align="center" prop="tagCode" />
-      <el-table-column label="标签名称" align="center" prop="tagName" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -91,15 +82,19 @@
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['ems:tag:edit']"
-          >修改</el-button>
-          <el-button size="mini"
-                     type="text"
-                     icon="el-icon-delete"
-                     class="deleteBtn"
-                     @click="handleDelete(scope.row)"
-                     v-hasPermi="['basecfg:tag:remove']">
-            删除</el-button>
-
+            v-if="scope.row.modFlag === 1">
+            修改
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            class="deleteBtn"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['basecfg:tag:remove']"
+            v-if="scope.row.modFlag === 1">
+            删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -111,21 +106,29 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
-
+      </el-tab-pane>
+    </el-tabs>
     <!-- 添加或修改标签分类对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="标签分类" prop="tagModel">
-          <el-select v-model="form.tagModel" >
-            <el-option v-for="item in tagModelOptions" :label="item.name" :value="item.code" :key="item.code" />
-          </el-select>
-        </el-form-item>
         <el-form-item label="标签代码" prop="tagCode">
           <el-input v-model="form.tagCode" placeholder="请输入标签代码" />
         </el-form-item>
         <el-form-item label="标签名称" prop="tagName">
           <el-input v-model="form.tagName" placeholder="请输入标签名称" />
         </el-form-item>
+        <el-form-item label="标签颜色" prop="tagColor">
+          <el-color-picker
+            v-model="form.tagColor"
+            show-alpha
+            :predefine="predefineColors">
+          </el-color-picker>
+        </el-form-item>
+
+        <!-- 隐藏的mod_flag字段 -->
+        <el-form-item label-hidden>
+          <el-input v-model="form.modFlag" type="hidden"></el-input>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -164,16 +167,27 @@ export default {
       tagModelOptions: [
         {"code": "Area", "name": "区域标签"}
       ],
+      // 当前激活的标签分类
+      activeTab: 'Area',
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
         tagModel: null,
         tagCode: null,
-        tagName: null
+        tagName: null,
+        modFlag:null,
+        tagColor:''
       },
       // 表单参数
-      form: {},
+      form: {
+        id: null,
+        tagModel: null, // 默认值为null，将在打开弹框时设置
+        tagCode: null,
+        tagName: null,
+        modFlag:null,
+        tagColor:''
+      },
       // 表单校验
       rules: {
         tagModel: [
@@ -185,7 +199,23 @@ export default {
         tagName: [
           { required: true, message: "标签名称不能为空", trigger: "blur" }
         ]
-      }
+      },
+      predefineColors: [
+        '#ff4500',
+        '#ff8c00',
+        '#ffd700',
+        '#90ee90',
+        '#00ced1',
+        '#1e90ff',
+        '#c71585',
+        'rgba(255, 69, 0, 0.68)',
+        'rgb(255, 120, 0)',
+        'hsv(51, 100, 98)',
+        'hsva(120, 40, 94, 0.5)',
+        'hsl(181, 100%, 37%)',
+        'hsla(209, 100%, 56%, 0.73)',
+        '#c7158577'
+      ],
     };
   },
   created() {
@@ -212,7 +242,9 @@ export default {
         id: null,
         tagModel: null,
         tagCode: null,
-        tagName: null
+        tagName: null,
+        modFlag:null,
+        tagColor:''
       };
       this.resetForm("form");
     },
@@ -231,12 +263,17 @@ export default {
       this.ids = selection.map(item => item.id)
       this.single = selection.length!==1
       this.multiple = !selection.length
+
     },
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
       this.open = true;
       this.title = "添加标签分类";
+      // 设置默认的标签分类
+      console.log("this.activeTab",this.activeTab)
+      this.form.tagModel = this.activeTab;
+      this.form.modFlag = 1;
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -244,6 +281,7 @@ export default {
       const id = row.id || this.ids
       getTag(id).then(response => {
         this.form = response.data;
+        this.form.tagModel = this.activeTab; // 设置默认的标签分类
         this.open = true;
         this.title = "修改标签分类";
       });
@@ -253,12 +291,14 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
+            console.log("this.form",this.form)
             updateTag(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
+            console.log("this.form",this.form)
             addTag(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
@@ -289,7 +329,19 @@ export default {
         "Area": "区域标签"
       };
       return modelMap[code] || '未知';
+    },
+    handleTabClick(tab) {
+      this.activeTab = tab.name;
+      this.getList();
     }
   }
 };
 </script>
+<style lang="css">
+.color-display {
+  width: 20px;
+  height: 20px;
+  border-radius: 2px;
+  display: inline-block;
+}
+</style>