<template>
|
<div class="menuPage">
|
<div class="selectMenu form-content">
|
<el-form
|
:inline="true"
|
:model="searchData"
|
label-width="90px"
|
class="form-search"
|
>
|
<el-form-item label="操作人姓名">
|
<el-input
|
v-model="searchData.opsName"
|
placeholder="请输入操作人姓名"
|
></el-input>
|
</el-form-item>
|
|
<el-form-item label="操作时间">
|
<el-date-picker
|
style="width: 100%"
|
v-model="searchData.alltime"
|
type="daterange"
|
range-separator="-"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
format="yyyy - MM - dd "
|
value-format="yyyy-MM-dd"
|
></el-date-picker>
|
</el-form-item>
|
<el-form-item label="状态">
|
<el-select
|
v-model="searchData.status"
|
style="width: 100%"
|
placeholder="请选择"
|
clearable
|
>
|
<el-option
|
v-for="(item, index) in orderList"
|
:key="item.value"
|
:label="item.key"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item class="search">
|
<el-button @click="reset">重置</el-button>
|
<el-button @click="search" type="primary">查询</el-button>
|
</el-form-item>
|
</el-form>
|
<div>
|
<div class="export-excle">
|
<div class="addbtn">
|
<el-button size="small" type="primary" @click="showAddForm"
|
>新增充值</el-button
|
>
|
</div>
|
<div class="reflash">
|
<div class="cell">
|
中行余额:<span>{{ queryAcctInfo.CORPORTATE }}</span>
|
</div>
|
<div class="cell">
|
通联备付金余额: <span>{{ queryAcctInfo.ALLINPAY }}</span>
|
</div>
|
</div>
|
<div class="reflashbtn">
|
<el-button
|
size="small"
|
type="primary"
|
:loading="loadingbtn"
|
@click="queryAcctInfoNo"
|
>刷新</el-button
|
>
|
</div>
|
</div>
|
</div>
|
|
<div class="channelMenu">
|
<el-table :data="menuItems" v-loading="loading" class="table">
|
<el-table-column
|
prop="settleName"
|
align="center"
|
min-width="160"
|
label="我方银行名称"
|
></el-table-column>
|
|
<el-table-column
|
prop="settleAcct"
|
align="center"
|
min-width="160"
|
label="我方银行账号"
|
></el-table-column>
|
|
<el-table-column
|
prop="acctName"
|
align="center"
|
min-width="180"
|
label="对方名称"
|
></el-table-column>
|
|
<el-table-column
|
prop="acctNo"
|
align="center"
|
min-width="100"
|
label="对方账号"
|
></el-table-column>
|
|
<el-table-column
|
prop="amount"
|
align="center"
|
min-width="100"
|
label="充值金额"
|
>
|
<template slot-scope="scope">
|
{{ formatMoney(scope.row.amount) }}
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
prop="memo"
|
align="center"
|
min-width="150"
|
label="备注"
|
></el-table-column>
|
|
<el-table-column
|
prop="submitTime"
|
align="center"
|
min-width="100"
|
label="发起时间"
|
></el-table-column>
|
|
<el-table-column
|
prop="transResult"
|
align="center"
|
min-width="100"
|
label="充值状态"
|
>
|
</el-table-column>
|
|
<el-table-column
|
prop="opsUserName"
|
align="center"
|
min-width="100"
|
label="操作人"
|
></el-table-column>
|
</el-table>
|
</div>
|
<el-pagination
|
layout="prev, pager, next,jumper,total,sizes"
|
:page-sizes="[10, 20, 50, 100]"
|
@size-change="handleSizeChange"
|
:total.sync="totalCount"
|
:current-page="searchData.pageNum * 1"
|
background
|
ref="pagination"
|
style="margin-top: 10px"
|
@current-change="handleCurrentChange"
|
></el-pagination>
|
<el-dialog
|
title="新增充值"
|
:visible.sync="dialogTableVisible"
|
custom-class="comm-dialog"
|
:modal-append-to-body="true"
|
:close-on-click-modal="false"
|
width="1200px"
|
>
|
<el-form
|
:model="form"
|
:rules="rules"
|
ref="form"
|
label-width="130px"
|
inline
|
>
|
<el-form-item label="我方银行名称" prop="settleName">
|
<el-input v-model="form.settleName" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="我方银行账号" prop="settleAcct">
|
<el-input v-model="form.settleAcct" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="我方银行支行名称" prop="settleBank">
|
<el-input v-model="form.settleBank" disabled></el-input>
|
</el-form-item>
|
|
<el-form-item label="对方名称" prop="acctName">
|
<el-input v-model="form.acctName" disabled></el-input>
|
</el-form-item>
|
<el-form-item label="对方账号" prop="acctNo">
|
<el-input v-model="form.acctNo" disabled></el-input>
|
</el-form-item>
|
|
<el-form-item label="对方商户号" prop="merId">
|
<el-input v-model="form.merId" disabled></el-input>
|
</el-form-item>
|
|
<el-form-item label="对方银行名" prop="bankName">
|
<el-input v-model="form.bankName" disabled></el-input>
|
</el-form-item>
|
|
<el-form-item label="对方联行号" prop="branchNo">
|
<el-input v-model="form.branchNo" disabled></el-input>
|
</el-form-item>
|
|
<el-form-item label="充值金额" prop="amount">
|
<el-input v-model="form.amount" type="number"></el-input>
|
<p class="convertCurrencyBox">
|
<span v-show="form.amount">{{convertCurrency(form.amount)}}</span>
|
</p>
|
</el-form-item>
|
|
<el-form-item label="备注" prop="memo">
|
<el-input v-model="form.memo" disabled></el-input>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<div style="text-align:center" >
|
<el-button plain @click="cancel">取消</el-button>
|
<el-button
|
type="primary"
|
:loading="diaologloadingbtn"
|
@click="onSubmit()"
|
>确定</el-button
|
>
|
</div>
|
</span>
|
</el-dialog>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { Message } from "element-ui";
|
import convertCurrency from "./convertCurrency"
|
export default {
|
data() {
|
return {
|
records: [],
|
productTypeList: [],
|
totalCount: 0,
|
orderList: [
|
{ value: "100", key: "处理中" },
|
{ value: "200", key: "交易成功" },
|
{ value: "500", key: "交易失败" },
|
],
|
queryAcctInfo: {
|
ALLINPAY: "",
|
CORPORTATE: "",
|
},
|
searchData: {
|
opsName: "",
|
status: "",
|
beginTime: "",
|
endTime: "",
|
pageSize: "10",
|
pageNum: "1",
|
alltime:[]
|
},
|
menuItems: [],
|
loading: false,
|
dialogTableVisible: false,
|
loadingbtn: false,
|
diaologloadingbtn: false,
|
form: {},
|
formOption: {},
|
rules: {
|
amount: [
|
{ required: true, message: "请输入充值金额！", trigger: "blur" },
|
],
|
},
|
relativeInfoList: [],
|
};
|
},
|
components: {},
|
created() {
|
this.getMenuData();
|
this.queryAcctInfoNo()
|
},
|
mounted() {},
|
methods: {
|
convertCurrency,
|
queryAcctInfoNo() {
|
var that = this;
|
this.loadingbtn = true;
|
this.$http
|
.post("/trans/queryAcctInfo", {})
|
.then((res) => {
|
if (res.data.retHeader.retCode == "0000") {
|
res.data.retBody.forEach((item) => {
|
if (item.companyId == "ALLINPAY") {
|
that.queryAcctInfo.ALLINPAY =
|
item.balance > 0
|
? that.formatMoney(item.balance)
|
: item.balance;
|
}
|
if (item.companyId == "CORPORTATE") {
|
that.queryAcctInfo.CORPORTATE =
|
item.balance > 0
|
? that.formatMoney(item.balance)
|
: item.balance;
|
}
|
});
|
}
|
this.loadingbtn = false;
|
})
|
.catch((err) => {
|
this.loadingbtn = false;
|
console.log(err);
|
});
|
},
|
getFormData() {
|
var that = this;
|
this.$http
|
.post("trans/getRechargeDataInfo", {})
|
.then((res) => {
|
if (res.data.retHeader.retCode == "0000") {
|
that.form = res.data.retBody;
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
// 分页
|
handleCurrentChange(val) {
|
this.searchData.pageNum = val;
|
this.getMenuData();
|
},
|
handleSizeChange(val) {
|
this.searchData.pageSize = val;
|
this.getMenuData();
|
},
|
// 查询
|
search() {
|
if(this.searchData.alltime && this.searchData.alltime.length > 0 ){
|
this.searchData.endTime = this.searchData.alltime[1]
|
this.searchData.beginTime = this.searchData.alltime[0]
|
}else{
|
this.searchData.endTime = ''
|
this.searchData.beginTime = ''
|
}
|
if (this.searchData.beginTime == "" && this.searchData.endTime) {
|
Message({
|
type: "warning",
|
message: "选择了结束时间，必须选择开始时间",
|
});
|
} else if (this.searchData.endTime == "" && this.searchData.beginTime) {
|
Message({
|
type: "warning",
|
message: "选择了开始时间，必须选择结束时间",
|
});
|
} else {
|
this.searchData.pageNum = 1;
|
this.getMenuData();
|
}
|
},
|
reflashbtn() {},
|
cancel() {
|
this.form.amount = "";
|
this.dialogTableVisible = false;
|
},
|
async init() {
|
this.getMenuData();
|
},
|
productnameChange() {
|
this.$set(
|
this.form,
|
"productid",
|
this.productTypeList.find(
|
(res) => res.productName == this.form.productname
|
).productCode
|
);
|
},
|
// 金额格式化
|
formatMoney(value) {
|
if (value) {
|
value =
|
parseFloat((value + "").replace(/[^\d\.-]/g, "")).toFixed(2) + "";
|
if (value == "NaN") return;
|
let l = value.split(".")[0].split("").reverse();
|
let r = value.split(".")[1];
|
let t = "";
|
for (let i = 0; i < l.length; i++) {
|
t += l[i] + ((i + 1) % 3 === 0 && i + 1 !== l.length ? "," : "");
|
}
|
return t.split("").reverse().join("") + "." + r;
|
}
|
},
|
//金额变成数字
|
moneyFomatNumber(number, n = 2) {
|
if (typeof number == "number") return number;
|
if (number != null && number != "" && number != undefined) {
|
number = number.replace(/,/g, ""); //去除千分位的','
|
if (isNaN(number)) {
|
//判断是否是数字
|
number = "0";
|
} else {
|
number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n); //n幂
|
number = number.toString();
|
}
|
} else {
|
number = "0";
|
}
|
//a.indexOf(x,y);返回x值在a字符串值中从y位置开始检索首次出现的位置
|
var numLength = number.indexOf(".");
|
//判断传递的值是整数增加小数点再补"0"
|
if (numLength < 0) {
|
numLength = number.length;
|
number += ".";
|
}
|
//不足n位小数的，循环补"0"
|
while (number.length <= numLength + n) {
|
number += "0";
|
}
|
return number;
|
},
|
async getMenuData() {
|
const that = this;
|
this.loading = true;
|
this.$http
|
.post("trans/getRechargeData", this.searchData)
|
.then((Menu) => {
|
if (Menu.data.retHeader.retCode === "0000") {
|
if (Menu.data.retBody.total) {
|
that.totalCount = Menu.data.retBody.total;
|
}
|
that.menuItems = Menu.data.retBody.records;
|
} else {
|
that.totalCount = 0;
|
that.menuItems = [];
|
this.$message.error(Menu.data.retHeader.retMessage);
|
}
|
this.loading = false;
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
async showAddForm(item) {
|
this.dialogTableVisible = true;
|
this.getFormData();
|
},
|
|
reset() {
|
this.searchData = {
|
opsName: "",
|
status: "",
|
beginTime: "",
|
endTime: "",
|
pageSize: "10",
|
pageNum: "1",
|
};
|
this.getMenuData();
|
},
|
// 提交前确认
|
sureOpen(){
|
const h = this.$createElement;
|
this.$msgbox({
|
customClass:"customClass",
|
title: '确认是否充值？',
|
message: h('p', null, [
|
h('span', null, '充值金额：'),
|
h('b', { style: 'color: #f00;font-size: 16px'}, this.convertCurrency(this.form.amount)+'(￥'+this.formatMoney(this.form.amount)+')')
|
]),
|
showCancelButton: true,
|
center: true,
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
beforeClose: (action, instance, done) => {
|
if (action === 'confirm') {
|
instance.confirmButtonLoading = true;
|
instance.confirmButtonText = '提交中...';
|
this.$http
|
.post("trans/addRechargeData", this.form)
|
.then((Menu) => {
|
if (Menu.data.retHeader.retCode === "0000") {
|
done();
|
Message.success("充值成功");
|
this.dialogTableVisible = false;
|
this.reset();
|
this.diaologloadingbtn = false;
|
instance.confirmButtonLoading = false;
|
} else {
|
this.diaologloadingbtn = false;
|
Message.error(Menu.data.retHeader.retMessage);
|
instance.confirmButtonLoading = false;
|
}
|
})
|
.catch((err) => {
|
done();
|
instance.confirmButtonLoading = false;
|
var tips =
|
err.data && err.data.retHeader
|
? err.data.retHeader.retMessage
|
: "充值失败";
|
Message.error(tips);
|
});
|
} else {
|
instance.confirmButtonLoading = false;
|
this.diaologloadingbtn = false;
|
done();
|
}
|
}
|
}).then(() => {
|
});
|
},
|
// 新增提交
|
onSubmit() {
|
var canPostStatus = true;
|
this.$refs["form"].validate((valid) => {
|
if (valid) {
|
canPostStatus = true;
|
} else {
|
canPostStatus = false;
|
}
|
});
|
if (!canPostStatus) {
|
return;
|
}
|
this.diaologloadingbtn = true;
|
this.sureOpen()
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
table {
|
width: 100%;
|
> tr {
|
width: 100%;
|
&:first-child {
|
> td {
|
background-color: #333333;
|
color: white;
|
}
|
}
|
td {
|
padding: 6px;
|
text-align: center;
|
font-size: 14px;
|
> a {
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
|
.menuPage {
|
width: 100%;
|
padding: 0px 0px;
|
// overflow: hidden;
|
.selectMenu {
|
width: 100%;
|
overflow: hidden;
|
border-radius: 8px;
|
margin-bottom: 10px;
|
.convertCurrencyBox{
|
font-size: 16px;
|
margin: 1px 0;
|
min-height: 40px;
|
color: #f00;
|
font-weight: bold;
|
}
|
.export-excle {
|
display: flex;
|
justify-content: space-between;
|
.addbtn {
|
width: 47%;
|
}
|
.reflash {
|
width: 47%;
|
text-align: right;
|
& .cell {
|
display: inline-block;
|
height: 32px;
|
line-height: 32px;
|
&:last-child{
|
margin-left: 10px;
|
}
|
span {
|
display: inline-block;
|
min-width: 60px;
|
text-align: left;
|
margin-left: 10px;
|
}
|
}
|
}
|
}
|
.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;
|
a {
|
font-size: 12px;
|
color: blue;
|
outline: none;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
|
<style lang="less">
|
.comm-dialog .el-input.is-disabled .el-input__inner {
|
color: #333;
|
}
|
.comm-dialog .el-form--inline .el-form-item {
|
width: 48.9%;
|
}
|
.comm-dialog .el-form--inline .el-form-item__content {
|
width: 70%;
|
}
|
.form-content {
|
grid-template-columns: repeat(3, 1fr);
|
margin-top: 16px;
|
.el-button--primary {
|
background-color: #0081f0;
|
border-color: #0081f0;
|
&:hover {
|
background: #339af3;
|
border-color: #339af3;
|
color: #fff;
|
}
|
&:focus {
|
background: #0081f0;
|
border-color: #0081f0;
|
color: #fff;
|
}
|
}
|
.form-search {
|
padding: 0;
|
display: grid;
|
grid-template-columns: repeat(4, 1fr);
|
.el-form-item__label {
|
color: #888888;
|
}
|
|
.el-form-item {
|
width: auto;
|
float: none;
|
padding-right: 40px;
|
margin: 0 0 24px 0;
|
display: flex;
|
align-items: center;
|
&:nth-of-type(2){
|
min-width: 396px !important;
|
}
|
}
|
.el-form-item__content {
|
flex: 1;
|
display: inline-block;
|
}
|
.el-form-item.search {
|
grid-column-start: 4;
|
grid-column-end: 4;
|
padding-right: 1px;
|
.el-button {
|
height: 32px;
|
font-size: 12px;
|
margin-left: 12px;
|
padding: 9px 15px;
|
border-radius: 3px;
|
}
|
}
|
.el-form-item.search .el-form-item__content {
|
display: flex;
|
justify-content: flex-end;
|
}
|
.el-form-item__label {
|
height: 32px;
|
line-height: 32px;
|
}
|
.el-input__inner {
|
height: 32px;
|
line-height: 32px;
|
}
|
.el-range-editor.el-input__inner {
|
padding: 0 10px;
|
}
|
.el-date-editor .el-range-input{
|
height: 27px;
|
width: 36% !important;
|
}
|
}
|
.el-pagination.is-background .el-pager li:not(.disabled).active {
|
background-color: #0081f0;
|
color: #fff;
|
}
|
.el-pagination.is-background .btn-next,
|
.el-pagination.is-background .btn-prev,
|
.el-pagination.is-background .el-pager li {
|
width: auto;
|
min-width: 32px;
|
height: 32px;
|
background: rgba(255, 255, 255, 1);
|
border-radius: 4px;
|
border: 1px solid rgba(238, 238, 238, 1);
|
font-size: 14px;
|
color: #666666;
|
font-weight: normal;
|
}
|
.el-pagination__total {
|
margin-left: 20px;
|
font-size: 14px !important;
|
color: #666666;
|
}
|
.el-pagination__jump {
|
font-size: 14px !important;
|
color: #666666;
|
}
|
@media (max-width: 3000px) and (min-width: 1500px) {
|
.form-search{
|
grid-template-columns: repeat(4, 1fr);
|
}
|
}
|
@media (max-width: 1499px) and (min-width: 700px) {
|
.form-search{
|
grid-template-columns: repeat(3, 1fr);
|
}
|
}
|
}
|
|
.dialog-footer {
|
.el-button {
|
height: 32px;
|
font-size: 12px;
|
margin-left: 12px;
|
padding: 9px 15px;
|
border-radius: 3px;
|
}
|
}
|
.customClass{
|
width: 475px;
|
.el-message-box__content{
|
padding: 20px 15px;
|
}
|
.el-message-box__btns{
|
.el-button--primary{
|
background-color: #0081f0;
|
border-color: #0081f0;
|
}
|
}
|
}
|
</style>
|
