Skip to content

X
xiaomai-cloud-class-web
Commit f4420a20 by zhangleyuan
Options

Merge branch 'feature/zhangleyuan/20200220/training-program' into dev

parents 2bd85744 b3ffb2aa
Showing with 221 additions and 8 deletions
src/modules/plan-manage/AddPlan.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: zhangleyuan * @Author: zhangleyuan
* @Date: 2021-02-20 16:13:39 * @Date: 2021-02-20 16:13:39
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-03 10:29:13 * @LastEditTime: 2021-03-08 18:19:14
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -11,7 +11,8 @@ import { Button, message, Modal} from 'antd'; ...@@ -11,7 +11,8 @@ import { Button, message, Modal} from 'antd';
import ShowTips from "@/components/ShowTips"; import ShowTips from "@/components/ShowTips";
import Breadcrumbs from "@/components/Breadcrumbs"; import Breadcrumbs from "@/components/Breadcrumbs";
import BasicInfo from './components/BasicInfo'; import BasicInfo from './components/BasicInfo';
import TrainingTask from './components/TrainingTask' import TrainingTask from './components/TrainingTask';
import ExpiredCourseList from './components/ExpiredCourseList';
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';
import _ from "underscore"; import _ from "underscore";
...@@ -219,6 +220,12 @@ function AddPlan() { ...@@ -219,6 +220,12 @@ function AddPlan() {
<TrainingTask data={taskList} onChange={handleChangeTaskInfo} /> <TrainingTask data={taskList} onChange={handleChangeTaskInfo} />
} }
</div> </div>
{ type==='edit' &&
<div className="expired-info__wrap">
<div className="title">失效课程</div>
<ExpiredCourseList />
</div>
}
</div> </div>
</div> </div>
<div className="footer"> <div className="footer">
......
src/modules/plan-manage/AddPlan.less
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
position:relative !important; position:relative !important;
.box { .box {
margin-bottom: 66px !important; margin-bottom: 66px !important;
}
.add-plan-page__form { .add-plan-page__form {
margin-top: 16px; margin-top: 16px;
.title { .title {
...@@ -13,6 +12,10 @@ ...@@ -13,6 +12,10 @@
margin-bottom:8px; margin-bottom:8px;
} }
} }
.expired-info__wrap{
margin-top:16px;
}
}
.footer { .footer {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
......
src/modules/plan-manage/components/ExpiredCourseList.jsx 0 → 100644
import React from 'react';
import { Button } from 'antd';
import { withRouter } from 'react-router-dom';
import User from '@/common/js/user';
import './ExpiredCourseList.less';
function ExpiredCourseList() {
return (
<div className="expired-course-list">
<div className="course-item">
<div className="course-left">
<div className="course-status">
未成功开课
</div>
<div className="course-info">
<div className="course-type">
<span>直播课</span>
</div>
<div className="course-instro">
<div className="course-name">
课程名称最多四十个字课程名称最多四十个字课程名称最多四十个字课程名称最多四十个字
</div>
<div className="task-name">
培训名称最多二十个字培训名称最多二十个字
</div>
</div>
</div>
</div>
<div className="course-time">
上课时间：47238095327
</div>
</div>
</div>
);
}
export default withRouter(ExpiredCourseList)
src/modules/plan-manage/components/ExpiredCourseList.less 0 → 100644
.expired-course-list{
margin:18px 10px 16px;
.course-item{
display:flex;
padding:16px 0;
border-bottom:1px solid #E8E8E8;
justify-content: space-between;
.course-left{
display:flex;
.course-status{
color:#999999;
font-size:14px;
margin-right:16px;
}
.course-info{
display:flex;
.course-type{
margin-right:16px;
span{
padding:2px 8px;
color:#666666;
font-size:11px;
border-radius: 2px;
border: 1px solid #999999;
}
}
.course-instro{
.course-name{
color:#333333;
font-size:14px;
margin-bottom:7px;
}
.task-name{
color:#999;
font-size:14px;
}
}
}
}
.course-time{
color:#999;
font-size:14px;
}
}
}
\ No newline at end of file
src/modules/plan-manage/components/TrainingTask.jsx
...@@ -2,29 +2,59 @@ ...@@ -2,29 +2,59 @@
* @Author: zhangleyuan * @Author: zhangleyuan
* @Date: 2021-02-20 16:45:51 * @Date: 2021-02-20 16:45:51
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-03 10:06:14 * @LastEditTime: 2021-03-09 10:04:40
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
import React from 'react'; import React from 'react';
import { Table ,Button,Input,Form} from 'antd'; import { Table ,Button,Input,Form,Collapse} from 'antd';
import { sortableContainer, sortableElement, sortableHandle} from 'react-sortable-hoc'; import { sortableContainer, sortableElement, sortableHandle} from 'react-sortable-hoc';
import { MenuOutlined } from '@ant-design/icons'; import { MenuOutlined } from '@ant-design/icons';
import arrayMove from 'array-move'; import arrayMove from 'array-move';
import RelatedCourseModal from '../modal/relatedCourseModal' import RelatedCourseModal from '../modal/relatedCourseModal'
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import './TrainingTask.less'; import './TrainingTask.less';
const { Panel } = Collapse
const DragHandle = sortableHandle(() => ( const DragHandle = sortableHandle(() => (
<span style={{ cursor: 'pointer', color: '#999' }} > <span style={{ cursor: 'pointer', color: '#999' }} >
<span className="icon iconfont">&#xe7cd;</span> <span className="icon iconfont">&#xe7cd;</span>
<span>移动</span> <span>移动</span>
</span> </span>
)); ));
const SortableItem = sortableElement(props => <tr {...props}/>); const SortableItem = sortableElement(props => <tr {...props}/>);
const SortableContainer = sortableContainer(props => <tbody {...props} />); const SortableContainer = sortableContainer(props => <tbody {...props} />);
const taskData = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
index: 0,
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
index: 1,
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
index: 2,
},
];
const SortableTaskItem = sortableElement(props => <div {...props}>{props.taskItem}</div>)
const SortableTaskContainer = sortableContainer(props => <div {...props}></div>);
const SortableCourseItem = sortableElement(props => <div {...props}>{props.courseItem}</div>)
const SortableCourseContainer = sortableContainer(props => <div {...props}></div>);
class TrainingTask extends React.Component { class TrainingTask extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
...@@ -162,9 +192,39 @@ class TrainingTask extends React.Component { ...@@ -162,9 +192,39 @@ class TrainingTask extends React.Component {
console.log("newIndex",newIndex); console.log("newIndex",newIndex);
if (oldIndex !== newIndex) { if (oldIndex !== newIndex) {
const newData = arrayMove([].concat(dataSource), oldIndex, newIndex).filter(el => !!el); const newData = arrayMove([].concat(dataSource), oldIndex, newIndex).filter(el => !!el);
console.log("newData",newData)
this.setState({ dataSource: [...newData] });
}
};
onTaskSortEnd = ({ oldIndex, newIndex }) => {
const { dataSource } = this.state;
console.log("oldIndex",oldIndex);
console.log("newIndex",newIndex);
if (oldIndex !== newIndex) {
const newData = arrayMove([].concat(dataSource), oldIndex, newIndex).filter(el => !!el);
console.log("newData",newData)
this.setState({ dataSource: newData }); this.setState({ dataSource: newData });
} }
};
onCourseSortEnd = ({ oldIndex, newIndex },parentIndex) => {
const { dataSource } = this.state;
console.log("parentIndex",parentIndex);
console.log("dataSource",dataSource);
console.log("dataSource",dataSource[parentIndex].courseList);
const _dataSource = [...dataSource];
if (oldIndex !== newIndex) {
_dataSource[parentIndex].courseList = arrayMove([].concat(dataSource[parentIndex].courseList), oldIndex, newIndex).filter(el => !!el);
this.setState({ dataSource:_dataSource });
}
}; };
...@@ -191,6 +251,7 @@ class TrainingTask extends React.Component { ...@@ -191,6 +251,7 @@ class TrainingTask extends React.Component {
taskName: '', taskName: '',
index:dataSource.length, index:dataSource.length,
type:'input', type:'input',
open:false,
courseList:[ courseList:[
] ]
} }
...@@ -284,11 +345,55 @@ class TrainingTask extends React.Component { ...@@ -284,11 +345,55 @@ class TrainingTask extends React.Component {
}) })
} }
renderTaskItem = (record,index)=>{
return <div>
<span>
<span></span>
</span>
{record.type==='input'?
<Form>
<Form.Item
validateTrigger={['onChange', 'onBlur']}
name={['taskName']}
rules={[
{
required: true,
message: "请输入任务名称",
},
]}>
<Input defaultValue={record.taskName} style={{ width: 300 }} placeholder="请输入任务名称（20字以内）" maxLength={20} onChange={(e) => { this.handleRenameTaskName(e,record)}} onBlur={(e)=>{this.handleTaskNameBlur(e,record)}}/>
</Form.Item>
</Form>
:
<span>{record.taskName}</span>
}
<DragHandle />
<div>
<SortableCourseContainer
useDragHandle
disableAutoscroll
helperClass="row-dragging"
onSortEnd={(record)=>this.onCourseSortEnd(record,index)} >
{record.courseList.map((courseItem, courseIndex) =>
<SortableCourseItem courseItem={this.renderCourseItem(courseItem,courseIndex)} index={courseIndex}>
</SortableCourseItem>
)}
</SortableCourseContainer>
<div><Button onClick={()=>{this.showRelatedCourseModal(index)}}><span>+</span><span>关联课程</span></Button></div>
</div>
</div>
}
renderCourseItem = (record,index)=>{
return <div>
{record.courseName}
<DragHandle />
</div>
}
render() { render() {
const { dataSource,selectedTaskIndex,relatedCourseModalVisible} = this.state; const { dataSource,selectedTaskIndex,relatedCourseModalVisible} = this.state;
console.log("dataSource",dataSource);
const { data } = this.props; const { data } = this.props;
return ( return (
<div className="training-task"> <div className="training-task">
...@@ -325,6 +430,18 @@ class TrainingTask extends React.Component { ...@@ -325,6 +430,18 @@ class TrainingTask extends React.Component {
}, },
}} }}
/> />
{/* <SortableTaskContainer
useDragHandle
disableAutoscroll
helperClass="row-dragging"
onSortEnd={this.onTaskSortEnd}
>
{dataSource.map((item, index) =>
<SortableTaskItem taskItem={this.renderTaskItem(item,index)} index={index}>
</SortableTaskItem>
)}
</SortableTaskContainer> */}
<div><Button onClick={()=>this.addTask()}><span>+</span><span>添加任务</span></Button></div> <div><Button onClick={()=>this.addTask()}><span>+</span><span>添加任务</span></Button></div>
{ relatedCourseModalVisible && { relatedCourseModalVisible &&
<RelatedCourseModal <RelatedCourseModal
......
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