Skip to content

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

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

parent 62d535e8
Showing with 260 additions and 320 deletions
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/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