商品前台交互更新
This commit is contained in:
SjS
parent
8755722ea5
commit
1b6459a39e
|
|
@ -128,6 +128,12 @@ export const constantRoutes = [
|
|||
name: 'TeamView',
|
||||
meta: { title: '拼桌详情' }
|
||||
},
|
||||
{
|
||||
path: 'goods/:id?',
|
||||
component: () => import('@/views/bst/goodsCategory/components/goodsEdit.vue'),
|
||||
name: 'GoodsEdit',
|
||||
meta: { title: '商品管理' }
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,22 +1,7 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="店铺ID" prop="storeId">
|
||||
<el-input
|
||||
v-model="queryParams.storeId"
|
||||
placeholder="请输入店铺ID"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类ID" prop="categoryId">
|
||||
<el-input
|
||||
v-model="queryParams.categoryId"
|
||||
placeholder="请输入分类ID"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="商品名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
|
|
@ -25,34 +10,38 @@
|
|||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否可存 0-是 1-否" prop="deposit">
|
||||
<el-form-item label="是否可存" prop="deposit">
|
||||
<el-select v-model="queryParams.deposit" placeholder="是否可存" clearable @change="handleQuery">
|
||||
<el-option
|
||||
v-for="dict in dict.type.goods_deposit"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="商品状态" clearable @change="handleQuery">
|
||||
<el-option
|
||||
v-for="dict in dict.type.goods_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="店铺名称" prop="storeName">
|
||||
<el-input
|
||||
v-model="queryParams.deposit"
|
||||
placeholder="请输入是否可存 0-是 1-否"
|
||||
v-model="queryParams.storeName"
|
||||
placeholder="请输入店铺名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="销量" prop="sales">
|
||||
<el-form-item label="分类名称" prop="categoryId">
|
||||
<el-input
|
||||
v-model="queryParams.sales"
|
||||
placeholder="请输入销量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="虚拟销量" prop="virtualSales">
|
||||
<el-input
|
||||
v-model="queryParams.virtualSales"
|
||||
placeholder="请输入虚拟销量"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input
|
||||
v-model="queryParams.sort"
|
||||
placeholder="请输入排序"
|
||||
v-model="queryParams.categoryName"
|
||||
placeholder="请输入分类名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
|
|
@ -119,6 +108,12 @@
|
|||
<template v-else-if="column.key === 'image'">
|
||||
<image-preview :src="d.row[column.key]" :width="50" :height="50"/>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<dict-tag :value="d.row.status" :options="dict.type.goods_status"/>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'deposit'">
|
||||
<dict-tag :value="d.row.deposit" :options="dict.type.goods_deposit"/>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{d.row[column.key]}}
|
||||
</template>
|
||||
|
|
@ -153,41 +148,6 @@
|
|||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改商品对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-row>
|
||||
<form-col :span="span" label="店铺ID" prop="storeId">
|
||||
<el-input v-model="form.storeId" placeholder="请输入店铺ID" />
|
||||
</form-col>
|
||||
<form-col :span="span" label="分类ID" prop="categoryId">
|
||||
<el-input v-model="form.categoryId" placeholder="请输入分类ID" />
|
||||
</form-col>
|
||||
<form-col :span="span" label="商品名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入商品名称" />
|
||||
</form-col>
|
||||
<form-col :span="span" label="图片" prop="image">
|
||||
<image-upload v-model="form.image"/>
|
||||
</form-col>
|
||||
<form-col :span="span" label="是否可存 0-是 1-否" prop="deposit">
|
||||
<el-input v-model="form.deposit" placeholder="请输入是否可存 0-是 1-否" />
|
||||
</form-col>
|
||||
<form-col :span="span" label="销量" prop="sales">
|
||||
<el-input v-model="form.sales" placeholder="请输入销量" />
|
||||
</form-col>
|
||||
<form-col :span="span" label="虚拟销量" prop="virtualSales">
|
||||
<el-input v-model="form.virtualSales" placeholder="请输入虚拟销量" />
|
||||
</form-col>
|
||||
<form-col :span="span" label="排序" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入排序" />
|
||||
</form-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -206,21 +166,22 @@ export default {
|
|||
name: "Goods",
|
||||
mixins: [$showColumns],
|
||||
components: {FormCol},
|
||||
dicts: ['goods_deposit','goods_status'],
|
||||
data() {
|
||||
return {
|
||||
span: 24,
|
||||
// 字段列表
|
||||
columns: [
|
||||
{key: 'id', visible: true, label: 'ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'storeId', visible: true, label: '店铺ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'categoryId', visible: true, label: '分类ID', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'name', visible: true, label: '商品名称', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'image', visible: true, label: '图片', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'deposit', visible: true, label: '是否可存 0-是 1-否', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'sales', visible: true, label: '销量', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'virtualSales', visible: true, label: '虚拟销量', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'status', visible: true, label: '商品状态 0-下架 1-在售', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
// {key: 'sales', visible: true, label: '销量', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
// {key: 'virtualSales', visible: true, label: '虚拟销量', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'deposit', visible: true, label: '是否可存', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'status', visible: true, label: '商品状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'sort', visible: true, label: '排序', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'storeId', visible: true, label: '店铺名称', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
{key: 'categoryId', visible: true, label: '分类名称', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
],
|
||||
// 排序方式
|
||||
orderSorts: ['ascending', 'descending', null],
|
||||
|
|
@ -348,19 +309,14 @@ export default {
|
|||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加商品";
|
||||
this.$router.push({ name: 'GoodsEdit' })
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
getGoods(id).then(response => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改商品";
|
||||
});
|
||||
this.$router.push({
|
||||
name: 'GoodsEdit',
|
||||
params: { id: row.id }
|
||||
})
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
|
|
|
|||
344
src/views/bst/goodsCategory/components/WD.vue
Normal file
344
src/views/bst/goodsCategory/components/WD.vue
Normal file
|
|
@ -0,0 +1,344 @@
|
|||
<template>
|
||||
<div class="goods-edit-container">
|
||||
<!-- 头部区域 -->
|
||||
<div class="edit-header">
|
||||
<el-button icon="el-icon-arrow-left" class="back-btn" @click="cancel">返回</el-button>
|
||||
<h2 class="title">商品管理</h2>
|
||||
</div>
|
||||
|
||||
<!-- 选项卡导航 -->
|
||||
<el-form ref="form" :model="form" label-width="120px" class="edit-form" :rules="rules">
|
||||
<el-tabs v-model="activeTab" class="edit-tabs">
|
||||
<el-tab-pane label="价格/库存" name="price">
|
||||
<div class="specs-wrapper">
|
||||
<div class="specs-container">
|
||||
<!-- 规格项循环 -->
|
||||
<div
|
||||
v-for="(spec, sIndex) in form.specs"
|
||||
:key="sIndex"
|
||||
class="spec-card"
|
||||
>
|
||||
<div class="spec-header">
|
||||
<span class="spec-title">规格项 {{ sIndex + 1 }}</span>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="removeSpec(sIndex)"
|
||||
class="delete-btn"
|
||||
>删除规格项
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 规格名 -->
|
||||
<el-form-item
|
||||
:prop="`specs[${sIndex}].specName`"
|
||||
:rules="{ required: true, message: '规格名不能为空', trigger: 'blur' }"
|
||||
>
|
||||
<el-input
|
||||
v-model="spec.specName"
|
||||
placeholder="请输入规格名"
|
||||
maxlength="20"
|
||||
show-word-limit
|
||||
class="spec-input"
|
||||
>
|
||||
<template slot="prefix">
|
||||
<span class="input-label">规格名</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 规格值 -->
|
||||
<div class="values-container">
|
||||
<el-form-item
|
||||
v-for="(value, vIndex) in spec.values"
|
||||
:key="vIndex"
|
||||
:prop="`specs[${sIndex}].values[${vIndex}].value`"
|
||||
class="value-item"
|
||||
>
|
||||
<el-input
|
||||
v-model="value.value"
|
||||
placeholder="请输入规格值"
|
||||
maxlength="20"
|
||||
show-word-limit
|
||||
class="value-input"
|
||||
>
|
||||
<template slot="prefix">
|
||||
<span class="input-label">规格值</span>
|
||||
</template>
|
||||
<el-button
|
||||
slot="append"
|
||||
icon="el-icon-remove"
|
||||
@click="removeValue(sIndex, vIndex)"
|
||||
class="value-delete"
|
||||
/>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-button
|
||||
type="text"
|
||||
class="add-value-btn"
|
||||
@click="addValue(sIndex)"
|
||||
>
|
||||
<i class="el-icon-circle-plus"></i> 添加规格值
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 添加规格项按钮 -->
|
||||
<el-button
|
||||
class="add-spec-btn"
|
||||
@click="addSpec"
|
||||
>
|
||||
<i class="el-icon-circle-plus"></i> 添加规格项
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
|
||||
<!-- 底部操作按钮 -->
|
||||
<div class="footer-actions">
|
||||
<el-button type="primary" size="medium" @click="submitForm">保存商品</el-button>
|
||||
<el-button size="medium" @click="cancel">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {addGoods, updateGoods} from "@/api/bst/goods";
|
||||
|
||||
export default {
|
||||
name: 'GoodsEdit',
|
||||
dicts: ['goods_deposit', "goods_status"],
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'base',
|
||||
categoryOptions: [], // 分类列表
|
||||
storeOptions: [], // 店铺列表
|
||||
cascaderProps: {
|
||||
value: 'id',
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
checkStrictly: true,// 可单选任意级
|
||||
emitPath: false,
|
||||
disabled: (data) => data.parentId !== 0
|
||||
},
|
||||
form: {
|
||||
specs: [{
|
||||
specName: '',
|
||||
values: [{ value: '' }]
|
||||
}]
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getStoreList()
|
||||
},
|
||||
methods: {
|
||||
|
||||
async submitForm() {
|
||||
try {
|
||||
await this.$refs.form.validate()
|
||||
console.log('提交数据:', JSON.stringify(this.form, null, 2))
|
||||
const promise = this.form.id != null ? updateGoods(this.form) : addGoods(this.form)
|
||||
const response = await promise
|
||||
this.$modal.msgSuccess(this.form.id != null ? "修改成功" : "新增成功")
|
||||
this.dialogVisible = false
|
||||
this.$emit('success')
|
||||
this.$router.go(-1);
|
||||
} catch (errors) {
|
||||
|
||||
}
|
||||
},
|
||||
cancel() {
|
||||
this.$router.back()
|
||||
},
|
||||
// 添加规格项
|
||||
addSpec() {
|
||||
this.form.specs.push({
|
||||
specName: '',
|
||||
values: [{value: ''}]
|
||||
})
|
||||
},
|
||||
// 删除规格项
|
||||
removeSpec(index) {
|
||||
if (this.form.specs.length > 1) {
|
||||
this.form.specs.splice(index, 1)
|
||||
}
|
||||
},
|
||||
|
||||
// 添加规格值
|
||||
addValue(specIndex) {
|
||||
this.form.specs[specIndex].values.push({value: ''})
|
||||
},
|
||||
|
||||
// 删除规格值
|
||||
removeValue(specIndex, valueIndex) {
|
||||
if (this.form.specs[specIndex].values.length > 1) {
|
||||
this.form.specs[specIndex].values.splice(valueIndex, 1)
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.specs-wrapper {
|
||||
padding: 20px;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.specs-container {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.spec-card {
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
background: #fff;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.spec-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.spec-title {
|
||||
font-size: 13px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
color: #f56c6c;
|
||||
border-color: #fde2e2;
|
||||
background: #fef0f0;
|
||||
}
|
||||
|
||||
.spec-input,
|
||||
.value-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
color: #606266;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item {
|
||||
margin-bottom: 12px !important; /* 减小表单项间距 */
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
height: 32px !important; /* 减小输入框高度 */
|
||||
line-height: 32px !important;
|
||||
}
|
||||
|
||||
.values-container {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.value-item {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.value-delete {
|
||||
color: #f56c6c;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.add-value-btn {
|
||||
color: #409eff;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.add-value-btn i {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.add-spec-btn {
|
||||
width: 100%;
|
||||
color: #409eff;
|
||||
border-color: #409eff;
|
||||
background: #ecf5ff;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.goods-edit-container {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
||||
.edit-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.back-btn {
|
||||
padding: 0;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-header ::v-deep .back-btn {
|
||||
/* 移除按钮边框 */
|
||||
border: 0 !important;
|
||||
|
||||
/* 清除聚焦状态阴影 */
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-tabs {
|
||||
::v-deep .el-tabs__header {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-form {
|
||||
padding: 20px 50px;
|
||||
|
||||
.char-counter {
|
||||
color: #909399;
|
||||
margin-left: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.category-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.category-btns {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-wrapper {
|
||||
.upload-tips {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
padding: 20px 50px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
text-align: right;
|
||||
background: #fff;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
697
src/views/bst/goodsCategory/components/goodsEdit.vue
Normal file
697
src/views/bst/goodsCategory/components/goodsEdit.vue
Normal file
|
|
@ -0,0 +1,697 @@
|
|||
<template>
|
||||
<div class="goods-edit-container">
|
||||
<!-- 头部区域 -->
|
||||
<div class="edit-header">
|
||||
<el-button icon="el-icon-arrow-left" class="back-btn" @click="cancel">返回</el-button>
|
||||
<h2 class="title">商品管理</h2>
|
||||
</div>
|
||||
|
||||
<!-- 选项卡导航 -->
|
||||
<el-form ref="form" :model="form" label-width="120px" class="edit-form" :rules="rules">
|
||||
<el-tabs v-model="activeTab" class="edit-tabs">
|
||||
<!-- 基础设置 -->
|
||||
<el-tab-pane label="基础设置" name="base">
|
||||
<el-form-item label="所属店铺" prop="storeId">
|
||||
<div class="category-wrapper">
|
||||
<el-select
|
||||
v-model="form.storeId"
|
||||
placeholder="请选择店铺"
|
||||
clearable
|
||||
@change="handleStoreChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in storeOptions"
|
||||
:key="item.storeId"
|
||||
:label="item.storeName"
|
||||
:value="item.storeId"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属分类" label-width="120px" prop="categoryId">
|
||||
<el-cascader
|
||||
v-model="form.categoryId"
|
||||
:options="categoryOptions"
|
||||
:props="cascaderProps"
|
||||
clearable
|
||||
:show-all-levels="false"
|
||||
placeholder="请先选择店铺"
|
||||
:disabled="!form.storeId"
|
||||
>
|
||||
<template slot-scope="{ node, data }">
|
||||
<span v-if="node.level === 1">{{ data.name }}</span>
|
||||
</template>
|
||||
</el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品名称" prop="name">
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
placeholder="请输入商品名称"
|
||||
maxlength="64"
|
||||
show-word-limit
|
||||
style="width: 400px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品轮播图" prop="image">
|
||||
<div class="upload-wrapper">
|
||||
<image-upload v-model="form.image" type="textarea" placeholder="请输入内容"/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否可存" prop="deposit">
|
||||
<el-radio-group v-model="form.deposit">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.goods_deposit"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="价格/库存" name="price">
|
||||
<div class="specs-wrapper">
|
||||
<div class="specs-container">
|
||||
<el-button class="add-spec-btn" @click="addSpec">添加规格项</el-button>
|
||||
<!-- 规格项循环 -->
|
||||
<div
|
||||
v-for="(spec, sIndex) in form.specs"
|
||||
:key="sIndex"
|
||||
class="spec-card"
|
||||
>
|
||||
<!-- 规格名 -->
|
||||
<el-form-item
|
||||
:prop="`specs[${sIndex}].specName`"
|
||||
label="规格名"
|
||||
label-width="80px"
|
||||
class="spec-name-item"
|
||||
>
|
||||
<el-input
|
||||
v-model="spec.specName"
|
||||
maxlength="14"
|
||||
show-word-limit
|
||||
class="spec-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 规格值 -->
|
||||
<div class="values-container">
|
||||
<div class="values-group">
|
||||
<div
|
||||
v-for="(value, vIndex) in spec.values"
|
||||
:key="vIndex"
|
||||
class="value-wrapper"
|
||||
>
|
||||
|
||||
<el-form-item
|
||||
v-if="vIndex === 0"
|
||||
:prop="`specs[${sIndex}].values[${vIndex}].value`"
|
||||
class="value-item"
|
||||
label="规格值"
|
||||
label-width="80px"
|
||||
>
|
||||
<div class="input-container">
|
||||
<el-input
|
||||
v-model="value.value"
|
||||
maxlength="14"
|
||||
show-word-limit
|
||||
class="specValue-input"
|
||||
/>
|
||||
<i
|
||||
class="el-icon-close value-delete-icon"
|
||||
@click="removeValue(sIndex, vIndex)"
|
||||
:style="{
|
||||
cursor: spec.values.length === 1 ? 'not-allowed' : 'pointer',
|
||||
color: spec.values.length === 1 ? '#c0c4cc' : '#f56c6c'
|
||||
}"
|
||||
></i>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-else
|
||||
:prop="`specs[${sIndex}].values[${vIndex}].value`"
|
||||
class="value-item"
|
||||
label-width="0"
|
||||
>
|
||||
<div class="input-container">
|
||||
<el-input
|
||||
v-model="value.value"
|
||||
maxlength="14"
|
||||
show-word-limit
|
||||
class="specValue-input"
|
||||
/>
|
||||
<i
|
||||
class="el-icon-close value-delete-icon"
|
||||
@click="removeValue(sIndex, vIndex)"
|
||||
:style="{
|
||||
cursor: spec.values.length === 1 ? 'not-allowed' : 'pointer',
|
||||
color: spec.values.length === 1 ? '#c0c4cc' : '#f56c6c'
|
||||
}"
|
||||
></i>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-button
|
||||
type="text"
|
||||
class="add-value-btn"
|
||||
@click="addValue(sIndex)"
|
||||
>
|
||||
<i class="el-icon-circle-plus"></i> 添加规格值
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<i
|
||||
class="el-icon-close delete-icon"
|
||||
@click="removeSpec(sIndex)"
|
||||
:style="{ cursor: form.specs.length === 1 ? 'not-allowed' : 'pointer' }"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sku-table">
|
||||
<el-table :data="form.skuList" style="width: 100%">
|
||||
<!-- 动态生成规格列 -->
|
||||
<el-table-column
|
||||
v-for="(spec, index) in form.specs"
|
||||
:key="index"
|
||||
:label="spec.specName">
|
||||
<template slot-scope="{ row }">
|
||||
{{ row.specValues[index] }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 固定字段 -->
|
||||
<el-table-column label="规格图片" width="130">
|
||||
<template slot-scope="{ row }">
|
||||
<image-upload v-model="row.image" :limit="1" width="120px" height="32px" :is-show-tip="false"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="价格" prop="price" width="150">
|
||||
<template slot-scope="{ row }">
|
||||
<el-input
|
||||
v-model.number="row.price"
|
||||
min="0"
|
||||
step="0.01">
|
||||
</el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="库存" prop="stock" width="150">
|
||||
<template slot-scope="{ row }">
|
||||
<el-input
|
||||
v-model.number="row.stock"
|
||||
placeholder="请输入库存"
|
||||
min="0">
|
||||
</el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="销售设置" name="sales">
|
||||
<el-form-item label="虚拟销量" prop="virtualSales">
|
||||
<el-input
|
||||
v-model="form.virtualSales"
|
||||
placeholder="请输入虚拟销量"
|
||||
style="width: 400px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="显示顺序" prop="sort">
|
||||
<el-input
|
||||
v-model="form.sort"
|
||||
placeholder="请输入显示顺序"
|
||||
style="width: 400px"
|
||||
/>
|
||||
<div class="form-tip" style="color: #909399;">
|
||||
默认为0，越小越靠前
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品状态" prop="status">
|
||||
<el-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
v-for="dict in dict.type.goods_status"
|
||||
:key="dict.value"
|
||||
:label="dict.value"
|
||||
>
|
||||
{{ dict.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-form>
|
||||
|
||||
<!-- 底部操作按钮 -->
|
||||
<div class="footer-actions">
|
||||
<el-button type="primary" size="medium" @click="submitForm">保存商品</el-button>
|
||||
<el-button size="medium" @click="cancel">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {listStore} from "@/api/bst/store";
|
||||
import {listGoodsCategory} from "@/api/bst/goodsCategory";
|
||||
import {handleTree} from "@/utils/ruoyi";
|
||||
import {addGoods, updateGoods} from "@/api/bst/goods";
|
||||
|
||||
export default {
|
||||
name: 'GoodsEdit',
|
||||
dicts: ['goods_deposit', "goods_status"],
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'base',
|
||||
categoryOptions: [], // 分类列表
|
||||
storeOptions: [], // 店铺列表
|
||||
cascaderProps: {
|
||||
value: 'id',
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
checkStrictly: true,// 可单选任意级
|
||||
emitPath: false,
|
||||
disabled: (data) => data.parentId !== 0
|
||||
},
|
||||
form: {
|
||||
storeName: null,
|
||||
categoryName: null,
|
||||
storeId: null,
|
||||
categoryId: null,
|
||||
name: null,
|
||||
pid: null,
|
||||
image: null,
|
||||
deposit: '1',
|
||||
virtualSales: null,
|
||||
sort: 0,
|
||||
status: '1',
|
||||
specs: [{
|
||||
specName: '',
|
||||
values: [{value: ''}]
|
||||
}]
|
||||
},
|
||||
fieldToTabMap: {
|
||||
storeId: 'base',
|
||||
categoryId: 'base',
|
||||
name: 'base',
|
||||
image: 'base',
|
||||
deposit: 'base',
|
||||
virtualSales: 'sales',
|
||||
sort: 'sales',
|
||||
status: 'sales'
|
||||
},
|
||||
rules: {
|
||||
storeId: [
|
||||
{required: true, message: "所属店铺不能为空", trigger: "change"}
|
||||
],
|
||||
categoryId: [
|
||||
{required: true, message: "所属分类不能为空", trigger: "change"}
|
||||
],
|
||||
name: [
|
||||
{required: true, message: "商品名称不能为空", trigger: "blur"}
|
||||
],
|
||||
image: [
|
||||
{required: true, message: "请上传商品图片", trigger: "change"}
|
||||
],
|
||||
deposit: [
|
||||
{required: true, message: "请选择可存状态", trigger: "change"}
|
||||
],
|
||||
status: [
|
||||
{required: true, message: "商品状态不能为空", trigger: "change"}
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getStoreList()
|
||||
},
|
||||
watch: {
|
||||
// 监听规格变化自动生成SKU
|
||||
'form.specs': {
|
||||
deep: true,
|
||||
handler(specs) {
|
||||
this.generateSKU()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateSKU() {
|
||||
const validSpecs = this.form.specs.filter(spec =>
|
||||
spec.specName &&
|
||||
spec.values.length > 0 &&
|
||||
spec.values.every(v => v.value.trim())
|
||||
)
|
||||
|
||||
if (validSpecs.length === 0) {
|
||||
this.form.skuList = []
|
||||
return
|
||||
}
|
||||
|
||||
const specsValues = validSpecs.map(spec =>
|
||||
spec.values.map(v => v.value.trim())
|
||||
)
|
||||
|
||||
// 优化笛卡尔积计算
|
||||
const combinations = specsValues.reduce((acc, curr) =>
|
||||
acc.flatMap(c => curr.map(v => [...c, v])),
|
||||
[[]]
|
||||
).filter(arr => arr.length > 0)
|
||||
|
||||
// 保留已有数据逻辑优化
|
||||
this.form.skuList = combinations.map(comb => {
|
||||
const key = comb.join('##')
|
||||
return (
|
||||
this.form.skuList.find(sku =>
|
||||
sku.specValues.join('##') === key
|
||||
) || {
|
||||
specValues: comb,
|
||||
image: null,
|
||||
price: null,
|
||||
stock: null
|
||||
}
|
||||
)
|
||||
})
|
||||
},
|
||||
async handleStoreChange() {
|
||||
this.form.pid = null;
|
||||
if (!this.form.storeId) {
|
||||
this.categoryOptions = [];
|
||||
return;
|
||||
}
|
||||
const res = await listGoodsCategory({
|
||||
storeId: this.form.storeId // 仅传店铺ID
|
||||
});
|
||||
|
||||
this.categoryOptions = handleTree(res.rows, "id", "pid");
|
||||
},
|
||||
|
||||
async submitForm() {
|
||||
try {
|
||||
await this.$refs.form.validate()
|
||||
console.log('提交数据:', JSON.stringify(this.form, null, 2))
|
||||
const promise = this.form.id != null ? updateGoods(this.form) : addGoods(this.form)
|
||||
const response = await promise
|
||||
this.$modal.msgSuccess(this.form.id != null ? "修改成功" : "新增成功")
|
||||
this.dialogVisible = false
|
||||
this.$emit('success')
|
||||
this.$router.go(-1);
|
||||
} catch (errors) {
|
||||
const errorFields = Object.keys(errors);
|
||||
if (errorFields.length > 0) {
|
||||
const firstErrorField = errorFields[0];
|
||||
const targetTab = this.fieldToTabMap[firstErrorField] || 'base'; // 默认切换到基础选项卡
|
||||
this.activeTab = targetTab;
|
||||
}
|
||||
}
|
||||
},
|
||||
getStoreList() {
|
||||
this.loading = true;
|
||||
listStore().then(response => {
|
||||
this.storeOptions = response.rows;
|
||||
})
|
||||
},
|
||||
cancel() {
|
||||
this.$router.back()
|
||||
},
|
||||
// 添加规格项
|
||||
addSpec() {
|
||||
this.form.specs.push({
|
||||
specName: '',
|
||||
values: [{value: ''}]
|
||||
})
|
||||
this.generateSKU()
|
||||
},
|
||||
// 删除规格项
|
||||
removeSpec(index) {
|
||||
if (this.form.specs.length === 1) {
|
||||
this.$message.warning('至少需要保留一个规格项');
|
||||
return;
|
||||
}
|
||||
this.form.specs.splice(index, 1);
|
||||
this.generateSKU()
|
||||
},
|
||||
|
||||
// 添加规格值
|
||||
addValue(specIndex) {
|
||||
this.form.specs[specIndex].values.push({value: ''}); // 改用push方法
|
||||
this.generateSKU();
|
||||
},
|
||||
|
||||
// 删除规格值
|
||||
removeValue(specIndex, valueIndex) {
|
||||
if (this.form.specs[specIndex].values.length > 1) {
|
||||
// 使用splice触发响应式更新
|
||||
this.form.specs[specIndex].values.splice(valueIndex, 1)
|
||||
this.$nextTick(() => {
|
||||
this.generateSKU()
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.input-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.values-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px; /* 元素间距 */
|
||||
}
|
||||
|
||||
.value-wrapper {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.add-spec-btn {
|
||||
width: 120px;
|
||||
color: #ffffff;
|
||||
background: rgba(48, 42, 204, 0.87);
|
||||
padding: 8px;
|
||||
margin-bottom: 20px; /* 新增下边距 */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 增加层次感 */
|
||||
}
|
||||
|
||||
.specs-wrapper {
|
||||
padding: 20px;
|
||||
background: #ffffff;
|
||||
}
|
||||
::v-deep .el-form-item--no-label .el-form-item__content {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
::v-deep .el-form-item--no-label {
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
.values-group {
|
||||
gap: 4px; /* 缩小间距 */
|
||||
}
|
||||
|
||||
|
||||
.specs-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.spec-card {
|
||||
position: relative;
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
background: rgb(245, 243, 255);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.delete-icon {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
color: #f56c6c;
|
||||
font-size: 16px;
|
||||
padding: 4px;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.delete-icon:hover {
|
||||
background-color: #fde2e2;
|
||||
}
|
||||
|
||||
.delete-icon[style*="not-allowed"] {
|
||||
color: #c0c4cc;
|
||||
cursor: not-allowed;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.spec-input,
|
||||
.value-input {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
|
||||
.specValue-input,
|
||||
.value-input {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
color: #606266;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item {
|
||||
margin-bottom: 12px !important; /* 减小表单项间距 */
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
height: 32px !important; /* 减小输入框高度 */
|
||||
line-height: 32px !important;
|
||||
padding-right: 30px !important;
|
||||
}
|
||||
|
||||
.values-container {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
::v-deep .spec-name-item .el-form-item__label,
|
||||
::v-deep .value-item .el-form-item__label {
|
||||
padding-right: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
::v-deep .spec-input .el-input__inner,
|
||||
::v-deep .value-input .el-input__inner {
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
|
||||
.value-item {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.value-delete {
|
||||
color: #f56c6c;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.add-value-btn {
|
||||
margin-top: -12px !important;
|
||||
height: 32px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
|
||||
.add-spec-btn {
|
||||
width: 120px;
|
||||
color: #ffffff;
|
||||
background: #1d50cc;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.goods-edit-container {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
||||
.edit-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.back-btn {
|
||||
padding: 0;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-header ::v-deep .back-btn {
|
||||
/* 移除按钮边框 */
|
||||
border: 0 !important;
|
||||
|
||||
/* 清除聚焦状态阴影 */
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-tabs {
|
||||
::v-deep .el-tabs__header {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-form {
|
||||
padding: 20px 50px;
|
||||
|
||||
.char-counter {
|
||||
color: #909399;
|
||||
margin-left: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.category-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.category-btns {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-wrapper {
|
||||
.upload-tips {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-actions {
|
||||
padding: 20px 50px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
text-align: right;
|
||||
background: #fff;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.value-delete-icon {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: -11px;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
font-size: 12px;
|
||||
padding: 2px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input-container:hover .value-delete-icon {
|
||||
opacity: 1; /* 悬停时完全显示 */
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user