v3.6.0 增加字典标签样式回显

YunaiV
1 parent 986d1328
Showing 22 changed files with 101 additions and 126 deletions
yudao-ui-admin/src/components/DictTag/index.vue
yudao-ui-admin/src/store/modules/dict.js
yudao-ui-admin/src/utils/dict.js
yudao-ui-admin/src/views/bpm/form/index.vue
yudao-ui-admin/src/views/bpm/oa/leave/detail.vue
yudao-ui-admin/src/views/bpm/oa/leave/index.vue
yudao-ui-admin/src/views/bpm/processInstance/index.vue
yudao-ui-admin/src/views/bpm/task/done.vue
yudao-ui-admin/src/views/system/dept/index.vue
yudao-ui-admin/src/views/system/dict/data.vue
yudao-ui-admin/src/views/system/dict/index.vue
yudao-ui-admin/src/views/system/loginlog/index.vue
yudao-ui-admin/src/views/system/menu/index.vue
yudao-ui-admin/src/views/system/notice/index.vue
yudao-ui-admin/src/views/system/operatelog/index.vue
yudao-ui-admin/src/views/system/post/index.vue
yudao-ui-admin/src/views/system/role/index.vue
yudao-ui-admin/src/views/system/sms/smsChannel.vue
yudao-ui-admin/src/views/system/sms/smsLog.vue
yudao-ui-admin/src/views/system/sms/smsTemplate.vue
 <template>
-  <div>
+  <span>
     <template v-for="(dict, index) in this.getDictDatas2(type, value)">
       <!-- 默认样式 -->
-      <span v-if="dict.colorType === 'default' || dict.colorType === '' || dict.color === undefined" :key="dict.value" :index="index"
+      <span v-if="dict.colorType === 'default' || dict.colorType === '' || dict.colorType === undefined" :key="dict.value" :index="index"
             :class="dict.cssClass">{{ dict.label }}</span>
       <!-- Tag 样式 -->
       <el-tag v-else :key="dict.value" :index="index" :type="dict.colorType" :class="dict.cssClass">
         {{ dict.label }}
       </el-tag>
     </template>
-  </div>
+  </span>
 </template>
 <script>
@@ -33,7 +33,9 @@ const actions = {
         // 处理 dictValue 层级
         dictDataMap[dictData.dictType].push({
           value: dictData.value,
-          label: dictData.label
+          label: dictData.label,
+          colorType: dictData.colorType,
+          cssClass: dictData.cssClass,
         })
       })
       // 存储到 Store 中
@@ -95,6 +95,7 @@ export function getDictDatas2(dictType, values) {
       results.push(dict);
     }
   }
+  // debugger
   return results;
 }
@@ -119,3 +120,5 @@ export function getDictDataLabel(dictType, value) {
   return dict ? dict.label : '';
 }
+export class getDictDataL {
+}
@@ -27,7 +27,7 @@
       <el-table-column label="表单名" align="center" prop="name" />
       <el-table-column label="开启状态" align="center" prop="status">
         <template slot-scope="scope">
-          <span>{{ getDictDataLabel(DICT_TYPE.COMMON_STATUS, scope.row.status) }}</span>
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
         </template>
       </el-table-column>
       <el-table-column label="备注" align="center" prop="remark" />
@@ -4,7 +4,9 @@
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="开始时间：" prop="startTime"> {{parseTime(form.startTime, '{y}-{m}-{d}')}} </el-form-item>
         <el-form-item label="结束时间：" prop="endTime"> {{parseTime(form.endTime, '{y}-{m}-{d}')}} </el-form-item>
-        <el-form-item label="请假类型：" prop="type">{{ typeFormat(form) }}</el-form-item>
+        <el-form-item label="请假类型：" prop="type">
+          <dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="form.type"/>
+        </el-form-item>
         <el-form-item label="原因：" prop="reason"> {{ form.reason }}</el-form-item>
       </el-form>
   </div>
@@ -12,7 +14,7 @@
 <script>
 import { getLeave}  from "@/api/bpm/leave"
-import {getDictDatas, DICT_TYPE, getDictDataLabel} from '@/utils/dict'
+import {getDictDatas, DICT_TYPE} from '@/utils/dict'
 export default {
   name: "LeaveDetail",
   components: {
@@ -46,9 +48,6 @@ export default {
         this.form = response.data;
       });
     },
-    typeFormat(row) {
-      return getDictDataLabel(DICT_TYPE.BPM_OA_LEAVE_TYPE, row.type)
-    }
   }
 };
 </script>
