'考勤1'

src/router/modules/management.ts

@@ -69,7 +69,7 @@ const management: AuthRoute.Route = {
 					component: 'self',
 					meta: {
             title: '排课信息',
-            i18nTitle: '排课信息',
+            i18nTitle: '考勤详细信息',
             requiresAuth: true,
             icon: 'memory:calendar-month'
           }
@@ -80,7 +80,7 @@ const management: AuthRoute.Route = {
 					component: 'self',
 					meta: {
             title: '班级签到信息',
-            i18nTitle: '班级签到信息',
+            i18nTitle: '班级详细信息',
             requiresAuth: true,
             icon: 'cryptocurrency-color:block'
           }

src/service/api/class.ts

@@ -0,0 +1,150 @@
+import { request } from "../request";
+// 响应接口
+export interface SelectTotalRes {
+	status: boolean;
+	msg: string;
+	data: Record<string, unknown>;
+	code: number;
+}
+
+/**
+ * 查询所有的班级类
+ * @returns
+ */
+export function selectTotal() {
+	return request.get(`/selectTotal`);
+}
+
+// 参数接口
+export interface SelectConditionParams {
+	id?: number | null;
+	name?: string | null;
+	manageId?: number | null;
+	assistantId?: number | null;
+	createTime?: string | null;
+	modifyTime?: string | null;
+	createUid?: number | null;
+	disabled?: string | null;
+}
+
+// 响应接口
+export interface SelectConditionRes {
+	status: boolean;
+	msg: string;
+	data: Record<string, unknown>;
+	total: number;
+}
+
+/**
+ * 根据条件进行查询班级类
+ * @param {string} pageNum
+ * @param {string} pageSize
+ * @param {object} params EasEduClass
+ * @param {number} params.id 班级ID
+ * @param {string} params.name 班级名称
+ * @param {number} params.manageId 班级负责人ID
+ * @param {number} params.assistantId 助教老师ID
+ * @param {object} params.createTime 创建时间
+ * @param {object} params.modifyTime 修改时间
+ * @param {number} params.createUid 创建用户ID
+ * @param {string} params.disabled 状态
+ * @returns
+ */
+export function selectCondition(
+	pageNum: number | undefined,
+	pageSize: number | undefined,
+	params: SelectConditionParams
+) {
+	return request.post(
+		`/selectCondition?pageNum=${pageNum}&pageSize=${pageSize}`,
+		params
+	);
+}
+// 参数接口
+export interface UpdateClassParams {
+	id?: number;
+	name?: string;
+	manageId?: number;
+	assistantId?: number;
+	createTime?: Record<string, unknown>;
+	modifyTime?: Record<string, unknown>;
+	createUid?: number;
+	disabled?: string;
+}
+
+// 响应接口
+export interface UpdateClassRes {
+	status: boolean;
+	msg: string;
+	data: Record<string, unknown>;
+	code: number;
+}
+
+/**
+ * 更新班级类
+ * @param {object} params EasEduClass
+ * @param {number} params.id 班级ID
+ * @param {string} params.name 班级名称
+ * @param {number} params.manageId 班级负责人ID
+ * @param {number} params.assistantId 助教老师ID
+ * @param {object} params.createTime 创建时间
+ * @param {object} params.modifyTime 修改时间
+ * @param {number} params.createUid 创建用户ID
+ * @param {string} params.disabled 状态
+ * @returns
+ */
+export function updateClass(params: UpdateClassParams) {
+	return request.put(`/updateClass`, params);
+}
+// 参数接口
+export interface AddClassParams {
+	id?: number;
+	name?: string;
+	manageId?: number;
+	assistantId?: number;
+	createTime?: Record<string, unknown>;
+	modifyTime?: Record<string, unknown>;
+	createUid?: number;
+	disabled?: string;
+}
+
+// 响应接口
+export interface AddClassRes {
+	status: boolean;
+	msg: string;
+	data: Record<string, unknown>;
+	code: number;
+}
+
+/**
+ * 增加班级类
+ * @param {object} params EasEduClass
+ * @param {number} params.id 班级ID
+ * @param {string} params.name 班级名称
+ * @param {number} params.manageId 班级负责人ID
+ * @param {number} params.assistantId 助教老师ID
+ * @param {object} params.createTime 创建时间
+ * @param {object} params.modifyTime 修改时间
+ * @param {number} params.createUid 创建用户ID
+ * @param {string} params.disabled 状态
+ * @returns
+ */
+export function addClass(params: AddClassParams) {
+	return request.post(`/addClass`, params);
+}
+// 响应接口
+export interface DeleteClassRes {
+	status: boolean;
+	msg: string;
+	data: Record<string, unknown>;
+	code: number;
+}
+
+/**
+ * 删除班级类
+ * @param {string} id
+ * @returns
+ */
+export function deleteClass(id: number) {
+	return request.delete(`/deleteClass/${id}`);
+}

src/typings/api1.d.ts

@@ -2,36 +2,50 @@
 
 /** 后端返回的用户权益相关类型 */
 declare namespace ApiAuth {
-  /** 返回的token和刷新token */
-  interface Token {
-    token: string;
-    refreshToken: string;
-  }
-  /** 返回的用户信息 */
-  type UserInfo1 = Auth.UserInfo;
+	/** 返回的token和刷新token */
+	interface Token {
+		token: string;
+		refreshToken: string;
+	}
+	/** 返回的用户信息 */
+	type UserInfo1 = Auth.UserInfo;
 }
 
 /** 后端返回的路由相关类型 */
 declare namespace ApiRoute {
-  /** 后端返回的路由数据类型 */
-  interface Route {
-    /** 动态路由 */
-    routes: AuthRoute.Route[];
-    /** 路由首页对应的key */
-    home: AuthRoute.AllRouteKey;
-  }
+	/** 后端返回的路由数据类型 */
+	interface Route {
+		/** 动态路由 */
+		routes: AuthRoute.Route[];
+		/** 路由首页对应的key */
+		home: AuthRoute.AllRouteKey;
+	}
 }
 
 declare namespace ApiUserManagement1 {
-  interface User {
+	interface User {
 		id: number;
-    name: string;
+		name: string;
 		description: string;
-		categoryId:string;
+		categoryId: string;
 		createTime: string;
-		modifyTime:string;
-		createUid:number;
-		disabled:string;
-		inputValue:string;
-  }
+		modifyTime: string;
+		createUid: number;
+		disabled: string;
+		inputValue: string;
+		/**
+		 * 用户性别
+		 * - 0: 女
+		 * - 1: 男
+		 */
+		gender: "0" | "1" | null;
+		/**
+		 * 用户状态
+		 * - 1: 启用
+		 * - 2: 禁用
+		 * - 3: 冻结
+		 * - 4: 软删除
+		 */
+		userStatus: "1" | "2" | "3" | "4" | null;
+	}
 }

src/typings/business1.d.ts

@@ -32,7 +32,7 @@ declare namespace UserManagement1 {
    * - 0: 女
    * - 1: 男
    */
-  // type GenderKey = NonNullable<User['gender']>;
+  type GenderKey = NonNullable<User['gender']>;
 
   /**
    * 用户状态
@@ -41,5 +41,5 @@ declare namespace UserManagement1 {
    * - 3: 冻结
    * - 4: 软删除
    */
-  // type UserStatusKey = NonNullable<User['userStatus']>;
+  type UserStatusKey = NonNullable<User['userStatus']>;
 }

src/views/management/attendance/firstTwo/components/table-action-modal.vue

@@ -0,0 +1,184 @@
+<template>
+	<n-modal v-model:show="modalVisible" preset="card" :title="title" class="w-700px">
+		<n-form ref="formRef" label-placement="left" :label-width="80" :model="formModel" :rules="rules">
+			<n-grid :cols="24" :x-gap="18">
+				<!-- <n-form-item-grid-item :span="12" label="id" path="createUid">
+          <n-input-number v-model:value="formModel.createUid"  />
+        </n-form-item-grid-item> -->
+				<n-form-item-grid-item :span="12" label="班级名称" path="name">
+					<n-input v-model:value="formModel.name" />
+				</n-form-item-grid-item>
+				<n-form-item-grid-item :span="12" label="班级负责人id" path="manageId">
+					<n-input v-model:value="formModel.manageId" clearable />
+				</n-form-item-grid-item>
+				<n-form-item-grid-item :span="12" label="助教老师id" path="assistantId">
+					<n-input v-model:value="formModel.assistantId" />
+				</n-form-item-grid-item>
+				<!-- <n-form-item-grid-item :span="12" label="创建时间" path="createTime">
+          <n-input v-model:value="formModel.createTime" :options="userStatusOptions"/>
+        </n-form-item-grid-item> -->
+				<!-- <n-form-item-grid-item :span="12" label="修改时间" path="modifyTime">
+          <n-input v-model:value="formModel.modifyTime" :options="userStatusOptions"/>
+        </n-form-item-grid-item> -->
+				<n-form-item-grid-item :span="12" label="创建用户ID" path="createUid">
+					<n-input-number v-model:value="formModel.createUid" />
+				</n-form-item-grid-item>
+				<n-form-item-grid-item :span="12" label="状态" path="disabled">
+					<n-input v-model:value="formModel.disabled" :options="userStatusOptions" />
+				</n-form-item-grid-item>
+			</n-grid>
+			<n-space class="w-full pt-16px" :size="24" justify="end">
+				<n-button class="w-72px" @click="closeModal">取消</n-button>
+				<n-button class="w-72px" type="primary" v-if="props.type === 'add'" @click="handleSubmit">添加</n-button>
+				<n-button class="w-72px" type="primary" v-if="props.type === 'edit'" @click="handleupdate">修改</n-button>
+			</n-space>
+		</n-form>
+	</n-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, reactive, watch, inject } from 'vue';
+import type { FormInst, FormItemRule } from 'naive-ui';
+import { addClass, updateClass, SelectConditionParams } from '~/src/service/api/class';
+
+import { userStatusOptions } from '@/constants';
+import { createRequiredFormRule } from '@/utils';
+import dayjs from 'dayjs';
+
+const init = inject('init');
+
+export interface Props {
+	/** 弹窗可见性 */
+	visible: boolean;
+	/**
+	 * 弹窗类型
+	 * add: 新增
+	 * edit: 编辑
+	 */
+	type?: 'add' | 'edit';
+	/** 编辑的表格行数据 */
+	editData?: SelectConditionParams | null;
+}
+
+export type ModalType = NonNullable<Props['type']>;
+
+defineOptions({ name: 'TableActionModal' });
+
+const props = withDefaults(defineProps<Props>(), {
+	type: 'add' || 'edit',
+	editData: null
+});
+
+interface Emits {
+	(e: 'update:visible', visible: boolean): void;
+}
+
+const emit = defineEmits<Emits>();
+// const emits = defineEmits()
+const modalVisible = computed({
+	get() {
+		return props.visible;
+	},
+	set(visible) {
+		emit('update:visible', visible);
+	}
+});
+const closeModal = () => {
+	modalVisible.value = false;
+};
+
+const title = computed(() => {
+	const titles: Record<ModalType, string> = {
+		add: '添加用户',
+		edit: '编辑用户'
+	};
+	return titles[props.type];
+});
+const formRef = ref<HTMLElement & FormInst>();
+
+type FormModel = Pick<UserManagement1.User, 'inputValue' | 'id' | 'name' | 'manageId' | 'assistantId' | 'createTime' | 'modifyTime' | 'createUid' | 'disabled'>;
+
+const formModel = reactive<FormModel>(createDefaultFormModel());
+
+const rules: Record<keyof FormModel, FormItemRule | FormItemRule[]> = {
+	id: createRequiredFormRule('请输入id'),
+	name: createRequiredFormRule('请输入用户名'),
+	manageId: createRequiredFormRule('请输入年龄'),
+	assistantId: createRequiredFormRule('请选择性别'),
+	createTime: createRequiredFormRule('请选择用户状态'),
+	modifyTime: createRequiredFormRule('请选择用户状态'),
+	createUid: createRequiredFormRule('请选择用户状态'),
+	disabled: createRequiredFormRule('请选择用户状态'),
+	inputValue: createRequiredFormRule('请选择用户状态')
+};
+
+function createDefaultFormModel(): FormModel {
+	return {
+		id: 0,
+		name: '',
+		manageId: '',
+		assistantId: '',
+		createTime: '',
+		modifyTime: '',
+		createUid: 0,
+		disabled: '',
+		inputValue: '',
+	};
+}
+
+function handleUpdateFormModel(model: Partial<FormModel>) {
+	Object.assign(formModel, model);
+}
+
+function handleUpdateFormModelByModalType() {
+	const handlers: Record<ModalType, () => void> = {
+		add: () => {
+			const defaultFormModel = createDefaultFormModel();
+			handleUpdateFormModel(defaultFormModel);
+		},
+		edit: () => {
+			if (props.editData) {
+				handleUpdateFormModel(props.editData);
+			}
+		}
+	};
+
+	handlers[props.type]();
+}
+function initYe() {
+	init();
+}
+
+async function handleSubmit() {
+	await formRef.value?.validate();
+
+	addClass(formModel).then(() => {
+		initYe();
+		window.$message?.success('新增成功!');
+	})
+	closeModal();
+}
+
+async function handleupdate() {
+	await formRef.value?.validate();
+	window.$message?.success('修改成功!');
+	// formModel.modifyTime = Date()
+	const timer = dayjs().format('YYYY-MM-DD HH:mm:ss')
+	handleUpdateFormModel({ modifyTime: timer });
+	updateClass(formModel).then(() => {
+		initYe();
+	})
+	closeModal();
+
+}
+watch(
+	() => props.visible,
+	newValue => {
+		if (newValue) {
+			handleUpdateFormModelByModalType();
+		}
+	}
+);
+</script>
+
+<style scoped></style>

src/views/management/attendance/firstTwo/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="h-full overflow-hidden">
-		<n-card title="考勤管理" :bordered="false" class="rounded-16px shadow-sm">
+		<n-card title="课程管理" :bordered="false" class="rounded-16px shadow-sm">
 			<n-space class="pb-12px" justify="space-between">
 				<n-space>
 					<n-button type="primary" @click="handleAddTable">
@@ -12,10 +12,18 @@
 						删除
 					</n-button>
 					<n-input-group>
-						<n-input :style="{ width: '50%' }" placeholder="输入序号查询..." />
-						<n-input :style="{ width: '50%' }" placeholder="输入姓名查询..." />
-						<n-cascader v-model:value="value" placeholder="是否签到" :options="options" :filterable="true"
-							:render-label="renderLabel" @update:value="handleUpdateValue" />
+						<n-input-number :style="{ width: '50%' }" :value="conditionParams.id" @input="event => conditionParams.id = event"
+							placeholder="输入id查询..." />
+						<n-input :style="{ width: '50%' }" :value="conditionParams.name"
+							@input="event => conditionParams.name = event" placeholder="输入名字查询..." />
+						<n-input-number :style="{ width: '50%' }" :value="conditionParams.manageId"
+							@input="event => conditionParams.manageId = event" placeholder="输入班级负责人查询..." />
+						<n-input-number :style="{ width: '50%' }" :value="conditionParams.assistantId"
+							@input="event => conditionParams.disabled = event" placeholder="输入助教老师查询..." />
+						<n-input :style="{ width: '50%' }" :value="conditionParams.createTime"
+							@input="event => conditionParams.createTime = event" placeholder="输入创建时间查询..." />
+						<n-input-number :style="{ width: '50%' }" :value="conditionParams.createUid"
+							@input="event => conditionParams.createUid = event" placeholder="输入创建用户id查询..." />
 						<n-button type="primary" ghost @click="serchCondition()">
 							搜索
 						</n-button>
@@ -23,13 +31,16 @@
 				</n-space>
 			</n-space>
 			<n-scrollbar style="max-height: 100vh" trigger="none">
-				<n-data-table :row-key="row => row.id" :columns="columns" :data="pageDate" :loading="loading"
-					:pagination="pagination" />
-				<!-- <n-pagination v-model:page="page"  :page-count="100" simple /> -->
+				<n-data-table :row-key="row => row.id" v-model:checked-row-keys="deletedID" :columns="columns" :data="pageDate"
+					:loading="loading" />
+				<n-pagination class="n-pagination" @next="(info) => { console.log(info) }" v-model:page="pagination.page"
+					v-model:page-size="pagination.pageSize" :page-count="30" show-size-picker :page-sizes="[10, 20, 30, 40]"
+					:on-update:page="(page: number) => { pagination.page = page; serchCondition(); }"
+					:on-update-page-size="(pageSize: number) => { pagination.pageSize = pageSize; serchCondition(); }" />
+				<table-action-modal @init="init" v-model:visible="visible" @update:checked-row-keys="handleCheck"
+					:type="modalType" :pagination="pagination" :edit-data="(editData as SelectConditionParams)" />
 
-				<!-- <table-action-modal @init="init" v-model:visible="visible" @update:checked-row-keys="handleCheck"
-					:type="modalType" :pagination="pagination" :edit-data="(editData as SelectByConditionParams)" /> -->
-				<div style="width: 100%; height: 300px;"></div>
+				<div style="width: 100%; height: 370px;"></div>
 			</n-scrollbar>
 
 		</n-card>
@@ -38,143 +49,81 @@
 </template>
 
 <script setup lang="tsx">
-import { useBoolean, useLoading } from '@/hooks';
+import { reactive, ref, provide } from 'vue';
 import type { Ref } from 'vue';
-import { reactive, ref } from 'vue';
-import type { SelectByConditionParams } from '~/src/service/api/crouse'
-import { PaginationProps, DataTableColumns, DataTableRowKey, NButton, NPopconfirm, NSpace } from 'naive-ui';
-import { CascaderOption } from 'naive-ui'
-
-function getOptions(depth = 3, iterator = 1, prefix = '') {
-	const length = 2;
-	const options: CascaderOption[] = []
-	for (let i = 1; i <= length; ++i) {
-		if (iterator === 1) {
-			options.push({
-				value: `v-${i}`,
-				label: '未签到',
-				disabled: i % 5 === 0,
-				children: getOptions(depth, iterator + 1, '' + String(i))
-			});
-			if (options[0].value === 'v-1') {
-				options[0].label = '已签到'
-			}
-			console.log(options, 'd11111')
-
-		}
-		else {
-			// if()
-			if (prefix === '1') {
-				options.splice(0)
-				// options[i].disabled = true;
-			} else {
-				options.splice(0)
+import { useBoolean, useLoading } from '@/hooks';
+import { deleteClass, selectCondition } from '~/src/service/api/class'
+import type { SelectConditionParams } from '~/src/service/api/class'
+import TableActionModal from './components/table-action-modal.vue';
+import type { ModalType } from './components/table-action-modal.vue';
+import { PaginationProps, DataTableColumns, NButton, NSpace, DataTableRowKey } from 'naive-ui';
 
-			}
 
-			console.log(options, 'hduasi')
-			options.push({
-				value: `v-${prefix}-1`,
-				label: `早退`,
-				disabled: i % 5 === 0
-			},
-				{
-					value: `v-${prefix}-2`,
-					label: `迟到`,
-					disabled: i % 5 === 0
-				},
-				{
-					value: `v-${prefix}-3`,
-					label: `请假`,
-					disabled: i % 5 === 0
-				},
-				{
-					value: `v-${prefix}-4`,
-					label: `无效`,
-					disabled: i % 5 === 0
-				})
-			console.log(options, '8888888')
-			if (prefix === '1') {
-				for (let i = 0; i < options.length; i++) {
-					options[i].disabled = true;
-				}
-				// options[i].disabled = true;
-			}
+const conditionParams: SelectConditionParams = reactive({
+	id: null,
+	name: null,
+	manageId: null,
+	assistantId: null,
+	createTime: null,
+	modifyTime: null,
+	createUid: null,
+	disabled: null
+});
 
-		}
-	}
-	return options
-}
-const value = ref(null);
-const options = getOptions();
-function handleUpdateValue(...args: unknown[]) {
-	console.log(...args)
-};
-function renderLabel(option: { value?: string | number; label?: string }) {
-	return `${option.label}`
-};
 
-const { loading } = useLoading(false);
-// const { bool: visible, setTrue: openModal } = useBoolean();
+const deletedID = ref([]);
 
+const { loading, startLoading, endLoading } = useLoading(false);
+const { bool: visible, setTrue: openModal } = useBoolean();
+const checkedRowKeysRef = ref<DataTableRowKey[]>([]);
 const pagination: PaginationProps = reactive({
 	page: 1,
 	pageSize: 10,
+	pageCount: 3,
 	showSizePicker: true,
 	showQuickJumper: true,
-	pageSizes: [10, 15, 20, 25, 30],
-	onUpdatePageSize: (pageSize: number) => {
-		pagination.pageSize = pageSize;
-		// serchCondition();
-	},
-	onUpdatePage: (page: number) => {
-		pagination.page = page;
-		// serchCondition();
-	}
+	pageSizes: [10, 15, 20, 25, 30]
 });
-const columns: Ref<DataTableColumns<SelectByConditionParams>> = ref([
+const pageDate = ref([]);
+
+const columns: Ref<DataTableColumns<SelectConditionParams>> = ref([
 	{
 		type: 'selection',
 		align: 'center'
 	},
 	{
 		key: 'id',
-		title: '序号',
+		title: '班级id',
 		align: 'center'
 	},
 	{
 		key: 'name',
-		title: '姓名',
+		title: '班级名称',
 		align: 'center'
 	},
 	{
-		key: 'description',
-		title: '是否签到',
+		key: 'manageId',
+		title: '班级负责人id',
 		align: 'center'
 	},
 	{
-		key: 'categoryId',
-		title: '正常',
+		key: 'assistantId',
+		title: '助教老师id',
 		align: 'center'
 	},
 	{
 		key: 'createTime',
-		title: '迟到',
+		title: '创建时间',
 		align: 'center'
 	},
 	{
 		key: 'modifyTime',
-		title: '早退',
-		align: 'center'
-	},
-	{
-		key: 'createUid',
-		title: '请假',
+		title: '修改时间',
 		align: 'center'
 	},
 	{
 		key: 'disabled',
-		title: '无效',
+		title: '状态',
 		align: 'center'
 	},
 	{
@@ -187,16 +136,68 @@ const columns: Ref<DataTableColumns<SelectByConditionParams>> = ref([
 					<NButton size={'small'} onClick={() => handleEditTable(row)}>
 						编辑
 					</NButton>
-					<NPopconfirm onPositiveClick={() => handleDeleteTable(row.id.toString())}>
-						{{
-							default: () => '确认删除',
-							trigger: () => <NButton size={'small'}>删除</NButton>
-						}}
-					</NPopconfirm>
+					<NButton size={'small'} onClick={() => handleEditTable(row)}>
+						班级详情
+					</NButton>
 				</NSpace>
 			);
 		}
 	}
-]) as Ref<DataTableColumns<SelectByConditionParams>>;
+]) as Ref<DataTableColumns<SelectConditionParams>>;
+
+function handleCheck(rowKeys: DataTableRowKey[]) {
+	checkedRowKeysRef.value = rowKeys;
+
+}
+
+const editData = ref<SelectConditionParams | null>(null);
+function setEditData(data: SelectConditionParams | null) {
+	editData.value = data;
+}
+function handleEditTable(findItem: SelectConditionParams) {
+	if (findItem) {
+		setEditData(findItem);
+	}
+	setModalType('edit');
+	openModal();
+}
+function handleAddTable() {
+	openModal();
+	setModalType('add');
+	init();
+}
+const modalType = ref<ModalType>('add' || 'edit');
+function setModalType(type: ModalType) {
+	modalType.value = type;
+}
+const s = ref([]);
+// 删除
+function deleteSubjectsList(){
+	const difference = deletedID.value.filter(item => !s.value.includes(item));
+	s.value = deletedID.value
+
+	for (let i = 0; i < difference.length; i++) {
+		deleteClass(Number(difference[i]));
+	}
+	init();
+}
+function serchCondition() {
+	selectCondition(pagination.page, pagination.pageSize, conditionParams).then(r => {
+		pageDate.value = r.data as [];
+	}).catch(() => {
+		console.log('jdias')
+	})
+}
+function init() {
+	startLoading();
+	setTimeout(() => {
+		serchCondition();
+	}, 1000)
+	endLoading();
+}
+
+// 初始化
+init();
+provide('init', init);
 </script>
-<style></style>
+<style scoped></style>

src/views/management/crouse/component/table-action-modal.vue

@@ -14,12 +14,6 @@
 				<n-form-item-grid-item :span="12" label="学科分类" path="categoryId">
 					<n-input v-model:value="formModel.categoryId" />
 				</n-form-item-grid-item>
-				<!-- <n-form-item-grid-item :span="12" label="创建时间" path="createTime">
-          <n-input v-model:value="formModel.createTime" :options="userStatusOptions"/>
-        </n-form-item-grid-item> -->
-				<!-- <n-form-item-grid-item :span="12" label="修改时间" path="modifyTime">
-          <n-input v-model:value="formModel.modifyTime" :options="userStatusOptions"/>
-        </n-form-item-grid-item> -->
 				<n-form-item-grid-item :span="12" label="创建用户ID" path="createUid">
 					<n-input-number v-model:value="formModel.createUid" />
 				</n-form-item-grid-item>

src/views/management/crouse/index.vue

@@ -32,8 +32,11 @@
 			</n-space>
 			<n-scrollbar style="max-height: 100vh" trigger="none">
 				<n-data-table :row-key="row => row.id" v-model:checked-row-keys="deletedID" :columns="columns" :data="pageDate"
-					:loading="loading" :pagination="pagination" />
-				<!-- <n-pagination v-model:page="page"  :page-count="100" simple /> -->
+					:loading="loading" />
+				<n-pagination class="n-pagination" @next="(info) => { console.log(info) }" v-model:page="pagination.page"
+					v-model:page-size="pagination.pageSize" :page-count="30" show-size-picker :page-sizes="[10, 20, 30, 40]"
+					:on-update:page="(page: number) => { pagination.page = page; serchCondition(); }"
+					:on-update-page-size="(pageSize: number) => { pagination.pageSize = pageSize; serchCondition(); }" />
 
 				<table-action-modal @init="init" v-model:visible="visible" @update:checked-row-keys="handleCheck"
 					:type="modalType" :pagination="pagination" :edit-data="(editData as SelectByConditionParams)" />
@@ -75,20 +78,11 @@ const { bool: visible, setTrue: openModal } = useBoolean();
 const pagination: PaginationProps = reactive({
 	page: 1,
 	pageSize: 10,
+	pageCount: 3,
 	showSizePicker: true,
 	showQuickJumper: true,
-	pageSizes: [10, 15, 20, 25, 30],
-	onUpdatePageSize: (pageSize: number) => {
-		pagination.pageSize = pageSize;
-		serchCondition();
-	},
-	onUpdatePage: (page: number) => {
-		pagination.page = page;
-		serchCondition();
-	}
+	pageSizes: [10, 15, 20, 25, 30]
 });
-// const page = ref(0)
-// const pageSize = ref(0)
 const checkedRowKeysRef = ref<DataTableRowKey[]>([]);
 const pageDate = ref([]);