<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 - 90}px`
|
: 'auto',
|
}"
|
>
|
<p class="scroll-title">{{ item.tabname }}</p>
|
<div class="inner-content">
|
<TabContent
|
:info="item"
|
:serialNo="serialNo"
|
:objectType="objectType"
|
:customerID="customerID"
|
:flowno="flowno"
|
:occurType="occurType"
|
:alterobjectno="alterobjectno"
|
:canEdit="true"
|
@updateBusinessRate:businessRate="handleBusinessRateUpdate"
|
></TabContent>
|
<div
|
class="tab-form-buttons"
|
v-if="index === treeList.length - 1"
|
>
|
<p>
|
<el-button
|
class="comm-button"
|
style="width: 120px"
|
@click="goBack"
|
>返回</el-button
|
>
|
</p>
|
<p>
|
<el-button
|
class="comm-button"
|
style="width: 120px"
|
type="primary"
|
@click="submit"
|
:loading="submitLoading"
|
>提交</el-button
|
>
|
</p>
|
</div>
|
</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</ScrollToTab>
|
</el-main>
|
</el-container>
|
</template>
|
<script>
|
import TabContent from "../../../comprehensiveTransaction/components/TabContent.vue";
|
import ScrollToTab from "../../../comprehensiveTransaction/components/ScrollToTab.vue";
|
import { mapState } from "vuex";
|
import {
|
claimVDRepayment, //VD部分还款认领流水
|
claimVDFinishPayment, //VD结清认领流水
|
} from "@comprehensive/serve/public";
|
export default {
|
components: {
|
TabContent,
|
ScrollToTab,
|
},
|
data() {
|
return {
|
treeList: [],
|
loading: false,
|
submitLoading: false,
|
tabIndex: 0,
|
moreIndex: -1,
|
clientHeight: 600,
|
tabScroll: "tab_scroll",
|
contentScroll: "content_scroll",
|
serialNo: "",
|
objectType: "",
|
customerID: "",
|
alterobjectno: "",
|
flowno: "",
|
occurType: "",
|
enterType: "",
|
finishRate: "",
|
};
|
},
|
created() {
|
this.init();
|
},
|
mounted() {
|
this.setEleHeight();
|
window.addEventListener("resize", this.setEleHeight);
|
},
|
methods: {
|
init() {
|
console.log("this.$route.query", this.$route.query);
|
const { serialNo, objectType, flowno, phaseNo, customerid, enterType } =
|
this.$route.query;
|
this.serialNo = serialNo;
|
this.objectType = objectType;
|
this.flowno = flowno;
|
this.customerID = customerid;
|
this.enterType = enterType;
|
this.treeList = this.generateTabs(enterType);
|
},
|
//部分还款认领流水接口
|
async requestClaimVDRepayment(trxnbrArr) {
|
this.submitLoading = true;
|
try {
|
const resp = await claimVDRepayment({
|
applySerialNo: this.serialNo,
|
trxnbrArr,
|
});
|
this.submitLoading = false;
|
if (resp.code == "00") {
|
this.$message.success("提交成功！");
|
setTimeout(() => {
|
window.history.go(-1);
|
}, 200);
|
}
|
} catch (error) {
|
this.submitLoading = false;
|
}
|
},
|
//结清认领流水接口
|
async requestClaimVDFinishPayment(trxnbrArr) {
|
if (!this.finishRate) {
|
this.$message.error("请完善结清信息，获取执行利率！");
|
return;
|
}
|
this.submitLoading = true;
|
try {
|
const resp = await claimVDFinishPayment({
|
applySerialNo: this.serialNo,
|
trxnbrArr,
|
finishRate: parseFloat(this.finishRate),
|
});
|
this.submitLoading = false;
|
if (resp.code == "00") {
|
this.$message.success("提交成功！");
|
setTimeout(() => {
|
window.history.go(-1);
|
}, 200);
|
}
|
} catch (error) {
|
this.submitLoading = false;
|
}
|
},
|
//结清利率更新
|
handleBusinessRateUpdate(rate) {
|
console.log("结清利率更新", rate);
|
this.finishRate = rate;
|
},
|
generateTabs(enterType) {
|
// 定义公共部分
|
const commonTab = (name, state = "CUSTOMER_INFO") => ({
|
tabname: name,
|
exist: "Y",
|
gray: "N",
|
visible: "Y",
|
open: "",
|
edit: "",
|
readonly: "N",
|
state: state,
|
});
|
// 根据 enterType 动态生成结果 部分还款
|
if (enterType === "partialPrepayment") {
|
return [
|
commonTab("主授信人信息"),
|
commonTab("主授信人贷款信息"),
|
commonTab("待认领资金"),
|
commonTab("提前部分还款试算"),
|
];
|
}
|
// 结清
|
else {
|
return [
|
commonTab("主授信人信息"),
|
commonTab("主授信人贷款信息"),
|
commonTab("结清信息"),
|
commonTab("待认领资金"),
|
];
|
}
|
},
|
// 切换tab的处理
|
changeTab(index, flg = false) {
|
this.tabIndex = index;
|
this.$refs.scrollTab.setScrollTop(index, flg);
|
this.$nextTick(() => this.$refs.scrollTab.setTabScrollTop());
|
},
|
setEleHeight() {
|
const clientHeight = document.documentElement.clientHeight;
|
this.clientHeight = clientHeight || 600;
|
},
|
goBack() {
|
window.history.go(-1);
|
},
|
submit() {
|
const { enterType } = this;
|
const trxnbrArr = this.selectBankWaterList.map((item) => item.trxnBr);
|
if (trxnbrArr.length < 1) {
|
this.$message.error("银行流水不能为空！");
|
return;
|
}
|
var _this = this;
|
//不同的逻辑提交接口不一样
|
//部分还款
|
if (enterType === "partialPrepayment") {
|
this.requestClaimVDRepayment(trxnbrArr);
|
}
|
//提前结清
|
else {
|
this.requestClaimVDFinishPayment(trxnbrArr);
|
}
|
},
|
},
|
computed: {
|
currTabItem() {
|
let { tabIndex, treeList } = this;
|
return treeList[tabIndex] || {};
|
},
|
...mapState({
|
selectBankWaterList: (state) => state.product.selectBankWaterList,
|
}),
|
},
|
watch: {
|
$route() {
|
this.init();
|
},
|
selectBankWaterList(newVal) {
|
console.log("选中流水", this.selectBankWaterList, newVal);
|
},
|
},
|
beforeRouteEnter(to, from, next) {
|
console.log("beforeRouteEnter", to, from, next);
|
next((vm) => {
|
vm.$store.commit("SET_detailBackRoute", from.path);
|
});
|
},
|
beforeDestroy() {
|
window.removeEventListener("resize", this.setEleHeight);
|
},
|
};
|
</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;
|
}
|
}
|
}
|
</style>
|
