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-face {
font-family: 'iconfont'; /* project id 2223403 */ 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{ .iconfont{
font-family:"iconfont" !important; font-family:"iconfont" !important;
......
src/domains/basic-domain/constants.ts
/* /*
* @Author: 陈剑宇 * @Author: 陈剑宇
* @Date: 2020-05-07 14:43:01 * @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: * @Description:
* @FilePath: /wheat-web-demo/src/domains/basic-domain/constants.ts * @FilePath: /wheat-web-demo/src/domains/basic-domain/constants.ts
*/ */
......
src/index.html
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-24 12:20:57 * @Date: 2020-08-24 12:20:57
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-08 19:24:27 * @LastEditTime: 2020-12-11 17:44:15
* @Description: * @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
--> -->
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ 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="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. Notice the use of %PUBLIC_URL% in the tags above.
......
src/modules/common/TeacherSearchSelect.jsx
...@@ -199,7 +199,7 @@ class TeacherSearchSelect extends React.Component { ...@@ -199,7 +199,7 @@ class TeacherSearchSelect extends React.Component {
let data = _.filter(this.state.dataSet, item => item.name); let data = _.filter(this.state.dataSet, item => item.name);
data = _.uniq(data, item => item.teacherId); data = _.uniq(data, item => item.teacherId);
return ( 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> !!this.props.label && <div className='label'> {this.props.label}:</div>
} }
...@@ -265,7 +265,6 @@ class TeacherSearchSelect extends React.Component { ...@@ -265,7 +265,6 @@ class TeacherSearchSelect extends React.Component {
} }
TeacherSearchSelect.propTypes = {}; TeacherSearchSelect.propTypes = {};
TeacherSearchSelect.defaultProps = { TeacherSearchSelect.defaultProps = {
onSelect: () => { }, onSelect: () => { },
name: '选择老师', name: '选择老师',
......
src/modules/common/TeacherSearchSelect.less
.teacher-search-select { .teacher-search-select {
.common-select-menu{ .common-select-menu{
.label{
display:inline-block;
}
.teacher-name, .subject-name { .teacher-name, .subject-name {
width:150px; width:150px;
overflow:hidden; overflow:hidden;
......
src/modules/course-manage/AddLive.jsx
...@@ -613,6 +613,7 @@ class AddLive extends React.Component { ...@@ -613,6 +613,7 @@ class AddLive extends React.Component {
}) })
} else { } else {
// 直接返回 // 直接返回
window.RCHistory.goBack(); window.RCHistory.goBack();
} }
} }
......
src/modules/course-manage/components/LiveCourseFilter.jsx
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
import React from 'react'; import React from 'react';
import { withRouter } from 'react-router-dom'; 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 Bus from '@/core/bus';
import TeacherSearchSelect from "@/modules/common/TeacherSearchSelect"; import TeacherSearchSelect from "@/modules/common/TeacherSearchSelect";
...@@ -23,7 +23,8 @@ const defaultQuery = { ...@@ -23,7 +23,8 @@ const defaultQuery = {
courseName: null, courseName: null,
startTime: null, startTime: null,
teacherName: null, teacherName: null,
courseState: undefined, courseState: null,
shelfState:null,
} }
class LiveCourseFilter extends React.Component { class LiveCourseFilter extends React.Component {
...@@ -31,7 +32,8 @@ class LiveCourseFilter extends React.Component { ...@@ -31,7 +32,8 @@ class LiveCourseFilter extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
query: {...defaultQuery} query: {...defaultQuery},
expandFilter:false
} }
} }
...@@ -112,74 +114,93 @@ class LiveCourseFilter extends React.Component { ...@@ -112,74 +114,93 @@ class LiveCourseFilter extends React.Component {
render() { render() {
const { const {
courseName, startTime, endTime, courseName, startTime, endTime,
courseState, teacherName, teacherId courseState, teacherName, teacherId,
shelfState
} = this.state.query; } = this.state.query;
const {expandFilter} = this.state;
const { teacherId: _teahcerId } = {}; const { teacherId: _teahcerId } = {};
const isTeacher = !!_teahcerId; // 判断是否是老师身份 const isTeacher = !!_teahcerId; // 判断是否是老师身份
return ( return (
<div className="live-course-filter"> <div className="live-course-filter">
<Row type="flex" justify="space-between" align="top"> <Row type="flex" justify="space-between" align="top">
<div className="search-condition">
<div className="search-condition__item"> <div className="search-condition">
<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__item"> <div className="search-condition__item">
<TeacherSearchSelect <span className="search-name">直播名称：</span>
id="teacher_select" <Search
ref="TeacherSelect" value={courseName}
label="上课老师" placeholder="搜索直播名称"
placeholder="请选择" onChange={(e) => { this.handleChangeQuery('courseName', e.target.value)}}
teacherName={teacherName} onSearch={ () => { this.props.onChange(this.state.query) } }
onSelect={this.handleSelectTeacher} style={{ width: "calc(100% - 70px)" }}
defaultValue={teacherId}
/> />
</div> </div>
} <div className="search-condition__item">
<div className="search-condition__item"> <span className="search-date">上课日期：</span>
<span className="select-status">上课状态：</span> <RangePicker
<Select id="course_date_picker"
style={{ width: "calc(100% - 70px)" }} allowClear={false}
placeholder="请选择" value={ startTime ? [moment(startTime), moment(endTime)] : null }
allowClear={true} format={"YYYY-MM-DD"}
value={courseState} onChange={(dates) => { this.handleChangeDates(dates) }}
onChange={(value) => { this.handleChangeQuery('courseState', value) }} style={{ width: "calc(100% - 70px)" }}
> />
<Option value="UN_START">待上课</Option> </div>
<Option value="STARTING">上课中</Option>
<Option value="FINISH">已完成</Option> {!isTeacher &&
<Option value="EXPIRED">未成功开课</Option> <div className="search-condition__item">
</Select> <TeacherSearchSelect
</div> id="teacher_select"
</div> ref="TeacherSelect"
label="讲师"
<span placeholder="请选择"
className="icon iconfont" teacherName={teacherName}
onClick={this.handleReset} onSelect={this.handleSelectTeacher}
> defaultValue={teacherId}
&#xe6a3; />
</span> </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> </Row>
</div> </div>
) )
......
src/modules/course-manage/components/LiveCourseFilter.less
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
position: relative; position: relative;
.search-condition { .search-condition {
width: 100%; width: calc(100% - 80px);
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
...@@ -13,8 +13,22 @@ ...@@ -13,8 +13,22 @@
margin-bottom: 12px; margin-bottom: 12px;
} }
} }
.iconfont { .reset-fold-area {
position: absolute; position: absolute;
right: 12px; 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 @@ ...@@ -7,7 +7,7 @@
*/ */
import React from 'react'; 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 Bus from '@/core/bus';
// import User from "@/core/user"; // import User from "@/core/user";
...@@ -27,7 +27,8 @@ import { PageControl } from "@/components"; ...@@ -27,7 +27,8 @@ import { PageControl } from "@/components";
// import SelectStudent from '../modal/select-student'; // import SelectStudent from '../modal/select-student';
import './LiveCourseList.less'; import './LiveCourseList.less';
import { QuestionCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal;
const courseStateShow = { const courseStateShow = {
UN_START: { UN_START: {
code: 1, code: 1,
...@@ -99,98 +100,76 @@ class LiveCourseList extends React.Component { ...@@ -99,98 +100,76 @@ class LiveCourseList extends React.Component {
); );
const columns = [ const columns = [
{ {
title: "课程名称", title: "直播课",
width: "20%", width: "20%",
key: "courseName", key: "course",
dataIndex: "courseName", dataIndex: "courseName",
render: (val, record) => { render: (val, record) => {
return ( return (
<div className="record__item"> <div className="record__item">
<img className="course-cover" src={'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'} /> <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> </div>
) )
} }
}, },
{ {
title: "上课时间", title: "课程分类",
width: "10%", width: "10%",
key: "classTime", key: "couseCatalog",
dataIndex: "classTime", dataIndex: "couseCatalog",
render: (val, item) => { 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%", width: "8%",
key: "nickname", key: "courseware",
dataIndex: "nickname", dataIndex: "courseware",
render: (val, item) => {
return (
<span>2个</span>
);
},
}, },
{ {
title: '学员管理', title: '上课数据',
width: "9%", width: "9%",
key: "quota", key: "quota",
dataIndex: "quota", dataIndex: "quota",
render: (val, item) => { render: (val, item) => {
return ( return (
<span <span className="iconfont icon" onClick={() => {
className="operate-text" this.handleLinkToClassData(item)
> }}>&#xe7d6; </span>
3人
</span>
); );
}, },
}, },
{ {
title: "课件管理", title: "上架状态",
width: "7%", width: "7%",
dataIndex: "courseware", dataIndex: "courseware",
render: (val, item, index) => { render: (val, item, index) => {
return ( return (
<span <Switch defaultChecked />
className="operate-text"
>
2个
</span>
) )
}, },
}, },
{ {
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: "操作", title: "操作",
width: "20%", width: "20%",
key: "operate", key: "operate",
...@@ -217,7 +196,7 @@ class LiveCourseList extends React.Component { ...@@ -217,7 +196,7 @@ class LiveCourseList extends React.Component {
</div> </div>
<span key="split1" className="operate__item split"> | </span> <span key="split1" className="operate__item split"> | </span>
<div className="big-live"> <div className="big-live">
<Dropdown> <Dropdown overlay={this.renderMoreOperate(item)}>
<span className="more-operate"> <span className="more-operate">
<span className="operate-text">更多</span> <span className="operate-text">更多</span>
<span <span
...@@ -241,41 +220,39 @@ class LiveCourseList extends React.Component { ...@@ -241,41 +220,39 @@ class LiveCourseList extends React.Component {
return ( return (
<div className="live-course-more-menu"> <div className="live-course-more-menu">
<div <div
className="operate__item"
>群发通知</div>
<div
className="operate__item" className="operate__item"
onClick={this.toEditCoursePage(item)}
>编辑</div> >编辑</div>
<div <div
className="operate__item" className="operate__item"
onClick={this.handleDelete}
>删除</div> >删除</div>
</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() { render() {
const { total, query, courseList, loading} = this.props; const { total, query, courseList, loading} = this.props;
console.log("courseList",courseList);
const { current, size } = query; const { current, size } = query;
const { columns} = this.state; const { columns} = this.state;
......
src/modules/course-manage/components/LiveCourseOpt.jsx
...@@ -13,6 +13,11 @@ class LiveCourseOpt extends React.Component { ...@@ -13,6 +13,11 @@ class LiveCourseOpt extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
handleCreateLiveCouese = ()=>{
window.RCHistory.push({
pathname: '/create-live-course?type=add',
})
}
render() { render() {
return ( return (
<div className="live-course-opt"> <div className="live-course-opt">
......
src/modules/root/Login.jsx
...@@ -95,8 +95,8 @@ function Login(props) { ...@@ -95,8 +95,8 @@ function Login(props) {
User.setUserId(res.result.userId); User.setUserId(res.result.userId);
User.setToken(res.result.xmToken); User.setToken(res.result.xmToken);
window.RCHistory.push({ window.RCHistory.push({
pathname: `/ pathname: `/personal-info`,
personal-info`,
}) })
} }
}) })
......
src/routes/config/mainRoutes.tsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-04-29 10:26:32 * @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: 内容线路由配置 * @Description: 内容线路由配置
*/ */
import EmployeesManagePage from '@/modules/store-manege/EmployeesManagePage'; import EmployeesManagePage from '@/modules/store-manege/EmployeesManagePage';
...@@ -48,7 +48,7 @@ const mainRoutes = [ ...@@ -48,7 +48,7 @@ const mainRoutes = [
name: '课程管理' name: '课程管理'
}, },
{ {
path: '/add-live-course', path: '/create-live-course',
component:AddLivePage, component:AddLivePage,
name: '创建直播课' 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