parent
f7a27f7e30
commit
539f1f95cc
31 changed files with 1427 additions and 1274 deletions
@ -1,90 +1,98 @@ |
||||
<template> |
||||
<!-- 资讯管理 --> |
||||
<div class="page"> |
||||
<ul class="column-tab"> |
||||
<li :class="{active: tabsName == 1}" @click="handleClick(1)"><i class="el-icon-collection-tag"></i> 栏目管理</li> |
||||
<li :class="{active: tabsName == 2}" @click="handleClick(2)"><i class="el-icon-document"></i> 内容管理</li> |
||||
</ul> |
||||
<columnManage class="flex-1" ref="content1" v-if="tabsName == 1" /> |
||||
<ContentManage class="flex-1" ref="content2" v-if="tabsName == 2" /> |
||||
</div> |
||||
<!-- 资讯管理 --> |
||||
<div class="page"> |
||||
<ul class="column-tab"> |
||||
<li :class="{active: tabsName == 1}" |
||||
@click="handleClick(1)"><i class="el-icon-collection-tag"></i> 栏目管理</li> |
||||
<li :class="{active: tabsName == 2}" |
||||
@click="handleClick(2)"><i class="el-icon-document"></i> 内容管理</li> |
||||
</ul> |
||||
<columnManage class="flex-1" |
||||
ref="content1" |
||||
v-if="tabsName == 1" /> |
||||
<ContentManage class="flex-1" |
||||
ref="content2" |
||||
v-if="tabsName == 2" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import ColumnManage from "../columnManage"; |
||||
import ContentManage from "../contentManage"; |
||||
export default { |
||||
components: { |
||||
ColumnManage, |
||||
ContentManage |
||||
components: { |
||||
ColumnManage, |
||||
ContentManage |
||||
}, |
||||
data () { |
||||
return { |
||||
tabsName: this.$store.state.tabId |
||||
}; |
||||
}, |
||||
// 页面离开的时候如果内容管理的排序没有保存则提示 |
||||
beforeRouteLeave (to, from, next) { |
||||
this.routeLeave(next, true) |
||||
}, |
||||
methods: { |
||||
switchTab (id) { |
||||
this.tabsName = id |
||||
this.$store.commit('setInfoTab', id) |
||||
this.$store.commit('setColumnId', '') |
||||
}, |
||||
data() { |
||||
return { |
||||
tabsName: this.$store.state.tabId |
||||
}; |
||||
// 页面离开询问保存 |
||||
routeLeave (fn, param) { |
||||
const tab = this.tabsName |
||||
let content = this.$refs['content' + tab] |
||||
if (tab == 2) content = content.$refs.content |
||||
const { list, originList } = content |
||||
// 更改了信息才需要提示 |
||||
if (JSON.stringify(list) !== JSON.stringify(originList)) { |
||||
this.$confirm(`您已更改了${tab == 1 ? '栏目' : '文章'}排序，是否保存更改？`, '提示', { |
||||
type: 'warning', |
||||
closeOnClickModal: false |
||||
}).then(() => { |
||||
content.sortSubmit() |
||||
fn(param) |
||||
}).catch(() => { |
||||
fn(param) |
||||
}) |
||||
} else { |
||||
fn(param) |
||||
} |
||||
}, |
||||
// 页面离开的时候如果内容管理的排序没有保存则提示 |
||||
beforeRouteLeave(to, from, next) { |
||||
this.routeLeave(next, true) |
||||
}, |
||||
methods: { |
||||
switchTab(id) { |
||||
this.tabsName = id |
||||
this.$store.commit('setInfoTab', id) |
||||
this.$store.commit('setColumnId', '') |
||||
}, |
||||
// 页面离开询问保存 |
||||
routeLeave(fn, param) { |
||||
const tab = this.tabsName |
||||
let content = this.$refs['content' + tab] |
||||
if (tab == 2) content = content.$refs.content |
||||
const { list, originList } = content |
||||
// 更改了信息才需要提示 |
||||
if (JSON.stringify(list) !== JSON.stringify(originList)) { |
||||
this.$confirm(`您已更改了${tab == 1 ? '栏目' : '文章'}排序，是否保存更改？`, '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
content.sortSubmit() |
||||
fn(param) |
||||
}).catch(() => { |
||||
fn(param) |
||||
}) |
||||
} else { |
||||
fn(param) |
||||
} |
||||
}, |
||||
// tab回调 |
||||
handleClick(id) { |
||||
this.routeLeave(this.switchTab, id) |
||||
} |
||||
}, |
||||
mounted() { |
||||
|
||||
// tab回调 |
||||
handleClick (id) { |
||||
this.routeLeave(this.switchTab, id) |
||||
} |
||||
}, |
||||
mounted () { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.flex-1 { |
||||
flex: 1; |
||||
flex: 1; |
||||
} |
||||
.page { |
||||
display: flex; |
||||
display: flex; |
||||
} |
||||
.column-tab { |
||||
width: 120px; |
||||
border-right: solid 1px #e6e6e6; |
||||
li { |
||||
display: flex; |
||||
align-items: center; |
||||
height: 60px; |
||||
cursor: pointer; |
||||
i { |
||||
margin-right: 5px; |
||||
} |
||||
&:hover, &.active { |
||||
color: #9278FF; |
||||
width: 120px; |
||||
border-right: solid 1px #e6e6e6; |
||||
li { |
||||
display: flex; |
||||
align-items: center; |
||||
height: 60px; |
||||
cursor: pointer; |
||||
i { |
||||
margin-right: 5px; |
||||
} |
||||
&:hover, |
||||
&.active { |
||||
color: #9278ff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,121 +1,132 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="left"> |
||||
<div class="inner"> |
||||
<div class="text-center"> |
||||
<img :src="$store.state.avatar" class="avatar" /> |
||||
<el-upload :headers="{token}" :action="this.api.updateUserAvatars" name="file" :limit="10" :show-file-list="false" :on-success="changeAvatar"> |
||||
<el-button type="text" size="small">点击更换头像</el-button> |
||||
</el-upload> |
||||
</div> |
||||
|
||||
<ul class="menu"> |
||||
<li v-for="item in typeList" :key="item.index" :class="{active: item.index == active}"> |
||||
{{ item.title }} |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div class="right"> |
||||
<info ref="info" @updateStatus="updateStatus"></info> |
||||
<div class="wrap"> |
||||
<div class="left"> |
||||
<div class="inner"> |
||||
<div class="text-center"> |
||||
<img :src="$store.state.avatar" |
||||
class="avatar" /> |
||||
<el-upload :headers="{token}" |
||||
:action="this.api.updateUserAvatars" |
||||
name="file" |
||||
:limit="10" |
||||
:show-file-list="false" |
||||
:on-success="changeAvatar"> |
||||
<el-button type="text" |
||||
size="small">点击更换头像</el-button> |
||||
</el-upload> |
||||
</div> |
||||
|
||||
<ul class="menu"> |
||||
<li v-for="item in typeList" |
||||
:key="item.index" |
||||
:class="{active: item.index == active}"> |
||||
{{ item.title }} |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
<div class="right"> |
||||
<info ref="info" |
||||
@updateStatus="updateStatus"></info> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from '@/setting' |
||||
import { mapState,mapMutations } from 'vuex' |
||||
import { mapState, mapMutations } from 'vuex' |
||||
import info from './info' |
||||
import util from '@/libs/util' |
||||
export default { |
||||
data() { |
||||
return { |
||||
token: sessionStorage.getItem('token'), |
||||
typeList: [ |
||||
{ |
||||
index: '1', |
||||
title: '用户信息' |
||||
} |
||||
], |
||||
active: '1', |
||||
edited: false |
||||
}; |
||||
}, |
||||
components: { info }, |
||||
computed: { |
||||
...mapState('user', [ |
||||
'avatar' |
||||
]), |
||||
}, |
||||
// 离开的时候判断是否有保存更改的信息,没有则拦截并提示 |
||||
beforeRouteLeave(to, from, next) { |
||||
if(this.edited){ |
||||
this.$confirm(`您所更改的内容未更新，是否更新？`, '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$refs.info.save() |
||||
next(false) |
||||
}).catch(() => { |
||||
next(false) |
||||
}) |
||||
}else{ |
||||
next() |
||||
data () { |
||||
return { |
||||
token: sessionStorage.getItem('token'), |
||||
typeList: [ |
||||
{ |
||||
index: '1', |
||||
title: '用户信息' |
||||
} |
||||
], |
||||
active: '1', |
||||
edited: false |
||||
}; |
||||
}, |
||||
components: { info }, |
||||
computed: { |
||||
...mapState('user', [ |
||||
'avatar' |
||||
]), |
||||
}, |
||||
// 离开的时候判断是否有保存更改的信息,没有则拦截并提示 |
||||
beforeRouteLeave (to, from, next) { |
||||
if (this.edited) { |
||||
this.$confirm(`您所更改的内容未更新，是否更新？`, '提示', { |
||||
type: 'warning', |
||||
closeOnClickModal: false |
||||
}).then(() => { |
||||
this.$refs.info.save() |
||||
next(false) |
||||
}).catch(() => { |
||||
next(false) |
||||
}) |
||||
} else { |
||||
next() |
||||
} |
||||
}, |
||||
mounted () { |
||||
|
||||
}, |
||||
methods: { |
||||
changeAvatar (res) { |
||||
this.$store.commit('userAvatar', { |
||||
avatar: res.message |
||||
}) |
||||
}, |
||||
mounted() { |
||||
|
||||
}, |
||||
methods: { |
||||
changeAvatar(res) { |
||||
this.$store.commit('userAvatar', { |
||||
avatar: res.message |
||||
}) |
||||
}, |
||||
updateStatus(status){ |
||||
this.edited = status |
||||
} |
||||
updateStatus (status) { |
||||
this.edited = status |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.wrap{ |
||||
.wrap { |
||||
display: flex; |
||||
width: 1280px; |
||||
margin: 0 auto; |
||||
background-color: #f3f6fa; |
||||
.text-center { |
||||
text-align: center; |
||||
text-align: center; |
||||
} |
||||
.left{ |
||||
.left { |
||||
margin-right: 12px; |
||||
background-color: #fff; |
||||
box-shadow: 2px 0px 6px 0px #EEEEEE; |
||||
.inner{ |
||||
box-shadow: 2px 0px 6px 0px #eeeeee; |
||||
.inner { |
||||
width: 170px; |
||||
padding: 20px 0; |
||||
} |
||||
.avatar{ |
||||
.avatar { |
||||
width: 80px; |
||||
height: 80px; |
||||
border-radius: 50%; |
||||
} |
||||
.menu{ |
||||
.menu { |
||||
margin-top: 32px; |
||||
li{ |
||||
li { |
||||
padding: 0 20px; |
||||
color: #303133; |
||||
font-size: 14px; |
||||
line-height: 38px; |
||||
cursor: pointer; |
||||
&.active{ |
||||
&.active { |
||||
color: #fff; |
||||
background-color: #9278ff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.right{ |
||||
.right { |
||||
flex: 1; |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue