Skip to content

X
xiaomai-cloud-class-web
Commit 52a7b420 by yuananting
Options

feat:新建培训任务页面部分开发

parent 14cd1beb
Showing with 400 additions and 109 deletions
src/modules/task-center/train-task/AddTrainTask.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-07-29 13:57:03
* @LastEditors: yuananting
* @LastEditTime: 2021-07-30 10:07:51
* @LastEditTime: 2021-07-30 16:35:59
* @Description: 任务中心-培训任务-新建页面
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
......@@ -12,7 +12,7 @@ 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 TrainContent from './components/TrainContent';
// import ExpiredCourseList from './components/ExpiredCourseList';
import PlanService from '@/domains/plan-domain/planService';
import User from '@/common/js/user';
......@@ -28,6 +28,7 @@ const DEFAULT_BASIC_INFO = {
coverUrl: defaultCover,
coverId: null,
durationType: 'NEVER_EXPIRES',
learnType: 'FREEDOM',
enableState: 'YES',
selectOperatorList: [],
instro: '',
......@@ -92,7 +93,7 @@ function AddTrainTask() {
<BasicInfo data={basicInfo} onChange={handleChangeBasicInfo} />
</TabPane>
<TabPane tab='2 培训内容' key='TRAIN_CONTENT'>
<div className='train-content__warp'>2</div>
<TrainContent />
</TabPane>
</Tabs>
</div>
......
src/modules/task-center/train-task/TrainTaskPage.jsx
......@@ -2,13 +2,12 @@
* @Author: yuananting
* @Date: 2021-07-28 11:25:58
* @LastEditors: yuananting
* @LastEditTime: 2021-07-30 10:10:59
* @LastEditTime: 2021-07-30 11:58:13
* @Description: 任务中心-培训任务
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { useEffect, useState } from 'react';
import TrainFilter from './components/TrainFilter';
import TrainOpt from './components/TrainOpt';
import TrainList from './components/TrainList';
// import PlanList from './components/PlanList'
import PlanService from '@/domains/plan-domain/planService';
......@@ -16,8 +15,8 @@ import User from '@/common/js/user';
function TrainTaskPage() {
const [trainListData, setTrainListData] = useState([]); // 培训任务列表
const [query, setQuery] = useState({
status: 'All',
onlyHelp: false,
issueState: 'ALL', // 发布状态
myAssist: false, // 是否协同
current: 1,
size: 10,
storeUserId: User.getStoreUserId(),
......@@ -49,7 +48,6 @@ function TrainTaskPage() {
<div className='content-header'>培训任务</div>
<div className='box'>
<TrainFilter onChange={queryChange} />
<TrainOpt />
<TrainList trainListData={trainListData} query={query} totalCount={totalCount} onChange={queryChange} />
</div>
</div>
......
src/modules/task-center/train-task/components/BasicInfo.jsx
......@@ -2,19 +2,19 @@
* @Author: yuananting
* @Date: 2021-07-29 14:32:24
* @LastEditors: yuananting
* @LastEditTime: 2021-07-29 16:54:42
* @LastEditTime: 2021-07-30 16:23:11
* @Description: 任务中心-培训任务-新建-基本信息
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import { Form, Button, Input, Space, DatePicker, Radio, Row, Col, message, Tooltip } from 'antd';
import { Form, Button, Input, Space, DatePicker, Radio, Tag, 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 GraphicsEditor from '@/modules/course-manage/components/GraphicsEditor';
// import ImgClipModal from '@/components/ImgClipModal';
import moment from 'moment';
import './BasicInfo.less';
......@@ -30,8 +30,9 @@ function BasicInfo(props) {
planName,
coverUrl,
durationType,
endTime,
learnType,
instro,
endTime,
enableState,
operateType,
selectOperatorList,
......@@ -40,6 +41,169 @@ function BasicInfo(props) {
percentCompletePicture,
} = data;
const isDefaultCover = true;
const helpStoreUsers = [
{
id: 1,
name: 'y阿萨德at',
},
{
id: 2,
name: 'ASFSDFAtgdf',
},
{
id: 3,
name: 'sfasfasdffff',
},
{
id: 4,
name: 'fsaf',
},
{
id: 5,
name: '示范法as',
},
{
id: 6,
name: '会尽快个何况',
},
{
id: 7,
name: '千多',
},
{
id: 8,
name: '我二合一',
},
{
id: 9,
name: '发顺丰',
},
{
id: 10,
name: '时高时低',
},
{
id: 11,
name: 'ASFSDFAtgdf',
},
{
id: 12,
name: '撒的A',
},
{
id: 13,
name: '山东高速广东省广东省怪怪的',
},
{
id: 14,
name: '而言二',
},
{
id: 15,
name: '而已',
},
{
id: 16,
name: '一条鱼',
},
{
id: 17,
name: '水电费干啥',
},
{
id: 18,
name: 'AddTrainTask',
},
];
const assignList1 = [
{
id: 1,
name: 'yat',
},
{
id: 2,
name: '而已',
},
{
id: 3,
name: '一条鱼',
},
];
const assignList2 = [
{
id: 1,
name: 'yat',
},
{
id: 2,
name: 'ya发发送到发送到发送到撒旦法撒旦法师t',
},
{
id: 3,
name: '1111111111111111111111111111111111111111111111111111111',
},
{
id: 4,
name: 'fsaf',
},
{
id: 5,
name: '示范法as',
},
{
id: 6,
name: '示范法as水电费',
},
{
id: 7,
name: '千多',
},
{
id: 8,
name: 'y阿萨at',
},
{
id: 9,
name: '发顺丰',
},
{
id: 10,
name: 'iuyti第三方感受到',
},
{
id: 11,
name: 'ASFSDFAtgdf',
},
{
id: 12,
name: '撒的A',
},
{
id: 13,
name: '耳热耳热让他一人',
},
{
id: 14,
name: '而言二',
},
{
id: 15,
name: '而已',
},
{
id: 16,
name: '一条鱼',
},
{
id: 17,
name: '水电费干啥',
},
{
id: 18,
name: 'AddTrainTask',
},
];
// 使用默认封面图
function handleResetCoverUrl() {
......@@ -55,13 +219,13 @@ function BasicInfo(props) {
return (
<div className='basic-info__form'>
<Form labelCol={{ span: 3 }} wrapperCol={{ span: 21 }}>
<FormItem label='培训任务名称'>
<Form>
<FormItem label='培训任务名称' required>
<Input
value={planName}
placeholder='请输入培训任务名称（20字以内）'
maxLength={20}
style={{ width: 240 }}
style={{ width: 300 }}
// onChange={(e) => this.props.onChange('planName', e.target.value)}
/>
</FormItem>
......@@ -74,7 +238,7 @@ function BasicInfo(props) {
showSelectFileModal: true,
});
}}>
上传图片
上传封面
</Button>
<span className={`default-btn ${isDefaultCover ? 'disabled' : ''}`} onClick={handleResetCoverUrl}>
使用默认图
......@@ -82,73 +246,120 @@ function BasicInfo(props) {
<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='' />
{isDefaultCover && <span className='default-tag'>默认图</span>}
<img src={coverUrl} 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'>
<Space direction='vertical' size={16}>
<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>
{durationType === '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')],
}}
// 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='学习模式'>
<FormItem label='学习模式' required extra={<div className='learning-model-tips'>提示：任务开始后学习模式将不允许更换</div>}>
<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 value={learnType} onChange={(e) => props.onChange('learnType', e.target.value)}>
<Space direction='vertical' size={16}>
<Radio value='FREEDOM'>自由学习</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>
</Space>
</Radio.Group>
</div>
</FormItem>
<FormItem label='指派学员'>
<Button>
<PlusOutlined />
添加指派对象
</Button>
<FormItem label='指派学员' required>
<div className='item-btn'>添加指派对象</div>
{assignList1.length + assignList2.length > 0 && (
<Space size={'12'} direction={'vertical'} className='item-obj'>
{assignList1.length > 0 && (
<div className='obj-type-container'>
<div className='type-title'>已选组织：</div>
<div className='tag-box'>
{_.map(assignList1, (item) => {
return <Tag closable>{item.name}</Tag>;
})}
</div>
</div>
)}
{assignList2.length > 0 && (
<div className='obj-type-container'>
<div className='type-title'>已选学员：</div>
<div className='tag-box'>
{_.map(assignList2, (item) => {
return <Tag closable>{item.name}</Tag>;
})}
</div>
</div>
)}
</Space>
)}
</FormItem>
<FormItem label='协同人员'>
<div className='item-btn'>添加协同者</div>
{helpStoreUsers.length > 0 && (
<div className='item-obj'>
{_.map(helpStoreUsers, (item) => {
return <Tag closable>{item.name}</Tag>;
})}
</div>
)}
</FormItem>
<FormItem label='培训目的'>
<GraphicsEditor
maxLimit={1000}
id='intro'
isIntro={true}
detail={{
content: instro,
}}
onChange={(val) => {
// this.changeIntro(val);
}}
/>
</FormItem>
</Form>
</div>
......
src/modules/task-center/train-task/components/BasicInfo.less
.basic-info__form {
margin-bottom: 138px;
.cover {
display: flex;
margin-top: 24px;
......@@ -7,9 +8,9 @@
.img-box {
position: relative;
margin-top: 8px;
width: 299px;
height: 169px;
.tag {
width: 300px;
height: 170px;
.default-tag {
border-radius: 2px;
background: #d6d6d6;
font-size: 12px;
......@@ -29,7 +30,7 @@
}
.opt-box {
.default-btn {
margin-left: 14px;
margin-left: 12px;
color: #2966ff;
cursor: pointer;
&.disabled {
......@@ -45,4 +46,65 @@
}
}
}
.duration {
&__wrap {
.tips {
color: #999999;
display: inline-block;
margin-left: 16px;
}
.picker-box {
display: inline-block;
margin-left: 16px;
}
}
}
.ant-form-item-extra {
.learning-model-tips {
margin-top: 8px;
color: #999999;
line-height: 20px;
}
}
.ant-form-item {
margin-bottom: 24px !important;
.ant-form-item-label > label {
width: 108px;
justify-content: flex-end;
}
&:not(:first-child) .ant-form-item-label > label {
height: 22px !important;
}
.ant-form-item-control-input {
min-height: 22px !important;
}
.ant-tag {
border: 1px solid #cccccc;
color: #666666;
margin-bottom: 12px;
font-size: 14px;
}
}
.item-btn {
color: #2966ff;
}
.item-obj {
width: 600px;
max-height: 90px;
overflow-y: scroll;
padding: 12px;
border-radius: 4px;
margin-top: 10px;
border: 1px solid #e8e8e8;
color: #666666;
.obj-type-container {
display: flex;
overflow-wrap: normal;
.type-title {
width: 70px;
flex-shrink: 0;
}
}
}
}
src/modules/task-center/train-task/components/TrainContent.jsx 0 → 100644
/*
* @Author: yuananting
* @Date: 2021-07-30 16:33:58
* @LastEditors: yuananting
* @LastEditTime: 2021-07-30 16:58:03
* @Description: 任务中心-培训任务-新建-培训内容
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import { Form, Button, Input, Space, DatePicker, Radio, Tag, Col, message, Tooltip } from 'antd';
import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';
function TrainContent(props) {
const SortableTaskContainer = sortableContainer((props) => <div {...props}></div>);
return (
<div className='train-content__warp'>
<SortableTaskContainer useDragHandle disableAutoscroll helperClass='row-dragging' onSortEnd={this.onTaskSortEnd} className='plan-task-sort-container'>
{dataSource.map((item, index) => (
<SortableTaskItem taskitem={this.renderTaskItem(item, index)} index={index} key={index}></SortableTaskItem>
))}
</SortableTaskContainer>
</div>
);
}
export default TrainContent;
src/modules/task-center/train-task/components/TrainList.jsx
......@@ -2,12 +2,12 @@
* @Author: yuananting
* @Date: 2021-07-28 14:56:52
* @LastEditors: yuananting
* @LastEditTime: 2021-07-29 13:52:35
* @LastEditTime: 2021-07-30 12:01:29
* @Description: 描述一下咯
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { useState, useEffect } from 'react';
import { Tabs, Tooltip, Checkbox, Dropdown } from 'antd';
import { Tabs, Tooltip, Checkbox, Dropdown, Radio, Button, Space } from 'antd';
import './TrainList.less';
import { XMTable, PageControl } from '@/components';
import User from '@/common/js/user';
......@@ -16,7 +16,7 @@ const { TabPane } = Tabs;
function TrainList(props) {
const {
query: { size, current },
query: { issueState, myAssist, current, size },
totalCount,
} = props;
......@@ -218,15 +218,35 @@ function TrainList(props) {
props.onChange(_query);
}
function handleCreatePlan() {
window.RCHistory.push({
pathname: '/create-train-task?type=add',
});
}
return (
<div className='train-list-page'>
<div className='search-box'>
<Tabs onChange={(value) => handleChangeQuery('status', value)} type='card'>
<TabPane tab={`全部 (${20})`} key='all' />
<TabPane tab={`已发布 (${10})`} key='published' />
<TabPane tab={`未发布 (${10})`} key='unpublished' />
</Tabs>
<Checkbox onChange={(e) => handleChangeQuery('onlyHelp', e.target.checked)}>只看我协同的 ({10})</Checkbox>
<div className='header-line'>
{(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && (
<Button type='primary' className='mr12' onClick={handleCreatePlan}>
新建培训任务
</Button>
)}
<Space size={16}>
<Radio.Group
size='middle'
value={issueState}
onChange={(e) => {
handleChangeQuery('issueState', e.target.value);
}}>
<Radio.Button value='ALL'>全部</Radio.Button>
<Radio.Button value='YES'>已发布</Radio.Button>
<Radio.Button value='NO'>未发布</Radio.Button>
</Radio.Group>
<Checkbox style={{ lineHeight: '32px' }} value={myAssist} onChange={(e) => handleChangeQuery('myAssist', e.target.checked)}>
只看我协同的 ({10})
</Checkbox>
</Space>
</div>
<div className='list-content'>
<XMTable
......
src/modules/task-center/train-task/components/TrainList.less
.train-list-page {
margin-top: 12px;
.search-box {
.header-line {
display: flex;
line-height: 46px;
justify-content: space-between;
margin-bottom: 12px;
}
.ant-tabs-nav {
margin: 0 !important;
......
src/modules/task-center/train-task/components/TrainOpt.jsx deleted 100644 → 0
/*
* @Author: zhangleyuan
* @Date: 2021-02-20 16:45:51
* @LastEditors: yuananting
* @LastEditTime: 2021-07-29 14:04:05
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import { Button } from 'antd';
import { withRouter } from 'react-router-dom';
import User from '@/common/js/user';
// import './PlanOpt.less';
function PlanOpt() {
function handleCreatePlan() {
window.RCHistory.push({
pathname: '/create-train-task?type=add',
});
}
return (
<div className='plan-opt-page'>
{(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && (
<Button type='primary' className='mr12' onClick={handleCreatePlan}>
新建培训任务
</Button>
)}
</div>
);
}
export default withRouter(PlanOpt);
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