✨ 后台管理-专题功能

pages/admin/topic.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-row :gutter="8">
+    <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="createTopic">创建专题</el-button>
+    </el-col>
+    <el-col :span="8" style="margin-bottom: .5rem;" v-for="topic in topics" :key="topic.idTopic">
+      <el-card>
+        <div class="card-body d-flex flex-column">
+          <el-col :span="4" style="text-align: right;">
+            <img :src="topic.topicIconPath" :alt="topic.topicTitle" class="topic-brand-img">
+          </el-col>
+          <el-col :span="20">
+            <el-col>
+              <el-col>
+                <el-link @click="onRouter('admin-topic-tag',topic)" :underline="false"><h4>{{ topic.topicTitle }}</h4>
+                </el-link>
+              </el-col>
+              <el-col>
+                <div class="text-muted article-summary-md">{{ topic.topicDescription }}</div>
+              </el-col>
+            </el-col>
+          </el-col>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+  import {mapState} from 'vuex';
+
+  export default {
+    name: "topic",
+    fetch({store, params, error}) {
+      return Promise.all([
+        store
+          .dispatch('topic/fetchList', params)
+          .catch(err => error({statusCode: 404}))
+      ])
+    },
+    computed: {
+      ...mapState({
+        topics: state => state.topic.list.data.topics,
+        pagination: state => state.topic.list.data.pagination
+      })
+    },
+    methods: {
+      onRouter(item, data) {
+        this.$router.push({
+          name: item,
+          params: data
+        })
+      },
+      createTopic() {
+        let _ts = this;
+        _ts.$router.push({
+          path: '/admin/topic/post'
+        })
+      }
+    },
+    mounted() {
+      this.$store.commit("setActiveMenu", "admin-topic");
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

store/index.js

@@ -69,7 +69,7 @@ export const actions = {
 
     const initFetchAppData = [
       // 内容数据
-      store.dispatch('topic/fetchList'),
+      store.dispatch('topic/fetchNavList'),
       store.dispatch('article/fetchList')
     ]
 

store/topic.js

@@ -5,30 +5,69 @@
  */
 
 export const TOPIC_API_PATH = '/api/topic'
+export const ADMIN_API_PATH = '/api/admin'
+
+const getDefaultListData = () => {
+  return {
+    topics: [],
+    pagination: {}
+  }
+}
 
 export const state = () => {
   return {
     fetching: false,
-    data: []
+    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
   },
-  updateListData(state, action) {
+  updateNavData(state, action) {
     state.data = action
   }
 }
 
 export const actions = {
-  fetchList({ commit }, params) {
+  fetchList({commit}, params = {}) {
+    // 清空已有数据
+    commit('updateListData', getDefaultListData())
+    commit('updateListFetching', true)
+    let data = {
+      page: params.page || 1
+    }
+
+    return this.$axios
+      .$get(`${ADMIN_API_PATH}/topics`, {
+        params: data
+      })
+      .then(response => {
+        commit('updateListFetching', false);
+        commit('updateListData', response);
+      })
+      .catch(error => {
+        console.log(error);
+        commit('updateListFetching', false);
+      });
+  },
+  fetchNavList({ commit }, params) {
     commit('updateFetching', true);
     return this.$axios
       .$get(`${TOPIC_API_PATH}/topic-nav`)
       .then(response => {
-        commit('updateListData', response)
+        commit('updateNavData', response)
         commit('updateFetching', false)
       })
       .catch(error => {