index.vue

<template>
  <div class="app-container">
    <el-form  :disabled="$route.params.dictId != 0" 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="8">
              <el-form-item :label="$t('客户名称')" prop="customerId">
              <div style="display: flex">
                <el-input :disabled="true"  :placeholder="$t('请输入选择客户')" v-model="customerName"></el-input>
                <img v-if="$route.params.dictId == 0" style="width: 40px;height: 40px;margin-left: 40px;" src="@/assets/images/phonebook.png" class="phonebook" @click="customerNameShow= true" />
              </div>
<!--                <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-row>
          <el-row>
            <el-col :span="5">
              <el-form-item :label="$t('运输方式')" prop="transportId">
                <div>
                  <custom-selectors-dictionary :all-show="true" 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="$t('始发地')" prop="departureId">
                <div>
                  <custom-selectors-dictionary :all-show="true" label-key="titleZh" value-key="id" v-model="form.departureId"
                                               :options="exportCityList"></custom-selectors-dictionary>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item :label="$t('目的地')" prop="objectiveId">
                <div>
                  <custom-selectors-dictionary :all-show="true" 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="$t('报关方式')" prop="customsType">
                <div>
                  <custom-selectors-dictionary :all-show="true" 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="$t('备案')" prop="approval">
                <div>
                  <custom-selectors-dictionary :all-show="true" 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="$t('佣金类型(明佣、暗佣)')">
              <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="$t('返佣类型')" 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">{{$t('佣金')}}</div>
              <div class="content">
                <div>
                  <el-input v-model="mingServantFrom[0].refund"></el-input>
                </div>
                <div>
                  <el-select v-model="mingServantFrom[0].refundCurrency">
                    <el-option v-for="item in currencyList" :key="item.id" :label="item.titleZh" :value="item.id" />
                  </el-select>
<!--                  <custom-selectors-dictionary v-model="mingServantFrom[0].refundCurrency"
                                               :options="currencyList"></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" :disabled="$route.params.dictId != 0">
              <el-form-item :label="$t('商品类型')" v-for="(item,index) in darkServantAndProductForm" :key="index">
                <div class="shanping-type">
                  <div class="tool">
                    <custom-selectors-dictionary :all-show="true" v-model="item.productType" :options="productAttrList" label-key="titleZh"
                                                 value-key="id"></custom-selectors-dictionary>
                  </div>
                  <div class="box">
                    <div class="label">
                      {{$t('商品特性')}}
                    </div>
                    <div class="custom">
                      <custom-selectors-dictionary :all-show="true" v-model="item.productAttr" label-key="attrName" value-key="id"
                                                   :options="commodityType"></custom-selectors-dictionary>
                    </div>
                  </div>
                  <div class="box">
                    <div class="label">
                      {{$t('佣金')}}
                    </div>
                    <div class="custom">
                      <el-input v-model="item.darkCommission"></el-input>
                    </div>
                    <div class="custom">
                      <el-select v-model="item.darkCurrency">
                        <el-option v-for="item in currencyList" :key="item.id" :label="item.titleZh" :value="item.id" />
                      </el-select>
<!--                      <custom-selectors-dictionary v-model="item.darkCurrency"
                                                   :options="currencyList"></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">{{$t('添加')}}</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">
                 {{$t(' 佣金:')}}
                </div>
                <div class="content">
                  <div class="item label">{{$t('满')}}</div>
                  <div class="item">
                    <el-input v-model="item.amount"></el-input>
                  </div>
                  <div class="item">
                    <el-select v-model="item.amountCurrency">
                      <el-option v-for="item in currencyList" :key="item.id" :label="item.titleZh" :value="item.id" />
                    </el-select>
<!--                    <custom-selectors-dictionary v-model="item.amountCurrency"
                                                 :options="currencyList"></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">{{$t('返')}}</div>
                  <div class="item">
                    <el-input v-model="item.refund"></el-input>
                  </div>
                  <div class="item">
                    <el-select v-model="item.refundCurrency">
                      <el-option v-for="item in currencyList" :key="item.id" :label="item.titleZh" :value="item.id" />
                    </el-select>
<!--                    <custom-selectors-dictionary v-model="item.refundCurrency"
                                                 :options="currencyList"></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">{{$t('添加')}}</el-button>
              </div>
            </div>
            <div class="mingServantAndDarkServant" v-if="form.type == 3">
              <div class="box">
                <div class="label">{{$t('暗佣佣金')}}：</div>
                <div class="content">
                  <div class="item">
                    <el-input v-model="mingServantAnddarkServant[0].refund"></el-input>
                  </div>
                  <div class="item">
                    <el-select v-model="mingServantAnddarkServant[0].refundCurrency">
                      <el-option v-for="item in currencyList" :key="item.id" :label="item.titleZh" :value="item.id" />
                    </el-select>
<!--                    <custom-selectors-dictionary v-model="mingServantAnddarkServant[0].refundCurrency"
                                                 :options="currencyList"></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">{{$t('成本价 = 原价-暗佣佣金')}}</span>
              </div>
              <div class="box">
                <div class="label">{{$t('销售价上调')}}：</div>
                <div class="content">
                  <div class="item">
                    <el-input v-model="mingServantAnddarkServant[0].darkAdjustCommission"></el-input>
                  </div>
                  <div class="item">
                    <el-select v-model="mingServantAnddarkServant[0].darkAdjustCurrency">
                      <el-option v-for="item in currencyList" :key="item.id" :label="item.titleZh" :value="item.id" />
                    </el-select>
<!--                    <custom-selectors-dictionary v-model="mingServantAnddarkServant[0].darkAdjustCurrency"
                                                 :options="currencyList"></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">{{$t(' 实际佣金返点 = 销售价-成本价')}}</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" style="margin-top: 20px" v-if="$route.params.dictId == 0">
            <el-button style="width:200px;margin: 0 40px" type="primary" @click="submitForm">{{$t('确定')}}</el-button>
            <el-button  style="width:200px" @click="cancel">{{$t('取消')}}</el-button>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <el-row>
      <el-col :span="12" style="margin-top: 20px" v-if="$route.params.dictId != 0">
        <el-button  style="width:200px" type="primary" @click="cancel">{{$t('取消')}}</el-button>
      </el-col>
    </el-row>
    <choose-contact-dialog v-if="customerNameShow"  @choose="onContactChoose"   @close="customerNameShow = false" />
  </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";
import ChooseContactDialog from '@/components/ChooseContactDialog'
import {getProductTypeList} from "@/api/ecw/productType";
import { getCurrencyPage } from "@/api/ecw/currency";

