Skip to content

X
xiaomai-cloud-class-web
Commit 1aff56d2 by zhangleyuan
Options

feat:处理重命名问题

parent 7c14f866
Showing with 95 additions and 61 deletions
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;
......
src/modules/plan-manage/AddPlan.jsx
......@@ -212,7 +212,12 @@ function AddPlan() {
</div>
<div className="basic-info__wrap">
<div className="title">培训任务</div>
{ (type==='edit' && taskList.length>0) &&
<TrainingTask data={taskList} onChange={handleChangeTaskInfo} />
}
{ type==='add' &&
<TrainingTask data={taskList} onChange={handleChangeTaskInfo} />
}
</div>
</div>
</div>
......
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 = [
{
......@@ -65,7 +73,6 @@ 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 }) => {
// 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 });
// }
// };
onSortEnd = ({ 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 });
}
};
// DraggableContainer = props => (
// <SortableContainer
// useDragHandle
// disableAutoscroll
// helperClass="row-dragging"
// onSortEnd={this.onSortEnd}
// {...props}
// />
// );
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 className={className} index={index} {...restProps} style={style}/>;
// };
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 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];
this.props.onChange(newData);
const newData = [...dataSource,taskObj];
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 newData=[...data];
const {dataSource}= this.state;
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 newData=[...data];
const {dataSource}= this.state;
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 newData=[...data];
const { dataSource } = this.state
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={{
// body: {
// wrapper: this.DraggableContainer,
// row: this.DraggableBodyRow,
// },
// }}
components={{
body: {
wrapper: this.DraggableContainer,
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}
......
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