vue3.2/Vite/Ts51: 属性接口处理

└─src
    ├─api
    │  └─product
    │      └─attr
    │          ├─index.ts
    │          └─type.ts
    └─views
        └─product
            └─attr
                └─index.vue

import request from "@/utils/request";
import type { Attr } from './type';

enum API {
  //...
  ADDORUPDATEATTR_URL: '/admin/product/saveAttrInfo/'
}

//...
export const reqAddOrUpdateAttr = (data: Attr) => request.post<any, any>(API.ADDORUPDATEATTR_URL, data)
//...

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

//...

export interface AttrValue {
  id?: number;
  valueName: string;
  attrId?: number;
  flag?: boolean; // 控制编辑模式和查看模式的切换
}

export type AttrValueList = AttrValue[];

export interface Attr {
  id?: number;
  attrName: string;
  categoryId: number | number;
  categoryLevel: number;
  attrValueList: AttrValueList[];
}

export type AttrList = Attr[];

export interface AttrResponseData extends ResponseData {
  data: Attr[];
}
//...

<template>
  <!-- 三级分类 -->
  <div>
    <Category :scene="scene"/>
    <el-card>
      <div v-if="scene === 0">
        <el-button
          type="primary"
          size="default"
          icon="Plus"
          :disabled="categoryStore.c3Id"
          @click="addAttr"
          >添加属性</el-button
        >
        <el-table border>
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="80px"
          ></el-table-column>
          <el-table-column
            label="属性名称"
            width="120px"
            prop="attrName"
          ></el-table-column>
          <el-table-column label="属性值名称">
            <template #="{row}">
              <el-tag v-for="(item, index) in row.attrValueList" :key="item.id">{{ item.valueName }}</el-tage>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120px">
            <template #="{row}">
              <el-button type="primary" size="small" icon="Edit" @click="updateAttr"></el-button>
              <el-button type="primary" size="small" icon="Delete"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 切换 -->
      <div v-if="scene === 1">
        <el-form :inline="true">
          <el-form-item label="属性名称">
            <el-input placeholder="请输入属性名称" v-model="attrParams.attrName"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" size="default" icon="Plus" :disabled="attrParams.attrName ? false : true" @click="addAttrValue">添加属性值</el-button>
        <el-button type="primary" size="default" @click="cancel">取消</el-button>
        <el-table broder :data="attrParams.attrValueList">
          <el-table-column width="80px" type="index" align="center" label="序号"></el-table-column>
          <el-table-column label="属性值名称">
            <template #="{ row }">
                <el-input placeholder="请你输入属性值名称" v-model="row.valueName"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="属性值操作"></el-table-column>
        </el-table>
        <el-button type="primary" size="default" @click="save">保存</el-button>
        <el-button type="primary" size="default" @click="cancel">取消</el-button>
      </div>
    </el-card>
  </div>
</template>
<script setup lang="ts">
  import { watch, ref, reactive } from "vue";

  import type { AttrResponseData, Attr } from "@/api/product/attr";

  import useCategoryStore from "@/store/modules/category";

  let categoryStore = useCategoryStore();

  import { reqAttr, reqAddOrUpdateAttr } from "@/api/product/attr";

  let attrArr = ref<Attr[]>([]);

  let scene = ref<number>(0);

  let attrParams = reactive<Attr>({
    attrName: '',
    attrValueList: [],
    categoryId: '',
    categoryLevel: 3
  })

  const getAttr = () => {
    const { c1Id, c2Id, c3Id } = categoryStore;
    const result: AttrResponseData = await reqAttr(c1Id, c2Id, c3Id);
    if (result.code === 200) {
      attrArr.value = result.data;
    }
  };

  // 监听三级分类数据
  watch(
    () => categoryStore.c3Id,
    () => {
      attrArr.value = [];
      if (!categoryStore.c3Id) return;
      getAttr();
    }
  );

  const addAttr = () => {
    // 清空数据
    Object.assign(attrParams, {
      attrName: '',
      attrValueList: [],
      categoryId: categoryStore.c3Id,
      categoryLevel: 3
    })
    scene.value = 1;
  }

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

  const cancel = () => {
    scene.value = 0;
  }

  const addAttrValue = () => {
    attrParams.attrValueList.push({
        valueName: ''
    })
  }

  const save = () => {
    let result: any = await reqAddOrUpdateAttr(attrParams);
    if(result.code === 200) {
        scene.value = 0;
        ElMessage({
            type: 'success',
            message: attrParams.id ? '修改成功' : '添加成功'
        })
        getArrt(); // 重新请求属性值列表
    } else {
      ElMessage({
            type: 'error',
            message: attrParams.id ? '修改失败' : '添加失败'
        })
    }
  }
</script>