<!--/**
?* @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">已發(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" style="width: 400px;marginRight:30px " 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" 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="規(guī)格描述" 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="規(guī)格" 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="可否調(diào)價" 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="是否已發(fā)布" 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="是否靜態(tài)" 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數(shù)量" 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)">增加規(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";
// 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)
}
// 增加規(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>