删除操作 +更新编辑操作+修改时间更新

src/service/api/sort.ts

@@ -0,0 +1,109 @@
+import { request } from '../request';
+
+
+// 查询全部课程类别
+// 响应接口
+export interface SelectAll_1Res {
+  status: boolean;
+  msg: string;
+  data: Record<string, unknown>;
+}
+
+/**
+ * 查询全部课程类别
+ * @returns
+ */
+export function selectAll_1() {
+  return request.get(`/selectAll`);
+}
+
+
+// 添加课程类别
+// 参数接口
+export interface AddEasEduCategoryParams {
+  id?: number|null;
+  name?: string|null;
+  description?: string|null;
+  createTime?: string;
+  modifyTime?: string;
+  createUid?: number|null;
+  disabled?: string|null;
+}
+
+// 响应接口
+export interface AddEasEduCategoryRes {
+  status: boolean;
+  msg: string;
+  data: Record<string, unknown>;
+}
+
+/**
+ * 添加课程类别
+ * @param {object} params EasEduCategory
+ * @param {number} params.id
+ * @param {string} params.name 学科名称
+ * @param {string} params.description 学科描述
+ * @param {object} params.createTime 创建时间
+ * @param {object} params.modifyTime 修改时间
+ * @param {number} params.createUid 创建用户ID
+ * @param {string} params.disabled 状态
+ * @returns
+ */
+export function addEasEduCategory(params: AddEasEduCategoryParams){
+  return request.post(`/addEasEduCategory`, params);
+}
+
+
+// 根据id删除课程
+// 响应接口
+export interface DeleteByIdRes {
+  status: boolean;
+  msg: string;
+  data: string;
+}
+
+/**
+ * 根据Id删除课程类别
+ * @param {string} id
+  * @returns
+ */
+export function deleteById(id: number){
+  return request.delete(`/deleteById/${id}`);
+}
+
+
+
+// 课程类别更新
+// 参数接口
+export interface UpdateEasEduCategoryParams {
+  id?: number|null;
+  name?: string|null;
+  description?: string|null;
+  createTime?:  string;
+  modifyTime?: string;
+  createUid?: number|null;
+  disabled?: string|null;
+}
+
+// 响应接口
+export interface UpdateEasEduCategoryRes {
+  status: boolean;
+  msg: string;
+  data: Record<string, unknown>;
+}
+
+/**
+ * 课程类别更新
+ * @param {object} params EasEduCategory
+ * @param {number} params.id
+ * @param {string} params.name 学科名称
+ * @param {string} params.description 学科描述
+ * @param {object} params.createTime 创建时间
+ * @param {object} params.modifyTime 修改时间
+ * @param {number} params.createUid 创建用户ID
+ * @param {string} params.disabled 状态
+ * @returns
+ */
+export function updateEasEduCategory(params: UpdateEasEduCategoryParams) {
+  return request.post(`/updateEasEduCategory`, params);
+}

src/service/api/user.ts

@@ -114,75 +114,3 @@ export function query_1(pageNum: number, pageSize: number, params: Query_1Params
 }
 
 
-
-// 查询
-
-// 响应接口
-export interface SelectAll_1Res {
-  status: boolean;
-  msg: string;
-  data: Record<string, unknown>;
-}
-
-/**
- * 查询全部课程类别
- * @returns
- */
-export function selectAll_1() {
-  return request.get(`/selectAll`);
-}
-
-
-// 添加
-
-// 参数接口
-export interface AddEasEduCategoryParams {
-  id?: number|null;
-  name?: string|null;
-  description?: string|null;
-  createTime?: Record<string, unknown>;
-  modifyTime?: Record<string, unknown>;
-  createUid?: number|null;
-  disabled?: string|null;
-}
-
-// 响应接口
-export interface AddEasEduCategoryRes {
-  status: boolean;
-  msg: string;
-  data: Record<string, unknown>;
-}
-
-/**
- * 添加课程类别
- * @param {object} params EasEduCategory
- * @param {number} params.id
- * @param {string} params.name 学科名称
- * @param {string} params.description 学科描述
- * @param {object} params.createTime 创建时间
- * @param {object} params.modifyTime 修改时间
- * @param {number} params.createUid 创建用户ID
- * @param {string} params.disabled 状态
- * @returns
- */
-export function addEasEduCategory(params: AddEasEduCategoryParams){
-  return request.post(`/addEasEduCategory`, params);
-}
-
-
-// 根据id删除课程
-// 响应接口
-export interface DeleteByIdRes {
-  status: boolean;
-  msg: string;
-  data: string;
-}
-
-/**
- * 根据Id删除课程类别
- * @param {string} id
-  * @returns
- */
-export function deleteById(id: number){
-  return request.delete(`/deleteById/${id}`);
-}

src/typings/api.d.ts

