添加登录课程课件

src/api/courseWareList.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+// 获取课程列表
+export function getCourseWareList(params) {
+  return request({
+    url: '/cms/courseWare',
+    method: 'get',
+    params
+  })
+}
+// 新增课程列表
+export function addCourseWareList(data) {
+  debugger
+  return request({
+    url: '/cms/courseWare',
+    method: 'post',
+    data
+  })
+}
+// 修改课程列表
+export function setCourseWareList(data) {
+  return request({
+    url: '/cms/courseWare',
+    method: 'put',
+    data
+  })
+}

src/api/user.js

@@ -2,23 +2,8 @@ import request from '@/utils/request'
 
 export function login(data) {
   return request({
-    url: '/vue-admin-template/user/login',
+    url: '/cms/user/login',
     method: 'post',
     data
   })
 }
-
-export function getInfo(token) {
-  return request({
-    url: '/vue-admin-template/user/info',
-    method: 'get',
-    params: { token }
-  })
-}
-
-export function logout() {
-  return request({
-    url: '/vue-admin-template/user/logout',
-    method: 'post'
-  })
-}

src/permission.js

@@ -1,9 +1,9 @@
 import router from './router'
-// import store from './store'
-// import { Message } from 'element-ui'
+import store from './store'
+import { Message } from 'element-ui'
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
-// import { getToken } from '@/utils/auth' // get token from cookie
+import { getToken } from '@/utils/auth' // get token from cookie
 import getPageTitle from '@/utils/get-page-title'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
