vue3.2/Vite/Ts56: SPU模块静态搭建和数据展示

├─src
│  └─api
│      └─product
│          └─spu
│              ├─index.ts
│              └─type.ts
└─views
    └─product
        └─spu
            ├─index.vue
            ├─skuform.vue
            └─spuform.vue

<template>
  <div>
    <Category :scene="scene" />
    <el-card>
      <el-button
        type="primary"
        size="default"
        icon="Plus"
        :disabled="categoryStore.c3Id ? false : true"
        >添加SPU</el-button
      >
      <el-table border :data="records">
        <el-table-column
          label="序号"
          type="index"
          width="80px"
          align
        ></el-table-column>
        <el-table-column label="SPU名称" prop="spuName"></el-table-column>
        <el-table-column label="SPU描述" prop="description"></el-table-column>
        <el-table-column label="SPU操作">
          <template #="{row}">
            <el-button
              type="primary"
              size="small"
              icon="Plus"
              title="添加SKU"
            ></el-button>
            <el-button
              type="primary"
              size="small"
              icon="Edit"
              title="修改SPU"
            ></el-button>
            <el-button
              type="primary"
              size="small"
              icon="View"
              title="查看SPU列表"
            ></el-button>
            <el-button
              type="primary"
              size="small"
              icon="Delete"
              title="删除SPU"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[3,5,7,9]"
        :backgound="true"
        layout="prev, pager, next, jumper, ->, sizes, total"
        :total="total"
        @current-change="getHasSpu"
        @size-change="changeSize"
      ></el-pagination>
    </el-card>
  </div>
</template>
<script setup lang="ts">
  import { ref, watch } from "vue";
  import { reqHasSpu } from "@/api/product/spu";

  import type { HasSpuResponseData, Records } from "@/api/product/spu/type";

  import useCategoryStore from "@/store/modules/category";
  let categoryStore = useCategoryStore();

  let scene = ref<number>(0);
  // 默认页码
  let pageNo = ref<number>(1);
  // 每页展示几条数据
  let pageSize = ref<number>(3);
  // 总条数
  let total = ref<number>(0);

  let records = ref<Records>([]);

  const getHasSpu = async (paper = 1) => {
    pageNo.value = paper;
    const result: HasSpuResponseData = await reqHasSpu(
      pageNo.value,
      pageSize.value,
      categoryStore.c3Id
    );
    if (result.code === 200) {
      records.value = result.data.records;
      total.value = result.data.total;
    }
  };
  // 点击 3，5，7，9
  const changeSize = () => {
    getHasSpu();
  };

  watch(
    () => categoryStore.c3Id,
    () => {
      if (!categoryStore.c3Id) return;
      getHasSpu();
    }
  );
</script>

import request from "@/utils/request";

import { HasSpuResponseData } from "./type";

enum API {
  HASSPU_URL = "/admin/product/",
}

export const reqHasSpu = (
  page: number,
  limit: number,
  category3Id: string | number
) =>
  request.get<any, HasSpuResponseData>(
    API.HASSPU_URL + `${page}/${limit}?category3Id=${category3Id}`
  );

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

export interface SpuData {
  id?: number;
  spuName: string;
  description: string;
  category3Id: string | number;
  tmId: number;
  spuSaleAttrList: null;
  spuImageList: null;
}

export type Records = SpuData[];

export interface HasSpuResponseData extends ResponseData {
  data: {
    records: Records;
    total: number;
    size: number;
    current: number;
    searchCount: boolean;
    pages: number;
  };
}