feat:处理任务排序

src/modules/plan-manage/components/TrainingTask.jsx

@@ -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-08 17:39:37
+ * @LastEditTime: 2021-03-08 20:59:14
  * @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 = {
@@ -156,20 +186,43 @@ class TrainingTask extends React.Component {
   }
   }
 
 
   onSortEnd = ({ oldIndex, newIndex }) => {
   onSortEnd = ({ oldIndex, newIndex }) => {
-    
-    
     const { dataSource } = this.state;
     const { dataSource } = this.state;
 
 
     console.log("oldIndex",oldIndex);
     console.log("oldIndex",oldIndex);
     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 });
       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);
+      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 });
+    }
 
 
+  };
+  
   DraggableContainer = props => (
   DraggableContainer = props => (
     <SortableContainer
     <SortableContainer
       useDragHandle
       useDragHandle
@@ -286,13 +339,54 @@ class TrainingTask extends React.Component {
     })
     })
   }
   }
   
   
+  renderTaskItem = (record,index)=>{
+    return <div>
+      {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;
 
 
     const { data } = this.props;
     const { data } = this.props;
     return (
     return (
       <div  className="training-task">
       <div  className="training-task">
-        <Table
+        {/* <Table
           pagination={false}
           pagination={false}
           dataSource={dataSource}
           dataSource={dataSource}
           columns={this.parseTaskColumns()}
           columns={this.parseTaskColumns()}
@@ -324,7 +418,20 @@ class TrainingTask extends React.Component {
               row: this.DraggableBodyRow,
               row: this.DraggableBodyRow,
             },
             },
           }}
           }}
-        />
+        /> */}
+
+       <SortableTaskContainer  
+          useDragHandle
+          disableAutoscroll
+          helperClass="row-dragging"
+          onSortEnd={this.onTaskSortEnd} 
+        >
+          {data.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