feat:处理创建直播页和编辑直播页

76ea84eb · zhangleyuan · 9bf68b4b · 76ea84eb · 76ea84eb · 76ea84eb
Commit 76ea84eb authored Dec 11, 2020 by zhangleyuan
12 changed files
--- a/src/common/less/icon-font.less
+++ b/src/common/less/icon-font.less
 @font-face {
  font-family: 'iconfont';  /* project id 2223403 */
-  src: url('//at.alicdn.com/t/font_2223403_13iutf1by4j8.eot');
+  src: url('//at.alicdn.com/t/font_2223403_yeyjxe4w6a.eot');
-  src: url('//at.alicdn.com/t/font_2223403_13iutf1by4j8.eot?#iefix') format('embedded-opentype'),
+  src: url('//at.alicdn.com/t/font_2223403_yeyjxe4w6a.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_2223403_13iutf1by4j8.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_2223403_yeyjxe4w6a.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_2223403_13iutf1by4j8.woff') format('woff'),
+  url('//at.alicdn.com/t/font_2223403_yeyjxe4w6a.woff') format('woff'),
-  url('//at.alicdn.com/t/font_2223403_13iutf1by4j8.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_2223403_yeyjxe4w6a.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_2223403_13iutf1by4j8.svg#iconfont') format('svg');
+  url('//at.alicdn.com/t/font_2223403_yeyjxe4w6a.svg#iconfont') format('svg');
 }
 .iconfont{
  font-family:"iconfont" !important;

--- a/src/domains/basic-domain/constants.ts
+++ b/src/domains/basic-domain/constants.ts
 /*
 * @Author: 陈剑宇
 * @Date: 2020-05-07 14:43:01
- * @LastEditTime: 2020-12-01 11:03:11
+ * @LastEditTime: 2020-12-11 15:12:08
- * @LastEditors: wufan
+ * @LastEditors: zhangleyuan
 * @Description: 
 * @FilePath: /wheat-web-demo/src/domains/basic-domain/constants.ts
 */

--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
 * @Author: 吴文洁
 * @Date: 2020-08-24 12:20:57
 * @LastEditors: zhangleyuan
- * @LastEditTime: 2020-12-08 19:24:27
+ * @LastEditTime: 2020-12-11 17:44:15
 * @Description: 
 * @Copyright: 杭州杰竞科技有限公司 版权所有
 -->
@@ -25,7 +25,7 @@
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_13iutf1by4j8.css">
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_yeyjxe4w6a.css">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.

--- a/src/modules/common/TeacherSearchSelect.jsx
+++ b/src/modules/common/TeacherSearchSelect.jsx
@@ -199,7 +199,7 @@ class TeacherSearchSelect extends React.Component {
    let data = _.filter(this.state.dataSet, item => item.name);
    data = _.uniq(data, item => item.teacherId);
    return (
-      <div className={classNames("common-select staticSelect teacher-search-select", { 'common-select-active': this.state.visible })} style={this.props.style}>
+      <div className={("common-select staticSelect teacher-search-select")} style={this.props.style}>
        {
          !!this.props.label && <div className='label'> {this.props.label}:</div>
        }
@@ -265,7 +265,6 @@ class TeacherSearchSelect extends React.Component {
 }
 TeacherSearchSelect.propTypes = {};
 TeacherSearchSelect.defaultProps = {
  onSelect: () => { },
  name: '选择老师',

--- a/src/modules/common/TeacherSearchSelect.less
+++ b/src/modules/common/TeacherSearchSelect.less
 .teacher-search-select {
  .common-select-menu{
+    .label{
+      display:inline-block;
+    }
    .teacher-name, .subject-name {
      width:150px;
      overflow:hidden; 

--- a/src/modules/course-manage/AddLive.jsx
+++ b/src/modules/course-manage/AddLive.jsx
@@ -613,6 +613,7 @@ class AddLive extends React.Component {
      })
    } else {
      // 直接返回
      window.RCHistory.goBack();
    }
  }

--- a/src/modules/course-manage/components/LiveCourseFilter.jsx
+++ b/src/modules/course-manage/components/LiveCourseFilter.jsx
@@ -8,7 +8,7 @@
 import React from 'react';
 import { withRouter } from 'react-router-dom';
-import { Row, Input, Select } from 'antd';
+import { Row,Col, Input, Select ,Tooltip} from 'antd';
 import Bus from '@/core/bus';
 import TeacherSearchSelect from "@/modules/common/TeacherSearchSelect";
@@ -23,7 +23,8 @@ const defaultQuery = {
  courseName: null,
  startTime: null,
  teacherName: null,
-  courseState: undefined,
+  courseState: null,
+  shelfState:null,
 }
 class LiveCourseFilter extends React.Component {
@@ -31,7 +32,8 @@ class LiveCourseFilter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
-      query: {...defaultQuery}
+      query: {...defaultQuery},
+      expandFilter:false
    }
  }
@@ -112,14 +114,17 @@ class LiveCourseFilter extends React.Component {
  render() {
    const {
      courseName, startTime, endTime,
-      courseState, teacherName, teacherId
+      courseState, teacherName, teacherId,
+      shelfState
    } = this.state.query;
+    const {expandFilter} = this.state;
    const { teacherId: _teahcerId } = {};
    const isTeacher = !!_teahcerId;    // 判断是否是老师身份
    return (
      <div className="live-course-filter">
        <Row type="flex" justify="space-between" align="top">
            <div className="search-condition">
              <div className="search-condition__item">
                <span className="search-name">直播名称：</span>
@@ -131,7 +136,6 @@ class LiveCourseFilter extends React.Component {
                  style={{ width: "calc(100% - 70px)" }}
                />
              </div>
              <div className="search-condition__item">
                <span className="search-date">上课日期：</span>
                <RangePicker
@@ -149,7 +153,7 @@ class LiveCourseFilter extends React.Component {
                  <TeacherSearchSelect
                    id="teacher_select"
                    ref="TeacherSelect"
-                  label="上课老师"
+                    label="讲师"
                    placeholder="请选择"
                    teacherName={teacherName}
                    onSelect={this.handleSelectTeacher}
@@ -157,6 +161,7 @@ class LiveCourseFilter extends React.Component {
                  />
                </div>
              }
+              { expandFilter &&
                <div className="search-condition__item">
                  <span className="select-status">上课状态：</span>
                  <Select
@@ -172,14 +177,30 @@ class LiveCourseFilter extends React.Component {
                    <Option value="EXPIRED">未成功开课</Option>
                  </Select>
                </div>
+              }
+              { expandFilter &&
+                <div className="search-condition__item">
+                  <span className="shelf-status">上架状态：</span>
+                  <Select
+                    style={{ width: "calc(100% - 70px)" }}
+                    placeholder="请选择"
+                    allowClear={true}
+                    value={shelfState}
+                    onChange={(value) => { this.handleChangeQuery('shelfState', value) }}
+                  >
+                    <Option value="UN_START">上架中</Option>
+                    <Option value="STARTING">未上架</Option>
+                  </Select>
+                </div>
+              }
            </div>  
-          <span
+          <div className="reset-fold-area">
-            className="icon iconfont"
+            <Tooltip title="清空筛选"><span className="resetBtn iconfont icon" onClick={this.handleReset}>&#xe61b; </span></Tooltip>
-            onClick={this.handleReset}
+            <span style={{ cursor: 'pointer' }} className="fold-btn" onClick={() => {
-          >
+              this.setState({expandFilter:!expandFilter});
-            &#xe6a3;
+            }}>{this.state.expandFilter ? <span><span>收起</span><span className="iconfont icon fold-icon" >&#xe82d; </span> </span> : <span>展开<span className="iconfont icon fold-icon" >&#xe835; </span></span>}</span>
-          </span>
+         </div>
        </Row>
      </div>
    )

--- a/src/modules/course-manage/components/LiveCourseFilter.less
+++ b/src/modules/course-manage/components/LiveCourseFilter.less
@@ -2,7 +2,7 @@
  position: relative;
  .search-condition {
-    width: 100%;
+    width: calc(100% - 80px);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
@@ -13,8 +13,22 @@
      margin-bottom: 12px;
    }
  }
-  .iconfont {
+  .reset-fold-area {
    position: absolute;
    right: 12px;
  }
+  .resetBtn{
+    color:#999999;
+    font-size:18px;
+    margin-right:8px;
+  }
+  .fold-btn{
+    font-size: 14px;
+    color: #666666;
+    line-height: 20px;
+    .fold-icon{
+      font-size: 12px;
+    }
+  }
 }
\ No newline at end of file
--- a/src/modules/course-manage/components/LiveCourseList.jsx
+++ b/src/modules/course-manage/components/LiveCourseList.jsx
@@ -7,7 +7,7 @@
 */
 import React from 'react';
-import { Table, Modal, Tooltip, Badge, message, Dropdown, Button } from 'antd';
+import { Table, Modal, Tooltip, Badge, message, Dropdown, Button,Switch} from 'antd';
 // import Bus from '@/core/bus';
 // import User from "@/core/user";
@@ -27,7 +27,8 @@ import { PageControl } from "@/components";
 // import SelectStudent from '../modal/select-student';
 import './LiveCourseList.less';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+const { confirm } = Modal;
 const courseStateShow = {
  UN_START: {
    code: 1,
@@ -99,62 +100,50 @@ class LiveCourseList extends React.Component {
    );
    const columns = [
      {
-        title: "课程名称",
+        title: "直播课",
        width: "20%",
-        key: "courseName",
+        key: "course",
        dataIndex: "courseName",
        render: (val, record) => {
          return (
            <div className="record__item">
              <img className="course-cover" src={'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'} />
-              <span className="course-name">课程名称</span>
+              <div>
+                 <div className="course-name">课程名称</div>
+                 <div>
+                    <span className="course-time">2020-11-09 10:00~11:00</span>
+                    <span>待开课</span>
+                 </div>
+                 <div>
+                    <span>讲师：吴帆</span>
+                    <span> | </span>
+                    <span>助教：周晓</span>
+                 </div>
+              </div>
            </div>
          )
        }
      },
      {
-        title: "上课时间",
+        title: "课程分类",
        width: "10%",
-        key: "classTime",
+        key: "couseCatalog",
-        dataIndex: "classTime",
+        dataIndex: "couseCatalog",
-        render: (val, item) => {
-          return `${formatDate("YYYY-MM-DD H:i",parseInt(item.startTime))}~${formatDate("H:i", parseInt(item.endTime))}`
-        },
-      },
-      {
-        title: "上课老师",
-        width: "8%",
-        key: "nickname",
-        dataIndex: "nickname",
-      },
-      {
-        title: '学员管理',
-        width: "9%",
-        key: "quota",
-        dataIndex: "quota",
        render: (val, item) => {
          return (
-            <span
+            <div>一阶培训</div>
-              className="operate-text"
+          )
-            >
-             3人
-            </span>
-          );
        },
      },
      {
        title: "课件管理",
-        width: "7%",
+        width: "8%",
+        key: "courseware",
        dataIndex: "courseware",
-        render: (val, item, index) => {
+        render: (val, item) => {
          return (
-            <span
+            <span>2个</span>
-              className="operate-text"
+          );
-            >
-              2个
-            </span>
-          ) 
        },
      },
      {
@@ -164,30 +153,20 @@ class LiveCourseList extends React.Component {
        dataIndex: "quota",
        render: (val, item) => {
          return (
-            <span
+            <span className="iconfont icon"  onClick={() => {
-              className="operate-text"
-              onClick={() => {
              this.handleLinkToClassData(item)
-              }}
+            }}>&#xe7d6; </span>
-            >
-              {`${val}人`}
-            </span>
          );
-        }
+        },
      },
      {
-        title: "上课状态",
+        title: "上架状态",
-        width: "10%",
+        width: "7%",
-        key: "courseState",
+        dataIndex: "courseware",
-        dataIndex: "courseState",
+        render: (val, item, index) => {
-        render: (val, item) => {
          return  (
-            <div className="course-status">
+            <Switch defaultChecked  />
-              <Badge
+          ) 
-                className="badge"
-              />
-            </div>
-          );
        },
      },
      {
@@ -217,7 +196,7 @@ class LiveCourseList extends React.Component {
                </div>
              <span key="split1" className="operate__item split"> | </span>
              <div className="big-live">
-                <Dropdown>
+                <Dropdown overlay={this.renderMoreOperate(item)}>
                  <span className="more-operate">
                    <span className="operate-text">更多</span>
                    <span
@@ -242,40 +221,38 @@ class LiveCourseList extends React.Component {
      <div className="live-course-more-menu">
          <div
            className="operate__item"
-          >群发通知</div>
+            onClick={this.toEditCoursePage(item)}
-          <div
-            className="operate__item"
          >编辑</div>
          <div
            className="operate__item"
+            onClick={this.handleDelete}
          >删除</div>
      </div>
    )
  }
+  handleDelete = (record)=>{
-  // 显示添加学员的更多操作
+    return  confirm({
-  renderAddStuOverLay = (item) => {
+      title: '你确定要删除直播课',
-    return (
+      content: '删除后，用户将不能观看直播课/回放',
-      <div className="live-course-more-menu">
+      icon: <QuestionCircleOutlined />,
-        <div
+      okText: '删除',
-          className="operate__item"
+      okType: 'danger',
-        >
+      cancelText: '取消',
-          添加扣课时的学员
+      onOk: () => {
-        </div>
+        this.deleteConfirm(item);
-        <div
+      }
-          className="operate__item"
+    })
-        >
+  }
-          添加不扣课时的学员
+  deleteConfirm  = (item)=>{
-        </div>
+    message.success("已删除");
-      </div>
+  }
-    )
+  toEditCoursePage =(item)=>{
+    // window.RCHistory.push({
+    //   pathname: '/create-live-course?type=edit',
+    // })
  }
  render() {
    const { total, query, courseList, loading} = this.props;
-    console.log("courseList",courseList);
    const { current, size } = query;
    const { columns} = this.state;

--- a/src/modules/course-manage/components/LiveCourseOpt.jsx
+++ b/src/modules/course-manage/components/LiveCourseOpt.jsx
@@ -13,6 +13,11 @@ class LiveCourseOpt extends React.Component {
  constructor(props) {
    super(props);
  }
+  handleCreateLiveCouese = ()=>{
+    window.RCHistory.push({
+      pathname: '/create-live-course?type=add',
+    })
+  }
  render() {
    return (
      <div className="live-course-opt">

--- a/src/modules/root/Login.jsx
+++ b/src/modules/root/Login.jsx
@@ -95,8 +95,8 @@ function Login(props) {
        User.setUserId(res.result.userId);
        User.setToken(res.result.xmToken);
        window.RCHistory.push({
-          pathname: `/
+          pathname: `/personal-info`,
-          personal-info`,
        })
      }
    })

--- a/src/routes/config/mainRoutes.tsx
+++ b/src/routes/config/mainRoutes.tsx
 /*
 * @Author: 吴文洁
 * @Date: 2020-04-29 10:26:32
- * @LastEditors: wufan
+ * @LastEditors: zhangleyuan
- * @LastEditTime: 2020-12-11 17:48:07
+ * @LastEditTime: 2020-12-11 19:10:35
 * @Description: 内容线路由配置
 */
 import EmployeesManagePage from '@/modules/store-manege/EmployeesManagePage';
@@ -48,7 +48,7 @@ const mainRoutes = [
 		name: '课程管理'
  },
  {
-    path: '/add-live-course',
+    path: '/create-live-course',
 		component:AddLivePage,
 		name: '创建直播课'
  },