vue3.2/Vite/Ts65: SKU静态搭建

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

<template>
  <el-form label-width="100px">
    <el-form-item label="SKU名称">
      <el-input placeholder="SKU名称"></el-input>
    </el-form-item>
    <el-form-item label="价格（元）">
      <el-input placeholder="价格（元）" type="number"></el-input>
    </el-form-item>
    <el-form-item label="重量（g）">
      <el-input placeholder="重量（g）" type="number"></el-input>
    </el-form-item>
    <el-form-item label="SKU描述">
      <el-input placeholder="SKU描述" type="textarea"></el-input>
    </el-form-item>
    <!-- 平台属性 -->
    <el-form-item label="平台属性">
      <el-form :inline="true">
        <el-form-item label="内存">
          <el-select>
            <el-option label="256"></el-option>
            <el-option label="256"></el-option>
            <el-option label="256"></el-option>
            <el-option label="256"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-form :inline="true">
        <el-form-item label="颜色">
          <el-select>
            <el-option label="256"></el-option>
            <el-option label="256"></el-option>
            <el-option label="256"></el-option>
            <el-option label="256"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="图片名称">
      <el-table>
        <el-table-column
          type="selection"
          width="80px"
          align="center"
        ></el-table-column>
        <el-table-column label="图片"></el-table-column>
        <el-table-column label="名称"></el-table-column>
        <el-table-column label="操作"></el-table-column>
      </el-table>
    </el-form-item>
    <!-- 按钮 -->
    <el-form-item>
      <el-button type="primary" size="small">保存</el-button>
      <el-button type="primary" size="small" @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
  let $emit = defineEmits(['changeScene']);
  const cancel = () => {
    $emit('changeScene', {
      flag: 0,
      params: ''
    })
  }
</script>

<template>
  <div>
    <!-- ... -->
    <el-card>
      <!-- ... -->
      <SpuForm v-show="scene === 1" @changeScene="changeScene"></SpuForm>
      <SkuForm v-show="scene === 2" @changeScene="changeScene"></SkuForm>
    </el-card>
  </div>
</template>
<script setup lang="ts">
  //...
  const changeScene = (obj: any) => {
    scene.value = obj.flag;
    //...
    if (obj.params === "update") {
      getHasSpu(pageNo.value);
    } else {
      getHasSpu();
    }
  };
  //...
</script>