<template>
|
<el-container>
|
<el-main :style="{ padding: 0 }">
|
<ScrollToTab
|
:tabId="`#${tabScroll}`"
|
:contentId="`#${contentScroll}`"
|
:tabIndex="tabIndex"
|
@changeTab="changeTab"
|
ref="scrollTab"
|
>
|
<div class="scroll-content">
|
<ul
|
class="tab-scroll"
|
:id="tabScroll"
|
:style="{
|
height: `${clientHeight}px`,
|
}"
|
>
|
<li class="back-section">
|
<el-button size="small" icon="el-icon-back" round @click="goBack"
|
>返回列表</el-button
|
>
|
</li>
|
<li
|
v-for="(item, index) in treeList"
|
:key="index"
|
@click="changeTab(index, true)"
|
class="tab-list"
|
:class="{ active: tabIndex === index }"
|
>
|
<a>{{ item.tabname }}</a>
|
</li>
|
</ul>
|
<ul
|
class="content-scroll"
|
:id="contentScroll"
|
:style="{
|
height: `${clientHeight}px`,
|
}"
|
>
|
<li
|
v-for="(item, index) in treeList"
|
:key="index"
|
class="content-list"
|
>
|
<div
|
class="scroll-inner"
|
:style="{
|
minHeight:
|
index === treeList.length - 1
|
? `${clientHeight + 40}px`
|
: 'auto',
|
}"
|
>
|
<p class="scroll-title">{{ item.tabname }}</p>
|
<div class="inner-content">
|
<FormInfo
|
v-if="item.tabname == '借据信息'"
|
:info="receiptInfo"
|
title="借据信息"
|
:keys="queryAcctLoanInfo"
|
:loading="loading"
|
></FormInfo>
|
<TableList
|
v-if="item.tabname == '交易申请记录'"
|
:list="records"
|
:header="tableHeader"
|
@handleCurrentChange="handleCurrentChange"
|
@handleSizeChange="handleSizeChange"
|
title="交易申请记录"
|
:loading="loading"
|
:isAutoIndex="true"
|
:pageInfo="pageInfo"
|
></TableList>
|
<div
|
v-if="item.tabname == '保证金抵扣'"
|
style="display: flex"
|
>
|
<div
|
v-for="(amtItem, index) in LoanMarginDed"
|
:key="index"
|
style="
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
"
|
>
|
<div
|
style="width: auto; margin: 0 10px 0 0; color: #888888"
|
>
|
{{ amtItem.key }}
|
</div>
|
<el-input
|
style="width: 200px; margin: 0 20px 0 0"
|
v-model="amtItem.value"
|
:disabled="amtItem.disable"
|
></el-input>
|
</div>
|
</div>
|
<div
|
v-if="item.tabname == '保证金抵扣'"
|
class="tab-form-buttons"
|
style="
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
"
|
>
|
<p style="margin: 0 40px 0 0">
|
<el-button class="comm-button" @click="goBack"
|
>返回</el-button
|
>
|
</p>
|
<p style="margin: 0 0 0 40px">
|
<el-button
|
class="comm-button"
|
type="primary"
|
@click="mainSubmit"
|
:loading="mainSubmitLoading"
|
>提交</el-button
|
>
|
</p>
|
</div>
|
</div>
|
</div>
|
</li>
|
<Dialog
|
v-model="isShowDialog"
|
icon="succ"
|
iconText="抵扣成功"
|
:buttons="[{ text: '确定', type: 'primary' }]"
|
@handleClick="goBack"
|
></Dialog>
|
</ul>
|
</div>
|
</ScrollToTab>
|
</el-main>
|
</el-container>
|
</template>
|
|
<script>
|
import ScrollToTab from "./components/ScrollToTab";
|
import FormList from "./components/FormList";
|
import TableList from "./components/TableList";
|
import Dialog from "./components/Dialog.vue";
|
import FormInfo from "./components/FormInfo.vue";
|
import { queryAcctLoanInfoMargin } from "@comprehensive/utils/formHeaders";
|
import { MalQueryAcctTransactionHeader } from "@comprehensive/utils/tableHeaders";
|
import {
|
getLoanInfo,
|
queryDepositAmount,
|
queryDepositTransactionList,
|
getUserInfo,
|
deductionDepositTrans,
|
} from "@comprehensive/serve/public";
|
|
export default {
|
components: {
|
ScrollToTab,
|
FormList,
|
TableList,
|
Dialog,
|
FormInfo,
|
},
|
computed: {},
|
data() {
|
return {
|
serialNo: "",
|
tabScroll: "tab_scroll",
|
contentScroll: "content_scroll",
|
tabIndex: 0,
|
clientHeight: 800,
|
treeList: [],
|
receiptInfo: {}, //借据信息字段
|
queryAcctLoanInfo: [...queryAcctLoanInfoMargin], //借据信息字段
|
records: [],
|
tableHeader: [...MalQueryAcctTransactionHeader],
|
pageInfo: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0,
|
},
|
loading: false,
|
mainSubmitLoading: false,
|
LoanMarginDed: [
|
{ key: "申请抵扣金额", value: 0, disable: true },
|
{
|
key: "申请时间",
|
value: this.dayjs(new Date()).format("YYYY/MM/DD HH:mm:ss"),
|
disable: true,
|
},
|
{ key: "申请人", value: 0, disable: true },
|
],
|
userName: "",
|
isShowDialog: false,
|
};
|
},
|
created() {
|
this.init();
|
},
|
mounted() {
|
this.setEleHeight();
|
window.addEventListener("resize", this.setEleHeight);
|
},
|
beforeDestroy() {
|
window.removeEventListener("resize", this.setEleHeight);
|
},
|
methods: {
|
init() {
|
this.serialNo = this.$route.params.id;
|
this.tabIndex = 0;
|
this.treeList = [
|
{
|
tabname: "借据信息",
|
exist: "Y",
|
gray: "",
|
visible: "",
|
open: "",
|
edit: "",
|
readonly: "N",
|
state: "LOAN_INFO",
|
},
|
{
|
tabname: "交易申请记录",
|
exist: "Y",
|
gray: "",
|
visible: "",
|
open: "",
|
edit: "",
|
readonly: "N",
|
state: "LOAN_INFO",
|
},
|
{
|
tabname: "保证金抵扣",
|
exist: "Y",
|
gray: "",
|
visible: "",
|
open: "",
|
edit: "",
|
readonly: "N",
|
state: "LOAN_INFO",
|
},
|
];
|
|
this.queryAcctLoan();
|
|
this.requestGetUserInfo();
|
},
|
setEleHeight() {
|
const clientHeight = document.documentElement.clientHeight;
|
this.clientHeight = clientHeight || 800;
|
},
|
// 返回列表
|
goBack() {
|
this.isShowDialog = false
|
window.history.go(-1);
|
},
|
// 切换tab的处理
|
changeTab(index, flg = false) {
|
this.tabIndex = index;
|
this.$refs.scrollTab.setScrollTop(index, flg);
|
this.$nextTick(() => this.$refs.scrollTab.setTabScrollTop());
|
},
|
// 查询顶部参数数据
|
async queryAcctLoan() {
|
this.loading = true;
|
const { serialNo } = this;
|
const getLoanInfoRes = await getLoanInfo({ applySerialNo: serialNo });
|
const queryDepositAmountRes = await queryDepositAmount({
|
applySerialNo: serialNo,
|
});
|
this.loading = false;
|
Object.keys(getLoanInfoRes.result).forEach((key) => {
|
getLoanInfoRes.result[key] = {
|
codeNo: "",
|
filedDescription: "",
|
name: "",
|
orders: "",
|
required: true,
|
type: "",
|
value: getLoanInfoRes.result[key],
|
valueDesc: "",
|
visible: true,
|
writeAble: true,
|
};
|
});
|
Object.keys(queryDepositAmountRes.result).forEach((key) => {
|
queryDepositAmountRes.result[key] = {
|
codeNo: "",
|
filedDescription: "",
|
name: "",
|
orders: "",
|
required: true,
|
type: "",
|
value: queryDepositAmountRes.result[key],
|
valueDesc: "",
|
visible: true,
|
writeAble: true,
|
};
|
});
|
const tempOtherParams = {
|
applySerialNo: {
|
codeNo: "",
|
filedDescription: "",
|
name: "",
|
orders: "",
|
required: true,
|
type: "",
|
value: this.serialNo,
|
valueDesc: "",
|
visible: true,
|
writeAble: true,
|
},
|
};
|
Object.assign(tempOtherParams, getLoanInfoRes.result);
|
Object.assign(tempOtherParams, queryDepositAmountRes.result);
|
this.receiptInfo = tempOtherParams;
|
this.LoanMarginDed[0].value = this.receiptInfo.remainAmount.value;
|
this.queryAcctTransactionList();
|
},
|
// 修改翻页数
|
handleCurrentChange(val) {
|
this.pageInfo.currentPage = val;
|
this.queryAcctTransactionList();
|
},
|
// 修改翻页条数
|
handleSizeChange(val) {
|
this.pageInfo.pageSize = val;
|
this.queryAcctTransactionList();
|
},
|
//查询交易申请记录
|
async queryAcctTransactionList() {
|
this.loading = true;
|
const { serialNo, pageInfo } = this;
|
const res = await queryDepositTransactionList({
|
loanSerialno: this.receiptInfo.loanSerialNo.value,
|
...pageInfo,
|
});
|
this.loading = false;
|
this.records = res.result;
|
this.pageInfo.total = parseInt(res.result.length);
|
this.pageInfo.pageSize = parseInt(res.result.length);
|
},
|
//获取申请人
|
async requestGetUserInfo() {
|
this.loading = true;
|
const getUserInfoRes = await getUserInfo({});
|
this.loading = false;
|
if (getUserInfoRes.userName) {
|
this.LoanMarginDed[2].value = getUserInfoRes.userName;
|
}
|
},
|
//
|
async mainSubmit() {
|
if (!parseFloat(this.LoanMarginDed[0].value)) {
|
this.$message.error("请输入申请抵扣金额");
|
return
|
}
|
if (parseFloat(this.LoanMarginDed[0].value) > parseFloat(this.receiptInfo.remainAmount.value)) {
|
this.$message.error("抵扣金额不得超过保证金余额");
|
return
|
}
|
console.log('this.LoanMarginDed',this.LoanMarginDed[0].value,this.receiptInfo.remainAmount.value, this.receiptInfo.loanSerialNo.value)
|
this.mainSubmitLoading = true
|
try {
|
const resp = await deductionDepositTrans({actualPaymentAmt: this.LoanMarginDed[0].value,loanserialno: this.receiptInfo.loanSerialNo.value, transcode: '2019'})
|
this.mainSubmitLoading = false
|
this.isShowDialog = true
|
// this.$message.success('抵扣成功')
|
// this.goBack()
|
} catch (error) {
|
this.mainSubmitLoading = false
|
}
|
}
|
},
|
};
|
</script>
|
|
<style lang="postcss" scoped>
|
.detail-header {
|
display: flex;
|
& .header-right {
|
flex: 1;
|
}
|
& .header-right-inner {
|
display: flex;
|
background: #f9f9f9;
|
align-items: center;
|
margin: 0 0 10px;
|
background: #fff;
|
padding: 20px 20px 20px 10px;
|
box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.03);
|
& .header-steps {
|
flex: 1;
|
}
|
& .detail-header-control {
|
margin-left: 30px;
|
& >>> .el-button {
|
padding: 4px 5px;
|
border-radius: 2px;
|
border: 1px solid rgba(238, 238, 238, 1);
|
font-size: 12px;
|
color: rgba(119, 119, 119, 1);
|
}
|
}
|
|
& >>> .el-button--text {
|
padding-top: 20px;
|
}
|
}
|
}
|
|
.el-container .el-main {
|
padding: 16px 0;
|
}
|
.el-container .el-header {
|
padding: 0;
|
}
|
.main-tab {
|
padding: 20px;
|
}
|
.main-buttons {
|
display: flex;
|
width: 100%;
|
justify-content: center;
|
padding-top: 80px;
|
& >>> .el-button {
|
padding: 8px 41px;
|
}
|
& >>> .el-button--default {
|
margin-right: 33px;
|
}
|
}
|
.empty-tab {
|
width: 100%;
|
min-height: 550px;
|
}
|
|
.scroll-content {
|
display: flex;
|
& .tab-scroll {
|
width: 128px;
|
padding: 0 16px;
|
overflow-y: auto;
|
list-style: none;
|
font-size: 14px;
|
background: #fff;
|
&::-webkit-scrollbar {
|
width: 0px;
|
height: 10px;
|
}
|
& .tab-list {
|
padding: 0 10px 34px 0;
|
& a {
|
cursor: pointer;
|
font-weight: 400;
|
color: #222222;
|
&:hover {
|
color: #409eff;
|
}
|
}
|
|
&.active {
|
& a {
|
color: #0081f0;
|
}
|
}
|
}
|
& .back-section {
|
background: #fff;
|
border-radius: 0px 4px 0px 0px;
|
padding: 16px 16px 30px 0;
|
& >>> .el-button {
|
padding: 5px 9.5px;
|
border: none;
|
background: rgba(238, 238, 238, 1);
|
border-radius: 12px;
|
font-weight: 400;
|
color: #333333;
|
}
|
& >>> .el-button span {
|
margin-left: 2px;
|
font-size: 12px;
|
}
|
& >>> .el-button i {
|
font-weight: bold;
|
}
|
}
|
}
|
& .content-scroll {
|
flex: 1;
|
overflow-y: auto;
|
position: relative;
|
margin: 0 0 0 20px;
|
& .scroll-inner {
|
background: #fff;
|
box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.03);
|
margin-bottom: 20px;
|
& .scroll-title {
|
font-size: 16px;
|
border-bottom: solid 2px #eeeeee;
|
color: #000;
|
padding: 16px 20px;
|
margin-bottom: 10px;
|
font-weight: 500;
|
}
|
& .inner-content {
|
padding: 0 0 20px 20px;
|
& >>> .el-tabs__header {
|
margin: 0;
|
}
|
}
|
& .tab-form-buttons {
|
display: flex;
|
justify-content: center;
|
padding: 60px 0 30px 0;
|
& p {
|
margin: 0 40px 0 0;
|
}
|
& p:last-child {
|
margin-right: 0;
|
}
|
}
|
}
|
&::-webkit-scrollbar {
|
width: 0;
|
height: 10px;
|
}
|
& .last-scroll-inner {
|
min-height: 620px;
|
}
|
}
|
}
|
.apply-top-button {
|
& >>> .el-button {
|
margin-left: 20px;
|
}
|
}
|
.apply-info {
|
& >>> .clearCheckAll {
|
.el-table__header-wrapper .el-checkbox {
|
display: none;
|
}
|
}
|
}
|
|
.qrcode-content {
|
text-align: center;
|
& .qrode-close {
|
margin: 0;
|
padding: 0;
|
margin-bottom: 10px;
|
& i {
|
cursor: pointer;
|
font-size: 18px;
|
}
|
/* text-align: right; */
|
}
|
}
|
</style>
|
