<template>
|
<el-container style="background: rgba(0, 0, 0, 0.02)">
|
<el-main class="detail-main" :style="{ height: `${clientHeight}px` }">
|
<ScrollToTab
|
:tabId="`#${tabScroll}`"
|
:contentId="`#${contentScroll}`"
|
:tabIndex="tabIndex"
|
@changeTab="changeTab"
|
ref="scrollTab"
|
>
|
<div class="scroll-content" :class="{ 'detail-content': !isEdit }">
|
<div class="tab-scroll">
|
<p class="back-section" v-if="!isNoBack">
|
<el-button size="small" icon="el-icon-back" round @click="goBack"
|
>返回列表</el-button
|
>
|
</p>
|
<ul :id="tabScroll">
|
<li
|
v-for="(item, index) in tabTree"
|
:key="index"
|
@click="changeTab(index, true)"
|
class="tab-list"
|
:class="{ active: tabIndex === index }"
|
>
|
<a>{{ item.tabName }}</a>
|
</li>
|
</ul>
|
</div>
|
|
<ul class="content-scroll" :id="contentScroll">
|
<li
|
v-for="(item, index) in tabTree"
|
:key="index"
|
class="content-list"
|
>
|
<div
|
class="scroll-inner"
|
:style="{
|
minHeight:
|
index === tabTree.length - 1
|
? `${clientHeight - 18}px`
|
: 'auto',
|
}"
|
>
|
<p class="scroll-title" v-if="!isEdit">{{ item.tabName }}</p>
|
<div class="inner-content">
|
<TabContent
|
:ref="`tabContent${index}`"
|
:info="item"
|
:index="index"
|
@goBack="goBack"
|
></TabContent>
|
<div
|
class="tab-form-buttons"
|
v-if="
|
tabTree.some(({ edit }) => edit === 'Y') &&
|
index === tabTree.length - 1 &&
|
!isNoButton
|
"
|
>
|
<p>
|
<el-button class="comm-button" @click="goBack"
|
>取消</el-button
|
>
|
</p>
|
<p>
|
<el-button
|
v-if="isShowSaveButton"
|
class="comm-button"
|
type="primary"
|
@click="save"
|
>保存</el-button
|
>
|
</p>
|
<p>
|
<el-button
|
class="comm-button"
|
type="primary"
|
@click="submit"
|
:disabled="btnLoading"
|
>提交</el-button
|
>
|
</p>
|
</div>
|
</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</ScrollToTab>
|
</el-main>
|
<Dialog
|
v-model="isShowSucc"
|
icon="succ"
|
iconText="提交成功"
|
:close="false"
|
:buttons="[{ text: '确定', type: 'primary' }]"
|
@handleClick="sureSucc"
|
></Dialog>
|
</el-container>
|
</template>
|
<script>
|
/**
|
* 贷款申请查询详情页
|
*/
|
import ScrollToTab from '@/components/ScrollToTab'
|
import TabContent from '@/components/TabContent'
|
import Dialog from '@/components/Dialog'
|
|
import loanOrgApplyCommit from '@/controller/loanOrgApplyCommit'
|
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
|
|
export default {
|
components: {
|
TabContent,
|
// HeaderSteps,
|
ScrollToTab,
|
Dialog,
|
},
|
data() {
|
return {
|
keepAlive: true,
|
query: {},
|
loading: false,
|
tabIndex: 0,
|
clientHeight: 600,
|
tabScroll: 'tab_scroll',
|
contentScroll: 'content_scroll',
|
|
loanOrgApplyCommitModel: null,
|
loadnCount: 0,
|
isShowSucc: false,
|
btnLoading: false,
|
}
|
},
|
created() {
|
this.init()
|
},
|
mounted() {
|
this.setEleHeight()
|
window.addEventListener('resize', this.setEleHeight)
|
},
|
methods: {
|
init() {
|
const { query } = this.$route
|
const { isShowSaveButton } = query
|
this.query = query
|
this.isShowSaveButton = isShowSaveButton === '1'
|
this.keepAlive = true
|
this.queryLoanTransUtilTabTree()
|
|
this.loanOrgApplyCommitModel = loanOrgApplyCommit()
|
},
|
|
setEleHeight() {
|
const clientHeight = document.documentElement.clientHeight
|
this.clientHeight = clientHeight || 600
|
},
|
|
// 贷后交易名称下拉列表
|
async queryLoanTransUtilTabTree() {
|
const { query } = this
|
const { applySerialno, tabName, tabIndex, isEdit, ...other } = query
|
const { parameterMap } = query
|
const temp =
|
typeof parameterMap === 'string'
|
? { parameterMap: JSON.parse(parameterMap) }
|
: {}
|
this.queryTabTree({
|
...other,
|
...temp,
|
loanSerialno: applySerialno,
|
})
|
|
// console.log(list.some(({ edit }) => edit === 'Y'))
|
// 初始定位有bug
|
// if (typeof tabIndex !== 'undefined' && tabIndex < item.length) {
|
// this.$nextTick(() => this.changeTab(tabIndex))
|
// }
|
// if (typeof tabName !== 'undefined') {
|
// const index = item.findIndex(
|
// ({ tabName: itemName }) => itemName === tabName
|
// )
|
// if (index > -1) {
|
// this.$nextTick(() => this.changeTab(index))
|
// }
|
// }
|
},
|
|
// 切换tab的处理
|
changeTab(index, flg = false) {
|
this.tabIndex = index
|
this.$refs.scrollTab.setScrollTop(index, flg)
|
this.$nextTick(() => this.$refs.scrollTab.setTabScrollTop())
|
},
|
|
// 返回列表
|
goBack() {
|
const { query } = this
|
const { from, transCode } = query
|
if (from === 'cts') {
|
window.history.go(-1)
|
} else {
|
if (transCode === 'T1004') {
|
this.keepAlive = false
|
// this.setIsRefresh(transCode)
|
}
|
this.$router.go(-1)
|
}
|
},
|
|
save() {
|
this.submit(1)
|
},
|
// 是否为保存
|
async submit(isSave = 0) {
|
const { tabTree, query, baseInfo, personLimit, loanOrgApplyCommitModel } =
|
this
|
const { operationMenu, operation, submitType } = query
|
const submitNames = [
|
'基本信息',
|
'人行约束',
|
'授信约束',
|
'放款约束',
|
'还款约束',
|
'功能约束',
|
'协议影像',
|
'审批与流程信息',
|
'资产配置',
|
]
|
submitNames.forEach(async (name) => {
|
const index = tabTree.findIndex(({ tabName }) => tabName === name)
|
if (
|
index > -1 &&
|
typeof this.$refs[`tabContent${index}`][0].submit === 'function'
|
) {
|
this.keepAlive = false
|
const res = this.$refs[`tabContent${index}`][0].submit(isSave)
|
this.loadnCount++
|
console.log(this.loadnCount)
|
if (this.loadnCount === 7) {
|
if (operationMenu === 'loadInstitutions') {
|
const {
|
loanOrgApplyConstraintSubmitReq,
|
loanOrgBaseInfoSubmitReq,
|
loanOrgFuncConstraintListSubmitReqs,
|
loanOrgImageListSubmitReqs,
|
loanOrgPedestrianSubmitReq,
|
loanOrgPutoutConstraintSubmitReq,
|
loanOrgRepaymentConstraintSubmitReq,
|
loanOrgRepaymentLedgerReqs,
|
loanOrgFuncAssetInfoSubmitReqs,
|
} = this
|
console.log(loanOrgBaseInfoSubmitReq, '基础信息')
|
console.log(loanOrgPedestrianSubmitReq, '人行约束')
|
console.log(loanOrgApplyConstraintSubmitReq, '授信约束')
|
console.log(loanOrgPutoutConstraintSubmitReq, '放款约束')
|
console.log(loanOrgRepaymentConstraintSubmitReq, '还款约束')
|
console.log(loanOrgRepaymentLedgerReqs, '还款约束-还款分账清单')
|
console.log(loanOrgFuncConstraintListSubmitReqs, '功能约束')
|
console.log(loanOrgImageListSubmitReqs, '协议影像')
|
console.log(loanOrgFuncAssetInfoSubmitReqs,'资产配置')
|
console.log(this.loadnCount)
|
if (
|
Object.keys(loanOrgBaseInfoSubmitReq).length === 0 ||
|
Object.keys(loanOrgPedestrianSubmitReq).length === 0 ||
|
Object.keys(loanOrgApplyConstraintSubmitReq).length === 0 ||
|
Object.keys(loanOrgApplyConstraintSubmitReq).length === 0 ||
|
Object.keys(loanOrgRepaymentConstraintSubmitReq).length === 0
|
) {
|
this.$message.warning('当前页面有必填数据未填写')
|
this.loadnCount = 0
|
this.setControlFuncArr([])
|
return
|
}
|
// 人行约束校验
|
if (
|
loanOrgPedestrianSubmitReq.chargeType === '02' &&
|
loanOrgPedestrianSubmitReq.loanOrgPedestrianSubmitListReqs
|
.length === 0
|
) {
|
console.log('人行约束校验', 1)
|
this.$message.warning(
|
'人行约束-当人行收费标准为‘分段收费’时,人行收费标准列表不能为空!'
|
)
|
this.loadnCount = 0
|
this.setControlFuncArr([])
|
return
|
}
|
// 授信约束校验
|
if (
|
loanOrgApplyConstraintSubmitReq.loanOrgApplyConstraintSubmitListReqs &&
|
loanOrgApplyConstraintSubmitReq
|
.loanOrgApplyConstraintSubmitListReqs.length === 0
|
) {
|
console.log('授信约束校验', 1)
|
this.$message.warning('授信约束-授信支持银行清单列表不能为空!')
|
this.loadnCount = 0
|
this.setControlFuncArr([])
|
return
|
}
|
if (
|
loanOrgApplyConstraintSubmitReq.chargeType === '02' &&
|
loanOrgApplyConstraintSubmitReq.loanOrgBankChargeListSubmitReqs
|
.length === 0
|
) {
|
console.log('授信约束校验', 2)
|
this.$message.warning(
|
'授信约束-当身份验证收费标准为‘分段收费’时,身份验证收费标准列表不能为空!'
|
)
|
this.loadnCount = 0
|
this.setControlFuncArr([])
|
return
|
}
|
// 放款约束
|
if (
|
loanOrgPutoutConstraintSubmitReq.loanOrgPutoutConstraintSubmitListReqs &&
|
loanOrgPutoutConstraintSubmitReq
|
.loanOrgPutoutConstraintSubmitListReqs.length === 0
|
) {
|
console.log('放款约束', 1)
|
this.$message.warning('放款约束-放款支持银行清单列表不能为空!')
|
this.loadnCount = 0
|
this.setControlFuncArr([])
|
return
|
}
|
if (
|
loanOrgPutoutConstraintSubmitReq.payFeeRule === '02' &&
|
loanOrgPutoutConstraintSubmitReq
|
.loanOrgRepaymentChargeListSubmitReqs.length === 0
|
) {
|
console.log('放款约束', 2)
|
this.$message.warning(
|
'放款约束-当代付收费标准为‘分段收费’时,代付收费标准列表不能为空!'
|
)
|
this.loadnCount = 0
|
this.setControlFuncArr([])
|
return
|
}
|
// 还款约束
|
if (
|
loanOrgRepaymentConstraintSubmitReq.loanOrgPaymentConstraintSubmitListReqs &&
|
loanOrgRepaymentConstraintSubmitReq
|
.loanOrgPaymentConstraintSubmitListReqs.length === 0
|
) {
|
console.log('还款约束', 1)
|
this.$message.warning(
|
'还款约束-自主扣款支持银行清单列表不能为空!'
|
)
|
this.loadnCount = 0
|
this.setControlFuncArr([])
|
return
|
}
|
if (
|
loanOrgRepaymentConstraintSubmitReq.chargeType === '02' &&
|
loanOrgRepaymentConstraintSubmitReq
|
.loanOrgPaymentChargeListSubmitRsps.length === 0
|
) {
|
console.log('还款约束', 2)
|
this.$message.warning(
|
'还款约束-当代扣收费标准为‘分段收费’时,代扣收费标准列表不能为空!'
|
)
|
this.loadnCount = 0
|
this.setControlFuncArr([])
|
return
|
}
|
// 还款约束-还款分账清单
|
// if (
|
// loanOrgRepaymentLedgerReqs &&
|
// loanOrgRepaymentLedgerReqs.length === 0
|
// ) {
|
// console.log('还款约束',3)
|
// this.$message.warning('还款约束-还款分账清单列表不能为空!')
|
// this.loadnCount = 0
|
// this.setControlFuncArr([])
|
// return
|
// }
|
// 功能约束
|
if (loanOrgFuncConstraintListSubmitReqs.length > 0) {
|
const onOff = loanOrgFuncConstraintListSubmitReqs.every(
|
(item) => {
|
if (item.functionOnOff === '') {
|
return false
|
} else {
|
if (
|
item.functionOnOff === '01' &&
|
item.functionType !== '' &&
|
item.overTime !== '' &&
|
item.applyFrequency !== ''
|
) {
|
return true
|
}
|
if (
|
item.functionOnOff === '02' ||
|
item.functionOnOff === '03'
|
) {
|
return true
|
}
|
return false
|
}
|
}
|
)
|
if (!onOff) {
|
this.$message.warning(`功能约束-基本信息未填写!`)
|
this.loadnCount = 0
|
this.setControlFuncArr([])
|
return
|
}
|
const isLengthZero = loanOrgFuncConstraintListSubmitReqs.every(
|
(item) => {
|
//
|
if (
|
item.functionOnOff === '01' &&
|
item.functionType !== '00' &&
|
item.loanOrgSubFlowListSubmitReqs.length === 0
|
) {
|
return false
|
} else {
|
return true
|
}
|
}
|
)
|
if (!isLengthZero) {
|
this.$message.warning(
|
`功能约束-当功能开关为打开时当前页面的功能子流程定义列表不能为空!`
|
)
|
this.loadnCount = 0
|
this.setControlFuncArr([])
|
return
|
}
|
// loanOrgFuncConstraintListSubmitReqs.map((item) => {
|
// if (item.functionOnOff === '01' && item.loanOrgSubFlowListSubmitReqs.length === 0) {
|
// this.$message.warning(`功能约束-当功能开关为打开时当前页面的功能子流程定义列表不能为空!`)
|
// this.loadnCount = 0
|
// this.setControlFuncArr([])
|
// return
|
// }
|
// })
|
}
|
// 协议影像
|
if (loanOrgImageListSubmitReqs.length === 0) {
|
console.log('协议影像', 2)
|
this.$message.warning('协议影像列表不能为空')
|
this.loadnCount = 0
|
this.setControlFuncArr([])
|
return
|
}
|
|
try {
|
this.btnLoading = true
|
const res = await loanOrgApplyCommitModel.request({
|
loanOrgApplyConstraintSubmitReq,
|
loanOrgBaseInfoSubmitReq,
|
loanOrgFuncConstraintListSubmitReqs,
|
loanOrgImageListSubmitReqs,
|
loanOrgPedestrianSubmitReq,
|
loanOrgPutoutConstraintSubmitReq,
|
loanOrgRepaymentConstraintSubmitReq,
|
loanOrgRepaymentLedgerReqs,
|
loanOrgFuncAssetSubmitReq:loanOrgFuncAssetInfoSubmitReqs,
|
submitType,
|
})
|
this.btnLoading = false
|
this.isShowSucc = true
|
this.loadnCount = 0
|
} catch (error) {
|
this.setControlFuncArr([])
|
this.btnLoading = false
|
console.log(error)
|
this.loadnCount = 0
|
}
|
this.loadnCount = 0
|
}
|
setTimeout(() => {
|
this.loadnCount = 0
|
}, 1000)
|
}
|
}
|
})
|
|
// this.$nextTick(() => {
|
// if (Number(isSubmitBack) === 1) {
|
// this.goBack()
|
// }
|
// })
|
},
|
|
sureSucc() {
|
this.isShowSucc = false
|
this.goBack()
|
},
|
// ...mapMutations(['setTabTree','setIsRefresh']),
|
...mapMutations(['setTabTree', 'setControlFuncArr']),
|
...mapActions(['queryTabTree']),
|
},
|
computed: {
|
currTabItem() {
|
let { tabIndex, tabTree } = this
|
return tabTree[tabIndex] || {}
|
},
|
isNoBack() {
|
const { isHideBack } = this.query
|
return Number(isHideBack) === 1
|
},
|
isNoButton() {
|
const { isHideButton } = this.query
|
return Number(isHideButton) === 1
|
},
|
...mapState({
|
tabTree: (state) => state.tabTree,
|
loanOrgBaseInfoSubmitReq: (state) =>
|
state.loanInstitution.loanOrgBaseInfoSubmitReq,
|
loanOrgPedestrianSubmitReq: (state) =>
|
state.loanInstitution.loanOrgPedestrianSubmitReq,
|
loanOrgApplyConstraintSubmitReq: (state) =>
|
state.loanInstitution.loanOrgApplyConstraintSubmitReq,
|
loanOrgPutoutConstraintSubmitReq: (state) =>
|
state.loanInstitution.loanOrgPutoutConstraintSubmitReq,
|
loanOrgRepaymentConstraintSubmitReq: (state) =>
|
state.loanInstitution.loanOrgRepaymentConstraintSubmitReq,
|
loanOrgFuncConstraintListSubmitReqs: (state) =>
|
state.loanInstitution.loanOrgFuncConstraintListSubmitReqs,
|
loanOrgImageListSubmitReqs: (state) =>
|
state.loanInstitution.loanOrgImageListSubmitReqs,
|
loanOrgRepaymentLedgerReqs: (state) =>
|
state.loanInstitution.loanOrgRepaymentLedgerReqs,
|
loanOrgFuncAssetInfoSubmitReqs: (state) =>
|
state.loanInstitution.loanOrgFuncAssetInfoSubmitReqs,
|
}),
|
...mapGetters(['isEdit']),
|
},
|
watch: {
|
$route(to, from) {
|
const { path } = to
|
if (/\/comm\/apply$/.test(path)) {
|
this.init()
|
}
|
},
|
},
|
beforeRouteLeave(to, from, next) {
|
const { keepAlive } = this
|
// this.tabTree = []
|
this.setTabTree([])
|
if (to.meta.keepAlive) {
|
to.meta.keepAlive = keepAlive
|
}
|
next()
|
},
|
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: 10px 20px 14px 20px;
|
background: #fff;
|
padding: 20px 20px 20px 10px;
|
box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.03);
|
border-radius: 4px;
|
& .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;
|
height: 100%;
|
& .tab-scroll {
|
width: 139px;
|
height: 100%;
|
overflow-y: auto;
|
list-style: none;
|
font-size: 14px;
|
background: #fff;
|
margin-right: 2px;
|
& ul {
|
margin: 0;
|
padding: 0;
|
list-style: none;
|
}
|
& .back-section {
|
width: 128px;
|
background: #fff;
|
border-radius: 0px 4px 0px 0px;
|
padding: 14px 0 20px 0px;
|
margin: 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;
|
}
|
}
|
&::-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;
|
}
|
}
|
}
|
}
|
& .content-scroll {
|
flex: 1;
|
height: 100%;
|
overflow-y: auto;
|
position: relative;
|
margin: 0 0 0 0;
|
list-style: none;
|
padding: 0 0 0 29px;
|
background: #fff;
|
& .scroll-inner {
|
background: #fff;
|
margin-bottom: 20px;
|
& .scroll-title {
|
font-size: 16px;
|
border-bottom: solid 2px #eeeeee;
|
color: #000;
|
padding: 16px 20px;
|
font-weight: 500;
|
margin: 0;
|
}
|
& .inner-content {
|
padding: 0 0 20px 0;
|
overflow: hidden;
|
& >>> .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;
|
}
|
}
|
}
|
.detail-content {
|
& .content-scroll {
|
background: none;
|
padding-left: 20px;
|
height: 100%;
|
& .scroll-inner {
|
height: 100%;
|
box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.03);
|
& .inner-content {
|
padding-left: 20px;
|
}
|
}
|
}
|
}
|
.detail-main {
|
margin: 0;
|
padding: 0;
|
overflow: hidden;
|
}
|
</style>
|