@@ -25,14 +25,14 @@ declare namespace ApiRoute {
 declare namespace ApiUserManagement {
   interface User {
     /** 用户id */
-    id: number|null;
+    id: number | null;
     /** 用户名 */
     name: string | null;
     /** 用户年龄 */
     description: string | null;
-    createTime: string | null;
+    createTime: string;
     /** 用户手机号码 */
-    modifyTime: string|null;
+    modifyTime: string;
     /** 用户邮箱 */
     createUid: number | null;
     /**

src/typings/business.d.ts

@@ -24,7 +24,7 @@ declare namespace UserManagement {
     /** 序号 */
     index: number;
     /** 表格的key（id） */
-    key: string;
+    key: number;
   }
 
   /**

src/views/management/sort/components/column-search.vue

@@ -0,0 +1,71 @@
+<template>
+  <n-popover placement="bottom" trigger="click">
+    <template #trigger>
+      <n-button size="small" type="primary">
+        <icon-simple-line-icons:magnifier class="mr-4px text-16px" />
+        查询
+      </n-button>
+    </template>
+    <div class="w-180px">
+      <!-- <vue-draggable v-model="list" item-key="key">
+        <template #item="{ element }">
+          <div v-if="element.key" class="flex-y-center h-36px px-12px hover:bg-primary_active">
+            <icon-mdi-drag class="mr-8px text-20px cursor-move" />
+            <n-checkbox v-model:checked="element.checked">
+              {{ element.title }}
+            </n-checkbox>
+          </div>
+        </template>
+      </vue-draggable> -->
+    </div>
+  </n-popover>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import type { DataTableColumn } from 'naive-ui';
+// import VueDraggable from 'vuedraggable';
+
+
+defineOptions({ name: 'ColumnSearch' });
+type Column = DataTableColumn<UserManagement.User>;
+
+interface Props {
+  columns: Column[];
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'update:columns', columns: Column[]): void;
+}
+
+const emit = defineEmits<Emits>();
+
+type List = Column & { checked?: boolean };
+
+const list = ref(initList());
+
+function initList(): List[] {
+  return props.columns.map(item => ({ ...item, checked: true }));
+}
+
+watch(
+  list,
+  newValue => {
+    const newColumns = newValue.filter(item => item.checked);
+
+    const columns: Column[] = newColumns.map(item => {
+      const column = { ...item };
+      delete column.checked;
+
+      return column;
+    }) as Column[];
+
+    emit('update:columns', columns);
+  },
+  { deep: true }
+);
+</script>
+
+<style scoped></style>

src/views/management/sort/components/table-action-add.vue

@@ -18,9 +18,8 @@
 						<n-radio v-for="item in genderOptions" :key="item.value" :value="item.value">{{ item.label }}</n-radio>
 					</n-radio-group> -->
 				</n-form-item-grid-item>
-
 				<!-- <n-form-item-grid-item :span="12" label="修改时间" path="email">
-					<n-input />
+					<n-date-picker v-show="props.type==='edit'" v-model:value="formModel.modifyTime" type="datetime" clearable />
 				</n-form-item-grid-item> -->
 				<n-form-item-grid-item :span="12" label="创建用户ID" path="createUid">
 					<n-input-number v-model:value="formModel.createUid" />
@@ -42,11 +41,11 @@ import { ref, computed, reactive, watch } from 'vue';
 import type { FormInst, FormItemRule } from 'naive-ui';
 import { userStatusOptions } from '@/constants';
 import {createRequiredFormRule } from '@/utils';
-import { addEasEduCategory, AddEasEduCategoryParams } from '~/src/service/api/user';
+import dayjs from 'dayjs';
+import { addEasEduCategory, AddEasEduCategoryParams,updateEasEduCategory,UpdateEasEduCategoryParams } from '~/src/service/api/sort';
 import {getTableData} from '../index.vue'
 // const timestamp = ref(1483135260000)
 
-
 export interface Props {
 	/** 弹窗可见性 */
 	visible: boolean;
@@ -54,7 +53,6 @@ export interface Props {
 	 * 弹窗类型
 	 * add: 新增
 	 * edit: 编辑
-	 * delete : 删除
 	 */
 	type?: 'add' | 'edit' ;
 	/** 编辑的表格行数据 */
@@ -66,7 +64,7 @@ export type ModalType = NonNullable<Props['type']>;
 defineOptions({ name: 'TableActionAdd' });
 
 const props = withDefaults(defineProps<Props>(), {
-	type: 'add',
+	type: 'add'||'edit',
 	editData: null,
 });
 
@@ -84,6 +82,7 @@ const modalVisible = computed({
 		emit('update:visible', visible);
 	}
 });
+
 const closeModal = () => {
 	modalVisible.value = false;
 };
@@ -93,39 +92,46 @@ const title = computed(() => {
 		add: '添加用户',
 		edit: '编辑用户',
 	};
+	// console.log(titles[props.type]);
 	return titles[props.type];
+
 });
 
 const formRef = ref<HTMLElement & FormInst>();
 
-type FormModel = Pick<UserManagement.User,  | 'name' | 'description' |  'createUid' | 'disabled'>;
+// type FormModel = Pick<UserManagement.User,  'name' | 'description' |  'createUid' | 'disabled' >;
+
+interface FormModel extends Pick<UserManagement.User, 'id' |'name' | 'description' | 'createUid' | 'disabled'|'createTime'> {
+  modifyTime: string;
+}
 
 const formModel = reactive<FormModel>(createDefaultFormModel());
 
 const rules: Record<keyof FormModel, FormItemRule | FormItemRule[]> = {
-	// id: createRequiredFormRule('请输入用户名'),
+	id: createRequiredFormRule('请输入用户名'),
 	name: createRequiredFormRule('请输入学科名称'),
 	description: createRequiredFormRule('请进行部门描述'),
-	// createTime:formRules.createTime,
+	createTime:createRequiredFormRule('请输入创建时间'),
+	modifyTime:createRequiredFormRule('请输入修改时间'),
 	createUid: createRequiredFormRule('请输入创建用户ID'),
 	disabled: createRequiredFormRule('请选择用户状态')
-
 };
-
+// 'createTime' |'modifyTime'|
 function createDefaultFormModel(): FormModel {
 	return {
-		// id: null,
+		id: null,
 		name: '',
 		description: '',
-		// createTime: '',
+		createTime: '',
+		modifyTime:'',
 		createUid:null,
 		disabled: null,
 	};
 }
 
-
 function handleUpdateFormModel(model: Partial<FormModel>) {
 	Object.assign(formModel, model);
+	// console.log(	Object.assign(formModel, model));
 }
 
 function handleUpdateFormModelByModalType() {
@@ -136,6 +142,7 @@ function handleUpdateFormModelByModalType() {
 		},
 		edit: () => {
 			if (props.editData) {
+				console.log(props.editData);
 				handleUpdateFormModel(props.editData);
 			}
 		},
@@ -143,35 +150,58 @@ function handleUpdateFormModelByModalType() {
 
 	handlers[props.type]();
 }
-
-// async function handleSubmit() {
-// 	await formRef.value?.validate();
-// 	window.$message?.success('新增成功!');
-// 	closeModal();
-// }
-
-
-async function handleSubmit() {
-  await formRef.value?.validate();
-  const params: AddEasEduCategoryParams = {
-    // id: formModel.id,
-    name: formModel.name,
-    description: formModel.description,
-    // createTime: formModel.createTime,
-    createUid: formModel.createUid,
-    disabled: formModel.disabled
-  };
-  addEasEduCategory(params)
-    .then(res => {
-      window.$message?.success('新增成功!');
-      closeModal();
-			getTableData();
-    })
-    .catch(error => {
-      console.error(error);
-      window.$message?.error('新增失败!');
-    });
-
+console.log(props.type);
+function handleSubmit() {
+  formRef.value?.validate();
+
+  if (props.type === 'add') {
+    const params: AddEasEduCategoryParams = {
+      // id: formModel.id,
+      name: formModel.name,
+      description: formModel.description,
+      // createTime: formModel.createTime,
+      createUid: formModel.createUid,
+      disabled: formModel.disabled
+    };
+
+    // 调用新增接口
+    addEasEduCategory(params)
+      .then(res => {
+        console.log(res);
+        window.$message?.success('新增成功!');
+        closeModal();
+        getTableData();
+      })
+      .catch(error => {
+        console.error(error);
+        window.$message?.error('新增失败!');
+      });
+  } else {
+	   const currentTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
+ 		 handleUpdateFormModel({ modifyTime: currentTime });
+     const params: UpdateEasEduCategoryParams = {
+				id: props.editData?.id, // 编辑数据的id
+				name: formModel.name,
+				description: formModel.description,
+				createTime: formModel.createTime,
+				modifyTime: formModel.modifyTime,
+				createUid: formModel.createUid,
+				disabled: formModel.disabled
+     };
+
+    // 调用更新接口
+    updateEasEduCategory(params)
+      .then(res => {
+        console.log(res);
+        window.$message?.success('更新成功!');
+        closeModal();
+        getTableData();
+      })
+      .catch(error => {
+        console.error(error);
+        window.$message?.error('更新失败!');
+      });
+  }
 }
 
 watch(

src/views/management/sort/index.vue

@@ -7,43 +7,43 @@
 						<icon-ic-round-plus class="mr-4px text-20px" />
 						新增
 					</n-button>
-					<n-button type="error" @click="deleteTableData" 	@update:checked-row-keys="handleCheck">
+					<n-button type="error" @click="deleteTableData" @update:checked-row-keys="handleCheck">
 						<icon-ic-round-delete class="mr-4px text-20px" />
 						删除
 					</n-button>
-					<!-- <n-button type="success">
+					<n-button type="success">
             <icon-uil:export class="mr-4px text-20px" />
             导出Excel
-          </n-button> -->
+          </n-button>
 				</n-space>
 				<n-space align="center" :size="18">
 					<n-button size="small" type="primary" @click="getTableData">
 						<icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': loading }" />
 						刷新表格
 					</n-button>
-					<column-setting v-model:columns="columns" />
+					<column-search v-model:columns="columns" />
 				</n-space>
 			</n-space>
 			<n-data-table :columns="columns" :data="tableData" :loading="loading" :pagination="pagination" :row-key="rowKey"
 				@update:checked-row-keys="handleCheck" />
-
-			<table-action-add v-model:visible="visible" :type="modalType" />
+			<table-action-add v-model:visible="visible" :type="modalType" :edit-data="editData"/>
 		</n-card>
 	</div>
 </template>
 
-<script lang="ts" >
-import { defineComponent } from 'vue'
-import type { DataTableRowKey } from 'naive-ui'
-import { ref } from 'vue';
+<script lang="tsx" >
+import { defineComponent, ref } from 'vue'
+import { NButton, NSpace,NTag ,NPopconfirm} from 'naive-ui';
+import type { DataTableColumns, PaginationProps } from 'naive-ui';
 import { useBoolean, useLoading } from '@/hooks';
+import type { DataTableRowKey } from 'naive-ui'
 import TableActionAdd from './components/table-action-add.vue'
 import type { ModalType } from './components/table-action-add.vue';
-import { NButton, NSpace } from 'naive-ui';
-import type { DataTableColumns, PaginationProps } from 'naive-ui';
-// import { userStatusLabels } from '@/constants';
-import { selectAll_1,deleteById } from '~/src/service/api/user';
-import type { AddEasEduCategoryParams } from '~/src/service/api/user';
+// import {  userStatusLabels } from '@/constants';
+import { userStatusLabels } from '@/constants';
+import { selectAll_1, deleteById } from '~/src/service/api/sort';
+import type { AddEasEduCategoryParams } from '~/src/service/api/sort';
+import ColumnSearch from './components/column-search.vue';
 type RowData = {
 	key: number
 	id: number
@@ -91,63 +91,33 @@ export async function getTableData() {
 const checkedRowKeysRef = ref<DataTableRowKey[]>([])
 
 async function deleteTableData() {
-  const ids = checkedRowKeysRef.value;
+	const ids = checkedRowKeysRef.value;
 	// console.log(ids);
-  if (ids.length !== 0) {
+	if (ids.length !== 0) {
 		console.log(ids);
-    for (let id of ids) {
-      // 调用删除接口
+		for (let id of ids) {
+			// 调用删除接口
 			console.log(id);
-      await deleteById(id as number)
-        .then((res) => {
-          const deleteRes = res.data;
-					if(!deleteRes)
-            console.log(`成功删除课程，ID: ${id}`);
-            window.$message?.success('删除成功!');
-        })
-        .catch((error) => {
-          // 错误处理
-          console.error(`删除课程发生错误，ID: ${id}`, error);
-          window.$message?.error('删除失败!');
-        });
-    }
-    getTableData(); // 删除完成后刷新表格数据
-  } else {
-    // 没有选择任何行时的操作
-    console.warn('未选择要删除的行');
-  }
-}
-
-
-
-
-const modalType = ref<ModalType>('add');
-
-function setModalType(type: ModalType) {
-	modalType.value = type;
-}
-
-const addData = ref<AddEasEduCategoryParams[]>([]);
-function addTableData() {
-	openModal();
-	getTableData(); // 删除完成后刷新表格数据
-	setModalType('add');
-	// const params: AddEasEduCategoryParams = {};
-	// addEasEduCategory(params).then(res => {
-	// 	console.log(res);
-	// 	addData.value = res.data as [];
-	// });
-
-}
-
-
-function init() {
-	getTableData();
+			await deleteById(id as number)
+				.then((res) => {
+					const deleteRes = res.data;
+					if (!deleteRes)
+						console.log(`成功删除课程，ID: ${id}`);
+					window.$message?.success('删除成功!');
+				})
+				.catch((error) => {
+					// 错误处理
+					console.error(`删除课程发生错误，ID: ${id}`, error);
+					window.$message?.error('删除失败!');
+				});
+		}
+		getTableData(); // 删除完成后刷新表格数据
+	} else {
+		// 没有选择任何行时的操作
+		console.warn('未选择要删除的行');
+	}
 }
 
-// 初始化
-init();
-
 const createColumns = (): DataTableColumns<UserManagement.User> => [
 	{
 		type: 'selection',
@@ -187,40 +157,114 @@ const createColumns = (): DataTableColumns<UserManagement.User> => [
 		key: 'disabled',
 		title: '状态',
 		align: 'center',
-		// render: row => {
-		// 	if (row.disabled) {
-		// 		const tagTypes: Record<UserManagement.UserStatusKey, NaiveUI.ThemeColor> = {
-		// 			'Y': 'success',
-		// 			'N': 'error',
-		// 		};
-		// 		return <NTag type={tagTypes[row.disabled]}>{userStatusLabels[row.disabled]}</NTag>;
-    //   }
-		// 	return
-		// }
+
+		render: row => {
+			if (row.disabled) {
+				const tagTypes: Record<UserManagement.UserStatusKey, NaiveUI.ThemeColor> = {
+					'Y': 'success',
+					'N': 'error',
+				};
+				return <NTag type={tagTypes[row.disabled]}>{userStatusLabels[row.disabled]}</NTag>;
+		  }
+			return
+		}
 	},
+	{
+		key: 'actions',
+		title: '操作',
+		align: 'center',
+		render: row => {
+			return (
+				<NSpace justify={'center'}>
+					<NButton size={'small'}  onClick={() => handleEditTable(row.id)} >
+						编辑
+					</NButton>
+					<NPopconfirm onPositiveClick={() => handleDeleteTable(row.id)}>
+						{{
+							default: () => '确认删除',
+							trigger: () => <NButton size={'small'}>删除</NButton>
+						}}
+					</NPopconfirm>
+				</NSpace>
+			);
+		}
 
+	},
 ]
 
+const modalType = ref<ModalType>('add'||'edit');
+
+function setModalType(type: ModalType) {
+	modalType.value = type;
+	// console.log(modalType.value);
+}
+
+const addData = ref<AddEasEduCategoryParams[]>([]);
+function addTableData() {
+	openModal();
+	setModalType('add');
+	getTableData(); // 删除完成后刷新表格数据
+	// const params: AddEasEduCategoryParams = {};
+	// addEasEduCategory(params).then(res => {
+	// 	console.log(res);
+	// 	addData.value = res.data as [];
+	// });
+}
+
+const editData = ref<UserManagement.User | null>(null);
+function setEditData(data: UserManagement.User | null) {
+	editData.value = data;
+}
+console.log(tableData.value);
+function handleEditTable(rowId: number|null ) {
+	const findItem = tableData.value.find(item => item.id === rowId);
+	setModalType('edit');
+	openModal();
+	if (findItem) {
+		setEditData(findItem);
+	}
+	// console.log(findItem);
+	getTableData(); // 编辑完成后刷新表格数据
+}
+
+ function handleDeleteTable(rowId: number|null ) {
+	const findItem = tableData.value.find(item => item.id === rowId);
+	if (findItem) {
+		deleteById(findItem.id).then((r)=>{
+				console.log(r);
+				getTableData(); // 编辑完成后刷新表格数据
+		})
+	}
+}
+
+function init() {
+	getTableData();
+}
+
+// 初始化
+init();
 
 export default defineComponent({
 	components: {
 		TableActionAdd,
+		ColumnSearch
 	},
 	setup() {
 		// const checkedRowKeysRef = ref<DataTableRowKey[]>([])
-
 		return {
 			tableData,
-			id:1,
 			addData,
 			loading,
 			modalType,
+			setEditData,
+			editData,
 			getTableData,
 			addTableData,
 			setModalType,
 			deleteTableData,
+			handleEditTable,
 			visible,
-			columns: createColumns(),
+			columns:createColumns(),
 			checkedRowKeys: checkedRowKeysRef,
 			pagination,
 			rowKey: (row: RowData) => row.id,

src/views/management/sort/indexsss.vue

@@ -0,0 +1,251 @@
+<template>
+	<div class="h-full overflow-hidden">
+		<n-card title="课程分类" :bordered="false" class="rounded-16px shadow-sm">
+			<n-space class="pb-12px" justify="space-between">
+				<n-space>
+					<n-button type="primary" :data="addData" @click="addTableData">
+						<icon-ic-round-plus class="mr-4px text-20px" />
+						新增
+					</n-button>
+					<n-button type="error" @click="deleteTableData" @update:checked-row-keys="handleCheck">
+						<icon-ic-round-delete class="mr-4px text-20px" />
+						删除
+					</n-button>
+					<!-- <n-button type="success">
+            <icon-uil:export class="mr-4px text-20px" />
+            导出Excel
+          </n-button> -->
+				</n-space>
+				<n-space align="center" :size="18">
+					<n-button size="small" type="primary" @click="getTableData">
+						<icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': loading }" />
+						刷新表格
+					</n-button>
+					<column-setting v-model:columns="columns" />
+				</n-space>
+			</n-space>
+			<n-data-table :columns="columns" :data="tableData" :loading="loading" :pagination="pagination" :row-key="rowKey"
+				@update:checked-row-keys="handleCheck" />
+			<table-action-add v-model:visible="visible" :type="modalType" />
+		</n-card>
+	</div>
+</template>
+
+<script lang="tsx" >
+import { defineComponent, ref } from 'vue'
+import { NButton, NSpace,NTag ,NPopconfirm} from 'naive-ui';
+import type { DataTableColumns, PaginationProps } from 'naive-ui';
+import { useBoolean, useLoading } from '@/hooks';
+import type { DataTableRowKey } from 'naive-ui'
+import TableActionAdd from './components/table-action-add.vue'
+import type { ModalType } from './components/table-action-add.vue';
+// import {  userStatusLabels } from '@/constants';
+import { userStatusLabels } from '@/constants';
+import { selectAll_1, deleteById } from '~/src/service/api/sort';
+import type { AddEasEduCategoryParams } from '~/src/service/api/sort';
+
+type RowData = {
+	key: number
+	id: number
+	name: string
+	description: string
+	createTime: string
+	modifyTime: string
+	createUid: number
+	disabled: string
+}
+const { loading, startLoading, endLoading } = useLoading(false);
+const { bool: visible, setTrue: openModal } = useBoolean();
+
+const tableData = ref<any[]>([]);
+
+// const checkedRowKeysRef = ref<DataTableRowKey[]>([])
+const pagination: PaginationProps = ref({
+	page: 1,
+	pageSize: 10,
+	showSizePicker: true,
+	pageSizes: [10, 20, 50],
+	onChange: (page: number) => {
+		// 处理页码变化
+		pagination.page = page;
+	},
+	onUpdatePageSize: (pageSize: number) => {
+		// 处理每页显示数量变化
+		pagination.pageSize = pageSize;
+		pagination.page = 1;
+	}
+}).value;
+
+export async function getTableData() {
+	startLoading();
+	selectAll_1().then(res => {
+		setTimeout(() => {
+			// console.log(res);
+			tableData.value = res.data as [];
+			endLoading();
+		}, 1000);
+	});
+}
+
+
+const checkedRowKeysRef = ref<DataTableRowKey[]>([])
+
+async function deleteTableData() {
+	const ids = checkedRowKeysRef.value;
+	// console.log(ids);
+	if (ids.length !== 0) {
+		console.log(ids);
+		for (let id of ids) {
+			// 调用删除接口
+			console.log(id);
+			await deleteById(id as number)
+				.then((res) => {
+					const deleteRes = res.data;
+					if (!deleteRes)
+						console.log(`成功删除课程，ID: ${id}`);
+					window.$message?.success('删除成功!');
+				})
+				.catch((error) => {
+					// 错误处理
+					console.error(`删除课程发生错误，ID: ${id}`, error);
+					window.$message?.error('删除失败!');
+				});
+		}
+		getTableData(); // 删除完成后刷新表格数据
+	} else {
+		// 没有选择任何行时的操作
+		console.warn('未选择要删除的行');
+	}
+
+}
+
+
+const modalType = ref<ModalType>('add');
+
+function setModalType(type: ModalType) {
+	modalType.value = type;
+}
+
+const addData = ref<AddEasEduCategoryParams[]>([]);
+function addTableData() {
+	openModal();
+	getTableData(); // 删除完成后刷新表格数据
+	setModalType('add');
+	// const params: AddEasEduCategoryParams = {};
+	// addEasEduCategory(params).then(res => {
+	// 	console.log(res);
+	// 	addData.value = res.data as [];
+	// });
+
+}
+
+function init() {
+	getTableData();
+}
+
+// 初始化
+init();
+
+const createColumns = (): DataTableColumns<UserManagement.User> => [
+	{
+		type: 'selection',
+		align: 'center',
+	},
+	{
+		key: 'id',
+		title: "ID",
+		align: 'center'
+	},
+	{
+		key: 'name',
+		title: '学科名称',
+		align: 'center'
+	},
+	{
+		key: 'description',
+		title: '学科描述',
+		align: 'center'
+	},
+	{
+		key: 'createTime',
+		title: '创建时间',
+		align: 'center'
+	},
+	{
+		key: 'modifyTime',
+		title: '修改时间',
+		align: 'center'
+	},
+	{
+		key: 'createUid',
+		title: '创建用户ID',
+		align: 'center'
+	},
+	{
+		key: 'disabled',
+		title: '状态',
+		align: 'center',
+
+		render: row => {
+			if (row.disabled) {
+				const tagTypes: Record<UserManagement.UserStatusKey, NaiveUI.ThemeColor> = {
+					'Y': 'success',
+					'N': 'error',
+				};
+				return <NTag type={tagTypes[row.disabled]}>{userStatusLabels[row.disabled]}</NTag>;
+		  }
+			return
+		}
+	},
+	{
+		key: 'actions',
+		title: '操作',
+		align: 'center',
+		render: row => {
+			return (
+				<NSpace justify={'center'}>
+					<NButton size={'small'} >
+						编辑
+					</NButton>
+					<NPopconfirm >
+						{{
+							default: () => '确认删除',
+							trigger: () => <NButton size={'small'}>删除</NButton>
+						}}
+					</NPopconfirm>
+				</NSpace>
+			);
+		}
+
+	},
+]
+
+export default defineComponent({
+	components: {
+		TableActionAdd,
+	},
+	setup() {
+		const checkedRowKeysRef = ref<DataTableRowKey[]>([])
+
+		return {
+			tableData,
+			addData,
+			loading,
+			modalType,
+			getTableData,
+			addTableData,
+			setModalType,
+			deleteTableData,
+			visible,
+			columns:createColumns(),
+			checkedRowKeys: checkedRowKeysRef,
+			pagination,
+			rowKey: (row: RowData) => row.id,
+			handleCheck(rowKeys: DataTableRowKey[]) {
+				checkedRowKeysRef.value = rowKeys
+				console.log(checkedRowKeysRef.value);
+			}
+		}
+	}
+})
+</script>

src/views/management/user/components/table-action-modal.vue

@@ -1,149 +1,186 @@
 <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="userName">
-          <n-input v-model:value="formModel.userName" />
-        </n-form-item-grid-item>
-        <n-form-item-grid-item :span="12" label="年龄" path="age">
-          <n-input-number v-model:value="formModel.age" clearable />
-        </n-form-item-grid-item>
-        <n-form-item-grid-item :span="12" label="性别" path="gender">
-          <n-radio-group v-model:value="formModel.gender">
-            <n-radio v-for="item in genderOptions" :key="item.value" :value="item.value">{{ item.label }}</n-radio>
-          </n-radio-group>
-        </n-form-item-grid-item>
-        <n-form-item-grid-item :span="12" label="手机号" path="phone">
-          <n-input v-model:value="formModel.phone" />
-        </n-form-item-grid-item>
-        <n-form-item-grid-item :span="12" label="邮箱" path="email">
-          <n-input v-model:value="formModel.email" />
-        </n-form-item-grid-item>
-        <n-form-item-grid-item :span="12" label="状态" path="userStatus">
-          <n-select v-model:value="formModel.userStatus" :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" @click="handleSubmit">确定</n-button>
-      </n-space>
-    </n-form>
-  </n-modal>
+	<n-modal v-model:show="modalVisible" preset="card" :title="title" class="w-700px">
+		<n-form ref="formRef" label-placement="left" :label-width="100" :model="formModel" :rules="rules">
+			<n-grid :cols="24" :x-gap="18">
+				<!-- <n-form-item-grid-item :span="12" label="ID" path="id">
+					<n-input-number v-model:value="formModel.id" />
+				</n-form-item-grid-item> -->
+				<n-form-item-grid-item :span="12" label="学科名称" path="name">
+					<n-input v-model:value="formModel.name" clearable />
+				</n-form-item-grid-item>
+				<!-- <n-form-item-grid-item :span="12" label="创建时间" path="createTime">
+					  <n-date-picker v-model:value="timestamp" type="datetime" clearable />
+					<n-input v-model:value="formModel.createTime" />
+				</n-form-item-grid-item> -->
+				<n-form-item-grid-item :span="12" label="学科描述" path="description">
+					<n-input v-model:value="formModel.description" clearable />
+					<!-- <n-radio-group v-model:value="formModel.description">
+						<n-radio v-for="item in genderOptions" :key="item.value" :value="item.value">{{ item.label }}</n-radio>
+					</n-radio-group> -->
+				</n-form-item-grid-item>
+
+				<!-- <n-form-item-grid-item :span="12" label="修改时间" path="email">
+					<n-input />
+				</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-select 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" @click="handleSubmit">确定</n-button>
+			</n-space>
+		</n-form>
+	</n-modal>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, reactive, watch } from 'vue';
 import type { FormInst, FormItemRule } from 'naive-ui';
-import { genderOptions, userStatusOptions } from '@/constants';
-import { formRules, createRequiredFormRule } from '@/utils';
+import { userStatusOptions } from '@/constants';
+import {createRequiredFormRule } from '@/utils';
+import { addEasEduCategory, AddEasEduCategoryParams } from '~/src/service/api/sort';
+// import {getTableData} from '../index.vue'
+// const timestamp = ref(1483135260000)
+
 
 export interface Props {
-  /** 弹窗可见性 */
-  visible: boolean;
-  /**
-   * 弹窗类型
-   * add: 新增
-   * edit: 编辑
-   */
-  type?: 'add' | 'edit';
-  /** 编辑的表格行数据 */
-  editData?: UserManagement.User | null;
+	/** 弹窗可见性 */
+	visible: boolean;
+	/**
+	 * 弹窗类型
+	 * add: 新增
+	 * edit: 编辑
+	 * delete : 删除
+	 */
+	type?: 'add' | 'edit' ;
+	/** 编辑的表格行数据 */
+	editData?: UserManagement.User | null;
 }
 
 export type ModalType = NonNullable<Props['type']>;
 
-defineOptions({ name: 'TableActionModal' });
+defineOptions({ name: 'TableActionAdd' });
 
 const props = withDefaults(defineProps<Props>(), {
-  type: 'add',
-  editData: null
+	type: 'add',
+	editData: null,
 });
 
 interface Emits {
-  (e: 'update:visible', visible: boolean): void;
+	(e: 'update:visible', visible: boolean): void;
 }
 
 const emit = defineEmits<Emits>();
 
 const modalVisible = computed({
-  get() {
-    return props.visible;
-  },
-  set(visible) {
-    emit('update:visible', visible);
-  }
+	get() {
+		return props.visible;
+	},
+	set(visible) {
+		emit('update:visible', visible);
+	}
 });
 const closeModal = () => {
-  modalVisible.value = false;
+	modalVisible.value = false;
 };
 
 const title = computed(() => {
-  const titles: Record<ModalType, string> = {
-    add: '添加用户',
-    edit: '编辑用户'
-  };
-  return titles[props.type];
+	const titles: Record<ModalType, string> = {
+		add: '添加用户',
+		edit: '编辑用户',
+	};
+	return titles[props.type];
 });
 
 const formRef = ref<HTMLElement & FormInst>();
 
-type FormModel = Pick<UserManagement.User, 'userName' | 'age' | 'gender' | 'phone' | 'email' | 'userStatus'>;
+type FormModel = Pick<UserManagement.User,  | 'name' | 'description' |  'createUid' | 'disabled'>;
 
 const formModel = reactive<FormModel>(createDefaultFormModel());
 
 const rules: Record<keyof FormModel, FormItemRule | FormItemRule[]> = {
-  userName: createRequiredFormRule('请输入用户名'),
-  age: createRequiredFormRule('请输入年龄'),
-  gender: createRequiredFormRule('请选择性别'),
-  phone: formRules.phone,
-  email: formRules.email,
-  userStatus: createRequiredFormRule('请选择用户状态')
+	// id: createRequiredFormRule('请输入用户名'),
+	name: createRequiredFormRule('请输入学科名称'),
+	description: createRequiredFormRule('请进行部门描述'),
+	// createTime:formRules.createTime,
+	createUid: createRequiredFormRule('请输入创建用户ID'),
+	disabled: createRequiredFormRule('请选择用户状态')
+
 };
 
 function createDefaultFormModel(): FormModel {
-  return {
-    userName: '',
-    age: null,
-    gender: null,
-    phone: '',
-    email: null,
-    userStatus: null
-  };
+	return {
+		// id: null,
+		name: '',
+		description: '',
+		// createTime: '',
+		createUid:null,
+		disabled: null,
+	};
 }
 
+
 function handleUpdateFormModel(model: Partial<FormModel>) {
-  Object.assign(formModel, model);
+	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]();
+	const handlers: Record<ModalType, () => void> = {
+		add: () => {
+			const defaultFormModel = createDefaultFormModel();
+			handleUpdateFormModel(defaultFormModel);
+		},
+		edit: () => {
+			if (props.editData) {
+				handleUpdateFormModel(props.editData);
+			}
+		},
+	};
+
+	handlers[props.type]();
 }
 
+// async function handleSubmit() {
+// 	await formRef.value?.validate();
+// 	window.$message?.success('新增成功!');
+// 	closeModal();
+// }
+
+
 async function handleSubmit() {
   await formRef.value?.validate();
-  window.$message?.success('新增成功!');
-  closeModal();
+  const params: AddEasEduCategoryParams = {
+    // id: formModel.id,
+    name: formModel.name,
+    description: formModel.description,
+    // createTime: formModel.createTime,
+    createUid: formModel.createUid,
+    disabled: formModel.disabled
+  };
+  addEasEduCategory(params)
+    .then(res => {
+      window.$message?.success('新增成功!');
+      closeModal();
+			// getTableData();
+    })
+    .catch(error => {
+      console.error(error);
+      window.$message?.error('新增失败!');
+    });
+
 }
 
 watch(
-  () => props.visible,
-  newValue => {
-    if (newValue) {
-      handleUpdateFormModelByModalType();
-    }
-  }
+	() => props.visible,
+	newValue => {
+		if (newValue) {
+			handleUpdateFormModelByModalType();
+		}
+	}
 );
 </script>
 

src/views/management/user/index.vue

@@ -3,11 +3,11 @@
 		<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">
+					<n-button type="primary" @click="addTableData">
 						<icon-ic-round-plus class="mr-4px text-20px" />
 						新增
 					</n-button>
-					<n-button type="error">
+					<n-button type="error" @click="deleteTableData">
 						<icon-ic-round-delete class="mr-4px text-20px" />
 						删除
 					</n-button>
@@ -24,41 +24,94 @@
 					<column-setting v-model:columns="columns" />
 				</n-space>
 			</n-space>
-			<n-data-table :columns="columns" :data="tableData" :loading="loading" :pagination="pagination" />
+			<n-data-table :columns="columns" :data="tableData" :loading="loading" :pagination="pagination" :row-key="rowKey"
+				@update:checked-row-keys="handleCheck"/>
 			<table-action-modal v-model:visible="visible" :type="modalType" :edit-data="editData" />
 		</n-card>
 	</div>
 </template>
 
 <script setup lang="tsx">
-import { reactive, ref } from 'vue';
+import {  ref } from 'vue';
 import type { Ref } from 'vue';
 import { NButton, NPopconfirm, NSpace, NTag } from 'naive-ui';
 import type { DataTableColumns, PaginationProps } from 'naive-ui';
-import { genderLabels, userStatusLabels } from '@/constants';
-import { fetchUserList } from '@/service';
+import {  userStatusLabels } from '@/constants';
+// import { fetchUserList } from '@/service';
 import { useBoolean, useLoading } from '@/hooks';
+import type { DataTableRowKey } from 'naive-ui'
 import TableActionModal from './components/table-action-modal.vue';
 import type { ModalType } from './components/table-action-modal.vue';
 import ColumnSetting from './components/column-setting.vue';
-
+import { selectAll_1,deleteById } from '~/src/service/api/sort';
+// import type { AddEasEduCategoryParams } from '~/src/service/api/sort';
 const { loading, startLoading, endLoading } = useLoading(false);
 const { bool: visible, setTrue: openModal } = useBoolean();
 
 const tableData = ref<UserManagement.User[]>([]);
-function setTableData(data: UserManagement.User[]) {
-	tableData.value = data;
-}
+// function setTableData(data: UserManagement.User[]) {
+// 	tableData.value = data;
+// }
 
-async function getTableData() {
+ async function getTableData() {
 	startLoading();
-	const { data } = await fetchUserList();
-	if (data) {
+	selectAll_1().then(res => {
 		setTimeout(() => {
-			setTableData(data);
+			// console.log(res);
+			tableData.value = res.data as [];
 			endLoading();
 		}, 1000);
-	}
+	});
+}
+
+
+type RowData = {
+	key: number
+	id: number
+	name: string
+	description: string
+	createTime: string
+	modifyTime: string
+	createUid: number
+	disabled: string
+}
+
+const rowKey= (row: RowData) => row.id
+
+function	handleCheck(rowKeys: DataTableRowKey[]) {
+	checkedRowKeysRef.value = rowKeys
+	console.log(checkedRowKeysRef.value);
+}
+
+
+const checkedRowKeysRef = ref<DataTableRowKey[]>([])
+
+async function deleteTableData() {
+  const ids = checkedRowKeysRef.value;
+	// console.log(ids);
+  if (ids.length !== 0) {
+		console.log(ids);
+    for (let id of ids) {
+      // 调用删除接口
+			console.log(id);
+      await deleteById(id as number)
+        .then((res) => {
+          const deleteRes = res.data;
+					if(!deleteRes)
+            console.log(`成功删除课程，ID: ${id}`);
+            window.$message?.success('删除成功!');
+        })
+        .catch((error) => {
+          // 错误处理
+          console.error(`删除课程发生错误，ID: ${id}`, error);
+          window.$message?.error('删除失败!');
+        });
+    }
+    getTableData(); // 删除完成后刷新表格数据
+  } else {
+    // 没有选择任何行时的操作
+    console.warn('未选择要删除的行');
+  }
 }
 
 const columns: Ref<DataTableColumns<UserManagement.User>> = ref([
@@ -140,16 +193,31 @@ function setModalType(type: ModalType) {
 	modalType.value = type;
 }
 
+
+// const addData = ref<AddEasEduCategoryParams[]>([]);
+function addTableData() {
+	openModal();
+	getTableData(); // 删除完成后刷新表格数据
+	setModalType('add');
+	// const params: AddEasEduCategoryParams = {};
+	// addEasEduCategory(params).then(res => {
+	// 	console.log(res);
+	// 	addData.value = res.data as [];
+	// });
+
+}
+
+
 const editData = ref<UserManagement.User | null>(null);
 
 function setEditData(data: UserManagement.User | null) {
 	editData.value = data;
 }
 
-function handleAddTable() {
-	openModal();
-	setModalType('add');
-}
+// function handleAddTable() {
+// 	openModal();
+// 	setModalType('add');
+// }
 
 function handleEditTable(rowId: string) {
 	const findItem = tableData.value.find(item => item.id === rowId);
@@ -160,23 +228,28 @@ function handleEditTable(rowId: string) {
 	openModal();
 }
 
+
+
+
 function handleDeleteTable(rowId: string) {
 	window.$message?.info(`点击了删除，rowId为${rowId}`);
 }
 
-const pagination: PaginationProps = reactive({
+const pagination: PaginationProps = ref({
 	page: 1,
 	pageSize: 10,
 	showSizePicker: true,
-	pageSizes: [10, 15, 20, 25, 30],
+	pageSizes: [10, 20, 50],
 	onChange: (page: number) => {
+		// 处理页码变化
 		pagination.page = page;
 	},
 	onUpdatePageSize: (pageSize: number) => {
+		// 处理每页显示数量变化
 		pagination.pageSize = pageSize;
 		pagination.page = 1;
 	}
-});
+}).value;
 
 function init() {
 	getTableData();