test

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

@@ -12,10 +12,8 @@ import * as api from '/@/views/computer-information/api';
 import { useRouter } from 'vue-router';
 import { usePagination } from '/@/utils/usePagination';
 import { useTableData } from '/@/utils/useTableData';
-import EditComputerInfo from '/@/views/computer-information/components/EditComputerInfo.vue';
 import { useResponse } from '/@/utils/useResponse';
 import CreateComputer from '/@/views/computer-information/components/CreateComputer.vue';
-import { getShopFilterList } from '/@/views/computer-information/api';
 
 const router = useRouter();
 const loading = ref();
@@ -36,29 +34,29 @@ const { tableOptions, handlePageChange } = usePagination(fetchCardData);
 tableOptions.value.limit = 12;
 
 async function fetchCardData() {
-  const query = {
-    page: tableOptions.value.page,
-    limit: tableOptions.value.limit,
-    computerNumber: searchComputer.value,
-    shop: searchNumber.value.join(','),
-    station: searchStation.value,
-  };
-  await useTableData(api.getCardData, query, tableOptions);
+	const query = {
+		page: tableOptions.value.page,
+		limit: tableOptions.value.limit,
+		computerNumber: searchComputer.value,
+		shop: searchNumber.value.join(','),
+		station: searchStation.value,
+	};
+	await useTableData(api.getCardData, query, tableOptions);
 }
 
 // 打开创建弹窗
 async function addComputer() {
-  showDialog.value = true;
+	showDialog.value = true;
 }
 
 const checkItem = (item) => {
-  router.push({
-    path: '/computer/detail',
-    query: {
-      id: item.id,
-      // computerNumber: item.computerNumber,
-    },
-  });
+	router.push({
+		path: '/computer/detail',
+		query: {
+			id: item.id,
+			// computerNumber: item.computerNumber,
+		},
+	});
 };
 
 // async function editItem(item) {
