<template>
|
<div class="mask"
|
v-if="maskShow">
|
<div class="edit">
|
<el-form :model="value.channel"
|
:rules="rules"
|
ref="ruleForm"
|
label-width="100px"
|
class="demo-ruleForm">
|
<el-form-item class="formItem"
|
label="支付通道"
|
prop="channelName">
|
<input type="text"
|
name="asset"
|
v-model="value.channel.channelName"
|
disabled
|
v-if="!addShow">
|
<el-input v-model="value.channel.channelName"
|
placeholder="请输入内容"
|
v-if="addShow"
|
style="width: 197px;"></el-input>
|
</el-form-item>
|
<el-form-item class="formItem"
|
label="接入机构"
|
prop="institutionId">
|
<input type="text"
|
name=""
|
v-model="value.channel.institution"
|
v-if="!addShow"
|
disabled>
|
<el-select v-model="value.channel.institutionId"
|
placeholder="请选择"
|
v-if="addShow">
|
<el-option v-for="item in institutionSelect"
|
:key="item.institutionId"
|
:label="item.institution"
|
:value="item.institutionId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item class="formItem"
|
label="支付公司"
|
prop="companyId">
|
<input type="text"
|
name="asset"
|
v-model="value.channel.payCompany"
|
v-if="!addShow"
|
disabled>
|
<el-select v-model="value.channel.companyId"
|
placeholder="请选择"
|
v-if="addShow">
|
<el-option v-for="item in companySelect"
|
:key="item.companyId"
|
:label="item.payCompany"
|
:value="item.companyId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item prop="merId"
|
label="商户号">
|
<input type="text"
|
name="asset"
|
v-model="value.channel.merId"
|
v-if="selectShow"
|
disabled>
|
<el-input v-model.trim="value.channel.merId"
|
placeholder="请输入内容"
|
v-if="!selectShow"
|
style="width: 197px;"></el-input>
|
</el-form-item>
|
<el-form-item prop="termId"
|
label="终端号">
|
<input type="text"
|
name="asset"
|
v-model="value.channel.termId"
|
v-if="selectShow"
|
disabled>
|
<el-input v-model.trim="value.channel.termId"
|
placeholder="请输入内容"
|
v-if="!selectShow"
|
style="width: 197px;"></el-input>
|
</el-form-item>
|
<el-form-item class="formItem"
|
label="状态"
|
prop="status">
|
<input type="text"
|
name="asset"
|
:value="enumerMap(value.channel.status,'status')"
|
v-if="selectShow"
|
disabled>
|
<el-select v-model="value.channel.status"
|
placeholder="请选择"
|
v-if="!selectShow">
|
<el-option v-for="item in statusList"
|
:key="item.id"
|
:label="item.value"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<div class="canEdit">
|
<p>支持交易</p>
|
<div class="formItem">
|
<label for="asset">权鉴交易：</label>
|
<el-checkbox-group v-model="transList"
|
style="width: 86%; display: inline-block;"
|
:disabled="selectShow">
|
<el-checkbox label="105">二要素</el-checkbox>
|
<el-checkbox label="101">三要素</el-checkbox>
|
<el-checkbox label="102">四要素</el-checkbox>
|
<el-checkbox label="103">四要素+短信</el-checkbox>
|
<el-checkbox label="104">五要素+签约</el-checkbox>
|
</el-checkbox-group>
|
</div>
|
<div class="formItem">
|
<label for="asset">代扣交易：</label>
|
<el-checkbox-group v-model="transList"
|
style="width: 86%; display: inline-block;"
|
:disabled="selectShow">
|
<el-checkbox label="301">单笔代扣</el-checkbox>
|
<el-checkbox label="302">批量代扣</el-checkbox>
|
<el-checkbox label="303">协议代扣</el-checkbox>
|
<el-checkbox label="304">POS代扣</el-checkbox>
|
</el-checkbox-group>
|
</div>
|
<div class="formItem">
|
<label for="asset">代付交易：</label>
|
<el-checkbox-group v-model="transList"
|
style="width: 86%; display: inline-block;"
|
:disabled="selectShow">
|
<el-checkbox label="201">单笔代付</el-checkbox>
|
<el-checkbox label="202">批量代付</el-checkbox>
|
</el-checkbox-group>
|
</div>
|
<div class="formItem">
|
<label for="asset">代扣约束：</label>
|
<input type="text"
|
name="asset"
|
:value="enumerMap(value.channel.mustSign,'mustSign')"
|
disabled
|
v-if="selectShow">
|
<el-radio-group v-model="value.channel.mustSign"
|
v-if="!selectShow">
|
<el-radio :label="1">协议代扣绑定</el-radio>
|
<el-radio :label="0">无限制</el-radio>
|
</el-radio-group>
|
</div>
|
<div class="formItem">
|
<label for="asset">分账标志：</label>
|
<input type="text"
|
name="asset"
|
:value="enumerMap(value.channel.split,'split')"
|
disabled
|
v-if="selectShow">
|
<el-radio-group v-model="value.channel.split"
|
v-if="!selectShow">
|
<el-radio :label="1">支持</el-radio>
|
<el-radio :label="0">不支持</el-radio>
|
</el-radio-group>
|
</div>
|
<div class="formItem">
|
<label for="asset">对公私支持：</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>
|
</div>
|
</div>
|
</el-form>
|
<div class="formBtn">
|
<div>
|
<el-button v-if="!selectShow"
|
@click="submit('ruleForm')">提交</el-button>
|
<el-button @click="cancel">取消</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters, mapMutations } from "vuex";
|
|
export default {
|
data() {
|
var checkNum = (rule, value, callback) => {
|
value = Number(value);
|
if (/^[0-9]+.?[0-9]*$/.test(value)) {
|
callback();
|
} else {
|
callback(new Error("请输入数字"));
|
}
|
};
|
return {
|
addShow: true,
|
maskShow: false,
|
selectShow: true,
|
value: {},
|
acctType: [],
|
transList: [],
|
statusList: [
|
{
|
value: "关闭",
|
id: 0
|
},
|
{
|
value: "正常",
|
id: 1
|
}
|
],
|
rules: {
|
merId: [
|
{
|
required: true,
|
message: "请输入内容",
|
trigger: "blur"
|
},
|
],
|
termId: [
|
{
|
required: false,
|
message: "请输入内容",
|
trigger: "blur"
|
},
|
],
|
channelName: [
|
{
|
required: true,
|
message: "请输入内容",
|
trigger: "blur"
|
}
|
],
|
institutionId: [
|
{
|
required: true,
|
message: "你还没有选择",
|
trigger: "change"
|
}
|
],
|
companyId: [
|
{
|
required: true,
|
message: "你还没有选择",
|
trigger: "change"
|
}
|
],
|
status: [
|
{
|
required: true,
|
message: "你还没有选择",
|
trigger: "change"
|
}
|
]
|
}
|
};
|
},
|
props: ["clickType", "companySelect", "institutionSelect", "dataId", 'showMask'],
|
created() {
|
this.getParentData();
|
},
|
watch: {
|
showMask: function (n) {
|
if (this.clickType == "view") {
|
this.addShow = false;
|
this.selectShow = true;
|
if (!n) return;
|
this.getDetailData(this.dataId);
|
} else if (this.clickType == "edit") {
|
this.addShow = false;
|
this.selectShow = false;
|
if (!n) return;
|
this.getDetailData(this.dataId);
|
}
|
},
|
clickType: function (n) {
|
if (n === "add") {
|
this.selectShow = false;
|
this.addShow = true;
|
this.maskShow = true;
|
this.transList = [];
|
this.value = {
|
channel: {
|
channelName: "",
|
institution: "",
|
institutionId: "",
|
payCompany: "",
|
merId: "",
|
split: ""
|
},
|
transChannelList: [
|
{
|
channelId: "",
|
companyId: "",
|
status: "",
|
transId: "",
|
transType: ""
|
}
|
]
|
};
|
}
|
}
|
},
|
methods: {
|
// 取消
|
cancel() {
|
this.$emit("hide");
|
},
|
// 提交
|
submit(formname) {
|
this.value.transChannelList = [];
|
this.value.channel.transList = this.transList.join(";");
|
if (this.acctType.length >= 2) {
|
this.value.channel.acctType = '2'
|
} else if (this.acctType.length == 0) {
|
this.value.channel.acctType = '0'
|
} else {
|
this.value.channel.acctType = this.acctType[0]
|
}
|
if (this.clickType == "edit") {
|
this.$http
|
.post("channel/updateChannel", this.value)
|
.then(response => {
|
if (response.data.retHeader.retCode === '0000') {
|
// alert("该条数据已存在，请修改后重新提交");
|
} else {
|
this.$message.error(response.data.retHeader.retMessage)
|
}
|
this.cancel();
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
} else if (this.clickType == "add") {
|
for (var i = 0; i < this.companySelect.length; i++) {
|
if (this.value.channel.companyId == this.companySelect[i].companyId) {
|
this.value.channel.payCompany = this.companySelect[i].payCompany;
|
}
|
}
|
for (var i = 0; i < this.institutionSelect.length; i++) {
|
if (
|
this.value.channel.institutionId ==
|
this.institutionSelect[i].institutionId
|
) {
|
this.value.channel.institution = this.institutionSelect[
|
i
|
].institution;
|
}
|
}
|
this.$refs[formname].validate(valid => {
|
if (valid) {
|
this.$http
|
.post("channel/addChannel", this.value)
|
.then(response => {
|
if (response.data.retHeader.retCode === '0000') {
|
// alert("该条数据已存在，请修改后重新提交");
|
} else {
|
this.$message.error(response.data.retHeader.retMessage)
|
}
|
this.cancel();
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
}
|
});
|
}
|
},
|
// 获取父组件传递过来的数据
|
getParentData() {
|
if (this.clickType == "view") {
|
this.addShow = false;
|
this.selectShow = true;
|
this.getDetailData(this.dataId);
|
} else if (this.clickType == "edit") {
|
this.addShow = false;
|
this.selectShow = false;
|
this.getDetailData(this.dataId);
|
} else if (this.clickType == "add") {
|
this.selectShow = false;
|
this.addShow = true;
|
this.maskShow = true;
|
this.value = {
|
channel: {
|
channelName: "",
|
institution: "",
|
institutionId: "",
|
payCompany: "",
|
merId: "",
|
split: ""
|
},
|
transChannelList: [
|
{
|
channelId: "",
|
companyId: "",
|
status: "",
|
transId: "",
|
transType: ""
|
}
|
]
|
};
|
}
|
},
|
// 请求数据
|
getDetailData(id) {
|
this.$http
|
.post(`channel/getChannel`, { channelId: id })
|
.then(response => {
|
if (response.data.retHeader.retCode === '0000') {
|
this.maskShow = true;
|
this.value = response.data.retBody;
|
if (response.data.retBody.channel.transList != null) {
|
this.transList = response.data.retBody.channel.transList.split(";");
|
}
|
if (!response.data.retBody.channel.acctType) {
|
this.acctType = ['0']
|
} else if (response.data.retBody.channel.acctType == '2') {
|
this.acctType = ['0', '1']
|
} else {
|
this.acctType = [response.data.retBody.channel.acctType.toString()]
|
}
|
} else {
|
this.$message.error(response.data.retHeader.retMessage)
|
}
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
}
|
}
|
};
|
</script>
|
|
|
<style lang="less" scoped>
|
.mask {
|
.edit {
|
background-color: #fff;
|
padding: 16px;
|
border-radius: 6px;
|
margin-bottom: 20px;
|
> form {
|
border-bottom: 1px solid #ccc;
|
margin-bottom: 12px;
|
}
|
.formBtn {
|
width: 100%;
|
height: 30px;
|
> div {
|
text-align: center;
|
// margin-left: 50%;
|
// transform: translateX(-50%);
|
button {
|
padding: 8px 20px;
|
}
|
}
|
}
|
.formItem {
|
width: 80%;
|
height: 50px;
|
padding: 8px 0px;
|
> label {
|
display: inline-block;
|
width: 12%;
|
text-align: right;
|
font-size: 14px;
|
}
|
input {
|
width: 217px;
|
height: 100%; // margin-left: 12px;
|
border: none;
|
outline: none;
|
}
|
input:disabled {
|
background-color: #fff;
|
}
|
input.width {
|
border: 1px solid #ccc;
|
border-radius: 4px;
|
}
|
}
|
.canEdit {
|
border-top: 1px solid #ccc;
|
padding-top: 6px;
|
}
|
}
|
}
|
</style>
|
