فهرست منبع

根据id查询+解决bug

刘冰洁 1 سال پیش
والد
کامیت
0152b5b5d1

+ 4 - 4
src/constants/business.ts

@@ -31,11 +31,11 @@ export const genderOptions: Common.OptionWithKey<UserManagement.GenderKey>[] = [
 
 /** 用户状态 */
 export const userStatusLabels: Record<UserManagement.UserStatusKey, string> = {
-  1: '启用',
-  2: '禁用',
+  Y: 'Y',
+  N: 'N',
 };
 
 export const userStatusOptions: Common.OptionWithKey<UserManagement.UserStatusKey>[] = [
-  { value: 'N', label: userStatusLabels['1'] },
-  { value: 'Y', label: userStatusLabels['2'] },
+  { value: 'Y', label: userStatusLabels['Y'] },
+  { value: 'N', label: userStatusLabels['N'] },
 ];

+ 58 - 1
src/service/api/sort.ts

@@ -54,7 +54,7 @@ export function addEasEduCategory(params: AddEasEduCategoryParams){
 }
 
 
-// 根据id删除课程
+// 根据Id删除课程类别
 // 响应接口
 export interface DeleteByIdRes {
   status: boolean;
@@ -107,3 +107,60 @@ export interface UpdateEasEduCategoryRes {
 export function updateEasEduCategory(params: UpdateEasEduCategoryParams) {
   return request.post(`/updateEasEduCategory`, params);
 }
+
+
+// 根据Id查询对应课程类别
+// 响应接口
+export interface SelectById_1Res {
+  status: boolean;
+  msg: string;
+  data: Record<string, unknown>;
+}
+
+/**
+ * 根据Id查询对应课程类别
+ * @param {string} id
+  * @returns
+ */
+export function selectById_1(id: number) {
+  return request.get(`/selectById?id=${id}`);
+}
+
+
+// 根据条件进行查询课程类别
+// 参数接口
+export interface SelectByCondition_1Params {
+  id?: number;
+  name?: string;
+  description?: string;
+  createTime?: Record<string, unknown>;
+  modifyTime?: Record<string, unknown>;
+  createUid?: number;
+  disabled?: string;
+}
+
+// 响应接口
+export interface SelectByCondition_1Res {
+  status: boolean;
+  msg: string;
+  data: Record<string, unknown>;
+  total: number;
+}
+
+/**
+ * 根据条件进行查询课程类别
+ * @param {string} pageNum
+ * @param {string} pageSize
+ * @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 selectByCondition_1(pageNum: number, pageSize: number, params: SelectByCondition_1Params){
+  return request.post(`/selectByCondition?pageNum=${pageNum}&pageSize=${pageSize}`, params);
+}

+ 1 - 1
src/typings/api.d.ts

@@ -40,6 +40,6 @@ declare namespace ApiUserManagement {
      * - Y: 启用
      * - N: 禁用
      */
-    disabled: 'N' | 'Y'|null ;
+    disabled: 'Y' | 'N'|null ;
   }
 }

+ 10 - 3
src/utils/form/rule.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue';
 import type { FormItemRule } from 'naive-ui';
-import { REGEXP_CODE_SIX, REGEXP_PHONE } from '@/config';
+import { REGEXP_CODE_SIX, REGEXP_PHONE,REGEXP_PWD } from '@/config';
 
 /** 创建自定义错误信息的必填表单规则 */
 export const createRequiredFormRule = (message = '不能为空'): FormItemRule => ({ required: true, message });
@@ -11,15 +11,22 @@ export const requiredFormRule = createRequiredFormRule();
 interface CustomFormRules {
   /** 手机号码 */
   createTime: FormItemRule[];
+	description:[];
+
+	pwd:FormItemRule[];
 }
 
 /** 表单规则 */
 export const formRules: CustomFormRules = {
+	description:[
+
+	],
   createTime: [
     createRequiredFormRule('请输入创建时间'),
-    { pattern: '', message: '', trigger: 'input' }
+    { pattern: '', message: '不能为空', trigger: 'input' }
   ],
-  // email: [{ pattern: REGEXP_EMAIL, message: '邮箱格式错误', trigger: 'blur' }]
+
+	pwd: [{ pattern: REGEXP_PWD, message: '密码格式错误', trigger: 'blur' }]
 };
 
 /** 是否为空字符串 */

+ 1 - 0
src/views/_builtin/login/components/pwd-login/index.vue

@@ -69,6 +69,7 @@ async function handleSubmit() {
   const { userName, password } = model;
 
   login(userName, password);
+	console.log(userName, password );
 }
 
 function handleLoginOtherAccount(param: { userName: string; password: string }) {

+ 0 - 1
src/views/crud/demo/crud.tsx

@@ -64,7 +64,6 @@ export default function createCrudOptions(): CreateCrudOptionsRet {
           }
         },
         select: {
-          title: '状态',
           search: { show: true },
           type: 'dict-select',
           dict: dict({

+ 74 - 61
src/views/management/sort/components/column-search.vue

@@ -1,71 +1,84 @@
 <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[];
-}
+  <n-space class="pb-20px" vertical >
 
-const props = defineProps<Props>();
+    <n-input-group>
+			<span class="w-80px mr-5px line-height-33.99px">学科名称</span>  <n-input :style="{ width: '31%',marginRight:'2%'}" clearable />
+			<!-- <span class="w-80px mr-5px line-height-33.99px">学科描述</span> <n-input :style="{ width: '31%' ,marginRight:'2%'}" clearable/>
+			<span class="w-100px line-height-33.99px">创建用户ID</span> <n-input-number :style="{ width: '22%',marginRight:'10%' }" clearable /> -->
+    </n-input-group>
+    <!-- <n-input-group>
+      <n-input :style="{ width: '100%' }" clearable/>
+    </n-input-group> -->
+		<n-input-group>
+			<span class="line-height-33.99px mr-5px w-70px">创建时间</span>
+      <n-date-picker :style="{ width: '13%' }"/>
+      <n-time-picker :style="{ width: '14.2%' ,marginRight:'2%'}"/>
+			<span class="line-height-33.99px mr-5px w-70px">修改时间</span>
+      <n-date-picker :style="{ width: '13%' }"/>
+      <n-time-picker :style="{ width: '14.2%' ,marginRight:'2%'}"/>
+				<span class="w-50px  line-height-33.99px">状态</span>
+				<n-select  :options="selectOptions" :style="{ width: '21%' ,marginRight:'2%'}"  clearable/>
+				<!-- <n-button type="primary" ghost>
+      	  搜索
+    		</n-button> -->
+    </n-input-group>
+		<n-button type="primary"  class="" @click="searchCondition()">
+     	搜索
+    </n-button>
+  </n-space>
+</template>
 
-interface Emits {
-  (e: 'update:columns', columns: Column[]): void;
-}
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { NButton, NSpace } from 'naive-ui';
+import type { PaginationProps } from 'naive-ui';
 
-const emit = defineEmits<Emits>();
+import { selectByCondition_1} from '~/src/service/api/sort';
+import type { SelectByCondition_1Params } from '~/src/service/api/sort';
 
-type List = Column & { checked?: boolean };
+const tableData = ref<any[]>([]);
+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;
 
-const list = ref(initList());
+function searchCondition(){
+	const pageNum = pagination.page as number;
+  const pageSize = pagination.pageSize as number;
+  const params: SelectByCondition_1Params = {};
 
-function initList(): List[] {
-  return props.columns.map(item => ({ ...item, checked: true }));
+  selectByCondition_1(pageNum, pageSize, params).then(res => {
+    // console.log(res);
+    tableData.value = res.data as [];
+  });
 }
 
-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 }
-);
+export default defineComponent({
+  setup () {
+    return {
+			searchCondition,
+      selectOptions: ref([
+        {
+          label: 'Y',
+          value: 'Y'
+        },
+				{
+					label: 'N',
+          value: 'N'
+				}
+      ]),
+    }
+  }
+})
 </script>
-
-<style scoped></style>

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

@@ -99,7 +99,6 @@ const title = computed(() => {
 
 const formRef = ref<HTMLElement & FormInst>();
 
-// type FormModel = Pick<UserManagement.User,  'name' | 'description' |  'createUid' | 'disabled' >;
 
 interface FormModel extends Pick<UserManagement.User, 'id' |'name' | 'description' | 'createUid' | 'disabled'|'createTime'> {
   modifyTime: string;
@@ -151,9 +150,8 @@ function handleUpdateFormModelByModalType() {
 	handlers[props.type]();
 }
 console.log(props.type);
-function handleSubmit() {
-  formRef.value?.validate();
-
+async function handleSubmit() {
+	await formRef.value?.validate()
   if (props.type === 'add') {
     const params: AddEasEduCategoryParams = {
       // id: formModel.id,
@@ -163,14 +161,13 @@ function handleSubmit() {
       createUid: formModel.createUid,
       disabled: formModel.disabled
     };
-
     // 调用新增接口
     addEasEduCategory(params)
       .then(res => {
         console.log(res);
         window.$message?.success('新增成功!');
+				getTableData();
         closeModal();
-        getTableData();
       })
       .catch(error => {
         console.error(error);

+ 147 - 80
src/views/management/sort/index.vue

@@ -1,7 +1,10 @@
 <template>
 	<div class="h-full overflow-hidden">
 		<n-card title="课程分类" :bordered="false" class="rounded-16px shadow-sm">
+			<!-- <column-search v-if="showSearch" @close="handleCloseSearch" /> -->
+			<column-search v-if="showSearch" v-model:columns="columns" />
 			<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" />
@@ -11,29 +14,39 @@
 						<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-button type="primary" @click="handleOpenSearch">
+						<icon-simple-line-icons:magnifier class="mr-4px text-16px" />
+						查询
+					</n-button>
+					<n-input-group>
+						<n-input :style="{ width: '100%' }" placeholder="请输入id查询..." @clear="searchClear" @change="handleChange" @keyup.enter="handleSearch"
+							v-model="searchId" clearable />
+						<n-button type="primary" ghost @click="handleSearch()">
+							搜索
+						</n-button>
+					</n-input-group>
+
 				</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-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" :edit-data="editData"/>
+			<n-data-table v-if="searchForm.length > 0" :columns="columns" :data="searchForm" :loading="loading"
+				:pagination="pagination" :row-key="rowKey" @update:checked-row-keys="handleCheck" />
+			<n-data-table v-if="searchForm.length <= 0" :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" :edit-data="editData" />
 		</n-card>
 	</div>
 </template>
 
 <script lang="tsx" >
 import { defineComponent, ref } from 'vue'
-import { NButton, NSpace,NTag ,NPopconfirm} from 'naive-ui';
+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'
@@ -41,8 +54,8 @@ 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';
+import { selectAll_1, deleteById, selectById_1} from '~/src/service/api/sort';
+import type { AddEasEduCategoryParams} from '~/src/service/api/sort';
 import ColumnSearch from './components/column-search.vue';
 type RowData = {
 	key: number
@@ -58,8 +71,10 @@ const { loading, startLoading, endLoading } = useLoading(false);
 const { bool: visible, setTrue: openModal } = useBoolean();
 
 const tableData = ref<any[]>([]);
+const searchInput = ref([]) as any;
+const searchForm = ref([]) as any;
+const searchId = ref<number>(0); // 定义为数字类型,默认值为0
 
-// const checkedRowKeysRef = ref<DataTableRowKey[]>([])
 const pagination: PaginationProps = ref({
 	page: 1,
 	pageSize: 10,
@@ -78,18 +93,70 @@ const pagination: PaginationProps = ref({
 
 export async function getTableData() {
 	startLoading();
-	selectAll_1().then(res => {
-		setTimeout(() => {
-			// console.log(res);
-			tableData.value = res.data as [];
-			endLoading();
-		}, 1000);
-	});
+		selectAll_1().then(res => {
+			setTimeout(() => {
+				// console.log(res);
+				tableData.value = res.data as [];
+				endLoading();
+			}, 1000);
+		});
+}
+
+function init() {
+	getTableData();
+}
+// 初始化
+init();
+
+const showSearch = ref(false)
+function handleOpenSearch() {
+	// 点击查询时显示搜索框
+	showSearch.value = !showSearch.value;
 }
 
+// 输入数据
+function handleChange(v: string) {
+	// console.log(v);
+	searchId.value = Number(v)
+
+	console.log(searchId.value);
+}
+// 根据id查询数据
+async function handleSearch() {
+	// console.log(searchId.value);
+	if(searchId.value){
+	await selectById_1(searchId.value)
+		.then(res => {
+			// 更新数据
+			// tableData.value = res.data as [];
+			searchInput.value = res.data as [];
+			const filteredItems = tableData.value.filter(item => item.id === searchInput.value.id)
+			// console.log(filteredItems);
+			searchForm.value = filteredItems;
+			console.log(searchForm.value);
+			window.$message?.success('查询成功');
+		})
+		.catch(err => {
+			window.$message?.warning('请输入有效的ID进行查询');
+			console.error('查询失败', err);
+		});
+	}
+	 else {
+		searchForm.value.length=0
+		// ID为空或无效时的处理
+		// getTableData();
+		window.$message?.warning('请输入有效的ID进行查询');
+	 }
+}
+
+function searchClear(){
+	searchForm.value.length=0
+  getTableData();
+}
 
 const checkedRowKeysRef = ref<DataTableRowKey[]>([])
 
+// 根据id进行删除
 async function deleteTableData() {
 	const ids = checkedRowKeysRef.value;
 	// console.log(ids);
@@ -101,9 +168,10 @@ async function deleteTableData() {
 			await deleteById(id as number)
 				.then((res) => {
 					const deleteRes = res.data;
-					if (!deleteRes)
+					if (!deleteRes){
 						console.log(`成功删除课程,ID: ${id}`);
-					window.$message?.success('删除成功!');
+					  window.$message?.success('删除成功!');
+					}
 				})
 				.catch((error) => {
 					// 错误处理
@@ -114,7 +182,51 @@ async function deleteTableData() {
 		getTableData(); // 删除完成后刷新表格数据
 	} else {
 		// 没有选择任何行时的操作
-		console.warn('未选择要删除的行');
+		window.$message?.error('未选择要删除的行');
+	}
+}
+
+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');
+	// 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(); // 编辑完成后刷新表格数据
+		})
 	}
 }
 
@@ -126,7 +238,8 @@ const createColumns = (): DataTableColumns<UserManagement.User> => [
 	{
 		key: 'id',
 		title: "ID",
-		align: 'center'
+		align: 'center',
+
 	},
 	{
 		key: 'name',
@@ -161,11 +274,11 @@ const createColumns = (): DataTableColumns<UserManagement.User> => [
 		render: row => {
 			if (row.disabled) {
 				const tagTypes: Record<UserManagement.UserStatusKey, NaiveUI.ThemeColor> = {
-					'Y': 'success',
 					'N': 'error',
+					'Y': 'success',
 				};
 				return <NTag type={tagTypes[row.disabled]}>{userStatusLabels[row.disabled]}</NTag>;
-		  }
+			}
 			return
 		}
 	},
@@ -176,7 +289,7 @@ const createColumns = (): DataTableColumns<UserManagement.User> => [
 		render: row => {
 			return (
 				<NSpace justify={'center'}>
-					<NButton size={'small'}  onClick={() => handleEditTable(row.id)} >
+					<NButton size={'small'} onClick={() => handleEditTable(row.id)} >
 						编辑
 					</NButton>
 					<NPopconfirm onPositiveClick={() => handleDeleteTable(row.id)}>
@@ -192,79 +305,33 @@ const createColumns = (): DataTableColumns<UserManagement.User> => [
 	},
 ]
 
-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 {
+			showSearch,
 			tableData,
 			addData,
 			loading,
 			modalType,
 			setEditData,
+			handleSearch,
+			searchId,
+			searchForm,
 			editData,
+			handleChange,
 			getTableData,
 			addTableData,
 			setModalType,
 			deleteTableData,
 			handleEditTable,
+			searchClear,
+			handleOpenSearch,
 			visible,
-			columns:createColumns(),
+			columns: createColumns(),
 			checkedRowKeys: checkedRowKeysRef,
 			pagination,
 			rowKey: (row: RowData) => row.id,

+ 301 - 0
src/views/management/sort/indexcopy.vue

@@ -0,0 +1,301 @@
+<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">
+				    <!-- 加入查询组件 -->
+				<column-search v-if="showSearch" @close="handleCloseSearch" />
+				<n-space v-else>
+					<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-button size="small" type="primary" @click="handleOpenSearch">
+              <icon-simple-line-icons:magnifier class="mr-4px text-16px" />
+          			  查询
+        		</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-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" :edit-data="editData"/>
+		</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';
+import ColumnSearch from './components/column-search.vue';
+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 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> = {
+					'N': 'error',
+					'Y': 'success',
+				};
+				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(); // 编辑完成后刷新表格数据
+		})
+	}
+}
+
+const showSearch = ref(false)
+
+function handleOpenSearch() {
+  // 点击查询时显示搜索框
+		showSearch.value= true;
+}
+function  handleCloseSearch() {
+      // 关闭搜索框,并重新显示主页面
+		showSearch.value= false;
+}
+
+
+function init() {
+	getTableData();
+}
+
+// 初始化
+init();
+
+export default defineComponent({
+	components: {
+		TableActionAdd,
+		ColumnSearch
+	},
+	setup() {
+		// const checkedRowKeysRef = ref<DataTableRowKey[]>([])
+		return {
+			showSearch,
+			tableData,
+			addData,
+			loading,
+			modalType,
+			setEditData,
+			editData,
+			handleCloseSearch,
+			getTableData,
+			addTableData,
+			setModalType,
+			deleteTableData,
+			handleEditTable,
+			handleOpenSearch,
+			visible,
+			columns:createColumns(),
+			checkedRowKeys: checkedRowKeysRef,
+			pagination,
+			rowKey: (row: RowData) => row.id,
+			handleCheck(rowKeys: DataTableRowKey[]) {
+				checkedRowKeysRef.value = rowKeys
+				console.log(checkedRowKeysRef.value);
+			}
+		}
+	}
+})
+</script>