Skip to content

X
xiaomai-cloud-class-web
Commit 042c9ae5 by zhangleyuan
Options

feat:处理学习状态的筛选

parent 56790ad0
Showing with 42 additions and 206 deletions
src/modules/plan-manage/LearningData.jsx
...@@ -23,7 +23,8 @@ class LearningData extends React.Component { ...@@ -23,7 +23,8 @@ class LearningData extends React.Component {
courseNum:0, courseNum:0,
created:"", created:"",
cultureCustomerNum:0, cultureCustomerNum:0,
activeKey:"employeeShareData" activeKey:"employeeShareData",
createName:""
} }
} }
componentDidMount(){ componentDidMount(){
...@@ -41,7 +42,8 @@ class LearningData extends React.Component { ...@@ -41,7 +42,8 @@ class LearningData extends React.Component {
courseMediaVOS, courseMediaVOS,
courseNum, courseNum,
created, created,
cultureCustomerNum cultureCustomerNum,
createName
} = res.result; } = res.result;
let coverUrl; let coverUrl;
courseMediaVOS.map((item) => { courseMediaVOS.map((item) => {
...@@ -55,12 +57,13 @@ class LearningData extends React.Component { ...@@ -55,12 +57,13 @@ class LearningData extends React.Component {
coverUrl: coverUrl || defaultCover, coverUrl: coverUrl || defaultCover,
courseNum, courseNum,
created, created,
cultureCustomerNum cultureCustomerNum,
createName
}) })
}) })
} }
render() { render() {
const {planName,coverUrl,courseNum,created,cultureCustomerNum,activeKey} = this.state; const {planName,coverUrl,courseNum,created,cultureCustomerNum,activeKey,createName} = this.state;
return ( return (
<div className="page plan-learn-data-list"> <div className="page plan-learn-data-list">
<Breadcrumbs <Breadcrumbs
...@@ -79,7 +82,7 @@ class LearningData extends React.Component { ...@@ -79,7 +82,7 @@ class LearningData extends React.Component {
{planName} {planName}
</div> </div>
<div className="create-course"> <div className="create-course">
<span className="createUser">创建人：张老师</span> <span className="createUser">创建人：{createName}</span>
<span className="split">|</span> <span className="split">|</span>
<span className="course-total">课程总数量：{courseNum}</span> <span className="course-total">课程总数量：{courseNum}</span>
</div> </div>
......
src/modules/plan-manage/components/TrainingTask.jsx
...@@ -2,7 +2,7 @@ ...@@ -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-10 10:35:50 * @LastEditTime: 2021-03-11 14:02:25
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -48,8 +48,6 @@ const DragHandle = sortableHandle(() => ( ...@@ -48,8 +48,6 @@ const DragHandle = sortableHandle(() => (
</span> </span>
)); ));
const SortableItem = sortableElement(props => <tr {...props}/>);
const SortableContainer = sortableContainer(props => <tbody {...props} />);
const SortableTaskItem = sortableElement(props => <div {...props}>{props.taskItem}</div>) const SortableTaskItem = sortableElement(props => <div {...props}>{props.taskItem}</div>)
...@@ -68,148 +66,16 @@ class TrainingTask extends React.Component { ...@@ -68,148 +66,16 @@ class TrainingTask extends React.Component {
}; };
} }
componentWillMount(){ componentWillMount(){
// if (this.props.data) {
// const newData = [...this.props.data];
// this.setState({
// dataSource:newData,
// })
// }
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
} }
parseTaskColumns = ()=>{
const columns = [
{
title: 'taskName',
dataIndex: 'taskName',
className: 'drag-visible',
render: (val, 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>{val}</span>
}
</div>
)
}
},
{
title: '操作',
key: 'operate',
dataIndex: 'operate',
width: '25%',
render: (val, record,index) => {
return (
<div className="operate">
<DragHandle />
<span className="operate__item">
<span className="icon iconfont">&#xe6f5;</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>
<span>删除</span>
</span>
</div>
)
}
}
];
return columns;
}
parseCoursecolumns = (parentIndex)=>{
const coursecolumns = [
{
title: 'courseName',
dataIndex: 'courseName',
className: 'drag-visible',
render: (val, record) => {
return (
<div>
{record.type==='input'?
<Form>
<Form.Item
validateTrigger={['onChange', 'onBlur']}
name={['courseName']}
rules={[
{
required: true,
message: "请输入课程名称",
},
]}>
<Input defaultValue={record.courseName} style={{ width: 300 }} placeholder="请输入任务名称（40字以内）" maxLength={40} onChange={(e) => { this.handleRenameCourseName(e,record)}} onBlur={(e)=>{this.handleCourseNameBlur(e,record)}}/></Form.Item>
</Form>
:
<span>{record.courseName}</span>
}
</div>
)
}
},
{
title: '操作',
key: 'operate',
dataIndex: 'operate',
width: '25%',
render: (val, record,index) => {
return (
<div className="operate">
<DragHandle />
<span className="operate__item">
<span className="icon iconfont">&#xe6f5;</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>
<span>删除</span>
</span>
</div>
)
}
}
];
return coursecolumns
}
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);
console.log("newData",newData)
this.setState({ dataSource: [...newData] });
}
};
onTaskSortEnd = ({ oldIndex, newIndex }) => { onTaskSortEnd = ({ oldIndex, newIndex }) => {
const { dataSource } = this.state; const { dataSource } = this.state;
console.log("oldIndex",oldIndex);
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);
...@@ -222,9 +88,6 @@ class TrainingTask extends React.Component { ...@@ -222,9 +88,6 @@ class TrainingTask extends React.Component {
const { dataSource } = this.state; const { dataSource } = this.state;
console.log("parentIndex",parentIndex);
console.log("dataSource",dataSource);
console.log("dataSource",dataSource[parentIndex].courseList);
const _dataSource = [...dataSource]; const _dataSource = [...dataSource];
if (oldIndex !== newIndex) { if (oldIndex !== newIndex) {
_dataSource[parentIndex].courseList = arrayMove([].concat(dataSource[parentIndex].courseList), oldIndex, newIndex).filter(el => !!el); _dataSource[parentIndex].courseList = arrayMove([].concat(dataSource[parentIndex].courseList), oldIndex, newIndex).filter(el => !!el);
...@@ -235,23 +98,6 @@ class TrainingTask extends React.Component { ...@@ -235,23 +98,6 @@ class TrainingTask extends React.Component {
}; };
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}/>;
};
addTask = () => { addTask = () => {
const { dataSource } = this.state; const { dataSource } = this.state;
const taskObj={ const taskObj={
...@@ -279,7 +125,8 @@ class TrainingTask extends React.Component { ...@@ -279,7 +125,8 @@ class TrainingTask extends React.Component {
handleTaskNameBlur = (e,record)=>{ handleTaskNameBlur = (e,record)=>{
const { value } = e.target; const { value } = e.target;
const { dataSource }= this.state; const { dataSource }= this.state;
if(value){ let input = /^[\s]*$/;
if(value && !input.test(value)){
record.type="text"; record.type="text";
this.setState({ this.setState({
dataSource, dataSource,
...@@ -299,12 +146,14 @@ class TrainingTask extends React.Component { ...@@ -299,12 +146,14 @@ class TrainingTask extends React.Component {
handleCourseNameBlur = (e,record)=>{ handleCourseNameBlur = (e,record)=>{
const { value } = e.target; const { value } = e.target;
const { dataSource }= this.state; const { dataSource }= this.state;
if(value){ let input = /^[\s]*$/;
if(value && !input.test(value)){
record.type="text"; record.type="text";
this.setState({ this.setState({
dataSource, dataSource,
},()=>{this.props.onChange(dataSource);}) },()=>{this.props.onChange(dataSource);})
} }
} }
handleDeleteTask = (index)=>{ handleDeleteTask = (index)=>{
return confirm({ return confirm({
...@@ -389,6 +238,20 @@ class TrainingTask extends React.Component { ...@@ -389,6 +238,20 @@ class TrainingTask extends React.Component {
dataSource:newData, dataSource:newData,
},()=>{this.props.onChange(newData);}) },()=>{this.props.onChange(newData);})
} }
handleValidatorTaskName = (rule,value)=>{
let input = /^[\s]*$/;
if (input.test(value) || !value){
return Promise.reject(new Error('请输入任务名称'))
}
return Promise.resolve()
}
handleValidatorCourseName = (rule,value)=>{
let input = /^[\s]*$/;
if (input.test(value) || !value){
return Promise.reject(new Error('请输入课程名称'))
}
return Promise.resolve()
}
renderTaskItem = (record,index)=>{ renderTaskItem = (record,index)=>{
return <div className="task-item"> return <div className="task-item">
<div className="task-con"> <div className="task-con">
...@@ -408,9 +271,8 @@ class TrainingTask extends React.Component { ...@@ -408,9 +271,8 @@ class TrainingTask extends React.Component {
name={['taskName']} name={['taskName']}
rules={[ rules={[
{ {
required: true, validator:(rule,value)=>this.handleValidatorTaskName(rule,value)
message: "请输入任务名称", }
},
]}> ]}>
<Input className="task-name-input" defaultValue={record.taskName} style={{ width: 300 }} placeholder="请输入任务名称（20字以内）" maxLength={20} onChange={(e) => { this.handleRenameTaskName(e,record)}} onBlur={(e)=>{this.handleTaskNameBlur(e,record)}}/> <Input className="task-name-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.Item>
...@@ -471,11 +333,10 @@ class TrainingTask extends React.Component { ...@@ -471,11 +333,10 @@ class TrainingTask extends React.Component {
name={['courseName']} name={['courseName']}
rules={[ rules={[
{ {
required: true, validator:(rule,value)=>this.handleValidatorCourseName(rule,value)
message: "请输入课程名称", }
},
]}> ]}>
<Input className="course-name-input" defaultValue={record.courseName} style={{ width: 300 }} placeholder="请输入任务名称（40字以内）" maxLength={40} onChange={(e) => { this.handleRenameCourseName(e,record)}} onBlur={(e)=>{this.handleCourseNameBlur(e,record)}}/></Form.Item> <Input className="course-name-input" defaultValue={record.courseName} style={{ width: 300 }} placeholder="请输入课程名称（40字以内）" maxLength={40} onChange={(e) => { this.handleRenameCourseName(e,record)}} onBlur={(e)=>{this.handleCourseNameBlur(e,record)}}/></Form.Item>
</Form> </Form>
: :
<span className="course-name">{parentIndex + 1}.{index + 1}{record.courseName}</span> <span className="course-name">{parentIndex + 1}.{index + 1}{record.courseName}</span>
...@@ -507,40 +368,6 @@ class TrainingTask extends React.Component { ...@@ -507,40 +368,6 @@ class TrainingTask extends React.Component {
const { data } = this.props; const { data } = this.props;
return ( return (
<div className="training-task"> <div className="training-task">
{/* <Table
pagination={false}
dataSource={dataSource}
columns={this.parseTaskColumns()}
rowKey="index"
expandedRowRender={(record,index) => {
if (record.courseList.length !== 0 ){
return <div>
<Table
pagination={false}
dataSource={record.courseList}
columns={this.parseCoursecolumns(index)}
// rowKey="index"
// components={{
// body: {
// wrapper: this.DraggableContainer,
// row: this.DraggableBodyRow,
// },
// }}
/>
<div><Button onClick={()=>{this.showRelatedCourseModal(index)}}><span>+</span><span>关联课程</span></Button></div>
</div>
}else{
return <div><Button onClick={()=>{this.showRelatedCourseModal(index)}}><span>+</span><span>关联课程</span></Button></div>;
}
}}
components={{
body: {
wrapper: this.DraggableContainer,
row: this.DraggableBodyRow,
},
}}
/> */}
<SortableTaskContainer <SortableTaskContainer
useDragHandle useDragHandle
disableAutoscroll disableAutoscroll
......
src/modules/plan-manage/components/UserLearningDataFilter.jsx
...@@ -190,6 +190,7 @@ function UserLearningDataFilter(props) { ...@@ -190,6 +190,7 @@ function UserLearningDataFilter(props) {
onChange={(value) => { handleChangeQuery('learnState', value) }} onChange={(value) => { handleChangeQuery('learnState', value) }}
suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>} suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>}
> >
<Option value="UN_PLAY">未开始</Option>
<Option value="UNDER_WAY">进行中</Option> <Option value="UNDER_WAY">进行中</Option>
<Option value="FINISH">已完成</Option> <Option value="FINISH">已完成</Option>
</Select> </Select>
......
src/modules/plan-manage/modal/relatedCourseModal.jsx
...@@ -405,7 +405,9 @@ class SelectOperatorModal extends React.Component { ...@@ -405,7 +405,9 @@ class SelectOperatorModal extends React.Component {
} }
if(_list.length + currentTaskCourseData.length + selectLive.length> 20){ if(_list.length + currentTaskCourseData.length + selectLive.length> 20){
message.warning('无法继续选择，一个任务最多关联20个课程'); message.warning('无法继续选择，一个任务最多关联20个课程');
return; console.log('1111');
const extraLength = (_list.length + currentTaskCourseData.length + selectLive.length) -20;
_list.splice(_list.length - extraLength,extraLength);
} }
this.setState({selectVideo:_list}); this.setState({selectVideo:_list});
}, },
...@@ -469,7 +471,10 @@ class SelectOperatorModal extends React.Component { ...@@ -469,7 +471,10 @@ class SelectOperatorModal extends React.Component {
} }
if(_list.length + currentTaskCourseData.length + selectVideo.length> 20){ if(_list.length + currentTaskCourseData.length + selectVideo.length> 20){
message.warning('无法继续选择，一个任务最多关联20个课程'); message.warning('无法继续选择，一个任务最多关联20个课程');
return; const extraLength = (_list.length + currentTaskCourseData.length + selectVideo.length) -20;
_list.splice(_list.length - extraLength,extraLength);
console.log('_list',_list);
} }
this.setState({selectLive:_list}); this.setState({selectLive:_list});
}, },
......
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