chore: 优化字典hooks使用

src/components/custom/dict-radio.vue

@@ -9,7 +9,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  immediate: true
+  immediate: false
 });
 
 const value = defineModel<string | null>('value', { required: false });

src/components/custom/dict-select.vue

@@ -12,7 +12,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  immediate: true
+  immediate: false
 });
 
 const value = defineModel<string | null>('value', { required: true });

src/components/custom/dict-tag.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
+import type { TagProps } from 'naive-ui';
+import { useDict } from '@/hooks/business/dict';
+
+defineOptions({ name: 'DictTag' });
+
+interface Props {
+  value: string;
+  dictCode: string;
+  immediate?: boolean;
+  [key: string]: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  immediate: false
+});
+
+const attrs: TagProps = useAttrs();
+const { transformDictData } = useDict(props.dictCode, props.immediate);
+const dictData = computed(() => transformDictData(props.value));
+</script>
+
+<template>
+  <NTag v-if="dictData" :class="dictData.cssClass" :type="dictData.listClass" v-bind="attrs">
+    {{ dictData.dictLabel }}
+  </NTag>
+</template>
+
+<style scoped></style>

src/hooks/business/dict.ts

@@ -40,6 +40,11 @@ export function useDict(dictType: string, immediate: boolean = true) {
     options.value = data.value.map(dict => ({ label: dict.dictLabel!, value: dict.dictValue! }));
   }
 
