<template>
<div class="app-container">
<el-form class="demo-ruleForm" label-position="left" label-width="110px" :rules="rules" :model="form" ref="form" >
<el-card class="box-card" style="padding: 10px">
<div slot="header" class="clearfix">
<el-row>
<el-col :span="5">
<el-form-item label="客户名称" prop="customerId">
<el-select
v-model="customerForm.name"
filterable
placeholder="请输入关键词"
@change="changefn">
<el-option
v-for="item in customeList"
:key="item.id"
:value="item.id.toString()"
:label="item.name"
>
{{ item.number }}|{{ item.name }}|{{ item.defaultContactPhone }}
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="运输方式" prop="transportId">
<div>
<custom-selectors-dictionary v-model="form.transportId" :options="getDictDatas(DICT_TYPE.ECW_TRANSPORT_TYPE)"></custom-selectors-dictionary>
</div>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="始发地" prop="departureId">
<div>
<custom-selectors-dictionary label-key="titleZh" value-key="id" v-model="form.departureId"
:options="exportCityList"></custom-selectors-dictionary>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="5">
<el-form-item label="目的地" prop="objectiveId">
<div>
<custom-selectors-dictionary label-key="titleZh" value-key="id" v-model="form.objectiveId"
:options="importCityList"></custom-selectors-dictionary>
</div>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="报关方式" prop="customsType">
<div>
<custom-selectors-dictionary v-model="form.customsType"
:options="getDictDatas(DICT_TYPE.SHIPPING_DECLARATION_TYPE)"></custom-selectors-dictionary>
</div>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="备案" prop="approval">
<div>
<custom-selectors-dictionary v-model="form.approval"
:options="getDictDatas(DICT_TYPE.COMMISSION_PRODUCT_APPROVAL)"></custom-selectors-dictionary>
</div>
</el-form-item>
</el-col>
</el-row>
</div>
<el-row>
<el-col :span="24">
<el-form-item label-width="150px" label="佣金类型(明佣、暗佣)">
<el-radio-group v-model="form.type">
<el-radio v-for="(item,index) in getDictDatas(DICT_TYPE.COMMISSION_TYPE)" v-show="item.value != 0" :label="parseInt(item.value)"
:key="index">{{ item.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="返佣类型" v-if="form.type == 2">
<el-radio-group v-model="form.darkReturnType">
<el-radio v-for="(item,index) in getDictDatas(DICT_TYPE.COMMISSION_DARK_TYPE)" :label="parseInt(item.value)"
:key="index">{{ item.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="ming-servant" v-if="form.type == 1">
<div class="label">佣金</div>
<div class="content">
<div>
<el-input v-model="mingServantFrom[0].refund"></el-input>
</div>
<div>
<custom-selectors-dictionary v-model="mingServantFrom[0].refundCurrency"
:options="getDictDatas(DICT_TYPE.COMMISSION_CURRENCY_TYPE)"></custom-selectors-dictionary>
</div>
<div>
<custom-selectors-dictionary v-model="mingServantFrom[0].refundUnit" label-key="titleZh" value-key="id"
:options="weightList"></custom-selectors-dictionary>
</div>
</div>
</div>
<el-form v-if="form.type == 2 && form.darkReturnType == 1">
<el-form-item label="商品类型" v-for="(item,index) in darkServantAndProductForm" :key="index">
<div class="shanping-type">
<div class="tool">
<custom-selectors-dictionary v-model="item.productType" :options="commodity" label-key="titleZh"
value-key="id"></custom-selectors-dictionary>
</div>
<div class="box">
<div class="label">
商品特性
</div>
<div class="custom">
<custom-selectors-dictionary v-model="item.productAttr" label-key="attrName" value-key="id"
:options="commodityType"></custom-selectors-dictionary>
</div>
</div>
<div class="box">
<div class="label">
佣金
</div>
<div class="custom">
<el-input v-model="item.darkCommission"></el-input>
</div>
<div class="custom">
<custom-selectors-dictionary v-model="item.darkCurrency"
:options="getDictDatas(DICT_TYPE.COMMISSION_CURRENCY_TYPE)"></custom-selectors-dictionary>
</div>
<div class="custom">
<custom-selectors-dictionary v-model="item.darkUnit" label-key="titleZh" value-key="id"
:options="weightList"></custom-selectors-dictionary>
</div>
</div>
<div>
<el-button type="primary" @click="addToFn(1)" v-if="darkServantAndProductForm.length - 1 === index">添加</el-button>
</div>
</div>
</el-form-item>
</el-form>
<div class="column" v-if="form.type == 2 && form.darkReturnType == 2">
<div style="margin-bottom: 10px" v-for="(item,index) in darkServantAndRebateForm" :key="index">
<div class="label">
佣金:
</div>
<div class="content">
<div class="item label">满</div>
<div class="item">
<el-input v-model="item.amount"></el-input>
</div>
<div class="item">
<custom-selectors-dictionary v-model="item.amountCurrency"
:options="getDictDatas(DICT_TYPE.COMMISSION_CURRENCY_TYPE)"></custom-selectors-dictionary>
</div>
<div class="item">
<custom-selectors-dictionary v-model="item.amountUnit"
label-key="titleZh" value-key="id" :options="weightList"></custom-selectors-dictionary>
</div>
</div>
<div class="content">
<div class="item label">返</div>
<div class="item">
<el-input v-model="item.refund"></el-input>
</div>
<div class="item">
<custom-selectors-dictionary v-model="item.refundCurrency"
:options="getDictDatas(DICT_TYPE.COMMISSION_CURRENCY_TYPE)"></custom-selectors-dictionary>
</div>
<div class="item">
<custom-selectors-dictionary v-model="item.refundUnit"
label-key="titleZh" value-key="id" :options="weightList"></custom-selectors-dictionary>
</div>
</div>
<el-button type="primary" @click="addToFn(2)" v-show="darkServantAndRebateForm.length -1 === index">添加</el-button>
</div>
</div>
<div class="mingServantAndDarkServant" v-if="form.type == 3">
<div class="box">
<div class="label">暗佣佣金：</div>
<div class="content">
<div class="item">
<el-input v-model="mingServantAnddarkServant[0].refund"></el-input>
</div>
<div class="item">
<custom-selectors-dictionary v-model="mingServantAnddarkServant[0].refundCurrency"
:options="getDictDatas(DICT_TYPE.COMMISSION_CURRENCY_TYPE)"></custom-selectors-dictionary>
</div>
<div class="item">
<custom-selectors-dictionary label-key="titleZh" value-key="id" v-model="mingServantAnddarkServant[0].refundUnit"
:options="weightList"></custom-selectors-dictionary>
</div>
</div>
</div>
<div class="title">
<span class="label">成本价 = 原价-暗佣佣金</span>
</div>
<div class="box">
<div class="label">销售价上调：</div>
<div class="content">
<div class="item">
<el-input v-model="mingServantAnddarkServant[0].darkAdjustCommission"></el-input>
</div>
<div class="item">
<custom-selectors-dictionary v-model="mingServantAnddarkServant[0].darkAdjustCurrency"
:options="getDictDatas(DICT_TYPE.COMMISSION_CURRENCY_TYPE)"></custom-selectors-dictionary>
</div>
<div class="item">
<custom-selectors-dictionary v-model="mingServantAnddarkServant[0].darkAdjustUnit" label-key="titleZh" value-key="id"
:options="weightList"></custom-selectors-dictionary>
</div>
</div>
</div>
<div class="title">
<span class="label"> 实际佣金返点 = 销售价-成本价</span>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12" style="margin-top: 20px">
<el-button style="width:200px;margin: 0 40px" type="primary" @click="submitForm">确定</el-button>
<el-button style="width:200px" @click="cancel">取消</el-button>
</el-col>
</el-row>
</el-card>
</el-form>
</div>
</template>
<script>
import {
itemTypeListApi,
customerDropDownList, commodityList,createCommission,getCustomerCommission,commissionGetByCustomerId,updateCustomerCommissionInfo
} from "@/api/ecw/customerCommissionInfo";
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
import customSelectorsDictionary from "./customSelectorsDictionary"
import {getTradeCityList} from "@/api/ecw/region";
import RoutersSelector from "@/components/RoutersSelector"
import CustomersSelector from "@/components/CustomersSelector";
import {getUnitList} from "@/api/ecw/unit";
export default {
name: "CustomerCommissionInfo",
components: {
customSelectorsDictionary,
RoutersSelector,
CustomersSelector
},
data() {
return {
value: '',
isSubmit:false,
getDictDatas,
DICT_TYPE,
commodityType: [],
tradeCityList: [],
// 表单参数
form: {
approval: undefined,// 产品备案
customerCommissionInfoBaseVOList: [],// 佣金详情
customerId: undefined,//客户id
customsType: undefined,//报关类别：我司全代：1，自单代报：2，混合报关：3
darkReturnType: parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_DARK_TYPE)[0].value),// 暗佣类型 1产品2达标
departureId: undefined,// 始发地id
objectiveId: undefined,//目的地id
transportId:undefined,//运输方式
type: parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_TYPE)[1].value),// 佣金类型
},
//明佣
mingServantFrom: [
{
refund: 0,
refundCurrency:parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),
refundUnit:undefined,
}
],
//暗佣金+产品
darkServantAndProductForm: [
{
productType:undefined,//商品类型
productAttr: undefined,//暗佣 产品属性
darkCommission: 0,//暗佣 佣金
darkCurrency: parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),// 暗佣 货币
darkUnit:undefined,// 暗佣 单位
}
],
//暗佣+达标返佣
darkServantAndRebateForm: [
{
amount: 0,// 暗佣-满减金额
amountCurrency:parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),// 暗佣-满减金额对应货币
amountUnit:undefined,// 暗佣-满减金额对应单位,
refund: 0,//暗佣-满之后返还金额
refundCurrency:parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),//暗佣-满之后返还金额的货币
refundUnit:undefined,//暗佣-满之后返还金额的单位
}
],
//暗佣+明金
mingServantAnddarkServant: [
{
refund: 0,// 暗佣+明佣 上调金额
refundCurrency: parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),// 暗佣+明佣 上调对应的货币
refundUnit: undefined,//暗佣+明佣 上调对应的单位
darkAdjustCommission: 0,//暗佣+明佣 上调金额
darkAdjustCurrency: parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),//暗佣+明佣 上调对应的货币
darkAdjustUnit:undefined,//暗佣+明佣 上调对应的单位
}
],
customerForm: {
defaultContactName: undefined,
defaultContactPhone: undefined,
name: undefined,
number: undefined,
},
customeList: [],
commodity: [],
// 表单校验
rules: {
customerId: [{required: true, message: "客户名称不能为空", trigger: "blur"}],
},
customerShow: true,
id:undefined,//佣金id
weightList:[]
};
},
computed:{
importCityList(){
return this.tradeCityList.filter(item => item.type == 1)
},
exportCityList(){
return this.tradeCityList.filter(item => item.type == 2)
},
},
created() {
//重量单位
getUnitList().then(r =>{
if(r.code === 0){
this.weightList = r.data
this.$set(this.mingServantFrom,0, {
refund: 0,
refundCurrency:parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),
refundUnit: parseInt(this.weightList[0].id),})
this.$set(this.darkServantAndProductForm, 0,
{
productType: undefined,//商品类型
productAttr: undefined,//暗佣 产品属性
darkCommission: 0,//暗佣 佣金
darkCurrency: parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),// 暗佣 货币
darkUnit: parseInt(this.weightList[0].id),// 暗佣 单位
})
this.$set(this.darkServantAndRebateForm, 0,
{
amount: 0,// 暗佣-满减金额
amountCurrency:parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),// 暗佣-满减金额对应货币
amountUnit:parseInt (this.weightList[0].id),// 暗佣-满减金额对应单位,
refund: 0,//暗佣-满之后返还金额
refundCurrency:parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),//暗佣-满之后返还金额的货币
refundUnit:parseInt(this.weightList[0].id),//暗佣-满之后返还金额的单位
})
this.$set(this.mingServantAnddarkServant, 0,
{
refund: 0,// 暗佣+明佣 上调金额
refundCurrency: parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),// 暗佣+明佣 上调对应的货币
refundUnit: parseInt(this.weightList[0].id),//暗佣+明佣 上调对应的单位
darkAdjustCommission: 0,//暗佣+明佣 上调金额
darkAdjustCurrency: parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),//暗佣+明佣 上调对应的货币
darkAdjustUnit:parseInt(this.weightList[0].id),//暗佣+明佣 上调对应的单位
})
}
})
this.getCustomeList();
if(this.$route.params.dictId != 0){
commissionGetByCustomerId(this.$route.params.dictId).then(r => {
if(r.code === 0){
let f = this.form;
let p = r.data;
f.type = p.type;
f.approval = p.approval;
f.customerId = p.customerId;
f.customsType = p.customsType;
f.darkReturnType = p.darkReturnType;
f.departureId = p.departureId;
f.objectiveId = p.objectiveId;
f.transportId = p.transportId;
this.form = f;
this.customerForm.name = p.customerName;
this.id = r.data.id;
}
getCustomerCommission(r.data.id).then(r =>{
console.log(r,'客户佣金详情');
if(r.code != 0 || r.data.length == 0) return
if(this.form.type == 1){
//明佣
this.mingServantFrom = r.data
}else if(this.form.type == 2){
console.log('暗—-产')
if(this.form.darkReturnType == 1){
// 暗佣+产品
console.log('1234')
this.darkServantAndProductForm = r.data
}else {
// 暗佣+达标返佣
this.darkServantAndRebateForm = r.data
}
}else {
// 名佣+返佣
this.mingServantAnddarkServant =r.data
}
})
})
}else {
}
this.getItemType();
this.productAttrFn();
getTradeCityList().then(res => {
this.tradeCityList = res.data
})
},
methods: {
// /** 查询列表客户*/
getCustomeList() {
customerDropDownList(this.customerForm).then(res => {
console.log(res);
if (res.code === 0) {
this.customeList = res.data
}
})
},
remoteMethod(val) {
this.customerForm.name = val;
},
changefn(val){
console.log(val,'val')
this.form.customerId = val;
},
/** 取消按钮 */
cancel() {
this.$router.go(-1);
},
/** 表单重置 */
reset() {
this.form = {
approval: undefined,
customerCommissionInfoBaseVOList: [],
customerId: undefined,//客户id
customsType: undefined,//报关类别：我司全代：1，自单代报：2，混合报关：3
darkReturnType: this.getDictDatas(this.DICT_TYPE.COMMISSION_DARK_TYPE)[0].value,// 暗佣类型 1产品2达标
departureId: undefined,// 始发地id
objectiveId: undefined,// 运输方式
type: this.getDictDatas(this.DICT_TYPE.COMMISSION_TYPE)[1].value,// 佣金类型
};
this.resetForm("form");
},
//添加多条
addToFn(val){
if(val === 1){
this.darkServantAndProductForm.push({
productType:this.commodity[0].id,//商品类型
productAttr: this.commodityType[0].id,//暗佣 产品属性
darkCommission: 0,//暗佣 佣金
darkCurrency: parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),// 暗佣 货币
darkUnit:this.darkServantAndProductForm[0].darkUnit,// 暗佣 单位
})
}else {
this.darkServantAndRebateForm.push( {
amount: 0,// 暗佣-满减金额
amountCurrency:parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),// 暗佣-满减金额对应货币
amountUnit: parseInt(this.weightList[0].id),// 暗佣-满减金额对应单位,
refund: 0,//暗佣-满之后返还金额
refundCurrency: parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),//暗佣-满之后返还金额的货币
refundUnit: this.darkServantAndRebateForm[0].refundUnit,//暗佣-满之后返还金额的单位
})
}
},
/** 提交按钮 */
submitForm() {
this.$refs.form.validate ((valid)=>{
this.isSubmit = true;
if(!valid)return
if (this.form.type == 1) {
this.form.customerCommissionInfoBaseVOList = this.mingServantFrom
} else if (this.form.type == 2) {
if (this.form.darkReturnType == 1) {
this.form.customerCommissionInfoBaseVOList = this.darkServantAndProductForm
} else {
this.form.customerCommissionInfoBaseVOList = this.darkServantAndRebateForm
}
} else if (this.form.type == 3) {
this.form.customerCommissionInfoBaseVOList = this.mingServantAnddarkServant
}
if(this.$route.params.dictId == 0){
createCommission(this.form).then(r =>{
console.log('添加',r)
if(r.code == 0){
this.$message('添加成功！');
this.$router.go(-1)
}
})
}else {
let p = {
id :this.id,
customerCommissionInfoBaseVOList:this.form.customerCommissionInfoBaseVOList
}
p.customerCommissionInfoBaseVOList.forEach(item => {item.commissionId = this.$route.params.dictId})
updateCustomerCommissionInfo(p).then(r=>{
console.log('更新',r)
if(r.code == 0){
this.$router.go(-1)
this.$message('修改成功！');
}
})
}
})
},
// 商品类型
getItemType() {
itemTypeListApi().then(res => {
if (res.code === 0) {
this.commodityType = res.data;
if(this.$route.params.dictId == 0 || (this.form.type == 2 && this.form.darkReturnType != 1)){
this.darkServantAndProductForm.forEach(item =>{item.productAttr = this.commodityType[0].id})
}
}
})
},
//商品属性
productAttrFn(){
commodityList().then(res => {
this.commodity = res.data
if(this.$route.params.dictId == 0 || (this.form.type == 2 && this.form.darkReturnType != 1)){
this.darkServantAndProductForm.forEach(item=>{item.productType =this.commodity[0].id})
}
})
}
},
watch:{
form:{
handler(val){
if(this.isSubmit){
this.$refs.form.validate()
}
},
deep:true,
},
'form.transportId':function (val){
if(!this.weightList) return
if((val == 1 || val == 2)){
let index = this.weightList.findIndex(item => item.id == 7);
this.mingServantFrom.forEach(item =>{
item.refundUnit = parseInt(this.weightList[index].id);
})
this.mingServantAnddarkServant.forEach(item =>{
item.refundUnit =parseInt(this.weightList[index].id);
item.darkAdjustUnit =parseInt(this.weightList[index].id);
})
this.darkServantAndRebateForm.forEach(item =>{
item.refundUnit = parseInt(this.weightList[index].id);
})
this.darkServantAndProductForm.forEach(item =>{
item.darkUnit = parseInt(this.weightList[index].id);
})
}else {
let index = this.weightList.findIndex(item => item.id == 6);
this.mingServantFrom.forEach(item =>{
item.refundUnit =parseInt(this.weightList[index].id);
})
this.mingServantAnddarkServant.forEach(item =>{
item.refundUnit = parseInt( this.weightList[index].id);
item.darkAdjustUnit =parseInt(this.weightList[index].id);
})
this.darkServantAndRebateForm.forEach(item =>{
item.refundUnit =parseInt(this.weightList[index].id);
})
this.darkServantAndProductForm.forEach(item =>{
item.darkUnit = parseInt(this.weightList[index].id);
})
}
}
}
};
</script>
<style lang="scss" scoped>
.mingServantAndDarkServant {
margin-top: 10px;
.box {
display: flex;
align-items: center;
.label {
vertical-align: middle;
font-size: 14px;
color: #606266;
font-weight: 700;
width: 100px;
}
.content {
display: flex;
align-items: center;
.item {
margin-right: 20px;
}
}
}
.title {
margin: 25px 0;
text-align: left;
.label {
vertical-align: middle;
font-size: 16px;
color: #606266;
font-weight: 700;
}
}
}
.ming-servant {
display: flex;
align-items: center;
.label {
width: 50px;
white-space: nowrap;
vertical-align: middle;
font-size: 14px;
color: #606266;
font-weight: 700;
}
.content {
display: flex;
div {
margin-right: 10px;
}
}
}
.shanping-type {
display: flex;
.tool {
width: 150px;
}
.box {
margin-left: 20px;
display: flex;
.label {
width: 80px;
vertical-align: middle;
font-size: 14px;
color: #606266;
font-weight: 700;
text-align: left;
}
.custom {
width: 150px;
margin-right: 10px;
}
}
}
.column {
div {
display: flex;
align-items: center;
.label {
width: 26px;
white-space: nowrap;
vertical-align: middle;
font-size: 14px;
color: #606266;
font-weight: 700;
width: 100px;
}
}
.content {
display: flex;
align-items: center;
margin-right: 10px;
.item {
text-align: right;
width: 130px;
margin: 0 5px;
}
.label {
width: 50px;
}
}
}
</style>