vue3.2/Vite/Ts49: 已有属性和属性值展示业务

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

<template>
  <!-- 三级分类 -->
  <div>
    <Category />
    <el-card>
      <el-button
        type="primary"
        size="default"
        icon="Plus"
        :disabled="categoryStore.c3Id"
        >添加属性</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"></el-button>
            <el-button type="primary" size="small" icon="Delete"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script setup lang="ts">
  import { watch, ref } from "vue";

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

  import useCategoryStore from "@/store/modules/category";
  let categoryStore = useCategoryStore();

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

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

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

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

enum API {
  //...
  ATTR_URL: '/admin/product/attrInfoList/'
}

//...
export const reqAttr = (
  category1Id: string | number,
  category2Id: string | number,
  category3Id: string | number
) => request.get<any, AttrResponseData>(API.ATTR_URL + `${category1Id}/${category2Id}/${category3Id}`)
//...

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

//...

export interface AttrValue {
  id: number;
  valueName: string;
  attrId: number;
}

export type AttrValueList = AttrValue[];

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

export type AttrList = Attr[];

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