@@ -71,203 +69,208 @@ const checkItem = (item) => {
 
 // 处理图片地址
 const getImageUrl = (images) => {
-  // 如果有图片，返回第一个图片的 image_url，否则返回占位图
-  return images.length > 0 ? images[0].image_url : '';
+	// 如果有图片，返回第一个图片的 image_url，否则返回占位图
+	return images.length > 0 ? images[0].image_url : '';
 };
 
 async function fetchShopOptions() {
-  try {
-    const resp = await useResponse(null, api.getShopList);
-    shopOptions.value = resp.data.map((item: any) => {
-      return { value: item.id, label: item.platformNumber };
-    });
-  } catch (e) {
-    console.log('error', e);
-  }
+	try {
+		const resp = await useResponse(null, api.getShopList);
+		shopOptions.value = resp.data.map((item: any) => {
+			return { value: item.id, label: item.platformNumber };
+		});
+	} catch (e) {
+		console.log('error', e);
+	}
 }
 
 async function fetchUserOptions() {
-  try {
-    const resp = await useResponse(null, api.getUserList);
-    userOptions.value = resp.data.map((item: any) => {
-      return { value: item.id, label: item.name };
-    });
-  } catch (e) {
-    console.log('error', e);
-  }
+	try {
+		const resp = await useResponse(null, api.getUserList);
+		userOptions.value = resp.data.map((item: any) => {
+			return { value: item.id, label: item.name };
+		});
+	} catch (e) {
+		console.log('error', e);
+	}
 }
 
 async function fetchShopFilterOptions() {
-  try {
-    const resp = await useResponse(null, api.getShopFilterList);
-    numberOptions.value = resp.data.platformNumber
-  } catch (e) {
-    console.log('error', e);
-  }
+	try {
+		const resp = await useResponse(null, api.getShopFilterList);
+		numberOptions.value = resp.data.platformNumber;
+	} catch (e) {
+		console.log('error', e);
+	}
 }
 
-
 onMounted(() => {
-  fetchCardData();
-  fetchShopOptions();
-  fetchUserOptions();
-  fetchShopFilterOptions();
+	fetchCardData();
+	fetchShopOptions();
+	fetchUserOptions();
+	fetchShopFilterOptions();
 });
 </script>
 
 <template>
-  <!-- 标题区域 -->
-  <el-card class="mb-5" style="border: none">
-    <div class="flex justify-between items-baseline">
-      <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;padding-right: 10px;" @change="fetchCardData"></el-input>
-        <el-select
-            v-model="searchNumber"
-            clearable
-            collapse-tags
-            collapse-tags-tooltip
-            filterable
-            multiple
-            placeholder="店铺编号"
-            style="width: 200px;padding-right: 10px;"
-            @change="fetchCardData"
-        >
-          <el-option v-for="item in numberOptions" :key="item" :label="item" :value="item" />
-        </el-select>
-        <el-input v-model="searchStation" clearable placeholder="位置" style="width: 200px" @change="fetchCardData"></el-input>
-      </div>
-      <span>
+	<!-- 标题区域 -->
+	<el-card class="mb-5" style="border: none">
+		<div class="flex justify-between items-baseline">
+			<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; padding-right: 10px"
+					@change="fetchCardData"
+				></el-input>
+				<el-select
+					v-model="searchNumber"
+					clearable
+					collapse-tags
+					collapse-tags-tooltip
+					filterable
+					multiple
+					placeholder="店铺编号"
+					style="width: 200px; padding-right: 10px"
+					@change="fetchCardData"
+				>
+					<el-option v-for="item in numberOptions" :key="item" :label="item" :value="item" />
+				</el-select>
+				<el-input v-model="searchStation" clearable placeholder="位置" style="width: 200px" @change="fetchCardData"></el-input>
+			</div>
+			<span>
 				<el-button :icon="Plus" bg text type="primary" @click="addComputer">添 加</el-button>
 			</span>
-    </div>
-  </el-card>
-  <!-- 卡片展示区域 -->
-  <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 :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">
-                    <icon-picture />
-                  </el-icon>
-                </template>
-              </el-image>
-            </div>
-            <hr style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)" />
-            <div class="card-content">
-              <div class="text-wrapper">
-                <span style="color: #808d97; font-weight: 500">电脑编号: </span>
-                <span style="font-weight: 500">{{ item.computerNumber }}</span>
-              </div>
-              <div class="text-wrapper">
-                <span style="color: #808d97; font-weight: 500">所属店铺: </span>
-                <span style="font-weight: 500">{{ item.shopName }}</span>
-              </div>
-              <div class="text-wrapper">
-                <span style="color: #808d97; font-weight: 500">电脑位置: </span>
-                <span style="font-weight: 500">{{ item.station }}</span>
-              </div>
-            </div>
-            <!--<template #footer>-->
-            <!--  <div style="text-align: center; padding: 0 10px">-->
-            <!--    <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" style="position: absolute; right: 30px; bottom: 30px">
-      <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, jumper"
-          @change="handlePageChange"
-      />
-    </div>
-  </el-card>
-  <!-- 新增 Dialog -->
-  <CreateComputer v-model="showDialog" :shopOptions :userOptions @refresh="fetchCardData"></CreateComputer>
-  <!-- 编辑 Drawer -->
-  <!--<EditComputerInfo-->
-  <!--	v-if="isDrawerVisible"-->
-  <!--	v-model="isDrawerVisible"-->
-  <!--	:computerInfo-->
-  <!--	:computerNumber="computerInfo.computerNumber"-->
-  <!--	:shopOptions="shopOptions"-->
-  <!--	:userOptions="userOptions"-->
-  <!--	@refresh="fetchCardData"-->
-  <!--/>-->
+		</div>
+	</el-card>
+	<!-- 卡片展示区域 -->
+	<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 :body-style="{ padding: '20px 20px 5px 20px' }" class="item-card" shadow="hover">
+						<div style="width: 150px; height: 150px; padding-bottom: 10px; margin: 0 auto; overflow: hidden">
+							<el-image :src="getImageUrl(item.images)" alt="电脑图片" class="card-image">
+								<template #error>
+									<el-icon class="card-image" style="font-size: 4rem">
+										<icon-picture />
+									</el-icon>
+								</template>
+							</el-image>
+						</div>
+						<hr style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)" />
+						<div class="card-content">
+							<div class="text-wrapper">
+								<span style="color: #808d97; font-weight: 500">电脑编号: </span>
+								<span style="font-weight: 500">{{ item.computerNumber }}</span>
+							</div>
+							<div class="text-wrapper">
+								<span style="color: #808d97; font-weight: 500">所属店铺: </span>
+								<span style="font-weight: 500">{{ item.shopName }}</span>
+							</div>
+							<div class="text-wrapper">
+								<span style="color: #808d97; font-weight: 500">电脑位置: </span>
+								<span style="font-weight: 500">{{ item.station }}</span>
+							</div>
+						</div>
+						<template #footer>
+							<div style="text-align: center; padding: 0 10px">
+								<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" style="position: absolute; right: 30px; bottom: 30px">
+			<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, jumper"
+				@change="handlePageChange"
+			/>
+		</div>
+	</el-card>
+	<!-- 新增 Dialog -->
+	<CreateComputer v-model="showDialog" :shopOptions :userOptions @refresh="fetchCardData"></CreateComputer>
+	<!-- 编辑 Drawer -->
+	<!--<EditComputerInfo-->
+	<!--	v-if="isDrawerVisible"-->
+	<!--	v-model="isDrawerVisible"-->
+	<!--	:computerInfo-->
+	<!--	:computerNumber="computerInfo.computerNumber"-->
+	<!--	:shopOptions="shopOptions"-->
+	<!--	:userOptions="userOptions"-->
+	<!--	@refresh="fetchCardData"-->
+	<!--/>-->
 </template>
 
-<style lang="scss">
+<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: 76px; /* 根据需要设置最大高度 */
-  overflow: hidden; /* 隐藏超出部分 */
-  text-overflow: ellipsis; /* 省略号效果 */
-  display: -webkit-box; /* 适用于多行文本处理 */
-  -webkit-box-orient: vertical; /* 垂直排列 */
+	padding-top: 10px;
+	font-size: 14px;
+	max-height: 76px; /* 根据需要设置最大高度 */
+	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>