<template>
|
<div class="loanApplyEdit">
|
<div class="tab">
|
<el-button icon="el-icon-back" @click="goBack">返回列表</el-button>
|
<ul>
|
<li v-for="(item,index) in applyMenu" :key="index" @click="tabJump(item,index)">
|
<span :class="{text_active:activeIndex==index}" v-if="item.gray == 'N'">{{item.tabname}}</span>
|
<span v-else :class="`${item.edit=='Y'?'text_edit':'text_disabled'}${activeIndex==index ? ' text_active' : ''}`">{{item.tabname}}</span>
|
</li>
|
</ul>
|
</div>
|
<div class="content" v-loading="loading" element-loading-background="transparent">
|
<router-view/>
|
</div>
|
</div>
|
</template>
|
<script>
|
import './index.styl';
|
import { setStorage,getStorage,removeStorage } from '@/utils/storage'
|
import common from '@/utils/common'
|
import { mapState } from 'vuex'
|
import {
|
queryApplyTabTree,
|
qryFieldMarkDataDetail,
|
queryApplyZBDEntAlterTabTree
|
} from '@/api/product'
|
export default {
|
data () {
|
return {
|
activeIndex:0,
|
applyMenu:'',
|
showCredit:false,
|
loading:false,
|
}
|
},
|
created () {
|
this.qryFieldMarkDataDetail()
|
console.log('this.$store.state',this.$store.state)
|
this.$store.state.product.applyMenu?this.applyMenu = this.$store.state.product.applyMenu:this.getApplyTabTree()
|
},
|
watch: {
|
$route(to,from){
|
// 监听路由发生变化就请求左侧菜单列表
|
this.applyMenu.forEach((val,index) => {
|
if(this.showCredit&&val.tabname=="主/共借人征信信息"){
|
this.resetMenu('主/共借人征信信息',index)
|
}else if(this.showCredit&&val.tabname=="本金回款信息"){
|
this.resetMenu('本金回款信息',index)
|
}else if(this.showCredit&&val.tabname=="息费结算信息"){
|
this.resetMenu('息费结算信息',index)
|
}else if(this.showCredit&&val.tabname=="还款信息"){
|
this.resetMenu('还款信息',index)
|
}
|
});
|
// 根据路由地址和索引对左侧菜单进行选中
|
const path = to.path.split('/')[2]?to.path.split('/')[2]:to.path.split('/')[1]
|
common.eachRoute(path,this)
|
},
|
// 监听可编辑页面的loading
|
closeLoading(val){
|
if(val){
|
this.loading = !val
|
}
|
this.$store.commit('close',this.loading)
|
}
|
},
|
computed: {
|
// 部分产品需要转对公业务
|
ispubile(){
|
const { applyInfo } = this
|
const { objectType,productID,borrowertype } = applyInfo
|
const ispubile = borrowertype == '01' && objectType == 'CreditApplyCommon'
|
return productID.indexOf('OFF_') > -1 || ispubile
|
},
|
...mapState({
|
applyInfo: state => state.product.applyInfo,
|
closeLoading: state => state.product.loading,
|
})
|
},
|
methods: {
|
// 查询标记字段详情
|
async qryFieldMarkDataDetail(){
|
const { applyInfo } = this
|
const { refuseFlag, serialNo, objectType } = applyInfo
|
if(refuseFlag == 1){
|
const res = await qryFieldMarkDataDetail({
|
objectNo: serialNo,
|
objectType: objectType
|
})
|
this.$store.commit('SET_fields',res.result)
|
}
|
},
|
// 返回列表必须将清空applyMenu的值,否则下次进来列表没变
|
goBack(){
|
this.$store.commit("SET_applyMenu", '');
|
this.$router.replace({path:this.$store.state.product.editBackRoute})
|
},
|
resetMenu(title,index){
|
this.$set(this.applyMenu,index,{
|
edit: "Y",
|
exist: "N",
|
gray: "N",
|
open: "N",
|
tabname: title,
|
visible: "Y"
|
})
|
},
|
// 遍历数组找出对应的索引
|
eachArr(params) {
|
console.log('loanApplyEdit eachArr',params,this.applyMenu)
|
this.applyMenu.forEach((val,index) => {
|
if(val.tabname==params){
|
this.activeIndex = index;
|
}
|
});
|
},
|
//查询左侧菜单列表
|
async getApplyTabTree(){
|
const { applyInfo } = this
|
const { serialNo, objectType,flowno, alterobjectno } = applyInfo
|
let res;
|
let objectTypeOFF;
|
if(this.ispubile){
|
objectTypeOFF = 'CreditFlowPublic'
|
}
|
if(flowno == 'ZBDEntInfoAlterFlow'){
|
res = await queryApplyZBDEntAlterTabTree({
|
alterobjectno: alterobjectno
|
})
|
}else{
|
res = await queryApplyTabTree({
|
objectno: serialNo,
|
objecttype: objectType
|
})
|
}
|
this.$store.commit("SET_applyMenu", res.result);
|
this.applyMenu = res.result
|
console.log('getApplyTabTree',objectTypeOFF,flowno)
|
for (let i = 0; i < res.result.length; i++) {
|
if(res.result[i].open=='Y'){
|
this.activeIndex = i;
|
common.tabInfo(res.result[i].tabname,objectTypeOFF?objectTypeOFF:flowno,this)
|
return
|
}
|
}
|
common.tabInfo(res.result[0].tabname,objectTypeOFF?objectTypeOFF:flowno,this)
|
},
|
// 更新左侧菜单
|
async updateApplyTabTree(name){
|
const { applyInfo } = this
|
const { serialNo, objectType, flowno,productID, alterobjectno } = applyInfo
|
let res;
|
let objectTypeOFF;
|
if(flowno == 'ZBDEntInfoAlterFlow'){
|
res = await queryApplyZBDEntAlterTabTree({
|
alterobjectno: alterobjectno
|
})
|
}else{
|
res = await queryApplyTabTree({
|
objectno: serialNo,
|
objecttype: objectType
|
})
|
}
|
if(this.ispubile){
|
objectTypeOFF = 'CreditFlowPublic'
|
}
|
this.applyMenu = res.result
|
this.$store.commit("SET_applyMenu", res.result);
|
this.applyMenu.forEach((val, index) => {
|
if (val.tabname == name) {
|
if(this.applyMenu[index + 1].edit=='Y'){
|
common.tabInfo(this.applyMenu[index + 1].tabname,objectTypeOFF?objectTypeOFF:flowno,this);
|
}else{
|
for (let i = 0; i < res.result.length; i++) {
|
if(res.result[i].open=='Y'){
|
this.activeIndex = i;
|
common.tabInfo(res.result[i].tabname,objectTypeOFF?objectTypeOFF:flowno,this)
|
return
|
}
|
}
|
}
|
}
|
});
|
},
|
// 点击左侧菜单进行对应的路由跳转
|
tabJump(row,index){
|
console.log('tabJump',row,index)
|
// 判断只有可编辑的才能进行跳转
|
if(row.edit=='Y'){
|
let objectTypeOFF;
|
if(this.ispubile){
|
objectTypeOFF = 'CreditFlowPublic'
|
}
|
common.tabInfo(row.tabname,objectTypeOFF?objectTypeOFF:this.applyInfo.flowno,this)
|
}
|
},
|
},
|
beforeRouteEnter(to, from, next){
|
console.log('loanApplyEdit beforeRouteEnter',to, from, next)
|
// 根据路由地址和索引对左侧菜单进行选中
|
next(vm=>{
|
// 需存储第一次from的的路由
|
if(!vm.$store.state.product.applyMenu){
|
vm.$store.commit('SET_editBackRoute', from.path)
|
}
|
const path = to.path.split('/')[2]?to.path.split('/')[2]:to.path.split('/')[1]
|
common.eachRoute(path,vm)
|
})
|
}
|
}
|
</script>
|
