<template>
|
<div class="DetailsLayout" style="min-width:1054px">
|
<el-container>
|
<el-container class="projectContainer">
|
<el-aside class="projectSidebar" width="159px" style="height:100vh">
|
<el-menu :default-active="$route.path">
|
<el-menu-item-group>
|
<el-menu-item v-if="mainTain">
|
<router-link :to="goBack" replace >
|
<el-button round size="mini" class="returnList" style="font-size:12px;background-color:#eee;">
|
<i class="el-icon-back"></i>
|
返回列表
|
</el-button>
|
</router-link>
|
</el-menu-item>
|
</el-menu-item-group>
|
<el-menu-item :index="'/area/projectManagement/details/' + item.tabName" v-for="(item, index) in menu" :disabled="!item.isClick" :key="index" @click="handleSwith(item.tabName, index)">
|
<span slot="title">{{item.tabNameDes}}</span>
|
</el-menu-item>
|
</el-menu>
|
</el-aside>
|
<el-container class="projectContent" style="min-height:100vh">
|
<el-main style="padding: 0 30px 100px;">
|
<router-view id="area" class="areaDetail" @removeMainTain="removeMainTain"></router-view>
|
</el-main>
|
<el-footer id="project" style="height:100px">
|
<el-row :gutter="20" type="flex" justify="space-around">
|
<el-col :span="8">
|
<el-button size="mini" v-if="prevPageBtn" @click="handlePrevPage" style="margin-right:40px">上一页</el-button>
|
<el-button size="mini" type="primary" v-if="nextPageBtn" @click="handleNextPage">下一页</el-button>
|
</el-col>
|
</el-row>
|
</el-footer>
|
</el-container>
|
</el-container>
|
</el-container>
|
</div>
|
</template>
|
|
<script>
|
// import '../area/style/area.styl'
|
import { queryTabAttrs } from '@/api/area'
|
import { mapState } from 'vuex'
|
export default {
|
data: function () {
|
return {
|
menu: [],
|
swithMenu: [],
|
nextPageBtn: false,
|
prevPageBtn: false,
|
currentIndex: 0,
|
tabName: 'projectBasicInformation',
|
// goBack: '/area/projectManagement/index',
|
type: '',
|
mainTain: true
|
}
|
},
|
created () {
|
const { dataType, objectNo, objectType, projectFlag, projectType, projectJump = '', menuPhaseNo = '', taskAdjustment = '' } = this.$route.query
|
let detailsParams = {
|
dataType,
|
objectNo,
|
objectType,
|
projectFlag,
|
projectType,
|
projectJump,
|
menuPhaseNo,
|
taskAdjustment
|
}
|
// 保理垫用区别于自营和社会化项目,如果不修改初始的tabName会导致下一页操作点击2次才会跳转值对应的路由页面
|
if (projectType === '3') {
|
this.tabName = 'developerProjectInformation'
|
}
|
this.$store.commit('SET_detailsParams', detailsParams)
|
this.initMenu()
|
},
|
computed: {
|
...mapState({
|
detailsParams: state => state.risk.detailsParams
|
}),
|
goBack: {
|
get() {
|
const { menuPhaseNo, taskAdjustment } = this.detailsParams
|
if (menuPhaseNo) {
|
if (taskAdjustment) {
|
return '/comprehensiveTransaction/ajustProjectTask'
|
} else {
|
return `/area/check/index?menuPhaseNo=${menuPhaseNo}`
|
}
|
} else {
|
if (taskAdjustment) {
|
return '/comprehensiveTransaction/ajustProjectTask'
|
} else {
|
return '/area/projectManagement/index'
|
}
|
}
|
},
|
set() {
|
|
}
|
}
|
},
|
watch: {
|
currentIndex (newVal) {
|
this.prevPageBtn = Boolean(this.swithMenu[newVal - 1])
|
this.nextPageBtn = Boolean(this.swithMenu[newVal + 1])
|
},
|
detailsParams() {
|
// this.initMenu()
|
}
|
},
|
methods: {
|
initMenu () {
|
const { type, projectJump } = this.$route.query
|
if (projectJump === '0' || this.detailsParams.projectJump === '') {
|
this.mainTain = false
|
}
|
this.type = type
|
if (this.type === 'check') {
|
this.goBack = '/area/' + this.type + '/index'
|
}
|
if (!this._.isEmpty(this.detailsParams.menuPhaseNo)) {
|
this.goBack = '/area/check/index?menuPhaseNo=' + this.detailsParams.menuPhaseNo
|
}
|
let params = {
|
isManage: true,
|
modify: false,
|
dataType: this.detailsParams.dataType,
|
objectType: this.detailsParams.objectType,
|
projectFlag: this.detailsParams.projectFlag,
|
projectType: this.detailsParams.projectType,
|
serialno: this.detailsParams.objectNo
|
}
|
queryTabAttrs(params).then(res => {
|
this.menu = res.result
|
this.swithMenu = this.menu.filter(item => item.isClick === true)
|
this.currentIndex = this.menu.findIndex((item) => {
|
return item.tabName === this.tabName
|
})
|
this.prevPageBtn = Boolean(this.swithMenu[this.currentIndex - 1])
|
this.nextPageBtn = Boolean(this.swithMenu[this.currentIndex + 1])
|
})
|
},
|
handleSwith (value, index) {
|
this.tabName = value
|
this.currentIndex = index
|
// this.initMenu()
|
this.$router.push({ path: '/area/projectManagement/details/' + value })
|
},
|
handleNextPage () {
|
this.tabName = this.swithMenu[this.currentIndex + 1].tabName
|
console.log(this.tabName)
|
this.currentIndex += 1
|
// this.initMenu()
|
this.goDetails(this.tabName)
|
},
|
handlePrevPage () {
|
this.tabName = this.swithMenu[this.currentIndex - 1].tabName
|
this.currentIndex -= 1
|
// this.initMenu()
|
this.goDetails(this.tabName)
|
},
|
goDetails (value) {
|
this.$router.push({ path: '/area/projectManagement/details/' + value })
|
},
|
// 点击维护记录重新渲染页签
|
removeMainTain() {
|
this.initMenu()
|
}
|
}
|
}
|
</script>
|
|
<style lang="stylus" scoped>
|
@import "../area/style/area.styl"
|
// .el-header{
|
// padding-left: 20px;
|
// height: 46px !important;
|
// line-height: 46px;
|
// font-size: 14px;
|
// background-color: #F9F9F9;
|
// }
|
.el-aside{
|
border-right 1px solid #eee
|
}
|
#project.el-footer{
|
position: fixed
|
width 100%
|
bottom 0
|
background-color white
|
padding-top 20px
|
}
|
.returnList.el-button
|
width 83px
|
height 24px
|
background-color #eee
|
border none
|
>>> span
|
position relative
|
left -18px
|
top -2px
|
.el-icon-back
|
position relative
|
left 6px
|
top -1px
|
margin-right 0px
|
font-size 14px
|
font-weight bold
|
.projectContainer
|
.projectSidebar
|
position fixed
|
left 0
|
top 0
|
z-index 1000
|
background-color #fff
|
.projectContent
|
margin-left 160px
|
</style>
|
