更新UI样式

src/api/table.js

@@ -1,11 +1,11 @@
 import { request, getRequestParameter } from '@/utils/request';
 
 /**
- * @description 教师得到自己一天的课次
+ * @description 教师得到自己一天的任务
  * @param {Object} { date_stamp } 格式化后的时间 yyy-mm-dd
  */
-export function getMyCsItemsDateTeacher(Parameter) {
-  let params = getRequestParameter('teaching-cs_item_manager-GetMyCSItems_Date_Teacher', Parameter);
+export function getMyTaskListDateTeacher(Parameter) {
+  let params = getRequestParameter('teaching-task_manager-GetMyTaskList_Date_Teacher', Parameter);
 
   return request({
     method: 'post',
@@ -29,7 +29,7 @@ export function getCSItemInfoBox(Parameter) {
 }
 
 /**
- * @description 获得课程管理
+ * @description 分页查询我的课程列表
  * @param {Object} Parameter finish_status 完成状态 page_capacity 每页容量 cur_page 当前页码
  * @returns
  */

src/icons/svg/create.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.5 5V3.5C9.5 2.94771 9.9477 2.5 10.5 2.5H20.5C21.0523 2.5 21.5 2.94771 21.5 3.5V14.5C21.5 15.0523 21.0523 15.5 20.5 15.5H18.5" stroke="#2C2C2C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.5 9H3.5C2.94772 9 2.5 9.44772 2.5 10V20C2.5 20.5523 2.94772 21 3.5 21H13.5C14.0523 21 14.5 20.5523 14.5 20V10C14.5 9.44772 14.0523 9 13.5 9Z" stroke="#2C2C2C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.5 12.5V17.5" stroke="#2C2C2C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 15H11" stroke="#2C2C2C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/icons/svg/homepage.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 0H0V24H24V0Z" fill="white" fill-opacity="0.01"/>
+<path d="M4.5 21V9L2 11L12 3L22 11L19.5 9V21H4.5Z" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.5 14.5V21H14.5V14.5H9.5Z" stroke="#333333" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M4.5 21H19.5" stroke="#333333" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

src/layouts/components/BreadCrumb.vue

@@ -1,22 +1,41 @@
 <template>
   <div v-show="isShow" class="breadcrumb">
-    <div class="breadcrumb-container">fsadfsa</div>
+    <div class="breadcrumb-container">
+      <svg-icon icon-class="homepage" /><i class="el-icon-arrow-right" />
+      <span v-for="item in routerList" :key="item.path">
+        <span class="router-title"> {{ item.meta.title }} </span>
+        <i class="el-icon-arrow-right" />
+      </span>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   name: 'BreadCrumb',
-  props: {
-    isShow: {
-      default: false,
-      type: Boolean
+  data() {
+    return {
+      routerList: []
+    };
+  },
+  computed: {
+    isShow() {
+      return this.routerList.length > 0;
     }
   },
   watch: {
-    $router: {}
+    $route() {
+      this.getBreadcrumb();
+    }
   },
-  methods: {}
+  created() {
+    this.getBreadcrumb();
+  },
+  methods: {
+    getBreadcrumb() {
+      this.routerList = this.$route.matched.filter(item => item.meta && item.meta.title);
+    }
+  }
 };
 </script>
 
@@ -26,10 +45,43 @@ export default {
   height: 56px;
   line-height: 56px;
   background-color: #f6ecdd;
+
   &-container {
     width: $basicWidth;
+    height: 100%;
     min-width: $basicWidth;
     margin: 0 auto;
+    padding: 15px 0;
+    font-weight: 700;
+    line-height: 26px;
+    color: #948e85;
+    vertical-align: middle;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 6px;
+      height: 100%;
+      vertical-align: bottom;
+      margin-right: 24px;
+      background-color: $buttonColor;
+    }
+
+    .el-icon-arrow-right {
+      margin: 0 12px;
+    }
+
+    .router-title {
+      cursor: pointer;
+    }
+
+    span:last-child {
+      color: #000;
+
+      .el-icon-arrow-right {
+        display: none;
+      }
+    }
   }
 }
 </style>

src/layouts/components/LayoutHeader.vue

@@ -7,8 +7,8 @@
         <span class="menu">
           <el-dropdown placement="top">
             <span class="el-dropdown-link">
-              <span class="el-dropdown-current-name">{{ curDropdown }}</span
-              ><i class="el-icon-arrow-down el-icon--right"></i>
+              <span class="el-dropdown-current-name">{{ curDropdown }}</span>
+              <i class="el-icon-arrow-down el-icon--right"></i>
             </span>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item v-for="item in dropdownList" :key="item.id">
@@ -33,7 +33,7 @@
               </el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown> -->
-        <el-input prefix-icon="el-icon-search" placeholder="输入关键字搜索" />
+        <!-- <el-input prefix-icon="el-icon-search" placeholder="输入关键字搜索" /> -->
         <el-avatar icon="el-icon-user" />
         <el-dropdown class="header-container-right-name" placement="bottom">
           <span>NAME</span>

src/layouts/index.vue

@@ -2,7 +2,7 @@
   <div class="app">
     <div class="app-top">
       <layout-header :user-type="userType" />
-      <bread-crumb :is-show="isShow" />
+      <bread-crumb />
     </div>
     <section class="app-main">
       <transition name="fade-transfrom" mode="out-in">
@@ -22,11 +22,6 @@ export default {
     LayoutHeader,
     BreadCrumb
   },
-  data() {
-    return {
-      isShow: false
-    };
-  },
   computed: {
     key() {
       return this.$route.path;

src/router/index.js

@@ -27,6 +27,31 @@ const routes = [
       }
     ]
   },
+  // 创建课程
+  {
+    path: '/create_course',
+    component: Layout,
+    redirect: '/create_course/index',
+    meta: { title: '课程列表' },
+    children: [
+      {
+        path: '/create_course/index',
+        component: () => import('@/views/teacher/create_course/index'),
+        meta: { title: '创建课程' }
+      }
+    ]
+  },
+  {
+    path: '/create_course_step_table',
+    component: Layout,
+    redirect: '/create_course_step_table/course_info',
+    children: [
+      {
+        path: '/create_course_step_table/course_info',
+        component: () => import('@/views/teacher/create_course/step_table/CourseInfo')
+      }
+    ]
+  },
   {
     path: '/cs_item_detail',
     component: Layout,

src/styles/mixin.scss

@@ -11,3 +11,40 @@
   border-radius: 20px;
   padding: 0 20px;
 }
+
+@mixin list {
+  width: 100%;
+  min-height: calc(100vh - 446px);
+  border-radius: 8px;
+  margin-top: 24px;
+  background-color: #fff;
+
+  &-title {
+    height: 78px;
+    line-height: 78px;
+    padding: 0 30px;
+    border-bottom: 1px solid #d9d9d9;
+  }
+
+  .el-table {
+    width: 100%;
+
+    &__header th:first-child,
+    &__body .el-table__row > td:first-child {
+      padding-left: 20px;
+      font-weight: 700;
+    }
+  }
+}
+
+@mixin pagination {
+  .el-pagination {
+    margin-top: 24px;
+
+    &.is-background .btn-next,
+    &.is-background .btn-prev,
+    &.is-background .el-pager li {
+      background-color: #fff;
+    }
+  }
+}

src/utils/index.js

@@ -9,3 +9,33 @@ export function formatDate(date) {
   }
   return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
 }
+
+/**
+ * @param {Object} time
+ * @param {string} cFormat
+ * @returns {string | null}
+ */
+export function parseTime(time, cFormat) {
+  if (arguments.length === 0 || !time) {
+    return null;
+  }
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}';
+  const formatObj = {
+    y: time.getFullYear(),
+    m: time.getMonth() + 1,
+    d: time.getDate(),
+    h: time.getHours(),
+    i: time.getMinutes(),
+    s: time.getSeconds(),
+    a: time.getDay()
+  };
+  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
+    const value = formatObj[key];
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') {
+      return ['日', '一', '二', '三', '四', '五', '六'][value];
+    }
+    return value.toString().padStart(2, '0');
+  });
+  return time_str;
+}

