✨ 电脑管理、人员管理:增加查询功能

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

@@ -22,6 +22,8 @@ const loading = ref();
 const showDialog = ref(false);
 // const isDrawerVisible = ref(false);
 
+const searchComputer = ref('');
+
 const computerInfo = ref([]);
 const shopOptions = ref([]);
 const userOptions = ref([]);
@@ -33,8 +35,9 @@ async function fetchCardData() {
 	const query = {
 		page: tableOptions.value.page,
 		limit: tableOptions.value.limit,
+    computerNumber: searchComputer.value,
 	};
-	await useTableData(api.getCardData, query, tableOptions, loading);
+	await useTableData(api.getCardData, query, tableOptions);
 }
 
 // 打开创建弹窗
@@ -102,6 +105,7 @@ onMounted(() => {
 			<div>
 				<span class="font-bold text-xl">电脑信息概览</span>
 				<el-divider class="text-3xl" direction="vertical" />
+        <el-input v-model="searchComputer" clearable placeholder="电脑编号" style="width: 200px" @change="fetchCardData"></el-input>
 			</div>
 			<span>
 				<el-button :icon="Plus" bg text type="primary" @click="addComputer">添 加</el-button>
@@ -110,7 +114,7 @@ onMounted(() => {
 	</el-card>
 	<!-- 卡片展示区域 -->
 	<el-card class="flex-grow" style="border: none" :body-style="{ padding: '0px' }">
-		<el-card v-loading="loading" class="card-container" shadow="never" style="border: none">
+		<el-card v-loading="tableOptions.loading" class="card-container" shadow="never" style="border: none">
 			<el-row :gutter="20">
 				<el-col v-for="(item, index) in tableOptions.data" :key="index" :lg="4" :md="6" :sm="8" :xl="4" :xs="12" class="my-2.5">
           <el-card class="item-card" shadow="hover" :body-style="{ padding: '20px 20px 5px 20px' }">

src/views/computer-information/useColumns.tsx

@@ -1,7 +1,7 @@
 export const ComputerCurrentColumns = [
-  { field: 'platformNumber', title: '平台编号'},
+  { field: 'platformNumber', title: '店铺编号'},
   { field: 'platform', title: '平台'},
-  { field: 'platformName', title: '平台名称'},
+  { field: 'platformName', title: '店铺名称'},
   { field: 'brandName', title: '品牌'},
   { field: 'operatorName', title: '运营'},
   { field: 'company', title: '所属公司'},

src/views/employee-information/api.ts

@@ -58,4 +58,13 @@ export function updateEmployeeDetail(query: any) {
 			'Content-Type': 'multipart/form-data',
 		}
 	});
+}
+
+// 人员列表
+export function getEmployeeList(query: any) {
+	return request({
+		url: apiPrefix + 'box/',
+		method: 'GET',
+		params: query,
+	});
 }

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

@@ -43,11 +43,11 @@ const rules = reactive<FormRules<RuleForm>>({
 	department: [{ required: true, message: '请输入部门', trigger: 'blur' }],
 	phone: [
 		// { required: true, message: '请输入电话号码', trigger: 'blur' },
-		{ pattern: /^[0-9]{11}$/, message: '请输入正确的手机号码', trigger: 'blur' },
+		// { pattern: /^[0-9]{11}$/, message: '请输入正确的手机号码', trigger: 'blur' },
 	],
 	email: [
 		// { required: true, message: '请输入邮箱', trigger: 'blur' },
-		{ type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' },
+		// { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' },
 	],
 });
 

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

@@ -47,11 +47,12 @@ const rules = reactive<FormRules<RuleForm>>({
 	department: [{ required: true, message: '请输入部门', trigger: 'blur' }],
   phone: [
       // { required: true, message: '请输入电话号码', trigger: 'blur' },
-    { pattern: /^[0-9]{11}$/, message: '请输入正确的手机号码', trigger: 'blur' },
+    // { pattern: /^[0-9]{11}$/, message: '请输入正确的手机号码', trigger: 'blur' },
 ],
   email: [
       // { required: true, message: '请输入邮箱', trigger: 'blur' },
-    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }],
+    // { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
+  ],
 });
 
 

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

@@ -8,15 +8,18 @@ import { useRouter } from 'vue-router';
 import { ref } from 'vue';
 import { usePagination } from '/@/utils/usePagination';
 import { useTableData } from '/@/utils/useTableData';
-import { EditPen, Picture as IconPicture, Plus, Search } from '@element-plus/icons-vue';
+import { Picture as IconPicture, Plus, Search } from '@element-plus/icons-vue';
 import * as api from '/@/views/employee-information/api';
-import { useResponse } from '/@/utils/useResponse';
-import EditEmployeeInfo from '/@/views/employee-information/components/EditEmployeeInfo.vue';
 import CreateEmployee from '/@/views/employee-information/components/CreateEmployee.vue';
 import { ElCol } from 'element-plus';
 
 const router = useRouter();
-const loading = ref();
+// const loading = ref(false);
+
+const searchName = ref([]);
+const employeeOptions = ref([]);
+const searchDepartment = ref('');
+
 // 创建弹窗
 const showDialog = ref(false);
 // const isDrawerVisible = ref(false);
@@ -29,8 +32,10 @@ async function fetchCardData() {
 	const query = {
 		page: tableOptions.value.page,
 		limit: tableOptions.value.limit,
+		name: Array.isArray(searchName.value) ? searchName.value.join(',') : searchName.value,
+		department: searchDepartment.value,
 	};
-	await useTableData(api.getCardData, query, tableOptions,loading);
+	await useTableData(api.getCardData, query, tableOptions);
 }
 
 async function addEmployee() {
@@ -46,20 +51,24 @@ const checkItem = (item) => {
 	});
 };
 
