优化

mock/index.js

@@ -1,67 +0,0 @@
-import Mock from 'mockjs'
-import { param2Obj } from '../src/utils'
-
-import user from './user'
-import table from './table'
-
-const mocks = [
-  ...user,
-  ...table
-]
-
-// for front mock
-// please use it cautiously, it will redefine XMLHttpRequest,
-// which will cause many of your third-party libraries to be invalidated(like progress event).
-export function mockXHR() {
-  // mock patch
-  // https://github.com/nuysoft/Mock/issues/300
-  Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
-  Mock.XHR.prototype.send = function() {
-    if (this.custom.xhr) {
-      this.custom.xhr.withCredentials = this.withCredentials || false
-
-      if (this.responseType) {
-        this.custom.xhr.responseType = this.responseType
-      }
-    }
-    this.proxy_send(...arguments)
-  }
-
-  function XHR2ExpressReqWrap(respond) {
-    return function(options) {
-      let result = null
-      if (respond instanceof Function) {
-        const { body, type, url } = options
-        // https://expressjs.com/en/4x/api.html#req
-        result = respond({
-          method: type,
-          body: JSON.parse(body),
-          query: param2Obj(url)
-        })
-      } else {
-        result = respond
-      }
-      return Mock.mock(result)
-    }
-  }
-
-  for (const i of mocks) {
-    Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
-  }
-}
-
-// for mock server
-const responseFake = (url, type, respond) => {
-  return {
-    url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
-    type: type || 'get',
-    response(req, res) {
-      console.log('request invoke:' + req.path)
-      res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
-    }
-  }
-}
-
-export default mocks.map(route => {
-  return responseFake(route.url, route.type, route.response)
-})

mock/mock-server.js

@@ -1,68 +0,0 @@
-const chokidar = require('chokidar')
-const bodyParser = require('body-parser')
-const chalk = require('chalk')
-const path = require('path')
-
-const mockDir = path.join(process.cwd(), 'mock')
-
-function registerRoutes(app) {
-  let mockLastIndex
-  const { default: mocks } = require('./index.js')
-  for (const mock of mocks) {
-    app[mock.type](mock.url, mock.response)
-    mockLastIndex = app._router.stack.length
-  }
-  const mockRoutesLength = Object.keys(mocks).length
-  return {
-    mockRoutesLength: mockRoutesLength,
-    mockStartIndex: mockLastIndex - mockRoutesLength
-  }
-}
-
-function unregisterRoutes() {
-  Object.keys(require.cache).forEach(i => {
-    if (i.includes(mockDir)) {
-      delete require.cache[require.resolve(i)]
-    }
-  })
-}
-
-module.exports = app => {
-  // es6 polyfill
-  require('@babel/register')
-
-  // parse app.body
-  // https://expressjs.com/en/4x/api.html#req.body
-  app.use(bodyParser.json())
-  app.use(bodyParser.urlencoded({
-    extended: true
-  }))
-
-  const mockRoutes = registerRoutes(app)
-  var mockRoutesLength = mockRoutes.mockRoutesLength
-  var mockStartIndex = mockRoutes.mockStartIndex
-
-  // watch files, hot reload mock server
-  chokidar.watch(mockDir, {
-    ignored: /mock-server/,
-    ignoreInitial: true
-  }).on('all', (event, path) => {
-    if (event === 'change' || event === 'add') {
-      try {
-        // remove mock routes stack
-        app._router.stack.splice(mockStartIndex, mockRoutesLength)
-
-        // clear routes cache
-        unregisterRoutes()
-
-        const mockRoutes = registerRoutes(app)
-        mockRoutesLength = mockRoutes.mockRoutesLength
-        mockStartIndex = mockRoutes.mockStartIndex
-
-        console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed  ${path}`))
-      } catch (error) {
-        console.log(chalk.redBright(error))
-      }
-    }
-  })
-}

mock/table.js

@@ -1,29 +0,0 @@
-import Mock from 'mockjs'
-
-const data = Mock.mock({
-  'items|30': [{
-    id: '@id',
-    title: '@sentence(10, 20)',
-    'status|1': ['published', 'draft', 'deleted'],
-    author: 'name',
-    display_time: '@datetime',
-    pageviews: '@integer(300, 5000)'
-  }]
-})
-
-export default [
-  {
-    url: '/vue-admin-template/table/list',
-    type: 'get',
-    response: config => {
-      const items = data.items
-      return {
-        code: 20000,
-        data: {
-          total: items.length,
-          items: items
-        }
-      }
-    }
-  }
-]

mock/user.js

@@ -1,84 +0,0 @@
-
-const tokens = {
-  admin: {
-    token: 'admin-token'
-  },
-  editor: {
-    token: 'editor-token'
-  }
-}
-
-const users = {
-  'admin-token': {
-    roles: ['admin'],
-    introduction: 'I am a super administrator',
-    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
-    name: 'Super Admin'
-  },
-  'editor-token': {
-    roles: ['editor'],
-    introduction: 'I am an editor',
-    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
-    name: 'Normal Editor'
-  }
-}
-
-export default [
-  // user login
-  {
-    url: '/vue-admin-template/user/login',
-    type: 'post',
-    response: config => {
-      const { username } = config.body
-      const token = tokens[username]
-
-      // mock error
-      if (!token) {
-        return {
-          code: 60204,
-          message: 'Account and password are incorrect.'
-        }
-      }
-
-      return {
-        code: 20000,
-        data: token
-      }
-    }
-  },
-
-  // get user info
-  {
-    url: '/vue-admin-template/user/info\.*',
-    type: 'get',
-    response: config => {
-      const { token } = config.query
-      const info = users[token]
-
-      // mock error
-      if (!info) {
-        return {
-          code: 50008,
-          message: 'Login failed, unable to get user details.'
-        }
-      }
-
-      return {
-        code: 20000,
-        data: info
-      }
-    }
-  },
-
-  // user logout
-  {
-    url: '/vue-admin-template/user/logout',
-    type: 'post',
-    response: _ => {
-      return {
-        code: 20000,
-        data: 'success'
-      }
-    }
-  }
-]

src/api/categoryList.js

@@ -0,0 +1,27 @@
+import request from '@/utils/request'
+// 获取专区列表
+export function getCategoryList(blockType) {
+  return request({
+    url: '/cms/category',
+    method: 'get',
+    params: {
+      blockType
+    }
+  })
+}
+// 修改专区列表
+export function setCategoryList(data) {
+  return request({
+    url: '/cms/category/updateCategory',
+    method: 'put',
+    data
+  })
+}
+// 添加专区列表
+export function addCategoryList(data) {
+  return request({
+    url: '/cms/category/saveCategory',
+    method: 'post',
+    data
+  })
+}

src/api/dashboard.js

@@ -0,0 +1,69 @@
+import request from '@/utils/request'
+// 获取首页列表
+export function getBlock() {
+  return request({
+    url: '/cms/block',
+    method: 'get'
+  })
+}
+// 获取首页行列表
+export function getBlockRow(blockId) {
+  return request({
+    url: `/cms/block/blockrow/${blockId}`,
+    method: 'get'
+  })
+}
+// 获取首页项列表
+export function getRowItem(rowId) {
+  return request({
+    url: `/cms/block/rowitem/${rowId}`,
+    method: 'get'
+  })
+}
+// 修改首页行信息
+export function setBlockRow(data) {
+  return request({
+    url: `/cms/block/blockrow/update`,
+    method: 'PUT',
+    data
+  })
+}
+// 修改增加行信息
+export function addBlockRow(data) {
+  return request({
+    url: `/cms/block/blockrow/save`,
+    method: 'POST',
+    data
+  })
+}
+// 修改首页项信息
+export function setRowItem(data) {
+  return request({
+    url: `/cms/block/rowitem/update`,
+    method: 'put',
+    data
+  })
+}
+// 添加首页项信息
+export function addRowItem(data) {
+  return request({
+    url: `/cms/block/rowitem/save`,
+    method: 'post',
+    data
+  })
+}
+// 获取首页模板列表
+export function getTempate() {
+  return request({
+    url: `/cms/tempate`,
+    method: 'get'
+  })
+}
+// 修改首页模板列表
+export function setTempate(data) {
+  return request({
+    url: `/cms/tempate/updateTemplate`,
+    method: 'put',
+    data
+  })
+}

src/api/table.js

@@ -1,9 +0,0 @@
-import request from '@/utils/request'
-
-export function getList(params) {
-  return request({
-    url: '/vue-admin-template/table/list',
-    method: 'get',
-    params
-  })
-}

src/components/Breadcrumb/index.vue

@@ -33,7 +33,7 @@ export default {
       const first = matched[0]
 
       if (!this.isDashboard(first)) {
-        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
+        matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched)
       }
 
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)

src/main.js

@@ -15,19 +15,6 @@ import router from './router'
 import '@/icons' // permission control
 import '@/permission' // permission control
 
-/**
- * If you don't want to use mock-server
- * you want to use MockJs for mock api
- * you can execute: mockXHR()
- *
- * Currently MockJs will be used in the production environment,
- * please remove it before going online ! ! !
- */
-if (process.env.NODE_ENV === 'production') {
-  const { mockXHR } = require('../mock')
-  mockXHR()
-}
-
 // set ElementUI lang to EN
 // Vue.use(ElementUI, { locale })
 // 如果想要中文版 element-ui，按如下方式声明

src/router/index.js

@@ -7,29 +7,20 @@ Vue.use(Router)
 import Layout from '@/layout'
 
 /**
- * Note: sub-menu only appear when route children.length >= 1
- * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
+ * 参照: https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/router-and-nav.html
  *
- * hidden: true                   if set true, item will not show in the sidebar(default is false)
- * alwaysShow: true               if set true, will always show the root menu
- *                                if not set alwaysShow, when item has more than one children route,
- *                                it will becomes nested mode, otherwise not show the root menu
- * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
- * name:'router-name'             the name is used by <keep-alive> (must set!!!)
+ * hidden: true                   设置为true不会出现在侧边栏默认false
+ * alwaysShow: true               设为true变成下拉菜单
+ * redirect: noRedirect           当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
+ * name:'router-name'             设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
  * meta : {
-    roles: ['admin','editor']    control the page roles (you can set multiple roles)
-    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
-    icon: 'svg-name'             the icon show in the sidebar
-    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
-    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
+    roles: ['admin','editor']    设置该路由进入的权限，支持多个权限叠加
+    title: 'title'               设置该路由在侧边栏和面包屑中展示的名字
+    icon: 'svg-name'             设置该路由的图标
+    breadcrumb: false            如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
+    activeMenu: '/example/list' 如果设置为false，则不会在breadcrumb面包屑中显示
   }
  */
-
-/**
- * constantRoutes
- * a base page that does not have permission requirements
- * all roles can be accessed
- */
 export const constantRoutes = [
   {
     path: '/login',
@@ -55,28 +46,6 @@ export const constantRoutes = [
     }]
   },
 
-  // {
-  //   path: '/example',
-  //   component: Layout,
-  //   redirect: '/example/table',
-  //   name: 'Example',
-  //   meta: { title: 'Example', icon: 'dashboard' },
-  //   children: [
-  //     {
-  //       path: 'table',
-  //       name: 'Table',
-  //       component: () => import('@/views/table/index'),
-  //       meta: { title: 'Table', icon: 'dashboard' }
-  //     },
-  //     {
-  //       path: 'tree',
-  //       name: 'Tree',
-  //       component: () => import('@/views/tree/index'),
-  //       meta: { title: 'Tree', icon: 'dashboard' }
-  //     }
-  //   ]
-  // },
-
   {
     path: '/schoolTimetable',
     component: Layout,
@@ -89,18 +58,41 @@ export const constantRoutes = [
     }]
   },
   {
-    path: '/schoolDetail',
+    path: '/dashboardBlockRow',
     component: Layout,
-    redirect: '/schoolDetail',
+    redirect: '/dashboardBlockRow',
     children: [{
-      path: 'schoolDetail',
-      name: 'SchoolDetail',
-      component: () => import('@/views/schoolDetail/index'),
-      meta: { title: '课程表详情' }
+      path: 'dashboardBlockRow',
+      name: 'DashboardBlockRow',
+      component: () => import('@/views/dashboardBlockRow/index'),
+      meta: { title: '首页行管理' }
     }],
     hidden: true
   },
   {
+    path: '/dashboardRowItem',
+    component: Layout,
+    redirect: '/dashboardRowItem',
+    children: [{
+      path: 'dashboardRowItem',
+      name: 'DashboardRowItem',
+      component: () => import('@/views/dashboardRowItem/index'),
+      meta: { title: '首页项列表' }
+    }],
+    hidden: true
+  },
+  {
+    path: '/tempateList',
+    component: Layout,
+    redirect: '/tempateList',
+    children: [{
+      path: 'tempateList',
+      name: 'TempateList',
+      component: () => import('@/views/tempateList/index'),
+      meta: { title: '模板列表', icon: 'dashboard' }
+    }]
+  },
+  {
     path: '/uploadTab',
     component: Layout,
     redirect: '/uploadTab',
@@ -112,6 +104,29 @@ export const constantRoutes = [
     }],
     hidden: true
   },
+  {
+    path: '/schoolDetail',
+    component: Layout,
+    redirect: '/schoolDetail',
+    children: [{
+      path: 'schoolDetail',
+      name: 'SchoolDetail',
+      component: () => import('@/views/schoolDetail/index'),
+      meta: { title: '课程表详情' }
+    }],
+    hidden: true
+  },
+  {
+    path: '/categoryList',
+    component: Layout,
+    redirect: '/categoryList',
+    children: [{
+      path: 'categoryList',
+      name: 'CategoryList',
+      component: () => import('@/views/categoryList/index'),
+      meta: { title: '专区列表', icon: 'dashboard' }
+    }]
+  },
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]

src/store/getters.js

@@ -7,6 +7,11 @@ const getters = {
   visitedViews: state => state.tagsView.visitedViews,
   cachedViews: state => state.tagsView.cachedViews,
   getScheduleData: state => state.schoolTimetable.getScheduleData,
-  getScheduleWareData: state => state.schoolTimetable.getScheduleWareData
+  getScheduleWareData: state => state.schoolTimetable.getScheduleWareData,
+  getBlockData: state => state.dashboard.getBlockData,
+  getBlockRowData: state => state.dashboard.getBlockRowData,
+  getRowItemData: state => state.dashboard.getRowItemData,
+  getTempateData: state => state.dashboard.getTempateData,
+  getCategoryData: state => state.categoryList.getCategoryData
 }
 export default getters

src/store/index.js

@@ -7,7 +7,8 @@ import user from './modules/user'
 import tagsView from './modules/tagsView'
 import permission from './modules/permission'
 import schoolTimetable from './modules/schoolTimetable'
-
+import dashboard from './modules/dashboard'
+import categoryList from './modules/categoryList'
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
@@ -17,7 +18,9 @@ const store = new Vuex.Store({
     user,
     tagsView,
     permission,
-    schoolTimetable
+    schoolTimetable,
+    dashboard,
+    categoryList
   },
   getters
 })

src/store/modules/categoryList.js

@@ -0,0 +1,55 @@
+import { getCategoryList, setCategoryList, addCategoryList } from '@/api/categoryList'
+
+const state = {
+  getCategoryData: []
+}
+
+const mutations = {
+  GET_CATEGORY: (state, data) => {
+    state.getCategoryData = data
+  }
+}
+
+const actions = {
+  // 获取课程表专区
+  getBlockList({ commit, state }, obj) {
+    const blockType = obj.blockType
+    return new Promise((resolve, reject) => {
+      getCategoryList(blockType).then((res) => {
+        const list = res.data
+        commit('GET_CATEGORY', list)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  // 修改课程表专区
+  setBlockList({ commit, state }, obj) {
+    return new Promise((resolve, reject) => {
+      setCategoryList(obj).then((res) => {
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  // 添加课程表专区
+  addBlockList({ commit, state }, obj) {
+    return new Promise((resolve, reject) => {
+      addCategoryList(obj).then((res) => {
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+

src/store/modules/dashboard.js

@@ -0,0 +1,150 @@
+import { getBlock, getBlockRow, getRowItem, setBlockRow, addBlockRow, setRowItem, addRowItem, getTempate, setTempate } from '@/api/dashboard'
+
+const state = {
+  getBlockData: [],
+  getBlockRowData: [],
+  getRowItemData: [],
+  getTempateData: []
+}
+
+const mutations = {
+  GET_BLOCK: (state, data) => {
+    state.getBlockData = data
+  },
+  GET_BLOCK_ROW: (state, data) => {
+    state.getBlockRowData = data
+  },
+  GET_ROW_ITEM: (state, data) => {
+    state.getRowItemData = data
+  },
+  GET_TEMPATE: (state, data) => {
+    state.getTempateData = data
+  }
+}
+
+const actions = {
+  // 获取课程表列表
+  getBlockList({ commit, state }) {
+    return new Promise((resolve, reject) => {
+      getBlock().then((res) => {
+        const list = res.data
+        commit('GET_BLOCK', list)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  // 获取课程表行列表
+  getBlockRowList({ commit, state }, obj) {
+    const id = obj.id
+    return new Promise((resolve, reject) => {
+      getBlockRow(id).then((res) => {
+        console.log(res)
+        const list = res.data
+        commit('GET_BLOCK_ROW', list)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  // 获取首页项列表
+  getRowItemList({ commit, state }, obj) {
+    const id = obj.id
+    return new Promise((resolve, reject) => {
+      getRowItem(id).then((res) => {
+        console.log(res)
+        const list = res.data
+        commit('GET_ROW_ITEM', list)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  // 修改首页行信息
+  setBlockRowList({ dispatch }, data) {
+    return new Promise((resolve, reject) => {
+      setBlockRow(data).then((res) => {
+        console.log(res)
+        // const list = res.data
+        // commit('GET_BLOCK_ROW', list)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  // 增加首页行信息
+  addBlockRowList({ dispatch }, data) {
+    return new Promise((resolve, reject) => {
+      addBlockRow(data).then((res) => {
+        console.log(res)
+        // const list = res.data
+        // commit('GET_BLOCK_ROW', list)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  // 修改首页项
+  setRowItemList({ commit, state }, data) {
+    return new Promise((resolve, reject) => {
+      setRowItem(data).then((res) => {
+        console.log(res)
+        // const list = res.data
+        // commit('GET_ROW_ITEM', list)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  // 增加首页项
+  addRowItemList({ commit, state }, data) {
+    return new Promise((resolve, reject) => {
+      addRowItem(data).then((res) => {
+        console.log(res)
+        // const list = res.data
+        // commit('GET_ROW_ITEM', list)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  // 获取课程表模板
+  getTempateList({ commit, state }) {
+    return new Promise((resolve, reject) => {
+      getTempate().then((res) => {
+        const list = res.data
+        commit('GET_TEMPATE', list)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  // 修改课程表模板
+  setTempateList({ dispatch }, data) {
+    return new Promise((resolve, reject) => {
+      setTempate(data).then((res) => {
+        // const list = res.data
+        dispatch('getTempateList')
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+

src/views/categoryList/index.vue

@@ -0,0 +1,254 @@
+<template>
+  <div class="dashboard-container">
+    <div class="dashboard-text">
+      <el-button type="primary" @click="addList">增加行列表</el-button>
+      <el-table
+        :data="getCategoryData"
+        style="width: 100%"
+      >
+        <el-table-column
+          label="序号"
+          width="60"
+          prop="sort"
+        />
+        <el-table-column
+          label="id"
+          width="160"
+          prop="id"
+        />
+        <el-table-column
+          label="专区名称"
+          width="200"
+          prop="title"
+        />
+        <el-table-column
+          label="专区类型"
+          width="180"
+        >
+          <template slot-scope="scope">
+            <span>{{ targetCode(scope.row.code) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="专题类型"
+          width="180"
+        >
+          <template slot-scope="scope">
+            <span>{{ scope.row.courseType === 'KNOWLEDGE' ? '知识付费' : '图书馆' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="状态"
+          width="80"
+        >
+          <template slot-scope="scope">
+            <span>{{ scope.row.status === 'ABNORMAL' ? '不正常' : '正常' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          width="180"
+        >
+          <template slot-scope="scope">
+            <span>{{ newDate(scope.row.gmtCreated) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="修改时间"
+          width="180"
+        >
+          <template slot-scope="scope">
+            <span>{{ newDate(scope.row.gmtModified) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)"
+            >修改</el-button>
+            <el-button
+              size="mini"
+              @click="handleUp(scope.$index, scope.row)"
+            >{{ scope.row.status === 'ABNORMAL' ? '正常' : '不正常' }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-dialog title="专区" :rules="rules" :visible.sync="dialogFormVisible">
+        <el-form :model="form">
+          <el-form-item label="专区类型" :label-width="formLabelWidth">
+            <el-select v-model="form.code" placeholder="请选择">
+              <el-option value="PAY" label="知识付费" />
+              <el-option value="PRESCHOOL" label="学前" />
+              <el-option value="PRIMARY" label="小学" />
+              <el-option value="MIDDLE" label="中学" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="标题" :label-width="formLabelWidth">
+            <el-input v-model="form.title" autocomplete="off" clearable />
+          </el-form-item>
+          <el-form-item label="专题类型" :label-width="formLabelWidth">
+            <el-select v-model="form.courseType" placeholder="请选择">
+              <el-option value="KNOWLEDGE" label="知识付费" />
+              <el-option value="LIBRARY" label="图书馆" />
+            </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 v-if="type === 'add'" label="状态" :label-width="formLabelWidth">
+            <el-select v-model="form.status" placeholder="请选择">
+              <el-option value="ABNORMAL" label="不正常" />
+              <el-option value="NORMAL" label="正常" />
+            </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">确 定</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'Dashboard',
+  data() {
+    return {
+      dialogFormVisible: false,
+      form: {},
+      formLabelWidth: '120px',
+      type: '',
+      rules: {
+        templateCode: [
+          { required: true, message: '请选择模板', trigger: 'change' }
+        ],
+        status: [
+          { required: true, message: '请选择状态', trigger: 'change' }
+        ],
+        sort: [
+          { required: true, message: '请输入排序', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+    this.$store.dispatch('categoryList/getBlockList', {
+      blockType: ''
+    })
+  },
+  // eslint-disable-next-line vue/order-in-components
+  computed: {
+    ...mapGetters([
+      'getCategoryData'
+    ])
+  },
+  methods: {
+    newDate(date) {
+      return new Date(date).toLocaleString()
+    },
+    targetCode(type) {
+      let target = ''
+      switch (type) {
+        case 'PRESCHOOL':
+          target = '学前'
+          break
+        case 'PAY':
+          target = '知识付费课程'
+          break
+        case 'PRIMARY':
+          target = '小学'
+          break
+        case 'MIDDLE':
+          target = '中学'
+          break
+      }
+      return target
+    },
+    handleEdit(index, row) {
+      console.log(index, row)
+      this.dialogFormVisible = true
+      this.type = 'set'
+      this.form = {
+        id: '',
+        code: '',
+        title: '',
+        status: '',
+        courseType: '',
+        sort: ''
+      }
+      this.setForm(row)
+    },
+    handleUp(index, row) {
+      console.log(index, row)
+      this.setForm(row)
+      this.form.status = row.status === 'NORMAL' ? 'ABNORMAL' : 'NORMAL'
+      this.$store.dispatch('categoryList/setBlockList', this.form).then(() => {
+        this.dialogFormVisible = false
+        this.$store.dispatch('categoryList/getBlockList', {
+          blockType: ''
+        })
+      })
+    },
+    handOk() {
+      if (this.type === 'set') {
+        console.log(this.form)
+        this.$store.dispatch('categoryList/setBlockList', this.form).then(() => {
+          this.dialogFormVisible = false
+          this.$store.dispatch('categoryList/getBlockList', {
+            blockType: ''
+          })
+        })
+      } else if (this.form.code !== '' && this.form.title !== '' && this.form.status !== '' && this.form.courseType !== '' && this.form.sort !== '') {
+        this.$store.dispatch('categoryList/addBlockList', this.form).then(() => {
+          this.dialogFormVisible = false
+          this.$store.dispatch('categoryList/getBlockList', {
+            blockType: ''
+          })
+        })
+      }
+    },
+    addList() {
+      this.dialogFormVisible = true
+      this.type = 'add'
+      this.form = {
+        code: '',
+        title: '',
+        status: '',
+        courseType: '',
+        sort: ''
+      }
+    },
+    setForm(data) {
+      this.form.id = data.id
+      this.form.courseType = data.courseType
+      this.form.title = data.title
+      this.form.code = data.code
+      this.form.sort = data.sort
+      this.form.status = data.status
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard {
+  &-container {
+    margin: 30px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+  .el-input {
+    width: 300px;
+  }
+  .el-select>.el-input {
+    width: 300px;
+  }
+</style>

src/views/dashboard/index.vue

@@ -1,6 +1,58 @@
 <template>
   <div class="dashboard-container">
-    <div class="dashboard-text">首页</div>
+    <div class="dashboard-text">
+      <el-table
+        :data="getBlockData"
+        style="width: 100%"
+      >
+        <el-table-column
+          label="顺序"
+          width="60"
+          prop="id"
+        />
+        <el-table-column
+          label="icon"
+          width="180"
+        >
+          <template slot-scope="scope">
+            <img :src="scope.row.icon">
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          width="180"
+        >
+          <template slot-scope="scope">
+            <span>{{ newDate(scope.row.gmtCreated) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="修改时间"
+          width="180"
+        >
+          <template slot-scope="scope">
+            <span>{{ newDate(scope.row.gmtModified) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="标题"
+          width="100"
+          prop="title"
+        />
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)"
+            >修改</el-button>
+            <el-button
+              size="mini"
+              @click="handleDetail(scope.$index, scope.row)"
+            >详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
   </div>
 </template>
 
@@ -9,10 +61,31 @@ import { mapGetters } from 'vuex'
 
 export default {
   name: 'Dashboard',
+  created() {
+    this.$store.dispatch('dashboard/getBlockList')
+  },
+  // eslint-disable-next-line vue/order-in-components
   computed: {
     ...mapGetters([
-      'name'
+      'getBlockData'
     ])
+  },
+  methods: {
+    newDate(date) {
+      return new Date(date).toLocaleString()
+    },
+    handleEdit(index, row) {
+      console.log(index, row)
+    },
+    handleDetail(index, row) {
+      console.log(index, row)
+      this.$router.push({
+        path: '/dashboardBlockRow/dashboardBlockRow',
+        query: {
+          id: row.id
+        }
+      })
+    }
   }
 }
 </script>

src/views/dashboardBlockRow/index.vue

@@ -0,0 +1,288 @@
+<template>
+  <div class="dashboard-container">
+    <div class="dashboard-text">
+      <el-button type="primary" @click="addList">增加行列表</el-button>
+      <el-table
+        :data="getBlockRowData"
+        style="width: 100%"
+      >
+        <el-table-column
+          label="序号"
+          width="60"
+          prop="sort"
+        />
+        <el-table-column
+          label="id"
+          width="160"
+          prop="id"
+        />
+        <el-table-column
+          label="区域名称"
+          width="100"
+        >
+          <template>
+            <span>{{ name() }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="模板名称"
+          width="180"
+        >
+          <template slot-scope="scope">
+            <span>{{ template(scope.row.templateCode) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="状态"
+          width="80"
+        >
+          <template slot-scope="scope">
+            <span>{{ scope.row.status === 'HAS_ON_STOCK' ? '上架' : '下架' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          width="180"
+        >
+          <template slot-scope="scope">
+            <span>{{ newDate(scope.row.gmtCreated) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="修改时间"
+          width="180"
+        >
+          <template slot-scope="scope">
+            <span>{{ newDate(scope.row.gmtModified) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)"
+            >修改</el-button>
+            <el-button
+              size="mini"
+              @click="handleUp(scope.$index, scope.row)"
+            >{{ scope.row.status === 'HAS_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="首页行列表" :rules="rules" :visible.sync="dialogFormVisible">
+        <el-form :model="form">
+          <el-form-item label="模板" :label-width="formLabelWidth">
+            <el-select v-model="form.templateCode" placeholder="请选择">
+              <el-option value="IMAGE_TEMPATE_5" label="689*174图片模板" />
+              <el-option value="TEXT_TEMPLATE" label="文字模板" />
+              <el-option value="IMAGE_TEMPATE_4" label="256*360图片模板" />
+              <el-option value="IMAGE_TEMPATE_3" label="404*256图片模板" />
+              <el-option value="IMAGE_TEMPATE_2" label="548*300图片模板" />
+              <el-option value="IMAGE_TEMPATE_1" label="840*300图片模板" />
+              <el-option value="SCHEDULE_TEMPATE_1" label="1414*172课程表模板" />
+              <el-option value="SCHEDULE_TEMPATE_2" label="689*172课程表模板" />
+              <el-option value="SCHEDULE_TEMPATE_3" label="326*174课程表模板" />
+            </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 v-if="type === 'add'" label="状态" :label-width="formLabelWidth">
+            <el-select v-model="form.status" placeholder="请选择">
+              <el-option value="NOT_ON_STOCK" label="下架" />
+              <el-option value="HAS_ON_STOCK" label="上架" />
+            </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">确 定</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'Dashboard',
+  data() {
+    return {
+      dialogFormVisible: false,
+      form: {},
+      formLabelWidth: '120px',
+      type: '',
+      rules: {
+        templateCode: [
+          { required: true, message: '请选择模板', trigger: 'change' }
+        ],
+        status: [
+          { required: true, message: '请选择状态', trigger: 'change' }
+        ],
+        sort: [
+          { required: true, message: '请输入排序', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+    this.$store.dispatch('dashboard/getBlockRowList', {
+      id: this.$route.query.id
+    })
+  },
+  // eslint-disable-next-line vue/order-in-components
+  computed: {
+    ...mapGetters([
+      'getBlockRowData'
+    ])
+  },
+  methods: {
+    newDate(date) {
+      return new Date(date).toLocaleString()
+    },
+    name() {
+      const id = this.$route.query.id
+      let name = ''
+      switch (id) {
+        case '0':
+          name = '知识付费'
+          break
+        case '1':
+          name = '学前'
+          break
+        case '2':
+          name = '小学'
+          break
+        case '3':
+          name = '中学'
+          break
+      }
+      return name
+    },
+    template(code) {
+      let templateCode = ''
+      switch (code) {
+        case 'IMAGE_TEMPATE_5':
+          templateCode = '689*174图片模板'
+          break
+        case 'TEXT_TEMPLATE':
+          templateCode = '文字模板'
+          break
+        case 'IMAGE_TEMPATE_1':
+          templateCode = '840*300图片模板'
+          break
+        case 'IMAGE_TEMPATE_2':
+          templateCode = '548*300图片模板'
+          break
+        case 'IMAGE_TEMPATE_3':
+          templateCode = '404*256图片模板'
+          break
+        case 'IMAGE_TEMPATE_4':
+          templateCode = '256*360图片模板'
+          break
+        case 'SCHEDULE_TEMPATE_1':
+          templateCode = '1414*172课程表模板'
+          break
+        case 'SCHEDULE_TEMPATE_2':
+          templateCode = '689*172课程表模板'
+          break
+        case 'SCHEDULE_TEMPATE_3':
+          templateCode = '326*174课程表模板'
+          break
+      }
+      return templateCode
+    },
+    handleEdit(index, row) {
+      console.log(index, row)
+      this.dialogFormVisible = true
+      this.type = 'set'
+      this.form = {
+        id: '',
+        blockId: '',
+        templateCode: '',
+        status: '',
+        sort: ''
+      }
+      this.setForm(row)
+    },
+    handleUp(index, row) {
+      console.log(index, row)
+      this.setForm(row)
+      this.form.status = row.status === 'NOT_ON_STOCK' ? 'HAS_ON_STOCK' : 'NOT_ON_STOCK'
+      this.$store.dispatch('dashboard/setBlockRowList', this.form).then(() => {
+        this.$store.dispatch('dashboard/getBlockRowList', {
+          id: this.$route.query.id
+        })
+      })
+    },
+    handleDetail(index, row) {
+      console.log(index, row)
+      this.$router.push({
+        path: '/dashboardRowItem/dashboardRowItem',
+        query: {
+          id: row.id
+        }
+      })
+    },
+    handOk() {
+      if (this.type === 'set') {
+        console.log(this.form)
+        this.$store.dispatch('dashboard/setBlockRowList', this.form).then(() => {
+          this.dialogFormVisible = false
+          this.$store.dispatch('dashboard/getBlockRowList', {
+            id: this.$route.query.id
+          })
+        })
+      } else if (this.form.templateCode !== '' && this.form.status !== '' && this.form.sort !== '') {
+        this.$store.dispatch('dashboard/addBlockRowList', this.form).then(() => {
+          this.dialogFormVisible = false
+          this.$store.dispatch('dashboard/getBlockRowList', {
+            id: this.$route.query.id
+          })
+        })
+      }
+    },
+    addList() {
+      this.dialogFormVisible = true
+      this.type = 'add'
+      this.form = {
+        blockId: this.$route.query.id,
+        templateCode: '',
+        status: '',
+        sort: ''
+      }
+    },
+    setForm(data) {
+      this.form.id = data.id
+      this.form.blockId = data.blockId
+      this.form.templateCode = data.templateCode
+      this.form.sort = data.sort
+      this.form.status = data.status
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard {
+  &-container {
+    margin: 30px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+  .el-input {
+    width: 300px;
+  }
+  .el-select>.el-input {
+    width: 300px;
+  }
+</style>

src/views/dashboardRowItem/index.vue

@@ -0,0 +1,303 @@
+<template>
+  <div class="dashboard-container">
+    <div class="dashboard-text">
+      <el-button type="primary" @click="addList">增加行列表</el-button>
+      <el-table
+        :data="getRowItemData"
+        style="width: 100%"
+      >
+        <el-table-column
+          label="序号"
+          width="60"
+          prop="sort"
+        />
+        <el-table-column
+          label="id"
+          width="160"
+          prop="id"
+        />
+        <el-table-column
+          label="项目名称"
+          width="150"
+          prop="content"
+        />
+        <el-table-column
+          label="项目icon"
+          width="180"
+        >
+          <template slot-scope="scope">
+            <img :src="scope.row.icon" style="width: 100%">
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="跳转类型"
+          width="80"
+        >
+          <template slot-scope="scope">
+            <span>{{ targetType(scope.row.targetType) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="状态"
+          width="80"
+        >
+          <template slot-scope="scope">
+            <span>{{ scope.row.status === 'HAS_ON_STOCK' ? '上架' : '下架' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          width="180"
+        >
+          <template slot-scope="scope">
+            <span>{{ newDate(scope.row.gmtCreated) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="修改时间"
+          width="180"
+        >
+          <template slot-scope="scope">
+            <span>{{ newDate(scope.row.gmtModified) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)"
+            >修改</el-button>
+            <el-button
+              size="mini"
+              @click="handleUp(scope.$index, scope.row)"
+            >{{ scope.row.status === 'HAS_ON_STOCK' ? '下架' : '上架' }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-dialog title="首页项列表" :visible.sync="dialogFormVisible">
+        <el-form :model="form">
+          <el-form-item label="项目名称" :label-width="formLabelWidth">
+            <el-input v-model="form.content" autocomplete="off" clearable />
+          </el-form-item>
+          <el-form-item label="icon" :label-width="formLabelWidth">
+            <el-input v-model="form.icon" autocomplete="off" clearable />
+          </el-form-item>
+          <el-form-item label="模板" :label-width="formLabelWidth">
+            <el-select v-model="form.targetType" placeholder="请选择">
+              <el-option value="LIBRARY" label="图书馆课程" />
+              <el-option value="PAY" label="知识付费" />
+              <el-option value="TOPIC" label="专题" />
+              <el-option value="SCHEDULE" label="课程表" />
+              <el-option value="URL" label="URL" />
+            </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 v-if="type === 'add'" label="状态" :label-width="formLabelWidth">
+            <el-select v-model="form.status" placeholder="请选择">
+              <el-option value="NOT_ON_STOCK" label="下架" />
+              <el-option value="HAS_ON_STOCK" label="上架" />
+            </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">确 定</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'Dashboard',
+  data() {
+    return {
+      form: {},
+      dialogFormVisible: false,
+      type: '',
+      formLabelWidth: '120px'
+    }
+  },
+  created() {
+    this.$store.dispatch('dashboard/getRowItemList', {
+      id: this.$route.query.id
+    })
+  },
+  // eslint-disable-next-line vue/order-in-components
+  computed: {
+    ...mapGetters([
+      'getRowItemData'
+    ])
+  },
+  methods: {
+    newDate(date) {
+      return new Date(date).toLocaleString()
+    },
+    name() {
+      const id = this.$route.query.id
+      let name = ''
+      switch (id) {
+        case '0':
+          name = '知识付费'
+          break
+        case '1':
+          name = '学前'
+          break
+        case '2':
+          name = '小学'
+          break
+        case '3':
+          name = '中学'
+          break
+      }
+      return name
+    },
+    template(code) {
+      let templateCode = ''
+      switch (code) {
+        case 'IMAGE_TEMPATE_5':
+          templateCode = '689*174图片模板'
+          break
+        case 'TEXT_TEMPLATE':
+          templateCode = '文字模板'
+          break
+        case 'IMAGE_TEMPATE_1':
+          templateCode = '840*300图片模板'
+          break
+        case 'IMAGE_TEMPATE_2':
+          templateCode = '548*300图片模板'
+          break
+        case 'IMAGE_TEMPATE_3':
+          templateCode = '404*256图片模板'
+          break
+        case 'IMAGE_TEMPATE_4':
+          templateCode = '256*360图片模板'
+          break
+        case 'SCHEDULE_TEMPATE_1':
+          templateCode = '1414*172课程表模板'
+          break
+        case 'SCHEDULE_TEMPATE_2':
+          templateCode = '326*174课程表模板'
+          break
+        case 'SCHEDULE_TEMPATE_3':
+          templateCode = '1414*172课程表模板'
+          break
+      }
+      return templateCode
+    },
+    targetType(type) {
+      let target = ''
+      switch (type) {
+        case 'LIBRARY':
+          target = '图书馆课程'
+          break
+        case 'PAY':
+          target = '知识付费课程'
+          break
+        case 'TOPIC':
+          target = '专题'
+          break
+        case 'SCHEDULE':
+          target = '课程表'
+          break
+        case 'URL':
+          target = 'URL'
+          break
+      }
+      return target
+    },
+    handleEdit(index, row) {
+      console.log(index, row)
+      this.dialogFormVisible = true
+      this.type = 'set'
+      this.form = {
+        'id': '',
+        'rowId': '',
+        'content': '',
+        'icon': '',
+        'targetType': '',
+        'targetContent': '',
+        'sort': '',
+        'status': ''
+      }
+      this.setForm(row)
+    },
+    addList() {
+      this.dialogFormVisible = true
+      this.type = 'add'
+      this.form = {
+        'rowId': this.$route.query.id,
+        'content': '',
+        'icon': '',
+        'targetType': '',
+        'targetContent': '',
+        'sort': '',
+        'status': ''
+      }
+    },
+    handleUp(index, row) {
+      console.log(index, row)
+      this.setForm(row)
+      this.form.status = row.status === 'NOT_ON_STOCK' ? 'HAS_ON_STOCK' : 'NOT_ON_STOCK'
+      this.$store.dispatch('dashboard/setRowItemList', this.form).then(() => {
+        this.$store.dispatch('dashboard/getRowItemList', {
+          id: this.$route.query.id
+        })
+      })
+    },
+    handOk() {
+      if (this.type === 'set') {
+        console.log(this.form)
+        this.$store.dispatch('dashboard/setRowItemList', this.form).then(() => {
+          this.dialogFormVisible = false
+          this.$store.dispatch('dashboard/getRowItemList', {
+            id: this.$route.query.id
+          })
+        })
+      } else if (this.form.content !== '' && this.form.icon !== '' && this.form.targetType !== '' && this.form.sort !== '' && this.form.status !== '') {
+        this.$store.dispatch('dashboard/addRowItemList', this.form).then(() => {
+          this.dialogFormVisible = false
+          this.$store.dispatch('dashboard/getRowItemList', {
+            id: this.$route.query.id
+          })
+        })
+      }
+    },
+    setForm(data) {
+      this.form = {
+        'id': data.id,
+        'rowId': data.rowId,
+        'content': data.content,
+        'icon': data.icon,
+        'targetType': data.targetType,
+        'targetContent': data.targetContent,
+        'sort': data.sort,
+        'status': data.status
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard {
+  &-container {
+    margin: 30px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+  .el-input {
+    width: 300px;
+  }
+  .el-select>.el-input {
+    width: 300px;
+  }
+</style>

src/views/table/index.vue

@@ -1,79 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-table
-      v-loading="listLoading"
-      :data="list"
-      element-loading-text="Loading"
-      border
-      fit
-      highlight-current-row
-    >
-      <el-table-column align="center" label="ID" width="95">
-        <template slot-scope="scope">
-          {{ scope.$index }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Title">
-        <template slot-scope="scope">
-          {{ scope.row.title }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Author" width="110" align="center">
-        <template slot-scope="scope">
-          <span>{{ scope.row.author }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="Pageviews" width="110" align="center">
-        <template slot-scope="scope">
-          {{ scope.row.pageviews }}
-        </template>
-      </el-table-column>
-      <el-table-column class-name="status-col" label="Status" width="110" align="center">
-        <template slot-scope="scope">
-          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
-        <template slot-scope="scope">
-          <i class="el-icon-time" />
-          <span>{{ scope.row.display_time }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import { getList } from '@/api/table'
-
-export default {
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: 'success',
-        draft: 'gray',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    }
-  },
-  data() {
-    return {
-      list: null,
-      listLoading: true
-    }
-  },
-  created() {
-    this.fetchData()
-  },
-  methods: {
-    fetchData() {
-      this.listLoading = true
-      getList().then(response => {
-        this.list = response.data.items
-        this.listLoading = false
-      })
-    }
-  }
-}
-</script>

src/views/tempateList/index.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="dashboard-container">
+    <div class="dashboard-text">
+      <!--<el-button type="primary" @click="addList">增加行列表</el-button>-->
+      <el-table
+        :data="getTempateData"
+        style="width: 100%"
+      >
+        <el-table-column
+          label="id"
+          width="160"
+          prop="id"
+        />
+        <el-table-column
+          label="模板名称"
+          width="150"
+          prop="name"
+        />
+        <el-table-column
+          label="状态"
+          width="80"
+        >
+          <template slot-scope="scope">
+            <span>{{ scope.row.status === 'HAS_ON_STOCK' ? '上架' : '下架' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          width="180"
+        >
+          <template slot-scope="scope">
+            <span>{{ newDate(scope.row.gmtCreated) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="修改时间"
+          width="180"
+        >
+          <template slot-scope="scope">
+            <span>{{ newDate(scope.row.gmtModified) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)"
+            >修改</el-button>
+            <el-button
+              size="mini"
+              @click="handleDetail(scope.$index, scope.row)"
+            >{{ scope.row.status === 'HAS_ON_STOCK' ? '下架' : '上架' }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-dialog title="首页模板列表" :visible.sync="dialogFormVisible">
+        <el-form :model="form">
+          <el-form-item label="模板名称" :label-width="formLabelWidth">
+            <el-input v-model="form.name" autocomplete="off" clearable />
+          </el-form-item>
+          <el-form-item label="模板" :label-width="formLabelWidth">
+            <el-select v-model="form.code" placeholder="请选择">
+              <el-option value="IMAGE_TEMPATE_5" label="689*174图片模板" />
+              <el-option value="TEXT_TEMPLATE" label="文字模板" />
+              <el-option value="IMAGE_TEMPATE_4" label="256*360图片模板" />
+              <el-option value="IMAGE_TEMPATE_3" label="404*256图片模板" />
+              <el-option value="IMAGE_TEMPATE_2" label="548*300图片模板" />
+              <el-option value="IMAGE_TEMPATE_1" label="840*300图片模板" />
+              <el-option value="SCHEDULE_TEMPATE_1" label="1414*172课程表模板" />
+              <el-option value="SCHEDULE_TEMPATE_2" label="689*172课程表模板" />
+              <el-option value="SCHEDULE_TEMPATE_3" label="326*174课程表模板" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="type === 'add'" label="状态" :label-width="formLabelWidth">
+            <el-select v-model="form.status" placeholder="请选择">
+              <el-option value="NOT_ON_STOCK" label="下架" />
+              <el-option value="HAS_ON_STOCK" label="上架" />
+            </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">确 定</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'Dashboard',
+  data() {
+    return {
+      form: {},
+      dialogFormVisible: false,
+      type: '',
+      formLabelWidth: '120px'
+    }
+  },
+  created() {
+    this.$store.dispatch('dashboard/getTempateList')
+  },
+  // eslint-disable-next-line vue/order-in-components
+  computed: {
+    ...mapGetters([
+      'getTempateData'
+    ])
+  },
+  methods: {
+    newDate(date) {
+      return new Date(date).toLocaleString()
+    },
+    handleEdit(index, row) {
+      console.log(index, row)
+      this.dialogFormVisible = true
+      this.type = 'set'
+      this.form = {
+        'id': '',
+        'code': '',
+        'name': ''
+      }
+      this.setForm(row)
+    },
+    addList() {
+      this.dialogFormVisible = true
+      this.type = 'add'
+      this.form = {
+        'rowId': this.$route.query.id,
+        'content': '',
+        'icon': '',
+        'targetType': '',
+        'targetContent': '',
+        'sort': '',
+        'status': ''
+      }
+    },
+    handOk() {
+      if (this.type === 'set') {
+        console.log(this.form)
+        this.$store.dispatch('dashboard/setTempateList', this.form).then(() => {
+          this.dialogFormVisible = false
+        })
+      } else if (this.form.templateCode !== '' && this.form.status !== '' && this.form.sort !== '') {
+        // this.$store.dispatch('dashboard/addBlockRowList', this.form).then(() => {
+        //   this.dialogFormVisible = false
+        //   this.$store.dispatch('dashboard/getBlockRowList', {
+        //     id: this.$route.query.id
+        //   })
+        // })
+      }
+    },
+    setForm(data) {
+      this.form = {
+        'id': data.id,
+        'code': data.code,
+        'name': data.name
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dashboard {
+  &-container {
+    margin: 30px;
+  }
+  &-text {
+    font-size: 30px;
+    line-height: 46px;
+  }
+}
+  .el-input {
+    width: 300px;
+  }
+  .el-select>.el-input {
+    width: 300px;
+  }
+</style>

src/views/uploadTab/index.vue

@@ -13,19 +13,22 @@
         </el-select>
       </el-form-item>
       <el-form-item label="标题" prop="title">
-        <el-input v-model="ruleForm.title" />
+        <el-input v-model="ruleForm.title" clearable />
       </el-form-item>
       <el-form-item label="周" prop="weekSeq">
-        <el-input v-model="ruleForm.weekSeq" />
+        <el-input v-model="ruleForm.weekSeq" clearable />
       </el-form-item>
       <el-upload
+        ref="upload"
         class="image-uploader"
         :multiple="false"
         :drag="true"
-        action=""
+        action="http://ott80test-api.efunbox.cn:81/cms/schedule/import"
         :limit="1"
         :on-exceed="handleExceed"
-        :http-request="uploadFile"
+        :data="ruleForm"
+        :auto-upload="false"
+        :on-success="handleAvatarSuccess"
       >
         <i class="el-icon-upload" />
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
@@ -38,15 +41,14 @@
   </div>
 </template>
 <script>
-import { upLoad } from '@/api/schoolTimetable'
+// import { upLoad } from '@/api/schoolTimetable'
 export default {
   data() {
     return {
       ruleForm: {
         title: '',
         code: '',
-        weekSeq: '',
-        file: ''
+        weekSeq: ''
       },
       rules: {
         title: [
@@ -102,31 +104,11 @@ export default {
     handleExceed(files, fileList) {
       this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`)
     },
-    // 上传文件
-    uploadFile(item) {
-      console.log('=====', item)
-      const fileObj = item.file
-      // FormData 对象
-      const form = new FormData()
-      // 文件对象
-      form.append('file', fileObj)
-      for (var value of form.values()) {
-        console.log(value)
-        this.ruleForm.file = value
-      }
-      // form.append('comId', this.comId)
-      // console.log((JSON.stringify(fileObj))
-      // console.log(JSON.stringify(form.get('file')))
-      // this.ruleForm.file = value
-    },
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
           console.log(this.ruleForm)
-          // alert('submit!')
-          upLoad(this.ruleForm).then(res => {
-            console.log(res)
-          })
+          this.$refs.upload.submit()
         } else {
           console.log('error submit!!')
           return false
@@ -135,6 +117,12 @@ export default {
     },
     resetForm(formName) {
       this.$refs[formName].resetFields()
+    },
+    handleAvatarSuccess(res, file) {
+      this.$message({
+        message: '恭喜你，上传成功',
+        type: 'success'
+      })
     }
   }
 }
@@ -151,5 +139,6 @@ export default {
     }
     .image-uploader {
         margin-left: 30px;
+        margin-bottom: 30px;
     }
 </style>

vue.config.js

@@ -14,7 +14,6 @@ const name = defaultSettings.title || '快乐学堂8.0' // page title
 // You can change the port by the following methods:
 // port = 9528 npm run dev OR npm run dev --port = 9528
 const port = process.env.port || process.env.npm_config_port || 9528 // dev port
-
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
   /**
@@ -24,7 +23,7 @@ module.exports = {
    * In most cases please use '/' !!!
    * Detail: https://cli.vuejs.org/config/#publicpath
    */
-  publicPath: '/',
+  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
   outputDir: 'dist',
   assetsDir: 'static',
   lintOnSave: process.env.NODE_ENV === 'development',
@@ -35,8 +34,7 @@ module.exports = {
     overlay: {
       warnings: false,
       errors: true
-    },
-    before: require('./mock/mock-server.js')
+    }
   },
   configureWebpack: {
     // provide the app's title in webpack's name field, so that