GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: 优化字典hooks使用

Browse Source
This commit is contained in:
xlsea 2024-09-11 16:37:35 +08:00
parent 2b14b84c67
commit 9cbbaff297
13 changed files with 94 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/custom/dict-radio.vue
View File

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

2
src/components/custom/dict-select.vue
View File

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

30
src/components/custom/dict-tag.vue Normal file
View File

@ -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>

8
src/hooks/business/dict.ts
View File

@ -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
};
}

5
src/styles/scss/custom.scss Normal file
View File

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

1
src/styles/scss/global.scss
View File

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

2
src/typings/api/system.api.d.ts vendored
View File

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

1
src/typings/components.d.ts vendored
View File

@ -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']

19
src/views/system/menu/index.vue
View File

@ -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]">
{{ showHideRecord[currentMenu.visible] }}
</NTag>
<DictTag size="small" :value="currentMenu.visible" dict-code="sys_show_hide" />
</NDescriptionsItem>
<NDescriptionsItem v-if="currentMenu.menuType === 'C'" label="是否缓存">
<NTag v-if="currentMenu.isCache" size="small" :type="tagMap[currentMenu.isCache]">

16
src/views/system/menu/modules/menu-operate-drawer.vue
View File

@ -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">
<NSpace>
<NRadio v-for="item in showHideOptions" :key="item.value" :value="item.value" :label="item.label" />
</NSpace>
</NRadioGroup>
<DictRadio v-model:value="model.visible" dict-code="sys_show_hide" />
</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">
<NSpace>
<NRadio v-for="item in enableStatusOptions" :key="item.value" :value="item.value" :label="item.label" />
</NSpace>
</NRadioGroup>
<DictRadio v-model:value="model.status" dict-code="sys_normal_disable" />
</NFormItemGi>
<NFormItemGi :span="12" label="显示排序" path="orderNum">
<NInputNumber v-model:value="model.orderNum" placeholder="请输入排序" />

42
src/views/system/user/index.vue
View File

@ -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"

4
src/views/system/user/modules/user-operate-drawer.vue
View File

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

14
src/views/system/user/modules/user-search.vue
View File

@ -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>