vue3.2/Vite/Ts71: 展示已有SKU

└─src
    ├─api
    │  └─product
    │      └─sku
    │          ├─index.ts
    │          └─type.ts
    └─views
        └─product
            └─sku
                └─index.vue

import request from "@/utils/request";
import type { SkuResponseData } from "./type";

enum API {
  SKU_URL = "/admin/product/list/",
}

export const reqSkuList = (page: number, limit: number) =>
  request.get<any, SkuResponseData>(API.SKU_URL + `${page}/${limit}`);

export interface ResponseData {
  code: number;
  message: string;
  ok: boolean;
}

export interface Attr {
  attrId: string | number;
  valueId: string | number;
}

export interface SaleAttr {
  saleAttrId: string | number;
  saleAttrValueId: string | number;
}

export interface SkuData {
  category3Id: string | number;
  spuId: string | number;
  tmId: string | number;
  skuName: string;
  price: string | number;
  weight: string | number;
  skuDesc: string;
  skuAttrValueList?: Attr[];
  skuSaleAttrValueList?: SaleAttr[];
  skuDefaultImg: string;
  isSale?: number;
  id?: number;
}

export interface SkuResponseData extends ResponseData {
  data: {
    records: SkuData[];
    total: number;
    size: number;
    current: number;
    orders: [];
    optimizeCountSql: boolean;
    hitCount: boolean;
    countId: null;
    maxLimit: null;
    searchCount: boolean;
    pages: number;
  };
}

<template>
  <el-card :data="skuArr">
    <el-table border>
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="80px"
      ></el-table-column>
      <el-table-column
        label="名称"
        show-overflow-tooltip
        width="150px"
        prop="skuName"
      ></el-table-column>
      <el-table-column
        label="描述"
        show-overflow-tooltip
        width="150px"
        prop="skuDesc"
      ></el-table-column>
      <el-table-column label="图片">
        <template #="{ row }">
          <img
            :src="row.skuDefaultImg"
            style="width:100px;height:100px"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column
        label="重量"
        width="150px"
        prop="weight"
      ></el-table-column>
      <el-table-column
        label="价格"
        width="150px"
        prop="price"
      ></el-table-column>
      <el-table-column label="操作" width="250px" fixed="right">
        <template #="{ row }">
          <el-button type="primary" size="small" icon="Top"></el-button>
          <el-button type="primary" size="small" icon="Edit"></el-button>
          <el-button type="primary" size="small" icon="Info"></el-button>
          <el-button type="primary" size="small" icon="Delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :background="true"
      layout="prev, pager, next, jumper, -> , sizes, total"
      :total="total"
      @current-change="getHasSku"
      @size-change="handler"
    ></el-pagination>
  </el-card>
</template>
<script setup lang="ts">
  import { ref, onMounted } from "vue";
  import { reqSkuList } from "@/api/product/sku";
  import type { SkuResponseData, SkuData } from "@/api/product/sku/type";

  let pageNo = ref<number>(1);
  let pageSize = ref<number>(10);

  let total = ref<number>(0);
  let skuArr = ref<SkuData[]>([]);

  const getHasSku = async (pager = 1) => {
    pageNo.value = pager;
    const result: SkuResponseData = await reqSkuList(
      pageNo.value,
      pageSize.value
    );
    if (result.code === 200) {
      total.value = result.data.total;
      skuArr.value = result.data.records;
    }
  };

  const handler = async (pageSizes: number) => {
    getHasSku();
  };

  onMounted(() => {
    getHasSku();
  });
</script>