<template>
|
<el-dialog title="详情"
|
width="80%"
|
ref="dialog"
|
id="pedetail"
|
@close="close"
|
:visible.sync="dialogVisible">
|
<div slot="title"
|
class="header">详情</div>
|
<ul class="pedetail_Summary">
|
<li>
|
<span>银行名称</span>
|
<span>{{infoData.bankName}}</span>
|
</li>
|
<li>
|
<span>银行账户</span>
|
<span>{{infoData.acctNo}}</span>
|
</li>
|
<li>
|
<span>备注</span>
|
<span>{{infoData.remark}}</span>
|
</li>
|
</ul>
|
<div class="pedetail-title clearfix">
|
<h5>交易汇总详情</h5>
|
<el-table :data="tableData.acctTransDetails"
|
v-loading="loading"
|
class="table">
|
<el-table-column prop="transTime"
|
align="center"
|
min-width="80"
|
label="交易时间">
|
</el-table-column>
|
<el-table-column prop="income"
|
align="center"
|
min-width="120"
|
label="收入">
|
</el-table-column>
|
<el-table-column prop="payeeAcctname"
|
align="center"
|
min-width="150"
|
label="对方户名">
|
</el-table-column>
|
<el-table-column prop="payeeAcctno"
|
align="center"
|
min-width="150"
|
label="对方账号">
|
</el-table-column>
|
<el-table-column prop="summary"
|
align="center"
|
min-width="100"
|
label="摘要">
|
</el-table-column>
|
<el-table-column prop="remark"
|
align="center"
|
min-width="100"
|
label="备注">
|
</el-table-column>
|
<el-table-column prop="orderNo"
|
align="center"
|
min-width="120"
|
label="回单编号">
|
</el-table-column>
|
<el-table-column prop="reqNo"
|
align="center"
|
min-width="120"
|
label="网银流水">
|
</el-table-column>
|
<el-table-column align="center"
|
min-width="80"
|
fixed="right"
|
label="操作"
|
v-if="infoData.uploadStatus !== '1'"
|
>
|
<template slot-scope="scope">
|
<el-button size="mini"
|
type="danger"
|
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination @current-change="handleCurrentChange"
|
:current-page.sync="asyncValue.page"
|
:page-size="10"
|
class="paging"
|
background
|
layout="total,prev, pager, next, jumper"
|
:total="tableData.totalSize">
|
</el-pagination>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { PipelinDetail, PipelinDetele,detailDelete } from "@/assets/api/api";
|
|
export default {
|
name: "peDetail",
|
|
props: {
|
value: {
|
type: String,
|
default: ""
|
},
|
batchNo: {
|
type: String
|
},
|
infoData: {
|
type: Object,
|
default() {
|
return {};
|
}
|
}
|
},
|
|
watch: {
|
value: function(n) {
|
this.dialogVisible = this.value === "detail" ? true : false;
|
if (this.dialogVisible) {
|
this.asyncValue.batchNo = this.infoData.batchNo;
|
this.getData();
|
}
|
}
|
},
|
|
data() {
|
return {
|
dialogVisible: false,
|
loading: false,
|
tableData: {
|
acctTransDetails: [],
|
totalSize: 1
|
},
|
asyncValue: {
|
page: 1,
|
pageSize: 6,
|
batchNo: null
|
}
|
};
|
},
|
|
methods: {
|
// 关闭
|
close() {
|
this.$emit("input", "");
|
},
|
|
// 删除
|
async handleDelete(index, val) {
|
let res = await detailDelete(val);
|
if (res.data.retHeader.retCode === "0000") {
|
this.$message({
|
message: "删除成功",
|
type: "success"
|
});
|
this.getData();
|
} else {
|
this.$message({
|
message: res.data.retHeader.retMessage,
|
type: "warning"
|
});
|
}
|
},
|
|
// 分页处理
|
handleCurrentChange(page) {
|
this.asyncValue.page = page;
|
this.getData();
|
},
|
|
// 获取数据
|
async getData() {
|
this.loading = true;
|
let res = await PipelinDetail(this.asyncValue);
|
if (res.data.retHeader.retCode === "0000") {
|
this.tableData = res.data.retBody;
|
} else if(res.data.retHeader.retCode === "2002") {
|
this.tableData = {acctTransDetails: [], totalSize: 0}
|
} else {
|
this.$message.error(res.data.retHeader.retMessage)
|
}
|
this.loading = false;
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" >
|
#pedetail {
|
.el-dialog__header {
|
background-color: #eef1f6;
|
}
|
.pedetail_Summary {
|
list-style: none;
|
border: 1px solid #ebeef5;
|
margin: 0px;
|
padding: 0px;
|
> li {
|
width: 100%;
|
line-height: 32px;
|
height: 32px;
|
overflow: hidden;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
border-bottom: 1px solid #ebeef5;
|
> span {
|
text-align: center;
|
}
|
> span:first-child {
|
border-right: 1px solid #ebeef5;
|
flex-basis: 200px;
|
}
|
> span:nth-child(2) {
|
flex: 1;
|
}
|
}
|
> li:last-child {
|
border-bottom: none;
|
}
|
}
|
.pedetail-title {
|
> h5 {
|
font-size: 16px;
|
margin: 26px 0px 6px;
|
}
|
}
|
.paging {
|
margin: 10px 0px;
|
}
|
}
|
</style>
|
