vue3.2/Vite/Ts60: 展示已有销售属性和属性值

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

<template>
  <el-form label-width="100px">
    <el-form-item label="SPU名称">
      <el-input
        placeholder="请输入SPU名称"
        v-mode="SpuParams.spuName"
      ></el-input>
    </el-form-item>
    <el-form-item label="SPU品牌">
      <el-select v-model="SpuParams.tmId">
        <el-option
          v-for="(item, index) in AllTradeMark"
          :key="item.id"
          :label="item.tmName"
          :value="item.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="SPU描述">
      <el-input
        type="textarea"
        placeholder="请输入SPU描述"
        v-model="SpuParams.description"
      ></el-input>
    </el-form-item>
    <el-form-item label="SPU照片">
      <el-upload
        v-model:file-list="imgList"
        action="/api/admin/product/fileUpload"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :before-upload="handleUpload"
      ></el-upload>
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" style="width: 100%" alt="" />
      </el-dialog>
    </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 :data="saleAttr">
        <el-table-column
          label="序号"
          type="index"
          width="80px"
          align
        ></el-table-column>
        <el-table-column
          label="销售属性名字"
          width="100px"
          prop="saleAttrName"
        ></el-table-column>
        <el-table-column label="销售属性值">
          <template #="{ row }">
            <el-tag
              v-for="(item, index) in row.spuSaleAttrValueList"
              :key="row.id"
              class="mx-1"
              closable
              >{{ item.saleAttrValueName }}</el-tag
            >
            <el-button type="primary" size="small" icon="Plus"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120px">
          <template #="{row, $index}">
            <el-button
              type="primary"
              size="small"
              icon="Delete"
              @click="saleAttr.splice($index, 1)"
            ></el-button>
          </template>
        </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 dialogVisible = ref<boolean>(false);
  let dialogImageUrl = ref<string>('');
  let AllTradeMark = ref<Trademark>([]);
  let imgList = ref<SpuImage>([]);
  let saleAttr = ref<SaleAttr>([]);
  let allSaleAttr = ref<HasSaleAttr>([]);
  let SpuParams = ref<SpuData>({
    category3Id: '';
    spuName: '';
    tmId: '';
    description: '';
    spuImageList: [];
    spuSaleAttrList: [];
  });
  //...
  const initHasSpuData = async (spu: SpuData) => {
    SpuParams.value = 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.map(item => {
      return {
        name: item.imgName,
        url: item.imgUrl
      }
    });
    saleAttr.value = result2.data;
    allSaleAttr.value = result3.data;
  };
  defineExpose({ initHasSpuData });

  const handlePictureCardPreview = (file: any) => {
    dialogImageUrl.value = file.url;
    dialogVisible.value = true;
  }

  const handleRemove = () => {

  }

  const handleUpload = (file: any) => {
    if(file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/gif') {
      if(file.size / 1024 / 1024 < 3) {
        return true
      } else {
        ElMessage({
          type: 'error',
          message: '上传图片要小于3M'
        })
      return false;
      }
    } else {
      ElMessage({
        type: 'error',
        message: '只能上传图片类型'
      })
      return false
    }
  }
</script>