bug修复

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

@@ -6,7 +6,7 @@
  */
 
 import { ref } from 'vue';
-import { ElCol, ElDescriptions, ElIcon } from 'element-plus';
+import { ElCol, ElIcon } from 'element-plus';
 import { Picture as IconPicture, Plus, Search } from '@element-plus/icons-vue';
 import * as api from '/@/views/computer-information/api';
 import { useRouter } from 'vue-router';
@@ -36,29 +36,29 @@ const { tableOptions, handlePageChange } = usePagination(fetchCardData);
 tableOptions.value.limit = 12;
 
 async function fetchCardData() {
-	const query = {
-		page: tableOptions.value.page,
-		limit: tableOptions.value.limit,
+  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);
+  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,57 +71,57 @@ 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);
+  try {
+    const resp = await useResponse(null, api.getShopFilterList);
     numberOptions.value = resp.data.platformNumber
-	} catch (e) {
-		console.log('error', e);
-	}
+  } catch (e) {
+    console.log('error', e);
+  }
 }
 
 
 onMounted(() => {
-	fetchCardData();
-	fetchShopOptions();
-	fetchUserOptions();
+  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-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"
@@ -138,134 +138,132 @@ onMounted(() => {
         </el-select>
         <el-input v-model="searchStation" clearable placeholder="位置" style="width: 200px" @change="fetchCardData"></el-input>
       </div>
-			<span>
+      <span>
 				<el-button :icon="Plus" bg text type="primary" @click="addComputer">添 加</el-button>
 			</span>
-		</div>
-	</el-card>
-	<!-- 卡片展示区域 -->
-	<el-card class="flex-grow" style="border: none" :body-style="{ padding: '0px' }">
-		<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">
+    </div>
+  </el-card>
+  <!-- 卡片展示区域 -->
+  <el-card class="flex-grow" style="border: none" :body-style="{ padding: '0px' }">
+    <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-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="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.station }}</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>
-					</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"-->
-	<!--/>-->
+                <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>
+            <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" 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 scoped>
+<style lang="scss" scoped>
 .card-container {
-	margin-bottom: 30px;
+  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: 72px; /* 根据需要设置最大高度 */
-	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;
+  display: flex;
+  justify-content: flex-end;
+  // padding: 10px;
 }
 
 .pagination-container {
-	display: flex;
-	justify-content: flex-end;
+  display: flex;
+  justify-content: flex-end;
+  // margin-bottom: 20px;
 }
 
 :deep(.el-card__footer) {
-	border-top: none;
-	padding: 0 0 10px 0;
+  border-top: none;
+  padding: 0 0 10px 0;
 }
 
 </style>