vue3 实现多层级列表

需求背景

需要在统一个列表下，实现商品和规格得管理和联动

解决效果

index.vue

<!--/**
 * @author: liuk
 * @date: 2023/7/7
 * @describe: 商品列表
*/-->
<template>
  <div class="container">
    <h1>商品列表</h1>
    <div class="creatbtn" style="margin-bottom: 15px">
      <div class="creatbtn1">
        <el-button class="btn" @click="editShop('')">+&nbsp;新增商品</el-button>
      </div>
    </div>
    <el-row justify="space-between" style="margin-bottom: 15px">
      <el-col :span="12">
        <el-radio-group v-model="fromData.putShelf" @change="getList" size="large">
          <el-radio-button label="">全部</el-radio-button>
          <el-radio-button label="1">已发布</el-radio-button>
          <el-radio-button label="0">未发布</el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="12">
        <el-form-item label="名称">
          <el-input v-model="fromData.productName" style="width: 400px;marginRight:30px " placeholder="请输入内容"
                    @keyup.enter="getList">
            <template #append>
              <el-icon @click="getList">
                <Search/>
              </el-icon>
            </template>
          </el-input>
          <el-button type="danger" @click="resetBtn">重置</el-button>
        </el-form-item>
      </el-col>
    </el-row>

    <el-table v-if="shopTableList.length" v-loading="loading" :data="shopTableList" class="cemetery-table" border
              width="1200px"
              @expand-change="expandChange" :row-key="(row) => row.id" :expand-row-keys="expands">
      <el-table-column min-width="50" type="expand">
        <template #default="props">
          <div>
            <el-table :data="props.row.bMallGoodsSpecifications" border>
              <el-table-column width="80" type="index" label="序号" align="center"/>
              <el-table-column label="图片" align="center" prop="image">
                <template #default="scope">
                  <image-upload class="img-specif-box" v-model="scope.row.image" :limit="1"
                                :disabled="!scope.row.specificationEdit"
                  ></image-upload>
                </template>
              </el-table-column>
              <el-table-column label="规格描述" align="center" prop="specificationDescription">
                <template #default="scope">
                  <el-input v-model="scope.row.specificationDescription"
                            :disabled="!scope.row.specificationEdit"
                            style="width: 60px"/>
                </template>
              </el-table-column>
              <el-table-column label="规格" align="center" prop="specifications">
                <template #default="scope">
                  <el-input v-model="scope.row.specifications"
                            :disabled="!scope.row.specificationEdit"
                            style="width: 60px"/>
                </template>
              </el-table-column>
              <el-table-column label="价格" align="center" prop="price">
                <template #header>
                  <span class="red">*</span>
                  <el-icon>
                    <Edit/>
                  </el-icon>
                  价格
                </template>
                <template #default="scope">
                  <el-input v-model="scope.row.price"
                            :disabled="!scope.row.specificationEdit"
                            style="width: 60px"/>
                </template>
              </el-table-column>
              <el-table-column label="单位" align="center" prop="unitName">
                <template #default="scope">
                  <el-select v-model="scope.row.unitId" :disabled="!scope.row.specificationEdit">
                    <el-option v-for="(item,i) in units" :key="i" :label="item.label" :value="item.value"/>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="划线价" align="center" prop="crossedPrice">
                <template #header>
                  <el-icon>
                    <Edit/>
                  </el-icon>
                  划线价
                </template>
                <template #default="scope">
                  <el-input v-model="scope.row.crossedPrice"
                            :disabled="!scope.row.specificationEdit"
                            style="width: 60px"/>
                </template>
              </el-table-column>
              <el-table-column label="库存" align="center" prop="stock">
                <template #default="scope">
                  <el-input v-model="scope.row.stock"
                            :disabled="!scope.row.specificationEdit"
                            style="width: 60px"/>
                </template>
              </el-table-column>
              <el-table-column label="可否调价" align="center" prop="adjustThePrice">
                <template #default="scope">
                  <el-switch v-model="scope.row.adjustThePrice" :active-value="1" :inactive-value="0"
                             :disabled="!scope.row.specificationEdit"
                             style="--el-switch-on-color: rgb(19, 206, 102); --el-switch-off-color: rgb(255, 73, 73)"/>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width"
                               min-width="210">
                <template #default="scope">
                  <el-button v-show="!scope.row.specificationEdit" type="success"
                             @click="editSpecifications(scope.row,props)">编辑
                  </el-button>
                  <el-button v-show="scope.row.specificationEdit" type="success"
                             @click="updateSpecification(scope.row)">
                    保存
                  </el-button>
                  <el-button v-show="scope.row.specificationEdit"
                             @click="scope.row.specificationEdit = false">取消
                  </el-button>
                  <el-button v-show="!scope.row.specificationEdit" type="danger"
                             @click="delSpecifica(scope.row,props)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column min-width="80" type="index" align="center" label="序号"/>
      <el-table-column min-width="100" label="商品名称" align="center" prop="productName" sortable>
        <template #header>
          商品名称
          <el-icon>
            <QuestionFilled/>
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column min-width="150" label="图片" align="center" prop="productImage">
        <template #default="scope">
          <el-image style="width: 40px; height: 40px"
                    :src="scope.row.productImage"
                    :zoom-rate="1.2"
                    :preview-src-list="[scope.row.productImage]"
                    :initial-index="4"
                    preview-teleported
                    fit="cover"/>
        </template>
      </el-table-column>
      <el-table-column min-width="100" label="库存策略" align="center" prop="inventoryStrategy">
        <template #default="scope">
          {{ formatInventoryStrategy(scope.row.inventoryStrategy) }}
        </template>
      </el-table-column>
      <el-table-column min-width="100" label="顺序" prop="sort" align="center" sortable>
        <template #header>
          顺序
          <el-icon>
            <QuestionFilled/>
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column min-width="100" label="是否已发布" align="center" prop="putShelf">
        <template #default="scope">
          <el-switch
              v-model="scope.row.putShelf" :active-value="1" :inactive-value="0"
              style="--el-switch-on-color: rgb(19, 206, 102); --el-switch-off-color: rgb(255, 73, 73)"/>
        </template>
      </el-table-column>
      <el-table-column min-width="100" label="是否静态" align="center" prop="staticState">
        <template #default="scope">
          <el-switch v-model="scope.row.staticState" :active-value="1" :inactive-value="0"
                     :before-change="staticStateChange.bind(null, scope.row)"
                     :disabled="scope.row.staticState == 1"
                     style="--el-switch-on-color: rgb(19, 206, 102); --el-switch-off-color: rgb(255, 73, 73)"/>
        </template>
      </el-table-column>
      <el-table-column min-width="100" label="SKU数量" align="center" prop="productNum">
        <template #default="scope">
          <span :class="{red:scope.row.productNum == 0}">{{ scope.row.productNum }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="100" label="价格" align="center" prop="productPrice"/>
      <el-table-column label="操作" fixed="right" min-width="250" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button @click="addSpecif(scope.row,scope)">增加规格</el-button>
          <el-button type="primary" @click="editShop(scope.row.id)">编辑</el-button>
          <el-button type="danger" @click="delShop(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-empty description="暂无商品" v-else/>
    <pagination
        v-show="pages.total>0"
        :total="pages.total"
        v-model:page="pages.pageNum"
        v-model:limit="pages.pageSize"
        @pagination="getList"
    />
  </div>
</template>

<script setup>
import {listGoods, delGoods, previewGoods} from "@/api/retailmall/goods";
import {updateSpecifications, addSpecifications, delSpecifications} from "@/api/retailmall/specifications";
import {listUnits,} from "@/api/mall/units";
import {useRoute, useRouter} from "vue-router";
import {onMounted} from "vue";


// Emit
const emit = defineEmits(['editShopOpen'])
// route
const route = useRoute()
// store
import useMallStore from '@/store/modules/mall'

const mallStore = useMallStore()
const router = useRouter()
const {proxy} = getCurrentInstance();

const model = reactive({
  fromData: {},
  pages: {
    pageNum: 1,
    pageSize: 10,
    total: 0
  },
  expands: [],//表格展开行
  shopTableList: [],//商品列表
  loading: true,
  units: [],//单位列表
});
const {fromData, expands, pages, shopTableList, loading, units} = toRefs(model);

// 编辑商品
const editShop = (id) => {
  emit('editShopOpen')
  mallStore.setCurGoodId(id)
}

// 增加规格
const addSpecif = (row, props) => {
  let params = {
    commodityId: row.id,
    crossedPrice: 0,
    stock: 0,
    price: 0,
    specifications: 0,
    specificationDescription: ""
  }
  addSpecifications(params).then(res => {
    if (+res.code === 200) {
      previewGoods(props.row.id).then((res) => {
        if (+res.code === 200) {
          model.expands = [] // 展开行
          model.expands.push(row.id)
          props.row.bMallGoodsSpecifications = res.data.bMallGoodsSpecifications
          proxy.$message.success("新增成功")
        }
      })
    }
  })
}

// 修改规格
const updateSpecification = (row) => {
  updateSpecifications(row).then((res) => {
    if (+res.code === 200) {
      row.specificationEdit = false
      proxy.$message.success("编辑成功")
    }
  })
}
// 表格展开变化  -- 只能展开一行
const expandChange = (row, expandedRows) => {
  if (expandedRows.length) {
    model.expands = []
    if (row) {
      model.expands.push(row.id)
    }
  } else {
    model.expands = []
  }
}

// 删除商品
const delShop = (row) => {
  proxy.$modal.confirm(`确定要删除${row.productName}`).then(function () {
    return delGoods(row.id)
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  })
}

// 是否静态开关变化
const staticStateChange = (item) => {
  return new Promise((resolve, reject) => {
    proxy.$modal.confirm('一旦商品开启静态,该商品不可进行任何操作(删除编辑发布隐藏),是否确定要 修改 商品 ?').then(() => {
      resolve(true)
    })
  })
}

// 编辑规格
const editSpecifications = (row) => {
  row.specificationEdit = true
}

// 删除规格
const delSpecifica = (row, props) => {
  proxy.$modal.confirm(`确定要删除${row.productName}`).then(function () {
    return delSpecifications(row.id)
  }).then(() => {
    previewGoods(props.row.id).then((res) => {
      props.row.bMallGoodsSpecifications = res.data.bMallGoodsSpecifications
    })
    proxy.$modal.msgSuccess("删除成功");
  })
}

// 获取商品列表
function getList() {
  let params = {
    ...model.fromData,
    ...model.pages,
    shopIds: [route.query.id],
    total: undefined
  }
  model.loading = true;
  listGoods(params).then(response => {
    model.expands = [] // 不展开行
    model.shopTableList = response.rows || {bMallGoodsSpecifications: []};
    model.pages.total = response.total;
    model.loading = false;
  })
}

// 表单重置
function reset() {
  form.value = {};
}

// 获取全部单位
const getlistUnits = () => {
  let params = {
    pageNum: 1,
    pageSize: 999
  }
  listUnits(params).then(res => {
    model.units = res.rows.map((item) => {
      return {
        label: item.name,
        value: item.id
      }
    })
  })
}
// 重置
const resetBtn = () => {
  fromData.value = {}
  getList()
}

onMounted(() => {
  getList();
  getlistUnits()
})

const formatInventoryStrategy = (val) => {
  let str = ''
  switch (val) {
    case 0:
      str = '无需库存'
      break
    case 1:
      str = '下单后减少'
      break
    case 2:
      str = '支付后减少'
      break
    case 3:
      str = '使用后减少'
      break
  }
  return str
}
</script>

视频效果