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 :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"-->
  <!--/>-->
</template>

<style lang="scss">
.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: 76px; /* 根据需要设置最大高度 */
  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;
  position: absolute;
  right: 30px;
  bottom: 35px;
}

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