1. 完成 登录、登录看板查询

2. 修改基础布局为整体滚动

src/api/table.js

@@ -1,15 +1,31 @@
 import request from '@/utils/request';
+import store from '@/store';
+import { getSessionID } from '@/utils/auth';
 
+// 得到统一的请求参数
+function getRequestParameter() {
+  return {
+    UserCode: store.state.user.user_code,
+    UserType: store.state.user.user_type,
+    SessionID: getSessionID()
+  };
+}
+
+/**
+ * 教师得到自己一天的课次
+ * @param {String} date 格式化后的时间 yyy-mm-dd
+ */
 export function getMyCsItemsDateTeacher(Parameter) {
+  let requestParameter = getRequestParameter();
+  let params = {
+    MethodName: 'teaching-cs_item_manager-GetMyCSItems_Date_Teacher',
+    Parameter
+  };
+  params = Object.assign(params, requestParameter);
+
   return request({
-    url: '/ServiceInterface',
+    url: '/GCLSLearnWebSI/ServiceInterface',
     method: 'post',
-    params: {
-      MethodName: 'teaching-cs_item_manager-GetMyCSItems_Date_Teacher',
-      Parameter: Parameter,
-      UserCode: 'GCLS_SYS_LEARN_SERVER_USER',
-      UserType: 'TEACHER',
-      SessionID: 'GCLS_SYS_LEARN_SERVER'
-    }
+    params
   });
 }

src/api/user.js

@@ -1,9 +1,17 @@
 import request from '@/utils/request';
 
-export function login(params) {
+/**
+ * 登录
+ * @param {Object} Parameter 登录对象 { user_type 用户类型 user_name 用户登录名 password 用户密码 }
+ * @returns
+ */
+export function login(Parameter) {
   return request({
-    url: '/ServiceInterface',
+    url: '/GCLSLearnWebSI/ServiceInterface',
     method: 'post',
-    params
+    params: {
+      MethodName: 'login_control-Login',
+      Parameter: Parameter
+    }
   });
 }

src/layouts/index.vue

@@ -21,7 +21,7 @@ export default {
       return this.$route.path;
     },
     userType() {
-      return this.$store.state.user.userType === 'teacher' ? '教师' : '学员';
+      return this.$store.state.user.user_type === 'teacher' ? '教师' : '学员';
     }
   }
 };
@@ -30,14 +30,12 @@ export default {
 <style lang="scss" scoped>
 .app-container {
   height: 100%;
-  overflow: hidden;
   padding-top: $header-h;
   .app-main {
     height: 100%;
     min-height: calc(100vh - #{$header-h});
     width: 100%;
     position: relative;
-    overflow: hidden;
   }
 }
 </style>

src/permission.js

@@ -1,5 +1,5 @@
 import router from './router';
-import { getToken } from '@/utils/auth';
+import { getSessionID } from '@/utils/auth';
 
 import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
@@ -12,8 +12,8 @@ const whiteList = ['/login']; // 重定向白名单
 router.beforeEach(async (to, from, next) => {
   NProgress.start();
 
-  const hasToken = getToken();
-  if (hasToken) {
+  const session_id = getSessionID();
+  if (session_id) {
     if (to.path === '/login') {
       next({ path: '/' });
       NProgress.done();

src/router/index.js

@@ -28,6 +28,18 @@ const routes = [
     ]
   },
   {
+    path: '/cs_item_detail',
+    component: Layout,
+    redirect: '/cs_item_detail/index/:id',
+    children: [
+      {
+        path: '/cs_item_detail/index/:id',
+        name: 'CSItemDetail',
+        component: () => import('@/views/teacher/cs_item_detail')
+      }
+    ]
+  },
+  {
     path: '*',
     redirect: '/404'
   }

src/store/modules/user.js

@@ -1,12 +1,14 @@
-import { getToken, removeToken, setToken } from '@/utils/auth';
+import { getSessionID, removeSessionID, setSessionID } from '@/utils/auth';
 import { user } from '@/store/mutation-types';
 import { resetRouter } from '@/router';
+import { login } from '@/api/user';
 
 const getDefaultSate = () => {
   return {
-    token: getToken(),
-    name: 'teacher',
-    userType: ''
+    session_id: getSessionID(),
+    user_code: '',
+    user_real_name: '',
+    user_type: ''
   };
 };
 
@@ -16,44 +18,48 @@ const mutations = {
   [user.RESET_STATE]: state => {
     Object.assign(state, getDefaultSate());
   },
-  [user.SET_TOKEN]: (state, token) => {
-    state.token = token;
+  [user.SET_SESSION_ID]: (state, session_id) => {
+    state.session_id = session_id;
   },
-  [user.SET_USER_TYPE]: (state, userType) => {
-    state.userType = userType;
+  [user.SET_USER_INFO]: (state, { user_code, user_real_name, user_type }) => {
+    state.user_code = user_code;
+    state.user_real_name = user_real_name;
+    state.user_type = user_type;
   }
 };
 
 const actions = {
   // 登录
   login({ commit }, userInfo) {
-    const {
-      loginForm: { username, password },
-      userType
-    } = userInfo;
-    return new Promise(reslove => {
-      if (Boolean(username) && Boolean(password)) {
-        setToken(`token-${username}-${password}`);
-        commit(user.SET_USER_TYPE, userType);
-        commit(user.SET_TOKEN, `token-${username}-${password}`);
-        reslove();
-      }
+    const { loginForm } = userInfo;
+    return new Promise((reslove, reject) => {
+      login(loginForm)
+        .then(response => {
+          let { user_code, user_real_name, user_type, session_id } = response;
+          setSessionID(response.session_id);
+          commit(user.SET_USER_INFO, { user_code, user_real_name, user_type });
+          commit(user.SET_SESSION_ID, session_id);
+          reslove();
+        })
+        .catch(error => {
+          reject(error);
+        });
     });
   },
 
   // 用户退出
   signOut({ commit }) {
     return new Promise(resolve => {
-      removeToken();
+      removeSessionID();
       resetRouter();
       commit(user.RESET_STATE);
       resolve();
     });
   },
 
-  removeToken({ commit }) {
+  resetSessionID({ commit }) {
     return new Promise(reslove => {
-      removeToken();
+      removeSessionID();
       commit(user.RESET_STATE);
       reslove();
     });

src/store/mutation-types.js

@@ -1,7 +1,7 @@
 const user = {
   RESET_STATE: 'RESET_STATE',
-  SET_TOKEN: 'SET_TOKEN',
-  SET_USER_TYPE: 'SET_USER_TYPE'
+  SET_SESSION_ID: 'SET_SESSION_ID',
+  SET_USER_INFO: 'SET_USER_INFO'
 };
 
 const app = {};

src/styles/index.scss

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import './mixin.scss';
 
 body {
   height: 100%;
@@ -46,3 +47,9 @@ a:hover {
 div:focus {
   outline: none;
 }
+
+.container {
+  width: 1000px;
+  margin: 0 auto;
+  height: 100%;
+}

src/styles/mixin.scss

@@ -0,0 +1,5 @@
+@mixin contanier {
+  width: 1000px;
+  margin: 0 auto;
+  padding: 30px 0 4px;
+}

src/utils/auth.js

@@ -1,15 +1,15 @@
 import Cookies from 'js-cookie';
 
-const TokenKey = 'gcls_sys_learn_web';
+const key = 'session_id';
 
-export function getToken() {
-  return Cookies.get(TokenKey);
+export function getSessionID() {
+  return Cookies.get(key);
 }
 
-export function setToken(token) {
-  return Cookies.set(TokenKey, token);
+export function setSessionID(session_id) {
+  return Cookies.set(key, session_id);
 }
 
-export function removeToken() {
-  return Cookies.remove(TokenKey);
+export function removeSessionID() {
+  return Cookies.remove(key);
 }

src/utils/request.js

@@ -1,5 +1,3 @@
-import store from '@/store';
-import { getToken } from '@/utils/auth';
 import axios from 'axios';
 import { Message } from 'element-ui';
 
@@ -16,17 +14,7 @@ const service = axios.create({
 });
 
 // 请求拦截器
-service.interceptors.request.use(
-  config => {
-    if (store.getters.token) {
-      config.headers['X-Token'] = getToken();
-    }
-    return config;
-  },
-  error => {
-    return Promise.reject(error);
-  }
-);
+service.interceptors.request.use({});
 
 //响应拦截器
 service.interceptors.response.use(
@@ -43,13 +31,13 @@ service.interceptors.response.use(
     }
 
     // 返回数据失败
-    if (res.Status === 0) {
+    if (res.status === 0) {
       Message({
-        message: res.Error,
+        message: res.error,
         type: 'error',
         duration: 3 * 1000
       });
-      return Promise.reject(new Error(res.Error || 'Error'));
+      return Promise.reject(new Error(res.error || 'Error'));
     }
     return res;
   },

src/views/login/index.vue

@@ -12,12 +12,12 @@
         <h3 class="title">系统登录</h3>
       </div>
 
-      <el-form-item prop="username">
+      <el-form-item prop="user_name">
         <el-input
           type="text"
-          v-model="loginForm.username"
-          ref="username"
-          name="username"
+          v-model="loginForm.user_name"
+          ref="user_name"
+          name="user_name"
           auto-complete="on"
           placeholder="用户名"
         />
@@ -80,11 +80,12 @@ export default {
 
     return {
       loginForm: {
-        username: 'teacher',
-        password: '1234567a'
+        user_name: 'teacher',
+        password: '1234567a',
+        user_type: ''
       },
       loginRules: {
-        username: [{ require: true, trigger: 'blur', validator: validateUsername }],
+        user_name: [{ require: true, trigger: 'blur', validator: validateUsername }],
         password: [{ require: true, trigger: 'blur', validator: validatePassword }]
       },
       loading: false,
@@ -99,12 +100,13 @@ export default {
     }
   },
   methods: {
-    handleLogin(userType) {
+    handleLogin(user_type) {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
+          this.loginForm.user_type = user_type;
           this.loading = true;
           this.$store
-            .dispatch('user/login', { loginForm: this.loginForm, userType })
+            .dispatch('user/login', { loginForm: this.loginForm })
             .then(() => {
               this.$router.push({ path: this.redirect || '/' });
               this.loading = false;

src/views/teacher/cs_item_detail/ClassroomTask.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="classroom-task-container">
+    <span>课堂任务</span>
+    <div class="classroom-task">
+      <el-timeline>
+        <el-timeline-item timestamp="课前任务" color="#F02828" placement="top">
+          <el-card>
+            <h4>更新 Github 模板</h4>
+            <p>王小虎 提交于 2018/4/12 20:46</p>
+          </el-card>
+          <el-card>
+            <h4>更新 Github 模板</h4>
+            <p>王小虎 提交于 2018/4/12 20:46</p>
+          </el-card>
+          <el-card>
+            <h4>更新 Github 模板</h4>
+            <p>王小虎 提交于 2018/4/12 20:46</p>
+          </el-card>
+          <el-card>
+            <h4>更新 Github 模板</h4>
+            <p>王小虎 提交于 2018/4/12 20:46</p>
+          </el-card>
+          <el-card>
+            <h4>更新 Github 模板</h4>
+            <p>王小虎 提交于 2018/4/12 20:46</p>
+          </el-card>
+          <el-card>
+            <h4>更新 Github 模板</h4>
+            <p>王小虎 提交于 2018/4/12 20:46</p>
+          </el-card>
+        </el-timeline-item>
+        <el-timeline-item timestamp="课中任务" color="#F02828" placement="top"> </el-timeline-item>
+        <el-timeline-item timestamp="课后任务" color="#F02828" placement="top"> </el-timeline-item>
+      </el-timeline>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ClassroomTask',
+  props: {},
+  created() {}
+};
+</script>
+
+<style lang="scss" scope>
+.classroom-task-container {
+  padding-top: 20px;
+  .classroom-task {
+    width: 70%;
+    margin-top: 17px;
+    padding-right: 5px;
+  }
+  .el-timeline {
+    .el-timeline-item__timestamp.is-top {
+      color: #f02828;
+      font-size: 16px;
+    }
+    .el-timeline-item__node {
+      width: 13px;
+      height: 13px;
+      top: 3px;
+    }
+    .el-timeline-item__tail {
+      top: 12px;
+    }
+  }
+}
+</style>

src/views/teacher/cs_item_detail/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="cs-item-detail-container">
+    <div>
+      <span>讲次详情</span>
+      <div class="cs-item-info">
+        <el-row>
+          <el-col :span="21">发</el-col>
+          <el-col :span="3" class="col_right">任务未开始</el-col>
+        </el-row>
+        <el-row class="cs-item-name">
+          <el-col>把</el-col>
+        </el-row>
+        <el-row class="cs-item-class-name">
+          <el-col>发</el-col>
+        </el-row>
+      </div>
+    </div>
+    <classroom-task />
+  </div>
+</template>
+
+<script>
+import ClassroomTask from './ClassroomTask';
+
+export default {
+  data() {
+    return {
+      id: this.$route.params.id
+    };
+  },
+  components: {
+    ClassroomTask
+  },
+  mounted() {}
+};
+</script>
+
+<style lang="scss" scoped>
+@import '~@/styles/mixin.scss';
+
+.cs-item-detail-container {
+  @include contanier;
+
+  .cs-item-info {
+    width: 100%;
+    height: 122px;
+    padding: 15px 28px 20px 45px;
+    margin-top: 11px;
+    background-color: #eee;
+    .col_right {
+      text-align: right;
+    }
+    .cs-item-name {
+      padding: 16px 0;
+    }
+    .cs-item-class-name {
+      color: #a4a4a4;
+    }
+  }
+}
+</style>

src/views/teacher/main/CurriculaManager.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>课程管理</div>
+  <div class="curricula-manager-container"></div>
 </template>
 
 <script>
@@ -9,5 +9,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-//
+.curricula-manager-container {
+  padding: 20px;
+}
 </style>

src/views/teacher/main/TaskKanban.vue

@@ -31,27 +31,28 @@
     <!-- 任务看板 -->
     <div class="right-container">
       <div
-        v-for="item in CSItemList"
+        v-for="item in cs_item_list"
         class="cs-item"
-        :key="item.ID"
+        :key="item.id"
         :style="{
           'background-color':
-            item.Finish_Status === 0 ? '#E7F8E1' : item.Finish_Status === 1 ? '#FFFBD8' : '#F7DFDF'
+            item.finish_status === 0 ? '#E7F8E1' : item.finish_status === 1 ? '#FFFBD8' : '#F7DFDF'
         }"
+        @click.prevent="routerPush(item.id)"
       >
         <el-row class="task-date">
-          <el-col :span="20">{{ item.Date_Stamp }}&nbsp;{{ item.Minute_Space }}</el-col>
+          <el-col :span="20">{{ item.date_stamp }}&nbsp;{{ item.minute_space }}</el-col>
           <el-col :span="4" :style="{ 'text-align': 'right' }"
             >任务{{
-              item.Finish_Status === 0 ? '未开始' : item.Finish_Status === 1 ? '已开始' : '已结束'
+              item.finish_status === 0 ? '未开始' : item.finish_status === 1 ? '已开始' : '已结束'
             }}</el-col
           >
         </el-row>
         <el-row class="task-name">
-          <el-col :span="24">{{ item.Name }}</el-col>
+          <el-col :span="24">{{ item.name }}</el-col>
         </el-row>
         <el-row class="task-class-name">
-          <el-col :span="24">{{ item.Class_Name }}</el-col>
+          <el-col :span="24">{{ item.class_name }}</el-col>
         </el-row>
       </div>
     </div>
@@ -67,13 +68,11 @@ export default {
   data() {
     return {
       date: new Date(),
-      CSItemList: null
+      cs_item_list: {}
     };
   },
   mounted() {
-    getMyCsItemsDateTeacher({ Date_Stamp: formatDate(this.date) }).then(response => {
-      this.CSItemList = response.CSItem_List;
-    });
+    this.getCSItemList();
   },
   computed: {
     dateTime: {
@@ -82,10 +81,20 @@ export default {
       },
       set: function (newValue) {
         this.date = newValue;
+        this.getCSItemList();
       }
     }
   },
-  methods: {}
+  methods: {
+    getCSItemList() {
+      getMyCsItemsDateTeacher({ date_stamp: formatDate(this.date) }).then(response => {
+        this.cs_item_list = response.cs_item_list;
+      });
+    },
+    routerPush(id) {
+      this.$router.push({ path: `/cs_item_detail/index/${id}` });
+    }
+  }
 };
 </script>
 
@@ -115,16 +124,19 @@ export default {
 }
 
 $left-item-h: 322px;
-$right-w: 661px;
+$right-w: 641px;
+// 95px 是 顶部导航菜单高度
+$container-h: calc(100vh - #{$header-h} - 95px);
 
 .task-kanban {
   height: 100%;
   overflow: hidden;
-  padding: 40px 0 0 18vw;
+  padding-top: 40px;
   display: flex;
   .left-container {
     width: 341px;
-    height: 100%;
+    height: $container-h;
+    margin-right: 2px;
     .panel {
       height: 100%;
       padding-right: 19px;
@@ -160,13 +172,12 @@ $right-w: 661px;
   }
 
   .right-container {
-    width: $right-w + 20px;
-    min-width: $right-w + 20px;
-    padding-right: 20px;
-    overflow-y: auto;
-    // 99px 是 顶部导航菜单高度 + 5px 底部距离
-    height: calc(100vh - #{$header-h} - 99px);
+    width: $right-w + 18px;
+    min-width: $right-w + 18px;
+    padding-right: 18px;
+    height: $container-h;
     .cs-item {
+      cursor: pointer;
       margin-top: 24px;
       width: $right-w;
       height: 122px;

src/views/teacher/main/index.vue

@@ -51,12 +51,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '~@/styles/mixin.scss';
+
 .main-container {
-  height: 100%;
+  @include contanier;
+
+  height: calc(100% - 19px);
 
   .nav-menu {
     width: 100%;
-    margin-top: 31px;
     display: flex;
     justify-content: center;
     text-align: center;

vue.config.js

@@ -16,7 +16,7 @@ let proxy = {};
 if (NODE_ENV === 'development') {
   proxy = {
     [process.env.VUE_APP_BASE_API]: {
-      target: 'http://localhost:20088/GCLSLearnWebSI/',
+      target: 'http://gcls.helxsoft.cn/',
       changeOrigin: true,
       pathRewrite: {
         ['^' + process.env.VUE_APP_BASE_API]: ''