根据条件查询

src/service/request/instance.ts

@@ -61,11 +61,11 @@ export default class CustomAxiosInstance {
     this.instance.interceptors.response.use(
       (async response => {
         const { status } = response;
-        if (status === 200 || status < 300 || status === 304 || response.status === 200) {
+        if (status === 200 || status < 300 || status === 304 ) {
           const backend = response.data;
           const { codeKey, dataKey, successCode } = this.backendConfig;
           // 请求成功
-          if (backend[codeKey] === successCode || response.status === 200) {
+          if (backend[codeKey] === successCode ) {
             // console.log('fanhui');
             return handleServiceResult(null, backend[dataKey]);
           }

src/views/management/role/index.vue

@@ -28,8 +28,8 @@ const pagination: PaginationProps = ref({
 }).value;
 
 async function getTableData() {
-  const pageNum = pagination.page as number;
-  const pageSize = pagination.pageSize as number;
+  const pageNum = pagination.page as number;//页码
+  const pageSize = pagination.pageSize as number;//当前所在数
   const params: QueryParams = {};
 
   query(pageNum, pageSize, params).then(res => {

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

@@ -1,30 +1,12 @@
 <template>
-  <n-space class="pb-20px" vertical >
-
+  <n-space  >
     <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()">
-     	搜索
+			<span class="w-40px mr-5px line-height-33.99px">页码</span>  <n-input-number :style="{ width: '48%',marginRight:'2%'}" placeholder="请输入页码..." clearable 	v-model="pagination.page"	  @change="searchCondition" />
+			<span class="w-40px mr-5px line-height-33.99px">条数</span> <n-input-number :style="{ width: '48%' }" placeholder="请输入数据条数..." clearable v-model="pagination.pageSize"  @change="searchCondition"/>
+			<n-button type="primary" ghost  @click="searchCondition()">
+    		 	搜索
     </n-button>
+    </n-input-group>
   </n-space>
 </template>
 
@@ -36,7 +18,7 @@ import type { PaginationProps } from 'naive-ui';
 import { selectByCondition_1} from '~/src/service/api/sort';
 import type { SelectByCondition_1Params } from '~/src/service/api/sort';
 
-const tableData = ref<any[]>([]);
+const searchData = ref<any[]>([]);
 const pagination: PaginationProps = ref({
 	page: 1,
 	pageSize: 10,
@@ -57,10 +39,12 @@ function searchCondition(){
 	const pageNum = pagination.page as number;
   const pageSize = pagination.pageSize as number;
   const params: SelectByCondition_1Params = {};
+	console.log(pageNum,pageSize);
 
   selectByCondition_1(pageNum, pageSize, params).then(res => {
     // console.log(res);
-    tableData.value = res.data as [];
+    searchData.value = res.data as [];
+		console.log(searchData.value);
   });
 }
 
@@ -68,6 +52,8 @@ export default defineComponent({
   setup () {
     return {
 			searchCondition,
+			searchData,
+      pagination,
       selectOptions: ref([
         {
           label: 'Y',

src/views/management/sort/index.vue

@@ -1,46 +1,58 @@
 <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" />
-						新增
-					</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="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-scrollbar>
+			<n-card title="课程分类" :bordered="false" class="rounded-16px shadow-sm">
+				<n-space class="pb-14px" 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-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>
+						<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="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"  @keydown="handleKeyDown" @change="handleChange"
+								@keyup.enter="handleSearch" v-model="searchId" clearable />
+							<n-button type="primary" ghost @click="handleSearch">
+								搜索
+							</n-button>
+						</n-input-group>
+						<div class="mr-5px"></div>
+						<n-input-group>
+							<span class="w-40px mr-5px line-height-33.99px">页码</span>
+							<n-input-number :style="{ width: '48%', marginRight: '2%' }" placeholder="请输入页码..." clearable v-model="pagination.page"
+								@update:value="searchPage"  @clear="searchConClear"/>
+							<span class="w-40px mr-5px line-height-33.99px">条数</span>
+							<n-input-number :style="{ width: '48%' }" placeholder="请输入数据条数..." clearable v-model="pagination.pageSize"
+								@update:value="searchSize"  @clear="searchConClear" />
+							<n-button type="primary" ghost @click="searchCondition">
+								搜索
+							</n-button>
+						</n-input-group>
+						<!-- <column-search v-if="showSearch" v-model:columns="columns" /> -->
+					</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>
+					</n-space>
 				</n-space>
-			</n-space>
-			<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>
+				<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>
+		</n-scrollbar>
 	</div>
 </template>
 
@@ -54,9 +66,11 @@ 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, selectById_1} from '~/src/service/api/sort';
-import type { AddEasEduCategoryParams} from '~/src/service/api/sort';
-import ColumnSearch from './components/column-search.vue';
+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';
+import { selectByCondition_1 } from '~/src/service/api/sort';
+import type { SelectByCondition_1Params } from '~/src/service/api/sort';
 type RowData = {
 	key: number
 	id: number
@@ -67,6 +81,7 @@ type RowData = {
 	createUid: number
 	disabled: string
 }
+
 const { loading, startLoading, endLoading } = useLoading(false);
 const { bool: visible, setTrue: openModal } = useBoolean();
 
@@ -74,7 +89,17 @@ const tableData = ref<any[]>([]);
 const searchInput = ref([]) as any;
 const searchForm = ref([]) as any;
 const searchId = ref<number>(0); // 定义为数字类型，默认值为0
-
+const searchData = ref<any[]>([]);
+const searchConData = ref<any[]>([]);
+const searchpagedata = ref<number>(0)
+const searchpagesize = ref<number>(0)
+// const search = ref([]) as any;
+function searchPage(v: number | null) {
+	searchpagedata.value = Number(v)
+}
+function searchSize(v: number | null) {
+	searchpagesize.value = Number(v)
+}
 const pagination: PaginationProps = ref({
 	page: 1,
 	pageSize: 10,
@@ -83,77 +108,101 @@ const pagination: PaginationProps = ref({
 	onChange: (page: number) => {
 		// 处理页码变化
 		pagination.page = page;
+		console.log(pagination.page);
 	},
 	onUpdatePageSize: (pageSize: number) => {
 		// 处理每页显示数量变化
 		pagination.pageSize = pageSize;
 		pagination.page = 1;
+		console.log(pagination.pageSize);
 	}
 }).value;
 
+function searchCondition() {
+	const pageNum = searchpagedata.value as number;
+	const pageSize = searchpagesize.value as number;
+	const params: SelectByCondition_1Params = {};
+	if(pageNum  &&  pageSize){
+		console.log(pageNum,pageSize);
+		selectByCondition_1(pageNum, pageSize, params).then(res => {
+		console.log(pageNum,pageSize);
+		searchConData.value = res.data as [];
+		console.log(searchConData.value);
+		pagination.page =searchpagedata.value
+		pagination.pageSize=searchpagesize.value
+		window.$message?.success('查询成功');
+		})
+	}
+	else if(!pageNum && !pageSize) {
+		searchpagedata.value =0;
+		searchpagesize.value=0;
+		window.$message?.warning('请输入页码和条数进行查询');
+	}
+}
 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(() => {
+			tableData.value = res.data as [];
+			endLoading();
+		}, 1000);
+	});
 }
-
 function init() {
 	getTableData();
 }
 // 初始化
 init();
 
+function searchConClear(){
+	searchConData.value.length = 0
+	searchpagedata.value =0;
+	searchpagesize.value=0;
+	getTableData();
+}
+
 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);
-		});
+	if (searchId.value) {
+		await selectById_1(searchId.value)
+			.then(res => {
+				// 更新数据
+				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();
+	else {
+		searchForm.value.length = 0
 		window.$message?.warning('请输入有效的ID进行查询');
-	 }
+	}
 }
 
-function searchClear(){
-	searchForm.value.length=0
-  getTableData();
+
+function searchClear() {
+	searchForm.value.length = 0
+	getTableData();
 }
 
+
 const checkedRowKeysRef = ref<DataTableRowKey[]>([])
 
 // 根据id进行删除
@@ -162,23 +211,22 @@ async function deleteTableData() {
 	// console.log(ids);
 	if (ids.length !== 0) {
 		console.log(ids);
-		for (let id of ids) {
+		for (const id of ids) {
 			// 调用删除接口
 			console.log(id);
+			checkedRowKeysRef.value= []
 			await deleteById(id as number)
 				.then((res) => {
-					const deleteRes = res.data;
-					if (!deleteRes){
+					// const deleteRes = res.data;
 						console.log(`成功删除课程，ID: ${id}`);
-					  window.$message?.success('删除成功!');
-					}
+						window.$message?.success('删除成功!');
 				})
 				.catch((error) => {
 					// 错误处理
 					console.error(`删除课程发生错误，ID: ${id}`, error);
 					window.$message?.error('删除失败!');
 				});
-		}
+		}	checkedRowKeysRef.value= []
 		getTableData(); // 删除完成后刷新表格数据
 	} else {
 		// 没有选择任何行时的操作
@@ -308,15 +356,20 @@ const createColumns = (): DataTableColumns<UserManagement.User> => [
 export default defineComponent({
 	components: {
 		TableActionAdd,
-		ColumnSearch
+		// ColumnSearch
 	},
 	setup() {
 		return {
 			showSearch,
+			searchPage,
+			searchSize,
 			tableData,
 			addData,
+			searchConClear,
+			searchCondition,
 			loading,
 			modalType,
+			searchData,
 			setEditData,
 			handleSearch,
 			searchId,
@@ -338,7 +391,15 @@ export default defineComponent({
 			handleCheck(rowKeys: DataTableRowKey[]) {
 				checkedRowKeysRef.value = rowKeys
 				console.log(checkedRowKeysRef.value);
-			}
+			},
+		handleKeyDown(event:KeyboardEvent) {
+      if (event.key === 'Backspace' && searchId.value===0) {
+        // 处理删除键按下且输入框为空的情况
+        // 执行刷新操作，例如调用 API 获取原来的列表数据
+				getTableData()
+      }
+			console.log(1);
+    },
 		}
 	}
 })

src/views/management/sort/indexcopy.vue

@@ -2,7 +2,7 @@
 	<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">
@@ -14,14 +14,14 @@
 						删除
 					</n-button>
 					<n-button type="success">
-            <icon-uil:export class="mr-4px text-20px" />
-            导出Excel
-          </n-button>
+						<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-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">
@@ -33,14 +33,30 @@
 			</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"/>
+			<table-action-add v-model:visible="visible" :type="modalType" :edit-data="editData" />
 		</n-card>
+		<!-- <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> -->
 	</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'
@@ -173,7 +189,7 @@ const createColumns = (): DataTableColumns<UserManagement.User> => [
 					'Y': 'success',
 				};
 				return <NTag type={tagTypes[row.disabled]}>{userStatusLabels[row.disabled]}</NTag>;
-		  }
+			}
 			return
 		}
 	},
@@ -184,7 +200,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)}>
@@ -200,7 +216,7 @@ const createColumns = (): DataTableColumns<UserManagement.User> => [
 	},
 ]
 
-const modalType = ref<ModalType>('add'||'edit');
+const modalType = ref<ModalType>('add' || 'edit');
 
 function setModalType(type: ModalType) {
 	modalType.value = type;
@@ -224,7 +240,7 @@ function setEditData(data: UserManagement.User | null) {
 	editData.value = data;
 }
 console.log(tableData.value);
-function handleEditTable(rowId: number|null ) {
+function handleEditTable(rowId: number | null) {
 	const findItem = tableData.value.find(item => item.id === rowId);
 	setModalType('edit');
 	openModal();
@@ -235,12 +251,12 @@ function handleEditTable(rowId: number|null ) {
 	getTableData(); // 编辑完成后刷新表格数据
 }
 
- function handleDeleteTable(rowId: number|null ) {
+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(); // 编辑完成后刷新表格数据
+		deleteById(findItem.id).then((r) => {
+			console.log(r);
+			getTableData(); // 编辑完成后刷新表格数据
 		})
 	}
 }
@@ -248,12 +264,12 @@ function handleEditTable(rowId: number|null ) {
 const showSearch = ref(false)
 
 function handleOpenSearch() {
-  // 点击查询时显示搜索框
-		showSearch.value= true;
+	// 点击查询时显示搜索框
+	showSearch.value = true;
 }
-function  handleCloseSearch() {
-      // 关闭搜索框，并重新显示主页面
-		showSearch.value= false;
+function handleCloseSearch() {
+	// 关闭搜索框，并重新显示主页面
+	showSearch.value = false;
 }
 
 
@@ -287,7 +303,7 @@ export default defineComponent({
 			handleEditTable,
 			handleOpenSearch,
 			visible,
-			columns:createColumns(),
+			columns: createColumns(),
 			checkedRowKeys: checkedRowKeysRef,
 			pagination,
 			rowKey: (row: RowData) => row.id,