refactor: 修改tool逻辑

src/apis/role.ts

@@ -61,10 +61,11 @@ export function delRole(id: string): BaseResult {
 }
 
 /** 查询所有角色信息 */
-export function getAllRole(): BaseListResult<RoleListData> {
+export function getAllRole(signal?: AbortSignal): BaseResult<RoleListData[]> {
   return request({
     method: 'GET',
     url: BASE_URL + '/roleBefore',
+    signal,
   });
 }
 

src/apis/user.ts

@@ -1,6 +1,11 @@
 import {
+  AddUserParams,
+  BaseListResult,
   BaseResult,
+  EditUserParams,
   EditUserPasswordParams,
+  GetUserListParams,
+  UserListData,
   UserLoginData,
   UserLoginParams,
 } from '@models';
@@ -38,3 +43,52 @@ export function editUserPassword(data: EditUserPasswordParams): BaseResult {
     data,
   });
 }
+
+/** 查询用户列表 */
+export function getUserList(
+  data: GetUserListParams,
+  signal?: AbortSignal,
+): BaseListResult<UserListData> {
+  return request({
+    method: 'GET',
+    url: BASE_URL + '/getAllUser',
+    data,
+    signal,
+  });
+}
+
+/** 新增用户信息 */
+export function addUser(data: AddUserParams): BaseResult {
+  return request({
+    method: 'POST',
+    url: BASE_URL + '/addUser',
+    data,
+  });
+}
+
+/** 修改用户信息 */
+export function editUser(data: EditUserParams): BaseResult {
+  return request({
+    method: 'PUT',
+    url: BASE_URL + '/updateUser',
+    data,
+  });
+}
+
+/** 导出 */
+export function exportUser(data: GetUserListParams): any {
+  return request({
+    method: 'GET',
+    url: BASE_URL + '/userExport',
+    data,
+  });
+}
+
+/** 重置密码 */
+export function resetPassword(id: string): BaseResult {
+  return request({
+    method: 'POST',
+    url: BASE_URL + '/resetPassword',
+    data: {id},
+  });
+}

src/components/filter/group/index.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable @typescript-eslint/no-unnecessary-type-assertion -->
 <script setup lang='ts' generic="T extends Record<string, unknown>">
