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