feat:处理重命名问题

1aff56d2 · zhangleyuan · 7c14f866 · 1aff56d2 · 1aff56d2 · 1aff56d2
Commit 1aff56d2 authored Mar 07, 2021 by zhangleyuan
Hide whitespace changes
Inline Side-by-side

Showing with 97 additions and 63 deletions

src/domains/resource-disk/UploadFileService.ts
+1 -1

src/modules/plan-manage/AddPlan.jsx
+6 -1

src/modules/plan-manage/components/TrainingTask.jsx
+90 -61

No files found.
--- a/src/domains/resource-disk/UploadFileService.ts
+++ b/src/domains/resource-disk/UploadFileService.ts
@@ -8,7 +8,7 @@
 */
 import OSS from 'ali-oss';
 import { UPLOAD_REGION } from '@/domains/resource-disk/constants';
-import { getOssClient } from '@/data-source/basic/basic-apis.ts';
+import { getOssClient } from '@/data-source/basic/basic-apis';
 interface IMultiPartUpload {
  data: object;

--- a/src/modules/plan-manage/AddPlan.jsx
+++ b/src/modules/plan-manage/AddPlan.jsx
@@ -212,7 +212,12 @@ function AddPlan() {
                </div>
                <div className="basic-info__wrap">
                    <div className="title">培训任务</div>
-                    <TrainingTask data={taskList} onChange={handleChangeTaskInfo} />
+                    { (type==='edit' && taskList.length>0) &&
+                        <TrainingTask data={taskList} onChange={handleChangeTaskInfo} />
+                    }
+                    { type==='add' &&
+                        <TrainingTask data={taskList} onChange={handleChangeTaskInfo} />
+                    }
                </div>
            </div> 
        </div>

--- a/src/modules/plan-manage/components/TrainingTask.jsx
+++ b/src/modules/plan-manage/components/TrainingTask.jsx
@@ -21,23 +21,31 @@ const DragHandle = sortableHandle(() => (
    <span>移动</span>
  </span>
 ));
-const SortableItem = sortableElement(props => <tr {...props} />);
+const SortableItem = sortableElement(props => <tr {...props}/>);
 const SortableContainer = sortableContainer(props => <tbody {...props} />);
 class TrainingTask extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
-      dataSource:[],
+      dataSource:this.props.data,
      selectedTaskIndex:0,
      relatedCourseModalVisible:false
    };
  }
