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 @@
* @Author: zhangleyuan
* @Date: 2021-02-20 16:13:39
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-03 10:29:13
* @LastEditTime: 2021-03-08 18:19:14
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -11,7 +11,8 @@ import { Button, 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 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";
......@@ -219,6 +220,12 @@ function AddPlan() {
<TrainingTask data={taskList} onChange={handleChangeTaskInfo} />
}
</div>
{ type==='edit' &&
<div className="expired-info__wrap">
<div className="title">失效课程</div>
<ExpiredCourseList />
</div>
}
</div>
</div>
<div className="footer">
......
src/modules/plan-manage/AddPlan.less
......@@ -2,7 +2,6 @@
position:relative !important;
.box {
margin-bottom: 66px !important;
}
.add-plan-page__form {
margin-top: 16px;
.title {
......@@ -13,6 +12,10 @@
margin-bottom:8px;
}
}
.expired-info__wrap{
margin-top:16px;
}
}
.footer {
position: fixed;
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 @@
* @Author: zhangleyuan
* @Date: 2021-02-20 16:45:51
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-03 10:06:14
* @LastEditTime: 2021-03-09 10:04:40
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
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 { MenuOutlined } from '@ant-design/icons';
import arrayMove from 'array-move';
import RelatedCourseModal from '../modal/relatedCourseModal'
import { withRouter } from 'react-router-dom';
import './TrainingTask.less';
const { Panel } = Collapse
const DragHandle = sortableHandle(() => (
<span style={{ cursor: 'pointer', color: '#999' }} >
<span className="icon iconfont">&#xe7cd;</span>
<span>移动</span>
</span>
));
const SortableItem = sortableElement(props => <tr {...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 {
constructor(props) {
super(props);
this.state = {
......@@ -162,9 +192,39 @@ class TrainingTask extends React.Component {
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] });
}
};
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 });
}
};
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 {
taskName: '',
index:dataSource.length,
type:'input',
open:false,
courseList:[
]
}
......@@ -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() {
const { dataSource,selectedTaskIndex,relatedCourseModalVisible} = this.state;
console.log("dataSource",dataSource);
const { data } = this.props;
return (
<div className="training-task">
......@@ -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>
{ relatedCourseModalVisible &&
<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