feat:修改培训任务排序模块

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

@@ -2,7 +2,7 @@
  * @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 20:59:14
+ * @LastEditTime: 2021-03-09 10:04:40
  * @Description: 描述一下
  * @Description: 描述一下
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
  */
@@ -192,9 +192,12 @@ 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)
       console.log("newData",newData)
-      this.setState({ dataSource: newData });
+      
+      this.setState({ dataSource: [...newData] });
+      
     }
     }
   };
   };
   onTaskSortEnd = ({ oldIndex, newIndex }) => {
   onTaskSortEnd = ({ oldIndex, newIndex }) => {
@@ -204,7 +207,9 @@ 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 });
       this.setState({ dataSource: newData });
     }
     }
   };
   };
@@ -246,6 +251,7 @@ class TrainingTask extends React.Component {
       taskName: '',
       taskName: '',
       index:dataSource.length,
       index:dataSource.length,
       type:'input',
       type:'input',
+      open:false,
       courseList:[
       courseList:[
       ]
       ]
     }
     }
@@ -341,23 +347,28 @@ class TrainingTask extends React.Component {
   
   
   renderTaskItem = (record,index)=>{
   renderTaskItem = (record,index)=>{
     return <div>
     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>
-      }
+
+            <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 />
       <DragHandle />
       <div>
       <div>
         <SortableCourseContainer 
         <SortableCourseContainer 
@@ -386,7 +397,7 @@ class TrainingTask extends React.Component {
     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()}
@@ -418,19 +429,18 @@ class TrainingTask extends React.Component {
               row: this.DraggableBodyRow,
               row: this.DraggableBodyRow,
             },
             },
           }}
           }}
-        /> */}
-
-       <SortableTaskContainer  
+        />
+       {/* <SortableTaskContainer  
           useDragHandle
           useDragHandle
           disableAutoscroll
           disableAutoscroll
           helperClass="row-dragging"
           helperClass="row-dragging"
           onSortEnd={this.onTaskSortEnd} 
           onSortEnd={this.onTaskSortEnd} 
         >
         >
-          {data.map((item, index) =>
+          {dataSource.map((item, index) =>
             <SortableTaskItem taskItem={this.renderTaskItem(item,index)} index={index}>
             <SortableTaskItem taskItem={this.renderTaskItem(item,index)} index={index}>
             </SortableTaskItem>
             </SortableTaskItem>
           )}
           )}
-       </SortableTaskContainer>
+       </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 &&