refactor: 调整filter 调整结构

src/apis/role.ts

@@ -0,0 +1,67 @@
+import {
+  AddRoleParams,
+  BaseListResult,
+  BaseResult,
+  EditRoleParams,
+  GetRoleListParams,
+} from '@models';
+import {request} from './network';
+
+const BASE_URL = '/role';
+
+/** 查询角色 */
+export function getRoleList(
+  data: GetRoleListParams,
+  signal?: AbortSignal,
+): BaseListResult<any> {
+  return request({
+    method: 'GET',
+    url: BASE_URL + '/getRole',
+    data,
+    signal,
+  });
+}
+
+/** 查询角色详情 */
+export function getRoleInfo(id: string) {
+  return request({
+    method: 'GET',
+    url: BASE_URL + '/getRole',
+    data: {id, page: '1', limit: '1'},
+  });
+}
+
+/** 新增角色信息 */
+export function addRole(data: AddRoleParams): BaseResult {
+  return request({
+    method: 'POST',
+    url: BASE_URL + '/addRole',
+    data,
+  });
+}
+
+/** 修改角色信息 */
+export function editRole(data: EditRoleParams): BaseResult {
+  return request({
+    method: 'PUT',
+    url: BASE_URL + '/updateRole',
+    data,
+  });
+}
+
+/** 删除角色信息 */
+export function delRole(id: string): BaseResult {
+  return request({
+    method: 'DELETE',
+    url: BASE_URL + '/delRole',
+    data: {id},
+  });
+}
+
+/** 查询所有角色信息 */
+export function getAllRole(): BaseListResult<any> {
+  return request({
+    method: 'GET',
+    url: BASE_URL + '/roleBefore',
+  });
+}

src/hooks/index.ts

@@ -5,3 +5,4 @@ export * from './use-fetch-table-list';
 export * from './use-put-data';
 export * from './use-table-event';
 export * from './use-query-data-info';
+export * from './use-table-filter-context';

src/hooks/use-table-filter-context/index.ts

@@ -0,0 +1,10 @@
+import {provide, reactive} from 'vue';
+
+export function useTableFilterContext(
+  key: symbol,
+  data: Record<string, unknown>,
+) {
+  const state = reactive({...data});
+
+  provide(key, state);
+}

src/hooks/use-table-search-tool-context/index.ts

@@ -1,4 +1,4 @@
-import {provide, reactive, ref} from 'vue';
+import {inject, provide, reactive, ref} from 'vue';
 
 export function useTableSearchToolContext<T extends Record<string, unknown>>(
   initialValues: T,
@@ -9,10 +9,9 @@ export function useTableSearchToolContext<T extends Record<string, unknown>>(
   },
 ) {
   const memoInit = {...initialValues};
-  const providerValue = reactive({...initialValues});
+  const providerValue = inject<Record<string, unknown>>(key)!;
   const filterValue = reactive({...initialValues});
 
-  provide(key, providerValue);
   provide(options.filterDataKey, filterValue);
 
   function onSubmit(e?: Event) {

src/models/request/index.ts

@@ -11,3 +11,4 @@ T,
 
 export * from './user';
 export * from './menu';
+export * from './role';

src/models/request/role.ts

@@ -0,0 +1,18 @@
+import {ListParams} from '.';
+
+/** 查询角色列表 */
+export type GetRoleListParams = {
+  /** 角色名称 */
+  roleName: string;
+} & ListParams;
+
+/** 新增角色信息 */
+export type AddRoleParams = {
+  /** 角色名称 */
+  roleName: string;
+  /** 备注信息 */
+  remarks: string | undefined | null;
+};
+
+/** 修改角色信息 */
+export type EditRoleParams = AddRoleParams & {id: string};

src/pages/menu/index.vue

@@ -1,25 +1,12 @@
 <script setup lang='ts'>
-import {
-  useTablePageContext,
-  useTableSearchContext,
-  useTableSearchToolContext,
-} from '@hooks';
-import {
-  pageSymbol,
-  searchSymbol,
-  filterSymbol,
-  filterDataSymbol,
-} from './state';
+import {TableSearchContext, useTableSearchToolContext} from '@hooks';
+import {filterSymbol, filterDataSymbol, searchSymbol} from '../state';
 import {LDFilterGroup, type LDFilterTool} from '@components';
 import {GetMenuListParams, OriginalListParams} from '@models';
-import {computed} from 'vue';
+import {computed, inject} from 'vue';
 import {useI18n} from 'vue-i18n';
-import Table from './table/index.vue';
-
-defineOptions({name: 'MenuPage'});
 
-useTablePageContext(pageSymbol);
-const searchContext = useTableSearchContext(searchSymbol);
+defineOptions({name: 'MenuPageFilter'});
 
 const [
   {filterSource},
@@ -45,6 +32,7 @@ const tools = computed<LDFilterTool<OriginalListParams<GetMenuListParams>>[]>(
   },
 );
 
+const searchContext = inject<TableSearchContext>(searchSymbol)!;
 </script>
 
 <template>
@@ -56,6 +44,5 @@ const tools = computed<LDFilterTool<OriginalListParams<GetMenuListParams>>[]>(
     :sourceTools="filterSource"
     :isSearching="searchContext.isSearching"
   />
-
-  <Table />
 </template>
+

src/pages/menu/index.tsx

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

src/pages/menu/state.ts

@@ -1,6 +1,13 @@
+import {GetMenuListParams, OriginalListParams} from '@models';
+
 /** 搜索框key */
 export const filterSymbol = Symbol('filter');
 export const filterDataSymbol = Symbol('filterData');
+export const filterState: OriginalListParams<GetMenuListParams> = {
+  name: '',
+  koreanName: '',
+  pId: '0',
+};
 /** 页码信息key */
 export const pageSymbol = Symbol('page');
 /** 搜索状态key */

src/pages/menu/table/modal/Info.vue

@@ -2,7 +2,7 @@
 import {getMenuInfo} from '@apis';
 import {LDModalInput, LDModalNumberInput} from '@components';
 import {useQueryDataInfo} from '@hooks';
-import {computed, nextTick, watchPostEffect} from 'vue';
+import {computed, watchPostEffect} from 'vue';
 import {useI18n} from 'vue-i18n';
 import type {FormState} from './hooks';
 

src/routes/index.ts

@@ -30,7 +30,7 @@ const routes: RouteRecordRaw[] = [
       {
         path: MENU_PATH,
         name: MENU_NAME,
-        component: () => import('@pages/menu/index.vue'),
+        component: () => import('@pages/menu'),
       },
     ],
   },

src/routes/name.ts

@@ -27,3 +27,8 @@ export const REGISTER_NAME = Symbol('register');
 export const MENU_PATH = '/menu';
 export const MENU_NAME = Symbol('menu');
 RouteNameMap.set(MAIN_PATH, 'MenuPage');
+
+/** 角色界面 */
+export const ROLE_PATH = '/role';
+export const ROLE_NAME = Symbol('role');
+RouteNameMap.set(ROLE_NAME, 'RolePage');