feat:处理创建培训计划页

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

@@ -2,20 +2,120 @@
  * @Author: zhangleyuan
  * @Author: zhangleyuan
  * @Date: 2021-02-20 16:45:51
  * @Date: 2021-02-20 16:45:51
  * @LastEditors: zhangleyuan
  * @LastEditors: zhangleyuan
- * @LastEditTime: 2021-02-22 13:53:05
+ * @LastEditTime: 2021-02-23 16:23:07
  * @Description: 描述一下
  * @Description: 描述一下
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
  */
 import React from 'react';
 import React from 'react';
-import { Button } from 'antd';
+import { Table } from 'antd';
+import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';
+import { MenuOutlined } from '@ant-design/icons';
+import arrayMove from 'array-move';
 import { withRouter } from 'react-router-dom';
 import { withRouter } from 'react-router-dom';
-import './BasicInfo.less';
 
 
- function TrainingTask() {
-  return (
-    <div>
-        培训任务
-    </div>
+const DragHandle = sortableHandle(() => (
+  <MenuOutlined style={{ cursor: 'pointer', color: '#999' }} />
+));
+
+const columns = [
+  {
+    title: 'Sort',
+    dataIndex: 'sort',
+    width: 30,
+    className: 'drag-visible',
+    render: () => <DragHandle />,
+  },
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    className: 'drag-visible',
+  },
+  {
+    title: 'Age',
+    dataIndex: 'age',
+  },
+  {
+    title: 'Address',
+    dataIndex: 'address',
+  },
+];
+
+const data = [
+  {
+    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 SortableItem = sortableElement(props => <tr {...props} />);
+const SortableContainer = sortableContainer(props => <tbody {...props} />);
+
+class TrainingTask  extends React.Component {
+  state = {
+    dataSource: data,
+  };
+
+  onSortEnd = ({ oldIndex, newIndex }) => {
+    const { dataSource } = this.state;
+    if (oldIndex !== newIndex) {
+      const newData = arrayMove([].concat(dataSource), oldIndex, newIndex).filter(el => !!el);
+      console.log('Sorted items: ', newData);
+      this.setState({ dataSource: newData });
+    }
+  };
+
+  DraggableContainer = props => (
+    <SortableContainer
+      useDragHandle
+      disableAutoscroll
+      helperClass="row-dragging"
+      onSortEnd={this.onSortEnd}
+      {...props}
+    />
   );
   );
+
+  DraggableBodyRow = ({ className, style, ...restProps }) => {
+    const { dataSource } = this.state;
+    // function findIndex base on Table rowKey props and should always be a right array index
+    const index = dataSource.findIndex(x => x.index === restProps['data-row-key']);
+    return <SortableItem index={index} {...restProps} />;
+  };
+
+  render() {
+    const { dataSource } = this.state;
+    return (
+      <Table
+        pagination={false}
+        dataSource={dataSource}
+        columns={columns}
+        rowKey="index"
+        components={{
+          body: {
+            wrapper: this.DraggableContainer,
+            row: this.DraggableBodyRow,
+          },
+        }}
+
+      />
+    );
+  }
 }
 }
+
 export default withRouter(TrainingTask)
 export default withRouter(TrainingTask)