Skip to content

X
xiaomai-cloud-class-web
Commit d77ed682 by yuananting
Options

feat:新建培训计划页面初始化

parent c4c91386
Showing with 713 additions and 430 deletions
src/modules/task-center/AddTrainTask.jsx 0 → 100644
/*
* @Author: yuananting
* @Date: 2021-07-29 13:57:03
* @LastEditors: yuananting
* @LastEditTime: 2021-07-29 15:57:33
* @Description: 任务中心-培训任务-新建页面
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { useEffect, useState } from 'react';
import { Button, Tabs, message, Modal } from 'antd';
import ShowTips from '@/components/ShowTips';
import Breadcrumbs from '@/components/Breadcrumbs';
import BasicInfo from './components/BasicInfo';
// import TrainingTask from './components/TrainingTask';
// import ExpiredCourseList from './components/ExpiredCourseList';
import PlanService from '@/domains/plan-domain/planService';
import User from '@/common/js/user';
import _ from 'underscore';
import './AddTrainTask.less';
import Bus from '@/core/bus';
const { TabPane } = Tabs;
const defaultCover = 'https://image.xiaomaiketang.com/xm/rEAetaTEh3.png';
const DEFAULT_BASIC_INFO = {
planName: '',
coverUrl: defaultCover,
coverId: null,
durationType: 'NEVER_EXPIRES',
enableState: 'YES',
selectOperatorList: [],
instro: '',
operateType: 'All_Operate',
percentCompleteLive: 80,
percentCompleteVideo: 80,
percentCompletePicture: 100,
};
function AddTrainTask() {
const type = getParameterByName('type');
const [activeStep, setActiveStep] = useState('BASIC_INFO');
const [basicInfo, setBasicInfo] = useState(DEFAULT_BASIC_INFO);
function renderFooter() {
return (
<Choose>
<When condition={activeStep === 'BASIC_INFO'}>
<div className='footer shrink-footer'>
<Button onClick={handleGoBack}>取消</Button>
<Button onClick={() => console.log('提交')}>保存</Button>
<Button type='primary' onClick={() => console.log('下一步')}>
下一步
</Button>
{/* disabled={submitDisabled} */}
</div>
</When>
<Otherwise>
<div className='footer shrink-footer'>
<Button onClick={handleGoBack}>取消</Button>
<Button onClick={() => console.log('上一步')}>上一步</Button>
<Button onClick={() => console.log('提交')}>保存</Button>
<Button type='primary' onClick={() => console.log('提交')}>
保存并发布
</Button>
{/* disabled={submitDisabled} */}
</div>
</Otherwise>
</Choose>
);
}
function handleGoBack() {
window.RCHistory.goBack();
}
function handleChangeBasicInfo(field, value) {
setBasicInfo({
...basicInfo,
[field]: value,
});
}
return (
<div className='page add-train-task'>
<Breadcrumbs navList={type == 'add' ? '新建培训任务' : '编辑培训任务'} goBack={handleGoBack} />
<div className='box'>
<div className='show-tips'>
<ShowTips message='请遵守国家相关规定，切勿上传低俗色情、暴力恐怖、谣言诈骗、侵权盗版等相关内容，小麦企学院保有依据国家规定及平台规则进行处理的权利' />
</div>
<Tabs centered={true} onChange={(key) => setActiveStep(key)}>
<TabPane tab='1 基本信息' key='BASIC_INFO'>
<BasicInfo data={basicInfo} onChange={handleChangeBasicInfo} />
</TabPane>
<TabPane tab='2 培训内容' key='TRAIN_CONTENT'>
<div className='train-content__warp'>2</div>
</TabPane>
</Tabs>
</div>
{renderFooter()}
</div>
);
}
export default AddTrainTask;
src/modules/task-center/AddTrainTask.less 0 → 100644
.add-train-task {
.footer {
position: fixed;
left: 196px;
bottom: 0;
height: 58px;
width: ~'calc(100% - 218px)';
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 72px;
background: #fff;
border-top: 1px solid #e8e8e8;
z-index: 9999;
.ant-btn {
margin-left: 10px;
}
}
}
src/modules/task-center/TrainTaskPage.jsx
...@@ -2,63 +2,57 @@ ...@@ -2,63 +2,57 @@
* @Author: yuananting * @Author: yuananting
* @Date: 2021-07-28 11:25:58 * @Date: 2021-07-28 11:25:58
* @LastEditors: yuananting * @LastEditors: yuananting
* @LastEditTime: 2021-07-28 15:41:00 * @LastEditTime: 2021-07-29 13:45:55
* @Description: 任务中心-培训任务 * @Description: 任务中心-培训任务
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react';
import TrainFilter from './components/TrainFilter' import TrainFilter from './components/TrainFilter';
import TrainOpt from './components/TrainOpt' import TrainOpt from './components/TrainOpt';
import TrainList from './components/TrainList' import TrainList from './components/TrainList';
// import PlanList from './components/PlanList' // import PlanList from './components/PlanList'
import PlanService from '@/domains/plan-domain/planService' import PlanService from '@/domains/plan-domain/planService';
import User from '@/common/js/user' import User from '@/common/js/user';
function TrainTaskPage() { function TrainTaskPage() {
const [trainListData, setTrainListData] = useState([]) // 培训任务列表 const [trainListData, setTrainListData] = useState([]); // 培训任务列表
const [query, setQuery] = useState({ const [query, setQuery] = useState({
status: 'All',
onlyHelp: false,
current: 1, current: 1,
size: 10 size: 10,
}) storeUserId: User.getStoreUserId(),
const [totalCount, setTotalCount] = useState(0) // 总数 });
const [totalCount, setTotalCount] = useState(0); // 总数
useEffect(() => { useEffect(() => {
handleFetchTrainList() handleFetchTrainList();
}, [query]) }, [query]);
function handleFetchTrainList(_query) { //动态获取计划列表
const params = { function handleFetchTrainList() {
...query, PlanService.getTrainingPlanPage(query).then((res) => {
..._query,
storeUserId: User.getStoreUserId()
}
//动态获取计划列表
PlanService.getTrainingPlanPage(params).then((res) => {
const { const {
result: { records = [], total } result: { records = [], total },
} = res } = res;
setTrainListData(records) setTrainListData(records);
setTotalCount(total) setTotalCount(total);
}) });
} }
// 搜索条件修改
function queryChange(_query) { function queryChange(_query) {
const params = { setQuery({ ...query, ..._query });
...query,
..._query
}
setQuery(params)
} }
return ( return (
<div className='page'> <div className='page'>
<div className='content-header'>培训任务</div> <div className='content-header'>培训任务</div>
<div className='box'> <div className='box'>
<TrainFilter /> <TrainFilter onChange={queryChange} />
<TrainOpt /> <TrainOpt />
<TrainList trainListData={trainListData}/> <TrainList trainListData={trainListData} query={query} totalCount={totalCount} onChange={queryChange} />
{/* <PlanList planListData={planListData} query={query} totalCount={totalCount} onChange={queryChange} /> */}
</div> </div>
</div> </div>
) );
} }
export default TrainTaskPage export default TrainTaskPage;
\ No newline at end of file
src/modules/task-center/components/BasicInfo.jsx 0 → 100644
/*
* @Author: yuananting
* @Date: 2021-07-29 14:32:24
* @LastEditors: yuananting
* @LastEditTime: 2021-07-29 16:54:42
* @Description: 任务中心-培训任务-新建-基本信息
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import { Form, Button, Input, Space, DatePicker, Radio, Row, Col, message, Tooltip } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { withRouter } from 'react-router-dom';
// import SelectOperatorModal from '../modal/SelectOperatorModal';
// import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import Upload from '@/core/upload';
// import GraphicsEditor from '@/modules/course-manage/components/GraphicsEditor';
// import ImgClipModal from '@/components/ImgClipModal';
import moment from 'moment';
import './BasicInfo.less';
const { TextArea } = Input;
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
function BasicInfo(props) {
const { data } = props;
const {
planName,
coverUrl,
durationType,
endTime,
instro,
enableState,
operateType,
selectOperatorList,
percentCompleteLive,
percentCompleteVideo,
percentCompletePicture,
} = data;
const isDefaultCover = true;
// 使用默认封面图
function handleResetCoverUrl() {
// const isDefaultCover = coverUrl === defaultCover;
// // 如果已经是默认图的话，不做任何任何处理
// if (isDefaultCover) return;
// message.success('已替换为默认图');
// this.props.onChange('coverUrl', defaultCover);
// setTimeout(() => {
// this.props.onChange('coverId', null);
// }, 1000);
}
return (
<div className='basic-info__form'>
<Form labelCol={{ span: 3 }} wrapperCol={{ span: 21 }}>
<FormItem label='培训任务名称'>
<Input
value={planName}
placeholder='请输入培训任务名称（20字以内）'
maxLength={20}
style={{ width: 240 }}
// onChange={(e) => this.props.onChange('planName', e.target.value)}
/>
</FormItem>
<FormItem label='封面图'>
<div className='cover__wrap'>
<div className='opt-box'>
<Button
onClick={() => {
this.setState({
showSelectFileModal: true,
});
}}>
上传图片
</Button>
<span className={`default-btn ${isDefaultCover ? 'disabled' : ''}`} onClick={handleResetCoverUrl}>
使用默认图
</span>
<div className='tips'>建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
</div>
<div className='img-box'>
{isDefaultCover && <span className='tag'>默认图</span>}
<img src={coverUrl} width='690' alt='' />
</div>
</div>
</FormItem>
<FormItem label='培训时间'>
<div className='duration__wrap'>
<Radio.Group value={durationType} onChange={(e) => props.onChange('durationType', e.target.value)}>
<Space direction='vertical'>
<Radio value='NEVER_EXPIRES'>
永久有效<span className='tips'>设置为“永久有效”，发布后任务开始生效，取消发布后失效</span>
</Radio>
<Radio value='FIXED_DURATION'>
固定时间段
<div className='picker-box'>
<RangePicker
style={{ width: 320 }}
showTime={{ defaultValue: [moment().add(10, 'minutes'), moment().add(10, 'minutes')] }}
ranges={{
近7天: [moment().add(10, 'minute'), moment().add(6, 'day').endOf('day')],
近1个月: [moment().add(10, 'minute'), moment().add(1, 'month').endOf('day')],
近3个月: [moment().add(10, 'minute'), moment().add(3, 'month').endOf('day')],
}}
disabled={durationType === 'NEVER_EXPIRES'}
// disabledDate={disabledDate}
// value={[examStartTime ? moment(Number(examStartTime)) : null, examEndTime ? moment(Number(examEndTime)) : null]}
// disabledTime={disabledRangeTime}
format='YYYY-MM-DD HH:mm'
// onChange={(date) => {
// setStartTime(date && date[0]?.valueOf());
// setExamEndTime(date && date[1]?.valueOf());
// }}
/>
</div>
</Radio>
</Space>
</Radio.Group>
</div>
</FormItem>
<FormItem label='学习模式'>
<div className='learning-model__wrap'>
<Radio.Group value={durationType} onChange={(e) => props.onChange('durationType', e.target.value)}>
<Radio value='FREE_LEARNING'>自由学习</Radio>
<Radio value='BREAKTHROUGH_LEARNING'>
闯关学习
<Tooltip title='提示：任务开始后学习模式将不允许更换'>
<i
className='icon iconfont'
style={{
marginLeft: '5px',
cursor: 'pointer',
color: '#bfbfbf',
fontSize: '14px',
fontWeight: 'normal',
}}>
&#xe61d;
</i>
</Tooltip>
</Radio>
</Radio.Group>
</div>
</FormItem>
<FormItem label='指派学员'>
<Button>
<PlusOutlined />
添加指派对象
</Button>
</FormItem>
</Form>
</div>
);
}
export default BasicInfo;
src/modules/task-center/components/BasicInfo.less 0 → 100644
.basic-info__form {
.cover {
display: flex;
margin-top: 24px;
&__wrap {
position: relative;
.img-box {
position: relative;
margin-top: 8px;
width: 299px;
height: 169px;
.tag {
border-radius: 2px;
background: #d6d6d6;
font-size: 12px;
height: 18px;
width: 52px;
text-align: center;
color: #fff;
position: absolute;
top: 8px;
left: 8px;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.opt-box {
.default-btn {
margin-left: 14px;
color: #2966ff;
cursor: pointer;
&.disabled {
color: #ccc;
cursor: not-allowed;
}
}
.tips {
margin-top: 8px;
font-size: 14px;
color: #999;
}
}
}
}
}
src/modules/task-center/components/TrainFilter.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-07-14 15:41:30 * @Date: 2020-07-14 15:41:30
* @Last Modified by: 吴文洁 * @Last Modified by: 吴文洁
* @Last Modified time: 2020-07-23 13:45:16 * @Last Modified time: 2020-07-23 13:45:16
* @Description: 大班直播、互动班课列表的筛选组件 * @Description: 大班直播、互动班课列表的筛选组件
...@@ -8,58 +8,58 @@ ...@@ -8,58 +8,58 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import { Row, Input, Select ,Tooltip} from 'antd'; import { Row, Input, Select, Tooltip } from 'antd';
import RangePicker from "@/modules/common/DateRangePicker"; import RangePicker from '@/modules/common/DateRangePicker';
import moment from 'moment'; import moment from 'moment';
import StoreService from "@/domains/store-domain/storeService"; import StoreService from '@/domains/store-domain/storeService';
import './TrainFilter.less'; import './TrainFilter.less';
const { Search } = Input; const { Search } = Input;
const { Option } = Select; const { Option } = Select;
const DEFAULT_QUERY = { // 头部筛选默认值 const DEFAULT_QUERY = {
// 头部筛选默认值
planName: null, planName: null,
createId: null, // 创建人
startTime: null, startTime: null,
endTime: null, endTime: null,
enableState: null, };
createId: null const DEFAULT_CREATOR_QUERY = {
} // 创建人列表筛选默认值
const DEFAULT_CREATOR_QUERY = { // 创建人列表筛选默认值
size: 10, size: 10,
current: 1, current: 1,
nickName: null nickName: null, // 搜索值
} };
function TrainFilter(props) { function TrainFilter(props) {
const [expandFilter, setExpandFilter] = useState(false);
const [query, setQuery] = useState(DEFAULT_QUERY); const [query, setQuery] = useState(DEFAULT_QUERY);
const [hasNext, setHasNext] = useState(false); const [hasNext, setHasNext] = useState(false);
const [creatorQuery, setCreatorQuery] = useState(DEFAULT_CREATOR_QUERY); const [creatorQuery, setCreatorQuery] = useState(DEFAULT_CREATOR_QUERY);
const [creatorList, setCreatorList] = useState([]); const [creatorList, setCreatorList] = useState([]);
useEffect(() => { useEffect(() => {
getCreatorList(); getCreatorList();
}, []); }, []);
// 获取创建人列表 // 获取创建人列表
function getCreatorList(current = 1, selectList){ function getCreatorList(current = 1) {
const _query = { const _query = {
...creatorQuery, ...creatorQuery,
current, current,
}; };
StoreService.getStoreUserBasicPage( _query).then((res) => { StoreService.getStoreUserBasicPage(_query).then((res) => {
const { result = {} } = res; const { result = {} } = res;
const { records = [], hasNext } = result; const { records = [], hasNext } = result;
const list = current > 1 ? creatorList.concat(records) : records; const list = current > 1 ? creatorList.concat(records) : records;
setHasNext(hasNext); setHasNext(hasNext);
setCreatorList(list); setCreatorList(list);
}); });
} }
// 滑动加载更多讲师列表 // 滑动加载更多讲师列表
function handleScrollCreatorList(e){ function handleScrollCreatorList(e) {
const container = e.target; const container = e.target;
const scrollToBottom = container && container.scrollHeight <= container.clientHeight + container.scrollTop; const scrollToBottom = container && container.scrollHeight <= container.clientHeight + container.scrollTop;
if (scrollToBottom && hasNext) { if (scrollToBottom && hasNext) {
const _creatorQuery = {...creatorQuery}; const _creatorQuery = { ...creatorQuery };
_creatorQuery.current = creatorQuery.current + 1; _creatorQuery.current = creatorQuery.current + 1;
setCreatorQuery(_creatorQuery); setCreatorQuery(_creatorQuery);
getCreatorList(creatorQuery.current + 1); getCreatorList(creatorQuery.current + 1);
...@@ -67,130 +67,106 @@ function TrainFilter(props) { ...@@ -67,130 +67,106 @@ function TrainFilter(props) {
} }
// 改变搜索条件 // 改变搜索条件
function handleChangeQuery(field, value){ function handleChangeQuery(field, value) {
const _query ={
...query,
[field]: value,
current: 1,
}
setQuery(_query);
if (field === 'planName') return;
// props.onChange( _query);
}
function handleChangeDates (dates){
const _query = _.clone(query); const _query = _.clone(query);
if (_.isEmpty(dates)) { _query.current = 1;
delete _query.startTime; if (field === 'createdDate') {
delete _query.endTime; _query.startTime = value && value[0].valueOf();
_query.endTime = value && value[1].valueOf();
} else { } else {
_query.startTime = dates[0].valueOf(); _query[field] = value;
_query.endTime = dates[1].valueOf();
}
const param ={
..._query,
current: 1,
} }
setQuery(param); setQuery(_query);
props.onChange(param); if (field === 'planName') return;
props.onChange(_query);
} }
// 重置搜索条件 // 重置搜索条件
function handleReset(){ function handleReset() {
setQuery(DEFAULT_QUERY); setQuery(DEFAULT_QUERY);
// props.onChange(DEFAULT_QUERY); props.onChange(DEFAULT_QUERY);
} }
return ( return (
<div className="train-filter-page"> <div className='train-filter-page'>
<Row> <Row>
<div className="search-condition"> <div className='search-condition'>
<div className="search-condition__item"> <div className='search-condition__item'>
<span>培训任务：</span> <span>培训任务：</span>
<Search <Search
value={query.planName} value={query.planName}
placeholder="搜索培训任务名称" placeholder='搜索培训任务名称'
onChange={(e) => { handleChangeQuery('planName', e.target.value.trim())}} onChange={(e) => {
// onSearch={ () => { props.onChange(query) } } handleChangeQuery('planName', e.target.value.trim());
style={{ width: "calc(100% - 70px)" }} }}
enterButton={<span className="icon iconfont">&#xe832;</span>} onSearch={() => {
/> props.onChange(query);
</div> }}
<div className="search-condition__item"> style={{ width: 'calc(100% - 70px)' }}
<span>创建人：</span> enterButton={<span className='icon iconfont'>&#xe832;</span>}
<Select />
placeholder="请选择创建人" </div>
style={{width:"calc(100% - 70px)"}} <div className='search-condition__item'>
showSearch <span>创建人：</span>
allowClear <Select
filterOption={(input, option) => option} placeholder='请选择创建人'
suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>} style={{ width: 'calc(100% - 70px)' }}
onPopupScroll={handleScrollCreatorList} showSearch
value={query.createId} allowClear
// onChange={(value) => { filterOption={(input, option) => option}
// handleChangeQuery('createId', value) suffixIcon={
// }} <span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
// onSearch={(value) => { &#xe835;
// creatorQuery.nickName = value </span>
// setCreatorQuery(creatorQuery)
// getCreatorList()
// }
// }
// onClear ={(value)=>{
// setCreatorQuery({
// size: 10,
// current: 1,
// nickName:null
// })
// getCreatorList()
// }
// }
>
{_.map(creatorList, (item, index) => {
return (
<Select.Option value={item.id} key={item.id}>{item.nickName}</Select.Option>
);
})}
</Select>
</div>
<div className="search-condition__item">
<span className="search-date">创建日期：</span>
<RangePicker
id="course_date_picker"
allowClear={false}
value={ query.startTime ? [moment(query.startTime), moment(query.endTime)] : null }
format={"YYYY-MM-DD"}
onChange={(dates) => { handleChangeDates(dates) }}
style={{ width: "calc(100% - 70px)" }}
/>
</div>
{ expandFilter &&
<div className="search-condition__item">
<span className="shelf-status">当前状态：</span>
<Select
style={{ width: "calc(100% - 70px)" }}
placeholder="请选择当前状态"
allowClear={true}
value={query.enableState}
onChange={(value) => { handleChangeQuery('enableState', value) }}
suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>}
>
<Option value="YES">开启</Option>
<Option value="NO">关闭</Option>
</Select>
</div>
} }
</div> onPopupScroll={handleScrollCreatorList}
value={query.createId}
onChange={(value) => {
handleChangeQuery('createId', value);
}}
onSearch={(value) => {
creatorQuery.nickName = value;
setCreatorQuery(creatorQuery);
getCreatorList();
}}
onClear={() => {
setCreatorQuery(DEFAULT_CREATOR_QUERY);
getCreatorList();
}}>
{_.map(creatorList, (item, index) => {
return (
<Select.Option value={item.id} key={item.id}>
{item.nickName}
</Select.Option>
);
})}
</Select>
</div>
<div className='search-condition__item'>
<span className='search-date'>创建日期：</span>
<RangePicker
id='course_date_picker'
allowClear={false}
value={query.startTime ? [moment(query.startTime), moment(query.endTime)] : null}
format={'YYYY-MM-DD'}
onChange={(value) => {
handleChangeQuery('createdDate', value);
}}
style={{ width: 'calc(100% - 70px)' }}
/>
</div>
</div>
<div className="reset-fold-area"> <div className='reset-fold-area'>
<Tooltip title="清空筛选"><span className="resetBtn iconfont icon" onClick={handleReset}>&#xe61b; </span></Tooltip> <Tooltip title='清空筛选'>
<span style={{ cursor: 'pointer' }} className="fold-btn" onClick={() => { <span className='resetBtn iconfont icon' onClick={handleReset}>
setExpandFilter(!expandFilter) &#xe61b;{' '}
}}>{expandFilter ? <span><span>收起</span><span className="iconfont icon fold-icon" >&#xe82d; </span> </span> : <span>展开<span className="iconfont icon fold-icon" >&#xe835; </span></span>}</span> </span>
</Tooltip>
</div> </div>
</Row> </Row>
</div> </div>
) );
} }
export default withRouter(TrainFilter); export default withRouter(TrainFilter);
\ No newline at end of file
src/modules/task-center/components/TrainList.jsx
...@@ -2,249 +2,233 @@ ...@@ -2,249 +2,233 @@
* @Author: yuananting * @Author: yuananting
* @Date: 2021-07-28 14:56:52 * @Date: 2021-07-28 14:56:52
* @LastEditors: yuananting * @LastEditors: yuananting
* @LastEditTime: 2021-07-29 09:42:01 * @LastEditTime: 2021-07-29 13:52:35
* @Description: 描述一下咯 * @Description: 描述一下咯
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from 'react';
import { Tabs, Tooltip, Switch, Dropdown } from "antd"; import { Tabs, Tooltip, Checkbox, Dropdown } from 'antd';
import "./TrainList.less"; import './TrainList.less';
import { XMTable, PageControl } from "@/components"; import { XMTable, PageControl } from '@/components';
import User from "@/common/js/user"; import User from '@/common/js/user';
const { TabPane } = Tabs; const { TabPane } = Tabs;
function renderMoreOperate(item) { function TrainList(props) {
return ( const {
<div className="live-course-more-menu"> query: { size, current },
<div className="operate__item">编辑</div> totalCount,
<div className="operate__item">分享</div> } = props;
<div className="operate__item">审批作业</div>
<div className="operate__item">删除 </div>
</div>
);
}
function parseColumns() { function renderMoreOperate(item) {
const columns = [ return (
{ <div className='live-course-more-menu'>
title: "培训任务", <div className='operate__item'>编辑</div>
key: "planName", <div className='operate__item'>分享</div>
dataIndex: "planName", <div className='operate__item'>审批作业</div>
width: "18%", <div className='operate__item'>删除 </div>
fixed: "left", </div>
render: (val, record) => { );
return ( }
<div className="plan_name_item">
<img function parseColumns() {
className="plan-cover" const columns = [
src={ {
record.coverUrl || title: '培训任务',
"https://image.xiaomaiketang.com/xm/rEAetaTEh3.png" key: 'planName',
} dataIndex: 'planName',
alt="" width: '18%',
/> fixed: 'left',
<Choose> render: (val, record) => {
<When condition={record.planName.length > 25}> return (
<Tooltip title={record.planName}> <div className='plan_name_item'>
<div className="plan-name">{val}</div> <img className='plan-cover' src={record.coverUrl || 'https://image.xiaomaiketang.com/xm/rEAetaTEh3.png'} alt='' />
</Tooltip> <Choose>
</When> <When condition={record.planName.length > 25}>
<Otherwise> <Tooltip title={record.planName}>
<div className="plan-name">{val}</div> <div className='plan-name'>{val}</div>
</Otherwise> </Tooltip>
</Choose> </When>
</div> <Otherwise>
); <div className='plan-name'>{val}</div>
}, </Otherwise>
}, </Choose>
{ </div>
title: "任务状态", );
width: "10%", },
key: "status",
dataIndex: "status",
render: (val, record) => {
return <div className="course-number">{"未开始"}</div>;
}, },
}, {
{ title: '任务状态',
title: "任务数", width: '10%',
width: "10%", key: 'status',
key: "courseNum", dataIndex: 'status',
dataIndex: "courseNum", render: (val, record) => {
render: (val, record) => { return <div className='course-number'>{'未开始'}</div>;
return <div className="course-number">{val}</div>; },
}, },
}, {
{ title: '任务数',
title: "学习人数", width: '8%',
width: "10%", key: 'courseNum',
align: "right", dataIndex: 'courseNum',
key: "cultureCustomerNum", render: (val, record) => {
dataIndex: "cultureCustomerNum", return <div className='course-number'>{val}</div>;
sorter: true, },
render: (val) => {
return <div className="join-number">{val}</div>;
}, },
}, {
{ title: '学习人数',
title: ( width: '8%',
<span> align: 'right',
完成率 key: 'cultureCustomerNum',
<Tooltip title="完成培训任务的人数/学习总人数"> dataIndex: 'cultureCustomerNum',
<i sorter: true,
className="icon iconfont" render: (val) => {
style={{ return <div className='join-number'>{val}</div>;
marginLeft: "5px", },
cursor: "pointer",
color: "#bfbfbf",
fontSize: "14px",
fontWeight: "normal",
}}
>
&#xe61d;
</i>
</Tooltip>
</span>
),
width: "10%",
key: "rate",
dataIndex: "rate",
sorter: true,
render: (val) => {
return <span>100%</span>
}, },
}, {
{ title: (
title: "培训时间", <span>
width: "12.5%", 完成率
key: "created", <Tooltip title='完成培训任务的人数/学习总人数'>
dataIndex: "created", <i
sorter: true, className='icon iconfont'
render: (val) => { style={{
return ( marginLeft: '5px',
<span style={{ whiteSpace: "nowrap" }}> cursor: 'pointer',
{window.formatDate("YYYY-MM-DD H:i", val)} color: '#bfbfbf',
fontSize: '14px',
fontWeight: 'normal',
}}>
&#xe61d;
</i>
</Tooltip>
</span> </span>
); ),
width: '10%',
key: 'rate',
dataIndex: 'rate',
sorter: true,
render: (val) => {
return <span>100%</span>;
},
}, },
}, {
{ title: '培训时间',
title: "创建人", width: '14%',
key: "createName", key: 'created',
dataIndex: "createName", dataIndex: 'created',
width: "11%", render: (val) => {
render: (val) => { return <span style={{ whiteSpace: 'nowrap' }}>{window.formatDate('YYYY-MM-DD H:i', val)}</span>;
return <div className="create-name">{val}</div>; },
}, },
}, {
{ title: '创建人',
title: "创建时间", key: 'createName',
width: "12.5%", dataIndex: 'createName',
key: "created", width: '10%',
dataIndex: "created", render: (val) => {
sorter: true, return <div className='create-name'>{val}</div>;
render: (val) => { },
return (
<span style={{ whiteSpace: "nowrap" }}>
{window.formatDate("YYYY-MM-DD H:i", val)}
</span>
);
}, },
}, {
{ title: '创建时间',
title: "更新时间", width: '14%',
width: "10%", key: 'created',
key: "updated", dataIndex: 'created',
dataIndex: "updated", sorter: true,
sorter: true, render: (val) => {
render: (val) => { return <span style={{ whiteSpace: 'nowrap' }}>{window.formatDate('YYYY-MM-DD H:i', val)}</span>;
return ( },
<span style={{ whiteSpace: "nowrap" }}> },
{window.formatDate("YYYY-MM-DD H:i", val)} {
</span> title: '更新时间',
); width: '10%',
key: 'updated',
dataIndex: 'updated',
sorter: true,
render: (val) => {
return <span style={{ whiteSpace: 'nowrap' }}>{window.formatDate('YYYY-MM-DD H:i', val)}</span>;
},
}, },
},
{ {
title: "操作", title: '操作',
key: "operate", key: 'operate',
dataIndex: "operate", dataIndex: 'operate',
fixed: "right", fixed: 'right',
width: "18%", width: '16%',
render: (val, record) => { render: (val, record) => {
return ( return (
<div className="operate"> <div className='operate'>
<div <div className='operate__item' onClick={() => toLearningDataPage(record)}>
className="operate__item" 数据
onClick={() => toLearningDataPage(record)} </div>
> {record.enableState === 'YES' && (
数据 <>
</div> <span className='operate__item split'> | </span>
{record.enableState === "YES" && ( <div
<> className='operate__item'
<span className="operate__item split"> | </span> onClick={() => {
<div handleShowShareModal(record);
className="operate__item" }}>
onClick={() => { 指派
handleShowShareModal(record); </div>
}} </>
> )}
指派 {record.enableState === 'YES' && (
</div> <>
</> <span className='operate__item split'> | </span>
)} <div
{record.enableState === "YES" && ( className='operate__item'
<> onClick={() => {
<span className="operate__item split"> | </span> handleShowShareModal(record);
<div }}>
className="operate__item" 发布
onClick={() => { </div>
handleShowShareModal(record); </>
}} )}
> {(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && (
发布 <>
</div> <span className='operate__item split'> | </span>
</> <Dropdown overlay={renderMoreOperate(record)}>
)} <span className='more-operate'>
{(User.getUserRole() === "CloudManager" || <span className='operate-text'>更多</span>
User.getUserRole() === "StoreManager") && ( <span className='iconfont icon' style={{ color: '#2966FF' }}>
<> &#xe824;
<span className="operate__item split"> | </span> </span>
<Dropdown overlay={renderMoreOperate(record)}>
<span className="more-operate">
<span className="operate-text">更多</span>
<span
className="iconfont icon"
style={{ color: "#2966FF" }}
>
&#xe824;
</span> </span>
</span> </Dropdown>
</Dropdown> </>
</> )}
)} </div>
</div> );
); },
}, },
}, ];
]; return columns;
return columns; }
}
// 改变搜索条件(状态 协同与否)
function handleChangeQuery(field, value) {
const _query = {
...props.query,
[field]: value,
};
props.onChange(_query);
}
function TrainList(props) {
console.log(props.trainListData);
return ( return (
<div className="train-list-page"> <div className='train-list-page'>
<div className="search-box"> <div className='search-box'>
<Tabs type="card"> <Tabs onChange={(value) => handleChangeQuery('status', value)} type='card'>
<TabPane tab="全部" key="all" /> <TabPane tab={`全部 (${20})`} key='all' />
<TabPane tab="已发布" key="published" /> <TabPane tab={`已发布 (${10})`} key='published' />
<TabPane tab="未发布" key="unpublished" /> <TabPane tab={`未发布 (${10})`} key='unpublished' />
</Tabs> </Tabs>
<Checkbox onChange={(e) => handleChangeQuery('onlyHelp', e.target.checked)}>只看我协同的 ({10})</Checkbox>
</div> </div>
<div className="list-content"> <div className='list-content'>
<XMTable <XMTable
rowKey={(record) => record.id} rowKey={(record) => record.id}
showSorterTooltip={false} showSorterTooltip={false}
...@@ -253,29 +237,24 @@ function TrainList(props) { ...@@ -253,29 +237,24 @@ function TrainList(props) {
pagination={false} pagination={false}
// onChange={handleChangeTable} // onChange={handleChangeTable}
bordered bordered
size="middle" size='middle'
scroll={{ x: 1400 }} scroll={{ x: 1600 }}
// className='plan-list-table' // className='plan-list-table'
renderEmpty={{ renderEmpty={{
description: ( description: <span style={{ display: 'block', paddingBottom: 24 }}>暂无数据</span>,
<span style={{ display: "block", paddingBottom: 24 }}>
暂无数据
</span>
),
}} }}
/> />
{/* <div className='box-footer'> <div className='box-footer'>
<PageControl <PageControl
current={props.query.current - 1} current={current - 1}
pageSize={props.query.size} pageSize={size}
total={props.totalCount} total={totalCount}
toPage={(page) => { toPage={(page) => {
// const _query = { ...props.query, current: page + 1 }; handleChangeQuery('current', page + 1);
// props.onChange(_query); }}
}} showSizeChanger={false}
// onShowSizeChange={onShowSizeChange} />
/> */} </div>
{/* </div> */}
</div> </div>
</div> </div>
); );
......
src/modules/task-center/components/TrainList.less
.train-list-page { .train-list-page {
margin-top: 12px; margin-top: 12px;
.search-box {
display: flex;
line-height: 46px;
}
.ant-tabs-nav { .ant-tabs-nav {
margin: 0 !important; margin: 0 !important;
} }
......
src/modules/task-center/components/TrainOpt.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: zhangleyuan * @Author: zhangleyuan
* @Date: 2021-02-20 16:45:51 * @Date: 2021-02-20 16:45:51
* @LastEditors: yuananting * @LastEditors: yuananting
* @LastEditTime: 2021-07-28 14:46:51 * @LastEditTime: 2021-07-29 14:04:05
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -12,21 +12,19 @@ import { withRouter } from 'react-router-dom'; ...@@ -12,21 +12,19 @@ import { withRouter } from 'react-router-dom';
import User from '@/common/js/user'; import User from '@/common/js/user';
// import './PlanOpt.less'; // import './PlanOpt.less';
function PlanOpt() { function PlanOpt() {
function handleCreatePlan(){ function handleCreatePlan() {
window.RCHistory.push({ window.RCHistory.push({
pathname: '/create-plan?type=add', pathname: '/create-train-task?type=add',
}) });
} }
return ( return (
<div className="plan-opt-page"> <div className='plan-opt-page'>
{ (User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager") && {(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && (
<Button <Button type='primary' className='mr12' onClick={handleCreatePlan}>
type="primary" 新建培训任务
className="mr12" </Button>
onClick={handleCreatePlan} )}
>新建培训任务</Button>
}
</div> </div>
); );
} }
export default withRouter(PlanOpt) export default withRouter(PlanOpt);
\ No newline at end of file
src/routes/config/mainRoutes.tsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-04-29 10:26:32 * @Date: 2020-04-29 10:26:32
* @LastEditors: yuananting * @LastEditors: yuananting
* @LastEditTime: 2021-07-28 11:33:13 * @LastEditTime: 2021-07-29 14:03:23
* @Description: 内容线路由配置 * @Description: 内容线路由配置
*/ */
import Home from '@/modules/home/Home'; import Home from '@/modules/home/Home';
...@@ -37,6 +37,7 @@ import ExaminationManagerTestDetail from '@/modules/teach-tool/examination-manag ...@@ -37,6 +37,7 @@ import ExaminationManagerTestDetail from '@/modules/teach-tool/examination-manag
import KnowledgeBase from '@/modules/knowledge-base/index'; import KnowledgeBase from '@/modules/knowledge-base/index';
import CollegeInfoPage from '@/modules/college-manage/CollegeInfoPage'; import CollegeInfoPage from '@/modules/college-manage/CollegeInfoPage';
import TrainTaskPage from '@/modules/task-center/TrainTaskPage'; import TrainTaskPage from '@/modules/task-center/TrainTaskPage';
import AddTrainTask from '@/modules/task-center/AddTrainTask';
const mainRoutes = [ const mainRoutes = [
{ {
...@@ -167,6 +168,11 @@ const mainRoutes = [ ...@@ -167,6 +168,11 @@ const mainRoutes = [
name: '培训任务', name: '培训任务',
}, },
{ {
path: '/create-train-task',
component: AddTrainTask,
name: '创建培训任务',
},
{
path: '/create-plan', path: '/create-plan',
component: AddPlanPage, component: AddPlanPage,
name: '创建线上课', name: '创建线上课',
......
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