Skip to content

X
xiaomai-cloud-class-web
Commit 76ea84eb by zhangleyuan
Options

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

parent 9bf68b4b
Showing with 184 additions and 163 deletions
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_13iutf1by4j8.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2223403_13iutf1by4j8.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2223403_13iutf1by4j8.woff') format('woff'),
url('//at.alicdn.com/t/font_2223403_13iutf1by4j8.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2223403_13iutf1by4j8.svg#iconfont') format('svg');
src: url('//at.alicdn.com/t/font_2223403_yeyjxe4w6a.eot');
src: url('//at.alicdn.com/t/font_2223403_yeyjxe4w6a.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2223403_yeyjxe4w6a.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2223403_yeyjxe4w6a.woff') format('woff'),
url('//at.alicdn.com/t/font_2223403_yeyjxe4w6a.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2223403_yeyjxe4w6a.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
......
src/domains/basic-domain/constants.ts
/*
* @Author: 陈剑宇
* @Date: 2020-05-07 14:43:01
* @LastEditTime: 2020-12-01 11:03:11
* @LastEditors: wufan
* @LastEditTime: 2020-12-11 15:12:08
* @LastEditors: zhangleyuan
* @Description:
* @FilePath: /wheat-web-demo/src/domains/basic-domain/constants.ts
*/
......
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.
......
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: '选择老师',
......
src/modules/common/TeacherSearchSelect.less
.teacher-search-select {
.common-select-menu{
.label{
display:inline-block;
}
.teacher-name, .subject-name {
width:150px;
overflow:hidden;
......
src/modules/course-manage/AddLive.jsx
......@@ -613,6 +613,7 @@ class AddLive extends React.Component {
})
} else {
// 直接返回
window.RCHistory.goBack();
}
}
......
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,74 +114,93 @@ 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>
<Search
value={courseName}
placeholder="搜索直播名称"
onChange={(e) => { this.handleChangeQuery('courseName', e.target.value)}}
onSearch={ () => { this.props.onChange(this.state.query) } }
style={{ width: "calc(100% - 70px)" }}
/>
</div>
<div className="search-condition__item">
<span className="search-date">上课日期：</span>
<RangePicker
id="course_date_picker"
allowClear={false}
value={ startTime ? [moment(startTime), moment(endTime)] : null }
format={"YYYY-MM-DD"}
onChange={(dates) => { this.handleChangeDates(dates) }}
style={{ width: "calc(100% - 70px)" }}
/>
</div>
{!isTeacher &&
<div className="search-condition">
<div className="search-condition__item">
<TeacherSearchSelect
id="teacher_select"
ref="TeacherSelect"
label="上课老师"
placeholder="请选择"
teacherName={teacherName}
onSelect={this.handleSelectTeacher}
defaultValue={teacherId}
<span className="search-name">直播名称：</span>
<Search
value={courseName}
placeholder="搜索直播名称"
onChange={(e) => { this.handleChangeQuery('courseName', e.target.value)}}
onSearch={ () => { this.props.onChange(this.state.query) } }
style={{ width: "calc(100% - 70px)" }}
/>
</div>
}
<div className="search-condition__item">
<span className="select-status">上课状态：</span>
<Select
style={{ width: "calc(100% - 70px)" }}
placeholder="请选择"
allowClear={true}
value={courseState}
onChange={(value) => { this.handleChangeQuery('courseState', value) }}
>
<Option value="UN_START">待上课</Option>
<Option value="STARTING">上课中</Option>
<Option value="FINISH">已完成</Option>
<Option value="EXPIRED">未成功开课</Option>
</Select>
</div>
</div>
<span
className="icon iconfont"
onClick={this.handleReset}
>
&#xe6a3;
</span>
<div className="search-condition__item">
<span className="search-date">上课日期：</span>
<RangePicker
id="course_date_picker"
allowClear={false}
value={ startTime ? [moment(startTime), moment(endTime)] : null }
format={"YYYY-MM-DD"}
onChange={(dates) => { this.handleChangeDates(dates) }}
style={{ width: "calc(100% - 70px)" }}
/>
</div>
{!isTeacher &&
<div className="search-condition__item">
<TeacherSearchSelect
id="teacher_select"
ref="TeacherSelect"
label="讲师"
placeholder="请选择"
teacherName={teacherName}
onSelect={this.handleSelectTeacher}
defaultValue={teacherId}
/>
</div>
}
{ expandFilter &&
<div className="search-condition__item">
<span className="select-status">上课状态：</span>
<Select
style={{ width: "calc(100% - 70px)" }}
placeholder="请选择"
allowClear={true}
value={courseState}
onChange={(value) => { this.handleChangeQuery('courseState', value) }}
>
<Option value="UN_START">待上课</Option>
<Option value="STARTING">上课中</Option>
<Option value="FINISH">已完成</Option>
<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>
<div className="reset-fold-area">
<Tooltip title="清空筛选"><span className="resetBtn iconfont icon" onClick={this.handleReset}>&#xe61b; </span></Tooltip>
<span style={{ cursor: 'pointer' }} className="fold-btn" onClick={() => {
this.setState({expandFilter:!expandFilter});
}}>{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>
</div>
</Row>
</div>
)
......
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
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,98 +100,76 @@ 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",
dataIndex: "classTime",
key: "couseCatalog",
dataIndex: "couseCatalog",
render: (val, item) => {
return `${formatDate("YYYY-MM-DD H:i",parseInt(item.startTime))}~${formatDate("H:i", parseInt(item.endTime))}`
return (
<div>一阶培训</div>
)
},
},
{
title: "上课老师",
title: "课件管理",
width: "8%",
key: "nickname",
dataIndex: "nickname",
key: "courseware",
dataIndex: "courseware",
render: (val, item) => {
return (
<span>2个</span>
);
},
},
{
title: '学员管理',
title: '上课数据',
width: "9%",
key: "quota",
dataIndex: "quota",
render: (val, item) => {
return (
<span
className="operate-text"
>
3人
</span>
<span className="iconfont icon" onClick={() => {
this.handleLinkToClassData(item)
}}>&#xe7d6; </span>
);
},
},
{
title: "课件管理",
title: "上架状态",
width: "7%",
dataIndex: "courseware",
render: (val, item, index) => {
return (
<span
className="operate-text"
>
2个
</span>
<Switch defaultChecked />
)
},
},
{
title: '上课数据',
width: "9%",
key: "quota",
dataIndex: "quota",
render: (val, item) => {
return (
<span
className="operate-text"
onClick={() => {
this.handleLinkToClassData(item)
}}
>
{`${val}人`}
</span>
);
}
},
{
title: "上课状态",
width: "10%",
key: "courseState",
dataIndex: "courseState",
render: (val, item) => {
return (
<div className="course-status">
<Badge
className="badge"
/>
</div>
);
},
},
{
title: "操作",
width: "20%",
key: "operate",
......@@ -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
......@@ -241,41 +220,39 @@ class LiveCourseList extends React.Component {
return (
<div className="live-course-more-menu">
<div
className="operate__item"
>群发通知</div>
<div
className="operate__item"
onClick={this.toEditCoursePage(item)}
>编辑</div>
<div
className="operate__item"
onClick={this.handleDelete}
>删除</div>
</div>
)
}
// 显示添加学员的更多操作
renderAddStuOverLay = (item) => {
return (
<div className="live-course-more-menu">
<div
className="operate__item"
>
添加扣课时的学员
</div>
<div
className="operate__item"
>
添加不扣课时的学员
</div>
</div>
)
handleDelete = (record)=>{
return confirm({
title: '你确定要删除直播课',
content: '删除后，用户将不能观看直播课/回放',
icon: <QuestionCircleOutlined />,
okText: '删除',
okType: 'danger',
cancelText: '取消',
onOk: () => {
this.deleteConfirm(item);
}
})
}
deleteConfirm = (item)=>{
message.success("已删除");
}
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;
......
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">
......
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: `/
personal-info`,
pathname: `/personal-info`,
})
}
})
......
src/routes/config/mainRoutes.tsx
/*
* @Author: 吴文洁
* @Date: 2020-04-29 10:26:32
* @LastEditors: wufan
* @LastEditTime: 2020-12-11 17:48:07
* @LastEditors: zhangleyuan
* @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: '创建直播课'
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment