添加了 新建课程和相关接口

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
+    "core-js": "^3.10.1",
     "element-ui": "^2.15.1",
     "js-cookie": "^2.2.1",
     "normalize.css": "^8.0.1",

src/api/app.js

@@ -1,6 +1,5 @@
 import { request, getRequestParameter } from '@/utils/request';
-import { getSessionID } from '@/utils/auth';
-import store from '@/store';
+import { getUserInfo } from '@/utils/auth';
 import qs from 'qs';
 
 /**
@@ -45,13 +44,16 @@ export function GetWordPack(Parameter) {
  * @param {String} SecurityLevel 保密级别
  * @returns
  */
-export function fileUpload(SecurityLevel, formData) {
+export function fileUpload(SecurityLevel, file) {
+  const { session_id, user_code, user_type } = getUserInfo();
   let params = {
-    UserCode: store.state.user.user_code,
-    UserType: store.state.user.user_type,
-    SessionID: getSessionID(),
+    UserCode: user_code,
+    UserType: user_type,
+    SessionID: session_id,
     SecurityLevel
   };
+  const formData = new FormData();
+  formData.append(file.filename, file.file, file.file.name);
 
   return request({
     method: 'post',
@@ -60,8 +62,6 @@ export function fileUpload(SecurityLevel, formData) {
     headers: {
       'Content-Type': 'multipart/form-data'
     },
-    data: {
-      formData
-    }
+    data: formData
   });
 }

src/api/course.js

@@ -0,0 +1,15 @@
+import { request, getRequestParameter } from '@/utils/request';
+
+/**
+ * @description 创建课程
+ * @param {Object} Parameter
+ */
+export function createCourse(Parameter) {
+  let params = getRequestParameter('teaching-course_manager-CreateCourse', Parameter);
+
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_WEB_SI,
+    params
+  });
+}

src/api/list.js

@@ -0,0 +1,14 @@
+import { request, getRequestParameter } from '@/utils/request';
+
+/**
+ * @description 得到我的机构列表
+ */
+export function getMyOrgList() {
+  let params = getRequestParameter('org-org_manager-GetMyOrgList');
+
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_WEB_SI,
+    params
+  });
+}

src/api/table.js

@@ -27,3 +27,18 @@ export function getCSItemInfoBox(Parameter) {
     params
   });
 }
+
+/**
+ * @description 获得课程管理
+ * @param {Object} Parameter finish_status 完成状态 page_capacity 每页容量 cur_page 当前页码
+ * @returns
+ */
+export function pageQueryMyCourseList(Parameter) {
+  let params = getRequestParameter('teaching-course_manager-PageQueryMyCourseList', Parameter);
+
+  return request({
+    method: 'post',
+    url: process.env.VUE_APP_WEB_SI,
+    params
+  });
+}

src/store/modules/user.js

@@ -1,14 +1,16 @@
-import { getSessionID, removeSessionID, setSessionID } from '@/utils/auth';
+import { getUserInfo, removeSessionID, setUserInfo } from '@/utils/auth';
 import { user } from '@/store/mutation-types';
 import { resetRouter } from '@/router';
 import { login, updateLanguageType } from '@/api/user';
 
 const getDefaultSate = () => {
+  const { session_id, user_code, user_real_name, user_type } = getUserInfo();
+
   return {
-    session_id: getSessionID(),
-    user_code: '',
-    user_real_name: '',
-    user_type: '',
+    session_id: session_id,
+    user_code: user_code,
+    user_real_name: user_real_name,
+    user_type: user_type,
     language_type: localStorage.getItem('language_type') || 'ZH'
   };
 };
@@ -19,14 +21,16 @@ const mutations = {
   [user.RESET_STATE]: state => {
     Object.assign(state, getDefaultSate());
   },
-  [user.SET_SESSION_ID]: (state, session_id) => {
-    state.session_id = session_id;
-  },
-  [user.SET_USER_INFO]: (state, { user_code, user_real_name, user_type, language_type }) => {
+  [user.SET_USER_INFO]: (
+    state,
+    { user_code, user_real_name, user_type, language_type, session_id }
+  ) => {
     state.user_code = user_code;
     state.user_real_name = user_real_name;
     state.user_type = user_type;
     state.language_type = language_type;
+    state.session_id = session_id;
+    localStorage.setItem('language_type', language_type);
   },
   [user.UPDATE_LANGUAGE_TYPE]: (state, language_type) => {
     localStorage.setItem('language_type', language_type);
@@ -41,10 +45,8 @@ const actions = {
     return new Promise((reslove, reject) => {
       login(loginForm)
         .then(response => {
-          let { session_id } = response;
-          setSessionID(session_id);
+          setUserInfo(response);
           commit(user.SET_USER_INFO, response);
-          commit(user.SET_SESSION_ID, session_id);
           reslove();
         })
         .catch(error => {

src/store/mutation-types.js

@@ -1,6 +1,5 @@
 const user = {
   RESET_STATE: 'RESET_STATE',
-  SET_SESSION_ID: 'SET_SESSION_ID',
   SET_USER_INFO: 'SET_USER_INFO',
   UPDATE_LANGUAGE_TYPE: 'UPDATE_LANGUAGE_TYPE'
 };

src/utils/auth.js

@@ -1,15 +1,32 @@
 import Cookies from 'js-cookie';
 
-const key = 'session_id';
+const userInfoList = ['user_code', 'session_id', 'user_type', 'user_real_name'];
+
+export function getUserInfo() {
+  let userInfo = {};
+  for (let i = 0; i < userInfoList.length; i++) {
+    const key = userInfoList[i];
+    userInfo[key] = Cookies.get(key);
+  }
+  return userInfo;
+}
 
 export function getSessionID() {
-  return Cookies.get(key);
+  return Cookies.get('session_id');
 }
 
-export function setSessionID(session_id) {
-  return Cookies.set(key, session_id);
+export function setUserInfo(data) {
+  for (let i = 0; i < userInfoList.length; i++) {
+    const key = userInfoList[i];
+
+    Cookies.set(key, data[key]);
+  }
 }
 
 export function removeSessionID() {
-  return Cookies.remove(key);
+  for (let i = 0; i < userInfoList.length; i++) {
+    const key = userInfoList[i];
+
+    Cookies.remove(key);
+  }
 }

src/utils/request.js

@@ -1,7 +1,6 @@
 import axios from 'axios';
 import { Message } from 'element-ui';
-import store from '@/store';
-import { getSessionID } from '@/utils/auth';
+import { getUserInfo } from '@/utils/auth';
 
 axios.defaults.withCredentials = true; // 跨域请求时是否需要使用凭证
 axios.defaults.dataType = 'json';
@@ -61,11 +60,13 @@ service.interceptors.response.use(
  * @returns {Object} 返回必需的请求参数
  * */
 export function getRequestParameter(MethodName, Parameter = {}) {
+  const { session_id, user_code, user_type } = getUserInfo();
+
   return {
     MethodName,
-    UserCode: store.state.user.user_code,
-    UserType: store.state.user.user_type,
-    SessionID: getSessionID(),
+    UserCode: user_code,
+    UserType: user_type,
+    SessionID: session_id,
     Parameter
   };
 }

src/utils/validate.js

@@ -5,3 +5,19 @@
 export function isExternal(path) {
   return /^(https?:|mailto:|tel:)/.test(path);
 }
+
+/**
+ * @description 只允许输入数字
+ * @param {String} value
+ * @returns Number
+ */
+export function onlyNumber(value) {
+  if (!value) {
+    return 0;
+  }
+  let val = value;
+  val = val.replace(/[^\d.]/g, ''); // 清除"数字"和"."以外的字符
+  val = val.replace(/\.{2,}/g, '.'); // 只保留第一个 "." 清除多余的
+  val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
+  return val;
+}

src/views/teacher/add_course/AddCourse.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="information">
-    <div class="information-title">{{ $t('Learn_New_Courses') }}</div>
     <el-form
       ref="form"
       :model="form"
@@ -9,49 +8,82 @@
       label-position="left"
       hide-required-asterisk
     >
-      <el-form-item :label="$t('Learn_Course_Cover')" class="information-cover">
+      <el-form-item :label="$t('Learn_Course_Cover') + '：'" class="information-cover">
         <el-upload
           action="no"
           class="avatar-uploader"
           :http-request="upload"
-          :on-success="uploadSuccess"
+          :before-upload="beforeUpload"
           :show-file-list="false"
           accept="image/*"
         >
-          <img v-if="form.imageUrl" :v-model="form.imageUrl" :src="form.imageUrl" class="avatar" />
+          <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
         <span class="line-middle auto"><a @click="automatically">自动生成功能</a></span>
       </el-form-item>
-      <el-form-item :label="$t('Learn_Course_Name')" prop="name">
+      <el-form-item :label="$t('Learn_Course_Name') + '：'" prop="name">
         <el-input v-model="form.name" type="text" class="name-input"></el-input>
       </el-form-item>
-      <el-form-item label="课程介绍">
+      <el-form-item label="课程介绍：">
         <el-input
-          v-model="form.introduce"
+          v-model="form.intro"
           type="textarea"
           class="introduce-textarea"
           resize="none"
           rows="6"
         ></el-input>
       </el-form-item>
-      <el-form-item label="授课教师">
+      <el-form-item label="授课教师：">
         <el-button @click="addTeacher">添加教师</el-button>
       </el-form-item>
-      <el-form-item label="时间">
-        <el-date-picker v-model="form.beginDate" type="date" placeholder="添加开始日期" />
+      <el-form-item label="时间：">
+        <el-date-picker
+          v-model="form.begin_date"
+          value-format="yyyy-MM-dd"
+          type="date"
+          placeholder="添加开始日期"
+        />
         <span class="horizontal-bar">-</span>
-        <el-date-picker v-model="form.endDate" type="date" placeholder="添加截止日期" />
+        <el-date-picker
+          v-model="form.end_date"
+          value-format="yyyy-MM-dd"
+          type="date"
+          placeholder="添加截止日期"
+        />
       </el-form-item>
-      <el-form-item label="学员人数">
-        <el-input v-model="form.studentNumber" type="input" class="people-input"></el-input>
-        <el-checkbox v-model="form.checked" class="student-checkbox"> 人数满足自动封班</el-checkbox>
+      <el-form-item label="开班学员数：">
+        <el-input
+          v-model="form.student_count_start"
+          type="text"
+          class="people-input"
+          @input="studentCountStartInput"
+        ></el-input>
       </el-form-item>
-      <el-form-item label="类型">
-        <el-checkbox-group v-model="form.typeList">
-          <el-checkbox label="a">公开课</el-checkbox>
-          <el-checkbox label="b">需申请</el-checkbox>
-        </el-checkbox-group>
+      <el-form-item label="最大学员数：">
+        <el-input
+          v-model="form.student_count_max"
+          type="text"
+          class="people-input"
+          @input="studentCountMaxInput"
+        ></el-input>
+        <el-checkbox v-model="form.is_auto_close" class="student-checkbox">
+          人数满足自动封班
+        </el-checkbox>
+      </el-form-item>
+      <el-form-item label="类型：">
+        <el-checkbox v-model="form.is_opened">公开课</el-checkbox>
+        <el-checkbox v-model="form.is_need_apply">需申请</el-checkbox>
+      </el-form-item>
+      <el-form-item label="机构：" prop="mechanism">
+        <el-select v-model="form.mechanism" placeholder="请选择">
+          <el-option
+            v-for="item in org_list"
+            :key="item.id"
+            :value="item.id"
+            :label="item.name"
+          ></el-option>
+        </el-select>
       </el-form-item>
       <el-form-item>
         <el-button @click="cancel">取消</el-button>
@@ -64,36 +96,62 @@
 <script>
 import { updateWordPack } from '@/utils/i18n';
 import { fileUpload } from '@/api/app';
+import { onlyNumber } from '@/utils/validate';
+import { getMyOrgList } from '@/api/list';
+import { createCourse } from '@/api/course';
 
 export default {
   data() {
     return {
+      org_list: [],
       form: {
         imageUrl: '',
+        picture_id: '',
         name: '',
-        introduce: '',
-        teacher: '',
-        beginDate: '',
-        endDate: '',
-        studentNumber: '',
-        checked: false,
-        typeList: []
+        intro: '',
+        teacher_ids: '',
+        begin_date: '',
+        end_date: '',
+        is_auto_close: false,
+        student_count_start: '',
+        student_count_max: '',
+        is_opened: false,
+        is_need_apply: false,
+        mechanism: ''
       },
       formRules: {
-        name: { required: true, message: '课程名称不能为空', trigger: 'blur' }
+        name: { required: true, message: '课程名称不能为空', trigger: 'blur' },
+        mechanism: { required: true, message: '机构不能为空', trigger: 'change' }
       }
     };
   },
   created() {
+    getMyOrgList().then(response => {
+      this.org_list = response.org_list;
+    });
     updateWordPack({
-      word_key_list: ['Learn_New_Courses', 'Learn_Course_Cover', 'Learn_Course_Name']
+      word_key_list: ['Learn_Course_Cover', 'Learn_Course_Name']
     });
   },
   methods: {
     cancel() {
       this.$router.go(-1);
     },
-    confirm() {},
+    confirm() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          createCourse(this.form).then(response => {
+            console.log(response);
+            if (response.status === 1) {
+              this.$message.success('创建课程成功！');
+              this.$router.push('/main');
+            }
+          });
+        } else {
+          return false;
+        }
+      });
+    },
     // 自动生成功能
     automatically() {
       this.$message.info('该功能暂未实现！');
@@ -101,15 +159,28 @@ export default {
     addTeacher() {
       this.$message.info('该功能暂未实现！');
     },
+    studentCountStartInput(value) {
+      this.form.student_count_start = onlyNumber(value);
+    },
+    studentCountMaxInput(value) {
+      this.form.student_count_max = onlyNumber(value);
+    },
+    beforeUpload(file) {
+      let isImage = /^image/.test(file.type);
+      if (!isImage) {
+        this.$message.error('上传的文件不是图片，请重新上传！');
+      }
+      return isImage;
+    },
     upload(file) {
-      let formData = new FormData();
-      formData.append('file', file.file);
-      fileUpload('Open', formData).then(response => {
-        console.log(response);
+      fileUpload('Open', file).then(response => {
+        const { file_info_list } = response;
+        if (file_info_list.length > 0) {
+          const { file_url, file_id } = file_info_list[0];
+          this.form.imageUrl = file_url;
+          this.form.picture_id = file_id;
+        }
       });
-    },
-    uploadSuccess(res, file) {
-      console.log(res);
     }
   }
 };
@@ -133,7 +204,8 @@ export default {
   .introduce-textarea {
     width: 530px;
   }
-  .people-input {
+  .people-input,
+  .mechanism-input {
     width: 185px;
   }
   .student-checkbox {

src/views/teacher/add_course/index.vue

@@ -14,11 +14,7 @@ export default {
   data() {
     return {};
   },
-  methods: {
-    step(component) {
-      this.curComponent = component;
-    }
-  }
+  methods: {}
 };
 </script>
 

src/views/teacher/main/CurriculaManager.vue

@@ -1,15 +1,20 @@
 <template>
   <div class="curricula-manager">
     <div class="curricula-manager-header">
-      <el-input v-model="input" placeholder="请输入" suffix-icon="el-icon-search"> </el-input>
+      <el-input
+        v-model="input"
+        placeholder="请输入"
+        suffix-icon="el-icon-search"
+        @keyup.enter.native="search"
+      ></el-input>
     </div>
     <div class="curricula-manager-body">
       <div class="curricula-manager-body-button">
         <el-button
-          v-for="(item, index) in statusList"
-          :key="index"
-          :class="['bg-color', { active: background == index }]"
-          @click="click(item.status, index)"
+          v-for="(item, i) in statusList"
+          :key="i"
+          :class="['bg-color', { active: curTab === i }]"
+          @click="selectTab(item.status, i)"
         >
           {{ item.val }}
         </el-button>
@@ -22,20 +27,23 @@
             <i class="el-icon-sort"></i>
           </span>
         </div>
-        <el-button class="bg-color" @click="addCourse()">{{ $t('Learn_New_Courses') }}</el-button>
+        <el-button class="add-course" @click="$router.push('/add_course')">
+          {{ $t('Learn_New_Courses') }}
+        </el-button>
       </div>
     </div>
-    <div class="curricula-manager-foot">
-      <div v-for="(item, index) in taskList" :key="index">
-        <div v-if="item.status == isStatus" class="circulation">
-          <div class="curricula-manager-foot-value">
-            <span>{{ item.subject }}</span>
-            <span>{{ item.val }}</span>
+    <div class="curricula-manager-item">
+      <div v-for="item in courseList" :key="item.id">
+        <div class="circulation">
+          <div class="curricula-manager-item-value">
+            <span>{{ item.name }}</span>
+            <!-- <span>{{ item.val }}</span> -->
           </div>
-          <div class="curricula-manager-foot-create">
-            <span>{{ item.createTime }}</span>
-            <span class="curricula-manager-foot-on-class">{{ item.onClassTime }}</span>
-            <span class="curricula-manager-foot-on-class">授课教师：{{ item.teacher }}</span>
+          <div class="curricula-manager-item-create">
+            <span>{{ item.begin_date }}</span>
+            <span class="date-horizontal-bar">-</span>
+            <span>{{ item.end_date }}</span>
+            <!-- <span class="curricula-manager-item-teacher">授课教师：{{ item.teacher }}</span> -->
           </div>
         </div>
       </div>
@@ -45,14 +53,15 @@
 
 <script>
 import { updateWordPack } from '@/utils/i18n';
+import { pageQueryMyCourseList } from '@/api/table';
 
 export default {
   name: 'CurriculaManager',
   data() {
     return {
       input: '',
-      background: 0,
-      isStatus: 1,
+      curTab: 0,
+      status: '1',
       sortList: [
         {
           id: '1',
@@ -87,86 +96,30 @@ export default {
           val: '已结束'
         }
       ],
-      taskList: [
-        {
-          subject: '中文 轻松学中文初段 暑假 0813',
-          createTime: '2021/3/28',
-          onClassTime: '2021/4/25',
-          teacher: '张一三',
-          val: '进行中',
-          status: '1'
-        },
-        {
-          subject: '中文 轻松学中文初段 暑假 0813',
-          createTime: '2021/3/12',
-          onClassTime: '2021/4/23',
-          teacher: '张一三',
-          val: '进行中',
-          status: '1'
-        },
-        {
-          subject: '中文 轻松学中文初段 暑假 0813',
-          createTime: '2021/3/22',
-          onClassTime: '2021/4/17',
-          teacher: '张一三',
-          val: '已结束',
-          status: '3'
-        },
-        {
-          subject: '中文 轻松学中文初段 暑假 0813',
-          createTime: '2021/3/2',
-          onClassTime: '2021/4/28',
-          teacher: '张一三',
-          val: '待开始',
-          status: '2'
-        },
-        {
-          subject: '中文 轻松学中文初段 暑假 0813',
-          createTime: '2021/3/6',
-          onClassTime: '2021/4/1',
-          teacher: '张一三',
-          val: '进行中',
-          status: '1'
-        },
-        {
-          subject: '中文 轻松学中文初段 暑假 0813',
-          createTime: '2021/3/19',
-          onClassTime: '2021/4/9',
-          teacher: '张一三',
-          val: '已结束',
-          status: '3'
-        },
-        {
-          subject: '中文 轻松学中文初段 暑假 0813',
-          createTime: '2021/3/16',
-          onClassTime: '2021/4/25',
-          teacher: '张一三',
-          val: '待开始',
-          status: '2'
-        },
-        {
-          subject: '中文 轻松学中文初段 暑假 0813',
-          createTime: '2021/3/21',
-          onClassTime: '2021/4/11',
-          teacher: '张一三',
-          val: '进行中',
-          status: '1'
-        }
-      ]
+      courseList: []
     };
   },
   created() {
+    this.search();
     updateWordPack({
       word_key_list: ['Learn_New_Courses']
     });
   },
   methods: {
-    click(status, index) {
-      this.isStatus = status;
-      this.background = index;
+    selectTab(status, i) {
+      this.status = status;
+      this.curTab = i;
+      this.search();
     },
-    addCourse() {
-      this.$router.push('/add_course');
+    search() {
+      const queryCriteria = {
+        finish_status: this.status,
+        page_capacity: 200,
+        cur_page: 1
+      };
+      pageQueryMyCourseList(queryCriteria).then(response => {
+        this.courseList = response.course_list;
+      });
     }
   }
 };
@@ -204,6 +157,10 @@ $main-w: 953px;
     width: $main-w;
     line-height: 40px;
     margin: 25px auto 15px;
+
+    .add-course {
+      @extend .bg-color;
+    }
   }
 
   .bg-color {
@@ -218,16 +175,14 @@ $main-w: 953px;
     }
   }
 
-  .sort {
-    margin-top: 30px;
-    &-body {
-      margin-left: 20px;
-    }
+  .sort-body {
+    margin-left: 20px;
+    cursor: pointer;
   }
 
-  &-foot {
+  &-item {
     .circulation {
-      margin: 0 auto 15px;
+      margin: 0 auto 10px;
       width: $main-w;
       height: 92px;
       background-color: #eee;
@@ -237,11 +192,14 @@ $main-w: 953px;
       display: flex;
       justify-content: space-between;
     }
+    .date-horizontal-bar {
+      margin: 0 15px;
+    }
     &-create {
-      padding: 20px 0 0;
+      padding-top: 20px;
     }
-    &-on-class {
-      margin-left: 20px;
+    &-teacher {
+      margin-left: 40px;
     }
   }
 }