vue3實現多層級列表的項目實踐

目錄 需求背景 解決效果 index.vue 需求背景 需要在統一個列表下，實現商品和規格得管理和聯動 解決效果 index.vue !--/**?* @author: liuk?* @date: 2023/7/7?* @describe: 商品列表*/--template? div cla

目錄

• 需求背景
• 解決效果
• index.vue

需求背景

需要在統一個列表下，實現商品和規格得管理和聯動

解決效果

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="http://news.558idc.com/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>

到此這篇關于vue3實現多層級列表的項目實踐的文章就介紹到這了,更多相關vue3 多層級列表內容請搜索技圈網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持技圈網！