✨ 专题管理功能
This commit is contained in:
x ronger
parent
0b84aff032
commit
c0d38994a1
152
pages/admin/topic/_topic_uri.vue
Normal file
152
pages/admin/topic/_topic_uri.vue
Normal file
@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-col style="margin-bottom: 1rem;">
|
||||
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||
<el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item :to="{ path: '/admin/topics' }">专题管理</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>{{ topic.topicTitle }}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</el-col>
|
||||
<el-col v-if="topic.idTopic">
|
||||
<el-col :span="2" class="text-right">
|
||||
<img :src="topic.topicIconPath" :alt="topic.topicTitle" class="topic-brand-img">
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<el-col>
|
||||
<el-col :span="20">
|
||||
<span class="topic-title">{{ topic.topicTitle }}</span>
|
||||
<span class="text-muted" v-if="topic.topicTagCount">{{ topic.topicTagCount }} 引用</span>
|
||||
<span class="text-muted" v-else> <span style="color: #F56C6C;">0</span> 引用</span>
|
||||
</el-col>
|
||||
<el-col v-if="hasPermissions" :span="4" class="text-right">
|
||||
<el-dropdown trigger="click" @command="handleCommand">
|
||||
<el-link :underline="false"><i class="el-icon-more"></i></el-link>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="admin-post-topic">管理</el-dropdown-item>
|
||||
<el-dropdown-item command="admin-bind-topic-tag">关联标签</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<p>{{ topic.topicDescription }}</p>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-col>
|
||||
<el-col v-for="tag in tags" :key="tag.idTag">
|
||||
<el-card style="margin: .5rem;">
|
||||
<el-col :span="1">
|
||||
<el-avatar shape="square" :src="tag.tagIconPath" fit="scale-down"></el-avatar>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<el-col>
|
||||
<span class="tag-title">{{ tag.tagTitle }}</span>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<span class="text-muted" v-if="tag.tagArticleCount">{{ tag.tagArticleCount }} 引用</span>
|
||||
<span class="text-muted" v-else> <span style="color: #F56C6C;">0</span> 引用</span>
|
||||
</el-col>
|
||||
</el-col>
|
||||
<el-col :span="3" class="text-right">
|
||||
<el-button size="small" @click="unbindTopicTag(tag.idTag)">取消关联</el-button>
|
||||
</el-col>
|
||||
<el-col style="margin-bottom: .8rem">{{ tag.tagDescription }}</el-col>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="vertical-container text-center">
|
||||
<el-pagination v-show="pagination.total > 10" v-model="pagination"
|
||||
layout="prev, pager, next"
|
||||
:current-page="pagination.currentPage"
|
||||
:total="pagination.total"
|
||||
@current-change="currentChange">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex';
|
||||
|
||||
export default {
|
||||
name: "adminTopicDetail",
|
||||
validate({params, store}) {
|
||||
if (typeof params.topic_uri === 'undefined') {
|
||||
return true;
|
||||
}
|
||||
return params.topic_uri
|
||||
},
|
||||
fetch({store, params, error}) {
|
||||
return Promise.all([
|
||||
store.dispatch('topic/fetchDetail', params)
|
||||
.catch(err => error({statusCode: 404})),
|
||||
store.dispatch('topic/fetchTopicTags', {
|
||||
topic_uri: params.topic_uri,
|
||||
page: 1
|
||||
})
|
||||
])
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
topic: state => state.topic.detail.data,
|
||||
tags: state => state.topic.tags.data.tags,
|
||||
pagination: state => state.topic.tags.data.pagination
|
||||
}),
|
||||
hasPermissions() {
|
||||
return this.$store.getters.hasPermissions('topic');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
currentChange(page) {
|
||||
let _ts = this;
|
||||
this.$store.dispatch('topic/fetchTopicTags', {
|
||||
page: page,
|
||||
topic_uri: _ts.topic.topicUri
|
||||
})
|
||||
},
|
||||
handleCommand(command) {
|
||||
let _ts = this;
|
||||
if ("admin-post-topic" === command) {
|
||||
_ts.$router.push({
|
||||
path: `/admin/topic/post/${_ts.topic.idTopic}`
|
||||
})
|
||||
} else {
|
||||
_ts.$router.push({
|
||||
path: `/admin/topic/bind/${_ts.topic.idTopic}`
|
||||
})
|
||||
}
|
||||
},
|
||||
unbindTopicTag(idTag) {
|
||||
let _ts = this;
|
||||
this.$confirm('确定取消关联吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
_ts.$axios.$delete('/api/admin/topic/unbind-topic-tag', {
|
||||
data: {
|
||||
idTag: idTag,
|
||||
idTopic: _ts.topic.idTopic
|
||||
}
|
||||
}).then(function (res) {
|
||||
if (res && res.message) {
|
||||
_ts.$message.error(res.message);
|
||||
} else {
|
||||
const page = _ts.pagination.currentPage;
|
||||
_ts.$store.dispatch('topic/fetchTopicTags', {
|
||||
page: page,
|
||||
topic_uri: _ts.topic.topicUri
|
||||
});
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
124
pages/admin/topic/bind/_topic_id.vue
Normal file
124
pages/admin/topic/bind/_topic_id.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-col style="margin-bottom: 1rem;">
|
||||
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||
<el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item :to="{ path: '/admin/topics' }">专题管理</el-breadcrumb-item>
|
||||
<el-breadcrumb-item :to="{ path: '/admin/topic/' + topic.topicUri }">{{ topic.topicTitle }}</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>关联标签</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-input placeholder="请输入标签名" v-model="tagTitle">
|
||||
<el-button @click="getTags()" slot="append" icon="el-icon-search"></el-button>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col v-for="tag in tags" :key="tag.idTag">
|
||||
<el-card style="margin: .5rem;">
|
||||
<el-col :span="1">
|
||||
<el-avatar shape="square" :src="tag.tagIconPath" fit="scale-down"></el-avatar>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<el-col>
|
||||
<span class="tag-title">{{ tag.tagTitle }}</span>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<span class="text-muted" v-if="tag.tagArticleCount">{{ tag.tagArticleCount }} 引用</span>
|
||||
<span class="text-muted" v-else> <span style="color: #F56C6C;">0</span> 引用</span>
|
||||
</el-col>
|
||||
</el-col>
|
||||
<el-col :span="3" class="text-right">
|
||||
<el-button size="small" @click="bindTopicTag(tag.idTag)">关联</el-button>
|
||||
</el-col>
|
||||
<el-col style="margin-bottom: .8rem">{{ tag.tagDescription }}</el-col>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div class="vertical-container text-center">
|
||||
<el-pagination v-show="pagination.total > 10" v-model="pagination"
|
||||
layout="prev, pager, next"
|
||||
:current-page="pagination.currentPage"
|
||||
:total="pagination.total"
|
||||
@current-change="currentChange">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex';
|
||||
|
||||
export default {
|
||||
name: "adminTopicBindTag",
|
||||
fetch({store, params, error}) {
|
||||
let _ts = this;
|
||||
return Promise.all([
|
||||
store.dispatch('topic/fetchUnBindTags', {
|
||||
idTopic: params.topic_id
|
||||
})
|
||||
])
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
topic: state => state.topic.detail.data,
|
||||
tags: state => state.topic.tags.data.tags,
|
||||
pagination: state => state.topic.tags.data.pagination
|
||||
})
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tagTitle: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
currentChange(page) {
|
||||
let _ts = this;
|
||||
this.$store.dispatch('topic/fetchUnBindTags', {
|
||||
page: page,
|
||||
idTopic: _ts.topic.idTopic,
|
||||
tagTitle: _ts.tagTitle
|
||||
})
|
||||
},
|
||||
bindTopicTag(idTag) {
|
||||
let _ts = this;
|
||||
this.$confirm('确定关联吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
_ts.$axios.$post('/api/admin/topic/bind-topic-tag', {
|
||||
idTag: idTag,
|
||||
idTopic: _ts.topic.idTopic
|
||||
}).then(function (res) {
|
||||
if (res && res.message) {
|
||||
_ts.$message.error(res.message);
|
||||
} else {
|
||||
_ts.currentChange(_ts.pagination.currentPage);
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
_ts.currentChange(_ts.pagination.currentPage);
|
||||
});
|
||||
},
|
||||
getTags() {
|
||||
this.currentChange(this.pagination.currentPage);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let _ts = this;
|
||||
console.log(_ts.topic);
|
||||
if (!_ts.topic.idTopic) {
|
||||
_ts.$axios.$get('/api/admin/topic/detail/' + _ts.$route.params.topic_id).then(function (res) {
|
||||
_ts.$store.commit('topic/updateDetailData', res)
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
13
pages/admin/topic/post/_topic_id.vue
Normal file
13
pages/admin/topic/post/_topic_id.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<el-row></el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "adminTopicPost"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -18,7 +18,9 @@
|
||||
<el-col :span="20">
|
||||
<el-col>
|
||||
<el-col>
|
||||
<el-link rel="nofollow" @click="onRouter('admin-topic-tag',topic)" :underline="false"><h4>{{ topic.topicTitle }}</h4>
|
||||
<el-link rel="nofollow" @click="onRouter('admin-topic-detail',topic.topicUri)" :underline="false"><h4>{{
|
||||
topic.topicTitle
|
||||
}}</h4>
|
||||
</el-link>
|
||||
</el-col>
|
||||
<el-col>
|
||||
@ -36,7 +38,7 @@
|
||||
import {mapState} from 'vuex';
|
||||
|
||||
export default {
|
||||
name: "topic",
|
||||
name: "topics",
|
||||
fetch({store, params, error}) {
|
||||
return Promise.all([
|
||||
store
|
||||
@ -53,8 +55,7 @@
|
||||
methods: {
|
||||
onRouter(item, data) {
|
||||
this.$router.push({
|
||||
name: item,
|
||||
params: data
|
||||
path: '/admin/topic/' + data
|
||||
})
|
||||
},
|
||||
createTopic() {
|
||||
@ -65,7 +66,7 @@
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.commit("setActiveMenu", "admin-topic");
|
||||
this.$store.commit("setActiveMenu", "admin-topics");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -13,6 +13,12 @@ const getDefaultListData = () => {
|
||||
pagination: {}
|
||||
}
|
||||
}
|
||||
const getDefaultTagsData = () => {
|
||||
return {
|
||||
tags: [],
|
||||
pagination: {}
|
||||
}
|
||||
}
|
||||
|
||||
export const state = () => {
|
||||
return {
|
||||
@ -21,6 +27,14 @@ export const state = () => {
|
||||
list: {
|
||||
fetching: false,
|
||||
data: getDefaultListData()
|
||||
},
|
||||
detail: {
|
||||
fetching: false,
|
||||
data: {}
|
||||
},
|
||||
tags: {
|
||||
fetching: false,
|
||||
data: getDefaultTagsData()
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -37,6 +51,18 @@ export const mutations = {
|
||||
},
|
||||
updateNavData(state, action) {
|
||||
state.data = action
|
||||
},
|
||||
updateDetailFetching(state, action) {
|
||||
state.detail.fetching = action
|
||||
},
|
||||
updateDetailData(state, action) {
|
||||
state.detail.data = action
|
||||
},
|
||||
updateTopicTagsFetching(state, action) {
|
||||
state.tags.fetching = action
|
||||
},
|
||||
updateTopicTagsData(state, action) {
|
||||
state.tags.data = action
|
||||
}
|
||||
}
|
||||
|
||||
@ -73,5 +99,43 @@ export const actions = {
|
||||
.catch(error => {
|
||||
commit('updateFetching', false)
|
||||
})
|
||||
},
|
||||
fetchDetail({ commit }, params) {
|
||||
commit('updateDetailFetching', true);
|
||||
return this.$axios
|
||||
.$get(`${ADMIN_API_PATH}/topic/${params.topic_uri}`)
|
||||
.then(response => {
|
||||
commit('updateDetailData', response)
|
||||
commit('updateDetailFetching', false)
|
||||
})
|
||||
.catch(error => {
|
||||
commit('updateDetailFetching', false)
|
||||
})
|
||||
},
|
||||
fetchTopicTags({ commit }, params) {
|
||||
commit('updateTopicTagsFetching', true);
|
||||
return this.$axios
|
||||
.$get(`${ADMIN_API_PATH}/topic/${params.topic_uri}/tags?page=${params.page}`)
|
||||
.then(response => {
|
||||
commit('updateTopicTagsData', response)
|
||||
commit('updateTopicTagsFetching', false)
|
||||
})
|
||||
.catch(error => {
|
||||
commit('updateTopicTagsFetching', false)
|
||||
})
|
||||
},
|
||||
fetchUnBindTags({ commit }, params) {
|
||||
commit('updateTopicTagsFetching', true);
|
||||
return this.$axios
|
||||
.$get(`${ADMIN_API_PATH}/topic/unbind-topic-tags`, {
|
||||
params: params
|
||||
})
|
||||
.then(response => {
|
||||
commit('updateTopicTagsData', response)
|
||||
commit('updateTopicTagsFetching', false)
|
||||
})
|
||||
.catch(error => {
|
||||
commit('updateTopicTagsFetching', false)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user