<template>
|
<div class="menuPage">
|
<div class="selectMenu">
|
<el-form :inline="true"
|
:model="searchData"
|
class="form-inline">
|
<el-form-item label="客户名称">
|
<el-input placeholder="请输入客户姓名"
|
v-model="searchData.acctName"
|
clearable
|
style="width:197px;"></el-input>
|
</el-form-item>
|
<el-form-item label="银行卡">
|
<el-input placeholder="请输入银行卡号"
|
v-model="searchData.acctNo"
|
clearable
|
style="width:197px;">
|
</el-input>
|
</el-form-item>
|
<el-form-item class="search">
|
<el-button @click="search"
|
type="primary">查询</el-button>
|
<el-button @click="reset">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="channelMenu">
|
<el-table :data="backData"
|
v-loading="loading"
|
border>
|
<el-table-column prop="acctName"
|
align="center"
|
label="客户名称">
|
</el-table-column>
|
<el-table-column prop="acctNo"
|
align="center"
|
label="银行卡号">
|
<template slot-scope="scope">
|
<span>{{enumerMap(scope.row.transType,'transType')}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="payCompany"
|
align="center"
|
label="支付公司">
|
</el-table-column>
|
<el-table-column prop="channelName"
|
align="center"
|
label="通道号">
|
<template slot-scope="scope">
|
<span>{{enumerMap(scope.row.status,'status')}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="transType"
|
align="center"
|
label="交易类型">
|
<template slot-scope="scope">
|
<span>{{enumerMap(scope.row.transType,'transType')}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="bankName"
|
align="center"
|
label="银行名称">
|
</el-table-column>
|
<el-table-column prop="amountPt"
|
align="center"
|
label="单笔限额">
|
</el-table-column>
|
<el-table-column prop="amountPd"
|
align="center"
|
label="当日已用额度">
|
</el-table-column>
|
<el-table-column prop="amountPm"
|
align="center"
|
label="当月已用额度">
|
</el-table-column>
|
<el-table-column prop="timesPd"
|
align="center"
|
label="当日已用次数">
|
</el-table-column>
|
<el-table-column prop="timesPm"
|
align="center"
|
label="当月已用次数">
|
</el-table-column>
|
<el-table-column align="center"
|
width="140"
|
label="操作">
|
<template slot-scope="scope">
|
<el-button size="mini"
|
@click="goBankLimit(scope.row.bankLimid)">查看银行限额</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination @current-change="handleCurrentChange"
|
layout="total,prev, pager, next, jumper"
|
background
|
style="margin-top: 10px;"
|
:total.sync="totalPage">
|
</el-pagination>
|
</div>
|
</div>
|
<el-dialog width="80%"
|
ref="dialog"
|
title="银行限额"
|
@close="mask_options.mask = false"
|
:visible.sync="mask_options.mask">
|
<bank-limit :bankLimid="mask_options.bankLimid" :is_mask="mask_options.mask"></bank-limit>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex";
|
import BankLimit from "@/components/bankLimit/MenuPage"
|
|
export default {
|
data() {
|
return {
|
backData: [],
|
searchData: {
|
acctNo: "",
|
acctName: "",
|
page: 1,
|
pageSize: 10
|
},
|
trueBackData: "",
|
totalPage: 1,
|
currentPage: 1,
|
loading: false,
|
isMask: false,
|
mask_options: {
|
mask: false,
|
bankLimid: ""
|
}
|
};
|
},
|
|
components: {
|
BankLimit,
|
},
|
props: ["Data", "queryChannelRespDto"],
|
|
created() {
|
this.getMenuData();
|
},
|
|
computed: {
|
...mapGetters(["getMenu"])
|
},
|
watch: {
|
getMenu: function (now, old) {
|
this.getMenuData();
|
}
|
},
|
methods: {
|
// 获取表单数据
|
getMenuData() {
|
this.loading = true
|
this.$http
|
.post("quota/getCustoms", this.searchData)
|
.then(response => {
|
console.log(response)
|
if(response.data.retHeader.retCode === '0000'){
|
this.trueBackData = response.data.retBody;
|
this.backData = this.trueBackData.customDataEntityList;
|
this.encrypt(this.backData);
|
this.handlePt(this.backData);
|
this.totalPage = this.trueBackData.totalSize;
|
this.loading = false
|
}else{
|
this.$message.error(response.data.retHeader.retMessage)
|
this.trueBackData = ""
|
this.backData = []
|
this.totalPage = 0
|
this.loading = false
|
}
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
},
|
// 查看银行限额
|
goBankLimit(bankLimid) {
|
this.mask_options = {
|
mask: true,
|
bankLimid,
|
}
|
// this.isMask = true
|
// this.$router.push({
|
// path: "/bankLimit",
|
// name: "BankLimit",
|
// params: {
|
// data: {
|
// bankLimid: bankLimid
|
// }
|
// }
|
// });
|
},
|
// 查询
|
search() {
|
this.getMenuData();
|
},
|
// 重置
|
reset() {
|
this.searchData = {
|
acctNo: "",
|
acctName: "",
|
page: 1,
|
pageSize: 10
|
};
|
},
|
// 加密银行卡号
|
encrypt(arr) {
|
for (var i = 0; i < arr.length; i++) {
|
if (arr[i].acctNo) {
|
arr[i].acctNo = "****" + arr[i].acctNo.slice(12, 16);
|
}
|
}
|
},
|
// 点击翻页
|
handleCurrentChange(val) {
|
this.searchData.page = val;
|
this.getMenuData();
|
},
|
// 改变当日已用额度和当月已用额度
|
handlePt(arr) {
|
for (var value of arr) {
|
if (value.transType == "100") {
|
value.amountPd = 0;
|
value.amountPm = 0;
|
}
|
}
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.menuPage {
|
width: 100%;
|
padding: 0px 0px;
|
overflow: hidden;
|
.selectMenu {
|
width: 100%;
|
overflow: hidden;
|
border-radius: 8px;
|
.selectOptions {
|
width: 60%;
|
overflow: hidden;
|
border-bottom: 1px solid #eee;
|
.subMenuItem {
|
width: 50%;
|
float: left;
|
padding: 8px 0px;
|
color: black;
|
> span {
|
display: inline-block;
|
font-size: 14px;
|
width: 26%;
|
height: 100%;
|
text-align: right;
|
}
|
}
|
}
|
.selectBtn {
|
width: 60%;
|
height: 100%;
|
padding: 10px 0px;
|
.center {
|
margin-left: 50%;
|
transform: translateX(-50%);
|
> button {
|
padding: 8px 23px;
|
margin-right: 20px;
|
}
|
}
|
}
|
.channelMenu {
|
width: 100%;
|
margin-top: 20px;
|
.channelMenuTitle {
|
width: 100%;
|
height: 30px;
|
> div {
|
height: 100%;
|
float: left;
|
background-color: #333333;
|
border: 1px solid #999;
|
line-height: 30px;
|
text-align: center;
|
color: white;
|
font-size: 14px;
|
width: 12.5%;
|
margin-right: -1px;
|
}
|
}
|
.add {
|
margin: 10px 0px 5px;
|
}
|
.channelMenuContent {
|
width: 100%;
|
.contentItem {
|
width: 100%;
|
height: 36px;
|
> .contentValue {
|
float: left;
|
width: 12.5%;
|
height: 36px;
|
border: 1px solid #797979;
|
border-top: none;
|
text-align: center;
|
line-height: 36px;
|
background-color: #fff;
|
margin-right: -1px;
|
> a {
|
color: blue;
|
font-size: 12px;
|
cursor: default;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
