nebula/pages/admin/topic.vue

<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 rel="nofollow" @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>