✨ 后台管理-标签功能
This commit is contained in:
x ronger
parent
a7b80e4989
commit
28bbaab8cd
124
pages/admin/tag.vue
Normal file
124
pages/admin/tag.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<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>标签管理</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</el-col>
|
||||
<el-col style="margin: .5rem;">
|
||||
<el-button size="small" @click="createTag">创建标签</el-button>
|
||||
<el-button size="small" @click="cleanUnusedTag">清除未使用标签</el-button>
|
||||
</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="updateTag(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-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex';
|
||||
|
||||
export default {
|
||||
name: "tag",
|
||||
fetch({store, params, error}) {
|
||||
return Promise.all([
|
||||
store
|
||||
.dispatch('tag/fetchList', params)
|
||||
.catch(err => error({statusCode: 404}))
|
||||
])
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
tags: state => state.tag.list.data.tags,
|
||||
pagination: state => state.topic.list.data.pagination
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
cleanUnusedTag() {
|
||||
let _ts = this;
|
||||
_ts.$confirm('确定清除未使用标签吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
_ts.$axios.$delete('/api/admin/tag/clean-unused').then(function (res) {
|
||||
if (res && res.message){
|
||||
_ts.$message.error(res.message);
|
||||
} else {
|
||||
const p = _ts.pagination.currentPage;
|
||||
_ts.currentChange(p);
|
||||
_ts.$message({
|
||||
type: 'success',
|
||||
message: '已清理完成!'
|
||||
});
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
_ts.$message({
|
||||
type: 'info',
|
||||
message: '已取消'
|
||||
});
|
||||
});
|
||||
},
|
||||
currentChange(page){
|
||||
this.$store.dispatch('tag/fetchList', {
|
||||
page: page
|
||||
})
|
||||
},
|
||||
onRouter(item,data) {
|
||||
this.$router.push({
|
||||
name: item,
|
||||
params: data
|
||||
})
|
||||
},
|
||||
createTag() {
|
||||
this.$router.push({
|
||||
name: 'admin-tag-post'
|
||||
})
|
||||
},
|
||||
updateTag(id) {
|
||||
this.$router.push({
|
||||
name: 'admin-tag-post',
|
||||
params: {
|
||||
id: id
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.commit("setActiveMenu", "admin-tag");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
76
store/tag.js
Normal file
76
store/tag.js
Normal file
@ -0,0 +1,76 @@
|
||||
/**
|
||||
* @file 分类数据状态 / ES module
|
||||
* @module store/category
|
||||
* @author Ronger <https://github.com/ronger-x>
|
||||
*/
|
||||
|
||||
export const ADMIN_API_PATH = '/api/admin'
|
||||
|
||||
const getDefaultListData = () => {
|
||||
return {
|
||||
tags: [],
|
||||
pagination: {}
|
||||
}
|
||||
}
|
||||
|
||||
export const state = () => {
|
||||
return {
|
||||
fetching: false,
|
||||
data: [],
|
||||
list: {
|
||||
fetching: false,
|
||||
data: getDefaultListData()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const mutations = {
|
||||
updateListFetching(state, action) {
|
||||
state.list.fetching = action
|
||||
},
|
||||
updateListData(state, action) {
|
||||
state.list.data = action
|
||||
},
|
||||
updateFetching(state, action) {
|
||||
state.fetching = action
|
||||
},
|
||||
updateDetailData(state, action) {
|
||||
state.data = action
|
||||
}
|
||||
}
|
||||
|
||||
export const actions = {
|
||||
fetchList({commit}, params = {}) {
|
||||
// 清空已有数据
|
||||
commit('updateListData', getDefaultListData())
|
||||
commit('updateListFetching', true)
|
||||
let data = {
|
||||
page: params.page || 1
|
||||
}
|
||||
|
||||
return this.$axios
|
||||
.$get(`${ADMIN_API_PATH}/tags`, {
|
||||
params: data
|
||||
})
|
||||
.then(response => {
|
||||
commit('updateListFetching', false);
|
||||
commit('updateListData', response);
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error);
|
||||
commit('updateListFetching', false);
|
||||
});
|
||||
},
|
||||
fetchDetail({ commit }, params) {
|
||||
commit('updateFetching', true);
|
||||
return this.$axios
|
||||
.$get(`${ADMIN_API_PATH}/tag/${params.tag_id}`)
|
||||
.then(response => {
|
||||
commit('updateDetailData', response)
|
||||
commit('updateFetching', false)
|
||||
})
|
||||
.catch(error => {
|
||||
commit('updateFetching', false)
|
||||
})
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user