src/views/teacher/create_course/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="create-course">
+    <div class="create-course-title">创建课程</div>
+    <div class="create-course-container">
+      <div class="create template">
+        <div class="click">
+          <div class="plus"></div>
+        </div>
+        <div class="name">模板库</div>
+      </div>
+      <div class="create build">
+        <div class="click" @click="$router.push('/create_course_step_table')">
+          <div class="plus"></div>
+        </div>
+        <div class="name">新建</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CreateCourse'
+};
+</script>
+
+<style lang="scss">
+@import '~@/styles/mixin';
+
+.create-course {
+  @include container;
+
+  padding-top: 88px;
+
+  &-title {
+    width: 100%;
+    text-align: center;
+    font-size: 24px;
+    font-weight: 700;
+  }
+
+  &-container {
+    display: flex;
+    justify-content: space-evenly;
+    margin-top: 56px;
+
+    .template > .click {
+      background-color: #68cefa;
+    }
+
+    .build > .click {
+      background-color: #5af0e7;
+    }
+
+    .create {
+      width: 400px;
+      height: 300px;
+      border: 1px solid #ccc;
+      border-radius: 8px;
+
+      .click {
+        height: 236px;
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+        cursor: pointer;
+
+        .plus {
+          position: absolute;
+
+          &::before {
+            content: '';
+            display: inline-block;
+            width: 28px;
+            height: 3px;
+            background-color: #fff;
+            margin: 0 auto;
+            position: relative;
+            top: 117px;
+            left: 185px;
+          }
+
+          &::after {
+            @extend ::before;
+
+            transform: translateX(-28px) rotateZ(90deg);
+          }
+        }
+      }
+
+      .name {
+        height: 64px;
+        line-height: 64px;
+        font-size: 20px;
+        font-weight: 700;
+        text-align: center;
+      }
+    }
+  }
+}
+</style>