@@ -18,8 +18,8 @@ router.beforeEach(async(to, from, next) => {
   document.title = getPageTitle(to.meta.title)
 
   // determine whether the user has logged in
-  // const hasToken = getToken();
-  const hasToken = '123456'
+  const hasToken = getToken()
+  // const hasToken = '123456'
 
   if (hasToken) {
     if (to.path === '/login') {
@@ -27,24 +27,21 @@ router.beforeEach(async(to, from, next) => {
       next({ path: '/' })
       NProgress.done()
     } else {
-      next()
-      // const hasGetUserInfo = store.getters.name
-      // if (hasGetUserInfo) {
-      //   next()
-      // } else {
-      //   try {
-      //     // get user info
-      //     await store.dispatch('user/getInfo')
-
-      //     next()
-      //   } catch (error) {
-      //     // remove token and go to login page to re-login
-      //     await store.dispatch('user/resetToken')
-      //     Message.error(error || 'Has Error')
-      //     next(`/login?redirect=${to.path}`)
-      //     NProgress.done()
-      //   }
-      // }
+      const hasGetUserInfo = store.getters.name
+      if (hasGetUserInfo) {
+        next()
+      } else {
+        try {
+          // get user info
+          next()
+        } catch (error) {
+          // remove token and go to login page to re-login
+          await store.dispatch('user/resetToken')
+          Message.error(error || 'Has Error')
+          next(`/login?redirect=${to.path}`)
+          NProgress.done()
+        }
+      }
     }
   } else {
     /* has no token*/

src/router/index.js

@@ -174,6 +174,17 @@ export const constantRoutes = [
     }]
   },
   {
+    path: '/courseWareList',
+    component: Layout,
+    redirect: '/courseWareList',
+    children: [{
+      path: 'courseWareList',
+      name: 'CourseWareList',
+      component: () => import('@/views/courseWareList/index'),
+      meta: { title: '课件列表', icon: 'dashboard' }
+    }]
+  },
+  {
     path: '/memberList',
     component: Layout,
     redirect: '/memberList',

src/store/getters.js

@@ -19,6 +19,7 @@ const getters = {
   getTopicData: state => state.topicList.getTopicData,
   getRelationData: state => state.topicList.getRelationData,
   getCourseData: state => state.courseList.getCourseData,
+  getCourseWareData: state => state.courseWareList.getCourseWareData,
   getMemberData: state => state.memberList.getMemberData,
   getMemberOrderData: state => state.memberList.getMemberOrderData,
   getMemberOrderDataLength: state => state.memberList.getMemberOrderDataLength,

src/store/index.js

@@ -11,6 +11,7 @@ import dashboard from './modules/dashboard'
 import categoryList from './modules/categoryList'
 import topicList from './modules/topicList'
 import courseList from './modules/courseList'
+import courseWareList from './modules/courseWareList'
 import memberList from './modules/memberList'
 Vue.use(Vuex)
 
@@ -26,6 +27,7 @@ const store = new Vuex.Store({
     categoryList,
     topicList,
     courseList,
+    courseWareList,
     memberList
   },
   getters

src/store/modules/courseWareList.js

@@ -0,0 +1,65 @@
+import { getCourseWareList, addCourseWareList, setCourseWareList } from '@/api/courseWareList'
+
+const state = {
+  getCourseWareData: []
+}
+
+const mutations = {
+  GET_WARE_COURSE: (state, data) => {
+    state.getCourseWareData = data
+  }
+}
+
+const actions = {
+  // 获取课程表列表
+  getCourseWareLists({ commit, state }, obj) {
+    const courseId = obj.courseId ? obj.courseId : ''
+    const code = obj.code ? obj.code : ''
+    const title = obj.title ? obj.title : ''
+    const pageNo = obj.page ? obj.page : ''
+    return new Promise((resolve, reject) => {
+      getCourseWareList({
+        courseId,
+        code,
+        title,
+        status,
+        pageNo
+      }).then((res) => {
+        const list = res.data
+        console.log(list)
+        commit('GET_WARE_COURSE', list)
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  // 增加课程表列表
+  addCourseWareLists({ commit, state }, obj) {
+    return new Promise((resolve, reject) => {
+      addCourseWareList(obj).then((res) => {
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  // 修改课程表列表
+  setCourseWareLists({ commit, state }, obj) {
+    return new Promise((resolve, reject) => {
+      setCourseWareList(obj).then((res) => {
+        resolve()
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+

src/store/modules/user.js

@@ -1,4 +1,4 @@
-import { login, logout, getInfo } from '@/api/user'
+import { login } from '@/api/user'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 import { resetRouter } from '@/router'
 
@@ -34,8 +34,9 @@ const actions = {
     return new Promise((resolve, reject) => {
       login({ username: username.trim(), password: password }).then(response => {
         const { data } = response
-        commit('SET_TOKEN', data.token)
-        setToken(data.token)
+        commit('SET_TOKEN', data.id)
+        commit('SET_NAME', data.nickName)
+        setToken(data.id)
         resolve()
       }).catch(error => {
         reject(error)
@@ -43,38 +44,13 @@ const actions = {
     })
   },
 
-  // get user info
-  getInfo({ commit, state }) {
-    return new Promise((resolve, reject) => {
-      getInfo(state.token).then(response => {
-        const { data } = response
-
-        if (!data) {
-          reject('Verification failed, please Login again.')
-        }
-
-        const { name, avatar } = data
-
-        commit('SET_NAME', name)
-        commit('SET_AVATAR', avatar)
-        resolve(data)
-      }).catch(error => {
-        reject(error)
-      })
-    })
-  },
-
   // user logout
-  logout({ commit, state }) {
-    return new Promise((resolve, reject) => {
-      logout(state.token).then(() => {
-        removeToken() // must remove  token  first
-        resetRouter()
-        commit('RESET_STATE')
-        resolve()
-      }).catch(error => {
-        reject(error)
-      })
+  logout({ commit }) {
+    return new Promise(resolve => {
+      removeToken()
+      resetRouter()
+      commit('RESET_STATE')
+      resolve()
     })
   },
 

src/utils/request.js

@@ -1,5 +1,6 @@
 import axios from 'axios'
-import { MessageBox, Message } from 'element-ui'
+// import { MessageBox, Message } from 'element-ui'
+import { Message } from 'element-ui'
 import store from '@/store'
 import { getToken } from '@/utils/auth'
 
@@ -44,18 +45,18 @@ service.interceptors.response.use(
       })
 
       // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
-      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
-        // to re-login
-        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
-          confirmButtonText: 'Re-Login',
-          cancelButtonText: 'Cancel',
-          type: 'warning'
-        }).then(() => {
-          store.dispatch('user/resetToken').then(() => {
-            location.reload()
-          })
-        })
-      }
+      // if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+      //   // to re-login
+      //   MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
+      //     confirmButtonText: 'Re-Login',
+      //     cancelButtonText: 'Cancel',
+      //     type: 'warning'
+      //   }).then(() => {
+      //     store.dispatch('user/resetToken').then(() => {
+      //       location.reload()
+      //     })
+      //   })
+      // }
       return Promise.reject(new Error(res.message || 'Error'))
     } else {
       return res

src/views/courseWareList/index.vue

@@ -0,0 +1,263 @@
+/* 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="课程id">
+          <el-input v-model="formInline.courseId" placeholder="courseId" clearable />
+        </el-form-item>
+        <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>
+          <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="getCourseWareData.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="200"
+          prop="title"
+        />
+        <el-table-column
+          label="播放地址"
+          width="200"
+          prop="playUrl"
+        />
+        <el-table-column
+          label="免费"
+          width="60"
+        >
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.free === 'FREE' ? '否' : '是' }}</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="课程Id" :label-width="formLabelWidth" prop="courseId">
+            <el-input v-model="form.courseId" autocomplete="off" clearable />
+          </el-form-item>
+          <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" 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 label="播放地址" :label-width="formLabelWidth" prop="playUrl">
+            <el-input v-model="form.playUrl" autocomplete="off" clearable />
+          </el-form-item>
+          <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
+            <el-input v-model="form.sort" 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="getCourseWareData.totalSize"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  data() {
+    return {
+      dialogFormVisible: false,
+      formInline: {
+        courseId: '',
+        code: '',
+        title: ''
+      },
+      form: {},
+      formLabelWidth: '120px',
+      rules: {
+        courseId: [{ required: true, message: '请输入课程id', trigger: 'blur' }],
+        code: [{ required: true, message: '请输入code', trigger: 'blur' }],
+        title: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+        free: [{ required: true, message: '请选择状态', trigger: 'change' }],
+        playUrl: [{ required: true, message: '请输入播放地址', trigger: 'blur' }],
+        sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
+      },
+      page: 1,
+      type: ''
+    }
+  },
+  created() {
+    this.$store.dispatch('courseWareList/getCourseWareLists', {
+      page: this.page
+    })
+  },
+  // eslint-disable-next-line vue/order-in-components
+  computed: {
+    ...mapGetters([
+      'getCourseWareData'
+    ])
+  },
+  methods: {
+    newDate(date) {
+      return new Date(date).toLocaleString()
+    },
+    onSubmit() {
+      this.$store.dispatch('courseWareList/getCourseWareLists', 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('courseWareList/getCourseWareLists', {
+          page: this.page
+        })
+      })
+    },
+    handleSet(index, row) {
+      console.log(index, row)
+      this.dialogFormVisible = true
+      this.type = 'set'
+      this.form = {
+        id: row.id,
+        courseId: row.courseId,
+        code: row.code,
+        title: row.title,
+        playUrl: row.playUrl,
+        free: row.free,
+        sort: row.sort
+      }
+    },
+    handOk(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.type === 'add') {
+            console.log(this.form)
+            this.$store.dispatch('courseWareList/addCourseWareLists', this.form).then(() => {
+              this.dialogFormVisible = false
+              this.$store.dispatch('courseWareList/getCourseWareLists', {
+                page: this.page
+              })
+            })
+          } else {
+            this.$store.dispatch('courseWareList/setCourseWareLists', this.form).then(() => {
+              this.dialogFormVisible = false
+              this.$store.dispatch('courseWareList/getCourseWareLists', {
+                page: this.page
+              })
+            })
+          }
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    addTopic() {
+      this.dialogFormVisible = true
+      this.type = 'add'
+      this.form = {
+        courseId: '',
+        code: '',
+        title: '',
+        playUrl: '',
+        free: '',
+        sort: ''
+      }
+    },
+    handleCurrentChange(val) {
+      console.log(val)
+      this.page = val
+      this.$store.dispatch('courseWareList/getCourseWareLists', {
+        page: this.page
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.topic {
+  margin-top: 20px;
+}
+.el-form {
+  width: 80%;
+}
+.el-input {
+  width: 250px;
+}
+.el-select>.el-input {
+  width: 250px;
+}
+.el-pagination {
+  text-align: center;
+  margin-top: 20px;
+}
+</style>

src/views/dashboardRowItem/index.vue

@@ -89,9 +89,11 @@
           </el-form-item>
           <el-form-item label="icon" :label-width="formLabelWidth">
             <el-input v-model="form.icon" autocomplete="off" clearable />
+            <el-tag v-if="type === 'add'" type="danger">图片模板请输入icon名字</el-tag>
           </el-form-item>
           <el-form-item label="京东icon" :label-width="formLabelWidth">
             <el-input v-model="form.jdIcon" autocomplete="off" clearable />
+            <el-tag v-if="type === 'add'" type="danger">图片模板请输入京东icon名字</el-tag>
           </el-form-item>
           <el-form-item v-if="type === 'add'" label="跳转类型" :label-width="formLabelWidth">
             <el-select v-model="form.targetType" placeholder="请选择">

src/views/login/index.vue

@@ -61,7 +61,7 @@ export default {
       }
     }
     const validatePassword = (rule, value, callback) => {
-      if (value.length < 6) {
+      if (value.length < 1) {
         callback(new Error('The password can not be less than 6 digits'))
       } else {
         callback()
@@ -70,7 +70,7 @@ export default {
     return {
       loginForm: {
         username: 'admin',
-        password: '111111'
+        password: 'admin'
       },
       loginRules: {
         username: [{ required: true, trigger: 'blur', validator: validateUsername }],
@@ -103,15 +103,12 @@ export default {
     handleLogin() {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
-          this.loading = true
-          this.$router.push({ path: '/' })
-          this.loading = false
-          // this.$store.dispatch('user/login', this.loginForm).then(() => {
-          //   this.$router.push({ path: this.redirect || '/' })
-          //   this.loading = false
-          // }).catch(() => {
-          //   this.loading = false
-          // })
+          this.$store.dispatch('user/login', this.loginForm).then(() => {
+            this.$router.push({ path: this.redirect || '/' })
+            this.loading = false
+          }).catch(() => {
+            this.loading = false
+          })
         } else {
           console.log('error submit!!')
           return false