feat：增加 DictTag 字典标签组件

2025-04-05 11:32:38 +08:00
parent fe6e19d763
commit 0bef7c6bd9
7 changed files with 113 additions and 97 deletions
--- a/apps/web-antd/src/views/system/mail/log/modules/detail.vue
+++ b/apps/web-antd/src/views/system/mail/log/modules/detail.vue
@@ -2,11 +2,12 @@
 import type { SystemMailLogApi } from '#/api/system/mail/log';

 import { useVbenModal } from '@vben/common-ui';
-import { Descriptions, Tag } from 'ant-design-vue';
+import { Descriptions } from 'ant-design-vue';
+import { DictTag } from '#/components/dict-tag';

 import { ref } from 'vue';
 import { formatDateTime } from '@vben/utils';
-import { DICT_TYPE, getDictLabel } from '#/utils/dict';
+import { DICT_TYPE } from '#/utils/dict';

 const formData = ref<SystemMailLogApi.SystemMailLog>();

@@ -63,10 +64,7 @@ const [Modal, modalApi] = useVbenModal({
          <div v-html="formData?.templateContent"></div>
        </Descriptions.Item>
        <Descriptions.Item label="发送状态">
-          <!-- TODO @芋艿: 数据字典-->
-          <Tag color="processing">
-            {{ getDictLabel(DICT_TYPE.SYSTEM_MAIL_SEND_STATUS, formData?.sendStatus ) }}
-          </Tag>
+          <DictTag :type="DICT_TYPE.SYSTEM_MAIL_SEND_STATUS" :value="formData?.sendStatus" />
        </Descriptions.Item>
        <Descriptions.Item label="发送时间">
          {{ formatDateTime(formData?.sendTime || '') }}
--- a/apps/web-antd/src/views/system/notify/message/modules/detail.vue
+++ b/apps/web-antd/src/views/system/notify/message/modules/detail.vue
@@ -2,13 +2,14 @@
 import type { SystemNotifyMessageApi } from '#/api/system/notify/message';

 import { useVbenModal } from '@vben/common-ui';
-import { Descriptions, Tag } from 'ant-design-vue';
+import { Descriptions } from 'ant-design-vue';
+import { DictTag } from '#/components/dict-tag';

 import { ref } from 'vue';
 import { formatDateTime } from '@vben/utils';
-import { DICT_TYPE, getDictLabel } from '#/utils/dict';
+import { DICT_TYPE } from '#/utils/dict';

-const messageData = ref<SystemNotifyMessageApi.SystemNotifyMessage>();
+const formData = ref<SystemNotifyMessageApi.SystemNotifyMessage>();

 const [Modal, modalApi] = useVbenModal({
  async onOpenChange(isOpen: boolean) {
@@ -22,7 +23,7 @@ const [Modal, modalApi] = useVbenModal({
    }
    modalApi.lock();
    try {
-      messageData.value = data;
+      formData.value = data;
    } finally {
      modalApi.lock(false);
    }
@@ -33,48 +34,39 @@ const [Modal, modalApi] = useVbenModal({
 <template>
  <Modal title="站内信详情" class="w-1/2">
    <Descriptions bordered :column="1" size="middle" class="mx-4">
-      <Descriptions.Item label="编号">{{ messageData?.id }}</Descriptions.Item>
+      <Descriptions.Item label="编号">{{ formData?.id }}</Descriptions.Item>
      <Descriptions.Item label="用户类型">
-        <!-- TODO @芋艿: 数据字典-->
-        <Tag color="processing">
-          {{ getDictLabel(DICT_TYPE.USER_TYPE, messageData?.userType) }}
-        </Tag>
+        <DictTag :type="DICT_TYPE.USER_TYPE" :value="formData?.userType" />
      </Descriptions.Item>
      <Descriptions.Item label="用户编号">
-        {{ messageData?.userId }}
+        {{ formData?.userId }}
      </Descriptions.Item>
      <Descriptions.Item label="模版编号">
-        {{ messageData?.templateId }}
+        {{ formData?.templateId }}
      </Descriptions.Item>
      <Descriptions.Item label="模板编码">
-        {{ messageData?.templateCode }}
+        {{ formData?.templateCode }}
      </Descriptions.Item>
      <Descriptions.Item label="发送人名称">
-        {{ messageData?.templateNickname }}
+        {{ formData?.templateNickname }}
      </Descriptions.Item>
      <Descriptions.Item label="模版内容">
-        {{ messageData?.templateContent }}
+        {{ formData?.templateContent }}
      </Descriptions.Item>
      <Descriptions.Item label="模版参数">
-        {{ messageData?.templateParams }}
+        {{ formData?.templateParams }}
      </Descriptions.Item>
      <Descriptions.Item label="模版类型">
-        <!-- TODO @芋艿: 数据字典-->
-        <Tag color="processing">
-          {{ getDictLabel(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE, messageData?.templateType) }}
-        </Tag>
+        <DictTag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="formData?.templateType" />
      </Descriptions.Item>
      <Descriptions.Item label="是否已读">
-        <!-- TODO @芋艿: 数据字典-->
-        <Tag color="processing">
-          {{ getDictLabel(DICT_TYPE.INFRA_BOOLEAN_STRING, messageData?.readStatus) }}
-        </Tag>
+        <DictTag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="formData?.readStatus" />
      </Descriptions.Item>
      <Descriptions.Item label="阅读时间">
-        {{ formatDateTime(messageData?.readTime || '') }}
+        {{ formatDateTime(formData?.readTime || '') }}
      </Descriptions.Item>
      <Descriptions.Item label="创建时间">
-        {{ formatDateTime(messageData?.createTime || '') }}
+        {{ formatDateTime(formData?.createTime || '') }}
      </Descriptions.Item>
    </Descriptions>
  </Modal>
--- a/apps/web-antd/src/views/system/notify/my/modules/detail.vue
+++ b/apps/web-antd/src/views/system/notify/my/modules/detail.vue
@@ -2,13 +2,14 @@
 import type { SystemNotifyMessageApi } from '#/api/system/notify/message';

 import { useVbenModal } from '@vben/common-ui';
-import { Descriptions, Tag } from 'ant-design-vue';
+import { Descriptions } from 'ant-design-vue';
+import { DictTag } from '#/components/dict-tag';

 import { ref } from 'vue';
 import { formatDateTime } from '@vben/utils';
-import { DICT_TYPE, getDictLabel } from '#/utils/dict';
+import { DICT_TYPE } from '#/utils/dict';

-const messageData = ref<SystemNotifyMessageApi.SystemNotifyMessage>();
+const formData = ref<SystemNotifyMessageApi.SystemNotifyMessage>();

 const [Modal, modalApi] = useVbenModal({
  async onOpenChange(isOpen: boolean) {
@@ -22,7 +23,7 @@ const [Modal, modalApi] = useVbenModal({
    }
    modalApi.lock();
    try {
-      messageData.value = data;
+      formData.value = data;
    } finally {
      modalApi.lock(false);
    }
@@ -33,58 +34,39 @@ const [Modal, modalApi] = useVbenModal({
 <template>
  <Modal title="我的站内信">
    <Descriptions bordered :column="1" size="middle" class="mx-4">
-      <Descriptions.Item label="编号">{{ messageData?.id }}</Descriptions.Item>
+      <Descriptions.Item label="编号">{{ formData?.id }}</Descriptions.Item>
      <Descriptions.Item label="用户类型">
-        <!-- TODO @芋艿: 数据字典-->
-        <Tag color="processing">
-          {{ getDictLabel(DICT_TYPE.USER_TYPE, messageData?.userType) }}
-        </Tag>
+        <DictTag :type="DICT_TYPE.USER_TYPE" :value="formData?.userType" />
      </Descriptions.Item>
      <Descriptions.Item label="用户编号">
-        {{ messageData?.userId }}
+        {{ formData?.userId }}
      </Descriptions.Item>
      <Descriptions.Item label="模版编号">
-        {{ messageData?.templateId }}
+        {{ formData?.templateId }}
      </Descriptions.Item>
      <Descriptions.Item label="模板编码">
-        {{ messageData?.templateCode }}
+        {{ formData?.templateCode }}
      </Descriptions.Item>
      <Descriptions.Item label="发送人名称">
-        {{ messageData?.templateNickname }}
+        {{ formData?.templateNickname }}
      </Descriptions.Item>
      <Descriptions.Item label="模版内容">
-        {{ messageData?.templateContent }}
+        {{ formData?.templateContent }}
      </Descriptions.Item>
      <Descriptions.Item label="模版参数">
-        {{ messageData?.templateParams }}
+        {{ formData?.templateParams }}
      </Descriptions.Item>
      <Descriptions.Item label="模版类型">
-        <!-- TODO @芋艿: 数据字典-->
-        <Tag color="processing">
-          {{
-            getDictLabel(
-              DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
-              messageData?.templateType,
-            )
-          }}
-        </Tag>
+        <DictTag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="formData?.templateType" />
      </Descriptions.Item>
      <Descriptions.Item label="是否已读">
-        <!-- TODO @芋艿: 数据字典-->
-        <Tag color="processing">
-          {{
-            getDictLabel(
-              DICT_TYPE.INFRA_BOOLEAN_STRING,
-              messageData?.readStatus,
-            )
-          }}
-        </Tag>
+        <DictTag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="formData?.readStatus" />
      </Descriptions.Item>
      <Descriptions.Item label="阅读时间">
-        {{ formatDateTime(messageData?.readTime || '') }}
+        {{ formatDateTime(formData?.readTime || '') }}
      </Descriptions.Item>
      <Descriptions.Item label="创建时间">
-        {{ formatDateTime(messageData?.createTime || '') }}
+        {{ formatDateTime(formData?.createTime || '') }}
      </Descriptions.Item>
    </Descriptions>
  </Modal>
--- a/apps/web-antd/src/views/system/sms/log/modules/detail.vue
+++ b/apps/web-antd/src/views/system/sms/log/modules/detail.vue
@@ -6,7 +6,8 @@ import { Descriptions, Tag } from 'ant-design-vue';

 import { ref } from 'vue';
 import { formatDateTime } from '@vben/utils';
-import { DICT_TYPE, getDictLabel } from '#/utils/dict';
+import { DICT_TYPE } from '#/utils/dict';
+import { DictTag } from '#/components/dict-tag';

 const formData = ref<SystemSmsLogApi.SystemSmsLog>();

@@ -46,19 +47,13 @@ const [Modal, modalApi] = useVbenModal({
        {{ formData?.templateId }}
      </Descriptions.Item>
      <Descriptions.Item label="模板类型">
-        <!-- TODO @芋艿: 数据字典-->
-        <Tag color="processing">
-          {{ getDictLabel(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE, formData?.templateType) }}
-        </Tag>
+        <DictTag :type="DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE" :value="formData?.templateType" />
      </Descriptions.Item>
      <Descriptions.Item label="短信内容">
        {{ formData?.templateContent }}
      </Descriptions.Item>
      <Descriptions.Item label="发送状态">
-        <!-- TODO @芋艿: 数据字典-->
-        <Tag color="processing">
-          {{ getDictLabel(DICT_TYPE.SYSTEM_SMS_SEND_STATUS, formData?.sendStatus) }}
-        </Tag>
+        <DictTag :type="DICT_TYPE.SYSTEM_SMS_SEND_STATUS" :value="formData?.sendStatus" />
      </Descriptions.Item>
      <Descriptions.Item label="发送时间">
        {{ formatDateTime(formData?.sendTime || '') }}
@@ -70,10 +65,7 @@ const [Modal, modalApi] = useVbenModal({
        {{ formData?.apiSendMsg }}
      </Descriptions.Item>
      <Descriptions.Item label="接收状态">
-        <!-- TODO @芋艿: 数据字典-->
-        <Tag color="processing">
-          {{ getDictLabel(DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS, formData?.receiveStatus) }}
-        </Tag>
+        <DictTag :type="DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS" :value="formData?.receiveStatus" />
      </Descriptions.Item>
      <Descriptions.Item label="接收时间">
        {{ formatDateTime(formData?.receiveTime || '') }}