-import type {LDFilterTool, LDFilterToolMap} from './state';
+import type {LDFilterTool} from './state';
 import {
   LDFilterWrapper,
   LDFilterInput,
@@ -17,7 +17,7 @@ defineOptions({name: 'LDFilterGroup'});
 type Props = {
   providerKey: symbol,
   fixedTools: LDFilterTool<T>[];
-  sourceMap?: LDFilterToolMap<T>;
+  extendsTools?: LDFilterTool<T>[];
   sourceTools?: string;
   isSearching?: boolean;
   onSubmit: (e?: Event) => void;
@@ -29,17 +29,18 @@ const props = defineProps<Props>();
 
 // #region 筛选框内容
 const toolList = computed(function() {
-  if (!props.sourceTools || !props.sourceMap) return props.fixedTools;
+  if (!props.sourceTools || !props.extendsTools) return props.fixedTools;
 
   const arr = props.sourceTools.split(',');
 
   const els = arr.map(function(id) {
-    if (!props.sourceMap!.has(id))
+    const idx = props.extendsTools!.findIndex(val => val.id! === id);
+    if (idx < 0)
       return;
 
-    return {...props.sourceMap!.get(id)!, id: Number(id)};
+    return props.extendsTools![idx];
   }).filter(Boolean)
-    .sort((a, b) => a.id - b.id);
+    .sort((a, b) => Number(a.id) - Number(b.id));
 
   return [...props.fixedTools, ...els];
 });
@@ -89,10 +90,10 @@ const transferVisible = ref(false);
 const transferOptions = computed(function() {
   const data: {value: string; label: string}[] = [];
 
-  if (!props.sourceMap) return data;
+  if (!props.extendsTools) return data;
 
-  props.sourceMap.forEach(function({label}, id) {
-    data.push({value: String(id), label});
+  props.extendsTools.forEach(function({label, id}) {
+    data.push({value: id!, label: label.value});
   });
 
   return data;
@@ -101,7 +102,8 @@ const transferOptions = computed(function() {
 const transferValue = ref<string[]>([]);
 
 watchEffect(function() {
-  if (!props.sourceTools) return;
+  // 在sourceTools变化或者modal显示之后都要确保transferValue与sourceTools一致
+  if (!props.sourceTools || !transferVisible.value) return;
 
   transferValue.value = props.sourceTools.split(',');
 });
@@ -134,20 +136,20 @@ const onFilter = props.onFilterConfirm
         v-if="state.type === 'field'"
         :proiderKey="props.providerKey"
         :name="(state.name as string)"
-        :label="state.label"
+        :label="state.label.value"
       />
       <LDFilterDate
         v-if="state.type === 'date'"
         :providerKey="props.providerKey"
         :name="(state.name as [string, string])"
-        :label="state.label"
+        :label="state.label.value"
       />
       <LDFilterSelect
         v-if="state.type === 'select'"
         :providerKey="props.providerKey"
         :name="(state.name as string)"
         :options="state.options.value"
-        :label="state.label"
+        :label="state.label.value"
         :loading="state.loading?.value"
         @search="state.onSearch"
       />

src/components/filter/group/state.ts

@@ -1,24 +1,28 @@
-import {Ref} from 'vue';
+import {ComputedRef, Ref} from 'vue';
 
 export type LDFilterTool<T extends Record<string, unknown>> =
 | {
+  id?: string,
   type: 'field';
-  label: string;
+  label: ComputedRef<string>;
   name: keyof T;
 }
 | {
+  id?: string,
   type: 'date';
-  label: string;
+  label: ComputedRef<string>;
   name: [keyof T, keyof T];
 }
 | {
+  id?: string,
   type: 'select';
-  label: string;
-  options: Ref<{label: string, value: string}[]>;
-  loading?: Ref<boolean>;
+  label: ComputedRef<string>;
+  options: Ref<{label: string, value: string}[]>
+  | ComputedRef<{label: string, value: string}[]>;
+  loading?: Ref<boolean> | ComputedRef<boolean>;
   onSearch?: (value: string) => void;
   name: keyof T;
 };
 
-export type LDFilterToolMap<T extends Record<string, unknown>>
-= Map<string, LDFilterTool<T>>;
+export type LDFilterExtendTool<T extends Record<string, unknown>>
+= ComputedRef<LDFilterTool<T>>;

src/locales/index.ts

@@ -5,6 +5,7 @@ import common from './common';
 import home from './home';
 import menu from './menu';
 import role from './role';
+import user from './user';
 
 function initLocalLanguage() {
   const language = navigator.language.toLocaleLowerCase();
@@ -26,6 +27,7 @@ const messages = {
     home: home.zh,
     menu: menu.zh,
     role: role.zh,
+    user: user.zh,
   },
   ko: {
     common: common.ko,
@@ -34,6 +36,7 @@ const messages = {
     home: home.ko,
     menu: menu.ko,
     role: role.ko,
+    user: user.ko,
   },
 };
 

src/locales/role.ts

@@ -19,7 +19,7 @@ export default {
     },
   },
   ko: {
-    search: ['角色名称'],
+    search: ['角色名称ko'],
     label: '角色',
     table: ['角色编号', '角色名称', '备注', '最后修改人', '最后修改时间'],
     modal: {

src/locales/user.ts

@@ -0,0 +1,8 @@
+export default {
+  zh: {
+    filter: ['用户名称', '真实姓名', '角色名称', '邮箱', '手机号'],
+  },
+  ko: {
+    filter: ['用户名称kr', '真实姓名kr', '角色名称kr', '邮箱kr', '手机号kr'],
+  },
+};

src/models/request/index.ts

@@ -5,8 +5,8 @@ export type ListParams = {
   limit: string;
 };
 export type OriginalListParams<T extends ListParams> = Omit<
-T,
-'page' | 'limit'
+  T,
+  'page' | 'limit'
 >;
 
 export * from './user';

src/models/request/user.ts

@@ -1,3 +1,5 @@
+import {ListParams} from '.';
+
 /** 用户登录 */
 export type UserLoginParams = {
   /** 用户名称 */
@@ -15,3 +17,34 @@ export type EditUserPasswordParams = {
   /** 新密码 */
   newPassword: string;
 };
+
+/** 获取用户列表 */
+export type GetUserListParams = {
+  /** 用户名称 */
+  userName: string;
+  /** 真实姓名 */
+  realName: string;
+  /** 角色名称 */
+  role: string;
+  /** 邮箱 */
+  email: string;
+  /** 手机号 */
+  phone: string;
+} & ListParams;
+
+/** 新增用户信息 */
+export type AddUserParams = {
+  /** 登录名称 */
+  userName: string;
+  /** 真实姓名 */
+  realName: string;
+  /** 邮箱 */
+  email: string;
+  /** 手机号 */
+  phone: string;
+  /** 角色 */
+  role: string;
+};
+
+/** 修改用户信息 */
+export type EditUserParams = AddUserParams & {id: string};

src/models/response/index.ts

@@ -25,6 +25,14 @@ export type BaseListData<T> = {
   navigateLastPage: number;
 };
 
+/** 最后修改信息 */
+export type ModifyData = {
+  /** 修改人 */
+  modifyUser: string;
+  /** 修改时间 */
+  modifyTime: string;
+};
+
 export type BaseListResult<T = any> = BaseResult<BaseListData<T>>;
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export type GetBaseListType<T> = T extends BaseListResult<infer T> ? T : never;

src/models/response/user.ts

@@ -1,3 +1,5 @@
+import {ModifyData} from '.';
+
 /** 用户登录返回数据 */
 export type UserLoginData = {
   /** 用户id */
@@ -12,3 +14,33 @@ export type UserLoginData = {
   /** 角色 */
   role: string,
 };
+
+/** 用户列表 */
+export type UserListData = {
+  id: number;
+  code: string;
+  /** 用户名 */
+  userName: string;
+  /** 密码 */
+  password: string;
+  /** 真实姓名 */
+  realName: string;
+  /** 邮箱 */
+  email: string;
+  /** 手机号 */
+  phone: string;
+  /** 部门 */
+  department: string;
+  /** 角色 */
+  role: string;
+  /** 部门编号 */
+  departmentId: string;
+  /** 角色编号 */
+  roleId: string;
+  /** 创建时间 */
+  createTime: string;
+  /** 用户菜单权限 */
+  menu: string;
+  /** 用户菜单权限 antd用 */
+  menuBefore: string;
+} & ModifyData;

src/pages/menu-child/index.vue

@@ -47,14 +47,10 @@ const [
 
 const {t} = useI18n();
 
-const tools = computed<LDFilterTool<OriginalListParams<GetMenuListParams>>[]>(
-  function() {
-    return [
-      {type: 'field', label: t('menu.search[0]'), name: 'name'},
-      {type: 'field', label: t('menu.search[1]'), name: 'koreanName'},
-    ];
-  },
-);
+const tools: LDFilterTool<OriginalListParams<GetMenuListParams>>[] = [
+  {type: 'field', label: computed(() => t('menu.search[0]')), name: 'name'},
+  {type: 'field', label: computed(() => t('menu.search[1]')), name: 'koreanName'},
+];
 
 </script>
 

src/pages/menu/filter/index.vue

@@ -23,14 +23,10 @@ const [
 
 const {t} = useI18n();
 
-const tools = computed<LDFilterTool<OriginalListParams<GetMenuListParams>>[]>(
-  function() {
-    return [
-      {type: 'field', label: t('menu.search[0]'), name: 'name'},
-      {type: 'field', label: t('menu.search[1]'), name: 'koreanName'},
-    ];
-  },
-);
+const tools: LDFilterTool<OriginalListParams<GetMenuListParams>>[] = [
+  {type: 'field', label: computed(() => t('menu.search[0]')), name: 'name'},
+  {type: 'field', label: computed(() => t('menu.search[1]')), name: 'koreanName'},
+];
 
 const searchContext = inject<TableSearchContext>(searchSymbol)!;
 </script>

src/pages/role/filter/index.vue

@@ -21,11 +21,13 @@ const [
 
 const {t} = useI18n();
 
-const tools = computed<LDFilterTool<OriginalListParams<GetRoleListParams>>[]>(
-  function() {
-    return [{type: 'field', label: t('role.search[0]'), name: 'roleName'}];
+const tools: LDFilterTool<OriginalListParams<GetRoleListParams>>[] = [
+  {
+    type: 'field',
+    label: computed(() => t('role.search[0]')),
+    name: 'roleName',
   },
-);
+];
 
 const searchContext = inject<TableSearchContext>(searchSymbol)!;
 </script>

src/pages/user/filter/hooks.ts

@@ -0,0 +1,47 @@
+import {useI18n} from 'vue-i18n';
+import {computed} from 'vue';
+import {type LDFilterTool} from '@components';
+import {useQuery} from '@tanstack/vue-query';
+import {getAllRole} from '@apis';
+import type {GetUserListParams, OriginalListParams} from '@models';
+
+export function useExtendsTools() {
+  const {t} = useI18n();
+
+  const {isFetching, data} = useQuery({
+    queryKey: [getAllRole.name],
+    async queryFn({signal}) {
+      const data = await getAllRole(signal);
+
+      if (data.msg === '200') return data.data;
+
+      return [];
+    },
+    initialData: [],
+  });
+
+  const tools: LDFilterTool<OriginalListParams<GetUserListParams>>[] = [
+    {type: 'field', label: computed(() => t('user.filter[0]')), name: 'userName'},
+    {type: 'field', label: computed(() => t('user.filter[1]')), name: 'realName'},
+    {
+      type: 'select',
+      label: computed(() => t('user.filter[2]')),
+      name: 'role',
+      loading: isFetching,
+      options: computed(function() {
+        return data.value.map(val => ({
+          label: val.roleName,
+          value: val.id.toString(),
+        }));
+      }),
+    },
+  ];
+
+  const extendsTools: LDFilterTool<OriginalListParams<GetUserListParams>>[] = [
+
+    {type: 'field', label: computed(() => t('user.filter[3]')), name: 'email', id: '2'},
+    {type: 'field', label: computed(() => t('user.filter[4]')), name: 'phone', id: '3'},
+  ];
+
+  return {tools, extendsTools};
+}

src/pages/user/filter/index.vue

@@ -0,0 +1,42 @@
+<script setup lang='ts'>
+import {useTableSearchToolContext, type TableSearchContext} from '@hooks';
+import type {GetUserListParams, OriginalListParams} from '@models';
+import {
+  filterSymbol,
+  filterDataSymbol,
+  searchSymbol,
+  filterState,
+} from '../state';
+import {inject} from 'vue';
+import {LDFilterGroup} from '@components';
+import {useExtendsTools} from './hooks';
+
+defineOptions({name: 'UserPageFilter'});
+
+const [
+  {filterSource},
+  {onSubmit, onReset, onFilterConfirm},
+] = useTableSearchToolContext<OriginalListParams<GetUserListParams>>(
+  {...filterState},
+  filterSymbol,
+  {filterDataKey: filterDataSymbol},
+);
+
+const searchContext = inject<TableSearchContext>(searchSymbol)!;
+
+const {tools, extendsTools} = useExtendsTools();
+</script>
+
+<template>
+  <LDFilterGroup
+    @submit="onSubmit"
+    @reset="onReset"
+    @filterConfirm="onFilterConfirm"
+    :providerKey="filterDataSymbol"
+    :fixedTools="tools"
+    :sourceTools="filterSource"
+    :isSearching="searchContext.isSearching"
+    :extendsTools="extendsTools"
+  />
+</template>
+

src/pages/user/index.tsx

@@ -0,0 +1,23 @@
+import {
+  useTablePageContext,
+  useTableSearchContext,
+  useTableFilterContext,
+} from '@hooks';
+import {Fragment, defineComponent} from 'vue';
+import {pageSymbol, searchSymbol, filterSymbol, filterState} from './state';
+import Filter from './filter/index.vue';
+
+export default defineComponent({
+  name: 'UserPage',
+  setup() {
+    useTablePageContext(pageSymbol);
+    useTableSearchContext(searchSymbol);
+    useTableFilterContext(filterSymbol, filterState);
+
+    return () => (
+      <Fragment>
+        <Filter />
+      </Fragment>
+    );
+  },
+});

src/pages/user/state.ts

@@ -0,0 +1,16 @@
+import {GetUserListParams, OriginalListParams} from '@models';
+
+/** 搜索框key */
+export const filterSymbol = Symbol('filter');
+export const filterDataSymbol = Symbol('filterData');
+export const filterState: OriginalListParams<GetUserListParams> = {
+  userName: '',
+  realName: '',
+  role: '',
+  email: '',
+  phone: '',
+};
+/** 页码信息key */
+export const pageSymbol = Symbol('page');
+/** 搜索状态key */
+export const searchSymbol = Symbol('search');

src/routes/index.ts

@@ -12,34 +12,43 @@ import {
   REGISTER_PATH,
   ROLE_NAME,
   ROLE_PATH,
+  USER_NAME,
+  USER_PATH,
 } from './name';
 import Home from '@pages/home/index.vue';
 import Login from '@pages/login/index.vue';
 import {storeToRefs, useUserStore} from '@stores';
 
+const childrenRoures: RouteRecordRaw[] = [
+  {
+    path: MAIN_PATH,
+    name: MAIN_NAME,
+    component: () => import('@pages/main/index.vue'),
+  },
+  {
+    path: MENU_PATH,
+    name: MENU_NAME,
+    component: () => import('@pages/menu'),
+  },
+  {
+    path: ROLE_PATH,
+    name: ROLE_NAME,
+    component: () => import('@pages/role'),
+  },
+  {
+    path: USER_PATH,
+    name: USER_NAME,
+    component: () => import('@pages/user'),
+  },
+];
+
 const routes: RouteRecordRaw[] = [
   {
     path: HOME_PATH,
     component: Home,
     name: HOME_NAME,
     redirect: MAIN_PATH,
-    children: [
-      {
-        path: MAIN_PATH,
-        name: MAIN_NAME,
-        component: () => import('@pages/main/index.vue'),
-      },
-      {
-        path: MENU_PATH,
-        name: MENU_NAME,
-        component: () => import('@pages/menu'),
-      },
-      {
-        path: ROLE_PATH,
-        name: ROLE_NAME,
-        component: () => import('@pages/role'),
-      },
-    ],
+    children: childrenRoures,
   },
   {path: LOGIN_PATH, component: Login, name: LOGIN_NAME},
   {

src/routes/name.ts

@@ -32,3 +32,8 @@ RouteNameMap.set(MAIN_PATH, 'MenuPage');
 export const ROLE_PATH = '/role';
 export const ROLE_NAME = Symbol('role');
 RouteNameMap.set(ROLE_PATH, 'RolePage');
+
+/** 用户界面 */
+export const USER_PATH = '/user';
+export const USER_NAME = Symbol('user');
+RouteNameMap.set(USER_PATH, 'UserPage');