Skip to content

X
xiaomai-cloud-class-web
Commit 9ace828b by zhangleyuan
Options

Merge branch 'feature/zhangleyuan/20200220/training-program' into dev

parents 9aaa23ad 042c9ae5
Showing with 44 additions and 208 deletions
src/modules/plan-manage/LearningData.jsx
......@@ -23,7 +23,8 @@ class LearningData extends React.Component {
courseNum:0,
created:"",
cultureCustomerNum:0,
activeKey:"employeeShareData"
activeKey:"employeeShareData",
createName:""
}
}
componentDidMount(){
......@@ -41,7 +42,8 @@ class LearningData extends React.Component {
courseMediaVOS,
courseNum,
created,
cultureCustomerNum
cultureCustomerNum,
createName
} = res.result;
let coverUrl;
courseMediaVOS.map((item) => {
......@@ -55,12 +57,13 @@ class LearningData extends React.Component {
coverUrl: coverUrl || defaultCover,
courseNum,
created,
cultureCustomerNum
cultureCustomerNum,
createName
})
})
}
render() {
const {planName,coverUrl,courseNum,created,cultureCustomerNum,activeKey} = this.state;
const {planName,coverUrl,courseNum,created,cultureCustomerNum,activeKey,createName} = this.state;
return (
<div className="page plan-learn-data-list">
<Breadcrumbs
......@@ -79,7 +82,7 @@ class LearningData extends React.Component {
{planName}
</div>
<div className="create-course">
<span className="createUser">创建人：张老师</span>
<span className="createUser">创建人：{createName}</span>
<span className="split">|</span>
<span className="course-total">课程总数量：{courseNum}</span>
</div>
......
src/modules/plan-manage/components/TrainingTask.jsx
......@@ -2,7 +2,7 @@
* @Author: zhangleyuan
* @Date: 2021-02-20 16:45:51
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-10 10:35:50
* @LastEditTime: 2021-03-11 14:02:25
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -48,8 +48,6 @@ const DragHandle = sortableHandle(() => (
</span>
));
const SortableItem = sortableElement(props => <tr {...props}/>);
const SortableContainer = sortableContainer(props => <tbody {...props} />);
const SortableTaskItem = sortableElement(props => <div {...props}>{props.taskItem}</div>)
......@@ -68,148 +66,16 @@ class TrainingTask extends React.Component {
};
}
componentWillMount(){
// if (this.props.data) {
// const newData = [...this.props.data];
// this.setState({
// dataSource:newData,
// })
// }
}
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 }) => {
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);
......@@ -221,10 +87,7 @@ class TrainingTask extends React.Component {
onCourseSortEnd = ({ oldIndex, newIndex },parentIndex) => {
const { dataSource } = this.state;
console.log("parentIndex",parentIndex);
console.log("dataSource",dataSource);
console.log("dataSource",dataSource[parentIndex].courseList);
const _dataSource = [...dataSource];
if (oldIndex !== newIndex) {
_dataSource[parentIndex].courseList = arrayMove([].concat(dataSource[parentIndex].courseList), oldIndex, newIndex).filter(el => !!el);
......@@ -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 = () => {
const { dataSource } = this.state;
const taskObj={
......@@ -279,7 +125,8 @@ class TrainingTask extends React.Component {
handleTaskNameBlur = (e,record)=>{
const { value } = e.target;
const { dataSource }= this.state;
if(value){
let input = /^[\s]*$/;
if(value && !input.test(value)){
record.type="text";
this.setState({
dataSource,
......@@ -299,12 +146,14 @@ class TrainingTask extends React.Component {
handleCourseNameBlur = (e,record)=>{
const { value } = e.target;
const { dataSource }= this.state;
if(value){
let input = /^[\s]*$/;
if(value && !input.test(value)){
record.type="text";
this.setState({
dataSource,
},()=>{this.props.onChange(dataSource);})
}
}
handleDeleteTask = (index)=>{
return confirm({
......@@ -389,6 +238,20 @@ class TrainingTask extends React.Component {
dataSource: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)=>{
return <div className="task-item">
<div className="task-con">
......@@ -408,9 +271,8 @@ class TrainingTask extends React.Component {
name={['taskName']}
rules={[
{
required: true,
message: "请输入任务名称",
},
validator:(rule,value)=>this.handleValidatorTaskName(rule,value)
}
]}>
<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>
......@@ -471,11 +333,10 @@ class TrainingTask extends React.Component {
name={['courseName']}
rules={[
{
required: true,
message: "请输入课程名称",
},
validator:(rule,value)=>this.handleValidatorCourseName(rule,value)
}
]}>
<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>
:
<span className="course-name">{parentIndex + 1}.{index + 1}{record.courseName}</span>
......@@ -507,40 +368,6 @@ class TrainingTask extends React.Component {
const { data } = this.props;
return (
<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
useDragHandle
disableAutoscroll
......
src/modules/plan-manage/components/UserLearningDataFilter.jsx
......@@ -190,6 +190,7 @@ function UserLearningDataFilter(props) {
onChange={(value) => { handleChangeQuery('learnState', value) }}
suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>}
>
<Option value="UN_PLAY">未开始</Option>
<Option value="UNDER_WAY">进行中</Option>
<Option value="FINISH">已完成</Option>
</Select>
......
src/modules/plan-manage/modal/relatedCourseModal.jsx
......@@ -405,7 +405,9 @@ class SelectOperatorModal extends React.Component {
}
if(_list.length + currentTaskCourseData.length + selectLive.length> 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});
},
......@@ -469,7 +471,10 @@ class SelectOperatorModal extends React.Component {
}
if(_list.length + currentTaskCourseData.length + selectVideo.length> 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});
},
......
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