Skip to content

X
xiaomai-cloud-class-web
Commit 1f8e9e38 by zhangleyuan
Options

feat:处理创建培训计划的接口

parent da09f281
Showing with 587 additions and 70 deletions
src/data-source/course/request-api.ts
/*
* @Author: wufan
* @Date: 2020-12-12 11:57:10
* @LastEditors: wufan
* @LastEditTime: 2021-01-06 20:18:16
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-28 13:47:38
* @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -52,6 +52,11 @@ export function turnOnOrOffLiveCloudCourse(params: object) {
export function delLiveCloudCourse(params: object) {
return Service.Hades("public/courseCloud/delLiveCloudCourse", params);
}
//该接口主要用于培训计划关联直播课的接口（会筛选掉已关联的直播课）
export function getLiveCloudCourseBasePage(params: object) {
return Service.Hades("public/courseCloud/getLiveCloudCourseBasePage", params);
}
//视频课相关接口
export function changeVideoShelfState(params: object) {
return Service.Hades("public/hades/changeVideoShelfState", params);
......@@ -76,4 +81,7 @@ export function videoSchedulePage(params: object) {
}
export function videoWatchInfo(params: object) {
return Service.Hades("public/hades/videoWatchInfo", params);
}
export function videoScheduleBasePage(params: object) {
return Service.Hades("public/hades/videoScheduleBasePage", params);
}
\ No newline at end of file
src/data-source/plan/request-apis.ts
......@@ -2,7 +2,7 @@
* @Author: zhangleyuan
* @Date: 2021-02-21 16:08:38
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-21 16:13:45
* @LastEditTime: 2021-02-28 17:51:46
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -10,4 +10,7 @@ import Service from "@/common/js/service";
export function getTrainingPlanPage(params: object) {
return Service.Hades("public/hades/getTrainingPlanPage", params);
}
\ No newline at end of file
}
export function createTrainingPlan(params: object) {
return Service.Hades("public/hades/createTrainingPlan", params);
}
src/domains/course-domain/CourseService.ts
/*
* @Author: wufan
* @Date: 2020-11-25 18:25:02
* @LastEditors: wufan
* @LastEditTime: 2021-01-06 20:17:40
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-28 15:15:37
* @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import {
fetchLecturerData, fetchUserData, exportStudentCourseData, exportPlayBackCourseData, fetchPlaybackList, createLiveCloudCourse, getLiveCloudCoursePage,
getLiveCloudCourseDetail, updateLiveCloudCourse, turnOnOrOffLiveCloudCourse, delLiveCloudCourse, changeVideoShelfState, createVideoSchedule, delVideoSchedule, editVideoSchedule, userWatchInfo, videoSchedulePage, videoScheduleDetail, videoWatchInfo, getQrcode
getLiveCloudCourseDetail, updateLiveCloudCourse, turnOnOrOffLiveCloudCourse, delLiveCloudCourse, changeVideoShelfState, createVideoSchedule, delVideoSchedule,
editVideoSchedule, userWatchInfo, videoSchedulePage, videoScheduleDetail, videoWatchInfo, getQrcode,getLiveCloudCourseBasePage,videoScheduleBasePage
} from '@/data-source/course/request-api';
export default class courseService {
......@@ -84,4 +85,10 @@ export default class courseService {
static videoWatchInfo(params: any) {
return videoWatchInfo(params);
}
static getLiveCloudCourseBasePage(params: any){
return getLiveCloudCourseBasePage(params);
}
static videoScheduleBasePage(params: any){
return videoScheduleBasePage(params);
}
}
\ No newline at end of file
src/domains/plan-domain/planService.ts
......@@ -2,14 +2,17 @@
* @Author: zhangleyuan
* @Date: 2021-02-21 16:15:38
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-21 16:20:15
* @LastEditTime: 2021-02-28 17:52:28
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import {getTrainingPlanPage} from '@/data-source/plan/request-apis';
import {getTrainingPlanPage,createTrainingPlan} from '@/data-source/plan/request-apis';
export default class PlanService {
// 获取员工列表
static getTrainingPlanPage(params: any) {
return getTrainingPlanPage(params);
}
static createTrainingPlan(params: any) {
return createTrainingPlan(params);
}
}
\ No newline at end of file
src/modules/plan-manage/AddPlan.jsx
......@@ -2,17 +2,19 @@
* @Author: zhangleyuan
* @Date: 2021-02-20 16:13:39
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-25 17:49:09
* @LastEditTime: 2021-02-28 19:05:50
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { useEffect, useState } from "react";
import { Button, message, Modal } from 'antd';
import { Button, message, Modal} from 'antd';
import ShowTips from "@/components/ShowTips";
import Breadcrumbs from "@/components/Breadcrumbs";
import BasicInfo from './components/BasicInfo';
import TrainingTask from './components/TrainingTask'
import PlanService from '@/domains/plan-domain/planService'
import User from '@/common/js/user';
import _ from "underscore";
import './AddPlan.less'
const DEFAULT_BASIC_DATA = {
planName:"",
......@@ -24,19 +26,48 @@ const DEFAULT_BASIC_DATA = {
percentCompleteVideo:80
}
function AddPlan() {
const [basicData,setBasicData] = useState(DEFAULT_BASIC_DATA);
const [basicData,setBasicData] = useState(DEFAULT_BASIC_DATA);
const [taskList,setTaskList] = useState([]);
function handleChangeBasicInfo(field, value){
console.log('field',value);
setBasicData( {
...basicData,
[field]: value,
})
}
function handleChangeTaskInfo(value){
setTaskList(value)
}
function submitInfo(){
const {planName,enableState,selectOperatorList,instro,operateType,percentCompleteLive,percentCompleteVideo} = basicData;
if(!planName){
message.warning('请输入的培训计划名称');
return;
}
if(taskList.length === 0){
message.warning('请输入培训计划内容');
return;
}
)
}
const params = {
createId:User.getStoreUserId(),
enableState,
operateIds:_.pluck(selectOperatorList,'id'),
operateType,
percentCompleteLive,
percentCompleteVideo,
planName,
scheduleMediaRequests:[],
storeId:User.getStoreId(),
trainingTaskList:taskList
}
PlanService.createTrainingPlan(params).then((res) => {
});
}
return (
<div className="page add-plan-page">
<Breadcrumbs
......@@ -56,13 +87,13 @@ function AddPlan() {
</div>
<div className="basic-info__wrap">
<div className="title">培训任务</div>
<TrainingTask/>
<TrainingTask onChange={handleChangeTaskInfo}/>
</div>
</div>
</div>
<div className="footer">
<Button>取消</Button>
<Button type="primary">保存</Button>
<Button type="primary" onClick={submitInfo}>保存</Button>
</div>
</div>
)
......
src/modules/plan-manage/PlanPage.jsx
......@@ -2,7 +2,7 @@
* @Author: zhangleyuan
* @Date: 2021-02-20 16:13:39
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-21 17:26:00
* @LastEditTime: 2021-02-28 19:37:07
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -13,27 +13,27 @@ import PlanList from './components/PlanList';
import PlanService from "@/domains/plan-domain/planService";
function PlanPage() {
const [planListData, setPlanListData] = useState([
{
name:'计划名称'
},
{
name:'计划名称'
}
]);
const [planListData, setPlanListData] = useState([]);
const [query,setQuery] = useState({
current:1,
size:10
size:10,
});
const [totalCount,setTotalCount] = useState(0)
function handleFetchPlanList(_query){
useEffect(() => {
handleFetchPlanList();
}, [query]);
const [totalCount,setTotalCount] = useState(0);
function queryChange(){
const params = {
...query,
..._query,
};
setQuery(params);
console.log(params);
}
function handleFetchPlanList(_query){
const params = {
...query,
..._query,
};
//动态获取计划列表
PlanService.getTrainingPlanPage(params).then((res) => {
const { result: { records = [], total } } = res;
......@@ -51,7 +51,7 @@ function PlanPage() {
planListData={planListData}
query={query}
totalCount={totalCount}
onChange={handleFetchPlanList}
onChange={queryChange}
/>
</div>
</div>
......
src/modules/plan-manage/components/PlanList.jsx
......@@ -2,7 +2,7 @@
* @Author: zhangleyuan
* @Date: 2021-02-20 16:46:46
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-21 15:46:25
* @LastEditTime: 2021-02-28 19:39:39
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -26,20 +26,20 @@ function PlanList(props) {
render: (val, record) => {
return (
<div className="plan__name">
培训计划名称培训计划名称
{val}
</div>
)
}
},
{
title: '课程总数量',
key: 'courseNumber',
dataIndex: 'courseNumber',
key: 'courseNum',
dataIndex: 'courseNum',
width: '10%',
render: (val, record) => {
return (
<div className="course-number">
20
{val}
</div>
)
}
......
src/modules/plan-manage/components/PlanOpt.jsx
......@@ -2,7 +2,7 @@
* @Author: zhangleyuan
* @Date: 2021-02-20 16:45:51
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-22 13:49:41
* @LastEditTime: 2021-02-28 15:41:33
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -12,11 +12,17 @@ import { withRouter } from 'react-router-dom';
import './PlanOpt.less';
function PlanOpt() {
function handleCreatePlan(){
window.RCHistory.push({
pathname: '/create-plan?type=add',
})
}
return (
<div className="plan-opt">
<Button
type="primary"
className="mr12"
onClick={handleCreatePlan}
>新建培训计划</Button>
</div>
);
......
src/modules/plan-manage/components/TrainingTask.jsx
......@@ -2,15 +2,16 @@
* @Author: zhangleyuan
* @Date: 2021-02-20 16:45:51
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-25 13:42:07
* @LastEditTime: 2021-02-28 17:49:30
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import { Table ,Button,Input,Form} from 'antd';
import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';
import { sortableContainer, sortableElement, sortableHandle} from 'react-sortable-hoc';
import { MenuOutlined } from '@ant-design/icons';
import arrayMove from 'array-move';
import RelatedCourseModal from '../modal/relatedCourseModal'
import { withRouter } from 'react-router-dom';
import './TrainingTask.less';
......@@ -90,6 +91,8 @@ class TrainingTask extends React.Component {
super(props);
this.state = {
dataSource: data,
selectedTaskIndex:0,
relatedCourseModalVisible:false
};
}
parseTaskColumns = ()=>{
......@@ -152,21 +155,22 @@ class TrainingTask extends React.Component {
render: (val, record) => {
return (
<div>
{record.type==='text'?
<span>{val}</span>
:
<Form>
<Form.Item
validateTrigger={['onChange', 'onBlur']}
name={['courseName']}
rules={[
{
required: true,
message: "请输入课程名称",
},
]}>
<Input defaultValue={record.courseName} style={{ width: 300 }} placeholder="请输入任务名称（40字以内）" maxLength={40} onChange={(e) => { this.handleRenameCourseName(e,record)}} onBlur={(e)=>{this.handleCourseNameBlur(e,record)}}/></Form.Item>
</Form>}
{record.type==='input'?
<Form>
<Form.Item
validateTrigger={['onChange', 'onBlur']}
name={['courseName']}
rules={[
{
required: true,
message: "请输入课程名称",
},
]}>
<Input defaultValue={record.courseName} style={{ width: 300 }} placeholder="请输入任务名称（40字以内）" maxLength={40} onChange={(e) => { this.handleRenameCourseName(e,record)}} onBlur={(e)=>{this.handleCourseNameBlur(e,record)}}/></Form.Item>
</Form>
:
<span>{record.courseName}</span>
}
</div>
)
}
......@@ -239,13 +243,14 @@ class TrainingTask extends React.Component {
const { value } = e.target;
const { dataSource } = this.state;
record.taskName = value;
this.props.onChange(dataSource);
}
handleTaskNameBlur = (e,record)=>{
const { value } = e.target;
const {dataSource}= this.state;
if(value){
record.type="text";
this.setState(dataSource);
this.setState({dataSource});
}
}
......@@ -253,6 +258,7 @@ class TrainingTask extends React.Component {
const { value } = e.target;
const { dataSource } = this.state;
record.courseName = value;
this.props.onChange(this.state.dataSource);
}
handleCourseNameBlur = (e,record)=>{
......@@ -260,14 +266,14 @@ class TrainingTask extends React.Component {
const {dataSource}= this.state;
if(value){
record.type="text";
this.setState(dataSource);
this.setState({dataSource});
}
}
handleDeleteTask = (index)=>{
const {dataSource}= this.state;
const newData=[...dataSource];
newData.splice(index,1);
this.setState({dataSource:newData});
this.setState({dataSource:newData},()=>{this.props.onChange(this.state.dataSource);});
}
handleDeleteCourse = (parentIndex,index)=>{
const {dataSource}= this.state;
......@@ -275,11 +281,37 @@ class TrainingTask extends React.Component {
const selectData = [...newData[parentIndex].courserList]
selectData.splice(index,1)
newData[parentIndex].courserList= selectData;
this.setState({dataSource:newData});
this.setState({dataSource:newData},()=>{this.props.onChange(this.state.dataSource);});
}
showRelatedCourseModal = (index)=>{
this.setState({
selectedTaskIndex:index,
relatedCourseModalVisible:true
})
}
closeRelatedCourseModal = (index)=>{
this.setState({
relatedCourseModalVisible:false
})
}
confirmSelectCourse = (selectList) =>{
const {dataSource,selectedTaskIndex}= this.state;
const newData=[...dataSource];
const selectData = [...newData[selectedTaskIndex].courserList]
const _selectData =[...selectData,...selectList];
newData[selectedTaskIndex].courserList= _selectData;
this.setState({
relatedCourseModalVisible:false,
dataSource:newData
},()=>{
this.props.onChange(dataSource);
})
}
render() {
const { dataSource } = this.state;
const { dataSource,selectedTaskIndex,relatedCourseModalVisible} = this.state;
return (
<div className="training-task">
<Table
......@@ -302,10 +334,10 @@ class TrainingTask extends React.Component {
// },
// }}
/>
<div><Button><span>+</span><span>关联课程</span></Button></div>
<div><Button onClick={()=>{this.showRelatedCourseModal(index)}}><span>+</span><span>关联课程</span></Button></div>
</div>
}else{
return <div><Button><span>+</span><span>关联课程</span></Button></div>;
return <div><Button onClick={()=>{this.showRelatedCourseModal(index)}}><span>+</span><span>关联课程</span></Button></div>;
}
}}
// components={{
......@@ -316,8 +348,18 @@ class TrainingTask extends React.Component {
// }}
/>
<div><Button onClick={()=>this.addTask()}><span>+</span><span>添加任务</span></Button></div>
{ relatedCourseModalVisible &&
<RelatedCourseModal
selectedTaskIndex={selectedTaskIndex}
data={dataSource}
visible={relatedCourseModalVisible}
onClose={this.closeRelatedCourseModal}
onSelect={this.confirmSelectCourse}
/>
}
</div>
);
}
}
......
src/modules/plan-manage/modal/relatedCourseModal.jsx 0 → 100644
import React from 'react';
import {Table, Modal,Input,message} from 'antd';
import { PageControl } from "@/components";
import CourseService from "@/domains/course-domain/CourseService";
import User from '@/common/js/user';
import { Tabs } from 'antd';
import './SelectOperatorModal.less';
import _ from "underscore";
import dealTimeDuration from "../../course-manage/utils/dealTimeDuration";
const { Search } = Input;
const { TabPane } = Tabs;
const courseStateShow = {
UN_START: {
code: 1,
title: "待开课",
color: "#FFB714",
},
STARTING: {
code: 2,
title: "上课中",
color: "#238FFF",
},
FINISH: {
code: 3,
title: "已完成",
color: "#3BBDAA",
},
EXPIRED: {
code: 4,
title: "未成功开课",
color: "#999",
},
};
class SelectOperatorModal extends React.Component {
constructor(props) {
super(props);
this.state = {
liveDataSource:[],
liveSize:10,
liveQuery: {
current: 1,
},
liveTotalCount:0,
selectLive:[],//弹窗内已选择的直播课程
currentLiveCourseListData:[], //页面中已关联的直播课程
videoDataSource:[],
videoSize:10,
videoQuery: {
current: 1,
},
videoTotalCount:0,
selectVideo:[], //弹窗内已选择的视频课程
currentVideoCourseListData:[], //页面中已关联的视频课程
}
}
componentDidMount() {
this.handleFetchLiveDataList();
this.handleFetchVideoDataList();
}
// 获取直播课列表
handleFetchLiveDataList = () => {
const {liveQuery,liveSize} = this.state;
const { selectedTaskIndex } =this.props;
const currentLiveCourseListData =[...this.props.data[selectedTaskIndex].courserList]
const _currentLiveCourseListData = currentLiveCourseListData.map((item,index) => {
if(item.liveCourseId){
return item
}
});
console.log('_currentLiveCourseListData',_currentLiveCourseListData);
const params ={
...liveQuery,
liveSize,
excludeCourseIdList:_.pluck(_currentLiveCourseListData,'liveCourseId')
}
CourseService.getLiveCloudCourseBasePage(params).then((res) => {
const { result = {} } = res ;
const { records = [], total = 0 } = result;
this.setState({
liveDataSource: records,
liveTotalCount: Number(total),
currentLiveCourseListData
});
});
}
// 获取视频课列表
handleFetchVideoDataList = () => {
const {videoQuery,videoSize,videoTotalCount} = this.state;
const { selectedTaskIndex } =this.props;
const currentVideoCourseListData =[...this.props.data[selectedTaskIndex].courserList];
const _currentVideoCourseListData = currentVideoCourseListData.map((item,index) => {
if(!item.liveCourseId){
return item
}
});
const params ={
...videoQuery,
videoSize,
excludeCourseIdList:_.pluck(_currentVideoCourseListData,'id')
}
CourseService.videoScheduleBasePage(params).then((res) => {
const { result = {} } = res ;
const { records = [], total = 0 } = result;
console.log('records',records);
this.setState({
videoDataSource: records,
videoTotalCount: Number(total)
});
});
}
handleChangNickname = (value)=>{
const isPhone = (value || '').match(/^\d+$/);
const { query } = this.state;
if(isPhone){
query.phone = value;
query.nickName = null;
}else{
query.nickName = value;
query.phone = null;
}
query.current = 1;
this.setState({
query
})
}
onShowLiveSizeChange = (current, size) => {
if (current == size) {
return
}
this.setState({
liveSize:size
},()=>{this.handleFetchLiveDataList()})
}
onShowVideoSizeChange = (current, size) => {
if (current == size) {
return
}
this.setState({
videoSize:size
},()=>{this.handleFetchLiveDataList()})
}
// 请求表头
parseLiveColumns = () => {
const columns = [
{
title: '课程信息',
key: 'course',
dataIndex: 'course',
render: (val, record) => {
let hasCover = false;
return (
<div className="record__item">
{
record.courseMediaVOS.map((item,index)=>{
if( item.contentType === "COVER"){
hasCover = true;
return <img className="course-cover" src={item.mediaUrl} style={{width:'100px',height:'50px'}}/>
}
})
}
{ !hasCover &&
<img className="course-cover" src={'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'} style={{width:'100px',height:'50px'}} />
}
<div className="course-name">{record.courseName}</div>
</div>
)
}
},
{
title: '课程状态',
key: 'courseState',
dataIndex: 'courseState',
render: (val, record) => {
return (
<span className="course-status">{courseStateShow[record.courseState].title}</span>
)
}
},
{
title: '上课时间',
key: 'courseTime',
dataIndex: 'courseTime',
render: (val, record) => {
return (
<span>{formatDate('YYYY-MM-DD H:i', record.startTime) - formatDate('YYYY-MM-DD H:i', record.endTime) }</span>
)
}
}
];
return columns;
}
// 请求表头
parseVideoColumns = () => {
const columns = [
{
title: '课程信息',
key: 'course',
dataIndex: 'course',
render: (val, record) => {
const { coverUrl, scheduleVideoUrl } = record;
return (
<div className="record__item">
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
<img className="course-cover" src={coverUrl || `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`} style={{width:'100px',height:'50px'}}/>
<div className="course-name">{record.courseName}</div>
</div>
)
}
},
{
title: '课程时长',
key: 'courseTime',
dataIndex: 'courseTime',
render: (val, record) => {
return (
<span className="course-status">{dealTimeDuration(record.videoDuration)}</span>
)
}
},
{
title: '课程大小',
key: 'size',
dataIndex: 'size',
render: (val, record) => {
return (
<span>{(val/1024).toFixed(1)}M</span>
)
}
}
];
return columns;
}
selectLiveList = (record,selected) =>{
const {selectVideo,currentVideoCourseListData,currentLiveCourseListData,selectLive} = 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 + currentVideoCourseListData.length + currentLiveCourseListData.length + selectVideo> 20){
message.warning('无法继续选择，一个任务最多关联20个课程');
return;
}
this.setState({selectLive:_list});
}
selectVideoList = (record,selected) =>{
const {selectVideo,currentVideoCourseListData,currentLiveCourseListData,selectLive} = 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 + currentVideoCourseListData.length + currentLiveCourseListData.length + selectLive> 20){
message.warning('无法继续选择，一个任务最多关联20个课程');
return;
}
this.setState({selectVideo:_list});
}
clearSelectCourse = ()=>{
this.setState({
selectLive:[],
selectVideo:[]
})
}
render() {
const { visible } = this.props;
const { liveDataSource,liveSize,liveQuery,liveTotalCount,selectLive,currentLiveCourseListData,videoDataSource,videoSize,videoQuery,videoTotalCount,selectVideo,currentVideoCourseListData} = this.state;
return (
<Modal
title="关联课程"
onCancel={this.props.onClose}
maskClosable={false}
visible={visible}
className="select-operator-modal"
closable={true}
width={800}
onOk={() => this.props.onSelect([...selectVideo,...selectLive]) }
>
<div>
<Tabs defaultActiveKey="1">
<TabPane tab="视频课" key="1">
<div className="search-container">
<Search placeholder="搜索课程名称" style={{ width: 200 }} />
</div>
<div>
<span>
<span className="iconfont">&#xe61d;</span>
<span>已选择{selectVideo.length + selectLive.length}个</span>
<span onClick={this.clearSelectCourse}>清空</span>
</span>
<span>该任务已关联{currentVideoCourseListData.length + currentLiveCourseListData.length}个课程，可继续选择{20-(currentVideoCourseListData.length + currentLiveCourseListData.length )}个</span>
</div>
<div>
<Table
rowKey={record => record.id}
dataSource={videoDataSource}
columns={this.parseVideoColumns()}
pagination={false}
rowSelection={{
type: 'checkbox',
selectedRowKeys: _.pluck(selectVideo, 'id'),
onSelect: (record, selected) => {
this.selectVideoList(record, selected);
},
onSelectAll: (selected, _selectedRows, changeRows) => {
let _list = [];
if (selected) {
_list = _.uniq(selectVideo.concat(changeRows), false, (item) => item.id);
} else {
_list = _.reject(selectVideo, (item) => _.find(changeRows, (data) => data.id === item.id));
}
this.setState({selectVideo:_list});
},
}}
/>
{videoDataSource.length >0 &&
<div className="box-footer">
<PageControl
current={videoQuery.current - 1}
pageSize={videoSize}
total={videoTotalCount}
toPage={(page) => {
const _query = {...videoQuery, current: page + 1};
this.setState({
videoQuery:_query
},()=>{ this.handleFetchVideoDataList()})
}}
onShowVideoSizeChange={this.onShowVideoSizeChange}
/>
</div>
}
</div>
</TabPane>
<TabPane tab="直播课" key="2">
<div className="search-container">
<Search placeholder="搜索课程名称" style={{ width: 200 }} />
</div>
<div>
<span>
<span className="iconfont">&#xe61d;</span>
<span>已选择{selectVideo.length + selectLive.length}个</span>
<span onClick={this.clearSelectCourse}>清空</span>
</span>
<span>该任务已关联{currentVideoCourseListData.length + currentLiveCourseListData.length}个课程，可继续选择{20-(currentVideoCourseListData.length + currentLiveCourseListData.length )}个</span>
</div>
<div>
<Table
rowKey={record => record.liveCourseId}
dataSource={liveDataSource}
columns={this.parseLiveColumns()}
pagination={false}
rowSelection={{
type: 'checkbox',
selectedRowKeys: _.pluck(selectLive, 'liveCourseId'),
onSelect: (record, selected) => {
this.selectLiveList(record, selected)
},
onSelectAll: (selected, _selectedRows, changeRows) => {
let _list = [];
if (selected) {
_list = _.uniq(selectLive.concat(changeRows), false, (item) => item.liveCourseId);
} else {
_list = _.reject(selectLive, (item) => _.find(changeRows, (data) => data.liveCourseId === item.liveCourseId));
}
this.setState({selectLive:_list});
},
}}
/>
{liveDataSource.length >0 &&
<div className="box-footer">
<PageControl
current={liveQuery.current - 1}
pageSize={liveSize}
total={liveTotalCount}
toPage={(page) => {
const _query = {...liveQuery, current: page + 1};
this.setState({
liveQuery:_query
},()=>{ this.handleFetchLiveDataList()})
}}
onShowLiveSizeChange={this.onShowLiveSizeChange}
/>
</div>
}
</div>
</TabPane>
</Tabs>
</div>
</Modal>
)
}
}
export default SelectOperatorModal;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment