✨ 专题管理功能

pages/admin/topic/_topic_uri.vue

@@ -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>

pages/admin/topic/bind/_topic_id.vue

@@ -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>

pages/admin/topic/post/_topic_id.vue

@@ -0,0 +1,13 @@
+<template>
+  <el-row></el-row>
+</template>
+
+<script>
+export default {
+  name: "adminTopicPost"
+}
+</script>
+
+<style scoped>
+
+</style>

pages/admin/topics.vue

@@ -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,
+          path: '/admin/topic/' + data
-          params: data
         })
       },
       createTopic() {
@@ -65,7 +66,7 @@
       }
     },
     mounted() {
-      this.$store.commit("setActiveMenu", "admin-topic");
+      this.$store.commit("setActiveMenu", "admin-topics");
     }
   }
 </script>

store/topic.js

@@ -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)
+      })
   }
 }