调试接口

src/api/courseList.js

@@ -0,0 +1,25 @@
+import request from '@/utils/request'
+// 获取课程列表
+export function getCourseList(params) {
+  return request({
+    url: '/cms/course',
+    method: 'get',
+    params
+  })
+}
+// 新增课程列表
+export function addCourseList(data) {
+  return request({
+    url: '/cms/course',
+    method: 'post',
+    data
+  })
+}
+// 修改课程列表
+export function setCourseList(data) {
+  return request({
+    url: '/cms/course',
+    method: 'put',
+    data
+  })
+}

src/api/topicList.js

@@ -0,0 +1,49 @@
+import request from '@/utils/request'
+// 获取专题列表
+export function getTopicList(params) {
+  return request({
+    url: '/cms/topic',
+    method: 'get',
+    params
+  })
+}
+// 新增专题列表
+export function addTopicList(data) {
+  return request({
+    url: '/cms/topic',
+    method: 'post',
+    data
+  })
+}
+// 修改专题列表
+export function setTopicList(data) {
+  return request({
+    url: '/cms/topic',
+    method: 'put',
+    data
+  })
+}
+// 获取专题课件
+export function getTopicRelation(params) {
+  return request({
+    url: '/cms/topic/topicRelation',
+    method: 'get',
+    params
+  })
+}
+// 添加专题课件
+export function addTopicRelation(data) {
+  return request({
+    url: '/cms/topic/topicRelation',
+    method: 'post',
+    data
+  })
+}
+// 修改专题课件
+export function setTopicRelation(data) {
+  return request({
+    url: '/cms/topic/topicRelation',
+    method: 'put',
+    data
+  })
+}

src/router/index.js

