<template>
|
<div class="TransTop" v-if="value">
|
<div class="loading" v-if="loadShow">
|
<div class="loadItem" v-show="successImg">
|
<img src="../../assets/images/success.jpg" alt />
|
<span>提交成功!</span>
|
</div>
|
<div v-show="!successImg">
|
<img src="../../assets/images/fail.png" alt />
|
<span>抱歉!提交失败</span>
|
</div>
|
</div>
|
<transition name="fade">
|
<div class="tips" v-if="tips">
|
你的最高档金额小于99999999元，你确定提交吗？
|
<div class="tipBtn">
|
<el-button type="primary" @click="confirm('ruleForm','ruleForm2')">确认</el-button>
|
<el-button type="primary" @click="refuse">取消</el-button>
|
</div>
|
</div>
|
</transition>
|
<el-form
|
:model="renderData.fee"
|
:rules="rules"
|
ref="ruleForm"
|
label-width="100px"
|
class="demo-ruleForm"
|
>
|
<el-form-item class="TransTopItem" prop="channelId" label="机构通道">
|
<input
|
type="text"
|
:value="renderData.fee.channelName"
|
disabled
|
v-if="!addShow"
|
class="myText"
|
/>
|
<el-select v-model="renderData.fee.channelId" placeholder="请选择" v-if="addShow">
|
<el-option
|
v-for="item in options1"
|
:key="item.channelId"
|
:label="item.channelName"
|
:value="item.channelId"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item class="TransTopItem" label="交易名称" prop="transType">
|
<input
|
type="text"
|
:value="enumerMap(renderData.fee.transType,'transType')"
|
disabled
|
class="myText"
|
v-if="!addShow"
|
/>
|
<el-select v-model="renderData.fee.transType" placeholder="请选择" v-if="addShow">
|
<el-option
|
v-for="item in options2"
|
:key="item.value"
|
:label="item.value"
|
:value="item.id"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item class="TransTopItem" label="卡类型" prop="cardType">
|
<input
|
type="text"
|
:value="enumerMap(renderData.fee.cardType,'cardType')"
|
class="myText"
|
v-if="!addShow"
|
/>
|
<el-select v-model="renderData.fee.cardType" placeholder="请选择" v-if="addShow">
|
<el-option
|
v-for="item in options4"
|
:key="item.value"
|
:label="item.value"
|
:value="item.id"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<div class="maxAndMin">
|
<label style="float: left;">费用单笔限额:</label>
|
<el-form-item class="singleItem" label="最小额(元)" prop="minPt">
|
<input type="text" :value="renderData.fee.minPt" class="myText" v-if="viewShow" />
|
<el-input
|
placeholder="请输入内容"
|
v-model.number="renderData.fee.minPt"
|
style="width: 120px;"
|
v-if="!viewShow"
|
></el-input>
|
</el-form-item>
|
<el-form-item class="singleItem" label="最高额(元)" prop="maxPt">
|
<input type="text" :value="renderData.fee.maxPt" class="myText" v-if="viewShow" />
|
<el-input
|
placeholder="请输入内容"
|
v-model.number="renderData.fee.maxPt"
|
style="width: 120px;"
|
v-if="!viewShow"
|
></el-input>
|
</el-form-item>
|
</div>
|
<div class="maxAndMin">
|
<label style="float: left;">费用单日限额:</label>
|
<el-form-item class="singleItem" label="最小额(元)" prop="minPd">
|
<input type="text" :value="renderData.fee.minPd" class="myText" v-if="viewShow" />
|
<el-input
|
placeholder="请输入内容"
|
v-model.number="renderData.fee.minPd"
|
style="width: 120px;"
|
v-if="!viewShow"
|
></el-input>
|
</el-form-item>
|
<el-form-item class="singleItem" label="最高额(元)" prop="maxPd">
|
<input type="text" :value="renderData.fee.maxPd" class="myText" v-if="viewShow" />
|
<el-input
|
placeholder="请输入内容"
|
v-model.number="renderData.fee.maxPd"
|
style="width: 120px;"
|
v-if="!viewShow"
|
></el-input>
|
</el-form-item>
|
</div>
|
</el-form>
|
<div class="TransTopItem">
|
<label>优先等级:</label>
|
<input type="text" :value="renderData.fee.priority" class="myText" v-if="viewShow" />
|
<el-select v-model="renderData.fee.priority" placeholder="请选择" v-if="!viewShow">
|
<el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.id"></el-option>
|
</el-select>
|
</div>
|
<div class="TransTopItem">
|
<label>状态:</label>
|
<input
|
type="text"
|
:value="enumerMap(renderData.fee.status,'status')"
|
class="myText"
|
v-if="viewShow"
|
/>
|
<el-select v-model="renderData.fee.status" placeholder="请选择" v-if="!viewShow">
|
<el-option v-for="item in options6" :key="item.value" :label="item.value" :value="item.id"></el-option>
|
</el-select>
|
</div>
|
<div class="transBottom" v-if="!viewShow">
|
<h5>交易费率</h5>
|
<div class="fixedMoney" :model="renderData.fee">
|
<el-radio v-model="bigRadio" label="0">单笔固定费用</el-radio>
|
<div class="radioItem">
|
<div class="item" v-if="bigRadio != '1'">
|
<label for>单笔固定费用(元)</label>
|
<el-input placeholder="请输入内容" v-model="renderData.fee.feePt"></el-input>
|
</div>
|
</div>
|
<el-radio v-model="bigRadio" label="1">单笔金额阶梯费率</el-radio>
|
<div class="radioItem">
|
<p>最多6档阶梯费率，封顶值位0值为不封顶，默认不封顶</p>
|
<el-form :model="renderData" ref="ruleForm2" class="dynamicForm" v-show="bigRadio == '1'">
|
<el-form-item
|
v-for="(its,index) in renderData.stepFeeList"
|
:key="index"
|
class="parentFormItem"
|
>
|
<el-form-item
|
:label="'第'+(index+1)+'档'"
|
class="sonFormItem"
|
:prop="'stepFeeList.'+index+'.stepFee'"
|
:rules="{required: true,message: '档金额必填',trigger: 'blur'}"
|
>
|
<el-input
|
v-model="its.stepFee"
|
:placeholder="'请输入第'+(index+1)+'档的金额'"
|
style="width: 162px;"
|
></el-input>
|
</el-form-item>
|
<el-form-item class="sonFormItem">
|
<el-radio-group v-model="its.radio" style="width: 100%;">
|
<div class="rateItem">
|
<el-form-item
|
:prop="'stepFeeList.'+index+'.fee'"
|
:rules="its.radio ? null : editRules.fee"
|
>
|
<el-radio :label="0">固额</el-radio>
|
<el-input v-model="its.fee" style="width:162px;" v-show="!its.radio"></el-input>
|
</el-form-item>
|
</div>
|
<div class="rateItem">
|
<el-form-item
|
:prop="its.radio ? 'stepFeeList.'+index+'.rate' : null"
|
:rules="its.radio ? editRules.rate: null"
|
>
|
<el-radio :label="1">比例</el-radio>
|
<el-input v-model="its.rate" style="width:162px;" v-show="its.radio"></el-input>
|
</el-form-item>
|
|
<div style="margin-top: 16px;" v-show="its.radio">
|
<el-form-item
|
label="保底(元)"
|
label-width="80px"
|
style="float: left;margin: 0px;margin-right: 20px;"
|
:prop=" its.radio ? 'stepFeeList.'+index+'.min' : null"
|
:rules=" its.radio ? editRules.min : null"
|
>
|
<el-input v-model.number="its.min" style="width: 80px;"></el-input>
|
</el-form-item>
|
<el-form-item
|
label="封顶(元)"
|
label-width="80px"
|
style="float: left; margin: 0px;"
|
:prop="its.radio ? 'stepFeeList.'+index+'.max' : null"
|
:rules="its.radio ? editRules.max : null"
|
>
|
<el-input v-model.number="its.max" style="width: 80px;"></el-input>
|
</el-form-item>
|
</div>
|
</div>
|
</el-radio-group>
|
</el-form-item>
|
</el-form-item>
|
</el-form>
|
<div class="addOrRemove">
|
<span class="remove" @click="removeItem">-删除</span>
|
<span class="add" @click="addItem">+增加</span>
|
</div>
|
<div class="reduction">
|
<el-button type="primary" @click="validateCheck">提交</el-button>
|
<el-button @click="cancel">取消</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="transView" v-if="viewShow">
|
<h5>交易费率</h5>
|
<div class="grad">
|
<div class="gradItem" v-if="renderData.fee.feePt != null">
|
<p style="margin-left: -30px;">按单笔固定费用收费</p>
|
<span>单笔固定费用(元):{{renderData.fee.feePt}}</span>
|
</div>
|
<p style="margin-left: -30px;" v-if="renderData.fee.feePt == null">单笔按金额阶梯费率</p>
|
<p
|
style="margin-bottom: 8px;"
|
v-if="renderData.fee.feePt == null"
|
>最多6档阶梯费率，封顶值位0值为不封顶，默认不封顶。</p>
|
<div
|
class="gradItem"
|
v-for="(item,index) in renderData.stepFeeList"
|
:key="index"
|
v-if="renderData.fee.feePt == null"
|
>
|
<div>
|
<span>第{{item.seq}}档:</span>
|
<span>{{item.stepFee}}</span>
|
</div>
|
<div>
|
<span>费率</span>
|
<span v-if="item.rate == null">固额:{{item.fee}}</span>
|
<span v-if="item.fee == null">比例：{{item.rate}} 保底{{item.min}}(元),封顶{{item.max}}(元)</span>
|
</div>
|
</div>
|
</div>
|
<div class="reduction">
|
<el-button @click="cancel">取消</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
|
|
<script>
|
import { mapGetters } from "vuex";
|
import { Message } from "element-ui";
|
import { TranRateAdd, TranRateEdit } from "@/assets/api/api";
|
|
export default {
|
data() {
|
const checkBig = (rule, value, callback) => {
|
value = value == 0 ? true : value;
|
if (!value) {
|
callback(new Error("内容不能为空"));
|
} else {
|
if (this.renderData.fee.maxPt < this.renderData.fee.minPt) {
|
callback(new Error("最高额必须大于最低额"));
|
return false;
|
} else {
|
callback();
|
}
|
}
|
};
|
// 检查单日
|
const checkDay = (rule, value, callback) => {
|
value = value == 0 ? true : value;
|
if (!value) {
|
callback(new Error("内容不能为空"));
|
} else {
|
// if(this.renderData.fee.max )
|
if (this.renderData.fee.maxPd < this.renderData.fee.minPd) {
|
callback(new Error("最高额必须大于最低额"));
|
return false;
|
} else {
|
callback();
|
}
|
}
|
};
|
return {
|
myRule: null,
|
loadShow: false,
|
successImg: true,
|
add: true,
|
tips: false,
|
feeStep: [true],
|
viewShow: false,
|
addShow: false,
|
itemNum: [],
|
bigRadio: "1",
|
radio: [],
|
renderData: {},
|
options1: [],
|
options2: [
|
{ value: "二要素", id: 105 },
|
{ value: "三要素", id: 101 },
|
{ value: "四要素", id: 102 },
|
{ value: "四要素+短信", id: 103 },
|
{ value: "五要素+签约", id: 104 },
|
{ value: "单笔代扣", id: 301 },
|
{ value: "批量代扣", id: 302 },
|
{ value: "单笔代付", id: 201 },
|
{ value: "批量代付", id: 202 },
|
{ value: "协议代扣", id: 303 }
|
],
|
options4: [
|
{
|
value: "借记卡",
|
id: 0
|
},
|
{
|
value: "贷记卡",
|
id: 1
|
}
|
],
|
options5: [
|
{
|
value: "1",
|
id: 1
|
},
|
{
|
value: "2",
|
id: 2
|
},
|
{
|
value: "3",
|
id: 3
|
},
|
{
|
value: "4",
|
id: 4
|
},
|
{
|
value: "5",
|
id: 5
|
},
|
{
|
value: "6",
|
id: 6
|
},
|
{
|
value: "7",
|
id: 7
|
}
|
],
|
options6: [
|
{
|
value: "正常",
|
id: 1
|
},
|
{
|
value: "关闭",
|
id: 0
|
}
|
],
|
rules: {
|
channelId: [
|
{
|
required: true,
|
message: "请选择内容",
|
trigger: "change"
|
}
|
],
|
transType: [
|
{
|
required: true,
|
message: "请选择内容",
|
trigger: "change"
|
}
|
],
|
cardType: [
|
{
|
required: true,
|
message: "请选择内容",
|
trigger: "change"
|
}
|
],
|
minPt: [
|
{
|
required: true,
|
message: "请输入内容",
|
trigger: "blur"
|
},
|
{
|
type: "number",
|
message: "请输入数字",
|
trigger: "blur"
|
},
|
{
|
validator: checkBig,
|
trigger: "change"
|
}
|
],
|
maxPt: [
|
{
|
required: true,
|
message: "请输入内容",
|
trigger: "blur"
|
},
|
{
|
type: "number",
|
message: "请输入数字",
|
trigger: "blur"
|
},
|
{
|
validator: checkBig,
|
trigger: "change"
|
}
|
],
|
minPd: [
|
{
|
required: true,
|
message: "请输入内容",
|
trigger: "blur"
|
},
|
{
|
type: "number",
|
message: "请输入数字",
|
trigger: "blur"
|
},
|
{
|
validator: checkDay,
|
trigger: "change"
|
}
|
],
|
maxPd: [
|
{
|
required: true,
|
message: "请输入内容",
|
trigger: "blur"
|
},
|
{
|
type: "number",
|
message: "请输入数字",
|
trigger: "blur"
|
},
|
{
|
validator: checkDay,
|
trigger: "change"
|
}
|
]
|
},
|
editRules: {
|
fee: {
|
required: true,
|
message: "选择固额时，固额必填",
|
trigger: "blur"
|
},
|
rate: [
|
{ required: true, message: "选择比例时，比例必填", trigger: "blur" },
|
{ validator: this.validateRate, trigger: "blur" }
|
],
|
min: [
|
{ required: true, message: "保底金额必填", trigger: "blur" },
|
{ validator: this.validatePass, trigger: "blur" },
|
{ type: "number", message: "必须为数字", trigger: "blur" }
|
],
|
max: [
|
{ required: true, message: "封顶金额必填", trigger: "blur" },
|
{ validator: this.validateBig, trigger: "blur" },
|
{ type: "number", message: "必须为数字", trigger: "blur" }
|
]
|
},
|
showTop: false
|
};
|
},
|
|
props: {
|
topData: {
|
type: Object,
|
default() {
|
return {};
|
}
|
},
|
type: {
|
type: String,
|
default: "view"
|
},
|
|
value: {
|
type: Boolean,
|
default: false
|
}
|
},
|
|
watch: {
|
bigRadio: function () {
|
if (this.bigRadio == "0") {
|
this.renderData.stepFeeList = [];
|
this.add = false;
|
} else {
|
this.renderData.fee.feePt = null;
|
this.add = true;
|
}
|
},
|
|
value: function (n) {
|
console.log(n)
|
if (n) {
|
this.getAddData();
|
this.getAllData();
|
} else {
|
this.$refs['ruleForm'].resetFields()
|
}
|
}
|
},
|
methods: {
|
// 检查封顶值与保底值
|
validatePass(rule, value, callback) {
|
if (!value && value != 0) {
|
callback(new Error("保底值不能为空"));
|
} else {
|
if (!this.renderData.stepFeeList[rule.field[12]].max) {
|
callback();
|
} else {
|
if (
|
Number(this.renderData.stepFeeList[rule.field[12]].max) <
|
Number(this.renderData.stepFeeList[rule.field[12]].min)
|
) {
|
callback(new Error("封顶值必须大于保底值"));
|
return false;
|
} else {
|
callback();
|
}
|
}
|
}
|
},
|
// 验证比例是否为0-1
|
validateRate(rule, value, callback) {
|
if (/^(0.\d+|0|1)$/.test(value)) {
|
callback();
|
} else {
|
callback(new Error("比例只能为0到1之间"));
|
}
|
},
|
// 单独检测最大值
|
validateBig(rule, value, callback) {
|
if (
|
!this.renderData.stepFeeList[rule.field[12]].min &&
|
this.renderData.stepFeeList[rule.field[12]].min != 0
|
) {
|
this.renderData.stepFeeList[rule.field[12]].max = null;
|
callback(new Error("请先输入最小值"));
|
} else if (!value && value != 0) {
|
callback(new Error("封顶值不能为空"));
|
} else if (
|
Number(this.renderData.stepFeeList[rule.field[12]].max) <
|
Number(this.renderData.stepFeeList[rule.field[12]].min)
|
) {
|
callback(new Error("封顶值必须大于保底值"));
|
} else {
|
callback();
|
}
|
},
|
|
// 获取机构数据
|
getInstitutionsData() {
|
return this.$http.post('channel/getChannels', { companyId: "", institutionId: "" })
|
},
|
// axios并发请求
|
getAllData() {
|
const that = this;
|
this.Axios.all([this.getInstitutionsData()])
|
.then(
|
this.Axios.spread(function (Institutions) {
|
that.options1 = Institutions.data.retBody;
|
})
|
)
|
.catch(err => {
|
console.log(err);
|
});
|
},
|
// 获取单条数据
|
getAddData() {
|
if (this.type == "add") {
|
this.addShow = true;
|
this.viewShow = false;
|
this.renderData = {
|
fee: {
|
feeId: "",
|
minPt: "",
|
maxPt: "",
|
minPd: "",
|
maxPd: "",
|
priority: "",
|
feePt: "",
|
steps: "",
|
cardType: "",
|
status: "",
|
channelName: "",
|
institution: "",
|
payCompany: "",
|
transType: "",
|
channelId: "",
|
companyId: ""
|
},
|
stepFeeList: []
|
};
|
} else if (this.type == "view") {
|
this.viewShow = true;
|
this.addShow = false;
|
this.renderData = JSON.parse(JSON.stringify(this.topData));
|
} else if (this.type == "edit") {
|
if (this.topData.fee.feePt != null) {
|
this.bigRadio = "0";
|
} else {
|
this.bigRadio = "1";
|
}
|
this.viewShow = false;
|
this.judge("edit");
|
this.renderData = JSON.parse(JSON.stringify(this.topData));
|
}
|
},
|
judge(type) {
|
if (this.topData.fee.feePt != null) {
|
this.itemNum = [];
|
} else {
|
this.itemNum = this.topData.stepFeeList;
|
}
|
if (type == "edit") {
|
for (var i = 0; i < this.itemNum.length; i++) {
|
if (
|
this.topData.stepFeeList[i].fee != null &&
|
this.topData.stepFeeList[i].fee != "" &&
|
this.topData.stepFeeList[i].fee != "0"
|
) {
|
this.topData.stepFeeList[i].radio = 0;
|
} else {
|
this.topData.stepFeeList[i].radio = 1;
|
}
|
}
|
}
|
},
|
// 删除档位
|
removeItem() {
|
this.renderData.stepFeeList.pop();
|
this.radio.pop();
|
},
|
// 新增档位
|
addItem() {
|
if (this.renderData.stepFeeList.length >= 6 || !this.add) {
|
return;
|
} else {
|
const num = {
|
fee: "",
|
feeId:
|
this.renderData.stepFeeList.length != 0
|
? this.renderData.stepFeeList[0].feeId
|
: "",
|
max: "",
|
min: "",
|
rate: "",
|
seq: this.renderData.stepFeeList.length + 1,
|
stepFee: "",
|
stepId:
|
this.renderData.stepFeeList.length != 0
|
? this.renderData.stepFeeList[0].stepId
|
: "",
|
radio: 1
|
};
|
this.renderData.stepFeeList.push(num);
|
this.radio.push(1);
|
}
|
},
|
// 提交
|
submit(formName, formName2) {
|
|
if (this.bigRadio == "1") {
|
this.renderData.fee.feePt = null;
|
if (this.itemNum.length == 0) {
|
Message.error("选择单笔阶梯金额费率时,至少要有一档");
|
} else {
|
this.checkForm(formName, formName2);
|
}
|
} else {
|
if (!this.renderData.fee.feePt && this.renderData.fee.feePt != 0) {
|
Message.error("选择单笔固定费用时，内容不能为空");
|
} else {
|
this.checkForm(formName, formName2);
|
}
|
}
|
},
|
// 取消
|
cancel() {
|
this.$emit("maskShow");
|
this.$emit("input", false);
|
},
|
// 限制
|
limit(e) {
|
if (e.target.value > 1 || e.target.value < 0) {
|
Message.error("比例不能超过1或者小于0");
|
} else {
|
return;
|
}
|
},
|
// 取相应的公司名和机构名
|
mapCompanyAndIn() {
|
for (var i = 0; i < this.options1.length; i++) {
|
if (this.renderData.fee.channelId == this.options1[i].channelId) {
|
this.renderData.fee.channelName = this.options1[i].channelName;
|
this.renderData.fee.payCompany = this.options1[i].payCompany;
|
this.renderData.fee.companyId = this.options1[i].companyId;
|
this.renderData.fee.institution = this.options1[i].institution;
|
this.renderData.fee.institutionId = this.options1[i].institutionId;
|
}
|
}
|
},
|
// 成功失败提示
|
tipsSuccess(type) {
|
const that = this;
|
that.loadShow = true;
|
setTimeout(function () {
|
that.loadShow = false;
|
that.$emit("maskShow");
|
that.successImg = type == "s" ? true : false;
|
}, 1500);
|
},
|
// 确认框
|
confirm() {
|
this.trueSubmit("transFee/updateFee");
|
this.tips = false;
|
},
|
// 拒绝框
|
refuse() {
|
this.tips = false;
|
},
|
// 提交请求
|
checkForm(formName, formName2) {
|
this.mapCompanyAndIn();
|
if (this.type == "edit") {
|
this.$refs[formName].validate(valid => {
|
if (valid) {
|
if (this.itemNum.length >= 1) {
|
this.$refs[formName2].validate(valid2 => {
|
if (valid2) {
|
if (
|
this.itemNum[this.itemNum.length - 1].stepFee <= 99999999
|
) {
|
this.tips = true;
|
} else {
|
this.$http
|
.post("transFee/updateFee", this.renderData)
|
.then(response => {
|
if (response.data.retHeader.retCode === '0000') {
|
this.$emit("maskShow");
|
} else {
|
this.$message.error(response.data.retHeader.retMessage)
|
}
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
}
|
}
|
});
|
} else {
|
this.$http
|
.post("transFee/updateFee", this.renderData)
|
.then(response => {
|
if (response.data.retHeader.retCode === '0000') {
|
this.$emit("maskShow");
|
} else {
|
this.$message.error(response.data.retHeader.retMessage)
|
}
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
}
|
} else {
|
return false;
|
}
|
});
|
} else if (this.type == "add") {
|
this.$refs[formName].validate(valid => {
|
if (valid) {
|
if (this.itemNum.length >= 1) {
|
this.$refs[formName2].validate(valid2 => {
|
if (valid2) {
|
if (
|
this.itemNum[this.itemNum.length - 1].stepFee <= 99999999
|
) {
|
this.tips = true;
|
} else {
|
this.trueSubmit("transFee/addFee");
|
}
|
}
|
});
|
} else {
|
this.trueSubmit("transFee/addFee");
|
}
|
} else {
|
return false;
|
}
|
});
|
}
|
},
|
// 真正的提交"transFee/addFee",
|
async trueSubmit() {
|
this.renderData.fee.steps = this.renderData.stepFeeList.length;
|
const map = { add: TranRateAdd, edit: TranRateEdit };
|
this.renderData.stepFeeList.forEach(element => {
|
if (element.radio) {
|
element.fee = null;
|
} else {
|
element.min = null;
|
element.max = null;
|
element.rate = null;
|
}
|
});
|
try {
|
const result = (await map[this.type](this.renderData)).data;
|
if (result == "9") {
|
Message.error("该条数据已存在!");
|
} else {
|
Message.success("提交成功!");
|
this.$emit("maskShow");
|
}
|
} catch (err) {
|
Message.error("提交失败");
|
this.$emit("maskShow");
|
}
|
},
|
// 提交校验
|
async validateCheck() {
|
try {
|
await this.$refs["ruleForm"].validate();
|
if (this.bigRadio == "1") {
|
if (this.renderData.stepFeeList.length) {
|
try {
|
await this.$refs["ruleForm2"].validate();
|
if (
|
this.renderData.stepFeeList[
|
this.renderData.stepFeeList.length - 1
|
].stepFee <= 999999999
|
) {
|
this.tips = true;
|
} else {
|
this.trueSubmit();
|
}
|
} catch (err) {
|
Message.warning("表单格式未通过校验，请检查!");
|
}
|
} else {
|
Message.warning("选择阶梯费率，至少要有一档");
|
}
|
} else {
|
if (
|
(!this.renderData.fee.feePt && this.renderData.fee.feePt != 0) ||
|
this.renderData.fee.feePt == ""
|
) {
|
Message.warning("选择固定费用时，固定费用必填!");
|
} else {
|
this.trueSubmit();
|
}
|
}
|
} catch (err) {
|
Message.warning("表单格式未通过校验，请检查!");
|
}
|
}
|
}
|
};
|
</script>
|
|
|
<style lang="less" scoped>
|
.loading {
|
width: 100%;
|
height: 100%;
|
.loadItem {
|
width: 120px;
|
height: 100px;
|
position: fixed;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
text-align: center;
|
> img {
|
margin: 0 auto 10px;
|
width: 50px;
|
height: 50px;
|
display: block;
|
opacity: 0.5;
|
}
|
> span {
|
font-weight: 700;
|
}
|
}
|
}
|
.tips {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
width: 300px;
|
height: 120px;
|
background-color: #fff;
|
box-shadow: 0px 0px 10px #888888;
|
z-index: 5;
|
border-radius: 6px;
|
padding: 30px 0px 0px;
|
text-align: center;
|
color: #666;
|
font-size: 14px;
|
.tipBtn {
|
width: 100%;
|
height: 40px;
|
position: absolute;
|
bottom: 10px;
|
> button {
|
width: 80px;
|
height: 40px;
|
border-radius: 4px;
|
color: #fff;
|
}
|
}
|
}
|
.maxAndMin {
|
width: 100%;
|
overflow: hidden;
|
> div {
|
float: left;
|
}
|
> label {
|
display: inline-block;
|
height: 40px;
|
line-height: 40px;
|
text-align: right;
|
padding-right: 12px;
|
}
|
}
|
|
.el-input {
|
width: 60%;
|
}
|
|
.item {
|
height: 40px;
|
> label {
|
float: left; // width: 50px;
|
height: 100%;
|
text-align: center;
|
line-height: 40px;
|
margin-right: 6px;
|
}
|
> div {
|
float: left;
|
width: 180px;
|
height: 100%;
|
}
|
}
|
|
.myText {
|
width: 217px;
|
height: 40px;
|
border: none;
|
outline: none;
|
background-color: #fff;
|
}
|
|
.TransTop {
|
position: relative;
|
width: 100%;
|
margin: 20px auto 0px;
|
background-color: #fff;
|
border-radius: 6px;
|
// padding: 16px;
|
font-size: 14px;
|
border-bottom-left-radius: 0px;
|
border-bottom-right-radius: 0px;
|
.TransTopItem {
|
height: 56px;
|
padding: 8px 0px;
|
> label {
|
display: inline-block;
|
width: 100px;
|
height: 100%;
|
line-height: 40px;
|
text-align: right;
|
margin-right: 10px;
|
}
|
.myText {
|
width: 217px;
|
height: 40px;
|
border: none;
|
outline: none;
|
}
|
> .myText:disabled {
|
background-color: #fff;
|
}
|
.single {
|
float: left;
|
height: 40px;
|
.singleItem {
|
float: left;
|
overflow: hidden;
|
margin-right: 8px;
|
> label {
|
height: 40px;
|
float: left;
|
line-height: 40px;
|
margin-right: 3px;
|
}
|
> div {
|
float: left;
|
}
|
}
|
}
|
}
|
.transBottom {
|
margin: 0px auto 0px;
|
border-top: 1px solid #ccc;
|
padding: 16px;
|
font-size: 14px;
|
> h5 {
|
font-size: 16px;
|
margin: 0px 0px 12px;
|
}
|
.radioItem {
|
margin: 0px 20px 20px;
|
.addOrRemove {
|
width: 100%;
|
color: red;
|
padding: 6px 16px;
|
overflow: hidden;
|
> span {
|
cursor: pointer;
|
}
|
.remove {
|
float: left;
|
}
|
.add {
|
float: right;
|
}
|
}
|
.reduction {
|
width: 160px;
|
padding: 10px 0px;
|
margin-left: 50%;
|
transform: translateX(-50%);
|
}
|
.ladderItem {
|
height: 160px;
|
border-bottom: 1px dashed #ccc;
|
padding: 8px 0px;
|
> div {
|
float: left;
|
}
|
.left {
|
width: 30%;
|
height: 100%;
|
padding: 60px 0px;
|
}
|
.right {
|
width: 70%;
|
height: 100%;
|
> div {
|
float: left;
|
}
|
.rightTitle {
|
width: 15%;
|
height: 100%;
|
line-height: 160px;
|
margin-right: 8px;
|
text-align: right;
|
}
|
.rightContent {
|
width: 80%;
|
height: 100%;
|
.rightItem {
|
height: 33%;
|
padding: 6px 0px;
|
}
|
}
|
.single {
|
float: left;
|
height: 40px;
|
padding-left: 20px;
|
.singleItem {
|
float: left;
|
overflow: hidden;
|
margin-right: 8px;
|
> label {
|
height: 40px;
|
float: left;
|
line-height: 40px;
|
margin-right: 8px;
|
}
|
> div {
|
float: left;
|
}
|
}
|
}
|
}
|
}
|
}
|
.dynamicForm {
|
.parentFormItem {
|
width: 100%;
|
height: 180px;
|
padding: 10px 0px;
|
border-bottom: 1px dashed #ccc;
|
.el-form-item__content {
|
width: 100%;
|
display: flex;
|
justify-content: space-around;
|
.sonFormItem {
|
width: 50%;
|
float: left;
|
.rateItem {
|
margin-bottom: 16px;
|
}
|
}
|
}
|
}
|
}
|
}
|
.transView {
|
margin: 0px auto 0px;
|
border-radius: 6px;
|
padding: 16px;
|
font-size: 14px;
|
> h5 {
|
font-size: 16px;
|
margin: 0px 0px 12px;
|
}
|
.grad {
|
width: 80%;
|
margin-left: 100px;
|
.gradItem {
|
border-bottom: 1px dashed #ccc;
|
margin-bottom: 10px;
|
// padding-top: 8px;
|
height: 60px;
|
> div {
|
float: left;
|
width: 30%;
|
}
|
}
|
}
|
.reduction {
|
width: 160px;
|
padding: 10px 0px;
|
margin-left: 50%;
|
transform: translateX(-60%);
|
}
|
}
|
}
|
</style>
|
