Skip to content

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

feat:课程改造培训计划部分更改

parent 62d535e8
Showing with 802 additions and 770 deletions
src/modules/course-manage/components/GraphicsEditor.jsx
/*
* @Author: yuananting
* @Date: 2021-07-05 10:47:19
* @LastEditors: yuananting
* @LastEditTime: 2021-07-05 11:00:28
* @Description: 描述一下咯
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import { message } from 'antd';
import React from 'react';
import E from 'wangeditor';
......@@ -9,25 +18,23 @@ const { BtnMenu } = E;
class GraphicsEditor extends React.Component {
constructor(props) {
super(props)
super(props);
this.state = {
editorId: window.random_string(16),
textLength: 0,
showSelectImageModal: false,
showSelectVideoModal: false,
diskList: [],
}
};
this.editorInt = null;
}
componentDidMount() {
this.renderEditor()
this.renderEditor();
this.resetIndex(true);
this.initBus();
}
componentWillUnmount() {
this.resetIndex();
this.removeBus();
......@@ -38,7 +45,7 @@ class GraphicsEditor extends React.Component {
const leftDom = document.querySelector('.left-container');
// topDom.style.zIndex = bool ? 'auto' : 112;
// leftDom.style.zIndex = bool ? 'auto' : 2;
}
};
renderEditor() {
const { editorId } = this.state;
......@@ -50,17 +57,15 @@ class GraphicsEditor extends React.Component {
`<div class="w-e-menu" data-title="图片">
<i class="w-e-icon-image"></i>
</div>`
)
super($elem, editor)
);
super($elem, editor);
}
// 菜单点击事件
clickHandler() {
Bus.trigger(`graphicsEditorImage${isIntro ? '' : 'Content'}`)
Bus.trigger(`graphicsEditorImage${isIntro ? '' : 'Content'}`);
}
tryChangeActive() {
}
tryChangeActive() {}
}
class VideoMenu extends BtnMenu {
......@@ -70,97 +75,95 @@ class GraphicsEditor extends React.Component {
`<div class="w-e-menu" data-title="视频">
<i class="w-e-icon-play"></i>
</div>`
)
super($elem, editor)
);
super($elem, editor);
}
// 菜单点击事件
clickHandler() {
Bus.trigger('graphicsEditorVideo')
Bus.trigger('graphicsEditorVideo');
}
tryChangeActive() {
}
tryChangeActive() {}
}
this.editorInt = new E(`#editor${editorId}`);
this.editorInt.config.focus = false;
this.editorInt.config.showFullScreen = !isIntro
this.editorInt.config.showFullScreen = !isIntro;
this.editorInt.menus.extend('xmimage', ImageMenu);
!isIntro && this.editorInt.menus.extend('xmvideo', VideoMenu);
this.editorInt.config.menus = isIntro ?
[
'head',
'bold',
'fontSize',
'fontName',
'italic',
'underline',
'strikeThrough',
'foreColor',
'backColor',
'list',
'justify',
'emoticon',
'xmimage',
]
this.editorInt.config.menus = isIntro
? ['head', 'bold', 'fontSize', 'fontName', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'list', 'justify', 'emoticon', 'xmimage']
: [
'head',
'bold',
'fontSize',
'fontName',
'italic',
'underline',
'strikeThrough',
'indent',
'lineHeight',
'foreColor',
'backColor',
'link',
'list',
'todo',
'justify',
'quote',
'emoticon',
'xmimage',
'xmvideo',
'table',
'splitLine',
'undo',
'redo',
];
'head',
'bold',
'fontSize',
'fontName',
'italic',
'underline',
'strikeThrough',
'indent',
'lineHeight',
'foreColor',
'backColor',
'link',
'list',
'todo',
'justify',
'quote',
'emoticon',
'xmimage',
'xmvideo',
'table',
'splitLine',
'undo',
'redo',
];
this.editorInt.config.emotions = [
{
title: 'emoji',
type: 'emoji',
content: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '😊', '🙂', '🙃', '😉', '😓', '😅', '😪', '🤔', '😬', '🤐']
}
]
content: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '😊', '🙂', '🙃', '😉', '😓', '😅', '😪', '🤔', '😬', '🤐'],
},
];
this.editorInt.config.zIndex = 1;
this.editorInt.config.pasteFilterStyle = false;
this.editorInt.config.pasteIgnoreImg = true;
// 自定义处理粘贴的文本内容
this.editorInt.config.pasteTextHandle = function (content) {
if (content == '' && !content) return ''
var str = content
str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')
str = str.replace(/[ | ]*\n/g, '\n')
str = str.replace(/\&nbsp\;/ig, ' ')
return str
}
this.editorInt.config.pasteTextHandle = (content) => {
if (content == '' && !content) return '';
var str1 = content; // 去除所有特殊字符
str1 = str1.replace(/<xml>[\s\S]*?<\/xml>/gi, '');
str1 = str1.replace(/<style>[\s\S]*?<\/style>/gi, '');
str1 = str1.replace(/<\/?[^>]*>/g, '');
str1 = str1.replace(/[ | ]*\n/g, '\n');
str1 = str1.replace(/\&nbsp\;/gi, ' ');
str1 = str1.replace(/[\r\n]/g, '');
str1 = str1.replace(/<\/?a.*?>/g, '');
var str2 = content; // 保留空格和换行的其他字符
str2 = str2.replace(/<xml>[\s\S]*?<\/xml>/gi, '');
str2 = str2.replace(/<style>[\s\S]*?<\/style>/gi, '');
str2 = str2.replace(/<\/?a.*?>/g, '');
const videoCount = ((content || '').match(/<iframe/g) || []).length;
const imageCount = ((content || '').match(/<img/g) || []).length;
const textLength = this.editorInt.txt.text().length + str1.length + videoCount + imageCount;
if (textLength > maxLimit) {
message.warning(`内容过长，不能超过${maxLimit}字`);
}
return str2;
};
this.editorInt.config.onchange = (html) => {
const videoCount = ((html || '').match(/<iframe/g) || []).length;
const imageCount = ((html || '').match(/<img/g) || []).length;
const textLength = this.editorInt.txt.text().replace(/\&nbsp\;/ig, ' ').length + videoCount + imageCount;
const textLength = this.editorInt.txt.text().replace(/\&nbsp\;/gi, ' ').length + videoCount + imageCount;
this.setState({ textLength }, () => {
if (textLength > maxLimit) {
// message.warning('超过字数限定');
}
onChange(html, this.state.textLength);
})
}
});
};
this.editorInt.create();
this.editorInt.txt.html(detail.content);
}
......@@ -170,89 +173,91 @@ class GraphicsEditor extends React.Component {
const { ossUrl } = file || {};
if (!ossUrl) return null;
this.setState({
showSelectVideoModal: false
})
showSelectVideoModal: false,
});
const { detail } = this.props;
this.editorInt && this.editorInt.txt.html(`${detail.content}<p style="width: 100%;padding-top: 56.25%;position: relative;"><iframe style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;" src="${ossUrl}"></iframe><br/></p><p><br/></p>`)
}
this.editorInt &&
this.editorInt.txt.html(
`${detail.content}<p style="width: 100%;padding-top: 56.25%;position: relative;"><iframe style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;" src="${ossUrl}"></iframe><br/></p><p><br/></p>`
);
};
handleSelectImage = (file) => {
const { ossUrl } = file || {};
if (!ossUrl) return null;
this.setState({
showSelectImageModal: false
})
showSelectImageModal: false,
});
const { detail } = this.props;
this.editorInt && this.editorInt.txt.html(`${detail.content}<p><img style="max-width: 100%;" src="${ossUrl}" /><br/><p>`)
}
this.editorInt && this.editorInt.txt.html(`${detail.content}<p><img style="max-width: 100%;" src="${ossUrl}" /><br/><p>`);
};
initBus = () => {
const { isIntro } = this.props;
Bus.bind(`graphicsEditorImage${isIntro ? '' : 'Content'}`, this.uploadImage)
!isIntro && Bus.bind('graphicsEditorVideo', this.uploadVideo)
}
Bus.bind(`graphicsEditorImage${isIntro ? '' : 'Content'}`, this.uploadImage);
!isIntro && Bus.bind('graphicsEditorVideo', this.uploadVideo);
};
removeBus = () => {
const { isIntro } = this.props;
Bus.unbind(`graphicsEditorImage${isIntro ? '' : 'Content'}`, this.uploadImage)
!isIntro && Bus.unbind('graphicsEditorVideo', this.uploadVideo)
}
Bus.unbind(`graphicsEditorImage${isIntro ? '' : 'Content'}`, this.uploadImage);
!isIntro && Bus.unbind('graphicsEditorVideo', this.uploadVideo);
};
uploadImage = () => {
this.setState({ showSelectImageModal: true })
}
this.setState({ showSelectImageModal: true });
};
uploadVideo = () => {
this.setState({ showSelectVideoModal: true })
}
this.setState({ showSelectVideoModal: true });
};
render() {
const {
editorId,
textLength,
showSelectImageModal,
showSelectVideoModal,
diskList,
} = this.state;
const { limitLength = 1000, isIntro, maxLimit } = this.props;
return <div className={`graphics-editor-container${isIntro ? ' introduce' : ''} ${(textLength > maxLimit)&& 'warning'}`}>
<div className="editor-box" id={`editor${editorId}`} ></div>
<div className="editor-tips">( {(textLength > maxLimit) ? <span style={{ color: 'red' }} >{textLength}</span> : textLength}/{maxLimit || 1000})</div>
{showSelectVideoModal &&
<SelectPrepareFileModal
operateType="select"
selectTypeList={['MP4']}
accept="video/mp4"
confirm={{
title: '文件过大，无法上传',
content: '为保障学员的观看体验，上传的图文大小不能超过2G',
}}
tooltip={'格式支持mp4，大小不超过2G'}
isOpen={showSelectVideoModal}
diskList={diskList}
addVideo={true}
onClose={() => {
this.setState({ showSelectVideoModal: false })
}}
onSelect={this.handleSelectVideo}
/>
}
{showSelectImageModal &&
<SelectPrepareFileModal
key="basic"
operateType="select"
multiple={false}
accept="image/jpeg,image/png,image/jpg"
selectTypeList={['JPG', 'JPEG', 'PNG']}
tooltip='支持文件类型：jpg、jpeg、png'
isOpen={showSelectImageModal}
onClose={() => {
this.setState({ showSelectImageModal: false })
}}
onSelect={this.handleSelectImage}
/>
}
</div>
const { editorId, textLength, showSelectImageModal, showSelectVideoModal, diskList } = this.state;
const { isIntro, maxLimit } = this.props;
return (
<div className={`graphics-editor-container${isIntro ? ' introduce' : ''} ${textLength > maxLimit && 'warning'}`}>
<div className='editor-box' id={`editor${editorId}`}></div>
<div className='editor-tips'>
({textLength > maxLimit ? <span style={{ color: 'red' }}>{textLength}</span> : textLength}/{maxLimit || 1000})
</div>
{textLength > maxLimit && <div className='editor-warning'>最多只能输入{maxLimit || 1000}字</div>}
{showSelectVideoModal && (
<SelectPrepareFileModal
operateType='select'
selectTypeList={['MP4']}
accept='video/mp4'
confirm={{
title: '文件过大，无法上传',
content: '为保障学员的观看体验，上传的图文大小不能超过2G',
}}
tooltip={'格式支持mp4，大小不超过2G'}
isOpen={showSelectVideoModal}
diskList={diskList}
addVideo={true}
onClose={() => {
this.setState({ showSelectVideoModal: false });
}}
onSelect={this.handleSelectVideo}
/>
)}
{showSelectImageModal && (
<SelectPrepareFileModal
key='basic'
operateType='select'
multiple={false}
accept='image/jpeg,image/png,image/jpg'
selectTypeList={['JPG', 'JPEG', 'PNG']}
tooltip='支持文件类型：jpg、jpeg、png'
isOpen={showSelectImageModal}
onClose={() => {
this.setState({ showSelectImageModal: false });
}}
onSelect={this.handleSelectImage}
/>
)}
</div>
);
}
}
......
src/modules/course-manage/components/GraphicsEditor.less
.graphics-editor-container {
border: 1px solid #E8E8E8;
border: 1px solid #e8e8e8;
border-radius: 4px;
width: 702px;
height: 510px;
......@@ -23,7 +23,7 @@
.w-e-toolbar {
background-color: #fff !important;
border: none !important;
border-bottom: 1px solid #E8E8E8 !important;
border-bottom: 1px solid #e8e8e8 !important;
}
.w-e-text-container {
......@@ -38,6 +38,14 @@
color: #666;
z-index: 1;
}
.editor-warning {
position: absolute;
right: 0;
top: 205px;
color: red;
}
.w-e-full-screen-editor {
.w-e-text-container {
height: ~'calc(100vh - 109px)' !important;
......@@ -50,7 +58,7 @@
}
}
&.warning{
&.warning {
border-color: red;
}
}
\ No newline at end of file
}
src/modules/plan-manage/components/BasicInfo.jsx
/*
* @Author: yuananting
* @Date: 2021-07-05 10:48:08
* @LastEditors: yuananting
* @LastEditTime: 2021-07-05 11:01:19
* @Description: 描述一下咯
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
/*
* @Author: zhangleyuan
* @Date: 2021-02-20 16:45:51
* @LastEditors: fusanqiasng
* @LastEditTime: 2021-06-01 15:20:33
* @LastEditors: yuananting
* @LastEditTime: 2021-07-02 17:16:06
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -12,7 +21,7 @@ import { withRouter } from 'react-router-dom';
import SelectOperatorModal from '../modal/SelectOperatorModal';
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import Upload from '@/core/upload';
// import PhotoClip from 'photoclip'
import GraphicsEditor from '@/modules/course-manage/components/GraphicsEditor';
import './BasicInfo.less';
const { TextArea } = Input;
......@@ -202,10 +211,14 @@ class BasicInfo extends React.Component {
this.props.onChange(field, _percentCompleteLive);
};
changeIntro = (value) => {
this.props.onChange('introduce', value);
};
render() {
const { operatorModalVisible, showSelectFileModal, visible, hasImgReady, cutImageBlob } = this.state;
const { data } = this.props;
const { planName, coverUrl, instro, enableState, operateType, selectOperatorList, percentCompleteLive, percentCompleteVideo, percentCompletePicture } =
const { planName, coverUrl, introduce, enableState, operateType, selectOperatorList, percentCompleteLive, percentCompleteVideo, percentCompletePicture } =
data;
// 当前是否使用的是默认图片
const isDefaultCover = coverUrl === defaultCover;
......@@ -226,10 +239,6 @@ class BasicInfo extends React.Component {
<div className='cover'>
<span className='label'>封面图：</span>
<div className='cover__wrap'>
<div className='img-content'>
{isDefaultCover && <span className='tag'>默认图</span>}
<img src={coverUrl} width='690' alt='' />
</div>
<div className='opt-btns'>
<Button
onClick={() => {
......@@ -244,17 +253,32 @@ class BasicInfo extends React.Component {
</span>
<div className='tips'>建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
</div>
<div className='img-content'>
{isDefaultCover && <span className='tag'>默认图</span>}
<img src={coverUrl} width='690' alt='' />
</div>
</div>
</div>
<div className='introduction'>
<span className='label'>简介：</span>
<TextArea
<span className='label'>课程简介：</span>
{/* <TextArea
placeholder='请输入培训计划简介'
maxLength={200}
style={{ width: '552px', height: '110px' }}
className='instro-textarea'
value={instro}
onChange={(e) => this.props.onChange('instro', e.target.value)}
/> */}
<GraphicsEditor
id='intro'
isIntro={true}
maxLimit={1000}
detail={{
content: introduce,
}}
onChange={(val) => {
this.changeIntro(val);
}}
/>
</div>
<div className='wether-use'>
......@@ -270,8 +294,7 @@ class BasicInfo extends React.Component {
</div>
<div>
<div className='instro-text'>
<div>开启：此培训计划可以分享给学员进行学习</div>
<div>关闭：此培训计划暂不可分享给学员进行学习，后续可开启</div>
<div>{enableState === 'YES' ? '已开启，培训计划可正常分享给学员学习' : '已关闭，培训计划暂不进行分享和学习'}</div>
</div>
</div>
</div>
......@@ -291,7 +314,7 @@ class BasicInfo extends React.Component {
onChange={(e) => {
this.props.onChange('operateType', e.target.value);
}}>
<Row style={{ marginBottom: '5px' }}>
<Row style={{ marginBottom: '16px' }}>
<Col span={24}>
<Radio value='All_Operate'>
所有运营师
......@@ -317,7 +340,7 @@ class BasicInfo extends React.Component {
选择运营师
</Button>
<span>
已选择<span>{selectOperatorList.length}</span>名运营师
已选择 <span style={{ color: '#2966FF' }}>{selectOperatorList.length}</span> 名运营师
</span>
</div>
)}
......@@ -347,7 +370,7 @@ class BasicInfo extends React.Component {
<div className='live-standard-info'>
<span className='icon iconfont'>&#xe864;</span>
<span className='instro'>
线上课单个课程，学员学习进度达到
线上课单个课节，学员学习进度达到
<Input
width='40'
value={percentCompleteVideo}
......@@ -357,7 +380,7 @@ class BasicInfo extends React.Component {
onBlur={(e) => this.percentCompleteBlur(e, 'percentCompleteVideo')}
className='input-box'
/>
%，即视为"已完成"学习
%，即课节视为"已完成"学习
</span>
</div>
<div className='live-standard-info'>
......
src/modules/plan-manage/components/BasicInfo.less
.plan-basic-info{
.label {
width: 110px;
text-align: right;
display:inline-block;
font-size:14px;
color:#666;
.require {
color: #EC4B35;
}
.iconfont{
font-size:14px;
color:#BFBFBF;
.plan-basic-info {
.label {
width: 110px;
text-align: right;
display: inline-block;
font-size: 14px;
color: #666;
.require {
color: #ec4b35;
}
.iconfont {
font-size: 14px;
color: #bfbfbf;
}
}
.cover {
display: flex;
margin-top: 24px;
&__wrap {
position: relative;
.tag {
border-radius: 2px;
background: #d6d6d6;
font-size: 12px;
height: 18px;
width: 52px;
text-align: center;
color: #fff;
position: absolute;
top: 8px;
left: 8px;
}
}
.cover {
display: flex;
margin-top: 16px;
&__wrap {
position: relative;
display: flex;
.tag {
border-radius: 2px;
background: #D6D6D6;
font-size: 12px;
height: 18px;
width: 52px;
text-align: center;
color: #FFF;
position: absolute;
top: 8px;
left: 8px;
}
}
.img-content {
margin-right: 20px;
width: 299px;
height: 169px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.opt-btns{
.default-btn {
margin:0 8px;
color: #2966FF;
cursor: pointer;
&.disabled {
color: #CCC;
cursor: not-allowed;
}
}
.tips{
margin-top:8px;
font-size:14px;
color:#999;
}
}
.img-content {
position: relative;
margin-top: 8px;
width: 299px;
height: 169px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.introduction{
margin-top:16px;
.instro-textarea{
vertical-align: top;
.opt-btns {
.default-btn {
margin: 0 8px;
color: #2966ff;
cursor: pointer;
&.disabled {
color: #ccc;
cursor: not-allowed;
}
}
.tips {
margin-top: 8px;
font-size: 14px;
color: #999;
}
}
.wether-use{
display:flex;
margin-top:16px;
.instro-text{
color:#999;
margin-left:12px;
}
.content{
display:flex;
}
}
.introduction {
display: flex;
margin-top: 24px;
.instro-textarea {
vertical-align: top;
}
.view-range{
display:flex;
margin-top:16px;
.label{
margin-top:2px;
}
.instro-text{
color:#999;
margin-left:12px;
}
.choose-business{
margin-top:16px;
}
.playback__text{
margin-left:12px;
color:#999999;
}
}
.wether-use {
display: flex;
margin-top: 34px;
.instro-text {
color: #999;
margin-left: 12px;
}
.done-standard{
.content {
display: flex;
margin-top:22px;
.standard-label{
margin-top:3px;
}
.live-standard-info{
margin-bottom:10px;
}
input{
display:inline-block;
width:90px;
height:32px;
}
.icon{
color:#A0A0A0;
font-size:14px;
margin-right:4px;
}
.instro{
color:#333333;
font-size:14px;
}
.input-box{
width: 60px;
height: 32px;
border-radius: 4px;
border: 1px solid #E8E8E8;
color:#333333;
font-size:14px;
margin:0 2px;
}
}
.view-range {
display: flex;
margin-top: 24px;
.label {
margin-top: 2px;
}
.instro-text {
color: #999;
margin-left: 12px;
}
.choose-business {
margin-top: 12px;
.ant-btn {
margin-right: 12px;
}
}
.playback__text {
margin-left: 12px;
color: #999999;
}
}
.done-standard {
display: flex;
margin-top: 22px;
.standard-label {
margin-top: 3px;
}
.live-standard-info {
margin-bottom: 10px;
}
input {
display: inline-block;
width: 90px;
height: 32px;
}
.icon {
color: #a0a0a0;
font-size: 14px;
margin-right: 4px;
}
.instro {
color: #333333;
font-size: 14px;
}
.input-box {
width: 60px;
height: 32px;
border-radius: 4px;
border: 1px solid #e8e8e8;
color: #333333;
font-size: 14px;
margin: 0 2px;
}
}
}
src/modules/plan-manage/components/TrainingTask.jsx
/*
* @Author: yuananting
* @Date: 2021-07-05 10:49:01
* @LastEditors: yuananting
* @LastEditTime: 2021-07-05 11:02:04
* @Description: 描述一下咯
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
/*
* @Author: zhangleyuan
* @Date: 2021-02-20 16:45:51
* @LastEditors: fusanqiasng
* @LastEditTime: 2021-05-24 15:15:06
* @LastEditors: yuananting
* @LastEditTime: 2021-07-01 17:16:50
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from 'react'
import { Input, Form, Modal } from 'antd'
import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc'
import React from 'react';
import { Input, Form, Modal } from 'antd';
import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';
import arrayMove from 'array-move'
import RelatedCourseModal from '../modal/relatedCourseModal'
import { withRouter } from 'react-router-dom'
import './TrainingTask.less'
import arrayMove from 'array-move';
import RelatedCourseModal from '../modal/relatedCourseModal';
import { withRouter } from 'react-router-dom';
import './TrainingTask.less';
const { confirm } = Modal
const { confirm } = Modal;
const CourseType = {
LIVE: {
text: '直播课'
text: '直播课',
},
VOICE: {
text: '线上课'
text: '线上课',
},
RECORD: {
text: '录播课'
text: '录播课',
},
PICTURE: {
text: '图文课'
}
}
text: '图文课',
},
};
const courseStateShow = {
UN_START: {
title: '待开播'
title: '待开播',
},
STARTING: {
title: '直播中'
title: '直播中',
},
FINISH: {
title: '回放'
title: '回放',
},
EXPIRED: {
title: '未成功开课'
}
}
title: '未成功开课',
},
};
const DragHandle = sortableHandle(() => (
<span className='operate__item'>
<span className='icon iconfont'>&#xe7cd;</span>
<span className='text'>移动</span>
</span>
))
));
const SortableTaskItem = sortableElement((props) => <div {...props}>{props.taskitem}</div>)
const SortableTaskContainer = sortableContainer((props) => <div {...props}></div>)
const SortableTaskItem = sortableElement((props) => <div {...props}>{props.taskitem}</div>);
const SortableTaskContainer = sortableContainer((props) => <div {...props}></div>);
const SortableCourseItem = sortableElement((props) => <div {...props}>{props.courseitem}</div>)
const SortableCourseContainer = sortableContainer((props) => <div {...props}></div>)
const SortableCourseItem = sortableElement((props) => <div {...props}>{props.courseitem}</div>);
const SortableCourseContainer = sortableContainer((props) => <div {...props}></div>);
class TrainingTask extends React.Component {
constructor(props) {
super(props)
super(props);
this.state = {
dataSource: this.props.data,
selectedTaskIndex: 0,
relatedCourseModalVisible: false
}
relatedCourseModalVisible: false,
};
}
componentWillMount() {}
componentWillReceiveProps(nextProps) {}
onTaskSortEnd = ({ oldIndex, newIndex }) => {
const { dataSource } = this.state
const { dataSource } = this.state;
if (oldIndex !== newIndex) {
const newData = arrayMove([].concat(dataSource), oldIndex, newIndex).filter((el) => !!el)
const newData = arrayMove([].concat(dataSource), oldIndex, newIndex).filter((el) => !!el);
this.setState(
{
dataSource: newData
dataSource: newData,
},
() => {
this.props.onChange(newData)
this.props.onChange(newData);
}
)
);
}
}
};
onCourseSortEnd = ({ oldIndex, newIndex }, parentIndex) => {
const { dataSource } = this.state
const { dataSource } = this.state;
const _dataSource = [...dataSource]
const _dataSource = [...dataSource];
if (oldIndex !== newIndex) {
_dataSource[parentIndex].courseList = arrayMove([].concat(dataSource[parentIndex].courseList), oldIndex, newIndex).filter((el) => !!el)
_dataSource[parentIndex].courseList = arrayMove([].concat(dataSource[parentIndex].courseList), oldIndex, newIndex).filter((el) => !!el);
this.setState(
{
dataSource: _dataSource
dataSource: _dataSource,
},
() => {
this.props.onChange(_dataSource)
this.props.onChange(_dataSource);
}
)
);
}
}
};
addTask = () => {
const { dataSource } = this.state
const { dataSource } = this.state;
const taskObj = {
taskName: '',
index: dataSource.length,
type: 'input',
open: true,
courseList: []
}
const newData = [...dataSource, taskObj]
courseList: [],
};
const newData = [...dataSource, taskObj];
this.setState(
{
dataSource: newData
dataSource: newData,
},
() => {
this.props.onChange(newData)
this.props.onChange(newData);
}
)
}
);
};
handleRenameTaskName = (e, record) => {
const { value } = e.target
const { dataSource } = this.state
record.taskName = value
const { value } = e.target;
const { dataSource } = this.state;
record.taskName = value;
this.setState(
{
dataSource
dataSource,
},
() => {
this.props.onChange(dataSource)
this.props.onChange(dataSource);
}
)
}
);
};
handleTaskNameBlur = (e, record) => {
const { value } = e.target
const { dataSource } = this.state
let input = /^[\s]*$/
const { value } = e.target;
const { dataSource } = this.state;
let input = /^[\s]*$/;
if (value && !input.test(value)) {
record.type = 'text'
record.type = 'text';
this.setState(
{
dataSource
dataSource,
},
() => {
this.props.onChange(dataSource)
this.props.onChange(dataSource);
}
)
);
}
}
};
handleRenameCourseName = (e, record) => {
const { value } = e.target
const { dataSource } = this.state
record.courseName = value
const { value } = e.target;
const { dataSource } = this.state;
record.courseName = value;
this.setState(
{
dataSource
dataSource,
},
() => {
this.props.onChange(dataSource)
this.props.onChange(dataSource);
}
)
}
);
};
handleCourseNameBlur = (e, record) => {
const { value } = e.target
const { dataSource } = this.state
let input = /^[\s]*$/
const { value } = e.target;
const { dataSource } = this.state;
let input = /^[\s]*$/;
if (value && !input.test(value)) {
record.type = 'text'
record.type = 'text';
this.setState(
{
dataSource
dataSource,
},
() => {
this.props.onChange(dataSource)
this.props.onChange(dataSource);
}
)
);
}
}
};
handleDeleteTask = (index) => {
return confirm({
title: '删除任务',
......@@ -191,23 +200,23 @@ class TrainingTask extends React.Component {
okType: 'danger',
cancelText: '取消',
onOk: () => {
this.handleConfirmDeleteTask(index)
}
})
}
this.handleConfirmDeleteTask(index);
},
});
};
handleConfirmDeleteTask = (index) => {
const { dataSource } = this.state
const newData = [...dataSource]
newData.splice(index, 1)
const { dataSource } = this.state;
const newData = [...dataSource];
newData.splice(index, 1);
this.setState(
{
dataSource: newData
dataSource: newData,
},
() => {
this.props.onChange(newData)
this.props.onChange(newData);
}
)
}
);
};
handleDeleteCourse = (parentIndex, index) => {
return confirm({
......@@ -218,82 +227,82 @@ class TrainingTask extends React.Component {
okType: 'danger',
cancelText: '取消',
onOk: () => {
this.handleConfirmDeleteCourse(parentIndex, index)
}
})
}
this.handleConfirmDeleteCourse(parentIndex, index);
},
});
};
handleConfirmDeleteCourse = (parentIndex, index) => {
const { dataSource } = this.state
const newData = [...dataSource]
const selectData = [...newData[parentIndex].courseList]
selectData.splice(index, 1)
newData[parentIndex].courseList = selectData
const { dataSource } = this.state;
const newData = [...dataSource];
const selectData = [...newData[parentIndex].courseList];
selectData.splice(index, 1);
newData[parentIndex].courseList = selectData;
this.setState(
{
dataSource: newData
dataSource: newData,
},
() => {
this.props.onChange(newData)
this.props.onChange(newData);
}
)
}
);
};
showRelatedCourseModal = (index) => {
this.setState({
selectedTaskIndex: index,
relatedCourseModalVisible: true
})
}
relatedCourseModalVisible: true,
});
};
closeRelatedCourseModal = (index) => {
this.setState({
relatedCourseModalVisible: false
})
}
relatedCourseModalVisible: false,
});
};
confirmSelectCourse = (selectList) => {
console.log('selectList', selectList)
const { selectedTaskIndex } = this.state
const { dataSource } = this.state
const newData = [...dataSource]
const selectData = [...newData[selectedTaskIndex].courseList]
const _selectData = [...selectData, ...selectList]
newData[selectedTaskIndex].courseList = _selectData
console.log('selectList', selectList);
const { selectedTaskIndex } = this.state;
const { dataSource } = this.state;
const newData = [...dataSource];
const selectData = [...newData[selectedTaskIndex].courseList];
const _selectData = [...selectData, ...selectList];
newData[selectedTaskIndex].courseList = _selectData;
this.setState(
{
relatedCourseModalVisible: false,
dataSource: newData
dataSource: newData,
},
() => {
this.props.onChange(newData)
this.props.onChange(newData);
}
)
}
);
};
openOrCloseTask = (index) => {
const { dataSource } = this.state
const newData = [...dataSource]
newData[index].open = !newData[index].open
const { dataSource } = this.state;
const newData = [...dataSource];
newData[index].open = !newData[index].open;
this.setState(
{
dataSource: newData
dataSource: newData,
},
() => {
this.props.onChange(newData)
this.props.onChange(newData);
}
)
}
);
};
handleValidatorTaskName = (rule, value) => {
let input = /^[\s]*$/
let input = /^[\s]*$/;
if (input.test(value) || !value) {
return Promise.reject(new Error('请输入任务名称'))
return Promise.reject(new Error('请输入任务名称'));
}
return Promise.resolve()
}
return Promise.resolve();
};
handleValidatorCourseName = (rule, value) => {
let input = /^[\s]*$/
let input = /^[\s]*$/;
if (input.test(value) || !value) {
return Promise.reject(new Error('请输入课程名称'))
return Promise.reject(new Error('请输入课程名称'));
}
return Promise.resolve()
}
return Promise.resolve();
};
renderTaskItem = (record, index) => {
return (
......@@ -314,8 +323,8 @@ class TrainingTask extends React.Component {
name={['taskName']}
rules={[
{
validator: (rule, value) => this.handleValidatorTaskName(rule, value)
}
validator: (rule, value) => this.handleValidatorTaskName(rule, value),
},
]}>
<Input
className='task-name-input'
......@@ -323,10 +332,10 @@ class TrainingTask extends React.Component {
placeholder='请输入任务名称（20字以内）'
maxLength={20}
onChange={(e) => {
this.handleRenameTaskName(e, record)
this.handleRenameTaskName(e, record);
}}
onBlur={(e) => {
this.handleTaskNameBlur(e, record)
this.handleTaskNameBlur(e, record);
}}
/>
</Form.Item>
......@@ -346,9 +355,9 @@ class TrainingTask extends React.Component {
<span
className='operate__item'
onClick={() => {
const { dataSource } = this.state
record.type = 'input'
this.setState({ dataSource })
const { dataSource } = this.state;
record.type = 'input';
this.setState({ dataSource });
}}>
<span className='icon iconfont'>&#xe6f5;</span>
<span className='text'>重命名</span>
......@@ -356,7 +365,7 @@ class TrainingTask extends React.Component {
<span
className='operate__item'
onClick={() => {
this.handleDeleteTask(index)
this.handleDeleteTask(index);
}}>
<span className='icon iconfont'>&#xe6f6;</span>
<span className='text'>删除</span>
......@@ -377,7 +386,7 @@ class TrainingTask extends React.Component {
<span
className='add-course-btn-disabled'
onClick={() => {
this.showRelatedCourseModal(index)
this.showRelatedCourseModal(index);
}}>
<span>+</span>
<span>关联课程</span>
......@@ -387,7 +396,7 @@ class TrainingTask extends React.Component {
<span
className='add-course-btn'
onClick={() => {
this.showRelatedCourseModal(index)
this.showRelatedCourseModal(index);
}}>
<span>+</span>
<span>关联课程</span>
......@@ -398,9 +407,10 @@ class TrainingTask extends React.Component {
</div>
)}
</div>
)
}
);
};
renderCourseItem = (record, index, parentIndex) => {
console.log(record);
return (
<div className='plan-course-sort-item'>
<div className='course-info'>
......@@ -414,8 +424,8 @@ class TrainingTask extends React.Component {
name={['courseName']}
rules={[
{
validator: (rule, value) => this.handleValidatorCourseName(rule, value)
}
validator: (rule, value) => this.handleValidatorCourseName(rule, value),
},
]}>
<Input
className='course-name-input'
......@@ -423,10 +433,10 @@ class TrainingTask extends React.Component {
placeholder='请输入课程名称（40字以内）'
maxLength={40}
onChange={(e) => {
this.handleRenameCourseName(e, record)
this.handleRenameCourseName(e, record);
}}
onBlur={(e) => {
this.handleCourseNameBlur(e, record)
this.handleCourseNameBlur(e, record);
}}
/>
</Form.Item>
......@@ -441,6 +451,7 @@ class TrainingTask extends React.Component {
{record.courseState === 'EXPIRED' && <span className='icon iconfont tip'>&#xe834;</span>}
{record.courseType === 'LIVE' && <span className='course-state'>{courseStateShow[record.courseState].title}</span>}
{record.courseType === 'VOICE' && <span>（共{record.courseChapterNum || 1}小节）</span>}
</div>
<div className='course-operate'>
<DragHandle />
......@@ -448,18 +459,18 @@ class TrainingTask extends React.Component {
<span
className='operate__item'
onClick={() => {
this.handleDeleteCourse(parentIndex, index)
this.handleDeleteCourse(parentIndex, index);
}}>
<span className='icon iconfont'>&#xe6f6;</span>
<span className='text'>删除</span>
</span>
</div>
</div>
)
}
);
};
render() {
const { dataSource, selectedTaskIndex, relatedCourseModalVisible } = this.state
console.log('dataSource', dataSource)
const { dataSource, selectedTaskIndex, relatedCourseModalVisible } = this.state;
console.log('dataSource', dataSource);
return (
<div className='training-task'>
<SortableTaskContainer useDragHandle disableAutoscroll helperClass='row-dragging' onSortEnd={this.onTaskSortEnd} className='plan-task-sort-container'>
......@@ -494,8 +505,8 @@ class TrainingTask extends React.Component {
/>
)}
</div>
)
);
}
}
export default withRouter(TrainingTask)
export default withRouter(TrainingTask);
src/modules/plan-manage/modal/UserLearnDetailModal.jsx
/*
* @Author: yuananting
* @Date: 2021-07-05 10:50:30
* @LastEditors: yuananting
* @LastEditTime: 2021-07-05 11:05:31
* @Description: 描述一下咯
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import {Table, Modal,Input} from 'antd';
import { PageControl } from "@/components";
import PlanService from '@/domains/plan-domain/planService'
import User from '@/common/js/user'
import { Table, Modal, Input } from 'antd';
import PlanService from '@/domains/plan-domain/planService';
import User from '@/common/js/user';
import './UserLearnDetailModal.less';
import _ from "underscore";
const { Search } = Input;
import _ from 'underscore';
const defaultCover = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
const CourseType = {
LIVE: {
text: "直播课"
text: '直播课',
},
VOICE : {
text:"线上课"
VOICE: {
text: '线上课',
},
RECORD : {
text:'录播课'
RECORD: {
text: '录播课',
},
PICTURE: {
text: '图文课',
},
PICTURE:{
text:'图文课'
}
};
const courseStateShow = {
UN_START: {
title: "待开播",
title: '待开播',
},
STARTING: {
title: "直播中",
title: '直播中',
},
FINISH: {
title: "回放",
title: '回放',
},
EXPIRED: {
title: "未成功开课",
title: '未成功开课',
},
};
class UserLearnDetailModal extends React.Component {
constructor(props) {
super(props);
this.state = {
planDataSource:{},
taskDataSource:[],
taskSize:10,
planDataSource: {},
taskDataSource: [],
taskSize: 10,
taskQuery: {
current: 1,
},
taskTotalCount:0,
courseDataSource:[],
storeCustomerName:'',
storeCustomerPhone:''
taskTotalCount: 0,
courseDataSource: [],
storeCustomerName: '',
storeCustomerPhone: '',
};
}
componentDidMount() {
this.getPlanCustomerDetail();
}
getPlanCustomerDetail = ()=>{
getPlanCustomerDetail = () => {
PlanService.getPlanCustomerDetail({
planId:getParameterByName("id"),
storeCustomerId:this.props.storeCustomerId,
storeId:User.getStoreId()
planId: getParameterByName('id'),
storeCustomerId: this.props.storeCustomerId,
storeId: User.getStoreId(),
}).then((res) => {
const {
storeCustomerName,
storeCustomerPhone,
const { storeCustomerName, storeCustomerPhone, planName, learnFinishPercentage, taskCustomerVOList, courseMediaVOS } = res.result;
let coverUrl;
courseMediaVOS.map((item) => {
if (item.contentType === 'COVER') {
coverUrl = item.mediaUrl;
}
return item;
});
const planDataSource = {
planName,
learnFinishPercentage,
taskCustomerVOList,
courseMediaVOS,
}=res.result;
let coverUrl;
courseMediaVOS.map((item) => {
if(item.contentType === "COVER"){
coverUrl = item.mediaUrl;
}
return item;
})
const planDataSource = {
planName,
learnFinishPercentage,
coverUrl:coverUrl || defaultCover
}
this.setState({
storeCustomerName,
storeCustomerPhone,
planDataSource,
taskDataSource:taskCustomerVOList
})
})
}
coverUrl: coverUrl || defaultCover,
};
taskCustomerVOList.map((item) => {
let videoClass =
item.courseVOList &&
item.courseVOList.filter((childItem, childIndex) => {
return (childItem.courseType = 'VOICE');
});
videoClass.map((chapterItem, chapterIndex) => {
chapterItem.chapterList = [
{
chapterName: '第一节1',
percentage: '80%',
},
{
chapterName: '第一节2',
percentage: '10%',
},
];
return chapterItem;
});
return item;
});
this.setState({
storeCustomerName,
storeCustomerPhone,
planDataSource,
taskDataSource: taskCustomerVOList,
});
});
};
parsePlanDataColumns = () => {
const columns = [
{
title: '培训计划名称',
key: 'planName',
dataIndex: 'planName',
width: '77%',
render: (val, record, index) => {
return (
<div className='record-name'>
<div className='img-con'>
<img src={record.coverUrl} />
</div>
<div>{record.planName}</div>
</div>
);
},
},
{
title: '学习进度',
key: 'learnFinishPercentage',
dataIndex: 'learnFinishPercentage',
render: (val, record, index) => {
return <div>{val}%</div>;
},
},
];
return columns;
};
parseTaskColumns = () => {
const columns = [
......@@ -95,134 +146,160 @@ class UserLearnDetailModal extends React.Component {
title: '培训任务',
key: 'taskName',
dataIndex: 'taskName',
render: (val, record,index) => {
width: '68%',
render: (val, record, index) => {
return (
<div className="taskName">
<div className='taskName'>
{index + 1}.{record.taskName}
</div>
)
}
);
},
},
{
title: '学习进度',
key: 'learnFinishPercentage',
dataIndex: 'learnFinishPercentage',
width:167,
render: (val, record) => {
return (
<div className="task-learn-percentage">
{ val === 100 ?<span>已完成</span>:<span>{val}%</span>}
</div>
)
}
}
return <div className='task-learn-percentage'>{val === 100 ? <span>已完成</span> : <span>{val}%</span>}</div>;
},
},
];
return columns;
}
parseCoursecolumns = (parentIndex) => {
};
parseCourseColumns = (parentIndex) => {
const columns = [
{
title: '课程',
key: 'courseName',
dataIndex: 'courseName',
render: (val, record,index) => {
width: '70%',
render: (val, record, index) => {
return (
<div className="course-info">
<div className='course-info'>
<div>
<span className="course-type">{CourseType[record.courseType].text}</span>
<span>{parentIndex + 1}.{index + 1}&nbsp;</span>
<span className='course-type'>{CourseType[record.courseType].text}</span>
<span>
{parentIndex + 1}.{index + 1}&nbsp;
</span>
</div>
<div className="name-and-state">
<span className="course-name">{record.courseName}</span>
{ record.courseType==="LIVE" &&
<span className="course-state">{courseStateShow[record.courseState].title}</span>
}
<div className='name-and-state'>
<span className='course-name'>{record.courseName}</span>
{record.courseType === 'LIVE' && <span className='course-state'>{courseStateShow[record.courseState].title}</span>}
</div>
</div>
)
}
);
},
},
{
title: '学习进度',
key: 'learnFinishPercentage',
dataIndex: 'learnFinishPercentage',
width:152,
render: (val, record) => {
return (
<div className="course-learn-percentage">
{ record.learnState === "FINISH" ?<span>已完成</span>:<span>{val}%</span>}
</div>
)
}
}
return <div className='course-learn-percentage'>{record.learnState === 'FINISH' ? <span>已完成</span> : <span>{val}%</span>}</div>;
},
},
];
return columns;
}
};
parseChapterColumns = (chapterIndex) => {
const columns = [
{
title: '课节名称',
key: 'chapterName',
dataIndex: 'chapterName',
width: '80%',
},
{
title: '学习进度',
key: 'percentage',
dataIndex: 'percentage',
},
];
return columns;
};
render() {
const {storeCustomerName,storeCustomerPhone,planDataSource,taskDataSource,taskQuery,taskTotalCount} = this.state;
const { storeCustomerName, storeCustomerPhone, planDataSource, taskDataSource, taskQuery, taskTotalCount } = this.state;
const { visible } = this.props;
return (
<Modal
title="学员学习详情"
onCancel={this.props.onClose}
onOk={this.props.onClose}
maskClosable={false}
visible={visible}
className="user-Learn-modal"
closable={true}
width={800}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
>
<div className="customer-info">
<span className="customer-name">
<span>学员：</span>
<span>{storeCustomerName}</span>
</span>
<span className="customer-phone">
<span>手机号：</span>
<span>{storeCustomerPhone}</span>
</span>
</div>
<div className="plan-instro">
<div className="img-con">
<img src={planDataSource.coverUrl}/>
</div>
<div>
<div className="plan-name">{planDataSource.planName}</div>
<div className="task-learn-percentage">
<span>学习进度: {planDataSource.learnFinishPercentage}%</span>
</div>
</div>
</div>
<div>
<Table
rowKey={(record) => record.taskId}
className="task-table"
dataSource={taskDataSource}
columns={this.parseTaskColumns()}
pagination={false}
expandedRowRender={(record,index) => {
if(!record.courseVOList){
return
}
if (record.courseVOList.length !== 0 ){
return <div>
<Table
pagination={false}
dataSource={record.courseVOList}
columns={this.parseCoursecolumns(index)}
className="child-table"
/>
</div>
}
}}
rowClassName={(record,index)=>{if(index%2===0){return 'odd-row'}else{ return 'even-row'}}}
/>
</div>
</Modal>
)
<Modal
title='学员学习详情'
onCancel={this.props.onClose}
onOk={this.props.onClose}
maskClosable={false}
visible={visible}
className='user-Learn-modal'
closable={true}
width={800}
closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}>
<div className='customer-info'>
<span className='customer-name'>
<span>学员：</span>
<span>{storeCustomerName}</span>
</span>
<span className='customer-phone'>
<span>手机号：</span>
<span>{storeCustomerPhone}</span>
</span>
</div>
<div className='table-box'>
<Table className='plan-table' dataSource={[planDataSource]} columns={this.parsePlanDataColumns()} pagination={false} />
<Table
className='task-table'
rowKey={(record) => record.taskId}
dataSource={taskDataSource}
columns={this.parseTaskColumns()}
pagination={false}
expandedRowRender={(record, index) => {
if (!record.courseVOList) {
return;
}
if (record.courseVOList.length !== 0) {
return (
<div>
<Table
showHeader={false}
pagination={false}
dataSource={record.courseVOList}
columns={this.parseCourseColumns(index)}
className='child-table'
expandedRowRender={(chapterRecord, chapterIndex) => {
if (!chapterRecord.chapterList) {
return;
}
if (chapterRecord.chapterList.length !== 0) {
return (
<div>
<Table
showHeader={false}
pagination={false}
dataSource={chapterRecord.chapterList}
columns={this.parseChapterColumns(chapterIndex)}
className='chapter-table'
/>
</div>
);
}
}}
/>
</div>
);
}
}}
rowClassName={(record, index) => {
if (index % 2 === 0) {
return 'odd-row';
} else {
return 'even-row';
}
}}
/>
</div>
</Modal>
);
}
}
export default UserLearnDetailModal;
\ No newline at end of file
export default UserLearnDetailModal;
src/modules/plan-manage/modal/UserLearnDetailModal.less
.user-Learn-modal{
.customer-info{
margin-bottom:16px;
.customer-name{
font-size:14px;
color:#333;
margin-right:32px;
}
.customer-phone{
font-size:14px;
color:#333;
}
}
.plan-instro{
display: flex;
align-items: center;
margin-bottom:16px;
.img-con{
margin-right:8px;
img{
width: 97px;
height: 54px;
display: inline-block;
border-radius:4px;
}
}
.plan-name{
color:#333;
font-size:16px;
}
.plan-learn-percentage{
color:#333;
font-size:14px;
}
.user-Learn-modal {
.customer-info {
margin-bottom: 16px;
.customer-name {
font-size: 14px;
color: #333;
margin-right: 32px;
}
.task-table{
.ant-table-thead{
tr {
th{
padding:9px 16px;
}
}
}
tr{
td{
padding:14px 16px;
}
}
.taskName{
color:#333;
font-size:14px;
}
.task-learn-percentage{
color:#333;
font-size:14px;
.customer-phone {
font-size: 14px;
color: #333;
}
}
.plan-instro {
display: flex;
align-items: center;
margin-bottom: 16px;
.img-con {
margin-right: 8px;
img {
width: 97px;
height: 54px;
display: inline-block;
border-radius: 4px;
}
}
.plan-name {
color: #333;
font-size: 16px;
}
.plan-learn-percentage {
color: #333;
font-size: 14px;
}
}
.table-box {
.child-table {
margin-left: 40px;
tr > td {
&:first-child {
padding-right: 0 !important;
}
.course-info{
display:flex;
margin-left:57px;
align-items: center;
.course-type{
font-size:11px;
color:#666666;
padding:0px 6px;
border: 1px solid #999999;
margin-right:4px;
border-radius: 2px;
line-height: 16px;
}
.name-and-state{
flex:1;
.course-name{
color:#666666;
font-size:14px;
margin-right:8px;
}
.tip{
font-size:14px;
color:#FF4F4F;
margin-right:2px;
}
.course-state{
color:#999;
font-size:14px;
}
}
&:nth-child(2) {
padding-left: 0 !important;
}
.ant-table-expanded-row{
td{
padding:0 16px;
}
}
.course-info {
display: flex;
.course-type {
border-radius: 2px;
border: 1px solid #999999;
font-size: 11px;
color: #666666;
padding: 1px 8px;
margin-right: 6px;
}
.ant-table-content{
border:1px solid #e8e8e8;
tr{
td{
border:none;
}
.child-table{
.ant-table-content{
border:none;
thead{
display:none;
}
tbody tr {
td{
border-bottom:none;
padding:14px 16px;
}
}
}
}
}
.odd-row{
background:transparent;
td{
background: #FFF;
}
& + .ant-table-expanded-row{
background:transparent;
td{
background: #FFF;
}
}
&:hover{
& + .ant-table-expanded-row{
background:transparent;
td{
background: #F3f6fa !important;
}
}
}
}
.even-row{
background:transparent;
td{
background: #FAFAFA;
}
& + .ant-table-expanded-row{
background:transparent;
td{
background: #FAFAFA;
}
}
&:hover{
& + .ant-table-expanded-row{
background:transparent;
td{
background: #F3f6fa !important;
}
}
}
}
}
}
.record-name {
display: flex;
.img-con {
margin-right: 8px;
img {
width: 97px;
height: 54px;
border-radius: 4px;
}
}
}
}
\ No newline at end of file
}
}
src/modules/plan-manage/modal/relatedCourseModal.jsx
/*
* @Author: yuananting
* @Date: 2021-07-05 10:50:10
* @LastEditors: yuananting
* @LastEditTime: 2021-07-05 11:02:28
* @Description: 描述一下咯
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import _ from 'underscore';
import { Table, Radio, Tabs, Modal, Input, message, Button, Tooltip } from 'antd';
import { PageControl, XMTable } from '@/components';
import college from '@/common/lottie/college';
import { PageControl } from '@/components';
import CourseService from '@/domains/course-domain/CourseService';
import User from '@/common/js/user';
......@@ -79,11 +87,11 @@ class SelectOperatorModal extends React.Component {
selectVideo: {
external: [],
internal: [],
}, //弹窗内已选择的视频课程
}, //弹窗内已选择的线上课程
currentVideoCourseListData: {
external: [],
internal: [],
}, //页面中已关联的视频课程
}, //页面中已关联的线上课程
pictureDataSource: [],
pictureSize: 10,
......@@ -408,12 +416,13 @@ class SelectOperatorModal extends React.Component {
},
},
{
title: '课程时长',
key: 'courseTime',
dataIndex: 'courseTime',
title: '课节数',
key: 'courseChapterNum',
dataIndex: 'courseChapterNum',
width: '20%',
align: 'right',
render: (val, record) => {
return <span className='course-status'>{dealTimeDuration(record.videoDuration)}</span>;
return <span>{val || 1}</span>;
},
},
{
......@@ -734,11 +743,7 @@ class SelectOperatorModal extends React.Component {
</div>
</div>
<div>
<XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
<Table
rowKey={(record) => record.liveCourseId}
dataSource={liveDataSource}
columns={this.parseLiveColumns()}
......@@ -829,11 +834,7 @@ class SelectOperatorModal extends React.Component {
</div>
</div>
<div>
<XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
<Table
rowKey={(record) => record.id}
dataSource={videoDataSource[videoCourseDivision]}
columns={this.parseVideoColumns()}
......@@ -928,11 +929,7 @@ class SelectOperatorModal extends React.Component {
</div>
</div>
<div>
<XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
<Table
rowKey={(record) => record.id}
dataSource={pictureDataSource}
columns={this.parsePictureColumns()}
......
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