312 lines
16 KiB
JavaScript
312 lines
16 KiB
JavaScript
define({
|
||
name: "dealerCommission",
|
||
template: `
|
||
<div>
|
||
<el-form label-width="200px">
|
||
<div id="vue_head">
|
||
<div class="base_set">
|
||
<div class="vue-main-title">
|
||
<div class="vue-main-title-left"></div>
|
||
<div class="vue-main-title-content">经销商提成设置</div>
|
||
</div>
|
||
<el-divider></el-divider>
|
||
|
||
<div class="vue-main-form">
|
||
<el-form-item label="开启经销商提成">
|
||
<el-radio v-model="is_dividend" :label="0">关闭</el-radio>
|
||
<el-radio v-model="is_dividend" :label="1">开启</el-radio>
|
||
<div class="help-block">如果不开启经销商提成，则不产生提成金额</div>
|
||
</el-form-item>
|
||
<el-form-item label="购买商品分红限制">
|
||
<el-radio v-model="is_restrict" :label="0">关闭</el-radio>
|
||
<el-radio v-model="is_restrict" :label="1">开启</el-radio>
|
||
<div class="help-block">
|
||
<span class="help-block-detail">如果开启了，经销商推广该商品计算分红时，如果经销商没有购买过该商品，则不能获得经销商全部的分红奖励(包括经销商分红、平级奖等)，并不计入平级奖层级，但计入经销提成层级限制</span>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="经销商平级奖">
|
||
<el-radio v-model="is_hierarchy" :label="0">关闭</el-radio>
|
||
<el-radio v-model="is_hierarchy" :label="1">开启</el-radio>
|
||
<div class="help-block">如果不开启经销商平级奖，则不产生平级奖</div>
|
||
</el-form-item>
|
||
<el-form-item label="独立规则">
|
||
<el-switch v-model="has_dividend" :active-value="1" :inactive-value="0"></el-switch>
|
||
<span>启用独立提成比例</span>
|
||
<div class="help-block">启用独立提成金额设置，此商品拥有独自的提成金额,不受默认设置限制</div>
|
||
</el-form-item>
|
||
<el-form-item v-show="has_dividend">
|
||
<el-row :gutter="20" class="gutter">
|
||
<el-col :span="6">
|
||
<div class="grid-content bg-purple">经销商等级</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="grid-content bg-purple">提成比例</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="grid-content bg-purple" v-if="teamSet.is_extra_award == 1">额外奖励</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" class="gutter" v-for="(level, index) in levelList" :key="level.id">
|
||
<el-col :span="6">
|
||
<div class="grid-content bg-purple">{{level.level_name}}</div>
|
||
</el-col>
|
||
<el-col :span="12" class="flex-col">
|
||
<el-input placeholder="请输入百分比" v-model="level.has_dividend_rates" maxlength="10" size="small" oninput="if(value<0)value=''" type="number">
|
||
<template slot="append">%</template>
|
||
</el-input>
|
||
<el-input placeholder="请输入金额" v-model="level.has_dividend_prices" maxlength="10" size="small" oninput="if(value<0)value=''" type="number">
|
||
<template slot="append">元 固定</template>
|
||
</el-input>
|
||
</el-col>
|
||
<el-col :span="6" class="flex-col" v-if="teamSet.is_extra_award == 1">
|
||
<el-input placeholder="请输入金额" v-model="level.has_dividend_extra" maxlength="10" size="small " oninput="if(value<0)value=''" type="number">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="17" style="width:100%">
|
||
<div class="help-block">
|
||
<span class="help-block-detail">如果比例都为空或等于0，则使用固定金额规则，如果比例和金额都为空或等于0则不获得提成(ps:为了确保经销商能获得提成，建议统一设置为比例或者统一设置为固定金额，如果高等级设置比例低等级设置固定金额，有可能会造成部分经销商无提成)</span>
|
||
<span class="help-block-detail">商品启用经销商独立提成：如果商品经销商独立提成设置的是比例，那么平级奖计算金额则按照商品实际支付金额计算； 如果商品经销商独立提成设置的是固定金额，那么平级奖计算金额则按照固定金额计算</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form-item>
|
||
<el-form-item label="分月返佣">
|
||
<el-switch v-model="is_stages" :active-value="1" :inactive-value="0"></el-switch>
|
||
<span>启用分月返佣</span>
|
||
<div class="help-block">启用后，独立规则将失效；返佣规则将按照分月返佣规则返佣</div>
|
||
</el-form-item>
|
||
<el-form-item v-show="is_stages">
|
||
<el-row :gutter="20" class="gutter">
|
||
<el-col :span="6">
|
||
<div class="grid-content bg-purple">经销商等级</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="grid-content bg-purple">佣金类型</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="grid-content bg-purple">分多少月</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div v-for="(level, index) in levelList" :key="level.id">
|
||
<el-row :gutter="20" class="gutter">
|
||
<el-col :span="6">
|
||
<div class="grid-content bg-purple">{{level.level_name}}</div>
|
||
</el-col>
|
||
<el-col :span="12" class="flex-col">
|
||
<el-radio v-model="level.stages_type" :label="0">百分比</el-radio>
|
||
<el-radio v-model="level.stages_type" :label="1">固定金额</el-radio>
|
||
</el-col>
|
||
<el-col :span="6" class="flex-col">
|
||
<el-input v-model="level.stages_num" @input="changeMonth(index)" maxlength="10" size="small " type="number">
|
||
<template slot="append">期</template>
|
||
</el-input>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" class="gutter">
|
||
<el-input v-model.number="level.immediately"
|
||
maxlength="10"
|
||
size="small"
|
||
type="number"
|
||
style="width: 230px;float: left;margin-right: 10px;margin-bottom: 10px;"
|
||
>
|
||
<template slot="prepend">立即返佣</template>
|
||
<template slot="append">{{ level.stages_type == 1 ? '元' : '%'}}</template>
|
||
</el-input>
|
||
<el-input
|
||
v-for="(monthInfo,index) in level.stages_month_list"
|
||
v-model.number="level.stages_month_list[index]"
|
||
maxlength="10"
|
||
size="small"
|
||
type="number"
|
||
style="width: 230px;float: left;margin-right: 10px;margin-bottom: 10px;"
|
||
>
|
||
<template slot="prepend">第 {{ index }} 月返佣</template>
|
||
<template slot="append">{{ level.stages_type == 1 ? '元' : '%'}}</template>
|
||
</el-input>
|
||
</el-row>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="平级奖独立规则">
|
||
<el-switch v-model="has_peers" :active-value="1" :inactive-value="0"></el-switch>
|
||
<span>启用独立提成比例</span>
|
||
<div class="help-block">比例为空或等于0则则无平级奖</div>
|
||
</el-form-item>
|
||
<el-form-item v-show="has_peers">
|
||
<el-row :gutter="20" class="gutter">
|
||
<el-col :span="6">
|
||
<div class="grid-content bg-purple">经销商等级</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="grid-content bg-purple">平级奖</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" class="gutter" v-for="(level, index) in levelList" :key="level.id">
|
||
<el-col :span="6">
|
||
<div class="grid-content bg-purple">{{level.level_name}}</div>
|
||
</el-col>
|
||
<el-col :span="12" class="flex-col">
|
||
<el-col :span="14">
|
||
<el-input placeholder="请输入层级" v-model="level.hierarchy" maxlength="10" size="small ">
|
||
<template slot="prepend">层级</template>
|
||
<template slot="append">层</template>
|
||
</el-input>
|
||
</el-col>
|
||
<el-col :span="10">
|
||
<el-input placeholder="请输入百分比" v-model="level.ratio" maxlength="10" size="small" oninput="if(value<0)value=''" type="number">
|
||
<template slot="append">%</template>
|
||
</el-input>
|
||
</el-col>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form-item>
|
||
<el-divider></el-divider>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
`,
|
||
style: `
|
||
.help-block{
|
||
font-size:12px;
|
||
}
|
||
.help-block-detail{
|
||
white-space:pre-wrap;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.location{
|
||
display:flex;
|
||
justify-content:flex-end;
|
||
}
|
||
.gutter{
|
||
text-align:center;
|
||
}
|
||
.flex-col{
|
||
display:flex;
|
||
margin-top:5px;
|
||
}
|
||
.el-input-group__append, .el-input-group__prepend {
|
||
padding: 0 10px;
|
||
}
|
||
`,
|
||
props: {
|
||
form: {
|
||
type: Object,
|
||
default() {
|
||
return {}
|
||
}
|
||
}
|
||
},
|
||
data(){
|
||
return {
|
||
is_dividend: 1,
|
||
is_restrict: 0,
|
||
is_hierarchy: 0,
|
||
has_dividend: 0,
|
||
has_peers: 0,
|
||
teamSet: {},
|
||
levelList: [],
|
||
is_stages: 0,
|
||
}
|
||
},
|
||
mounted(){
|
||
if (this.form.item && !Array.isArray(this.form.item)) {
|
||
this.is_dividend = this.form.item.is_dividend;
|
||
this.is_restrict = this.form.item.is_restrict;
|
||
this.is_hierarchy = this.form.item.is_hierarchy;
|
||
this.has_dividend = this.form.item.has_dividend;
|
||
this.has_peers = this.form.item.has_peers;
|
||
|
||
this.is_stages = this.form.item.is_stages
|
||
}
|
||
this.teamSet = JSON.parse(JSON.stringify(this.form.teamSet !== null ? this.form.teamSet : {}));
|
||
this.levelList = JSON.parse(JSON.stringify(this.form.dividendLevel));
|
||
},
|
||
|
||
methods: {
|
||
pick (obj, arr) {
|
||
arr.reduce((iter, val) => (val in obj && (iter[val] = obj[val]), iter), {});
|
||
},
|
||
filterList (list=[]) {
|
||
let ratesList = {};
|
||
let pricesList = {};
|
||
let extraList = {};
|
||
let gradeList = {};
|
||
let stagesTypeList = {};
|
||
let stagesNumList = {};
|
||
let stagesMonthList = {};
|
||
let immediatelyList = {};
|
||
list.forEach((item, index) => {
|
||
let key = 'level_' + item.id;
|
||
let {has_dividend_rates, has_dividend_prices, has_dividend_extra, hierarchy, ratio, stages_type,stages_num, stages_month_list, immediately} = item;
|
||
// 独立规则
|
||
if (this.has_dividend) {
|
||
ratesList[key] = has_dividend_rates;
|
||
pricesList[key] = has_dividend_prices;
|
||
}
|
||
// 额外奖励
|
||
if (this.has_dividend && this.teamSet.is_extra_award == 1) {
|
||
extraList[key] = has_dividend_extra;
|
||
}
|
||
// 分期佣金
|
||
if(this.is_stages){
|
||
stagesTypeList[key] = stages_type;
|
||
stagesNumList[key] = stages_num;
|
||
stagesMonthList[key] = stages_month_list;
|
||
immediatelyList[key] = immediately;
|
||
}
|
||
|
||
|
||
// 平级奖
|
||
if (this.has_peers) {
|
||
gradeList[item.id] = {
|
||
hierarchy,
|
||
ratio
|
||
}
|
||
}
|
||
});
|
||
return {ratesList, pricesList, extraList, gradeList, stagesTypeList, stagesNumList, stagesMonthList, immediatelyList }
|
||
},
|
||
validate () {
|
||
let aggregate = this.filterList(this.levelList);
|
||
return {
|
||
has_peers: this.has_peers,
|
||
is_dividend: this.is_dividend,
|
||
is_restrict: this.is_restrict,
|
||
is_hierarchy: this.is_hierarchy,
|
||
has_dividend: this.has_dividend,
|
||
// dividendLevel: this.filterList(this.levelList)
|
||
has_dividend_rates: aggregate.ratesList,
|
||
has_dividend_prices: aggregate.pricesList,
|
||
has_dividend_extra: aggregate.extraList,
|
||
has_hierarchys: aggregate.gradeList,
|
||
|
||
is_stages: this.is_stages,
|
||
stages_type: aggregate.stagesTypeList,
|
||
stages_num: aggregate.stagesNumList,
|
||
stages_month_list: aggregate.stagesMonthList,
|
||
immediately: aggregate.immediatelyList
|
||
}
|
||
},
|
||
changeMonth(index){
|
||
let currentLevel = Object.assign({}, this.levelList[index]);
|
||
let stagesMonthList = currentLevel.stages_month_list || {};
|
||
let stages_num = currentLevel.stages_num || 0;
|
||
let newStagesMonthList = {};
|
||
for (stages_num;stages_num>0;stages_num--){
|
||
newStagesMonthList[stages_num] = stagesMonthList[stages_num] || 0;
|
||
}
|
||
|
||
currentLevel.stages_month_list = newStagesMonthList;
|
||
|
||
this.$set(this.levelList, index,currentLevel);
|
||
this.$forceUpdate();
|
||
}
|
||
},
|
||
|
||
}) |