-// async function editItem(item) {
-// 	const res = await useResponse(item.id, api.getEmployeeDetailOverview);
-// 	employeeInfo.value = res.data;
-// 	if (employeeInfo.value) {
-// 		isDrawerVisible.value = true; // 显示 Drawer
-// 	}
-// }
-
 const getImageUrl = (images) => {
 	// 如果有图片，返回第一个图片的 image_url，否则返回占位图
 	return images.length > 0 ? images[0].image_url : '';
 };
 
+async function fetchUsersSelect() {
+	try {
+		const resp = await api.getEmployeeList();
+		employeeOptions.value = resp.data.map((item: any) => {
+			return { value: item.id, label: item.name };
+		});
+	} catch (e) {
+		console.error('Failed to fetch operation select:', e);
+	}
+}
+
 onMounted(() => {
+	fetchUsersSelect();
 	fetchCardData();
 });
 </script>
@@ -71,6 +80,20 @@ onMounted(() => {
 			<div>
 				<span class="font-bold text-xl">人员信息概览</span>
 				<el-divider class="text-3xl" direction="vertical" />
+				<el-select
+					v-model="searchName"
+					clearable
+					collapse-tags
+					collapse-tags-tooltip
+					filterable
+					multiple
+          placeholder="姓名"
+					style="width: 200px;padding-right: 10px;"
+					@change="fetchCardData"
+				>
+					<el-option v-for="item in employeeOptions" :key="item.label" :label="item.label" :value="item.label" />
+				</el-select>
+				<el-input v-model="searchDepartment" clearable placeholder="部门" style="width: 200px" @change="fetchCardData"></el-input>
 			</div>
 			<span>
 				<el-button :icon="Plus" bg text type="primary" @click="addEmployee">添 加</el-button>
@@ -78,12 +101,12 @@ onMounted(() => {
 		</div>
 	</el-card>
 	<!-- 卡片展示区域 -->
-  <el-card class="flex-grow" style="border: none" :body-style="{ padding: '0px' }">
-		<el-card v-loading="loading" class="card-container" shadow="never" style="border: none">
+	<el-card :body-style="{ padding: '0px' }" class="flex-grow" style="border: none">
+		<el-card v-loading="tableOptions.loading" class="card-container" shadow="never" style="border: none">
 			<el-row :gutter="20">
-        <el-col v-for="(item, index) in tableOptions.data" :key="index" :lg="4" :md="6" :sm="8" :xl="4" :xs="12" class="my-2.5">
-        <el-card class="item-card" shadow="hover" :body-style="{ padding: '20px 20px 5px 20px' }">
-          <div class="image-wrapper">
+				<el-col v-for="(item, index) in tableOptions.data" :key="index" :lg="4" :md="6" :sm="8" :xl="4" :xs="12" class="my-2.5">
+					<el-card :body-style="{ padding: '20px 20px 5px 20px' }" class="item-card" shadow="hover">
+						<div class="image-wrapper">
 							<el-image :src="getImageUrl(item.images)" alt="电脑图片" class="card-image">
 								<template #error>
 									<el-icon class="card-image" style="font-size: 4rem">
@@ -94,34 +117,34 @@ onMounted(() => {
 						</div>
 						<hr style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)" />
 						<div class="card-content">
-              <div class="text-wrapper">
+							<div class="text-wrapper">
 								<span style="color: #808d97; font-weight: 500">姓名: </span>
 								<span style="font-weight: 500">{{ item.name }}</span>
 							</div>
-              <div class="text-wrapper">
+							<div class="text-wrapper">
 								<span style="color: #808d97; font-weight: 500">部门: </span>
 								<span style="font-weight: 500">{{ item.department }}</span>
 							</div>
 						</div>
-            <template #footer>
-              <div style="text-align: center; padding: 0 10px">
-                <!--<el-button :icon="Search" bg circle text type="primary" @click="checkItem(item)" />-->
-                <!--<el-button :icon="EditPen" bg circle text type="warning" @click="editItem(item)" />-->
-                <el-button :icon="Search" plain round style="width: 100%" type="primary" @click="checkItem(item)"> 查看详情 </el-button>
-              </div>
-            </template>
+						<template #footer>
+							<div style="text-align: center; padding: 0 10px">
+								<!--<el-button :icon="Search" bg circle text type="primary" @click="checkItem(item)" />-->
+								<!--<el-button :icon="EditPen" bg circle text type="warning" @click="editItem(item)" />-->
+								<el-button :icon="Search" plain round style="width: 100%" type="primary" @click="checkItem(item)"> 查看详情 </el-button>
+							</div>
+						</template>
 					</el-card>
 				</el-col>
 			</el-row>
 		</el-card>
-		<div class="pagination-container" >
+		<div class="pagination-container">
 			<el-pagination
 				v-model:current-page="tableOptions.page"
 				v-model:page-size="tableOptions.limit"
 				:page-sizes="[6, 12, 24, 36, 48, 60]"
 				:total="tableOptions.total"
 				background
-				layout="sizes, prev, pager, next, total"
+				layout="sizes, prev, pager, next, total, jumper"
 				@change="handlePageChange"
 			/>
 		</div>
@@ -134,62 +157,64 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .card-container {
-  margin-bottom: 30px;
-  padding:0;
+	margin-bottom: 30px;
+	padding: 0;
 }
 
 .item-card {
-  border-radius: 10px;
-  overflow: hidden;
-  position: relative;
+	border-radius: 10px;
+	overflow: hidden;
+	position: relative;
 }
 
 .card-image {
-  width: 100%;
-  height: 150px;
-  object-fit: cover;
-  padding-bottom: 10px;
+	width: 100%;
+	height: 150px;
+	object-fit: cover;
+	padding-bottom: 10px;
 }
 
 .card-content {
-  padding-top: 10px;
-  font-size: 14px;
-  max-height: 60px; /* 根据需要设置最大高度 */
-  overflow: hidden; /* 隐藏超出部分 */
-  text-overflow: ellipsis; /* 省略号效果 */
-  display: -webkit-box; /* 适用于多行文本处理 */
-  -webkit-box-orient: vertical; /* 垂直排列 */
+	padding-top: 10px;
+	font-size: 14px;
+	max-height: 60px; /* 根据需要设置最大高度 */
+	overflow: hidden; /* 隐藏超出部分 */
+	text-overflow: ellipsis; /* 省略号效果 */
+	display: -webkit-box; /* 适用于多行文本处理 */
+	-webkit-box-orient: vertical; /* 垂直排列 */
 }
 
 .text-wrapper {
-  white-space: nowrap; /* 不换行 */
-  overflow: hidden; /* 隐藏超出部分 */
-  text-overflow: ellipsis; /* 省略号效果 */
+	white-space: nowrap; /* 不换行 */
+	overflow: hidden; /* 隐藏超出部分 */
+	text-overflow: ellipsis; /* 省略号效果 */
 }
 
 .image-wrapper {
-  width: 150px; /* 设置固定宽度 */
-  height: 150px; /* 设置固定高度 */
-  padding-bottom: 10px;
-  margin: 0 auto; /* 横向居中 */
-  overflow: hidden; /* 隐藏溢出部分 */
+	width: 150px; /* 设置固定宽度 */
+	height: 150px; /* 设置固定高度 */
+	padding-bottom: 10px;
+	margin: 0 auto; /* 横向居中 */
+	overflow: hidden; /* 隐藏溢出部分 */
 }
 
 .card-footer {
-  display: flex;
-  justify-content: flex-end;
-  // padding: 10px;
+	display: flex;
+	justify-content: flex-end;
+	// padding: 10px;
 }
 
 .pagination-container {
-  display: flex;
-  // justify-content: flex-end;
-  // margin-bottom: 20px;
-  position: absolute; right: 30px; bottom: 35px
+	display: flex;
+	// justify-content: flex-end;
+	// margin-bottom: 20px;
+	position: absolute;
+	right: 30px;
+	bottom: 35px;
 }
 
 :deep(.el-card__footer) {
-  border-top: none;
-  padding: 0 0 10px 0;
+	border-top: none;
+	padding: 0 0 10px 0;
 }
 </style>

src/views/employee-information/useColumns.tsx

@@ -1,5 +1,5 @@
 export const EmployeeShopColumns = [
-  { field: 'platformNumber', title: '平台编号'},
+  { field: 'platformNumber', title: '店铺编号'},
   { field: 'country', title: '店铺区域'},
   { field: 'platform', title: '平台'},
   { field: 'brandName', title: '品牌'},