refactor(projects): page manage_role: extract module

2025-09-21 11:06:38 +08:00 · 2024-01-28 01:25:04 +08:00 · 2024-01-28 01:25:04 +08:00 · 0e9e2e1dc0
commit 0e9e2e1dc0
parent 237c6d227e
6 changed files with 187 additions and 71 deletions
--- a/src/components/advanced/table-header-operation.vue
+++ b/src/components/advanced/table-header-operation.vue
@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { FilteredColumn } from '@/hooks/common/table';
+
+defineOptions({
+  name: 'TableHeaderOperation'
+});
+
+interface Props {
+  disabledDelete?: boolean;
+  loading?: boolean;
+}
+
+defineProps<Props>();
+
+interface Emits {
+  (e: 'add'): void;
+  (e: 'delete'): void;
+  (e: 'refresh'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const columns = defineModel<FilteredColumn[]>('columns', {
+  default: () => []
+});
+
+function add() {
+  emit('add');
+}
+
+function batchDelete() {
+  emit('delete');
+}
+
+function refresh() {
+  emit('refresh');
+}
+</script>
+
+<template>
+  <NSpace wrap justify="end" class="<sm:w-200px">
+    <NButton size="small" ghost type="primary" @click="add">
+      <template #icon>
+        <icon-ic-round-plus class="text-icon" />
+      </template>
+      {{ $t('common.add') }}
+    </NButton>
+    <NPopconfirm @positive-click="batchDelete">
+      <template #trigger>
+        <NButton size="small" ghost type="error" :disabled="disabledDelete">
+          <template #icon>
+            <icon-ic-round-delete class="text-icon" />
+          </template>
+          {{ $t('common.batchDelete') }}
+        </NButton>
+      </template>
+      {{ $t('common.confirmDelete') }}
+    </NPopconfirm>
+    <NButton size="small" @click="refresh">
+      <template #icon>
+        <icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }" />
+      </template>
+      {{ $t('common.refresh') }}
+    </NButton>
+    <TableColumnSetting v-model:columns="columns" />
+  </NSpace>
+</template>
+
+<style scoped></style>
--- a/src/hooks/common/table.ts
+++ b/src/hooks/common/table.ts
@ -71,7 +71,7 @@ export function useTable<TableData extends BaseData, Fn extends ApiFn, CustomCol

  const { apiFn, apiParams, transformer, onPaginationChanged, immediate = true } = config;

-  const searchParams: NonNullable<Parameters<Fn>[0]> = reactive(apiParams || {});
+  const searchParams: NonNullable<Parameters<Fn>[0]> = reactive({ ...apiParams });

  const { columns, filteredColumns, reloadColumns } = useTableColumn(config.columns);

@ -125,9 +125,7 @@ export function useTable<TableData extends BaseData, Fn extends ApiFn, CustomCol

  /** reset search params */
  function resetSearchParams() {
-    Object.keys(searchParams).forEach(key => {
-      searchParams[key as keyof typeof searchParams] = undefined;
-    });
+    Object.assign(searchParams, apiParams);
  }

  if (immediate) {
@ -158,8 +156,8 @@ export function useTable<TableData extends BaseData, Fn extends ApiFn, CustomCol
    updatePagination,
    getData,
    searchParams,
-    resetSearchParams,
-    updateSearchParams
+    updateSearchParams,
+    resetSearchParams
  };
 }