@@ -39,7 +39,11 @@
     <!-- 列表 -->
     <el-table v-loading="loading" :data="list">
       <el-table-column label="申请编号" align="center" prop="id" />
-      <el-table-column label="状态" align="center" prop="result" :formatter="resultFormat" />
+      <el-table-column label="状态" align="center" prop="result">
+        <template slot-scope="scope">
+          <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.result"/>
+        </template>
+      </el-table-column>
       <el-table-column label="开始时间" align="center" prop="startTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.startTime) }}</span>
@@ -50,7 +54,11 @@
           <span>{{ parseTime(scope.row.endTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="请假类型" align="center" prop="type" :formatter="typeFormat" />
+      <el-table-column label="请假类型" align="center" prop="type">
+        <template slot-scope="scope">
+          <dict-tag :type="DICT_TYPE.BPM_OA_LEAVE_TYPE" :value="scope.row.type"/>
+        </template>
+      </el-table-column>
       <el-table-column label="原因" align="center" prop="reason" />
       <el-table-column label="申请时间" align="center" prop="applyTime" width="180">
         <template slot-scope="scope">
@@ -76,20 +76,7 @@
       </el-table-column>
       <el-table-column label="结果" align="center" prop="result">
         <template slot-scope="scope">
-          <span>
-            <el-tag type="primary" v-if="scope.row.result === 1"> <!-- 进行中 -->
-              {{ getDictDataLabel(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT, scope.row.result) }}
-            </el-tag>
-             <el-tag type="success" v-if="scope.row.result === 2"> <!-- 通过 -->
-              {{ getDictDataLabel(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT, scope.row.result) }}
-            </el-tag>
-             <el-tag type="danger" v-if="scope.row.result === 3"> <!-- 不通过 -->
-              {{ getDictDataLabel(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT, scope.row.result) }}
-            </el-tag>
-             <el-tag type="info" v-if="scope.row.result === 4"> <!-- 撤回 -->
-              {{ getDictDataLabel(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT, scope.row.result) }}
-            </el-tag>
-          </span>
+          <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.result"/>
         </template>
       </el-table-column>
       <el-table-column label="提交时间" align="center" prop="createTime" width="180">
@@ -24,20 +24,7 @@
       <el-table-column label="流程发起人" align="center" prop="processInstance.startUserNickname" width="120" />
       <el-table-column label="结果" align="center" prop="result">
         <template slot-scope="scope">
-          <span>
-            <el-tag type="primary" v-if="scope.row.result === 1"> <!-- 进行中 -->
-              {{ getDictDataLabel(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT, scope.row.result) }}
-            </el-tag>
-             <el-tag type="success" v-if="scope.row.result === 2"> <!-- 通过 -->
-              {{ getDictDataLabel(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT, scope.row.result) }}
-            </el-tag>
-             <el-tag type="danger" v-if="scope.row.result === 3"> <!-- 不通过 -->
-              {{ getDictDataLabel(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT, scope.row.result) }}
-            </el-tag>
-             <el-tag type="info" v-if="scope.row.result === 4"> <!-- 撤回 -->
-              {{ getDictDataLabel(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT, scope.row.result) }}
-            </el-tag>
-          </span>
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.result"/>
         </template>
       </el-table-column>
       <el-table-column label="审批意见" align="center" prop="comment" width="200" />
@@ -25,9 +25,13 @@
     <el-table v-loading="loading" :data="deptList" row-key="id" default-expand-all
               :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
       <el-table-column prop="name" label="部门名称" width="260"></el-table-column>
-      <el-table-column prop="status" label="负责人" :formatter="userNicknameFormat" width="120"/>
+      <el-table-column prop="leader" label="负责人" :formatter="userNicknameFormat" width="120"/>
       <el-table-column prop="sort" label="排序" width="200"></el-table-column>
-      <el-table-column prop="status" label="状态" :formatter="statusFormat" width="100"/>
+      <el-table-column prop="status" label="状态" width="100">
+        <template slot-scope="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
       <el-table-column label="创建时间" align="center" prop="createTime" width="200">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
@@ -105,7 +109,7 @@ import Treeselect from &quot;@riophae/vue-treeselect&quot;;
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import {CommonStatusEnum} from '@/utils/constants'
-import { getDictDataLabel, getDictDatas, DICT_TYPE } from '@/utils/dict'
+import { getDictDatas, DICT_TYPE } from '@/utils/dict'
 import {listSimpleUsers} from "@/api/system/user";
 export default {
@@ -199,10 +203,6 @@ export default {
         children: node.children
       };
     },
-    // 字典状态字典翻译
-    statusFormat(row, column) {
-      return getDictDataLabel(DICT_TYPE.COMMON_STATUS, row.status)
-    },
     // 用户昵称展示
     userNicknameFormat(row, column) {
       if (!row.leaderUserId) {
@@ -108,7 +108,7 @@ import { listData, getData, delData, addData, updateData, exportData } from &quot;@/a
 import { listAllSimple, getType } from "@/api/system/dict/type";
 import { CommonStatusEnum } from '@/utils/constants'
-import { getDictDataLabel, getDictDatas, DICT_TYPE } from '@/utils/dict'
+import { getDictDatas, DICT_TYPE } from '@/utils/dict'
 export default {
   name: "Data",
@@ -44,7 +44,11 @@
           </router-link>
         </template>
       </el-table-column>
-      <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
       <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
         <template slot-scope="scope">
@@ -94,7 +98,7 @@
 import { listType, getType, delType, addType, updateType, exportType } from "@/api/system/dict/type";
 import { CommonStatusEnum } from '@/utils/constants'
-import { getDictDataLabel, getDictDatas, DICT_TYPE } from '@/utils/dict'
+import { getDictDatas, DICT_TYPE } from '@/utils/dict'
 export default {
   name: "Dict",
@@ -161,10 +165,6 @@ export default {
         this.loading = false;
       });
     },
-    // 字典状态字典翻译
-    statusFormat(row, column) {
-      return getDictDataLabel(DICT_TYPE.COMMON_STATUS, row.status)
-    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -37,7 +37,7 @@
       <el-table-column label="访问编号" align="center" prop="id" />
       <el-table-column label="日志类型" align="center" prop="logType">
         <template slot-scope="scope">
-          <span>{{ getDictDataLabel(DICT_TYPE.SYSTEM_LOGIN_TYPE, scope.row.logType) }}</span>
+          <dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_TYPE" :value="scope.row.logType" />
         </template>
       </el-table-column>
       <el-table-column label="用户名称" align="center" prop="username" />
@@ -45,8 +45,7 @@
       <el-table-column label="userAgent" align="center" prop="userAgent" width="400" :show-overflow-tooltip="true" />
       <el-table-column label="结果" align="center" prop="status">
         <template slot-scope="scope">
-          <span v-if="scope.row.result === 0">成功</span>
-          <span v-if="scope.row.result > 0">失败：{{ getDictDataLabel(DICT_TYPE.SYSTEM_LOGIN_RESULT, scope.row.result) }} </span>
+          <dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_RESULT" :value="scope.row.result" />
         </template>
       </el-table-column>
       <el-table-column label="登录日期" align="center" prop="loginTime" width="180">
@@ -109,10 +108,6 @@ export default {
         }
       );
     },
-    // 登录状态字典翻译
-    statusFormat(row, column) {
-      return this.selectDictLabel(this.statusOptions, row.status);
-    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNo = 1;
@@ -34,7 +34,11 @@
       <el-table-column prop="sort" label="排序" width="60"></el-table-column>
       <el-table-column prop="permission" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
       <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
-      <el-table-column prop="status" label="状态" :formatter="statusFormat" width="80"></el-table-column>
+      <el-table-column prop="status" label="状态" width="80">
+        <template slot-scope="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
       <el-table-column label="创建时间" align="center" prop="createTime">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
@@ -132,7 +136,7 @@ import &quot;@riophae/vue-treeselect/dist/vue-treeselect.css&quot;;
 import IconSelect from "@/components/IconSelect";
 import { SystemMenuTypeEnum, CommonStatusEnum } from '@/utils/constants'
-import { getDictDataLabel, getDictDatas, DICT_TYPE } from '@/utils/dict'
+import { getDictDatas, DICT_TYPE } from '@/utils/dict'
 export default {
   name: "Menu",
@@ -218,10 +222,6 @@ export default {
         this.menuOptions.push(menu);
       });
     },
-    // 菜单状态字典翻译
-    statusFormat(row, column) {
-      return getDictDataLabel(DICT_TYPE.COMMON_STATUS, row.status)
-    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -29,8 +29,16 @@
     <el-table v-loading="loading" :data="noticeList">
       <el-table-column label="序号" align="center" prop="id" width="100" />
       <el-table-column label="公告标题" align="center" prop="title" :show-overflow-tooltip="true"/>
-      <el-table-column label="公告类型" align="center" prop="type" :formatter="typeFormat" width="100"/>
-      <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" width="100"/>
+      <el-table-column label="公告类型" align="center" prop="type" width="100">
+        <template slot-scope="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_NOTICE_TYPE" :value="scope.row.type"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="status" width="100">
+        <template slot-scope="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
       <el-table-column label="创建者" align="center" prop="createBy" width="100" />
       <el-table-column label="创建时间" align="center" prop="createTime" width="100">
         <template slot-scope="scope">
@@ -102,7 +110,7 @@ import { listNotice, getNotice, delNotice, addNotice, updateNotice } from &quot;@/api
 import Editor from '@/components/Editor';
 import {CommonStatusEnum} from '@/utils/constants'
-import { getDictDataLabel, getDictDatas, DICT_TYPE } from '@/utils/dict'
+import { getDictDatas, DICT_TYPE } from '@/utils/dict'
 export default {
   name: "Notice",
@@ -163,14 +171,6 @@ export default {
         this.loading = false;
       });
     },
-    // 公告状态字典翻译
-    statusFormat(row, column) {
-      return getDictDataLabel(DICT_TYPE.COMMON_STATUS, row.status)
-    },
-    // 公告状态字典翻译
-    typeFormat(row, column) {
-      return getDictDataLabel(DICT_TYPE.SYSTEM_NOTICE_TYPE, row.type)
-    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -45,7 +45,7 @@
       <el-table-column label="操作名" align="center" prop="name" width="180" />
       <el-table-column label="操作类型" align="center" prop="type">
         <template slot-scope="scope">
-          <span>{{ getDictDataLabel(DICT_TYPE.SYSTEM_OPERATE_TYPE, scope.row.type) }}</span>
+          <dict-tag :type="DICT_TYPE.SYSTEM_OPERATE_TYPE" :value="scope.row.type"/>
         </template>
       </el-table-column>
       <el-table-column label="操作人" align="center" prop="userNickname" />
@@ -72,13 +72,8 @@
       </el-table-column>
     </el-table>
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNo"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList" />
     <!-- 操作日志详细 -->
     <el-dialog title="访问日志详细" :visible.sync="open" width="700px" append-to-body>
@@ -95,7 +90,8 @@
           </el-col>
           <el-col :span="24">
             <el-form-item label="操作信息：">
-              {{ form.module }} | {{ form.name }} | {{ getDictDataLabel(DICT_TYPE.SYSTEM_OPERATE_TYPE, form.type) }}
+              {{ form.module }} | {{ form.name }}
+              <dict-tag :type="DICT_TYPE.SYSTEM_OPERATE_TYPE" :value="form.type"/>
               <br /> {{ form.content }}
               <br /> {{ form.exts }}
             </el-form-item>
@@ -184,14 +180,6 @@ export default {
         }
       );
     },
-    // 操作日志状态字典翻译
-    statusFormat(row, column) {
-      return this.selectDictLabel(this.statusOptions, row.status);
-    },
-    // 操作日志类型字典翻译
-    typeFormat(row, column) {
-      return this.selectDictLabel(this.typeOptions, row.businessType);
-    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNo = 1;
@@ -35,7 +35,11 @@
       <el-table-column label="岗位编码" align="center" prop="code" />
       <el-table-column label="岗位名称" align="center" prop="name" />
       <el-table-column label="岗位排序" align="center" prop="sort" />
-      <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
@@ -88,7 +92,7 @@
 import { listPost, getPost, delPost, addPost, updatePost, exportPost } from "@/api/system/post";
 import {CommonStatusEnum} from '@/utils/constants'
-import { getDictDataLabel, getDictDatas, DICT_TYPE } from '@/utils/dict'
+import { getDictDatas, DICT_TYPE } from '@/utils/dict'
 export default {
   name: "Post",
@@ -152,10 +156,6 @@ export default {
         this.loading = false;
       });
     },
-    // 岗位状态字典翻译
-    statusFormat(row, column) {
-      return getDictDataLabel(DICT_TYPE.COMMON_STATUS, row.status)
-    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -40,7 +40,11 @@
       <el-table-column label="角色编号" prop="id" width="120" />
       <el-table-column label="角色名称" prop="name" :show-overflow-tooltip="true" width="150" />
       <el-table-column label="角色标识" prop="code" :show-overflow-tooltip="true" width="150" />
-      <el-table-column label="角色类型" prop="type" :formatter="typeFormat" width="80"></el-table-column>
+      <el-table-column label="角色类型" prop="type" width="80">
+        <template slot-scope="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_ROLE_TYPE" :value="scope.row.type"/>
+        </template>
+      </el-table-column>
       <el-table-column label="显示顺序" prop="sort" width="100" />
       <el-table-column label="状态" align="center" width="100">
         <template slot-scope="scope">
@@ -180,7 +184,7 @@ import {listSimpleMenus} from &quot;@/api/system/menu&quot;;
 import {assignRoleMenu, listRoleMenus, assignRoleDataScope} from "@/api/system/permission";
 import {listSimpleDepts} from "@/api/system/dept";
 import {CommonStatusEnum, SystemDataScopeEnum} from "@/utils/constants";
-import {DICT_TYPE, getDictDataLabel, getDictDatas} from "@/utils/dict";
+import {DICT_TYPE, getDictDatas} from "@/utils/dict";
 export default {
   name: "Role",
@@ -287,10 +291,6 @@ export default {
               : CommonStatusEnum.ENABLE;
         });
     },
-    // 角色类型字典翻译
-    typeFormat(row, column) {
-      return getDictDataLabel(DICT_TYPE.SYSTEM_ROLE_TYPE, row.type)
-    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -37,12 +37,12 @@
       <el-table-column label="短信签名" align="center" prop="signature" />
       <el-table-column label="渠道编码" align="center" prop="code">
         <template slot-scope="scope">
-          <span>{{ getDictDataLabel(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, scope.row.code) }}</span>
+          <dict-tag :type="DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE" :value="scope.row.code"/>
         </template>
       </el-table-column>>
       <el-table-column label="启用状态" align="center" prop="status">
         <template slot-scope="scope">
-          <span>{{ getDictDataLabel(DICT_TYPE.COMMON_STATUS, scope.row.status) }}</span>
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
         </template>
       </el-table-column>>
       <el-table-column label="备注" align="center" prop="remark" />
@@ -67,33 +67,33 @@
         <template slot-scope="scope">
           <div>{{ scope.row.mobile }}</div>
           <div v-if="scope.row.userType && scope.row.userId">
-            {{ getDictDataLabel(DICT_TYPE.USER_TYPE, scope.row.userType) + '(' + scope.row.userId + ')' }}
+            <dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType"/>{{ '(' + scope.row.userId + ')' }}
           </div>
         </template>
       </el-table-column>
       <el-table-column label="短信内容" align="center" prop="templateContent" width="300" />
       <el-table-column label="发送状态" align="center" width="180">
         <template slot-scope="scope">
-          <div>{{ getDictDataLabel(DICT_TYPE.SYSTEM_SMS_SEND_STATUS, scope.row.sendStatus) }}</div>
+          <dict-tag :type="DICT_TYPE.SYSTEM_SMS_SEND_STATUS" :value="scope.row.sendStatus"/>
           <div>{{ parseTime(scope.row.sendTime) }}</div>
         </template>
       </el-table-column>
       <el-table-column label="接收状态" align="center" width="180">
         <template slot-scope="scope">
-          <div>{{ getDictDataLabel(DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS, scope.row.receiveStatus) }}</div>
+          <dict-tag :type="DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS" :value="scope.row.receiveStatus"/>
           <div>{{ parseTime(scope.row.receiveTime) }}</div>
         </template>
       </el-table-column>
       <el-table-column label="短信渠道" align="center" width="120">
         <template slot-scope="scope">
           <div>{{ formatChannelSignature(scope.row.channelId) }}</div>
-          <div>【{{ getDictDataLabel(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, scope.row.channelCode) }}】</div>
+          <dict-tag :type="DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE" :value="scope.row.channelCode"/>
         </template>
       </el-table-column>
       <el-table-column label="模板编号" align="center" prop="templateId" />
       <el-table-column label="短信类型" align="center" prop="templateType">
         <template slot-scope="scope">
-          <span>{{ getDictDataLabel(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE, scope.row.templateType) }}</span>
+          <dict-tag :type="DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE" :value="scope.row.templateType"/>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -116,15 +116,14 @@
           </el-col>
           <el-col :span="24">
             <el-form-item label="短信渠道：">
-              {{
-                formatChannelSignature(form.channelId)
-              }}【{{ getDictDataLabel(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, form.channelCode) }}】
+              {{formatChannelSignature(form.channelId) }}
+              <dict-tag :type="DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE" :value="form.channelCode"/>
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="短信模板：">
-              {{ form.templateId }} | {{ form.templateCode }} |
-              {{ getDictDataLabel(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE, form.templateType) }}
+              {{ form.templateId }} | {{ form.templateCode }}
+              <dict-tag :type="DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE" :value="form.templateType"/>
             </el-form-item>
           </el-col>
           <el-col :span="24">
@@ -132,7 +131,9 @@
           </el-col>
           <el-col :span="24">
             <el-form-item label="用户信息：">{{ form.mobile }}
-              <span v-if="form.userType && form.userId"> | {{ getDictDataLabel(DICT_TYPE.USER_TYPE, form.userType) }} | {{ form.userId }}</span>
+              <span v-if="form.userType && form.userId">
+                <dict-tag :type="DICT_TYPE.USER_TYPE" :value="form.userType"/>({{ form.userId }})
+              </span>
             </el-form-item>
           </el-col>
           <el-col :span="24">
@@ -145,7 +146,9 @@
             <el-form-item label="创建时间：">{{ parseTime(form.createTime) }}</el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="发送状态：">{{ getDictDataLabel(DICT_TYPE.SYSTEM_SMS_SEND_STATUS, form.sendStatus) }}</el-form-item>
+            <el-form-item label="发送状态：">
+              <dict-tag :type="DICT_TYPE.SYSTEM_SMS_SEND_STATUS" :value="form.sendStatus"/>
+            </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="发送时间：">{{ parseTime(form.sendTime) }}</el-form-item>
@@ -164,7 +167,9 @@
             <el-form-item label="API 请求编号：">{{ form.apiRequestId }}</el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="接收状态：">{{ getDictDataLabel(DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS, form.receiveStatus) }}</el-form-item>
+            <el-form-item label="接收状态：">
+              <dict-tag :type="DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS" :value="form.receiveStatus"/>
+            </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="接收时间：">{{ parseTime(form.receiveTime) }}</el-form-item>
@@ -58,12 +58,12 @@
       <el-table-column label="模板内容" align="center" prop="content" width="300" />
       <el-table-column label="短信类型" align="center" prop="type">
         <template slot-scope="scope">
-          <span>{{ getDictDataLabel(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE, scope.row.type) }}</span>
+          <dict-tag :type="DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE" :value="scope.row.type"/>
         </template>
       </el-table-column>
       <el-table-column label="开启状态" align="center" prop="status">
         <template slot-scope="scope">
-          <span>{{ getDictDataLabel(DICT_TYPE.COMMON_STATUS, scope.row.status) }}</span>
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
         </template>
       </el-table-column>
       <el-table-column label="备注" align="center" prop="remark" />
@@ -71,7 +71,7 @@
       <el-table-column label="短信渠道" align="center" width="120">
         <template slot-scope="scope">
           <div>{{ formatChannelSignature(scope.row.channelId) }}</div>
-          <div>【{{ getDictDataLabel(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, scope.row.channelCode) }}】</div>
+          <dict-tag :type="DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE" :value="scope.row.channelCode"/>
         </template>
       </el-table-column>
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
@@ -49,7 +49,7 @@
       <el-table-column label="联系手机" align="center" prop="contactMobile" />
       <el-table-column label="租户状态" align="center" prop="status">
         <template slot-scope="scope">
-          <span>{{ getDictDataLabel(DICT_TYPE.COMMON_STATUS, scope.row.status) }}</span>
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
         </template>
       </el-table-column>
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
@@ -35,6 +35,7 @@
 * 【新增】前端的表格右侧工具栏组件支持显隐列，具体可见【用户管理】功能 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/20e34e35a3bdc48e6a4c58e3849aa729bd18efe5)
 * 【新增】前端的菜单导航显示风格 TopNav（false 为 左侧导航菜单，true 为顶部导航菜单），支持布局的保存与重置 [commit1](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/4bf5b04d542014a49c5a41b20935cef35033a518) [commit2](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/cff4391f2d7830770731c0034085c0f77ea8c68e)
 * 【新增】前端的网页标题支持根据选择的菜单，动态展示标题 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/7bf9a85263e0c44b2bc88485b83557c129583f5c)
+* 【新增】字典标签样式回显，例如说开启的状态展示为 primary 蓝色，禁用的状态为 info 灰色 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/986d1328e0a0d37e2de2fb9d937faeed9d9bee7b)
 * 【新增】前端的 iframe 组件，方便内嵌网页 [commit](https://gitee.com/zhijiantianya/ruoyi-vue-pro/commit/4a8129bffa9e3928c56333e29f5874f55a079764)
 ### 🐞 Bug Fixes