<template>
|
<el-dialog
|
width="80%"
|
ref="dialog"
|
id="peAdd"
|
title="详情"
|
@close="close"
|
append-to-body
|
:visible.sync="dialogVisible"
|
>
|
<el-form
|
:model="maskData"
|
:rules="rules"
|
ref="ruleForm"
|
label-width="140px"
|
class="demo-ruleForm"
|
>
|
<el-form-item class="textItem" label="支付通道" prop="channelId">
|
<input
|
type="text"
|
v-if="!addShow"
|
class="myText"
|
:disabled="selectShow&&editShow"
|
v-model="maskData.channelName"
|
/>
|
<el-select placeholder="请选择" clearable v-if="addShow" v-model="maskData.channelId">
|
<el-option
|
v-for="(item,index) in channelDataMask"
|
:key="index"
|
:label="item.channelName"
|
:value="item.channelId"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item class="textItem" label="交易名称" prop="transType">
|
<input
|
type="text"
|
v-if="!addShow"
|
class="myText"
|
:disabled="selectShow&&editShow"
|
v-model="maskData.transType"
|
/>
|
<el-select placeholder="请选择" clearable v-if="addShow" v-model="maskData.transType">
|
<el-option
|
v-for="(item,index) in transType"
|
:key="index"
|
:label="item.value"
|
:value="item.id"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item class="textItem" label="银行名称" prop="bankId">
|
<input
|
type="text"
|
v-if="!addShow"
|
class="myText"
|
:disabled="selectShow&&editShow"
|
v-model="maskData.bankName"
|
/>
|
<el-select placeholder="请选择" filterable clearable v-if="addShow" v-model="maskData.bankId">
|
<el-option
|
v-for="(item,index) in bankSelect"
|
:key="index"
|
:label="item.bankName"
|
:value="item.bankId"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item class="textItem" label="决策方向" prop="isAllow">
|
<input
|
type="text"
|
v-if="!selectShow"
|
class="myText"
|
:disabled="!selectShow"
|
v-model="maskData.isAllow"
|
/>
|
<el-select placeholder="请选择" clearable v-if="selectShow" v-model="maskData.isAllow">
|
<el-option
|
v-for="(item,index) in direction"
|
:key="item.id"
|
:label="item.value"
|
:value="item.id"
|
></el-option>
|
</el-select>
|
<span class="mynotes">支持：通道允许此银行卡交易 拒绝：通道拒绝此银行卡交易</span>
|
</el-form-item>
|
<el-form-item class="textItem" label="状态">
|
<input
|
type="text"
|
v-if="!selectShow"
|
class="myText"
|
:disabled="!selectShow"
|
v-model="maskData.status"
|
/>
|
<el-select placeholder="请选择" clearable v-if="selectShow" v-model="maskData.status">
|
<el-option
|
v-for="(item,index) in status"
|
:key="index"
|
:label="item.value"
|
:value="item.id"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item class="textItem" label="对公私支持">
|
<el-checkbox-group
|
v-model="acctType"
|
style="width: 86%; display: inline-block;"
|
:disabled="!selectShow"
|
>
|
<el-checkbox label="0">支持对私</el-checkbox>
|
<el-checkbox label="1">支持对公</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
<span class="line"></span>
|
<h5>交易限额</h5>
|
<el-form-item class="textItem" label="单笔限额" prop="amountPt">
|
<input
|
type="text"
|
v-if="!selectShow"
|
class="myText"
|
:disabled="!selectShow"
|
v-model="maskData.amountPt"
|
/>
|
<el-input placeholder="请输入内容" v-if="selectShow" v-model="maskData.amountPt"></el-input>
|
</el-form-item>
|
<el-form-item class="textItem" label="单日限额" prop="amountPd">
|
<input
|
type="text"
|
v-if="!selectShow"
|
class="myText"
|
:disabled="!selectShow"
|
v-model="maskData.amountPd"
|
/>
|
<el-input placeholder="请输入内容" v-model="maskData.amountPd" v-if="selectShow"></el-input>
|
</el-form-item>
|
<el-form-item class="textItem" label="单月限额" prop="amountPm">
|
<input
|
type="text"
|
v-if="!selectShow"
|
class="myText"
|
:disabled="!selectShow"
|
v-model="maskData.amountPm"
|
/>
|
<el-input placeholder="请输入内容" v-model="maskData.amountPm" v-if="selectShow"></el-input>
|
</el-form-item>
|
<span class="line"></span>
|
<h5>交易限次</h5>
|
<el-form-item class="textItem" label="单日单卡成功笔数" prop="timesPd">
|
<input
|
type="text"
|
v-if="!selectShow"
|
class="myText"
|
:disabled="!selectShow"
|
v-model="maskData.timesPd"
|
/>
|
<el-input placeholder="请输入内容" v-model="maskData.timesPd" v-if="selectShow"></el-input>
|
</el-form-item>
|
<el-form-item class="textItem" label="单月单卡成功笔数" prop="timesPm">
|
<input
|
type="text"
|
v-if="!selectShow"
|
class="myText"
|
:disabled="!selectShow"
|
v-model="maskData.timesPm"
|
/>
|
<el-input placeholder="请输入内容" v-model="maskData.timesPm" v-if="selectShow"></el-input>
|
</el-form-item>
|
<el-form-item class="textItem" label="单日单卡失败笔数" prop="failsPd">
|
<input
|
type="text"
|
v-if="!selectShow"
|
class="myText"
|
:disabled="!selectShow"
|
v-model="maskData.failsPd"
|
/>
|
<el-input placeholder="请输入内容" v-model="maskData.failsPd" v-if="selectShow"></el-input>
|
</el-form-item>
|
<el-form-item class="textItem" label="单月单卡失败笔数" prop="failsPm">
|
<input
|
type="text"
|
v-if="!selectShow"
|
class="myText"
|
:disabled="!selectShow"
|
v-model="maskData.failsPm"
|
/>
|
<el-input placeholder="请输入内容" v-model="maskData.failsPm" v-if="selectShow"></el-input>
|
</el-form-item>
|
</el-form>
|
<span class="line"></span>
|
<div class="btnGroup">
|
<el-button @click="submit('ruleForm')" v-if="showBtn">提交</el-button>
|
<el-button @click="close">取消</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex";
|
|
export default {
|
data() {
|
var validateNumber = (rule, value, callback) => {
|
if (/^[0-9]*(\.[0-9]{0,2})?$/.test(value)) {
|
callback();
|
} else {
|
callback(new Error("请勿输入数字以外的内容(小数点仅保留两位)"));
|
}
|
};
|
var validateNumber1 = (rule, value, callback) => {
|
if (/^[0-9]*$/.test(value)) {
|
callback();
|
} else {
|
callback(new Error("请输入整数"));
|
}
|
};
|
return {
|
selectShow: true,
|
showBtn: true,
|
editShow: true,
|
addShow: false,
|
title: "编辑",
|
company: [
|
{
|
value: "通联",
|
id: 1
|
},
|
{
|
value: "腾讯",
|
id: 2
|
},
|
{
|
value: "阿里",
|
id: 3
|
}
|
],
|
transType: [
|
{
|
value: "鉴权",
|
id: "100"
|
},
|
{
|
value: "单笔代扣",
|
id: "301"
|
},
|
{
|
value: "代付",
|
id: "200"
|
},
|
{
|
value: "批量代扣",
|
id: "302"
|
},
|
{
|
value: "协议代扣",
|
id: "303"
|
}
|
],
|
bank: [],
|
status: [
|
{
|
value: "正常",
|
id: 1
|
},
|
{
|
value: "关闭",
|
id: 0
|
}
|
],
|
direction: [
|
{
|
value: "支持",
|
id: 1
|
},
|
{
|
value: "拒绝",
|
id: 0
|
}
|
],
|
acctType: [],
|
maskData: {},
|
// channelData: [],
|
rules: {
|
channelId: [
|
{
|
required: true,
|
message: "该项选择不能为空",
|
trigger: "change"
|
}
|
],
|
transType: [
|
{
|
required: true,
|
message: "该项选择不能为空",
|
trigger: "change"
|
}
|
],
|
bankId: [
|
{
|
required: true,
|
message: "该项选择不能为空",
|
trigger: "change"
|
}
|
],
|
isAllow: [
|
{
|
required: true,
|
message: "该项选择不能为空",
|
trigger: "change"
|
}
|
],
|
amountPt: [
|
{
|
required: true,
|
validator: validateNumber,
|
trigger: "blur"
|
}
|
],
|
amountPd: [
|
{
|
required: true,
|
validator: validateNumber,
|
trigger: "blur"
|
}
|
],
|
amountPm: [
|
{
|
required: true,
|
validator: validateNumber,
|
trigger: "blur"
|
}
|
],
|
timesPd: [
|
{
|
required: true,
|
validator: validateNumber1,
|
trigger: "blur"
|
}
|
],
|
timesPm: [
|
{
|
required: true,
|
validator: validateNumber1,
|
trigger: "blur"
|
}
|
],
|
failsPd: [
|
{
|
required: true,
|
validator: validateNumber1,
|
trigger: "blur"
|
}
|
],
|
failsPm: [
|
{
|
required: true,
|
validator: validateNumber1,
|
trigger: "blur"
|
}
|
]
|
},
|
dialogVisible: this.value
|
};
|
},
|
|
props: {
|
clickType: {
|
type: String
|
},
|
detailData: {
|
type: Object,
|
default() {
|
return {};
|
}
|
},
|
channelDataMask: {
|
type: Array,
|
default() {
|
return [];
|
}
|
},
|
|
bankSelect: {
|
type: Array,
|
default() {
|
return [];
|
}
|
},
|
|
value: {
|
type: Boolean,
|
default: false
|
}
|
},
|
|
watch: {
|
value: function (n) {
|
this.dialogVisible = n;
|
if (n) {
|
this.getClickType();
|
}
|
}
|
},
|
created() {
|
// this.getChannelData();
|
},
|
|
methods: {
|
// 提交
|
submit(formName) {
|
this.$anti(this.maskData);
|
if (this.acctType.length >= 2) {
|
this.maskData.acctType = '2'
|
} else if (this.acctType.length == 0) {
|
this.maskData.acctType = '0'
|
} else {
|
this.maskData.acctType = this.acctType[0]
|
}
|
if (this.clickType == "edit") {
|
this.$http
|
.post("/bankLimit/updateBankLimit", this.maskData)
|
.then(response => {
|
this.$message.success("编辑成功");
|
this.close();
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
} else if (this.clickType == "add") {
|
this.$refs[formName].validate(valid => {
|
if (valid) {
|
this.$http
|
.post("/bankLimit/addBankLimit", this.maskData)
|
.then(response => {
|
if (response.data.retHeader.retCode != "0000") {
|
this.$message.warning("该条数据已经存在，请修改后重新提交");
|
} else {
|
this.$message.success("新增成功");
|
this.close();
|
}
|
});
|
} else {
|
return false;
|
}
|
});
|
}
|
},
|
|
// 获取机构数据
|
// getChannelData() {
|
// this.$http
|
// .post("/channel/getChannels", { institutionId: "", companyId: "" })
|
// .then(response => {
|
// if (response.data.retHeader.retCode === '0000') {
|
// this.channelData = response.data.retBody;
|
// } else {
|
// this.$message.error(response.data.retHeader.retMessage)
|
// }
|
// })
|
// .catch(err => {
|
// console.log(err);
|
// });
|
// },
|
// 取消
|
cancel() {
|
this.$emit("isCancel");
|
},
|
|
// 获取传过来的参数
|
getClickType() {
|
if (this.clickType == "view") {
|
this.title = "查看";
|
this.showBtn = false;
|
this.editShow = false;
|
this.selectShow = false;
|
this.addShow = false;
|
this.maskData = this.detailData;
|
if (this.detailData.acctType == '2') {
|
this.acctType = ['0', '1']
|
} else {
|
if (this.detailData.acctType != null) {
|
this.acctType = [this.detailData.acctType.toString()]
|
}
|
}
|
this.$mapData([this.maskData]);
|
} else if (this.clickType == "edit") {
|
this.title = "编辑";
|
this.selectShow = true;
|
this.editShow = true;
|
this.showBtn = true;
|
this.addShow = false;
|
this.maskData = this.detailData;
|
if (this.detailData.acctType == '2') {
|
this.acctType = ['0', '1']
|
} else {
|
if (this.detailData.acctType != null) {
|
this.acctType = [this.detailData.acctType.toString()]
|
}
|
}
|
this.$mapData([this.maskData]);
|
} else if (this.clickType == "add") {
|
this.title = "新增";
|
this.selectShow = true;
|
this.editShow = true;
|
this.showBtn = true;
|
this.addShow = true;
|
this.maskData = {
|
bankLimid: "",
|
bankId: "",
|
amountPt: "",
|
amountPd: "",
|
amountPm: "",
|
timesPd: "",
|
timesPm: "",
|
failsPd: "",
|
failsPm: "",
|
isAllow: null,
|
status: "",
|
transType: "",
|
channelId: ""
|
};
|
}
|
},
|
|
// 关闭
|
close() {
|
this.$emit("input", false);
|
}
|
}
|
};
|
</script>
|
|
|
<style lang="less" scoped>
|
.el-input {
|
width: 217px;
|
height: 40px;
|
}
|
|
.textItem {
|
height: 56px;
|
width: 100%;
|
padding: 8px;
|
.myText {
|
width: 217px;
|
padding: 0px 20px;
|
height: 36px;
|
border: none;
|
outline: none;
|
}
|
.myText[disabled] {
|
background-color: #fff;
|
}
|
.inputBorder {
|
border: 1px solid #ccc;
|
border-radius: 6px;
|
}
|
}
|
.line {
|
display: block;
|
width: 100%;
|
height: 1px;
|
background-color: black;
|
}
|
.notes {
|
margin-left: 8px;
|
}
|
.mynotes {
|
display: inline-block;
|
height: 100%;
|
font-size: 12px; // padding-top: 4px;
|
margin-left: 10px;
|
}
|
.btnGroup {
|
width: 160px;
|
height: 72px;
|
padding: 16px 0px;
|
margin-left: 50%;
|
transform: translateX(-60%);
|
}
|
</style>
|