src/views/teacher/create_course/step_table/CourseInfo.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="course-info">
+    <div class="step"></div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.course-info {
+  .step {
+    position: fixed;
+    top: $header-h + 1px;
+    width: 100%;
+    height: 156px;
+    background-color: #fff;
+  }
+}
+</style>

src/views/teacher/main/CurriculaList.vue

@@ -1,53 +1,52 @@
 <template>
-  <div class="curricula-manager">
-    <div class="curricula-manager-header">
-      <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, i) in statusList"
-          :key="i"
-          :class="['bg-color', { active: curTab === i }]"
-          @click="selectTab(item.status, i)"
-        >
-          {{ item.val }}
-        </el-button>
+  <div class="curricula">
+    <div class="curricula-search">
+      <div class="curricula-search-condition">
+        <el-input v-model="search" prefix-icon="el-icon-search">
+          <el-button slot="append" @click="queryMyCourseList">搜索</el-button>
+        </el-input>
+        <el-select v-model="finish_status">
+          <el-option
+            v-for="item in statusList"
+            :key="item.value"
+            :label="item.name"
+            :value="item.value"
+          ></el-option>
+        </el-select>
       </div>
-      <div class="curricula-manager-body-sort">
-        <div>
-          <span>排序:</span>
-          <span v-for="item in sortList" :key="item.id" class="sort-body">
-            {{ item.name }}
-            <i class="el-icon-sort"></i>
-          </span>
-        </div>
-        <el-button class="add-course" @click="$router.push('/add_course')">
-          {{ $t('Learn_New_Courses') }}
-        </el-button>
+      <div class="curricula-search-button">
+        <el-button @click="queryMyCourseList">查询</el-button>
       </div>
     </div>
-    <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-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 class="curricula-container">
+      <div class="curricula-container-title">
+        <span>课程列表</span>
+        <div>
+          <el-button class="create" @click="$router.push('/create_course')">
+            <div><svg-icon icon-class="create" /><span>创建课程</span></div>
+          </el-button>
         </div>
       </div>
+      <div class="curricula-container-list">
+        <el-table :data="courseList">
+          <el-table-column prop="name" label="课程名称" width="240" />
+          <el-table-column prop="begin_date" label="课程周期" />
+        </el-table>
+      </div>
     </div>
+    <el-pagination
+      background
+      :page-sizes="[10, 20, 30, 40, 50]"
+      :page-size="page_capacity"
+      layout="prev, pager, next, total, sizes, jumper"
+      :total="total_count"
+      :current-page="cur_page"
+      @prev-click="changePage"
+      @next-click="changePage"
+      @current-change="changePage"
+      @size-change="changePageSize"
+    >
+    </el-pagination>
   </div>
 </template>
 
