fe / ufo-platform-fe · Commits

Go to a project

Authored by 邱骏
Commit 000be535b57e655670eb3d5f8bc93f4e0eeb7ce4 1 parent c4a45976

优惠券选择适用范围为[特定品类，特定系列]的时候，二级下拉框可以多选

Inline Side-by-side
Showing 5 changed files with 231 additions and 29 deletions
... ... @@ -7,15 +7,16 @@ class Api {
}
_get(url, data = {}, options = {}) {
console.log('data')
console.log(data)
console.log('options')
console.log(options)
console.log('接口调用start====================')
console.log('data=', data)
console.log('options=', options)
let params = this._2params(data);
if (!PRODUCTION) { //eslint-disable-line
params.debug = 'XYZ';
}
console.log("url:"+url)
console.log("url="+url)
console.log('接口调用end======================');
return util.ajax.get(url, Object.assign({params}, options)).then(result => result.data).catch(this.catch);
}
... ... @@ -68,4 +69,4 @@ class Api {
}
}
export default Api;
\ No newline at end of file
export default Api;
... ...
export default "production";
\ No newline at end of file
export default "development";
\ No newline at end of file
... ...
... ... @@ -106,21 +106,32 @@
<radio v-for = "(val, key) in allowproductLimitTypeList" :key="formData.userType+key" :label="+key" :disabled="readonly">{{val}}</radio>
</radio-group>
</i-form-item>
<!--使用范围选择框-->
<div :key="formData.productLimitType">
<i-form-item prop="brandVal" v-if="formData.productLimitType === 4">
<Select v-model="formData.brandVal" multiple style="width:300px" :disabled="readonly">
<Option v-for="item in brandList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</i-form-item>
<!--特定商品以及特定系列-->
<!--cascaderData.prop = category | series-->
<i-form-item :prop="cascaderData.prop" v-else-if="formData.productLimitType === 5 || formData.productLimitType === 6">
<i-row v-for="item in cascaderData.formData.items" :key="item.index" class="add-item">
<!--<i-row v-for="item in cascaderData.formData.items" :key="item.index" class="add-item">
<i-col span="16">
<Cascader :data="cascaderData.data" :disabled="readonly" v-model="item.value" :load-data="cascaderData.loadData"></Cascader>
</i-col>
<i-col span="4" offset="1" v-if="item.index > 1 && !readonly">
<i-button @click="handleRemove(cascaderData.formData, item.index)" type="error" size="small" ghost icon="md-close" shape="circle"></i-button>
</i-col>
</i-row>-->
<!--:key一定要使用唯一ID，要不然删除和绑定数据时会出错-->
<i-row v-for="item in cascaderData.formData.items" style="margin-left: -40px" :key="item.id" class="add-item">
<i-col span="20">
<multi-select :data="cascaderData.data" :coupon-id="formData.id" :disabled="readonly" v-model="item.value" @load-data="cascaderData.loadData" @item-change="multiSelectItemChange"></multi-select>
</i-col>
<i-col span="2" offset="1" v-if="item.index > 1 && !readonly">
<i-button @click="handleRemove(cascaderData.formData, item.index)" type="error" size="small" ghost icon="md-close" shape="circle"></i-button>
</i-col>
</i-row>
<i-row v-if="!readonly">
... ... @@ -196,6 +207,7 @@
import Api from "api/api";
import dayjs from "dayjs";
import XLSX from "xlsx";
import MultiSelect from './multi-select-component';
const api = new Api();
const forbidenTypeMap = {
... ... @@ -276,6 +288,7 @@ const initFormData = {
category: {
index: 1,
items: [{
id: Date.now(),
index: 1,
value: []
}]
... ... @@ -302,7 +315,9 @@ const initFormData = {
};
export default {
components: {},
components: {
MultiSelect
},
name: "ModalCreateCoupon",
data() {
return {
... ... @@ -493,7 +508,7 @@ export default {
allowTypeLabelList: function() {
return this.formData.userType === 1 ? allowLabelMap : sellerAllowLabel
},
counponOptions: function() {
counponOptions: function() {
return this.formData.userType === 1 ? userCouponType.buyer : userCouponType.seller
},
isShowDetail: function() {
... ... @@ -502,7 +517,7 @@ export default {
uploadProp: function() {
return this.formData.productLimitType === 1 ? 'productLimitValue' : 'excludeProductIds'
},
cascaderData: function() {
cascaderData: function() { // 特定品类与特定系列的适用范围的数据初始化
let cascaderObj = {}
if (this.formData.productLimitType === 5) {
cascaderObj.prop = "category"
... ... @@ -516,7 +531,7 @@ export default {
cascaderObj.loadData = this.loadSeriesData
}
return cascaderObj
}
}
},
methods: {
async show(id, readonly, allreadonly) {
... ... @@ -543,7 +558,7 @@ export default {
if (result.code === 200) {
const coupon = result.data.coupon;
console.log(result.data)
console.log('showCouponData=', result.data)
const productLimits = result.data.productLimits;
this.couponToken = coupon.couponToken;
... ... @@ -607,14 +622,41 @@ export default {
getFormSelectedVal(val) {
let selectedVal = {}
let valArr = val.split(",")
selectedVal.index = valArr.length
let itemsArr = []
let parentArr = [];
let childrenArr = [];
// 为了使数据格式和特定品类的多选组件数据格式相同, 需要合并数据，把每个item处理成[20, "18, 84, 24"]这种类型
for(let i = 0; i < valArr.length; i++) {
let item = {}
item.index = i+1
item.value = valArr[i].split("-").map(item => parseInt(item))
itemsArr.push(item)
let parent = valArr[i].split('-')[0];
let children = valArr[i].split('-')[1];
let index = parentArr.findIndex(item => item === parent); // 找到parent在parentArr中存在的index
if (index >= 0) { // 已存在parent的情况下
if (!childrenArr[index]) { // 如果没有对应index下的children，则插入一个小数组
childrenArr[index] = [].concat(children);
} else { // 如果有对应index的children，则在此children数组中插入一个值
childrenArr[index].push(children);
}
} else { // 不存在parent的情况下
parentArr.push(parent);
let pIndex = parentArr.findIndex(item => item === parent);
childrenArr[pIndex] = [].concat(children);
}
}
// 整合数据
let itemsArr = [];
for (let j = 0; j < parentArr.length; j++) {
let item = {};
item.index = j + 1;
item.id = this.$bus.genId(); // id用于循环的:key，防止出错
item.value = [parseInt(parentArr[j], 10), childrenArr[j].join(',')];
itemsArr.push(item);
}
// console.log(itemsArr);
selectedVal.index = parentArr.length;
selectedVal.items = itemsArr
return selectedVal
},
... ... @@ -642,15 +684,20 @@ export default {
item.children = []
item.loading = false
}
return item
})
console.log('dataList=', this[dataListName]);
this[dataListName] = dataList
},
loadSeriesData (item, callback) {
// console.log('itemSeries=', item, 'child-callback=', callback)
this.loadData("seires", item, callback)
},
loadCategoryData (item, callback) {
// console.log('itemCategory=', item, 'child-callback=', callback);
this.loadData("category", item, callback)
},
async loadData (name, item, callback) {
... ... @@ -671,16 +718,22 @@ export default {
})
item.children = childrenList
item.loading = false;
callback();
callback(item);
},
multiSelectItemChange(params) { // 自定义特定品类用多选框事件
console.log('params=', params);
console.log('formData=', this.formData);
},
handleAdd (cascaderData) {
cascaderData.index++;
cascaderData.items.push({index: cascaderData.index,value:[]});
cascaderData.id = this.$bus.genId();
cascaderData.items.push({id:this.$bus.genId(), index: cascaderData.index, value:[]});
},
handleRemove (cascaderData, index) {
let totalItem = cascaderData.index
let totalItem = cascaderData.index;
console.log(index, totalItem);
cascaderData.index--;
if(index < totalItem) { // 删除中间项时 后面index重置
cascaderData.items.splice(index-1,1);
let newData = cascaderData.items
... ... @@ -710,7 +763,7 @@ export default {
}else {
this.formData.checkRequired = 0
}
},
setIsShowInDetail(checked) {
... ... @@ -732,10 +785,11 @@ export default {
this.formData.excludeProductIds = this.excludeValCache[val]
this.lastSelectType = val
this.getSelectItems(val)
},
getLimitVal(propName) {
console.log('propName=', propName);
console.log('formData=', this.formData[propName]);
let processData = this.formData[propName].items
let idsArr = []
for(let i = 0; i < processData.length; i++) {
... ... @@ -765,6 +819,7 @@ export default {
this.visiable = false;
return;
}
const productLimitValue = this.processProductLimitValue(params.productLimitType); // 适用类型选择的数据
const result = await api._post("/ufoPlatform/coupon/saveOrUpdateCoupon", {
id: params.id || void 0,
... ... @@ -776,7 +831,7 @@ export default {
useNum: params.useNum,
useLimitValue: params.useLimitValue,
productLimitType: params.productLimitType,
productLimitValue: this.processProductLimitValue(params.productLimitType),
productLimitValue: productLimitValue,
excludeProductIds: params.excludeProductIds,
remark: params.remark,
useLimitType:
... ... @@ -846,7 +901,7 @@ export default {
const results = XLSX.utils.sheet_to_json(worksheet);
this.formData[this.uploadProp] = results
.map(r => r["商品编码"])
.filter(r => r)
.join(",");
... ...
<template>
<div class="multi-select-container" :id="maxSort.value">
<i-select :disabled="disabled" v-model="maxSort.value" @on-change="onMaxSorChange" style="width: 120px" :label-in-value="true">
<i-option v-for="option in cascaderData" :label="option.label" :value="option.value"></i-option>
</i-select>
<i-select :disabled="disabled" v-model="minSort" @on-change="onMinSortChange" multiple style="width: 300px">
<i-option v-for="option in maxSort.children" :label="option.label" :value="option.value"></i-option>
</i-select>
</div>
</template>
<script>
export default {
name: "multi-select",
data() {
return {
maxSort: {
label: '',
value: '0',
children: [],
loading: false,
},
minSort: [],
returnValue: [].concat(this.value)
}
},
props: {
disabled: {
type: Boolean,
default: false
},
data: {
type: Array,
default: []
},
value: {
type: Array,
default: []
},
couponId: {
type: Number,
default: 0
}
},
computed: {
cascaderData() {
console.log('cascaderData=', this.data,'value=', this.value);
console.log('id=', this.couponId)
/*if (this.value.length > 1 && this.couponId) {
this.maxSort.value = this.value[0];
this.minSort = this.value[1].split(',');
}*/
return this.data;
},
/*returnValue() {
if (this.value.length) {
console.log('ComputedValue=', this.value);
if (!parseInt(this.maxSort.value, 10)) {
this.maxSort.value = this.value[0] ? this.value[0].toString() : 0;
}
if (!this.minSort.length) {
this.minSort = this.value[1] ? this.value[1].split(',') : [];
}
return [].concat(this.maxSort.value, this.minSort.join(','));
} else {
console.log('ComputedValue2=', this.maxSort, this.minSort);
return [parseInt(this.maxSort.value, 10), this.minSort.join(',')];
}
}*/
},
watch: {
},
mounted() {
console.log('mountedValue=', this.value, this.cascaderData);
if (this.value.length) {
if (!parseInt(this.maxSort.value, 10)) {
let findItem = this.value[0] ? this.data.filter(item => item.value === this.value[0]) : [this.maxSort];
if (findItem) {
this.maxSort = findItem[0];
}
// this.maxSort.value = this.value[0] ? this.value[0].toString() : 0;
}
console.log('MountedMAXSORT=', this.maxSort);
this.$emit('load-data', this.maxSort, (data) => {
console.log('load-data', data);
this.maxSort = data;
this.minSort = [];
setTimeout(function() {
if (!this.minSort.length) {
this.minSort = this.value[1] ? this.value[1].split(',') : [];
this.minSort = this.minSort.map(item => {
return parseInt(item);
})
console.log('bind-minSort=', this.minSort);
}
}.bind(this), 100);
})
}
},
methods: {
onMaxSorChange(val) {
console.log('val=', val);
this.maxSort.children = [];
this.maxSort.label = val.label;
this.maxSort.value = val.value;
this.$emit('load-data', this.maxSort, this.callback);
},
onMinSortChange(val) {
console.log('minSort=', val);
this.minSort = val;
if (this.minSort.length) {
this.returnValue = [this.maxSort.value, this.minSort.join(',')];
} else {
this.returnValue = [];
}
console.log('returnValue=', this.returnValue);
this.$emit('item-change', {
maxSort: this.maxSort,
minSort: this.minSort
});
this.$emit('input', this.returnValue);
},
callback(data) {
this.maxSort = data;
this.minSort = [];
console.log('CallBackMaxSort=', this.maxSort);
}
}
}
</script>
<style scoped lang="scss">
.multi-select-container {
box-sizing: border-box;
/deep/
.ivu-select-multiple .ivu-tag {
padding: 0 4px !important;
}
}
</style>
... ...
... ... @@ -235,7 +235,7 @@ export default {
width: 165
},{
title: '处理人',
key: 'operator',
key: 'operatorName',
width: 90
},{
title: '状态',
... ...