Skip to content

Commit

Permalink
refactor(projects): page manage_role: extract module
Browse files Browse the repository at this point in the history
  • Loading branch information
honghuangdc committed Jan 27, 2024
1 parent 237c6d2 commit 0e9e2e1
Show file tree
Hide file tree
Showing 6 changed files with 187 additions and 71 deletions.
69 changes: 69 additions & 0 deletions src/components/advanced/table-header-operation.vue
Original file line number Diff line number Diff line change
@@ -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>
10 changes: 4 additions & 6 deletions src/hooks/common/table.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -158,8 +156,8 @@ export function useTable<TableData extends BaseData, Fn extends ApiFn, CustomCol
updatePagination,
getData,
searchParams,
resetSearchParams,
updateSearchParams
updateSearchParams,
resetSearchParams
};
}

Expand Down
2 changes: 2 additions & 0 deletions src/typings/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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']
Expand All @@ -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']
}
Expand Down
12 changes: 12 additions & 0 deletions src/views/manage/role/context.ts
Original file line number Diff line number Diff line change
@@ -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
);
85 changes: 20 additions & 65 deletions src/views/manage/role/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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 || {};
Expand Down Expand Up @@ -90,6 +95,9 @@ const { columns, filteredColumns, data, loading, pagination, getData, searchPara
]
});
// provide searchParams
setupRoleSearchContext(searchParams);
const operateType = ref<OperateType>('add');
function handleAdd() {
Expand Down Expand Up @@ -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"
Expand Down
80 changes: 80 additions & 0 deletions src/views/manage/role/role-search.vue
Original file line number Diff line number Diff line change
@@ -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>

1 comment on commit 0e9e2e1

@vercel
Copy link

@vercel vercel bot commented on 0e9e2e1 Jan 27, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

soybean-admin – ./

soybean-admin-eta.vercel.app
soybean-admin-git-main-soybeanjs.vercel.app
soybean-admin-soybeanjs.vercel.app

Please sign in to comment.