vue3.2/Vite/Ts58: 获取已有的SPU数据

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

<template>
  <div>
    <!-- ... -->
    <el-card>
      <div v-show="scene === 0">
        <!-- ... -->
        <el-table border :data="records">
          <!-- ... -->
          <el-table-column label="SPU操作">
            <template #="{row}">
              <!-- ... -->
              <el-button
                type="primary"
                size="small"
                icon="Edit"
                title="修改SPU"
                @click="updateSpu(row)"
              ></el-button>
              <!-- .... -->
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <!-- .... -->
      </div>
      <SpuForm
        ref="spu"
        v-show="scene === 1"
        @changeScene="changeScene"
      ></SpuForm>
      <!-- ... -->
    </el-card>
  </div>
</template>
<script setup lang="ts">
  import { ref, watch } from "vue";
  import { reqHasSpu } from "@/api/product/spu";
  //..
  import type { SpuData } from "@/api/product/spu/type";

  let spu = ref<any>(null);

  //...
  const updateSpu = (row: SpuData) => {
    scene.value = 1;
    spu.value.initHasSpuData(row);
  };
  //...
</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">
  import { ref } from "vue";
  //...
  import type {
    SpuData,
    AllTradeMark,
    SpuHasImg,
    SaleAttrResponseData,
    HasSaleAttrResponseData,
    Trademark,
    SpuImage,
    SaleAttr,
    HasSaleAttr,
  } from "@/api/product/spu/type";
  import {
    reqAllTradeMark,
    reqSpuImageList,
    reqSpuHasSaleAttr,
    reqAllSaleAttr,
  } from "@/api/product/spu";
  //...
  let AllTradeMark = ref<Trademark>([]);
  let imgList = ref<SpuImage>([]);
  let saleAttr = ref<SaleAttr>([]);
  let allSaleAttr = ref<HasSaleAttr>([]);
  //...
  const initHasSpuData = async (spu: SpuData) => {
    const result: AllTradeMark = await reqAllTradeMark();
    const result1: SpuHasImg = await reqSpuImageList(spu.id as number);
    const result2: SaleAttrResponseData = await reqSpuHasSaleAttr(
      spu.id as number
    );
    const result3: HasSaleAttrResponseData = await reqAllSaleAttr();
    // 数据存储
    AllTradeMark.value = result.data;
    imgList.value = result1.data;
    saleAttr.value = result2.data;
    allSaleAttr.value = result3.data;
  };
  defineExpose({ initHasSpuData });
</script>