<!--
|
* @Descripttion:
|
* @version:
|
* @Author: Pengjiantian
|
* @Date: 2019-08-26 15:08:09
|
* @LastEditors : PengJianTian
|
* @LastEditTime : 2019-12-26 10:49:00
|
-->
|
<template>
|
<div id="area" style="min-width:1054px">
|
<el-container>
|
<!-- <el-aside width="180px">
|
<el-menu :default-active="$route.path">
|
<el-menu-item>
|
<router-link to="/area/building/index">
|
<el-button round size="mini" class="returnList" style="font-size:12px">
|
<i class="el-icon-back"></i>
|
返回列表
|
</el-button>
|
</router-link>
|
</el-menu-item>
|
<template>
|
<el-menu-item
|
v-for="(item, index) in menu"
|
:disabled="!item.isClick"
|
:key="index"
|
:index="'/area/building/' + buildParams.pageType + '/' + item.tabName"
|
@click="handleSwith(item.tabName)"
|
>
|
<span slot="title">{{ item.tabNameDes }}</span>
|
</el-menu-item>
|
</template>
|
</el-menu>
|
</el-aside> -->
|
<el-container>
|
<el-main>
|
<router-view ref="childPage" @handleNextPage="handleNextPage" @bulidICommit="bulidICommit"></router-view>
|
</el-main>
|
<el-footer id="building">
|
<el-row :gutter="20" type="flex" justify="space-around">
|
<el-col :span="8" style="display: flex;justify-content: center;">
|
<!-- <el-button size="mini" v-if="buildParams.pageType === 'update'" @click="handleSave">保存</el-button>
|
<el-button size="mini" v-if="$route.path.includes('update')&&tabName === 'buildImageInfo'" @click="handlePrevPage">上一页</el-button>
|
<el-button size="mini" type="primary" v-if="tabName === 'buildInfo'" @click="handleNextPage"
|
>下一页</el-button
|
>
|
<el-button size="mini" type="primary" v-if="$route.path.includes('update')&&tabName === 'buildInfo'" @click="handleNextPage"
|
>下一页</el-button
|
> -->
|
<el-button class="blankBtn submitBtn" size="mini" v-if="isShowReturn" @click="returnList" style="margin-right:40px">返 回</el-button>
|
<el-button class="blueBtn submitBtn" size="mini" type="primary" v-if="$route.path.includes('update')&& buildParams.operation !== 'modify'" @click="handleFlowSubmit"
|
>提交
|
</el-button>
|
<el-button class="blueBtn submitBtn" size="mini" type="primary" v-if="buildParams.operation === 'modify'" @click="handleSave">保存 </el-button>
|
</el-col>
|
</el-row>
|
</el-footer>
|
</el-container>
|
</el-container>
|
<el-dialog
|
id="area-dialog"
|
:visible.sync="commitDialogVisible"
|
width="20%"
|
center
|
:before-close="enterMessages">
|
<div class="messageCheck">
|
<i class="el-icon-success checkSuccess"></i>
|
<div class="tip">提交成功</div>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="enterMessages">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { queryBuildTabAttrs } from '@/api/area/building'
|
import { mapState } from 'vuex'
|
export default {
|
data: function() {
|
return {
|
menu: [],
|
swithMenu: [],
|
nextPageBtn: false,
|
prevPageBtn: false,
|
currentIndex: 0,
|
tabName: 'buildInfo',
|
isSave: false,
|
commitDialogVisible: false, // 提交弹框
|
clientWidth: 0
|
}
|
},
|
created() {
|
this.initMenu()
|
},
|
mounted() {
|
window.addEventListener('resize', this.updateClientWidth)
|
this.updateClientWidth()
|
},
|
computed: {
|
...mapState({
|
buildParams: state => state.risk.buildParams
|
}),
|
isShowReturn() {
|
const { objectNo } = this.buildParams
|
if (objectNo) {
|
return true
|
} else {
|
return false
|
}
|
}
|
},
|
methods: {
|
initMenu() {
|
this.isSave = false
|
let params = {
|
serialNo: this.buildParams.serialNo
|
}
|
queryBuildTabAttrs(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
|
})
|
})
|
},
|
updateClientWidth() {
|
const clientWidth = document.documentElement.clientWidth || 0
|
this.clientWidth = clientWidth
|
// console.log(this.clientWidth)
|
},
|
handleSwith(value) {
|
this.tabName = value
|
this.$router.push({ path: '/area/building/' + this.buildParams.pageType + '/' + value })
|
},
|
handleNextPage() {
|
let res = this.handleSave()
|
// 处理详情页下一页没有返回值的情况
|
/* if( res === undefined){
|
this.tabName = 'buildImageInfo'
|
} */
|
if (res) {
|
this.tabName = 'buildImageInfo'
|
this.$router.push({ path: '/area/building/' + this.buildParams.pageType + '/buildImageInfo' })
|
}
|
},
|
handlePrevPage() {
|
this.tabName = 'buildInfo'
|
this.$router.push({ path: '/area/building/' + this.buildParams.pageType + '/buildInfo' })
|
},
|
// 子页面保存
|
handleSave() {
|
this.isSave = true
|
return this.$refs['childPage'].handleSave()
|
},
|
// 子页面提交
|
handleSubmit() {
|
this.$refs['childPage'].handleSubmit()
|
},
|
// 提交
|
handleFlowSubmit() {
|
this.$refs['childPage'].handleSubmit()
|
},
|
// 确认提交
|
enterMessages() {
|
this.commitDialogVisible = false
|
if (!this.commitDialogVisible) {
|
this.$router.push({ path: '/area/building/index' })
|
}
|
},
|
// 提交
|
bulidICommit() {
|
this.commitDialogVisible = true
|
},
|
// 返回列表
|
returnList() {
|
this.$router.push('/area/building/index')
|
}
|
}
|
}
|
</script>
|
|
<style lang="stylus" scope>
|
.el-main{
|
padding 19px 20px 28px
|
}
|
// .el-header{
|
// padding-left: 20px;
|
// height: 46px !important;
|
// line-height: 46px;
|
// font-size: 14px;
|
// background-color: #F9F9F9;
|
// }
|
.el-aside{
|
border-right 1px solid #eee
|
}
|
#building.el-footer{
|
position: fixed
|
width 100%
|
bottom 0
|
background-color white
|
height 100px
|
padding-top 20px
|
}
|
.returnList.el-button
|
width 83px
|
height 24px
|
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
|
.messageCheck{
|
display:flex;
|
flex-direction:column;
|
justify-content:center;
|
align-items: center;
|
}
|
.checkSuccess{
|
font-size: 80px;
|
color:rgb(82, 196, 26);
|
}
|
.tip{
|
margin-top: 10px;
|
font-size: 20px;
|
}
|
.returnList.el-button
|
width 83px
|
height 24px
|
>>> 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
|
>>>.el-footer
|
.el-col-8
|
display flex
|
justify-content center
|
.submitBtn
|
width 120px
|
height 30px
|
padding 0
|
span
|
font-size 14px
|
height 20px
|
font-weight 400
|
line-height 20px
|
.blankBtn
|
margin-left 40px
|
border-radius 4px
|
border 1px solid #ccc
|
color rgba(85,85,85,1)
|
&:nth-child(1)
|
margin-left 0
|
.blueBtn
|
margin-left 40px
|
background-color rgba(0,129,240,1)
|
border-radius 4px
|
color rgba(255,255,255,1)
|
// messagesBox样式
|
.building_messages_box.el-message-box--center
|
width 458px
|
height 173px
|
.el-message-box__header
|
padding-top 40px
|
.el-message-box__title
|
// font-family PingFangSC-Medium,PingFangSC
|
font-size 18px
|
font-width bold
|
height 25px
|
line-height 25px
|
.el-message-box__headerbtn
|
top 20px
|
right 20px
|
background rgba(245,245,245,1)
|
.el-message-box__content
|
.el-message-box__message
|
p
|
height 20px
|
line-height 20px
|
font-size 14px
|
font-weight 400
|
color rgba(101,101,101,1)
|
// font-family PingFangSC-Medium,PingFangSC
|
.el-message-box__btns
|
padding-top 30px
|
.building_messages_box_confirm
|
margin-left 40px
|
margin-left 40px
|
background-color rgba(0,129,240,1)
|
border-radius 4px
|
color rgba(255,255,255,1)
|
.building_messages_box_cancel
|
border-radius 4px
|
border:1px solid rgba(204,204,204,1)
|
color rgba(85,85,85,1)
|
.building_messages_box_cancel,.building_messages_box_confirm
|
padding 0
|
width 120px
|
height 30px
|
span
|
font-size 14px
|
height 20px
|
font-weight 400
|
line-height 20px
|
</style>
|
