Skip to content

X
xiaomai-cloud-class-web
Commit 69d5ebe6 by yuananting
Options

feat:培训计划模板空状态默认图替换

parent 9e611ef6
Showing with 664 additions and 578 deletions
src/modules/plan-manage/components/EmployeeShareData.jsx
import React from 'react';
import { withRouter } from "react-router-dom";
import {Table, Modal,Input,message} from 'antd';
import { PageControl } from "@/components";
import PlanService from '@/domains/plan-domain/planService'
import { withRouter } from 'react-router-dom';
import { Input } from 'antd';
import { PageControl, XMTable } from '@/components';
import college from '@/common/lottie/college';
import PlanService from '@/domains/plan-domain/planService';
import User from '@/common/js/user';
import Bus from '@/core/bus';
import './EmployeeShareData.less';
......@@ -10,103 +11,129 @@ import './EmployeeShareData.less';
const { Search } = Input;
const UserRole = {
Store_Manager: {
text: "学院管理员"
text: '学院管理员',
},
Cloud_Manager: {
text:"管理员"
text: '管理员',
},
Cloud_Operator: {
text:'运营师'
text: '运营师',
},
Cloud_Lecture: {
text:"讲师"
text: '讲师',
},
};
class EmployeeShareData extends React.Component {
constructor(props) {
super(props);
const id = getParameterByName("id");
const id = getParameterByName('id');
this.state = {
id,
dataSource:[],
size:10,
dataSource: [],
size: 10,
query: {
current: 1,
},
totalCount:0,
}
totalCount: 0,
};
}
componentDidMount(){
componentDidMount() {
this.handleFetchDataList();
}
handleFetchDataList = ()=>{
const { query ,size,id} = this.state;
const params ={
handleFetchDataList = () => {
const { query, size, id } = this.state;
const params = {
...query,
size,
planId:id,
storeId:User.getStoreId(),
}
planId: id,
storeId: User.getStoreId(),
};
PlanService.getPlanUserRecordPage(params).then((res) => {
const { result = {} } = res ;
const { result = {} } = res;
const { records = [], total = 0 } = result;
this.setState({
dataSource: records,
totalCount: Number(total)
dataSource: records,
totalCount: Number(total),
});
});
}
};
onShowSizeChange = (current, size) => {
if (current == size) {
return
return;
}
this.setState({
size
},()=>{this.handleFetchDataList()})
}
handleChangeTable = (pagination, filters, sorter)=> {
this.setState(
{
size,
},
() => {
this.handleFetchDataList();
}
);
};
handleChangeTable = (pagination, filters, sorter) => {
const { columnKey, order } = sorter;
const { query } = this.state;
let _columnKey;
let _columnKey;
let _order;
if (columnKey === 'learnNum' && order === 'ascend') { _columnKey="LEARN_NUM"; _order = 'SORT_ASC'; }
if (columnKey === 'learnNum' && order === 'descend') { _columnKey="LEARN_NUM"; _order = 'SORT_DESC'; }
if (columnKey === 'learnNum' && order === 'ascend') {
_columnKey = 'LEARN_NUM';
_order = 'SORT_ASC';
}
if (columnKey === 'learnNum' && order === 'descend') {
_columnKey = 'LEARN_NUM';
_order = 'SORT_DESC';
}
if (columnKey === 'learnFinishNum' && order === 'ascend') { _columnKey="FINISH_NUM"; _order = 'SORT_ASC'; }
if (columnKey === 'learnFinishNum' && order === 'descend') { _columnKey="FINISH_NUM"; _order = 'SORT_DESC'; }
if (columnKey === 'learnFinishNum' && order === 'ascend') {
_columnKey = 'FINISH_NUM';
_order = 'SORT_ASC';
}
if (columnKey === 'learnFinishNum' && order === 'descend') {
_columnKey = 'FINISH_NUM';
_order = 'SORT_DESC';
}
if (columnKey === 'learnNoFinishNum' && order === 'ascend') { _columnKey="NOT_NUM"; _order = 'SORT_ASC'; }
if (columnKey === 'learnNoFinishNum' && order === 'descend') { _columnKey="NOT_NUM"; _order = 'SORT_DESC'; }
if (columnKey === 'learnNoFinishNum' && order === 'ascend') {
_columnKey = 'NOT_NUM';
_order = 'SORT_ASC';
}
if (columnKey === 'learnNoFinishNum' && order === 'descend') {
_columnKey = 'NOT_NUM';
_order = 'SORT_DESC';
}
const _query = {
...query,
sortMap:{}
sortMap: {},
};
_query.sortMap[_columnKey]=_order;
_query.sortMap[_columnKey] = _order;
this.setState(
{
query: _query,
},
() => this.handleFetchDataList()
);
};
handleChangNickname = (value) => {
const isPhone = (value || '').match(/^\d+$/);
const { query } = this.state;
if (isPhone) {
query.userPhone = value;
query.userName = null;
} else {
query.userName = value;
query.userPhone = null;
}
query.current = 1;
this.setState({
query:_query
},()=>this.handleFetchDataList())
}
handleChangNickname = (value)=>{
const isPhone = (value || '').match(/^\d+$/);
const { query } = this.state;
if(isPhone){
query.userPhone = value;
query.userName = null;
}else{
query.userName = value;
query.userPhone = null;
}
query.current = 1;
this.setState({
query
})
}
watchDataView = (record)=>{
Bus.trigger('watchDataView',record);
}
query,
});
};
watchDataView = (record) => {
Bus.trigger('watchDataView', record);
};
// 请求表头
parselumns = () => {
const columns = [
......@@ -115,24 +142,16 @@ class EmployeeShareData extends React.Component {
key: 'storeUserName',
dataIndex: 'storeUserName',
render: (val, record) => {
return (
<div>
{val}
</div>
)
}
return <div>{val}</div>;
},
},
{
title: '角色',
key: 'roleEnum',
dataIndex: 'roleEnum',
render: (val, record) => {
return (
<div>
{UserRole[record.roleEnum].text}
</div>
)
}
return <div>{UserRole[record.roleEnum].text}</div>;
},
},
//产品暂时性隐藏
// {
......@@ -151,28 +170,20 @@ class EmployeeShareData extends React.Component {
title: '最近分享成功时间',
key: 'recentlyForwardTime',
dataIndex: 'recentlyForwardTime',
width:240,
width: 240,
render: (val, record) => {
return (
<div>
{formatDate('YYYY-MM-DD H:i', val)}
</div>
)
}
return <div>{formatDate('YYYY-MM-DD H:i', val)}</div>;
},
},
{
title: '学习人数',
key: 'learnNum',
dataIndex: 'learnNum',
width:110,
sorter:true,
width: 110,
sorter: true,
render: (val, record) => {
return (
<div className="learn-num">
{val}
</div>
)
}
return <div className='learn-num'>{val}</div>;
},
},
// {
// title: '已学完',
......@@ -208,51 +219,71 @@ class EmployeeShareData extends React.Component {
dataIndex: 'operate',
render: (val, record) => {
return (
<span className="operate-item" onClick={()=>this.watchDataView(record)}>数据详情</span>
)
}
}
<span className='operate-item' onClick={() => this.watchDataView(record)}>
数据详情
</span>
);
},
},
];
return columns;
}
};
render() {
const { dataSource,query,size,totalCount} = this.state;
const { dataSource, query, size, totalCount } = this.state;
return (
<div className="employee-share-data">
<div className="search-container">
<Search placeholder="搜索员工姓名或手机号" onChange={(e) => { this.handleChangNickname(e.target.value)}} onSearch={ () => { this.handleFetchDataList()}} style={{ width: 200 }} enterButton={<span className="icon iconfont">&#xe832;</span>}/>
<div className='employee-share-data'>
<div className='search-container'>
<Search
placeholder='搜索员工姓名或手机号'
onChange={(e) => {
this.handleChangNickname(e.target.value);
}}
onSearch={() => {
this.handleFetchDataList();
}}
style={{ width: 200 }}
enterButton={<span className='icon iconfont'>&#xe832;</span>}
/>
</div>
<div>
<Table
rowKey={record => record.id}
dataSource={dataSource}
columns={this.parselumns()}
pagination={false}
onChange={this.handleChangeTable}
showSorterTooltip={false}
bordered
<XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.id}
dataSource={dataSource}
columns={this.parselumns()}
pagination={false}
onChange={this.handleChangeTable}
showSorterTooltip={false}
bordered
/>
{dataSource.length > 0 && (
<div className='box-footer'>
<PageControl
current={query.current - 1}
pageSize={size}
total={totalCount}
toPage={(page) => {
const _query = { ...query, current: page + 1 };
this.setState(
{
query: _query,
},
() => {
this.handleFetchDataList();
}
);
}}
onShowSizeChange={this.onShowSizeChange}
/>
{dataSource.length >0 &&
<div className="box-footer">
<PageControl
current={query.current - 1}
pageSize={size}
total={totalCount}
toPage={(page) => {
const _query = {...query, current: page + 1};
this.setState({
query:_query
},()=>{ this.handleFetchDataList()})
}}
onShowSizeChange={this.onShowSizeChange}
/>
</div>
}
</div>
)}
</div>
</div>
)
);
}
}
export default withRouter(EmployeeShareData);
\ No newline at end of file
export default withRouter(EmployeeShareData);
src/modules/plan-manage/components/UserLearningData.jsx
import React from 'react'
import { withRouter } from 'react-router-dom'
import { Table, Modal, message, Tooltip } from 'antd'
import { PageControl } from '@/components'
import UserLearningDataFilter from './UserLearningDataFilter'
import PlanService from '@/domains/plan-domain/planService'
import UserLearnDetailModal from '../modal/UserLearnDetailModal'
import UnbundEmployeeModal from '../modal/UnbundEmployeeModal'
import User from '@/common/js/user'
import './UserLearningData.less'
const { confirm } = Modal
import React from 'react';
import { withRouter } from 'react-router-dom';
import { Modal, message, Tooltip } from 'antd';
import { PageControl, XMTable } from '@/components';
import college from '@/common/lottie/college';
import UserLearningDataFilter from './UserLearningDataFilter';
import PlanService from '@/domains/plan-domain/planService';
import UserLearnDetailModal from '../modal/UserLearnDetailModal';
import UnbundEmployeeModal from '../modal/UnbundEmployeeModal';
import User from '@/common/js/user';
import './UserLearningData.less';
const { confirm } = Modal;
const LearnState = {
UN_PLAY: {
text: '未开始',
......@@ -19,12 +20,12 @@ const LearnState = {
FINISH: {
text: '已完成',
},
}
};
class UserLearningData extends React.Component {
constructor(props) {
super(props)
const id = getParameterByName('id')
super(props);
const id = getParameterByName('id');
this.state = {
id,
dataSource: [],
......@@ -35,13 +36,13 @@ class UserLearningData extends React.Component {
totalCount: 0,
userLearnDetailModalSHow: false,
unbundEmployeeModalVisible: false,
}
};
}
componentDidMount() {
this.handleFetchDataList()
this.handleFetchDataList();
}
handleFetchDataList = (_query) => {
const { query, size, id } = this.state
const { query, size, id } = this.state;
const params = {
...query,
..._query,
......@@ -49,88 +50,88 @@ class UserLearningData extends React.Component {
planId: id,
storeId: User.getStoreId(),
storeUserId: User.getStoreUserId(),
}
this.setState({ query: params })
};
this.setState({ query: params });
PlanService.getPlanCustomerRecordPage(params).then((res) => {
const { result = {} } = res
const { records = [], total = 0 } = result
const { result = {} } = res;
const { records = [], total = 0 } = result;
this.setState({
dataSource: records,
totalCount: Number(total),
})
})
}
});
});
};
onShowSizeChange = (current, size) => {
if (current == size) {
return
return;
}
this.setState(
{
size,
},
() => {
this.handleFetchDataList()
this.handleFetchDataList();
}
)
}
);
};
handleChangeTable = (pagination, filters, sorter) => {
const { columnKey, order } = sorter
const { query } = this.state
let _columnKey
let _order
const { columnKey, order } = sorter;
const { query } = this.state;
let _columnKey;
let _order;
if (columnKey === 'latelyLearnTime' && order === 'ascend') {
_columnKey = 'LATE_LEARN_TIME'
_order = 'SORT_ASC'
_columnKey = 'LATE_LEARN_TIME';
_order = 'SORT_ASC';
}
if (columnKey === 'latelyLearnTime' && order === 'descend') {
_columnKey = 'LATE_LEARN_TIME'
_order = 'SORT_DESC'
_columnKey = 'LATE_LEARN_TIME';
_order = 'SORT_DESC';
}
if (columnKey === 'startLearnTime' && order === 'ascend') {
_columnKey = 'START_LEARN_TIME'
_order = 'SORT_ASC'
_columnKey = 'START_LEARN_TIME';
_order = 'SORT_ASC';
}
if (columnKey === 'startLearnTime' && order === 'descend') {
_columnKey = 'START_LEARN_TIME'
_order = 'SORT_DESC'
_columnKey = 'START_LEARN_TIME';
_order = 'SORT_DESC';
}
if (columnKey === 'learnNum' && order === 'ascend') {
_columnKey = 'LEARN_NUM'
_order = 'SORT_ASC'
_columnKey = 'LEARN_NUM';
_order = 'SORT_ASC';
}
if (columnKey === 'learnNum' && order === 'descend') {
_columnKey = 'LEARN_NUM'
_order = 'SORT_DESC'
_columnKey = 'LEARN_NUM';
_order = 'SORT_DESC';
}
const _query = {
...query,
sortMap: {},
}
_query.sortMap[_columnKey] = _order
};
_query.sortMap[_columnKey] = _order;
this.setState(
{
query: _query,
},
() => this.handleFetchDataList()
)
}
);
};
watchDetail = (record) => {
this.setState({
userLearnDetailModalSHow: true,
storeCustomerId: record.storeCustomerId,
planId: record.planId,
})
}
});
};
closeUserLearnDetailModal = () => {
this.setState({
userLearnDetailModalSHow: false,
})
}
});
};
UnbundEmployee = (record) => {
if (User.getUserRole() === 'CloudOperator') {
return confirm({
......@@ -141,40 +142,40 @@ class UserLearningData extends React.Component {
okType: 'danger',
cancelText: '取消',
onOk: () => {
this.handleConfirmUnbundEmployee(record.storeCustomerId)
this.handleConfirmUnbundEmployee(record.storeCustomerId);
},
})
});
} else {
this.setState({
unbundEmployeeModalVisible: true,
storeCustomerId: record.storeCustomerId,
})
});
}
}
};
handleConfirmUnbundEmployee = (storeCustomerId) => {
let removeUserIds = []
removeUserIds.push(storeCustomerId)
let removeUserIds = [];
removeUserIds.push(storeCustomerId);
const params = {
planId: getParameterByName('id'),
removeUserIds,
storeCustomerId: storeCustomerId,
storeId: User.getStoreId(),
storeUserId: User.getStoreUserId(),
}
};
PlanService.removePlanCustomer(params).then((res) => {
this.handleFetchDataList()
message.success('解绑成功')
})
}
this.handleFetchDataList();
message.success('解绑成功');
});
};
handleCloseUnbundEmployeeModal = () => {
this.setState({
unbundEmployeeModalVisible: false,
})
}
});
};
// 请求表头
parselumns = () => {
let columns
let columns;
if (User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') {
columns = [
{
......@@ -182,7 +183,7 @@ class UserLearningData extends React.Component {
key: 'storeCustomerName',
dataIndex: 'storeCustomerName',
render: (val, record) => {
return <div>{val}</div>
return <div>{val}</div>;
},
},
{
......@@ -190,14 +191,20 @@ class UserLearningData extends React.Component {
key: 'learnState',
dataIndex: 'learnState',
render: (val, record) => {
return <div>{LearnState[val].text}</div>
return <div>{LearnState[val].text}</div>;
},
},
{
title: <span>
<span>负责人</span>
<Tooltip title="培训计划的分享者/跟进人"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px',fontWeight:"400"}}>&#xe61d;</i></Tooltip>
</span>,
title: (
<span>
<span>负责人</span>
<Tooltip title='培训计划的分享者/跟进人'>
<i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px', fontWeight: '400' }}>
&#xe61d;
</i>
</Tooltip>
</span>
),
key: 'userNameList',
dataIndex: 'userNameList',
render: (val, record) => {
......@@ -208,10 +215,10 @@ class UserLearningData extends React.Component {
<span>
{item} {index < record.userNameList.length - 1 && <span> 、</span>}{' '}
</span>
)
);
})}
</div>
)
);
},
},
{
......@@ -221,7 +228,7 @@ class UserLearningData extends React.Component {
sorter: true,
width: 240,
render: (val, record) => {
return `${formatDate('YYYY-MM-DD H:i', parseInt(record.latelyLearnTime))}`
return `${formatDate('YYYY-MM-DD H:i', parseInt(record.latelyLearnTime))}`;
},
},
{
......@@ -231,14 +238,20 @@ class UserLearningData extends React.Component {
width: 240,
sorter: true,
render: (val, record) => {
return <div>{formatDate('YYYY-MM-DD H:i', val)}</div>
return <div>{formatDate('YYYY-MM-DD H:i', val)}</div>;
},
},
{
title: <span>
<span>学习进度</span>
<Tooltip title="学员培训计划中达到“已完成”状态的课程数/总课程数"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px', fontWeight:"400"}}>&#xe61d;</i></Tooltip>
</span>,
title: (
<span>
<span>学习进度</span>
<Tooltip title='学员培训计划中达到“已完成”状态的课程数/总课程数'>
<i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px', fontWeight: '400' }}>
&#xe61d;
</i>
</Tooltip>
</span>
),
key: 'learnNum',
dataIndex: 'learnNum',
width: 130,
......@@ -250,7 +263,7 @@ class UserLearningData extends React.Component {
<span>/</span>
<span>{record.courseNum}</span>
</div>
)
);
},
},
{
......@@ -267,15 +280,15 @@ class UserLearningData extends React.Component {
<span
className='operate-item'
onClick={() => {
this.UnbundEmployee(record)
this.UnbundEmployee(record);
}}>
解绑
</span>
</div>
)
);
},
},
]
];
} else {
columns = [
{
......@@ -283,7 +296,7 @@ class UserLearningData extends React.Component {
key: 'storeCustomerName',
dataIndex: 'storeCustomerName',
render: (val, record) => {
return <div>{val}</div>
return <div>{val}</div>;
},
},
{
......@@ -291,7 +304,7 @@ class UserLearningData extends React.Component {
key: 'learnState',
dataIndex: 'learnState',
render: (val, record) => {
return <div>{LearnState[val].text}</div>
return <div>{LearnState[val].text}</div>;
},
},
{
......@@ -300,7 +313,7 @@ class UserLearningData extends React.Component {
dataIndex: 'latelyLearnTime',
sorter: true,
render: (val, record) => {
return <div>{formatDate('YYYY-MM-DD H:i', val)}</div>
return <div>{formatDate('YYYY-MM-DD H:i', val)}</div>;
},
},
{
......@@ -309,7 +322,7 @@ class UserLearningData extends React.Component {
dataIndex: 'startLearnTime',
sorter: true,
render: (val, record) => {
return <div>{formatDate('YYYY-MM-DD H:i', val)}</div>
return <div>{formatDate('YYYY-MM-DD H:i', val)}</div>;
},
},
{
......@@ -333,7 +346,7 @@ class UserLearningData extends React.Component {
<span>/</span>
<span>{record.courseNum}</span>
</div>
)
);
},
},
{
......@@ -350,28 +363,32 @@ class UserLearningData extends React.Component {
<span
className='operate-item'
onClick={() => {
this.UnbundEmployee(record)
this.UnbundEmployee(record);
}}>
解绑
</span>
</div>
)
);
},
},
]
];
}
return columns
}
return columns;
};
render() {
const { dataSource, query, size, totalCount, userLearnDetailModalSHow, storeCustomerId, planId, unbundEmployeeModalVisible } = this.state
const { dataSource, query, size, totalCount, userLearnDetailModalSHow, storeCustomerId, planId, unbundEmployeeModalVisible } = this.state;
return (
<div className='user-learning-data'>
<div className='search-container'>
<UserLearningDataFilter onChange={this.handleFetchDataList} />
</div>
<div>
<Table
<XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.storeCustomerId}
dataSource={dataSource}
columns={this.parselumns()}
......@@ -388,15 +405,15 @@ class UserLearningData extends React.Component {
pageSize={size}
total={totalCount}
toPage={(page) => {
const _query = { ...query, current: page + 1 }
const _query = { ...query, current: page + 1 };
this.setState(
{
query: _query,
},
() => {
this.handleFetchDataList()
this.handleFetchDataList();
}
)
);
}}
onShowSizeChange={this.onShowSizeChange}
/>
......@@ -412,14 +429,14 @@ class UserLearningData extends React.Component {
onClose={this.handleCloseUnbundEmployeeModal}
storeCustomerId={storeCustomerId}
onConfirm={() => {
this.handleFetchDataList()
this.handleCloseUnbundEmployeeModal()
this.handleFetchDataList();
this.handleCloseUnbundEmployeeModal();
}}
/>
)}
</div>
)
);
}
}
export default withRouter(UserLearningData)
export default withRouter(UserLearningData);
src/modules/plan-manage/modal/relatedCourseModal.jsx
import React from "react"
import _ from "underscore"
import { Table, Radio, Tabs, Modal, Input, message, Button, Tooltip } from "antd"
import React from 'react';
import _ from 'underscore';
import { Table, Radio, Tabs, Modal, Input, message, Button, Tooltip } from 'antd';
import { PageControl } from "@/components"
import { PageControl, XMTable } from '@/components';
import college from '@/common/lottie/college';
import CourseService from "@/domains/course-domain/CourseService"
import User from "@/common/js/user"
import Service from "@/common/js/service"
import dealTimeDuration from "../../course-manage/utils/dealTimeDuration"
import CourseService from '@/domains/course-domain/CourseService';
import User from '@/common/js/user';
import Service from '@/common/js/service';
import dealTimeDuration from '../../course-manage/utils/dealTimeDuration';
import "./relatedCourseModal.less"
import './relatedCourseModal.less';
const { Search } = Input
const { TabPane } = Tabs
const { Search } = Input;
const { TabPane } = Tabs;
const courseStateShow = {
UN_START: {
code: 1,
title: "待开课",
color: "#FFB129",
title: '待开课',
color: '#FFB129',
},
STARTING: {
code: 2,
title: "上课中",
color: "#238FFF"
title: '上课中',
color: '#238FFF',
},
FINISH: {
code: 3,
title: "已完成",
color: "#3BBDAA"
title: '已完成',
color: '#3BBDAA',
},
EXPIRED: {
code: 4,
title: "未成功开课",
color: "#999"
}
}
title: '未成功开课',
color: '#999',
},
};
class SelectOperatorModal extends React.Component {
constructor(props) {
super(props)
super(props);
this.state = {
liveDataSource: [],
liveSize: 10,
liveQuery: {
current: 1
current: 1,
},
liveTotalCount: 0,
selectLive: [], //弹窗内已选择的直播课程
currentCourseListData: [],
currentLiveCourseListData: [], //页面中已关联的直播课程
videoCourseDivision: "internal",
videoCourseDivision: 'internal',
videoDataSource: {
external: [],
internal: []
internal: [],
},
videoSize: {
external: 10,
internal: 10
internal: 10,
},
videoSearchName: {
external: "",
internal: ""
external: '',
internal: '',
},
videoSearchDefalt: "",
videoSearchDefalt: '',
videoQuery: {
external: {
current: 1
current: 1,
},
internal: {
current: 1
}
current: 1,
},
},
videoTotalCount: {
external: 0,
internal: 0
internal: 0,
},
selectVideo: {
external: [],
internal: []
internal: [],
}, //弹窗内已选择的视频课程
currentVideoCourseListData: {
external: [],
internal: []
internal: [],
}, //页面中已关联的视频课程
pictureDataSource: [],
pictureSize: 10,
pictureQuery: {
current: 1
current: 1,
},
pictureTotalCount: 0,
selectPicture: [], //弹窗内已选择的视频课程
currentPictureCourseListData: [], //页面中已关联的视频课程
activeKey: "video",
currentTaskCourseData: this.props.data[this.props.selectedTaskIndex].courseList || []
}
activeKey: 'video',
currentTaskCourseData: this.props.data[this.props.selectedTaskIndex].courseList || [],
};
}
componentDidMount() {
this.handleFetchLiveDataList()
this.handleFetchVideoDataList()
this.handleFetchPictureDataList()
this.handleFetchLiveDataList();
this.handleFetchVideoDataList();
this.handleFetchPictureDataList();
}
// 获取直播课列表
handleFetchLiveDataList = () => {
const { liveQuery, liveSize } = this.state
const _data = [...this.props.data]
let currentLiveCourseListData = []
const { liveQuery, liveSize } = this.state;
const _data = [...this.props.data];
let currentLiveCourseListData = [];
_data.map((item) => {
item.courseList.map((childItem, childIndex) => {
if (childItem.courseType === "LIVE") {
currentLiveCourseListData.push(childItem.courseId)
if (childItem.courseType === 'LIVE') {
currentLiveCourseListData.push(childItem.courseId);
}
return childItem
})
return item
})
return childItem;
});
return item;
});
const params = {
...liveQuery,
size: liveSize,
excludeCourseIdList: currentLiveCourseListData
}
excludeCourseIdList: currentLiveCourseListData,
};
CourseService.getLiveCloudCourseBasePage(params).then((res) => {
const { result = {} } = res
const { records = [], total = 0 } = result
const { result = {} } = res;
const { records = [], total = 0 } = result;
this.setState({
liveDataSource: records,
liveTotalCount: Number(total),
currentLiveCourseListData
})
})
}
currentLiveCourseListData,
});
});
};
// 获取视频课列表
handleFetchVideoDataList = () => {
const { videoQuery, videoSize, videoDataSource, videoTotalCount, videoCourseDivision } = this.state
const { videoQuery, videoSize, videoDataSource, videoTotalCount, videoCourseDivision } = this.state;
const _data = [...this.props.data]
let currentVideoCourseListData = []
const _data = [...this.props.data];
let currentVideoCourseListData = [];
_data.map((item, index) => {
item.courseList.map((childItem, childIndex) => {
if (childItem.courseType === "VOICE") {
currentVideoCourseListData.push(childItem.courseId)
if (childItem.courseType === 'VOICE') {
currentVideoCourseListData.push(childItem.courseId);
}
return childItem
})
return item
})
return childItem;
});
return item;
});
const params = {
...videoQuery[videoCourseDivision],
size: videoSize[videoCourseDivision],
courseDivision: videoCourseDivision === "internal" ? "INTERNAL" : "EXTERNAL",
excludeCourseIdList: currentVideoCourseListData
}
courseDivision: videoCourseDivision === 'internal' ? 'INTERNAL' : 'EXTERNAL',
excludeCourseIdList: currentVideoCourseListData,
};
CourseService.videoScheduleBasePage(params).then((res) => {
const { result = {} } = res
console.log("result", result)
const { result = {} } = res;
console.log('result', result);
const { records = [], total = 0 } = result
const { records = [], total = 0 } = result;
this.setState({
videoDataSource: {
...videoDataSource,
[videoCourseDivision]: records
[videoCourseDivision]: records,
},
videoTotalCount: {
...videoTotalCount,
[videoCourseDivision]: Number(total)
[videoCourseDivision]: Number(total),
},
currentVideoCourseListData
})
})
}
currentVideoCourseListData,
});
});
};
// 获取图文课列表
handleFetchPictureDataList = () => {
const { pictureQuery, pictureSize } = this.state
const _data = [...this.props.data]
let currentPictureCourseListData = []
const { pictureQuery, pictureSize } = this.state;
const _data = [...this.props.data];
let currentPictureCourseListData = [];
_data.map((item, index) => {
item.courseList.map((childItem, childIndex) => {
if (childItem.courseType === "PICTURE") {
currentPictureCourseListData.push(childItem.courseId)
if (childItem.courseType === 'PICTURE') {
currentPictureCourseListData.push(childItem.courseId);
}
return childItem
})
return item
})
return childItem;
});
return item;
});
const params = {
...pictureQuery,
size: pictureSize,
courseType: "PICTURE",
courseType: 'PICTURE',
storeId: User.getStoreId(),
excludeCourseIdList: currentPictureCourseListData
}
excludeCourseIdList: currentPictureCourseListData,
};
Service.Hades("public/hades/mediaCoursePage", params).then((res) => {
const { result = {} } = res
const { records = [], total = 0 } = result
Service.Hades('public/hades/mediaCoursePage', params).then((res) => {
const { result = {} } = res;
const { records = [], total = 0 } = result;
this.setState({
pictureDataSource: records,
pictureTotalCount: Number(total),
currentPictureCourseListData
})
})
}
currentPictureCourseListData,
});
});
};
handleChangVideoCourseName = (value) => {
const { videoQuery, videoCourseDivision, videoSearchName } = this.state
videoQuery[videoCourseDivision].courseName = value
videoQuery[videoCourseDivision].current = 1
const { videoQuery, videoCourseDivision, videoSearchName } = this.state;
videoQuery[videoCourseDivision].courseName = value;
videoQuery[videoCourseDivision].current = 1;
this.setState({
...videoQuery,
videoSearchDefalt: value,
videoSearchName: {
...videoSearchName,
[videoCourseDivision]: value
}
})
}
[videoCourseDivision]: value,
},
});
};
handleChangLiveCourseName = (value) => {
const { liveQuery } = this.state
liveQuery.courseName = value
liveQuery.current = 1
const { liveQuery } = this.state;
liveQuery.courseName = value;
liveQuery.current = 1;
this.setState({
liveQuery
})
}
liveQuery,
});
};
handleChangPictureCourseName = (value) => {
const { pictureQuery } = this.state
pictureQuery.courseName = value
pictureQuery.current = 1
const { pictureQuery } = this.state;
pictureQuery.courseName = value;
pictureQuery.current = 1;
this.setState({
pictureQuery
})
}
pictureQuery,
});
};
onShowLiveSizeChange = (current, size) => {
if (current === size) {
return
return;
}
this.setState(
{
liveSize: size
liveSize: size,
},
() => {
this.handleFetchLiveDataList()
this.handleFetchLiveDataList();
}
)
}
);
};
onShowVideoSizeChange = (current, size) => {
if (current === size) {
return
return;
}
this.setState(
{
videoSize: size
videoSize: size,
},
() => {
this.handleFetchLiveDataList()
this.handleFetchLiveDataList();
}
)
}
);
};
onShowPictureSizeChange = (current, size) => {
if (current === size) {
return
return;
}
this.setState(
{
pictureSize: size
pictureSize: size,
},
() => {
this.handleFetchPictureDataList()
this.handleFetchPictureDataList();
}
)
}
);
};
// 请求表头
parseLiveColumns = () => {
const columns = [
{
title: <span><span>课程信息</span><Tooltip title="仅显示未关联课程，已关联课程不支持重复选择"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px',fontWeight:"400"
}}>&#xe61d;</i></Tooltip></span>,
title: (
<span>
<span>课程信息</span>
<Tooltip title='仅显示未关联课程，已关联课程不支持重复选择'>
<i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px', fontWeight: '400' }}>
&#xe61d;
</i>
</Tooltip>
</span>
),
key: 'course',
dataIndex: 'course',
width:'40%',
width: '40%',
render: (val, record) => {
let hasCover = false
let hasCover = false;
return (
<div className='course-info'>
{record.courseMediaVOS.map((item) => {
if (item.contentType === "COVER") {
hasCover = true
return <img className='course-cover' src={item.mediaUrl} alt='' />
if (item.contentType === 'COVER') {
hasCover = true;
return <img className='course-cover' src={item.mediaUrl} alt='' />;
}
return null
return null;
})}
<If condition={!hasCover}>
<img className='course-cover' src={"https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png"} alt='' />
<img className='course-cover' src={'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'} alt='' />
</If>
<div>
......@@ -316,35 +325,35 @@ class SelectOperatorModal extends React.Component {
</span>
</div>
</div>
)
}
);
},
},
{
title: "上课时间",
key: "courseTime",
dataIndex: "courseTime",
width: "40%",
title: '上课时间',
key: 'courseTime',
dataIndex: 'courseTime',
width: '40%',
render: (val, record) => {
return (
<div>
<div>{formatDate("YYYY-MM-DD", record.startTime)}</div>
<div>{formatDate('YYYY-MM-DD', record.startTime)}</div>
<div>
{formatDate("H:i", record.startTime)}~{formatDate("H:i", record.endTime)}
{formatDate('H:i', record.startTime)}~{formatDate('H:i', record.endTime)}
</div>
</div>
)
}
);
},
},
{
title: "学院展示",
key: "shelfState",
dataIndex: "shelfState",
width: "20%",
title: '学院展示',
key: 'shelfState',
dataIndex: 'shelfState',
width: '20%',
render: (val, record) => {
return (
<span>
<Choose>
<When condition={record.shelfState === "YES"}>
<When condition={record.shelfState === 'YES'}>
<span>开启</span>
</When>
<Otherwise>
......@@ -352,24 +361,33 @@ class SelectOperatorModal extends React.Component {
</Otherwise>
</Choose>
</span>
)
}
}
]
return columns
}
);
},
},
];
return columns;
};
// 请求表头
parseVideoColumns = () => {
const { videoCourseDivision } = this.state
const { videoCourseDivision } = this.state;
const columns = [
{
title: <span><span>课程信息</span><Tooltip title="仅显示未关联课程，已关联课程不支持重复选择"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px',fontWeight:"400"}}>&#xe61d;</i></Tooltip></span>,
title: (
<span>
<span>课程信息</span>
<Tooltip title='仅显示未关联课程，已关联课程不支持重复选择'>
<i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px', fontWeight: '400' }}>
&#xe61d;
</i>
</Tooltip>
</span>
),
key: 'course',
dataIndex: 'course',
width:'60%',
width: '60%',
render: (val, record) => {
const { coverUrl, scheduleVideoUrl } = record
const { coverUrl, scheduleVideoUrl } = record;
return (
<div className='course-info'>
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
......@@ -377,242 +395,251 @@ class SelectOperatorModal extends React.Component {
className='course-cover'
src={
coverUrl ||
(videoCourseDivision === "internal"
(videoCourseDivision === 'internal'
? `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`
: "https://image.xiaomaiketang.com/xm/mt3ZQRxGKB.png")
: 'https://image.xiaomaiketang.com/xm/mt3ZQRxGKB.png')
}
alt=''
/>
<div className='course-name'>{record.courseName}</div>
</div>
)
}
);
},
},
{
title: "课程时长",
key: "courseTime",
dataIndex: "courseTime",
width: "20%",
title: '课程时长',
key: 'courseTime',
dataIndex: 'courseTime',
width: '20%',
render: (val, record) => {
return <span className='course-status'>{dealTimeDuration(record.videoDuration)}</span>
}
return <span className='course-status'>{dealTimeDuration(record.videoDuration)}</span>;
},
},
{
title: "学院展示",
key: "shelfState",
dataIndex: "shelfState",
width: "20%",
title: '学院展示',
key: 'shelfState',
dataIndex: 'shelfState',
width: '20%',
render: (val, record) => {
return (
<Choose>
<When condition={record.shelfState === "YES"}>
<When condition={record.shelfState === 'YES'}>
<span>开启</span>
</When>
<Otherwise>
<span>关闭</span>
</Otherwise>
</Choose>
)
}
}
]
return columns
}
);
},
},
];
return columns;
};
// 请求表头
parsePictureColumns = () => {
const columns = [
{
title: <span><span>课程信息</span><Tooltip title="仅显示未关联课程，已关联课程不支持重复选择"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px',fontWeight:"400"}}>&#xe61d;</i></Tooltip></span>,
title: (
<span>
<span>课程信息</span>
<Tooltip title='仅显示未关联课程，已关联课程不支持重复选择'>
<i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px', fontWeight: '400' }}>
&#xe61d;
</i>
</Tooltip>
</span>
),
key: 'course',
dataIndex: 'course',
width:'55%',
width: '55%',
render: (val, record) => {
const { coverUrl } = record
const { coverUrl } = record;
return (
<div className='course-info'>
<img className='course-cover' src={coverUrl || "https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png"} alt='' />
<img className='course-cover' src={coverUrl || 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png'} alt='' />
<div className='course-name'>{record.courseName}</div>
</div>
)
}
);
},
},
{
title: "更新时间",
key: "updated",
dataIndex: "updated",
width: "25%",
title: '更新时间',
key: 'updated',
dataIndex: 'updated',
width: '25%',
render: (val, record) => {
return <span className='course-status'>{formatDate("YYYY-MM-DD", record.updated)}</span>
}
return <span className='course-status'>{formatDate('YYYY-MM-DD', record.updated)}</span>;
},
},
{
title: "学院展示",
key: "shelfState",
dataIndex: "shelfState",
width: "20%",
title: '学院展示',
key: 'shelfState',
dataIndex: 'shelfState',
width: '20%',
render: (val, record) => {
return <span>{record.shelfState === "YES" ? "开启" : "关闭"}</span>
}
}
]
return columns
}
return <span>{record.shelfState === 'YES' ? '开启' : '关闭'}</span>;
},
},
];
return columns;
};
selectLiveList = (record, selected) => {
const { selectVideo, currentTaskCourseData, selectLive, selectPicture } = this.state
let _list = []
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)
_list = _.uniq(selectLive.concat([record]), false, (item) => item.liveCourseId);
} else {
_list = _.reject(selectLive, (item) => item.liveCourseId === record.liveCourseId)
_list = _.reject(selectLive, (item) => item.liveCourseId === record.liveCourseId);
}
if (_list.length + currentTaskCourseData.length + selectVideo.length + selectPicture.length > 20) {
message.warning("无法继续选择，一个任务最多关联20个课程")
return
message.warning('无法继续选择，一个任务最多关联20个课程');
return;
}
this.setState({ selectLive: _list })
}
this.setState({ selectLive: _list });
};
selectVideoList = (record, selected) => {
const { selectVideo, currentTaskCourseData, selectLive, selectPicture, videoCourseDivision } = this.state
const { selectVideo, currentTaskCourseData, selectLive, selectPicture, videoCourseDivision } = this.state;
let { [videoCourseDivision]: selectList } = selectVideo
let { [videoCourseDivision]: selectList } = selectVideo;
let _list = []
let _list = [];
if (selected || !_.find(selectList, (item) => item.id === record.id)) {
_list = _.uniq(selectList.concat([record]), false, (item) => item.id)
_list = _.uniq(selectList.concat([record]), false, (item) => item.id);
} else {
_list = _.reject(selectList, (item) => item.id === record.id)
_list = _.reject(selectList, (item) => item.id === record.id);
}
if (_list.length + currentTaskCourseData.length + selectLive.length + selectPicture.length > 20) {
message.warning("无法继续选择，一个任务最多关联20个课程")
return
message.warning('无法继续选择，一个任务最多关联20个课程');
return;
}
this.setState({
selectVideo: {
...selectVideo,
[videoCourseDivision]: _list
}
})
}
[videoCourseDivision]: _list,
},
});
};
selectPictureList = (record, selected) => {
const { selectVideo, currentTaskCourseData, selectLive, selectPicture } = this.state
let _list = []
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)
_list = _.uniq(selectPicture.concat([record]), false, (item) => item.id);
} else {
_list = _.reject(selectPicture, (item) => item.id === record.id)
_list = _.reject(selectPicture, (item) => item.id === record.id);
}
if (_list.length + currentTaskCourseData.length + selectLive.length + selectVideo.length > 20) {
message.warning("无法继续选择，一个任务最多关联20个课程")
return
message.warning('无法继续选择，一个任务最多关联20个课程');
return;
}
this.setState({ selectPicture: _list })
}
this.setState({ selectPicture: _list });
};
clearSelectCourse = () => {
this.setState({
selectLive: [],
selectVideo: {
internal: [],
external: []
external: [],
},
selectPicture: []
})
}
selectPicture: [],
});
};
handleSelectVideo = (selectVideo) => {
return selectVideo.map((item) => {
let _item = {}
_item.courseId = item.id
_item.courseType = "VOICE"
_item.courseName = item.courseName
let _item = {};
_item.courseId = item.id;
_item.courseType = 'VOICE';
_item.courseName = item.courseName;
return _item
})
}
return _item;
});
};
handleSelectLive = (selectLive) => {
return selectLive.map((item, index) => {
let _item = {}
_item.courseId = item.liveCourseId
_item.courseType = "LIVE"
_item.courseName = item.courseName
_item.courseState = item.courseState
return _item
})
}
let _item = {};
_item.courseId = item.liveCourseId;
_item.courseType = 'LIVE';
_item.courseName = item.courseName;
_item.courseState = item.courseState;
return _item;
});
};
videoCourseDivisionChange = (e) => {
const { videoSearchName } = this.state
const { videoSearchName } = this.state;
this.setState(
{
videoCourseDivision: e.target.value,
videoSearchDefalt: videoSearchName[e.target.value]
videoSearchDefalt: videoSearchName[e.target.value],
},
() => {
this.handleFetchVideoDataList()
this.handleFetchVideoDataList();
}
)
}
);
};
handleSelectPicture = (selectPicture) => {
return selectPicture.map((item, index) => {
let _item = {}
_item.courseId = item.id
_item.courseType = "PICTURE"
_item.courseName = item.courseName
return _item
})
}
let _item = {};
_item.courseId = item.id;
_item.courseType = 'PICTURE';
_item.courseName = item.courseName;
return _item;
});
};
renderFooter = () => {
const { activeKey } = this.state
let href = ""
const { activeKey } = this.state;
let href = '';
switch (activeKey) {
case "live":
case 'live':
href = (
<a
target='_blank'
rel='noopener noreferrer'
className='link-create-course'
href={window.location.origin + window.location.pathname + "#/create-live-course?type=add"}
href={window.location.origin + window.location.pathname + '#/create-live-course?type=add'}
onClick={this.props.onClose}>
没有找到需要的直播课？<span>去创建</span>
</a>
)
break
case "video":
);
break;
case 'video':
href = (
<a
target='_blank'
rel='noopener noreferrer'
className='link-create-course'
href={window.location.origin + window.location.pathname + "#/create-video-course?type=add"}
href={window.location.origin + window.location.pathname + '#/create-video-course?type=add'}
onClick={this.props.onClose}>
没有找到需要的视频课？<span>去创建</span>
</a>
)
break
case "picture":
);
break;
case 'picture':
href = (
<a
target='_blank'
rel='noopener noreferrer'
className='link-create-course'
href={window.location.origin + window.location.pathname + "#/create-graphics-course?type=add"}
href={window.location.origin + window.location.pathname + '#/create-graphics-course?type=add'}
onClick={this.props.onClose}>
没有找到需要的图文课？<span>去创建</span>
</a>
)
break
);
break;
default:
break
break;
}
return href
}
return href;
};
render() {
const { visible } = this.props
const { visible } = this.props;
const {
liveDataSource,
liveSize,
......@@ -632,8 +659,8 @@ class SelectOperatorModal extends React.Component {
pictureQuery,
pictureTotalCount,
videoCourseDivision
} = this.state
videoCourseDivision,
} = this.state;
return (
<Modal
title='关联课程'
......@@ -649,7 +676,7 @@ class SelectOperatorModal extends React.Component {
this.renderFooter(),
<Button
onClick={() => {
this.props.onClose()
this.props.onClose();
}}>
取消
</Button>,
......@@ -660,18 +687,18 @@ class SelectOperatorModal extends React.Component {
...this.handleSelectVideo(selectVideo.internal),
...this.handleSelectVideo(selectVideo.external),
...this.handleSelectLive(selectLive),
...this.handleSelectPicture(selectPicture)
...this.handleSelectPicture(selectPicture),
])
}>
确定
</Button>
</Button>,
]}>
<div>
<Tabs
type='line'
defaultActiveKey='live'
onChange={(activeKey) => {
this.setState({ activeKey: activeKey })
this.setState({ activeKey: activeKey });
}}>
<TabPane tab='直播课' key='live'>
<div className='search-container'>
......@@ -680,10 +707,10 @@ class SelectOperatorModal extends React.Component {
placeholder='搜索课程名称'
style={{ width: 200 }}
onChange={(e) => {
this.handleChangLiveCourseName(e.target.value)
this.handleChangLiveCourseName(e.target.value);
}}
onSearch={() => {
this.handleFetchLiveDataList()
this.handleFetchLiveDataList();
}}
/>
</div>
......@@ -707,32 +734,36 @@ class SelectOperatorModal extends React.Component {
</div>
</div>
<div>
<Table
<XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.liveCourseId}
dataSource={liveDataSource}
columns={this.parseLiveColumns()}
pagination={false}
bordered
rowSelection={{
type: "checkbox",
selectedRowKeys: _.pluck(selectLive, "liveCourseId"),
type: 'checkbox',
selectedRowKeys: _.pluck(selectLive, 'liveCourseId'),
onSelect: (record, selected) => {
this.selectLiveList(record, selected)
this.selectLiveList(record, selected);
},
onSelectAll: (selected, _selectedRows, changeRows) => {
let _list = []
let _list = [];
if (selected) {
_list = _.uniq(selectLive.concat(changeRows), false, (item) => item.liveCourseId)
_list = _.uniq(selectLive.concat(changeRows), false, (item) => item.liveCourseId);
} else {
_list = _.reject(selectLive, (item) => _.find(changeRows, (data) => data.liveCourseId === item.liveCourseId))
_list = _.reject(selectLive, (item) => _.find(changeRows, (data) => data.liveCourseId === item.liveCourseId));
}
if (_list.length + currentTaskCourseData.length + selectVideo.length + selectPicture.length > 20) {
message.warning("无法继续选择，一个任务最多关联20个课程")
const extraLength = _list.length + currentTaskCourseData.length + selectVideo.length + selectPicture.length - 20
_list.splice(_list.length - extraLength, extraLength)
message.warning('无法继续选择，一个任务最多关联20个课程');
const extraLength = _list.length + currentTaskCourseData.length + selectVideo.length + selectPicture.length - 20;
_list.splice(_list.length - extraLength, extraLength);
}
this.setState({ selectLive: _list })
}
this.setState({ selectLive: _list });
},
}}
/>
{liveDataSource.length > 0 && (
......@@ -743,15 +774,15 @@ class SelectOperatorModal extends React.Component {
size='small'
total={liveTotalCount}
toPage={(page) => {
const _query = { ...liveQuery, current: page + 1 }
const _query = { ...liveQuery, current: page + 1 };
this.setState(
{
liveQuery: _query
liveQuery: _query,
},
() => {
this.handleFetchLiveDataList()
this.handleFetchLiveDataList();
}
)
);
}}
onShowSizeChange={this.onShowLiveSizeChange}
/>
......@@ -772,10 +803,10 @@ class SelectOperatorModal extends React.Component {
placeholder='搜索课程名称'
style={{ width: 200 }}
onChange={(e) => {
this.handleChangVideoCourseName(e.target.value)
this.handleChangVideoCourseName(e.target.value);
}}
onSearch={() => {
this.handleFetchVideoDataList()
this.handleFetchVideoDataList();
}}
/>
</div>
......@@ -798,37 +829,41 @@ class SelectOperatorModal extends React.Component {
</div>
</div>
<div>
<Table
<XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.id}
dataSource={videoDataSource[videoCourseDivision]}
columns={this.parseVideoColumns()}
pagination={false}
bordered
rowSelection={{
type: "checkbox",
selectedRowKeys: _.pluck(selectVideo[videoCourseDivision], "id"),
type: 'checkbox',
selectedRowKeys: _.pluck(selectVideo[videoCourseDivision], 'id'),
onSelect: (record, selected) => {
this.selectVideoList(record, selected)
this.selectVideoList(record, selected);
},
onSelectAll: (selected, _selectedRows, changeRows) => {
let _list = []
let _list = [];
if (selected) {
_list = _.uniq(selectVideo[videoCourseDivision].concat(changeRows), false, (item) => item.id)
_list = _.uniq(selectVideo[videoCourseDivision].concat(changeRows), false, (item) => item.id);
} else {
_list = _.reject(selectVideo[videoCourseDivision], (item) => _.find(changeRows, (data) => data.id === item.id))
_list = _.reject(selectVideo[videoCourseDivision], (item) => _.find(changeRows, (data) => data.id === item.id));
}
if (_list.length + currentTaskCourseData.length + selectLive.length + selectPicture.length > 20) {
message.warning("无法继续选择，一个任务最多关联20个课程")
const extraLength = _list.length + currentTaskCourseData.length + selectLive.length + selectPicture.length - 20
_list.splice(_list.length - extraLength, extraLength)
message.warning('无法继续选择，一个任务最多关联20个课程');
const extraLength = _list.length + currentTaskCourseData.length + selectLive.length + selectPicture.length - 20;
_list.splice(_list.length - extraLength, extraLength);
}
this.setState({
selectVideo: {
...selectVideo,
[videoCourseDivision]: _list
}
})
}
[videoCourseDivision]: _list,
},
});
},
}}
/>
{videoDataSource[videoCourseDivision].length > 0 && (
......@@ -839,19 +874,19 @@ class SelectOperatorModal extends React.Component {
size='small'
total={videoTotalCount[videoCourseDivision]}
toPage={(page) => {
const _query = { ...videoQuery[videoCourseDivision], current: page + 1 }
const _query = { ...videoQuery[videoCourseDivision], current: page + 1 };
this.setState(
{
videoQuery: {
...videoQuery,
[videoCourseDivision]: _query
}
[videoCourseDivision]: _query,
},
},
() => {
this.handleFetchVideoDataList()
this.handleFetchVideoDataList();
}
)
);
}}
onShowSizeChange={this.onShowVideoSizeChange}
/>
......@@ -866,10 +901,10 @@ class SelectOperatorModal extends React.Component {
placeholder='搜索课程名称'
style={{ width: 200 }}
onChange={(e) => {
this.handleChangPictureCourseName(e.target.value)
this.handleChangPictureCourseName(e.target.value);
}}
onSearch={() => {
this.handleFetchPictureDataList()
this.handleFetchPictureDataList();
}}
/>
</div>
......@@ -893,32 +928,36 @@ class SelectOperatorModal extends React.Component {
</div>
</div>
<div>
<Table
<XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
rowKey={(record) => record.id}
dataSource={pictureDataSource}
columns={this.parsePictureColumns()}
pagination={false}
bordered
rowSelection={{
type: "checkbox",
selectedRowKeys: _.pluck(selectPicture, "id"),
type: 'checkbox',
selectedRowKeys: _.pluck(selectPicture, 'id'),
onSelect: (record, selected) => {
this.selectPictureList(record, selected)
this.selectPictureList(record, selected);
},
onSelectAll: (selected, _selectedRows, changeRows) => {
let _list = []
let _list = [];
if (selected) {
_list = _.uniq(selectPicture.concat(changeRows), false, (item) => item.id)
_list = _.uniq(selectPicture.concat(changeRows), false, (item) => item.id);
} else {
_list = _.reject(selectPicture, (item) => _.find(changeRows, (data) => data.id === item.id))
_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)
message.warning('无法继续选择，一个任务最多关联20个课程');
const extraLength = _list.length + currentTaskCourseData.length + selectVideo.length + selectLive.length - 20;
_list.splice(_list.length - extraLength, extraLength);
}
this.setState({ selectPicture: _list })
}
this.setState({ selectPicture: _list });
},
}}
/>
{pictureDataSource.length > 0 && (
......@@ -929,15 +968,15 @@ class SelectOperatorModal extends React.Component {
size='small'
total={pictureTotalCount}
toPage={(page) => {
const _query = { ...pictureQuery, current: page + 1 }
const _query = { ...pictureQuery, current: page + 1 };
this.setState(
{
pictureQuery: _query
pictureQuery: _query,
},
() => {
this.handleFetchPictureDataList()
this.handleFetchPictureDataList();
}
)
);
}}
onShowSizeChange={this.onShowPictureSizeChange}
/>
......@@ -948,8 +987,8 @@ class SelectOperatorModal extends React.Component {
</Tabs>
</div>
</Modal>
)
);
}
}
export default SelectOperatorModal
export default SelectOperatorModal;
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