Skip to content

X
xiaomai-cloud-class-web
Commit 96b6fd8b by guomingpang
Options

fix:1。培训计划计划列表显示封面。2。知识库-添加知识-添加视频课程中课程分类搜索框没有placeholder问题修复

parent b6e69746
Showing with 694 additions and 658 deletions
src/modules/knowledge-base/modal/AddCourse.jsx
......@@ -3,50 +3,50 @@
* @Author: zangsuyun
* @Date: 2021-03-13 09:54:26
* @LastEditors: fusanqiasng
* @LastEditTime: 2021-05-30 23:59:36
* @LastEditTime: 2021-06-01 10:26:46
* @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from 'react'
import { Row, Modal, Button, message, Radio, Table, Input, Tabs, Tooltip, TreeSelect } from 'antd'
import { PageControl } from '@/components'
import TableSelectedData from '@/components/TableSelectedData'
import KnowledgeAPI from '@/data-source/knowledge/request-api'
import AidToolService from '@/domains/aid-tool-domain/AidToolService'
import User from '@/common/js/user'
import './LiveList.less'
import React from 'react';
import { Row, Modal, Button, message, Radio, Table, Input, Tabs, Tooltip, TreeSelect } from 'antd';
import { PageControl } from '@/components';
import TableSelectedData from '@/components/TableSelectedData';
import KnowledgeAPI from '@/data-source/knowledge/request-api';
import AidToolService from '@/domains/aid-tool-domain/AidToolService';
import User from '@/common/js/user';
import './LiveList.less';
import _ from 'underscore'
import dealTimeDuration from '../../course-manage/utils/dealTimeDuration'
import _ from 'underscore';
import dealTimeDuration from '../../course-manage/utils/dealTimeDuration';
const { Search } = Input
const { TabPane } = Tabs
const { Search } = Input;
const { TabPane } = Tabs;
const courseStateShow = {
UN_START: {
code: 1,
title: '待开课',
color: '#FFB129'
color: '#FFB129',
},
STARTING: {
code: 2,
title: '上课中',
color: '#238FFF'
color: '#238FFF',
},
FINISH: {
code: 3,
title: '已完成',
color: '#3BBDAA'
color: '#3BBDAA',
},
EXPIRED: {
code: 4,
title: '未成功开课',
color: '#999'
}
}
color: '#999',
},
};
class AddCourse extends React.Component {
constructor(props) {
super(props)
super(props);
this.state = {
liveDataSource: [],
liveSize: 10,
......@@ -55,7 +55,7 @@ class AddCourse extends React.Component {
excludeUsed: true,
courseType: 'LIVE',
storeId: User.getStoreId(),
toRefKnowledgeCategoryId: this.props.categoryId
toRefKnowledgeCategoryId: this.props.categoryId,
},
liveTotalCount: 0,
selectLive: [], //弹窗内已选择的直播课程
......@@ -63,21 +63,21 @@ class AddCourse extends React.Component {
videoCourseDivision: 'internal',
videoDataSource: {
external: [],
internal: []
internal: [],
},
videoSize: {
external: 10,
internal: 10
internal: 10,
},
videoSearchDefalt: {
external: {
categoryId: '',
courseName: ''
courseName: '',
},
internal: {
categoryId: '',
courseName: ''
}
courseName: '',
},
},
videoQuery: {
......@@ -88,7 +88,7 @@ class AddCourse extends React.Component {
courseType: 'VOICE',
excludeUsed: true,
storeId: User.getStoreId(),
toRefKnowledgeCategoryId: this.props.categoryId
toRefKnowledgeCategoryId: this.props.categoryId,
},
internal: {
categoryId: '',
......@@ -97,20 +97,20 @@ class AddCourse extends React.Component {
courseType: 'VOICE',
excludeUsed: true,
storeId: User.getStoreId(),
toRefKnowledgeCategoryId: this.props.categoryId
}
toRefKnowledgeCategoryId: this.props.categoryId,
},
},
videoTotalCount: {
external: 0,
internal: 0
internal: 0,
},
selectVideo: {
external: [],
internal: []
internal: [],
}, //弹窗内已选择的视频课程
currentVideoCourseListData: {
external: [],
internal: []
internal: [],
}, //页面中已关联的视频课程
pictureDataSource: [],
......@@ -120,47 +120,47 @@ class AddCourse extends React.Component {
excludeUsed: true,
courseType: 'PICTURE',
storeId: User.getStoreId(),
toRefKnowledgeCategoryId: this.props.categoryId
toRefKnowledgeCategoryId: this.props.categoryId,
},
pictureTotalCount: 0,
selectPicture: [], //弹窗内已选择的图文课程
categoryList: [], //内部分类列表
categoryListExternal: [] //外部分类列表
}
categoryListExternal: [], //外部分类列表
};
}
componentDidMount() {
this.handleFetchLiveList()
this.handleFetchVideoList()
this.handleFetchPictureList()
this.queryCategoryTree()
this.handleFetchLiveList();
this.handleFetchVideoList();
this.handleFetchPictureList();
this.queryCategoryTree();
}
// 查询分类树
queryCategoryTree = (categoryName) => {
let query = {
storeId: User.getStoreId(),
withCount: false
}
withCount: false,
};
let queryInternal = {
bizType: 'QUESTION',
source: 2,
tenantId: User.getStoreId(),
userId: User.getStoreUserId(),
count: false
}
count: false,
};
AidToolService.queryExternalCategoryTree(queryInternal).then((res) => {
const { categoryList = [] } = res.result
const { categoryList = [] } = res.result;
this.setState({
categoryListExternal: this.renderTreeNodes(categoryList)
})
})
categoryListExternal: this.renderTreeNodes(categoryList),
});
});
KnowledgeAPI.getCategoryTree(query).then((res) => {
const { categoryList = [] } = res.result
const { categoryList = [] } = res.result;
this.setState({
categoryList: this.renderTreeNodes(categoryList)
})
})
}
categoryList: this.renderTreeNodes(categoryList),
});
});
};
renderTreeNodes = (data) => {
let newTreeData = data.map((item) => {
......@@ -171,124 +171,124 @@ class AddCourse extends React.Component {
</span>
{item.categoryName}
</span>
)
item.key = item.id
);
item.key = item.id;
if (item.sonCategoryList) {
item.children = this.renderTreeNodes(item.sonCategoryList)
item.children = this.renderTreeNodes(item.sonCategoryList);
}
return item
})
return newTreeData
}
return item;
});
return newTreeData;
};
// 获取直播课列表
handleFetchLiveList = () => {
const { liveQuery, liveSize } = this.state
const { liveQuery, liveSize } = this.state;
const params = {
...liveQuery,
size: liveSize
}
size: liveSize,
};
// CourseService.getLiveCloudCoursePage(params).then((res) => {
KnowledgeAPI.knowledgeLiveCoursePage(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)
})
})
}
liveTotalCount: Number(total),
});
});
};
// 获取视频课列表
handleFetchVideoList = () => {
const { videoQuery, videoSize, videoCourseDivision, videoDataSource, videoTotalCount } = this.state
const { videoQuery, videoSize, videoCourseDivision, videoDataSource, videoTotalCount } = this.state;
const params = {
...videoQuery[videoCourseDivision],
size: videoSize[videoCourseDivision],
courseDivision: videoCourseDivision === 'internal' ? 'INTERNAL' : 'EXTERNAL'
}
courseDivision: videoCourseDivision === 'internal' ? 'INTERNAL' : 'EXTERNAL',
};
// CourseService.videoSchedulePage(query).then((res) => {
KnowledgeAPI.knowledgeMediaCoursePage(params).then((res) => {
const { result = {} } = res || {}
const { records = [], total = 0 } = result
const { result = {} } = res || {};
const { records = [], total = 0 } = result;
this.setState({
videoDataSource: {
...videoDataSource,
[videoCourseDivision]: records
[videoCourseDivision]: records,
},
videoTotalCount: {
...videoTotalCount,
[videoCourseDivision]: Number(total)
}
})
})
}
[videoCourseDivision]: Number(total),
},
});
});
};
// 获取图文课列表
handleFetchPictureList = () => {
const { pictureQuery, pictureSize } = this.state
const { pictureQuery, pictureSize } = this.state;
const params = {
...pictureQuery,
size: pictureSize
}
size: pictureSize,
};
// CourseService.pictureSchedulePage(query).then((res) => {
KnowledgeAPI.knowledgeMediaCoursePage(params).then((res) => {
const { result = {} } = res || {}
const { records = [], total = 0 } = result
const { result = {} } = res || {};
const { records = [], total = 0 } = result;
this.setState({
pictureDataSource: records,
pictureTotalCount: Number(total)
})
})
}
pictureTotalCount: Number(total),
});
});
};
onShowLiveSizeChange = (current, size) => {
if (current === size) {
return
return;
}
this.setState(
{
liveSize: size
liveSize: size,
},
() => {
this.handleFetchLiveList()
this.handleFetchLiveList();
}
)
}
);
};
onShowVideoSizeChange = (current, size) => {
if (current === size) {
return
return;
}
this.setState(
{
videoSize: size
videoSize: size,
},
() => {
this.handleFetchVideoList()
this.handleFetchVideoList();
}
)
}
);
};
onShowPictureSizeChange = (current, size) => {
if (current === size) {
return
return;
}
this.setState(
{
pictureSize: size
pictureSize: size,
},
() => {
this.handleFetchPictureList()
this.handleFetchPictureList();
}
)
}
);
};
liveColumns = () => {
const columns = [
......@@ -304,7 +304,7 @@ class AddCourse extends React.Component {
cursor: 'pointer',
color: '#bfbfbf',
fontSize: '14px',
fontWeight: '400'
fontWeight: '400',
}}>
&#xe61d;
</i>
......@@ -315,13 +315,13 @@ class AddCourse extends React.Component {
key: 'course',
dataIndex: 'courseName',
render: (val, record) => {
let hasCover = false
let hasCover = false;
return (
<div className='record__item'>
{record.courseMediaVOS.map((item) => {
if (item.contentType === 'COVER') {
hasCover = true
return <img className='course-cover' src={item.mediaUrl} alt='' />
hasCover = true;
return <img className='course-cover' src={item.mediaUrl} alt='' />;
}
})}
{!hasCover && <img className='course-cover' src={'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'} alt='' />}
......@@ -341,15 +341,15 @@ class AddCourse extends React.Component {
className='course-status'
style={{
color: courseStateShow[record.courseState].color,
border: `1px solid ${courseStateShow[record.courseState].color}`
border: `1px solid ${courseStateShow[record.courseState].color}`,
}}>
{courseStateShow[record.courseState].title}
</span>
</div>
</div>
</div>
)
}
);
},
},
{
title: '上课时间',
......@@ -362,8 +362,8 @@ class AddCourse extends React.Component {
{formatDate('YYYY-MM-DD', parseInt(item.startTime))} <br></br>
{formatDate('H:i', parseInt(item.startTime))}~{formatDate('H:i', parseInt(item.endTime))}
</span>
)
}
);
},
},
{
......@@ -377,16 +377,16 @@ class AddCourse extends React.Component {
{record.categoryOneName}
{record.categoryTwoName ? `-${record.categoryTwoName}` : ''}
</div>
)
}
}
]
);
},
},
];
return columns
}
return columns;
};
videoColumns = () => {
const { videoCourseDivision } = this.state
const { videoCourseDivision } = this.state;
const columns = [
{
title: (
......@@ -400,7 +400,7 @@ class AddCourse extends React.Component {
cursor: 'pointer',
color: '#bfbfbf',
fontSize: '14px',
fontWeight: '400'
fontWeight: '400',
}}>
&#xe61d;
</i>
......@@ -411,7 +411,7 @@ class AddCourse extends React.Component {
dataIndex: 'scheduleName',
width: 300,
render: (val, record) => {
const { coverUrl, mediaCourseUrl } = record
const { coverUrl, mediaCourseUrl } = record;
return (
<div className='record__item'>
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
......@@ -436,8 +436,8 @@ class AddCourse extends React.Component {
</Otherwise>
</Choose>
</div>
)
}
);
},
},
{
title: '课程时长',
......@@ -445,8 +445,8 @@ class AddCourse extends React.Component {
width: 80,
dataIndex: 'videoDuration',
render: (text, item) => {
return <span>{text ? dealTimeDuration(text) : '-'}</span>
}
return <span>{text ? dealTimeDuration(text) : '-'}</span>;
},
},
{
......@@ -466,12 +466,12 @@ class AddCourse extends React.Component {
<div className='record__item'>{record.categorySonName}</div>
</Otherwise>
</Choose>
)
}
}
]
return columns
}
);
},
},
];
return columns;
};
pictureColumns = () => {
const columns = [
......@@ -487,7 +487,7 @@ class AddCourse extends React.Component {
cursor: 'pointer',
color: '#bfbfbf',
fontSize: '14px',
fontWeight: '400'
fontWeight: '400',
}}>
&#xe61d;
</i>
......@@ -498,7 +498,7 @@ class AddCourse extends React.Component {
dataIndex: 'scheduleName',
width: 371,
render: (val, record) => {
const { coverUrl } = record
const { coverUrl } = record;
return (
<div className='record__item'>
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
......@@ -514,8 +514,8 @@ class AddCourse extends React.Component {
</Otherwise>
</Choose>
</div>
)
}
);
},
},
{
title: '课程分类',
......@@ -527,122 +527,122 @@ class AddCourse extends React.Component {
{record.categoryOneName}
{record.categoryTwoName ? `-${record.categoryTwoName}` : ''}
</div>
)
}
}
]
return columns
}
);
},
},
];
return columns;
};
selectLiveList = (record, selected) => {
let { selectLive } = this.state
let _list = []
let { selectLive } = 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);
}
this.setState({ selectLive: _list })
}
this.setState({ selectLive: _list });
};
selectVideoList = (record, selected) => {
const { selectVideo, videoCourseDivision } = this.state
const { selectVideo, 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);
}
this.setState({
selectVideo: {
...selectVideo,
[videoCourseDivision]: _list
}
})
}
[videoCourseDivision]: _list,
},
});
};
selectPictureList = (record, selected) => {
console.log(record)
let { selectPicture } = this.state
let _list = []
console.log(record);
let { 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);
}
this.setState({ selectPicture: _list })
}
this.setState({ selectPicture: _list });
};
callback(key) {
console.log(key)
console.log(key);
}
handleChangVideoFilter = (key, value) => {
const { videoQuery, videoCourseDivision, videoSearchDefalt } = this.state
videoQuery[videoCourseDivision][key] = value
videoSearchDefalt[videoCourseDivision][key] = value
videoQuery[videoCourseDivision].current = 1
const { videoQuery, videoCourseDivision, videoSearchDefalt } = this.state;
videoQuery[videoCourseDivision][key] = value;
videoSearchDefalt[videoCourseDivision][key] = value;
videoQuery[videoCourseDivision].current = 1;
this.setState(
{
videoQuery,
videoSearchDefalt
videoSearchDefalt,
},
() => {
this.handleFetchVideoList()
this.handleFetchVideoList();
}
)
}
);
};
handleChangVideoCourseName = (e) => {
const { videoSearchDefalt, videoCourseDivision } = this.state
videoSearchDefalt[videoCourseDivision].courseName = e.target.value
const { videoSearchDefalt, videoCourseDivision } = this.state;
videoSearchDefalt[videoCourseDivision].courseName = e.target.value;
this.setState({
videoSearchDefalt
})
}
videoSearchDefalt,
});
};
handleChangLiveFilter = (key, value) => {
const { liveQuery } = this.state
liveQuery[key] = value
liveQuery.current = 1
const { liveQuery } = this.state;
liveQuery[key] = value;
liveQuery.current = 1;
this.setState(
{
liveQuery
liveQuery,
},
() => {
this.handleFetchLiveList()
this.handleFetchLiveList();
}
)
}
);
};
handleChangPictureFilter = (key, value) => {
const { pictureQuery } = this.state
pictureQuery[key] = value
pictureQuery.current = 1
const { pictureQuery } = this.state;
pictureQuery[key] = value;
pictureQuery.current = 1;
this.setState(
{
pictureQuery
pictureQuery,
},
() => {
this.handleFetchPictureList()
this.handleFetchPictureList();
}
)
}
);
};
handAddCourse = () => {
const { selectVideo, selectLive, selectPicture } = this.state
const batchAddList = []
const { selectVideo, selectLive, selectPicture } = this.state;
const batchAddList = [];
if (selectVideo.external.length) {
batchAddList.push({
categoryId: this.props.categoryId,
refIds: _.pluck(selectVideo.external, 'id'),
storeId: User.getStoreId(),
type: 'VOICE',
createId: User.getStoreUserId()
})
createId: User.getStoreUserId(),
});
}
if (selectVideo.internal.length) {
batchAddList.push({
......@@ -650,8 +650,8 @@ class AddCourse extends React.Component {
refIds: _.pluck(selectVideo.internal, 'id'),
storeId: User.getStoreId(),
type: 'VOICE',
createId: User.getStoreUserId()
})
createId: User.getStoreUserId(),
});
}
if (selectLive.length) {
batchAddList.push({
......@@ -659,8 +659,8 @@ class AddCourse extends React.Component {
refIds: _.pluck(selectLive, 'liveCourseId'),
storeId: User.getStoreId(),
type: 'LIVE',
createId: User.getStoreUserId()
})
createId: User.getStoreUserId(),
});
}
if (selectPicture.length) {
batchAddList.push({
......@@ -668,21 +668,21 @@ class AddCourse extends React.Component {
refIds: _.pluck(selectPicture, 'id'),
storeId: User.getStoreId(),
type: 'PICTURE',
createId: User.getStoreUserId()
})
createId: User.getStoreUserId(),
});
}
KnowledgeAPI.addDifTypeKnowledge({ batchAddList }).then(({ success }) => {
if (success) {
message.success('新增成功')
this.props.onClose()
this.props.onChange()
this.props.updateCategoryTree()
message.success('新增成功');
this.props.onClose();
this.props.onChange();
this.props.updateCategoryTree();
}
})
}
});
};
videoCourseDivisionChange = (e) => {
const { videoQuery, videoSearchDefalt } = this.state
const { videoQuery, videoSearchDefalt } = this.state;
this.setState(
{
videoCourseDivision: e.target.value,
......@@ -690,18 +690,18 @@ class AddCourse extends React.Component {
...videoSearchDefalt,
[e.target.value]: {
courseName: videoQuery[e.target.value].courseName,
categoryId: videoQuery[e.target.value].categoryId
}
}
categoryId: videoQuery[e.target.value].categoryId,
},
},
},
() => {
this.handleFetchVideoList()
this.handleFetchVideoList();
}
)
}
);
};
renderFooter = () => {
const { selectVideo, selectPicture, selectLive } = this.state
const { selectVideo, selectPicture, selectLive } = this.state;
return (
<div>
<Button onClick={this.props.onClose}>取消</Button>
......@@ -712,8 +712,8 @@ class AddCourse extends React.Component {
确定
</Button>
</div>
)
}
);
};
render() {
const {
......@@ -735,55 +735,55 @@ class AddCourse extends React.Component {
selectPicture,
videoSearchDefalt,
categoryList,
categoryListExternal
} = this.state
categoryListExternal,
} = this.state;
const LiveSelection = {
selectedRowKeys: _.pluck(selectLive, 'liveCourseId'),
onSelect: this.selectLiveList,
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));
}
this.setState({ selectLive: _list })
}
}
this.setState({ selectLive: _list });
},
};
const VideoSelection = {
selectedRowKeys: _.pluck(selectVideo[videoCourseDivision], 'id'),
onSelect: this.selectVideoList,
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));
}
this.setState({
selectVideo: {
...selectVideo,
[videoCourseDivision]: _list
}
})
}
}
[videoCourseDivision]: _list,
},
});
},
};
const PictureSelection = {
selectedRowKeys: _.pluck(selectPicture, 'id'),
onSelect: this.selectPictureList,
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));
}
this.setState({ selectPicture: _list })
}
}
this.setState({ selectPicture: _list });
},
};
return (
<Modal visible={true} width={800} title='新增课程' footer={this.renderFooter()} onCancel={this.props.onClose} className='add-course-modal'>
......@@ -798,7 +798,7 @@ class AddCourse extends React.Component {
style={{ width: 'calc(100% - 75px)' }}
placeholder='搜索课程名称'
onSearch={(value) => {
this.handleChangLiveFilter('courseName', value)
this.handleChangLiveFilter('courseName', value);
}}
enterButton={<span className='icon iconfont'>&#xe832;</span>}
/>
......@@ -814,7 +814,7 @@ class AddCourse extends React.Component {
placeholder='请选择课程类型'
allowClear
onChange={(value) => {
this.handleChangLiveFilter('categoryId', value)
this.handleChangLiveFilter('categoryId', value);
}}
/>
</div>
......@@ -826,11 +826,11 @@ class AddCourse extends React.Component {
this.setState({
selectVideo: {
internal: [],
external: []
external: [],
},
selectLive: [],
selectPicture: []
})
selectPicture: [],
});
}}
/>
<Table
......@@ -851,15 +851,15 @@ class AddCourse extends React.Component {
pageSize={liveSize}
total={parseInt(liveTotalCount)}
toPage={(page) => {
const _query = { ...liveQuery, current: page + 1 }
const _query = { ...liveQuery, current: page + 1 };
this.setState(
{
liveQuery: _query
liveQuery: _query,
},
() => {
this.handleFetchLiveList()
this.handleFetchLiveList();
}
)
);
}}
onShowSizeChange={this.onShowLiveSizeChange}
/>
......@@ -883,7 +883,7 @@ class AddCourse extends React.Component {
placeholder='搜索课程名称'
onChange={this.handleChangVideoCourseName}
onSearch={(value) => {
this.handleChangVideoFilter('courseName', value)
this.handleChangVideoFilter('courseName', value);
}}
enterButton={<span className='icon iconfont'>&#xe832;</span>}
/>
......@@ -893,7 +893,7 @@ class AddCourse extends React.Component {
<TreeSelect
treeNodeFilterProp='categoryName'
showSearch
value={videoQuery[videoCourseDivision].categoryId}
value={videoQuery[videoCourseDivision].categoryId || null}
style={{ minWidth: 'calc(100% - 75px)' }}
dropdownMatchSelectWidth={false}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
......@@ -901,7 +901,7 @@ class AddCourse extends React.Component {
placeholder='请选择课程类型'
allowClear
onChange={(value) => {
this.handleChangVideoFilter('categoryId', value)
this.handleChangVideoFilter('categoryId', value);
}}
/>
</div>
......@@ -913,11 +913,11 @@ class AddCourse extends React.Component {
this.setState({
selectVideo: {
internal: [],
external: []
external: [],
},
selectLive: [],
selectPicture: []
})
selectPicture: [],
});
}}
/>
<Table
......@@ -939,19 +939,19 @@ class AddCourse extends React.Component {
pageSize={videoSize[videoCourseDivision]}
total={videoTotalCount[videoCourseDivision]}
toPage={(page) => {
const _query = { ...videoQuery[videoCourseDivision], current: page + 1 }
console.log('_query', _query)
const _query = { ...videoQuery[videoCourseDivision], current: page + 1 };
console.log('_query', _query);
this.setState(
{
videoQuery: {
...videoQuery,
[videoCourseDivision]: _query
}
[videoCourseDivision]: _query,
},
},
() => {
this.handleFetchVideoList()
this.handleFetchVideoList();
}
)
);
}}
onShowSizeChange={this.onShowVideoSizeChange}
/>
......@@ -970,7 +970,7 @@ class AddCourse extends React.Component {
style={{ width: 'calc(100% - 75px)' }}
placeholder='搜索课程名称'
onSearch={(value) => {
this.handleChangPictureFilter('courseName', value)
this.handleChangPictureFilter('courseName', value);
}}
enterButton={<span className='icon iconfont'>&#xe832;</span>}
/>
......@@ -986,7 +986,7 @@ class AddCourse extends React.Component {
placeholder='请选择课程类型'
allowClear
onChange={(value) => {
this.handleChangPictureFilter('categoryId', value)
this.handleChangPictureFilter('categoryId', value);
}}
/>
</div>
......@@ -998,11 +998,11 @@ class AddCourse extends React.Component {
this.setState({
selectVideo: {
internal: [],
external: []
external: [],
},
selectLive: [],
selectPicture: []
})
selectPicture: [],
});
}}
/>
<Table
......@@ -1023,15 +1023,15 @@ class AddCourse extends React.Component {
pageSize={pictureSize}
total={parseInt(pictureTotalCount)}
toPage={(page) => {
const _query = { ...pictureQuery, current: page + 1 }
const _query = { ...pictureQuery, current: page + 1 };
this.setState(
{
pictureQuery: _query
pictureQuery: _query,
},
() => {
this.handleFetchPictureList()
this.handleFetchPictureList();
}
)
);
}}
onShowSizeChange={this.onShowPictureSizeChange}
/>
......@@ -1041,7 +1041,7 @@ class AddCourse extends React.Component {
</TabPane>
</Tabs>
</Modal>
)
);
}
}
export default AddCourse
export default AddCourse;
src/modules/plan-manage/components/PlanList.jsx
/*
* @Author: zhangleyuan
* @Date: 2021-02-20 16:46:46
* @LastEditors: wufan
* @LastEditTime: 2021-05-14 18:12:50
* @LastEditors: fusanqiasng
* @LastEditTime: 2021-06-01 10:46:47
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { useState, useRef, useEffect } from 'react';
import { Table, Modal, message , Tooltip,Switch,Dropdown} from 'antd';
import React, { useState } from 'react';
import { Table, Modal, message, Tooltip, Switch, Dropdown } from 'antd';
import { withRouter } from 'react-router-dom';
import { PageControl } from "@/components";
import PlanService from "@/domains/plan-domain/planService";
import { PageControl } from '@/components';
import PlanService from '@/domains/plan-domain/planService';
import SharePlanModal from '../modal/SharePlanModal';
import {LIVE_SHARE} from '@/domains/course-domain/constants';
import { LIVE_SHARE } from '@/domains/course-domain/constants';
import User from '@/common/js/user';
import './PlanList.less';
const { confirm } = Modal;
const userRole = User.getUserRole();
function PlanList(props) {
const [sharePlanModal, setSharePlanModal] = useState(null);
function parseColumns(){
const columns = [
{
title: '培训计划',
key: 'planName',
dataIndex: 'planName',
width:'18%',
render: (val, record) => {
return (
<div className="plan-name">
{val}
</div>
)
}
},
{
title: '课程总数量',
key: 'courseNum',
dataIndex: 'courseNum',
width: 110,
render: (val, record) => {
return (
<div className="course-number">
{val}
</div>
)
}
},
{
title: '当前状态',
width: '10%',
dataIndex: "status",
render: (val, item, index) => {
return (
<Switch checked={item.enableState==="NO"?false:true} onChange={()=>changeEnableState(item)} disabled={(User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager")?false:true}/>
)
},
},
{
title: '创建人',
key: 'createName',
dataIndex: 'createName',
width: '10%',
render: (val) => {
return (
<div className="create-name">
{val}
</div>
)
}
},
{
title: '创建时间',
width: "12.5%",
key: 'created',
dataIndex: 'created',
sorter: true,
render: (val) => {
return formatDate('YYYY-MM-DD H:i', val)
}
},
{
title: '更新时间',
width: "10%",
key: 'updated',
dataIndex: 'updated',
sorter: true,
render: (val) => {
return formatDate('YYYY-MM-DD H:i', val)
}
},
{
title: '参培人数',
width:76,
key: 'cultureCustomerNum',
dataIndex: 'cultureCustomerNum',
sorter: true,
render: (val) => {
return (
<div className="join-number">
{val}
</div>
)
}
},
{
title: '操作',
key: 'operate',
dataIndex: 'operate',
fixed: 'right',
width: 176,
render: (val, record) => {
return (
<div className="operate">
<div className="operate__item" onClick={()=>toLearningDataPage(record)}>学习数据</div>
{record.enableState==="YES" &&
<>
<span className="operate__item split"> | </span>
<div className="operate__item" onClick={() => {handleShowShareModal(record); }}>分享</div>
</>
}
{(User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager") &&
<>
<span className="operate__item split"> | </span>
<Dropdown overlay={renderMoreOperate(record)}>
<span className="more-operate">
<span className="operate-text">更多</span>
<span
className="iconfont icon"
style={{ color: "#2966FF" }}
>
&#xe824;
</span>
</span>
</Dropdown>
</>
}
</div>
)
}
}
];
return columns;
}
function renderMoreOperate(item){
return (
<div className="live-course-more-menu">
<div className="operate__item"
onClick={()=>toEditPlanPage(item)}
>编辑</div>
<div
className="operate__item" onClick={()=>handleDelete(item)}
>删除</div>
const [sharePlanModal, setSharePlanModal] = useState(null);
function parseColumns() {
const columns = [
{
title: '培训计划',
key: 'planName',
dataIndex: 'planName',
width: '18%',
render: (val, record) => {
return (
<div className='plan_name_item'>
<img className='plan-cover' src={record.coverUrl || 'https://image.xiaomaiketang.com/xm/rEAetaTEh3.png'} alt='' />
<Choose>
<When condition={record.planName.length > 25}>
<Tooltip title={record.planName}>
<div className='plan-name'>{val}</div>
</Tooltip>
</When>
<Otherwise>
<div className='plan-name'>{val}</div>
</Otherwise>
</Choose>
</div>
)
}
function handleChangeTable(pagination, filters, sorter){
const { columnKey, order } = sorter;
const { query } = props;
let _columnKey;
let _order;
);
},
},
{
title: '课程总数量',
key: 'courseNum',
dataIndex: 'courseNum',
width: 110,
render: (val, record) => {
return <div className='course-number'>{val}</div>;
},
},
{
title: '当前状态',
width: '10%',
dataIndex: 'status',
render: (val, item, index) => {
return (
<Switch
checked={item.enableState === 'NO' ? false : true}
onChange={() => changeEnableState(item)}
disabled={User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager' ? false : true}
/>
);
},
},
{
title: '创建人',
key: 'createName',
dataIndex: 'createName',
width: '10%',
render: (val) => {
return <div className='create-name'>{val}</div>;
},
},
{
title: '创建时间',
width: '12.5%',
key: 'created',
dataIndex: 'created',
sorter: true,
render: (val) => {
return window.formatDate('YYYY-MM-DD H:i', val);
},
},
{
title: '更新时间',
width: '10%',
key: 'updated',
dataIndex: 'updated',
sorter: true,
render: (val) => {
return window.formatDate('YYYY-MM-DD H:i', val);
},
},
{
title: '参培人数',
width: 76,
key: 'cultureCustomerNum',
dataIndex: 'cultureCustomerNum',
sorter: true,
render: (val) => {
return <div className='join-number'>{val}</div>;
},
},
{
title: '操作',
key: 'operate',
dataIndex: 'operate',
fixed: 'right',
width: 176,
render: (val, record) => {
return (
<div className='operate'>
<div className='operate__item' onClick={() => toLearningDataPage(record)}>
学习数据
</div>
{record.enableState === 'YES' && (
<>
<span className='operate__item split'> | </span>
<div
className='operate__item'
onClick={() => {
handleShowShareModal(record);
}}>
分享
</div>
</>
)}
{(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && (
<>
<span className='operate__item split'> | </span>
<Dropdown overlay={renderMoreOperate(record)}>
<span className='more-operate'>
<span className='operate-text'>更多</span>
<span className='iconfont icon' style={{ color: '#2966FF' }}>
&#xe824;
</span>
</span>
</Dropdown>
</>
)}
</div>
);
},
},
];
return columns;
}
function renderMoreOperate(item) {
return (
<div className='live-course-more-menu'>
<div className='operate__item' onClick={() => toEditPlanPage(item)}>
编辑
</div>
<div className='operate__item' onClick={() => handleDelete(item)}>
删除
</div>
</div>
);
}
// 按创建时间升序排序
if (columnKey === 'created' && order === 'ascend') {_columnKey="CREATED"; _order = 'SORT_ASC'; }
// 按创建时间降序排序
if (columnKey === 'created' && order === 'descend') { _columnKey="CREATED"; _order = 'SORT_DESC';}
// 按更新时间升序排序
if (columnKey === 'updated' && order === 'ascend') { _columnKey="UPDATED"; _order = 'SORT_ASC'; }
// 按更新时间降序排序
if (columnKey === 'updated' && order === 'descend') { _columnKey="UPDATED"; _order = 'SORT_DESC'; }
// 按更新时间升序排序
if (columnKey === 'cultureCustomerNum' && order === 'ascend') { _columnKey="CUSTOMER_NUM"; _order = 'SORT_ASC'; }
// 按更新时间降序排序
if (columnKey === 'cultureCustomerNum' && order === 'descend') { _columnKey="CUSTOMER_NUM"; _order = 'SORT_DESC'; }
const _query = {
...query,
sortMap:{}
};
_query.sortMap[_columnKey]=_order;
props.onChange(_query);
function handleChangeTable(pagination, filters, sorter) {
const { columnKey, order } = sorter;
const { query } = props;
let _columnKey;
let _order;
// 按创建时间升序排序
if (columnKey === 'created' && order === 'ascend') {
_columnKey = 'CREATED';
_order = 'SORT_ASC';
}
// 显示分享弹窗
function handleShowShareModal(item) {
const htmlUrl = `${LIVE_SHARE}training_plan_detail/${item.planId}?id=${User.getStoreId()}&storeUserId=${User.getStoreUserId()}`;
const longUrl = htmlUrl
const shareData = { ...item, longUrl };
const sharePlanModal = (
<SharePlanModal
data={shareData}
type="liveClass"
close={() => {
setSharePlanModal(null)
}}
/>
)
setSharePlanModal(sharePlanModal)
// 按创建时间降序排序
if (columnKey === 'created' && order === 'descend') {
_columnKey = 'CREATED';
_order = 'SORT_DESC';
}
//改变上架状态
function changeEnableState(item){
let _enableState = item.enableState
if(_enableState==='NO'){
_enableState = "YES";
item.enableState = "YES"
}else{
_enableState = "NO"
item.enableState = "NO"
}
const params={
"planId": item.planId,
"enableState":_enableState
}
PlanService.updateStateTrainingPlan(params).then((res)=>{
if(res.success){
if(_enableState === "YES"){
message.success("已启用此计划");
}else{
message.success("已禁用此计划");
}
props.onChange();
}
})
}
function toEditPlanPage(item){
window.RCHistory.push({
pathname: `/create-plan?type=edit&id=${item.planId}`,
})
// 按更新时间升序排序
if (columnKey === 'updated' && order === 'ascend') {
_columnKey = 'UPDATED';
_order = 'SORT_ASC';
}
function toLearningDataPage(item){
window.RCHistory.push({
pathname: `/learning-data?id=${item.planId}`,
})
// 按更新时间降序排序
if (columnKey === 'updated' && order === 'descend') {
_columnKey = 'UPDATED';
_order = 'SORT_DESC';
}
function handleDelete(record){
return confirm({
title: '你确定要删除吗？',
content: '删除后，此培训计划的学员将无法继续学习，所有学习数据将同步删除不可恢复',
icon: <span className="icon iconfont default-confirm-icon">&#xe839; </span>,
okText: '删除',
okType: 'danger',
cancelText: '取消',
width:440,
height:188,
onOk: () => {
if(record.enableState === "YES"){
Modal.warning({
title: '无法删除',
content: '培训计划启用中，无法直接删除',
});
}else{
deleteConfirm(record);
}
}
})
// 按更新时间升序排序
if (columnKey === 'cultureCustomerNum' && order === 'ascend') {
_columnKey = 'CUSTOMER_NUM';
_order = 'SORT_ASC';
}
function deleteConfirm(item){
const params={
"planId": item.planId,
}
PlanService.deleteTrainingPlan(params).then((res)=>{
if(res.success){
message.success("删除成功");
props.onChange();
}
})
// 按更新时间降序排序
if (columnKey === 'cultureCustomerNum' && order === 'descend') {
_columnKey = 'CUSTOMER_NUM';
_order = 'SORT_DESC';
}
const _query = {
...query,
sortMap: {},
};
_query.sortMap[_columnKey] = _order;
props.onChange(_query);
}
// 显示分享弹窗
function handleShowShareModal(item) {
const htmlUrl = `${LIVE_SHARE}training_plan_detail/${item.planId}?id=${User.getStoreId()}&storeUserId=${User.getStoreUserId()}`;
const longUrl = htmlUrl;
const shareData = { ...item, longUrl };
const sharePlanModal = (
<SharePlanModal
data={shareData}
type='liveClass'
close={() => {
setSharePlanModal(null);
}}
/>
);
setSharePlanModal(sharePlanModal);
}
//改变上架状态
function changeEnableState(item) {
let _enableState = item.enableState;
if (_enableState === 'NO') {
_enableState = 'YES';
item.enableState = 'YES';
} else {
_enableState = 'NO';
item.enableState = 'NO';
}
function onShowSizeChange(current, size){
if (current === size) {
return
const params = {
planId: item.planId,
enableState: _enableState,
};
PlanService.updateStateTrainingPlan(params).then((res) => {
if (res.success) {
if (_enableState === 'YES') {
message.success('已启用此计划');
} else {
message.success('已禁用此计划');
}
props.onChange();
}
});
}
function toEditPlanPage(item) {
window.RCHistory.push({
pathname: `/create-plan?type=edit&id=${item.planId}`,
});
}
function toLearningDataPage(item) {
window.RCHistory.push({
pathname: `/learning-data?id=${item.planId}`,
});
}
function handleDelete(record) {
return confirm({
title: '你确定要删除吗？',
content: '删除后，此培训计划的学员将无法继续学习，所有学习数据将同步删除不可恢复',
icon: <span className='icon iconfont default-confirm-icon'>&#xe839; </span>,
okText: '删除',
okType: 'danger',
cancelText: '取消',
width: 440,
height: 188,
onOk: () => {
if (record.enableState === 'YES') {
Modal.warning({
title: '无法删除',
content: '培训计划启用中，无法直接删除',
});
} else {
deleteConfirm(record);
}
let _query = props.query
_query.size = size;
props.onChange(_query)
},
});
}
function deleteConfirm(item) {
const params = {
planId: item.planId,
};
PlanService.deleteTrainingPlan(params).then((res) => {
if (res.success) {
message.success('删除成功');
props.onChange();
}
});
}
function onShowSizeChange(current, size) {
if (current === size) {
return;
}
return (
<div className="plan-list">
<Table
rowKey={record => record.id}
showSorterTooltip={false}
dataSource={props.planListData}
columns={ parseColumns() }
pagination={false}
onChange={handleChangeTable}
bordered
size="middle"
scroll={{ x: 1400}}
className="plan-list-table"
/>
<div className="box-footer">
<PageControl
current={props.query.current - 1}
pageSize={props.query.size}
total={props.totalCount}
toPage={(page) => {
const _query = {...props.query, current: page + 1};
props.onChange(_query)
}}
onShowSizeChange={onShowSizeChange}
/>
</div>
{sharePlanModal }
</div>
)
let _query = props.query;
_query.size = size;
props.onChange(_query);
}
export default withRouter(PlanList);
\ No newline at end of file
return (
<div className='plan-list'>
<Table
rowKey={(record) => record.id}
showSorterTooltip={false}
dataSource={props.planListData}
columns={parseColumns()}
pagination={false}
onChange={handleChangeTable}
bordered
size='middle'
scroll={{ x: 1400 }}
className='plan-list-table'
/>
<div className='box-footer'>
<PageControl
current={props.query.current - 1}
pageSize={props.query.size}
total={props.totalCount}
toPage={(page) => {
const _query = { ...props.query, current: page + 1 };
props.onChange(_query);
}}
onShowSizeChange={onShowSizeChange}
/>
</div>
{sharePlanModal}
</div>
);
}
export default withRouter(PlanList);
src/modules/plan-manage/components/PlanList.less
.plan-list{
margin-top:12px;
.course-number{
text-align:right;
margin-right:45px;
}
.plan-list-table{
tbody {
tr{
&:nth-child(even){
background: transparent !important;
td{
background:#FFF !important;
}
.plan-list {
margin-top: 12px;
.course-number {
text-align: right;
margin-right: 45px;
}
.plan-list-table {
tbody {
tr {
&:nth-child(even) {
background: transparent !important;
td {
background: #fff !important;
}
&:nth-child(odd){
background: #FAFAFA !important;
td{
background: #FAFAFA !important;
}
}
&:nth-child(odd) {
background: #fafafa !important;
td {
background: #fafafa !important;
}
&:hover{
td{
background:#F3f6fa !important;
}
}
&:hover {
td {
background: #f3f6fa !important;
}
}
}
}
.plan-name{
text-overflow: -o-ellipsis-lastline;
}
.plan_name_item {
display: flex;
.plan-cover {
min-width: 97px;
max-width: 97px;
height: 50px;
border-radius: 2px;
margin-right: 8px;
}
.plan-name {
color: #666;
width: 188px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
height: 48px;
}
.operate-text {
color: #2966FF;
}
.operate-text {
color: #2966ff;
cursor: pointer;
}
.operate {
display: flex;
&__item {
color: #2966ff;
cursor: pointer;
}
.operate {
display: flex;
&__item {
color: #2966FF;
cursor: pointer;
&.split {
margin: 0 8px;
color: #BFBFBF;
}
&.split {
margin: 0 8px;
color: #bfbfbf;
}
}
.join-number{
text-align:right;
margin-right:12px;
}
.more-operate{
line-height:20px;
}
}
\ No newline at end of file
}
.join-number {
text-align: right;
margin-right: 12px;
}
.more-operate {
line-height: 20px;
}
}
src/modules/plan-manage/modal/relatedCourseModal.less
......@@ -2,55 +2,58 @@
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
font-weight: 500;
}
.link-create-course{
color:#666666;
font-size:14px;
width:638px;
text-align:left;
display:inline-block;
span{
color:#2966FF;
}
.ant-modal-footer {
display: flex;
}
.link-create-course {
color: #666666;
font-size: 14px;
width: 638px;
text-align: left;
display: inline-block;
span {
color: #2966ff;
}
.search-container{
margin-bottom:16px;
}
.search-container {
margin-bottom: 16px;
}
.select-area {
margin-bottom: 12px;
display: flex;
justify-content: space-between;
.select-box {
display: inline-box;
width: 186px;
background: #e9efff;
border-radius: 4px;
padding: 6px 16px;
margin-right: 8px;
display: flex;
justify-content: space-between;
.tip-icon {
color: #2966ff;
font-size: 14px;
margin-right: 4px;
}
.select-num {
color: #666666;
font-size: 14px;
}
.clear-btn {
text-align: right;
color: #2966ff;
font-size: 14px;
}
}
.related-box {
padding: 6px 16px;
background: #e9efff;
border-radius: 4px;
flex: 1;
color: #666666;
font-size: 14px;
}
.select-area{
margin-bottom:12px;
display:flex;
justify-content:space-between;
.select-box{
display:inline-box;
width: 186px;
background: #E9EFFF;
border-radius: 4px;
padding:6px 16px;
margin-right:8px;
display: flex;
justify-content: space-between;
.tip-icon{
color:#2966FF;
font-size:14px;
margin-right:4px;
}
.select-num{
color:#666666;
font-size:14px;
}
.clear-btn{
text-align:right;
color:#2966FF;
font-size:14px;
}
}
.related-box{
padding:6px 16px;
background: #E9EFFF;
border-radius: 4px;
flex:1;
color:#666666;
font-size:14px;
}
}
.search-container {
margin-bottom: 16px;
......
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