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,

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

@ -161,6 +161,8 @@
},
data() {
return {
//编辑模式时是否初始化成功
hasEditCreated:false,
//商品属性分类下拉选项
productAttributeCategoryOptions: [],
//选中的商品属性
@ -171,51 +173,76 @@
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);
}
},
watch: {
selectProductPics: 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 += ',';
},
//商品的编号
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 += ',';
}
}
}
}
}
}
},
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(){
handleEditCreated() {
//根据商品属性分类id获取属性和参数
if(this.value.productAttributeCategoryId!=null){
this.handleProductAttrChange(this.value.productAttributeCategoryId);
}
this.hasEditCreated=true;
},
getProductAttrCateList() {
let param = {pageNum: 1, pageSize: 100};
@ -235,12 +262,14 @@
this.selectProductAttr = [];
for (let i = 0; i < list.length; i++) {
let options = [];
let values=[];
if(this.isEdit){
if(list[i].handAddStatus===1){
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
});
@ -266,13 +304,13 @@
});
},
//获取设置的可手动添加属性值
getEditAttrOptions(id){
let options=[];
for(let i=0;i<this.value.productAttributeValueList.length;i++){
getEditAttrOptions(id) {
let options = [];
for (let i = 0; i < this.value.productAttributeValueList.length; i++) {
let attrValue = this.value.productAttributeValueList[i];
if(attrValue.productAttributeId===id){
if (attrValue.productAttributeId === id) {
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]);
}
break;
@ -281,32 +319,40 @@
return options;
},
//获取选中的属性值
getEditAttrValues(index){
let values=[];
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){
getEditAttrValues(index) {
let values = [];
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) {
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){
} 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) {
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){
} 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) {
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.$confirm('刷新列表将导致sku信息重新生成，是否要刷新', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.refreshProductAttrPics();
this.refreshProductSkuList();
});
},
refreshProductSkuList() {
this.value.skuStockList = [];
this.refreshProductAttrPics();
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 = [];
@ -436,7 +505,7 @@
}
},
//合并商品属性图片
mergeProductAttrPics(){
mergeProductAttrPics() {
for (let i = 0; i < this.selectProductAttrPics.length; i++) {
for (let j = 0; j < this.value.skuStockList.length; j++) {
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
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,20 +139,31 @@
this.showStatus[this.active] = true;
}
},
finishCommit() {
finishCommit(isEdit) {
this.$confirm('是否要提交该产品', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
createProduct(this.productParam).then(response=>{
this.$message({
type: 'success',
message: '提交成功',
duration:1000
if(isEdit){
updateProduct(this.$route.query.id,this.productParam).then(response=>{
this.$message({
type: 'success',
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 {
name: "ProductRelationDetail",
props: {
value: Object
value: Object,
isEdit: {
type: Boolean,
default: false
}
},
data() {
return {
//选中的专题
selectSubject: [],
//所有专题列表
subjectList: [],
//专题左右标题
subjectTitles: ['待选择', '已选择'],
//选中的专题
selectPrefrenceArea: [],
//所有专题列表
prefrenceAreaList: [],
//专题左右标题
@ -64,17 +64,43 @@
this.getSubjectList();
this.getPrefrenceAreaList();
},
watch: {
selectSubject: function (newValue) {
this.value.subjectProductRelationList=[];
for(let i=0;i<newValue.length;i++){
this.value.subjectProductRelationList.push({subjectId:newValue[i]});
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) {
this.value.prefrenceAreaProductRelationList=[];
for(let i=0;i<newValue.length;i++){
this.value.prefrenceAreaProductRelationList.push({prefrenceAreaId:newValue[i]});
//选中的优选
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]});
}
}
}
},
@ -108,7 +134,7 @@
this.$emit('prevStep')
},
handleFinishCommit(){
this.$emit('finishCommit')
this.$emit('finishCommit',this.isEdit);
}
}
}

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

@ -70,33 +70,34 @@
<div>
开始时间：
<el-date-picker
v-model="value.promotionStartTime"
value-format="timestamp"
type="datetime"
:picker-options="pickerOptions1"
placeholder="选择开始时间">
</el-date-picker>
v-model="value.promotionStartTime"
value-format="timestamp"
type="datetime"
:picker-options="pickerOptions1"
placeholder="选择开始时间">
</el-date-picker>
</div>
<div class="littleMargin">
结束时间：
<el-date-picker
v-model="value.promotionEndTime"
value-format="timestamp"
type="datetime"
:picker-options="pickerOptions1"
placeholder="选择结束时间">
</el-date-picker>
v-model="value.promotionEndTime"
value-format="timestamp"
type="datetime"
:picker-options="pickerOptions1"
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}">
{{item.memberLevelName}}：<el-input v-model="item.memberPrice" style="width: 200px"></el-input>
</div>
<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>
</div>
</el-form-item>
<el-form-item v-show="value.promotionType===3">
<el-table :data="value.productLadderList"
@ -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) {
@ -187,102 +187,114 @@
}
}
},
created(){
if(this.isEdit){
this.handleEditCreated();
}else{
fetchMemberLevelList({defaultStatus:0}).then(response=>{
let memberPriceList=[];
for(let i=0;i<response.data.length;i++){
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})
memberPriceList.push({memberLevelId: item.id, memberLevelName: item.name})
}
this.value.memberPriceList=memberPriceList;
this.value.memberPriceList = memberPriceList;
});
}
},
watch: {
selectServiceList: function (newValue) {
let serviceIds = '';
if (newValue != null && newValue.length > 0) {
for (let i = 0; i < newValue.length; i++) {
serviceIds += newValue[i] + ',';
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]));
}
if (serviceIds.endsWith(',')) {
serviceIds = serviceIds.substr(0, serviceIds.length - 1)
return list;
},
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:{
handleEditCreated(){
methods: {
handleEditCreated() {
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]));
}
},
handleRemoveProductLadder(index,row){
handleRemoveProductLadder(index, row) {
let productLadderList = this.value.productLadderList;
if(productLadderList.length===1){
if (productLadderList.length === 1) {
productLadderList.pop();
productLadderList.push({
count: 0,
discount: 0,
price: 0
})
}else{
productLadderList.splice(index,1);
} else {
productLadderList.splice(index, 1);
}
},
handleAddProductLadder(index,row){
handleAddProductLadder(index, row) {
let productLadderList = this.value.productLadderList;
if(productLadderList.length<3){
if (productLadderList.length < 3) {
productLadderList.push({
count: 0,
discount: 0,
price: 0
})
}else{
} else {
this.$message({
message: '最多只能添加三条',
type: 'warning'
});
}
},
handleRemoveFullReduction(index,row){
handleRemoveFullReduction(index, row) {
let fullReductionList = this.value.productFullReductionList;
if(fullReductionList.length===1){
if (fullReductionList.length === 1) {
fullReductionList.pop();
fullReductionList.push({
fullPrice: 0,
reducePrice: 0
});
}else{
fullReductionList.splice(index,1);
} else {
fullReductionList.splice(index, 1);
}
},
handleAddFullReduction(index,row){
handleAddFullReduction(index, row) {
let fullReductionList = this.value.productFullReductionList;
if(fullReductionList.length<3){
if (fullReductionList.length < 3) {
fullReductionList.push({
fullPrice: 0,
reducePrice: 0
});
}else{
} else {
this.$message({
message: '最多只能添加三条',
type: 'warning'
});
}
},
handlePrev(){
handlePrev() {
this.$emit('prevStep')
},
handleNext(){
handleNext() {
this.$emit('nextStep')
}
}
@ -290,7 +302,7 @@
</script>
<style scoped>
.littleMargin{
.littleMargin {
margin-top: 10px;
}
</style>