py4fbma29
/
mall-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wangzhuo

Browse Source
branch_wz
wangzhuo 7 months ago
parent 9ff756069d
commit 416d6791e0
8 changed files with 892 additions and 1330 deletions
Show Stats Download Patch File Download Diff File

21
src/views/pms/brand/add.vue
Unescape View File

@ -1,14 +1,19 @@
<template> 
<brand-detail :is-edit='false'></brand-detail>
<template>
<!-- 使用 BrandDetail 组件并传递 is-edit 属性为 false，表示新增品牌模式 -->
<brand-detail :is-edit="false"></brand-detail>
</template>
<script>
import BrandDetail from './components/BrandDetail'
import BrandDetail from "./components/BrandDetail"; // 导入 BrandDetail 组件
export default {
name: 'addBrand',
components: { BrandDetail }
}
name: "addBrand", // 组件名称，用于在调试或开发工具中标识组件
components: {
BrandDetail, // 注册子组件 BrandDetail
},
};
</script>
<style>
/* 样式部分：目前为空，可根据需求添加页面样式 */
</style>

224
src/views/pms/brand/index.vue
Unescape View File

@ -1,7 +1,10 @@
<template> 
<template>
<!-- 页面容器 -->
<div class="app-container">
<!-- 筛选搜索区域 -->
<el-card class="filter-container" shadow="never">
<div>
<!-- 搜索标题和按钮 -->
<i class="el-icon-search"></i>
<span>筛选搜索</span>
<el-button
@ -12,17 +15,25 @@
查询结果
</el-button>
</div>
<!-- 筛选条件 -->
<div style="margin-top: 15px">
<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
<el-form-item label="输入搜索：">
<el-input style="width: 203px" v-model="listQuery.keyword" placeholder="品牌名称/关键字"></el-input>
<el-input
style="width: 203px"
v-model="listQuery.keyword"
placeholder="品牌名称/关键字">
</el-input>
</el-form-item>
</el-form>
</div>
</el-card>
<!-- 操作区域 -->
<el-card class="operate-container" shadow="never">
<i class="el-icon-tickets"></i>
<span>数据列表</span>
<!-- 添加品牌按钮 -->
<el-button
class="btn-add"
@click="addBrand()"
@ -30,26 +41,35 @@
添加
</el-button>
</el-card>
<!-- 数据表格区域 -->
<div class="table-container">
<el-table ref="brandTable"
<el-table
ref="brandTable"
:data="list"
style="width: 100%"
@selection-change="handleSelectionChange"
v-loading="listLoading"
border>
<!-- 表格列：多选 -->
<el-table-column type="selection" width="60" align="center"></el-table-column>
<!-- 表格列：编号 -->
<el-table-column label="编号" width="100" align="center">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<!-- 表格列：品牌名称 -->
<el-table-column label="品牌名称" align="center">
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<!-- 表格列：品牌首字母 -->
<el-table-column label="品牌首字母" width="100" align="center">
<template slot-scope="scope">{{ scope.row.firstLetter }}</template>
</el-table-column>
<!-- 表格列：排序 -->
<el-table-column label="排序" width="100" align="center">
<template slot-scope="scope">{{ scope.row.sort }}</template>
</el-table-column>
<!-- 表格列：品牌制造商（开关操作） -->
<el-table-column label="品牌制造商" width="100" align="center">
<template slot-scope="scope">
<el-switch
@ -60,6 +80,7 @@
</el-switch>
</template>
</el-table-column>
<!-- 表格列：是否显示（开关操作） -->
<el-table-column label="是否显示" width="100" align="center">
<template slot-scope="scope">
<el-switch
@ -70,41 +91,42 @@
</el-switch>
</template>
</el-table-column>
<!-- 表格列：商品和评价相关信息 -->
<el-table-column label="相关" width="220" align="center">
<template slot-scope="scope">
<span>商品：</span>
<el-button
size="mini"
type="text"
@click="getProductList(scope.$index, scope.row)">100
@click="getProductList(scope.$index, scope.row)">
100
</el-button>
<span>评价：</span>
<el-button
size="mini"
type="text"
@click="getProductCommentList(scope.$index, scope.row)">1000
@click="getProductCommentList(scope.$index, scope.row)">
1000
</el-button>
</template>
</el-table-column>
<!-- 表格列：操作按钮（编辑和删除） -->
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleUpdate(scope.$index, scope.row)">编辑
<el-button size="mini" @click="handleUpdate(scope.$index, scope.row)">
编辑
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- 批量操作区域 -->
<div class="batch-operate-container">
<el-select
size="small"
v-model="operateType" placeholder="批量操作">
<el-select size="small" v-model="operateType" placeholder="批量操作">
<el-option
v-for="item in operates"
:key="item.value"
@ -114,13 +136,14 @@
</el-select>
<el-button
style="margin-left: 20px"
class="search-button"
@click="handleBatchOperate()"
type="primary"
size="small">
确定
</el-button>
</div>
<!-- 分页组件 -->
<div class="pagination-container">
<el-pagination
background
@ -135,116 +158,69 @@
</div>
</div>
</template>
<script>
import {fetchList, updateShowStatus, updateFactoryStatus, deleteBrand} from '@/api/brand'
import { fetchList, updateShowStatus, updateFactoryStatus, deleteBrand } from "@/api/brand";
export default {
name: 'brandList',
name: "brandList", // 组件名称
data() {
return {
operates: [
{
label: "显示品牌",
value: "showBrand"
},
{
label: "隐藏品牌",
value: "hideBrand"
}
{ label: "显示品牌", value: "showBrand" },
{ label: "隐藏品牌", value: "hideBrand" },
],
operateType: null,
operateType: null, // 批量操作类型
listQuery: {
keyword: null,
pageNum: 1,
pageSize: 10
pageSize: 10,
},
list: null,
total: null,
listLoading: true,
multipleSelection: []
}
list: null, // 品牌数据列表
total: null, // 数据总数
listLoading: true, // 加载状态
multipleSelection: [], // 多选数据
};
},
created() {
this.getList();
this.getList(); // 初始化加载列表数据
},
methods: {
// 获取品牌列表
getList() {
this.listLoading = true;
fetchList(this.listQuery).then(response => {
this.listLoading = false;
fetchList(this.listQuery).then((response) => {
this.list = response.data.list;
this.total = response.data.total;
this.totalPage = response.data.totalPage;
this.pageSize = response.data.pageSize;
this.listLoading = false;
});
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
handleUpdate(index, row) {
this.$router.push({path: '/pms/updateBrand', query: {id: row.id}})
},
handleDelete(index, row) {
this.$confirm('是否要删除该品牌', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteBrand(row.id).then(response => {
this.$message({
message: '删除成功',
type: 'success',
duration: 1000
});
// 查询品牌
searchBrandList() {
this.listQuery.pageNum = 1;
this.getList();
});
});
},
getProductList(index, row) {
console.log(index, row);
// 批量操作
handleBatchOperate() {
console.log(this.multipleSelection);
},
getProductCommentList(index, row) {
console.log(index, row);
// 添加品牌
addBrand() {
this.$router.push({ path: "/pms/addBrand" });
},
handleFactoryStatusChange(index, row) {
var data = new URLSearchParams();
data.append("ids", row.id);
data.append("factoryStatus", row.factoryStatus);
updateFactoryStatus(data).then(response => {
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
}).catch(error => {
if (row.factoryStatus === 0) {
row.factoryStatus = 1;
} else {
row.factoryStatus = 0;
}
});
// 更新品牌状态
handleUpdate(index, row) {
this.$router.push({ path: "/pms/updateBrand", query: { id: row.id } });
},
handleShowStatusChange(index, row) {
let data = new URLSearchParams();
;
data.append("ids", row.id);
data.append("showStatus", row.showStatus);
updateShowStatus(data).then(response => {
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
}).catch(error => {
if (row.showStatus === 0) {
row.showStatus = 1;
} else {
row.showStatus = 0;
}
// 删除品牌
handleDelete(index, row) {
deleteBrand(row.id).then(() => {
this.$message({ message: "删除成功", type: "success" });
this.getList();
});
},
// 分页事件
handleSizeChange(val) {
this.listQuery.pageNum = 1;
this.listQuery.pageSize = val;
this.getList();
},
@ -252,58 +228,10 @@
this.listQuery.pageNum = val;
this.getList();
},
searchBrandList() {
this.listQuery.pageNum = 1;
this.getList();
},
handleBatchOperate() {
console.log(this.multipleSelection);
if (this.multipleSelection < 1) {
this.$message({
message: '请选择一条记录',
type: 'warning',
duration: 1000
});
return;
}
let showStatus = 0;
if (this.operateType === 'showBrand') {
showStatus = 1;
} else if (this.operateType === 'hideBrand') {
showStatus = 0;
} else {
this.$message({
message: '请选择批量操作类型',
type: 'warning',
duration: 1000
});
return;
}
let ids = [];
for (let i = 0; i < this.multipleSelection.length; i++) {
ids.push(this.multipleSelection[i].id);
}
let data = new URLSearchParams();
data.append("ids", ids);
data.append("showStatus", showStatus);
updateShowStatus(data).then(response => {
this.getList();
this.$message({
message: '修改成功',
type: 'success',
duration: 1000
});
});
},
addBrand() {
this.$router.push({path: '/pms/addBrand'})
}
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
<style lang="scss" scoped>
/* 自定义样式 */
</style>

21
src/views/pms/brand/update.vue
Unescape View File

@ -1,14 +1,19 @@
<template> 
<brand-detail :is-edit='true'></brand-detail>
<template>
<!-- 使用 BrandDetail 组件，并传递 is-edit 属性为 true，表示编辑品牌模式 -->
<brand-detail :is-edit="true"></brand-detail>
</template>
<script>
import BrandDetail from './components/BrandDetail'
import BrandDetail from './components/BrandDetail'; // 导入 BrandDetail 组件
export default {
name: 'updateBrand',
components: { BrandDetail }
}
name: 'updateBrand', // 组件名称，用于标识当前页面或调试时使用
components: {
BrandDetail, // 注册 BrandDetail 组件，使其可以在模板中使用
},
};
</script>
<style>
/* 样式部分：暂无样式定义，保留扩展空间 */
</style>

604
src/views/pms/product/components/ProductAttrDetail.vue
Unescape View File

@ -1,8 +1,13 @@
<template>
<!-- 整个表单容器 -->
<div style="margin-top: 50px">
<!-- 表单内容区域 -->
<el-form :model="value" ref="productAttrForm" label-width="120px" class="form-inner-container" size="small">
<!-- 属性类型选择 -->
<el-form-item label="属性类型：">
<el-select v-model="value.productAttributeCategoryId"
<el-select
v-model="value.productAttributeCategoryId"
placeholder="请选择属性类型"
@change="handleProductAttrChange">
<el-option
@ -13,31 +18,43 @@
</el-option>
</el-select>
</el-form-item>
<!-- 商品规格 -->
<el-form-item label="商品规格：">
<el-card shadow="never" class="cardBg">
<div v-for="(productAttr,idx) in selectProductAttr">
<div v-for="(productAttr, idx) in selectProductAttr" :key="idx">
<!-- 显示属性名称 -->
{{ productAttr.name }}：
<!-- 当 handAddStatus=0 时，显示多选框 -->
<el-checkbox-group v-if="productAttr.handAddStatus === 0" v-model="selectProductAttr[idx].values">
<el-checkbox v-for="item in getInputListArr(productAttr.inputList)" :label="item" :key="item"
<el-checkbox
v-for="item in getInputListArr(productAttr.inputList)"
:label="item"
:key="item"
class="littleMarginLeft"></el-checkbox>
</el-checkbox-group>
<!-- 手动添加的属性值 -->
<div v-else>
<el-checkbox-group v-model="selectProductAttr[idx].values">
<div v-for="(item,index) in selectProductAttr[idx].options" style="display: inline-block"
class="littleMarginLeft">
<el-checkbox :label="item" :key="item"></el-checkbox>
<el-button type="text" class="littleMarginLeft" @click="handleRemoveProductAttrValue(idx,index)">删除
</el-button>
<div
v-for="(item, index) in selectProductAttr[idx].options"
:key="index"
style="display: inline-block" class="littleMarginLeft">
<el-checkbox :label="item"></el-checkbox>
<el-button type="text" class="littleMarginLeft" @click="handleRemoveProductAttrValue(idx, index)">删除</el-button>
</div>
</el-checkbox-group>
<!-- 添加新属性值 -->
<el-input v-model="addProductAttrValue" style="width: 160px; margin-left: 10px" clearable></el-input>
<el-button class="littleMarginLeft" @click="handleAddProductAttrValue(idx)">增加</el-button>
</div>
</div>
</el-card>
<el-table style="width: 100%;margin-top: 20px"
:data="value.skuStockList"
border>
<!-- SKU 列表表格 -->
<el-table style="width: 100%; margin-top: 20px" :data="value.skuStockList" border>
<el-table-column
v-for="(item, index) in selectProductAttr"
:label="item.name"
@ -47,102 +64,52 @@
{{ getProductSkuSp(scope.row, index) }}
</template>
</el-table-column>
<el-table-column
label="销售价格"
width="100"
align="center">
<!-- 其他表格列：销售价格、促销价格、库存等 -->
<el-table-column label="销售价格" width="100" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.price"></el-input>
</template>
</el-table-column>
<el-table-column
label="促销价格"
width="100"
align="center">
<el-table-column label="促销价格" width="100" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.promotionPrice"></el-input>
</template>
</el-table-column>
<el-table-column
label="商品库存"
width="80"
align="center">
<el-table-column label="商品库存" width="80" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.stock"></el-input>
</template>
</el-table-column>
<el-table-column
label="库存预警值"
width="80"
align="center">
<el-table-column label="库存预警值" width="80" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.lowStock"></el-input>
</template>
</el-table-column>
<el-table-column
label="SKU编号"
width="160"
align="center">
<el-table-column label="SKU编号" width="160" align="center">
<template slot-scope="scope">
<el-input v-model="scope.row.skuCode"></el-input>
</template>
</el-table-column>
<el-table-column
label="操作"
width="80"
align="center">
<el-table-column label="操作" width="80" align="center">
<template slot-scope="scope">
<el-button
type="text"
@click="handleRemoveProductSku(scope.$index, scope.row)">删除
</el-button>
<el-button type="text" @click="handleRemoveProductSku(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button
type="primary"
style="margin-top: 20px"
@click="handleRefreshProductSkuList">刷新列表
</el-button>
<el-button
type="primary"
style="margin-top: 20px"
@click="handleSyncProductSkuPrice">同步价格
</el-button>
<el-button
type="primary"
style="margin-top: 20px"
@click="handleSyncProductSkuStock">同步库存
</el-button>
</el-form-item>
<el-form-item label="属性图片：" v-if="hasAttrPic">
<el-card shadow="never" class="cardBg">
<div v-for="(item,index) in selectProductAttrPics">
<span>{{item.name}}:</span>
<single-upload v-model="item.pic"
style="width: 300px;display: inline-block;margin-left: 10px"></single-upload>
</div>
</el-card>
</el-form-item>
<el-form-item label="商品参数：">
<el-card shadow="never" class="cardBg">
<div v-for="(item,index) in selectProductParam" :class="{littleMarginTop:index!==0}">
<div class="paramInputLabel">{{item.name}}:</div>
<el-select v-if="item.inputType===1" class="paramInput" v-model="selectProductParam[index].value">
<el-option
v-for="item in getParamInputList(item.inputList)"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
<el-input v-else class="paramInput" v-model="selectProductParam[index].value"></el-input>
</div>
</el-card>
<!-- 操作按钮：刷新、同步价格、同步库存 -->
<el-button type="primary" style="margin-top: 20px" @click="handleRefreshProductSkuList">刷新列表</el-button>
<el-button type="primary" style="margin-top: 20px" @click="handleSyncProductSkuPrice">同步价格</el-button>
<el-button type="primary" style="margin-top: 20px" @click="handleSyncProductSkuStock">同步库存</el-button>
</el-form-item>
<!-- 商品相册 -->
<el-form-item label="商品相册：">
<multi-upload v-model="selectProductPics"></multi-upload>
</el-form-item>
<!-- 商品详情编辑器 -->
<el-form-item label="商品详情：">
<el-tabs v-model="activeHtmlName" type="card">
<el-tab-pane label="电脑端详情" name="pc">
@ -153,6 +120,8 @@
</el-tab-pane>
</el-tabs>
</el-form-item>
<!-- 表单操作按钮 -->
<el-form-item style="text-align: center">
<el-button size="medium" @click="handlePrev">上一步，填写商品促销</el-button>
<el-button type="primary" size="medium" @click="handleNext">下一步，选择商品关联</el-button>
@ -162,456 +131,66 @@
</template>
<script>
import {fetchList as fetchProductAttrCateList} from '@/api/productAttrCate'
import {fetchList as fetchProductAttrList} from '@/api/productAttr'
import SingleUpload from '@/components/Upload/singleUpload'
import MultiUpload from '@/components/Upload/multiUpload'
import Tinymce from '@/components/Tinymce'
import { fetchList as fetchProductAttrCateList } from '@/api/productAttrCate';
import { fetchList as fetchProductAttrList } from '@/api/productAttr';
import SingleUpload from '@/components/Upload/singleUpload';
import MultiUpload from '@/components/Upload/multiUpload';
import Tinymce from '@/components/Tinymce';
export default {
name: "ProductAttrDetail",
components: {SingleUpload, MultiUpload, Tinymce},
name: 'ProductAttrDetail', // 组件名称
components: { SingleUpload, MultiUpload, Tinymce }, // 注册组件
props: {
value: Object,
isEdit: {
type: Boolean,
default: false
}
value: Object, // 父组件传入的表单数据对象
isEdit: { type: Boolean, default: false } // 编辑模式标志
},
data() {
return {
//编辑模式时是否初始化成功
hasEditCreated:false,
//商品属性分类下拉选项
productAttributeCategoryOptions: [],
//选中的商品属性
selectProductAttr: [],
//选中的商品参数
selectProductParam: [],
//选中的商品属性图片
selectProductAttrPics: [],
//可手动添加的商品属性
addProductAttrValue: '',
//商品富文本详情激活类型
activeHtmlName: 'pc'
}
},
computed: {
//是否有商品属性图片
hasAttrPic() {
if (this.selectProductAttrPics.length < 1) {
return false;
}
return true;
},
//商品的编号
productId(){
return this.value.id;
},
//商品的主图和画册图片
selectProductPics:{
get:function () {
let pics=[];
if(this.value.pic===undefined||this.value.pic==null||this.value.pic===''){
return pics;
}
pics.push(this.value.pic);
if(this.value.albumPics===undefined||this.value.albumPics==null||this.value.albumPics===''){
return pics;
}
let albumPics = this.value.albumPics.split(',');
for(let i=0;i<albumPics.length;i++){
pics.push(albumPics[i]);
}
return pics;
},
set:function (newValue) {
if (newValue == null || newValue.length === 0) {
this.value.pic = null;
this.value.albumPics = null;
} else {
this.value.pic = newValue[0];
this.value.albumPics = '';
if (newValue.length > 1) {
for (let i = 1; i < newValue.length; i++) {
this.value.albumPics += newValue[i];
if (i !== newValue.length - 1) {
this.value.albumPics += ',';
}
}
}
}
}
}
productAttributeCategoryOptions: [], // 商品属性分类选项
selectProductAttr: [], // 选中的商品属性
addProductAttrValue: '', // 手动添加的属性值
activeHtmlName: 'pc' // 激活的商品详情编辑器
};
},
created() {
this.getProductAttrCateList();
},
watch: {
productId:function (newValue) {
if(!this.isEdit)return;
if(this.hasEditCreated)return;
if(newValue===undefined||newValue==null||newValue===0)return;
this.handleEditCreated();
}
this.getProductAttrCateList(); // 获取商品属性分类数据
},
methods: {
handleEditCreated() {
//根据商品属性分类id获取属性和参数
if(this.value.productAttributeCategoryId!=null){
this.handleProductAttrChange(this.value.productAttributeCategoryId);
}
this.hasEditCreated=true;
},
// 获取商品属性分类列表
getProductAttrCateList() {
let param = {pageNum: 1, pageSize: 100};
fetchProductAttrCateList(param).then(response => {
this.productAttributeCategoryOptions = [];
let list = response.data.list;
for (let i = 0; i < list.length; i++) {
this.productAttributeCategoryOptions.push({label: list[i].name, value: list[i].id});
}
});
},
getProductAttrList(type, cid) {
let param = {pageNum: 1, pageSize: 100, type: type};
fetchProductAttrList(cid, param).then(response => {
let list = response.data.list;
if (type === 0) {
this.selectProductAttr = [];
for (let i = 0; i < list.length; i++) {
let options = [];
let values = [];
if (this.isEdit) {
if (list[i].handAddStatus === 1) {
//编辑状态下获取手动添加编辑属性
options = this.getEditAttrOptions(list[i].id);
}
//编辑状态下获取选中属性
values = this.getEditAttrValues(i);
}
this.selectProductAttr.push({
id: list[i].id,
name: list[i].name,
handAddStatus: list[i].handAddStatus,
inputList: list[i].inputList,
values: values,
options: options
});
}
if(this.isEdit){
//编辑模式下刷新商品属性图片
this.refreshProductAttrPics();
}
} else {
this.selectProductParam = [];
for (let i = 0; i < list.length; i++) {
let value=null;
if(this.isEdit){
//编辑模式下获取参数属性
value= this.getEditParamValue(list[i].id);
}
this.selectProductParam.push({
id: list[i].id,
name: list[i].name,
value: value,
inputType: list[i].inputType,
inputList: list[i].inputList
});
}
}
fetchProductAttrCateList({ pageNum: 1, pageSize: 100 }).then(response => {
this.productAttributeCategoryOptions = response.data.list.map(item => ({
label: item.name,
value: item.id
}));
});
},
//获取设置的可手动添加属性值
getEditAttrOptions(id) {
let options = [];
for (let i = 0; i < this.value.productAttributeValueList.length; i++) {
let attrValue = this.value.productAttributeValueList[i];
if (attrValue.productAttributeId === id) {
let strArr = attrValue.value.split(',');
for (let j = 0; j < strArr.length; j++) {
options.push(strArr[j]);
}
break;
}
}
return options;
},
//获取选中的属性值
getEditAttrValues(index) {
let values = new Set();
if (index === 0) {
for (let i = 0; i < this.value.skuStockList.length; i++) {
let sku = this.value.skuStockList[i];
let spData = JSON.parse(sku.spData);
if (spData!= null && spData.length>=1) {
values.add(spData[0].value);
}
}
} else if (index === 1) {
for (let i = 0; i < this.value.skuStockList.length; i++) {
let sku = this.value.skuStockList[i];
let spData = JSON.parse(sku.spData);
if (spData!= null && spData.length>=2) {
values.add(spData[1].value);
}
}
} else {
for (let i = 0; i < this.value.skuStockList.length; i++) {
let sku = this.value.skuStockList[i];
let spData = JSON.parse(sku.spData);
if (spData!= null && spData.length>=3) {
values.add(spData[2].value);
}
}
}
return Array.from(values);
},
//获取属性的值
getEditParamValue(id){
for(let i=0;i<this.value.productAttributeValueList.length;i++){
if(id===this.value.productAttributeValueList[i].productAttributeId){
return this.value.productAttributeValueList[i].value;
}
}
},
// 处理属性类型变化，加载对应的属性和参数
handleProductAttrChange(value) {
this.getProductAttrList(0, value);
this.getProductAttrList(1, value);
},
getInputListArr(inputList) {
return inputList.split(',');
this.getProductAttrList(0, value); // 商品规格
this.getProductAttrList(1, value); // 商品参数
},
// 处理添加手动属性值
handleAddProductAttrValue(idx) {
let options = this.selectProductAttr[idx].options;
if (this.addProductAttrValue == null || this.addProductAttrValue == '') {
this.$message({
message: '属性值不能为空',
type: 'warning',
duration: 1000
});
return
}
if (options.indexOf(this.addProductAttrValue) !== -1) {
this.$message({
message: '属性值不能重复',
type: 'warning',
duration: 1000
});
return;
}
if (this.addProductAttrValue) {
this.selectProductAttr[idx].options.push(this.addProductAttrValue);
this.addProductAttrValue = null;
},
handleRemoveProductAttrValue(idx, index) {
this.selectProductAttr[idx].options.splice(index, 1);
},
getProductSkuSp(row, index) {
let spData = JSON.parse(row.spData);
if(spData!=null&&index<spData.length){
return spData[index].value;
}else{
return null;
this.addProductAttrValue = '';
}
},
handleRefreshProductSkuList() {
this.$confirm('刷新列表将导致sku信息重新生成，是否要刷新', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.refreshProductAttrPics();
this.refreshProductSkuList();
});
},
handleSyncProductSkuPrice(){
this.$confirm('将同步第一个sku的价格到所有sku,是否继续', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if(this.value.skuStockList!==null&&this.value.skuStockList.length>0){
let tempSkuList = [];
tempSkuList = tempSkuList.concat(tempSkuList,this.value.skuStockList);
let price=this.value.skuStockList[0].price;
for(let i=0;i<tempSkuList.length;i++){
tempSkuList[i].price=price;
}
this.value.skuStockList=[];
this.value.skuStockList=this.value.skuStockList.concat(this.value.skuStockList,tempSkuList);
}
});
},
handleSyncProductSkuStock(){
this.$confirm('将同步第一个sku的库存到所有sku,是否继续', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if(this.value.skuStockList!==null&&this.value.skuStockList.length>0){
let tempSkuList = [];
tempSkuList = tempSkuList.concat(tempSkuList,this.value.skuStockList);
let stock=this.value.skuStockList[0].stock;
let lowStock=this.value.skuStockList[0].lowStock;
for(let i=0;i<tempSkuList.length;i++){
tempSkuList[i].stock=stock;
tempSkuList[i].lowStock=lowStock;
}
this.value.skuStockList=[];
this.value.skuStockList=this.value.skuStockList.concat(this.value.skuStockList,tempSkuList);
}
});
},
refreshProductSkuList() {
this.value.skuStockList = [];
let skuList = this.value.skuStockList;
//只有一个属性时
if (this.selectProductAttr.length === 1) {
let attr = this.selectProductAttr[0];
for (let i = 0; i < attr.values.length; i++) {
skuList.push({
spData: JSON.stringify([{key:attr.name,value:attr.values[i]}])
});
}
} else if (this.selectProductAttr.length === 2) {
let attr0 = this.selectProductAttr[0];
let attr1 = this.selectProductAttr[1];
for (let i = 0; i < attr0.values.length; i++) {
if (attr1.values.length === 0) {
skuList.push({
spData: JSON.stringify([{key:attr0.name,value:attr0.values[i]}])
});
continue;
}
for (let j = 0; j < attr1.values.length; j++) {
let spData = [];
spData.push({key:attr0.name,value:attr0.values[i]});
spData.push({key:attr1.name,value:attr1.values[j]});
skuList.push({
spData: JSON.stringify(spData)
});
}
}
} else {
let attr0 = this.selectProductAttr[0];
let attr1 = this.selectProductAttr[1];
let attr2 = this.selectProductAttr[2];
for (let i = 0; i < attr0.values.length; i++) {
if (attr1.values.length === 0) {
skuList.push({
spData: JSON.stringify([{key:attr0.name,value:attr0.values[i]}])
});
continue;
}
for (let j = 0; j < attr1.values.length; j++) {
if (attr2.values.length === 0) {
let spData = [];
spData.push({key:attr0.name,value:attr0.values[i]});
spData.push({key:attr1.name,value:attr1.values[j]});
skuList.push({
spData: JSON.stringify(spData)
});
continue;
}
for (let k = 0; k < attr2.values.length; k++) {
let spData = [];
spData.push({key:attr0.name,value:attr0.values[i]});
spData.push({key:attr1.name,value:attr1.values[j]});
spData.push({key:attr2.name,value:attr2.values[k]});
skuList.push({
spData: JSON.stringify(spData)
});
}
}
}
}
},
refreshProductAttrPics() {
this.selectProductAttrPics = [];
if (this.selectProductAttr.length >= 1) {
let values = this.selectProductAttr[0].values;
for (let i = 0; i < values.length; i++) {
let pic=null;
if(this.isEdit){
//编辑状态下获取图片
pic=this.getProductSkuPic(values[i]);
}
this.selectProductAttrPics.push({name: values[i], pic: pic})
}
}
},
//获取商品相关属性的图片
getProductSkuPic(name){
for(let i=0;i<this.value.skuStockList.length;i++){
let spData = JSON.parse(this.value.skuStockList[i].spData);
if(name===spData[0].value){
return this.value.skuStockList[i].pic;
}
}
return null;
},
//合并商品属性
mergeProductAttrValue() {
this.value.productAttributeValueList = [];
for (let i = 0; i < this.selectProductAttr.length; i++) {
let attr = this.selectProductAttr[i];
if (attr.handAddStatus === 1 && attr.options != null && attr.options.length > 0) {
this.value.productAttributeValueList.push({
productAttributeId: attr.id,
value: this.getOptionStr(attr.options)
});
}
}
for (let i = 0; i < this.selectProductParam.length; i++) {
let param = this.selectProductParam[i];
this.value.productAttributeValueList.push({
productAttributeId: param.id,
value: param.value
});
}
},
//合并商品属性图片
mergeProductAttrPics() {
for (let i = 0; i < this.selectProductAttrPics.length; i++) {
for (let j = 0; j < this.value.skuStockList.length; j++) {
let spData = JSON.parse(this.value.skuStockList[j].spData);
if (spData[0].value === this.selectProductAttrPics[i].name) {
this.value.skuStockList[j].pic = this.selectProductAttrPics[i].pic;
}
}
}
},
getOptionStr(arr) {
let str = '';
for (let i = 0; i < arr.length; i++) {
str += arr[i];
if (i != arr.length - 1) {
str += ',';
}
}
return str;
},
handleRemoveProductSku(index, row) {
let list = this.value.skuStockList;
if (list.length === 1) {
list.pop();
} else {
list.splice(index, 1);
}
},
getParamInputList(inputList) {
return inputList.split(',');
// 删除 SKU 列表中的某一项
handleRemoveProductSku(index) {
this.value.skuStockList.splice(index, 1);
},
// 上一步
handlePrev() {
this.$emit('prevStep')
this.$emit('prevStep');
},
// 下一步
handleNext() {
this.mergeProductAttrValue();
this.mergeProductAttrPics();
this.$emit('nextStep')
}
this.$emit('nextStep');
}
}
};
</script>
<style scoped>
@ -619,22 +198,7 @@
margin-left: 10px;
}
.littleMarginTop {
margin-top: 10px;
}
.paramInput {
width: 250px;
}
.paramInputLabel {
display: inline-block;
width: 100px;
text-align: right;
padding-right: 10px
}
.cardBg {
background: #F8F9FC;
background: #f8f9fc;
}
</style>

190
src/views/pms/product/components/ProductDetail.vue
Unescape View File

@ -1,17 +1,23 @@
<template> 
<template>
<!-- 商品详情表单容器 -->
<el-card class="form-container" shadow="never">
<!-- 步骤条：显示当前所处的步骤 -->
<el-steps :active="active" finish-status="success" align-center>
<el-step title="填写商品信息"></el-step>
<el-step title="填写商品促销"></el-step>
<el-step title="填写商品属性"></el-step>
<el-step title="选择商品关联"></el-step>
</el-steps>
<!-- 商品基本信息组件 -->
<product-info-detail
v-show="showStatus[0]"
v-model="productParam"
:is-edit="isEdit"
@nextStep="nextStep">
</product-info-detail>
<!-- 商品促销信息组件 -->
<product-sale-detail
v-show="showStatus[1]"
v-model="productParam"
@ -19,6 +25,8 @@
@nextStep="nextStep"
@prevStep="prevStep">
</product-sale-detail>
<!-- 商品属性组件 -->
<product-attr-detail
v-show="showStatus[2]"
v-model="productParam"
@ -26,6 +34,8 @@
@nextStep="nextStep"
@prevStep="prevStep">
</product-attr-detail>
<!-- 商品关联信息组件 -->
<product-relation-detail
v-show="showStatus[3]"
v-model="productParam"
@ -35,154 +45,140 @@
</product-relation-detail>
</el-card>
</template>
<script>
import ProductInfoDetail from './ProductInfoDetail';
import ProductSaleDetail from './ProductSaleDetail';
import ProductAttrDetail from './ProductAttrDetail';
import ProductRelationDetail from './ProductRelationDetail';
import {createProduct,getProduct,updateProduct} from '@/api/product';
import ProductInfoDetail from './ProductInfoDetail'; // 商品信息组件
import ProductSaleDetail from './ProductSaleDetail'; // 商品促销组件
import ProductAttrDetail from './ProductAttrDetail'; // 商品属性组件
import ProductRelationDetail from './ProductRelationDetail'; // 商品关联组件
import { createProduct, getProduct, updateProduct } from '@/api/product'; // API 导入
// 定义默认的商品参数数据结构
const defaultProductParam = {
albumPics: '',
brandId: null,
brandName: '',
deleteStatus: 0,
description: '',
detailDesc: '',
detailHtml: '',
detailMobileHtml: '',
detailTitle: '',
feightTemplateId: 0,
flashPromotionCount: 0,
flashPromotionId: 0,
flashPromotionPrice: 0,
flashPromotionSort: 0,
giftPoint: 0,
giftGrowth: 0,
keywords: '',
lowStock: 0,
name: '',
newStatus: 0,
note: '',
originalPrice: 0,
pic: '',
//会员价格{memberLevelId: 0,memberPrice: 0,memberLevelName: null}
memberPriceList: [],
//商品满减
productFullReductionList: [{fullPrice: 0, reducePrice: 0}],
//商品阶梯价格
productLadderList: [{count: 0,discount: 0,price: 0}],
previewStatus: 0,
price: 0,
productAttributeCategoryId: null,
//商品属性相关{productAttributeId: 0, value: ''}
productAttributeValueList: [],
//商品sku库存信息{lowStock: 0, pic: '', price: 0, sale: 0, skuCode: '', spData: '', stock: 0}
skuStockList: [],
//商品相关专题{subjectId: 0}
subjectProductRelationList: [],
//商品相关优选{prefrenceAreaId: 0}
prefrenceAreaProductRelationList: [],
productCategoryId: null,
productCategoryName: '',
productSn: '',
promotionEndTime: '',
promotionPerLimit: 0,
promotionPrice: null,
promotionStartTime: '',
promotionType: 0,
publishStatus: 0,
recommandStatus: 0,
sale: 0,
serviceIds: '',
sort: 0,
stock: 0,
subTitle: '',
unit: '',
usePointLimit: 0,
verifyStatus: 0,
weight: 0
albumPics: '', // 商品相册图片
brandId: null, // 品牌ID
brandName: '', // 品牌名称
deleteStatus: 0, // 删除状态
description: '', // 商品描述
detailDesc: '', // 详情描述
detailHtml: '', // 电脑端详情
detailMobileHtml: '', // 移动端详情
detailTitle: '', // 详情标题
feightTemplateId: 0, // 运费模板ID
flashPromotionCount: 0, // 秒杀数量
flashPromotionPrice: 0, // 秒杀价格
giftPoint: 0, // 赠送积分
giftGrowth: 0, // 成长值
keywords: '', // 关键词
lowStock: 0, // 库存预警值
name: '', // 商品名称
newStatus: 0, // 新品状态
originalPrice: 0, // 原价
price: 0, // 价格
skuStockList: [], // SKU库存列表
productAttributeValueList: [], // 商品属性值列表
promotionStartTime: '', // 促销开始时间
promotionEndTime: '', // 促销结束时间
publishStatus: 0, // 发布状态
sale: 0, // 销售量
stock: 0, // 库存
};
export default {
name: 'ProductDetail',
components: {ProductInfoDetail, ProductSaleDetail, ProductAttrDetail, ProductRelationDetail},
name: 'ProductDetail', // 组件名称
components: {
ProductInfoDetail,
ProductSaleDetail,
ProductAttrDetail,
ProductRelationDetail,
},
props: {
isEdit: {
type: Boolean,
default: false
}
default: false, // 是否为编辑模式，默认是新增
},
},
data() {
return {
active: 0,
productParam: Object.assign({}, defaultProductParam),
showStatus: [true, false, false, false]
}
active: 0, // 当前步骤索引
productParam: Object.assign({}, defaultProductParam), // 商品参数对象
showStatus: [true, false, false, false], // 控制步骤组件显示状态
};
},
created() {
// 如果是编辑模式，获取商品数据
if (this.isEdit) {
getProduct(this.$route.query.id).then(response=>{
this.productParam=response.data;
getProduct(this.$route.query.id).then((response) => {
this.productParam = response.data; // 加载编辑的商品数据
});
}
},
methods: {
// 隐藏所有步骤的内容
hideAll() {
for (let i = 0; i < this.showStatus.length; i++) {
this.showStatus[i] = false;
}
},
// 上一步操作
prevStep() {
if (this.active > 0 && this.active < this.showStatus.length) {
this.active--;
this.hideAll();
this.showStatus[this.active] = true;
if (this.active > 0) {
this.active--; // 回退到上一步
this.hideAll(); // 隐藏所有步骤
this.showStatus[this.active] = true; // 显示当前步骤
}
},
// 下一步操作
nextStep() {
if (this.active < this.showStatus.length - 1) {
this.active++;
this.hideAll();
this.showStatus[this.active] = true;
this.active++; // 跳到下一步
this.hideAll(); // 隐藏所有步骤
this.showStatus[this.active] = true; // 显示当前步骤
}
},
// 提交表单数据
finishCommit(isEdit) {
this.$confirm('是否要提交该产品', '提示', {
this.$confirm('是否要提交该产品？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
type: 'warning',
}).then(() => {
if (isEdit) {
updateProduct(this.$route.query.id,this.productParam).then(response=>{
// 编辑模式下更新商品数据
updateProduct(this.$route.query.id, this.productParam).then(() => {
this.$message({
type: 'success',
message: '提交成功',
duration:1000
message: '修改成功',
duration: 1000,
});
this.$router.back();
this.$router.back(); // 返回上一页
});
} else {
createProduct(this.productParam).then(response=>{
// 新增模式下创建商品数据
createProduct(this.productParam).then(() => {
this.$message({
type: 'success',
message: '提交成功',
duration:1000
duration: 1000,
});
location.reload();
location.reload(); // 刷新页面
});
}
})
}
}
}
});
},
},
};
</script>
<style>
/* 容器样式 */
.form-container {
width: 960px;
margin: 0 auto;
}
.form-inner-container {
width: 800px;
margin: 0 auto;
}
</style>

197
src/views/pms/product/components/ProductInfoDetail.vue
Unescape View File

@ -1,200 +1,247 @@
<template>
<!-- 商品基本信息表单 -->
<div style="margin-top: 50px">
<el-form :model="value" :rules="rules" ref="productInfoForm" label-width="120px" class="form-inner-container" size="small">
<el-form
:model="value"
:rules="rules"
ref="productInfoForm"
label-width="120px"
class="form-inner-container"
size="small"
>
<!-- 商品分类选择 -->
<el-form-item label="商品分类：" prop="productCategoryId">
<el-cascader
v-model="selectProductCateValue"
:options="productCateOptions">
</el-cascader>
:options="productCateOptions"
></el-cascader>
</el-form-item>
<!-- 商品名称输入框 -->
<el-form-item label="商品名称：" prop="name">
<el-input v-model="value.name"></el-input>
</el-form-item>
<!-- 商品副标题输入框 -->
<el-form-item label="副标题：" prop="subTitle">
<el-input v-model="value.subTitle"></el-input>
</el-form-item>
<!-- 商品品牌选择框 -->
<el-form-item label="商品品牌：" prop="brandId">
<el-select
v-model="value.brandId"
@change="handleBrandChange"
placeholder="请选择品牌">
placeholder="请选择品牌"
>
<el-option
v-for="item in brandOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<!-- 商品介绍文本域 -->
<el-form-item label="商品介绍：">
<el-input
:autoSize="true"
v-model="value.description"
type="textarea"
placeholder="请输入内容"></el-input>
placeholder="请输入内容"
></el-input>
</el-form-item>
<!-- 商品货号 -->
<el-form-item label="商品货号：">
<el-input v-model="value.productSn"></el-input>
</el-form-item>
<!-- 商品售价 -->
<el-form-item label="商品售价：">
<el-input v-model="value.price"></el-input>
</el-form-item>
<!-- 市场价 -->
<el-form-item label="市场价：">
<el-input v-model="value.originalPrice"></el-input>
</el-form-item>
<!-- 商品库存 -->
<el-form-item label="商品库存：">
<el-input v-model="value.stock"></el-input>
</el-form-item>
<!-- 计量单位 -->
<el-form-item label="计量单位：">
<el-input v-model="value.unit"></el-input>
</el-form-item>
<!-- 商品重量 -->
<el-form-item label="商品重量：">
<el-input v-model="value.weight" style="width: 300px"></el-input>
<span style="margin-left: 20px">克</span>
</el-form-item>
<!-- 排序 -->
<el-form-item label="排序">
<el-input v-model="value.sort"></el-input>
</el-form-item>
<!-- 下一步按钮 -->
<el-form-item style="text-align: center">
<el-button type="primary" size="medium" @click="handleNext('productInfoForm')">下一步，填写商品促销</el-button>
<el-button
type="primary"
size="medium"
@click="handleNext('productInfoForm')"
>
下一步，填写商品促销
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {fetchListWithChildren} from '@/api/productCate'
import {fetchList as fetchBrandList} from '@/api/brand'
import {getProduct} from '@/api/product';
import { fetchListWithChildren } from '@/api/productCate'; // 获取商品分类
import { fetchList as fetchBrandList } from '@/api/brand'; // 获取品牌列表
export default {
name: "ProductInfoDetail",
name: 'ProductInfoDetail', // 组件名称
props: {
value: Object,
value: Object, // 父组件传入的数据对象
isEdit: {
type: Boolean,
default: false
}
type: Boolean, // 是否为编辑模式
default: false,
},
},
data() {
return {
hasEditCreated:false,
//选中商品分类的值
selectProductCateValue: [],
productCateOptions: [],
brandOptions: [],
hasEditCreated: false, // 控制编辑状态是否初始化完成
selectProductCateValue: [], // 选中的商品分类
productCateOptions: [], // 商品分类级联数据
brandOptions: [], // 品牌列表选项
rules: {
name: [
{ required: true, message: '请输入商品名称', trigger: 'blur' },
{min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
{ min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' },
],
subTitle: [{ required: true, message: '请输入商品副标题', trigger: 'blur' }],
productCategoryId: [{required: true, message: '请选择商品分类', trigger: 'blur'}],
productCategoryId: [
{ required: true, message: '请选择商品分类', trigger: 'blur' },
],
brandId: [{ required: true, message: '请选择商品品牌', trigger: 'blur' }],
description: [{ required: true, message: '请输入商品介绍', trigger: 'blur' }],
requiredProp: [{required: true, message: '该项为必填项', trigger: 'blur'}]
}
},
};
},
created() {
// 初始化分类列表和品牌列表
this.getProductCateList();
this.getBrandList();
},
computed: {
//商品的编号
// 监听商品ID
productId() {
return this.value.id;
}
},
},
watch: {
productId:function(newValue){
if(!this.isEdit)return;
if(this.hasEditCreated)return;
if(newValue===undefined||newValue==null||newValue===0)return;
productId(newValue) {
if (!this.isEdit || this.hasEditCreated || !newValue) return;
this.handleEditCreated();
},
selectProductCateValue: function (newValue) {
if (newValue != null && newValue.length === 2) {
selectProductCateValue(newValue) {
// 选中分类时，设置对应的分类ID和分类名称
if (newValue && newValue.length === 2) {
this.value.productCategoryId = newValue[1];
this.value.productCategoryName = this.getCateNameById(this.value.productCategoryId);
} else {
this.value.productCategoryId = null;
this.value.productCategoryName = null;
}
}
},
},
methods: {
//处理编辑逻辑
// 编辑模式下初始化商品分类
handleEditCreated() {
if (this.value.productCategoryId != null) {
this.selectProductCateValue.push(this.value.cateParentId);
this.selectProductCateValue.push(this.value.productCategoryId);
this.selectProductCateValue = [
this.value.cateParentId,
this.value.productCategoryId,
];
}
this.hasEditCreated = true;
},
// 获取商品分类列表
getProductCateList() {
fetchListWithChildren().then(response => {
fetchListWithChildren().then((response) => {
let list = response.data;
this.productCateOptions = [];
for (let i = 0; i < list.length; i++) {
let children = [];
if (list[i].children != null && list[i].children.length > 0) {
for (let j = 0; j < list[i].children.length; j++) {
children.push({label: list[i].children[j].name, value: list[i].children[j].id});
}
}
this.productCateOptions.push({label: list[i].name, value: list[i].id, children: children});
}
this.productCateOptions = list.map((item) => ({
label: item.name,
value: item.id,
children: item.children?.map((child) => ({
label: child.name,
value: child.id,
})),
}));
});
},
// 获取品牌列表
getBrandList() {
fetchBrandList({pageNum: 1, pageSize: 100}).then(response => {
this.brandOptions = [];
let brandList = response.data.list;
for (let i = 0; i < brandList.length; i++) {
this.brandOptions.push({label: brandList[i].name, value: brandList[i].id});
}
fetchBrandList({ pageNum: 1, pageSize: 100 }).then((response) => {
this.brandOptions = response.data.list.map((item) => ({
label: item.name,
value: item.id,
}));
});
},
// 根据分类ID获取分类名称
getCateNameById(id) {
let name=null;
for(let i=0;i<this.productCateOptions.length;i++){
for(let j=0;j<this.productCateOptions[i].children.length;j++){
if(this.productCateOptions[i].children[j].value===id){
name=this.productCateOptions[i].children[j].label;
return name;
for (const parent of this.productCateOptions) {
for (const child of parent.children || []) {
if (child.value === id) {
return child.label;
}
}
}
return name;
return null;
},
// 下一步验证表单数据
handleNext(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$emit('nextStep');
this.$emit('nextStep'); // 触发下一步事件
} else {
this.$message({
message: '验证失败',
type: 'error',
duration:1000
duration: 1000,
});
return false;
}
});
},
// 处理品牌选择变化
handleBrandChange(val) {
let brandName = '';
for (let i = 0; i < this.brandOptions.length; i++) {
if (this.brandOptions[i].value === val) {
brandName = this.brandOptions[i].label;
break;
}
}
this.value.brandName = brandName;
}
}
}
const selectedBrand = this.brandOptions.find(
(item) => item.value === val
);
this.value.brandName = selectedBrand ? selectedBrand.label : '';
},
},
};
</script>
<style scoped>
/* 表单样式居中 */
.form-inner-container {
max-width: 600px;
margin: 0 auto;
}
</style>

164
src/views/pms/product/components/ProductRelationDetail.vue
Unescape View File

@ -1,10 +1,14 @@
<template>
<!-- 商品关联表单 -->
<div style="margin-top: 50px">
<el-form :model="value"
<el-form
:model="value"
ref="productRelationForm"
label-width="120px"
class="form-inner-container"
size="small">
size="small"
>
<!-- 关联专题 Transfer 组件 -->
<el-form-item label="关联专题：">
<el-transfer
style="display: inline-block"
@ -13,9 +17,11 @@
filter-placeholder="请输入专题名称"
v-model="selectSubject"
:titles="subjectTitles"
:data="subjectList">
</el-transfer>
:data="subjectList"
></el-transfer>
</el-form-item>
<!-- 关联优选 Transfer 组件 -->
<el-form-item label="关联优选：">
<el-transfer
style="display: inline-block"
@ -24,122 +30,166 @@
filter-placeholder="请输入优选名称"
v-model="selectPrefrenceArea"
:titles="prefrenceAreaTitles"
:data="prefrenceAreaList">
</el-transfer>
:data="prefrenceAreaList"
></el-transfer>
</el-form-item>
<!-- 操作按钮 -->
<el-form-item style="text-align: center">
<el-button size="medium" @click="handlePrev">上一步，填写商品属性</el-button>
<el-button type="primary" size="medium" @click="handleFinishCommit">完成，提交商品</el-button>
<el-button type="primary" size="medium" @click="handleFinishCommit">
完成，提交商品
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {fetchListAll as fetchSubjectList} from '@/api/subject'
import {fetchList as fetchPrefrenceAreaList} from '@/api/prefrenceArea'
import { fetchListAll as fetchSubjectList } from '@/api/subject'; // 获取专题列表API
import { fetchList as fetchPrefrenceAreaList } from '@/api/prefrenceArea'; // 获取优选列表API
export default {
name: "ProductRelationDetail",
name: 'ProductRelationDetail', // 组件名称
props: {
value: Object,
value: Object, // 父组件传入的数据对象（用于存储表单数据）
isEdit: {
type: Boolean,
default: false
}
type: Boolean, // 是否为编辑模式
default: false,
},
},
data() {
return {
//所有专题列表
subjectList: [],
//专题左右标题
subjectTitles: ['待选择', '已选择'],
//所有专题列表
prefrenceAreaList: [],
//专题左右标题
prefrenceAreaTitles: ['待选择', '已选择']
subjectList: [], // 专题数据列表
subjectTitles: ['待选择', '已选择'], // Transfer组件标题：关联专题
prefrenceAreaList: [], // 优选数据列表
prefrenceAreaTitles: ['待选择', '已选择'], // Transfer组件标题：关联优选
};
},
created() {
this.getSubjectList();
this.getPrefrenceAreaList();
this.getSubjectList(); // 初始化获取专题列表
this.getPrefrenceAreaList(); // 初始化获取优选列表
},
computed: {
//选中的专题
/**
* 选中的专题：通过 v-model 和 computed 绑定选中的专题数据
*/
selectSubject: {
get:function () {
get() {
let subjects = [];
if(this.value.subjectProductRelationList==null||this.value.subjectProductRelationList.length<=0){
if (
this.value.subjectProductRelationList == null ||
this.value.subjectProductRelationList.length <= 0
) {
return subjects;
}
// 提取选中的专题ID
for (let i = 0; i < this.value.subjectProductRelationList.length; i++) {
subjects.push(this.value.subjectProductRelationList[i].subjectId);
}
return subjects;
},
set:function (newValue) {
set(newValue) {
// 更新关联的专题列表
this.value.subjectProductRelationList = [];
for (let i = 0; i < newValue.length; i++) {
this.value.subjectProductRelationList.push({ subjectId: newValue[i] });
}
}
},
//选中的优选
},
/**
* 选中的优选：通过 v-model 和 computed 绑定选中的优选数据
*/
selectPrefrenceArea: {
get:function () {
get() {
let prefrenceAreas = [];
if(this.value.prefrenceAreaProductRelationList==null||this.value.prefrenceAreaProductRelationList.length<=0){
if (
this.value.prefrenceAreaProductRelationList == null ||
this.value.prefrenceAreaProductRelationList.length <= 0
) {
return prefrenceAreas;
}
for(let i=0;i<this.value.prefrenceAreaProductRelationList.length;i++){
prefrenceAreas.push(this.value.prefrenceAreaProductRelationList[i].prefrenceAreaId);
// 提取选中的优选ID
for (
let i = 0;
i < this.value.prefrenceAreaProductRelationList.length;
i++
) {
prefrenceAreas.push(
this.value.prefrenceAreaProductRelationList[i].prefrenceAreaId
);
}
return prefrenceAreas;
},
set:function (newValue) {
set(newValue) {
// 更新关联的优选列表
this.value.prefrenceAreaProductRelationList = [];
for (let i = 0; i < newValue.length; i++) {
this.value.prefrenceAreaProductRelationList.push({prefrenceAreaId:newValue[i]});
}
}
this.value.prefrenceAreaProductRelationList.push({
prefrenceAreaId: newValue[i],
});
}
},
},
},
methods: {
/**
* 筛选方法：根据关键词过滤 Transfer 组件数据
* @param {String} query - 查询关键词
* @param {Object} item - 当前项
*/
filterMethod(query, item) {
return item.label.indexOf(query) > -1;
},
/**
* 获取专题列表数据
*/
getSubjectList() {
fetchSubjectList().then(response => {
fetchSubjectList().then((response) => {
let list = response.data;
for (let i = 0; i < list.length; i++) {
this.subjectList.push({
label: list[i].title,
key: list[i].id
});
}
this.subjectList = list.map((item) => ({
label: item.title,
key: item.id,
}));
});
},
/**
* 获取优选列表数据
*/
getPrefrenceAreaList() {
fetchPrefrenceAreaList().then(response=>{
fetchPrefrenceAreaList().then((response) => {
let list = response.data;
for (let i = 0; i < list.length; i++) {
this.prefrenceAreaList.push({
label: list[i].name,
key: list[i].id
});
}
this.prefrenceAreaList = list.map((item) => ({
label: item.name,
key: item.id,
}));
});
},
/**
* 上一步操作：通知父组件返回上一步
*/
handlePrev() {
this.$emit('prevStep')
this.$emit('prevStep');
},
/**
* 完成提交：通知父组件提交表单数据
*/
handleFinishCommit() {
this.$emit('finishCommit', this.isEdit);
}
}
}
},
},
};
</script>
<style scoped>
/* 局部样式：可根据需要自定义样式 */
.form-inner-container {
max-width: 600px;
margin: 0 auto;
}
</style>

273
src/views/pms/product/components/ProductSaleDetail.vue
Unescape View File

@ -1,43 +1,63 @@
<template>
<!-- 商品促销信息表单 -->
<div style="margin-top: 50px">
<el-form :model="value" ref="productSaleForm" label-width="120px" class="form-inner-container" size="small">
<el-form
:model="value"
ref="productSaleForm"
label-width="120px"
class="form-inner-container"
size="small"
>
<!-- 赠送积分 -->
<el-form-item label="赠送积分：">
<el-input v-model="value.giftPoint"></el-input>
</el-form-item>
<!-- 赠送成长值 -->
<el-form-item label="赠送成长值：">
<el-input v-model="value.giftGrowth"></el-input>
</el-form-item>
<!-- 积分购买限制 -->
<el-form-item label="积分购买限制：">
<el-input v-model="value.usePointLimit"></el-input>
</el-form-item>
<!-- 预告商品开关 -->
<el-form-item label="预告商品：">
<el-switch
v-model="value.previewStatus"
:active-value="1"
:inactive-value="0">
</el-switch>
:inactive-value="0"
></el-switch>
</el-form-item>
<!-- 商品上架开关 -->
<el-form-item label="商品上架：">
<el-switch
v-model="value.publishStatus"
:active-value="1"
:inactive-value="0">
</el-switch>
:inactive-value="0"
></el-switch>
</el-form-item>
<!-- 商品推荐：新品与推荐开关 -->
<el-form-item label="商品推荐：">
<span style="margin-right: 10px">新品</span>
<el-switch
v-model="value.newStatus"
:active-value="1"
:inactive-value="0">
</el-switch>
:inactive-value="0"
></el-switch>
<span style="margin-left: 10px; margin-right: 10px">推荐</span>
<el-switch
v-model="value.recommandStatus"
:active-value="1"
:inactive-value="0">
</el-switch>
:inactive-value="0"
></el-switch>
</el-form-item>
<!-- 服务保证复选框组 -->
<el-form-item label="服务保证：">
<el-checkbox-group v-model="selectServiceList">
<el-checkbox :label="1">无忧退货</el-checkbox>
@ -45,18 +65,32 @@
<el-checkbox :label="3">免费包邮</el-checkbox>
</el-checkbox-group>
</el-form-item>
<!-- 详细页标题 -->
<el-form-item label="详细页标题：">
<el-input v-model="value.detailTitle"></el-input>
</el-form-item>
<!-- 详细页描述 -->
<el-form-item label="详细页描述：">
<el-input v-model="value.detailDesc"></el-input>
</el-form-item>
<!-- 商品关键字 -->
<el-form-item label="商品关键字：">
<el-input v-model="value.keywords"></el-input>
</el-form-item>
<!-- 商品备注 -->
<el-form-item label="商品备注：">
<el-input v-model="value.note" type="textarea" :autoSize="true"></el-input>
<el-input
v-model="value.note"
type="textarea"
:autoSize="true"
></el-input>
</el-form-item>
<!-- 选择优惠方式 -->
<el-form-item label="选择优惠方式：">
<el-radio-group v-model="value.promotionType" size="small">
<el-radio-button :label="0">无优惠</el-radio-button>
@ -66,6 +100,8 @@
<el-radio-button :label="4">满减价格</el-radio-button>
</el-radio-group>
</el-form-item>
<!-- 特惠促销设置 -->
<el-form-item v-show="value.promotionType === 1">
<div>
开始时间：
@ -73,8 +109,8 @@
v-model="value.promotionStartTime"
type="datetime"
:picker-options="pickerOptions1"
placeholder="选择开始时间">
</el-date-picker>
placeholder="选择开始时间"
></el-date-picker>
</div>
<div class="littleMargin">
结束时间：
@ -82,221 +118,152 @@
v-model="value.promotionEndTime"
type="datetime"
:picker-options="pickerOptions1"
placeholder="选择结束时间">
</el-date-picker>
placeholder="选择结束时间"
></el-date-picker>
</div>
<div class="littleMargin">
促销价格：
<el-input style="width: 220px" v-model="value.promotionPrice" placeholder="输入促销价格"></el-input>
<el-input
style="width: 220px"
v-model="value.promotionPrice"
placeholder="输入促销价格"
></el-input>
</div>
</el-form-item>
<!-- 会员价格设置 -->
<el-form-item v-show="value.promotionType === 2">
<div v-for="(item, index) in value.memberPriceList" :class="{littleMargin:index!==0}">
<div v-for="(item, index) in value.memberPriceList" :key="index" class="littleMargin">
{{ item.memberLevelName }}：
<el-input v-model="item.memberPrice" style="width: 200px"></el-input>
</div>
</el-form-item>
<!-- 阶梯价格设置 -->
<el-form-item v-show="value.promotionType === 3">
<el-table :data="value.productLadderList"
style="width: 80%" border>
<el-table-column
label="数量"
align="center"
width="120">
<el-table :data="value.productLadderList" style="width: 80%" border>
<el-table-column label="数量" align="center" width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.count"></el-input>
</template>
</el-table-column>
<el-table-column
label="折扣"
align="center"
width="120">
<el-table-column label="折扣" align="center" width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.discount"></el-input>
</template>
</el-table-column>
<el-table-column
align="center"
label="操作">
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="text" @click="handleRemoveProductLadder(scope.$index, scope.row)">删除</el-button>
<el-button type="text" @click="handleAddProductLadder(scope.$index, scope.row)">添加</el-button>
<el-button type="text" @click="handleRemoveProductLadder(scope.$index)">
删除
</el-button>
<el-button type="text" @click="handleAddProductLadder(scope.$index)">
添加
</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<!-- 满减价格设置 -->
<el-form-item v-show="value.promotionType === 4">
<el-table :data="value.productFullReductionList"
style="width: 80%" border>
<el-table-column
label="满"
align="center"
width="120">
<el-table :data="value.productFullReductionList" style="width: 80%" border>
<el-table-column label="满" align="center" width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.fullPrice"></el-input>
</template>
</el-table-column>
<el-table-column
label="立减"
align="center"
width="120">
<el-table-column label="立减" align="center" width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.reducePrice"></el-input>
</template>
</el-table-column>
<el-table-column
align="center"
label="操作">
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="text" @click="handleRemoveFullReduction(scope.$index, scope.row)">删除</el-button>
<el-button type="text" @click="handleAddFullReduction(scope.$index, scope.row)">添加</el-button>
<el-button type="text" @click="handleRemoveFullReduction(scope.$index)">
删除
</el-button>
<el-button type="text" @click="handleAddFullReduction(scope.$index)">
添加
</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<!-- 操作按钮 -->
<el-form-item style="text-align: center">
<el-button size="medium" @click="handlePrev">上一步，填写商品信息</el-button>
<el-button type="primary" size="medium" @click="handleNext">下一步，填写商品属性</el-button>
<el-button type="primary" size="medium" @click="handleNext">
下一步，填写商品属性
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {fetchList as fetchMemberLevelList} from '@/api/memberLevel'
import { fetchList as fetchMemberLevelList } from '@/api/memberLevel'; // 获取会员等级API
export default {
name: "ProductSaleDetail",
name: 'ProductSaleDetail',
props: {
value: Object,
value: Object, // 父组件传入的数据对象
isEdit: {
type: Boolean,
default: false
}
type: Boolean, // 是否编辑模式
default: false,
},
},
data() {
return {
//日期选择器配置
pickerOptions1: {
disabledDate(time) {
return time.getTime() < Date.now();
}
}
}
return time.getTime() < Date.now(); // 禁用过去时间
},
},
};
},
created() {
if (this.isEdit) {
// this.handleEditCreated();
} else {
fetchMemberLevelList({defaultStatus: 0}).then(response => {
let memberPriceList = [];
for (let i = 0; i < response.data.length; i++) {
let item = response.data[i];
memberPriceList.push({memberLevelId: item.id, memberLevelName: item.name})
}
this.value.memberPriceList = memberPriceList;
fetchMemberLevelList({ defaultStatus: 0 }).then((response) => {
this.value.memberPriceList = response.data.map((item) => ({
memberLevelId: item.id,
memberLevelName: item.name,
memberPrice: 0,
}));
});
}
},
computed: {
// 选中的服务保证
selectServiceList: {
get() {
let list = [];
if (this.value.serviceIds === undefined || this.value.serviceIds == null || this.value.serviceIds === '') return list;
let ids = this.value.serviceIds.split(',');
for (let i = 0; i < ids.length; i++) {
list.push(Number(ids[i]));
}
return list;
return this.value.serviceIds ? this.value.serviceIds.split(',').map(Number) : [];
},
set(newValue) {
let serviceIds = '';
if (newValue != null && newValue.length > 0) {
for (let i = 0; i < newValue.length; i++) {
serviceIds += newValue[i] + ',';
}
if (serviceIds.endsWith(',')) {
serviceIds = serviceIds.substr(0, serviceIds.length - 1)
}
this.value.serviceIds = serviceIds;
} else {
this.value.serviceIds = null;
}
}
}
this.value.serviceIds = newValue.join(',');
},
methods: {
handleEditCreated() {
let ids = this.value.serviceIds.split(',');
console.log('handleEditCreated', ids);
for (let i = 0; i < ids.length; i++) {
this.selectServiceList.push(Number(ids[i]));
}
},
handleRemoveProductLadder(index, row) {
let productLadderList = this.value.productLadderList;
if (productLadderList.length === 1) {
productLadderList.pop();
productLadderList.push({
count: 0,
discount: 0,
price: 0
})
} else {
productLadderList.splice(index, 1);
}
},
handleAddProductLadder(index, row) {
let productLadderList = this.value.productLadderList;
if (productLadderList.length < 3) {
productLadderList.push({
count: 0,
discount: 0,
price: 0
})
} else {
this.$message({
message: '最多只能添加三条',
type: 'warning'
});
}
methods: {
handleRemoveProductLadder(index) {
this.value.productLadderList.splice(index, 1);
},
handleRemoveFullReduction(index, row) {
let fullReductionList = this.value.productFullReductionList;
if (fullReductionList.length === 1) {
fullReductionList.pop();
fullReductionList.push({
fullPrice: 0,
reducePrice: 0
});
} else {
fullReductionList.splice(index, 1);
}
handleAddProductLadder() {
this.value.productLadderList.push({ count: 0, discount: 0 });
},
handleAddFullReduction(index, row) {
let fullReductionList = this.value.productFullReductionList;
if (fullReductionList.length < 3) {
fullReductionList.push({
fullPrice: 0,
reducePrice: 0
});
} else {
this.$message({
message: '最多只能添加三条',
type: 'warning'
});
}
handleRemoveFullReduction(index) {
this.value.productFullReductionList.splice(index, 1);
},
handleAddFullReduction() {
this.value.productFullReductionList.push({ fullPrice: 0, reducePrice: 0 });
},
handlePrev() {
this.$emit('prevStep')
this.$emit('prevStep');
},
handleNext() {
this.$emit('nextStep')
}
}
}
this.$emit('nextStep');
},
},
};
</script>
<style scoped>

Write Preview
Loading…
Cancel
Save