Skip to content

X
xiaomai-cloud-class-web
Commit 435c83c7 by wufan
Options

Merge branch 'hotfix/pangguoming/20210601/plan_list_add_cover' into 'master' 

Hotfix/pangguoming/20210601/plan list add cover

See merge request !32
parents 4098f112 e340da37
Showing with 1035 additions and 967 deletions
src/modules/knowledge-base/modal/AddCourse.jsx
...@@ -3,50 +3,50 @@ ...@@ -3,50 +3,50 @@
* @Author: zangsuyun * @Author: zangsuyun
* @Date: 2021-03-13 09:54:26 * @Date: 2021-03-13 09:54:26
* @LastEditors: fusanqiasng * @LastEditors: fusanqiasng
* @LastEditTime: 2021-05-30 23:59:36 * @LastEditTime: 2021-06-01 10:26:46
* @Copyright: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
import React from 'react' import React from 'react';
import { Row, Modal, Button, message, Radio, Table, Input, Tabs, Tooltip, TreeSelect } from 'antd' import { Row, Modal, Button, message, Radio, Table, Input, Tabs, Tooltip, TreeSelect } from 'antd';
import { PageControl } from '@/components' import { PageControl } from '@/components';
import TableSelectedData from '@/components/TableSelectedData' import TableSelectedData from '@/components/TableSelectedData';
import KnowledgeAPI from '@/data-source/knowledge/request-api' import KnowledgeAPI from '@/data-source/knowledge/request-api';
import AidToolService from '@/domains/aid-tool-domain/AidToolService' import AidToolService from '@/domains/aid-tool-domain/AidToolService';
import User from '@/common/js/user' import User from '@/common/js/user';
import './LiveList.less' import './LiveList.less';
import _ from 'underscore' import _ from 'underscore';
import dealTimeDuration from '../../course-manage/utils/dealTimeDuration' import dealTimeDuration from '../../course-manage/utils/dealTimeDuration';
const { Search } = Input const { Search } = Input;
const { TabPane } = Tabs const { TabPane } = Tabs;
const courseStateShow = { const courseStateShow = {
UN_START: { UN_START: {
code: 1, code: 1,
title: '待开课', title: '待开课',
color: '#FFB129' color: '#FFB129',
}, },
STARTING: { STARTING: {
code: 2, code: 2,
title: '上课中', title: '上课中',
color: '#238FFF' color: '#238FFF',
}, },
FINISH: { FINISH: {
code: 3, code: 3,
title: '已完成', title: '已完成',
color: '#3BBDAA' color: '#3BBDAA',
}, },
EXPIRED: { EXPIRED: {
code: 4, code: 4,
title: '未成功开课', title: '未成功开课',
color: '#999' color: '#999',
} },
} };
class AddCourse extends React.Component { class AddCourse extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props);
this.state = { this.state = {
liveDataSource: [], liveDataSource: [],
liveSize: 10, liveSize: 10,
...@@ -55,7 +55,7 @@ class AddCourse extends React.Component { ...@@ -55,7 +55,7 @@ class AddCourse extends React.Component {
excludeUsed: true, excludeUsed: true,
courseType: 'LIVE', courseType: 'LIVE',
storeId: User.getStoreId(), storeId: User.getStoreId(),
toRefKnowledgeCategoryId: this.props.categoryId toRefKnowledgeCategoryId: this.props.categoryId,
}, },
liveTotalCount: 0, liveTotalCount: 0,
selectLive: [], //弹窗内已选择的直播课程 selectLive: [], //弹窗内已选择的直播课程
...@@ -63,21 +63,21 @@ class AddCourse extends React.Component { ...@@ -63,21 +63,21 @@ class AddCourse extends React.Component {
videoCourseDivision: 'internal', videoCourseDivision: 'internal',
videoDataSource: { videoDataSource: {
external: [], external: [],
internal: [] internal: [],
}, },
videoSize: { videoSize: {
external: 10, external: 10,
internal: 10 internal: 10,
}, },
videoSearchDefalt: { videoSearchDefalt: {
external: { external: {
categoryId: '', categoryId: '',
courseName: '' courseName: '',
}, },
internal: { internal: {
categoryId: '', categoryId: '',
courseName: '' courseName: '',
} },
}, },
videoQuery: { videoQuery: {
...@@ -88,7 +88,7 @@ class AddCourse extends React.Component { ...@@ -88,7 +88,7 @@ class AddCourse extends React.Component {
courseType: 'VOICE', courseType: 'VOICE',
excludeUsed: true, excludeUsed: true,
storeId: User.getStoreId(), storeId: User.getStoreId(),
toRefKnowledgeCategoryId: this.props.categoryId toRefKnowledgeCategoryId: this.props.categoryId,
}, },
internal: { internal: {
categoryId: '', categoryId: '',
...@@ -97,20 +97,20 @@ class AddCourse extends React.Component { ...@@ -97,20 +97,20 @@ class AddCourse extends React.Component {
courseType: 'VOICE', courseType: 'VOICE',
excludeUsed: true, excludeUsed: true,
storeId: User.getStoreId(), storeId: User.getStoreId(),
toRefKnowledgeCategoryId: this.props.categoryId toRefKnowledgeCategoryId: this.props.categoryId,
} },
}, },
videoTotalCount: { videoTotalCount: {
external: 0, external: 0,
internal: 0 internal: 0,
}, },
selectVideo: { selectVideo: {
external: [], external: [],
internal: [] internal: [],
}, //弹窗内已选择的视频课程 }, //弹窗内已选择的视频课程
currentVideoCourseListData: { currentVideoCourseListData: {
external: [], external: [],
internal: [] internal: [],
}, //页面中已关联的视频课程 }, //页面中已关联的视频课程
pictureDataSource: [], pictureDataSource: [],
...@@ -120,47 +120,47 @@ class AddCourse extends React.Component { ...@@ -120,47 +120,47 @@ class AddCourse extends React.Component {
excludeUsed: true, excludeUsed: true,
courseType: 'PICTURE', courseType: 'PICTURE',
storeId: User.getStoreId(), storeId: User.getStoreId(),
toRefKnowledgeCategoryId: this.props.categoryId toRefKnowledgeCategoryId: this.props.categoryId,
}, },
pictureTotalCount: 0, pictureTotalCount: 0,
selectPicture: [], //弹窗内已选择的图文课程 selectPicture: [], //弹窗内已选择的图文课程
categoryList: [], //内部分类列表 categoryList: [], //内部分类列表
categoryListExternal: [] //外部分类列表 categoryListExternal: [], //外部分类列表
} };
} }
componentDidMount() { componentDidMount() {
this.handleFetchLiveList() this.handleFetchLiveList();
this.handleFetchVideoList() this.handleFetchVideoList();
this.handleFetchPictureList() this.handleFetchPictureList();
this.queryCategoryTree() this.queryCategoryTree();
} }
// 查询分类树 // 查询分类树
queryCategoryTree = (categoryName) => { queryCategoryTree = (categoryName) => {
let query = { let query = {
storeId: User.getStoreId(), storeId: User.getStoreId(),
withCount: false withCount: false,
} };
let queryInternal = { let queryInternal = {
bizType: 'QUESTION', bizType: 'QUESTION',
source: 2, source: 2,
tenantId: User.getStoreId(), tenantId: User.getStoreId(),
userId: User.getStoreUserId(), userId: User.getStoreUserId(),
count: false count: false,
} };
AidToolService.queryExternalCategoryTree(queryInternal).then((res) => { AidToolService.queryExternalCategoryTree(queryInternal).then((res) => {
const { categoryList = [] } = res.result const { categoryList = [] } = res.result;
this.setState({ this.setState({
categoryListExternal: this.renderTreeNodes(categoryList) categoryListExternal: this.renderTreeNodes(categoryList),
}) });
}) });
KnowledgeAPI.getCategoryTree(query).then((res) => { KnowledgeAPI.getCategoryTree(query).then((res) => {
const { categoryList = [] } = res.result const { categoryList = [] } = res.result;
this.setState({ this.setState({
categoryList: this.renderTreeNodes(categoryList) categoryList: this.renderTreeNodes(categoryList),
}) });
}) });
} };
renderTreeNodes = (data) => { renderTreeNodes = (data) => {
let newTreeData = data.map((item) => { let newTreeData = data.map((item) => {
...@@ -171,124 +171,124 @@ class AddCourse extends React.Component { ...@@ -171,124 +171,124 @@ class AddCourse extends React.Component {
</span> </span>
{item.categoryName} {item.categoryName}
</span> </span>
) );
item.key = item.id item.key = item.id;
if (item.sonCategoryList) { if (item.sonCategoryList) {
item.children = this.renderTreeNodes(item.sonCategoryList) item.children = this.renderTreeNodes(item.sonCategoryList);
} }
return item return item;
}) });
return newTreeData return newTreeData;
} };
// 获取直播课列表 // 获取直播课列表
handleFetchLiveList = () => { handleFetchLiveList = () => {
const { liveQuery, liveSize } = this.state const { liveQuery, liveSize } = this.state;
const params = { const params = {
...liveQuery, ...liveQuery,
size: liveSize size: liveSize,
} };
// CourseService.getLiveCloudCoursePage(params).then((res) => { // CourseService.getLiveCloudCoursePage(params).then((res) => {
KnowledgeAPI.knowledgeLiveCoursePage(params).then((res) => { KnowledgeAPI.knowledgeLiveCoursePage(params).then((res) => {
const { result = {} } = res const { result = {} } = res;
const { records = [], total = 0 } = result const { records = [], total = 0 } = result;
this.setState({ this.setState({
liveDataSource: records, liveDataSource: records,
liveTotalCount: Number(total) liveTotalCount: Number(total),
}) });
}) });
} };
// 获取视频课列表 // 获取视频课列表
handleFetchVideoList = () => { handleFetchVideoList = () => {
const { videoQuery, videoSize, videoCourseDivision, videoDataSource, videoTotalCount } = this.state const { videoQuery, videoSize, videoCourseDivision, videoDataSource, videoTotalCount } = this.state;
const params = { const params = {
...videoQuery[videoCourseDivision], ...videoQuery[videoCourseDivision],
size: videoSize[videoCourseDivision], size: videoSize[videoCourseDivision],
courseDivision: videoCourseDivision === 'internal' ? 'INTERNAL' : 'EXTERNAL' courseDivision: videoCourseDivision === 'internal' ? 'INTERNAL' : 'EXTERNAL',
} };
// CourseService.videoSchedulePage(query).then((res) => { // CourseService.videoSchedulePage(query).then((res) => {
KnowledgeAPI.knowledgeMediaCoursePage(params).then((res) => { KnowledgeAPI.knowledgeMediaCoursePage(params).then((res) => {
const { result = {} } = res || {} const { result = {} } = res || {};
const { records = [], total = 0 } = result const { records = [], total = 0 } = result;
this.setState({ this.setState({
videoDataSource: { videoDataSource: {
...videoDataSource, ...videoDataSource,
[videoCourseDivision]: records [videoCourseDivision]: records,
}, },
videoTotalCount: { videoTotalCount: {
...videoTotalCount, ...videoTotalCount,
[videoCourseDivision]: Number(total) [videoCourseDivision]: Number(total),
} },
}) });
}) });
} };
// 获取图文课列表 // 获取图文课列表
handleFetchPictureList = () => { handleFetchPictureList = () => {
const { pictureQuery, pictureSize } = this.state const { pictureQuery, pictureSize } = this.state;
const params = { const params = {
...pictureQuery, ...pictureQuery,
size: pictureSize size: pictureSize,
} };
// CourseService.pictureSchedulePage(query).then((res) => { // CourseService.pictureSchedulePage(query).then((res) => {
KnowledgeAPI.knowledgeMediaCoursePage(params).then((res) => { KnowledgeAPI.knowledgeMediaCoursePage(params).then((res) => {
const { result = {} } = res || {} const { result = {} } = res || {};
const { records = [], total = 0 } = result const { records = [], total = 0 } = result;
this.setState({ this.setState({
pictureDataSource: records, pictureDataSource: records,
pictureTotalCount: Number(total) pictureTotalCount: Number(total),
}) });
}) });
} };
onShowLiveSizeChange = (current, size) => { onShowLiveSizeChange = (current, size) => {
if (current === size) { if (current === size) {
return return;
} }
this.setState( this.setState(
{ {
liveSize: size liveSize: size,
}, },
() => { () => {
this.handleFetchLiveList() this.handleFetchLiveList();
} }
) );
} };
onShowVideoSizeChange = (current, size) => { onShowVideoSizeChange = (current, size) => {
if (current === size) { if (current === size) {
return return;
} }
this.setState( this.setState(
{ {
videoSize: size videoSize: size,
}, },
() => { () => {
this.handleFetchVideoList() this.handleFetchVideoList();
} }
) );
} };
onShowPictureSizeChange = (current, size) => { onShowPictureSizeChange = (current, size) => {
if (current === size) { if (current === size) {
return return;
} }
this.setState( this.setState(
{ {
pictureSize: size pictureSize: size,
}, },
() => { () => {
this.handleFetchPictureList() this.handleFetchPictureList();
} }
) );
} };
liveColumns = () => { liveColumns = () => {
const columns = [ const columns = [
...@@ -304,7 +304,7 @@ class AddCourse extends React.Component { ...@@ -304,7 +304,7 @@ class AddCourse extends React.Component {
cursor: 'pointer', cursor: 'pointer',
color: '#bfbfbf', color: '#bfbfbf',
fontSize: '14px', fontSize: '14px',
fontWeight: '400' fontWeight: '400',
}}> }}>
&#xe61d; &#xe61d;
</i> </i>
...@@ -315,13 +315,13 @@ class AddCourse extends React.Component { ...@@ -315,13 +315,13 @@ class AddCourse extends React.Component {
key: 'course', key: 'course',
dataIndex: 'courseName', dataIndex: 'courseName',
render: (val, record) => { render: (val, record) => {
let hasCover = false let hasCover = false;
return ( return (
<div className='record__item'> <div className='record__item'>
{record.courseMediaVOS.map((item) => { {record.courseMediaVOS.map((item) => {
if (item.contentType === 'COVER') { if (item.contentType === 'COVER') {
hasCover = true hasCover = true;
return <img className='course-cover' src={item.mediaUrl} alt='' /> return <img className='course-cover' src={item.mediaUrl} alt='' />;
} }
})} })}
{!hasCover && <img className='course-cover' src={'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'} alt='' />} {!hasCover && <img className='course-cover' src={'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'} alt='' />}
...@@ -341,15 +341,15 @@ class AddCourse extends React.Component { ...@@ -341,15 +341,15 @@ class AddCourse extends React.Component {
className='course-status' className='course-status'
style={{ style={{
color: courseStateShow[record.courseState].color, color: courseStateShow[record.courseState].color,
border: `1px solid ${courseStateShow[record.courseState].color}` border: `1px solid ${courseStateShow[record.courseState].color}`,
}}> }}>
{courseStateShow[record.courseState].title} {courseStateShow[record.courseState].title}
</span> </span>
</div> </div>
</div> </div>
</div> </div>
) );
} },
}, },
{ {
title: '上课时间', title: '上课时间',
...@@ -362,8 +362,8 @@ class AddCourse extends React.Component { ...@@ -362,8 +362,8 @@ class AddCourse extends React.Component {
{formatDate('YYYY-MM-DD', parseInt(item.startTime))} <br></br> {formatDate('YYYY-MM-DD', parseInt(item.startTime))} <br></br>
{formatDate('H:i', parseInt(item.startTime))}~{formatDate('H:i', parseInt(item.endTime))} {formatDate('H:i', parseInt(item.startTime))}~{formatDate('H:i', parseInt(item.endTime))}
</span> </span>
) );
} },
}, },
{ {
...@@ -377,16 +377,16 @@ class AddCourse extends React.Component { ...@@ -377,16 +377,16 @@ class AddCourse extends React.Component {
{record.categoryOneName} {record.categoryOneName}
{record.categoryTwoName ? `-${record.categoryTwoName}` : ''} {record.categoryTwoName ? `-${record.categoryTwoName}` : ''}
</div> </div>
) );
} },
} },
] ];
return columns return columns;
} };
videoColumns = () => { videoColumns = () => {
const { videoCourseDivision } = this.state const { videoCourseDivision } = this.state;
const columns = [ const columns = [
{ {
title: ( title: (
...@@ -400,7 +400,7 @@ class AddCourse extends React.Component { ...@@ -400,7 +400,7 @@ class AddCourse extends React.Component {
cursor: 'pointer', cursor: 'pointer',
color: '#bfbfbf', color: '#bfbfbf',
fontSize: '14px', fontSize: '14px',
fontWeight: '400' fontWeight: '400',
}}> }}>
&#xe61d; &#xe61d;
</i> </i>
...@@ -411,7 +411,7 @@ class AddCourse extends React.Component { ...@@ -411,7 +411,7 @@ class AddCourse extends React.Component {
dataIndex: 'scheduleName', dataIndex: 'scheduleName',
width: 300, width: 300,
render: (val, record) => { render: (val, record) => {
const { coverUrl, mediaCourseUrl } = record const { coverUrl, mediaCourseUrl } = record;
return ( return (
<div className='record__item'> <div className='record__item'>
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */} {/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
...@@ -436,8 +436,8 @@ class AddCourse extends React.Component { ...@@ -436,8 +436,8 @@ class AddCourse extends React.Component {
</Otherwise> </Otherwise>
</Choose> </Choose>
</div> </div>
) );
} },
}, },
{ {
title: '课程时长', title: '课程时长',
...@@ -445,8 +445,8 @@ class AddCourse extends React.Component { ...@@ -445,8 +445,8 @@ class AddCourse extends React.Component {
width: 80, width: 80,
dataIndex: 'videoDuration', dataIndex: 'videoDuration',
render: (text, item) => { render: (text, item) => {
return <span>{text ? dealTimeDuration(text) : '-'}</span> return <span>{text ? dealTimeDuration(text) : '-'}</span>;
} },
}, },
{ {
...@@ -466,12 +466,12 @@ class AddCourse extends React.Component { ...@@ -466,12 +466,12 @@ class AddCourse extends React.Component {
<div className='record__item'>{record.categorySonName}</div> <div className='record__item'>{record.categorySonName}</div>
</Otherwise> </Otherwise>
</Choose> </Choose>
) );
} },
} },
] ];
return columns return columns;
} };
pictureColumns = () => { pictureColumns = () => {
const columns = [ const columns = [
...@@ -487,7 +487,7 @@ class AddCourse extends React.Component { ...@@ -487,7 +487,7 @@ class AddCourse extends React.Component {
cursor: 'pointer', cursor: 'pointer',
color: '#bfbfbf', color: '#bfbfbf',
fontSize: '14px', fontSize: '14px',
fontWeight: '400' fontWeight: '400',
}}> }}>
&#xe61d; &#xe61d;
</i> </i>
...@@ -498,7 +498,7 @@ class AddCourse extends React.Component { ...@@ -498,7 +498,7 @@ class AddCourse extends React.Component {
dataIndex: 'scheduleName', dataIndex: 'scheduleName',
width: 371, width: 371,
render: (val, record) => { render: (val, record) => {
const { coverUrl } = record const { coverUrl } = record;
return ( return (
<div className='record__item'> <div className='record__item'>
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */} {/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
...@@ -514,8 +514,8 @@ class AddCourse extends React.Component { ...@@ -514,8 +514,8 @@ class AddCourse extends React.Component {
</Otherwise> </Otherwise>
</Choose> </Choose>
</div> </div>
) );
} },
}, },
{ {
title: '课程分类', title: '课程分类',
...@@ -527,122 +527,122 @@ class AddCourse extends React.Component { ...@@ -527,122 +527,122 @@ class AddCourse extends React.Component {
{record.categoryOneName} {record.categoryOneName}
{record.categoryTwoName ? `-${record.categoryTwoName}` : ''} {record.categoryTwoName ? `-${record.categoryTwoName}` : ''}
</div> </div>
) );
} },
} },
] ];
return columns return columns;
} };
selectLiveList = (record, selected) => { selectLiveList = (record, selected) => {
let { selectLive } = this.state let { selectLive } = this.state;
let _list = [] let _list = [];
if (selected || !_.find(selectLive, (item) => item.liveCourseId === record.liveCourseId)) { 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 { } 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) => { 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)) { 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 { } else {
_list = _.reject(selectList, (item) => item.id === record.id) _list = _.reject(selectList, (item) => item.id === record.id);
} }
this.setState({ this.setState({
selectVideo: { selectVideo: {
...selectVideo, ...selectVideo,
[videoCourseDivision]: _list [videoCourseDivision]: _list,
} },
}) });
} };
selectPictureList = (record, selected) => { selectPictureList = (record, selected) => {
console.log(record) console.log(record);
let { selectPicture } = this.state let { selectPicture } = this.state;
let _list = [] let _list = [];
if (selected || !_.find(selectPicture, (item) => item.id == record.id)) { 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 { } 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) { callback(key) {
console.log(key) console.log(key);
} }
handleChangVideoFilter = (key, value) => { handleChangVideoFilter = (key, value) => {
const { videoQuery, videoCourseDivision, videoSearchDefalt } = this.state const { videoQuery, videoCourseDivision, videoSearchDefalt } = this.state;
videoQuery[videoCourseDivision][key] = value videoQuery[videoCourseDivision][key] = value;
videoSearchDefalt[videoCourseDivision][key] = value videoSearchDefalt[videoCourseDivision][key] = value;
videoQuery[videoCourseDivision].current = 1 videoQuery[videoCourseDivision].current = 1;
this.setState( this.setState(
{ {
videoQuery, videoQuery,
videoSearchDefalt videoSearchDefalt,
}, },
() => { () => {
this.handleFetchVideoList() this.handleFetchVideoList();
} }
) );
} };
handleChangVideoCourseName = (e) => { handleChangVideoCourseName = (e) => {
const { videoSearchDefalt, videoCourseDivision } = this.state const { videoSearchDefalt, videoCourseDivision } = this.state;
videoSearchDefalt[videoCourseDivision].courseName = e.target.value videoSearchDefalt[videoCourseDivision].courseName = e.target.value;
this.setState({ this.setState({
videoSearchDefalt videoSearchDefalt,
}) });
} };
handleChangLiveFilter = (key, value) => { handleChangLiveFilter = (key, value) => {
const { liveQuery } = this.state const { liveQuery } = this.state;
liveQuery[key] = value liveQuery[key] = value;
liveQuery.current = 1 liveQuery.current = 1;
this.setState( this.setState(
{ {
liveQuery liveQuery,
}, },
() => { () => {
this.handleFetchLiveList() this.handleFetchLiveList();
} }
) );
} };
handleChangPictureFilter = (key, value) => { handleChangPictureFilter = (key, value) => {
const { pictureQuery } = this.state const { pictureQuery } = this.state;
pictureQuery[key] = value pictureQuery[key] = value;
pictureQuery.current = 1 pictureQuery.current = 1;
this.setState( this.setState(
{ {
pictureQuery pictureQuery,
}, },
() => { () => {
this.handleFetchPictureList() this.handleFetchPictureList();
} }
) );
} };
handAddCourse = () => { handAddCourse = () => {
const { selectVideo, selectLive, selectPicture } = this.state const { selectVideo, selectLive, selectPicture } = this.state;
const batchAddList = [] const batchAddList = [];
if (selectVideo.external.length) { if (selectVideo.external.length) {
batchAddList.push({ batchAddList.push({
categoryId: this.props.categoryId, categoryId: this.props.categoryId,
refIds: _.pluck(selectVideo.external, 'id'), refIds: _.pluck(selectVideo.external, 'id'),
storeId: User.getStoreId(), storeId: User.getStoreId(),
type: 'VOICE', type: 'VOICE',
createId: User.getStoreUserId() createId: User.getStoreUserId(),
}) });
} }
if (selectVideo.internal.length) { if (selectVideo.internal.length) {
batchAddList.push({ batchAddList.push({
...@@ -650,8 +650,8 @@ class AddCourse extends React.Component { ...@@ -650,8 +650,8 @@ class AddCourse extends React.Component {
refIds: _.pluck(selectVideo.internal, 'id'), refIds: _.pluck(selectVideo.internal, 'id'),
storeId: User.getStoreId(), storeId: User.getStoreId(),
type: 'VOICE', type: 'VOICE',
createId: User.getStoreUserId() createId: User.getStoreUserId(),
}) });
} }
if (selectLive.length) { if (selectLive.length) {
batchAddList.push({ batchAddList.push({
...@@ -659,8 +659,8 @@ class AddCourse extends React.Component { ...@@ -659,8 +659,8 @@ class AddCourse extends React.Component {
refIds: _.pluck(selectLive, 'liveCourseId'), refIds: _.pluck(selectLive, 'liveCourseId'),
storeId: User.getStoreId(), storeId: User.getStoreId(),
type: 'LIVE', type: 'LIVE',
createId: User.getStoreUserId() createId: User.getStoreUserId(),
}) });
} }
if (selectPicture.length) { if (selectPicture.length) {
batchAddList.push({ batchAddList.push({
...@@ -668,21 +668,21 @@ class AddCourse extends React.Component { ...@@ -668,21 +668,21 @@ class AddCourse extends React.Component {
refIds: _.pluck(selectPicture, 'id'), refIds: _.pluck(selectPicture, 'id'),
storeId: User.getStoreId(), storeId: User.getStoreId(),
type: 'PICTURE', type: 'PICTURE',
createId: User.getStoreUserId() createId: User.getStoreUserId(),
}) });
} }
KnowledgeAPI.addDifTypeKnowledge({ batchAddList }).then(({ success }) => { KnowledgeAPI.addDifTypeKnowledge({ batchAddList }).then(({ success }) => {
if (success) { if (success) {
message.success('新增成功') message.success('新增成功');
this.props.onClose() this.props.onClose();
this.props.onChange() this.props.onChange();
this.props.updateCategoryTree() this.props.updateCategoryTree();
} }
}) });
} };
videoCourseDivisionChange = (e) => { videoCourseDivisionChange = (e) => {
const { videoQuery, videoSearchDefalt } = this.state const { videoQuery, videoSearchDefalt } = this.state;
this.setState( this.setState(
{ {
videoCourseDivision: e.target.value, videoCourseDivision: e.target.value,
...@@ -690,18 +690,18 @@ class AddCourse extends React.Component { ...@@ -690,18 +690,18 @@ class AddCourse extends React.Component {
...videoSearchDefalt, ...videoSearchDefalt,
[e.target.value]: { [e.target.value]: {
courseName: videoQuery[e.target.value].courseName, courseName: videoQuery[e.target.value].courseName,
categoryId: videoQuery[e.target.value].categoryId categoryId: videoQuery[e.target.value].categoryId,
} },
} },
}, },
() => { () => {
this.handleFetchVideoList() this.handleFetchVideoList();
} }
) );
} };
renderFooter = () => { renderFooter = () => {
const { selectVideo, selectPicture, selectLive } = this.state const { selectVideo, selectPicture, selectLive } = this.state;
return ( return (
<div> <div>
<Button onClick={this.props.onClose}>取消</Button> <Button onClick={this.props.onClose}>取消</Button>
...@@ -712,8 +712,8 @@ class AddCourse extends React.Component { ...@@ -712,8 +712,8 @@ class AddCourse extends React.Component {
确定 确定
</Button> </Button>
</div> </div>
) );
} };
render() { render() {
const { const {
...@@ -735,55 +735,55 @@ class AddCourse extends React.Component { ...@@ -735,55 +735,55 @@ class AddCourse extends React.Component {
selectPicture, selectPicture,
videoSearchDefalt, videoSearchDefalt,
categoryList, categoryList,
categoryListExternal categoryListExternal,
} = this.state } = this.state;
const LiveSelection = { const LiveSelection = {
selectedRowKeys: _.pluck(selectLive, 'liveCourseId'), selectedRowKeys: _.pluck(selectLive, 'liveCourseId'),
onSelect: this.selectLiveList, onSelect: this.selectLiveList,
onSelectAll: (selected, _selectedRows, changeRows) => { onSelectAll: (selected, _selectedRows, changeRows) => {
let _list = [] let _list = [];
if (selected) { if (selected) {
_list = _.uniq(selectLive.concat(changeRows), false, (item) => item.liveCourseId) _list = _.uniq(selectLive.concat(changeRows), false, (item) => item.liveCourseId);
} else { } 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 = { const VideoSelection = {
selectedRowKeys: _.pluck(selectVideo[videoCourseDivision], 'id'), selectedRowKeys: _.pluck(selectVideo[videoCourseDivision], 'id'),
onSelect: this.selectVideoList, onSelect: this.selectVideoList,
onSelectAll: (selected, _selectedRows, changeRows) => { onSelectAll: (selected, _selectedRows, changeRows) => {
let _list = [] let _list = [];
if (selected) { if (selected) {
_list = _.uniq(selectVideo[videoCourseDivision].concat(changeRows), false, (item) => item.id) _list = _.uniq(selectVideo[videoCourseDivision].concat(changeRows), false, (item) => item.id);
} else { } 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({ this.setState({
selectVideo: { selectVideo: {
...selectVideo, ...selectVideo,
[videoCourseDivision]: _list [videoCourseDivision]: _list,
} },
}) });
} },
} };
const PictureSelection = { const PictureSelection = {
selectedRowKeys: _.pluck(selectPicture, 'id'), selectedRowKeys: _.pluck(selectPicture, 'id'),
onSelect: this.selectPictureList, onSelect: this.selectPictureList,
onSelectAll: (selected, _selectedRows, changeRows) => { onSelectAll: (selected, _selectedRows, changeRows) => {
let _list = [] let _list = [];
if (selected) { if (selected) {
_list = _.uniq(selectPicture.concat(changeRows), false, (item) => item.id) _list = _.uniq(selectPicture.concat(changeRows), false, (item) => item.id);
} else { } 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 ( return (
<Modal visible={true} width={800} title='新增课程' footer={this.renderFooter()} onCancel={this.props.onClose} className='add-course-modal'> <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 { ...@@ -798,7 +798,7 @@ class AddCourse extends React.Component {
style={{ width: 'calc(100% - 75px)' }} style={{ width: 'calc(100% - 75px)' }}
placeholder='搜索课程名称' placeholder='搜索课程名称'
onSearch={(value) => { onSearch={(value) => {
this.handleChangLiveFilter('courseName', value) this.handleChangLiveFilter('courseName', value);
}} }}
enterButton={<span className='icon iconfont'>&#xe832;</span>} enterButton={<span className='icon iconfont'>&#xe832;</span>}
/> />
...@@ -814,7 +814,7 @@ class AddCourse extends React.Component { ...@@ -814,7 +814,7 @@ class AddCourse extends React.Component {
placeholder='请选择课程类型' placeholder='请选择课程类型'
allowClear allowClear
onChange={(value) => { onChange={(value) => {
this.handleChangLiveFilter('categoryId', value) this.handleChangLiveFilter('categoryId', value);
}} }}
/> />
</div> </div>
...@@ -826,11 +826,11 @@ class AddCourse extends React.Component { ...@@ -826,11 +826,11 @@ class AddCourse extends React.Component {
this.setState({ this.setState({
selectVideo: { selectVideo: {
internal: [], internal: [],
external: [] external: [],
}, },
selectLive: [], selectLive: [],
selectPicture: [] selectPicture: [],
}) });
}} }}
/> />
<Table <Table
...@@ -851,15 +851,15 @@ class AddCourse extends React.Component { ...@@ -851,15 +851,15 @@ class AddCourse extends React.Component {
pageSize={liveSize} pageSize={liveSize}
total={parseInt(liveTotalCount)} total={parseInt(liveTotalCount)}
toPage={(page) => { toPage={(page) => {
const _query = { ...liveQuery, current: page + 1 } const _query = { ...liveQuery, current: page + 1 };
this.setState( this.setState(
{ {
liveQuery: _query liveQuery: _query,
}, },
() => { () => {
this.handleFetchLiveList() this.handleFetchLiveList();
} }
) );
}} }}
onShowSizeChange={this.onShowLiveSizeChange} onShowSizeChange={this.onShowLiveSizeChange}
/> />
...@@ -883,7 +883,7 @@ class AddCourse extends React.Component { ...@@ -883,7 +883,7 @@ class AddCourse extends React.Component {
placeholder='搜索课程名称' placeholder='搜索课程名称'
onChange={this.handleChangVideoCourseName} onChange={this.handleChangVideoCourseName}
onSearch={(value) => { onSearch={(value) => {
this.handleChangVideoFilter('courseName', value) this.handleChangVideoFilter('courseName', value);
}} }}
enterButton={<span className='icon iconfont'>&#xe832;</span>} enterButton={<span className='icon iconfont'>&#xe832;</span>}
/> />
...@@ -893,7 +893,7 @@ class AddCourse extends React.Component { ...@@ -893,7 +893,7 @@ class AddCourse extends React.Component {
<TreeSelect <TreeSelect
treeNodeFilterProp='categoryName' treeNodeFilterProp='categoryName'
showSearch showSearch
value={videoQuery[videoCourseDivision].categoryId} value={videoQuery[videoCourseDivision].categoryId || null}
style={{ minWidth: 'calc(100% - 75px)' }} style={{ minWidth: 'calc(100% - 75px)' }}
dropdownMatchSelectWidth={false} dropdownMatchSelectWidth={false}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
...@@ -901,7 +901,7 @@ class AddCourse extends React.Component { ...@@ -901,7 +901,7 @@ class AddCourse extends React.Component {
placeholder='请选择课程类型' placeholder='请选择课程类型'
allowClear allowClear
onChange={(value) => { onChange={(value) => {
this.handleChangVideoFilter('categoryId', value) this.handleChangVideoFilter('categoryId', value);
}} }}
/> />
</div> </div>
...@@ -913,11 +913,11 @@ class AddCourse extends React.Component { ...@@ -913,11 +913,11 @@ class AddCourse extends React.Component {
this.setState({ this.setState({
selectVideo: { selectVideo: {
internal: [], internal: [],
external: [] external: [],
}, },
selectLive: [], selectLive: [],
selectPicture: [] selectPicture: [],
}) });
}} }}
/> />
<Table <Table
...@@ -939,19 +939,19 @@ class AddCourse extends React.Component { ...@@ -939,19 +939,19 @@ class AddCourse extends React.Component {
pageSize={videoSize[videoCourseDivision]} pageSize={videoSize[videoCourseDivision]}
total={videoTotalCount[videoCourseDivision]} total={videoTotalCount[videoCourseDivision]}
toPage={(page) => { toPage={(page) => {
const _query = { ...videoQuery[videoCourseDivision], current: page + 1 } const _query = { ...videoQuery[videoCourseDivision], current: page + 1 };
console.log('_query', _query) console.log('_query', _query);
this.setState( this.setState(
{ {
videoQuery: { videoQuery: {
...videoQuery, ...videoQuery,
[videoCourseDivision]: _query [videoCourseDivision]: _query,
} },
}, },
() => { () => {
this.handleFetchVideoList() this.handleFetchVideoList();
} }
) );
}} }}
onShowSizeChange={this.onShowVideoSizeChange} onShowSizeChange={this.onShowVideoSizeChange}
/> />
...@@ -970,7 +970,7 @@ class AddCourse extends React.Component { ...@@ -970,7 +970,7 @@ class AddCourse extends React.Component {
style={{ width: 'calc(100% - 75px)' }} style={{ width: 'calc(100% - 75px)' }}
placeholder='搜索课程名称' placeholder='搜索课程名称'
onSearch={(value) => { onSearch={(value) => {
this.handleChangPictureFilter('courseName', value) this.handleChangPictureFilter('courseName', value);
}} }}
enterButton={<span className='icon iconfont'>&#xe832;</span>} enterButton={<span className='icon iconfont'>&#xe832;</span>}
/> />
...@@ -986,7 +986,7 @@ class AddCourse extends React.Component { ...@@ -986,7 +986,7 @@ class AddCourse extends React.Component {
placeholder='请选择课程类型' placeholder='请选择课程类型'
allowClear allowClear
onChange={(value) => { onChange={(value) => {
this.handleChangPictureFilter('categoryId', value) this.handleChangPictureFilter('categoryId', value);
}} }}
/> />
</div> </div>
...@@ -998,11 +998,11 @@ class AddCourse extends React.Component { ...@@ -998,11 +998,11 @@ class AddCourse extends React.Component {
this.setState({ this.setState({
selectVideo: { selectVideo: {
internal: [], internal: [],
external: [] external: [],
}, },
selectLive: [], selectLive: [],
selectPicture: [] selectPicture: [],
}) });
}} }}
/> />
<Table <Table
...@@ -1023,15 +1023,15 @@ class AddCourse extends React.Component { ...@@ -1023,15 +1023,15 @@ class AddCourse extends React.Component {
pageSize={pictureSize} pageSize={pictureSize}
total={parseInt(pictureTotalCount)} total={parseInt(pictureTotalCount)}
toPage={(page) => { toPage={(page) => {
const _query = { ...pictureQuery, current: page + 1 } const _query = { ...pictureQuery, current: page + 1 };
this.setState( this.setState(
{ {
pictureQuery: _query pictureQuery: _query,
}, },
() => { () => {
this.handleFetchPictureList() this.handleFetchPictureList();
} }
) );
}} }}
onShowSizeChange={this.onShowPictureSizeChange} onShowSizeChange={this.onShowPictureSizeChange}
/> />
...@@ -1041,7 +1041,7 @@ class AddCourse extends React.Component { ...@@ -1041,7 +1041,7 @@ class AddCourse extends React.Component {
</TabPane> </TabPane>
</Tabs> </Tabs>
</Modal> </Modal>
) );
} }
} }
export default AddCourse export default AddCourse;
src/modules/plan-manage/components/BasicInfo.jsx
/* /*
* @Author: zhangleyuan * @Author: zhangleyuan
* @Date: 2021-02-20 16:45:51 * @Date: 2021-02-20 16:45:51
* @LastEditors: wufan * @LastEditors: fusanqiasng
* @LastEditTime: 2021-05-13 16:36:26 * @LastEditTime: 2021-06-01 15:20:33
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
import React from 'react'; import React from 'react';
import { Button,Input,Switch,Radio,Row,Col,Modal,message,Tooltip} from 'antd'; import { Button, Input, Switch, Radio, Row, Col, Modal, message, Tooltip } from 'antd';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import SelectOperatorModal from '../modal/SelectOperatorModal'; import SelectOperatorModal from '../modal/SelectOperatorModal';
import { ImgCutModalNew } from '@/components';
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal'; import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import Upload from '@/core/upload'; import Upload from '@/core/upload';
// import PhotoClip from 'photoclip' // import PhotoClip from 'photoclip'
import './BasicInfo.less'; import './BasicInfo.less';
const { TextArea } = Input; const { TextArea } = Input;
const defaultCover = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'; const defaultCover = 'https://image.xiaomaiketang.com/xm/rEAetaTEh3.png';
let cutFlag = false; let cutFlag = false;
let timer = null class BasicInfo extends React.Component {
class BasicInfo extends React.Component{
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
operatorModalVisible: false, operatorModalVisible: false,
showSelectFileModal:false, showSelectFileModal: false,
cutImageBlob: null cutImageBlob: null,
}; };
} }
handleShowSelectOperatorModal = () => {
handleShowSelectOperatorModal = () =>{
this.setState({ this.setState({
operatorModalVisible:true operatorModalVisible: true,
}) });
} };
handleCloseSelectOperatorMOdal = ()=>{ handleCloseSelectOperatorMOdal = () => {
this.setState({ this.setState({
operatorModalVisible:false operatorModalVisible: false,
}) });
} };
handleConfirmSelectOperator = (selectOperatorList)=> { handleConfirmSelectOperator = (selectOperatorList) => {
if(selectOperatorList.length === 0){ if (selectOperatorList.length === 0) {
message.warning('请选择运营师') message.warning('请选择运营师');
return; return;
} }
this.props.onChange('selectOperatorList',selectOperatorList); this.props.onChange('selectOperatorList', selectOperatorList);
this.setState({ this.setState({
operatorModalVisible:false operatorModalVisible: false,
}) });
} };
enableStateChange = ()=> { enableStateChange = () => {
if(this.props.data.enableState==="NO"){ if (this.props.data.enableState === 'NO') {
this.props.onChange('enableState','YES') this.props.onChange('enableState', 'YES');
}else{ } else {
this.props.onChange('enableState','NO') this.props.onChange('enableState', 'NO');
} }
} };
// 使用默认封面图 // 使用默认封面图
handleResetCoverUrl = ()=> { handleResetCoverUrl = () => {
const { data: { coverUrl } } = this.props; const {
data: { coverUrl },
} = this.props;
const isDefaultCover = coverUrl === defaultCover; const isDefaultCover = coverUrl === defaultCover;
// 如果已经是默认图的话，不做任何任何处理 // 如果已经是默认图的话，不做任何任何处理
if (isDefaultCover) return; if (isDefaultCover) return;
message.success('已替换为默认图'); message.success('已替换为默认图');
this.props.onChange('coverUrl',defaultCover); this.props.onChange('coverUrl', defaultCover);
setTimeout(()=>{ setTimeout(() => {
this.props.onChange('coverId', null); this.props.onChange('coverId', null);
},1000) }, 1000);
} };
handleSelectCover = (file)=> { handleSelectCover = (file) => {
this.uploadImage(file); this.uploadImage(file);
} };
//上传图片 //上传图片
uploadImage = (imageFile) => { uploadImage = (imageFile) => {
const { folderName } = imageFile;
const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
const self = this; const self = this;
this.setState( this.setState(
{ {
...@@ -87,57 +83,55 @@ class BasicInfo extends React.Component{ ...@@ -87,57 +83,55 @@ class BasicInfo extends React.Component{
}, },
() => { () => {
setTimeout(() => { setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal"); const okBtnDom = document.querySelector('#headPicModal');
const options = { const options = {
size: [500, 282], size: [500, 282],
ok: okBtnDom, ok: okBtnDom,
maxZoom: 3, maxZoom: 3,
style: { style: {
jpgFillColor: "transparent", jpgFillColor: 'transparent',
}, },
done: function (dataUrl) { done: function (dataUrl) {
clearTimeout(self.timer); clearTimeout(self.timer);
self.timer = setTimeout(() => { self.timer = setTimeout(() => {
if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) { if (self.state.rotate !== this.rotate() || self.state.scale !== this.scale()) {
console.log(this.scale(), 'scale') console.log(this.scale(), 'scale');
const _dataUrl = this.clip() const _dataUrl = this.clip();
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl); const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({ self.setState({
cutImageBlob, cutImageBlob,
dataUrl: _dataUrl, dataUrl: _dataUrl,
rotate: this.rotate(), rotate: this.rotate(),
scale: this.scale() scale: this.scale(),
}) });
} }
}, 500);
}, 500)
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl); const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({ self.setState({
cutImageBlob, cutImageBlob,
dataUrl dataUrl,
}) });
setTimeout(() => { setTimeout(() => {
cutFlag = false; cutFlag = false;
}, 2000); }, 2000);
}, },
fail: (failInfo) => { fail: (failInfo) => {
message.error("图片上传失败了，请重新上传"); message.error('图片上传失败了，请重新上传');
}, },
loadComplete: function (img) { loadComplete: function (img) {
setTimeout(() => { setTimeout(() => {
const _dataUrl = this.clip() const _dataUrl = this.clip();
self.setState({ self.setState({
dataUrl: _dataUrl, dataUrl: _dataUrl,
hasImgReady: true hasImgReady: true,
}) });
}, 100) }, 100);
}, },
}; };
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}` const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`;
if (!this.state.photoclip) { if (!this.state.photoclip) {
const _photoclip = new PhotoClip("#headPicModal", options); const _photoclip = new PhotoClip('#headPicModal', options);
_photoclip.load(imgUrl); _photoclip.load(imgUrl);
this.setState({ this.setState({
photoclip: _photoclip, photoclip: _photoclip,
...@@ -146,7 +140,6 @@ class BasicInfo extends React.Component{ ...@@ -146,7 +140,6 @@ class BasicInfo extends React.Component{
this.state.photoclip.clear(); this.state.photoclip.clear();
this.state.photoclip.load(imgUrl); this.state.photoclip.load(imgUrl);
} }
}, 200); }, 200);
} }
); );
...@@ -154,290 +147,319 @@ class BasicInfo extends React.Component{ ...@@ -154,290 +147,319 @@ class BasicInfo extends React.Component{
//获取resourceId //获取resourceId
getSignature = (blob, fileName) => { getSignature = (blob, fileName) => {
Upload.uploadBlobToOSS(blob, 'cover' + (new Date()).valueOf(),null,'signInfo').then((signInfo) => { Upload.uploadBlobToOSS(blob, 'cover' + new Date().valueOf(), null, 'signInfo').then((signInfo) => {
this.setState({ this.setState(
coverClicpPath:signInfo.fileUrl, {
coverId:signInfo.resourceId, coverClicpPath: signInfo.fileUrl,
visible: false coverId: signInfo.resourceId,
},()=>this.updateCover()) visible: false,
},
() => this.updateCover()
);
}); });
}; };
updateCover = () =>{ updateCover = () => {
const {coverClicpPath,coverId} = this.state const { coverClicpPath, coverId } = this.state;
this.setState({ this.setState({
showSelectFileModal: false showSelectFileModal: false,
}) });
this.props.onChange('coverUrl', coverClicpPath); this.props.onChange('coverUrl', coverClicpPath);
setTimeout(()=>{ setTimeout(() => {
this.props.onChange('coverId', coverId); this.props.onChange('coverId', coverId);
},1000) }, 1000);
} };
// base64转换成blob // base64转换成blob
convertBase64UrlToBlob = (urlData) => { convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(",")[1]); const bytes = window.atob(urlData.split(',')[1]);
const ab = new ArrayBuffer(bytes.length); const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab); const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) { for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i); ia[i] = bytes.charCodeAt(i);
} }
return new Blob([ab], { type: "image/png" }); return new Blob([ab], { type: 'image/png' });
}; };
limitNumber = value => { limitNumber = (value) => {
if (typeof value === 'string') { if (typeof value === 'string') {
return !isNaN(Number(value)) ? value.replace(/^(0+)|[^\d]/g, '') : '' return !isNaN(Number(value)) ? value.replace(/^(0+)|[^\d]/g, '') : '';
} else if (typeof value === 'number') { } else if (typeof value === 'number') {
return !isNaN(value) ? String(value).replace(/^(0+)|[^\d]/g, '') : '' return !isNaN(value) ? String(value).replace(/^(0+)|[^\d]/g, '') : '';
} else { } else {
return '' return '';
} }
} };
percentCompleteBlur = (e,field) =>{ percentCompleteBlur = (e, field) => {
let _percentCompleteLive; let _percentCompleteLive;
const { value } = e.target; const { value } = e.target;
if(value > 100){ if (value > 100) {
_percentCompleteLive = 100; _percentCompleteLive = 100;
}else{ } else {
if(value < 0){ if (value < 0) {
_percentCompleteLive = 0; _percentCompleteLive = 0;
}else{ } else {
_percentCompleteLive = value; _percentCompleteLive = value;
} }
} }
this.props.onChange(field,_percentCompleteLive) this.props.onChange(field, _percentCompleteLive);
} };
render(){ render() {
const { operatorModalVisible ,showSelectFileModal,visible,hasImgReady,cutImageBlob} = this.state; const { operatorModalVisible, showSelectFileModal, visible, hasImgReady, cutImageBlob } = this.state;
const { data} = this.props; const { data } = this.props;
const { planName,coverUrl,instro,enableState,operateType,selectOperatorList,percentCompleteLive,percentCompleteVideo,percentCompletePicture} = data; const { planName, coverUrl, instro, enableState, operateType, selectOperatorList, percentCompleteLive, percentCompleteVideo, percentCompletePicture } =
data;
// 当前是否使用的是默认图片 // 当前是否使用的是默认图片
const isDefaultCover = coverUrl === defaultCover; const isDefaultCover = coverUrl === defaultCover;
return ( return (
<div className="plan-basic-info"> <div className='plan-basic-info'>
<div className="plan-name"> <div className='plan-name'>
<span className="label"><span className="require">*</span>培训计划名称：</span> <span className='label'>
<Input <span className='require'>*</span>培训计划名称：
value={planName} </span>
placeholder="请输入培训计划名称(20字以内)" <Input
maxLength={20} value={planName}
style={{ width: 240 }} placeholder='请输入培训计划名称(20字以内)'
onChange={(e)=>this.props.onChange('planName', e.target.value)} maxLength={20}
/> style={{ width: 240 }}
</div> onChange={(e) => this.props.onChange('planName', e.target.value)}
<div className="cover"> />
<span className="label">封面图：</span> </div>
<div className="cover__wrap"> <div className='cover'>
<div className="img-content"> <span className='label'>封面图：</span>
{ isDefaultCover && <div className='cover__wrap'>
<span className="tag">默认图</span> <div className='img-content'>
} {isDefaultCover && <span className='tag'>默认图</span>}
<img src={coverUrl} width="690"/> <img src={coverUrl} width='690' alt='' />
</div> </div>
<div className="opt-btns"> <div className='opt-btns'>
<Button onClick={() => { <Button
onClick={() => {
this.setState({ this.setState({
showSelectFileModal:true showSelectFileModal: true,
}) });
}}>上传图片</Button> }}>
<span 上传图片
className={`default-btn ${isDefaultCover ? 'disabled' : ''}`} </Button>
onClick={this.handleResetCoverUrl} <span className={`default-btn ${isDefaultCover ? 'disabled' : ''}`} onClick={this.handleResetCoverUrl}>
>使用默认图</span> 使用默认图
<div className="tips">建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div> </span>
</div> <div className='tips'>建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
</div> </div>
</div> </div>
<div className="introduction"> </div>
<span className="label">简介：</span> <div className='introduction'>
<TextArea <span className='label'>简介：</span>
placeholder="请输入培训计划简介" <TextArea
maxLength={200} placeholder='请输入培训计划简介'
style={{ width: '552px',height:'110px'}} maxLength={200}
className="instro-textarea" style={{ width: '552px', height: '110px' }}
value={instro} className='instro-textarea'
onChange={(e)=>this.props.onChange('instro', e.target.value)} value={instro}
onChange={(e) => this.props.onChange('instro', e.target.value)}
/>
</div>
<div className='wether-use'>
<span className='label'>是否启用：</span>
<div className='content'>
<div>
<Switch
checked={enableState === 'YES' ? true : false}
onChange={() => {
this.enableStateChange();
}}
/> />
</div>
<div className="wether-use">
<span className="label">是否启用：</span>
<div className="content">
<div>
<Switch checked={enableState==="YES"? true:false} onChange={()=> {this.enableStateChange()}}/>
</div>
<div>
<div className="instro-text">
<div>开启：此培训计划可以分享给学员进行学习</div>
<div>关闭：此培训计划暂不可分享给学员进行学习，后续可开启</div>
</div>
</div>
</div> </div>
</div> <div>
<div className="view-range" > <div className='instro-text'>
<span className="label"> <div>开启：此培训计划可以分享给学员进行学习</div>
<span className="require">*</span> <div>关闭：此培训计划暂不可分享给学员进行学习，后续可开启</div>
可见范围 </div>
<Tooltip
title="学院管理员、管理员默认都可见">
<span className="iconfont">&#xe61d;</span>
</Tooltip>：</span>
<div className="content">
<Radio.Group value={operateType} onChange={(e) => { this.props.onChange('operateType', e.target.value) }}>
<Row style={{ marginBottom: '5px' }}>
<Col span={24}>
<Radio value="All_Operate">
所有运营师
<span className="playback__text">后续新增的运营师都有权限可见</span>
</Radio>
</Col>
</Row>
<Row>
<Col span={24}>
<Radio value="Assign_Operate">
指定运营师
<span className="playback__text">仅被选择的运营师有权限可见</span>
</Radio>
</Col>
</Row>
</Radio.Group>
{operateType==="Assign_Operate" &&
<div className="choose-business">
<Button onClick={()=>{this.handleShowSelectOperatorModal()}}>选择运营师</Button>
<span>已选择<span>{selectOperatorList.length}</span>名运营师</span>
</div>
}
</div> </div>
</div> </div>
<div className="done-standard"> </div>
<span className="label standard-label"><span className="require">*</span>完成标准：</span> <div className='view-range'>
<div> <span className='label'>
<div className="live-standard-info"> <span className='require'>*</span>
<span className="icon iconfont">&#xe865;</span> 可见范围
<span className="instro">直播课单个课程，学员学习进度达到 <Tooltip title='学院管理员、管理员默认都可见'>
<Input <span className='iconfont'>&#xe61d;</span>
width="40" </Tooltip>
value={percentCompleteLive} ：
onChange={(e) => { this.props.onChange('percentCompleteLive', e.target.value.replace(/\D/g,'')) }} </span>
onBlur={(e)=>this.percentCompleteBlur(e,'percentCompleteLive')} <div className='content'>
className="input-box" <Radio.Group
/>%，即视为"已完成"学习 value={operateType}
onChange={(e) => {
</span> this.props.onChange('operateType', e.target.value);
</div> }}>
<div className="live-standard-info"> <Row style={{ marginBottom: '5px' }}>
<span className="icon iconfont">&#xe864;</span> <Col span={24}>
<span className="instro">视频课单个课程，学员学习进度达到 <Radio value='All_Operate'>
<Input 所有运营师
width="40" <span className='playback__text'>后续新增的运营师都有权限可见</span>
value={percentCompleteVideo} </Radio>
onChange={(e) => { this.props.onChange('percentCompleteVideo', e.target.value.replace(/\D/g,'')) }} </Col>
onBlur={(e)=>this.percentCompleteBlur(e,'percentCompleteVideo')} </Row>
className="input-box" <Row>
/> <Col span={24}>
%，即视为"已完成"学习 <Radio value='Assign_Operate'>
</span> 指定运营师
</div> <span className='playback__text'>仅被选择的运营师有权限可见</span>
<div className="live-standard-info"> </Radio>
<span className="icon iconfont">&#xe601;</span> </Col>
<span className="instro">图文课单个课程，学员学习进度达到 </Row>
<Input </Radio.Group>
width="40" {operateType === 'Assign_Operate' && (
value={percentCompletePicture} <div className='choose-business'>
onChange={(e) => { this.props.onChange('percentCompletePicture', e.target.value.replace(/\D/g,'')) }} <Button
onBlur={(e)=>this.percentCompleteBlur(e,'percentCompletePicture')} onClick={() => {
className="input-box" this.handleShowSelectOperatorModal();
/> }}>
%，即视为"已完成"学习 选择运营师
</span> </Button>
</div> <span>
</div> 已选择<span>{selectOperatorList.length}</span>名运营师
</span>
</div>
)}
</div> </div>
{ operatorModalVisible && </div>
<SelectOperatorModal <div className='done-standard'>
visible={operatorModalVisible} <span className='label standard-label'>
onClose={this.handleCloseSelectOperatorMOdal} <span className='require'>*</span>完成标准：
selectOperatorList={selectOperatorList} </span>
onSelect={this.handleConfirmSelectOperator} <div>
/> <div className='live-standard-info'>
} <span className='icon iconfont'>&#xe865;</span>
{showSelectFileModal && <span className='instro'>
<SelectPrepareFileModal 直播课单个课程，学员学习进度达到
key="basic" <Input
operateType="select" width='40'
multiple={false} value={percentCompleteLive}
accept="image/jpeg,image/png,image/jpg" onChange={(e) => {
selectTypeList={['JPG', 'JPEG', 'PNG']} this.props.onChange('percentCompleteLive', e.target.value.replace(/\D/g, ''));
tooltip='支持文件类型：jpg、jpeg、png' }}
isOpen={showSelectFileModal} onBlur={(e) => this.percentCompleteBlur(e, 'percentCompleteLive')}
onClose={() => { className='input-box'
this.setState({ />
showSelectFileModal:false %，即视为"已完成"学习
}) </span>
}} </div>
onSelect={this.handleSelectCover} <div className='live-standard-info'>
/> <span className='icon iconfont'>&#xe864;</span>
} <span className='instro'>
<Modal 视频课单个课程，学员学习进度达到
title="设置图片" <Input
width={1080} width='40'
visible={visible} value={percentCompleteVideo}
maskClosable={false} onChange={(e) => {
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} this.props.onChange('percentCompleteVideo', e.target.value.replace(/\D/g, ''));
onCancel={() => { }}
this.setState({ visible: false }); onBlur={(e) => this.percentCompleteBlur(e, 'percentCompleteVideo')}
className='input-box'
/>
%，即视为"已完成"学习
</span>
</div>
<div className='live-standard-info'>
<span className='icon iconfont'>&#xe601;</span>
<span className='instro'>
图文课单个课程，学员学习进度达到
<Input
width='40'
value={percentCompletePicture}
onChange={(e) => {
this.props.onChange('percentCompletePicture', e.target.value.replace(/\D/g, ''));
}}
onBlur={(e) => this.percentCompleteBlur(e, 'percentCompletePicture')}
className='input-box'
/>
%，即视为"已完成"学习
</span>
</div>
</div>
</div>
{operatorModalVisible && (
<SelectOperatorModal
visible={operatorModalVisible}
onClose={this.handleCloseSelectOperatorMOdal}
selectOperatorList={selectOperatorList}
onSelect={this.handleConfirmSelectOperator}
/>
)}
{showSelectFileModal && (
<SelectPrepareFileModal
key='basic'
operateType='select'
multiple={false}
accept='image/jpeg,image/png,image/jpg'
selectTypeList={['JPG', 'JPEG', 'PNG']}
tooltip='支持文件类型：jpg、jpeg、png'
isOpen={showSelectFileModal}
onClose={() => {
this.setState({
showSelectFileModal: false,
});
}} }}
zIndex={10001} onSelect={this.handleSelectCover}
footer={[ />
<Button )}
key="back" <Modal
onClick={() => { title='设置图片'
this.setState({ visible: false }); width={1080}
}} visible={visible}
> maskClosable={false}
重新上传 closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}
</Button>, onCancel={() => {
<Button this.setState({ visible: false });
key="submit" }}
type="primary" zIndex={10001}
disabled={!hasImgReady} footer={[
onClick={() => { <Button
if (!cutFlag) { key='back'
cutFlag = true; onClick={() => {
this.refs.hiddenBtn.click(); this.setState({ visible: false });
} }}>
this.getSignature(cutImageBlob); 重新上传
}} </Button>,
> <Button
确定 key='submit'
</Button>, type='primary'
]} disabled={!hasImgReady}
> onClick={() => {
<div className="clip-box"> if (!cutFlag) {
<div cutFlag = true;
id="headPicModal" this.refs.hiddenBtn.click();
ref="headPicModal" }
style={{ this.getSignature(cutImageBlob);
width: "500px", }}>
height: "430px", 确定
marginBottom: 0, </Button>,
}} ]}>
></div> <div className='clip-box'>
<div id="clipBtn" style={{ display: "none" }} ref="hiddenBtn"></div> <div
<div className="preview-img"> id='headPicModal'
<div className="title">效果预览</div> ref='headPicModal'
<div id="preview-url-box" style={{width:500,height:282}}> style={{
<img src={this.state.dataUrl} style={{ width: '100%' }} alt="" /> width: '500px',
</div> height: '430px',
<div className="tip-box"> marginBottom: 0,
<div className="tip">温馨提示</div> }}></div>
<div className="tip">①预览效果图时可能存在延迟，单击左侧图片刷新即可</div> <div id='clipBtn' style={{ display: 'none' }} ref='hiddenBtn'></div>
<div className="tip">②设置图片时双击可旋转图片，滚动可放大或缩小图片</div> <div className='preview-img'>
</div> <div className='title'>效果预览</div>
<div id='preview-url-box' style={{ width: 500, height: 282 }}>
<img src={this.state.dataUrl} style={{ width: '100%' }} alt='' />
</div>
<div className='tip-box'>
<div className='tip'>温馨提示</div>
<div className='tip'>①预览效果图时可能存在延迟，单击左侧图片刷新即可</div>
<div className='tip'>②设置图片时双击可旋转图片，滚动可放大或缩小图片</div>
</div> </div>
</div> </div>
</Modal> </div>
</Modal>
</div> </div>
); );
} }
} }
export default withRouter(BasicInfo) export default withRouter(BasicInfo);
src/modules/plan-manage/components/PlanList.jsx
/* /*
* @Author: zhangleyuan * @Author: zhangleyuan
* @Date: 2021-02-20 16:46:46 * @Date: 2021-02-20 16:46:46
* @LastEditors: wufan * @LastEditors: fusanqiasng
* @LastEditTime: 2021-05-14 18:12:50 * @LastEditTime: 2021-06-01 11:45:34
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
import React, { useState, useRef, useEffect } from 'react'; import React, { useState } from 'react';
import { Table, Modal, message , Tooltip,Switch,Dropdown} from 'antd'; import { Table, Modal, message, Tooltip, Switch, Dropdown } from 'antd';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import { PageControl } from "@/components"; import { PageControl } from '@/components';
import PlanService from "@/domains/plan-domain/planService"; import PlanService from '@/domains/plan-domain/planService';
import SharePlanModal from '../modal/SharePlanModal'; 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 User from '@/common/js/user';
import './PlanList.less'; import './PlanList.less';
const { confirm } = Modal; const { confirm } = Modal;
const userRole = User.getUserRole();
function PlanList(props) { function PlanList(props) {
const [sharePlanModal, setSharePlanModal] = useState(null); const [sharePlanModal, setSharePlanModal] = useState(null);
function parseColumns(){ function parseColumns() {
const columns = [ const columns = [
{ {
title: '培训计划', title: '培训计划',
key: 'planName', key: 'planName',
dataIndex: 'planName', dataIndex: 'planName',
width:'18%', width: '18%',
render: (val, record) => { render: (val, record) => {
return ( return (
<div className="plan-name"> <div className='plan_name_item'>
{val} <img className='plan-cover' src={record.coverUrl || 'https://image.xiaomaiketang.com/xm/rEAetaTEh3.png'} alt='' />
</div> <Choose>
) <When condition={record.planName.length > 25}>
} <Tooltip title={record.planName}>
}, <div className='plan-name'>{val}</div>
{ </Tooltip>
title: '课程总数量', </When>
key: 'courseNum', <Otherwise>
dataIndex: 'courseNum', <div className='plan-name'>{val}</div>
width: 110, </Otherwise>
render: (val, record) => { </Choose>
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>
</div> </div>
) );
} },
},
function handleChangeTable(pagination, filters, sorter){ {
const { columnKey, order } = sorter; title: '课程总数量',
const { query } = props; key: 'courseNum',
let _columnKey; dataIndex: 'courseNum',
let _order; 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>
);
}
// 按创建时间升序排序 function handleChangeTable(pagination, filters, sorter) {
if (columnKey === 'created' && order === 'ascend') {_columnKey="CREATED"; _order = 'SORT_ASC'; } const { columnKey, order } = sorter;
// 按创建时间降序排序 const { query } = props;
if (columnKey === 'created' && order === 'descend') { _columnKey="CREATED"; _order = 'SORT_DESC';} let _columnKey;
// 按更新时间升序排序 let _order;
if (columnKey === 'updated' && order === 'ascend') { _columnKey="UPDATED"; _order = 'SORT_ASC'; }
// 按更新时间降序排序 // 按创建时间升序排序
if (columnKey === 'updated' && order === 'descend') { _columnKey="UPDATED"; _order = 'SORT_DESC'; } if (columnKey === 'created' && order === 'ascend') {
// 按更新时间升序排序 _columnKey = 'CREATED';
if (columnKey === 'cultureCustomerNum' && order === 'ascend') { _columnKey="CUSTOMER_NUM"; _order = 'SORT_ASC'; } _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 handleShowShareModal(item) { if (columnKey === 'created' && order === 'descend') {
const htmlUrl = `${LIVE_SHARE}training_plan_detail/${item.planId}?id=${User.getStoreId()}&storeUserId=${User.getStoreUserId()}`; _columnKey = 'CREATED';
const longUrl = htmlUrl _order = 'SORT_DESC';
const shareData = { ...item, longUrl };
const sharePlanModal = (
<SharePlanModal
data={shareData}
type="liveClass"
close={() => {
setSharePlanModal(null)
}}
/>
)
setSharePlanModal(sharePlanModal)
} }
//改变上架状态 // 按更新时间升序排序
function changeEnableState(item){ if (columnKey === 'updated' && order === 'ascend') {
let _enableState = item.enableState _columnKey = 'UPDATED';
if(_enableState==='NO'){ _order = 'SORT_ASC';
_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}`,
})
} }
function toLearningDataPage(item){ // 按更新时间降序排序
window.RCHistory.push({ if (columnKey === 'updated' && order === 'descend') {
pathname: `/learning-data?id=${item.planId}`, _columnKey = 'UPDATED';
}) _order = 'SORT_DESC';
} }
function handleDelete(record){ // 按更新时间升序排序
return confirm({ if (columnKey === 'cultureCustomerNum' && order === 'ascend') {
title: '你确定要删除吗？', _columnKey = 'CUSTOMER_NUM';
content: '删除后，此培训计划的学员将无法继续学习，所有学习数据将同步删除不可恢复', _order = 'SORT_ASC';
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);
}
}
})
} }
function deleteConfirm(item){ // 按更新时间降序排序
const params={ if (columnKey === 'cultureCustomerNum' && order === 'descend') {
"planId": item.planId, _columnKey = 'CUSTOMER_NUM';
} _order = 'SORT_DESC';
PlanService.deleteTrainingPlan(params).then((res)=>{ }
if(res.success){ const _query = {
message.success("删除成功"); ...query,
props.onChange(); 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){ const params = {
if (current === size) { planId: item.planId,
return 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 ( let _query = props.query;
<div className="plan-list"> _query.size = size;
<Table props.onChange(_query);
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>
)
} }
return (
export default withRouter(PlanList); <div className='plan-list'>
\ No newline at end of file <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{ .plan-list {
margin-top:12px; margin-top: 12px;
.course-number{ .course-number {
text-align:right; text-align: right;
margin-right:45px; margin-right: 45px;
}
.plan-list-table {
thead.ant-table-thead {
tr {
th {
padding: 10px 12px;
}
}
} }
.plan-list-table{ tbody {
tbody { tr {
tr{ td.ant-table-cell {
&:nth-child(even){ padding: 16px 12px;
background: transparent !important; color: #333;
td{ }
background:#FFF !important; &:nth-child(even) {
} background: transparent;
td {
background: #fff;
} }
&:nth-child(odd){ }
background: #FAFAFA !important; &:nth-child(odd) {
td{ background: #fafafa;
background: #FAFAFA !important; td {
} background: #fafafa;
} }
&:hover{ }
td{ &:hover {
background:#F3f6fa !important; td {
} background: #f3f6fa;
} }
} }
} }
} }
.plan-name{ }
text-overflow: -o-ellipsis-lastline; .plan_name_item {
display: flex;
align-items: center;
.plan-cover {
width: 106px;
height: 60px;
border-radius: 2px;
margin-right: 8px;
}
.plan-name {
width: 188px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
height: 40px;
} }
.operate-text { }
color: #2966FF; .operate-text {
color: #2966ff;
cursor: pointer;
}
.operate {
display: flex;
&__item {
color: #2966ff;
cursor: pointer; cursor: pointer;
}
.operate { &.split {
display: flex; margin: 0 8px;
color: #bfbfbf;
&__item {
color: #2966FF;
cursor: pointer;
&.split {
margin: 0 8px;
color: #BFBFBF;
}
} }
} }
.join-number{ }
text-align:right; .join-number {
margin-right:12px; text-align: right;
} margin-right: 12px;
.more-operate{ }
line-height:20px; .more-operate {
} line-height: 20px;
} }
\ No newline at end of file }
src/modules/plan-manage/modal/relatedCourseModal.less
...@@ -2,55 +2,58 @@ ...@@ -2,55 +2,58 @@
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn { .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
font-weight: 500; font-weight: 500;
} }
.link-create-course{ .ant-modal-footer {
color:#666666; display: flex;
font-size:14px; }
width:638px; .link-create-course {
text-align:left; color: #666666;
display:inline-block; font-size: 14px;
span{ width: 638px;
color:#2966FF; 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 { .search-container {
margin-bottom: 16px; 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