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) {
return request({
url:'/product/updateInfo/'+id,

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

@ -161,6 +161,8 @@
},
data() {
return {
//编辑模式时是否初始化成功
hasEditCreated:false,
//商品属性分类下拉选项
productAttributeCategoryOptions: [],
//选中的商品属性
@ -171,31 +173,40 @@
selectProductAttrPics: [],
//可手动添加的商品属性
addProductAttrValue: '',
//选中的商品图片
selectProductPics: [],
//商品富文本详情激活类型
activeHtmlName: 'pc'
}
},
computed: {
//是否有商品属性图片
hasAttrPic() {
if (this.selectProductAttrPics.length < 1) {
return false;
}
return true;
}
},
created() {
if(this.isEdit){
this.handleEditCreated();
}
this.getProductAttrCateList();
if (this.value.productAttributeCategoryId != null) {
this.handleProductAttrChange(this.value.productAttributeCategoryId);
}
//商品的编号
productId(){
return this.value.id;
},
watch: {
selectProductPics: function (newValue) {
//商品的主图和画册图片
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;
@ -212,10 +223,26 @@
}
}
}
}
},
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: {
handleEditCreated() {
//根据商品属性分类id获取属性和参数
if(this.value.productAttributeCategoryId!=null){
this.handleProductAttrChange(this.value.productAttributeCategoryId);
}
this.hasEditCreated=true;
},
getProductAttrCateList() {
let param = {pageNum: 1, pageSize: 100};
@ -238,9 +265,11 @@
let values = [];
if (this.isEdit) {
if (list[i].handAddStatus === 1) {
//编辑状态下获取手动添加编辑属性
options = this.getEditAttrOptions(list[i].id);
}
// values = this.getEditAttrValues(i);
//编辑状态下获取选中属性
values = this.getEditAttrValues(i);
}
this.selectProductAttr.push({
id: list[i].id,
@ -251,13 +280,22 @@
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: null,
value: value,
inputType: list[i].inputType,
inputList: list[i].inputList
});
@ -286,27 +324,35 @@
if (index === 0) {
for (let i = 0; i < this.value.skuStockList.length; 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);
}
}
} else if (index === 1) {
for (let i = 0; i < this.value.skuStockList.length; 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);
}
}
} else {
for (let i = 0; i < this.value.skuStockList.length; 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);
}
}
}
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) {
this.getProductAttrList(0, value);
this.getProductAttrList(1, value);
@ -348,8 +394,17 @@
}
},
handleRefreshProductSkuList() {
this.value.skuStockList = [];
this.$confirm('刷新列表将导致sku信息重新生成，是否要刷新', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.refreshProductAttrPics();
this.refreshProductSkuList();
});
},
refreshProductSkuList() {
this.value.skuStockList = [];
let skuList = this.value.skuStockList;
//只有一个属性时
if (this.selectProductAttr.length === 1) {
@ -411,10 +466,24 @@
if (this.selectProductAttr.length >= 1) {
let values = this.selectProductAttr[0].values;
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() {
this.value.productAttributeValueList = [];

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

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

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

@ -42,18 +42,18 @@
export default {
name: "ProductRelationDetail",
props: {
value: Object
value: Object,
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
//选中的专题
selectSubject: [],
//所有专题列表
subjectList: [],
//专题左右标题
subjectTitles: ['待选择', '已选择'],
//选中的专题
selectPrefrenceArea: [],
//所有专题列表
prefrenceAreaList: [],
//专题左右标题
@ -64,19 +64,45 @@
this.getSubjectList();
this.getPrefrenceAreaList();
},
watch: {
selectSubject: function (newValue) {
computed:{
//选中的专题
selectSubject:{
get:function () {
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) {
//选中的优选
selectPrefrenceArea:{
get:function () {
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]});
}
}
}
},
methods: {
filterMethod(query, item) {
@ -108,7 +134,7 @@
this.$emit('prevStep')
},
handleFinishCommit(){
this.$emit('finishCommit')
this.$emit('finishCommit',this.isEdit);
}
}
}

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

@ -95,7 +95,8 @@
</el-form-item>
<el-form-item v-show="value.promotionType===2">
<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}}：
<el-input v-model="item.memberPrice" style="width: 200px"></el-input>
</div>
</el-form-item>
<el-form-item v-show="value.promotionType===3">
@ -166,6 +167,7 @@
<script>
import {fetchList as fetchMemberLevelList} from '@/api/memberLevel'
export default {
name: "ProductSaleDetail",
props: {
@ -177,8 +179,6 @@
},
data() {
return {
//选中的服务保证
selectServiceList: [],
//日期选择器配置
pickerOptions1: {
disabledDate(time) {
@ -189,7 +189,7 @@
},
created() {
if (this.isEdit) {
this.handleEditCreated();
// this.handleEditCreated();
} else {
fetchMemberLevelList({defaultStatus: 0}).then(response => {
let memberPriceList = [];
@ -201,8 +201,19 @@
});
}
},
watch: {
selectServiceList: function (newValue) {
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;
},
set(newValue) {
let serviceIds = '';
if (newValue != null && newValue.length > 0) {
for (let i = 0; i < newValue.length; i++) {
@ -215,12 +226,13 @@
} else {
this.value.serviceIds = null;
}
}
}
},
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]));
}