<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="$t('客户名称')" prop="customerId">
<div style="display: flex">
<el-input readonly="readonly" :placeholder="$t('请输入选择客户')" v-model="customerName"></el-input>
<img 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>
<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="$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">
<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">{{$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">
<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">{{$t('返')}}</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">{{$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">
<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">{{$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">
<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">{{$t(' 实际佣金返点 = 销售价-成本价')}}</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">{{$t('确定')}}</el-button>
<el-button style="width:200px" @click="cancel">{{$t('取消')}}</el-button>
</el-col>
</el-row>
</el-card>
</el-form>
<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";
export default {
name: "CustomerCommissionInfo",
components: {
customSelectorsDictionary,
RoutersSelector,
CustomersSelector,
ChooseContactDialog
},
data() {
return {
customerName:undefined,
customerNameShow:false,
value: '',
isSubmit:false,
getDictDatas,
DICT_TYPE,
commodityType: [],
tradeCityList: [],
// 表单参数
form: {
approval: 0,// 产品备案
customerCommissionInfoBaseVOList: [],// 佣金详情
customerId: undefined,//客户id
customsType: 0,//报关类别：我司全代：1，自单代报：2，混合报关：3
darkReturnType: parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_DARK_TYPE)[0].value),// 暗佣类型 1产品2达标
departureId: 0,// 始发地id
objectiveId: 0 ,//目的地id
transportId:0,//运输方式
type: parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_TYPE)[1].value),// 佣金类型
},
//明佣
mingServantFrom: [
{
refund: '',
refundCurrency:parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),
refundUnit:undefined,
}
],
//暗佣金+产品
darkServantAndProductForm: [
{
productType:0,//商品类型
productAttr: 0,//暗佣 产品属性
darkCommission: '',//暗佣 佣金
darkCurrency: parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),// 暗佣 货币
darkUnit:undefined,// 暗佣 单位
}
],
//暗佣+达标返佣
darkServantAndRebateForm: [
{
amount: '',// 暗佣-满减金额
amountCurrency:parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),// 暗佣-满减金额对应货币
amountUnit:undefined,// 暗佣-满减金额对应单位,
refund: '',//暗佣-满之后返还金额
refundCurrency:parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),//暗佣-满之后返还金额的货币
refundUnit:undefined,//暗佣-满之后返还金额的单位
}
],
//暗佣+明金
mingServantAnddarkServant: [
{
refund: '',// 暗佣+明佣 上调金额
refundCurrency: parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),// 暗佣+明佣 上调对应的货币
refundUnit: undefined,//暗佣+明佣 上调对应的单位
darkAdjustCommission: '',//暗佣+明佣 上调金额
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: this.$t('客户名称不能为空'), trigger: "blur"}],
},
customerShow: true,
id:undefined,//佣金id
weightList:[],
productAttrList:[]
};
},
computed:{
importCityList(){
return this.tradeCityList.filter(item => item.type == 1)
},
exportCityList(){
return this.tradeCityList.filter(item => item.type == 2)
},
},
created() {
getProductTypeList().then(response => {
console.log(response.data,'response.data')
this.productAttrList = response.data
})
//重量单位
getUnitList().then(r =>{
if(r.code === 0){
this.weightList = r.data
this.$set(this.mingServantFrom,0, {
refund: '',
refundCurrency:parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),
refundUnit: parseInt(this.weightList[0].id),})
this.$set(this.darkServantAndProductForm, 0,
{
productType: 0,//商品类型
productAttr: 0,//暗佣 产品属性
darkCommission: '',//暗佣 佣金
darkCurrency: parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),// 暗佣 货币
darkUnit: parseInt(this.weightList[0].id),// 暗佣 单位
})
this.$set(this.darkServantAndRebateForm, 0,
{
amount: '',// 暗佣-满减金额
amountCurrency:parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),// 暗佣-满减金额对应货币
amountUnit:parseInt (this.weightList[0].id),// 暗佣-满减金额对应单位,
refund: '',//暗佣-满之后返还金额
refundCurrency:parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),//暗佣-满之后返还金额的货币
refundUnit:parseInt(this.weightList[0].id),//暗佣-满之后返还金额的单位
})
this.$set(this.mingServantAnddarkServant, 0,
{
refund: '',// 暗佣+明佣 上调金额
refundCurrency: parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),// 暗佣+明佣 上调对应的货币
refundUnit: parseInt(this.weightList[0].id),//暗佣+明佣 上调对应的单位
darkAdjustCommission: '',//暗佣+明佣 上调金额
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: '',//报关类别：我司全代：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:0,//商品类型
productAttr:0,//暗佣 产品属性
darkCommission: '',//暗佣 佣金
darkCurrency: parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),// 暗佣 货币
darkUnit:this.darkServantAndProductForm[0].darkUnit,// 暗佣 单位
})
}else {
this.darkServantAndRebateForm.push( {
amount: '',// 暗佣-满减金额
amountCurrency:parseInt(this.getDictDatas(this.DICT_TYPE.COMMISSION_CURRENCY_TYPE)[0].value),// 暗佣-满减金额对应货币
amountUnit: parseInt(this.weightList[0].id),// 暗佣-满减金额对应单位,
refund: '',//暗佣-满之后返还金额
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) {
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.$router.go(-1)
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 = 0})
}
})
},
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){
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>