mirror of
https://github.com/m-xlsea/ruoyi-plus-soybean.git
synced 2025-09-24 07:49:47 +08:00
refactor(projects): finish refactor useTable and apply
This commit is contained in:
Soybean
@ -1,37 +1,21 @@
|
||||
<script setup lang="tsx">
|
||||
import { ref } from 'vue';
|
||||
import { NButton, NPopconfirm, NTag } from 'naive-ui';
|
||||
import { useBoolean } from '@sa/hooks';
|
||||
import { fetchGetMenuList } from '@/service/api';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useTable } from '@/hooks/common/table';
|
||||
import { useTable, useTableOperate } from '@/hooks/common/table';
|
||||
import { $t } from '@/locales';
|
||||
import { yesOrNoRecord } from '@/constants/common';
|
||||
import { enableStatusRecord, menuTypeRecord } from '@/constants/business';
|
||||
import SvgIcon from '@/components/custom/svg-icon.vue';
|
||||
import MenuOperateDrawer, { type OperateType } from './modules/menu-operate-drawer.vue';
|
||||
import MenuOperateDrawer from './modules/menu-operate-drawer.vue';
|
||||
|
||||
const appStore = useAppStore();
|
||||
const { bool: drawerVisible, setTrue: openDrawer } = useBoolean();
|
||||
|
||||
const wrapperRef = ref<HTMLElement | null>(null);
|
||||
|
||||
const { columns, filteredColumns, data, loading, pagination, getData } = useTable<
|
||||
Api.SystemManage.Menu,
|
||||
typeof fetchGetMenuList,
|
||||
'index' | 'operate'
|
||||
>({
|
||||
const { columns, columnChecks, data, loading, pagination, getData } = useTable({
|
||||
apiFn: fetchGetMenuList,
|
||||
transformer: res => {
|
||||
const menus = res.data || [];
|
||||
|
||||
return {
|
||||
data: menus,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
total: menus.length
|
||||
};
|
||||
},
|
||||
columns: () => [
|
||||
{
|
||||
type: 'selection',
|
||||
@ -163,7 +147,7 @@ const { columns, filteredColumns, data, loading, pagination, getData } = useTabl
|
||||
{$t('page.manage.menu.addChildMenu')}
|
||||
</NButton>
|
||||
)}
|
||||
<NButton type="primary" ghost size="small" onClick={() => handleEdit(row.id)}>
|
||||
<NButton type="primary" ghost size="small" onClick={() => edit(row.id)}>
|
||||
{$t('common.edit')}
|
||||
</NButton>
|
||||
<NPopconfirm onPositiveClick={() => handleDelete(row.id)}>
|
||||
@ -182,50 +166,40 @@ const { columns, filteredColumns, data, loading, pagination, getData } = useTabl
|
||||
]
|
||||
});
|
||||
|
||||
const operateType = ref<OperateType>('add');
|
||||
|
||||
function handleAdd() {
|
||||
operateType.value = 'add';
|
||||
openDrawer();
|
||||
}
|
||||
|
||||
const checkedRowKeys = ref<string[]>([]);
|
||||
const {
|
||||
drawerVisible,
|
||||
operateType,
|
||||
editingData,
|
||||
handleAdd,
|
||||
handleEdit,
|
||||
checkedRowKeys,
|
||||
onBatchDeleted,
|
||||
onDeleted
|
||||
// closeDrawer
|
||||
} = useTableOperate(data, getData);
|
||||
|
||||
async function handleBatchDelete() {
|
||||
// request
|
||||
console.log(checkedRowKeys.value);
|
||||
window.$message?.success($t('common.deleteSuccess'));
|
||||
|
||||
checkedRowKeys.value = [];
|
||||
onBatchDeleted();
|
||||
}
|
||||
|
||||
getData();
|
||||
function handleDelete(id: number) {
|
||||
// request
|
||||
console.log(id);
|
||||
|
||||
onDeleted();
|
||||
}
|
||||
|
||||
function handleAddChildMenu(id: number) {
|
||||
console.log('id: ', id);
|
||||
operateType.value = 'add';
|
||||
openDrawer();
|
||||
}
|
||||
|
||||
/** the editing row data */
|
||||
const editingData = ref<Api.SystemManage.Menu | null>(null);
|
||||
|
||||
function handleEdit(id: number) {
|
||||
operateType.value = 'edit';
|
||||
editingData.value = data.value.find(item => item.id === id) || null;
|
||||
openDrawer();
|
||||
}
|
||||
|
||||
async function handleDelete(id: number) {
|
||||
// request
|
||||
console.log(id);
|
||||
window.$message?.success($t('common.deleteSuccess'));
|
||||
|
||||
getData();
|
||||
handleAdd();
|
||||
}
|
||||
|
||||
function getRowKey(row: Api.SystemManage.Menu) {
|
||||
return row.id;
|
||||
function edit(id: number) {
|
||||
handleEdit(id);
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -234,7 +208,7 @@ function getRowKey(row: Api.SystemManage.Menu) {
|
||||
<NCard :title="$t('page.manage.menu.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
|
||||
<template #header-extra>
|
||||
<TableHeaderOperation
|
||||
v-model:columns="filteredColumns"
|
||||
v-model:columns="columnChecks"
|
||||
:disabled-delete="checkedRowKeys.length === 0"
|
||||
:loading="loading"
|
||||
@add="handleAdd"
|
||||
@ -250,7 +224,7 @@ function getRowKey(row: Api.SystemManage.Menu) {
|
||||
:flex-height="!appStore.isMobile"
|
||||
:scroll-x="1088"
|
||||
:loading="loading"
|
||||
:row-key="getRowKey"
|
||||
:row-key="row => row.id"
|
||||
remote
|
||||
:pagination="pagination"
|
||||
class="sm:h-full"
|
||||
|
||||
@ -11,17 +11,9 @@ defineOptions({
|
||||
name: 'MenuOperateDrawer'
|
||||
});
|
||||
|
||||
/**
|
||||
* the type of operation
|
||||
*
|
||||
* - add: add user
|
||||
* - edit: edit user
|
||||
*/
|
||||
export type OperateType = 'add' | 'edit';
|
||||
|
||||
interface Props {
|
||||
/** the type of operation */
|
||||
operateType: OperateType;
|
||||
operateType: NaiveUI.TableOperateType;
|
||||
/** the edit row data */
|
||||
rowData?: Api.SystemManage.Menu | null;
|
||||
}
|
||||
@ -42,7 +34,7 @@ const { formRef, validate, restoreValidation } = useNaiveForm();
|
||||
const { defaultRequiredRule } = useFormRules();
|
||||
|
||||
const title = computed(() => {
|
||||
const titles: Record<OperateType, string> = {
|
||||
const titles: Record<NaiveUI.TableOperateType, string> = {
|
||||
add: $t('page.manage.menu.addMenu'),
|
||||
edit: $t('page.manage.menu.editMenu')
|
||||
};
|
||||
|
||||
@ -1,30 +1,16 @@
|
||||
<script setup lang="tsx">
|
||||
import { computed, ref } from 'vue';
|
||||
import { NButton, NPopconfirm, NTag } from 'naive-ui';
|
||||
import type { PaginationProps } from 'naive-ui';
|
||||
import { useBoolean } from '@sa/hooks';
|
||||
import { fetchGetRoleList } from '@/service/api';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useTable } from '@/hooks/common/table';
|
||||
import { useTable, useTableOperate } from '@/hooks/common/table';
|
||||
import { $t } from '@/locales';
|
||||
import { enableStatusRecord } from '@/constants/business';
|
||||
import RoleOperateDrawer, { type OperateType } from './modules/role-operate-drawer.vue';
|
||||
import RoleOperateDrawer from './modules/role-operate-drawer.vue';
|
||||
import RoleSearch from './modules/role-search.vue';
|
||||
|
||||
const appStore = useAppStore();
|
||||
const { bool: drawerVisible, setTrue: openDrawer } = useBoolean();
|
||||
|
||||
const {
|
||||
columns,
|
||||
filteredColumns,
|
||||
data,
|
||||
loading,
|
||||
pagination,
|
||||
getData,
|
||||
searchParams,
|
||||
updateSearchParams,
|
||||
resetSearchParams
|
||||
} = useTable<Api.SystemManage.Role, typeof fetchGetRoleList, 'index' | 'operate'>({
|
||||
const { columns, columnChecks, data, loading, getData, mobilePagination, searchParams, resetSearchParams } = useTable({
|
||||
apiFn: fetchGetRoleList,
|
||||
apiParams: {
|
||||
current: 1,
|
||||
@ -35,26 +21,6 @@ const {
|
||||
roleName: null,
|
||||
roleCode: null
|
||||
},
|
||||
transformer: res => {
|
||||
const { records = [], current = 1, size = 10, total = 0 } = res.data || {};
|
||||
|
||||
return {
|
||||
data: records,
|
||||
pageNum: current,
|
||||
pageSize: size,
|
||||
total
|
||||
};
|
||||
},
|
||||
onPaginationChanged(pg) {
|
||||
const { page, pageSize } = pg;
|
||||
|
||||
updateSearchParams({
|
||||
current: page,
|
||||
size: pageSize
|
||||
});
|
||||
|
||||
getData();
|
||||
},
|
||||
columns: () => [
|
||||
{
|
||||
type: 'selection',
|
||||
@ -64,7 +30,6 @@ const {
|
||||
{
|
||||
key: 'index',
|
||||
title: $t('common.index'),
|
||||
render: (_, index): string => getIndex(index),
|
||||
width: 64,
|
||||
align: 'center'
|
||||
},
|
||||
@ -112,7 +77,7 @@ const {
|
||||
width: 130,
|
||||
render: row => (
|
||||
<div class="flex-center gap-8px">
|
||||
<NButton type="primary" ghost size="small" onClick={() => handleEdit(row.id)}>
|
||||
<NButton type="primary" ghost size="small" onClick={() => edit(row.id)}>
|
||||
{$t('common.edit')}
|
||||
</NButton>
|
||||
<NPopconfirm onPositiveClick={() => handleDelete(row.id)}>
|
||||
@ -131,60 +96,34 @@ const {
|
||||
]
|
||||
});
|
||||
|
||||
// this is for mobile, if the system does not support mobile, you can use `pagination` directly
|
||||
const mobilePagination = computed(() => {
|
||||
const p: PaginationProps = {
|
||||
...pagination,
|
||||
pageSlot: appStore.isMobile ? 3 : 9
|
||||
};
|
||||
|
||||
return p;
|
||||
});
|
||||
|
||||
const operateType = ref<OperateType>('add');
|
||||
|
||||
function handleAdd() {
|
||||
operateType.value = 'add';
|
||||
openDrawer();
|
||||
}
|
||||
|
||||
const checkedRowKeys = ref<string[]>([]);
|
||||
const {
|
||||
drawerVisible,
|
||||
operateType,
|
||||
editingData,
|
||||
handleAdd,
|
||||
handleEdit,
|
||||
checkedRowKeys,
|
||||
onBatchDeleted,
|
||||
onDeleted
|
||||
// closeDrawer
|
||||
} = useTableOperate(data, getData);
|
||||
|
||||
async function handleBatchDelete() {
|
||||
// request
|
||||
console.log(checkedRowKeys.value);
|
||||
window.$message?.success($t('common.deleteSuccess'));
|
||||
|
||||
checkedRowKeys.value = [];
|
||||
|
||||
getData();
|
||||
onBatchDeleted();
|
||||
}
|
||||
|
||||
/** the editing row data */
|
||||
const editingData = ref<Api.SystemManage.Role | null>(null);
|
||||
|
||||
function handleEdit(id: number) {
|
||||
operateType.value = 'edit';
|
||||
editingData.value = data.value.find(item => item.id === id) || null;
|
||||
openDrawer();
|
||||
}
|
||||
|
||||
async function handleDelete(id: number) {
|
||||
function handleDelete(id: number) {
|
||||
// request
|
||||
console.log(id);
|
||||
window.$message?.success($t('common.deleteSuccess'));
|
||||
|
||||
getData();
|
||||
onDeleted();
|
||||
}
|
||||
|
||||
function getIndex(index: number) {
|
||||
const { page = 0, pageSize = 10 } = pagination;
|
||||
|
||||
return String((page - 1) * pageSize + index + 1);
|
||||
}
|
||||
|
||||
function getRowKey(row: Api.SystemManage.User) {
|
||||
return row.id;
|
||||
function edit(id: number) {
|
||||
handleEdit(id);
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -194,7 +133,7 @@ function getRowKey(row: Api.SystemManage.User) {
|
||||
<NCard :title="$t('page.manage.role.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
|
||||
<template #header-extra>
|
||||
<TableHeaderOperation
|
||||
v-model:columns="filteredColumns"
|
||||
v-model:columns="columnChecks"
|
||||
:disabled-delete="checkedRowKeys.length === 0"
|
||||
:loading="loading"
|
||||
@add="handleAdd"
|
||||
@ -211,7 +150,7 @@ function getRowKey(row: Api.SystemManage.User) {
|
||||
:scroll-x="702"
|
||||
:loading="loading"
|
||||
remote
|
||||
:row-key="getRowKey"
|
||||
:row-key="row => row.id"
|
||||
:pagination="mobilePagination"
|
||||
class="sm:h-full"
|
||||
/>
|
||||
|
||||
@ -8,17 +8,9 @@ defineOptions({
|
||||
name: 'RoleOperateDrawer'
|
||||
});
|
||||
|
||||
/**
|
||||
* the type of operation
|
||||
*
|
||||
* - add: add role
|
||||
* - edit: edit role
|
||||
*/
|
||||
export type OperateType = 'add' | 'edit';
|
||||
|
||||
interface Props {
|
||||
/** the type of operation */
|
||||
operateType: OperateType;
|
||||
operateType: NaiveUI.TableOperateType;
|
||||
/** the edit row data */
|
||||
rowData?: Api.SystemManage.Role | null;
|
||||
}
|
||||
@ -39,7 +31,7 @@ const { formRef, validate, restoreValidation } = useNaiveForm();
|
||||
const { defaultRequiredRule } = useFormRules();
|
||||
|
||||
const title = computed(() => {
|
||||
const titles: Record<OperateType, string> = {
|
||||
const titles: Record<NaiveUI.TableOperateType, string> = {
|
||||
add: $t('page.manage.role.addRole'),
|
||||
edit: $t('page.manage.role.editRole')
|
||||
};
|
||||
|
||||
@ -1,30 +1,16 @@
|
||||
<script setup lang="tsx">
|
||||
import { computed, ref } from 'vue';
|
||||
import { NButton, NPopconfirm, NTag } from 'naive-ui';
|
||||
import type { PaginationProps } from 'naive-ui';
|
||||
import { useBoolean } from '@sa/hooks';
|
||||
import { fetchGetUserList } from '@/service/api';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { useTable } from '@/hooks/common/table';
|
||||
import { $t } from '@/locales';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { enableStatusRecord, userGenderRecord } from '@/constants/business';
|
||||
import UserOperateDrawer, { type OperateType } from './modules/user-operate-drawer.vue';
|
||||
import { useTable, useTableOperate } from '@/hooks/common/table';
|
||||
import UserOperateDrawer from './modules/user-operate-drawer.vue';
|
||||
import UserSearch from './modules/user-search.vue';
|
||||
|
||||
const appStore = useAppStore();
|
||||
const { bool: drawerVisible, setTrue: openDrawer } = useBoolean();
|
||||
|
||||
const {
|
||||
columns,
|
||||
filteredColumns,
|
||||
data,
|
||||
loading,
|
||||
pagination,
|
||||
getData,
|
||||
searchParams,
|
||||
updateSearchParams,
|
||||
resetSearchParams
|
||||
} = useTable<Api.SystemManage.User, typeof fetchGetUserList, 'index' | 'operate'>({
|
||||
const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
|
||||
apiFn: fetchGetUserList,
|
||||
apiParams: {
|
||||
current: 1,
|
||||
@ -38,26 +24,6 @@ const {
|
||||
userPhone: null,
|
||||
userEmail: null
|
||||
},
|
||||
transformer: res => {
|
||||
const { records = [], current = 1, size = 10, total = 0 } = res.data || {};
|
||||
|
||||
return {
|
||||
data: records,
|
||||
pageNum: current,
|
||||
pageSize: size,
|
||||
total
|
||||
};
|
||||
},
|
||||
onPaginationChanged(pg) {
|
||||
const { page, pageSize } = pg;
|
||||
|
||||
updateSearchParams({
|
||||
current: page,
|
||||
size: pageSize
|
||||
});
|
||||
|
||||
getData();
|
||||
},
|
||||
columns: () => [
|
||||
{
|
||||
type: 'selection',
|
||||
@ -67,7 +33,6 @@ const {
|
||||
{
|
||||
key: 'index',
|
||||
title: $t('common.index'),
|
||||
render: (_, index): string => getIndex(index),
|
||||
align: 'center',
|
||||
width: 64
|
||||
},
|
||||
@ -142,7 +107,7 @@ const {
|
||||
width: 130,
|
||||
render: row => (
|
||||
<div class="flex-center gap-8px">
|
||||
<NButton type="primary" ghost size="small" onClick={() => handleEdit(row.id)}>
|
||||
<NButton type="primary" ghost size="small" onClick={() => edit(row.id)}>
|
||||
{$t('common.edit')}
|
||||
</NButton>
|
||||
<NPopconfirm onPositiveClick={() => handleDelete(row.id)}>
|
||||
@ -161,60 +126,34 @@ const {
|
||||
]
|
||||
});
|
||||
|
||||
// this is for mobile, if the system does not support mobile, you can use `pagination` directly
|
||||
const mobilePagination = computed(() => {
|
||||
const p: PaginationProps = {
|
||||
...pagination,
|
||||
pageSlot: appStore.isMobile ? 3 : 9
|
||||
};
|
||||
|
||||
return p;
|
||||
});
|
||||
|
||||
const operateType = ref<OperateType>('add');
|
||||
|
||||
function handleAdd() {
|
||||
operateType.value = 'add';
|
||||
openDrawer();
|
||||
}
|
||||
|
||||
const checkedRowKeys = ref<string[]>([]);
|
||||
const {
|
||||
drawerVisible,
|
||||
operateType,
|
||||
editingData,
|
||||
handleAdd,
|
||||
handleEdit,
|
||||
checkedRowKeys,
|
||||
onBatchDeleted,
|
||||
onDeleted
|
||||
// closeDrawer
|
||||
} = useTableOperate(data, getData);
|
||||
|
||||
async function handleBatchDelete() {
|
||||
// request
|
||||
console.log(checkedRowKeys.value);
|
||||
window.$message?.success($t('common.deleteSuccess'));
|
||||
|
||||
checkedRowKeys.value = [];
|
||||
|
||||
getData();
|
||||
onBatchDeleted();
|
||||
}
|
||||
|
||||
/** the editing row data */
|
||||
const editingData = ref<Api.SystemManage.User | null>(null);
|
||||
|
||||
function handleEdit(id: number) {
|
||||
operateType.value = 'edit';
|
||||
editingData.value = data.value.find(item => item.id === id) || null;
|
||||
openDrawer();
|
||||
}
|
||||
|
||||
async function handleDelete(id: number) {
|
||||
function handleDelete(id: number) {
|
||||
// request
|
||||
console.log(id);
|
||||
window.$message?.success($t('common.deleteSuccess'));
|
||||
|
||||
getData();
|
||||
onDeleted();
|
||||
}
|
||||
|
||||
function getIndex(index: number) {
|
||||
const { page = 0, pageSize = 10 } = pagination;
|
||||
|
||||
return String((page - 1) * pageSize + index + 1);
|
||||
}
|
||||
|
||||
function getRowKey(row: Api.SystemManage.User) {
|
||||
return row.id;
|
||||
function edit(id: number) {
|
||||
handleEdit(id);
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -224,7 +163,7 @@ function getRowKey(row: Api.SystemManage.User) {
|
||||
<NCard :title="$t('page.manage.user.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
|
||||
<template #header-extra>
|
||||
<TableHeaderOperation
|
||||
v-model:columns="filteredColumns"
|
||||
v-model:columns="columnChecks"
|
||||
:disabled-delete="checkedRowKeys.length === 0"
|
||||
:loading="loading"
|
||||
@add="handleAdd"
|
||||
@ -241,7 +180,7 @@ function getRowKey(row: Api.SystemManage.User) {
|
||||
:scroll-x="962"
|
||||
:loading="loading"
|
||||
remote
|
||||
:row-key="getRowKey"
|
||||
:row-key="row => row.id"
|
||||
:pagination="mobilePagination"
|
||||
class="sm:h-full"
|
||||
/>
|
||||
|
||||
@ -1,190 +0,0 @@
|
||||
<script setup lang="tsx">
|
||||
import { NButton, NPopconfirm, NTag } from 'naive-ui';
|
||||
import { fetchGetUserList } from '@/service/api';
|
||||
import { $t } from '@/locales';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { enableStatusRecord, userGenderRecord } from '@/constants/business';
|
||||
import { getNaiveTableIndex, useNaiveTable, useNaiveTableOperate } from '@/hooks/common/naive-table';
|
||||
import UserOperateDrawer from './modules/user-operate-drawer.vue';
|
||||
import UserSearch from './modules/user-search.vue';
|
||||
|
||||
const appStore = useAppStore();
|
||||
|
||||
const { columns, columnChecks, data, getData, loading, pagination, mobilePagination, searchParams, resetSearchParams } =
|
||||
useNaiveTable({
|
||||
apiFn: fetchGetUserList,
|
||||
apiParams: {
|
||||
current: 1,
|
||||
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
|
||||
status: null,
|
||||
userName: null,
|
||||
userGender: null,
|
||||
nickName: null,
|
||||
userPhone: null,
|
||||
userEmail: null
|
||||
},
|
||||
columns: () => [
|
||||
{
|
||||
type: 'selection',
|
||||
align: 'center',
|
||||
width: 48
|
||||
},
|
||||
{
|
||||
key: 'index',
|
||||
title: $t('common.index'),
|
||||
render: (_, index): number => getNaiveTableIndex(pagination, index),
|
||||
align: 'center',
|
||||
width: 64
|
||||
},
|
||||
{
|
||||
key: 'userName',
|
||||
title: $t('page.manage.user.userName'),
|
||||
align: 'center',
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
key: 'userGender',
|
||||
title: $t('page.manage.user.userGender'),
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: row => {
|
||||
if (row.userGender === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const tagMap: Record<Api.SystemManage.UserGender, NaiveUI.ThemeColor> = {
|
||||
1: 'primary',
|
||||
2: 'error'
|
||||
};
|
||||
|
||||
const label = $t(userGenderRecord[row.userGender]);
|
||||
|
||||
return <NTag type={tagMap[row.userGender]}>{label}</NTag>;
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'nickName',
|
||||
title: $t('page.manage.user.nickName'),
|
||||
align: 'center',
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
key: 'userPhone',
|
||||
title: $t('page.manage.user.userPhone'),
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
key: 'userEmail',
|
||||
title: $t('page.manage.user.userEmail'),
|
||||
align: 'center',
|
||||
minWidth: 200
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
title: $t('page.manage.user.userStatus'),
|
||||
align: 'center',
|
||||
width: 100,
|
||||
render: row => {
|
||||
if (row.status === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const tagMap: Record<Api.Common.EnableStatus, NaiveUI.ThemeColor> = {
|
||||
1: 'success',
|
||||
2: 'warning'
|
||||
};
|
||||
|
||||
const label = $t(enableStatusRecord[row.status]);
|
||||
|
||||
return <NTag type={tagMap[row.status]}>{label}</NTag>;
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'operate',
|
||||
title: $t('common.operate'),
|
||||
align: 'center',
|
||||
width: 130,
|
||||
render: row => (
|
||||
<div class="flex-center gap-8px">
|
||||
<NButton type="primary" ghost size="small" onClick={() => edit(row.id)}>
|
||||
{$t('common.edit')}
|
||||
</NButton>
|
||||
<NPopconfirm onPositiveClick={() => handleDelete(row.id)}>
|
||||
{{
|
||||
default: () => $t('common.confirmDelete'),
|
||||
trigger: () => (
|
||||
<NButton type="error" ghost size="small">
|
||||
{$t('common.delete')}
|
||||
</NButton>
|
||||
)
|
||||
}}
|
||||
</NPopconfirm>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const { drawerVisible, operateType, editingData, handleAdd, handleEdit, checkedRowKeys, onBatchDeleted, onDeleted } =
|
||||
useNaiveTableOperate(data, getData);
|
||||
|
||||
async function handleBatchDelete() {
|
||||
// request
|
||||
console.log(checkedRowKeys.value);
|
||||
|
||||
onBatchDeleted();
|
||||
}
|
||||
|
||||
function handleDelete(id: number) {
|
||||
// request
|
||||
console.log(id);
|
||||
|
||||
onDeleted();
|
||||
}
|
||||
|
||||
function edit(id: number) {
|
||||
handleEdit(id);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-500px flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
|
||||
<UserSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" />
|
||||
<NCard :title="$t('page.manage.user.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
|
||||
<template #header-extra>
|
||||
<TableHeaderOperation
|
||||
v-model:columns="columnChecks"
|
||||
:disabled-delete="checkedRowKeys.length === 0"
|
||||
:loading="loading"
|
||||
@add="handleAdd"
|
||||
@delete="handleBatchDelete"
|
||||
@refresh="getData"
|
||||
/>
|
||||
</template>
|
||||
<NDataTable
|
||||
v-model:checked-row-keys="checkedRowKeys"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
size="small"
|
||||
:flex-height="!appStore.isMobile"
|
||||
:scroll-x="962"
|
||||
:loading="loading"
|
||||
remote
|
||||
:row-key="row => row.id"
|
||||
:pagination="mobilePagination"
|
||||
class="sm:h-full"
|
||||
/>
|
||||
<UserOperateDrawer
|
||||
v-model:visible="drawerVisible"
|
||||
:operate-type="operateType"
|
||||
:row-data="editingData"
|
||||
@submitted="getData"
|
||||
/>
|
||||
</NCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@ -9,17 +9,9 @@ defineOptions({
|
||||
name: 'UserOperateDrawer'
|
||||
});
|
||||
|
||||
/**
|
||||
* the type of operation
|
||||
*
|
||||
* - add: add user
|
||||
* - edit: edit user
|
||||
*/
|
||||
export type OperateType = 'add' | 'edit';
|
||||
|
||||
interface Props {
|
||||
/** the type of operation */
|
||||
operateType: OperateType;
|
||||
operateType: NaiveUI.TableOperateType;
|
||||
/** the edit row data */
|
||||
rowData?: Api.SystemManage.User | null;
|
||||
}
|
||||
@ -40,7 +32,7 @@ const { formRef, validate, restoreValidation } = useNaiveForm();
|
||||
const { defaultRequiredRule } = useFormRules();
|
||||
|
||||
const title = computed(() => {
|
||||
const titles: Record<OperateType, string> = {
|
||||
const titles: Record<NaiveUI.TableOperateType, string> = {
|
||||
add: $t('page.manage.user.addUser'),
|
||||
edit: $t('page.manage.user.editUser')
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user