--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@ -61,6 +61,7 @@ declare module 'vue' {
    NMenu: typeof import('naive-ui')['NMenu']
    NMessageProvider: typeof import('naive-ui')['NMessageProvider']
    NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
+    NPopconfirm: typeof import('naive-ui')['NPopconfirm']
    NPopover: typeof import('naive-ui')['NPopover']
    NSelect: typeof import('naive-ui')['NSelect']
    NSpace: typeof import('naive-ui')['NSpace']
@ -80,6 +81,7 @@ declare module 'vue' {
    SystemLogo: typeof import('./../components/common/system-logo.vue')['default']
    TableColumnSetting: typeof import('./../components/advanced/table-column-setting.vue')['default']
    TableColumnSettings: typeof import('./../components/advanced/table-column-settings.vue')['default']
+    TableHeaderOperation: typeof import('./../components/advanced/table-header-operation.vue')['default']
    ThemeSchemaSwitch: typeof import('./../components/common/theme-schema-switch.vue')['default']
    WaveBg: typeof import('./../components/custom/wave-bg.vue')['default']
  }
--- a/src/views/manage/role/context.ts
+++ b/src/views/manage/role/context.ts
@ -0,0 +1,12 @@
+import { useContext } from '@sa/hooks';
+
+function useRoleSearch(searchParams: Api.SystemManage.RoleSearchParams) {
+  return {
+    searchParams
+  };
+}
+
+export const { setupStore: setupRoleSearchContext, useStore: useRoleSearchContext } = useContext(
+  'role-search',
+  useRoleSearch
+);
--- a/src/views/manage/role/index.vue
+++ b/src/views/manage/role/index.vue
@ -6,9 +6,9 @@ import { fetchGetRoleList } from '@/service/api';
 import { useAppStore } from '@/store/modules/app';
 import { useTable } from '@/hooks/common/table';
 import { $t } from '@/locales';
-import { roleStatusOptions } from '@/constants/business';
-import { translateOptions } from '@/utils/common';
 import OperateRoleDrawer, { type OperateType } from './operate-role-drawer.vue';
+import RoleSearch from './role-search.vue';
+import { setupRoleSearchContext } from './context';

 const appStore = useAppStore();
 const { bool: drawerVisible, setTrue: openDrawer } = useBoolean();
@ -21,7 +21,12 @@ const { columns, filteredColumns, data, loading, pagination, getData, searchPara
  apiFn: fetchGetRoleList,
  apiParams: {
    current: 1,
-    size: 10
+    size: 10,
+    // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
+    // the value can not be undefined, otherwise the property in Form will not be reactive
+    roleName: null,
+    roleCode: null,
+    roleStatus: null
  },
  transformer: res => {
    const { records = [], current = 1, size = 10, total = 0 } = res.data || {};
@ -90,6 +95,9 @@ const { columns, filteredColumns, data, loading, pagination, getData, searchPara
  ]
 });

+// provide searchParams
+setupRoleSearchContext(searchParams);
+
 const operateType = ref<OperateType>('add');

 function handleAdd() {
@ -135,70 +143,17 @@ function getIndex(index: number) {

 <template>
  <div class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
-    <NCard :title="$t('common.search')" :bordered="false" size="small" class="card-wrapper">
-      <NForm :model="searchParams" label-placement="left">
-        <NGrid responsive="screen" item-responsive>
-          <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleName')" path="roleName" class="pr-24px">
-            <NInput v-model:value="searchParams.roleName" :placeholder="$t('page.manage.role.form.roleName')" />
-          </NFormItemGi>
-          <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleCode')" path="roleCode" class="pr-24px">
-            <NInput v-model:value="searchParams.roleCode" :placeholder="$t('page.manage.role.form.roleCode')" />
-          </NFormItemGi>
-          <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleStatus')" path="roleStatus" class="pr-24px">
-            <NSelect
-              v-model:value="searchParams.roleStatus"
-              :placeholder="$t('page.manage.role.form.roleStatus')"
-              :options="translateOptions(roleStatusOptions)"
-              clearable
-            />
-          </NFormItemGi>
-          <NFormItemGi span="24 s:12 m:6">
-            <NSpace class="w-full" justify="end">
-              <NButton @click="resetSearchParams">
-                <template #icon>
-                  <icon-ic-round-refresh class="text-icon" />
-                </template>
-                {{ $t('common.reset') }}
-              </NButton>
-              <NButton type="primary" ghost @click="getData">
-                <template #icon>
-                  <icon-ic-round-search class="text-icon" />
-                </template>
-                {{ $t('common.search') }}
-              </NButton>
-            </NSpace>
-          </NFormItemGi>
-        </NGrid>
-      </NForm>
-    </NCard>
+    <RoleSearch @reset="resetSearchParams" @search="getData" />
    <NCard :title="$t('page.manage.role.title')" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
      <template #header-extra>
-        <NSpace wrap justify="end" class="<sm:w-200px">
-          <NButton size="small" ghost type="primary" @click="handleAdd">
-            <template #icon>
-              <icon-ic-round-plus class="text-icon" />
-            </template>
-            {{ $t('common.add') }}
-          </NButton>
-          <NPopconfirm @positive-click="handleBatchDelete">
-            <template #trigger>
-              <NButton size="small" ghost type="error" :disabled="checkedRowKeys.length === 0">
-                <template #icon>
-                  <icon-ic-round-delete class="text-icon" />
-                </template>
-                {{ $t('common.batchDelete') }}
-              </NButton>
-            </template>
-            {{ $t('common.confirmDelete') }}
-          </NPopconfirm>
-          <NButton size="small" @click="getData">
-            <template #icon>
-              <icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }" />
-            </template>
-            {{ $t('common.refresh') }}
-          </NButton>
-          <TableColumnSetting v-model:columns="filteredColumns" />
-        </NSpace>
+        <TableHeaderOperation
+          v-model:columns="filteredColumns"
+          :disabled-delete="checkedRowKeys.length === 0"
+          :loading="loading"
+          @add="handleAdd"
+          @delete="handleBatchDelete"
+          @refresh="getData"
+        />
      </template>
      <NDataTable
        v-model:checked-row-keys="checkedRowKeys"
--- a/src/views/manage/role/role-search.vue
+++ b/src/views/manage/role/role-search.vue
@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { watch } from 'vue';
+import { $t } from '@/locales';
+import { roleStatusOptions } from '@/constants/business';
+import { translateOptions } from '@/utils/common';
+import { useRoleSearchContext } from './context';
+
+defineOptions({
+  name: 'RoleSearch'
+});
+
+interface Emits {
+  (e: 'reset'): void;
+  (e: 'search'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+// inject searchParams
+const { searchParams } = useRoleSearchContext();
+
+function reset() {
+  emit('reset');
+}
+
+function search() {
+  emit('search');
+}
+
+watch(
+  () => searchParams,
+  val => {
+    console.log('val: ', val);
+  },
+  {
+    deep: true
+  }
+);
+</script>
+
+<template>
+  <NCard :title="$t('common.search')" :bordered="false" size="small" class="card-wrapper">
+    <NForm :model="searchParams" label-placement="left">
+      <NGrid responsive="screen" item-responsive>
+        <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleName')" path="roleName" class="pr-24px">
+          <NInput v-model:value="searchParams.roleName" :placeholder="$t('page.manage.role.form.roleName')" />
+        </NFormItemGi>
+        <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleCode')" path="roleCode" class="pr-24px">
+          <NInput v-model:value="searchParams.roleCode" :placeholder="$t('page.manage.role.form.roleCode')" />
+        </NFormItemGi>
+        <NFormItemGi span="24 s:12 m:6" :label="$t('page.manage.role.roleStatus')" path="roleStatus" class="pr-24px">
+          <NSelect
+            v-model:value="searchParams.roleStatus"
+            :placeholder="$t('page.manage.role.form.roleStatus')"
+            :options="translateOptions(roleStatusOptions)"
+            clearable
+          />
+        </NFormItemGi>
+        <NFormItemGi span="24 s:12 m:6">
+          <NSpace class="w-full" justify="end">
+            <NButton @click="reset">
+              <template #icon>
+                <icon-ic-round-refresh class="text-icon" />
+              </template>
+              {{ $t('common.reset') }}
+            </NButton>
+            <NButton type="primary" ghost @click="search">
+              <template #icon>
+                <icon-ic-round-search class="text-icon" />
+              </template>
+              {{ $t('common.search') }}
+            </NButton>
+          </NSpace>
+        </NFormItemGi>
+      </NGrid>
+    </NForm>
+  </NCard>
+</template>
+
+<style scoped></style>