Skip to content

X
xiaomai-cloud-class-web
Commit a12bde17 by yuananting
Options

fix:解决合并直播课创建时间默认值的分支冲突

parents 603dedf5 ad079064
Showing with 730 additions and 683 deletions
src/modules/course-manage/components/LiveCourseList.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-07-14 15:43:00 * @Date: 2020-07-14 15:43:00
* @Last Modified by: chenshu * @Last Modified by: chenshu
* @Last Modified time: 2021-03-16 17:37:23 * @Last Modified time: 2021-03-16 17:37:23
* @Description: 大班直播、互动班课的直播课列表 * @Description: 大班直播、互动班课的直播课列表
*/ */
import React from 'react'; import React from 'react';
import { Table, Modal, message, Dropdown, Button,Switch,Tooltip} from 'antd'; 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 { PageControl } from '@/components';
import DownloadLiveModal from '@/components/DownloadLiveModal'; import DownloadLiveModal from '@/components/DownloadLiveModal';
import ManageCoursewareModal from '../modal/ManageCoursewareModal'; import ManageCoursewareModal from '../modal/ManageCoursewareModal';
import ShareLiveModal from '../modal/ShareLiveModal'; import ShareLiveModal from '../modal/ShareLiveModal';
import RelatedPlanModal from '../modal/RelatedPlanModal'; import RelatedPlanModal from '../modal/RelatedPlanModal';
import './LiveCourseList.less'; import './LiveCourseList.less';
import { QuestionCircleOutlined } from '@ant-design/icons'; import { QuestionCircleOutlined } from '@ant-design/icons';
import { appId, shareUrl, LIVE_SHARE,LIVE_REPLAY_MAP} from '@/domains/course-domain/constants'; import { appId, LIVE_SHARE } from '@/domains/course-domain/constants';
import CourseService from "@/domains/course-domain/CourseService"; import CourseService from '@/domains/course-domain/CourseService';
import BaseService from "@/domains/basic-domain/baseService"; import BaseService from '@/domains/basic-domain/baseService';
import DataList from '../DataList/DataList'; import DataList from '../DataList/DataList';
import User from '@/common/js/user'; import User from '@/common/js/user';
import _ from "underscore"; import _ from 'underscore';
const { confirm } = Modal; const { confirm } = Modal;
const courseStateShow = { const courseStateShow = {
UN_START: { UN_START: {
code: 1, code: 1,
title: "待开课", title: '待开课',
color: "#FFB129", color: '#FFB129',
}, },
STARTING: { STARTING: {
code: 2, code: 2,
title: "上课中", title: '上课中',
color: "#238FFF", color: '#238FFF',
}, },
FINISH: { FINISH: {
code: 3, code: 3,
title: "已完成", title: '已完成',
color: "#3BBDAA", color: '#3BBDAA',
}, },
EXPIRED: { EXPIRED: {
code: 4, code: 4,
title: "未成功开课", title: '未成功开课',
color: "#999", color: '#999',
}, },
}; };
class LiveCourseList extends React.Component { class LiveCourseList extends React.Component {
...@@ -55,702 +53,740 @@ class LiveCourseList extends React.Component { ...@@ -55,702 +53,740 @@ class LiveCourseList extends React.Component {
super(props); super(props);
this.state = { this.state = {
columns: [], columns: [],
openDownloadModal:false, openDownloadModal: false,
url:'', url: '',
RelatedPlanModalVisible:false, RelatedPlanModalVisible: false,
selectPlanList:{} selectPlanList: {},
} };
} }
componentWillMount(){ componentWillMount() {
this.parseColumns(); this.parseColumns();
} }
componentDidMount() { componentDidMount() {
this.getDownloadVersion() this.getDownloadVersion();
} }
// 显示分享弹窗 // 显示分享弹窗
handleShowShareModal = (item, needStr = false) => { handleShowShareModal = (item, needStr = false) => {
const _appId = appId; const _appId = appId;
const { liveCourseId } = item; const { liveCourseId } = item;
const htmlUrl = `${LIVE_SHARE}live_detail/${liveCourseId}?id=${User.getStoreId()}`; const htmlUrl = `${LIVE_SHARE}live_detail/${liveCourseId}?id=${User.getStoreId()}`;
const longUrl = htmlUrl const longUrl = htmlUrl;
console.log('htmlUrl',htmlUrl,longUrl); console.log('htmlUrl', htmlUrl, longUrl);
const shareData = { ...item, longUrl }; const shareData = { ...item, longUrl };
const shareLiveModal = ( const shareLiveModal = (
<ShareLiveModal <ShareLiveModal
needStr={needStr} needStr={needStr}
data={shareData} data={shareData}
type="liveClass" type='liveClass'
title="直播课" title='直播课'
close={() => { close={() => {
this.setState({ this.setState({
shareLiveModal: null shareLiveModal: null,
}); });
localStorage.setItem('largeLiveCourseItem', ''); localStorage.setItem('largeLiveCourseItem', '');
}} }}
/> />
) );
this.setState({ shareLiveModal }) this.setState({ shareLiveModal });
} };
//改变上架状态 //改变上架状态
changeShelfState = (item) =>{ changeShelfState = (item) => {
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={
"liveCourseId": item.liveCourseId,
"shelfState":_shelfState
} }
CourseService.turnOnOrOffLiveCloudCourse(params).then((res)=>{ const params = {
if(res.success){ liveCourseId: item.liveCourseId,
if(_shelfState === "YES"){ shelfState: _shelfState,
message.success("已开启展示"); };
}else{ CourseService.turnOnOrOffLiveCloudCourse(params).then((res) => {
message.success("已取消展示"); if (res.success) {
if (_shelfState === 'YES') {
message.success('已开启展示');
} else {
message.success('已取消展示');
} }
} }
}) });
} };
// 前往上课数据页面 // 前往上课数据页面
handleLinkToClassData = (item) => { handleLinkToClassData = (item) => {
const { match } = this.props; const { match } = this.props;
window.RCHistory.push({ window.RCHistory.push({
pathname: `${match.url}/live-course-data?type=large&id=${item.liveCourseId}` pathname: `${match.url}/live-course-data?type=large&id=${item.liveCourseId}`,
}); });
} };
parseColumns = () => { parseColumns = () => {
const menu = (item) => ( const menu = (item) => (
<div className="live-course-more-menu"> <div className='live-course-more-menu'>
<div> <div>上课记录</div>
上课记录
</div>
<div <div
onClick={() => { onClick={() => {
this.handleShowRepeatModal(item); this.handleShowRepeatModal(item);
}} }}>
>
回放记录 回放记录
</div> </div>
</div> </div>
); );
let columns let columns;
const userRole = User.getUserRole(); const userRole = User.getUserRole();
if(userRole !=="CloudLecturer"){ if (userRole !== 'CloudLecturer') {
columns = [ columns = [
{ {
title: "直播课", title: '直播课',
width: "23%", width: '23%',
key: "course", key: 'course',
dataIndex: "courseName", dataIndex: 'courseName',
render: (val, record) => { render: (val, record) => {
let hasCover = false; let hasCover = false;
return ( return (
<div className="record__item"> <div className='record__item'>
{ {record.courseMediaVOS.map((item, index) => {
record.courseMediaVOS.map((item,index)=>{ if (item.contentType === 'COVER') {
if( item.contentType === "COVER"){ hasCover = true;
hasCover = true; return <img className='course-cover' src={item.mediaUrl} />;
return <img className="course-cover" src={item.mediaUrl} /> }
} })}
}) {!hasCover && <img className='course-cover' src={'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'} />}
}
{ !hasCover &&
<img className="course-cover" src={'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'} />
}
<div> <div>
{ record.courseName.length > 17? {record.courseName.length > 17 ? (
<Tooltip title={record.courseName}> <Tooltip title={record.courseName}>
<div className="course-name">{record.courseName}</div> <div className='course-name'>{record.courseName}</div>
</Tooltip>
) : (
<div className='course-name'>{record.courseName}</div>
)}
<div>
<span className='course-time'>
{formatDate('YYYY-MM-DD H:i', parseInt(record.startTime))}~{formatDate('H:i', parseInt(record.endTime))}
</span>
<span
className='course-status'
style={{ color: courseStateShow[record.courseState].color, border: `1px solid ${courseStateShow[record.courseState].color}` }}>
{courseStateShow[record.courseState].title}
</span>
</div>
<div className='teacher-assistant'>
{record.teacherName.length > 4 ? (
<Tooltip title={record.teacherName}>
<span className='teacher'>讲师：{record.teacherName}</span>
</Tooltip> </Tooltip>
: ) : (
<div className="course-name">{record.courseName}</div> <span className='teacher'>讲师：{record.teacherName}</span>
} )}
<div>
<span className="course-time">{formatDate("YYYY-MM-DD H:i",parseInt(record.startTime))}~{formatDate("H:i", parseInt(record.endTime))}</span> {record.admins.length > 0 && (
<span className="course-status" style={{color:courseStateShow[record.courseState].color,border:`1px solid ${courseStateShow[record.courseState].color}`}}>{courseStateShow[record.courseState].title}</span> <>
</div> <span className='split'> | </span>
<div className="teacher-assistant"> {this.handleAdminName(record.admins).length > 4 ? (
{ record.teacherName.length > 4 ? <Tooltip title={this.handleAdminName(record.admins)}>
<Tooltip title={record.teacherName}> <span className='assistant'>
<span className="teacher">讲师：{record.teacherName}</span> 助教：
</Tooltip> {record.admins.map((item, index) => {
: return (
<span className="teacher">讲师：{record.teacherName}</span> <span>
} {item.adminName} {index < record.admins.length - 1 && <span> 、</span>}{' '}
</span>
{ record.admins.length >0 && );
<> })}
<span className="split"> | </span> </span>
{ this.handleAdminName(record.admins).length > 4? </Tooltip>
<Tooltip title={this.handleAdminName(record.admins)}> ) : (
<span className="assistant">助教： <span className='assistant'>
{ record.admins.map((item,index)=>{ 助教：
return <span>{item.adminName} { (index < record.admins.length-1)&&(<span> 、</span>)} </span> {record.admins.map((item, index) => {
}) return (
} <span>
{item.adminName} {index < record.admins.length - 1 && <span> 、</span>}{' '}
</span> </span>
</Tooltip> );
: })}
<span className="assistant">助教： </span>
{ record.admins.map((item,index)=>{ )}
return <span>{item.adminName} { (index < record.admins.length-1)&&(<span> 、</span>)} </span> </>
}) )}
} </div>
</span>
}
</>
}
</div>
</div> </div>
</div> </div>
) );
} },
}, },
{ {
title: "课程分类", title: '课程分类',
width: "10%", width: '10%',
key: "couseCatalog", key: 'couseCatalog',
dataIndex: "couseCatalog", dataIndex: 'couseCatalog',
render: (val, item) => { render: (val, item) => {
return ( return <div className='categoryName'>{item.categoryName}</div>;
<div className="categoryName">{item.categoryName}</div>
)
}, },
}, },
{ {
title: "课件管理", title: '课件管理',
width: "8%", width: '8%',
key: "courseware", key: 'courseware',
dataIndex: "courseware", dataIndex: 'courseware',
render: (val, item) => { render: (val, item) => {
return ( return (
<span className="courseware" <span
className='courseware'
onClick={() => { onClick={() => {
this.setState({ this.setState({
editData: item, editData: item,
openCoursewareModal: true, openCoursewareModal: true,
}); });
}}>{item.courseDocumentCount}个</span> }}>
{item.courseDocumentCount}个
</span>
); );
}, },
}, },
{ {
title: '上课数据', title: '上课数据',
width: "9%", width: '9%',
key: "quota", key: 'quota',
dataIndex: "quota", dataIndex: 'quota',
render: (val, item) => { render: (val, item) => {
return ( return (
<span className="iconfont icon quota-icon" onClick={() => { <span
this.handleLinkToClassData(item) className='iconfont icon quota-icon'
}}>&#xe7d6;</span> onClick={() => {
this.handleLinkToClassData(item);
}}>
&#xe7d6;
</span>
); );
}, },
}, },
{ {
title: <span> title: (
<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> <span>学院展示</span>
</span>, <Tooltip
width: "9%", title={
key: "shelfState", <div>
dataIndex: "shelfState", 开启后，学员可在学院内查看到此课程。若课程“未成功开课”，则系统会自动“关闭”学院展示。
<br />
关闭后，学院内不再展示此课程，但学员仍可通过分享的海报/链接查看此课程。
</div>
}>
<i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px', fontWeight: 'normal' }}>
&#xe61d;
</i>
</Tooltip>
</span>
),
width: '9%',
key: 'shelfState',
dataIndex: 'shelfState',
render: (val, item, index) => { render: (val, item, index) => {
return ( return <Switch defaultChecked={item.shelfState === 'YES' ? true : false} onChange={() => this.changeShelfState(item)} />;
<Switch defaultChecked={item.shelfState==="YES"?true:false} onChange={()=>this.changeShelfState(item)}/>
)
}, },
}, },
{ {
title: '创建时间', title: '创建时间',
width: "9%", width: '9%',
key: "created", key: 'created',
dataIndex: "created", dataIndex: 'created',
sorter: true, sorter: true,
render: (val, item) => { render: (val, item) => {
return ( return <span>{val === 0 ? '-' : formatDate('YYYY-MM-DD H:i', val)}</span>;
<span>{formatDate('YYYY-MM-DD H:i', val)}</span>
);
}, },
}, },
{ {
title: '关联项', title: '关联项',
width: "15%", width: '15%',
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>}{' '}
</Tooltip> </span>
: );
<span></span> })}
} </Tooltip>
) : (
<span></span>
)}
</div> </div>
) );
}, },
}, },
{ {
title: "操作", title: '操作',
width: "15%", width: '15%',
key: "operate", key: 'operate',
dataIndex: "operate", dataIndex: 'operate',
render: (val, item) => { render: (val, item) => {
return ( return (
<div className='operate'>
<div className="operate"> {(item.courseState === 'UN_START' || item.courseState === 'STARTING') &&
{ ((item.courseState==="UN_START" || item.courseState==="STARTING") && (item.teacherId === User.getUserId() || _.pluck(item.admins, "adminId").includes(User.getUserId()))) && (item.teacherId === User.getUserId() || _.pluck(item.admins, 'adminId').includes(User.getUserId())) && (
<>
<div
key="enter_live_room1"
className="operate__item"
onClick={() => { this.handleEnterLiveRoom(item) }}
>进入直播间
</div>
<span className="operate__item split" key="view_play_back_split"> | </span>
</>
}
{ (item.courseState==="FINISH" && item.haveRecord==="YES") &&
<> <>
<div <div
key="view_play_back" key='enter_live_room1'
className="operate__item" className='operate__item'
onClick={()=>{this.handleViewPlayBack(item)}} onClick={() => {
>查看回放</div> this.handleEnterLiveRoom(item);
<span className="operate__item split" key="view_play_back_split"> | </span> }}>
</> 进入直播间
}
{ item.courseState!=="EXPIRED" &&
<>
<div
key="share"
className="operate__item"
onClick={() => { this.handleShowShareModal(item); }}
>
分享
</div> </div>
<span className='operate__item split' key='view_play_back_split'>
{' '}
|{' '}
</span>
</> </>
} )}
{ item.courseState!=="EXPIRED" && {item.courseState === 'FINISH' && item.haveRecord === 'YES' && (
<>
<div
key='view_play_back'
className='operate__item'
onClick={() => {
this.handleViewPlayBack(item);
}}>
查看回放
</div>
<span className='operate__item split' key='view_play_back_split'>
{' '}
|{' '}
</span>
</>
)}
{item.courseState !== 'EXPIRED' && (
<> <>
<span key="split1" className="operate__item split"> | </span> <div
<div className="big-live"> key='share'
className='operate__item'
onClick={() => {
this.handleShowShareModal(item);
}}>
分享
</div>
</>
)}
{item.courseState !== 'EXPIRED' && (
<>
<span key='split1' className='operate__item split'>
{' '}
|{' '}
</span>
<div className='big-live'>
<Dropdown overlay={this.renderMoreOperate(item)}> <Dropdown overlay={this.renderMoreOperate(item)}>
<span className="more-operate"> <span className='more-operate'>
<span className="operate-text">更多</span> <span className='operate-text'>更多</span>
<span <span className='iconfont icon' style={{ color: '#2966FF' }}>
className="iconfont icon" &#xe824;
style={{ color: "#2966FF" }}
>
&#xe824;
</span> </span>
</span> </span>
</Dropdown> </Dropdown>
</div> </div>
</> </>
} )}
{ item.courseState==="EXPIRED" && {item.courseState === 'EXPIRED' && (
<div <div className='operate__item' onClick={() => this.handleDelete(item)}>
className="operate__item" 删除
onClick={()=>this.handleDelete(item)} </div>
>删除</div> )}
}
</div> </div>
) );
} },
} },
]; ];
}else{ } else {
columns = [ columns = [
{ {
title: "直播课", title: '直播课',
width: "25%", width: '25%',
key: "course", key: 'course',
dataIndex: "courseName", dataIndex: 'courseName',
render: (val, record) => { render: (val, record) => {
let hasCover = false; let hasCover = false;
return ( return (
<div className="record__item"> <div className='record__item'>
{ {record.courseMediaVOS.map((item, index) => {
record.courseMediaVOS.map((item,index)=>{ if (item.contentType === 'COVER') {
if( item.contentType === "COVER"){ hasCover = true;
hasCover = true; return <img className='course-cover' src={item.mediaUrl} />;
return <img className="course-cover" src={item.mediaUrl} /> }
} })}
}) {!hasCover && <img className='course-cover' src={'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'} />}
}
{ !hasCover &&
<img className="course-cover" src={'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'} />
}
<div> <div>
{ record.courseName.length > 17? {record.courseName.length > 17 ? (
<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>
<span className="course-time">{formatDate("YYYY-MM-DD H:i",parseInt(record.startTime))}~{formatDate("H:i", parseInt(record.endTime))}</span> <span className='course-time'>
<span className="course-status" style={{color:courseStateShow[record.courseState].color,border:`1px solid ${courseStateShow[record.courseState].color}`}}>{courseStateShow[record.courseState].title}</span> {formatDate('YYYY-MM-DD H:i', parseInt(record.startTime))}~{formatDate('H:i', parseInt(record.endTime))}
</div> </span>
<div className="teacher-assistant"> <span
{ record.teacherName.length > 4 ? className='course-status'
style={{ color: courseStateShow[record.courseState].color, border: `1px solid ${courseStateShow[record.courseState].color}` }}>
{courseStateShow[record.courseState].title}
</span>
</div>
<div className='teacher-assistant'>
{record.teacherName.length > 4 ? (
<Tooltip title={record.teacherName}> <Tooltip title={record.teacherName}>
<span className="teacher">讲师：{record.teacherName}</span> <span className='teacher'>讲师：{record.teacherName}</span>
</Tooltip> </Tooltip>
: ) : (
<span className="teacher">讲师：{record.teacherName}</span> <span className='teacher'>讲师：{record.teacherName}</span>
} )}
{record.admins.length > 0 && (
{ record.admins.length >0 && <>
<> <span className='split'> | </span>
<span className="split"> | </span> {this.handleAdminName(record.admins).length > 4 ? (
{ this.handleAdminName(record.admins).length > 4? <Tooltip title={this.handleAdminName(record.admins)}>
<Tooltip title={this.handleAdminName(record.admins)}> <span className='assistant'>
<span className="assistant">助教： 助教：
{ record.admins.map((item,index)=>{ {record.admins.map((item, index) => {
return <span>{item.adminName} { (index < record.admins.length-1)&&(<span> 、</span>)} </span> return (
}) <span>
} {item.adminName} {index < record.admins.length - 1 && <span> 、</span>}{' '}
</span>
);
})}
</span>
</Tooltip>
) : (
<span className='assistant'>
助教：
{record.admins.map((item, index) => {
return (
<span>
{item.adminName} {index < record.admins.length - 1 && <span> 、</span>}{' '}
</span> </span>
</Tooltip> );
: })}
<span className="assistant">助教： </span>
{ record.admins.map((item,index)=>{ )}
return <span>{item.adminName} { (index < record.admins.length-1)&&(<span> 、</span>)} </span> </>
}) )}
} </div>
</span>
}
</>
}
</div>
</div> </div>
</div> </div>
) );
} },
}, },
{ {
title: "课程分类", title: '课程分类',
width: "10%", width: '10%',
key: "couseCatalog", key: 'couseCatalog',
dataIndex: "couseCatalog", dataIndex: 'couseCatalog',
render: (val, item) => { render: (val, item) => {
return ( return <div className='categoryName'>{item.categoryName}</div>;
<div className="categoryName">{item.categoryName}</div>
)
}, },
}, },
{ {
title: "课件管理", title: '课件管理',
width: "8%", width: '8%',
key: "courseware", key: 'courseware',
dataIndex: "courseware", dataIndex: 'courseware',
render: (val, item) => { render: (val, item) => {
return ( return (
<span className="courseware" <span
className='courseware'
onClick={() => { onClick={() => {
this.setState({ this.setState({
editData: item, editData: item,
openCoursewareModal: true, openCoursewareModal: true,
}); });
}}>{item.courseDocumentCount}个</span> }}>
{item.courseDocumentCount}个
</span>
); );
}, },
}, },
{ {
title: '上课数据', title: '上课数据',
width: "9%", width: '9%',
key: "quota", key: 'quota',
dataIndex: "quota", dataIndex: 'quota',
render: (val, item) => { render: (val, item) => {
return ( return (
<span className="iconfont icon quota-icon" onClick={() => { <span
this.handleLinkToClassData(item) className='iconfont icon quota-icon'
}}>&#xe7d6;</span> onClick={() => {
this.handleLinkToClassData(item);
}}>
&#xe7d6;
</span>
); );
}, },
}, },
{ {
title: '创建时间', title: '创建时间',
width: "9%", width: '9%',
key: "created", key: 'created',
dataIndex: "created", dataIndex: 'created',
sorter: true, sorter: true,
render: (val, item) => { render: (val, item) => {
return ( return <span>{formatDate('YYYY-MM-DD H:i', val)}</span>;
<span>{formatDate('YYYY-MM-DD H:i', val)}</span>
);
}, },
}, },
{ {
title: '关联项', title: '关联项',
width: "15%", width: '15%',
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>}{' '}
</Tooltip> </span>
: );
<span></span> })}
} </Tooltip>
) : (
<span></span>
)}
</div> </div>
) );
}, },
}, },
]; ];
} }
this.setState({ columns }) this.setState({ columns });
} };
handleAdminName = (adminArray)=>{ handleAdminName = (adminArray) => {
let adminStr = ""; let adminStr = '';
adminArray.map((item,index)=>{ adminArray.map((item, index) => {
if(index < adminArray.length-1){ if (index < adminArray.length - 1) {
adminStr = adminStr + item.adminName + '、'; adminStr = adminStr + item.adminName + '、';
}else{ } else {
adminStr = adminStr + item.adminName adminStr = adminStr + item.adminName;
} }
}) });
return adminStr return adminStr;
} };
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;
} };
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' onClick={() => this.handleRelatedModalShow(item)}>
className="operate__item" 关联培训计划
onClick={()=>this.handleRelatedModalShow(item)} </div>
>关联培训计划</div> )}
} <div className='operate__item' onClick={() => this.toEditCoursePage(item)}>
<div 编辑
className="operate__item" </div>
onClick={()=>this.toEditCoursePage(item)} {item.courseState !== 'STARTING' && (
>编辑</div> <div className='operate__item' onClick={() => this.handleDelete(item)}>
{ item.courseState !=="STARTING" && 删除
<div </div>
className="operate__item" )}
onClick={()=>this.handleDelete(item)}
>删除</div>
}
</div> </div>
) );
} };
handleDelete = (record)=>{ handleDelete = (record) => {
return confirm({ return confirm({
title: '你确定要删除直播课？', title: '你确定要删除直播课？',
content: '删除后，学员将不能观看直播课/回放', content: '删除后，学员将不能观看直播课/回放',
icon: <span className="icon iconfont default-confirm-icon">&#xe839; </span>, icon: <span className='icon iconfont default-confirm-icon'>&#xe839; </span>,
okText: '删除', okText: '删除',
okType: 'danger', okType: 'danger',
cancelText: '取消', cancelText: '取消',
width:440, width: 440,
height:188, height: 188,
onOk: () => { onOk: () => {
this.deleteConfirm(record); this.deleteConfirm(record);
} },
}) });
} };
deleteConfirm = (item)=>{ deleteConfirm = (item) => {
const params={ const params = {
"liveCourseId": item.liveCourseId, liveCourseId: item.liveCourseId,
} };
CourseService.delLiveCloudCourse(params).then((res)=>{ CourseService.delLiveCloudCourse(params).then((res) => {
if(res.success){ if (res.success) {
message.success("已删除"); message.success('已删除');
this.props.onChange(); this.props.onChange();
} }
}) });
} };
toEditCoursePage =(item)=>{ toEditCoursePage = (item) => {
window.RCHistory.push({ window.RCHistory.push({
pathname: `/create-live-course?type=edit&id=${item.liveCourseId}`, pathname: `/create-live-course?type=edit&id=${item.liveCourseId}`,
}) });
} };
refreshCourseList = ()=>{ refreshCourseList = () => {
this.props.onChange(this.props.query); this.props.onChange(this.props.query);
} };
//进入直播间 //进入直播间
handleEnterLiveRoom = (item) => { handleEnterLiveRoom = (item) => {
if (item.startTime - Date.now() > 1800000) { if (item.startTime - Date.now() > 1800000) {
Modal.warning({ Modal.warning({
title: "你来得太早了", title: '你来得太早了',
okText: '我知道了', okText: '我知道了',
content: "请于开始上课前30分钟来直播上课。", content: '请于开始上课前30分钟来直播上课。',
icon: ( icon: (
<span <span className='icon iconfont default-confirm-icon' style={{ color: '#FFBB54 !important' }}>
className="icon iconfont default-confirm-icon" &#xe834;
style={{ color: "#FFBB54 !important" }}
>
&#xe834;
</span> </span>
), ),
}); });
} else { } else {
CourseService.getLiveCloudCourseDetail({ CourseService.getLiveCloudCourseDetail({
liveCourseId: item.liveCourseId, liveCourseId: item.liveCourseId,
}) }).then((res) => {
.then((res) => { const url = `xmqx://liveCourseId=${item.liveCourseId}`;
const url = `xmqx://liveCourseId=${item.liveCourseId}`; if (res.result.courseState === 'FINISH') {
if (res.result.courseState === "FINISH") { Modal.warning({
Modal.warning({ title: '刷新页面',
title: "刷新页面", icon: <QuestionCircleOutlined />,
icon: <QuestionCircleOutlined />, content: '课次已结束，请刷新一下',
content: "课次已结束，请刷新一下", onOk: () => {
onOk: () => { this.refreshCourseList();
this.refreshCourseList(); },
} });
}); } else {
} else { this.setState({ url, openDownloadModal: true });
this.setState({ url, openDownloadModal: true }); }
} });
});
} }
} };
onShowSizeChange = (current, size) => { onShowSizeChange = (current, size) => {
if (current == size) { if (current == size) {
return return;
} }
let _query = this.props.query let _query = this.props.query;
_query.size = size; _query.size = size;
this.props.onChange(_query) this.props.onChange(_query);
} };
getDownloadVersion() { getDownloadVersion() {
const isMac = /macintosh|mac os x/i.test(navigator.userAgent); const isMac = /macintosh|mac os x/i.test(navigator.userAgent);
// 判断学员系统 // 判断学员系统
let platform; let platform;
if(!isMac){ if (!isMac) {
platform = 1 platform = 1;
}else{ } else {
platform = 4 platform = 4;
} }
BaseService BaseService.getLastedVersion({ model: 5, platform }).then((res) => {
.getLastedVersion({ model: 5, platform})
.then((res) => {
const { result = {} } = res; const { result = {} } = res;
this.setState({ downloadUrl: result.releaseUrl }); this.setState({ downloadUrl: result.releaseUrl });
}) });
} }
handleViewPlayBack = (item) => { handleViewPlayBack = (item) => {
let htmlUrl; let htmlUrl;
if(item.teacherId === User.getUserId()){ if (item.teacherId === User.getUserId()) {
htmlUrl = `${LIVE_SHARE}replay/${item.liveCourseId}?teacherId=${User.getUserId()}&id=${User.getStoreId()}`; htmlUrl = `${LIVE_SHARE}replay/${item.liveCourseId}?teacherId=${User.getUserId()}&id=${User.getStoreId()}`;
}else if(_.pluck(item.admins, "adminId").includes(User.getUserId())){ } else if (_.pluck(item.admins, 'adminId').includes(User.getUserId())) {
htmlUrl = `${LIVE_SHARE}replay/${item.liveCourseId}?userId=${User.getUserId()}&id=${User.getStoreId()}`; htmlUrl = `${LIVE_SHARE}replay/${item.liveCourseId}?userId=${User.getUserId()}&id=${User.getStoreId()}`;
}else{ } else {
htmlUrl = `${LIVE_SHARE}replay/${item.liveCourseId}?id=${User.getStoreId()}`; htmlUrl = `${LIVE_SHARE}replay/${item.liveCourseId}?id=${User.getStoreId()}`;
} }
window.open(htmlUrl); window.open(htmlUrl);
} };
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.liveCourseId, selectCourseId: item.liveCourseId,
selectPlanList:selectPlanList selectPlanList: selectPlanList,
}) });
} };
closeRelatedPlanModalVisible = ()=>{ closeRelatedPlanModalVisible = () => {
this.setState({
RelatedPlanModalVisible:false
})
}
onChangeSelectPlanList = (selectPlanList)=>{
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();
}
);
};
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 _columnKey; let _columnKey;
let _order; let _order;
// 按创建时间升序排序 // 按创建时间升序排序
if (columnKey === 'created' && order === 'ascend') {_columnKey="CREATED"; _order = 'SORT_ASC'; } if (columnKey === 'created' && order === 'ascend') {
_columnKey = 'CREATED';
_order = 'SORT_ASC';
}
// 按创建时间降序排序 // 按创建时间降序排序
if (columnKey === 'created' && order === 'descend') { _columnKey="CREATED"; _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 { total, query, courseList, loading} = this.props; const { total, query, courseList, loading } = this.props;
const { current, size } = query; const { current, size } = query;
const { openDownloadModal, const { openDownloadModal, downloadUrl, url, columns, openCoursewareModal, editData, RelatedPlanModalVisible, selectCourseId, selectPlanList } = this.state;
downloadUrl, url, columns,
openCoursewareModal,
editData,
RelatedPlanModalVisible,
selectCourseId,
selectPlanList
} = this.state;
const { match } = this.props; const { match } = this.props;
return ( return (
<div className="live-course-list"> <div className='live-course-list'>
<Table <Table
bordered bordered
size="middle" size='middle'
pagination={false} pagination={false}
columns={columns} columns={columns}
loading={loading} loading={loading}
...@@ -758,21 +794,21 @@ class LiveCourseList extends React.Component { ...@@ -758,21 +794,21 @@ class LiveCourseList extends React.Component {
onChange={this.handleChangeTable} onChange={this.handleChangeTable}
rowKey={(row) => row.liveCourseId} rowKey={(row) => row.liveCourseId}
/> />
{ total>0 && {total > 0 && (
<div className="box-footer"> <div className='box-footer'>
<PageControl <PageControl
current={current - 1} current={current - 1}
pageSize={size} pageSize={size}
total={parseInt(total)} total={parseInt(total)}
toPage={(page) => { toPage={(page) => {
const _query = {...query, current: page + 1}; const _query = { ...query, current: page + 1 };
this.props.onChange(_query) this.props.onChange(_query);
}} }}
onShowSizeChange={this.onShowSizeChange} onShowSizeChange={this.onShowSizeChange}
/> />
</div> </div>
} )}
{ this.state.shareLiveModal } {this.state.shareLiveModal}
{openCoursewareModal && ( {openCoursewareModal && (
<ManageCoursewareModal <ManageCoursewareModal
data={editData} data={editData}
...@@ -789,13 +825,13 @@ class LiveCourseList extends React.Component { ...@@ -789,13 +825,13 @@ class LiveCourseList extends React.Component {
onCancel={() => { onCancel={() => {
this.setState({ this.setState({
url: '', url: '',
openDownloadModal: openDownloadModal: false,
false }); });
}} }}
/> />
)} )}
{ RelatedPlanModalVisible && {RelatedPlanModalVisible && (
<RelatedPlanModal <RelatedPlanModal
onClose={this.closeRelatedPlanModalVisible} onClose={this.closeRelatedPlanModalVisible}
visible={RelatedPlanModalVisible} visible={RelatedPlanModalVisible}
selectCourseId={selectCourseId} selectCourseId={selectCourseId}
...@@ -803,12 +839,12 @@ class LiveCourseList extends React.Component { ...@@ -803,12 +839,12 @@ class LiveCourseList extends React.Component {
onChange={this.onChangeSelectPlanList} onChange={this.onChangeSelectPlanList}
onConfirm={this.onConfirmSelectPlanList} onConfirm={this.onConfirmSelectPlanList}
/> />
} )}
<iframe src={url} style={{ display: "none" }} /> <iframe src={url} style={{ display: 'none' }} />
<Route path={`${match.url}/live-course-data`} component={DataList} /> <Route path={`${match.url}/live-course-data`} component={DataList} />
</div> </div>
) );
} }
} }
export default withRouter(LiveCourseList); export default withRouter(LiveCourseList);
\ No newline at end of file
src/modules/root/Menu.tsx
import React, { Key, useContext, useEffect, useRef, useState } from 'react'; import React, { Key, useContext, useEffect, useRef, useState, useMemo } from 'react';
import { import { withRouter } from 'react-router-dom';
withRouter,
} from 'react-router-dom';
import { Menu, Popover, Tooltip } from 'antd'; import { Menu, Popover, Tooltip } from 'antd';
import { RightOutlined } from '@ant-design/icons' import { RightOutlined } from '@ant-design/icons';
import { menuList } from '../../routes//config/menuList' import { menuList } from '../../routes//config/menuList';
import { XMContext } from '../../store/context'; import { XMContext } from '../../store/context';
import BaseService from "@/domains/basic-domain/baseService"; import BaseService from '@/domains/basic-domain/baseService';
import StoreService from '@/domains/store-domain/storeService'; import StoreService from '@/domains/store-domain/storeService';
import classNames from 'classnames'; import classNames from 'classnames';
import User from "@/common/js/user" import User from '@/common/js/user';
import _ from 'underscore'; import _ from 'underscore';
import "./Menu.less"; import './Menu.less';
import { display } from 'html2canvas/dist/types/css/property-descriptors/display'; import { display } from 'html2canvas/dist/types/css/property-descriptors/display';
import moment from 'moment'; import moment from 'moment';
import ContactWidget from '@/components/ContactWidget'; import ContactWidget from '@/components/ContactWidget';
...@@ -19,149 +17,180 @@ import ContactWidget from '@/components/ContactWidget'; ...@@ -19,149 +17,180 @@ import ContactWidget from '@/components/ContactWidget';
const { SubMenu } = Menu; const { SubMenu } = Menu;
interface VersionInfo { interface VersionInfo {
dayTime: number dayTime: number;
stateEnum: string stateEnum: string;
surplusDayTime: number surplusDayTime: number;
surplusUserNum: number surplusUserNum: number;
userNum: number userNum: number;
validEndTime: string validEndTime: string;
validStartTime: string validStartTime: string;
} }
function VersionPanel(props:any) { function VersionPanel(props: any) {
const [versionName, setVersionName] = useState('标准版');
const [showVersionPopover, setShowVersionPopover] = useState(false);
const [showRenewPopover, setShowRenewPopover] = useState(false);
const [isExpiration, setIsExpiration] = useState(false);
const [versionInfo, setVersionInfo] = useState<any>({});
const [versionName,setVersionName] = useState("标准版") useEffect(() => {
const [showVersionPopover, setShowVersionPopover] = useState(false) BaseService.getLesseeVersionMsg().then((res) => {
const [showRenewPopover, setShowRenewPopover] = useState(false) let version = res.result;
const [isExpiration, setIsExpiration] = useState(false) User.setVersion(version);
const [versionInfo, setVersionInfo] = useState<any>({})
useEffect(()=> {
BaseService.getLesseeVersionMsg()
.then(res=> {
let version = res.result
User.setVersion(version)
let versioninfo = { let versioninfo = {
userNum: version.userNum === -1 ? "不限人数" : version.userNum, userNum: version.userNum === -1 ? '不限人数' : version.userNum,
surplusUserNum: version.userNum === -1 ? "不限人数" : version.surplusUserNum, surplusUserNum: version.userNum === -1 ? '不限人数' : version.surplusUserNum,
surplusDayTime: version.surplusDayTime, surplusDayTime: version.surplusDayTime,
validEndTime: moment(version.validEndTime).format("YYYY-MM-DD"), validEndTime: moment(version.validEndTime).format('YYYY-MM-DD'),
validStartTime: moment(version.validStartTime).format("YYYY-MM-DD"), validStartTime: moment(version.validStartTime).format('YYYY-MM-DD'),
} };
setVersionInfo(versioninfo) setVersionInfo(versioninfo);
if (version.surplusDayTime === 0) { if (version.surplusDayTime === 0) {
setIsExpiration(true) setIsExpiration(true);
} }
}) });
},[]) }, []);
function onVersionEnter() { function onVersionEnter() {
setShowVersionPopover(true) setShowVersionPopover(true);
} }
function onVersionLeave() { function onVersionLeave() {
setShowVersionPopover(false) setShowVersionPopover(false);
setShowRenewPopover(false) setShowRenewPopover(false);
} }
function onRenewClick() { function onRenewClick() {
setShowRenewPopover(true) setShowRenewPopover(true);
setShowVersionPopover(false) setShowVersionPopover(false);
} }
const versionPopoverClass = classNames({ const versionPopoverClass = classNames({
'popover':true, popover: true,
'popover-show':showVersionPopover 'popover-show': showVersionPopover,
}) });
return ( return (
<div className="version-info" onMouseEnter={onVersionEnter} onMouseLeave={onVersionLeave}> <div className='version-info' onMouseEnter={onVersionEnter} onMouseLeave={onVersionLeave}>
<div className="row-1"> <div className='row-1'>
<div className="version-name">{versionName}</div> <div className='version-name'>{versionName}</div>
<ContactWidget trigger="click" placement="rightBottom" visible={showRenewPopover}> <ContactWidget trigger='click' placement='rightBottom' visible={showRenewPopover}>
<div className="renew" onClick={onRenewClick}>去续费<span className="icon iconfont" style={{fontSize:"10px"}}>&#59291;</span></div> <div className='renew' onClick={onRenewClick}>
</ContactWidget> 去续费
</div> <span className='icon iconfont' style={{ fontSize: '10px' }}>
<div className="expiration-time">有效期至{versionInfo.validEndTime}{isExpiration ? "(已过期)" : ""}</div> &#59291;
<div className={versionPopoverClass}> </span>
<div className="title">版本信息</div> </div>
{isExpiration ? <div className="expiration-tag">已过期</div> : ""} </ContactWidget>
</div>
<div className="content"> <div className='expiration-time'>
<div className="widget" style={{marginRight:"26px",marginBottom:"16px",width:"70px"}}> 有效期至{versionInfo.validEndTime}
<div className="lable">剩余天数</div> {isExpiration ? '(已过期)' : ''}
<div className="lable-text">{versionInfo.surplusDayTime}</div> </div>
</div> <div className={versionPopoverClass}>
<div className="widget" style={{marginBottom:"16px"}}> <div className='title'>版本信息</div>
<div className="lable">有效起止日期</div> {isExpiration ? <div className='expiration-tag'>已过期</div> : ''}
<div className="lable-text">{versionInfo.validStartTime}~{versionInfo.validEndTime}</div>
</div> <div className='content'>
<div className="widget" style={{marginRight:"26px",marginBottom:"8px",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.surplusUserNum}</div> <div className='lable-text'>{versionInfo.surplusDayTime}</div>
</div> </div>
<div className="widget" style={{marginBottom:"8px"}}> <div className='widget' style={{ marginBottom: '16px' }}>
<div className="lable" style={{display:"inline-block"}}>人数限制</div> <div className='lable'>有效起止日期</div>
<Tooltip overlayStyle={{maxWidth:"587px",width:"587px"}} placement="topLeft" arrowPointAtCenter title={()=>{ return (<div><div>1、若员工/学员存在多个学院，企业人数只统计为1人；</div><div>2、若一个学员既用「企业微信」登录学习又用「微信」登录学习，企业人数将统计为2人。</div></div>)}}> <div className='lable-text'>
<div style={{display:"inline-block",position:"relative",top:"2px",marginLeft:"4px"}}><span><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1026" width="14" height="14"><path d="M512 68.266667c245.111467 0 443.733333 198.656 443.733333 443.733333s-198.621867 443.733333-443.733333 443.733333C266.922667 955.733333 68.266667 757.077333 68.266667 512S266.922667 68.266667 512 68.266667z m29.320533 596.548266c0.477867-27.989333 2.4576-48.196267 5.802667-60.654933 3.413333-12.458667 8.567467-23.4496 15.633067-33.0752 6.997333-9.557333 21.9136-24.507733 44.714666-44.714667 33.928533-30.037333 56.797867-55.637333 68.437334-76.5952a139.1616 139.1616 0 0 0 17.5104-68.846933c0-43.008-16.5888-79.701333-49.800534-110.011733-33.1776-30.378667-77.6192-45.533867-133.358933-45.533867-52.6336 0-94.958933 14.1312-126.976 42.3936-31.9488 28.2624-51.268267 68.949333-57.685333 122.094933l71.8848 8.533334c6.212267-39.6288 19.3536-68.778667 39.3216-87.483734 19.933867-18.6368 44.817067-27.989333 74.6496-27.989333 30.788267 0 56.900267 10.308267 78.165333 30.9248 21.265067 20.5824 31.880533 44.544 31.880533 71.748267 0 15.018667-3.618133 28.910933-10.922666 41.608533-7.168 12.731733-22.971733 29.764267-47.240534 51.131733-24.200533 21.367467-41.028267 37.649067-50.346666 48.810667-12.6976 15.291733-21.9136 30.481067-27.613867 45.533867-7.748267 19.933867-11.639467 43.690667-11.639467 71.133866 0 4.676267 0.1024 11.707733 0.341334 21.026134h67.242666z m8.192 140.3904v-79.735466h-79.701333v79.735466h79.701333z" fill="#bfbfbf" p-id="1027"></path></svg></span></div> {versionInfo.validStartTime}~{versionInfo.validEndTime}
</Tooltip> </div>
<div className="lable-text">{versionInfo.userNum}</div> </div>
<div className='widget' style={{ marginRight: '26px', marginBottom: '8px', width: '70px' }}>
<div className='lable'>剩余人数</div>
<div className='lable-text'>{versionInfo.surplusUserNum}</div>
</div>
<div className='widget' style={{ marginBottom: '8px' }}>
<div className='lable' style={{ display: 'inline-block' }}>
人数限制
</div>
<Tooltip
overlayStyle={{ maxWidth: '587px', width: '587px' }}
placement='topLeft'
arrowPointAtCenter
title={() => {
return (
<div>
<div>1、若员工/学员存在多个学院，企业人数只统计为1人；</div>
<div>2、若一个学员既用「企业微信」登录学习又用「微信」登录学习，企业人数将统计为2人。</div>
</div>
);
}}>
<div style={{ display: 'inline-block', position: 'relative', top: '2px', marginLeft: '4px' }}>
<span>
<svg viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1026' width='14' height='14'>
<path
d='M512 68.266667c245.111467 0 443.733333 198.656 443.733333 443.733333s-198.621867 443.733333-443.733333 443.733333C266.922667 955.733333 68.266667 757.077333 68.266667 512S266.922667 68.266667 512 68.266667z m29.320533 596.548266c0.477867-27.989333 2.4576-48.196267 5.802667-60.654933 3.413333-12.458667 8.567467-23.4496 15.633067-33.0752 6.997333-9.557333 21.9136-24.507733 44.714666-44.714667 33.928533-30.037333 56.797867-55.637333 68.437334-76.5952a139.1616 139.1616 0 0 0 17.5104-68.846933c0-43.008-16.5888-79.701333-49.800534-110.011733-33.1776-30.378667-77.6192-45.533867-133.358933-45.533867-52.6336 0-94.958933 14.1312-126.976 42.3936-31.9488 28.2624-51.268267 68.949333-57.685333 122.094933l71.8848 8.533334c6.212267-39.6288 19.3536-68.778667 39.3216-87.483734 19.933867-18.6368 44.817067-27.989333 74.6496-27.989333 30.788267 0 56.900267 10.308267 78.165333 30.9248 21.265067 20.5824 31.880533 44.544 31.880533 71.748267 0 15.018667-3.618133 28.910933-10.922666 41.608533-7.168 12.731733-22.971733 29.764267-47.240534 51.131733-24.200533 21.367467-41.028267 37.649067-50.346666 48.810667-12.6976 15.291733-21.9136 30.481067-27.613867 45.533867-7.748267 19.933867-11.639467 43.690667-11.639467 71.133866 0 4.676267 0.1024 11.707733 0.341334 21.026134h67.242666z m8.192 140.3904v-79.735466h-79.701333v79.735466h79.701333z'
fill='#bfbfbf'
p-id='1027'></path>
</svg>
</span>
</div>
</Tooltip>
<div className='lable-text'>{versionInfo.userNum}</div>
</div>
</div> </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 [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);
const rootSubmenuKeys = _.pluck(menuList, 'groupCode'); const rootSubmenuKeys = _.pluck(menuList, 'groupCode');
useEffect(() => { useEffect(() => {
const link = props.location.pathname; const link = props.location.pathname;
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);
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) {
setSelectKey(_item.groupCode + index + _index); setSelectKey(_item.groupCode + index + _index);
} }
}) });
} }
return item; return item;
}) });
}, [props.location.pathname]) }, [props.location.pathname]);
useEffect(()=> { useEffect(() => {
getTopLeftLogo() getTopLeftLogo();
},[]) }, []);
function getTopLeftLogo() { function getTopLeftLogo() {
if (User.getToken()) { if (User.getToken()) {
StoreService.getStoreDetail({storeId:User.getStoreId()}) StoreService.getStoreDetail({ storeId: User.getStoreId() }).then((res) => {
.then(res=> {
if (_.isEmpty(res.result.logo)) { if (_.isEmpty(res.result.logo)) {
setTopLogoUrl("https://image.xiaomaiketang.com/xm/fe4NCjr7XF.png") setTopLogoUrl('https://image.xiaomaiketang.com/xm/fe4NCjr7XF.png');
} else { } else {
setTopLogoUrl(res.result.logo) setTopLogoUrl(res.result.logo);
} }
});
})
} }
} }
function toggleMenu(item: any) { function toggleMenu(item: any) {
window.RCHistory.push(item.link) window.RCHistory.push(item.link);
if (!menuType) { if (!menuType) {
setOpenKeys([]) setOpenKeys([]);
} }
} }
function onOpenChange(key: Key[]) { function onOpenChange(key: Key[]) {
if (typeof key === "string") { if (typeof key === 'string') {
if (openKeys.includes(key)) { if (openKeys.includes(key)) {
setOpenKeys([]); setOpenKeys([]);
} else { } else {
...@@ -172,9 +201,9 @@ function Aside(props: any) { ...@@ -172,9 +201,9 @@ function Aside(props: any) {
function onOpenChangeForHover(key: Key[]) { function onOpenChangeForHover(key: Key[]) {
if (menuType) { if (menuType) {
return return;
} }
if (typeof key === "string") { if (typeof key === 'string') {
if (openKeys.includes(key)) { if (openKeys.includes(key)) {
setOpenKeys([]); setOpenKeys([]);
} else { } else {
...@@ -185,97 +214,81 @@ function Aside(props: any) { ...@@ -185,97 +214,81 @@ function Aside(props: any) {
function handleMenu() { function handleMenu() {
handleMenuType(); handleMenuType();
setCollapsed(!collapsed) setCollapsed(!collapsed);
} }
const openKeysConstrol = useMemo(() => {
return {
[menuType ? 'openKeys' : 'defaultOpenKeys']: openKeys,
};
}, [menuType, openKeys]);
return ( return (
<div <div id='left-container' className={menuType ? 'left-container' : 'left-container left-container-vertical'}>
id="left-container" <div className='top-ctrl'>
className={ <div className='topLogo'>{menuType && <img src={topLogoUrl} alt='' className='img1'></img>}</div>
menuType <div className='menu-type-icon' onClick={handleMenu}>
? "left-container" {menuType ? <span className='icon iconfont'>&#xe83d;</span> : <span className='icon iconfont'>&#xe615;</span>}
: "left-container left-container-vertical"
}
>
<div className="top-ctrl">
<div className="topLogo">
{ menuType && <img src={topLogoUrl} alt="" className="img1"></img> }
</div>
<div className="menu-type-icon" onClick={handleMenu}>
{menuType ? (
<span
className="icon iconfont"
>
&#xe83d;
</span>
) : (
<span
className="icon iconfont"
>
&#xe615;
</span>
)}
</div> </div>
</div> </div>
<div className="left">
<div className="nav">
<Menu <div className='left'>
style={menuType ? { minHeight: "100%", background: '#0E1935' }:{minHeight: "100%", background: '#0E1935',width:"56px" }} <div className='nav'>
selectedKeys={selectKey} <Menu
openKeys={menuType ? openKeys : []} style={menuType ? { minHeight: '100%', background: '#0E1935' } : { minHeight: '100%', background: '#0E1935', width: '56px' }}
onOpenChange={onOpenChange} selectedKeys={selectKey}
inlineCollapsed={collapsed} openKeys={menuType ? openKeys : []}
mode={menuType ? "inline" : "vertical"} onOpenChange={onOpenChange}
> inlineCollapsed={collapsed}
{ mode={menuType ? 'inline' : 'vertical'}>
menuList.map((item: any, index: any) => { {menuList.map((item: any, index: any) => {
if (ctx.xmState.storeUserPermissionList.indexOf(item.groupCode) === -1) { if (ctx.xmState.storeUserPermissionList.indexOf(item.groupCode) === -1) {
return null; return null;
} }
if (item.children) { if (item.children) {
return <SubMenu return (
key={item.groupCode} <SubMenu
style={{ marginTop: 0 }} key={item.groupCode}
icon={<img src={item.img} className="icon-img"></img>} style={{ marginTop: 0 }}
title={menuType ? <span>{item.groupName}</span> : ""} icon={<img src={item.img} className='icon-img'></img>}
onTitleClick={() => onOpenChange(item.groupCode)} title={menuType ? <span>{item.groupName}</span> : ''}
> onTitleClick={() => onOpenChange(item.groupCode)}>
{ {item.children.map((_item: any, _index: any) => {
item.children.map((_item: any, _index: any) => {
if (ctx.xmState.storeUserPermissionList.indexOf(_item.groupCode) === -1) { if (ctx.xmState.storeUserPermissionList.indexOf(_item.groupCode) === -1) {
return null; return null;
} }
return <Menu.Item onClick={() => { toggleMenu(_item) }} style={{ marginTop: 0 }} key={_item.groupCode + index + _index} > return (
<span className="name">{_item.groupName}</span> <Menu.Item
</Menu.Item> onClick={() => {
toggleMenu(_item);
}) }}
} style={{ marginTop: 0 }}
</SubMenu> key={_item.groupCode + index + _index}>
<span className='name'>{_item.groupName}</span>
</Menu.Item>
);
})}
</SubMenu>
);
} else { } else {
return <Menu.Item return (
onClick={() => { toggleMenu(item) }} <Menu.Item
key={item.groupCode} onClick={() => {
icon={<img src={selectKey === item.groupCode ? item.selectImg : item.img} className="icon-img"></img>} toggleMenu(item);
> }}
{menuType ? <span>{item.groupName}</span> : ""} key={item.groupCode}
</Menu.Item> icon={<img src={selectKey === item.groupCode ? item.selectImg : item.img} className='icon-img'></img>}>
{menuType ? <span>{item.groupName}</span> : ''}
</Menu.Item>
);
} }
}) })}
} </Menu>
</Menu> </div>
</div>
</div> </div>
{ {menuType ? <VersionPanel /> : ''}
menuType ? <VersionPanel /> : ""
}
</div> </div>
); );
} }
export default withRouter(Aside); export default withRouter(Aside);
\ 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