Skip to content

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

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

parent 62d535e8
Showing with 188 additions and 246 deletions
src/modules/course-manage/components/GraphicsEditor.less
.graphics-editor-container { .graphics-editor-container {
border: 1px solid #E8E8E8; border: 1px solid #e8e8e8;
border-radius: 4px; border-radius: 4px;
width: 702px; width: 702px;
height: 510px; height: 510px;
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
.w-e-toolbar { .w-e-toolbar {
background-color: #fff !important; background-color: #fff !important;
border: none !important; border: none !important;
border-bottom: 1px solid #E8E8E8 !important; border-bottom: 1px solid #e8e8e8 !important;
} }
.w-e-text-container { .w-e-text-container {
...@@ -38,6 +38,14 @@ ...@@ -38,6 +38,14 @@
color: #666; color: #666;
z-index: 1; z-index: 1;
} }
.editor-warning {
position: absolute;
right: 0;
top: 205px;
color: red;
}
.w-e-full-screen-editor { .w-e-full-screen-editor {
.w-e-text-container { .w-e-text-container {
height: ~'calc(100vh - 109px)' !important; height: ~'calc(100vh - 109px)' !important;
...@@ -50,7 +58,7 @@ ...@@ -50,7 +58,7 @@
} }
} }
&.warning{ &.warning {
border-color: red; border-color: red;
} }
} }
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 * @Author: zhangleyuan
* @Date: 2021-02-20 16:45:51 * @Date: 2021-02-20 16:45:51
* @LastEditors: fusanqiasng * @LastEditors: yuananting
* @LastEditTime: 2021-06-01 15:20:33 * @LastEditTime: 2021-07-02 17:16:06
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -12,7 +21,7 @@ import { withRouter } from 'react-router-dom'; ...@@ -12,7 +21,7 @@ import { withRouter } from 'react-router-dom';
import SelectOperatorModal from '../modal/SelectOperatorModal'; import SelectOperatorModal from '../modal/SelectOperatorModal';
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal'; import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import Upload from '@/core/upload'; import Upload from '@/core/upload';
// import PhotoClip from 'photoclip' import GraphicsEditor from '@/modules/course-manage/components/GraphicsEditor';
import './BasicInfo.less'; import './BasicInfo.less';
const { TextArea } = Input; const { TextArea } = Input;
...@@ -202,10 +211,14 @@ class BasicInfo extends React.Component { ...@@ -202,10 +211,14 @@ class BasicInfo extends React.Component {
this.props.onChange(field, _percentCompleteLive); this.props.onChange(field, _percentCompleteLive);
}; };
changeIntro = (value) => {
this.props.onChange('introduce', value);
};
render() { render() {
const { operatorModalVisible, showSelectFileModal, visible, hasImgReady, cutImageBlob } = this.state; const { operatorModalVisible, showSelectFileModal, visible, hasImgReady, cutImageBlob } = this.state;
const { data } = this.props; 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; data;
// 当前是否使用的是默认图片 // 当前是否使用的是默认图片
const isDefaultCover = coverUrl === defaultCover; const isDefaultCover = coverUrl === defaultCover;
...@@ -226,10 +239,6 @@ class BasicInfo extends React.Component { ...@@ -226,10 +239,6 @@ class BasicInfo extends React.Component {
<div className='cover'> <div className='cover'>
<span className='label'>封面图：</span> <span className='label'>封面图：</span>
<div className='cover__wrap'> <div className='cover__wrap'>
<div className='img-content'>
{isDefaultCover && <span className='tag'>默认图</span>}
<img src={coverUrl} width='690' alt='' />
</div>
<div className='opt-btns'> <div className='opt-btns'>
<Button <Button
onClick={() => { onClick={() => {
...@@ -244,17 +253,32 @@ class BasicInfo extends React.Component { ...@@ -244,17 +253,32 @@ class BasicInfo extends React.Component {
</span> </span>
<div className='tips'>建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div> <div className='tips'>建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
</div> </div>
<div className='img-content'>
{isDefaultCover && <span className='tag'>默认图</span>}
<img src={coverUrl} width='690' alt='' />
</div>
</div> </div>
</div> </div>
<div className='introduction'> <div className='introduction'>
<span className='label'>简介：</span> <span className='label'>课程简介：</span>
<TextArea {/* <TextArea
placeholder='请输入培训计划简介' placeholder='请输入培训计划简介'
maxLength={200} maxLength={200}
style={{ width: '552px', height: '110px' }} style={{ width: '552px', height: '110px' }}
className='instro-textarea' className='instro-textarea'
value={instro} value={instro}
onChange={(e) => this.props.onChange('instro', e.target.value)} 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>
<div className='wether-use'> <div className='wether-use'>
...@@ -270,8 +294,7 @@ class BasicInfo extends React.Component { ...@@ -270,8 +294,7 @@ class BasicInfo extends React.Component {
</div> </div>
<div> <div>
<div className='instro-text'> <div className='instro-text'>
<div>开启：此培训计划可以分享给学员进行学习</div> <div>{enableState === 'YES' ? '已开启，培训计划可正常分享给学员学习' : '已关闭，培训计划暂不进行分享和学习'}</div>
<div>关闭：此培训计划暂不可分享给学员进行学习，后续可开启</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -291,7 +314,7 @@ class BasicInfo extends React.Component { ...@@ -291,7 +314,7 @@ class BasicInfo extends React.Component {
onChange={(e) => { onChange={(e) => {
this.props.onChange('operateType', e.target.value); this.props.onChange('operateType', e.target.value);
}}> }}>
<Row style={{ marginBottom: '5px' }}> <Row style={{ marginBottom: '16px' }}>
<Col span={24}> <Col span={24}>
<Radio value='All_Operate'> <Radio value='All_Operate'>
所有运营师 所有运营师
...@@ -317,7 +340,7 @@ class BasicInfo extends React.Component { ...@@ -317,7 +340,7 @@ class BasicInfo extends React.Component {
选择运营师 选择运营师
</Button> </Button>
<span> <span>
已选择<span>{selectOperatorList.length}</span>名运营师 已选择 <span style={{ color: '#2966FF' }}>{selectOperatorList.length}</span> 名运营师
</span> </span>
</div> </div>
)} )}
...@@ -347,7 +370,7 @@ class BasicInfo extends React.Component { ...@@ -347,7 +370,7 @@ class BasicInfo extends React.Component {
<div className='live-standard-info'> <div className='live-standard-info'>
<span className='icon iconfont'>&#xe864;</span> <span className='icon iconfont'>&#xe864;</span>
<span className='instro'> <span className='instro'>
线上课单个课程，学员学习进度达到 线上课单个课节，学员学习进度达到
<Input <Input
width='40' width='40'
value={percentCompleteVideo} value={percentCompleteVideo}
...@@ -357,7 +380,7 @@ class BasicInfo extends React.Component { ...@@ -357,7 +380,7 @@ class BasicInfo extends React.Component {
onBlur={(e) => this.percentCompleteBlur(e, 'percentCompleteVideo')} onBlur={(e) => this.percentCompleteBlur(e, 'percentCompleteVideo')}
className='input-box' className='input-box'
/> />
%，即视为"已完成"学习 %，即课节视为"已完成"学习
</span> </span>
</div> </div>
<div className='live-standard-info'> <div className='live-standard-info'>
......
src/modules/plan-manage/components/BasicInfo.less
.plan-basic-info{ .plan-basic-info {
.label { .label {
width: 110px; width: 110px;
text-align: right; text-align: right;
display:inline-block; display: inline-block;
font-size:14px; font-size: 14px;
color:#666; color: #666;
.require { .require {
color: #EC4B35; color: #ec4b35;
} }
.iconfont{ .iconfont {
font-size:14px; font-size: 14px;
color:#BFBFBF; color: #bfbfbf;
} }
} }
.cover { .cover {
display: flex; display: flex;
margin-top: 16px; margin-top: 24px;
&__wrap { &__wrap {
position: relative; position: relative;
display: flex;
.tag { .tag {
border-radius: 2px; border-radius: 2px;
background: #D6D6D6; background: #d6d6d6;
font-size: 12px; font-size: 12px;
height: 18px; height: 18px;
width: 52px; width: 52px;
text-align: center; text-align: center;
color: #FFF; color: #fff;
position: absolute; position: absolute;
top: 8px; top: 8px;
left: 8px; left: 8px;
} }
} }
.img-content { .img-content {
margin-right: 20px; position: relative;
margin-top: 8px;
width: 299px; width: 299px;
height: 169px; height: 169px;
img { img {
...@@ -42,90 +42,93 @@ ...@@ -42,90 +42,93 @@
object-fit: contain; object-fit: contain;
} }
} }
.opt-btns{ .opt-btns {
.default-btn { .default-btn {
margin:0 8px; margin: 0 8px;
color: #2966FF; color: #2966ff;
cursor: pointer; cursor: pointer;
&.disabled { &.disabled {
color: #CCC; color: #ccc;
cursor: not-allowed; cursor: not-allowed;
} }
} }
.tips{ .tips {
margin-top:8px; margin-top: 8px;
font-size:14px; font-size: 14px;
color:#999; color: #999;
} }
} }
} }
.introduction{ .introduction {
margin-top:16px; display: flex;
.instro-textarea{ margin-top: 24px;
.instro-textarea {
vertical-align: top; vertical-align: top;
} }
} }
.wether-use{ .wether-use {
display:flex; display: flex;
margin-top:16px; margin-top: 34px;
.instro-text{ .instro-text {
color:#999; color: #999;
margin-left:12px; margin-left: 12px;
} }
.content{ .content {
display:flex; display: flex;
} }
} }
.view-range{ .view-range {
display:flex; display: flex;
margin-top:16px; margin-top: 24px;
.label{ .label {
margin-top:2px; margin-top: 2px;
} }
.instro-text{ .instro-text {
color:#999; color: #999;
margin-left:12px; margin-left: 12px;
} }
.choose-business{ .choose-business {
margin-top:16px; margin-top: 12px;
.ant-btn {
margin-right: 12px;
} }
.playback__text{
margin-left:12px;
color:#999999;
} }
.playback__text {
margin-left: 12px;
color: #999999;
} }
.done-standard{ }
.done-standard {
display: flex; display: flex;
margin-top:22px; margin-top: 22px;
.standard-label{ .standard-label {
margin-top:3px; margin-top: 3px;
} }
.live-standard-info{ .live-standard-info {
margin-bottom:10px; margin-bottom: 10px;
} }
input{ input {
display:inline-block; display: inline-block;
width:90px; width: 90px;
height:32px; height: 32px;
} }
.icon{ .icon {
color:#A0A0A0; color: #a0a0a0;
font-size:14px; font-size: 14px;
margin-right:4px; margin-right: 4px;
} }
.instro{ .instro {
color:#333333; color: #333333;
font-size:14px; font-size: 14px;
} }
.input-box{ .input-box {
width: 60px; width: 60px;
height: 32px; height: 32px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #E8E8E8; border: 1px solid #e8e8e8;
color:#333333; color: #333333;
font-size:14px; font-size: 14px;
margin:0 2px; margin: 0 2px;
} }
} }
} }
src/modules/plan-manage/modal/UserLearnDetailModal.less
.user-Learn-modal{ .user-Learn-modal {
.customer-info {
.customer-info{ margin-bottom: 16px;
margin-bottom:16px; .customer-name {
.customer-name{ font-size: 14px;
font-size:14px; color: #333;
color:#333; margin-right: 32px;
margin-right:32px;
} }
.customer-phone{ .customer-phone {
font-size:14px; font-size: 14px;
color:#333; color: #333;
} }
} }
.plan-instro{ .plan-instro {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom:16px; margin-bottom: 16px;
.img-con{ .img-con {
margin-right:8px; margin-right: 8px;
img{ img {
width: 97px; width: 97px;
height: 54px; height: 54px;
display: inline-block; display: inline-block;
border-radius:4px; border-radius: 4px;
}
}
.plan-name{
color:#333;
font-size:16px;
}
.plan-learn-percentage{
color:#333;
font-size:14px;
}
}
.task-table{
.ant-table-thead{
tr {
th{
padding:9px 16px;
} }
} }
.plan-name {
color: #333;
font-size: 16px;
} }
tr{ .plan-learn-percentage {
td{ color: #333;
padding:14px 16px; font-size: 14px;
}
}
.taskName{
color:#333;
font-size:14px;
}
.task-learn-percentage{
color:#333;
font-size:14px;
}
.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;
} }
} }
.table-box {
.child-table {
margin-left: 40px;
tr > td {
&:first-child {
padding-right: 0 !important;
} }
.ant-table-expanded-row{ &:nth-child(2) {
td{ padding-left: 0 !important;
padding:0 16px;
} }
} }
.ant-table-content{ .course-info {
border:1px solid #e8e8e8; display: flex;
tr{ .course-type {
td{ border-radius: 2px;
border:none; border: 1px solid #999999;
} font-size: 11px;
.child-table{ color: #666666;
padding: 1px 8px;
.ant-table-content{ margin-right: 6px;
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;
} }
} }
} }
......
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 React from 'react';
import _ from 'underscore'; import _ from 'underscore';
import { Table, Radio, Tabs, Modal, Input, message, Button, Tooltip } from 'antd'; import { Table, Radio, Tabs, Modal, Input, message, Button, Tooltip } from 'antd';
import { PageControl, XMTable } from '@/components'; import { PageControl } from '@/components';
import college from '@/common/lottie/college';
import CourseService from '@/domains/course-domain/CourseService'; import CourseService from '@/domains/course-domain/CourseService';
import User from '@/common/js/user'; import User from '@/common/js/user';
...@@ -79,11 +87,11 @@ class SelectOperatorModal extends React.Component { ...@@ -79,11 +87,11 @@ class SelectOperatorModal extends React.Component {
selectVideo: { selectVideo: {
external: [], external: [],
internal: [], internal: [],
}, //弹窗内已选择的视频课程 }, //弹窗内已选择的线上课程
currentVideoCourseListData: { currentVideoCourseListData: {
external: [], external: [],
internal: [], internal: [],
}, //页面中已关联的视频课程 }, //页面中已关联的线上课程
pictureDataSource: [], pictureDataSource: [],
pictureSize: 10, pictureSize: 10,
...@@ -408,12 +416,13 @@ class SelectOperatorModal extends React.Component { ...@@ -408,12 +416,13 @@ class SelectOperatorModal extends React.Component {
}, },
}, },
{ {
title: '课程时长', title: '课节数',
key: 'courseTime', key: 'courseChapterNum',
dataIndex: 'courseTime', dataIndex: 'courseChapterNum',
width: '20%', width: '20%',
align: 'right',
render: (val, record) => { 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 { ...@@ -734,11 +743,7 @@ class SelectOperatorModal extends React.Component {
</div> </div>
</div> </div>
<div> <div>
<XMTable <Table
renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.liveCourseId} rowKey={(record) => record.liveCourseId}
dataSource={liveDataSource} dataSource={liveDataSource}
columns={this.parseLiveColumns()} columns={this.parseLiveColumns()}
...@@ -829,11 +834,7 @@ class SelectOperatorModal extends React.Component { ...@@ -829,11 +834,7 @@ class SelectOperatorModal extends React.Component {
</div> </div>
</div> </div>
<div> <div>
<XMTable <Table
renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.id} rowKey={(record) => record.id}
dataSource={videoDataSource[videoCourseDivision]} dataSource={videoDataSource[videoCourseDivision]}
columns={this.parseVideoColumns()} columns={this.parseVideoColumns()}
...@@ -928,11 +929,7 @@ class SelectOperatorModal extends React.Component { ...@@ -928,11 +929,7 @@ class SelectOperatorModal extends React.Component {
</div> </div>
</div> </div>
<div> <div>
<XMTable <Table
renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.id} rowKey={(record) => record.id}
dataSource={pictureDataSource} dataSource={pictureDataSource}
columns={this.parsePictureColumns()} 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