Skip to content

X
xiaomai-cloud-class-web
Commit 5d47d3ab by zhangleyuan
Options

feat:处理培训计划关联图文课

parent ad499f19
Showing with 368 additions and 50 deletions
src/common/less/icon-font.less
@font-face {
font-family: 'iconfont'; /* project id 2223403 */
src: url('//at.alicdn.com/t/font_2223403_droqalespbg.eot');
src: url('//at.alicdn.com/t/font_2223403_droqalespbg.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2223403_droqalespbg.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2223403_droqalespbg.woff') format('woff'),
url('//at.alicdn.com/t/font_2223403_droqalespbg.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2223403_droqalespbg.svg#iconfont') format('svg');
src: url('//at.alicdn.com/t/font_2223403_vzf1rkr5ya.eot');
src: url('//at.alicdn.com/t/font_2223403_vzf1rkr5ya.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2223403_vzf1rkr5ya.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2223403_vzf1rkr5ya.woff') format('woff'),
url('//at.alicdn.com/t/font_2223403_vzf1rkr5ya.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2223403_vzf1rkr5ya.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
......
src/h5.html
<!--
* @Author: 吴文洁
* @Date: 2020-08-24 12:20:57
* @LastEditors: yuananting
* @LastEditTime: 2021-03-24 19:34:13
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-27 11:09:24
* @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有
-->
......@@ -25,7 +25,7 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_325yz7wxu2d.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_vzf1rkr5ya.css">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
......
src/index.html
<!--
* @Author: 吴文洁
* @Date: 2020-08-24 12:20:57
* @LastEditors: yuananting
* @LastEditTime: 2021-03-24 19:34:26
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-27 11:09:33
* @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有
-->
......@@ -25,7 +25,7 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_325yz7wxu2d.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_vzf1rkr5ya.css">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
......
src/modules/course-manage/graphics-course/components/GraphicsCourseList.jsx
......@@ -2,7 +2,7 @@
* @Author: 吴文洁
* @Date: 2020-08-05 10:12:45
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-01 16:34:11
* @LastEditTime: 2021-03-27 16:24:47
* @Description: 视频课-列表模块
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
......@@ -33,7 +33,9 @@ class GraphicsCourseList extends React.Component {
super(props);
this.state = {
id: '', // 视频课ID
studentIds:[]
studentIds:[],
RelatedPlanModalVisible:false,
selectPlanList:{}
}
}
......@@ -60,7 +62,18 @@ class GraphicsCourseList extends React.Component {
);
this.setState({ watchDataModal });
}
handlePlanName = (planArray)=>{
let planStr = "";
planArray.map((item,index)=>{
if(index < planArray.length-1){
planStr = planStr + item.planName + '、';
}else{
planStr = planStr + item.planName
}
})
return planStr
}
// 请求表头
parseColumns = () => {
const columns = [
......@@ -91,7 +104,7 @@ class GraphicsCourseList extends React.Component {
title: '课程分类',
key: 'categoryName',
dataIndex: 'categoryName',
width: '20%',
width: 120,
render: (val, record) => {
return (
<div className="record__item">
......@@ -104,7 +117,7 @@ class GraphicsCourseList extends React.Component {
title: '创建人',
key: 'createName',
dataIndex: 'createName',
width: '10%',
width: 100,
render: (val) => {
return (
<div>
......@@ -126,7 +139,7 @@ class GraphicsCourseList extends React.Component {
<span>店铺展示</span>
<Tooltip title={<div>开启后，用户可在店铺内查看到此课程。若课程“未成功开课”，则系统会自动“关闭”店铺展示。<br/>关闭后，店铺内不再展示此课程，但用户仍可通过分享的海报/链接查看此课程。</div>}><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px'}}>&#xe61d;</i></Tooltip>
</span>,
width: '12%',
width: 120,
dataIndex: "courseware",
render: (val, item, index) => {
return (
......@@ -166,6 +179,28 @@ class GraphicsCourseList extends React.Component {
}
},
{
title: '关联项',
width: 200,
key: "planList",
dataIndex: "planList",
render: (val, record) => {
return (
<div className="related-task">
{ record.relatedPlanList ?
<Tooltip title={this.handlePlanName(record.relatedPlanList)} placement="top" arrowPointAtCenter>
{ record.relatedPlanList.map((item,index)=>{
return <span>{item.planName} { (index < record.relatedPlanList.length-1)&&(<span> 、</span>)} </span>
})
}
</Tooltip>
:
<span></span>
}
</div>
)
}
},
{
title: '操作',
key: 'operate',
dataIndex: 'operate',
......@@ -236,7 +271,7 @@ class GraphicsCourseList extends React.Component {
renderMoreOperate = (item) => {
return (
<div className="live-course-more-menu">
{/* {(User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager") &&
{(User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager") &&
<div
className="operate__item"
key="plan"
......@@ -244,7 +279,7 @@ class GraphicsCourseList extends React.Component {
this.handleRelatedModalShow(item);
}}
>关联培训计划</div>
} */}
}
<div
className="operate__item"
key="edit"
......@@ -362,7 +397,37 @@ class GraphicsCourseList extends React.Component {
};
this.props.onChange(_query);
}
handleRelatedModalShow = (item)=>{
const selectPlanList = {};
if(item.relatedPlanList){
item.relatedPlanList.map((item,index)=>{
selectPlanList[item.planId] = {}
selectPlanList[item.planId].planId = item.planId;
selectPlanList[item.planId].taskBaseVOList = [{taskId:item.taskId}];
return item
})
}
this.setState({
RelatedPlanModalVisible:true,
selectCourseId:item.id,
selectPlanList:selectPlanList
})
}
closeRelatedPlanModalVisible = ()=>{
this.setState({
RelatedPlanModalVisible:false
})
}
onChangeSelectPlanList = (selectPlanList)=>{
this.setState({
selectPlanList:selectPlanList
})
}
onConfirmSelectPlanList = ()=>{
this.setState({
RelatedPlanModalVisible:false
},()=>{this.props.onChange();})
}
render() {
const { RelatedPlanModalVisible, selectCourseId, selectPlanList } = this.state;
const { dataSource = [], totalCount, query } = this.props;
......@@ -402,6 +467,16 @@ class GraphicsCourseList extends React.Component {
onConfirm={this.onConfirmSelectPlanList}
/>
}
{ RelatedPlanModalVisible &&
<RelatedPlanModal
onClose={this.closeRelatedPlanModalVisible}
visible={RelatedPlanModalVisible}
selectCourseId={selectCourseId}
selectPlanList={selectPlanList}
onChange={this.onChangeSelectPlanList}
onConfirm={this.onConfirmSelectPlanList}
/>
}
{ this.state.shareLiveModal }
{ this.state.watchDataModal }
</div>
......
src/modules/plan-manage/AddPlan.jsx
......@@ -2,7 +2,7 @@
* @Author: zhangleyuan
* @Date: 2021-02-20 16:13:39
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-16 11:27:06
* @LastEditTime: 2021-03-27 11:16:56
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -28,6 +28,7 @@ const defaultBasicData = {
operateType:'All_Operate',
percentCompleteLive:80,
percentCompleteVideo:80,
percentCompletePicture:80
}
const defaultTaskList = [];
......@@ -64,6 +65,7 @@ function AddPlan() {
operateIds,
percentCompleteLive,
percentCompleteVideo,
percentCompletePicture,
courseMediaVOS,
trainingTaskList
} = res.result;
......@@ -102,7 +104,8 @@ function AddPlan() {
instro,
operateType,
percentCompleteLive,
percentCompleteVideo
percentCompleteVideo,
percentCompletePicture
})
setHasGetDetail(true);
})
......@@ -119,7 +122,7 @@ function AddPlan() {
}
function submitInfo(){
const {planName,enableState,selectOperatorList,instro,operateType,percentCompleteLive,percentCompleteVideo,coverId,coverUrl} = basicData;
const {planName,enableState,selectOperatorList,instro,operateType,percentCompleteLive,percentCompleteVideo,percentCompletePicture,coverId,coverUrl} = basicData;
let input = /^[\s]*$/;
if(!planName || input.test(planName)){
message.warning('请输入的培训计划名称');
......@@ -137,6 +140,10 @@ function AddPlan() {
message.warning('请输入完成标准');
return;
}
if(!percentCompletePicture && percentCompletePicture !==0 ){
message.warning('请输入完成标准');
return;
}
if(taskList.length === 0){
message.warning('请输入培训计划内容');
return;
......@@ -183,6 +190,7 @@ function AddPlan() {
operateType,
percentCompleteLive,
percentCompleteVideo,
percentCompletePicture,
planName,
scheduleMediaRequests,
storeId:User.getStoreId(),
......
src/modules/plan-manage/components/BasicInfo.jsx
......@@ -2,7 +2,7 @@
* @Author: zhangleyuan
* @Date: 2021-02-20 16:45:51
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-26 14:16:39
* @LastEditTime: 2021-03-27 11:20:27
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -210,7 +210,7 @@ class BasicInfo extends React.Component{
render(){
const { operatorModalVisible ,showSelectFileModal,visible,hasImgReady,cutImageBlob} = this.state;
const { data} = this.props;
const { planName,coverUrl,instro,enableState,operateType,selectOperatorList,percentCompleteLive,percentCompleteVideo} = data;
const { planName,coverUrl,instro,enableState,operateType,selectOperatorList,percentCompleteLive,percentCompleteVideo,percentCompletePicture} = data;
// 当前是否使用的是默认图片
const isDefaultCover = coverUrl === defaultCover;
return (
......@@ -338,13 +338,13 @@ class BasicInfo extends React.Component{
</span>
</div>
<div className="live-standard-info">
<span className="icon iconfont">&#xe864;</span>
<span className="icon iconfont">&#xe601;</span>
<span className="instro">图文课单个课程，用户学习进度达到
<Input
width="40"
value={percentCompleteVideo}
onChange={(e) => { this.props.onChange('percentCompleteVideo', e.target.value.replace(/\D/g,'')) }}
onBlur={(e)=>this.percentCompleteBlur(e,'percentCompleteVideo')}
value={percentCompletePicture}
onChange={(e) => { this.props.onChange('percentCompletePicture', e.target.value.replace(/\D/g,'')) }}
onBlur={(e)=>this.percentCompleteBlur(e,'percentCompletePicture')}
className="input-box"
/>
%，即视为"已完成"学习
......
src/modules/plan-manage/components/TrainingTask.jsx
......@@ -2,7 +2,7 @@
* @Author: zhangleyuan
* @Date: 2021-02-20 16:45:51
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-16 11:36:36
* @LastEditTime: 2021-03-27 14:43:17
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -25,6 +25,9 @@ const CourseType = {
},
RECORD : {
text:'录播课'
},
PICTURE:{
text:'图文课'
}
};
const courseStateShow = {
......@@ -218,6 +221,7 @@ class TrainingTask extends React.Component {
})
}
confirmSelectCourse = (selectList) =>{
console.log("selectList",selectList);
const {selectedTaskIndex}= this.state;
const { dataSource } = this.state
const newData=[...dataSource];
......
src/modules/plan-manage/modal/UserLearnDetailModal.jsx
......@@ -16,6 +16,9 @@ const CourseType = {
},
RECORD : {
text:'录播课'
},
PICTURE:{
text:'图文课'
}
};
const courseStateShow = {
......
src/modules/plan-manage/modal/relatedCourseModal.jsx
......@@ -3,6 +3,7 @@ import {Table, Modal,Input,message,Button,Tooltip} from 'antd';
import { PageControl } from "@/components";
import CourseService from "@/domains/course-domain/CourseService";
import User from '@/common/js/user';
import Service from '@/common/js/service';
import { Tabs } from 'antd';
import './relatedCourseModal.less';
import _ from "underscore";
......@@ -45,6 +46,7 @@ class SelectOperatorModal extends React.Component {
selectLive:[],//弹窗内已选择的直播课程
currentCourseListData:[],
currentLiveCourseListData:[], //页面中已关联的直播课程
videoDataSource:[],
videoSize:10,
videoQuery: {
......@@ -53,6 +55,16 @@ class SelectOperatorModal extends React.Component {
videoTotalCount:0,
selectVideo:[], //弹窗内已选择的视频课程
currentVideoCourseListData:[], //页面中已关联的视频课程
pictureDataSource:[],
pictureSize:10,
pictureQuery: {
current: 1,
},
pictureTotalCount:0,
selectPicture:[], //弹窗内已选择的视频课程
currentPictureCourseListData:[], //页面中已关联的视频课程
activeKey:'video',
currentTaskCourseData:this.props.data[this.props.selectedTaskIndex].courseList || []
}
......@@ -61,7 +73,7 @@ class SelectOperatorModal extends React.Component {
componentDidMount() {
this.handleFetchLiveDataList();
this.handleFetchVideoDataList();
this.handleFetchPictureDataList();
}
// 获取直播课列表
......@@ -128,6 +140,40 @@ class SelectOperatorModal extends React.Component {
});
}
// 获取图文课列表
handleFetchPictureDataList = () => {
const {pictureQuery,pictureSize} = this.state;
const { selectedTaskIndex } =this.props;
const _data = [...this.props.data];
let currentPictureCourseListData = [];
_data.map((item,index) => {
item.courseList.map((childItem,childIndex)=>{
if(childItem.courseType ==="PICTURE"){
currentPictureCourseListData.push(childItem.courseId)
}
return childItem
})
return item
});
const params ={
...pictureQuery,
size:pictureSize,
courseType:"PICTURE",
storeId:User.getStoreId(),
excludeCourseIdList:currentPictureCourseListData
}
Service.Hades('public/hades/mediaCoursePage', params).then((res) => {
const { result = {} } = res ;
const { records = [], total = 0 } = result;
this.setState({
pictureDataSource: records,
pictureTotalCount: Number(total),
currentPictureCourseListData
});
});
}
handleChangVideoCourseName = (value)=>{
const { videoQuery } = this.state;
videoQuery.courseName = value;
......@@ -136,6 +182,7 @@ class SelectOperatorModal extends React.Component {
videoQuery
})
}
handleChangLiveCourseName = (value)=>{
const { liveQuery } = this.state;
liveQuery.courseName = value;
......@@ -144,6 +191,16 @@ class SelectOperatorModal extends React.Component {
liveQuery
})
}
handleChangPictureCourseName = (value)=>{
const { pictureQuery } = this.state;
pictureQuery.courseName = value;
pictureQuery.current = 1;
this.setState({
pictureQuery
})
}
onShowLiveSizeChange = (current, size) => {
if (current == size) {
return
......@@ -162,6 +219,15 @@ class SelectOperatorModal extends React.Component {
},()=>{this.handleFetchLiveDataList()})
}
onShowPictureSizeChange = (current, size) => {
if (current == size) {
return
}
this.setState({
pictureSize:size
},()=>{this.handleFetchPictureDataList()})
}
// 请求表头
parseLiveColumns = () => {
const columns = [
......@@ -280,15 +346,67 @@ class SelectOperatorModal extends React.Component {
];
return columns;
}
// 请求表头
parsePictureColumns = () => {
const columns = [
{
title: <span><span>课程信息</span><Tooltip title="仅显示未关联课程，已关联课程不支持重复选择"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px'}}>&#xe61d;</i></Tooltip></span>,
key: 'course',
dataIndex: 'course',
width:'55%',
render: (val, record) => {
const { coverUrl } = record;
return (
<div className="course-info">
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
<img className="course-cover" src={coverUrl || 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'}/>
<div className="course-name">{record.courseName}</div>
</div>
)
}
},
{
title: '更新时间',
key: 'updated',
dataIndex: 'updated',
width:'25%',
render: (val, record) => {
return (
<span className="course-status">{formatDate('YYYY-MM-DD',record.updated)}</span>
)
}
},
{
title: '店铺展示',
key: 'shelfState',
dataIndex: 'shelfState',
width:'20%',
render: (val, record) => {
return (
<span>
{record.shelfState==="YES"?
<span>开启</span>
:
<span>关闭</span>
}
</span>
)
}
}
];
return columns;
}
selectLiveList = (record,selected) =>{
const {selectVideo,currentTaskCourseData,selectLive} = this.state;
const {selectVideo,currentTaskCourseData,selectLive,selectPicture} = this.state;
let _list = [];
if (selected || !_.find(selectLive, (item) => item.liveCourseId == record.liveCourseId)) {
_list = _.uniq(selectLive.concat([record]), false, (item) => item.liveCourseId);
} else {
_list = _.reject(selectLive, (item) => item.liveCourseId === record.liveCourseId);
}
if(_list.length + currentTaskCourseData.length + selectVideo.length> 20){
if(_list.length + currentTaskCourseData.length + selectVideo.length + selectPicture.length > 20){
message.warning('无法继续选择，一个任务最多关联20个课程');
return;
}
......@@ -296,23 +414,40 @@ class SelectOperatorModal extends React.Component {
}
selectVideoList = (record,selected) =>{
const {selectVideo,currentTaskCourseData,selectLive} = this.state;
const {selectVideo,currentTaskCourseData,selectLive,selectPicture} = this.state;
let _list = [];
if (selected || !_.find(selectVideo, (item) => item.id == record.id)) {
_list = _.uniq(selectVideo.concat([record]), false, (item) => item.id);
} else {
_list = _.reject(selectVideo, (item) => item.id === record.id);
}
if(_list.length + currentTaskCourseData.length + selectLive.length> 20){
if(_list.length + currentTaskCourseData.length + selectLive.length + selectPicture.length > 20){
message.warning('无法继续选择，一个任务最多关联20个课程');
return;
}
this.setState({selectVideo:_list});
}
selectPictureList = (record,selected) =>{
const {selectVideo,currentTaskCourseData,selectLive,selectPicture} = this.state;
let _list = [];
if (selected || !_.find(selectPicture, (item) => item.id == record.id)) {
_list = _.uniq(selectPicture.concat([record]), false, (item) => item.id);
} else {
_list = _.reject(selectPicture, (item) => item.id === record.id);
}
if(_list.length + currentTaskCourseData.length + selectLive.length + selectVideo.length > 20){
message.warning('无法继续选择，一个任务最多关联20个课程');
return;
}
this.setState({selectPicture:_list});
}
clearSelectCourse = ()=>{
this.setState({
selectLive:[],
selectVideo:[]
selectVideo:[],
selectPicture:[]
})
}
handleSelectVideo = (selectVideo)=>{
......@@ -334,10 +469,40 @@ class SelectOperatorModal extends React.Component {
_item.courseState = item.courseState;
return _item;
})
}
}
handleSelectPicture = (selectPicture)=>{
return selectPicture.map((item,index)=>{
let _item = {};
_item.courseId = item.id;
_item.courseType = "PICTURE";
_item.courseName = item.courseName;
return _item;
})
}
render() {
const { visible } = this.props;
const { liveDataSource,liveSize,liveQuery,liveTotalCount,selectLive,videoDataSource,videoSize,videoQuery,videoTotalCount,selectVideo,currentTaskCourseData,activeKey} = this.state;
const {
liveDataSource,
liveSize,
liveQuery,
liveTotalCount,
selectLive,
videoDataSource,
videoSize,
videoQuery,
videoTotalCount,
selectVideo,
currentTaskCourseData,
activeKey,
selectPicture,
pictureDataSource,
pictureSize,
pictureQuery,
pictureTotalCount,
} = this.state;
return (
<Modal
......@@ -348,7 +513,6 @@ class SelectOperatorModal extends React.Component {
className="related-course-modal"
closable={true}
width={800}
onOk={() => this.props.onSelect([...this.handleSelectVideo(selectVideo),...this.handleSelectLive(selectLive)]) }
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
footer={[
activeKey ==='live'?
......@@ -363,7 +527,7 @@ class SelectOperatorModal extends React.Component {
>
取消
</Button>,
<Button type="primary" onClick={() => this.props.onSelect([...this.handleSelectVideo(selectVideo),...this.handleSelectLive(selectLive)]) }>
<Button type="primary" onClick={() => this.props.onSelect([...this.handleSelectVideo(selectVideo),...this.handleSelectLive(selectLive),...this.handleSelectPicture(selectPicture)]) }>
确定
</Button>
]}
......@@ -379,7 +543,7 @@ class SelectOperatorModal extends React.Component {
<div className="select-box">
<div>
<span className="icon iconfont tip-icon">&#xe61d;</span>
<span className="select-num">已选择{selectVideo.length + selectLive.length}个</span>
<span className="select-num">已选择{selectVideo.length + selectLive.length + selectPicture.length }个</span>
</div>
<div>
<span className="clear-btn" onClick={this.clearSelectCourse}>清空</span>
......@@ -407,10 +571,9 @@ class SelectOperatorModal extends React.Component {
} else {
_list = _.reject(selectVideo, (item) => _.find(changeRows, (data) => data.id === item.id));
}
if(_list.length + currentTaskCourseData.length + selectLive.length> 20){
if(_list.length + currentTaskCourseData.length + selectLive.length + selectPicture.length> 20){
message.warning('无法继续选择，一个任务最多关联20个课程');
console.log('1111');
const extraLength = (_list.length + currentTaskCourseData.length + selectLive.length) -20;
const extraLength = (_list.length + currentTaskCourseData.length + selectLive.length + selectPicture.length) -20;
_list.splice(_list.length - extraLength,extraLength);
}
this.setState({selectVideo:_list});
......@@ -445,7 +608,7 @@ class SelectOperatorModal extends React.Component {
<div className="select-box">
<div>
<span className="icon iconfont tip-icon">&#xe61d;</span>
<span className="select-num">已选择{selectVideo.length + selectLive.length}个</span>
<span className="select-num">已选择{selectVideo.length + selectLive.length + selectPicture.length}个</span>
</div>
<div>
<span className="clear-btn" onClick={this.clearSelectCourse}>清空</span>
......@@ -473,12 +636,11 @@ class SelectOperatorModal extends React.Component {
} else {
_list = _.reject(selectLive, (item) => _.find(changeRows, (data) => data.liveCourseId === item.liveCourseId));
}
if(_list.length + currentTaskCourseData.length + selectVideo.length> 20){
if(_list.length + currentTaskCourseData.length + selectVideo.length + selectPicture.length> 20){
message.warning('无法继续选择，一个任务最多关联20个课程');
const extraLength = (_list.length + currentTaskCourseData.length + selectVideo.length) -20;
const extraLength = (_list.length + currentTaskCourseData.length + selectVideo.length + selectPicture.length) -20;
_list.splice(_list.length - extraLength,extraLength);
console.log('_list',_list);
}
this.setState({selectLive:_list});
},
......@@ -503,6 +665,72 @@ class SelectOperatorModal extends React.Component {
}
</div>
</TabPane>
<TabPane tab="图文课" key="picture">
<div className="search-container">
<Search enterButton={<span className="icon iconfont">&#xe832;</span>} placeholder="搜索课程名称" style={{ width: 200 }} onChange={(e) => { this.handleChangPictureCourseName(e.target.value)}} onSearch={ () => { this.handleFetchPictureDataList()}} />
</div>
<div className="select-area">
<div className="select-box">
<div>
<span className="icon iconfont tip-icon">&#xe61d;</span>
<span className="select-num">已选择{selectVideo.length + selectLive.length + selectPicture.length }个</span>
</div>
<div>
<span className="clear-btn" onClick={this.clearSelectCourse}>清空</span>
</div>
</div>
<div className="related-box">该任务已关联{currentTaskCourseData.length}个课程，可继续选择{20- currentTaskCourseData.length }个</div>
</div>
<div>
<Table
rowKey={record => record.id}
dataSource={pictureDataSource}
columns={this.parsePictureColumns()}
pagination={false}
bordered
rowSelection={{
type: 'checkbox',
selectedRowKeys: _.pluck(selectPicture, 'id'),
onSelect: (record, selected) => {
this.selectPictureList(record, selected)
},
onSelectAll: (selected, _selectedRows, changeRows) => {
let _list = [];
if (selected) {
_list = _.uniq(selectPicture.concat(changeRows), false, (item) => item.id);
} else {
_list = _.reject(selectPicture, (item) => _.find(changeRows, (data) => data.id === item.id));
}
if(_list.length + currentTaskCourseData.length + selectVideo.length + selectLive.length> 20){
message.warning('无法继续选择，一个任务最多关联20个课程');
const extraLength = (_list.length + currentTaskCourseData.length + selectVideo.length + selectLive.length) -20;
_list.splice(_list.length - extraLength,extraLength);
}
this.setState({selectPicture:_list});
},
}}
/>
{pictureDataSource.length >0 &&
<div className="box-footer">
<PageControl
current={pictureQuery.current - 1}
pageSize={pictureSize}
size="small"
total={pictureTotalCount}
toPage={(page) => {
const _query = {...pictureQuery, current: page + 1};
this.setState({
pictureQuery:_query
},()=>{ this.handleFetchPictureDataList()})
}}
onShowSizeChange={this.onShowPictureSizeChange}
/>
</div>
}
</div>
</TabPane>
</Tabs>
</div>
</Modal>
......
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