<template>
<el-dialog title="我行收费明细" v-dialogDrag :visible.sync="visiable" center destroy-on-close :append-to-body="true" :before-close="beforeClose" width="70%" v-if="visiable">
<el-form ref="dialogForm" :model="formData" :rules="rules" label-width="120px" class="dialog-wrap">
<c-collapse v-model="activeNames">
<el-collapse-item title="收费明细" name="feeDetail">
<el-row class="card">
<div class="card-content">
<c-col :span="12">
<c-col :span="24">
<el-form-item label="费用描述" prop="feetxtinf">
<c-input v-model="formData.feetxtinf"
customModifykey="feetxtinf"
:markSetData="formData"
@change.native="changeData('feetxtinf')"
:disabled="formData.dscmodflg !== 'X'"
maxlength="45"/>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="费用承担方" prop="rol">
<c-select v-model="formData.rol"
customModifykey="rol"
:markSetData="formData"
@change="changeData('rol')" placeholder="请选择费用承担方">
<el-option v-for="item in roleSet" :key="item.value" :label="item.value + ' - ' + item.label" :value="item.value">
</el-option>
</c-select>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="费用来源">
<c-select v-model="formData.src" disabled :code="srcList"/>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="计费开始日期" prop="dat1">
<c-date-picker
customModifykey="dat1"
:markSetData="formData"
v-model="formData.dat1" type="date" disabled @change="changeData('dat1')" :picker-options="begPickOpt" placeholder="选择日期">
</c-date-picker>
</el-form-item>
</c-col>
<c-col :span="24" v-if="formData.commFeeFlag === 'Y'">
<el-form-item label="宽限期（天）" prop="graceDays">
<c-input-number
:min=0
:max=20
customModifykey="graceDays"
:markSetData="formData"
:disabled="isGraceDaysDisabled"
v-model="formData.graceDays" @change="changeData('graceDays')" />
</el-form-item>
</c-col>
</c-col>
<!-- ==================右边================ -->
<c-col :span="12" style="padding-left: 20px">
<c-col :span="24">
<el-form-item label="费用代码">
<!-- <c-select v-model="formData.feecod" disabled placeholder="请选择费用代码">
<el-option v-for="item in this.feeCodeSet" :key="item.value" :label="item.value + ' ' + item.label" :value="item.value">
</el-option>
</c-select> -->
<c-input v-model="formData.feecod" disabled placeholder="请选择费用代码"/>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="费用处理方式" prop="dsp">
<c-select
customModifykey="dsp"
:markSetData="formData"
v-model="formData.dsp" dbCode="dspcod" uil="CN" @change="changeData('dsp')" placeholder="请选择费用处理方式">
</c-select>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="数量" prop="unt">
<c-input-number
:min=0
customModifykey="unt"
:markSetData="formData"
:disabled="isUntDisabled"
v-model="formData.unt" @change="changeData('unt')" />
</el-form-item>
</c-col>
<c-col :span="24" v-if="dat2Visiable">
<el-form-item label="计费结束日期" prop="dat2">
<c-date-picker
customModifykey="dat2"
:markSetData="formData"
v-model="formData.dat2" type="date" :disabled="formData.wrkfec.pertyp !== 'n'" @change="changeData('dat2')" placeholder="选择日期">
</c-date-picker>
</el-form-item>
</c-col>
<c-col :span="24" v-if="!dat2Visiable">
<el-form-item label="业务效期" prop="dat2dft">
<c-date-picker
v-model="formData.dat2dft" type="date" disabled :picker-options="begPickOpt">
</c-date-picker>
</el-form-item>
</c-col>
</c-col>
</div>
</el-row>
<el-row class="card">
<div class="card-content">
<c-col :span="12">
<c-col :span="24">
<el-form-item label="收费币种">
<c-input v-model="formData.cur" disabled />
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="应收金额">
<c-input-currency v-model="formData.ogiamt" disabled :currency="formData.cur" />
</el-form-item>
</c-col>
</c-col>
<!-- ==================右边================ -->
<c-col :span="12" style="padding-left: 20px">
<c-col :span="24">
<c-col :span="12">
<el-form-item label="优惠比例" prop="dctrat">
<c-col :span="22">
<c-input-currency
customModifykey="dctrat"
:markSetData="formData.dctrat"
:precision="2" v-model="formData.dctrat" @change.native="changeData('dctrat')"></c-input-currency>
</c-col>
<c-col :span="1" style="float: right; text-align: right">
<span>%</span>
</c-col>
</el-form-item>
</c-col>
<c-col :span="12">
<el-form-item label="最终优惠金额">
<c-input-currency v-model="finalAmt" disabled/>
</el-form-item>
</c-col>
</c-col>
<c-col :span="24">
<c-col :span="20">
<el-form-item label="实收金额">
<c-input-currency
customModifykey="amt"
:markSetData="formData"
:disabled="isAmtDisabled"
v-model="formData.amt" :currency="formData.cur" @change="changeData('amt')" />
</el-form-item>
</c-col>
<c-col :span="4">
<el-form-item label-width="0px">
<c-checkbox
style="float: left; margin-left: 15px"
customModifykey="roundFlag"
:markSetData="formData"
v-model="formData.roundFlag"
true-label="Y"
false-label="N"
@change="changeData('roundFlag')"
>取整</c-checkbox>
</el-form-item>
</c-col>
</c-col>
</c-col>
</div>
</el-row>
<el-row class="card" v-if="formData.wrkfec">
<div class="card-content">
<c-col :span="12">
<c-col :span="24">
<el-form-item label="费率类型">
<c-select v-model="formData.wrkfec.calrul" dbCode="CALRUL" uil="CN" disabled placeholder="请选择费率类型">
</c-select>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="百分费率" v-if="formData.wrkfec.calrul==='%'" prop="wrkfec.ratcal">
<c-col :span="22">
<c-input-currency
customModifykey="ratcal"
:markSetData="formData.wrkfec"
:precision=6 v-model="formData.wrkfec.ratcal" @change="editWrkFec( 'ratcal')"></c-input-currency>
</c-col>
<c-col :span="1" style="float: right; text-align: right">
<span v-if="formData.wrkfec.calrul==='%'">%</span>
</c-col>
</el-form-item>
<el-form-item label="千分费率" v-if="formData.wrkfec.calrul==='1' || formData.wrkfec.calrul==='M'" prop="wrkfec.ratcal">
<c-col :span="22">
<c-input-currency
customModifykey="ratcal"
:markSetData="formData.wrkfec"
:precision="6" v-model="formData.wrkfec.ratcal" @change="editWrkFec( 'ratcal')"></c-input-currency>
</c-col>
<c-col :span="2" style="float: right; text-align: right">
<span v-if="formData.wrkfec.calrul==='1'">‰</span>
</c-col>
</el-form-item>
<el-form-item label="万分费率" v-if="formData.wrkfec.calrul==='B'" prop="wrkfec.ratcal">
<c-col :span="22">
<c-input-currency
customModifykey="ratcal"
:markSetData="formData.wrkfec"
:precision=6 v-model="formData.wrkfec.ratcal" @change="editWrkFec( 'ratcal')"></c-input-currency>
</c-col>
<c-col :span="2" style="float: right; text-align: right">
<span v-if="formData.wrkfec.calrul==='B'">‱</span>
</c-col>
</el-form-item>
<el-form-item label="固定金额" v-if="formData.wrkfec.calrul==='0'" prop="wrkfec.untamt">
<c-col :span="10">
<c-input v-model="formData.wrkfec.ratcur" disabled />
</c-col>
<c-col :span="14">
<c-input-currency
customModifykey="untamt"
:markSetData="formData.wrkfec"
v-model="formData.wrkfec.untamt" :currency="formData.wrkfec.ratcur" @change="editWrkFec( 'untamt')" />
</c-col>
</el-form-item>
</c-col>
</c-col>
<c-col :span="12" v-if="formData.wrkfec.calrul !== '0'" style="padding-left: 20px">
<c-col :span="24">
<el-form-item label="计费周期">
<c-select
customModifykey="pertyp"
:markSetData="formData.wrkfec"
:filterKey="['d','q','CALMON','y']"
:disabled="isUserLevel0"
v-model="formData.wrkfec.pertyp" dbCode="PERTYP" uil="CN" placeholder="请选择周期类型" @change="editWrkFec( 'pertyp')">
</c-select>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="计算基准">
<c-select v-model="formData.wrkfec.calcbs" dbCode="calcbs" disabled placeholder="请选择计算基准">
</c-select>
</el-form-item>
</c-col>
</c-col>
</div>
<div class="card-content" v-if="['%','1','M'].includes(formData.wrkfec.calrul) && formData.commFeeFlag === 'N'">
<c-col :span="24">
<c-col :span="12">
<el-form-item label="最小周期">
<c-input-number
:min=0
customModifykey="permin"
:markSetData="formData"
v-model="formData.wrkfec.permin" @change="editWrkFec('permin')" />
</el-form-item>
</c-col>
<c-col :span="12" style="padding-left: 20px;">
<c-col :span="24">
<el-form-item label="From Period">
<c-fullbox>
<c-input-number
style="padding-right: 10px;"
:min=0
customModifykey="perbegtr2"
:markSetData="formData"
v-model="formData.wrkfec.perbegtr2" @change="editWrkFec('perbegtr2')"/>
<template slot="footer">
<c-input-currency
:precision="2"
customModifykey="perrattr2"
:markSetData="formData"
:disabled="formData.wrkfec.perbegtr2 === 0"
v-model="formData.wrkfec.perrattr2" @change="editWrkFec('perrattr2')" />
</template>
</c-fullbox>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="From Period">
<c-fullbox>
<c-input-number
style="padding-right: 10px;"
:min=0
customModifykey="perbegtr3"
:markSetData="formData"
:disabled="formData.wrkfec.perbegtr2 === 0"
v-model="formData.wrkfec.perbegtr3" @change="editWrkFec('perbegtr3')" />
<template slot="footer">
<c-input-currency
:precision="2"
customModifykey="perrattr3"
:markSetData="formData"
:disabled="formData.wrkfec.perbegtr3 === 0"
v-model="formData.wrkfec.perrattr3" @change="editWrkFec('perrattr3')" />
</template>
</c-fullbox>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="From Period">
<c-fullbox>
<c-input-number
style="padding-right: 10px;"
:min=0
customModifykey="perbegtr4"
:markSetData="formData"
:disabled="formData.wrkfec.perbegtr3===0"
v-model="formData.wrkfec.perbegtr4" @change="editWrkFec('perbegtr4')" />
<template slot="footer">
<c-input-currency
:precision="2"
customModifykey="perrattr4"
:markSetData="formData"
:disabled="formData.wrkfec.perbegtr4===0"
v-model="formData.wrkfec.perrattr4" @change="editWrkFec('perrattr4')" />
</template>
</c-fullbox>
</el-form-item>
</c-col>
<c-col :span="24">
<el-form-item label="From Period">
<c-fullbox>
<c-input-number
style="padding-right: 10px;"
:min=0
customModifykey="perbegtr5"
:markSetData="formData"
:disabled="formData.wrkfec.perbegtr4===0"
v-model="formData.wrkfec.perbegtr5" @change="editWrkFec('perbegtr5')" />
<template slot="footer">
<c-input-currency
:precision="2"
customModifykey="perrattr5"
:markSetData="formData"
:disabled="formData.wrkfec.perbegtr5===0"
v-model="formData.wrkfec.perrattr5" @change="editWrkFec('perrattr5')" />
</template>
</c-fullbox>
</el-form-item>
</c-col>
</c-col>
</c-col>
</div>
<div class="card-content" v-if="formData.wrkfec.calrul !== '0'">
<c-col :span="24">
<c-col :span="12">
<el-form-item label="最小收费币种">
<c-select-cur
customModifykey="mincur"
:markSetData="formData.wrkfec"
v-model="formData.wrkfec.mincur" @change="editWrkFec('mincur')" dbCode="CURTXT"/>
</el-form-item>
</c-col>
<c-col :span="12" style="padding-left: 20px">
<el-form-item label="最小收费金额">
<c-input-currency
customModifykey="minamt"
:markSetData="formData.wrkfec"
v-model="formData.wrkfec.minamt" :currency="formData.wrkfec.mincur" @change="editWrkFec( 'minamt')" />
</el-form-item>
</c-col>
</c-col>
<c-col :span="24">
<c-col :span="12">
<el-form-item label="最大收费币种">
<c-select-cur
customModifykey="maxcur"
:markSetData="formData.wrkfec"
v-model="formData.wrkfec.maxcur" @change="editWrkFec('maxcur')" dbCode="CURTXT"/>
</el-form-item>
</c-col>
<c-col :span="12" style="padding-left: 20px">
<el-form-item label="最大收费金额">
<c-input-currency
customModifykey="maxamt"
:markSetData="formData.wrkfec"
v-model="formData.wrkfec.maxamt" :currency="formData.wrkfec.maxcur" @change="editWrkFec('maxamt')" />
</el-form-item>
</c-col>
</c-col>
</div>
</el-row>
</el-collapse-item>
<el-collapse-item title="发生额费用明细" name="cbsGrids2" v-if="formData.commCbsLineGrids">
<el-row class="card">
<c-col :span="24">
<el-table
:data="formData.commCbsLineGrids"
:columns="columns"
>
<el-table-column
v-for="(item, key) in columns"
:key="key"
:label="item.label"
>
<template slot-scope="scope">
<span>{{ ['amt', 'ogiamt', 'feeamt'].includes(item.prop) ? moneyFormat(scope.row[item.prop], scope.row.cur) : scope.row[item.prop] }}</span>
</template>
</el-table-column>
</el-table>
</c-col>
</el-row>
</el-collapse-item>
<el-collapse-item title="费用计算明细" name="feeCalcDetail">
<el-row class="card" style="margin-top: 20px;">
<c-col :span="20">
<el-form-item label-width="0">
<el-input type="textarea" :rows="8" placeholder="请输入内容" v-model="formData.inftxt" disabled>
</el-input>
</el-form-item>
</c-col>
</el-row>
</el-collapse-item>
</c-collapse>
<!-- ==================左边================ -->
</el-form>
<div slot="footer" class="dialog-footer">
<c-button v-if="!isDispaly" type="primary" @click="saveDialog" style="margin-right: 20px;">确 定</c-button>
<el-button @click="visiable = false" style="margin-right: 20px;">取 消</el-button>
<el-button v-if="!isDispaly" @click="resetDialog">重 置</el-button>
</div>
</el-dialog>
</template>
<script>
import commonDepend from "~/mixin/commonDepend.js";
import Api from '~/service/Api';
import commonFunctions from '~/mixin/commonFunctions.js';
import moment from "moment";
export default {
inject: ["root"],
mixins: [commonDepend, commonFunctions],
props: {
dialog2: {
type: Object,
default: () => {}
}
},
data() {
return {
activeNames: ["feeDetail"],
formData: {
wrkfec: {}
},
begPickOpt: {
disabledDate(time) {
return time.Format("yyyyMMdd") < new Date().Format("yyyyMMdd");
}
},
roleSet: [],
feeCodeSet: [],
visiable: false,
rules: {
"wrkfec.ratcal": [{ required: true, message: "必填" }],
"wrkfec.untamt": [{ required: true, message: "必填" }],
rol: [{ required: true, message: "必填" }],
dsp: [{ required: true, message: "必填" }],
dat1: [{ validator: this.validateDate, trigger: ["blur", "change"] }],
dat2: [{ validator: this.validateDate, trigger: ["blur", "change"] }],
dctrat: [{ validator: this.validateDctrat, trigger: ["blur", "change"] }],
},
columns: [
{
label: '说明',
prop: 'note'
},
{
label: '币种',
prop: 'cur'
},
{
label: '发生额',
prop: 'amt'
},
{
label: '生效日期',
prop: 'valueDate'
},
{
label: '计费开始日期',
prop: 'dat1'
},
{
label: '计费结束日期',
prop: 'dat2'
},
{
label: '费用币种',
prop: 'feecur'
},
{
label: '标准计费金额',
prop: 'ogiamt'
},
{
label: '计费金额',
prop: 'feeamt'
},
],
srcList:[
{label: "当前交易", value: "T"},
{label: "当前交易", value: "E"},
{label: "前手交易", value: "P"},
{label: "手工添加", value: "U"},
],
};
},
computed: {
isDispaly() {
return this.$store.state.Status.mode === "display";
},
finalAmt() {
let finalAmt = this.formData.ogiamt - this.formData.amt;
if (finalAmt < 0) {
finalAmt = 0;
}
return this.moneyFormat(finalAmt, this.formData.cur)
},
isUntDisabled(){
return this.formData.commFeeFlag === 'Y' && this.formData.dsp === 'P';
},
isGraceDaysDisabled(){
return this.formData.dsp === 'P' || this.formData.wrkfec.pertyp === 'd';
},
isAmtDisabled(){
return this.formData.dsp === 'N' || (this.formData.commFeeFlag === 'Y' && this.formData.dsp === 'P')
},
isAmeFee(){
return this.formData.feecod === 'GIAME1' || this.formData.feecod === 'GIAME2' || this.formData.feecod === 'GIAME3'
|| this.formData.feecod === 'GIAME4' || this.formData.feecod === 'GIAME5' || this.formData.feecod === 'GIAME6'
|| this.formData.feecod === 'GIAME7' || this.formData.feecod === 'GIAME8' || this.formData.feecod === 'GIAME9'
},
isUserLevel0(){
return this.$store.state.UserContext.currentOrg.departmentNumber == 1000;
},
dat2Visiable() {
if (!this.formData.dat2dft) {
return true;
}
if (!this.formData.dat2) {
return true;
}
if (moment(this.formData.dat2).diff(moment(this.formData.dat2dft)) <= 0) {
return true;
}
return false;
}
},
methods: {
//初始化
init() {
this.formData = this.dialog2;
this.roleSet = this.dialog2.roleSet;
this.feeCodeSet = this.dialog2.feeCodeSet;
},
changeData(prop) {
this.$refs.dialogForm.validate(valid => {
this.customAddModify(this.formData, prop);
if (prop === 'rol' || prop === 'feetxtinf') {
return;
}
if (prop === 'dctrat') {
this.calcFeeamtByDctrat();
return;
}
if (prop === 'roundFlag') {
if (this.formData.modflg === 'a') {
return;
}
}
this.formData.modflg = '';
if (prop === 'dsp') {
if (this.formData.dsp === 'N') {
//免收
this.formData.amt = 0;
this.changeData('amt');
} else {
if (this.formData.dsp === 'X') {
//现收
if (this.formData.amt === 0) {
this.resetDialogExcludeFec();
}
} else if (this.formData.dsp === 'P') {
if (this.isAmeFee) {
return;
}
//后收
if (this.formData.commFeeFlag === 'Y') {
this.formData.graceDays = 0;
this.formData.unt = 0;
this.changeData('unt');
}
}
}
}
if (prop === 'amt') {
this.calcDctratByFeeamt();
this.formData.modflg = 'a';
return;
}
if (prop === 'dat1' || prop === 'dat2' || prop === 'unt' || prop === 'graceDays' || prop === 'roundFlag') {
if (prop === 'unt') {
this.formData.modflg = 'u';
}
this.calcFeeamt();
}
});
},
async calcDctratByFeeamt(){
let loading = this.loading('正在请求费用计算接口');
let params = {
ogiamt: this.formData.ogiamt,
feeamt: this.formData.amt,
}
let rtnmsg = await Api.post(`/${this.moduleRouter()}/calc/dctratByFeeamt`, params);
if (rtnmsg.respCode === SUCCESS) {
this.formData.dctrat = rtnmsg.data.dctrat;
}
loading.close();
},
async calcFeeamtByDctrat(){
let loading = this.loading('正在请求费用计算接口');
let params = {
feecur: this.formData.cur,
ogiamt: this.formData.ogiamt,
dctrat: this.formData.dctrat,
}
let rtnmsg = await Api.post(`/${this.moduleRouter()}/calc/feeamtByDctrat`, params);
if (rtnmsg.respCode === SUCCESS) {
this.formData.amt = rtnmsg.data.feeamt;
this.formData.modflg = 'a';
}
loading.close();
},
async calcFeeamt() {
//计算费用金额
let loading = this.loading('正在请求费用计算接口');
let rtnmsg = await Api.post(`/${this.moduleRouter()}/calc/feeamt`, this.formData);
if (rtnmsg.respCode === SUCCESS) {
this.formData.infdetstm = rtnmsg.data.infdetstm;
this.formData.inftxt = rtnmsg.data.inftxt;
this.formData.unt = rtnmsg.data.unt;
this.formData.cur = rtnmsg.data.cur;
this.formData.ogiamt = rtnmsg.data.ogiamt;
if (this.formData.dsp === 'N') {
this.formData.amt = 0;
} else {
this.formData.amt = rtnmsg.data.amt;
}
this.formData.minmaxflg = rtnmsg.data.minmaxflg;
this.formData.dat1 = rtnmsg.data.dat1;
this.formData.dat2 = rtnmsg.data.dat2;
this.formData.commCbsLineGrids = rtnmsg.data.commCbsLineGrids;
this.formData.dctrat = rtnmsg.data.dctrat;
}
loading.close();
},
//确定
saveDialog() {
this.$refs.dialogForm.validate(valid => {
if (!valid) {
console.log("详细填写不合法");
return;
}
this.visiable = false;
this.$emit("setpanQueryFunc", "submit", this.formData);
});
},
//取消
beforeClose(done) {
this.visiable = false;
done();
},
//重置不包含fec
resetDialogExcludeFec() {
this.$emit("setpanQueryFunc", "resetExcludeFec", this.formData);
},
//重置
resetDialog() {
this.$emit("setpanQueryFunc", "reset");
},
editWrkFec(key) {
this.$refs.dialogForm.validate(valid => {
//要标记wrkfec在setfel中的修改状态
this.customAddModify(this.formData, "wrkfec");
this.customAddModify(this.formData.wrkfec, key);
this.formData.modflg = '';
if (key === 'pertyp') {
if (this.formData.wrkfec.pertyp === 'd') {
this.formData.graceDays = 0;
}
}
if (key === 'perbegtr2') {
if (this.formData.wrkfec.perbegtr2 === 0) {
this.formData.wrkfec.perrattr2 = 0
this.formData.wrkfec.perbegtr3 = 0
this.formData.wrkfec.perrattr3 = 0
this.formData.wrkfec.perbegtr4 = 0
this.formData.wrkfec.perrattr4 = 0
this.formData.wrkfec.perbegtr5 = 0
this.formData.wrkfec.perrattr5 = 0
}
}
if (key === 'perbegtr3') {
if (this.formData.wrkfec.perbegtr3 === 0) {
this.formData.wrkfec.perrattr3 = 0
this.formData.wrkfec.perbegtr4 = 0
this.formData.wrkfec.perrattr4 = 0
this.formData.wrkfec.perbegtr5 = 0
this.formData.wrkfec.perrattr5 = 0
}
}
if (key === 'perbegtr4') {
if (this.formData.wrkfec.perbegtr4 === 0) {
this.formData.wrkfec.perrattr4 = 0
this.formData.wrkfec.perbegtr5 = 0
this.formData.wrkfec.perrattr5 = 0
}
}
if (key === 'perbegtr5') {
if (this.formData.wrkfec.perbegtr5 === 0) {
this.formData.wrkfec.perrattr5 = 0
}
}
this.calcFeeamt();
});
},
validateDate(rule, value, cb) {
if (this.formData.dat1 && this.formData.dat2) {
if (this.formData.dat1 > this.formData.dat2) {
cb(new Error("收费开始日期不得大于收费结束日期"));
}
}
cb();
},
validateDctrat(rule, value, cb) {
if (Number(value) > 100) {
cb(new Error("优惠比例不能大于100%"));
}
cb()
}
}
};
</script>
<style scoped lang="less">
.dialog-wrap {
height: 400px;
overflow: auto;
}
::v-deep .el-dialog__header {
height: 52px;
.el-dialog__headerbtn {
top: 10px;
}
}
::v-deep .el-dialog__body {
padding: 10px 15px 10px;
height: calc(100% - 100px);
.el-form {
height: 100%;
}
}
::v-deep .el-dialog__footer {
padding: 10px 10px 0;
}
::v-deep .el-form {
height: 100%!important;
}
.dialog-footer {
padding: 0 !important;
}
.card {
width: 100%;
}
.card-title {
width: 100%;
padding: 8px 0;
font-size: 16px;
color: #000;
}
.card-content {
width: 100%;
}
::v-deep .el-range-separator {
width: 8%;
height: 32px;
line-height: 32px !important;
}
::v-deep .el-date-editorr {
height: 32px;
line-height: 32px;
}
</style>