YueCaiqi_wm/MallVue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

商品编辑功能完善

Browse Source
This commit is contained in:
zhh 2018-06-06 17:25:08 +08:00
parent 187582e2b3
commit 61cf19f1f8
5 changed files with 265 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/product.js
View File

@ -47,6 +47,14 @@ export function createProduct(data) {
}) })
} }
export function updateProduct(id,data) {
return request({
url:'/product/update/'+id,
method:'post',
data:data
})
}
export function getProduct(id) { export function getProduct(id) {
return request({ return request({
url:'/product/updateInfo/'+id, url:'/product/updateInfo/'+id,

179
src/views/pms/product/components/ProductAttrDetail.vue
View File

@ -161,6 +161,8 @@
}, },
data() { data() {
return { return {
//编辑模式时是否初始化成功
hasEditCreated:false,
//商品属性分类下拉选项 //商品属性分类下拉选项
productAttributeCategoryOptions: [], productAttributeCategoryOptions: [],
//选中的商品属性 //选中的商品属性
@ -171,51 +173,76 @@
selectProductAttrPics: [], selectProductAttrPics: [],
//可手动添加的商品属性 //可手动添加的商品属性
addProductAttrValue: '', addProductAttrValue: '',
//选中的商品图片
selectProductPics: [],
//商品富文本详情激活类型 //商品富文本详情激活类型
activeHtmlName: 'pc' activeHtmlName: 'pc'
} }
}, },
computed: { computed: {
//是否有商品属性图片
hasAttrPic() { hasAttrPic() {
if (this.selectProductAttrPics.length < 1) { if (this.selectProductAttrPics.length < 1) {
return false; return false;
} }
return true; return true;
} },
}, //商品的编号
created() { productId(){
if(this.isEdit){ return this.value.id;
this.handleEditCreated(); },
} //商品的主图和画册图片
this.getProductAttrCateList(); selectProductPics:{
if (this.value.productAttributeCategoryId != null) { get:function () {
this.handleProductAttrChange(this.value.productAttributeCategoryId); let pics=[];
} if(this.value.pic===undefined||this.value.pic==null||this.value.pic===''){
}, return pics;
watch: { }
selectProductPics: function (newValue) { pics.push(this.value.pic);
if (newValue == null || newValue.length === 0) { if(this.value.albumPics===undefined||this.value.albumPics==null||this.value.albumPics===''){
this.value.pic = null; return pics;
this.value.albumPics = null; }
} else { let albumPics = this.value.albumPics.split(',');
this.value.pic = newValue[0]; for(let i=0;i<albumPics.length;i++){
this.value.albumPics = ''; pics.push(albumPics[i]);
if (newValue.length > 1) { }
for (let i = 1; i < newValue.length; i++) { return pics;
this.value.albumPics += newValue[i]; },
if (i !== newValue.length - 1) { set:function (newValue) {
this.value.albumPics += ','; 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 += ',';
}
} }
} }
} }
} }
} }
}, },
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();
}
},
methods: { methods: {
handleEditCreated(){ handleEditCreated() {
//根据商品属性分类id获取属性和参数
if(this.value.productAttributeCategoryId!=null){
this.handleProductAttrChange(this.value.productAttributeCategoryId);
}
this.hasEditCreated=true;
}, },
getProductAttrCateList() { getProductAttrCateList() {
let param = {pageNum: 1, pageSize: 100}; let param = {pageNum: 1, pageSize: 100};
@ -235,12 +262,14 @@
this.selectProductAttr = []; this.selectProductAttr = [];
for (let i = 0; i < list.length; i++) { for (let i = 0; i < list.length; i++) {
let options = []; let options = [];
let values=[]; let values = [];
if(this.isEdit){ if (this.isEdit) {
if(list[i].handAddStatus===1){ if (list[i].handAddStatus === 1) {
//编辑状态下获取手动添加编辑属性
options = this.getEditAttrOptions(list[i].id); options = this.getEditAttrOptions(list[i].id);
} }
// values = this.getEditAttrValues(i); //编辑状态下获取选中属性
values = this.getEditAttrValues(i);
} }
this.selectProductAttr.push({ this.selectProductAttr.push({
id: list[i].id, id: list[i].id,
@ -251,13 +280,22 @@
options: options options: options
}); });
} }
if(this.isEdit){
//编辑模式下刷新商品属性图片
this.refreshProductAttrPics();
}
} else { } else {
this.selectProductParam = []; this.selectProductParam = [];
for (let i = 0; i < list.length; i++) { for (let i = 0; i < list.length; i++) {
let value=null;
if(this.isEdit){
//编辑模式下获取参数属性
value= this.getEditParamValue(list[i].id);
}
this.selectProductParam.push({ this.selectProductParam.push({
id: list[i].id, id: list[i].id,
name: list[i].name, name: list[i].name,
value: null, value: value,
inputType: list[i].inputType, inputType: list[i].inputType,
inputList: list[i].inputList inputList: list[i].inputList
}); });
@ -266,13 +304,13 @@
}); });
}, },
//获取设置的可手动添加属性值 //获取设置的可手动添加属性值
getEditAttrOptions(id){ getEditAttrOptions(id) {
let options=[]; let options = [];
for(let i=0;i<this.value.productAttributeValueList.length;i++){ for (let i = 0; i < this.value.productAttributeValueList.length; i++) {
let attrValue = this.value.productAttributeValueList[i]; let attrValue = this.value.productAttributeValueList[i];
if(attrValue.productAttributeId===id){ if (attrValue.productAttributeId === id) {
let strArr = attrValue.value.split(','); let strArr = attrValue.value.split(',');
for(let j=0;j<strArr.length;j++){ for (let j = 0; j < strArr.length; j++) {
options.push(strArr[j]); options.push(strArr[j]);
} }
break; break;
@ -281,32 +319,40 @@
return options; return options;
}, },
//获取选中的属性值 //获取选中的属性值
getEditAttrValues(index){ getEditAttrValues(index) {
let values=[]; let values = [];
if(index===0){ if (index === 0) {
for(let i=0;i<this.value.skuStockList.length;i++){ for (let i = 0; i < this.value.skuStockList.length; i++) {
let sku=this.value.skuStockList[i]; let sku = this.value.skuStockList[i];
if(sku.sp1!=null&&values.indexOf(sku.sp1)>-1){ if (sku.sp1 != null && values.indexOf(sku.sp1) === -1) {
values.push(sku.sp1); values.push(sku.sp1);
} }
} }
}else if(index===1){ } else if (index === 1) {
for(let i=0;i<this.value.skuStockList.length;i++){ for (let i = 0; i < this.value.skuStockList.length; i++) {
let sku=this.value.skuStockList[i]; let sku = this.value.skuStockList[i];
if(sku.sp2!=null&&values.indexOf(sku.sp2)>-1){ if (sku.sp2 != null && values.indexOf(sku.sp2) === -1) {
values.push(sku.sp2); values.push(sku.sp2);
} }
} }
}else{ } else {
for(let i=0;i<this.value.skuStockList.length;i++){ for (let i = 0; i < this.value.skuStockList.length; i++) {
let sku=this.value.skuStockList[i]; let sku = this.value.skuStockList[i];
if(sku.sp3!=null&&values.indexOf(sku.sp3)>-1){ if (sku.sp3 != null && values.indexOf(sku.sp3) === -1) {
values.push(sku.sp3); values.push(sku.sp3);
} }
} }
} }
return values; return 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) { handleProductAttrChange(value) {
this.getProductAttrList(0, value); this.getProductAttrList(0, value);
this.getProductAttrList(1, value); this.getProductAttrList(1, value);
@ -348,8 +394,17 @@
} }
}, },
handleRefreshProductSkuList() { handleRefreshProductSkuList() {
this.$confirm('刷新列表将导致sku信息重新生成，是否要刷新', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.refreshProductAttrPics();
this.refreshProductSkuList();
});
},
refreshProductSkuList() {
this.value.skuStockList = []; this.value.skuStockList = [];
this.refreshProductAttrPics();
let skuList = this.value.skuStockList; let skuList = this.value.skuStockList;
//只有一个属性时 //只有一个属性时
if (this.selectProductAttr.length === 1) { if (this.selectProductAttr.length === 1) {
@ -411,10 +466,24 @@
if (this.selectProductAttr.length >= 1) { if (this.selectProductAttr.length >= 1) {
let values = this.selectProductAttr[0].values; let values = this.selectProductAttr[0].values;
for (let i = 0; i < values.length; i++) { for (let i = 0; i < values.length; i++) {
this.selectProductAttrPics.push({name: values[i], pic: null}) 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++){
if(name===this.value.skuStockList[i].sp1){
return this.value.skuStockList[i].pic;
}
}
return null;
},
//合并商品属性 //合并商品属性
mergeProductAttrValue() { mergeProductAttrValue() {
this.value.productAttributeValueList = []; this.value.productAttributeValueList = [];
@ -436,7 +505,7 @@
} }
}, },
//合并商品属性图片 //合并商品属性图片
mergeProductAttrPics(){ mergeProductAttrPics() {
for (let i = 0; i < this.selectProductAttrPics.length; i++) { for (let i = 0; i < this.selectProductAttrPics.length; i++) {
for (let j = 0; j < this.value.skuStockList.length; j++) { for (let j = 0; j < this.value.skuStockList.length; j++) {
if (this.value.skuStockList[j].sp1 === this.selectProductAttrPics[i].name) { if (this.value.skuStockList[j].sp1 === this.selectProductAttrPics[i].name) {

30
src/views/pms/product/components/ProductDetail.vue
View File

@ -29,6 +29,7 @@
<product-relation-detail <product-relation-detail
v-show="showStatus[3]" v-show="showStatus[3]"
v-model="productParam" v-model="productParam"
:is-edit="isEdit"
@prevStep="prevStep" @prevStep="prevStep"
@finishCommit="finishCommit"> @finishCommit="finishCommit">
</product-relation-detail> </product-relation-detail>
@ -39,7 +40,7 @@
import ProductSaleDetail from './ProductSaleDetail'; import ProductSaleDetail from './ProductSaleDetail';
import ProductAttrDetail from './ProductAttrDetail'; import ProductAttrDetail from './ProductAttrDetail';
import ProductRelationDetail from './ProductRelationDetail'; import ProductRelationDetail from './ProductRelationDetail';
import {createProduct,getProduct} from '@/api/product'; import {createProduct,getProduct,updateProduct} from '@/api/product';
const defaultProductParam = { const defaultProductParam = {
albumPics: '', albumPics: '',
@ -138,20 +139,31 @@
this.showStatus[this.active] = true; this.showStatus[this.active] = true;
} }
}, },
finishCommit() { finishCommit(isEdit) {
this.$confirm('是否要提交该产品', '提示', { this.$confirm('是否要提交该产品', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
createProduct(this.productParam).then(response=>{ if(isEdit){
this.$message({ updateProduct(this.$route.query.id,this.productParam).then(response=>{
type: 'success', this.$message({
message: '提交成功', type: 'success',
duration:1000 message: '提交成功',
duration:1000
});
this.$router.back();
}); });
location.reload(); }else{
}); createProduct(this.productParam).then(response=>{
this.$message({
type: 'success',
message: '提交成功',
duration:1000
});
location.reload();
});
}
}) })
} }
} }

56
src/views/pms/product/components/ProductRelationDetail.vue
View File

@ -42,18 +42,18 @@
export default { export default {
name: "ProductRelationDetail", name: "ProductRelationDetail",
props: { props: {
value: Object value: Object,
isEdit: {
type: Boolean,
default: false
}
}, },
data() { data() {
return { return {
//选中的专题
selectSubject: [],
//所有专题列表 //所有专题列表
subjectList: [], subjectList: [],
//专题左右标题 //专题左右标题
subjectTitles: ['待选择', '已选择'], subjectTitles: ['待选择', '已选择'],
//选中的专题
selectPrefrenceArea: [],
//所有专题列表 //所有专题列表
prefrenceAreaList: [], prefrenceAreaList: [],
//专题左右标题 //专题左右标题
@ -64,17 +64,43 @@
this.getSubjectList(); this.getSubjectList();
this.getPrefrenceAreaList(); this.getPrefrenceAreaList();
}, },
watch: { computed:{
selectSubject: function (newValue) { //选中的专题
this.value.subjectProductRelationList=[]; selectSubject:{
for(let i=0;i<newValue.length;i++){ get:function () {
this.value.subjectProductRelationList.push({subjectId:newValue[i]}); let subjects =[];
if(this.value.subjectProductRelationList==null||this.value.subjectProductRelationList.length<=0){
return subjects;
}
for(let i=0;i<this.value.subjectProductRelationList.length;i++){
subjects.push(this.value.subjectProductRelationList[i].subjectId);
}
return subjects;
},
set:function (newValue) {
this.value.subjectProductRelationList=[];
for(let i=0;i<newValue.length;i++){
this.value.subjectProductRelationList.push({subjectId:newValue[i]});
}
} }
}, },
selectPrefrenceArea: function (newValue) { //选中的优选
this.value.prefrenceAreaProductRelationList=[]; selectPrefrenceArea:{
for(let i=0;i<newValue.length;i++){ get:function () {
this.value.prefrenceAreaProductRelationList.push({prefrenceAreaId:newValue[i]}); let prefrenceAreas =[];
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);
}
return prefrenceAreas;
},
set:function (newValue) {
this.value.prefrenceAreaProductRelationList=[];
for(let i=0;i<newValue.length;i++){
this.value.prefrenceAreaProductRelationList.push({prefrenceAreaId:newValue[i]});
}
} }
} }
}, },
@ -108,7 +134,7 @@
this.$emit('prevStep') this.$emit('prevStep')
}, },
handleFinishCommit(){ handleFinishCommit(){
this.$emit('finishCommit') this.$emit('finishCommit',this.isEdit);
} }
} }
} }

130
src/views/pms/product/components/ProductSaleDetail.vue
View File

@ -70,33 +70,34 @@
<div> <div>
开始时间： 开始时间：
<el-date-picker <el-date-picker
v-model="value.promotionStartTime" v-model="value.promotionStartTime"
value-format="timestamp" value-format="timestamp"
type="datetime" type="datetime"
:picker-options="pickerOptions1" :picker-options="pickerOptions1"
placeholder="选择开始时间"> placeholder="选择开始时间">
</el-date-picker> </el-date-picker>
</div> </div>
<div class="littleMargin"> <div class="littleMargin">
结束时间： 结束时间：
<el-date-picker <el-date-picker
v-model="value.promotionEndTime" v-model="value.promotionEndTime"
value-format="timestamp" value-format="timestamp"
type="datetime" type="datetime"
:picker-options="pickerOptions1" :picker-options="pickerOptions1"
placeholder="选择结束时间"> placeholder="选择结束时间">
</el-date-picker> </el-date-picker>
</div> </div>
<div class="littleMargin"> <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> </div>
</el-form-item> </el-form-item>
<el-form-item v-show="value.promotionType===2"> <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" :class="{littleMargin:index!==0}">
{{item.memberLevelName}}：<el-input v-model="item.memberPrice" style="width: 200px"></el-input> {{item.memberLevelName}}：
</div> <el-input v-model="item.memberPrice" style="width: 200px"></el-input>
</div>
</el-form-item> </el-form-item>
<el-form-item v-show="value.promotionType===3"> <el-form-item v-show="value.promotionType===3">
<el-table :data="value.productLadderList" <el-table :data="value.productLadderList"
@ -166,6 +167,7 @@
<script> <script>
import {fetchList as fetchMemberLevelList} from '@/api/memberLevel' import {fetchList as fetchMemberLevelList} from '@/api/memberLevel'
export default { export default {
name: "ProductSaleDetail", name: "ProductSaleDetail",
props: { props: {
@ -177,8 +179,6 @@
}, },
data() { data() {
return { return {
//选中的服务保证
selectServiceList: [],
//日期选择器配置 //日期选择器配置
pickerOptions1: { pickerOptions1: {
disabledDate(time) { disabledDate(time) {
@ -187,102 +187,114 @@
} }
} }
}, },
created(){ created() {
if(this.isEdit){ if (this.isEdit) {
this.handleEditCreated(); // this.handleEditCreated();
}else{ } else {
fetchMemberLevelList({defaultStatus:0}).then(response=>{ fetchMemberLevelList({defaultStatus: 0}).then(response => {
let memberPriceList=[]; let memberPriceList = [];
for(let i=0;i<response.data.length;i++){ for (let i = 0; i < response.data.length; i++) {
let item = response.data[i]; let item = response.data[i];
memberPriceList.push({memberLevelId:item.id,memberLevelName:item.name}) memberPriceList.push({memberLevelId: item.id, memberLevelName: item.name})
} }
this.value.memberPriceList=memberPriceList; this.value.memberPriceList = memberPriceList;
}); });
} }
}, },
watch: { computed: {
selectServiceList: function (newValue) { //选中的服务保证
let serviceIds = ''; selectServiceList: {
if (newValue != null && newValue.length > 0) { get() {
for (let i = 0; i < newValue.length; i++) { let list = [];
serviceIds += newValue[i] + ','; 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]));
} }
if (serviceIds.endsWith(',')) { return list;
serviceIds = serviceIds.substr(0, serviceIds.length - 1) },
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 = serviceIds;
} else {
this.value.serviceIds = null;
} }
} }
}, },
methods:{ methods: {
handleEditCreated(){ handleEditCreated() {
let ids = this.value.serviceIds.split(','); let ids = this.value.serviceIds.split(',');
for(let i=0;i<ids.length;i++){ console.log('handleEditCreated', ids);
for (let i = 0; i < ids.length; i++) {
this.selectServiceList.push(Number(ids[i])); this.selectServiceList.push(Number(ids[i]));
} }
}, },
handleRemoveProductLadder(index,row){ handleRemoveProductLadder(index, row) {
let productLadderList = this.value.productLadderList; let productLadderList = this.value.productLadderList;
if(productLadderList.length===1){ if (productLadderList.length === 1) {
productLadderList.pop(); productLadderList.pop();
productLadderList.push({ productLadderList.push({
count: 0, count: 0,
discount: 0, discount: 0,
price: 0 price: 0
}) })
}else{ } else {
productLadderList.splice(index,1); productLadderList.splice(index, 1);
} }
}, },
handleAddProductLadder(index,row){ handleAddProductLadder(index, row) {
let productLadderList = this.value.productLadderList; let productLadderList = this.value.productLadderList;
if(productLadderList.length<3){ if (productLadderList.length < 3) {
productLadderList.push({ productLadderList.push({
count: 0, count: 0,
discount: 0, discount: 0,
price: 0 price: 0
}) })
}else{ } else {
this.$message({ this.$message({
message: '最多只能添加三条', message: '最多只能添加三条',
type: 'warning' type: 'warning'
}); });
} }
}, },
handleRemoveFullReduction(index,row){ handleRemoveFullReduction(index, row) {
let fullReductionList = this.value.productFullReductionList; let fullReductionList = this.value.productFullReductionList;
if(fullReductionList.length===1){ if (fullReductionList.length === 1) {
fullReductionList.pop(); fullReductionList.pop();
fullReductionList.push({ fullReductionList.push({
fullPrice: 0, fullPrice: 0,
reducePrice: 0 reducePrice: 0
}); });
}else{ } else {
fullReductionList.splice(index,1); fullReductionList.splice(index, 1);
} }
}, },
handleAddFullReduction(index,row){ handleAddFullReduction(index, row) {
let fullReductionList = this.value.productFullReductionList; let fullReductionList = this.value.productFullReductionList;
if(fullReductionList.length<3){ if (fullReductionList.length < 3) {
fullReductionList.push({ fullReductionList.push({
fullPrice: 0, fullPrice: 0,
reducePrice: 0 reducePrice: 0
}); });
}else{ } else {
this.$message({ this.$message({
message: '最多只能添加三条', message: '最多只能添加三条',
type: 'warning' type: 'warning'
}); });
} }
}, },
handlePrev(){ handlePrev() {
this.$emit('prevStep') this.$emit('prevStep')
}, },
handleNext(){ handleNext() {
this.$emit('nextStep') this.$emit('nextStep')
} }
} }
@ -290,7 +302,7 @@
</script> </script>
<style scoped> <style scoped>
.littleMargin{ .littleMargin {
margin-top: 10px; margin-top: 10px;
} }
</style> </style>