目录
需求背景
需要在统一个列表下，实现商品和规格得管理和联动
解决效果
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('')">+ 新增商品</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>
