<style scoped>
._scrollbar::-webkit-scrollbar{width: 4px;height: 8px;}
._scrollbar::-webkit-scrollbar-thumb{border-radius: 4px;box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);background: #c9c9c9;}
._scrollbar::-webkit-scrollbar-track{box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #EDEDED;}
.page_paySetting ._edHeight{height:430px;}
.page_paySetting .edHeight{display: block !important;height: 290px;}
.page_paySetting ._vMG_edit{overflow: auto;display: none;position:absolute;bottom:0;left: 0;font-family: 'PingFangSc-Fine';border-top:3px solid #38425d;background-color:#FFFFFF;padding:10px;width: 100%;}
.page_paySetting ._vMG_edit ._tit{padding-left: 10px;border-left: 3px solid #E95252; font-size: 16px;color: #000000}
.page_paySetting ._vMG_edit ._tit span{color: #666666}
.page_paySetting ._vMG_edit form{padding: 25px 0}
.page_paySetting .query-box .h34{line-height: 34px;}
.page_paySetting ._add_saveBtn{text-align: right;padding-top: 10px}
.page_paySetting_content{overflow-x: auto;}
.page_paySetting_item{width:260px;margin-top: 25px;background:linear-gradient(-30deg,rgba(149,126,247,1),rgba(21,123,238,1));border-radius:4px;padding: 15px;float: left;margin-right: 17px}
.ps_num{font-size:20px;color: #FFFFFF; font-weight: bold;width: 70%;text-align: right;float: left}
.ps_btn{color: #9AB0F8;width: 21%;text-align: right;float: right;padding-top: 2px;cursor: pointer;}
.ps_btn i{margin-right: 10px;font-size: 14px;}
.ps_com{width:230px;background:rgba(0,0,0,0.2);font-size:12px;color: #E2E5F4;padding: 6px;display: flex;margin-top: 30px}
.ps_com p:nth-child(1){flex: 1}
.ps_com p:nth-child(2){flex: 2;text-align: right}
.ps_adr{color: #B1B6FA;font-size: 12px;margin-top: 20px;text-align: left;padding-left: 7px;}
.ps_adr span:nth-child(1){display: inline-block;width: 60px;}
.ps_adr span:nth-child(2){max-width: 158px;}
.page_paySetting .po_content{
border-collapse: collapse;
}
.page_paySetting .po_content{
width: 100%;
}
.page_paySetting .po_content tr:first-child{
font-size: 12px;
color: #666666;
background-color: #DCDCDC;
}
.page_paySetting .po_content tr th,.page_paySetting .po_content tr td{
padding: 10px 20px;
text-align: left;
}
.page_paySetting .po_content tr td{
color: #333333;
font-size: 14px;
border:1px solid #E6E6E6;
}
.page_paySetting .po_content tr td .iconfont{
font-size: 14px;
padding: 4px;
}
.page_paySetting .query-box .iconfont{
cursor: pointer;
background-color: #E95252;
color: white;
width: 30px;
height: 30px;
display: inline-block;
text-align: center;
line-height: 30px;
border-radius: 50%;
margin-left: 10px;
}
</style>
<template>
<div class="page_paySetting">
<div class="query-box">
<ul>
<li>
<span>
<em>{{$t('fnc.shanghuhao')}}：</em>
<el-input placeholder="" class="w210" v-model="msg.Mch_Id"></el-input>
</span>
</li>
<li>
<button class="hollowFixedBtn" @click="resetPageIndex(),getList()">{{$t('pub.searchBtn')}}</button>
<button class="normalBtn" @click="addShow=true,text=$t('pub.addBtn'),IsAdd=true,cancelEdit(),disabledOption()" >{{$t('pub.addBtn')}}</button>
<el-tooltip class="item" effect="dark" :content="$t('fnc.qhpaiban')" placement="top-end">
<i v-if="transitionShow" class="iconfont icon-biaoge" @click="switchMethod(1)"></i>
<i v-if="transitionShow2" class="iconfont icon-icon-ssan" @click="switchMethod(2)"></i>
</el-tooltip>
</li>
</ul>
</div>
<div class="page_paySetting_content _scrollbar" :class="addShow==true?'_edHeight':''">
<div class="clearfix" v-if="transitionShow" v-loading="loading">
<div class="page_paySetting_item" v-for="(item,index) in dataList">
<div class="clearfix">
<el-tooltip class="item" effect="dark" :content="item.Mch_Id" placement="top-end">
<p class="over_ellipsis ps_num PingFangSC">{{item.Mch_Id}}</p>
</el-tooltip>
<p class="ps_btn">
<i class="iconfont icon-bianji-smal" @click="editPay(item.ID),text=$t('pub.updateMsg'),IsAdd=false,addShow=true,OnlinePay_post_GetBranchList(item.ID)"></i>
<i class="iconfont icon-img_delete_small" @click="deletePay(item.ID,item.Mch_Id)"></i>
</p>
</div>
<div class="ps_com">
<p>{{$t('system.query_company')}}：</p>
<el-tooltip class="item" effect="dark" :content="item.allName" placement="top-end">
<p class="over_ellipsis">
<template v-for="(son,si) in item.BranchName">
{{son}}
</template>
</p>
</el-tooltip>
</div>
<p class="ps_adr">
<span>{{$t('fnc.qqdizhi')}}：</span>
<el-tooltip class="item" effect="dark" :content="item.Req_URL" placement="top-end">
<span class="over_ellipsis">{{item.Req_URL}}</span>
</el-tooltip>
</p>
</div>
</div>
<table class="po_content singeRowTable" style="border:1px solid #E6E6E6;" cellspacing="0" cellpadding="0" v-if="transitionShow2" v-loading="loading">
<tr>
<th>{{$t('fnc.shanghuhao')}}</th>
<th>{{$t('fnc.qqdizhi')}}</th>
<!-- <th>版本号</th> -->
<th>{{$t('fnc.zhanghuleixing')}}</th>
<!-- <th>账户分类</th> -->
<!-- <th>账户</th>
<th>所属公司</th> -->
<th>{{$t('system.table_operation')}}</th>
</tr>
<tr v-for="(item,index) in dataList" :key="index">
<td>{{item.Mch_Id}}</td>
<td>{{item.Req_URL}}</td>
<!-- <td>{{item.ClientName}}</td> -->
<td>{{item.AccountType}}</td>
<!-- <td>{{item.ClientName}}</td>
<td>{{item.ClientName}}</td> -->
<!-- <td>{{item.ClientName}}</td> -->
<td>
<el-row>
<el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top-start">
<el-button type="primary" class="iconfont icon-bianji-smal" circle @click="editPay(item.ID),text=$t('pub.updateMsg'),IsAdd=false,addShow=true,OnlinePay_post_GetBranchList(item.ID)"></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
<el-button type="danger" class="iconfont icon-img_delete_small" circle @click="deletePay(item.ID,item.Mch_Id)"></el-button>
</el-tooltip>
</el-row>
</td>
</tr>
</table>
<div class="noData" v-show="noData" >
{{$t('system.content_noData')}}
</div>
<div>
<el-pagination
background
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
layout="total,prev, pager, next, jumper"
:page-size=msg.pageSize
:total=total>
</el-pagination>
</div>
</div>
<div class="_vMG_edit" :class="addShow==true?'edHeight':''">
<p class="_tit">{{text}}{{$t('fnc.zfxinxi')}}</p>
<el-form :model="addMsg" ref="addMsg" :rules="rules" label-width="100px">
<el-row>
<el-col :span="6" :gutter="35">
<el-form-item :label="$t('fnc.shanghuhao')+'：'" prop="Mch_Id">
<el-input v-model="addMsg.Mch_Id" class="" ></el-input>
</el-form-item>
</el-col>
<el-col :span="6" :gutter="35">
<el-form-item :label="$t('fnc.shsiyao')+'：'" prop="Mch_PrivateKey">
<el-input v-model="addMsg.Mch_PrivateKey" class="" ></el-input>
</el-form-item>
</el-col>
<el-col :span="6" :gutter="35">
<el-form-item :label="$t('fnc.ptgongyao')+'：'" prop="Wft_PublicKey">
<el-input v-model="addMsg.Wft_PublicKey" class="" ></el-input>
</el-form-item>
</el-col>
<el-col :span="6" :gutter="35">
<el-form-item :label="$t('fnc.qqdizhi')+'：'" prop="Req_URL">
<el-input v-model="addMsg.Req_URL" class="" ></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6" :gutter="35">
<el-form-item :label="$t('fnc.banbenhao')+'：'" prop="Version">
<el-input v-model="addMsg.Version" class="" ></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :label="$t('fnc.zhanghuleixing')+'：'" prop="AccountType" >
<el-select filterable v-model='addMsg.AccountType' @change="claerAcc()">
<el-option v-for='item in AccList'
:label='item.Name'
:value='item.ID'
:key='item.ID'>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :label="$t('fnc.zhfenlei')+'：'" prop="BankType">
<el-select filterable v-model='addMsg.BankType' @change="getAccountList(addMsg.BankType,1)">
<el-option v-for='item in GetAccountType'
:label='item.Name'
:value='item.ID'
:key='item.ID'>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :label="$t('fnc.acc')+'：'" prop="BankID">
<el-select filterable v-model='addMsg.BankID'>
<el-option v-for='item in accountList'
:label='item.allName'
:value='item.ID'
:key='item.ID'>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="7" :gutter="35">
<el-form-item :label="$t('fnc.ssuogongsi')+'：'" prop="seleRelationList">
<el-select filterable multiple collapse-tags v-model='addMsg.seleRelationList' @change="disabledOption" class="seleRelationList">
<el-option :label='$t("active.cl_tongyong")' value='-1' key='-1' :disabled="allDisabled&&IsAdd"></el-option>
<el-option v-for='item in CompanyList'
:label='item.BName'
:value='item.Id'
:key='item.Id'
:disabled="item.disabled">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :label="$t('admin.admin_status')+'：'" >
<el-switch v-model="addMsg.Status" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
</el-col>
<el-col :span="6" :offset="11" class="_add_saveBtn">
<button type="button" class="normalBtn" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
<button class="hollowFixedBtn" type="button" @click="cancelEdit(),addShow=false,resetForm('addMsg')">{{$t('pub.cancelBtn')}}</button>
</el-col>
</el-row>
</el-form>
</div>
</div>
</template>
<script>
export default {
data(){
return{
noData:false,
addShow:false,
total:0,
currentPage:1,
dataList:[],
text:'',
msg:{
pageIndex:1,
pageSize:24,
BranchId:'',
Mch_Id:'',
},
addMsg:{
ID:0,
Mch_Id:'',
Mch_PrivateKey:'',
Wft_PublicKey:'',
Req_URL:'',
Version:'',
RelationList:[],//1-通用2-选项公司
seleRelationList:[],
BankID:'',
BankType:'',
AccountType:'',
Status:'0',
},
CompanyList:[],
AccList:[],
GetAccountType:[],
accountList:[],
OnlinePayList:[],
getCompanyMsg:{
RB_Group_Id:'0',
Status:'0',
},
allDisabled:false,
IsAdd:false,
rules: {//表单必填验证
Mch_Id: [
{ required: true, message: this.$t('rule.qsrshuhao'), trigger: 'blur' }
],
Mch_PrivateKey: [
{ required: true, message: this.$t('rule.qsrshsyao'), trigger: 'blur' }
],Wft_PublicKey: [
{ required: true, message: this.$t('rule.qsrptsiyao'), trigger: 'blur' }
],Req_URL: [
{ required: true, message: this.$t('rule.qsrqqdizhi'), trigger: 'blur' }
],Version: [
{ required: true, message: this.$t('rule.qsrbbenhao'), trigger: 'blur' }
],seleRelationList: [
{ required: true, message: this.$t('rule.qxzssgongsi'), trigger: 'change' }
],AccountType: [
{ required: true, message: this.$t('rule.qxzshleixing'), trigger: 'change' }
],BankType: [
{ required: true, message: this.$t('rule.qxzzhfenlei'), trigger: 'change' }
]
,BankID: [
{ required: true, message: this.$t('rule.qxzzhanghu'), trigger: 'change' }
]
},
transitionShow:false,
transitionShow2:true,
contenWidth:0,
contenHeight:0,
loading:false,
tableSize:0,
blockSize:0,
}
},created(){
let allH,allW,cH,cW;
allH = document.documentElement.clientHeight;
allW = document.documentElement.clientWidth;
cW = allW-90;
cH = allH-255; //255 = 顶部导航 50 面包屑40 查询框75 table表头41 分页49
this.contenWidth = cW;
this.contenHeight = cH;
this.tableSize = this.msg.pageSize = parseInt(cH/45)-1;
},
methods:{
switchMethod(t){
this.msg.pageIndex = 1;
if(t===1){
this.transitionShow = false;
this.transitionShow2 = true;
this.msg.pageSize = this.tableSize;
this.getList();
}else if(t===2){
this.transitionShow = true;
this.transitionShow2 = false;
// 宽 260 高 152
let cont = parseInt(this.contenWidth/260) * parseInt(this.contenHeight/152);
this.msg.pageSize = cont;
this.getList();
}
},
OnlinePay_post_GetBranchList(ID){ // 获取已经选择的公司
if(!ID) return;
this.addMsg.seleRelationList=[];
this.apipost('OnlinePay_post_GetBranchList',{ID:ID}, res => {
if(res.data.resultCode == 1) {
let data = res.data.data;
// this.OnlinePayList = data;
data.forEach(x=>{
if(x.Branch_Id==0&&x.Type==1){
this.OnlinePayList.push('-1');
}else{
this.OnlinePayList.push(x.Branch_Id.toString());
}
});
this.OnlinePayList.forEach(x=>{
if(x=='-1'){
this.addMsg.seleRelationList=[];
this.addMsg.seleRelationList.push('-1');
this.allDisabled = true;
this.CompanyList.forEach(y=>{
y.disabled=true;
})
}else{
this.CompanyList.forEach(y=>{
if(y.Id==x){
y.disabled=true;
}
})
}
this.$forceUpdate();
})
}
}, err => {})
},
claerAcc(){ //清除
this.addMsg.BankID = '';
this.addMsg.BankType = '';
},
getAccountList(i,o){ //获取账户类型对应下的账户列表
if(o==1){
this.addMsg.BankID = '';
}
if(this.addMsg.AccountType){
if(i==1){
this.bankaccount_post_GetList()
}
if(i==2){
this.BankAccount_post_GetPlatformList()
}
if(i==3){
this.BankAccount_post_GetCashAccountList()
}
if(i==4){
this.BankAccount_post_GetCashPoolList()
}
}else{
return this.$message.success(this.$t('tips.qxzzhleixing'))
}
},
BankAccount_post_GetPlatformList(i){ //获取平台账户
let msg = {
BackId:0,
TypeId:this.addMsg.AccountType,
BranchId:-1,
Alias:'',
RB_Branch_Id:this.RB_Branch_Id,
}
this.apipost('BankAccount_post_GetPlatformList',msg, res => {
if(res.data.resultCode == 1) {
let data = res.data.data;
data.forEach(x=>{
x.allName = x.PlatformNo+"("+x.Alias+")";
x.Name = x.Alias;
})
this.accountList = data;
}
}, err => {})
},
BankAccount_post_GetCashAccountList(i){ // 获取现金账户
let msg = {
TypeId:this.addMsg.AccountType,
BranchId:-1,
Alias:'',
RB_Branch_Id:this.RB_Branch_Id,
};
this.apipost('BankAccount_post_GetCashAccountList',msg, res => {
if(res.data.resultCode == 1) {
let data = res.data.data;
data.forEach(x=>{
x.allName = x.Alias;
x.Name = x.Alias;
});
this.accountList = data;
}
}, err => {})
},
bankaccount_post_GetList(i){ // 获取银行账户
this.apipost('bankaccount_post_GetList',{TypeId:this.addMsg.AccountType,RB_Branch_Id:this.RB_Branch_Id,}, res => {
if(res.data.resultCode == 1) {
let data = res.data.data;
data.forEach(x=>{
x.allName = x.BackNo+"("+x.Openingbank+")";
x.Name = x.Alias;
});
this.accountList = data;
}
}, err => {})
},
BankAccount_post_GetCashPoolList(i){ // 获取资金池账
this.apipost('BankAccount_post_GetCashPoolList',{TypeId:this.addMsg.AccountType,BranchId:-1,Alias:'',RB_Branch_Id:this.RB_Branch_Id,}, res => {
if(res.data.resultCode == 1) {
let data = res.data.data;
data.forEach(x=>{
x.allName = x.Alias;
x.Name = x.Alias;
});
this.accountList = data;
}
}, err => {})
},
BankAccount_post_GetAccountType(){ //获取账户类型列表
this.apipost('BankAccount_post_GetAccountType',{}, res => {
if(res.data.resultCode == 1) {
this.GetAccountType = res.data.data;
}
}, err => {})
},
AccountType_post_GetList(){ //获取账户类型下拉
this.apipost('AccountType_post_GetList',this.queryAccMsg,res=>{
if(res.data.resultCode==1){
this.AccList = res.data.data;
}else{
this.$message.error(res.data.message);
}
},err=>{})
},
editPay(ID){ // 修改
this.apipost('OnlinePay_post_Get',{ID:ID}, res => {
if(res.data.resultCode == 1) {
let data = res.data.data;
data.seleRelationList = [];
data.RelationList.forEach(x=>{
if(x.Type==1){
data.seleRelationList.push('-1')
}else{
data.seleRelationList.push(x.Branch_Id.toString())
}
});
this.addMsg = data;
this.getAccountList(this.addMsg.BankType,2);
this.disabledOption();
}else{
this.$message.error(res.data.message);
}
}, err => {})
},
deletePay(ID,Name){ //删除
this.$confirm(this.$t('tips.shifoushanchu')+'‘'+Name+'’'+this.$t('tips.dzfpzxxdelete'), this.$t('tips.tips'), {
confirmButtonText: this.$t('pub.sureBtn'),
cancelButtonText: this.$t('pub.cancelBtn'),
type: 'warning'
}).then(() => {
this.apipost('OnlinePay_post_Remove',{ID:ID}, res => {
if(res.data.resultCode == 1) {
this.getList();
this.$message.success(res.data.message);
}else{
this.$message.error(res.data.message);
}
}, err => {})
}).catch(() => {
this.$message({
type: 'info',
message: this.$t('hotel.hotel_HasBeenCancelled')
});
});
},
submitForm(addMsg) {//提交创建、修改表单
this.$refs[addMsg].validate((valid) => {
if (valid) {
this.OnlinePay_post_Set()
} else {
return false;
}
});
},
disabledOption(){ // 选择公司 如果选择通用则禁用其它选项
if(this.addMsg.seleRelationList.length === 0) {
this.CompanyList.forEach(y=>{
y.disabled=false
});
return
}
this.addMsg.seleRelationList.forEach(x=> {
if(x === '-1'){
this.addMsg.seleRelationList=[];
this.addMsg.seleRelationList.push('-1');
this.CompanyList.forEach(y=> {
y.disabled=true
})
}
})
},
getCompanyList(){ //获取公司列表
this.apipost('admin_get_BranchGetList',this.getCompanyMsg,res=>{
if(res.data.resultCode===1) {
let data = res.data.data;
data.forEach(x=>{
x.Id=x.Id.toString()
});
this.CompanyList=res.data.data;
}else{}
},err=>{})
},
cancelEdit(){ // 取消重置
this.addMsg = {
ID:0,
Mch_Id:'',
Mch_PrivateKey:'',
Wft_PublicKey:'',
Req_URL:'',
Version:'',
RelationList:[],//1-通用2-选项公司
seleRelationList:[],
BankID:'',
BankType:'',
AccountType:'',
Status:'0'
};
},
OnlinePay_post_Set(){ // 新增
this.addMsg.RelationList = [];
if(!this.IsAdd){
let list = [];
let list2 = this.addMsg.RelationList;
this.addMsg.seleRelationList.forEach(x=>{
if(x=='-1'){
let cp={
Branch_Id:'',
Type:''
}
cp.Branch_Id = 0
cp.Type=1
this.addMsg.RelationList.push(cp)
}else{
let cp={
Branch_Id:parseInt(x),
Type:2,
ConfigId:0,
ID:0,
}
list.push(cp)
}
})
let allArr = list2.concat(list); // 数组合并
var obj = {};
allArr = allArr.reduce(function(item, next) { //数组对象去重
obj[next.Branch_Id] ? '' : obj[next.Branch_Id] = true && item.push(next);
return item;
}, []);
this.addMsg.RelationList = allArr;
}else{
this.addMsg.RelationList = [];
this.addMsg.seleRelationList.forEach(x=>{
if(x=='-1'){
let cp={
Branch_Id:'',
Type:''
}
cp.Branch_Id = 0
cp.Type=1
this.addMsg.RelationList.push(cp)
}else{
let cp={
Branch_Id:'',
Type:''
}
cp.Type=2
cp.Branch_Id = x
this.addMsg.RelationList.push(cp)
}
})
}
this.apipost('OnlinePay_post_Set',this.addMsg, res => {
if(res.data.resultCode == 1) {
this.addShow = false;
this.$message.success(res.data.message);
this.cancelEdit();
this.getList();
this.disabledOption();
}else{
this.$message.error(res.data.message);
}
}, err => {})
},
getList() { //获取列表数据
this.dataList = [];
this.loading = true;
this.apipost('OnlinePay_post_GetPageList',this.msg, res => {
if(res.data.resultCode == 1) {
let data = res.data.data.pageData;
data.forEach(x=>{
let allName = '';
x.BranchName.forEach(y=>{
allName = allName+' '+y;
})
x.allName = allName;
})
this.total = res.data.data.count;
if(this.total<=0){
this.noData = true;
}else{
this.dataList = data;
}
this.loading = false;
}
}, err => {this.loading =false;})
},
resetPageIndex() {//查询初始化页码
this.msg.pageIndex = 1;
this.currentPage = 1
},
handleCurrentChange(val) {//翻页功能按钮
this.msg.pageIndex = val;
this.getList();
},
resetForm(formName) {
this.cancelEdit();
this.$refs[formName].resetFields();
},
},
mounted(){
let userInfo=this.getLocalStorage();
this.getCompanyMsg.RB_Group_Id=userInfo.RB_Group_id; //集团ID
this.getCompanyList();
this.getList();
this.AccountType_post_GetList();
this.BankAccount_post_GetAccountType();
}
}
</script>