+  function transformDictData(dictValue: string): Api.System.DictData | undefined {
+    if (!data.value.length || !dictValue) return undefined;
+    return data.value.find(dict => dict.dictValue === dictValue);
+  }
+
   if (immediate) {
     getData().then(() => {
       getRecord();
@@ -64,6 +69,7 @@ export function useDict(dictType: string, immediate: boolean = true) {
     options,
     getData,
     getRecord,
-    getOptions
+    getOptions,
+    transformDictData
   };
 }

src/styles/scss/custom.scss

@@ -0,0 +1,5 @@
+.table-search {
+  .n-collapse {
+    --n-title-font-size: 15px !important;
+  }
+}

src/styles/scss/global.scss

@@ -1 +1,2 @@
 @import './scrollbar.scss';
+@import './custom.scss';

src/typings/api/system.api.d.ts

@@ -270,7 +270,7 @@ declare namespace Api {
       /** 是否默认（Y是 N否） */
       isDefault: string;
       /** 表格回显样式 */
-      listClass: string;
+      listClass: NaiveUI.ThemeColor;
       /** 备注 */
       remark: string;
     }>;

src/typings/components.d.ts

@@ -16,6 +16,7 @@ declare module 'vue' {
     DarkModeContainer: typeof import('./../components/common/dark-mode-container.vue')['default']
     DictRadio: typeof import('./../components/custom/dict-radio.vue')['default']
     DictSelect: typeof import('./../components/custom/dict-select.vue')['default']
+    DictTag: typeof import('./../components/custom/dict-tag.vue')['default']
     ExceptionBase: typeof import('./../components/common/exception-base.vue')['default']
     FullScreen: typeof import('./../components/common/full-screen.vue')['default']
     IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default']

src/views/system/menu/index.vue

@@ -4,16 +4,19 @@ import { useBoolean, useLoading } from '@sa/hooks';
 import type { DataTableColumns, TreeInst, TreeOption } from 'naive-ui';
 import { NButton, NIcon, NInput, NPopconfirm, NTooltip } from 'naive-ui';
 import { fetchDeleteMenu, fetchGetMenuList } from '@/service/api/system';
-import SvgIcon from '@/components/custom/svg-icon.vue';
 import { useAppStore } from '@/store/modules/app';
 import { menuIsFrameRecord, menuTypeRecord } from '@/constants/business';
-import ButtonIcon from '@/components/custom/button-icon.vue';
 import { $t } from '@/locales';
 import { handleMenuTree } from '@/utils/ruoyi';
-import StatusTag from '@/components/custom/status-tag.vue';
 import { useDict } from '@/hooks/business/dict';
+import SvgIcon from '@/components/custom/svg-icon.vue';
+import DictTag from '@/components/custom/dict-tag.vue';
+import ButtonIcon from '@/components/custom/button-icon.vue';
 import MenuOperateDrawer from './modules/menu-operate-drawer.vue';
 
+useDict('sys_show_hide');
+useDict('sys_normal_disable');
+
 const appStore = useAppStore();
 const editingData = ref<Api.System.Menu>();
 const operateType = ref<NaiveUI.TableOperateType>('add');
@@ -207,7 +210,7 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
     minWidth: 80,
     align: 'center',
     render(row) {
-      return <StatusTag size="small" value={row.status} />;
+      return <DictTag size="small" value={row.status} dict-code="sys_normal_disable" />;
     }
   },
   {
@@ -259,8 +262,6 @@ const btnColumns: DataTableColumns<Api.System.Menu> = [
     }
   }
 ];
-
-const { record: showHideRecord } = useDict('sys_show_hide');
 </script>
 
 <template>
@@ -367,7 +368,7 @@ const { record: showHideRecord } = useDict('sys_show_hide');
               <NTag size="small" type="primary">{{ menuTypeRecord[currentMenu.menuType!] }}</NTag>
             </NDescriptionsItem>
             <NDescriptionsItem label="菜单状态">
-              <StatusTag size="small" :value="currentMenu.status" />
+              <DictTag size="small" :value="currentMenu.status" dict-code="sys_normal_disable" />
             </NDescriptionsItem>
             <NDescriptionsItem label="菜单名称">{{ currentMenu.menuName }}</NDescriptionsItem>
             <NDescriptionsItem v-if="currentMenu.menuType === 'C'" label="组件路径">
@@ -391,9 +392,7 @@ const { record: showHideRecord } = useDict('sys_show_hide');
               </NTag>
             </NDescriptionsItem>
             <NDescriptionsItem label="显示状态">
-              <NTag v-if="currentMenu.visible" size="small" :type="tagMap[currentMenu.visible]">
+              <DictTag size="small" :value="currentMenu.visible" dict-code="sys_show_hide" />
-                {{ showHideRecord[currentMenu.visible] }}
-              </NTag>
             </NDescriptionsItem>
             <NDescriptionsItem v-if="currentMenu.menuType === 'C'" label="是否缓存">
               <NTag v-if="currentMenu.isCache" size="small" :type="tagMap[currentMenu.isCache]">

src/views/system/menu/modules/menu-operate-drawer.vue

@@ -9,7 +9,6 @@ import { menuIconTypeOptions, menuIsFrameOptions, menuTypeOptions } from '@/cons
 import SvgIcon from '@/components/custom/svg-icon.vue';
 import { getLocalMenuIcons } from '@/utils/icon';
 import { humpToLine, isNotNull } from '@/utils/common';
-import { useDict } from '@/hooks/business/dict';
 
 defineOptions({
   name: 'MenuOperateDrawer'
@@ -40,9 +39,6 @@ const visible = defineModel<boolean>('visible', {
   default: false
 });
 
-const { options: showHideOptions } = useDict('sys_show_hide', false);
-const { options: enableStatusOptions } = useDict('sys_normal_disable');
-
 const iconType = ref<Api.System.IconType>('1');
 const { formRef, validate, restoreValidation } = useNaiveForm();
 const { createRequiredRule } = useFormRules();
@@ -411,11 +407,7 @@ const FormTipComponent = defineComponent({
                 <span class="pl-3px">显示状态</span>
               </div>
             </template>
-            <NRadioGroup v-model:value="model.visible">
+            <DictRadio v-model:value="model.visible" dict-code="sys_show_hide" />
-              <NSpace>
-                <NRadio v-for="item in showHideOptions" :key="item.value" :value="item.value" :label="item.label" />
-              </NSpace>
-            </NRadioGroup>
           </NFormItemGi>
           <NFormItemGi :span="12" path="status">
             <template #label>
@@ -424,11 +416,7 @@ const FormTipComponent = defineComponent({
                 <span class="pl-3px">菜单状态</span>
               </div>
             </template>
-            <NRadioGroup v-model:value="model.status">
+            <DictRadio v-model:value="model.status" dict-code="sys_normal_disable" />
-              <NSpace>
-                <NRadio v-for="item in enableStatusOptions" :key="item.value" :value="item.value" :label="item.label" />
-              </NSpace>
-            </NRadioGroup>
           </NFormItemGi>
           <NFormItemGi :span="12" label="显示排序" path="orderNum">
             <NInputNumber v-model:value="model.orderNum" placeholder="请输入排序" />

src/views/system/user/index.vue

@@ -4,6 +4,8 @@ import { fetchBatchDeleteUser, fetchGetUserList } from '@/service/api/system';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
+import DictTag from '@/components/custom/dict-tag.vue';
+import { useDict } from '@/hooks/business/dict';
 import UserOperateDrawer from './modules/user-operate-drawer.vue';
 import UserSearch from './modules/user-search.vue';
 
@@ -11,6 +13,9 @@ defineOptions({
   name: 'UserList'
 });
 
+useDict('sys_user_sex');
+useDict('sys_normal_disable');
+
 const appStore = useAppStore();
 
 const {
@@ -49,35 +54,42 @@ const {
       align: 'center',
       width: 64
     },
-    {
-      key: 'deptId',
-      title: '部门',
-      align: 'center',
-      minWidth: 120
-    },
     {
       key: 'userName',
       title: '用户名称',
       align: 'center',
-      minWidth: 120
+      minWidth: 120,
+      ellipsis: true
     },
     {
       key: 'nickName',
       title: '用户昵称',
       align: 'center',
-      minWidth: 120
+      minWidth: 120,
+      ellipsis: true
+    },
+    {
+      key: 'deptName',
+      title: '部门',
+      align: 'center',
+      minWidth: 120,
+      ellipsis: true
     },
     {
       key: 'phonenumber',
       title: '手机号码',
       align: 'center',
-      minWidth: 120
+      minWidth: 120,
+      ellipsis: true
     },
     {
       key: 'status',
-      title: '帐号状态',
+      title: '状态',
       align: 'center',
-      minWidth: 120
+      minWidth: 80,
+      render(row) {
+        return <DictTag size="small" value={row.status} dict-code="sys_normal_disable" />;
+      }
     },
     {
       key: 'createTime',
@@ -85,12 +97,6 @@ const {
       align: 'center',
       minWidth: 120
     },
-    {
-      key: 'remark',
-      title: '备注',
-      align: 'center',
-      minWidth: 120
-    },
     {
       key: 'operate',
       title: $t('common.operate'),
@@ -142,7 +148,7 @@ async function edit(userId: CommonType.IdType) {
 <template>
   <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
     <UserSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
-    <NCard title="用户信息列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
+    <NCard title="用户列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
       <template #header-extra>
         <TableHeaderOperation
           v-model:columns="columnChecks"

src/views/system/user/modules/user-operate-drawer.vue

@@ -155,8 +155,8 @@ watch(visible, () => {
         <NFormItem label="密码" path="password">
           <NInput v-model:value="model.password" placeholder="请输入密码" />
         </NFormItem>
-        <NFormItem label="帐号状态" path="status">
+        <NFormItem label="状态" path="status">
-          <NInput v-model:value="model.status" placeholder="请输入帐号状态" />
+          <DictRadio v-model:value="model.status" dict-code="sys_normal_disable" />
         </NFormItem>
         <NFormItem label="备注" path="remark">
           <NInput v-model:value="model.remark" placeholder="请输入备注" />

src/views/system/user/modules/user-search.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue';
 import { $t } from '@/locales';
 import { useNaiveForm } from '@/hooks/common/form';
+
 defineOptions({
   name: 'UserSearch'
 });
@@ -36,7 +37,7 @@ async function search() {
 </script>
 
 <template>
-  <NCard :bordered="false" size="small" class="card-wrapper">
+  <NCard :bordered="false" size="small" class="table-search card-wrapper">
     <NCollapse>
       <NCollapseItem :title="$t('common.search')" name="user-search">
         <NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
@@ -51,9 +52,14 @@ async function search() {
               <NInput v-model:value="model.phonenumber" placeholder="请输入手机号码" />
             </NFormItemGi>
             <NFormItemGi span="24 s:12 m:6" label="帐号状态" path="status" class="pr-24px">
-              <NSelect v-model:value="model.status" placeholder="请选择帐号状态" :options="[]" clearable />
+              <DictSelect
+                v-model:value="model.status"
+                placeholder="请选择帐号状态"
+                dict-code="sys_normal_disable"
+                clearable
+              />
             </NFormItemGi>
-            <NFormItemGi span="24 s:12 m:6" label="创建时间" path="createTime" class="pr-24px">
+            <NFormItemGi span="24 s:12 m:8" label="创建时间" path="createTime" class="pr-24px">
               <NDatePicker
                 v-model:formatted-value="dateRangeCreateTime"
                 type="datetimerange"
@@ -61,7 +67,7 @@ async function search() {
                 clearable
               />
             </NFormItemGi>
-            <NFormItemGi span="24" class="pr-24px">
+            <NFormItemGi span="24 s:12 m:16" class="pr-24px">
               <NSpace class="w-full" justify="end">
                 <NButton @click="reset">
                   <template #icon>