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

<script lang="ts" setup>
/**
 * @Name: InfoCard.vue
 * @Description: 电脑信息卡片
 * @Author: xinyan
 */

import { ref } from 'vue';
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';
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();

const showDialog = ref(false);
// const isDrawerVisible = ref(false);

const searchComputer = ref('');
const searchNumber = ref<string[]>([]);
const searchStation = ref('');

const computerInfo = ref([]);
const shopOptions = ref([]);
const userOptions = ref([]);
const numberOptions = ref([]);

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);
}

// 打开创建弹窗
async function addComputer() {
	showDialog.value = true;
}

const checkItem = (item) => {
	router.push({
		path: '/computer/detail',
		query: {
			id: item.id,
			// computerNumber: item.computerNumber,
		},
	});
};

// async function editItem(item) {
// 	const res = await useResponse(item.id, api.getComputerDetailOverview);
// 	computerInfo.value = res.data;
// 	if (computerInfo.value) {
// 		isDrawerVisible.value = true; // 显示 Drawer
// 	}
// }

// 处理图片地址
const getImageUrl = (images) => {
	// 如果有图片，返回第一个图片的 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);
	}
}

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);
	}
}

async function fetchShopFilterOptions() {
	try {
		const resp = await useResponse(null, api.getShopFilterList);
    numberOptions.value = resp.data.platformNumber
	} catch (e) {
		console.log('error', e);
	}
}


onMounted(() => {
	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-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">
          <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>
						<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 lang="scss" scoped>
.card-container {
	margin-bottom: 30px;
  padding: 0;
}

.item-card {
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}

.card-image {
	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; /* 垂直排列 */
}

.text-wrapper {
	white-space: nowrap; /* 不换行 */
	overflow: hidden; /* 隐藏超出部分 */
	text-overflow: ellipsis; /* 省略号效果 */
}

.image-wrapper {
	width: 150px; /* 设置固定宽度 */
	height: 150px; /* 设置固定高度 */
	padding-bottom: 10px;
	margin: 0 auto; /* 横向居中 */
	overflow: hidden; /* 隐藏溢出部分 */
}

.card-footer {
	display: flex;
	justify-content: flex-end;
	// padding: 10px;
}

.pagination-container {
	display: flex;
	justify-content: flex-end;
	// margin-bottom: 20px;
}

:deep(.el-card__footer) {
	border-top: none;
	padding: 0 0 10px 0;
}

</style>