课程表

.vscode/settings.json

@@ -43,7 +43,7 @@
   "terminal.integrated.fontWeight": 500,
   "terminal.integrated.tabs.enabled": true,
   "workbench.iconTheme": "material-icon-theme",
-  "workbench.colorTheme": "蓝色空间——浅色🌷",
+  "workbench.colorTheme": "Dracula Soft",
   "[html]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },

src/locales/lang/zh-cn.ts

@@ -76,7 +76,8 @@ const locale: LocaleMessages<I18nType.Schema> = {
         role: '角色管理',
         route: '路由管理',
         user: '用户管理',
-        sort: '课程分类'
+        sort: '课程分类',
+				curriculum:'课程表',
       },
       about: '关于'
     }

src/router/modules/management.ts

@@ -57,6 +57,17 @@ const management: AuthRoute.Route = {
         requiresAuth: true,
         icon: 'material-symbols:route'
       }
+    },
+		{
+      name: 'management_curriculum',
+      path: '/management/curriculum',
+      component: 'self',
+      meta: {
+        title: '课程表',
+        i18nTitle: 'message.routes.management.curriculum',
+        requiresAuth: true,
+        icon: 'heroicons-outline:calendar-days'
+      }
     }
   ],
   meta: {

src/service/api/auth.ts

@@ -40,13 +40,13 @@ export interface AdminLoginRes {
  * @param captchaVerification - 验证码
  */
 export function fetchLogin(params: AdminLoginParams) {
-  let res = request.post('/adminLogin',params);
-  return  res;	
+  let res = request.post('/login/adminLogin',params);
+  return  res;
 }
 
 /** 获取用户信息 */
 export function fetchUserInfo(param:string) {
-	let res = request.get('/getUserInfo')
+	let res = request.get('/login/getUserInfo')
   return res;
 }
 
@@ -64,5 +64,5 @@ export function fetchUserRoutes(userId: number) {
  * @param refreshToken
  */
 export function fetchUpdateToken(refreshToken: string) {
-  return request.post<ApiAuth.Token>('/refreshToken',  refreshToken );
+  return request.post<ApiAuth.Token>('/login/refreshToken',  refreshToken );
 }

src/service/api/curriculum.ts

@@ -0,0 +1,53 @@
+import { request } from '../request';
+export interface Query_1Params {
+  id?: number;
+  week?: number;
+  startTime?: string;
+  endTime?: string;
+  roomId?: number;
+  classId?: number;
+  assistantId?: number;
+  teacherId?: number;
+  categoryId?: number;
+  subjectsId?: number;
+  createTime?: string;
+  modifyTime?: string;
+  createUid?: number;
+  disabled?: string;
+}
+
+// 响应接口
+export interface Query_1Res {
+  status: boolean;
+  msg: string;
+  data: Record<string, unknown>;
+  code: number;
+}
+
+/**
+ * 查询课程表
+ * @param {string} pageNum
+  * @param {string} pageSize
+  * @param {object} params EasEduSchedule
+ * @param {number} params.id
+ * @param {number} params.week 当周周几
+ * @param {object} params.startTime 起始时间
+ * @param {object} params.endTime 结束时间
+ * @param {number} params.roomId 教室ID
+ * @param {number} params.classId 班级ID
+ * @param {number} params.assistantId 助教ID
+ * @param {number} params.teacherId 教师ID
+ * @param {number} params.categoryId 授课类别
+ * @param {number} params.subjectsId 授课内容
+ * @param {object} params.createTime 创建时间
+ * @param {object} params.modifyTime 修改时间
+ * @param {number} params.createUid 创建用户ID
+ * @param {string} params.disabled 状态
+ * @returns
+ */
+export function query_1(pageNum: number, pageSize: number, params: Query_1Params) {
+  return request.post(`/schedule/query?pageNum=${pageNum}&pageSize=${pageSize}`, params);
+}
+
+
+//

src/typings/page-route.d.ts

@@ -55,6 +55,7 @@ declare namespace PageRoute {
     | 'function_tab'
     | 'management'
     | 'management_auth'
+    | 'management_curriculum'
     | 'management_role'
     | 'management_route'
     | 'management_sort'
@@ -114,6 +115,7 @@ declare namespace PageRoute {
     | 'function_tab-multi-detail'
     | 'function_tab'
     | 'management_auth'
+    | 'management_curriculum'
     | 'management_role'
     | 'management_route'
     | 'management_sort'

src/typings/system.d.ts

@@ -384,7 +384,8 @@ declare namespace I18nType {
         route: string;
         user: string;
 			  sort: string;
-				usdt:string;
+				curriculum:string;
+
       };
       about: string;
     };

src/views/_builtin/login/components/pwd-login/components/verifition/api/index.js

@@ -9,7 +9,7 @@ import request from "./../utils/axios"  //组件内部封装的axios
 //获取验证图片  以及token
 export function reqGet(data) {
 	return  request({
-        url: '/proxy-pattern/verify.get',
+        url: '/proxy-pattern/login/verify/get',
         method: 'post',
         data
     })
@@ -18,7 +18,7 @@ export function reqGet(data) {
 //滑动或者点选验证
 export function reqCheck(data) {
 	return  request({
-        url: '/proxy-pattern/verify.check',
+        url: '/proxy-pattern/login/verify/check',
         method: 'post',
         data
     })

src/views/_builtin/login/components/pwd-login/index.vue

@@ -84,6 +84,7 @@ async function handleSubmit() {
 	const { userName, password, captchaVerification } = model;
 	if(captchaVerification){
 			login({ username: userName, passwd: encrypto(password), captchaVerification: captchaVerification })
+			console.log(encrypto(password));
 	} else {
 		mode.value='pop'
 	}

src/views/index.ts

@@ -34,6 +34,7 @@ export const views: Record<
   'function_tab-multi-detail': () => import('./function/tab-multi-detail/index.vue'),
   function_tab: () => import('./function/tab/index.vue'),
   management_auth: () => import('./management/auth/index.vue'),
+  management_curriculum: () => import('./management/curriculum/index.vue'),
   management_role: () => import('./management/role/index.vue'),
   management_route: () => import('./management/route/index.vue'),
   management_sort: () => import('./management/sort/index.vue'),

src/views/management/curriculum/index.vue

@@ -0,0 +1,206 @@
+<template>
+	<n-space vertical>
+		<n-table striped :data="tableData">
+			<thead>
+				<tr>
+					<th>节次</th>
+					<th>周一</th>
+					<th>周二</th>
+					<th>周三</th>
+					<th>周四</th>
+					<th>周五</th>
+					<th>周六</th>
+					<th>周日</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="time in Object.keys(tableData)" :key="time">
+					<td>{{ time }}</td>
+					<template  v-for="dayOfWeek in [1, 2, 3, 4, 5, 6, 7]" :key="dayOfWeek">
+					<td v-if="tableData[time][dayOfWeek]" :rowspan="tableData[time][dayOfWeek]['colspan']">
+						<span >{{ tableData[time][dayOfWeek]["startTime"] }} -- {{ tableData[time][dayOfWeek]["endTime"] }} --
+							 {{ tableData[time][dayOfWeek]['colspan'] }}-- {{ dayOfWeek }} </span>
+					</td>
+					<td v-if=" JSON.stringify(tableData[time]) === '{}' "><span>无课</span></td>
+
+				</template>
+					<!-- <td>
+						<span v-if="tableData[time].length === 0 || !tableData[time][1]">无课</span>
+						<span v-else> {{ tableData[time][1] && tableData[time][1]["startTime"] }}-{{ tableData[time][1]["endTime"]
+						}}</span>
+					</td>
+					<td>
+						<span v-if="tableData[time].length === 0 || !tableData[time][2]">无课</span>
+						<span v-else> {{ tableData[time][2] && tableData[time][2]["startTime"] }}-{{ tableData[time][2]["endTime"] }}
+						</span>
+					</td>
+					<td>
+						<span v-if="tableData[time].length === 0 || !tableData[time][3]">无课</span>
+						<span v-else> {{ tableData[time][3] && tableData[time][3]["startTime"] }} -{{ tableData[time][3]["endTime"]
+						}}</span>
+					</td>
+					<td>
+						<span v-if="tableData[time].length === 0 || !tableData[time][4]">无课</span>
+						<span v-else> {{ tableData[time][4] && tableData[time][4]["startTime"] }}-{{ tableData[time][4]["endTime"] }}
+						</span>
+					</td>
+					<td>
+						<span v-if="tableData[time].length === 0 || !tableData[time][5]">无课</span>
+						<span v-else> {{ tableData[time][5] && tableData[time][5]["startTime"] }}-{{ tableData[time][5]["endTime"] }}
+						</span>
+					</td>
+					<td>
+						<span v-if="tableData[time].length === 0 || !tableData[time][6]">无课</span>
+						<span v-else> {{ tableData[time][6] && tableData[time][6]["startTime"] }}-{{ tableData[time][6]["endTime"] }}
+						</span>
+					</td>
+					<td>
+						<span v-if="tableData[time].length === 0 || !tableData[time][7]">无课</span>
+						<span v-else> {{ tableData[time][7] && tableData[time][7]["startTime"] }}-{{ tableData[time][7]["endTime"] }}
+						</span>
+					</td> -->
+				</tr>
+			</tbody>
+		</n-table>
+	</n-space>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import { query_1 } from '~/src/service/api/curriculum'
+
+
+const params = reactive({})
+//课程表数据
+const tableData = ref([{
+	id: 0,
+	week: 0,
+	startTime: "",
+	endTime: "",
+	roomId: 0,
+	classId: 0,
+	assistantId: 0,
+	teacherId: 0,
+	categoryId: 0,
+	subjectsId: 0,
+	createTime: "",
+	modifyTime: "",
+	createUid: 0,
+	disabled: '',
+}])
+
+function prsData(tableData) {
+	let obj = [
+		"08:00",
+		"09:00",
+		"10:00",
+		"11:00",
+		"12:00",
+		"13:00",
+		"14:00",
+		"15:00",
+		"16:00",
+		"17:00"
+	]
+	let arr = {
+		"08:00":  {},
+		"09:00":  {},
+		"10:00":  {},
+		"11:00":  {},
+		"12:00":  {},
+		"13:00":  {},
+		"14:00":  {},
+		"15:00":  {},
+		"16:00":  {},
+		"17:00":  {}
+	}
+	tableData.forEach((r) => {
+		// console.log(r);
+		if (r.startTime && r.endTime) {
+			const startTime = r.startTime.split(" ")[1];
+			const dayOfWeek = getDayOfWeek(r.startTime);
+			const endTime = r.endTime.split(" ")[1];
+			if ( JSON.stringify(arr[startTime]) === "{}" ) {
+				r.colspan =  new Date(r.endTime).getHours() - new Date( r.startTime ).getHours() + 1
+				arr[startTime][r.week] = r
+				let n = 1
+				while (n < r.colspan) {
+					r['juest'] = true
+				  const index = obj.indexOf(startTime) + n
+					arr[obj[index]][r.week] = r
+					n++
+				}
+			}
+			// for (let time in arr) {
+			// 	console.log(time);
+			//   if (time >= startTime && time <= endTime) {
+
+			//     if (!arr[time][dayOfWeek]) {
+			//       arr[time][dayOfWeek] = [];
+			//     }
+			//     arr[time][dayOfWeek]=r;
+			//   }
+			// }
+			// console.log(r);
+			// console.log(startTime);
+			// if (!arr[startTime]) {
+			// 	arr[startTime] = {}; // 初始化
+			// }
+			// if (!arr[startTime][dayOfWeek]) {
+			// 	arr[startTime][dayOfWeek] = r;
+			// } else {
+			// 	// 如果已存在数据，则将其合并到已有数据中
+			// 	arr[startTime][dayOfWeek] = Object.assign(arr[startTime][dayOfWeek], r);
+			// }
+		}
+	});
+	console.log("____", arr);
+	return arr;
+}
+
+function getDayOfWeek(dateString) {
+	const date = new Date(dateString);
+	const dayOfWeek = date.getDay();
+	// 将星期几转换为从1开始，而不是0
+	return dayOfWeek === 0 ? 7 : dayOfWeek;
+}
+
+async function fetchCourse() {
+	const res = await query_1(1, 999999, params)
+	tableData.value = prsData(res.data.data)
+	// console.log(tableData.value)
+}
+
+
+// function groupByWeek(data) {
+// 	const groupedData = {};
+// 	data.forEach((course) => {
+// 		const week = course.week;
+// 		if (!groupedData[week]) {
+// 			groupedData[week] = [];
+// 		}
+// 		groupedData[week].push(course);
+// 	});
+// 	console.log(groupedData);
+// 	return groupedData;
+// }
+
+fetchCourse()
+</script>
+
+<style scoped>
+th {
+	color: rgb(141, 141, 141);
+	font-size: calc(var(--baseSize, 14px) * 1.1);
+	font-weight: bold;
+}
+
+th,
+td {
+	padding: 16px 12px;
+	font-size: var(--baseSize, 14px);
+	outline: 1px solid rgb(226, 226, 226);
+	text-align: center;
+	color: rgb(99, 99, 99);
+}
+</style>

src/views/management/curriculum/index.vue.bak

@@ -0,0 +1,164 @@
+<template>
+	<n-space vertical>
+		<n-table striped :data="tableData">
+			<thead>
+				<tr>
+					<th>节次</th>
+					<th>周一</th>
+					<th>周二</th>
+					<th>周三</th>
+					<th>周四</th>
+					<th>周五</th>
+					<th>周六</th>
+					<th>周日</th>
+				</tr>
+			</thead>
+			<tbody>
+
+				<tr v-for="time in Object.keys(tableData)" :key="time">
+					<td>{{ time }}</td>
+					<td>
+						<span v-if="tableData[time].length === 0 || !tableData[time][1]">无课</span>
+						<span v-else> {{ tableData[time][1] && tableData[time][1]["startTime"] }} </span>
+					</td>
+					<td>
+						<span v-if="tableData[time].length === 0 || !tableData[time][2]">无课</span>
+						<span v-else> {{ tableData[time][2] && tableData[time][2]["startTime"] }} </span>
+					</td>
+					<td>
+						<span v-if="tableData[time].length === 0 || !tableData[time][3]">无课</span>
+						<span v-else> {{ tableData[time][3] && tableData[time][3]["startTime"] }} </span>
+					</td>
+					<td>
+						<span v-if="tableData[time].length === 0 || !tableData[time][4]">无课</span>
+						<span v-else> {{ tableData[time][4] && tableData[time][4]["startTime"] }} </span>
+					</td>
+					<td>
+						<span v-if="tableData[time].length === 0 || !tableData[time][5]">无课</span>
+						<span v-else> {{ tableData[time][5] && tableData[time][5]["startTime"] }} </span>
+					</td>
+					<td>
+						<span v-if="tableData[time].length === 0 || !tableData[time][6]">无课</span>
+						<span v-else> {{ tableData[time][6] && tableData[time][6]["startTime"] }} </span>
+					</td>
+					<td>
+						<span v-if="tableData[time].length === 0 || !tableData[time][7]">无课</span>
+						<span v-else> {{ tableData[time][7] && tableData[time][7]["startTime"] }} </span>
+					</td>
+				</tr>
+			</tbody>
+		</n-table>
+	</n-space>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref } from "vue";
+import { query_1 } from '~/src/service/api/curriculum'
+// 计算表格的跨行规则
+const spanRule = computed(() => {
+	// 初始化7*8的二维数组，数组中的项表示对应周次对应节次的表格跨行数
+	const spanRule: number[][] = new Array(7).fill(0).map(() => new Array(8).fill(0));
+	for (let day in spanRule) {
+		let i = 0;
+		while (i < 8) {
+			let usableLen = 1;
+			spanRule[day][i] = usableLen;
+			i = i + usableLen;
+		}
+	}
+	return spanRule;
+});
+const params = reactive({
+
+})
+
+//课程表数据
+const tableData = ref([{
+	id: 0,
+	week: 0,
+	startTime: "",
+	endTime: "",
+	roomId: 0,
+	classId: 0,
+	assistantId: 0,
+	teacherId: 0,
+	categoryId: 0,
+	subjectsId: 0,
+	createTime: "",
+	modifyTime: "",
+	createUid: 0,
+	disabled: '',
+}])
+
+
+
+function prsData(tableData) {
+	let arr = {
+		"8:00": {},
+		"9:00": {},
+		"10:00": {},
+		"11:00": {},
+		"12:00": {},
+		"13:00": {},
+		"14:00": {},
+		"15:00": {},
+		"16:00": {},
+		"17:00": {}
+	}
+
+	tableData.map((r) => {
+		if (r.startTime && arr[r.startTime.split(" ")[1]]) {
+			const time = r.startTime.split(" ")[1];
+			const week = r.week;
+			const dayOfWeek = getDayOfWeek(r.startTime);
+			console.log(dayOfWeek);
+			// 检查当前时间段是否已经存在其他课程
+			if (!arr[time][dayOfWeek] ) {
+				arr[time][dayOfWeek] = r;
+			} else {
+				// 如果当前时间段已经有课程，则比较当前课程的周次和星期几，只保留最小的周次和星期几的课程
+				if (week < arr[time][dayOfWeek].week) {
+					arr[time][dayOfWeek] = r;
+				} else if (week === arr[time][dayOfWeek].week && dayOfWeek < getDayOfWeek(arr[time][dayOfWeek].startTime)) {
+					arr[time][dayOfWeek] = r;
+				}
+			}
+		}
+	});
+	console.log("____", arr);
+	return arr;
+}
+
+function getDayOfWeek(dateString) {
+	const date = new Date(dateString);
+	const dayOfWeek = date.getDay();
+	console.log(dayOfWeek);
+	// 将星期几转换为从1开始，而不是0
+	return dayOfWeek === 0 ? 7 : dayOfWeek;
+}
+
+async function fetchCourse() {
+	const res = await query_1(1, 999999, params)
+	tableData.value = prsData(res.data.data)
+	console.log(tableData.value)
+}
+
+fetchCourse()
+</script>
+
+<style scoped>
+th {
+	color: rgb(141, 141, 141);
+	font-size: calc(var(--baseSize, 14px) * 1.1);
+	font-weight: bold;
+}
+
+th,
+td {
+	padding: 16px 12px;
+	font-size: var(--baseSize, 14px);
+	outline: 1px solid rgb(226, 226, 226);
+	text-align: center;
+	color: rgb(99, 99, 99);
+}
+</style>

src/views/management/curriculum/indexcpp.vue

@@ -0,0 +1,104 @@
+<template>
+	<n-space vertical>
+		<n-table striped>
+			<thead>
+				<tr>
+					<th>节次</th>
+					<th>周一</th>
+					<th>周二</th>
+					<th>周三</th>
+					<th>周四</th>
+					<th>周五</th>
+					<th>周六</th>
+					<th>周日</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="i in 8" :key="i">
+					<td>{{ i }}</td>
+					<td v-for="j in 7" v-show="spanRule[j - 1][i - 1]" :rowspan="spanRule[j - 1][i - 1]"
+						:class="{ 'course-exist': data.weekItemSite[j.toString() + i] }" :key="j">
+					</td>
+				</tr>
+			</tbody>
+			<div style="height: 100px;text-align: center;"></div>
+			<tbody>
+				<tr v-for="i in 8" :key="i">
+					<td>{{ i }}</td>
+					<td v-for="j in 7" v-show="spanRule[j - 1][i - 1]" :rowspan="spanRule[j - 1][i - 1]"
+						:class="{ 'course-exist': data.weekItemSite[j.toString() + i] }" :key="j"></td>
+				</tr>
+			</tbody>
+		</n-table>
+	</n-space>
+</template>
+
+<script setup lang="ts">
+import { reactive, computed } from "vue";
+
+interface WeekItem {
+	arrange: {
+		teacher: string;
+		area: string;
+		Cid: string;
+		date: string;
+	};
+	course: string;
+}
+
+interface Data {
+	courseList: any[];
+	weekList: WeekItem[];
+	weekItemSite: Record<string, any>;
+}
+
+const data: Data = reactive({
+	courseList: [],
+	weekList: [],
+	weekItemSite: {},
+});
+
+// 计算表格的跨行规则
+const spanRule = computed(() => {
+	// 初始化7*8的二维数组，数组中的项表示对应周次对应节次的表格跨行数
+	const spanRule: number[][] = new Array(7).fill(0).map(() => new Array(8).fill(0));
+	// for (let item of data.weekList) {
+	// 	// 课程占用的节次
+	// 	// let slotLen = item.arrange.timeslot.length;
+	// 	// spanRule[item.arrange.day - 1][item.arrange.timeslot[0] - 1] = slotLen;
+	// }
+	// 进行默认跨行规则
+	for (let day in spanRule) {
+		let i = 0;
+		while (i < 8) {
+			// 如果当前节次存在课程，跳到该课程结束的节次
+			if (spanRule[day][i]) i = i + spanRule[day][i];
+			else {
+				let usableLen = 1;
+				if (!spanRule[day][i + 1] && i !== 3 && i + 1 !== 2 && i + 1 !== 6) usableLen = 1;
+				spanRule[day][i] = usableLen;
+				i = i + usableLen;
+			}
+		}
+	}
+	return spanRule;
+});
+
+</script>
+
+<style  scoped>
+th {
+	color: rgb(141, 141, 141);
+	font-size: calc(var(--baseSize, 14px) * 1.1);
+	font-weight: bold;
+}
+
+th,
+td {
+	padding: 16px 12px;
+	font-size: var(--baseSize, 14px);
+	outline: 1px solid rgb(226, 226, 226);
+	text-align: center;
+	color: rgb(99, 99, 99);
+}
+</style>

src/views/management/curriculum/indexppp.vue

@@ -0,0 +1,108 @@
+<template>
+	<n-space vertical>
+		<n-table striped :data="tableData">
+			<thead>
+				<tr>
+					<th>节次</th>
+					<th>周一</th>
+					<th>周二</th>
+					<th>周三</th>
+					<th>周四</th>
+					<th>周五</th>
+					<th>周六</th>
+					<th>周日</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="i in 8" :key="i">
+					<td>{{ i }}</td>
+					<td v-for="j in 7" v-show="spanRule[j - 1][i - 1]" :rowspan="spanRule[j - 1][i - 1]" :key="j">
+						<div v-if="tableData[j+i]">
+
+							<p>{{ i + "-" + (i + spanRule[j - 1][i - 1] - 1) + " 节" }}</p>
+						</div>
+					</td>
+				</tr>
+			</tbody>
+		</n-table>
+	</n-space>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive, ref } from "vue";
+import { query_1 } from '~/src/service/api/curriculum'
+// 计算表格的跨行规则
+const spanRule = computed(() => {
+	// 初始化7*8的二维数组，数组中的项表示对应周次对应节次的表格跨行数
+	const spanRule: number[][] = new Array(7).fill(0).map(() => new Array(8).fill(0));
+	// for(let item in tableData.value){
+
+	// }
+	for (let day in spanRule) {
+		let i = 0;
+		while (i < 8) {
+			let usableLen = 1;
+			spanRule[day][i] = usableLen;
+			i = i + usableLen;
+		}
+	}
+	return spanRule;
+});
+const params = reactive({
+	id: 0,
+	week: 0,
+	startTime: "",
+	endTime: "",
+	roomId: 0,
+	classId: 0,
+	assistantId: 0,
+	teacherId: 0,
+	categoryId: 0,
+	subjectsId: 0,
+	createTime: "",
+	modifyTime: "",
+	createUid: 0,
+	disabled: '',
+})
+
+//课程表数据
+const tableData = ref([{
+	id: 0,
+	week: 0,
+	startTime: "",
+	endTime: "",
+	roomId: 0,
+	classId: 0,
+	assistantId: 0,
+	teacherId: 0,
+	categoryId: 0,
+	subjectsId: 0,
+	createTime: "",
+	modifyTime: "",
+	createUid: 0,
+	disabled: '',
+}])
+async function fetchCourse() {
+	const res = await query_1(1, 10, params)
+	tableData.value = res.data.data
+	console.log( tableData.value )
+}
+fetchCourse()
+</script>
+
+<style scoped>
+th {
+	color: rgb(141, 141, 141);
+	font-size: calc(var(--baseSize, 14px) * 1.1);
+	font-weight: bold;
+}
+
+th,
+td {
+	padding: 16px 12px;
+	font-size: var(--baseSize, 14px);
+	outline: 1px solid rgb(226, 226, 226);
+	text-align: center;
+	color: rgb(99, 99, 99);
+}
+</style>

src/views/management/sort/index.vue

@@ -2,7 +2,6 @@
 	<div class="h-full overflow-hidden">
 		<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" @click="addTableData">
@@ -14,38 +13,41 @@
 							删除
 						</n-button>
 						<!-- 添加查询按钮 -->
-						<n-button type="primary" @click="">
+						<n-button type="primary" >
 							<icon-simple-line-icons:magnifier class="mr-4px text-16px" />
 							查询
 						</n-button>
-						<div class="mr-5px"></div>
-						<n-input-group>
-							<n-input-number :style="{ width: '98%', marginRight: '2%' }" v-model:value="conditionParams.id"
-								placeholder="请输入ID..." clearable />
-							<n-input :style="{ width: '98%', marginRight: '2%' }" :value="conditionParams.name"
-								@input="event => conditionParams.name = event" placeholder="请输入学科名称..." clearable />
-							<n-input :style="{ width: '98%', marginRight: '2%' }" :value="conditionParams.description"
-								@input="event => conditionParams.description = event" placeholder="请输入学科描述..." clearable />
-							<n-input-number :style="{ width: '120%', marginRight: '2%' }" v-model:value="conditionParams.createUid"
-								placeholder="请输入用户ID..." clearable />
-							<n-input :style="{ width: '98%', marginRight: '2%' }" v-model:value="conditionParams.createTime"
-								@input="event => conditionParams.createTime = event" placeholder="请输入创建时间..." clearable />
-							<n-input :style="{ width: '98%', marginRight: '2%' }" v-model:value="conditionParams.modifyTime"
-								@input="event => conditionParams.modifyTime = event" placeholder="请输入修改时间..." clearable />
-							<n-select :options="userStatusOptions" :style="{ width: '98%', marginRight: '2%' }"
-								v-model:value="conditionParams.disabled" @input="event => conditionParams.disabled = event"
-								placeholder="输入查询状态..." clearable />
-							<n-button type="primary" ghost @click="searchCondition()">
-								搜索
-							</n-button>
-						</n-input-group>
+						<!-- <div class="mr-5px"></div> -->
 					</n-space>
+				<div class="pb-10px"></div>
+				<n-space class="pb-10px" justify="space-between">
+					<n-input-group>
+						<n-input-number :style="{ width: '98%', marginRight: '1%' }" v-model:value="conditionParams.id"
+							placeholder="请输入ID..." clearable />
+						<n-input :style="{ width: '98%', marginRight: '1%' }" :value="conditionParams.name"
+							@input="event => conditionParams.name = event" placeholder="请输入学科名称..." clearable />
+						<n-input :style="{ width: '98%', marginRight: '1%' }" :value="conditionParams.description"
+							@input="event => conditionParams.description = event" placeholder="请输入学科描述..." clearable />
+						<n-input-number :style="{ width: '98%', marginRight: '1%' }" v-model:value="conditionParams.createUid"
+							placeholder="请输入用户ID..." clearable />
+						<n-input :style="{ width: '98%', marginRight: '1%' }" v-model:value="conditionParams.createTime"
+							@input="event => conditionParams.createTime = event" placeholder="请输入创建时间..." clearable />
+						<n-input :style="{ width: '98%', marginRight: '1%' }" v-model:value="conditionParams.modifyTime"
+							@input="event => conditionParams.modifyTime = event" placeholder="请输入修改时间..." clearable />
+						<n-select :options="userStatusOptions" :style="{ width: '98%', marginRight: '1%' }"
+							v-model:value="conditionParams.disabled" @input="event => conditionParams.disabled = event"
+							placeholder="输入查询状态..." clearable />
+						<n-button type="primary" ghost @click="searchCondition()">
+							搜索
+						</n-button>
+					</n-input-group>
 					<n-space align="center" :size="18">
 						<n-button size="small" type="primary" @click="searchCondition">
 							<icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': loading }" />
 							刷新表格
 						</n-button>
 					</n-space>
+
 				</n-space>
 				<n-data-table :columns="columns" :data="tableData" :loading="loading" :row-key="rowKey"
 					@update:checked-row-keys="handleCheck" />