<template>
|
<el-dialog class="mask" :visible.sync="dialogVisible" width="80%" ref="dialog" @close="close">
|
<div class="viewLayer">
|
<h5>{{title}}</h5>
|
<el-form
|
:model="Data"
|
:rules="rules"
|
ref="ruleForm"
|
label-width="100px"
|
class="demo-ruleForm"
|
>
|
<el-form-item class="textItem" label="支付通道" prop="channelId">
|
<input
|
type="text"
|
v-if="!addShow"
|
v-model="Data.channelName"
|
class="myText"
|
:disabled="selectShow&&editShow"
|
/>
|
<el-select placeholder="请选择" v-model="Data.channelId" clearable v-if="addShow&&editShow">
|
<el-option
|
v-for="(item,index) in channelData"
|
: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"
|
v-model="Data.transType"
|
:disabled="selectShow&&editShow"
|
/>
|
<el-select placeholder="请选择" clearable v-if="addShow&&editShow" v-model="Data.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="successRate">
|
<input
|
type="text"
|
v-if="!selectShow"
|
v-model="Data.successRate"
|
class="myText"
|
:disabled="!selectShow"
|
/>
|
<el-input
|
placeholder="请输入内容"
|
v-model.number="Data.successRate"
|
v-if="addShow || editShow"
|
></el-input>
|
<span class="notes">(0至1)</span>
|
</el-form-item>
|
<span class="line"></span>
|
<h5>通道限额</h5>
|
<p>支付公司对商户接入商户号的成功订单金额限制</p>
|
<el-form-item class="textItem" label="单笔限额" prop="amountPt">
|
<input
|
type="text"
|
v-if="!selectShow"
|
class="myText"
|
:disabled="!selectShow"
|
v-model="Data.amountPt"
|
/>
|
<el-input placeholder="请输入内容" v-model="Data.amountPt" v-if="addShow || editShow"></el-input>
|
</el-form-item>
|
<el-form-item class="textItem" label="单日限额" prop="amountPd">
|
<input
|
type="text"
|
v-if="!selectShow"
|
v-model="Data.amountPd"
|
class="myText"
|
:disabled="!selectShow"
|
/>
|
<el-input placeholder="请输入内容" v-model="Data.amountPd" v-if="addShow || editShow"></el-input>
|
</el-form-item>
|
<el-form-item class="textItem" label="单月限额" prop="amountPm">
|
<input
|
type="text"
|
v-if="!selectShow"
|
v-model="Data.amountPm"
|
class="myText"
|
:disabled="!selectShow"
|
/>
|
<el-input placeholder="请输入内容" v-model="Data.amountPm" v-if="addShow || editShow"></el-input>
|
</el-form-item>
|
<span class="line"></span>
|
<h5>通道限次</h5>
|
<p>支付公司对商户接入商户号的成功订单限制</p>
|
<el-form-item class="textItem" label="单日限次" prop="timesPd">
|
<input
|
type="text"
|
v-if="!selectShow"
|
v-model="Data.timesPd"
|
class="myText"
|
:disabled="!selectShow"
|
/>
|
<el-input placeholder="请输入内容" v-model="Data.timesPd" v-if="addShow || editShow"></el-input>
|
</el-form-item>
|
<el-form-item class="textItem" label="单月限次" prop="timesPm">
|
<input
|
type="text"
|
v-if="!selectShow"
|
v-model="Data.timesPm"
|
class="myText"
|
:disabled="!selectShow"
|
/>
|
<el-input placeholder="请输入内容" v-model="Data.timesPm" v-if="addShow || editShow"></el-input>
|
<!-- <span class="notes">(0为不限制)</span> -->
|
</el-form-item>
|
<span class="line"></span>
|
</el-form>
|
<div class="btnGroup">
|
<el-button @click="submit('ruleForm')" v-if="showBtn">提交</el-button>
|
<el-button @click="cancel">取消</el-button>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex";
|
|
export default {
|
data() {
|
var checkFloat = (rule, value, callback) => {
|
if (!/^0+(?:\.\d{1,2})?$/.test(value)) {
|
callback(new Error("请输入0-1之间的数字，保留两位小数"));
|
} else {
|
callback();
|
}
|
};
|
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: "",
|
Data: {},
|
institution: "",
|
channelData: [],
|
transType: [
|
{
|
value: "鉴权",
|
id: "100"
|
},
|
{
|
value: "代扣",
|
id: "300"
|
},
|
{
|
value: "代付",
|
id: "200"
|
}
|
],
|
success: ["1", "2", "3", "4", "5", "6"],
|
rules: {
|
channelId: [
|
{ required: true, message: "该项为必选项", trigger: "change" }
|
],
|
transType: [
|
{ required: true, message: "该项为必选项", trigger: "change" }
|
],
|
successRate: [
|
{ type: "number", message: "输入内容必须为数字" },
|
{ validator: checkFloat, trigger: "blur" }
|
],
|
amountPt: [
|
{
|
validator: validateNumber,
|
trigger: "blur"
|
}
|
],
|
amountPd: [
|
{
|
validator: validateNumber,
|
trigger: "blur"
|
}
|
],
|
amountPm: [
|
{
|
validator: validateNumber,
|
trigger: "blur"
|
}
|
],
|
timesPd: [
|
{
|
validator: validateNumber1,
|
trigger: "blur"
|
}
|
],
|
timesPm: [
|
{
|
validator: validateNumber1,
|
trigger: "blur"
|
}
|
]
|
},
|
dialogVisible: this.value
|
};
|
},
|
|
props: {
|
detailData: {
|
type: [Object, String],
|
default() {
|
return {};
|
}
|
},
|
clickType: {
|
type: String,
|
default: "view"
|
},
|
|
value: {
|
type: Boolean,
|
default: false
|
}
|
},
|
|
watch: {
|
value: function (n) {
|
this.dialogVisible = n;
|
if (n) {
|
this.getClickType();
|
}
|
}
|
},
|
|
created() {
|
this.getChannelData();
|
},
|
methods: {
|
// 提交
|
submit(formName) {
|
for (var i = 0; i < this.detailData.length; i++) {
|
if (this.Data.channelId == this.detailData[i].channelId) {
|
this.Data.payCompany = this.detailData[i].payCompany;
|
this.Data.companyId = this.detailData[i].companyId;
|
this.Data.institution = this.detailData[i].institution;
|
this.Data.institutionId = this.detailData[i].institutionId;
|
this.Data.channelName = this.detailData[i].channelName;
|
}
|
}
|
this.$anti(this.Data);
|
if (this.clickType == "edit") {
|
this.$refs[formName].validate(valid => {
|
if (valid) {
|
this.$http
|
.post("/channelLimit/updateChannelLimit", this.Data)
|
.then(response => {
|
if (response.data.retHeader.retCode === '0000') {
|
this.$message.success("编辑成功");
|
this.close();
|
} else {
|
this.$message.warning(response.data.retHeader.retMessage);
|
}
|
})
|
.catch(err => {
|
this.close();
|
console.log(err);
|
});
|
} else {
|
return false;
|
}
|
});
|
} else if (this.clickType == "add") {
|
this.$refs[formName].validate(valid => {
|
if (valid) {
|
this.$http
|
.post("/channelLimit/addChannelLimit", this.Data)
|
.then(response => {
|
if (response.data.retHeader.retCode === '0000') {
|
this.$message.success("新增成功");
|
this.close();
|
} else {
|
this.$message.warning(response.data.retHeader.retMessage);
|
}
|
})
|
.catch(err => {
|
this.close();
|
});
|
} else {
|
return false;
|
}
|
});
|
}
|
},
|
// 取消
|
cancel() {
|
this.$emit("showMask");
|
},
|
// 获取点击类型
|
getClickType() {
|
if (this.clickType == "view") {
|
this.title = "查看";
|
this.showBtn = false;
|
this.editShow = false;
|
this.selectShow = false;
|
this.addShow = false;
|
this.Data = this.detailData;
|
this.$mapData([this.Data]);
|
} else if (this.clickType == "add") {
|
this.title = "新增";
|
this.selectShow = true;
|
this.editShow = true;
|
this.showBtn = true;
|
this.addShow = true;
|
this.Data = {
|
channelLimid: null,
|
successRate: null,
|
amountPt: null,
|
amountPd: null,
|
amountPm: null,
|
timesPd: null,
|
timesPm: null,
|
transType: null,
|
channelId: null,
|
channelName: null,
|
institution: null,
|
payCompany: null,
|
companyId: null,
|
institutionId: ""
|
};
|
} else if (this.clickType == "edit") {
|
this.title = "编辑";
|
this.selectShow = true;
|
this.editShow = true;
|
this.showBtn = true;
|
this.addShow = false;
|
this.Data = this.detailData;
|
this.$mapData([this.Data]);
|
}
|
},
|
// 获取机构数据
|
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);
|
});
|
},
|
|
// 关闭
|
close() {
|
this.$refs["ruleForm"].resetFields();
|
this.$emit("input", false);
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.el-input {
|
width: 217px;
|
height: 40px;
|
}
|
.mask {
|
width: 100%;
|
height: 100%;
|
z-index: 5;
|
overflow: auto;
|
.viewLayer {
|
width: 100%;
|
margin: 30px auto 0px;
|
background-color: #fff;
|
border-radius: 6px;
|
padding: 16px;
|
font-size: 14px;
|
.textItem {
|
height: 56px;
|
width: 100%;
|
padding: 8px;
|
> label {
|
display: inline-block;
|
width: 100px;
|
height: 40px;
|
text-align: right;
|
line-height: 40px;
|
}
|
.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;
|
}
|
> h5 {
|
font-size: 18px;
|
margin: 6px 0px;
|
}
|
.notes {
|
margin-left: 8px;
|
}
|
.btnGroup {
|
width: 160px;
|
height: 72px;
|
padding: 16px 0px;
|
margin-left: 50%;
|
transform: translateX(-60%);
|
}
|
}
|
}
|
</style>
|
