vue3.2/Vite/Ts56: SPU模块场景的切换

└─src
    └─views
        └─product
            └─spu
                ├─index.vue
                ├─skuform.vue
                └─spuform.vue

<template>
  <div>
    <Category :scene="scene" />
    <el-card>
      <div v-show="scene === 0">
        <el-button
          type="primary"
          size="default"
          icon="Plus"
          :disabled="categoryStore.c3Id ? false : true"
          @click="addSpu"
          >添加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"
                @click="updateSpu"
              ></el-button>
              <el-button
                type="primary"
                size="small"
                icon="View"
                title="查看SKU列表"
              ></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>
      </div>
      <SpuForm v-show="scene === 1" @changeScene="changeScene"></SpuForm>
      <SkuForm v-show="scene === 2"></SkuForm>
    </el-card>
  </div>
</template>
<script setup lang="ts">
  import { ref, watch } from "vue";
  import { reqHasSpu } from "@/api/product/spu";

  import SpuForm from "./spuform.vue";
  import SkuForm from "./skuform.vue";

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

  const addSpu = () => {
    scene.value = 1;
  };

  const updateSpu = () => {
    scene.value = 1;
  };

  const changeScene = (num: number) => {
    scene.value = num;
  };

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

<template>
  <el-form label-width="100px">
    <el-form-item label="SPU名称">
      <el-input placeholder="请输入SPU名称"></el-input>
    </el-form-item>
    <el-form-item label="SPU品牌">
      <el-select>
        <el-option label="华为"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="SPU描述">
      <el-input type="textarea" placeholder="请输入SPU描述"></el-input>
    </el-form-item>
    <el-form-item label="SPU照片"> </el-form-item>
    <el-form-item label="SPU销售属性">
      <!-- 展示销售属性 -->
      <el-select>
        <el-option label="华为"></el-option>
      </el-select>
      <el-button type="primary" size="default" icon="Plus"
        >添加属性值</el-button
      >
      <!-- 展示销售属性与属性值 -->
      <el-table border>
        <el-table-column
          label="序号"
          type="index"
          width="80px"
          align
        ></el-table-column>
        <el-table-column label="销售属性名字" width="100px"></el-table-column>
        <el-table-column label="销售属性值"></el-table-column>
        <el-table-column label="操作" width="120px"></el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="default">保存</el-button>
      <el-button type="primary" size="default" @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
  let $emit = defineEmits(["changeScene"]);
  const cancel = () => {
    $emit("changeScene", 0);
  };
</script>

<template></template>