Skip to content

X
xiaomai-cloud-class-web
Commit f3196910 by guomingpang
Options

feat:课程管理缺省图替换，导航栏收起高亮

parents b24df347 510254f6
Showing with 2051 additions and 1929 deletions
src/modules/course-manage/DataList/CourseData.jsx
import React from "react"; import User from '@/common/js/user';
import { withRouter } from "react-router-dom"; import college from '@/common/lottie/college';
import { Table, Popover, message, Button, Spin } from "antd"; import { PageControl, XMTable } from '@/components';
import dealTimeDuration from "../utils/dealTimeDuration"; import CourseService from '@/domains/course-domain/CourseService';
import { PageControl } from "@/components"; import { Button, message, Popover, Spin } from 'antd';
import CourseService from "@/domains/course-domain/CourseService"; import React from 'react';
import User from "@/common/js/user"; import { withRouter } from 'react-router-dom';
import "./DataList.less"; import dealTimeDuration from '../utils/dealTimeDuration';
import './DataList.less';
class DataList extends React.Component { class DataList extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
const courseId = getParameterByName("id"); // 课程ID const courseId = getParameterByName('id'); // 课程ID
const type = getParameterByName("type"); // 来源: 大班直播 large 互动班课 interactive const type = getParameterByName('type'); // 来源: 大班直播 large 互动班课 interactive
this.state = { this.state = {
type, type,
teacherData: [], // 老师上课数据 teacherData: [], // 老师上课数据
...@@ -68,34 +69,30 @@ class DataList extends React.Component { ...@@ -68,34 +69,30 @@ class DataList extends React.Component {
getVisiterColumns() { getVisiterColumns() {
const columns = [ const columns = [
{ {
title: "序号", title: '序号',
dataIndex: "index", dataIndex: 'index',
width: 50, width: 50,
render: (text, record, index) => { render: (text, record, index) => {
return <span>{index + 1}</span>; return <span>{index + 1}</span>;
}, },
}, },
{ {
title: "进入时间", title: '进入时间',
dataIndex: "entryTime", dataIndex: 'entryTime',
width: 150, width: 150,
render: (text) => ( render: (text) => <span>{formatDate('YYYY-MM-DD H:i', parseInt(text))}</span>,
<span>{formatDate("YYYY-MM-DD H:i", parseInt(text))}</span>
),
}, },
{ {
title: "离开时间", title: '离开时间',
dataIndex: "leaveTime", dataIndex: 'leaveTime',
width: 150, width: 150,
render: (text) => ( render: (text) => <span>{formatDate('YYYY-MM-DD H:i', parseInt(text))}</span>,
<span>{formatDate("YYYY-MM-DD H:i", parseInt(text))}</span>
),
}, },
{ {
title: "在线时长", title: '在线时长',
dataIndex: "lookingDuration", dataIndex: 'lookingDuration',
render: (text, record) => { render: (text, record) => {
return <span>{text ? dealTimeDuration(text) : "-"}</span>; return <span>{text ? dealTimeDuration(text) : '-'}</span>;
}, },
}, },
]; ];
...@@ -106,43 +103,44 @@ class DataList extends React.Component { ...@@ -106,43 +103,44 @@ class DataList extends React.Component {
getStudentColumns() { getStudentColumns() {
const columns = [ const columns = [
{ {
title: "学员姓名", title: '学员姓名',
dataIndex: "userName", dataIndex: 'userName',
}, },
{ {
title: "手机号", title: '手机号',
dataIndex: "phone", dataIndex: 'phone',
render: (text, record) => { render: (text, record) => {
const { phone = "", bindingWeChat } = record; const { phone = '', bindingWeChat } = record;
return <div>{phone}</div>; return <div>{phone}</div>;
}, },
}, },
{ {
title: "观看次数", title: '观看次数',
dataIndex: "entryNum", dataIndex: 'entryNum',
render: (text, record) => { render: (text, record) => {
if (text > 0) { if (text > 0) {
if ( if (record.visitorInfoVOList && record.visitorInfoVOList.length > 0) {
record.visitorInfoVOList &&
record.visitorInfoVOList.length > 0
) {
const table = ( const table = (
<Table <XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
columns={this.getVisiterColumns()} columns={this.getVisiterColumns()}
dataSource={record.visitorInfoVOList} dataSource={record.visitorInfoVOList}
scroll={{ y: 75 }} scroll={{ y: 75 }}
size={"small"} size={'small'}
style={{ width: 450 }} style={{ width: 450 }}
pagination={false} pagination={false}
/> />
); );
return ( return (
<Popover content={table} trigger="click"> <Popover content={table} trigger='click'>
<span className="handel-btn">{text}</span> <span className='handel-btn'>{text}</span>
</Popover> </Popover>
); );
} else { } else {
return <div className="live-table--empty">暂无观看数据</div>; return <div className='live-table--empty'>暂无观看数据</div>;
} }
} else { } else {
return <span>{text}</span>; return <span>{text}</span>;
...@@ -150,13 +148,13 @@ class DataList extends React.Component { ...@@ -150,13 +148,13 @@ class DataList extends React.Component {
}, },
}, },
{ {
title: "累计在线时长", title: '累计在线时长',
dataIndex: "totalDuration", dataIndex: 'totalDuration',
sorter: (a, b) => a.totalDuration - b.totalDuration, sorter: (a, b) => a.totalDuration - b.totalDuration,
sortDirections: ["descend", "ascend"], sortDirections: ['descend', 'ascend'],
render: (text, record) => { render: (text, record) => {
//如无离开时间，就置空 //如无离开时间，就置空
return <span>{text ? dealTimeDuration(text) : "00:00:00"}</span>; return <span>{text ? dealTimeDuration(text) : '00:00:00'}</span>;
}, },
}, },
]; ];
...@@ -169,17 +167,17 @@ class DataList extends React.Component { ...@@ -169,17 +167,17 @@ class DataList extends React.Component {
CourseService.exportStudentCourseData({ CourseService.exportStudentCourseData({
liveCourseId: liveCourseId, liveCourseId: liveCourseId,
exportLiveType: "VISITOR", exportLiveType: 'VISITOR',
storeId, storeId,
}).then((res) => { }).then((res) => {
const link = res.result; const link = res.result;
this.setState({ this.setState({
link link,
}); });
document.getElementById("loadExcel").click(); document.getElementById('loadExcel').click();
if (res.success) { if (res.success) {
message.success("导出成功！"); message.success('导出成功！');
} }
}); });
}; };
...@@ -187,27 +185,28 @@ class DataList extends React.Component { ...@@ -187,27 +185,28 @@ class DataList extends React.Component {
handleCheckEnterTimes = () => { handleCheckEnterTimes = () => {
const { teacherData } = this.state; const { teacherData } = this.state;
if (teacherData.entryNum > 0) { if (teacherData.entryNum > 0) {
if ( if (teacherData.visitorInfoVOList && teacherData.visitorInfoVOList.length > 0) {
teacherData.visitorInfoVOList &&
teacherData.visitorInfoVOList.length > 0
) {
const table = ( const table = (
<Table <XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
columns={this.getVisiterColumns()} columns={this.getVisiterColumns()}
dataSource={teacherData.visitorInfoVOList} dataSource={teacherData.visitorInfoVOList}
scroll={{ y: 75 }} scroll={{ y: 75 }}
size={"small"} size={'small'}
style={{ width: 450 }} style={{ width: 450 }}
pagination={false} pagination={false}
/> />
); );
return ( return (
<Popover content={table} trigger="click"> <Popover content={table} trigger='click'>
<span className="times-num">{teacherData.entryNum}</span> <span className='times-num'>{teacherData.entryNum}</span>
</Popover> </Popover>
); );
} else { } else {
return <div className="live-table--empty">暂无观看数据</div>; return <div className='live-table--empty'>暂无观看数据</div>;
} }
} else { } else {
return <span>{teacherData.entryNum}</span>; return <span>{teacherData.entryNum}</span>;
...@@ -216,14 +215,18 @@ class DataList extends React.Component { ...@@ -216,14 +215,18 @@ class DataList extends React.Component {
showTable = () => { showTable = () => {
return ( return (
<Table <XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
columns={this.getVisiterColumns()} columns={this.getVisiterColumns()}
dataSource={this.state.teacherData.visitorInfoVOList} dataSource={this.state.teacherData.visitorInfoVOList}
scroll={{ y: 80 }} scroll={{ y: 80 }}
size={"small"} size={'small'}
style={{ width: 450 }} style={{ width: 450 }}
pagination={false} pagination={false}
className="visitor-num-table" className='visitor-num-table'
/> />
); );
}; };
...@@ -232,114 +235,87 @@ class DataList extends React.Component { ...@@ -232,114 +235,87 @@ class DataList extends React.Component {
if (current == size) { if (current == size) {
return; return;
} }
this.setState({ size }, this.fetchUserData) this.setState({ size }, this.fetchUserData);
} };
render() { render() {
const { const { teacherData, studentData, current, size, total, loading, link } = this.state;
teacherData,
studentData,
current,
size,
total,
loading,
link
} = this.state;
return ( return (
<Spin spinning={loading}> <Spin spinning={loading}>
<a <a href={link} target='_blank' download id='loadExcel' style={{ position: 'absolute', left: '-10000px' }}>
href={link}
target="_blank"
download
id="loadExcel"
style={{ position: "absolute", left: "-10000px" }}
>
111 111
</a> </a>
{/* 讲师上课数据 */} {/* 讲师上课数据 */}
<div className="courseData-teacher"> <div className='courseData-teacher'>
<p className="title">讲师上课数据</p> <p className='title'>讲师上课数据</p>
<div className="teacher-course-data"> <div className='teacher-course-data'>
<div className="avatar-name-phone item-block"> <div className='avatar-name-phone item-block'>
<img <img src={teacherData.avatar || 'https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png'} alt='' className='avatar' />
src={ <div className='right'>
teacherData.avatar || <div className='name'>{teacherData.userName}</div>
"https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png" <div className='phone'>{teacherData.phone}</div>
}
alt=""
className="avatar"
/>
<div className="right">
<div className="name">{teacherData.userName}</div>
<div className="phone">
{teacherData.phone}
</div>
</div> </div>
</div> </div>
<div className="times item-block"> <div className='times item-block'>
<div <div className={`times-num ${Number(teacherData.entryNum) > 0 ? 'can-click' : ''}`}>
className={`times-num ${ {Number(teacherData.entryNum) > 0 ? (
Number(teacherData.entryNum) > 0 ? "can-click" : "" <Popover content={this.showTable()} trigger='click'>
}`} <span className='times-num'>{teacherData.entryNum || 0}</span>
>{ </Popover>
Number(teacherData.entryNum) > 0 ? ) : (
<Popover content={this.showTable()} trigger="click"> <span className='times-num'>{0}</span>
<span className="times-num">{teacherData.entryNum || 0}</span> )}
</Popover>:
<span className="times-num">{0}</span>
}
</div> </div>
<div className="text">进入直播间次数</div> <div className='text'>进入直播间次数</div>
</div> </div>
<div className="online-duration item-block"> <div className='online-duration item-block'>
<div className="duration"> <div className='duration'>{teacherData.totalDuration ? dealTimeDuration(teacherData.totalDuration) : '00:00:00'}</div>
{teacherData.totalDuration <div className='text'>累计在线时长</div>
? dealTimeDuration(teacherData.totalDuration)
: "00:00:00"}
</div>
<div className="text">累计在线时长</div>
</div> </div>
</div> </div>
</div> </div>
{/* 学员上课数据 */} {/* 学员上课数据 */}
<div className="courseData-student"> <div className='courseData-student'>
<p className="title">学员上课数据</p> <p className='title'>学员上课数据</p>
<div className="filter-wrap"> <div className='filter-wrap'>
<div className="filter"> <div className='filter'>
<Button <Button
style={{ height: 32}} style={{ height: 32 }}
onClick={_.debounce( onClick={_.debounce(
() => { () => {
if (!studentData.length) { if (!studentData.length) {
message.warning("暂无数据可导出"); message.warning('暂无数据可导出');
return; return;
} }
this.handleExportV5(); this.handleExportV5();
}, },
500, 500,
true true
)} )}>
>
导出 导出
</Button> </Button>
</div> </div>
</div> </div>
<Table <XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
bordered bordered
size="small" size='small'
scroll={{ y: 600 }} scroll={{ y: 600 }}
columns={this.getStudentColumns()} columns={this.getStudentColumns()}
dataSource={studentData} dataSource={studentData}
pagination={false} pagination={false}
style={{ margin: "16px 0" }} style={{ margin: '16px 0' }}
/> />
{ total > 0 && {total > 0 && (
<PageControl <PageControl
size="small" size='small'
current={current - 1} current={current - 1}
pageSize={size} pageSize={size}
total={total} total={total}
...@@ -348,7 +324,7 @@ class DataList extends React.Component { ...@@ -348,7 +324,7 @@ class DataList extends React.Component {
this.fetchUserData(page + 1); this.fetchUserData(page + 1);
}} }}
/> />
} )}
</div> </div>
</Spin> </Spin>
); );
......
src/modules/course-manage/DataList/PlaybackData.jsx
import User from '@/common/js/user';
import college from '@/common/lottie/college';
import { PageControl, XMTable } from '@/components';
import CourseService from '@/domains/course-domain/CourseService';
import { Button, message } from 'antd';
import React from 'react'; import React from 'react';
import { withRouter } from "react-router-dom"; import { withRouter } from 'react-router-dom';
import { Table, Button, Modal, message } from 'antd';
import dealTimeDuration from '../utils/dealTimeDuration'; import dealTimeDuration from '../utils/dealTimeDuration';
import { PageControl } from "@/components";
import './DataList.less'; import './DataList.less';
import CourseService from "@/domains/course-domain/CourseService";
import User from '@/common/js/user';
const liveTypeMap = { const liveTypeMap = {
USER: "普通用户", USER: '普通用户',
ANCHOR: "讲师", ANCHOR: '讲师',
ADMIN: "管理员（助教）", ADMIN: '管理员（助教）',
GUEST: "游客" GUEST: '游客',
}; };
class PlaybackData extends React.Component { class PlaybackData extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
const courseId = getParameterByName("id"); // 课程ID const courseId = getParameterByName('id'); // 课程ID
this.state = { this.state = {
playbackData: [], playbackData: [],
...@@ -24,8 +25,8 @@ class PlaybackData extends React.Component { ...@@ -24,8 +25,8 @@ class PlaybackData extends React.Component {
size: 10, size: 10,
total: 0, total: 0,
liveCourseId: courseId, liveCourseId: courseId,
storeId: User.getStoreId() storeId: User.getStoreId(),
} };
} }
componentDidMount() { componentDidMount() {
...@@ -33,12 +34,12 @@ class PlaybackData extends React.Component { ...@@ -33,12 +34,12 @@ class PlaybackData extends React.Component {
} }
fetchPlaybackList = (page = 1) => { fetchPlaybackList = (page = 1) => {
const { size, liveCourseId } = this.state const { size, liveCourseId } = this.state;
const params = { const params = {
liveCourseId, liveCourseId,
current: page, current: page,
size size,
} };
CourseService.fetchPlaybackList(params).then((res) => { CourseService.fetchPlaybackList(params).then((res) => {
if (res.result) { if (res.result) {
...@@ -47,38 +48,35 @@ class PlaybackData extends React.Component { ...@@ -47,38 +48,35 @@ class PlaybackData extends React.Component {
playbackData: records, playbackData: records,
current, current,
size, size,
total total,
}); });
} }
}); });
}; };
getPlaybackColumns() { getPlaybackColumns() {
const columns = [ const columns = [
{ {
title: "观看学员", title: '观看学员',
dataIndex: "userName", dataIndex: 'userName',
}, },
{ {
title: "手机号", title: '手机号',
dataIndex: "phone" dataIndex: 'phone',
}, },
{ {
title: "观看者类型", title: '观看者类型',
dataIndex: "userRole", dataIndex: 'userRole',
render: (text) => <span>{liveTypeMap[text]}</span>, render: (text) => <span>{liveTypeMap[text]}</span>,
}, },
{ {
title: "开始观看时间", title: '开始观看时间',
dataIndex: "entryTime", dataIndex: 'entryTime',
render: (text) => ( render: (text) => <span>{text ? formatDate('YYYY-MM-DD H:i', parseInt(text)) : '-'}</span>,
<span>{text ? formatDate("YYYY-MM-DD H:i", parseInt(text)) : '-'}</span>
),
}, },
{ {
title: "观看时长", title: '观看时长',
dataIndex: "lookingDuration", dataIndex: 'lookingDuration',
render: (text) => { render: (text) => {
return <span>{text ? dealTimeDuration(text) : '-'}</span>; return <span>{text ? dealTimeDuration(text) : '-'}</span>;
}, },
...@@ -92,53 +90,55 @@ class PlaybackData extends React.Component { ...@@ -92,53 +90,55 @@ class PlaybackData extends React.Component {
CourseService.exportPlayBackCourseData({ CourseService.exportPlayBackCourseData({
liveCourseId, liveCourseId,
exportLiveType: "PLAY_BACK", exportLiveType: 'PLAY_BACK',
storeId storeId,
}).then((res) => { }).then((res) => {
const link = res.result; const link = res.result;
this.setState({ this.setState({
link link,
}); });
document.getElementById("load-play-back-excel").click(); document.getElementById('load-play-back-excel').click();
if(res.success){ if (res.success) {
message.success("导出成功！") message.success('导出成功！');
} }
}) });
} }
onShowSizeChange = (current, size) => { onShowSizeChange = (current, size) => {
if (current == size) { if (current == size) {
return; return;
} }
this.setState({ size }, this.fetchUserData) this.setState({ size }, this.fetchUserData);
} };
render() { render() {
const { playbackData, total, current, size, link} = this.state const { playbackData, total, current, size, link } = this.state;
return ( return (
<div> <div>
<a <a href={link} target='_blank' download id='load-play-back-excel' style={{ position: 'absolute', left: '-10000px' }}>
href={link}
target="_blank"
download
id="load-play-back-excel"
style={{ position: "absolute", left: "-10000px" }}
>
111 111
</a> </a>
<Button onClick={() => {this.handleplaybackExport()}}>导出</Button> <Button
<Table onClick={() => {
this.handleplaybackExport();
}}>
导出
</Button>
<XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
bordered bordered
size="small" size='small'
columns={this.getPlaybackColumns()} columns={this.getPlaybackColumns()}
dataSource={playbackData} dataSource={playbackData}
pagination={false} pagination={false}
style={{ margin: '16px 0' }}> style={{ margin: '16px 0' }}></XMTable>
</Table> {total > 0 && (
{ total > 0 &&
<PageControl <PageControl
size="small" size='small'
current={current - 1} current={current - 1}
pageSize={size} pageSize={size}
total={total} total={total}
...@@ -147,9 +147,9 @@ class PlaybackData extends React.Component { ...@@ -147,9 +147,9 @@ class PlaybackData extends React.Component {
this.fetchPlaybackList(page + 1); this.fetchPlaybackList(page + 1);
}} }}
/> />
} )}
</div> </div>
) );
} }
} }
......
src/modules/course-manage/components/LiveCourseList.jsx
...@@ -6,24 +6,23 @@ ...@@ -6,24 +6,23 @@
* @Description: 大班直播、互动班课的直播课列表 * @Description: 大班直播、互动班课的直播课列表
*/ */
import User from '@/common/js/user';
import college from '@/common/lottie/college';
import { PageControl, XMTable } from '@/components';
import DownloadLiveModal from '@/components/DownloadLiveModal';
import BaseService from '@/domains/basic-domain/baseService';
import { appId, LIVE_SHARE } from '@/domains/course-domain/constants';
import CourseService from '@/domains/course-domain/CourseService';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Dropdown, message, Modal, Switch, Tooltip } from 'antd';
import React from 'react'; import React from 'react';
import { Table, Modal, message, Dropdown, Switch, Tooltip } from 'antd';
import { Route, withRouter } from 'react-router-dom'; import { Route, withRouter } from 'react-router-dom';
import { PageControl } from '@/components'; import _ from 'underscore';
import DownloadLiveModal from '@/components/DownloadLiveModal'; import DataList from '../DataList/DataList';
import ManageCoursewareModal from '../modal/ManageCoursewareModal'; import ManageCoursewareModal from '../modal/ManageCoursewareModal';
import ShareLiveModal from '../modal/ShareLiveModal';
import RelatedPlanModal from '../modal/RelatedPlanModal'; import RelatedPlanModal from '../modal/RelatedPlanModal';
import ShareLiveModal from '../modal/ShareLiveModal';
import './LiveCourseList.less'; import './LiveCourseList.less';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { appId, LIVE_SHARE } from '@/domains/course-domain/constants';
import CourseService from '@/domains/course-domain/CourseService';
import BaseService from '@/domains/basic-domain/baseService';
import DataList from '../DataList/DataList';
import User from '@/common/js/user';
import _ from 'underscore';
const { confirm } = Modal; const { confirm } = Modal;
const courseStateShow = { const courseStateShow = {
...@@ -94,8 +93,8 @@ class LiveCourseList extends React.Component { ...@@ -94,8 +93,8 @@ class LiveCourseList extends React.Component {
}; };
//改变上架状态 //改变上架状态
changeShelfState = (index,item,checked) => { changeShelfState = (index, item, checked) => {
let _shelfState = checked ? "YES" : "NO" let _shelfState = checked ? 'YES' : 'NO';
// if (_shelfState === 'NO') { // if (_shelfState === 'NO') {
// _shelfState = 'YES'; // _shelfState = 'YES';
// } else { // } else {
...@@ -112,7 +111,7 @@ class LiveCourseList extends React.Component { ...@@ -112,7 +111,7 @@ class LiveCourseList extends React.Component {
} else { } else {
message.success('已取消展示'); message.success('已取消展示');
} }
this.props.changeShelfState(index,_shelfState) this.props.changeShelfState(index, _shelfState);
} }
}); });
}; };
...@@ -288,10 +287,13 @@ class LiveCourseList extends React.Component { ...@@ -288,10 +287,13 @@ class LiveCourseList extends React.Component {
key: 'shelfState', key: 'shelfState',
dataIndex: 'shelfState', dataIndex: 'shelfState',
render: (val, item, index) => { render: (val, item, index) => {
return <Switch return (
checked={item.shelfState === "YES"} <Switch
checked={item.shelfState === 'YES'}
defaultChecked={item.shelfState === 'YES' ? true : false} defaultChecked={item.shelfState === 'YES' ? true : false}
onChange={(checked) => this.changeShelfState(index,item,checked)} />; onChange={(checked) => this.changeShelfState(index, item, checked)}
/>
);
}, },
}, },
{ {
...@@ -786,7 +788,11 @@ class LiveCourseList extends React.Component { ...@@ -786,7 +788,11 @@ class LiveCourseList extends React.Component {
return ( return (
<div className='live-course-list'> <div className='live-course-list'>
<Table <XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
bordered bordered
size='middle' size='middle'
pagination={false} pagination={false}
......
src/modules/course-manage/graphics-course/components/GraphicsCourseList.jsx
...@@ -6,37 +6,29 @@ ...@@ -6,37 +6,29 @@
* @Description: 视频课-列表模块 * @Description: 视频课-列表模块
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
import React from 'react'; import User from '@/common/js/user';
import { Table, Modal, message , Tooltip,Switch,Dropdown} from 'antd'; import college from '@/common/lottie/college';
import { PageControl, XMTable } from '@/components';
import { PageControl } from "@/components"; import { appId, LIVE_SHARE } from '@/domains/course-domain/constants';
import { LIVE_SHARE_MAP } from '@/common/constants/academic/cloudClass'; import CourseService from '@/domains/course-domain/CourseService';
import { appId, shareUrl, LIVE_SHARE } from '@/domains/course-domain/constants';
import ShareLiveModal from '@/modules/course-manage/modal/ShareLiveModal'; import ShareLiveModal from '@/modules/course-manage/modal/ShareLiveModal';
import WatchDataModal from '../modal/WatchDataModal' import { Dropdown, message, Modal, Switch, Tooltip } from 'antd';
import CourseService from "@/domains/course-domain/CourseService"; import React from 'react';
import RelatedPlanModal from '../../modal/RelatedPlanModal'; import RelatedPlanModal from '../../modal/RelatedPlanModal';
import WatchDataModal from '../modal/WatchDataModal';
import User from '@/common/js/user'
import './GraphicsCourseList.less'; import './GraphicsCourseList.less';
const ENV = process.env.DEPLOY_ENV || 'dev';
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png'; const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png';
class GraphicsCourseList extends React.Component { class GraphicsCourseList extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
id: '', // 视频课ID id: '', // 视频课ID
studentIds:[], studentIds: [],
RelatedPlanModalVisible:false, RelatedPlanModalVisible: false,
selectPlanList:{} selectPlanList: {},
} };
} }
componentDidMount() { componentDidMount() {
...@@ -55,25 +47,25 @@ class GraphicsCourseList extends React.Component { ...@@ -55,25 +47,25 @@ class GraphicsCourseList extends React.Component {
data={record} data={record}
close={() => { close={() => {
this.setState({ this.setState({
watchDataModal: null watchDataModal: null,
}); });
}} }}
/> />
); );
this.setState({ watchDataModal }); this.setState({ watchDataModal });
} };
handlePlanName = (planArray)=>{ handlePlanName = (planArray) => {
let planStr = ""; let planStr = '';
planArray.map((item,index)=>{ planArray.map((item, index) => {
if(index < planArray.length-1){ if (index < planArray.length - 1) {
planStr = planStr + item.planName + '、'; planStr = planStr + item.planName + '、';
}else{ } else {
planStr = planStr + item.planName planStr = planStr + item.planName;
}
})
return planStr
} }
});
return planStr;
};
// 请求表头 // 请求表头
parseColumns = () => { parseColumns = () => {
const columns = [ const columns = [
...@@ -81,24 +73,24 @@ class GraphicsCourseList extends React.Component { ...@@ -81,24 +73,24 @@ class GraphicsCourseList extends React.Component {
title: '图文课', title: '图文课',
key: 'scheduleName', key: 'scheduleName',
dataIndex: 'scheduleName', dataIndex: 'scheduleName',
width:321, width: 321,
fixed: 'left', fixed: 'left',
render: (val, record) => { render: (val, record) => {
const { coverUrl, scheduleVideoUrl } = record; const { coverUrl, scheduleVideoUrl } = record;
return ( return (
<div className="record__item"> <div className='record__item'>
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */} {/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
<img className="course-cover" src={coverUrl || defaultCoverUrl} /> <img className='course-cover' src={coverUrl || defaultCoverUrl} />
{ record.courseName.length > 25? {record.courseName.length > 25 ? (
<Tooltip title={record.courseName}> <Tooltip title={record.courseName}>
<div className="course-name">{record.courseName}</div> <div className='course-name'>{record.courseName}</div>
</Tooltip> </Tooltip>
: ) : (
<div className="course-name">{record.courseName}</div> <div className='course-name'>{record.courseName}</div>
} )}
</div> </div>
) );
} },
}, },
{ {
title: '课程分类', title: '课程分类',
...@@ -107,11 +99,12 @@ class GraphicsCourseList extends React.Component { ...@@ -107,11 +99,12 @@ class GraphicsCourseList extends React.Component {
width: 120, width: 120,
render: (val, record) => { render: (val, record) => {
return ( return (
<div className="record__item"> <div className='record__item'>
{record.categoryOneName}{ record.categoryTwoName?`-${record.categoryTwoName}`:''} {record.categoryOneName}
{record.categoryTwoName ? `-${record.categoryTwoName}` : ''}
</div> </div>
) );
} },
}, },
{ {
title: '创建人', title: '创建人',
...@@ -121,44 +114,52 @@ class GraphicsCourseList extends React.Component { ...@@ -121,44 +114,52 @@ class GraphicsCourseList extends React.Component {
render: (val) => { render: (val) => {
return ( return (
<div> <div>
{ val && {val && (
<Tooltip title={val}> <Tooltip title={val}>
<div> <div>{val.length > 4 ? `${val.slice(0, 4)}...` : val}</div>
{val.length > 4 ? `${val.slice(0,4)}...` : val}
</div>
</Tooltip> </Tooltip>
} )}
</div> </div>
) );
} },
}, },
{ {
title: <span> title: (
<span>
<span>学院展示</span> <span>学院展示</span>
<Tooltip title={<div>开启后，学员可在学院内查看到此课程。<br/>关闭后，学院内不再展示此课程，但学员仍可通过分享的海报/链接查看此课程。</div>}><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px',fontWeight:'normal'}}>&#xe61d;</i></Tooltip> <Tooltip
</span>, title={
<div>
开启后，学员可在学院内查看到此课程。
<br />
关闭后，学院内不再展示此课程，但学员仍可通过分享的海报/链接查看此课程。
</div>
}>
<i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px', fontWeight: 'normal' }}>
&#xe61d;
</i>
</Tooltip>
</span>
),
width: 120, width: 120,
dataIndex: "courseware", dataIndex: 'courseware',
render: (val, item, index) => { render: (val, item, index) => {
return ( return (
<Switch <Switch
checked={item.shelfState === "YES"} checked={item.shelfState === 'YES'}
defaultChecked={item.shelfState==="YES"?true:false} defaultChecked={item.shelfState === 'YES' ? true : false}
onChange={(checked)=>this.changeShelfState(index,item,checked)}/> onChange={(checked) => this.changeShelfState(index, item, checked)}
) />
);
}, },
}, },
{ {
title: "观看学员数", title: '观看学员数',
width: 110, width: 110,
key: "watchUserCount", key: 'watchUserCount',
dataIndex: "watchUserCount", dataIndex: 'watchUserCount',
render: (val, item) => { render: (val, item) => {
return ( return <div className='watchUserCount'>{val}</div>;
<div className="watchUserCount">{val}</div>
)
}, },
}, },
{ {
...@@ -168,8 +169,8 @@ class GraphicsCourseList extends React.Component { ...@@ -168,8 +169,8 @@ class GraphicsCourseList extends React.Component {
dataIndex: 'created', dataIndex: 'created',
sorter: true, sorter: true,
render: (val) => { render: (val) => {
return formatDate('YYYY-MM-DD H:i', val) return formatDate('YYYY-MM-DD H:i', val);
} },
}, },
{ {
title: '最近修改时间', title: '最近修改时间',
...@@ -178,30 +179,33 @@ class GraphicsCourseList extends React.Component { ...@@ -178,30 +179,33 @@ class GraphicsCourseList extends React.Component {
dataIndex: 'updated', dataIndex: 'updated',
sorter: true, sorter: true,
render: (val) => { render: (val) => {
return formatDate('YYYY-MM-DD H:i', val) return formatDate('YYYY-MM-DD H:i', val);
} },
}, },
{ {
title: '关联项', title: '关联项',
width: 200, width: 200,
key: "planList", key: 'planList',
dataIndex: "planList", dataIndex: 'planList',
render: (val, record) => { render: (val, record) => {
return ( return (
<div className="related-task"> <div className='related-task'>
{ record.relatedPlanList ? {record.relatedPlanList ? (
<Tooltip title={this.handlePlanName(record.relatedPlanList)} placement="top" arrowPointAtCenter> <Tooltip title={this.handlePlanName(record.relatedPlanList)} placement='top' arrowPointAtCenter>
{ record.relatedPlanList.map((item,index)=>{ {record.relatedPlanList.map((item, index) => {
return <span>{item.planName} { (index < record.relatedPlanList.length-1)&&(<span> 、</span>)} </span> return (
}) <span>
} {item.planName} {index < record.relatedPlanList.length - 1 && <span> 、</span>}{' '}
</span>
);
})}
</Tooltip> </Tooltip>
: ) : (
<span></span> <span></span>
} )}
</div> </div>
) );
} },
}, },
{ {
title: '操作', title: '操作',
...@@ -211,141 +215,143 @@ class GraphicsCourseList extends React.Component { ...@@ -211,141 +215,143 @@ class GraphicsCourseList extends React.Component {
fixed: 'right', fixed: 'right',
render: (val, record) => { render: (val, record) => {
return ( return (
<div className="operate"> <div className='operate'>
<div className="operate__item" onClick={()=>this.handleShowWatchDataModal(record)}>观看数据</div> <div className='operate__item' onClick={() => this.handleShowWatchDataModal(record)}>
<span className="operate__item split"> | </span> 观看数据
<div className="operate__item" onClick={() => this.handleShowShareModal(record)}>分享</div> </div>
<span className="operate__item split"> | </span> <span className='operate__item split'> | </span>
<div className='operate__item' onClick={() => this.handleShowShareModal(record)}>
分享
</div>
<span className='operate__item split'> | </span>
<Dropdown overlay={this.renderMoreOperate(record)}> <Dropdown overlay={this.renderMoreOperate(record)}>
<span className="more-operate"> <span className='more-operate'>
<span className="operate-text">更多</span> <span className='operate-text'>更多</span>
<span <span className='iconfont icon' style={{ color: '#2966FF' }}>
className="iconfont icon"
style={{ color: "#2966FF" }}
>
&#xe824; &#xe824;
</span> </span>
</span> </span>
</Dropdown> </Dropdown>
</div> </div>
) );
} },
} },
]; ];
return columns; return columns;
} };
handleRelatedModalShow = (item) => { handleRelatedModalShow = (item) => {
const selectPlanList = {}; const selectPlanList = {};
if(item.relatedPlanList){ if (item.relatedPlanList) {
item.relatedPlanList.map((item, index) => { item.relatedPlanList.map((item, index) => {
selectPlanList[item.planId] = {} selectPlanList[item.planId] = {};
selectPlanList[item.planId].planId = item.planId; selectPlanList[item.planId].planId = item.planId;
selectPlanList[item.planId].taskBaseVOList = [{ taskId: item.taskId }]; selectPlanList[item.planId].taskBaseVOList = [{ taskId: item.taskId }];
return item return item;
}) });
} }
this.setState({ this.setState({
RelatedPlanModalVisible: true, RelatedPlanModalVisible: true,
selectCourseId: item.id, selectCourseId: item.id,
selectPlanList: selectPlanList, selectPlanList: selectPlanList,
}) });
} };
closeRelatedPlanModalVisible = ()=>{ closeRelatedPlanModalVisible = () => {
this.setState({ this.setState({
RelatedPlanModalVisible: false RelatedPlanModalVisible: false,
}) });
} };
onChangeSelectPlanList = (selectPlanList) => { onChangeSelectPlanList = (selectPlanList) => {
this.setState({ this.setState({
selectPlanList: selectPlanList selectPlanList: selectPlanList,
}) });
} };
onConfirmSelectPlanList = () => { onConfirmSelectPlanList = () => {
this.setState({ this.setState(
RelatedPlanModalVisible: false {
}, () => { this.props.onChange(); }); RelatedPlanModalVisible: false,
},
() => {
this.props.onChange();
} }
);
};
renderMoreOperate = (item) => { renderMoreOperate = (item) => {
return ( return (
<div className="live-course-more-menu"> <div className='live-course-more-menu'>
{(User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager") && {(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && (
<div <div
className="operate__item" className='operate__item'
key="plan" key='plan'
onClick={() => { onClick={() => {
this.handleRelatedModalShow(item); this.handleRelatedModalShow(item);
}} }}>
>关联培训计划</div> 关联培训计划
} </div>
)}
<div <div
className="operate__item" className='operate__item'
key="edit" key='edit'
onClick={() => { onClick={() => {
RCHistory.push(`/create-graphics-course?type=edit&id=${item.id}`); RCHistory.push(`/create-graphics-course?type=edit&id=${item.id}`);
}} }}>
>编辑</div> 编辑
<div
className="operate__item"
key="delete"
onClick={() => this.handleDeleteGraphicsCourse(item.id)}
>删除</div>
</div> </div>
) <div className='operate__item' key='delete' onClick={() => this.handleDeleteGraphicsCourse(item.id)}>
} 删除
</div>
</div>
);
};
//改变上架状态 //改变上架状态
changeShelfState = (index,item,checked) =>{ changeShelfState = (index, item, checked) => {
let _shelfState = checked ? "YES" : "NO" let _shelfState = checked ? 'YES' : 'NO';
// if(_shelfState==='NO'){ // if(_shelfState==='NO'){
// _shelfState = "YES"; // _shelfState = "YES";
// }else{ // }else{
// _shelfState = "NO" // _shelfState = "NO"
// } // }
const params={ const params = {
courseId: item.id, courseId: item.id,
shelfState:_shelfState shelfState: _shelfState,
} };
CourseService.changeVideoShelfState(params).then((res)=>{ CourseService.changeVideoShelfState(params).then((res) => {
if(res.success){ if (res.success) {
if(_shelfState === "YES"){ if (_shelfState === 'YES') {
message.success("已开启展示"); message.success('已开启展示');
}else{ } else {
message.success("已取消展示"); message.success('已取消展示');
}
this.props.changeShelfState(index,_shelfState)
} }
}) this.props.changeShelfState(index, _shelfState);
} }
});
};
// 删除视频课 // 删除视频课
handleDeleteGraphicsCourse = (scheduleId) => { handleDeleteGraphicsCourse = (scheduleId) => {
Modal.confirm({ Modal.confirm({
title: '你确定要删除此视频课吗？', title: '你确定要删除此视频课吗？',
content: '删除后，学员将不能进行观看。', content: '删除后，学员将不能进行观看。',
icon: <span className="icon iconfont default-confirm-icon">&#xe6f4;</span>, icon: <span className='icon iconfont default-confirm-icon'>&#xe6f4;</span>,
okText: '确定', okText: '确定',
okType: 'danger', okType: 'danger',
cancelText: '取消', cancelText: '取消',
onOk: () => { onOk: () => {
const param ={ const param = {
courseId:scheduleId, courseId: scheduleId,
storeId:User.getStoreId() storeId: User.getStoreId(),
} };
CourseService.delVideoSchedule( CourseService.delVideoSchedule(param).then(() => {
param
).then(() => {
message.success('删除成功'); message.success('删除成功');
this.props.onChange(); this.props.onChange();
})
}
}); });
} },
});
};
// 显示分享弹窗 // 显示分享弹窗
handleShowShareModal = (record, needStr = false) => { handleShowShareModal = (record, needStr = false) => {
...@@ -366,11 +372,11 @@ class GraphicsCourseList extends React.Component { ...@@ -366,11 +372,11 @@ class GraphicsCourseList extends React.Component {
<ShareLiveModal <ShareLiveModal
needStr={needStr} needStr={needStr}
data={shareData} data={shareData}
type="graphicsClass" type='graphicsClass'
title="图文课" title='图文课'
close={() => { close={() => {
this.setState({ this.setState({
shareLiveModal: null shareLiveModal: null,
}); });
localStorage.setItem('videoCourseItem', ''); localStorage.setItem('videoCourseItem', '');
}} }}
...@@ -378,88 +384,105 @@ class GraphicsCourseList extends React.Component { ...@@ -378,88 +384,105 @@ class GraphicsCourseList extends React.Component {
); );
this.setState({ shareLiveModal }); this.setState({ shareLiveModal });
} };
handleChangeTable = (pagination, filters, sorter) => { handleChangeTable = (pagination, filters, sorter) => {
const { columnKey, order } = sorter; const { columnKey, order } = sorter;
const { query } = this.props; const { query } = this.props;
let { order: _order } =query; let { order: _order } = query;
// 按创建时间升序排序 // 按创建时间升序排序
if (columnKey === 'created' && order === 'ascend') { _order = 'CREATED_ASC'; } if (columnKey === 'created' && order === 'ascend') {
_order = 'CREATED_ASC';
}
// 按创建时间降序排序 // 按创建时间降序排序
if (columnKey === 'created' && order === 'descend') { _order = 'CREATED_DESC'; } if (columnKey === 'created' && order === 'descend') {
_order = 'CREATED_DESC';
}
// 按更新时间升序排序 // 按更新时间升序排序
if (columnKey === 'updated' && order === 'ascend') { _order = 'UPDATED_ASC'; } if (columnKey === 'updated' && order === 'ascend') {
_order = 'UPDATED_ASC';
}
// 按更新时间降序排序 // 按更新时间降序排序
if (columnKey === 'updated' && order === 'descend') { _order = 'UPDATED_DESC'; } if (columnKey === 'updated' && order === 'descend') {
_order = 'UPDATED_DESC';
}
const _query = { const _query = {
...query, ...query,
orderEnum: _order orderEnum: _order,
}; };
this.props.onChange(_query); this.props.onChange(_query);
} };
handleRelatedModalShow = (item)=>{ handleRelatedModalShow = (item) => {
const selectPlanList = {}; const selectPlanList = {};
if(item.relatedPlanList){ if (item.relatedPlanList) {
item.relatedPlanList.map((item,index)=>{ item.relatedPlanList.map((item, index) => {
selectPlanList[item.planId] = {} selectPlanList[item.planId] = {};
selectPlanList[item.planId].planId = item.planId; selectPlanList[item.planId].planId = item.planId;
selectPlanList[item.planId].taskBaseVOList = [{taskId:item.taskId}]; selectPlanList[item.planId].taskBaseVOList = [{ taskId: item.taskId }];
return item return item;
}) });
}
this.setState({
RelatedPlanModalVisible:true,
selectCourseId:item.id,
selectPlanList:selectPlanList
})
} }
closeRelatedPlanModalVisible = ()=>{
this.setState({ this.setState({
RelatedPlanModalVisible:false RelatedPlanModalVisible: true,
}) selectCourseId: item.id,
} selectPlanList: selectPlanList,
onChangeSelectPlanList = (selectPlanList)=>{ });
};
closeRelatedPlanModalVisible = () => {
this.setState({ this.setState({
selectPlanList:selectPlanList RelatedPlanModalVisible: false,
}) });
} };
onConfirmSelectPlanList = ()=>{ onChangeSelectPlanList = (selectPlanList) => {
this.setState({ this.setState({
RelatedPlanModalVisible:false selectPlanList: selectPlanList,
},()=>{this.props.onChange();}) });
};
onConfirmSelectPlanList = () => {
this.setState(
{
RelatedPlanModalVisible: false,
},
() => {
this.props.onChange();
} }
);
};
render() { render() {
const { RelatedPlanModalVisible, selectCourseId, selectPlanList } = this.state; const { RelatedPlanModalVisible, selectCourseId, selectPlanList } = this.state;
const { dataSource = [], totalCount, query } = this.props; const { dataSource = [], totalCount, query } = this.props;
const { current, size } = query; const { current, size } = query;
return ( return (
<div className="video-course-list"> <div className='video-course-list'>
<Table <XMTable
rowKey={record => record.id} renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.id}
dataSource={dataSource} dataSource={dataSource}
columns={this.parseColumns()} columns={this.parseColumns()}
onChange={this.handleChangeTable} onChange={this.handleChangeTable}
pagination={false} pagination={false}
scroll={{ x: 1500}} scroll={{ x: 1500 }}
bordered bordered
className="video-list-table" className='video-list-table'
/> />
<div className="box-footer"> <div className='box-footer'>
<PageControl <PageControl
current={current - 1} current={current - 1}
pageSize={size} pageSize={size}
total={totalCount} total={totalCount}
toPage={(page) => { toPage={(page) => {
const _query = {...query, current: page + 1}; const _query = { ...query, current: page + 1 };
this.props.onChange(_query) this.props.onChange(_query);
}} }}
/> />
</div> </div>
{RelatedPlanModalVisible && {RelatedPlanModalVisible && (
<RelatedPlanModal <RelatedPlanModal
onClose={this.closeRelatedPlanModalVisible} onClose={this.closeRelatedPlanModalVisible}
visible={RelatedPlanModalVisible} visible={RelatedPlanModalVisible}
...@@ -468,8 +491,8 @@ class GraphicsCourseList extends React.Component { ...@@ -468,8 +491,8 @@ class GraphicsCourseList extends React.Component {
onChange={this.onChangeSelectPlanList} onChange={this.onChangeSelectPlanList}
onConfirm={this.onConfirmSelectPlanList} onConfirm={this.onConfirmSelectPlanList}
/> />
} )}
{ RelatedPlanModalVisible && {RelatedPlanModalVisible && (
<RelatedPlanModal <RelatedPlanModal
onClose={this.closeRelatedPlanModalVisible} onClose={this.closeRelatedPlanModalVisible}
visible={RelatedPlanModalVisible} visible={RelatedPlanModalVisible}
...@@ -478,11 +501,11 @@ class GraphicsCourseList extends React.Component { ...@@ -478,11 +501,11 @@ class GraphicsCourseList extends React.Component {
onChange={this.onChangeSelectPlanList} onChange={this.onChangeSelectPlanList}
onConfirm={this.onConfirmSelectPlanList} onConfirm={this.onConfirmSelectPlanList}
/> />
} )}
{ this.state.shareLiveModal } {this.state.shareLiveModal}
{ this.state.watchDataModal } {this.state.watchDataModal}
</div> </div>
) );
} }
} }
......
src/modules/course-manage/graphics-course/modal/WatchDataModal.jsx
...@@ -6,79 +6,85 @@ ...@@ -6,79 +6,85 @@
* @Description 余额异常弹窗 * @Description 余额异常弹窗
*/ */
import React from 'react'; import React from 'react';
import {Table, Modal,Input} from 'antd'; import { Modal, Input } from 'antd';
import { PageControl } from "@/components"; import college from '@/common/lottie/college';
import Service from "@/common/js/service"; import { PageControl, XMTable } from '@/components';
import User from '@/common/js/user' import Service from '@/common/js/service';
import User from '@/common/js/user';
import './WatchDataModal.less'; import './WatchDataModal.less';
import dealTimeDuration from "../../utils/dealTimeDuration"; import dealTimeDuration from '../../utils/dealTimeDuration';
const { Search } = Input; const { Search } = Input;
class WatchDataModal extends React.Component { class WatchDataModal extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
visible:true, visible: true,
dataSource:[], dataSource: [],
size:10, size: 10,
query: { query: {
current: 1, current: 1,
}, },
totalCount:0 totalCount: 0,
}; };
} }
componentDidMount() { componentDidMount() {
this.handleFetchDataList(); this.handleFetchDataList();
} }
onClose = () =>{ onClose = () => {
this.props.close(); this.props.close();
} };
// 获取观看视频数据列表 // 获取观看视频数据列表
handleFetchDataList = () => { handleFetchDataList = () => {
const {query,size,totalCount} = this.state const { query, size, totalCount } = this.state;
const { id } = this.props.data; const { id } = this.props.data;
const params ={ const params = {
...query, ...query,
size, size,
courseId:id, courseId: id,
storeId:User.getStoreId() storeId: User.getStoreId(),
} };
Service.Hades('public/hades/mediaCourseWatchInfo', params).then((res) => { Service.Hades('public/hades/mediaCourseWatchInfo', params).then((res) => {
const { result = {} } = res ; const { result = {} } = res;
const { records = [], total = 0 } = result; const { records = [], total = 0 } = result;
this.setState({ this.setState({
dataSource: records, dataSource: records,
totalCount: Number(total) totalCount: Number(total),
}); });
}); });
} };
handleChangNickname = (value)=>{ handleChangNickname = (value) => {
const isPhone = (value || '').match(/^\d+$/); const isPhone = (value || '').match(/^\d+$/);
const { query } = this.state; const { query } = this.state;
if(isPhone){ if (isPhone) {
query.phone = value; query.phone = value;
query.nickName = null; query.nickName = null;
}else{ } else {
query.nickName = value; query.nickName = value;
query.phone = null; query.phone = null;
} }
query.current = 1; query.current = 1;
this.setState({ this.setState({
query query,
}) });
} };
onShowSizeChange = (current, size) => { onShowSizeChange = (current, size) => {
if (current == size) { if (current == size) {
return return;
} }
this.setState({ this.setState(
size {
},()=>{this.handleFetchDataList()}) size,
},
() => {
this.handleFetchDataList();
} }
);
};
// 请求表头 // 请求表头
parseColumns = () => { parseColumns = () => {
...@@ -86,91 +92,109 @@ class WatchDataModal extends React.Component { ...@@ -86,91 +92,109 @@ class WatchDataModal extends React.Component {
{ {
title: '观看学员', title: '观看学员',
key: 'name', key: 'name',
dataIndex: 'name' dataIndex: 'name',
}, },
{ {
title: '手机号', title: '手机号',
key: 'phone', key: 'phone',
dataIndex: 'phone' dataIndex: 'phone',
}, },
{ {
title: '观看者类型', title: '观看者类型',
key: 'userRole', key: 'userRole',
dataIndex: 'userRole' dataIndex: 'userRole',
}, },
{ {
title: '首次观看时间', title: '首次观看时间',
key: 'firstWatch', key: 'firstWatch',
dataIndex: 'firstWatch', dataIndex: 'firstWatch',
render: (val) => { render: (val) => {
return formatDate('YYYY-MM-DD H:i', val) return formatDate('YYYY-MM-DD H:i', val);
} },
}, },
{ {
title: '观看总时长', title: '观看总时长',
key: 'watchDuration', key: 'watchDuration',
dataIndex: 'watchDuration', dataIndex: 'watchDuration',
render: (val) => { render: (val) => {
return <span>{val ? dealTimeDuration(val) : "00:00:00" }</span> return <span>{val ? dealTimeDuration(val) : '00:00:00'}</span>;
} },
}, },
{ {
title: '学习进度', title: '学习进度',
key: 'progress', key: 'progress',
dataIndex: 'progress', dataIndex: 'progress',
render: (val) => { render: (val) => {
return <span>{val === 100 ? '已完成' : `${val || 0}%`}</span> return <span>{val === 100 ? '已完成' : `${val || 0}%`}</span>;
} },
} },
]; ];
return columns; return columns;
} };
render() { render() {
const { visible,size,dataSource,totalCount,query} = this.state; const { visible, size, dataSource, totalCount, query } = this.state;
return ( return (
<Modal <Modal
title="图文课观看数据" title='图文课观看数据'
visible={visible} visible={visible}
footer={null} footer={null}
onCancel={this.onClose} onCancel={this.onClose}
maskClosable={false} maskClosable={false}
className="watch-data-modal" className='watch-data-modal'
closable={true} closable={true}
width={800} width={800}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}>
> <div className='search-container'>
<div className="search-container"> <Search
<Search placeholder="搜索学员姓名/手机号" style={{ width: 200 }} onChange={(e) => { this.handleChangNickname(e.target.value)}} onSearch={ () => { this.handleFetchDataList()}} enterButton={<span className="icon iconfont">&#xe832;</span>}/> placeholder='搜索学员姓名/手机号'
style={{ width: 200 }}
onChange={(e) => {
this.handleChangNickname(e.target.value);
}}
onSearch={() => {
this.handleFetchDataList();
}}
enterButton={<span className='icon iconfont'>&#xe832;</span>}
/>
</div> </div>
<div> <div>
<Table <XMTable
rowKey={record => record.id} renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.id}
dataSource={dataSource} dataSource={dataSource}
columns={this.parseColumns()} columns={this.parseColumns()}
pagination={false} pagination={false}
bordered bordered
/> />
{dataSource.length >0 && {dataSource.length > 0 && (
<div className="box-footer"> <div className='box-footer'>
<PageControl <PageControl
current={query.current - 1} current={query.current - 1}
pageSize={size} pageSize={size}
total={totalCount} total={totalCount}
size="small" size='small'
toPage={(page) => { toPage={(page) => {
const _query = {...query, current: page + 1}; const _query = { ...query, current: page + 1 };
this.setState({ this.setState(
query:_query {
},()=>{ this.handleFetchDataList()}) query: _query,
},
() => {
this.handleFetchDataList();
}
);
}} }}
onShowSizeChange={this.onShowSizeChange} onShowSizeChange={this.onShowSizeChange}
/> />
</div> </div>
} )}
</div> </div>
</Modal> </Modal>
) );
} }
} }
......
src/modules/course-manage/modal/AccountChargeRecords.jsx
import college from '@/common/lottie/college';
import { XMTable } from '@/components';
import { Modal } from 'antd';
import React from 'react'; import React from 'react';
import { Modal, Table } from "antd"; import './AccountChargeModal.less';
import ChargeArgeement from "./ChargeArgeement"; import ChargeArgeement from './ChargeArgeement';
import "./AccountChargeModal.less"; class AccountChargeRecords extends React.Component {
class AccountChargeRecords extends React.Component{
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
...@@ -15,9 +17,7 @@ class AccountChargeRecords extends React.Component{ ...@@ -15,9 +17,7 @@ class AccountChargeRecords extends React.Component{
getList = () => { getList = () => {
const { instId } = window.currentUserInstInfo; const { instId } = window.currentUserInstInfo;
axios axios.Business('public/liveAssets/rechargeProtocol', { instId }).then((res) => {
.Business("public/liveAssets/rechargeProtocol", { instId })
.then((res) => {
const list = res.result; const list = res.result;
this.setState({ this.setState({
list, list,
...@@ -42,29 +42,28 @@ class AccountChargeRecords extends React.Component{ ...@@ -42,29 +42,28 @@ class AccountChargeRecords extends React.Component{
render() { render() {
const columns = [ const columns = [
{ {
title: "签订人", title: '签订人',
dataIndex: "operatorName", dataIndex: 'operatorName',
width: 140 width: 140,
}, },
{ title: "关联订单ID", dataIndex: "orderId" }, { title: '关联订单ID', dataIndex: 'orderId' },
{ {
title: "签订时间", title: '签订时间',
dataIndex: "createTime", dataIndex: 'createTime',
render: (text, record) => { render: (text, record) => {
return <span>{formatDate("YYYY-MM-DD H:i", parseInt(text))}</span>; return <span>{formatDate('YYYY-MM-DD H:i', parseInt(text))}</span>;
}, },
}, },
{ {
title: "签订协议", title: '签订协议',
dataIndex: "operate", dataIndex: 'operate',
render: (text, record) => { render: (text, record) => {
return ( return (
<div <div
style={{ cursor: "pointer", color: "#FC9C6B" }} style={{ cursor: 'pointer', color: '#FC9C6B' }}
onClick={() => { onClick={() => {
this.handleProtcol(record.protocolId); this.handleProtcol(record.protocolId);
}} }}>
>
《服务协议》 《服务协议》
</div> </div>
); );
...@@ -74,29 +73,31 @@ class AccountChargeRecords extends React.Component{ ...@@ -74,29 +73,31 @@ class AccountChargeRecords extends React.Component{
const { list } = this.state; const { list } = this.state;
return ( return (
<Modal <Modal
title="服务协议签订记录" title='服务协议签订记录'
visible={true} visible={true}
width={680} width={680}
footer={null} footer={null}
maskClosable={false} maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}
onCancel={() => { onCancel={() => {
this.props.close(); this.props.close();
}} }}>
>
<div> <div>
<div <div
style={{ style={{
fontSize: "14px", fontSize: '14px',
color: "#666666", color: '#666666',
lineHeight: "20px", lineHeight: '20px',
marginBottom: 16, marginBottom: 16,
}} }}>
>
以下是本校区自助充值时签订协议的记录 以下是本校区自助充值时签订协议的记录
</div> </div>
<Table <XMTable
size="middle" renderEmpty={{
image: college,
description: '暂无数据',
}}
size='middle'
columns={columns} columns={columns}
dataSource={list} dataSource={list}
pagination={false} pagination={false}
......
src/modules/course-manage/modal/ChargingDetailModal.jsx
import college from '@/common/lottie/college';
import { PageControl, XMTable } from '@/components';
import { Modal, Tooltip } from 'antd';
import React from 'react'; import React from 'react';
import { Modal, Table, Tooltip } from "antd"; import './AccountChargeModal.less';
import { ShowTips, PageControl } from "@/components";
import "./AccountChargeModal.less";
class ChargingDetailModal extends React.Component { class ChargingDetailModal extends React.Component {
constructor(props) { constructor(props) {
...@@ -25,9 +26,7 @@ class ChargingDetailModal extends React.Component { ...@@ -25,9 +26,7 @@ class ChargingDetailModal extends React.Component {
handleToPage = (page = 1) => { handleToPage = (page = 1) => {
const params = _.clone(this.state.query); const params = _.clone(this.state.query);
params.current = page; params.current = page;
axios axios.Apollo('public/businessLive/queryStudentVisitData', params).then((res) => {
.Apollo("public/businessLive/queryStudentVisitData", params)
.then((res) => {
if (res.result) { if (res.result) {
const { records = [], total } = res.result; const { records = [], total } = res.result;
this.setState({ this.setState({
...@@ -40,7 +39,7 @@ class ChargingDetailModal extends React.Component { ...@@ -40,7 +39,7 @@ class ChargingDetailModal extends React.Component {
}; };
getTeacherData = () => { getTeacherData = () => {
window.axios window.axios
.Apollo("public/businessLive/queryTeacherVisitData", { .Apollo('public/businessLive/queryTeacherVisitData', {
liveCourseId: this.props.liveCourseId, liveCourseId: this.props.liveCourseId,
}) })
.then((res) => { .then((res) => {
...@@ -57,27 +56,27 @@ class ChargingDetailModal extends React.Component { ...@@ -57,27 +56,27 @@ class ChargingDetailModal extends React.Component {
let hours = Math.floor(time / 3600); let hours = Math.floor(time / 3600);
let mins = Math.floor(diff / 60); let mins = Math.floor(diff / 60);
let seconds = Math.floor(time % 60); let seconds = Math.floor(time % 60);
hours = hours < 10 ? "0" + hours : hours; hours = hours < 10 ? '0' + hours : hours;
mins = mins < 10 ? "0" + mins : mins; mins = mins < 10 ? '0' + mins : mins;
seconds = seconds < 10 ? "0" + seconds : seconds; seconds = seconds < 10 ? '0' + seconds : seconds;
return hours + ":" + mins + ":" + seconds; return hours + ':' + mins + ':' + seconds;
}; };
getColumns = (type) => { getColumns = (type) => {
const columns = [ const columns = [
{ {
title: type == "student" ? "学生姓名" : "老师姓名", title: type == 'student' ? '学生姓名' : '老师姓名',
dataIndex: "userName", dataIndex: 'userName',
}, },
{ {
title: "手机号", title: '手机号',
dataIndex: "phone", dataIndex: 'phone',
render: (text, record) => { render: (text, record) => {
return <p>{text}</p>; return <p>{text}</p>;
}, },
}, },
{ {
title: "累计在线时长", title: '累计在线时长',
dataIndex: "totalDuration", dataIndex: 'totalDuration',
render: (text, record) => { render: (text, record) => {
return <span>{text ? this.dealTimeDuration(text) : '-'}</span>; return <span>{text ? this.dealTimeDuration(text) : '-'}</span>;
}, },
...@@ -86,14 +85,14 @@ class ChargingDetailModal extends React.Component { ...@@ -86,14 +85,14 @@ class ChargingDetailModal extends React.Component {
title: ( title: (
<span> <span>
是否计费&nbsp; 是否计费&nbsp;
<Tooltip title="仅对累计在线时长≥10分钟的老师或学员计费"> <Tooltip title='仅对累计在线时长≥10分钟的老师或学员计费'>
<span className="icon iconfont">&#xe6f2;</span> <span className='icon iconfont'>&#xe6f2;</span>
</Tooltip> </Tooltip>
</span> </span>
), ),
dataIndex: "type", dataIndex: 'type',
render: (text, record) => { render: (text, record) => {
return <span>{record.totalDuration > 600 ? "计费" : "不计费"}</span>; //大于十分钟的计费 return <span>{record.totalDuration > 600 ? '计费' : '不计费'}</span>; //大于十分钟的计费
}, },
}, },
]; ];
...@@ -103,38 +102,45 @@ class ChargingDetailModal extends React.Component { ...@@ -103,38 +102,45 @@ class ChargingDetailModal extends React.Component {
const { list, query, totalCount, teacherList } = this.state; const { list, query, totalCount, teacherList } = this.state;
return ( return (
<Modal <Modal
title="计费人数详情" title='计费人数详情'
visible={true} visible={true}
width={680} width={680}
maskClosable={false} maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}
className="charging-detail-modal" className='charging-detail-modal'
footer={null} footer={null}
onCancel={() => { onCancel={() => {
this.props.close(); this.props.close();
}} }}>
>
<div> <div>
<div style={{ marginBottom: 16 }}> <div style={{ marginBottom: 16 }}>
<div className="detail-title">老师详情</div> <div className='detail-title'>老师详情</div>
<Table <XMTable
size="middle" renderEmpty={{
columns={this.getColumns("teacher")} image: college,
description: '暂无数据',
}}
size='middle'
columns={this.getColumns('teacher')}
dataSource={teacherList} dataSource={teacherList}
pagination={false} pagination={false}
bordered bordered
/> />
</div> </div>
<div className="detail-title">学生详情</div> <div className='detail-title'>学生详情</div>
<Table <XMTable
size="middle" renderEmpty={{
columns={this.getColumns("student")} image: college,
description: '暂无数据',
}}
size='middle'
columns={this.getColumns('student')}
dataSource={list} dataSource={list}
pagination={false} pagination={false}
bordered bordered
/> />
<PageControl <PageControl
size="small" size='small'
current={query.current - 1} current={query.current - 1}
pageSize={query.size} pageSize={query.size}
total={totalCount} total={totalCount}
......
src/modules/course-manage/modal/ClassRecordModal.jsx
...@@ -6,16 +6,14 @@ ...@@ -6,16 +6,14 @@
* @LastEditTime: 2021-02-01 14:00:19 * @LastEditTime: 2021-02-01 14:00:19
*/ */
import React, { useState, useEffect } from "react"; import college from '@/common/lottie/college';
import { Modal, Table, Input, Button, message, Checkbox, Tooltip } from "antd"; import { PageControl, XMTable } from '@/components';
import Bus from '@/core/bus'; import Bus from '@/core/bus';
import { PageControl } from "@/components"; import { Button, Checkbox, Input, message, Modal, Tooltip } from 'antd';
import React from 'react';
import hasExportPermission from '../utils/hasExportPermission';
import dealTimeDuration from '../utils/dealTimeDuration'; import dealTimeDuration from '../utils/dealTimeDuration';
import hasExportPermission from '../utils/hasExportPermission';
import "./ClassRecordModal.less"; import './ClassRecordModal.less';
const { Search } = Input; const { Search } = Input;
...@@ -28,7 +26,7 @@ class ClassRecordModal extends React.Component { ...@@ -28,7 +26,7 @@ class ClassRecordModal extends React.Component {
query: { query: {
current: 1, current: 1,
size: 10, size: 10,
nameOrPhone: "", nameOrPhone: '',
liveSignState: '', liveSignState: '',
durationSort: null, durationSort: null,
liveCourseId: props.liveItem.liveCourseId, liveCourseId: props.liveItem.liveCourseId,
...@@ -42,13 +40,11 @@ class ClassRecordModal extends React.Component { ...@@ -42,13 +40,11 @@ class ClassRecordModal extends React.Component {
fetchClassList = (page = 1) => { fetchClassList = (page = 1) => {
const params = _.clone(this.state.query); const params = _.clone(this.state.query);
if(!params.liveSignState) { if (!params.liveSignState) {
delete params.liveSignState; delete params.liveSignState;
} }
params.current = page; params.current = page;
window.axios window.axios.Apollo('public/businessLive/queryStudentVisitData', params).then((res) => {
.Apollo("public/businessLive/queryStudentVisitData", params)
.then((res) => {
if (res.result) { if (res.result) {
const { records = [], total } = res.result; const { records = [], total } = res.result;
this.setState({ this.setState({
...@@ -61,9 +57,7 @@ class ClassRecordModal extends React.Component { ...@@ -61,9 +57,7 @@ class ClassRecordModal extends React.Component {
}; };
fetchTeacherData = () => { fetchTeacherData = () => {
const { liveCourseId } = this.props.liveItem; const { liveCourseId } = this.props.liveItem;
window.axios window.axios.Apollo('public/businessLive/queryTeacherVisitData', { liveCourseId }).then((res) => {
.Apollo("public/businessLive/queryTeacherVisitData", { liveCourseId })
.then((res) => {
if (res.result) { if (res.result) {
const teacherData = [res.result]; const teacherData = [res.result];
this.setState({ this.setState({
...@@ -78,70 +72,72 @@ class ClassRecordModal extends React.Component { ...@@ -78,70 +72,72 @@ class ClassRecordModal extends React.Component {
const source = this.props.type; const source = this.props.type;
const columns = [ const columns = [
{ {
title: type == "student" ? "学生姓名" : "老师姓名", title: type == 'student' ? '学生姓名' : '老师姓名',
dataIndex: "userName", dataIndex: 'userName',
}, },
{ {
title: "手机号", title: '手机号',
dataIndex: "phone", dataIndex: 'phone',
render: (text, record) => { render: (text, record) => {
return ( return (
<p> <p>
{!( {!((!window.NewVersion && !window.currentUserInstInfo.teacherId) || (window.NewVersion && Permission.hasEduStudentPhone())) && type == 'student'
(!window.NewVersion && !window.currentUserInstInfo.teacherId) || ? (text || '').replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3')
(window.NewVersion && Permission.hasEduStudentPhone())
) && type == "student"
? (text || "").replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3")
: text} : text}
</p> </p>
); );
}, },
}, },
{ {
title: type == "student" ? "观看直播次数" : "进入直播间次数", title: type == 'student' ? '观看直播次数' : '进入直播间次数',
dataIndex: "entryNum", dataIndex: 'entryNum',
align:'right' align: 'right',
}, },
{ {
title: "累计上课时长", title: '累计上课时长',
dataIndex: type == "student" ? "watchDuration" : "totalDuration", dataIndex: type == 'student' ? 'watchDuration' : 'totalDuration',
sorter: sorter: type == 'student' ? (a, b) => a.watchDuration - b.watchDuration : null,
type == "student" sortDirections: ['descend', 'ascend'],
? (a, b) => a.watchDuration - b.watchDuration
: null,
sortDirections: ["descend", "ascend"],
render: (text, record) => { render: (text, record) => {
//如无离开时间，就置空 //如无离开时间，就置空
return ( return <span>{text ? dealTimeDuration(text) : '00:00:00'}</span>;
<span>
{text ? dealTimeDuration(text) : '00:00:00'}
</span>
);
}, },
}, },
]; ];
if(type == "student") { if (type == 'student') {
columns.push({ columns.push({
title: <span>到课状态<Tooltip title={<div>学员累计上课时长达到<span className="bulge">{consumeClassTime}</span>分钟，即视为学员“到课”</div>}><span className="iconfont">&#xe6f2;</span></Tooltip></span>, title: (
<span>
到课状态
<Tooltip
title={
<div>
学员累计上课时长达到<span className='bulge'>{consumeClassTime}</span>分钟，即视为学员“到课”
</div>
}>
<span className='iconfont'>&#xe6f2;</span>
</Tooltip>
</span>
),
width: 100, width: 100,
dataIndex: "signState", dataIndex: 'signState',
render: (text) => { render: (text) => {
if(text) { if (text) {
return <span>{text === 'ABSENT' ? '未到' : '到课'}</span> return <span>{text === 'ABSENT' ? '未到' : '到课'}</span>;
} else { } else {
return <span>-</span> return <span>-</span>;
}
} }
}) },
if(source) { });
if (source) {
columns.push({ columns.push({
title: "获得奖杯数", title: '获得奖杯数',
dataIndex: "trophyNum", dataIndex: 'trophyNum',
align:'right', align: 'right',
render: (text) => { render: (text) => {
return <span>{text ? text : 0}</span> return <span>{text ? text : 0}</span>;
} },
}) });
} }
} }
return columns; return columns;
...@@ -150,11 +146,11 @@ class ClassRecordModal extends React.Component { ...@@ -150,11 +146,11 @@ class ClassRecordModal extends React.Component {
handleTableChange = (pagination, filters, sorter) => { handleTableChange = (pagination, filters, sorter) => {
const query = this.state.query; const query = this.state.query;
if (!_.isEmpty(sorter)) { if (!_.isEmpty(sorter)) {
if (sorter.columnKey === "totalDuration") { if (sorter.columnKey === 'totalDuration') {
if (sorter.order === "ascend") { if (sorter.order === 'ascend') {
query.durationSort = "SORT_ASC"; query.durationSort = 'SORT_ASC';
} else if (sorter.order === "descend") { } else if (sorter.order === 'descend') {
query.durationSort = "SORT_DESC"; query.durationSort = 'SORT_DESC';
} }
this.setState({ query }, this.fetchClassList); this.setState({ query }, this.fetchClassList);
} }
...@@ -165,20 +161,22 @@ class ClassRecordModal extends React.Component { ...@@ -165,20 +161,22 @@ class ClassRecordModal extends React.Component {
handleExportV5 = () => { handleExportV5 = () => {
const { liveItem, type } = this.props; const { liveItem, type } = this.props;
const { liveCourseId } = liveItem; const { liveCourseId } = liveItem;
const url = !type ? 'public/businessLive/exportLargeClassLiveAsync' : 'public/businessLive/exportClassInteractionLiveSync' const url = !type ? 'public/businessLive/exportLargeClassLiveAsync' : 'public/businessLive/exportClassInteractionLiveSync';
window.axios.Apollo(url, { window.axios
.Apollo(url, {
liveCourseId, liveCourseId,
exportLiveType: 'VISITOR' exportLiveType: 'VISITOR',
}).then((res) => { })
.then((res) => {
Bus.trigger('get_download_count'); Bus.trigger('get_download_count');
Modal.success({ Modal.success({
title: '导出任务提交成功', title: '导出任务提交成功',
content: '请前往右上角的“任务中心”进行下载', content: '请前往右上角的“任务中心”进行下载',
okText: '我知道了', okText: '我知道了',
}); });
}) });
} };
// 4.0导出 // 4.0导出
handleExport = () => { handleExport = () => {
...@@ -186,43 +184,41 @@ class ClassRecordModal extends React.Component { ...@@ -186,43 +184,41 @@ class ClassRecordModal extends React.Component {
const { liveCourseId } = liveItem; const { liveCourseId } = liveItem;
const url = !type ? 'api-b/b/lesson/exportLargeClassLiveAsync' : 'api-b/b/lesson/exportClassInteractionLiveSync'; const url = !type ? 'api-b/b/lesson/exportLargeClassLiveAsync' : 'api-b/b/lesson/exportClassInteractionLiveSync';
window.axios.post(url, { window.axios
.post(url, {
liveCourseId, liveCourseId,
exportLiveType: 1 exportLiveType: 1,
}).then((res) => { })
.then((res) => {
Bus.trigger('get_download_count'); Bus.trigger('get_download_count');
Modal.success({ Modal.success({
title: '导出任务提交成功', title: '导出任务提交成功',
content: '请前往右上角的“导出中心”进行下载', content: '请前往右上角的“导出中心”进行下载',
okText: '我知道了', okText: '我知道了',
}); });
}) });
} };
render() { render() {
const { type } = this.props; const { type } = this.props;
const { query, total, teacherData, classList } = this.state; const { query, total, teacherData, classList } = this.state;
const expandedColumns = [ const expandedColumns = [
{ {
title: "进入时间", title: '进入时间',
dataIndex: "entryTime", dataIndex: 'entryTime',
key: "entryTime", key: 'entryTime',
render: (text) => ( render: (text) => <span>{formatDate('YYYY-MM-DD H:i', parseInt(text))}</span>,
<span>{formatDate("YYYY-MM-DD H:i", parseInt(text))}</span>
),
}, },
{ {
title: "离开时间", title: '离开时间',
dataIndex: "leaveTime", dataIndex: 'leaveTime',
key: "leaveTime", key: 'leaveTime',
render: (text) => ( render: (text) => <span>{formatDate('YYYY-MM-DD H:i', parseInt(text))}</span>,
<span>{formatDate("YYYY-MM-DD H:i", parseInt(text))}</span>
),
}, },
{ {
title: "上课时长", title: '上课时长',
dataIndex: "lookingDuration", dataIndex: 'lookingDuration',
key: "lookingDuration", key: 'lookingDuration',
render: (text, record) => { render: (text, record) => {
return <span>{text ? dealTimeDuration(text) : '-'}</span>; return <span>{text ? dealTimeDuration(text) : '-'}</span>;
}, },
...@@ -230,64 +226,73 @@ class ClassRecordModal extends React.Component { ...@@ -230,64 +226,73 @@ class ClassRecordModal extends React.Component {
]; ];
return ( return (
<Modal <Modal
title="上课记录" title='上课记录'
visible={true} visible={true}
footer={null} footer={null}
width={680} width={680}
maskClosable={false} maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}
className="class-record-modal" className='class-record-modal'
onCancel={() => { onCancel={() => {
this.props.close(); this.props.close();
}} }}>
>
<div> <div>
<p className="class-record-title" style={{ marginBottom: 18 }}> <p className='class-record-title' style={{ marginBottom: 18 }}>
老师上课数据 老师上课数据
</p> </p>
<Table <XMTable
size="small" renderEmpty={{
columns={this.getColumns("teacher")} image: college,
description: '暂无数据',
}}
size='small'
columns={this.getColumns('teacher')}
dataSource={teacherData} dataSource={teacherData}
pagination={false} pagination={false}
className="table-no-scrollbar" className='table-no-scrollbar'
expandedRowRender={(record) => { expandedRowRender={(record) => {
if ( if (record.visitorInfoVOList && record.visitorInfoVOList.length > 0) {
record.visitorInfoVOList &&
record.visitorInfoVOList.length > 0
) {
return ( return (
<Table <XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
columns={expandedColumns} columns={expandedColumns}
dataSource={record.visitorInfoVOList} dataSource={record.visitorInfoVOList}
size={"small"} size={'small'}
className="no-scrollbar expanded-table" className='no-scrollbar expanded-table'
pagination={false} pagination={false}
></Table> />
); );
} else { } else {
return <div className="live-table--empty">暂无上课数据</div>; return <div className='live-table--empty'>暂无上课数据</div>;
} }
}} }}
></Table> />
<div className="student-wrapper"> <div className='student-wrapper'>
<section className="class-record-title">学员上课数据</section> <section className='class-record-title'>学员上课数据</section>
<section> <section>
<Checkbox <Checkbox
style={{lineHeight: '33px'}} style={{ lineHeight: '33px' }}
onChange={(e) => { onChange={(e) => {
const param = _.clone(this.state.query); const param = _.clone(this.state.query);
param.current = 1; param.current = 1;
param.liveSignState = e.target.checked ? 'SIGN' : ''; param.liveSignState = e.target.checked ? 'SIGN' : '';
this.setState({ this.setState(
query: param {
}, () => { query: param,
},
() => {
this.fetchClassList(); this.fetchClassList();
}) }
}}>只看“到课”学员</Checkbox> );
}}>
只看“到课”学员
</Checkbox>
<Search <Search
className="student-wrapper__search" className='student-wrapper__search'
placeholder="搜索学员姓名/手机号" placeholder='搜索学员姓名/手机号'
style={{ width: 200, marginBottom: 0 }} style={{ width: 200, marginBottom: 0 }}
onSearch={(value) => { onSearch={(value) => {
const param = _.clone(this.state.query); const param = _.clone(this.state.query);
...@@ -303,9 +308,10 @@ class ClassRecordModal extends React.Component { ...@@ -303,9 +308,10 @@ class ClassRecordModal extends React.Component {
); );
}} }}
/> />
{ {hasExportPermission(type) && (
hasExportPermission(type) && <Button
<Button onClick={_.debounce(() => { onClick={_.debounce(
() => {
if (!classList.length) { if (!classList.length) {
message.warning('暂无数据可导出'); message.warning('暂无数据可导出');
return; return;
...@@ -315,40 +321,49 @@ class ClassRecordModal extends React.Component { ...@@ -315,40 +321,49 @@ class ClassRecordModal extends React.Component {
} else { } else {
this.handleExport(); this.handleExport();
} }
}, 500, true)}>导出</Button> },
} 500,
true
)}>
导出
</Button>
)}
</section> </section>
</div> </div>
<div> <div>
<Table <XMTable
size="small" renderEmpty={{
columns={this.getColumns("student")} image: college,
description: '暂无数据',
}}
size='small'
columns={this.getColumns('student')}
dataSource={classList} dataSource={classList}
pagination={false} pagination={false}
className="table-no-scrollbar" className='table-no-scrollbar'
onChange={this.handleTableChange} onChange={this.handleTableChange}
expandedRowRender={(record) => { expandedRowRender={(record) => {
if ( if (record.visitorInfoVOList && record.visitorInfoVOList.length > 0) {
record.visitorInfoVOList &&
record.visitorInfoVOList.length > 0
) {
return ( return (
<Table <XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
columns={expandedColumns} columns={expandedColumns}
dataSource={record.visitorInfoVOList} dataSource={record.visitorInfoVOList}
size={"small"} size={'small'}
className="no-scrollbar expanded-table" className='no-scrollbar expanded-table'
pagination={false} pagination={false}
></Table> />
); );
} else { } else {
return <div className="live-table--empty">暂无上课数据</div>; return <div className='live-table--empty'>暂无上课数据</div>;
} }
}} }}
></Table> />
<PageControl <PageControl
size="small" size='small'
current={query.current - 1} current={query.current - 1}
pageSize={query.size} pageSize={query.size}
total={total} total={total}
......
src/modules/course-manage/modal/LiveStudentListModal.jsx
...@@ -5,61 +5,49 @@ ...@@ -5,61 +5,49 @@
* @Last Modified time: 2020-07-22 16:25:30 * @Last Modified time: 2020-07-22 16:25:30
* 查看学员名单 * 查看学员名单
*/ */
import React from "react"; import college from '@/common/lottie/college';
import { import { PageControl, XMTable } from '@/components';
Modal, import { Button, Input, message, Modal, Popconfirm, Tooltip } from 'antd';
Button, import PropTypes from 'prop-types';
Input, import React from 'react';
Table, import './LiveStudentListModal.less';
Popconfirm, import SelectStudent from './select-student/index';
message,
Tooltip,
} from "antd";
import PropTypes from "prop-types";
import { PageControl } from "@/components";
import SelectStudent from "./select-student/index";
import "./LiveStudentListModal.less";
const { Search } = Input; const { Search } = Input;
const isTeacher = !!window.currentUserInstInfo.teacherId; const isTeacher = !!window.currentUserInstInfo.teacherId;
const liveTypeMap = { const liveTypeMap = {
LIVE: "直播", LIVE: '直播',
PLAYBACK: "回放", PLAYBACK: '回放',
}; };
const expandedColumns = [ const expandedColumns = [
{ {
title: "类型", title: '类型',
dataIndex: "liveType", dataIndex: 'liveType',
key: "liveType", key: 'liveType',
render: (text) => <span>{liveTypeMap[text]}</span>, render: (text) => <span>{liveTypeMap[text]}</span>,
}, },
{ {
title: "进入时间", title: '进入时间',
dataIndex: "entryTime", dataIndex: 'entryTime',
key: "entryTime", key: 'entryTime',
render: (text) => ( render: (text) => <span>{formatDate('YYYY-MM-DD H:i', parseInt(text))}</span>,
<span>{formatDate("YYYY-MM-DD H:i", parseInt(text))}</span>
),
}, },
{ {
title: "离开时间", title: '离开时间',
dataIndex: "leaveTime", dataIndex: 'leaveTime',
key: "leaveTime", key: 'leaveTime',
render: (text) => ( render: (text) => <span>{formatDate('YYYY-MM-DD H:i', parseInt(text))}</span>,
<span>{formatDate("YYYY-MM-DD H:i", parseInt(text))}</span>
),
}, },
{ title: "观看时长", dataIndex: "lookingTime", key: "lookingTime" }, { title: '观看时长', dataIndex: 'lookingTime', key: 'lookingTime' },
]; ];
const STATUS_ENUM = { const STATUS_ENUM = {
'NORMAL': '在读', NORMAL: '在读',
'POTENTIAL': '潜在', POTENTIAL: '潜在',
'HISTORY': '历史', HISTORY: '历史',
'ABANDON': '废弃', ABANDON: '废弃',
}; };
class LiveStudentListModal extends React.Component { class LiveStudentListModal extends React.Component {
...@@ -86,9 +74,7 @@ class LiveStudentListModal extends React.Component { ...@@ -86,9 +74,7 @@ class LiveStudentListModal extends React.Component {
fetchStudentList = (current = 1) => { fetchStudentList = (current = 1) => {
const query = _.clone(this.state.query); const query = _.clone(this.state.query);
query.current = current; query.current = current;
window.axios window.axios.Apollo('public/businessLive/getStudentList', query).then((res) => {
.Apollo("public/businessLive/getStudentList", query)
.then((res) => {
const { records = [], total } = res.result; const { records = [], total } = res.result;
this.setState({ this.setState({
...@@ -100,15 +86,16 @@ class LiveStudentListModal extends React.Component { ...@@ -100,15 +86,16 @@ class LiveStudentListModal extends React.Component {
}; };
hanldSelect = () => { hanldSelect = () => {
const { query: { liveCourseId } } = this.state; const {
axios.Apollo('public/businessLive/getCourseDetail', { liveCourseId}) query: { liveCourseId },
.then((res) => { } = this.state;
axios.Apollo('public/businessLive/getCourseDetail', { liveCourseId }).then((res) => {
const { result = {} } = res; const { result = {} } = res;
const { consumeStudentIds, studentIds } = result; const { consumeStudentIds, studentIds } = result;
const studentList = []; const studentList = [];
const excludeStudentIds = studentIds; const excludeStudentIds = studentIds;
const excludeConsumeStudentIds = _.pluck(consumeStudentIds, 'studentId'); const excludeConsumeStudentIds = _.pluck(consumeStudentIds, 'studentId');
this.setState({ excludeStudentIds, excludeConsumeStudentIds}); this.setState({ excludeStudentIds, excludeConsumeStudentIds });
_.each(studentIds, (item) => { _.each(studentIds, (item) => {
studentList.push({ studentId: item }); studentList.push({ studentId: item });
...@@ -120,42 +107,39 @@ class LiveStudentListModal extends React.Component { ...@@ -120,42 +107,39 @@ class LiveStudentListModal extends React.Component {
studentList={studentList} studentList={studentList}
excludeStudentIds={excludeStudentIds} excludeStudentIds={excludeStudentIds}
after={true} after={true}
close={() => { this.setState({ studentModal: null }); }} close={() => {
this.setState({ studentModal: null });
}}
onSelect={(studentIds) => { onSelect={(studentIds) => {
this.handleSelectStudent(studentIds) this.handleSelectStudent(studentIds);
}} }}
/> />
) );
this.setState({ studentModal }); this.setState({ studentModal });
}) });
}; };
handleSelectStudent = (studentIds) => { handleSelectStudent = (studentIds) => {
const { const { liveType, liveCourseId, podium, quota } = this.props.liveItem;
liveType,
liveCourseId,
podium,
quota,
} = this.props.liveItem;
if (liveType !== "SMALL_CLASS_INTERACTION" && (studentIds.length) > 1000) { if (liveType !== 'SMALL_CLASS_INTERACTION' && studentIds.length > 1000) {
message.info(`最多选择1000人`); message.info(`最多选择1000人`);
return; return;
} else if (liveType == "SMALL_CLASS_INTERACTION" && (studentIds.length) > podium) { } else if (liveType == 'SMALL_CLASS_INTERACTION' && studentIds.length > podium) {
message.info(`最多选择${podium}人`); message.info(`最多选择${podium}人`);
return; return;
} else { } else {
const param = { const param = {
liveCourseId: liveCourseId, liveCourseId: liveCourseId,
studentIds: studentIds studentIds: studentIds,
}; };
axios.Apollo("public/businessLive/addCourseStu", param).then(res => { axios.Apollo('public/businessLive/addCourseStu', param).then((res) => {
if (res.success) { if (res.success) {
this.setState({ this.setState({
studentModal: null studentModal: null,
}); });
message.success("学员变更成功"); message.success('学员变更成功');
this.fetchStudentList(); this.fetchStudentList();
this.props.refresh(); this.props.refresh();
} }
...@@ -170,10 +154,8 @@ class LiveStudentListModal extends React.Component { ...@@ -170,10 +154,8 @@ class LiveStudentListModal extends React.Component {
liveCourseId, liveCourseId,
studentId, studentId,
}; };
window.axios window.axios.Apollo('public/businessLive/moveCourseStu', param).then((res) => {
.Apollo("public/businessLive/moveCourseStu", param) message.success('移除学员成功');
.then((res) => {
message.success("移除学员成功");
this.fetchStudentList(1); this.fetchStudentList(1);
this.props.refresh(); this.props.refresh();
}); });
...@@ -182,47 +164,41 @@ class LiveStudentListModal extends React.Component { ...@@ -182,47 +164,41 @@ class LiveStudentListModal extends React.Component {
parseColumns = () => { parseColumns = () => {
const { type, liveItem } = this.props; const { type, liveItem } = this.props;
const columns = [ const columns = [
{ title: "姓名", dataIndex: "studentName", key: "studentName" }, { title: '姓名', dataIndex: 'studentName', key: 'studentName' },
{ {
title: "手机号", title: '手机号',
dataIndex: "phone", dataIndex: 'phone',
width: 150, width: 150,
key: "phone", key: 'phone',
render: (text, record) => { render: (text, record) => {
return ( return (
<p> <p>
{!( {!((!window.NewVersion && !window.currentUserInstInfo.teacherId) || (window.NewVersion && Permission.hasEduStudentPhone()))
(!window.NewVersion && !window.currentUserInstInfo.teacherId) || ? (text || '').replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3')
(window.NewVersion && Permission.hasEduStudentPhone())
)
? (text || "").replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3")
: text} : text}
<Tooltip <Tooltip title={`${record.wechatStatus ? '已绑定微信' : '未绑定微信'}`}>
title={`${record.wechatStatus ? "已绑定微信" : "未绑定微信"}`}
>
<span <span
className="icon iconfont" className='icon iconfont'
style={ style={
record.wechatStatus record.wechatStatus
? { ? {
color: "#00D20D", color: '#00D20D',
fontSize: "16px", fontSize: '16px',
marginLeft: 6, marginLeft: 6,
} }
: { : {
color: "#BFBFBF", color: '#BFBFBF',
fontSize: "16px", fontSize: '16px',
marginLeft: 6, marginLeft: 6,
} }
} }>
>
&#xe68d; &#xe68d;
</span> </span>
</Tooltip> </Tooltip>
</p> </p>
); );
}, },
} },
]; ];
// 非互动班课类型增加学员类型 // 非互动班课类型增加学员类型
...@@ -233,100 +209,97 @@ class LiveStudentListModal extends React.Component { ...@@ -233,100 +209,97 @@ class LiveStudentListModal extends React.Component {
dataIndex: 'statusEnum', dataIndex: 'statusEnum',
render: (val) => { render: (val) => {
return STATUS_ENUM[val]; return STATUS_ENUM[val];
} },
}); });
} }
// 如果是非视频课, 显示操作的条件是课程未开始,且不是T端 // 如果是非视频课, 显示操作的条件是课程未开始,且不是T端
// 如果是视频课,那么只要满足不是T端就可以了 // 如果是视频课,那么只要满足不是T端就可以了
if ((liveItem.courseState === "UN_START" || type === 'videoCourse') && !isTeacher) { if ((liveItem.courseState === 'UN_START' || type === 'videoCourse') && !isTeacher) {
// 未开始 // 未开始
columns.push({ columns.push({
title: "操作", title: '操作',
dataIndex: "operate", dataIndex: 'operate',
key: "operate", key: 'operate',
align:'right', align: 'right',
render: (text, record) => { render: (text, record) => {
return ( return (
<Popconfirm <Popconfirm
title="你确定要移出这个学员吗?" title='你确定要移出这个学员吗?'
onConfirm={() => { onConfirm={() => {
// 如果是非视频课,且直播间类型是自研, 且晚于开课前30分钟, 不允许移出 // 如果是非视频课,且直播间类型是自研, 且晚于开课前30分钟, 不允许移出
if ( if (liveItem.channel == 'XIAOMAI' && liveItem.startTime - Date.now() < 1800000) {
liveItem.channel == "XIAOMAI" &&
liveItem.startTime - Date.now() < 1800000
) {
Modal.warning({ Modal.warning({
title: "不可移出", title: '不可移出',
icon: ( icon: <span className='icon iconfont default-confirm-icon'>&#xe6f4;</span>,
<span className="icon iconfont default-confirm-icon"> content: '晚于开课前30分钟，不能移出学员',
&#xe6f4;
</span>
),
content: "晚于开课前30分钟，不能移出学员",
}); });
} else { } else {
this.removeStudent(record.studentId); this.removeStudent(record.studentId);
} }
}} }}>
> <span className='live-operate'>移出</span>
<span className="live-operate">移出</span>
</Popconfirm> </Popconfirm>
); );
}, },
}); });
} }
return columns; return columns;
} };
render() { render() {
const { studentList, query, total } = this.state; const { studentList, query, total } = this.state;
const { current, size } = query; const { current, size } = query;
return ( return (
<Modal <Modal
title="查看学员名单" title='查看学员名单'
visible={true} visible={true}
width={680} width={680}
footer={null} footer={null}
maskClosable={false} maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}
className="live-student-list-modal" className='live-student-list-modal'
onCancel={this.props.close} onCancel={this.props.close}>
>
{/* 任意状态都可以添加学员 */} {/* 任意状态都可以添加学员 */}
<div className="live-student-list-modal__operate"> <div className='live-student-list-modal__operate'>
{ {!isTeacher && (
!isTeacher && <Button type='primary' onClick={this.hanldSelect}>
<Button type="primary" onClick={this.hanldSelect}>
添加上课学员 添加上课学员
</Button> </Button>
} )}
<Search <Search
placeholder="搜索学员姓名/手机号" placeholder='搜索学员姓名/手机号'
style={{ width: 200 }} style={{ width: 200 }}
onSearch={(value) => { onSearch={(value) => {
this.setState({ this.setState(
{
query: { query: {
...this.state.query, ...this.state.query,
nameOrPhone: value nameOrPhone: value,
} },
}, () => { },
() => {
this.fetchStudentList(1); this.fetchStudentList(1);
}); }
);
}} }}
className="search" className='search'
/> />
</div> </div>
<Table <XMTable
size="small" renderEmpty={{
image: college,
description: '暂无数据',
}}
size='small'
columns={this.parseColumns()} columns={this.parseColumns()}
dataSource={studentList} dataSource={studentList}
pagination={false} pagination={false}
scroll={{ y: 400 }} scroll={{ y: 400 }}
className="live-student-table table-no-scrollbar" className='live-student-table table-no-scrollbar'
/> />
<PageControl <PageControl
size="small" size='small'
current={current - 1} current={current - 1}
pageSize={size} pageSize={size}
total={Number(total)} total={Number(total)}
......
src/modules/course-manage/modal/ManageCoursewareModal.jsx
...@@ -4,29 +4,28 @@ ...@@ -4,29 +4,28 @@
* @Last Modified by: chenshu * @Last Modified by: chenshu
* @Last Modified time: 2021-06-08 18:18:46 * @Last Modified time: 2021-06-08 18:18:46
*/ */
import React from 'react'; import PreviewFileModal from '@/bu-components/PreviewFileModal';
import { Modal, Button, Table, message, Tooltip, Spin, Popconfirm } from 'antd'; import { FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum';
import { QuestionCircleOutlined,LoadingOutlined} from "@ant-design/icons"; import { DEFAULT_SIZE_UNIT, suffixType } from '@/common/constants/academic/liveEnum';
import _ from 'underscore'; import Service from '@/common/js/service';
import moment from 'moment';
import Lottie from "lottie-web";
import User from '@/common/js/user'; import User from '@/common/js/user';
import { suffixType, DEFAULT_SIZE_UNIT } from '@/common/constants/academic/liveEnum'; import college from '@/common/lottie/college';
import { FileVerifyMap, FileTypeIcon } from '@/common/constants/academic/lessonEnum'; import { XMTable } from '@/components';
import ScanFileModal from '@/modules/prepare-lesson/modal/ScanFileModal' import BaseService from '@/domains/basic-domain/baseService';
import { YZ_APPId, YZ_PREVIEW_URL } from '@/domains/basic-domain/constants';
import ScanFileModal from '@/modules/prepare-lesson/modal/ScanFileModal';
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal'; import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import Service from '@/common/js/service'; import { LoadingOutlined } from '@ant-design/icons';
import BaseService from "@/domains/basic-domain/baseService"; import { Button, message, Modal, Popconfirm, Spin, Tooltip } from 'antd';
import PreviewFileModal from '@/bu-components/PreviewFileModal'; import Lottie from 'lottie-web';
import {YZ_APPId,YZ_PREVIEW_URL,OFFICE_PREVIEW_URL} from '@/domains/basic-domain/constants'; import moment from 'moment';
import React from 'react';
import _ from 'underscore';
import './ManageCoursewareModal.less'; import './ManageCoursewareModal.less';
class ManageCoursewareModal extends React.Component { class ManageCoursewareModal extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props);
this.state = { this.state = {
list: [], list: [],
uploadObject: {}, uploadObject: {},
...@@ -37,37 +36,35 @@ class ManageCoursewareModal extends React.Component { ...@@ -37,37 +36,35 @@ class ManageCoursewareModal extends React.Component {
isLessonPermission: false, isLessonPermission: false,
diskList: [], // 机构可见的磁盘目录 diskList: [], // 机构可见的磁盘目录
selectedFileList: [], selectedFileList: [],
showPreviewModal:false, //是否显示loading showPreviewModal: false, //是否显示loading
previewing:false, //是否正在预览 previewing: false, //是否正在预览
previewStatus:'UPLOAD' //预览文件的生成状态 previewStatus: 'UPLOAD', //预览文件的生成状态
} };
} }
componentDidMount() { componentDidMount() {
this.getCoursewareList(); this.getCoursewareList();
var animation = Lottie.loadAnimation({ var animation = Lottie.loadAnimation({
path: "https://image.xiaomaiketang.com/xm/SDBkP7mbJX.json", path: 'https://image.xiaomaiketang.com/xm/SDBkP7mbJX.json',
name: "test", name: 'test',
renderer: "svg", renderer: 'svg',
loop: true, loop: true,
autoplay: true, autoplay: true,
container: document.getElementById("lottie-box") container: document.getElementById('lottie-box'),
}); });
} }
// 获取课件列表 // 获取课件列表
getCoursewareList(id) { getCoursewareList(id) {
const { liveCourseId } = this.props.data; const { liveCourseId } = this.props.data;
const params={ const params = {
liveCourseId, liveCourseId,
storeId:User.getStoreId() storeId: User.getStoreId(),
} };
Service.Hades('/anon/courseWare/getCourseWareDocList', params).then((res) => { Service.Hades('/anon/courseWare/getCourseWareDocList', params).then((res) => {
let newList = []; let newList = [];
const { list } = this.state; const { list } = this.state;
const data = _.find(res.result, item => item.docId == id); const data = _.find(res.result, (item) => item.docId == id);
if (id && !_.isEmpty(data)) { if (id && !_.isEmpty(data)) {
newList = list.map((item) => { newList = list.map((item) => {
if (item.id == id) { if (item.id == id) {
...@@ -86,7 +83,7 @@ class ManageCoursewareModal extends React.Component { ...@@ -86,7 +83,7 @@ class ManageCoursewareModal extends React.Component {
} else { } else {
return item; return item;
} }
}) });
} else { } else {
newList = res.result.map((item) => { newList = res.result.map((item) => {
item.id = item.docId; item.id = item.docId;
...@@ -104,10 +101,9 @@ class ManageCoursewareModal extends React.Component { ...@@ -104,10 +101,9 @@ class ManageCoursewareModal extends React.Component {
}); });
} }
this.setState({ list: newList }); this.setState({ list: newList });
}) });
} }
// 上传文件 // 上传文件
addFile() { addFile() {
// 判断是否早于开课前30分钟 // 判断是否早于开课前30分钟
...@@ -115,17 +111,14 @@ class ManageCoursewareModal extends React.Component { ...@@ -115,17 +111,14 @@ class ManageCoursewareModal extends React.Component {
const currentTime = new Date().getTime(); const currentTime = new Date().getTime();
if (currentTime >= startTime - 30 * 60 * 1000) { if (currentTime >= startTime - 30 * 60 * 1000) {
Modal.info({ Modal.info({
title: "不能再上传课件了", title: '不能再上传课件了',
icon: ( icon: (
<span <span className='icon iconfont default-confirm-icon' style={{ color: '#FFBB54 !important' }}>
className="icon iconfont default-confirm-icon"
style={{ color: "#FFBB54 !important" }}
>
&#xe834; &#xe834;
</span> </span>
), ),
content: "请在开课前30分钟前上传课件，开课后可在客户端中进行上传。", content: '请在开课前30分钟前上传课件，开课后可在客户端中进行上传。',
okText: '我知道了' okText: '我知道了',
}); });
return; return;
} }
...@@ -138,13 +131,12 @@ class ManageCoursewareModal extends React.Component { ...@@ -138,13 +131,12 @@ class ManageCoursewareModal extends React.Component {
this.setState({ this.setState({
selectedFileList: list, selectedFileList: list,
showSelectFileModal: true, // 选择文件弹窗 showSelectFileModal: true, // 选择文件弹窗
}) });
} }
handleAddFile = (addFolderIds) => { handleAddFile = (addFolderIds) => {
this.setState({ this.setState({
showSelectFileModal: false showSelectFileModal: false,
}); });
const { liveCourseId } = this.props.data; const { liveCourseId } = this.props.data;
...@@ -157,38 +149,38 @@ class ManageCoursewareModal extends React.Component { ...@@ -157,38 +149,38 @@ class ManageCoursewareModal extends React.Component {
Service.Hades('public/courseWare/uploadCourseWareFile', params).then((res) => { Service.Hades('public/courseWare/uploadCourseWareFile', params).then((res) => {
this.getCoursewareList(); this.getCoursewareList();
}); });
} };
// 删除文件 // 删除文件
deleteFile(item) { deleteFile(item) {
const { list } = this.state; const { list } = this.state;
Service.Hades('public/courseWare/delCourseDoc', { docId: item.id }).then(() => { Service.Hades('public/courseWare/delCourseDoc', { docId: item.id }).then(() => {
item.docId && message.success('删除成功') item.docId && message.success('删除成功');
}) });
const _list = _.reject(list, (data) => data.id == item.id); const _list = _.reject(list, (data) => data.id == item.id);
this.setState({ list: _list }); this.setState({ list: _list });
} }
// 预览文件 // 预览文件
handleScanFile = async (item)=>{ handleScanFile = async (item) => {
if (!item.srcDocUrl) return null; if (!item.srcDocUrl) return null;
const suffix = _.last(item.fileName.split('.')).toLowerCase(); const suffix = _.last(item.fileName.split('.')).toLowerCase();
const type = suffixType[suffix] const type = suffixType[suffix];
const fileType = FileVerifyMap[type].type; const fileType = FileVerifyMap[type].type;
const that = this; const that = this;
switch (fileType) { switch (fileType) {
case "PDF": case 'PDF':
// window.open(item.srcDocUrl, "_blank"); // window.open(item.srcDocUrl, "_blank");
// break; // break;
case "Excel": case 'Excel':
case "EXCEL": case 'EXCEL':
case "PPT": case 'PPT':
case "PPTX": case 'PPTX':
case "word": case 'word':
case "WORD": case 'WORD':
case "DOCX": case 'DOCX':
case "DOC": case 'DOC':
// let size = parseFloat(item.fileSize.replace(/M$|KB$/g, '')); // let size = parseFloat(item.fileSize.replace(/M$|KB$/g, ''));
// if (item.fileSize.includes('KB')) { // if (item.fileSize.includes('KB')) {
// size = 0; // size = 0;
...@@ -210,230 +202,218 @@ class ManageCoursewareModal extends React.Component { ...@@ -210,230 +202,218 @@ class ManageCoursewareModal extends React.Component {
// window.open(scanUrl, "_blank"); // window.open(scanUrl, "_blank");
// } // }
if(!item.fileVersionId){ if (!item.fileVersionId) {
this.setState({ this.setState(
previewing:true, {
showPreviewModal:true, previewing: true,
previewStatus:'UPLOAD' showPreviewModal: true,
},async ()=>{ previewStatus: 'UPLOAD',
const uploadParams ={ },
fileUrl:item.srcDocUrl, async () => {
instId:User.getStoreId(), const uploadParams = {
yoZoTypeEnum:'UPLOAD' fileUrl: item.srcDocUrl,
} instId: User.getStoreId(),
yoZoTypeEnum: 'UPLOAD',
};
const uploadSign = await BaseService.getYoZoSign(uploadParams); const uploadSign = await BaseService.getYoZoSign(uploadParams);
BaseService.yoZoUpload(item.srcDocUrl,YZ_APPId,uploadSign).then(async function (response){ BaseService.yoZoUpload(item.srcDocUrl, YZ_APPId, uploadSign).then(async function (response) {
const saveParams ={ const saveParams = {
fileVersionId:response.data.data.fileVersionId, fileVersionId: response.data.data.fileVersionId,
folderId:item.folderId, folderId: item.folderId,
instId:User.getStoreId(), instId: User.getStoreId(),
} };
BaseService.saveYoZoFileVersionId(saveParams); BaseService.saveYoZoFileVersionId(saveParams);
const { previewing } = that.state; const { previewing } = that.state;
if(previewing){ if (previewing) {
const previewParams ={ const previewParams = {
fileVersionId:response.data.data.fileVersionId, fileVersionId: response.data.data.fileVersionId,
instId:User.getStoreId(), instId: User.getStoreId(),
yoZoTypeEnum:'VIEW', yoZoTypeEnum: 'VIEW',
htmlTitle:item.fileName htmlTitle: item.fileName,
} };
const previewSign = await BaseService.getYoZoSign(previewParams); const previewSign = await BaseService.getYoZoSign(previewParams);
const url = `${YZ_PREVIEW_URL}?fileVersionId=${response.data.data.fileVersionId}&appId=${YZ_APPId}&sign=${previewSign}&htmlTitle=${item.fileName}` const url = `${YZ_PREVIEW_URL}?fileVersionId=${response.data.data.fileVersionId}&appId=${YZ_APPId}&sign=${previewSign}&htmlTitle=${item.fileName}`;
that.setState({ that.setState({
previewStatus:'UPLOAD_SUCCESS', previewStatus: 'UPLOAD_SUCCESS',
url url,
}) });
} }
}) });
})
}else{
const previewParams ={
fileVersionId:item.fileVersionId,
instId:User.getStoreId(),
yoZoTypeEnum:'VIEW',
htmlTitle:item.fileName
} }
);
} else {
const previewParams = {
fileVersionId: item.fileVersionId,
instId: User.getStoreId(),
yoZoTypeEnum: 'VIEW',
htmlTitle: item.fileName,
};
const previewSign = await BaseService.getYoZoSign(previewParams); const previewSign = await BaseService.getYoZoSign(previewParams);
const url = `${YZ_PREVIEW_URL}?fileVersionId=${item.fileVersionId}&appId=${YZ_APPId}&sign=${previewSign}&htmlTitle=${item.fileName}` const url = `${YZ_PREVIEW_URL}?fileVersionId=${item.fileVersionId}&appId=${YZ_APPId}&sign=${previewSign}&htmlTitle=${item.fileName}`;
const a = document.createElement('a'); const a = document.createElement('a');
document.body.appendChild(a); document.body.appendChild(a);
a.setAttribute('href', url); a.setAttribute('href', url);
a.setAttribute('target', '_blank'); a.setAttribute('target', '_blank');
a.click(); a.click();
document.body.removeChild(a) document.body.removeChild(a);
} }
break; break;
case "JPG": case 'JPG':
case "PNG": case 'PNG':
case "MP4": case 'MP4':
case "MP3": case 'MP3':
this.setState({ scanFileModal: true, editData: { fileType, ossAddress: item.srcDocUrl } }) this.setState({ scanFileModal: true, editData: { fileType, ossAddress: item.srcDocUrl } });
break; break;
default: default:
break; break;
} }
}; };
cancelPreview = ()=>{ cancelPreview = () => {
this.setState({ this.setState({
previewing:false, previewing: false,
showPreviewModal:false, showPreviewModal: false,
previewStatus:'UPLOAD' previewStatus: 'UPLOAD',
}) });
} };
render() { render() {
const columns = [ const columns = [
{ {
title: "名称", title: '名称',
width: "25%", width: '25%',
dataIndex: "name", dataIndex: 'name',
render: (_value, item) => { render: (_value, item) => {
const suffix = _.last(item.fileName.split('.')).toLowerCase(); const suffix = _.last(item.fileName.split('.')).toLowerCase();
const fileType = suffixType[suffix] const fileType = suffixType[suffix];
const antIcon = <LoadingOutlined/>; const antIcon = <LoadingOutlined />;
const type = FileVerifyMap[fileType].type; const type = FileVerifyMap[fileType].type;
return <div className="courseware-name" onClick={() => this.handleScanFile(item)}> return (
<div className='courseware-name' onClick={() => this.handleScanFile(item)}>
<Choose> <Choose>
<When condition={(type === 'JPG' || type === 'PNG') && item.progress}> <When condition={(type === 'JPG' || type === 'PNG') && item.progress}>
<Spin indicator={antIcon} /> <Spin indicator={antIcon} />
</When> </When>
<Otherwise> <Otherwise>
<img <img src={FileTypeIcon[FileVerifyMap[fileType].type] || (item.docUrls[0] || {}).conversionFileUrl} alt='' className='item-img' />
src={FileTypeIcon[FileVerifyMap[fileType].type] || (item.docUrls[0] || {}).conversionFileUrl}
alt=""
className="item-img"
/>
</Otherwise> </Otherwise>
</Choose> </Choose>
<Tooltip title={item.fileName}><span className="name">{item.fileName}</span></Tooltip> <Tooltip title={item.fileName}>
<span className='name'>{item.fileName}</span>
</Tooltip>
</div> </div>
);
}, },
}, },
{ {
title: "创建人", title: '创建人',
width: "12%", width: '12%',
dataIndex: "adminName", dataIndex: 'adminName',
render: (_value, item) => { render: (_value, item) => {
return <span>{item.operatorName}</span> return <span>{item.operatorName}</span>;
}, },
}, },
{ {
title: "上传时间", title: '上传时间',
width: "20%", width: '20%',
dataIndex: "created", dataIndex: 'created',
render: (_value, item) => { render: (_value, item) => {
return item.failState ? '-' : <span>{moment(item.created).format('YYYY-MM-DD HH:mm')}</span> return item.failState ? '-' : <span>{moment(item.created).format('YYYY-MM-DD HH:mm')}</span>;
}, },
}, },
{ {
title: "大小", title: '大小',
width: "12%", width: '12%',
dataIndex: "size", dataIndex: 'size',
render: (_value, item) => { render: (_value, item) => {
return <span>{item.fileSize}</span> return <span>{item.fileSize}</span>;
}, },
}, },
{ {
title: "操作", title: '操作',
width: "16%", width: '16%',
dataIndex: "control", dataIndex: 'control',
render: (_value, item) => { render: (_value, item) => {
const { failObject } = this.state; const { failObject } = this.state;
const uploadFail = failObject[item.id]; const uploadFail = failObject[item.id];
// 上课前30分钟/上课中/已结束的情况下都不可操作 // 上课前30分钟/上课中/已结束的情况下都不可操作
if (this.props.data.startTime < Date.now() + 1800000 || item.progress || uploadFail) { if (this.props.data.startTime < Date.now() + 1800000 || item.progress || uploadFail) {
return <span>-</span> return <span>-</span>;
} }
return ( return (
<Popconfirm <Popconfirm title='你确定要删除这个课件吗？' onConfirm={() => this.deleteFile(item)} onCancel={() => {}}>
title="你确定要删除这个课件吗？" <span
onConfirm={() => this.deleteFile(item)} style={{
onCancel={() => { }}
>
<span style={{
color: '#2966FF', color: '#2966FF',
cursor: 'pointer' cursor: 'pointer',
}}>删除</span> }}>
删除
</span>
</Popconfirm> </Popconfirm>
) );
}, },
}, },
] ];
const { const { list, scanFileModal, editData, cancelObject, showSelectFileModal, selectedFileList, diskList, showPreviewModal, previewStatus, url } = this.state;
list, scanFileModal, editData, cancelObject,
showSelectFileModal, selectedFileList,
diskList,showPreviewModal, previewStatus,url
} = this.state;
const _list = _.reject(list, (item) => cancelObject[item.id]); const _list = _.reject(list, (item) => cancelObject[item.id]);
return ( return (
<Modal <Modal
visible={true} visible={true}
title="课件管理" title='课件管理'
footer={null} footer={null}
maskClosable={false} maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}
className="manage-courseware-modal" className='manage-courseware-modal'
width={_.isEmpty(_list) ? 680 : 800} width={_.isEmpty(_list) ? 680 : 800}
onCancel={() => { onCancel={() => {
this.props.onCancel() this.props.onCancel();
}} }}>
> {_.isEmpty(_list) ? (
{_.isEmpty(_list) ? <div className='empty-body'>
<div className="empty-body"> <div id='lottie-box' className='empty-image'></div>
<div id="lottie-box" className="empty-image"> <Button className='empty-button' type='primary' onClick={() => this.addFile()}>
上传课件
</Button>
<p className='empty-tip'>提前上传直播需要的课件和素材，直播将会变得更便捷！</p>
</div> </div>
<Button ) : (
className="empty-button" <div className='manage-body'>
type="primary" <div id='lottie-box' className='empty-image' style={{ display: 'none' }}></div>
onClick={() => this.addFile()} <div className='header'>
>上传课件</Button> <Button className='header-button' type='primary' onClick={() => this.addFile()}>
<p className="empty-tip">提前上传直播需要的课件和素材，直播将会变得更便捷！</p> 上传课件
</Button>
</div> </div>
: <div className="manage-body"> <XMTable
<div id="lottie-box" className="empty-image" style={{display:'none'}}></div> renderEmpty={{
<div className="header"> image: college,
<Button description: '暂无数据',
className="header-button" }}
type="primary" size='small'
onClick={() => this.addFile()}
>上传课件</Button>
</div>
<Table
size="small"
pagination={false} pagination={false}
rowKey={record => record.id} rowKey={(record) => record.id}
dataSource={_list} dataSource={_list}
columns={columns} columns={columns}
bordered bordered
/> />
</div> </div>
} )}
{ {scanFileModal && <ScanFileModal item={editData} fileType={editData.fileType} close={() => this.setState({ scanFileModal: false })} />}
scanFileModal &&
<ScanFileModal
item={editData}
fileType={editData.fileType}
close={() => this.setState({ scanFileModal: false })}
/>
}
<SelectPrepareFileModal <SelectPrepareFileModal
multiple={true} multiple={true}
scene="liveCourse" scene='liveCourse'
operateType="select" operateType='select'
isOpen={showSelectFileModal} isOpen={showSelectFileModal}
diskList={diskList} diskList={diskList}
selectedFileList={selectedFileList} selectedFileList={selectedFileList}
onClose={() => { onClose={() => {
this.setState({ showSelectFileModal: false }) this.setState({ showSelectFileModal: false });
}} }}
onSelect={this.handleAddFile} onSelect={this.handleAddFile}
/> />
{ showPreviewModal && {showPreviewModal && <PreviewFileModal onCancel={() => this.cancelPreview()} previewStatus={previewStatus} url={url} />}
<PreviewFileModal onCancel={()=>this.cancelPreview()} previewStatus={previewStatus} url={url}/>
}
</Modal> </Modal>
) );
} }
} }
......
src/modules/course-manage/modal/PlayBackRecordModal.jsx
...@@ -6,21 +6,19 @@ ...@@ -6,21 +6,19 @@
* @LastEditTime: 2021-02-01 14:00:36 * @LastEditTime: 2021-02-01 14:00:36
*/ */
import React, { useState, useEffect } from "react"; import college from '@/common/lottie/college';
import { Modal, Table, Button, message } from "antd"; import { PageControl, XMTable } from '@/components';
import Bus from '@/core/bus'; import Bus from '@/core/bus';
import { PageControl } from "@/components"; import { Button, message, Modal } from 'antd';
import React from 'react';
import hasExportPermission from '../utils/hasExportPermission';
import dealTimeDuration from '../utils/dealTimeDuration'; import dealTimeDuration from '../utils/dealTimeDuration';
import hasExportPermission from '../utils/hasExportPermission';
import "./ClassRecordModal.less"; import './ClassRecordModal.less';
const liveTypeMap = { const liveTypeMap = {
USER: "学生", USER: '学生',
ANCHOR: "老师", ANCHOR: '老师',
ADMIN: "助教", ADMIN: '助教',
}; };
class PlayBackRecordModal extends React.Component { class PlayBackRecordModal extends React.Component {
...@@ -46,9 +44,7 @@ class PlayBackRecordModal extends React.Component { ...@@ -46,9 +44,7 @@ class PlayBackRecordModal extends React.Component {
fetchPlayBackList = (page = 1) => { fetchPlayBackList = (page = 1) => {
const params = _.clone(this.state.query); const params = _.clone(this.state.query);
params.current = page; params.current = page;
window.axios window.axios.Apollo('public/businessLive/queryUserReplayRecordPage', params).then((res) => {
.Apollo("public/businessLive/queryUserReplayRecordPage", params)
.then((res) => {
const { records = [], total } = res.result; const { records = [], total } = res.result;
this.setState({ this.setState({
query: params, query: params,
...@@ -61,7 +57,7 @@ class PlayBackRecordModal extends React.Component { ...@@ -61,7 +57,7 @@ class PlayBackRecordModal extends React.Component {
fetchAllStatistics = () => { fetchAllStatistics = () => {
const { liveCourseId } = this.props.liveItem; const { liveCourseId } = this.props.liveItem;
window.axios window.axios
.Apollo("public/businessLive/queryReplayStatistics", { .Apollo('public/businessLive/queryReplayStatistics', {
liveCourseId, liveCourseId,
}) })
.then((res) => { .then((res) => {
...@@ -80,7 +76,7 @@ class PlayBackRecordModal extends React.Component { ...@@ -80,7 +76,7 @@ class PlayBackRecordModal extends React.Component {
const hours = Math.floor(time / 3600); const hours = Math.floor(time / 3600);
const mins = Math.floor(diff / 60); const mins = Math.floor(diff / 60);
const seconds = Math.floor(time % 60); const seconds = Math.floor(time % 60);
return hours + "小时" + mins + "分"; return hours + '小时' + mins + '分';
}; };
// 导出 // 导出
...@@ -88,10 +84,12 @@ class PlayBackRecordModal extends React.Component { ...@@ -88,10 +84,12 @@ class PlayBackRecordModal extends React.Component {
const { liveItem, type } = this.props; const { liveItem, type } = this.props;
const { liveCourseId } = liveItem; const { liveCourseId } = liveItem;
const url = !type ? 'api-b/b/lesson/exportLargeClassLiveAsync' : 'api-b/b/lesson/exportClassInteractionLiveSync'; const url = !type ? 'api-b/b/lesson/exportLargeClassLiveAsync' : 'api-b/b/lesson/exportClassInteractionLiveSync';
window.axios.post(url, { window.axios
.post(url, {
liveCourseId, liveCourseId,
exportLiveType: 0 exportLiveType: 0,
}).then((res) => { })
.then((res) => {
Bus.trigger('get_download_count'); Bus.trigger('get_download_count');
Modal.success({ Modal.success({
title: '导出任务提交成功', title: '导出任务提交成功',
...@@ -99,16 +97,18 @@ class PlayBackRecordModal extends React.Component { ...@@ -99,16 +97,18 @@ class PlayBackRecordModal extends React.Component {
okText: '我知道了', okText: '我知道了',
}); });
}); });
} };
handleExportV5 = () => { handleExportV5 = () => {
const { liveItem, type } = this.props; const { liveItem, type } = this.props;
const { liveCourseId } = liveItem; const { liveCourseId } = liveItem;
const url = !type ? 'public/businessLive/exportLargeClassLiveAsync' : 'public/businessLive/exportClassInteractionLiveSync'; const url = !type ? 'public/businessLive/exportLargeClassLiveAsync' : 'public/businessLive/exportClassInteractionLiveSync';
window.axios.Apollo(url, { window.axios
.Apollo(url, {
liveCourseId, liveCourseId,
exportLiveType: 'PLAY_BACK' exportLiveType: 'PLAY_BACK',
}).then((res) => { })
.then((res) => {
Bus.trigger('get_download_count'); Bus.trigger('get_download_count');
Modal.success({ Modal.success({
title: '导出任务提交成功', title: '导出任务提交成功',
...@@ -116,78 +116,67 @@ class PlayBackRecordModal extends React.Component { ...@@ -116,78 +116,67 @@ class PlayBackRecordModal extends React.Component {
okText: '我知道了', okText: '我知道了',
}); });
}); });
} };
render() { render() {
const columns = [ const columns = [
{ {
title: "观看者姓名", title: '观看者姓名',
dataIndex: "userName", dataIndex: 'userName',
}, },
{ {
title: "观看者手机号", title: '观看者手机号',
dataIndex: "phone", dataIndex: 'phone',
render: (text, record) => { render: (text, record) => {
return ( return (
<p> <p>
{!( {!((!window.NewVersion && !window.currentUserInstInfo.teacherId) || (window.NewVersion && Permission.hasEduStudentPhone()))
(!window.NewVersion && !window.currentUserInstInfo.teacherId) || ? (text || '').replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3')
(window.NewVersion && Permission.hasEduStudentPhone())
)
? (text || "").replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3")
: text} : text}
</p> </p>
); );
}, },
}, },
{ {
title: "观看者类型", title: '观看者类型',
dataIndex: "liveRole", dataIndex: 'liveRole',
key: "liveRole", key: 'liveRole',
render: (text) => <span>{liveTypeMap[text]}</span>, render: (text) => <span>{liveTypeMap[text]}</span>,
}, },
{ {
title: "开始观看时间", title: '开始观看时间',
dataIndex: "entryTime", dataIndex: 'entryTime',
key: "entryTime", key: 'entryTime',
render: (text) => ( render: (text) => <span>{text ? formatDate('YYYY-MM-DD H:i', parseInt(text)) : '-'}</span>,
<span>{text ? formatDate("YYYY-MM-DD H:i", parseInt(text)) : '-'}</span>
),
}, },
{ {
title: "观看时长", title: '观看时长',
dataIndex: "lookingDuration", dataIndex: 'lookingDuration',
key: "lookingDuration", key: 'lookingDuration',
render: (text) => { render: (text) => {
return <span>{text ? dealTimeDuration(text) : '-'}</span>; return <span>{text ? dealTimeDuration(text) : '-'}</span>;
}, },
}, },
]; ];
const { const { query, total, playBackList, totalWatchNum, recordDuration } = this.state;
query,
total,
playBackList,
totalWatchNum,
recordDuration,
} = this.state;
const { type } = this.props; const { type } = this.props;
return ( return (
<Modal <Modal
title="回放记录" title='回放记录'
className="play-back-modal" className='play-back-modal'
width={680} width={680}
visible={true} visible={true}
maskClosable={false} maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}
footer={null} footer={null}
onCancel={() => { onCancel={() => {
this.props.close(); this.props.close();
}} }}>
> {hasExportPermission(type) && (
{ <Button
hasExportPermission(type) && onClick={_.debounce(
<Button onClick={_.debounce(() => { () => {
if (!playBackList.length) { if (!playBackList.length) {
message.warning('暂无数据可导出'); message.warning('暂无数据可导出');
return; return;
...@@ -197,17 +186,26 @@ class PlayBackRecordModal extends React.Component { ...@@ -197,17 +186,26 @@ class PlayBackRecordModal extends React.Component {
} else { } else {
this.handleExport(); this.handleExport();
} }
}, 500, true)}>导出</Button> },
} 500,
<Table true
size="small" )}>
导出
</Button>
)}
<XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
size='small'
columns={columns} columns={columns}
dataSource={playBackList} dataSource={playBackList}
pagination={false} pagination={false}
className="table-no-scrollbar" className='table-no-scrollbar'
/> />
<PageControl <PageControl
size="small" size='small'
current={query.current - 1} current={query.current - 1}
pageSize={query.size} pageSize={query.size}
total={total} total={total}
......
src/modules/course-manage/modal/RelatedPlanModal.jsx
import React from 'react' import User from '@/common/js/user';
import { Table, Modal, Input } from 'antd' import college from '@/common/lottie/college';
import { PageControl } from '@/components' import { PageControl, XMTable } from '@/components';
import CourseService from '@/domains/course-domain/CourseService' import CourseService from '@/domains/course-domain/CourseService';
import PlanService from '@/domains/plan-domain/planService' import PlanService from '@/domains/plan-domain/planService';
import User from '@/common/js/user' import { Input, Modal } from 'antd';
import './RelatedPlanModal.less' import React from 'react';
import _ from 'underscore' import _ from 'underscore';
const { Search } = Input import './RelatedPlanModal.less';
const { Search } = Input;
class RelatedPlanModal extends React.Component { class RelatedPlanModal extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props);
this.state = { this.state = {
dataSource: [], dataSource: [],
size: 10, size: 10,
query: { query: {
current: 1 current: 1,
}, },
totalCount: 0, totalCount: 0,
selectPlanList: {} selectPlanList: {},
} };
} }
componentDidMount() { componentDidMount() {
this.handleFetchDataList() this.handleFetchDataList();
} }
// 获取培训计划列表 // 获取培训计划列表
handleFetchDataList = () => { handleFetchDataList = () => {
const { query, size } = this.state const { query, size } = this.state;
const params = { const params = {
...query, ...query,
size, size,
storeId: User.getStoreId() storeId: User.getStoreId(),
} };
PlanService.getStorePlanAll(params).then((res) => { PlanService.getStorePlanAll(params).then((res) => {
const { result = {} } = res const { result = {} } = res;
const { records = [], total = 0 } = result const { records = [], total = 0 } = result;
this.setState({ this.setState({
dataSource: records, dataSource: records,
totalCount: Number(total) totalCount: Number(total),
}) });
}) });
} };
handleChangePlanName = (value) => { handleChangePlanName = (value) => {
const { query } = this.state const { query } = this.state;
query.planName = value query.planName = value;
query.current = 1 query.current = 1;
this.setState({ this.setState({
query query,
}) });
} };
onShowSizeChange = (current, size) => { onShowSizeChange = (current, size) => {
if (current == size) { if (current == size) {
return return;
} }
this.setState( this.setState(
{ {
size size,
}, },
() => { () => {
this.handleFetchDataList() this.handleFetchDataList();
}
)
} }
);
};
// 请求表头 // 请求表头
parsePlanColumns = () => { parsePlanColumns = () => {
...@@ -72,12 +73,12 @@ class RelatedPlanModal extends React.Component { ...@@ -72,12 +73,12 @@ class RelatedPlanModal extends React.Component {
key: 'planName', key: 'planName',
dataIndex: 'planName', dataIndex: 'planName',
render: (val, record) => { render: (val, record) => {
return <span>{val}</span> return <span>{val}</span>;
} },
} },
] ];
return columns return columns;
} };
parseTaskColumns = (parentIndex) => { parseTaskColumns = (parentIndex) => {
const columns = [ const columns = [
...@@ -86,76 +87,76 @@ class RelatedPlanModal extends React.Component { ...@@ -86,76 +87,76 @@ class RelatedPlanModal extends React.Component {
key: 'taskName', key: 'taskName',
dataIndex: 'taskName', dataIndex: 'taskName',
render: (val, record) => { render: (val, record) => {
return <span>{val}</span> return <span>{val}</span>;
} },
} },
] ];
return columns return columns;
} };
selectPlanList = (record, selected, planId) => { selectPlanList = (record, selected, planId) => {
const { selectPlanList } = this.props const { selectPlanList } = this.props;
let _selectPlanList = { ...selectPlanList } let _selectPlanList = { ...selectPlanList };
if (selected) { if (selected) {
if (!_selectPlanList[planId]) { if (!_selectPlanList[planId]) {
_selectPlanList[planId] = {} _selectPlanList[planId] = {};
} }
_selectPlanList[planId].taskBaseVOList = [] _selectPlanList[planId].taskBaseVOList = [];
_selectPlanList[planId].planId = planId _selectPlanList[planId].planId = planId;
_selectPlanList[planId].taskBaseVOList.push(record) _selectPlanList[planId].taskBaseVOList.push(record);
} else { } else {
if (!_selectPlanList[planId]) { if (!_selectPlanList[planId]) {
_selectPlanList[planId] = {} _selectPlanList[planId] = {};
} }
_selectPlanList[planId].taskBaseVOList = [] _selectPlanList[planId].taskBaseVOList = [];
_selectPlanList[planId].planId = planId _selectPlanList[planId].planId = planId;
} }
this.props.onChange(_selectPlanList) this.props.onChange(_selectPlanList);
// this.setState({selectPlanList:_selectPlanList}); // this.setState({selectPlanList:_selectPlanList});
} };
handleSelectPlanListData(selectPlanList) { handleSelectPlanListData(selectPlanList) {
let _selectPlanList = [] let _selectPlanList = [];
for (let key in selectPlanList) { for (let key in selectPlanList) {
let item = {} let item = {};
if (selectPlanList[key].taskBaseVOList) { if (selectPlanList[key].taskBaseVOList) {
item.planId = selectPlanList[key].planId item.planId = selectPlanList[key].planId;
if (selectPlanList[key].taskBaseVOList[0]) { if (selectPlanList[key].taskBaseVOList[0]) {
item.taskId = selectPlanList[key].taskBaseVOList[0].taskId item.taskId = selectPlanList[key].taskBaseVOList[0].taskId;
} }
} }
if (item.taskId) { if (item.taskId) {
_selectPlanList.push(item) _selectPlanList.push(item);
} }
} }
return _selectPlanList return _selectPlanList;
} }
confirmRelatedPlan = () => { confirmRelatedPlan = () => {
const { selectPlanList } = this.props const { selectPlanList } = this.props;
const params = { const params = {
courseId: this.props.selectCourseId, courseId: this.props.selectCourseId,
relatedPlanList: this.handleSelectPlanListData(selectPlanList), relatedPlanList: this.handleSelectPlanListData(selectPlanList),
storeId: User.getStoreId() storeId: User.getStoreId(),
} };
CourseService.relatedCourseToPlan(params).then((res) => { CourseService.relatedCourseToPlan(params).then((res) => {
this.props.onConfirm() this.props.onConfirm();
}) });
} };
getSelectLength = (selectList) => { getSelectLength = (selectList) => {
let num = 0 let num = 0;
for (let key in selectList) { for (let key in selectList) {
if (selectList[key].taskBaseVOList.length > 0) { if (selectList[key].taskBaseVOList.length > 0) {
num = num + 1 num = num + 1;
}
} }
return num
} }
return num;
};
clearSelect = () => { clearSelect = () => {
const _selectPlanList = {} const _selectPlanList = {};
this.props.onChange(_selectPlanList) this.props.onChange(_selectPlanList);
} };
render() { render() {
const { size, dataSource, totalCount, query } = this.state const { size, dataSource, totalCount, query } = this.state;
const { visible, selectPlanList } = this.props const { visible, selectPlanList } = this.props;
return ( return (
<Modal <Modal
title='关联培训计划' title='关联培训计划'
...@@ -172,10 +173,10 @@ class RelatedPlanModal extends React.Component { ...@@ -172,10 +173,10 @@ class RelatedPlanModal extends React.Component {
placeholder='搜索培训计划名称' placeholder='搜索培训计划名称'
style={{ width: 207 }} style={{ width: 207 }}
onChange={(e) => { onChange={(e) => {
this.handleChangePlanName(e.target.value) this.handleChangePlanName(e.target.value);
}} }}
onSearch={() => { onSearch={() => {
this.handleFetchDataList() this.handleFetchDataList();
}} }}
enterButton={<span className='icon iconfont'>&#xe832;</span>} enterButton={<span className='icon iconfont'>&#xe832;</span>}
/> />
...@@ -194,7 +195,11 @@ class RelatedPlanModal extends React.Component { ...@@ -194,7 +195,11 @@ class RelatedPlanModal extends React.Component {
</span> </span>
</div> </div>
<div> <div>
<Table <XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.planId} rowKey={(record) => record.planId}
className='plan-table' className='plan-table'
dataSource={dataSource} dataSource={dataSource}
...@@ -202,20 +207,24 @@ class RelatedPlanModal extends React.Component { ...@@ -202,20 +207,24 @@ class RelatedPlanModal extends React.Component {
pagination={false} pagination={false}
expandedRowRender={(_record, index) => { expandedRowRender={(_record, index) => {
if (!_record.taskBaseVOList) { if (!_record.taskBaseVOList) {
return return;
} }
if (_record.taskBaseVOList.length !== 0) { if (_record.taskBaseVOList.length !== 0) {
const selectPlan = selectPlanList[_record.planId] const selectPlan = selectPlanList[_record.planId];
let taskBaseVOList = [] let taskBaseVOList = [];
if (selectPlan) { if (selectPlan) {
taskBaseVOList = selectPlan.taskBaseVOList taskBaseVOList = selectPlan.taskBaseVOList;
} }
console.log('taskBaseVOList', taskBaseVOList) console.log('taskBaseVOList', taskBaseVOList);
return ( return (
<div> <div>
<Table <XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.taskId} rowKey={(record) => record.taskId}
pagination={false} pagination={false}
dataSource={_record.taskBaseVOList} dataSource={_record.taskBaseVOList}
...@@ -225,20 +234,20 @@ class RelatedPlanModal extends React.Component { ...@@ -225,20 +234,20 @@ class RelatedPlanModal extends React.Component {
type: 'checkbox', type: 'checkbox',
selectedRowKeys: _.pluck(taskBaseVOList, 'taskId'), selectedRowKeys: _.pluck(taskBaseVOList, 'taskId'),
onSelect: (record, selected) => { onSelect: (record, selected) => {
this.selectPlanList(record, selected, _record.planId) this.selectPlanList(record, selected, _record.planId);
}, },
onSelectAll: (selected, _selectedRows, changeRows) => {} onSelectAll: (selected, _selectedRows, changeRows) => {},
}} }}
/> />
</div> </div>
) );
} }
}} }}
rowClassName={(record, index) => { rowClassName={(record, index) => {
if (index % 2 === 0) { if (index % 2 === 0) {
return 'odd-row' return 'odd-row';
} else { } else {
return 'even-row' return 'even-row';
} }
}} }}
/> />
...@@ -250,15 +259,15 @@ class RelatedPlanModal extends React.Component { ...@@ -250,15 +259,15 @@ class RelatedPlanModal extends React.Component {
total={totalCount} total={totalCount}
size='small' size='small'
toPage={(page) => { toPage={(page) => {
const _query = { ...query, current: page + 1 } const _query = { ...query, current: page + 1 };
this.setState( this.setState(
{ {
query: _query query: _query,
}, },
() => { () => {
this.handleFetchDataList() this.handleFetchDataList();
} }
) );
}} }}
onShowSizeChange={this.onShowSizeChange} onShowSizeChange={this.onShowSizeChange}
/> />
...@@ -266,8 +275,8 @@ class RelatedPlanModal extends React.Component { ...@@ -266,8 +275,8 @@ class RelatedPlanModal extends React.Component {
)} )}
</div> </div>
</Modal> </Modal>
) );
} }
} }
export default RelatedPlanModal export default RelatedPlanModal;
src/modules/course-manage/modal/select-student/StudentList.jsx
...@@ -7,40 +7,42 @@ ...@@ -7,40 +7,42 @@
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
import college from '@/common/lottie/college';
import { PageControl, XMTable } from '@/components';
import { Dropdown, Menu, Tooltip } from 'antd';
import React from 'react'; import React from 'react';
import { Table, Tooltip, Menu, Dropdown } from 'antd';
import _ from 'underscore'; import _ from 'underscore';
import Bus from '@/core/bus';
import { PageControl } from '@/components';
let resourceData = {}; let resourceData = {};
_.map(window.RESOURCE, item => { _.map(window.RESOURCE, (item) => {
resourceData[item.code] = item.name resourceData[item.code] = item.name;
}); });
const isNewVersion = window.NewVersion; const isNewVersion = window.NewVersion;
class StudentList extends React.Component { class StudentList extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
showDegiest: false, showDegiest: false,
selectedRows: [], selectedRows: [],
prevSelectRows: props.savedSelectedRows || [], prevSelectRows: props.savedSelectedRows || [],
savedSelectedRows: props.savedSelectedRows || [] savedSelectedRows: props.savedSelectedRows || [],
} };
} }
parseColumns = () => { parseColumns = () => {
const { query: { status }, type, studentType } = this.props; const {
query: { status },
type,
studentType,
} = this.props;
// 是否是在读学员 // 是否是在读学员
const isNormal = (status === 'NORMAL' || status === 1); const isNormal = status === 'NORMAL' || status === 1;
// 是否是潜在学员 // 是否是潜在学员
const isPotential = (status === 'POTENTIAL' || status === 2); const isPotential = status === 'POTENTIAL' || status === 2;
// 是否是历史学员 // 是否是历史学员
const isHistory = (status === 'HISTORY' || status === 4); const isHistory = status === 'HISTORY' || status === 4;
const columns = [ const columns = [
{ {
...@@ -50,7 +52,7 @@ class StudentList extends React.Component { ...@@ -50,7 +52,7 @@ class StudentList extends React.Component {
render: (text, record) => { render: (text, record) => {
const { studentBasicVO = {}, name } = record; const { studentBasicVO = {}, name } = record;
return studentBasicVO.name || name; return studentBasicVO.name || name;
} },
}, },
{ {
title: '手机号', title: '手机号',
...@@ -58,50 +60,54 @@ class StudentList extends React.Component { ...@@ -58,50 +60,54 @@ class StudentList extends React.Component {
render: (text, record) => { render: (text, record) => {
const { type } = this.props; const { type } = this.props;
const { studentBasicVO = {}, phone, weChatStatus, wechatStatus } = record; const { studentBasicVO = {}, phone, weChatStatus, wechatStatus } = record;
const { NewVersion, currentUserInstInfo: { teacherId } } = window; const {
NewVersion,
currentUserInstInfo: { teacherId },
} = window;
return ( return (
<div className="record__item"> <div className='record__item'>
{ {!((!NewVersion && !teacherId) || (NewVersion && Permission.hasEduStudentPhone()))
!((!NewVersion && !teacherId) || (NewVersion && Permission.hasEduStudentPhone())) ? ? (studentBasicVO.phone || phone).replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3')
(studentBasicVO.phone || phone).replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3') : : studentBasicVO.phone || phone}
studentBasicVO.phone || phone {type !== 'videoCourse' && (
}
{
type !== 'videoCourse' &&
// 此处为了兼容4.0 和 5.0的扣课 不扣课学员的绑定微信 // 此处为了兼容4.0 和 5.0的扣课 不扣课学员的绑定微信
<Tooltip <Tooltip title={`${studentBasicVO.weChatStatus || weChatStatus || wechatStatus ? '已绑定微信' : '未绑定微信'}`}>
title={`${(studentBasicVO.weChatStatus || weChatStatus || wechatStatus) ? '已绑定微信' : '未绑定微信'}`}
>
<span <span
className="iconfont icon" className='iconfont icon'
style={(studentBasicVO.weChatStatus || weChatStatus || wechatStatus) ? { style={
studentBasicVO.weChatStatus || weChatStatus || wechatStatus
? {
color: '#00D20D', color: '#00D20D',
fontSize: '16px', fontSize: '16px',
marginLeft: 6 marginLeft: 6,
} : { }
: {
fontSize: '16px', fontSize: '16px',
color:'#BFBFBF', color: '#BFBFBF',
marginLeft: 6 marginLeft: 6,
}}
>&#xe68d;</span>
</Tooltip>
} }
}>
&#xe68d;
</span>
</Tooltip>
)}
</div> </div>
) );
} },
} },
]; ];
// 扣课时学员显示消耗课程和剩余课时 // 扣课时学员显示消耗课程和剩余课时
if (studentType === 'DEDUCTION') { if (studentType === 'DEDUCTION') {
const { consumeStudentList } = this.props; const { consumeStudentList } = this.props;
columns.push({ columns.push(
{
title: ( title: (
<div className="consumption-course"> <div className='consumption-course'>
<span className="text">消耗课程</span> <span className='text'>消耗课程</span>
<Tooltip title="学员在这上课所消耗的课程"> <Tooltip title='学员在这上课所消耗的课程'>
<span className="icon iconfont">&#xe6f2;</span> <span className='icon iconfont'>&#xe6f2;</span>
</Tooltip> </Tooltip>
</div> </div>
), ),
...@@ -112,26 +118,26 @@ class StudentList extends React.Component { ...@@ -112,26 +118,26 @@ class StudentList extends React.Component {
const { digestHourVOS, studentId } = record; const { digestHourVOS, studentId } = record;
if (!digestHourVOS || !digestHourVOS.length) { if (!digestHourVOS || !digestHourVOS.length) {
return <span className="digest-hour--empty">无可消耗课程</span> return <span className='digest-hour--empty'>无可消耗课程</span>;
} else if (digestHourVOS.length === 1) { } else if (digestHourVOS.length === 1) {
return <span className="course-name">{digestHourVOS[0].courseName}</span> return <span className='course-name'>{digestHourVOS[0].courseName}</span>;
} else { } else {
const { showDegiest, currentCourse } = this.state; const { showDegiest, currentCourse } = this.state;
// 默认显示第一个课程包的名称 // 默认显示第一个课程包的名称
let _currentCourse = digestHourVOS[0]; let _currentCourse = digestHourVOS[0];
// 判断学员是否被勾选了 // 判断学员是否被勾选了
const hasSelect = _.find(consumeStudentList, item => { const hasSelect = _.find(consumeStudentList, (item) => {
return item.studentId === studentId; return item.studentId === studentId;
}); });
// 如果被勾选了，再判断选中的课时包是哪个 // 如果被勾选了，再判断选中的课时包是哪个
if (hasSelect) { if (hasSelect) {
const hasSelectCourse = _.find(digestHourVOS, item => { const hasSelectCourse = _.find(digestHourVOS, (item) => {
return item.courseId === hasSelect.classHourId return item.courseId === hasSelect.classHourId;
}); });
if (hasSelectCourse) { if (hasSelectCourse) {
_currentCourse = hasSelectCourse _currentCourse = hasSelectCourse;
} }
} }
// 选择课时包之后， 根据学员ID判断选择的是哪个学员的课时包 // 选择课时包之后， 根据学员ID判断选择的是哪个学员的课时包
...@@ -140,32 +146,27 @@ class StudentList extends React.Component { ...@@ -140,32 +146,27 @@ class StudentList extends React.Component {
} }
if (this.isDisabledRow(record)) { if (this.isDisabledRow(record)) {
return <span className="course-name">{_currentCourse.courseName}</span> return <span className='course-name'>{_currentCourse.courseName}</span>;
} else { } else {
return ( return (
<Dropdown <Dropdown overlay={this.renderCourseMenu(digestHourVOS)} placement='bottomCenter' arrow>
overlay={this.renderCourseMenu(digestHourVOS)}
placement="bottomCenter"
arrow
>
<div <div
className="digest-hour" className='digest-hour'
onMouseEnter={() => { onMouseEnter={() => {
this.setState({ showDegiest: true }); this.setState({ showDegiest: true });
}} }}>
> <span className='course-name'>{_currentCourse.courseName}</span>
<span className="course-name">{_currentCourse.courseName}</span> {digestHourVOS.length > 1 && !this.isDisabledRow(record) && (
{
digestHourVOS.length > 1 && !this.isDisabledRow(record) &&
<span className={`icon iconfont ${showDegiest ? 'show' : 'hidden'}`}>&#xe6fa;</span> <span className={`icon iconfont ${showDegiest ? 'show' : 'hidden'}`}>&#xe6fa;</span>
} )}
</div> </div>
</Dropdown> </Dropdown>
) );
} }
} }
} },
}, { },
{
title: '剩余课时', title: '剩余课时',
key: 'leftLessons', key: 'leftLessons',
dataIndex: 'leftLessons', dataIndex: 'leftLessons',
...@@ -174,23 +175,23 @@ class StudentList extends React.Component { ...@@ -174,23 +175,23 @@ class StudentList extends React.Component {
const { digestHourVOS, studentId } = record; const { digestHourVOS, studentId } = record;
if (!digestHourVOS || !digestHourVOS.length) { if (!digestHourVOS || !digestHourVOS.length) {
return '-' return '-';
} else if (digestHourVOS.length === 1) { } else if (digestHourVOS.length === 1) {
return digestHourVOS[0].leftLessons; return digestHourVOS[0].leftLessons;
} else { } else {
const { currentCourse } = this.state; const { currentCourse } = this.state;
let _currentCourse = digestHourVOS[0]; let _currentCourse = digestHourVOS[0];
// 判断学员是否被选中了 // 判断学员是否被选中了
const hasSelect = _.find(consumeStudentList, item => { const hasSelect = _.find(consumeStudentList, (item) => {
return item.studentId === studentId; return item.studentId === studentId;
}); });
// 如果学员被勾选了，再判断该学员选择的课程包是哪个 // 如果学员被勾选了，再判断该学员选择的课程包是哪个
if (hasSelect) { if (hasSelect) {
const hasSelectCourse = _.find(digestHourVOS, item => { const hasSelectCourse = _.find(digestHourVOS, (item) => {
return item.courseId === hasSelect.classHourId return item.courseId === hasSelect.classHourId;
}); });
if (hasSelectCourse) { if (hasSelectCourse) {
_currentCourse = hasSelectCourse _currentCourse = hasSelectCourse;
} }
} }
// 选择课时包之后， 根据学员ID判断选择的是哪个学员的课时包 // 选择课时包之后， 根据学员ID判断选择的是哪个学员的课时包
...@@ -200,8 +201,9 @@ class StudentList extends React.Component { ...@@ -200,8 +201,9 @@ class StudentList extends React.Component {
return _currentCourse.leftLessons; return _currentCourse.leftLessons;
} }
},
} }
}) );
} }
// 在读学员显示年级 // 在读学员显示年级
if (type === 'videoCourse' && isNormal) { if (type === 'videoCourse' && isNormal) {
...@@ -211,78 +213,87 @@ class StudentList extends React.Component { ...@@ -211,78 +213,87 @@ class StudentList extends React.Component {
render: (text, record) => { render: (text, record) => {
const { studentBasicVO = {}, gradeName } = record; const { studentBasicVO = {}, gradeName } = record;
return studentBasicVO.gradeName || gradeName; return studentBasicVO.gradeName || gradeName;
} },
}) });
} }
// 潜在学员显示跟进人和学员来源 // 潜在学员显示跟进人和学员来源
if (isPotential) { if (isPotential) {
columns.push({ columns.push(
{
title: '跟进人', title: '跟进人',
dataIndex: 'saleName', dataIndex: 'saleName',
render: (val, record) => { render: (val, record) => {
const { studentSaleVO = {}, saleName } = record; const { studentSaleVO = {}, saleName } = record;
return studentSaleVO.saleName || saleName; return studentSaleVO.saleName || saleName;
} },
}, { },
{
title: '学员来源', title: '学员来源',
dataIndex: 'resourceType', dataIndex: 'resourceType',
render: (val, record) => { render: (val, record) => {
const { studentSaleVO = {}, resourceType } = record; const { studentSaleVO = {}, resourceType } = record;
return resourceData[studentSaleVO.resourceType || resourceType]; return resourceData[studentSaleVO.resourceType || resourceType];
},
} }
}); );
} }
// 历史学员显示结业时间和报读课程 // 历史学员显示结业时间和报读课程
if (isHistory) { if (isHistory) {
columns.push({ columns.push(
{
title: '结业时间', title: '结业时间',
key: 'graduationTime', key: 'graduationTime',
dataIndex: 'graduationTime', dataIndex: 'graduationTime',
width: 200, width: 200,
render: (val, record) => { render: (val, record) => {
const { studentHistoryVO = {}, graduationTime } = record; const { studentHistoryVO = {}, graduationTime } = record;
return formatDate('YYYY-MM-DD', (studentHistoryVO.graduationTime || graduationTime)) return formatDate('YYYY-MM-DD', studentHistoryVO.graduationTime || graduationTime);
} },
}, { },
{
title: '报读课程', title: '报读课程',
key: 'lostCourseName', key: 'lostCourseName',
dataIndex: 'lostCourseName', dataIndex: 'lostCourseName',
width: 150, width: 150,
render: (val, record) => { render: (val, record) => {
const { studentHistoryVO = {}, lostCourseName } = record; const { studentHistoryVO = {}, lostCourseName } = record;
return studentHistoryVO.lostCourseName || lostCourseName return studentHistoryVO.lostCourseName || lostCourseName;
},
} }
}); );
} }
return columns; return columns;
} };
// 课程下拉选项 // 课程下拉选项
renderCourseMenu = (courseList) => { renderCourseMenu = (courseList) => {
return ( return (
<Menu> <Menu>
{ {_.map(courseList, (item) => {
_.map(courseList, (item) => {
return ( return (
<Menu.Item onClick={(e) => { this.handleSelectCourse(e, item)} }> <Menu.Item
{ item.courseName } onClick={(e) => {
this.handleSelectCourse(e, item);
}}>
{item.courseName}
</Menu.Item> </Menu.Item>
) );
}) })}
}
</Menu> </Menu>
) );
} };
// 选择当前课程 // 选择当前课程
handleSelectCourse = (e, currentCourse) => { handleSelectCourse = (e, currentCourse) => {
e.domEvent.stopPropagation(); e.domEvent.stopPropagation();
this.setState({ this.setState(
{
currentCourse, currentCourse,
showDegiest: false, showDegiest: false,
}, () => { },
() => {
const { consumeStudentList = [], studentIds, excludeIds } = this.props; const { consumeStudentList = [], studentIds, excludeIds } = this.props;
const { prevSelectRows } = this.state; const { prevSelectRows } = this.state;
const { studentId, courseId, leftLessons, name, phone } = currentCourse; const { studentId, courseId, leftLessons, name, phone } = currentCourse;
...@@ -290,12 +301,12 @@ class StudentList extends React.Component { ...@@ -290,12 +301,12 @@ class StudentList extends React.Component {
// 选完课时包之后，自动勾选当前学员 // 选完课时包之后，自动勾选当前学员
const _studentIds = [...studentIds, studentId]; const _studentIds = [...studentIds, studentId];
const hasExist = _.find(consumeStudentList, item => { const hasExist = _.find(consumeStudentList, (item) => {
return item.studentId === studentId return item.studentId === studentId;
}); });
if (hasExist) { if (hasExist) {
_consumeStudentList = _.map(consumeStudentList, item => { _consumeStudentList = _.map(consumeStudentList, (item) => {
if (item.studentId === studentId) { if (item.studentId === studentId) {
item.classHourId = courseId; item.classHourId = courseId;
} }
...@@ -307,13 +318,14 @@ class StudentList extends React.Component { ...@@ -307,13 +318,14 @@ class StudentList extends React.Component {
phone, phone,
studentId, studentId,
classHourId: courseId, classHourId: courseId,
consumeHourNum: leftLessons consumeHourNum: leftLessons,
}) });
} }
this.props.onSelect(_studentIds , _consumeStudentList, prevSelectRows); this.props.onSelect(_studentIds, _consumeStudentList, prevSelectRows);
});
} }
);
};
handleSelect = (selectedRowKeys, selectedRows) => { handleSelect = (selectedRowKeys, selectedRows) => {
const { studentType, allstudentList, consumeStudentList } = this.props; const { studentType, allstudentList, consumeStudentList } = this.props;
...@@ -325,14 +337,14 @@ class StudentList extends React.Component { ...@@ -325,14 +337,14 @@ class StudentList extends React.Component {
let { currentCourse, prevSelectRows } = this.state; let { currentCourse, prevSelectRows } = this.state;
prevSelectRows = _.filter(prevSelectRows, (item) => { prevSelectRows = _.filter(prevSelectRows, (item) => {
return allStudentIds.indexOf(item.studentId) === -1 return allStudentIds.indexOf(item.studentId) === -1;
}); });
const savedSelectedRows = [...prevSelectRows, ...selectedRows]; const savedSelectedRows = [...prevSelectRows, ...selectedRows];
allSelectRows = savedSelectedRows.map((item) => { allSelectRows = savedSelectedRows.map((item) => {
const { studentId, digestHourVOS = [], name, phone } = item; const { studentId, digestHourVOS = [], name, phone } = item;
// 如果该学员已经被选择了 // 如果该学员已经被选择了
const hasSelectItem = _.find(consumeStudentList, _item => { const hasSelectItem = _.find(consumeStudentList, (_item) => {
return _item.studentId === item.studentId; return _item.studentId === item.studentId;
}); });
if (hasSelectItem) { if (hasSelectItem) {
...@@ -343,103 +355,95 @@ class StudentList extends React.Component { ...@@ -343,103 +355,95 @@ class StudentList extends React.Component {
phone, phone,
studentId, studentId,
classHourId: digestHourVOS[0].courseId, classHourId: digestHourVOS[0].courseId,
consumeHourNum: digestHourVOS[0].leftLessons consumeHourNum: digestHourVOS[0].leftLessons,
} };
}); });
this.setState({ this.setState(
{
selectedRows, selectedRows,
savedSelectedRows savedSelectedRows,
}, () => { },
() => {
this.props.onSelect(studentIds, allSelectRows, savedSelectedRows); this.props.onSelect(studentIds, allSelectRows, savedSelectedRows);
}); }
);
} else { } else {
this.props.onSelect(studentIds); this.props.onSelect(studentIds);
} }
} };
isDisabledRow = (record) => { isDisabledRow = (record) => {
// 扣课时的情况下, 无消耗课程的禁用 // 扣课时的情况下, 无消耗课程的禁用
const { const { after, excludeIds, studentType, studentList = [], consumeStudentList = [] } = this.props;
after,
excludeIds,
studentType,
studentList = [],
consumeStudentList = []
} = this.props;
const { digestHourVOS } = record; const { digestHourVOS } = record;
const hasDigestHours = digestHourVOS && digestHourVOS.length; const hasDigestHours = digestHourVOS && digestHourVOS.length;
// 已经入库的学员不可再选择 // 已经入库的学员不可再选择
const hasSelect = _.find(excludeIds, item => { const hasSelect = _.find(excludeIds, (item) => {
return item == record.studentId return item == record.studentId;
}); });
let disabled = false; let disabled = false;
// 扣课时学员课时为0的情况下禁止选择 // 扣课时学员课时为0的情况下禁止选择
if (studentType === 'DEDUCTION') { if (studentType === 'DEDUCTION') {
// 判断是否已经在不扣课时里 // 判断是否已经在不扣课时里
if (_.find(studentList, item => item.studentId === record.studentId)) { if (_.find(studentList, (item) => item.studentId === record.studentId)) {
disabled = true; disabled = true;
} else if (!hasDigestHours || (after && !!hasSelect)) { } else if (!hasDigestHours || (after && !!hasSelect)) {
disabled = true; disabled = true;
} }
} else { } else {
if (_.find(consumeStudentList, item => item.studentId === record.studentId)) { if (_.find(consumeStudentList, (item) => item.studentId === record.studentId)) {
disabled = true; disabled = true;
} else if (after && !!hasSelect) { } else if (after && !!hasSelect) {
disabled = true disabled = true;
} }
} }
return disabled return disabled;
} };
render() { render() {
const { const { after, query, totalCount, studentIds, allstudentList } = this.props;
after,
query,
totalCount,
studentIds,
allstudentList,
} = this.props;
const { prevSelectRows, selectedRows } = this.state; const { prevSelectRows, selectedRows } = this.state;
const { current, size, pageNo, pageSize, } = query; const { current, size, pageNo, pageSize } = query;
const rowSelection = { const rowSelection = {
selectedRowKeys: studentIds, selectedRowKeys: studentIds,
onChange: this.handleSelect, onChange: this.handleSelect,
getCheckboxProps: (record) => { getCheckboxProps: (record) => {
return { return {
disabled: this.isDisabledRow(record) disabled: this.isDisabledRow(record),
} };
} },
}; };
return ( return (
<div className="student-list"> <div className='student-list'>
<Table <XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
bordered bordered
size={'small'} size={'small'}
rowKey={item => item.studentId} rowKey={(item) => item.studentId}
dataSource={allstudentList} dataSource={allstudentList}
columns={this.parseColumns()} columns={this.parseColumns()}
rowSelection={rowSelection} rowSelection={rowSelection}
onRow={record => ({ onRow={(record) => ({
onClick: e => { onClick: (e) => {
e.currentTarget e.currentTarget.getElementsByClassName('ant-checkbox-wrapper')[0].click();
.getElementsByClassName("ant-checkbox-wrapper")[0] },
.click();
}
})} })}
scroll={{ y: 350 }} scroll={{ y: 350 }}
pagination={false} pagination={false}
/> />
{ {isNewVersion ? (
isNewVersion ?
<PageControl <PageControl
size="small" size='small'
current={current - 1} current={current - 1}
pageSize={size} pageSize={size}
total={totalCount} total={totalCount}
...@@ -451,9 +455,10 @@ class StudentList extends React.Component { ...@@ -451,9 +455,10 @@ class StudentList extends React.Component {
onShowSizeChange={(current, size) => { onShowSizeChange={(current, size) => {
this.props.onChange('size', size); this.props.onChange('size', size);
}} }}
/> : />
) : (
<PageControl <PageControl
size="small" size='small'
current={pageNo} current={pageNo}
pageSize={pageSize} pageSize={pageSize}
total={totalCount} total={totalCount}
...@@ -465,9 +470,9 @@ class StudentList extends React.Component { ...@@ -465,9 +470,9 @@ class StudentList extends React.Component {
this.props.onChange('pageNo', pageSize); this.props.onChange('pageNo', pageSize);
}} }}
/> />
} )}
</div> </div>
) );
} }
} }
......
src/modules/course-manage/offline-course/OfflineCourseData.jsx
import React from 'react'; import Service from '@/common/js/service';
import { Tooltip, Input, Radio, Table, Checkbox } from 'antd'; import User from '@/common/js/user';
import college from '@/common/lottie/college';
import { PageControl, XMTable } from '@/components';
import Breadcrumbs from '@/components/Breadcrumbs';
import { Checkbox, Input, Tooltip } from 'antd';
import moment from 'moment'; import moment from 'moment';
import React from 'react';
import _ from 'underscore'; import _ from 'underscore';
import Breadcrumbs from "@/components/Breadcrumbs";
import PageControl from '@/components/PageControl';
import Service from "@/common/js/service";
import User from '@/common/js/user';
import './OfflineCourseData.less'; import './OfflineCourseData.less';
const { Search } = Input; const { Search } = Input;
...@@ -34,7 +35,7 @@ export default class OfflineCourseData extends React.Component { ...@@ -34,7 +35,7 @@ export default class OfflineCourseData extends React.Component {
joinInNum: 0, joinInNum: 0,
joinNum: 0, joinNum: 0,
joinOutNum: 0, joinOutNum: 0,
} };
} }
componentDidMount() { componentDidMount() {
...@@ -46,10 +47,11 @@ export default class OfflineCourseData extends React.Component { ...@@ -46,10 +47,11 @@ export default class OfflineCourseData extends React.Component {
Service.Hades('public/hades/getOfflineCourseJoinBase', { courseId }).then((res) => { Service.Hades('public/hades/getOfflineCourseJoinBase', { courseId }).then((res) => {
if (res.success) { if (res.success) {
const { result } = res; const { result } = res;
const group = _.groupBy(result.calendarTime, item => moment(item).format('YYYY-MM')); const group = _.groupBy(result.calendarTime, (item) => moment(item).format('YYYY-MM'));
const calendarTime = _.map(group, (value, key) => ({ key, value })); const calendarTime = _.map(group, (value, key) => ({ key, value }));
const currentDate = calendarTime[currentIndex].value[0]; const currentDate = calendarTime[currentIndex].value[0];
this.setState({ this.setState(
{
courseName: result.courseName, courseName: result.courseName,
fullJoin: result.fullJoin || 0, fullJoin: result.fullJoin || 0,
totalJoin: result.totalJoin || 0, totalJoin: result.totalJoin || 0,
...@@ -60,10 +62,12 @@ export default class OfflineCourseData extends React.Component { ...@@ -60,10 +62,12 @@ export default class OfflineCourseData extends React.Component {
whetherSetSignOut: result.whetherSetSignOut, whetherSetSignOut: result.whetherSetSignOut,
whetherSetSignInOut: result.whetherSetSignInOut, whetherSetSignInOut: result.whetherSetSignInOut,
whetherSetApply: result.whetherSetApply, whetherSetApply: result.whetherSetApply,
}, () => this.getDateDetail()); },
} () => this.getDateDetail()
}) );
} }
});
};
getDateDetail = (current = 1) => { getDateDetail = (current = 1) => {
const { query, currentDate, courseId } = this.state; const { query, currentDate, courseId } = this.state;
...@@ -75,9 +79,9 @@ export default class OfflineCourseData extends React.Component { ...@@ -75,9 +79,9 @@ export default class OfflineCourseData extends React.Component {
joinInNum: res.result.joinInNum || 0, joinInNum: res.result.joinInNum || 0,
joinNum: res.result.joinNum || 0, joinNum: res.result.joinNum || 0,
joinOutNum: res.result.joinOutNum || 0, joinOutNum: res.result.joinOutNum || 0,
}) });
} }
}) });
} }
query.current = current; query.current = current;
query.date = currentDate; query.date = currentDate;
...@@ -85,8 +89,8 @@ export default class OfflineCourseData extends React.Component { ...@@ -85,8 +89,8 @@ export default class OfflineCourseData extends React.Component {
if (res.success) { if (res.success) {
this.setState({ data: res.result.records, total: res.result.total }); this.setState({ data: res.result.records, total: res.result.total });
} }
}) });
} };
getColumns = () => { getColumns = () => {
const { whetherSetSignIn, whetherSetSignOut, whetherSetApply } = this.state; const { whetherSetSignIn, whetherSetSignOut, whetherSetApply } = this.state;
...@@ -96,50 +100,49 @@ export default class OfflineCourseData extends React.Component { ...@@ -96,50 +100,49 @@ export default class OfflineCourseData extends React.Component {
key: 'name', key: 'name',
dataIndex: 'name', dataIndex: 'name',
render: (val, record) => { render: (val, record) => {
return ( return <div>{record.name}</div>;
<div>{record.name}</div> },
)
}
}, },
{ {
title: "手机号", title: '手机号',
key: "phone", key: 'phone',
dataIndex: "phone", dataIndex: 'phone',
render: (val, item) => { render: (val, item) => {
return ( return <div>{item.phone || '-'}</div>;
<div>{item.phone || '-'}</div>
)
}, },
}, },
]; ];
whetherSetApply === 'YES' && columns.push({ whetherSetApply === 'YES' &&
columns.push({
title: '报名时间', title: '报名时间',
key: 'joinTime', key: 'joinTime',
dataIndex: 'joinTime', dataIndex: 'joinTime',
render: (val, item) => { render: (val, item) => {
return <div>{formatDate('YYYY-MM-DD H:i', item.joinTime)}</div> return <div>{formatDate('YYYY-MM-DD H:i', item.joinTime)}</div>;
} },
}); });
whetherSetSignIn === 'YES' && columns.push({ whetherSetSignIn === 'YES' &&
columns.push({
title: '签到时间', title: '签到时间',
key: 'joinInTime', key: 'joinInTime',
dataIndex: 'joinInTime', dataIndex: 'joinInTime',
sorter: true, sorter: true,
render: (val) => { render: (val) => {
return val ? formatDate('YYYY-MM-DD H:i', val) : '-'; return val ? formatDate('YYYY-MM-DD H:i', val) : '-';
} },
}) });
whetherSetSignOut === 'YES' && columns.push({ whetherSetSignOut === 'YES' &&
columns.push({
title: '签退时间', title: '签退时间',
key: 'joinOutTime', key: 'joinOutTime',
dataIndex: 'joinOutTime', dataIndex: 'joinOutTime',
sorter: true, sorter: true,
render: (val) => { render: (val) => {
return val ? formatDate('YYYY-MM-DD H:i', val) : '-'; return val ? formatDate('YYYY-MM-DD H:i', val) : '-';
} },
}) });
return columns; return columns;
} };
handleChangeTable = (pagination, filters, sorter) => { handleChangeTable = (pagination, filters, sorter) => {
const { columnKey, order } = sorter; const { columnKey, order } = sorter;
...@@ -161,8 +164,8 @@ export default class OfflineCourseData extends React.Component { ...@@ -161,8 +164,8 @@ export default class OfflineCourseData extends React.Component {
}; };
this.setState({ query: _query }, () => { this.setState({ query: _query }, () => {
this.getDateDetail(_query.current); this.getDateDetail(_query.current);
}) });
} };
render() { render() {
const { const {
...@@ -189,26 +192,32 @@ export default class OfflineCourseData extends React.Component { ...@@ -189,26 +192,32 @@ export default class OfflineCourseData extends React.Component {
const calendarLength = calendarTime.length; const calendarLength = calendarTime.length;
const dateList = (calendarTime[currentIndex] || {}).value || []; const dateList = (calendarTime[currentIndex] || {}).value || [];
return ( return (
<div className="page offline-course-data"> <div className='page offline-course-data'>
<Breadcrumbs <Breadcrumbs
navList="参与数据" navList='参与数据'
goBack={() => { goBack={() => {
window.RCHistory.goBack(); window.RCHistory.goBack();
}} }}
/> />
<div className="box"> <div className='box'>
<div className="offline-name">课程名称：{courseName}</div> <div className='offline-name'>课程名称：{courseName}</div>
{whetherSetApply === 'YES' && <div className="offline-application">报名总人数：{totalJoin}</div>} {whetherSetApply === 'YES' && <div className='offline-application'>报名总人数：{totalJoin}</div>}
{whetherSetSignInOut === 'YES' && <div className="offline-application"> {whetherSetSignInOut === 'YES' && (
完成考勤总人数<Tooltip title="根据上课日期，在规定时间内完成签到和签退的学员数"><span className="icon iconfont">&#xe7c4;</span></Tooltip>：{fullJoin} <div className='offline-application'>
</div>} 完成考勤总人数
<Tooltip title='根据上课日期，在规定时间内完成签到和签退的学员数'>
<span className='icon iconfont'>&#xe7c4;</span>
</Tooltip>
：{fullJoin}
</div>
)}
</div> </div>
<div className="box data-box"> <div className='box data-box'>
<div className="left-box"> <div className='left-box'>
<div className="left-title">上课日期</div> <div className='left-title'>上课日期</div>
<div className="left-calendar"> <div className='left-calendar'>
<div <div
className="icon-box" className='icon-box'
onClick={() => { onClick={() => {
const index = currentIndex - 1; const index = currentIndex - 1;
if (index >= 0 && index < calendarLength) { if (index >= 0 && index < calendarLength) {
...@@ -216,13 +225,12 @@ export default class OfflineCourseData extends React.Component { ...@@ -216,13 +225,12 @@ export default class OfflineCourseData extends React.Component {
this.getDateDetail(); this.getDateDetail();
}); });
} }
}} }}>
> <span className='icon iconfont'>&#xe79c;</span>
<span className="icon iconfont">&#xe79c;</span>
</div> </div>
<div className="calendar-text">{(calendarTime[currentIndex] || {}).key}</div> <div className='calendar-text'>{(calendarTime[currentIndex] || {}).key}</div>
<div <div
className="icon-box" className='icon-box'
onClick={() => { onClick={() => {
const index = currentIndex + 1; const index = currentIndex + 1;
if (index >= 0 && index < calendarLength) { if (index >= 0 && index < calendarLength) {
...@@ -230,60 +238,69 @@ export default class OfflineCourseData extends React.Component { ...@@ -230,60 +238,69 @@ export default class OfflineCourseData extends React.Component {
this.getDateDetail(); this.getDateDetail();
}); });
} }
}} }}>
> <span className='icon iconfont'>&#xe79b;</span>
<span className="icon iconfont">&#xe79b;</span>
</div> </div>
</div> </div>
<div className="date-list"> <div className='date-list'>
{dateList.map(item => ( {dateList.map((item) => (
<div <div
className={`date-item${item === currentDate ? ' selected' : ''}`} className={`date-item${item === currentDate ? ' selected' : ''}`}
key={item} key={item}
onClick={() => { onClick={() => {
this.setState({ currentDate: item }, () => { this.setState({ currentDate: item }, () => {
this.getDateDetail(); this.getDateDetail();
}) });
}} }}>
>{window.formatDate('MM月DD日（WW）', item)}</div> {window.formatDate('MM月DD日（WW）', item)}
</div>
))} ))}
</div> </div>
</div> </div>
<div className="right-box"> <div className='right-box'>
<div className="selected-date">{moment(currentDate).format('MM-DD')}</div> <div className='selected-date'>{moment(currentDate).format('MM-DD')}</div>
<div className="detail-data"> <div className='detail-data'>
{offlineCourseType !== 'ALL_DAY_OFFLINE' && whetherSetApply === 'YES' && <span className="icon iconfont">&#xe89f;</span>} {offlineCourseType !== 'ALL_DAY_OFFLINE' && whetherSetApply === 'YES' && <span className='icon iconfont'>&#xe89f;</span>}
{offlineCourseType !== 'ALL_DAY_OFFLINE' && whetherSetApply === 'YES' && <span className="data-text">报名人数：{joinNum}</span>} {offlineCourseType !== 'ALL_DAY_OFFLINE' && whetherSetApply === 'YES' && <span className='data-text'>报名人数：{joinNum}</span>}
{whetherSetSignInOut === 'YES' && <span className="icon iconfont">&#xe89e;</span>} {whetherSetSignInOut === 'YES' && <span className='icon iconfont'>&#xe89e;</span>}
{whetherSetSignInOut === 'YES' && <span className="data-text">完成考勤数<Tooltip title="当日在规定时间内完成签到和签退的学员数"><span className="icon iconfont">&#xe7c4;</span></Tooltip>：{fullJoinNum}</span>} {whetherSetSignInOut === 'YES' && (
{whetherSetSignIn === 'YES' && <span className="icon iconfont">&#xe8a0;</span>} <span className='data-text'>
{whetherSetSignIn === 'YES' && <span className="data-text">签到人数：{joinInNum}</span>} 完成考勤数
{whetherSetSignOut === 'YES' && <span className="icon iconfont">&#xe89d;</span>} <Tooltip title='当日在规定时间内完成签到和签退的学员数'>
{whetherSetSignOut === 'YES' && <span className="data-text">签退人数：{joinOutNum}</span>} <span className='icon iconfont'>&#xe7c4;</span>
</Tooltip>
：{fullJoinNum}
</span>
)}
{whetherSetSignIn === 'YES' && <span className='icon iconfont'>&#xe8a0;</span>}
{whetherSetSignIn === 'YES' && <span className='data-text'>签到人数：{joinInNum}</span>}
{whetherSetSignOut === 'YES' && <span className='icon iconfont'>&#xe89d;</span>}
{whetherSetSignOut === 'YES' && <span className='data-text'>签退人数：{joinOutNum}</span>}
</div> </div>
<div className="detail-filter"> <div className='detail-filter'>
<Search <Search
className="search-input" className='search-input'
placeholder="搜索学员姓名/手机号" placeholder='搜索学员姓名/手机号'
style={{ width: 200, marginRight: 24 }} style={{ width: 200, marginRight: 24 }}
enterButton={<span className="icon iconfont">&#xe832;</span>} enterButton={<span className='icon iconfont'>&#xe832;</span>}
onSearch={(value) => { onSearch={(value) => {
const _query = { ...query }; const _query = { ...query };
if (value) { if (value) {
const isPhone = (value || "").match(/^\d+$/); const isPhone = (value || '').match(/^\d+$/);
const name = isPhone ? "storeCustomerPhone" : "storeCustomerName"; const name = isPhone ? 'storeCustomerPhone' : 'storeCustomerName';
_query.storeCustomerName = ""; _query.storeCustomerName = '';
_query.storeCustomerPhone = ""; _query.storeCustomerPhone = '';
_query[name] = value; _query[name] = value;
} else { } else {
_query.storeCustomerName = ""; _query.storeCustomerName = '';
_query.storeCustomerPhone = ""; _query.storeCustomerPhone = '';
} }
this.setState({ query: _query }, () => this.getDateDetail()); this.setState({ query: _query }, () => this.getDateDetail());
}} }}
/> />
{whetherSetSignInOut === 'YES' && <div className="filter-box"> {whetherSetSignInOut === 'YES' && (
<span className="label">签到情况：</span> <div className='filter-box'>
<span className='label'>签到情况：</span>
<Checkbox <Checkbox
checked={query.joinInState === 'YES'} checked={query.joinInState === 'YES'}
onChange={(e) => { onChange={(e) => {
...@@ -291,10 +308,11 @@ export default class OfflineCourseData extends React.Component { ...@@ -291,10 +308,11 @@ export default class OfflineCourseData extends React.Component {
this.setState({ query: { ...query, joinInState: 'YES' } }, () => this.getDateDetail()); this.setState({ query: { ...query, joinInState: 'YES' } }, () => this.getDateDetail());
} else { } else {
delete query.joinInState; delete query.joinInState;
this.setState({ query }, () => this.getDateDetail()) this.setState({ query }, () => this.getDateDetail());
} }
}} }}>
>已签到</Checkbox> 已签到
</Checkbox>
<Checkbox <Checkbox
checked={query.joinInState === 'NO'} checked={query.joinInState === 'NO'}
onChange={(e) => { onChange={(e) => {
...@@ -302,13 +320,16 @@ export default class OfflineCourseData extends React.Component { ...@@ -302,13 +320,16 @@ export default class OfflineCourseData extends React.Component {
this.setState({ query: { ...query, joinInState: 'NO' } }, () => this.getDateDetail()); this.setState({ query: { ...query, joinInState: 'NO' } }, () => this.getDateDetail());
} else { } else {
delete query.joinInState; delete query.joinInState;
this.setState({ query }, () => this.getDateDetail()) this.setState({ query }, () => this.getDateDetail());
} }
}} }}>
>未签到</Checkbox> 未签到
</div>} </Checkbox>
{whetherSetSignOut === 'YES' && <div className="filter-box"> </div>
<span className="label">签退情况：</span> )}
{whetherSetSignOut === 'YES' && (
<div className='filter-box'>
<span className='label'>签退情况：</span>
<Checkbox <Checkbox
checked={query.joinOutState === 'YES'} checked={query.joinOutState === 'YES'}
onChange={(e) => { onChange={(e) => {
...@@ -316,10 +337,11 @@ export default class OfflineCourseData extends React.Component { ...@@ -316,10 +337,11 @@ export default class OfflineCourseData extends React.Component {
this.setState({ query: { ...query, joinOutState: 'YES' } }, () => this.getDateDetail()); this.setState({ query: { ...query, joinOutState: 'YES' } }, () => this.getDateDetail());
} else { } else {
delete query.joinOutState; delete query.joinOutState;
this.setState({ query }, () => this.getDateDetail()) this.setState({ query }, () => this.getDateDetail());
} }
}} }}>
>已签退</Checkbox> 已签退
</Checkbox>
<Checkbox <Checkbox
checked={query.joinOutState === 'NO'} checked={query.joinOutState === 'NO'}
onChange={(e) => { onChange={(e) => {
...@@ -327,15 +349,21 @@ export default class OfflineCourseData extends React.Component { ...@@ -327,15 +349,21 @@ export default class OfflineCourseData extends React.Component {
this.setState({ query: { ...query, joinOutState: 'NO' } }, () => this.getDateDetail()); this.setState({ query: { ...query, joinOutState: 'NO' } }, () => this.getDateDetail());
} else { } else {
delete query.joinOutState; delete query.joinOutState;
this.setState({ query }, () => this.getDateDetail()) this.setState({ query }, () => this.getDateDetail());
} }
}} }}>
>未签退</Checkbox> 未签退
</div>} </Checkbox>
</div> </div>
<Table )}
</div>
<XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
bordered bordered
size="middle" size='middle'
pagination={false} pagination={false}
columns={this.getColumns()} columns={this.getColumns()}
loading={loading} loading={loading}
...@@ -354,6 +382,6 @@ export default class OfflineCourseData extends React.Component { ...@@ -354,6 +382,6 @@ export default class OfflineCourseData extends React.Component {
</div> </div>
</div> </div>
</div> </div>
) );
} }
} }
src/modules/course-manage/offline-course/components/OfflineCourseList.jsx
/*
* @Author: 吴文洁
* @Date: 2020-08-05 10:12:45
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-06-11 16:44:42
* @Description: 视频课-列表模块
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
import Service from '@/common/js/service';
import User from '@/common/js/user';
import college from '@/common/lottie/college';
import { PageControl, XMTable } from '@/components';
import { appId, LIVE_SHARE } from '@/domains/course-domain/constants';
import CourseService from '@/domains/course-domain/CourseService';
import ShareLiveModal from '@/modules/course-manage/modal/ShareLiveModal';
import OfflineCourseData from '@/modules/course-manage/offline-course/OfflineCourseData';
import { Dropdown, message, Modal, Switch, Tooltip } from 'antd';
import moment from 'moment';
import React from 'react'; import React from 'react';
import { Table, Modal, message , Tooltip,Switch,Dropdown} from 'antd';
import { Route, withRouter } from 'react-router-dom'; import { Route, withRouter } from 'react-router-dom';
import moment from 'moment'; import ENUM from '../../../knowledge-base/ENUM.js';
import $ from 'jquery';
import { PageControl } from "@/components";
import { appId, shareUrl, LIVE_SHARE } from '@/domains/course-domain/constants';
import OfflineCourseData from '@/modules/course-manage/offline-course/OfflineCourseData';
import ShareLiveModal from '@/modules/course-manage/modal/ShareLiveModal';
import Service from "@/common/js/service";
import CourseService from "@/domains/course-domain/CourseService";
import RelatedPlanModal from '../../modal/RelatedPlanModal';
import PreviewOfflineModal from '../modal/PreviewOfflineModal'; import PreviewOfflineModal from '../modal/PreviewOfflineModal';
import ENUM from "../../../knowledge-base/ENUM.js";
import User from '@/common/js/user'
import QRCodeModal from '../modal/QRCodeModal'; import QRCodeModal from '../modal/QRCodeModal';
import './OfflineCourseList.less'; import './OfflineCourseList.less';
const ENV = process.env.DEPLOY_ENV || 'dev';
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/pxbWKsYA87.png'; const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/pxbWKsYA87.png';
class OfflineCourseList extends React.Component { class OfflineCourseList extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
id: '', // 视频课ID id: '', // 视频课ID
studentIds: [], studentIds: [],
} };
} }
componentDidMount() { componentDidMount() {
...@@ -37,17 +42,17 @@ class OfflineCourseList extends React.Component { ...@@ -37,17 +42,17 @@ class OfflineCourseList extends React.Component {
} }
} }
handlePlanName = (planArray)=>{ handlePlanName = (planArray) => {
let planStr = ""; let planStr = '';
planArray.map((item,index)=>{ planArray.map((item, index) => {
if(index < planArray.length-1){ if (index < planArray.length - 1) {
planStr = planStr + item.planName + '、'; planStr = planStr + item.planName + '、';
}else{ } else {
planStr = planStr + item.planName planStr = planStr + item.planName;
}
})
return planStr
} }
});
return planStr;
};
// 请求表头 // 请求表头
parseColumns = () => { parseColumns = () => {
const columns = [ const columns = [
...@@ -55,35 +60,39 @@ class OfflineCourseList extends React.Component { ...@@ -55,35 +60,39 @@ class OfflineCourseList extends React.Component {
title: '线下课', title: '线下课',
key: 'scheduleName', key: 'scheduleName',
dataIndex: 'scheduleName', dataIndex: 'scheduleName',
width:321, width: 321,
fixed: 'left', fixed: 'left',
render: (val, record) => { render: (val, record) => {
const { courseMediaVOS, courseName, offlinePlace, calendarTime, startTime, endTime } = record; const { courseMediaVOS, courseName, offlinePlace, calendarTime, startTime, endTime } = record;
const coverUrl = (_.find(courseMediaVOS, data => data.contentType === 'COVER') || {}).mediaUrl; const coverUrl = (_.find(courseMediaVOS, (data) => data.contentType === 'COVER') || {}).mediaUrl;
let isContinue = calendarTime.length > 1; let isContinue = calendarTime.length > 1;
_.reduce(calendarTime, (a, b) => { _.reduce(calendarTime, (a, b) => {
isContinue = isContinue && (b - a === 86400000); isContinue = isContinue && b - a === 86400000;
return b; return b;
}) });
const lastTime = _.last(calendarTime); const lastTime = _.last(calendarTime);
const time = `${!isContinue ? calendarTime.map(item => moment(item).format('MM-DD')).join('、') : `${moment(calendarTime[0]).format('MM-DD')}~${moment(lastTime).format('MM-DD')}`} ${moment(startTime).format('HH:mm')} ~ ${moment(endTime).format('HH:mm')}`; const time = `${
!isContinue
? calendarTime.map((item) => moment(item).format('MM-DD')).join('、')
: `${moment(calendarTime[0]).format('MM-DD')}~${moment(lastTime).format('MM-DD')}`
} ${moment(startTime).format('HH:mm')} ~ ${moment(endTime).format('HH:mm')}`;
return ( return (
<div className="record__item"> <div className='record__item'>
<img className="course-cover" src={coverUrl || defaultCoverUrl} /> <img className='course-cover' src={coverUrl || defaultCoverUrl} />
<div style={{ width: 175 }}> <div style={{ width: 175 }}>
<Tooltip title={courseName}> <Tooltip title={courseName}>
<div className="course-name">{courseName}</div> <div className='course-name'>{courseName}</div>
</Tooltip> </Tooltip>
<Tooltip title={`地点：${offlinePlace}`}> <Tooltip title={`地点：${offlinePlace}`}>
<div className="course-text">地点：{offlinePlace}</div> <div className='course-text'>地点：{offlinePlace}</div>
</Tooltip> </Tooltip>
<Tooltip title={time}> <Tooltip title={time}>
<div className="course-text">{time}</div> <div className='course-text'>{time}</div>
</Tooltip> </Tooltip>
</div> </div>
</div> </div>
) );
} },
}, },
{ {
title: '课程状态', title: '课程状态',
...@@ -92,12 +101,12 @@ class OfflineCourseList extends React.Component { ...@@ -92,12 +101,12 @@ class OfflineCourseList extends React.Component {
width: 120, width: 120,
render: (val, record) => { render: (val, record) => {
return ( return (
<div className="course-state"> <div className='course-state'>
<div style={{ width: 6, height: 6, borderRadius: '50%', background: ENUM.offlineStateShow[val].color, marginRight: 8 }}></div> <div style={{ width: 6, height: 6, borderRadius: '50%', background: ENUM.offlineStateShow[val].color, marginRight: 8 }}></div>
{ENUM.offlineStateShow[val].title} {ENUM.offlineStateShow[val].title}
</div> </div>
) );
} },
}, },
{ {
title: '课程分类', title: '课程分类',
...@@ -105,39 +114,40 @@ class OfflineCourseList extends React.Component { ...@@ -105,39 +114,40 @@ class OfflineCourseList extends React.Component {
dataIndex: 'categoryName', dataIndex: 'categoryName',
width: 120, width: 120,
render: (val, record) => { render: (val, record) => {
return ( return <div className='record__item'>{record.categorySonName}</div>;
<div className="record__item"> },
{record.categorySonName}
</div>
)
}
}, },
{ {
title: <span> title: (
<span>
<span>学院展示</span> <span>学院展示</span>
<Tooltip title={<div>开启后，学员可在学院内查看到此课程。若课程“取消”，则系统会自动“关闭”学院展示。<br/>关闭后，学院内不再展示此课程，但学员仍可通过分享的海报/链接查看此课程。</div>}><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px',fontWeight:'normal'}}>&#xe61d;</i></Tooltip> <Tooltip
</span>, title={
<div>
开启后，学员可在学院内查看到此课程。若课程“取消”，则系统会自动“关闭”学院展示。
<br />
关闭后，学院内不再展示此课程，但学员仍可通过分享的海报/链接查看此课程。
</div>
}>
<i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px', fontWeight: 'normal' }}>
&#xe61d;
</i>
</Tooltip>
</span>
),
width: 120, width: 120,
dataIndex: "courseware", dataIndex: 'courseware',
render: (val, item, index) => { render: (val, item, index) => {
return ( return <Switch disabled={item.courseState === 'EXPIRED'} checked={item.shelfState === 'YES'} onChange={() => this.changeShelfState(item)} />;
<Switch
disabled={item.courseState === 'EXPIRED'}
checked={item.shelfState === "YES"}
onChange={() => this.changeShelfState(item)}
/>
)
}, },
}, },
{ {
title: "讲师", title: '讲师',
width: 200, width: 200,
key: "teacher", key: 'teacher',
dataIndex: "teacher", dataIndex: 'teacher',
render: (val, item) => { render: (val, item) => {
return ( return <div>{item.teacherName}</div>;
<div>{item.teacherName}</div>
)
}, },
}, },
{ {
...@@ -147,9 +157,10 @@ class OfflineCourseList extends React.Component { ...@@ -147,9 +157,10 @@ class OfflineCourseList extends React.Component {
dataIndex: 'apply', dataIndex: 'apply',
sorter: true, sorter: true,
render: (val, item) => { render: (val, item) => {
return <div> return (
<div>
{item.startTimeApply ? `${formatDate('MM-DD H:i', item.startTimeApply)} ~ ${formatDate('MM-DD H:i', item.endTimeApply)}` : '-'} {item.startTimeApply ? `${formatDate('MM-DD H:i', item.startTimeApply)} ~ ${formatDate('MM-DD H:i', item.endTimeApply)}` : '-'}
{item.whetherApplyFull === 'YES' && {item.whetherApplyFull === 'YES' && (
<span <span
style={{ style={{
marginLeft: 4, marginLeft: 4,
...@@ -159,10 +170,13 @@ class OfflineCourseList extends React.Component { ...@@ -159,10 +170,13 @@ class OfflineCourseList extends React.Component {
fontSize: '12px', fontSize: '12px',
height: '18px', height: '18px',
lineHeight: '18px', lineHeight: '18px',
}}>已报满</span> }}>
} 已报满
</span>
)}
</div> </div>
} );
},
}, },
{ {
title: '创建时间', title: '创建时间',
...@@ -171,8 +185,8 @@ class OfflineCourseList extends React.Component { ...@@ -171,8 +185,8 @@ class OfflineCourseList extends React.Component {
dataIndex: 'created', dataIndex: 'created',
sorter: true, sorter: true,
render: (val) => { render: (val) => {
return formatDate('YYYY-MM-DD H:i', val) return formatDate('YYYY-MM-DD H:i', val);
} },
}, },
{ {
title: '操作', title: '操作',
...@@ -182,29 +196,32 @@ class OfflineCourseList extends React.Component { ...@@ -182,29 +196,32 @@ class OfflineCourseList extends React.Component {
fixed: 'right', fixed: 'right',
render: (val, record) => { render: (val, record) => {
return ( return (
<div className="operate"> <div className='operate'>
<div className="operate__item" onClick={() => window.RCHistory.push(`/offline-course/data?id=${record.courseId}`)}>参与数据</div> <div className='operate__item' onClick={() => window.RCHistory.push(`/offline-course/data?id=${record.courseId}`)}>
{record.courseState !== 'EXPIRED' && <span className="operate__item split"> | </span>} 参与数据
{record.courseState !== 'EXPIRED' && <div className="operate__item" onClick={() => this.handleShowShareModal(record)}>分享</div>} </div>
<span className="operate__item split"> | </span> {record.courseState !== 'EXPIRED' && <span className='operate__item split'> | </span>}
{record.courseState !== 'EXPIRED' && (
<div className='operate__item' onClick={() => this.handleShowShareModal(record)}>
分享
</div>
)}
<span className='operate__item split'> | </span>
<Dropdown overlay={this.renderMoreOperate(record)}> <Dropdown overlay={this.renderMoreOperate(record)}>
<span className="more-operate"> <span className='more-operate'>
<span className="operate-text">更多</span> <span className='operate-text'>更多</span>
<span <span className='iconfont icon' style={{ color: '#2966FF' }}>
className="iconfont icon"
style={{ color: "#2966FF" }}
>
&#xe824; &#xe824;
</span> </span>
</span> </span>
</Dropdown> </Dropdown>
</div> </div>
) );
} },
} },
]; ];
return columns; return columns;
} };
// 显示预览弹窗 // 显示预览弹窗
handleShowPreviewModal = (courseId) => { handleShowPreviewModal = (courseId) => {
...@@ -213,123 +230,132 @@ class OfflineCourseList extends React.Component { ...@@ -213,123 +230,132 @@ class OfflineCourseList extends React.Component {
courseId={courseId} courseId={courseId}
close={() => { close={() => {
this.setState({ this.setState({
previewOfflineModal: null previewOfflineModal: null,
}) });
}} }}
/> />
); );
this.setState({ previewOfflineModal }); this.setState({ previewOfflineModal });
} };
renderMoreOperate = (item) => { renderMoreOperate = (item) => {
return ( return (
<div className="live-course-more-menu"> <div className='live-course-more-menu'>
{item.courseState !== 'EXPIRED' && (item.whetherSetSignIn === 'YES' || item.whetherSetSignOut === 'YES') && <div {item.courseState !== 'EXPIRED' && (item.whetherSetSignIn === 'YES' || item.whetherSetSignOut === 'YES') && (
className="operate__item" <div
key="qrcode" className='operate__item'
key='qrcode'
onClick={() => { onClick={() => {
this.setState({ openQRCodeModal: true, qrcodeData: item }) this.setState({ openQRCodeModal: true, qrcodeData: item });
}} }}>
>考勤二维码</div>} 考勤二维码
</div>
)}
<div <div
className="operate__item" className='operate__item'
key="preview" key='preview'
onClick={() => { onClick={() => {
this.handleShowPreviewModal(item.courseId); this.handleShowPreviewModal(item.courseId);
}} }}>
>预览</div> 预览
{(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && (item.courseState === 'UN_START' || item.courseState === 'STARTING') && <div </div>
className="operate__item" {(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') &&
key="cancel" (item.courseState === 'UN_START' || item.courseState === 'STARTING') && (
<div
className='operate__item'
key='cancel'
onClick={() => { onClick={() => {
this.handleDeleteOfflineCourse(item.courseId); this.handleDeleteOfflineCourse(item.courseId);
}} }}>
>取消课程</div>} 取消课程
{item.courseState === 'UN_START' && window.ctx.xmState.storeUserPermissionList.includes('EditOfflineClass') && <div </div>
className="operate__item" )}
key="edit" {item.courseState === 'UN_START' && window.ctx.xmState.storeUserPermissionList.includes('EditOfflineClass') && (
<div
className='operate__item'
key='edit'
onClick={() => { onClick={() => {
RCHistory.push(`/create-offline-course?type=edit&id=${item.courseId}`); RCHistory.push(`/create-offline-course?type=edit&id=${item.courseId}`);
}} }}>
>编辑</div>} 编辑
{(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && <div
className="operate__item"
key="delete"
onClick={() => this.handleDeleteOfflineCourse(item.courseId, true)}
>删除</div>}
</div> </div>
) )}
} {(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && (
<div className='operate__item' key='delete' onClick={() => this.handleDeleteOfflineCourse(item.courseId, true)}>
删除
</div>
)}
</div>
);
};
//改变上架状态 //改变上架状态
changeShelfState = (item) => { changeShelfState = (item) => {
if (!window.ctx.xmState.storeUserPermissionList.includes('EditOfflineClass')) { if (!window.ctx.xmState.storeUserPermissionList.includes('EditOfflineClass')) {
message.warning('无【编辑线下课】权限，请联系管理员') message.warning('无【编辑线下课】权限，请联系管理员');
return; return;
} }
let _shelfState = item.shelfState let _shelfState = item.shelfState;
if(_shelfState==='NO'){ if (_shelfState === 'NO') {
_shelfState = "YES"; _shelfState = 'YES';
item.shelfState = "YES" item.shelfState = 'YES';
}else{ } else {
_shelfState = "NO" _shelfState = 'NO';
item.shelfState = "NO" item.shelfState = 'NO';
} }
const params={ const params = {
courseId: item.courseId, courseId: item.courseId,
shelfState:_shelfState shelfState: _shelfState,
} };
CourseService.changeVideoShelfState(params).then((res)=>{ CourseService.changeVideoShelfState(params).then((res) => {
if(res.success){ if (res.success) {
if(_shelfState === "YES"){ if (_shelfState === 'YES') {
message.success("已开启展示"); message.success('已开启展示');
}else{ } else {
message.success("已取消展示"); message.success('已取消展示');
} }
this.props.onChange(); this.props.onChange();
} }
}) });
} };
// 删除视频课 // 删除视频课
handleDeleteOfflineCourse = (courseId, isDelete) => { handleDeleteOfflineCourse = (courseId, isDelete) => {
if (isDelete) { if (isDelete) {
Modal.confirm({ Modal.confirm({
title: '删除课程', title: '删除课程',
content: '确定删除该课程吗？删除后学员数据和课程数据将无法恢复。', content: '确定删除该课程吗？删除后学员数据和课程数据将无法恢复。',
icon: <span className="icon iconfont default-confirm-icon">&#xe6f4;</span>, icon: <span className='icon iconfont default-confirm-icon'>&#xe6f4;</span>,
okText: '确定', okText: '确定',
okType: 'danger', okType: 'danger',
cancelText: '取消', cancelText: '取消',
onOk: () => { onOk: () => {
const param ={ const param = {
courseId: courseId, courseId: courseId,
} };
Service.Hades('public/hades/delOfflineCourse', param).then(() => { Service.Hades('public/hades/delOfflineCourse', param).then(() => {
message.success('删除成功'); message.success('删除成功');
this.props.onChange(); this.props.onChange();
}) });
} },
}); });
} else { } else {
Modal.confirm({ Modal.confirm({
title: '取消课程', title: '取消课程',
content: '确定要取消该课程吗？取消后课程将失效，仅保留已有数据。', content: '确定要取消该课程吗？取消后课程将失效，仅保留已有数据。',
icon: <span className="icon iconfont default-confirm-icon">&#xe6f4;</span>, icon: <span className='icon iconfont default-confirm-icon'>&#xe6f4;</span>,
okText: '确定', okText: '确定',
cancelText: '取消', cancelText: '取消',
onOk: () => { onOk: () => {
const param ={ const param = {
courseId: courseId, courseId: courseId,
} };
Service.Hades('public/hades/cancelOfflineCourse', param).then(() => { Service.Hades('public/hades/cancelOfflineCourse', param).then(() => {
message.success('取消成功'); message.success('取消成功');
this.props.onChange(); this.props.onChange();
}) });
} },
}); });
} }
} };
// 显示分享弹窗 // 显示分享弹窗
handleShowShareModal = (record, needStr = false) => { handleShowShareModal = (record, needStr = false) => {
...@@ -339,7 +365,7 @@ class OfflineCourseList extends React.Component { ...@@ -339,7 +365,7 @@ class OfflineCourseList extends React.Component {
const htmlUrl = `${LIVE_SHARE}offline_detail/${courseId}?id=${User.getStoreId()}`; const htmlUrl = `${LIVE_SHARE}offline_detail/${courseId}?id=${User.getStoreId()}`;
const longUrl = htmlUrl; const longUrl = htmlUrl;
const { courseName, courseMediaVOS } = record; const { courseName, courseMediaVOS } = record;
const coverUrl = (_.find(courseMediaVOS, data => data.contentType === 'COVER') || {}).mediaUrl; const coverUrl = (_.find(courseMediaVOS, (data) => data.contentType === 'COVER') || {}).mediaUrl;
const shareData = { const shareData = {
longUrl, longUrl,
coverUrl, coverUrl,
...@@ -350,11 +376,11 @@ class OfflineCourseList extends React.Component { ...@@ -350,11 +376,11 @@ class OfflineCourseList extends React.Component {
<ShareLiveModal <ShareLiveModal
needStr={needStr} needStr={needStr}
data={shareData} data={shareData}
type="offlineClass" type='offlineClass'
title="线下课" title='线下课'
close={() => { close={() => {
this.setState({ this.setState({
shareLiveModal: null shareLiveModal: null,
}); });
localStorage.setItem('videoCourseItem', ''); localStorage.setItem('videoCourseItem', '');
}} }}
...@@ -362,7 +388,7 @@ class OfflineCourseList extends React.Component { ...@@ -362,7 +388,7 @@ class OfflineCourseList extends React.Component {
); );
this.setState({ shareLiveModal }); this.setState({ shareLiveModal });
} };
handleChangeTable = (pagination, filters, sorter) => { handleChangeTable = (pagination, filters, sorter) => {
const { columnKey, order } = sorter; const { columnKey, order } = sorter;
...@@ -370,44 +396,60 @@ class OfflineCourseList extends React.Component { ...@@ -370,44 +396,60 @@ class OfflineCourseList extends React.Component {
let _columnKey; let _columnKey;
let _order; let _order;
// 按创建时间升序排序 // 按创建时间升序排序
if (columnKey === 'apply' && order === 'ascend') {_columnKey="START_APPLY_DESC"; _order = 'SORT_ASC'; } if (columnKey === 'apply' && order === 'ascend') {
if (columnKey === 'created' && order === 'ascend') {_columnKey="CREATED"; _order = 'SORT_ASC'; } _columnKey = 'START_APPLY_DESC';
_order = 'SORT_ASC';
}
if (columnKey === 'created' && order === 'ascend') {
_columnKey = 'CREATED';
_order = 'SORT_ASC';
}
// 按创建时间降序排序 // 按创建时间降序排序
if (columnKey === 'apply' && order === 'descend') { _columnKey="START_APPLY_DESC"; _order = 'SORT_DESC';} if (columnKey === 'apply' && order === 'descend') {
if (columnKey === 'created' && order === 'descend') { _columnKey="CREATED"; _order = 'SORT_DESC';} _columnKey = 'START_APPLY_DESC';
_order = 'SORT_DESC';
}
if (columnKey === 'created' && order === 'descend') {
_columnKey = 'CREATED';
_order = 'SORT_DESC';
}
const _query = { const _query = {
...query, ...query,
sortMap:{} sortMap: {},
}; };
_query.sortMap[_columnKey]=_order; _query.sortMap[_columnKey] = _order;
this.props.onChange(_query); this.props.onChange(_query);
} };
render() { render() {
const { openQRCodeModal, qrcodeData } = this.state; const { openQRCodeModal, qrcodeData } = this.state;
const { dataSource = [], totalCount, query, match } = this.props; const { dataSource = [], totalCount, query, match } = this.props;
const { current, size } = query; const { current, size } = query;
return ( return (
<div className="offline-course-list"> <div className='offline-course-list'>
<Table <XMTable
rowKey={record => record.courseId} renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.courseId}
dataSource={dataSource} dataSource={dataSource}
columns={this.parseColumns()} columns={this.parseColumns()}
onChange={this.handleChangeTable} onChange={this.handleChangeTable}
pagination={false} pagination={false}
scroll={{ x: 1500}} scroll={{ x: 1500 }}
bordered bordered
className="offline-list-table" className='offline-list-table'
/> />
<div className="box-footer"> <div className='box-footer'>
<PageControl <PageControl
current={current - 1} current={current - 1}
pageSize={size} pageSize={size}
total={totalCount} total={totalCount}
toPage={(page) => { toPage={(page) => {
const _query = {...query, current: page + 1}; const _query = { ...query, current: page + 1 };
this.props.onChange(_query) this.props.onChange(_query);
}} }}
/> />
</div> </div>
...@@ -417,12 +459,12 @@ class OfflineCourseList extends React.Component { ...@@ -417,12 +459,12 @@ class OfflineCourseList extends React.Component {
visible={openQRCodeModal} visible={openQRCodeModal}
data={qrcodeData} data={qrcodeData}
onCancel={() => { onCancel={() => {
this.setState({ openQRCodeModal: false }) this.setState({ openQRCodeModal: false });
}} }}
/> />
<Route path={`${match.url}/data`} component={OfflineCourseData} /> <Route path={`${match.url}/data`} component={OfflineCourseData} />
</div> </div>
) );
} }
} }
......
src/modules/course-manage/video-course/components/VideoCourseList.jsx
import React from "react" import { Dropdown, message, Modal, Switch, Table, Tooltip } from 'antd';
import { Table, Modal, message, Tooltip, Switch, Dropdown } from "antd" import User from '@/common/js/user';
import _ from "underscore" import { PageControl } from '@/components';
import { PageControl } from "@/components" import { LIVE_SHARE } from '@/domains/course-domain/constants';
import { LIVE_SHARE } from "@/domains/course-domain/constants" import CourseService from '@/domains/course-domain/CourseService';
import ShareLiveModal from '@/modules/course-manage/modal/ShareLiveModal';
import ShareLiveModal from "@/modules/course-manage/modal/ShareLiveModal" import React from 'react';
import WatchDataModal from "../modal/WatchDataModal" import RelatedPlanModal from '../../modal/RelatedPlanModal';
import CourseService from "@/domains/course-domain/CourseService" import WatchDataModal from '../modal/WatchDataModal';
import RelatedPlanModal from "../../modal/RelatedPlanModal" import { XMTable } from '@/components';
import User from "@/common/js/user" import college from '@/common/lottie/college';
import './VideoCourseList.less';
import "./VideoCourseList.less"
class VideoCourseList extends React.Component { class VideoCourseList extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props);
this.state = { this.state = {
id: "", // 视频课ID id: '', // 视频课ID
studentIds: [], studentIds: [],
RelatedPlanModalVisible: false, RelatedPlanModalVisible: false,
selectPlanList: {}, selectPlanList: {},
ShelfLoading: false ShelfLoading: false,
// dataSource: [], // dataSource: [],
} };
} }
componentDidMount() { componentDidMount() {
const videoCourseItem = localStorage.getItem("videoCourseItem") const videoCourseItem = localStorage.getItem('videoCourseItem');
if (videoCourseItem) { if (videoCourseItem) {
const _videoCourseItem = JSON.parse(videoCourseItem) const _videoCourseItem = JSON.parse(videoCourseItem);
this.handleShowShareModal(_videoCourseItem, true) this.handleShowShareModal(_videoCourseItem, true);
} }
} }
...@@ -41,27 +40,27 @@ class VideoCourseList extends React.Component { ...@@ -41,27 +40,27 @@ class VideoCourseList extends React.Component {
data={record} data={record}
close={() => { close={() => {
this.setState({ this.setState({
watchDataModal: null watchDataModal: null,
}) });
}} }}
/> />
) );
this.setState({ watchDataModal }) this.setState({ watchDataModal });
} };
// 请求表头 // 请求表头
parseColumns = () => { parseColumns = () => {
const { type } = this.props const { type } = this.props;
const { ShelfLoading } = this.state const { ShelfLoading } = this.state;
const columns = [ const columns = [
{ {
title: "视频课", title: '视频课',
key: "scheduleName", key: 'scheduleName',
dataIndex: "scheduleName", dataIndex: 'scheduleName',
width: 321, width: 321,
fixed: "left", fixed: 'left',
render: (val, record) => { render: (val, record) => {
const { coverUrl, scheduleVideoUrl } = record const { coverUrl, scheduleVideoUrl } = record;
return ( return (
<div className='record__item'> <div className='record__item'>
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */} {/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
...@@ -69,7 +68,7 @@ class VideoCourseList extends React.Component { ...@@ -69,7 +68,7 @@ class VideoCourseList extends React.Component {
className='course-cover' className='course-cover'
src={ src={
coverUrl || coverUrl ||
(type === "internal" ? `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast` : "https://image.xiaomaiketang.com/xm/mt3ZQRxGKB.png") (type === 'internal' ? `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast` : 'https://image.xiaomaiketang.com/xm/mt3ZQRxGKB.png')
} }
alt='' alt=''
/> />
...@@ -84,45 +83,45 @@ class VideoCourseList extends React.Component { ...@@ -84,45 +83,45 @@ class VideoCourseList extends React.Component {
</Otherwise> </Otherwise>
</Choose> </Choose>
</div> </div>
) );
} },
}, },
{ {
title: ( title: (
<span> <span>
<span>课程分类</span> <span>课程分类</span>
<If condition={type !== "internal"}> <If condition={type !== 'internal'}>
<Tooltip title={<div>外部课程的分类由系统提供，不影响企业课程分类。</div>}> <Tooltip title={<div>外部课程的分类由系统提供，不影响企业课程分类。</div>}>
<i className='icon iconfont' style={{ marginLeft: "5px", cursor: "pointer", color: "#bfbfbf", fontSize: "14px", fontWeight: "normal" }}> <i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px', fontWeight: 'normal' }}>
&#xe61d; &#xe61d;
</i> </i>
</Tooltip> </Tooltip>
</If> </If>
</span> </span>
), ),
key: "categoryName", key: 'categoryName',
dataIndex: "categoryName", dataIndex: 'categoryName',
width: 200, width: 200,
render: (val, record) => { render: (val, record) => {
return ( return (
<Choose> <Choose>
<When condition={type === "internal"}> <When condition={type === 'internal'}>
<div className='record__item'> <div className='record__item'>
{record.categoryOneName} {record.categoryOneName}
{record.categoryTwoName ? `-${record.categoryTwoName}` : ""} {record.categoryTwoName ? `-${record.categoryTwoName}` : ''}
</div> </div>
</When> </When>
<Otherwise> <Otherwise>
<div className='record__item'>{record.categorySonName}</div> <div className='record__item'>{record.categorySonName}</div>
</Otherwise> </Otherwise>
</Choose> </Choose>
) );
} },
}, },
{ {
title: "创建人", title: '创建人',
key: "createName", key: 'createName',
dataIndex: "createName", dataIndex: 'createName',
width: 100, width: 100,
render: (val) => { render: (val) => {
return ( return (
...@@ -133,8 +132,8 @@ class VideoCourseList extends React.Component { ...@@ -133,8 +132,8 @@ class VideoCourseList extends React.Component {
</Tooltip> </Tooltip>
)} )}
</div> </div>
) );
} },
}, },
{ {
title: ( title: (
...@@ -148,62 +147,62 @@ class VideoCourseList extends React.Component { ...@@ -148,62 +147,62 @@ class VideoCourseList extends React.Component {
关闭后，学院内不再展示此课程，但学员仍可通过分享的海报/链接查看此课程。 关闭后，学院内不再展示此课程，但学员仍可通过分享的海报/链接查看此课程。
</div> </div>
}> }>
<i className='icon iconfont' style={{ marginLeft: "5px", cursor: "pointer", color: "#bfbfbf", fontSize: "14px" }}> <i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px' }}>
&#xe61d; &#xe61d;
</i> </i>
</Tooltip> </Tooltip>
</span> </span>
), ),
width: 120, width: 120,
key: "shelfState", key: 'shelfState',
dataIndex: "shelfState", dataIndex: 'shelfState',
render: (val, item, index) => { render: (val, item, index) => {
return ( return (
<Switch <Switch
loading={ShelfLoading} loading={ShelfLoading}
checked={item.shelfState === "YES"} checked={item.shelfState === 'YES'}
defaultChecked={item.shelfState} defaultChecked={item.shelfState}
onClick={(checked) => { onClick={(checked) => {
this.changeShelfState(checked, item, index) this.changeShelfState(checked, item, index);
}} }}
/> />
) );
} },
}, },
{ {
title: "观看学员数", title: '观看学员数',
width: 110, width: 110,
key: "watchUserCount", key: 'watchUserCount',
dataIndex: "watchUserCount", dataIndex: 'watchUserCount',
render: (val, item) => { render: (val, item) => {
return <div className='watchUserCount'>{val || 0}</div> return <div className='watchUserCount'>{val || 0}</div>;
} },
}, },
{ {
title: "创建时间", title: '创建时间',
width: 181, width: 181,
key: "created", key: 'created',
dataIndex: "created", dataIndex: 'created',
sorter: true, sorter: true,
render: (val) => { render: (val) => {
return formatDate("YYYY-MM-DD H:i", val) return formatDate('YYYY-MM-DD H:i', val);
} },
}, },
{ {
title: "更新时间", title: '更新时间',
width: 181, width: 181,
key: "updated", key: 'updated',
dataIndex: "updated", dataIndex: 'updated',
sorter: true, sorter: true,
render: (val) => { render: (val) => {
return formatDate("YYYY-MM-DD H:i", val) return formatDate('YYYY-MM-DD H:i', val);
} },
}, },
{ {
title: "关联项", title: '关联项',
width: 200, width: 200,
key: "planList", key: 'planList',
dataIndex: "planList", dataIndex: 'planList',
render: (val, record) => { render: (val, record) => {
return ( return (
<div className='related-task'> <div className='related-task'>
...@@ -215,7 +214,7 @@ class VideoCourseList extends React.Component { ...@@ -215,7 +214,7 @@ class VideoCourseList extends React.Component {
<span> <span>
{item.planName} {index < record.relatedPlanList.length - 1 && <span> 、</span>} {item.planName} {index < record.relatedPlanList.length - 1 && <span> 、</span>}
</span> </span>
) );
})} })}
</Tooltip> </Tooltip>
</When> </When>
...@@ -224,15 +223,15 @@ class VideoCourseList extends React.Component { ...@@ -224,15 +223,15 @@ class VideoCourseList extends React.Component {
</Otherwise> </Otherwise>
</Choose> </Choose>
</div> </div>
) );
} },
}, },
{ {
title: "操作", title: '操作',
key: "operate", key: 'operate',
dataIndex: "operate", dataIndex: 'operate',
width: 210, width: 210,
fixed: "right", fixed: 'right',
render: (val, record) => { render: (val, record) => {
return ( return (
<div className='operate'> <div className='operate'>
...@@ -240,7 +239,7 @@ class VideoCourseList extends React.Component { ...@@ -240,7 +239,7 @@ class VideoCourseList extends React.Component {
观看数据 观看数据
</div> </div>
<If condition={type === "internal"}> <If condition={type === 'internal'}>
<span className='operate__item split'> | </span> <span className='operate__item split'> | </span>
<div className='operate__item' onClick={() => this.handleShowShareModal(record)}> <div className='operate__item' onClick={() => this.handleShowShareModal(record)}>
分享 分享
...@@ -250,40 +249,40 @@ class VideoCourseList extends React.Component { ...@@ -250,40 +249,40 @@ class VideoCourseList extends React.Component {
<Dropdown overlay={this.renderMoreOperate(record)}> <Dropdown overlay={this.renderMoreOperate(record)}>
<span className='more-operate'> <span className='more-operate'>
<span className='operate-text'>更多</span> <span className='operate-text'>更多</span>
<span className='iconfont icon' style={{ color: "#2966FF" }}> <span className='iconfont icon' style={{ color: '#2966FF' }}>
&#xe824; &#xe824;
</span> </span>
</span> </span>
</Dropdown> </Dropdown>
</div> </div>
) );
} },
} },
] ];
type !== "internal" && columns.splice(2, 1) type !== 'internal' && columns.splice(2, 1);
return columns return columns;
} };
renderMoreOperate = (item) => { renderMoreOperate = (item) => {
const { type } = this.props const { type } = this.props;
return ( return (
<div className='live-course-more-menu'> <div className='live-course-more-menu'>
<If condition={type !== "internal"}> <If condition={type !== 'internal'}>
<div className='operate__item' onClick={() => this.handleShowShareModal(item)}> <div className='operate__item' onClick={() => this.handleShowShareModal(item)}>
分享 分享
</div> </div>
</If> </If>
{(User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager") && ( {(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && (
<div className='operate__item' onClick={() => this.handleRelatedModalShow(item)}> <div className='operate__item' onClick={() => this.handleRelatedModalShow(item)}>
关联培训计划 关联培训计划
</div> </div>
)} )}
<If condition={type === "internal"}> <If condition={type === 'internal'}>
<div <div
className='operate__item' className='operate__item'
onClick={() => { onClick={() => {
window.RCHistory.push(`/create-video-course?type=edit&id=${item.id}`) window.RCHistory.push(`/create-video-course?type=edit&id=${item.id}`);
}}> }}>
编辑 编辑
</div> </div>
...@@ -292,77 +291,77 @@ class VideoCourseList extends React.Component { ...@@ -292,77 +291,77 @@ class VideoCourseList extends React.Component {
</div> </div>
</If> </If>
</div> </div>
) );
} };
handlePlanName = (planArray) => { handlePlanName = (planArray) => {
let planStr = "" let planStr = '';
planArray.map((item, index) => { planArray.map((item, index) => {
if (index < planArray.length - 1) { if (index < planArray.length - 1) {
planStr = planStr + item.planName + "、" planStr = planStr + item.planName + '、';
} else { } else {
planStr = planStr + item.planName planStr = planStr + item.planName;
}
})
return planStr
} }
});
return planStr;
};
//改变上架状态 //改变上架状态
changeShelfState = (checked, item, index) => { changeShelfState = (checked, item, index) => {
let _shelfState = checked ? "YES" : "NO" let _shelfState = checked ? 'YES' : 'NO';
if (checked) { if (checked) {
_shelfState = "YES" _shelfState = 'YES';
} else { } else {
_shelfState = "NO" _shelfState = 'NO';
} }
const params = { const params = {
courseId: item.id, courseId: item.id,
shelfState: _shelfState shelfState: _shelfState,
} };
CourseService.changeVideoShelfState(params).then(() => { CourseService.changeVideoShelfState(params).then(() => {
if (_shelfState === "YES") { if (_shelfState === 'YES') {
message.success("已开启展示") message.success('已开启展示');
} else { } else {
message.success("已取消展示") message.success('已取消展示');
}
this.props.changeShelfState(index, _shelfState)
})
} }
this.props.changeShelfState(index, _shelfState);
});
};
// 删除视频课 // 删除视频课
handleDeleteVideoCourse = (scheduleId) => { handleDeleteVideoCourse = (scheduleId) => {
Modal.confirm({ Modal.confirm({
title: "你确定要删除此视频课吗？", title: '你确定要删除此视频课吗？',
content: "删除后，学员将不能进行观看。", content: '删除后，学员将不能进行观看。',
icon: <span className='icon iconfont default-confirm-icon'>&#xe6f4;</span>, icon: <span className='icon iconfont default-confirm-icon'>&#xe6f4;</span>,
okText: "确定", okText: '确定',
okType: "danger", okType: 'danger',
cancelText: "取消", cancelText: '取消',
onOk: () => { onOk: () => {
const param = { const param = {
courseId: scheduleId, courseId: scheduleId,
storeId: User.getStoreId() storeId: User.getStoreId(),
} };
CourseService.delVideoSchedule(param).then(() => { CourseService.delVideoSchedule(param).then(() => {
message.success("删除成功") message.success('删除成功');
this.props.onChange() this.props.onChange();
}) });
} },
}) });
} };
// 显示分享弹窗 // 显示分享弹窗
handleShowShareModal = (record, needStr = false) => { handleShowShareModal = (record, needStr = false) => {
const { type } = this.props const { type } = this.props;
const { id, scheduleVideoUrl } = record const { id, scheduleVideoUrl } = record;
const htmlUrl = `${LIVE_SHARE}video_detail/${id}?id=${User.getStoreId()}` const htmlUrl = `${LIVE_SHARE}video_detail/${id}?id=${User.getStoreId()}`;
const longUrl = htmlUrl const longUrl = htmlUrl;
const { coverUrl, courseName } = record const { coverUrl, courseName } = record;
const shareData = { const shareData = {
longUrl, longUrl,
coverUrl, coverUrl,
scheduleVideoUrl, scheduleVideoUrl,
courseName courseName,
} };
const shareLiveModal = ( const shareLiveModal = (
<ShareLiveModal <ShareLiveModal
...@@ -373,95 +372,109 @@ class VideoCourseList extends React.Component { ...@@ -373,95 +372,109 @@ class VideoCourseList extends React.Component {
title='视频课' title='视频课'
close={() => { close={() => {
this.setState({ this.setState({
shareLiveModal: null shareLiveModal: null,
}) });
localStorage.setItem("videoCourseItem", "") localStorage.setItem('videoCourseItem', '');
}} }}
/> />
) );
this.setState({ shareLiveModal }) this.setState({ shareLiveModal });
} };
handleChangeTable = (pagination, filters, sorter) => { handleChangeTable = (pagination, filters, sorter) => {
const { columnKey, order } = sorter const { columnKey, order } = sorter;
const { query } = this.props const { query } = this.props;
let { order: _order } = query let { order: _order } = query;
// 按创建时间升序排序 // 按创建时间升序排序
if (columnKey === "created" && order === "ascend") { if (columnKey === 'created' && order === 'ascend') {
_order = "CREATED_ASC" _order = 'CREATED_ASC';
} }
// 按创建时间降序排序 // 按创建时间降序排序
if (columnKey === "created" && order === "descend") { if (columnKey === 'created' && order === 'descend') {
_order = "CREATED_DESC" _order = 'CREATED_DESC';
} }
// 按更新时间升序排序 // 按更新时间升序排序
if (columnKey === "updated" && order === "ascend") { if (columnKey === 'updated' && order === 'ascend') {
_order = "UPDATED_ASC" _order = 'UPDATED_ASC';
} }
// 按更新时间降序排序 // 按更新时间降序排序
if (columnKey === "updated" && order === "descend") { if (columnKey === 'updated' && order === 'descend') {
_order = "UPDATED_DESC" _order = 'UPDATED_DESC';
} }
const _query = { const _query = {
...query, ...query,
orderEnum: _order orderEnum: _order,
} };
this.props.onChange(_query) this.props.onChange(_query);
} };
handleRelatedModalShow = (item) => { handleRelatedModalShow = (item) => {
const selectPlanList = {} const selectPlanList = {};
if (item.relatedPlanList) { if (item.relatedPlanList) {
item.relatedPlanList.map((item, index) => { item.relatedPlanList.map((item, index) => {
selectPlanList[item.planId] = {} selectPlanList[item.planId] = {};
selectPlanList[item.planId].planId = item.planId selectPlanList[item.planId].planId = item.planId;
selectPlanList[item.planId].taskBaseVOList = [{ taskId: item.taskId }] selectPlanList[item.planId].taskBaseVOList = [{ taskId: item.taskId }];
return item return item;
}) });
} }
this.setState({ this.setState({
RelatedPlanModalVisible: true, RelatedPlanModalVisible: true,
selectCourseId: item.id, selectCourseId: item.id,
selectPlanList: selectPlanList selectPlanList: selectPlanList,
}) });
} };
closeRelatedPlanModalVisible = () => { closeRelatedPlanModalVisible = () => {
this.setState({ this.setState({
RelatedPlanModalVisible: false RelatedPlanModalVisible: false,
}) });
} };
onChangeSelectPlanList = (selectPlanList) => { onChangeSelectPlanList = (selectPlanList) => {
this.setState({ this.setState({
selectPlanList: selectPlanList selectPlanList: selectPlanList,
}) });
} };
onConfirmSelectPlanList = () => { onConfirmSelectPlanList = () => {
this.setState( this.setState(
{ {
RelatedPlanModalVisible: false RelatedPlanModalVisible: false,
}, },
() => { () => {
this.props.onChange() this.props.onChange();
}
)
} }
);
};
render() { render() {
const { dataSource = [], totalCount, query, type } = this.props const { dataSource = [], totalCount, query, type } = this.props;
const { current, size } = query const { current, size } = query;
const { RelatedPlanModalVisible, selectPlanList, selectCourseId } = this.state const { RelatedPlanModalVisible, selectPlanList, selectCourseId } = this.state;
return ( return (
<div className={`video-course-list ${type !== "internal" ? "video-course-list-mt" : ""}`}> <div className={`video-course-list ${type !== 'internal' ? 'video-course-list-mt' : ''}`}>
<Table <XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.id} rowKey={(record) => record.id}
dataSource={dataSource} dataSource={dataSource}
columns={this.parseColumns()} columns={this.parseColumns()}
onChange={this.handleChangeTable} onChange={this.handleChangeTable}
pagination={false} pagination={false}
scroll={{ x: 1500 }}
bordered bordered
scroll={{ x: 1500 }}
className='video-list-table' className='video-list-table'
/> />
{/* <Table
rowKey={(record) => record.id}
dataSource={dataSource}
columns={this.parseColumns()}
onChange={this.handleChangeTable}
pagination={false}
scroll={{ x: 1500 }}
bordered
className='video-list-table'
/> */}
<div className='box-footer'> <div className='box-footer'>
<PageControl <PageControl
...@@ -469,8 +482,8 @@ class VideoCourseList extends React.Component { ...@@ -469,8 +482,8 @@ class VideoCourseList extends React.Component {
pageSize={size} pageSize={size}
total={totalCount} total={totalCount}
toPage={(page) => { toPage={(page) => {
const _query = { ...query, current: page + 1 } const _query = { ...query, current: page + 1 };
this.props.onChange(_query) this.props.onChange(_query);
}} }}
/> />
</div> </div>
...@@ -487,8 +500,8 @@ class VideoCourseList extends React.Component { ...@@ -487,8 +500,8 @@ class VideoCourseList extends React.Component {
{this.state.shareLiveModal} {this.state.shareLiveModal}
{this.state.watchDataModal} {this.state.watchDataModal}
</div> </div>
) );
} }
} }
export default VideoCourseList export default VideoCourseList;
src/modules/course-manage/video-course/modal/WatchDataModal.jsx
...@@ -5,80 +5,86 @@ ...@@ -5,80 +5,86 @@
* @Last Modified time: 2020-05-25 16:50:47 * @Last Modified time: 2020-05-25 16:50:47
* @Description 余额异常弹窗 * @Description 余额异常弹窗
*/ */
import User from '@/common/js/user';
import { PageControl, XMTable } from '@/components';
import CourseService from '@/domains/course-domain/CourseService';
import { Input, Modal } from 'antd';
import college from '@/common/lottie/college';
import React from 'react'; import React from 'react';
import {Table, Modal,Input} from 'antd'; import dealTimeDuration from '../../utils/dealTimeDuration';
import { PageControl } from "@/components";
import CourseService from "@/domains/course-domain/CourseService";
import User from '@/common/js/user'
import './WatchDataModal.less'; import './WatchDataModal.less';
import dealTimeDuration from "../../utils/dealTimeDuration";
const { Search } = Input; const { Search } = Input;
class WatchDataModal extends React.Component { class WatchDataModal extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
visible:true, visible: true,
dataSource:[], dataSource: [],
size:10, size: 10,
query: { query: {
current: 1, current: 1,
}, },
totalCount:0 totalCount: 0,
}; };
} }
componentDidMount() { componentDidMount() {
this.handleFetchDataList(); this.handleFetchDataList();
} }
onClose = () =>{ onClose = () => {
this.props.close(); this.props.close();
} };
// 获取观看视频数据列表 // 获取观看视频数据列表
handleFetchDataList = () => { handleFetchDataList = () => {
const {query,size,totalCount} = this.state const { query, size, totalCount } = this.state;
const { id } = this.props.data; const { id } = this.props.data;
const params ={ const params = {
...query, ...query,
size, size,
courseId:id, courseId: id,
storeId:User.getStoreId() storeId: User.getStoreId(),
} };
CourseService.videoWatchInfo(params).then((res) => { CourseService.videoWatchInfo(params).then((res) => {
const { result = {} } = res ; const { result = {} } = res;
const { records = [], total = 0 } = result; const { records = [], total = 0 } = result;
this.setState({ this.setState({
dataSource: records, dataSource: records,
totalCount: Number(total) totalCount: Number(total),
}); });
}); });
} };
handleChangNickname = (value)=>{ handleChangNickname = (value) => {
const isPhone = (value || '').match(/^\d+$/); const isPhone = (value || '').match(/^\d+$/);
const { query } = this.state; const { query } = this.state;
if(isPhone){ if (isPhone) {
query.phone = value; query.phone = value;
query.nickName = null; query.nickName = null;
}else{ } else {
query.nickName = value; query.nickName = value;
query.phone = null; query.phone = null;
} }
query.current = 1; query.current = 1;
this.setState({ this.setState({
query query,
}) });
} };
onShowSizeChange = (current, size) => { onShowSizeChange = (current, size) => {
if (current == size) { if (current == size) {
return return;
} }
this.setState({ this.setState(
size {
},()=>{this.handleFetchDataList()}) size,
},
() => {
this.handleFetchDataList();
} }
);
};
// 请求表头 // 请求表头
parseColumns = () => { parseColumns = () => {
...@@ -86,83 +92,101 @@ class WatchDataModal extends React.Component { ...@@ -86,83 +92,101 @@ class WatchDataModal extends React.Component {
{ {
title: '观看学员', title: '观看学员',
key: 'name', key: 'name',
dataIndex: 'name' dataIndex: 'name',
}, },
{ {
title: '手机号', title: '手机号',
key: 'phone', key: 'phone',
dataIndex: 'phone' dataIndex: 'phone',
}, },
{ {
title: '观看者类型', title: '观看者类型',
key: 'userRole', key: 'userRole',
dataIndex: 'userRole' dataIndex: 'userRole',
}, },
{ {
title: '首次观看时间', title: '首次观看时间',
key: 'firstWatch', key: 'firstWatch',
dataIndex: 'firstWatch', dataIndex: 'firstWatch',
render: (val) => { render: (val) => {
return formatDate('YYYY-MM-DD H:i', val) return formatDate('YYYY-MM-DD H:i', val);
} },
}, },
{ {
title: '观看时长', title: '观看时长',
key: 'watchDuration', key: 'watchDuration',
dataIndex: 'watchDuration', dataIndex: 'watchDuration',
render: (val) => { render: (val) => {
return <span>{val ? dealTimeDuration(val) : "00:00:00" }</span> return <span>{val ? dealTimeDuration(val) : '00:00:00'}</span>;
} },
} },
]; ];
return columns; return columns;
} };
render() { render() {
const { visible,size,dataSource,totalCount,query} = this.state; const { visible, size, dataSource, totalCount, query } = this.state;
return ( return (
<Modal <Modal
title="视频课观看数据" title='视频课观看数据'
visible={visible} visible={visible}
footer={null} footer={null}
onCancel={this.onClose} onCancel={this.onClose}
maskClosable={false} maskClosable={false}
className="watch-data-modal" className='watch-data-modal'
closable={true} closable={true}
width={800} width={800}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}>
> <div className='search-container'>
<div className="search-container"> <Search
<Search placeholder="搜索学员姓名/手机号" style={{ width: 200 }} onChange={(e) => { this.handleChangNickname(e.target.value)}} onSearch={ () => { this.handleFetchDataList()}} enterButton={<span className="icon iconfont">&#xe832;</span>}/> placeholder='搜索学员姓名/手机号'
style={{ width: 200 }}
onChange={(e) => {
this.handleChangNickname(e.target.value);
}}
onSearch={() => {
this.handleFetchDataList();
}}
enterButton={<span className='icon iconfont'>&#xe832;</span>}
/>
</div> </div>
<div> <div>
<Table <XMTable
rowKey={record => record.id} renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.id}
dataSource={dataSource} dataSource={dataSource}
columns={this.parseColumns()} columns={this.parseColumns()}
pagination={false} pagination={false}
bordered bordered
/> />
{dataSource.length >0 && {dataSource.length > 0 && (
<div className="box-footer"> <div className='box-footer'>
<PageControl <PageControl
current={query.current - 1} current={query.current - 1}
pageSize={size} pageSize={size}
total={totalCount} total={totalCount}
size="small" size='small'
toPage={(page) => { toPage={(page) => {
const _query = {...query, current: page + 1}; const _query = { ...query, current: page + 1 };
this.setState({ this.setState(
query:_query {
},()=>{ this.handleFetchDataList()}) query: _query,
},
() => {
this.handleFetchDataList();
}
);
}} }}
onShowSizeChange={this.onShowSizeChange} onShowSizeChange={this.onShowSizeChange}
/> />
</div> </div>
} )}
</div> </div>
</Modal> </Modal>
) );
} }
} }
......
src/modules/root/Menu.tsx
import React, { Key, useContext, useEffect, useRef, useState, useMemo } from 'react'; import User from '@/common/js/user';
import { import ContactWidget from '@/components/ContactWidget';
withRouter,
} from 'react-router-dom';
import { Menu, Popover, Tooltip } from 'antd';
import { RightOutlined } from '@ant-design/icons';
import { menuList } from '../../routes//config/menuList';
import { XMContext, VersionContext } from '../../store/context';
import BaseService from '@/domains/basic-domain/baseService';
import StoreService from '@/domains/store-domain/storeService'; import StoreService from '@/domains/store-domain/storeService';
import { Menu, Tooltip } from 'antd';
import classNames from 'classnames'; import classNames from 'classnames';
import User from '@/common/js/user'; import React, { Key, useContext, useEffect, useMemo, useState } from 'react';
import { withRouter } from 'react-router-dom';
import _ from 'underscore'; import _ from 'underscore';
import { menuList } from '../../routes//config/menuList';
import { VersionContext, XMContext } from '../../store/context';
import './Menu.less'; import './Menu.less';
import { display } from 'html2canvas/dist/types/css/property-descriptors/display';
import ContactWidget from '@/components/ContactWidget';
const { SubMenu } = Menu; const { SubMenu } = Menu;
...@@ -55,18 +50,18 @@ function VersionPanel(props: any) { ...@@ -55,18 +50,18 @@ function VersionPanel(props: any) {
</div> </div>
<div className='expiration-time'> <div className='expiration-time'>
有效期至{versionInfo?.validEndTime} 有效期至{versionInfo?.validEndTime}
{versionInfo?.stateEnum === "NO" ? '(已过期)' : ''} {versionInfo?.stateEnum === 'NO' ? '(已过期)' : ''}
</div> </div>
<div className={versionPopoverClass}> <div className={versionPopoverClass}>
<div className='title'>版本信息</div> <div className='title'>版本信息</div>
{versionInfo?.stateEnum === "NO" ? <div className='expiration-tag'>已过期</div> : ''} {versionInfo?.stateEnum === 'NO' ? <div className='expiration-tag'>已过期</div> : ''}
<div className='content'> <div className='content'>
<div className='widget' style={{ marginRight: '26px', marginBottom: '16px', width: '70px' }}> <div className='widget' style={{ marginRight: '26px', marginBottom: '16px', width: '70px' }}>
<div className='lable'>剩余天数</div> <div className='lable'>剩余天数</div>
<div className='lable-text'>{versionInfo?.surplusDayTime}</div> <div className='lable-text'>{versionInfo?.surplusDayTime}</div>
</div> </div>
<div className='widget' style={{ marginBottom: '16px', width:"212px"}}> <div className='widget' style={{ marginBottom: '16px', width: '212px' }}>
<div className='lable'>有效起止日期</div> <div className='lable'>有效起止日期</div>
<div className='lable-text'> <div className='lable-text'>
{versionInfo?.validStartTime}~{versionInfo?.validEndTime} {versionInfo?.validStartTime}~{versionInfo?.validEndTime}
...@@ -108,13 +103,14 @@ function VersionPanel(props: any) { ...@@ -108,13 +103,14 @@ function VersionPanel(props: any) {
</div> </div>
</div> </div>
</div> </div>
) );
} }
function Aside(props: any) { function Aside(props: any) {
const { menuType, handleMenuType } = props; const { menuType, handleMenuType } = props;
const ctx: any = useContext(XMContext); const ctx: any = useContext(XMContext);
const [selectKey, setSelectKey] = useState(); const [selectKey, setSelectKey] = useState();
const [selectKeyParent, setSelectKeyParent] = useState();
const [openKeys, setOpenKeys] = useState(['']); const [openKeys, setOpenKeys] = useState(['']);
const [topLogoUrl, setTopLogoUrl] = useState(''); const [topLogoUrl, setTopLogoUrl] = useState('');
const [collapsed, setCollapsed] = useState(false); const [collapsed, setCollapsed] = useState(false);
...@@ -125,10 +121,12 @@ function Aside(props: any) { ...@@ -125,10 +121,12 @@ function Aside(props: any) {
menuList.map((item: any, index: any) => { menuList.map((item: any, index: any) => {
if (link.indexOf(item.link) !== -1) { if (link.indexOf(item.link) !== -1) {
setSelectKey(item.groupCode); setSelectKey(item.groupCode);
setSelectKeyParent(item.groupCode);
setOpenKeys([]); setOpenKeys([]);
} else if (item.children) { } else if (item.children) {
item.children.map((_item: any, _index: any) => { item.children.map((_item: any, _index: any) => {
if (link.indexOf(_item.link) !== -1) { if (link.indexOf(_item.link) !== -1) {
setSelectKeyParent(item.groupCode);
setSelectKey(_item.groupCode + index + _index); setSelectKey(_item.groupCode + index + _index);
} }
}); });
...@@ -152,7 +150,9 @@ function Aside(props: any) { ...@@ -152,7 +150,9 @@ function Aside(props: any) {
} }
} }
function toggleMenu(item: any) { function toggleMenu(item: any, selectKey: any) {
console.log('item', item, selectKey);
setSelectKeyParent(selectKey);
window.RCHistory.push(item.link); window.RCHistory.push(item.link);
if (!menuType) { if (!menuType) {
setOpenKeys([]); setOpenKeys([]);
...@@ -219,7 +219,7 @@ function Aside(props: any) { ...@@ -219,7 +219,7 @@ function Aside(props: any) {
return ( return (
<SubMenu <SubMenu
key={item.groupCode} key={item.groupCode}
style={{ marginTop: 0 }} style={{ marginTop: 0, backgroundColor: !menuType && item.groupCode === selectKeyParent ? '#2966FF' : '#fff' }}
icon={<img src={item.img} className='icon-img'></img>} icon={<img src={item.img} className='icon-img'></img>}
title={menuType ? <span>{item.groupName}</span> : ''} title={menuType ? <span>{item.groupName}</span> : ''}
onTitleClick={() => onOpenChange(item.groupCode)}> onTitleClick={() => onOpenChange(item.groupCode)}>
...@@ -230,7 +230,7 @@ function Aside(props: any) { ...@@ -230,7 +230,7 @@ function Aside(props: any) {
return ( return (
<Menu.Item <Menu.Item
onClick={() => { onClick={() => {
toggleMenu(_item); toggleMenu(_item, item.groupCode);
}} }}
style={{ marginTop: 0 }} style={{ marginTop: 0 }}
key={_item.groupCode + index + _index}> key={_item.groupCode + index + _index}>
...@@ -244,11 +244,11 @@ function Aside(props: any) { ...@@ -244,11 +244,11 @@ function Aside(props: any) {
return ( return (
<Menu.Item <Menu.Item
onClick={() => { onClick={() => {
toggleMenu(item); toggleMenu(item, item.groupCode);
}} }}
key={item.groupCode} key={item.groupCode}
icon={<img src={selectKey === item.groupCode ? item.selectImg : item.img} className='icon-img'></img>}> icon={<img src={selectKey === item.groupCode ? item.selectImg : item.img} className='icon-img'></img>}>
{menuType ? <span>{item.groupName}</span> : ''} {menuType ? item.groupName : ''}
</Menu.Item> </Menu.Item>
); );
} }
......
src/routes/config/menuList.tsx
...@@ -8,142 +8,142 @@ ...@@ -8,142 +8,142 @@
*/ */
export const menuList: any = [ export const menuList: any = [
{ {
groupName: "中心首页", groupName: '中心首页',
groupCode: "CloudPage", groupCode: 'CloudPage',
icon: '&#xe8a7;', icon: '&#xe8a7;',
link: '/home', link: '/home',
img:'https://image.xiaomaiketang.com/xm/ni3BFJDT3a.png', img: 'https://image.xiaomaiketang.com/xm/ni3BFJDT3a.png',
selectImg:'https://image.xiaomaiketang.com/xm/GRDztTAWaM.png' selectImg: 'https://image.xiaomaiketang.com/xm/GRDztTAWaM.png',
}, },
{ {
groupName: "课程管理", groupName: '课程管理',
groupCode: "CloudCourse", groupCode: 'CloudCourse',
icon: '&#xe8a5;', icon: '&#xe8a5;',
img:'https://image.xiaomaiketang.com/xm/jBGrGjM7HQ.png', img: 'https://image.xiaomaiketang.com/xm/jBGrGjM7HQ.png',
children: [ children: [
{ {
groupName: "直播课", groupName: '直播课',
groupCode: "CourseLiveClass", groupCode: 'CourseLiveClass',
link: '/live-course' link: '/live-course',
}, },
{ {
groupName: "视频课", groupName: '视频课',
groupCode: "CourseVideoClass", groupCode: 'CourseVideoClass',
link: '/video-course' link: '/video-course',
}, },
{ {
groupName: "图文课", groupName: '图文课',
groupCode: "GraphicLesson", groupCode: 'GraphicLesson',
link: '/graphics-course' link: '/graphics-course',
}, },
{ {
groupName: "线下课", groupName: '线下课',
groupCode: "OfflineClass", groupCode: 'OfflineClass',
link: '/offline-course' link: '/offline-course',
}, },
] ],
}, },
{ {
groupName: "培训管理", groupName: '培训管理',
groupCode: "TrainManage", groupCode: 'TrainManage',
icon: '&#xe8a6;', icon: '&#xe8a6;',
img:'https://image.xiaomaiketang.com/xm/Yy6pZ6G6kS.png', img: 'https://image.xiaomaiketang.com/xm/Yy6pZ6G6kS.png',
children: [ children: [
{ {
groupName: "培训计划", groupName: '培训计划',
groupCode: "TrainPlan", groupCode: 'TrainPlan',
link: '/plan' link: '/plan',
} },
], ],
}, },
{ {
groupName: "助学工具", groupName: '助学工具',
groupCode: "AidTool", groupCode: 'AidTool',
icon: '&#xe8a9;', icon: '&#xe8a9;',
img:'https://image.xiaomaiketang.com/xm/xsma4hx3b3.png', img: 'https://image.xiaomaiketang.com/xm/xsma4hx3b3.png',
children: [ children: [
{ {
groupName: "题库", groupName: '题库',
groupCode: "QuestionBank", groupCode: 'QuestionBank',
link: '/question-manage-index' link: '/question-manage-index',
}, },
{ {
groupName: "试卷", groupName: '试卷',
groupCode: "ExamPaper", groupCode: 'ExamPaper',
link: '/paper-manage-index' link: '/paper-manage-index',
}, },
{ {
groupName: "考试", groupName: '考试',
groupCode: "CloudExam", groupCode: 'CloudExam',
link: '/examination-manage-index' link: '/examination-manage-index',
}, },
] ],
}, },
{ {
groupName: "知识库", groupName: '知识库',
groupCode: "CloudKnowledge", groupCode: 'CloudKnowledge',
icon: '&#xe8a8;', icon: '&#xe8a8;',
link: '/knowledge-base', link: '/knowledge-base',
img:'https://image.xiaomaiketang.com/xm/8sbP5rGQWh.png', img: 'https://image.xiaomaiketang.com/xm/8sbP5rGQWh.png',
selectImg:'https://image.xiaomaiketang.com/xm/hJKCfibC22.png' selectImg: 'https://image.xiaomaiketang.com/xm/hJKCfibC22.png',
}, },
{ {
groupName: "资料云盘", groupName: '资料云盘',
groupCode: "CloudDisk", groupCode: 'CloudDisk',
icon: '&#xe8aa;', icon: '&#xe8aa;',
link: '/resource-disk', link: '/resource-disk',
img:'https://image.xiaomaiketang.com/xm/zGKbXJPzXx.png', img: 'https://image.xiaomaiketang.com/xm/zGKbXJPzXx.png',
selectImg:'https://image.xiaomaiketang.com/xm/5sN4MzjxYc.png', selectImg: 'https://image.xiaomaiketang.com/xm/5sN4MzjxYc.png',
}, },
{ {
groupName: "人员管理", groupName: '人员管理',
groupCode: "PersonManage", groupCode: 'PersonManage',
icon: '&#xe8a4;', icon: '&#xe8a4;',
img:'https://image.xiaomaiketang.com/xm/PRCnrt35y8.png', img: 'https://image.xiaomaiketang.com/xm/PRCnrt35y8.png',
children: [ children: [
{ {
groupName: "员工管理", groupName: '员工管理',
groupCode: "ShopStaff", groupCode: 'ShopStaff',
link: '/college-employee' link: '/college-employee',
}, },
{ {
groupName: "学员管理", groupName: '学员管理',
groupCode: "ShopUser", groupCode: 'ShopUser',
link: '/college-user' link: '/college-user',
} },
] ],
}, },
{ {
groupName: "学院管理", groupName: '学院管理',
groupCode: "CloudShop", groupCode: 'CloudShop',
icon: '&#xe8a4;', icon: '&#xe8a4;',
img:'https://image.xiaomaiketang.com/xm/Q8i5RSMKNc.png', img: 'https://image.xiaomaiketang.com/xm/Q8i5RSMKNc.png',
children: [ children: [
{ {
groupName: "学院信息", groupName: '学院信息',
groupCode: "ShopInfo", groupCode: 'ShopInfo',
link: '/college-info' link: '/college-info',
}, },
{ {
groupName: "学院装修", groupName: '学院装修',
groupCode: "ShopDecoration", groupCode: 'ShopDecoration',
link: '/store-decoration' link: '/store-decoration',
}, },
{ {
groupName: "分类管理", groupName: '分类管理',
groupCode: "CourseCategory", groupCode: 'CourseCategory',
link: '/course-category-manage' link: '/course-category-manage',
}, },
{ {
groupName: "H5学院", groupName: 'H5学院',
groupCode: "ShopDecorationH5", groupCode: 'ShopDecorationH5',
link: '/store-decoration/h5' link: '/store-decoration/h5',
}, },
{ {
groupName: "网页端学院", groupName: '网页端学院',
groupCode: "ShopDecorationWeb", groupCode: 'ShopDecorationWeb',
link: '/store-decoration/web' link: '/store-decoration/web',
} },
] ],
}, },
] ];
\ No newline at end of file
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