index.vue

<template>
  <div class="app-container">
    <el-form :rules="rules" :model="form" ref="form" :inline="true" >
      <el-row>
        <el-col :span="24">
          <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-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="运输方式" prop="transportId">
            <div style="width: 130px;">
              <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 style="width: 130px;">
              <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-col :span="5">
          <el-form-item label="目的地" prop="objectiveId">
            <div style="width: 130px;">
              <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 style="width: 130px;">
              <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="4">
          <el-form-item label="备案" prop="approval">
            <div style="width: 130px;">
              <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>
      <el-row>
        <el-col :span="24">
          <el-form-item 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-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"}],
        departureId: [{required: true, message: "始发地不能为空", trigger: "blur"}],
        transportId: [{required: true, message: "运输方式不能为空", trigger: "blur"}],
        objectiveId: [{required: true, message: "目的地不能为空", trigger: "blur"}],
        customsType: [{required: true, message: "报关类别不能为空", trigger: "blur"}],
        approval: [{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: 15px 0;

    .label {
      vertical-align: middle;
      font-size: 14px;
      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>