<template>
|
<el-container>
|
<el-main :style="{padding: 0, height: `${clientHeight - 60}px`}">
|
<ScrollToTab
|
:tabId="`#${tabScroll}`"
|
:contentId="`#${contentScroll}`"
|
:tabIndex="tabIndex"
|
@changeTab="changeTab"
|
ref="scrollTab"
|
>
|
<div class="scroll-content">
|
<div class="tab-scroll">
|
<p class="back-section">
|
<el-button
|
v-if="from !== 'newCts' && !noBackBtn"
|
size="small"
|
icon="el-icon-back"
|
round
|
@click="goBack"
|
>返回列表</el-button>
|
</p>
|
<ul :id="tabScroll" :style="{height: `${clientHeight - 60}px`}">
|
<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>
|
</div>
|
|
<ul
|
class="content-scroll"
|
:id="contentScroll"
|
:style="{height: `${clientHeight - 110}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">
|
<MalTabContent :info="item"></MalTabContent>
|
|
<div
|
class="tab-form-buttons"
|
v-if="treeList.some(({edit})=> edit === 'Y') && index === treeList.length - 1 && !isHideButton"
|
>
|
<p>
|
<el-button class="comm-button" @click="goBack">返回</el-button>
|
</p>
|
<p>
|
<el-button class="comm-button" type="primary" @click="submitChildren">提交</el-button>
|
</p>
|
</div>
|
</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</ScrollToTab>
|
</el-main>
|
</el-container>
|
</template>
|
<script>
|
/**
|
* 贷款申请查询详情页
|
*/
|
import { mapMutations } from 'vuex'
|
import { queryCommonTabTree } from '@comprehensive/serve/public'
|
import MalTabContent from './components/MalTabContent'
|
import ScrollToTab from './components/ScrollToTab'
|
|
export default {
|
components: {
|
MalTabContent,
|
ScrollToTab
|
},
|
data() {
|
return {
|
from: '',
|
noBackBtn: '',
|
serialNo: '',
|
objectType: '',
|
customerID: '',
|
flowno: '',
|
treeList: [],
|
loading: false,
|
tabIndex: 0,
|
moreIndex: -1,
|
clientHeight: 600,
|
isHideButton: false,
|
tabScroll: 'tab_scroll',
|
contentScroll: 'content_scroll'
|
}
|
},
|
created() {
|
this.init()
|
},
|
mounted() {
|
this.setEleHeight()
|
window.addEventListener('resize', this.setEleHeight)
|
},
|
methods: {
|
init() {
|
const { menuId, from, noBackBtn, isHideButton } = this.$route.query
|
if (!parent.g_menu_id && menuId) {
|
parent.g_menu_id = menuId
|
}
|
this.serialNo = this.$route.params.id
|
|
this.noBackBtn = noBackBtn
|
this.from = from
|
this.tabIndex = 0
|
this.moreIndex = -1
|
this.isHideButton = isHideButton === '1'
|
this.queryCommonTabTree()
|
},
|
|
setEleHeight() {
|
const clientHeight = document.documentElement.clientHeight
|
this.clientHeight = clientHeight || 600
|
},
|
|
async queryCommonTabTree() {
|
let { tabIndex, $route } = this
|
const { isApplyPhase, parameterMap, phaseNo, transCode } = $route.query
|
this.loading = true
|
const parameterObj =
|
parameterMap && typeof parameterMap === 'string'
|
? { parameterMap: JSON.parse(parameterMap) }
|
: {}
|
const { result } = await queryCommonTabTree({
|
isApplyPhase,
|
...parameterObj,
|
phaseNo,
|
transCode
|
})
|
|
this.loading = false
|
const { item } = result
|
const treeList = item
|
.filter(({ visible }) => visible === 'Y')
|
.map(temp => ({ ...temp, tabname: temp.tabName }))
|
this.treeList = treeList
|
this.$nextTick(() => this.changeTab(tabIndex))
|
this.SET_IsEdit(treeList.some(({ edit }) => edit === 'Y'))
|
},
|
|
// 切换tab的处理
|
changeTab(index, flg = false) {
|
this.tabIndex = index
|
this.$refs.scrollTab.setScrollTop(index, flg)
|
this.$nextTick(() => this.$refs.scrollTab.setTabScrollTop())
|
},
|
|
submitChildren() {
|
const eventName = 'PARENT_SUBMIT'
|
this.broadcast(this.$children, eventName)
|
},
|
// 向下广播 PARENT_SUBMIT 方法
|
broadcast(arr, eventName) {
|
arr.forEach(child => {
|
const nextChild = child.$children
|
if (typeof child[eventName] === 'function') {
|
child[eventName]()
|
}
|
if (nextChild) {
|
this.broadcast(nextChild, eventName)
|
}
|
})
|
},
|
|
// 返回列表
|
goBack() {
|
const { from } = this
|
if (from === 'mal') {
|
window.history.go(-1)
|
} else {
|
this.$router.go(-1)
|
// this.$router.replace({
|
// path: this.$store.state.product.detailBackRoute
|
// })
|
}
|
},
|
...mapMutations(['SET_IsEdit'])
|
},
|
computed: {
|
currTabItem() {
|
let { tabIndex, treeList } = this
|
return treeList[tabIndex] || {}
|
}
|
},
|
watch: {
|
$route() {
|
this.init()
|
}
|
},
|
// 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;
|
/* border-left: solid 1px #eeeeee; */
|
/* padding-left: 29px; */
|
}
|
& .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;
|
}
|
}
|
}
|
|
.back-section {
|
background: #fff;
|
border-radius: 0px 4px 0px 0px;
|
padding: 14px 16px 16px 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;
|
}
|
}
|
|
.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;
|
}
|
}
|
}
|
}
|
& .content-scroll {
|
flex: 1;
|
overflow-y: auto;
|
position: relative;
|
margin: 0 20px 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;
|
}
|
}
|
}
|
&::-webkit-scrollbar {
|
width: 0;
|
height: 10px;
|
}
|
& .last-scroll-inner {
|
min-height: 620px;
|
}
|
}
|
}
|
.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;
|
}
|
}
|
</style>
|