@@ -140,6 +140,40 @@ export const constantRoutes = [
     hidden: true
   },
   {
+    path: '/topicList',
+    component: Layout,
+    redirect: '/topicList',
+    children: [{
+      path: 'topicList',
+      name: 'TopicList',
+      component: () => import('@/views/topicList/index'),
+      meta: { title: '专题列表', icon: 'dashboard' }
+    }]
+  },
+  {
+    path: '/topicRelation',
+    component: Layout,
+    redirect: '/topicRelation',
+    children: [{
+      path: 'topicRelation',
+      name: 'TopicRelation',
+      component: () => import('@/views/topicRelation/index'),
+      meta: { title: '专题课件' }
+    }],
+    hidden: true
+  },
+  {
+    path: '/courseList',
+    component: Layout,
+    redirect: '/courseList',
+    children: [{
+      path: 'courseList',
+      name: 'CourseList',
+      component: () => import('@/views/courseList/index'),
+      meta: { title: '课程列表', icon: 'dashboard' }
+    }]
+  },
+  {
     path: '/memberList',
     component: Layout,
     redirect: '/memberList',

src/store/getters.js

@@ -16,6 +16,9 @@ const getters = {
   getCategoryData: state => state.categoryList.getCategoryData,
   getCategoryDataLength: state => state.categoryList.getCategoryDataLength,
   getCategoryRelationData: state => state.categoryList.getCategoryRelationData,
+  getTopicData: state => state.topicList.getTopicData,
+  getRelationData: state => state.topicList.getRelationData,
+  getCourseData: state => state.courseList.getCourseData,
   getMemberData: state => state.memberList.getMemberData,
   getMemberOrderData: state => state.memberList.getMemberOrderData,
   getMemberOrderDataLength: state => state.memberList.getMemberOrderDataLength,

src/store/index.js

@@ -9,6 +9,8 @@ import permission from './modules/permission'
 import schoolTimetable from './modules/schoolTimetable'
 import dashboard from './modules/dashboard'
 import categoryList from './modules/categoryList'
+import topicList from './modules/topicList'
+import courseList from './modules/courseList'
 import memberList from './modules/memberList'
 Vue.use(Vuex)
 
@@ -22,6 +24,8 @@ const store = new Vuex.Store({
     schoolTimetable,
     dashboard,
     categoryList,
+    topicList,
+    courseList,
     memberList
   },
   getters

src/store/modules/courseList.js

@@ -0,0 +1,63 @@
+import { getCourseList, addCourseList, setCourseList } from '@/api/courseList'
+
+const state = {
+  getCourseData: []
+}
+
+const mutations = {
+  GET_COURSE: (state, data) => {
+    state.getCourseData = data
+  }
+}
+
+const actions = {
+  // 获取课程表列表
+  getCourseLists({ commit, state }, obj) {
+    const code = obj.code ? obj.code : ''
+    const status = obj.status ? obj.status : ''
+    const title = obj.title ? obj.title : ''
+    const pageNo = obj.page ? obj.page : ''
+    return new Promise((resolve, reject) => {
+      getCourseList({
+        code,
+        title,
+        status,
+        pageNo
+      }).then((res) => {
+        const list = res.data
+        commit('GET_COURSE', list)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  // 增加课程表列表
+  addCourseLists({ commit, state }, obj) {
+    return new Promise((resolve, reject) => {
+      addCourseList(obj).then((res) => {
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  // 修改课程表列表
+  setCourseLists({ commit, state }, obj) {
+    return new Promise((resolve, reject) => {
+      setCourseList(obj).then((res) => {
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+

src/store/modules/topicList.js

@@ -0,0 +1,99 @@
+import { getTopicList, addTopicList, setTopicList, getTopicRelation, addTopicRelation, setTopicRelation } from '@/api/topicList'
+
+const state = {
+  getTopicData: [],
+  getRelationData: []
+}
+
+const mutations = {
+  GET_TOPIC: (state, data) => {
+    state.getTopicData = data
+  },
+  GET_TOPIC_RELATION: (state, data) => {
+    state.getRelationData = data
+  }
+}
+
+const actions = {
+  // 获取课程表列表
+  getTopicLists({ commit, state }, obj) {
+    const code = obj.code ? obj.code : ''
+    const status = obj.status ? obj.status : ''
+    const pageNo = obj.page ? obj.page : ''
+    return new Promise((resolve, reject) => {
+      getTopicList({
+        code,
+        status,
+        pageNo
+      }).then((res) => {
+        const list = res.data
+        commit('GET_TOPIC', list)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  // 新增课程表列表
+  addTopicLists({ commit, state }, obj) {
+    return new Promise((resolve, reject) => {
+      addTopicList(obj).then((res) => {
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  // 修改课程表列表
+  setTopicLists({ commit, state }, obj) {
+    return new Promise((resolve, reject) => {
+      setTopicList(obj).then((res) => {
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  // 获取专区课件
+  getTopicRelationLists({ commit, state }, obj) {
+    return new Promise((resolve, reject) => {
+      getTopicRelation({
+        topicId: obj.topicId
+      }).then((res) => {
+        const list = res.data
+        commit('GET_TOPIC_RELATION', list)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  // 添加专区课件
+  addTopicRelationLists({ commit, state }, obj) {
+    return new Promise((resolve, reject) => {
+      addTopicRelation(obj).then((res) => {
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  // 修改专区课件
+  setTopicRelationLists({ commit, state }, obj) {
+    return new Promise((resolve, reject) => {
+      setTopicRelation(obj).then((res) => {
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+

src/views/courseList/index.vue

@@ -0,0 +1,326 @@
+/* eslint-disable no-duplicate-case */
+<template>
+  <div class="school-container">
+    <div class="topic">
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
+        <el-form-item label="code">
+          <el-input v-model="formInline.code" placeholder="code" clearable />
+        </el-form-item>
+        <el-form-item label="名字">
+          <el-input v-model="formInline.title" placeholder="名字" clearable />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="formInline.status" placeholder="请选择状态">
+            <el-option label="未上架" value="NOT_ON_STOCK" />
+            <el-option label="上架" value="HAS_ON_STOCK" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <el-button
+        type="primary"
+        style="position: absolute;right: 20px; top: 15px;"
+        @click="addTopic"
+      >添加</el-button>
+      <el-table
+        :data="getCourseData.list"
+        style="width: 100%"
+      >
+        <el-table-column
+          label="id"
+          width="180"
+          prop="id"
+        />
+        <el-table-column
+          label="code"
+          width="180"
+          prop="code"
+        />
+        <el-table-column
+          label="icon"
+          width="140"
+        >
+          <template slot-scope="scope">
+            <img :src="scope.row.iconImg" width="75">
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="标题"
+          width="200"
+          prop="title"
+        />
+        <el-table-column
+          label="类型"
+          width="100"
+        >
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.courseType === 'KNOWLEDGE' ? '知识付费' : '图书馆' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="状态"
+          width="100"
+        >
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.status === 'NOT_ON_STOCK' ? '未上架' : '已上架' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          width="200"
+        >
+          <template slot-scope="scope">
+            <i class="el-icon-time" />
+            <span style="margin-left: 10px">{{ newDate(scope.row.gmtCreated) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="修改时间"
+          width="200"
+        >
+          <template slot-scope="scope">
+            <i class="el-icon-time" />
+            <span style="margin-left: 10px">{{ newDate(scope.row.gmtModified) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleDel(scope.$index, scope.row)"
+            >{{ scope.row.status === 'NOT_ON_STOCK' ? '上架' : '下架' }}</el-button>
+            <el-button
+              size="mini"
+              @click="handleSet(scope.$index, scope.row)"
+            >修改</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-dialog title="课程" :visible.sync="dialogFormVisible">
+        <el-form ref="ruleForm" :model="form" :rules="rules">
+          <el-form-item label="code" :label-width="formLabelWidth" prop="code">
+            <el-input v-model="form.code" autocomplete="off" clearable />
+          </el-form-item>
+          <el-form-item label="名字" :label-width="formLabelWidth" prop="title">
+            <el-input v-model="form.title" autocomplete="off" clearable />
+          </el-form-item>
+          <el-form-item label="短名称" :label-width="formLabelWidth">
+            <el-input v-model="form.subTitle" autocomplete="off" clearable />
+          </el-form-item>
+          <el-form-item label="类型" :label-width="formLabelWidth" prop="courseType">
+            <el-select v-model="form.courseType" placeholder="请选择状态">
+              <el-option label="知识付费" value="KNOWLEDGE" />
+              <el-option label="图书馆" value="LIBRARY" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="icon" :label-width="formLabelWidth">
+            <el-input v-model="form.iconImg" autocomplete="off" clearable />
+          </el-form-item>
+          <el-form-item label="封面图" :label-width="formLabelWidth">
+            <el-input v-model="form.coverImg" autocomplete="off" clearable />
+          </el-form-item>
+          <el-form-item label="课程简介" :label-width="formLabelWidth">
+            <el-input v-model="form.summary" autocomplete="off" clearable />
+          </el-form-item>
+          <el-form-item label="关键词" :label-width="formLabelWidth">
+            <el-input v-model="form.keyWords" autocomplete="off" clearable />
+          </el-form-item>
+          <el-form-item label="播放状态" :label-width="formLabelWidth">
+            <el-select v-model="form.status" placeholder="请选择状态">
+              <el-option label="连续" value="CONTINUOUS_PLAY" />
+              <el-option label="不连续" value="DISCONTINUOUS_PLAY" />
+              <el-option label="循环" value="CIRCULATION_PLAY" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="排序" :label-width="formLabelWidth">
+            <el-input v-model="form.sort" autocomplete="off" clearable />
+          </el-form-item>
+          <el-form-item label="价格" :label-width="formLabelWidth">
+            <el-input v-model="form.price" autocomplete="off" clearable />
+          </el-form-item>
+          <el-form-item label="吊牌价" :label-width="formLabelWidth">
+            <el-input v-model="form.originPrice" autocomplete="off" clearable />
+          </el-form-item>
+          <el-form-item label="状态" :label-width="formLabelWidth">
+            <el-select v-model="form.status" placeholder="请选择状态">
+              <el-option label="未上架" value="NOT_ON_STOCK" />
+              <el-option label="上架" value="HAS_ON_STOCK" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="优惠" :label-width="formLabelWidth">
+            <el-select v-model="form.isDiscount" placeholder="请选择状态">
+              <el-option label="不限时优惠" value="NO" />
+              <el-option label="优惠" value="YES" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="优惠券" :label-width="formLabelWidth">
+            <el-input v-model="form.voucher" autocomplete="off" clearable />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+          <el-button type="primary" @click="handOk('ruleForm')">确 定</el-button>
+        </div>
+      </el-dialog>
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="getCourseData.totalSize"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  data() {
+    return {
+      dialogFormVisible: false,
+      formInline: {
+        code: '',
+        titl: '',
+        status: ''
+      },
+      form: {},
+      formLabelWidth: '120px',
+      rules: {
+        code: [{ required: true, message: '请输入code', trigger: 'blur' }],
+        title: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+        courseType: [{ required: true, message: '请选择状态', trigger: 'change' }]
+      },
+      page: 1,
+      type: ''
+    }
+  },
+  created() {
+    this.$store.dispatch('courseList/getCourseLists', {
+      page: this.page
+    })
+  },
+  // eslint-disable-next-line vue/order-in-components
+  computed: {
+    ...mapGetters([
+      'getCourseData'
+    ])
+  },
+  methods: {
+    newDate(date) {
+      return new Date(date).toLocaleString()
+    },
+    onSubmit() {
+      this.$store.dispatch('courseList/getCourseLists', this.formInline)
+    },
+    handleDel(index, row) {
+      const id = row.id
+      const status = row.status === 'NOT_ON_STOCK' ? 'HAS_ON_STOCK' : 'NOT_ON_STOCK'
+      this.$store.dispatch('courseList/setCourseLists', {
+        id,
+        status
+      }).then(() => {
+        this.$store.dispatch('courseList/getCourseLists', {
+          page: this.page
+        })
+      })
+    },
+    handleSet(index, row) {
+      console.log(index, row)
+      this.dialogFormVisible = true
+      this.type = 'set'
+      this.form = {
+        id: row.id,
+        code: row.code,
+        title: row.title,
+        subTitle: row.subTitle,
+        courseType: row.courseType,
+        iconImg: row.iconImg,
+        coverImg: row.coverImg,
+        summary: row.summary,
+        keyWords: row.keyWords,
+        continuity: row.continuity,
+        sort: row.sort,
+        price: row.price,
+        originPrice: row.originPrice,
+        status: row.status,
+        isDiscount: row.isDiscount,
+        voucher: row.voucher
+      }
+    },
+    handOk(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.type === 'add') {
+            this.$store.dispatch('courseList/addCourseLists', this.form).then(() => {
+              this.dialogFormVisible = false
+              this.$store.dispatch('courseList/getCourseLists', {
+                page: this.page
+              })
+            })
+          } else {
+            this.$store.dispatch('courseList/setCourseLists', this.form).then(() => {
+              this.dialogFormVisible = false
+              this.$store.dispatch('courseList/getCourseLists', {
+                page: this.page
+              })
+            })
+          }
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    addTopic() {
+      this.dialogFormVisible = true
+      this.type = 'add'
+      this.form = {
+        code: '',
+        title: '',
+        subTitle: '',
+        courseType: '',
+        iconImg: '',
+        coverImg: '',
+        summary: '',
+        keyWords: '',
+        continuity: '',
+        sort: '',
+        price: '',
+        originPrice: '',
+        status: '',
+        isDiscount: '',
+        voucher: ''
+      }
+    },
+    handleCurrentChange(val) {
+      console.log(val)
+      this.page = val
+      this.$store.dispatch('courseList/getCourseLists', {
+        page: this.page
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.topic {
+  margin-top: 20px;
+}
+.el-form {
+  width: 80%;
+}
+.el-input {
+  width: 300px;
+}
+.el-select>.el-input {
+  width: 300px;
+}
+.el-pagination {
+  text-align: center;
+  margin-top: 20px;
+}
+</style>

src/views/dashboardBlockRow/index.vue

@@ -64,6 +64,7 @@
             >修改</el-button>
             <el-button
               size="mini"
+              :disabled="disableBtn(scope.row.templateCode)"
               @click="handleUp(scope.$index, scope.row)"
             >{{ scope.row.status === 'HAS_ON_STOCK' ? '下架' : '上架' }}</el-button>
             <el-button
@@ -198,6 +199,11 @@ export default {
       }
       return templateCode
     },
+    disableBtn(code) {
+      if (code === 'SCHEDULE_TEMPATE_1' || code === 'SCHEDULE_TEMPATE_2' || code === 'SCHEDULE_TEMPATE_3' || code === 'IMAGE_TEMPATE_5') {
+        return true
+      }
+    },
     handleEdit(index, row) {
       console.log(index, row)
       this.dialogFormVisible = true

src/views/topicList/index.vue

@@ -0,0 +1,233 @@
+/* eslint-disable no-duplicate-case */
+<template>
+  <div class="school-container">
+    <div class="topic">
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
+        <el-form-item label="code">
+          <el-input v-model="formInline.code" placeholder="code" clearable />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="formInline.status" placeholder="请选择状态">
+            <el-option label="未上架" value="NOT_ON_STOCK" />
+            <el-option label="上架" value="HAS_ON_STOCK" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <el-button
+        type="primary"
+        style="position: absolute;right: 20px; top: 15px;"
+        @click="addTopic"
+      >添加</el-button>
+      <el-table
+        :data="getTopicData.list"
+        style="width: 100%"
+      >
+        <el-table-column
+          label="id"
+          width="180"
+          prop="id"
+        />
+        <el-table-column
+          label="code"
+          width="180"
+          prop="code"
+        />
+        <el-table-column
+          label="背景图"
+          width="140"
+        >
+          <template slot-scope="scope">
+            <img :src="scope.row.bgImg" width="128">
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="标题"
+          width="200"
+          prop="title"
+        />
+        <el-table-column
+          label="状态"
+          width="100"
+        >
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.status === 'NOT_ON_STOCK' ? '未上架' : '已上架' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          width="200"
+        >
+          <template slot-scope="scope">
+            <i class="el-icon-time" />
+            <span style="margin-left: 10px">{{ scope.row.gmtCreated }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="修改时间"
+          width="200"
+        >
+          <template slot-scope="scope">
+            <i class="el-icon-time" />
+            <span style="margin-left: 10px">{{ scope.row.gmtModified }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleDel(scope.$index, scope.row)"
+            >{{ scope.row.status === 'NOT_ON_STOCK' ? '上架' : '下架' }}</el-button>
+            <el-button
+              size="mini"
+              @click="handleDetail(scope.$index, scope.row)"
+            >课件</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-dialog title="专题" :visible.sync="dialogFormVisible">
+        <el-form ref="ruleForm" :model="form" :rules="rules">
+          <el-form-item label="code" :label-width="formLabelWidth" prop="code">
+            <el-input v-model="form.code" autocomplete="off" clearable />
+          </el-form-item>
+          <el-form-item label="背景图" :label-width="formLabelWidth" prop="bgImg">
+            <el-input v-model="form.bgImg" autocomplete="off" clearable />
+          </el-form-item>
+          <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
+            <el-input v-model="form.title" autocomplete="off" clearable />
+          </el-form-item>
+          <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
+            <el-select v-model="form.status" placeholder="请选择状态">
+              <el-option label="未上架" value="NOT_ON_STOCK" />
+              <el-option label="上架" value="HAS_ON_STOCK" />
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+          <el-button type="primary" @click="handOk('ruleForm')">确 定</el-button>
+        </div>
+      </el-dialog>
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="getTopicData.totalSize"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  data() {
+    return {
+      dialogFormVisible: false,
+      formInline: {
+        code: '',
+        status: ''
+      },
+      form: {
+        code: '',
+        title: '',
+        bgImg: '',
+        status: ''
+      },
+      formLabelWidth: '120px',
+      rules: {
+        code: [{ required: true, message: '请输入code', trigger: 'blur' }],
+        title: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+        bgImg: [{ required: true, message: '请输入背景图', trigger: 'blur' }],
+        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
+      },
+      page: 1
+    }
+  },
+  created() {
+    this.$store.dispatch('topicList/getTopicLists', {
+      page: this.page
+    })
+  },
+  // eslint-disable-next-line vue/order-in-components
+  computed: {
+    ...mapGetters([
+      'getTopicData'
+    ])
+  },
+  methods: {
+    onSubmit() {
+      this.$store.dispatch('topicList/getTopicLists', this.formInline)
+    },
+    handleDel(index, row) {
+      const id = row.id
+      const status = row.status === 'NOT_ON_STOCK' ? 'HAS_ON_STOCK' : 'NOT_ON_STOCK'
+      this.$store.dispatch('topicList/setTopicLists', {
+        id,
+        status
+      }).then(() => {
+        this.dialogFormVisible = false
+        this.$store.dispatch('topicList/getTopicLists', {
+          page: this.page
+        })
+      })
+    },
+    handleDetail(index, row) {
+      console.log(index, row)
+      this.$router.push({
+        path: '/topicRelation/topicRelation',
+        query: {
+          topicId: row.id
+        }
+      })
+    },
+    handOk(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$store.dispatch('topicList/addTopicLists', this.form).then(() => {
+            this.dialogFormVisible = false
+            this.$store.dispatch('topicList/getTopicLists', {
+              page: this.page
+            })
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    addTopic() {
+      this.dialogFormVisible = true
+    },
+    handleCurrentChange(val) {
+      console.log(val)
+      this.page = val
+      this.$store.dispatch('topicList/getTopicLists', {
+        page: this.page
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.topic {
+  margin-top: 20px;
+}
+.el-form {
+  width: 50%;
+}
+.el-input {
+  width: 300px;
+}
+.el-select>.el-input {
+  width: 300px;
+}
+.el-pagination {
+  text-align: center;
+  margin-top: 20px;
+}
+</style>

src/views/topicRelation/index.vue

@@ -0,0 +1,250 @@
+/* eslint-disable no-duplicate-case */
+<template>
+  <div class="school-container">
+    <div class="topic">
+      <el-button
+        type="primary"
+        @click="addTopic"
+      >添加</el-button>
+      <el-table
+        :data="getRelationData"
+        style="width: 100%"
+      >
+        <el-table-column
+          label="排序"
+          width="80"
+          prop="sort"
+        />
+        <el-table-column
+          label="id"
+          width="180"
+          prop="id"
+        />
+        <el-table-column
+          label="code"
+          width="180"
+          prop="code"
+        />
+        <el-table-column
+          label="icon"
+          width="140"
+        >
+          <template slot-scope="scope">
+            <img :src="scope.row.icon" width="128">
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="标题"
+          width="200"
+          prop="targetName"
+        />
+        <el-table-column
+          label="播放地址"
+          width="200"
+          prop="targetContent"
+        />
+        <el-table-column
+          label="收费"
+          width="100"
+        >
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.free === 'UNFREE' ? '收费' : '免费' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="状态"
+          width="100"
+        >
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.status === 'NOT_ON_STOCK' ? '未上架' : '已上架' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          width="200"
+        >
+          <template slot-scope="scope">
+            <i class="el-icon-time" />
+            <span style="margin-left: 10px">{{ newDate(scope.row.gmtCreated) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="修改时间"
+          width="200"
+        >
+          <template slot-scope="scope">
+            <i class="el-icon-time" />
+            <span style="margin-left: 10px">{{ newDate(scope.row.gmtModified) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleDel(scope.$index, scope.row)"
+            >{{ scope.row.status === 'NOT_ON_STOCK' ? '上架' : '下架' }}</el-button>
+            <el-button
+              size="mini"
+              @click="handSet(scope.$index, scope.row)"
+            >修改</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-dialog title="专题课件" :visible.sync="dialogFormVisible">
+        <el-form ref="ruleForm" :model="form" :rules="rules">
+          <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
+            <el-input v-model="form.sort" autocomplete="off" clearable />
+          </el-form-item>
+          <el-form-item v-if="type === 'add'" label="code" :label-width="formLabelWidth" prop="code">
+            <el-input v-model="form.code" autocomplete="off" clearable />
+          </el-form-item>
+          <el-form-item v-if="type === 'add'" label="播放地址" :label-width="formLabelWidth" prop="targetContent">
+            <el-input v-model="form.targetContent" autocomplete="off" clearable />
+          </el-form-item>
+          <el-form-item v-if="type === 'add'" label="标题" :label-width="formLabelWidth" prop="targetName">
+            <el-input v-model="form.targetName" autocomplete="off" clearable />
+          </el-form-item>
+          <el-form-item v-if="type === 'add'" label="收费" :label-width="formLabelWidth" prop="free">
+            <el-select v-model="form.free" placeholder="请选择状态">
+              <el-option label="收费" value="UNFREE" />
+              <el-option label="免费" value="FREE" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="type === 'add'" label="状态" :label-width="formLabelWidth" prop="status">
+            <el-select v-model="form.status" placeholder="请选择状态">
+              <el-option label="未上架" value="NOT_ON_STOCK" />
+              <el-option label="上架" value="HAS_ON_STOCK" />
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+          <el-button type="primary" @click="handOk('ruleForm')">确 定</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  data() {
+    return {
+      dialogFormVisible: false,
+      formInline: {
+        code: '',
+        status: ''
+      },
+      form: {},
+      formLabelWidth: '120px',
+      rules: {
+        sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
+        code: [{ required: true, message: '请输入code', trigger: 'blur' }],
+        targetContent: [{ required: true, message: '请输入播放内容', trigger: 'blur' }],
+        targetName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+        free: [{ required: true, message: '请选择状态', trigger: 'change' }],
+        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
+      },
+      type: ''
+    }
+  },
+  created() {
+    this.$store.dispatch('topicList/getTopicRelationLists', {
+      topicId: this.$route.query.topicId
+    })
+  },
+  // eslint-disable-next-line vue/order-in-components
+  computed: {
+    ...mapGetters([
+      'getRelationData'
+    ])
+  },
+  methods: {
+    newDate(date) {
+      return new Date(date).toLocaleString()
+    },
+    onSubmit() {
+      this.$store.dispatch('topicList/getTopicLists', this.formInline)
+    },
+    handleDel(index, row) {
+      const id = row.id
+      const status = row.status === 'NOT_ON_STOCK' ? 'HAS_ON_STOCK' : 'NOT_ON_STOCK'
+      this.$store.dispatch('topicList/setTopicRelationLists', {
+        id,
+        status
+      }).then(() => {
+        this.dialogFormVisible = false
+        this.$store.dispatch('topicList/getTopicRelationLists', {
+          topicId: this.$route.query.topicId
+        })
+      })
+    },
+    handSet(index, row) {
+      this.type = 'set'
+      this.dialogFormVisible = true
+      this.form = {
+        id: row.id,
+        sort: row.sort
+      }
+    },
+    handOk(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.type === 'add') {
+            this.$store.dispatch('topicList/addTopicRelationLists', this.form).then(() => {
+              this.dialogFormVisible = false
+              this.$store.dispatch('topicList/getTopicRelationLists', {
+                topicId: this.$route.query.topicId
+              })
+            })
+          } else {
+            this.$store.dispatch('topicList/setTopicRelationLists', this.form).then(() => {
+              this.dialogFormVisible = false
+              this.$store.dispatch('topicList/getTopicRelationLists', {
+                topicId: this.$route.query.topicId
+              })
+            })
+          }
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    addTopic() {
+      this.type = 'add'
+      this.dialogFormVisible = true
+      this.form = {
+        topicId: this.$route.query.topicId,
+        code: '',
+        targetContent: '',
+        free: '',
+        sort: '',
+        status: '',
+        targetName: ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.topic {
+  margin-top: 20px;
+}
+.el-form {
+  width: 50%;
+}
+.el-input {
+  width: 300px;
+}
+.el-select>.el-input {
+  width: 300px;
+}
+.el-pagination {
+  text-align: center;
+  margin-top: 20px;
+}
+</style>