vue3.2/Vite/Ts50: 添加与修改属性静态搭建

└─src
    ├─components
    │  └─Category
    │      └─index.vue
    └─views
        └─product
            └─attr
                └─index.vue

<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="请输入属性名称"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" size="default" icon="Plus">添加属性值</el-button>
        <el-button type="primary" size="default" @click="cancel">取消</el-button>
        <el-table broder>
          <el-table-column width="80px" type="index" align="center" label="序号"></el-table-column>
          <el-table-column label="属性值名称"></el-table-column>
          <el-table-column label="属性值操作"></el-table-column>
        </el-table>
        <el-button type="primary" size="default">保存</el-button>
        <el-button type="primary" size="default" @click="cancel">取消</el-button>
      </div>
    </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[]>([]);

  let scene = ref<number>(0);

  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 = () => {
    scene.value = 1;
  }

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

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

<template>
  <el-card>
    <el-form :inline="true">
      <el-form-item label="一级分类">
        <el-select
          v-model="categoryStore.c1Id"
          @change="handle"
          :disabled="scene === 0 ? false : true"
        >
          <el-option
            v-for="(c1, index) in categoryStore.c1Arr"
            :key="c1.id"
            :label="c1.name"
            :value="c1.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <!-- 收集二级分类的 id -->
        <el-select
          v-model="categoryStore.c2Id"
          @change="handle1"
          :disabled="scene === 0 ? false : true"
        >
          <el-option
            v-for="(c2, index) in categoryStore.c2Arr"
            :key="c2.id"
            :label="c2.name"
            :value="c2.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select
          v-model="categoryStore.c3Id"
          :disabled="scene === 0 ? false : true"
        >
          <el-option
            v-for="(c3, index) in categoryStore.c3Arr"
            :key="c3.id"
            :label="c3.name"
            :value="c3.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script setup lang="ts">
  import { defineProps } from "vue";

  //...
  defineProps(["scene"]);
  //...
</script>