export default {
  name: "CustomerCommissionInfo",
  components: {
    customSelectorsDictionary,
    RoutersSelector,
    CustomersSelector,
    ChooseContactDialog
  },
  props:{
    id:[Number,String]//佣金编号id
  },
  data() {
    return {
      customerName:undefined,
      customerNameShow:false,
      value: '',
      isSubmit:false,
      getDictDatas,
      DICT_TYPE,
      commodityType: [],
      tradeCityList: [],
      // 表单参数
      form: {
        approval: -1,//	产品备案
        customerCommissionInfoBaseVOList: [],//	佣金详情
        customerId: undefined,//客户id
        customsType: -1,//报关类别：我司全代：1，自单代报：2，混合报关：3
        darkReturnType:undefined,//	暗佣类型 1产品2达标
        departureId: -1,//	始发地id
        objectiveId: -1 ,//目的地id
        transportId:-1,//运输方式
        type: undefined,//	佣金类型
      },
      //明佣
      mingServantFrom: [
        {
          refund: '',
          refundCurrency:null,
          refundUnit:undefined,
        }
      ],
      //暗佣金+产品
      darkServantAndProductForm: [
        {
          productType:-1,//商品类型
          productAttr:-1,//暗佣 产品属性
          darkCommission: '',//暗佣 佣金
          darkCurrency: null,//	暗佣 货币
          darkUnit:undefined,//	暗佣 单位
        }
      ],
      //暗佣+达标返佣
      darkServantAndRebateForm: [
        {
          amount: '',//	暗佣-满减金额
          amountCurrency:null,//	暗佣-满减金额对应货币
          amountUnit:undefined,//	暗佣-满减金额对应单位,
          refund: '',//暗佣-满之后返还金额
          refundCurrency:null,//暗佣-满之后返还金额的货币
          refundUnit:undefined,//暗佣-满之后返还金额的单位
        }
      ],
      //暗佣+明金
      mingServantAnddarkServant: [
        {
          refund: '',//	暗佣+明佣 上调金额
          refundCurrency: null,//	暗佣+明佣 上调对应的货币
          refundUnit: undefined,//暗佣+明佣 上调对应的单位
          darkAdjustCommission: '',//暗佣+明佣 上调金额
          darkAdjustCurrency: null,//暗佣+明佣 上调对应的货币
          darkAdjustUnit:undefined,//暗佣+明佣 上调对应的单位
        }
      ],
      customerForm: {
        defaultContactName: undefined,
        defaultContactPhone: undefined,
        name: undefined,
        number: undefined,
      },
      customeList: [],
      commodity: [],
      // 表单校验
      rules: {
        customerId: [{required: true, message: this.$t('客户名称不能为空'), trigger: "blur"}],
      },
      customerShow: true,
      weightList:[],
      productAttrList:[],
      params: {
        page: 1,
        rows: 20,
      },
      currencyList:[]
    };
  },
  computed:{
    importCityList(){
      return this.tradeCityList.filter(item => item.type == 1)
    },
    exportCityList(){
      return this.tradeCityList.filter(item => item.type == 2)
    },
  },
  created() {
    this.form.darkReturnType = parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_DARK_TYPE)[0].value);
    this.form.type = parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_TYPE)[1].value);
    getProductTypeList().then(response => {
      // console.log(response.data,'response.data')
      this.productAttrList = response.data
    })
    getCurrencyPage(this.params).then(res => {
      this.currencyList = res.data.list
      var id = this.currencyList[0].id
      this.mingServantFrom[0].refundCurrency = id
      this.darkServantAndProductForm[0].darkCurrency = id
      this.darkServantAndRebateForm[0].amountCurrency = id
      this.darkServantAndRebateForm[0].darkAdjustCurrency = id

      this.mingServantAnddarkServant[0].refundCurrency = id
      this.mingServantAnddarkServant[0].darkAdjustCurrency = id
      //重量单位
      getUnitList().then(r =>{
        if(r.code === 0){
          this.weightList = r.data
          this.$set(this.mingServantFrom, 0, {
            refund: '',
            refundCurrency:parseInt(this.currencyList[0].id),
            refundUnit: parseInt(r.data[0].id)})
          this.$set(this.darkServantAndProductForm, 0,
            {
              productType: -1,//商品类型
              productAttr: -1,//暗佣 产品属性
              darkCommission: '',//暗佣 佣金
              darkCurrency: parseInt(this.currencyList[0].id),//	暗佣 货币
              darkUnit: parseInt(this.weightList[0].id),//	暗佣 单位
            })
          this.$set(this.darkServantAndRebateForm, 0,
            {
              amount: '',//	暗佣-满减金额
              amountCurrency:parseInt(this.currencyList[0].id),//	暗佣-满减金额对应货币
              amountUnit:parseInt (this.weightList[0].id),//	暗佣-满减金额对应单位,
              refund: '',//暗佣-满之后返还金额
              refundCurrency:parseInt(this.currencyList[0].id),//暗佣-满之后返还金额的货币
              refundUnit:parseInt(this.weightList[0].id),//暗佣-满之后返还金额的单位
            })
          this.$set(this.mingServantAnddarkServant, 0,
            {
              refund: '',//	暗佣+明佣 上调金额
              refundCurrency: parseInt(this.currencyList[0].id),//	暗佣+明佣 上调对应的货币
              refundUnit: parseInt(this.weightList[0].id),//暗佣+明佣 上调对应的单位
              darkAdjustCommission: '',//暗佣+明佣 上调金额
              darkAdjustCurrency: parseInt(this.currencyList[0].id),//暗佣+明佣 上调对应的货币
              darkAdjustUnit:parseInt(this.weightList[0].id),//暗佣+明佣 上调对应的单位
            })
          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.customerName = p.customerName
              }
              getCustomerCommission(this.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
                }
              })
            })
          }
        }
      })
    })

    this.getCustomeList();
    this.getItemType();
    this.productAttrFn();

    getTradeCityList().then(res => {
      this.tradeCityList = res.data
    })
  },
  methods: {
    // /** 查询列表客户*/
    getCustomeList() {
      customerDropDownList(this.customerForm).then(res => {
        if (res.code === 0) {
          this.customeList = res.data
        }
      })
    },
    remoteMethod(val) {
      this.customerForm.name = val;
    },
    // changefn(val){
    //   this.form.customerId = val;
    // },
    /** 取消按钮 */
    cancel() {
      this.$tab.closeOpenPage({path:'/customer/customerCommission'});
    },
    /** 表单重置 */
    reset() {
      this.form = {
        approval: undefined,
        customerCommissionInfoBaseVOList: [],
        customerId: undefined,//客户id
        customsType: '',//报关类别：我司全代：1，自单代报：2，混合报关：3
        darkReturnType: this.getDictDatas(this.DICT_TYPE.COMMISSION_DARK_TYPE)[0].value,//	暗佣类型 1产品2达标
        departureId: '',//	始发地id
        objectiveId: '',//	运输方式
        type: this.getDictDatas(this.DICT_TYPE.COMMISSION_TYPE)[1].value,//	佣金类型
      };
      this.resetForm("form");
    },
    //添加多条
    addToFn(val){
      if(val === 1){
         this.darkServantAndProductForm.push({
           productType:-1,//商品类型
           productAttr:-1,//暗佣 产品属性
           darkCommission: '',//暗佣 佣金
           darkCurrency: parseInt(this.currencyList[0].id),//	暗佣 货币
           darkUnit:this.darkServantAndProductForm[0].darkUnit,//	暗佣 单位
         })
      }else {
        this.darkServantAndRebateForm.push( {
          amount: '',//	暗佣-满减金额
          amountCurrency:parseInt(this.currencyList[0].id),//	暗佣-满减金额对应货币
          amountUnit: parseInt(this.weightList[0].id),//	暗佣-满减金额对应单位,
          refund: '',//暗佣-满之后返还金额
          refundCurrency: parseInt(this.currencyList[0].id),//暗佣-满之后返还金额的货币
          refundUnit: this.darkServantAndRebateForm[0].refundUnit,//暗佣-满之后返还金额的单位
        })
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs.form.validate ((valid)=>{
        this.isSubmit = true;
        if(!valid)return
        if (this.form.type == 1) {
           if(Number(this.mingServantFrom[0].refund) <= 0 || isNaN(Number(this.mingServantFrom[0].refund))) return this.$message.warning('请输入大于0的金额')
          this.form.customerCommissionInfoBaseVOList = this.mingServantFrom
        } else if (this.form.type == 2) {
          if (this.form.darkReturnType == 1) {
            if(this.darkServantAndProductForm.some(i => i.darkCommission <= 0 || isNaN(i.darkCommission))) return this.$message.warning('请输入大于0的金额')
            this.form.customerCommissionInfoBaseVOList = this.darkServantAndProductForm
          } else {
            if(this.darkServantAndRebateForm.some(i => i.amount <= 0 ||isNaN(Number(i.amount)) || i.refund <=0 ||isNaN(Number(i.refund)))) return this.$message.warning('请输入大于0的金额')
            this.form.customerCommissionInfoBaseVOList = this.darkServantAndRebateForm
          }
        } else if (this.form.type == 3) {
          if(this.mingServantAnddarkServant[0].darkAdjustCommission <= 0 || isNaN(Number(this.mingServantAnddarkServant[0].darkAdjustCommission)) || this.mingServantAnddarkServant[0].refund <= 0 || isNaN(Number(this.mingServantAnddarkServant[0].refund))) return this.$message.warning('请输入大于0的金额')
          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.success(this.$t('添加成功！'));
              this.$tab.closeOpenPage({path:'/customer/customerCommission'});
            }
          })
        }else {
          let p = {
            id :this.id,
            customerCommissionInfoBaseVOList:this.form.customerCommissionInfoBaseVOList
          }
          p.customerCommissionInfoBaseVOList.forEach(item => {item.commissionId = this.$route.params.dictId})
          updateCustomerCommissionInfo(p).then(r=>{
            if(r.code == 0){
              this.$tab.closeOpenPage({path:'/customer/customerCommission'});
              this.$message.success(this.$t('修改成功！'));
            }
          })
        }

      })
    },
    // 商品类型
    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 = 0})
          }
        }
      })
    },
    //商品属性
    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 = -1})
        }
      })
    },
    onContactChoose(val){
      this.customerNameShow = false;
      this.customerName = val.customerName;
      this.form.customerId = val.customerId;

    }
  },
  watch:{
    form:{
      handler(val){
      if(this.isSubmit){
        this.$refs.form.validate()
      }
      },
      deep:true,
    },
    'form.transportId':function (val){
            // console.log('1234567',val,'val');
            if(this.weightList.length === 0 || !val) 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>