-  componentDidMount(){
+  componentWillMount(){
+    // if (this.props.data) {
+    //   const newData = [...this.props.data];
+    //   this.setState({
+    //     dataSource:newData,
+    //   })
+    // }
+  }
-    console.log('data',this.props.data);
+  componentWillReceiveProps(nextProps) {
  }
  parseTaskColumns = ()=>{
      const columns = [
        {
@@ -64,8 +72,7 @@ class TrainingTask extends React.Component {
                    : 
                    <span>{val}</span>
                  }
                </div>
            )
          }
@@ -81,7 +88,7 @@ class TrainingTask extends React.Component {
                    <DragHandle />
                    <span className="operate__item">
                      <span className="icon iconfont">&#xe6f5;</span>
-                      <span onClick={(e)=>{const { data }= this.props; record.type="input";this.props.onChange(data);}}>重命名</span>
+                      <span onClick={(e)=>{const { dataSource }= this.state; record.type="input";this.setState({dataSource})}}>重命名</span>
                    </span>
                    <span className="operate__item"  onClick={()=>{this.handleDeleteTask(index)}} >
                      <span className="icon iconfont">&#xe6f6;</span>
@@ -134,7 +141,7 @@ class TrainingTask extends React.Component {
                  <DragHandle />
                  <span className="operate__item">
                      <span className="icon iconfont">&#xe6f5;</span>
-                      <span onClick={(e)=>{const { data } = this.props; record.type="input";this.props.onChange(data);}}>重命名</span>
+                      <span onClick={(e)=>{const { dataSource } = this.state; record.type="input";this.setState({dataSource})}}>重命名</span>
                    </span>
                    <span className="operate__item" onClick={()=>{this.handleDeleteCourse(parentIndex,index)}}>
                      <span className="icon iconfont">&#xe6f6;</span>
@@ -148,88 +155,107 @@ class TrainingTask extends React.Component {
    return  coursecolumns
  }
-  // onSortEnd = ({ oldIndex, newIndex }) => {
+  onSortEnd = ({ oldIndex, newIndex }) => {
-  //   const { dataSource } = this.state;
+    const { dataSource } = this.state;
-  //   if (oldIndex !== newIndex) {
-  //     const newData = arrayMove([].concat(dataSource), oldIndex, newIndex).filter(el => !!el);
+    console.log("oldIndex",oldIndex);
-  //     console.log('Sorted items: ', newData);
+    console.log("newIndex",newIndex);
-  //     this.setState({ dataSource: newData });
-  //   }
+    if (oldIndex !== newIndex) {
-  // };
+      const newData = arrayMove([].concat(dataSource), oldIndex, newIndex).filter(el => !!el);
+      this.setState({ dataSource: newData });
+    }
+  };
-  // DraggableContainer = props => (
+  DraggableContainer = props => (
-  //   <SortableContainer
+    <SortableContainer
-  //     useDragHandle
+      useDragHandle
-  //     disableAutoscroll
+      disableAutoscroll
-  //     helperClass="row-dragging"
+      helperClass="row-dragging"
-  //     onSortEnd={this.onSortEnd}
+      onSortEnd={this.onSortEnd}
-  //     {...props}
+      {...props}
-  //   />
+    />
-  // );
+  );
-  // DraggableBodyRow = ({ className, style, ...restProps }) => {
+  DraggableBodyRow = ({ className, style, ...restProps }) => {
-  //   const { dataSource } = this.state;
+    const { dataSource } = this.state;
-  //   // function findIndex base on Table rowKey props and should always be a right array index
+    // 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']);
+    const index = dataSource.findIndex(x => x.index === restProps['data-row-key']);
-  //   return <SortableItem className={className} index={index} {...restProps} style={style}/>;
+    return <SortableItem className={className} index={index} {...restProps} style={style}/>;
-  // };
+  };
  addTask = () => {
-    const { data } = this.props;
+    const { dataSource } = this.state;
    const taskObj={
      taskName: '',
-      index:data.length,
+      index:dataSource.length,
      type:'input',
      courseList:[
      ]
    }
-    const newData = [...data,taskObj];
+    const newData = [...dataSource,taskObj];
-    this.props.onChange(newData);
+    this.setState({
+      dataSource:newData
+    },()=>{this.props.onChange(newData);})
  }
  handleRenameTaskName = (e,record) => {
    const { value } = e.target;
-    const { data } = this.props;
+    const { dataSource } = this.state;
    record.taskName = value;
-    this.props.onChange(data);
+    this.setState({
+      dataSource,
+    },()=>{this.props.onChange(dataSource);})
  }
  handleTaskNameBlur = (e,record)=>{
    const { value } = e.target;
-    const {data}= this.props; 
+    const { dataSource }= this.state; 
    if(value){
      record.type="text";
-      this.props.onChange(data);
+      this.setState({
+        dataSource,
+      },()=>{this.props.onChange(dataSource);})
    } 
  }
  handleRenameCourseName = (e,record) => {
    const { value } = e.target;
-    const { data } = this.props;
+    const { dataSource } = this.state;
    record.courseName = value;
-    this.props.onChange(data);
+    this.setState({
+      dataSource,
+    },()=>{this.props.onChange(dataSource);})
  }
  handleCourseNameBlur = (e,record)=>{
    const { value } = e.target;
-    const { data }= this.props;
+    const { dataSource }= this.state;
    if(value){
      record.type="text";
-      this.setState({data});
+      this.setState({
+        dataSource,
+      },()=>{this.props.onChange(dataSource);})
    } 
  }
  handleDeleteTask = (index)=>{
-    const {data}= this.props;
+    const {dataSource}= this.state;
-    const newData=[...data];
+    const newData=[...dataSource];
    newData.splice(index,1);
-    this.props.onChange(newData);
+    this.setState({
+      dataSource:newData,
+    },()=>{this.props.onChange(newData);})
  }
  handleDeleteCourse = (parentIndex,index)=>{
-    const {data}= this.props;
+    const {dataSource}= this.state;
-    const newData=[...data];
+    const newData=[...dataSource];
    const selectData = [...newData[parentIndex].courseList]
    selectData.splice(index,1)
    newData[parentIndex].courseList= selectData;
-    this.props.onChange(newData);
+    this.setState({
+      dataSource:newData,
+    },()=>{this.props.onChange(newData);})
  }
  showRelatedCourseModal = (index)=>{
@@ -245,13 +271,14 @@ class TrainingTask extends React.Component {
  }
  confirmSelectCourse = (selectList) =>{
    const {selectedTaskIndex}= this.state;
-    const { data } = this.props
+    const { dataSource } = this.state
-    const newData=[...data];
+    const newData=[...dataSource];
    const selectData = [...newData[selectedTaskIndex].courseList]
    const _selectData =[...selectData,...selectList];
    newData[selectedTaskIndex].courseList= _selectData;
    this.setState({
      relatedCourseModalVisible:false,
+      dataSource:newData,
    },()=>{
      this.props.onChange(newData);
    })
@@ -259,12 +286,15 @@ class TrainingTask extends React.Component {
  render() {
    const { dataSource,selectedTaskIndex,relatedCourseModalVisible} = this.state;
+    console.log("dataSource",dataSource);
    const { data } = this.props;
    return (
      <div  className="training-task">
        <Table
          pagination={false}
-          dataSource={data}
+          dataSource={dataSource}
          columns={this.parseTaskColumns()}
          rowKey="index"
          expandedRowRender={(record,index) => {
@@ -274,7 +304,7 @@ class TrainingTask extends React.Component {
                          pagination={false}
                          dataSource={record.courseList}
                          columns={this.parseCoursecolumns(index)}
-                          rowKey="index"
+                          // rowKey="index"
                          // components={{
                          //   body: {
                          //     wrapper: this.DraggableContainer,
@@ -287,20 +317,19 @@ class TrainingTask extends React.Component {
            }else{
              return <div><Button onClick={()=>{this.showRelatedCourseModal(index)}}><span>+</span><span>关联课程</span></Button></div>;
            }
          }}
-          // components={{
+          components={{
-          //   body: {
+            body: {
-          //     wrapper: this.DraggableContainer,
+              wrapper: this.DraggableContainer,
-          //     row: this.DraggableBodyRow,
+              row: this.DraggableBodyRow,
-          //   },
+            },
-          // }}
+          }}
        />
        <div><Button onClick={()=>this.addTask()}><span>+</span><span>添加任务</span></Button></div>
        { relatedCourseModalVisible &&
          <RelatedCourseModal
            selectedTaskIndex={selectedTaskIndex}
-            data={data}
+            data={dataSource}
            visible={relatedCourseModalVisible}
            onClose={this.closeRelatedCourseModal}
            onSelect={this.confirmSelectCourse}