🎨 电脑、人员管理界面修改

src/views/computer-information/components/ComputerDetail.vue

@@ -12,6 +12,7 @@ import { useTableData } from '/@/utils/useTableData';
 import { usePagination } from '/@/utils/usePagination';
 import EditComputerInfo from '/@/views/computer-information/components/EditComputerInfo.vue';
 import { ref } from 'vue';
+import { getCurrentTableData, getPastTableData } from '../api';
 
 const route = useRoute();
 const id = route.query.id;
@@ -24,7 +25,7 @@ const shopOptions = ref([]);
 const userOptions = ref([]);
 
 const currentView = ref('current');
-const { tableOptions, handlePageChange } = usePagination(fetchComputerData);
+// const { tableOptions, handlePageChange } = usePagination(fetchComputerData);
 
 const gridOptions: any = reactive({
 	border: 'inner',
@@ -45,11 +46,11 @@ const gridOptions: any = reactive({
 	columnConfig: {
 		resizable: true,
 	},
-	// pagerConfig: {
-	// 	total: tableOptions.value.total,
-	// 	page: tableOptions.value.page,
-	// 	limit: tableOptions.value.limit,
-	// },
+	pagerConfig: {
+		total: 0,
+    currentPage: 1,
+    pageSize: 20,
+	},
 	loading: false,
 	loadingConfig: {
 		icon: 'vxe-icon-indicator roll',
@@ -68,42 +69,52 @@ async function fetchComputerDetailOverview() {
   computerOverview.value = res.data;
 }
 
-// const gridEvents = {
-//   pageChange({ currentPage, pageSize }) {
-//     if (gridOptions.pagerConfig) {
-//       gridOptions.pagerConfig.currentPage = currentPage;
-//       gridOptions.pagerConfig.pageSize = pageSize;
-//       fetchComputerData(currentView.value);
-//     }
-//   }
-// };
+const gridEvents = {
+  pageChange({ currentPage, pageSize }) {
+    console.log("=>(ComputerDetail.vue:73) pageSize", pageSize);
+    console.log("=>(ComputerDetail.vue:73) currentPage", currentPage);
+    if (gridOptions.pagerConfig) {
+      gridOptions.pagerConfig.currentPage = currentPage;
+      gridOptions.pagerConfig.pageSize = pageSize;
+      fetchComputerData(currentView.value);
+    }
+  }
+};
 
 // 当前信息、历史记录
 async function fetchComputerData(view) { // 默认为当前视图
   const query = {
-    // page: gridOptions.pagerConfig.currentPage,
-    // limit: gridOptions.pagerConfig.pageSize,
+    page: gridOptions.pagerConfig.currentPage,
+    limit: gridOptions.pagerConfig.pageSize,
+    computerNumber : computerOverview.value.computerNumber,
   };
 
   switch (view) {
     case 'current':
       gridOptions.columns = ComputerCurrentColumns;
       currentView.value = 'current';
-      query.computerNumber = computerOverview.value.computerNumber;
-      await useTableData(api.getCurrentTableData, query, gridOptions);
+      const resp = await getCurrentTableData(query);
+      gridOptions.data = resp.data;
+      gridOptions.pagerConfig.total = resp.total;
+      // await useTableData(api.getCurrentTableData, query, gridOptions);
       break;
     case 'history':
       gridOptions.columns = ComputerPastColumns;
       currentView.value = 'history';
       query.id = id;
-      await useTableData(api.getPastTableData, query, gridOptions);
+      // await useTableData(api.getPastTableData, query, gridOptions);
+      const ret = await getPastTableData(query);
+      gridOptions.data = ret.data;
+      gridOptions.pagerConfig.total = ret.total;
       break;
   }
 }
 
 function switchView(view) {
-  if (view !== currentView.value) { // 只有在不同的视图时才切换
-    fetchComputerData(view); // 调用 fetchComputerData 来加载新的视图数据
+  if (view !== currentView.value) {
+    gridOptions.pagerConfig.currentPage = 1;
+    gridOptions.pagerConfig.pageSize = 20;
+    fetchComputerData(view);
   }
 }
 
@@ -221,16 +232,6 @@ onMounted(async () => {
 					<el-button :type="currentView === 'current' ? 'primary' : 'default'" @click="switchView('current')"> 当前信息 </el-button>
 					<el-button :type="currentView === 'history' ? 'primary' : 'default'" @click="switchView('history')"> 历史记录 </el-button>
 				</template>
-				<!--<template #pager>-->
-				<!--	<vxe-pager-->
-				<!--		v-model:currentPage="tableOptions.page"-->
-				<!--		v-model:pageSize="tableOptions.limit"-->
-				<!--		:total="tableOptions.total"-->
-				<!--		size="small"-->
-				<!--		@page-change="handlePageChange"-->
-				<!--	>-->
-				<!--	</vxe-pager>-->
-				<!--</template>-->
 			</vxe-grid>
 		</el-card>
     <!-- 编辑 Drawer -->

src/views/computer-information/components/CreateComputer.vue

@@ -141,6 +141,7 @@ onMounted(() => {});
 					:on-exceed="handleExceed"
 					action="#"
 					list-type="picture-card"
+          accept="image/*"
 				>
 					<el-icon>
 						<Plus />

src/views/computer-information/components/EditComputerInfo.vue

@@ -173,6 +173,7 @@ function handleImageError(file) {
 						:on-exceed="handleExceed"
 						action="#"
 						list-type="picture-card"
+            accept="image/*"
 					>
 						<el-icon>
 							<Plus />

src/views/computer-information/components/InfoCard.vue

@@ -145,7 +145,7 @@ onMounted(() => {
 				</el-col>
 			</el-row>
 		</el-card>
-		<div class="pagination-container" style="position: absolute; right: 40px; bottom: 50px">
+		<div class="pagination-container" style="position: absolute; right: 30px; bottom: 30px">
 			<el-pagination
 				v-model:current-page="tableOptions.page"
 				v-model:page-size="tableOptions.limit"

src/views/employee-information/components/CreateEmployee.vue

@@ -122,6 +122,7 @@ onMounted(() => {});
 					:on-exceed="handleExceed"
 					action="#"
 					list-type="picture-card"
+          accept="image/*"
 				>
 					<el-icon>
 						<Plus />

src/views/employee-information/components/EditEmployeeInfo.vue

@@ -46,7 +46,8 @@ const rules = reactive<FormRules<RuleForm>>({
 	name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
 	department: [{ required: true, message: '请输入部门', trigger: 'blur' }],
   phone: [{ required: true, message: '请输入电话号码', trigger: 'blur' },
-    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
+    { pattern: /^[0-9]{11}$/, message: '请输入正确的手机号码', trigger: 'blur' },
+],
   email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },
     { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }],
 });
@@ -152,6 +153,7 @@ onMounted(() => {});
 					:on-exceed="handleExceed"
 					action="#"
 					list-type="picture-card"
+          accept="image/*"
 				>
 					<el-icon>
 						<Plus />

src/views/employee-information/components/InfoCard.vue

@@ -114,7 +114,7 @@ onMounted(() => {
 				</el-col>
 			</el-row>
 		</el-card>
-		<div class="pagination-container" style="position: absolute; right: 40px; bottom: 50px">
+		<div class="pagination-container" >
 			<el-pagination
 				v-model:current-page="tableOptions.page"
 				v-model:page-size="tableOptions.limit"
@@ -172,8 +172,9 @@ onMounted(() => {
 
 .pagination-container {
   display: flex;
-  justify-content: flex-end;
+  // justify-content: flex-end;
   // margin-bottom: 20px;
+  position: absolute; right: 30px; bottom: 35px
 }
 
 :deep(.el-card__footer) {