目錄需求背景解決效果index.vue需求背景

需要在統(tǒng)一個列表下，實現(xiàn)商品和規(guī)格得管理和聯(lián)動

解決效果

index.vue<!--/**?* @author: liuk?* @date: 2023/7/7?* @describe: 商品列表*/--><template>? <div class='container'>? ? <h1>商品列表</h1>? ? <div style='margin-bottom: 15px'>? ? ? <div class='creatbtn1'>? ? ? ? <el-button @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'>已發(fā)布</el-radio-button>? ? ? ? ? <el-radio-button label='0'>未發(fā)布</el-radio-button>? ? ? ? </el-radio-group>? ? ? </el-col>? ? ? <el-col :span='12'>? ? ? ? <el-form-item label='名稱'>? ? ? ? ? <el-input v-model='fromData.productName' placeholder='請輸入內(nèi)容'? ? ? ? ? ? ? ? ? ? @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' border? ? ? ? ? ? ? ? ? ? ? ? ? ? @expand-change='expandChange' :row-key='(row) => row.id' :expand-row-keys='expands'>? ? ? <el-table-column min- type='expand'>? ? ? ? <template #default='props'>? ? ? ? ? <div>? ? ? ? ? ? <el-table :data='props.row.bMallGoodsSpecifications' border>? ? ? ? ? ? ? <el-table-column type='index' label='序號' />? ? ? ? ? ? ? <el-table-column label='圖片' prop='image'>? ? ? ? ? ? ? ? <template #default='scope'>? ? ? ? ? ? ? ? ? <image-upload v-model='scope.row.image' :limit='1'? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :disabled='!scope.row.specificationEdit'? ? ? ? ? ? ? ? ? ></image-upload>? ? ? ? ? ? ? ? </template>? ? ? ? ? ? ? </el-table-column>? ? ? ? ? ? ? <el-table-column label='規(guī)格描述' prop='specificationDescription'>? ? ? ? ? ? ? ? <template #default='scope'>? ? ? ? ? ? ? ? ? <el-input v-model='scope.row.specificationDescription'? ? ? ? ? ? ? ? ? ? ? ? ? ? :disabled='!scope.row.specificationEdit'? ? ? ? ? ? ? ? ? ? ? ? ? ? />? ? ? ? ? ? ? ? </template>? ? ? ? ? ? ? </el-table-column>? ? ? ? ? ? ? <el-table-column label='規(guī)格' prop='specifications'>? ? ? ? ? ? ? ? <template #default='scope'>? ? ? ? ? ? ? ? ? <el-input v-model='scope.row.specifications'? ? ? ? ? ? ? ? ? ? ? ? ? ? :disabled='!scope.row.specificationEdit'? ? ? ? ? ? ? ? ? ? ? ? ? ? />? ? ? ? ? ? ? ? </template>? ? ? ? ? ? ? </el-table-column>? ? ? ? ? ? ? <el-table-column label='價格' 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'? ? ? ? ? ? ? ? ? ? ? ? ? ? />? ? ? ? ? ? ? ? </template>? ? ? ? ? ? ? </el-table-column>? ? ? ? ? ? ? <el-table-column label='單位' 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='劃線價' prop='crossedPrice'>? ? ? ? ? ? ? ? <template #header>? ? ? ? ? ? ? ? ? <el-icon>? ? ? ? ? ? ? ? ? ? <Edit/>? ? ? ? ? ? ? ? ? </el-icon>? ? ? ? ? ? ? ? ? 劃線價? ? ? ? ? ? ? ? </template>? ? ? ? ? ? ? ? <template #default='scope'>? ? ? ? ? ? ? ? ? <el-input v-model='scope.row.crossedPrice'? ? ? ? ? ? ? ? ? ? ? ? ? ? :disabled='!scope.row.specificationEdit'? ? ? ? ? ? ? ? ? ? ? ? ? ? />? ? ? ? ? ? ? ? </template>? ? ? ? ? ? ? </el-table-column>? ? ? ? ? ? ? <el-table-column label='庫存' prop='stock'>? ? ? ? ? ? ? ? <template #default='scope'>? ? ? ? ? ? ? ? ? <el-input v-model='scope.row.stock'? ? ? ? ? ? ? ? ? ? ? ? ? ? :disabled='!scope.row.specificationEdit'? ? ? ? ? ? ? ? ? ? ? ? ? ? />? ? ? ? ? ? ? ? </template>? ? ? ? ? ? ? </el-table-column>? ? ? ? ? ? ? <el-table-column label='可否調(diào)價' prop='adjustThePrice'>? ? ? ? ? ? ? ? <template #default='scope'>? ? ? ? ? ? ? ? ? <el-switch v-model='scope.row.adjustThePrice' :active-value='1' :inactive-value='0'? ? ? ? ? ? ? ? ? ? ? ? ? ? ?:disabled='!scope.row.specificationEdit'? ? ? ? ? ? ? ? ? ? ? ? ? ? ? />? ? ? ? ? ? ? ? </template>? ? ? ? ? ? ? </el-table-column>? ? ? ? ? ? ? <el-table-column fixed='right' label='操作' 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- type='index' label='序號'/>? ? ? <el-table-column min- label='商品名稱' prop='productName' sortable>? ? ? ? <template #header>? ? ? ? ? 商品名稱? ? ? ? ? <el-icon>? ? ? ? ? ? <QuestionFilled/>? ? ? ? ? </el-icon>? ? ? ? </template>? ? ? </el-table-column>? ? ? <el-table-column min- label='圖片' prop='productImage'>? ? ? ? <template #default='scope'>? ? ? ? ? <el-image ? ? ? ? ? ? ? ? ? ? :src='https://www.jb51.net/javascript/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- label='庫存策略' prop='inventoryStrategy'>? ? ? ? <template #default='scope'>? ? ? ? ? {{ formatInventoryStrategy(scope.row.inventoryStrategy) }}? ? ? ? </template>? ? ? </el-table-column>? ? ? <el-table-column min- label='順序' prop='sort' sortable>? ? ? ? <template #header>? ? ? ? ? 順序? ? ? ? ? <el-icon>? ? ? ? ? ? <QuestionFilled/>? ? ? ? ? </el-icon>? ? ? ? </template>? ? ? </el-table-column>? ? ? <el-table-column min- label='是否已發(fā)布' prop='putShelf'>? ? ? ? <template #default='scope'>? ? ? ? ? <el-switch? ? ? ? ? ? ? v-model='scope.row.putShelf' :active-value='1' :inactive-value='0'? ? ? ? ? ? ? />? ? ? ? </template>? ? ? </el-table-column>? ? ? <el-table-column min- label='是否靜態(tài)' 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'? ? ? ? ? ? ? ? ? ? ? />? ? ? ? </template>? ? ? </el-table-column>? ? ? <el-table-column min- label='SKU數(shù)量' prop='productNum'>? ? ? ? <template #default='scope'>? ? ? ? ? <span :class='{red:scope.row.productNum == 0}'>{{ scope.row.productNum }}</span>? ? ? ? </template>? ? ? </el-table-column>? ? ? <el-table-column min- label='價格' prop='productPrice'/>? ? ? <el-table-column label='操作' fixed='right' min- class-name='small-padding fixed-width'>? ? ? ? <template #default='scope'>? ? ? ? ? <el-button @click='addSpecif(scope.row,scope)'>增加規(guī)格</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';// Emitconst emit = defineEmits(['editShopOpen'])// routeconst route = useRoute()// storeimport 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)}// 增加規(guī)格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('新增成功')? ? ? ? }? ? ? })? ? }? })}// 修改規(guī)格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('刪除成功');? })}// 是否靜態(tài)開關(guān)變化const staticStateChange = (item) => {? return new Promise((resolve, reject) => {? ? proxy.$modal.confirm('一旦商品開啟靜態(tài),該商品不可進(jìn)行任何操作(刪除編輯發(fā)布隱藏),是否確定要 修改 商品 ?').then(() => {? ? ? resolve(true)? ? })? })}// 編輯規(guī)格const editSpecifications = (row) => {? row.specificationEdit = true}// 刪除規(guī)格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>

到此這篇關(guān)于vue3實現(xiàn)多層級列表的項目實踐的文章就介紹到這了,更多相關(guān)vue3 多層級列表內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！