@@ -59,48 +58,22 @@ export default {
   name: 'CurriculaList',
   data() {
     return {
-      input: '',
-      curTab: 0,
-      status: '1',
-      sortList: [
-        {
-          id: '1',
-          name: '创建时间',
-          sortType: 'createTime', // 数组对象中的哪一个属性进行排序
-          order: false // 升序还是降序
-        },
-        {
-          id: '2',
-          name: '编辑时间',
-          sortType: 'editTime',
-          order: false
-        },
-        {
-          id: '3',
-          name: '开课时间',
-          sortType: 'onClassTime',
-          order: false
-        }
-      ],
+      search: '',
       statusList: [
-        {
-          status: '1',
-          val: '进行中'
-        },
-        {
-          status: '2',
-          val: '待开始'
-        },
-        {
-          status: '3',
-          val: '已结束'
-        }
+        { value: 1, name: '草稿' },
+        { value: 2, name: '未开始' },
+        { value: 3, name: '已结束' },
+        { value: 4, name: '进行中' }
       ],
+      finish_status: 1,
+      page_capacity: 10,
+      cur_page: 1,
+      total_count: 0,
       courseList: []
     };
   },
   created() {
-    this.search();
+    this.queryMyCourseList();
     updateWordPack({
       word_key_list: ['Learn_New_Courses']
     });
@@ -111,14 +84,23 @@ export default {
       this.curTab = i;
       this.search();
     },
-    search() {
+    changePage(newPage) {
+      this.cur_page = newPage;
+      this.queryMyCourseList();
+    },
+    changePageSize(pageSize) {
+      this.page_capacity = pageSize;
+      this.queryMyCourseList();
+    },
+    queryMyCourseList() {
       const queryCriteria = {
         finish_status: this.status,
-        page_capacity: 200,
-        cur_page: 1
+        page_capacity: this.page_capacity,
+        cur_page: this.cur_page
       };
-      pageQueryMyCourseList(queryCriteria).then(response => {
-        this.courseList = response.course_list;
+      pageQueryMyCourseList(queryCriteria).then(({ course_list, total_count }) => {
+        this.courseList = course_list;
+        this.total_count = total_count;
       });
     }
   }
@@ -126,85 +108,66 @@ export default {
 </script>
 
 <style lang="scss">
-$main-w: 953px;
-
-.curricula-manager {
-  &-header .el-input {
-    width: 244px;
-    height: 40px;
-    margin: 37px auto 0;
-    display: block;
-  }
-
-  &-body-button {
-    display: flex;
-    justify-content: center;
-    margin-top: 35px;
-    font-size: 16px;
+@import '~@/styles/mixin.scss';
 
-    .el-button {
-      width: 97px;
-      height: 52px;
-    }
-
-    .el-button + .el-button {
-      margin-left: 0;
-    }
-  }
+.curricula {
+  @include pagination;
 
-  &-body-sort {
+  &-search {
     display: flex;
     justify-content: space-between;
-    width: $main-w;
-    line-height: 40px;
-    margin: 25px auto 15px;
-
-    .add-course {
-      @extend .bg-color;
-    }
-  }
 
-  .bg-color {
-    background: #c4c4c4;
-    border: 1px solid #c4c4c4;
-    border-radius: 0;
-    color: #000;
+    &-condition {
+      > .el-input {
+        width: 528px;
+        margin-right: 12px;
+      }
 
-    &.active {
-      background: #e6e6e6;
-      border-color: #0c0c0c;
+      .el-select {
+        width: 225px;
+      }
     }
-  }
 
-  .sort-body {
-    margin-left: 20px;
-    cursor: pointer;
+    &-button {
+      .el-button {
+        background-color: $buttonColor;
+        color: #fff;
+        width: 114px;
+      }
+    }
   }
 
-  &-item {
-    .circulation {
-      margin: 0 auto 10px;
-      width: $main-w;
-      height: 92px;
-      background-color: #eee;
-      padding: 20px 20px 0;
-    }
+  &-container {
+    width: 100%;
+    min-height: calc(100vh - 325px);
+    margin-top: 16px;
+    background-color: #fff;
+    border-radius: 8px;
 
-    &-value {
+    &-title {
+      height: 88px;
+      padding: 24px 32px;
       display: flex;
       justify-content: space-between;
-    }
+      align-items: center;
 
-    .date-horizontal-bar {
-      margin: 0 15px;
-    }
+      > span {
+        font-size: 20px;
+        font-weight: 700;
+      }
+
+      .create {
+        width: 138px;
 
-    &-create {
-      padding-top: 20px;
+        div {
+          display: flex;
+          justify-content: space-around;
+        }
+      }
     }
 
-    &-teacher {
-      margin-left: 40px;
+    &-list {
+      @include list;
     }
   }
 }

src/views/teacher/main/TaskList.vue

@@ -15,45 +15,86 @@
     </div>
     <div class="task-container">
       <div class="task-container-title">
-        <svg-icon icon-class="clock" />
-        <span>时间轴</span>
-        <i class="el-icon-arrow-left" />
-        <i class="el-icon-arrow-right" />
+        <div class="task-container-title-left">
+          <svg-icon icon-class="clock" />
+          <span class="title">时间轴</span>
+          <span class="date">{{ dateTime }}</span>
+          <i class="el-icon-arrow-left" @click="dateSkip(-1)" />
+          <i class="el-icon-arrow-right" @click="dateSkip(1)" />
+        </div>
+        <div>
+          <el-select v-model="selected"></el-select>
+        </div>
+      </div>
+      <div class="task-container-main">
+        <div v-for="(item, i) in task_group_list" :key="i" class="task-group">
+          <div class="task-group-top">
+            <span class="task-group-top-time">{{ item.begin_time_view_text }}</span>
+            <span class="task-group-top-line"></span>
+          </div>
+          <div class="task-group-list">
+            <div v-for="list in item.task_list" :key="list.id" class="task-group-list-info">
+              <div class="task-group-list-info-name">
+                {{ timeType(list.time_type) }}任务：{{ list.name }}
+              </div>
+              <div class="task-group-list-info-item-name">{{ list.cs_item_name }}</div>
+              <div class="task-group-list-info-time">{{ list.time_space_view_txt }}</div>
+              <div></div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { getMyCsItemsDateTeacher } from '@/api/table';
-import { formatDate } from '@/utils';
+import { getMyTaskListDateTeacher } from '@/api/table';
+import { parseTime, formatDate } from '@/utils';
 
 export default {
   name: 'TaskList',
   data() {
     return {
       date: new Date(),
-      cs_item_list: {}
+      selected: '',
+      task_group_list: []
     };
   },
   computed: {
     dateTime: {
       get: function () {
-        return this.date;
+        return parseTime(this.date, '{m}-{d}');
       },
       set: function (newValue) {
         this.date = newValue;
-        this.getCSItemList();
+        this.getTaskList();
       }
     }
   },
   mounted() {
-    this.getCSItemList();
+    this.getTaskList();
   },
   methods: {
-    getCSItemList() {
-      getMyCsItemsDateTeacher({ date_stamp: formatDate(this.date) }).then(response => {
-        this.cs_item_list = response.cs_item_list;
+    timeType(type) {
+      switch (type) {
+        case 0:
+          return '课前';
+        case 1:
+          return '课中';
+        case 2:
+          return '课后';
+        default:
+          return '';
+      }
+    },
+    dateSkip(num) {
+      let day = 24 * 60 * 60 * 1000 * num;
+      this.date = new Date(this.date.getTime() + day);
+    },
+    getTaskList() {
+      getMyTaskListDateTeacher({ date_stamp: formatDate(this.date) }).then(response => {
+        this.task_group_list = response.task_group_list;
       });
     },
     // 跳转到讲次详情
@@ -103,12 +144,91 @@ export default {
   }
 
   &-container {
-    margin-top: 16px;
+    margin: 16px 0;
     border-radius: 8px;
     width: 100%;
     min-height: calc(100vh - 515px);
-    padding: 16px;
     background-color: #fff;
+
+    &-title {
+      display: flex;
+      justify-content: space-between;
+      padding: 16px;
+
+      &-left {
+        line-height: 40px;
+
+        .title {
+          margin-left: 8px;
+        }
+
+        .date {
+          margin-left: 24px;
+          color: #a6a6a6;
+          vertical-align: middle;
+        }
+
+        .el-icon-arrow-right {
+          cursor: pointer;
+        }
+
+        .el-icon-arrow-left {
+          @extend .el-icon-arrow-right;
+
+          margin: 0 26px 0 33px;
+        }
+      }
+    }
+
+    &-main {
+      margin: 0 24px 8px 40px;
+
+      .task-group {
+        margin-top: 8px;
+
+        &-top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          &-time {
+            color: #808080;
+          }
+
+          &-line {
+            width: calc(100% - 78px);
+            height: 1px;
+            background-color: #d9d9d9;
+          }
+        }
+
+        &-list {
+          margin-left: 78px;
+
+          &-info {
+            display: inline-block;
+            padding: 16px 24px;
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            margin-right: 15px;
+            background-color: #fff4e3;
+
+            > div {
+              margin: 8px 0;
+            }
+
+            &-item-name {
+              font-size: 14px;
+              color: #727280;
+            }
+
+            &-time {
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    }
   }
 }
 </style>