Skip to content

X
xiaomai-cloud-class-web
Commit b033a851 by zhangleyuan
Options

feat:处理计划任务重命名

parent 5bcaa1b9
Showing with 258 additions and 75 deletions
src/common/less/icon-font.less
@font-face { @font-face {
font-family: 'iconfont'; /* project id 2223403 */ font-family: 'iconfont'; /* project id 2223403 */
src: url('//at.alicdn.com/t/font_2223403_x34sbltible.eot'); src: url('//at.alicdn.com/t/font_2223403_fad4h32dwuo.eot');
src: url('//at.alicdn.com/t/font_2223403_x34sbltible.eot?#iefix') format('embedded-opentype'), src: url('//at.alicdn.com/t/font_2223403_fad4h32dwuo.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2223403_x34sbltible.woff2') format('woff2'), url('//at.alicdn.com/t/font_2223403_fad4h32dwuo.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2223403_x34sbltible.woff') format('woff'), url('//at.alicdn.com/t/font_2223403_fad4h32dwuo.woff') format('woff'),
url('//at.alicdn.com/t/font_2223403_x34sbltible.ttf') format('truetype'), url('//at.alicdn.com/t/font_2223403_fad4h32dwuo.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2223403_x34sbltible.svg#iconfont') format('svg'); url('//at.alicdn.com/t/font_2223403_fad4h32dwuo.svg#iconfont') format('svg');
} }
.iconfont{ .iconfont{
font-family:"iconfont" !important; font-family:"iconfont" !important;
......
src/h5.html
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-24 12:20:57 * @Date: 2020-08-24 12:20:57
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-22 18:09:57 * @LastEditTime: 2021-02-24 15:31:49
* @Description: * @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
--> -->
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_xptlwibhqwb.css"> <link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_fad4h32dwuo.css">
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
......
src/index.html
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-24 12:20:57 * @Date: 2020-08-24 12:20:57
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-22 18:10:04 * @LastEditTime: 2021-02-24 15:31:42
* @Description: * @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
--> -->
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_xptlwibhqwb.css"> <link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_fad4h32dwuo.css">
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
......
src/modules/plan-manage/components/TrainingTask.jsx
...@@ -2,25 +2,116 @@ ...@@ -2,25 +2,116 @@
* @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-23 19:51:49 * @LastEditTime: 2021-02-24 19:53:39
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
import React from 'react'; import React from 'react';
import { Table } from 'antd'; import { Table ,Button,Input,Form} from 'antd';
import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc'; import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';
import { MenuOutlined } from '@ant-design/icons'; import { MenuOutlined } from '@ant-design/icons';
import arrayMove from 'array-move'; import arrayMove from 'array-move';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import './TrainingTask.less';
const DragHandle = sortableHandle(() => ( const DragHandle = sortableHandle(() => (
<MenuOutlined style={{ cursor: 'pointer', color: '#999' }} /> <span style={{ cursor: 'pointer', color: '#999' }} >
<span className="icon iconfont">&#xe7cd;</span>
<span>移动</span>
</span>
)); ));
const columns = [
const data = [
{
taskName: '培训计划名称A',
index:0,
type:'text',
courserList:[
{
courseName:'培训计划课程A-1',
type:'text',
index:0
},
{
courseName:'培训计划课程A-2',
type:'text',
index:1
},
{
courseName:'培训计划课程A-3',
type:'text',
index:2
}
]
},
{
taskName: '培训计划名称B',
index:1,
type:'text',
courserList:[
{
courseName:'培训计划课程B-1',
index:0,
type:'text',
},
{ {
title: 'Name', courseName:'培训计划课程B-2',
dataIndex: 'name', index:1,
type:'text',
}
]
},
{
taskName: '培训计划名称C',
index:2,
type:'text',
courserList:[
{
courseName:'培训计划课程c-1',
index:0,
type:'text'
}
]
},
];
const SortableItem = sortableElement(props => <tr {...props} />);
const SortableContainer = sortableContainer(props => <tbody {...props} />);
class TrainingTask extends React.Component {
constructor(props) {
super(props);
this.state = {
dataSource: data,
};
}
parseTaskColumns = ()=>{
const columns = [
{
title: 'taskName',
dataIndex: 'taskName',
className: 'drag-visible', className: 'drag-visible',
render: (val, record) => {
return (
<div>
{record.type==='text'?
<span>{val}</span>
:
<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>}
</div>
)
}
}, },
{ {
title: '操作', title: '操作',
...@@ -31,83 +122,162 @@ const columns = [ ...@@ -31,83 +122,162 @@ const columns = [
return ( return (
<div className="operate"> <div className="operate">
<DragHandle /> <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">
<span className="icon iconfont">&#xe6f6;</span>
<span>删除</span>
</span>
</div> </div>
) )
} }
} }
]; ];
return columns;
const data = [ }
parseCoursecolumns = ()=>{
const coursecolumns = [
{ {
key: '1', title: 'courseName',
name: '培训计划名称1', dataIndex: 'courseName',
age: 32, className: 'drag-visible',
address: 'New York No. 1 Lake Park', render: (val, record) => {
index: 0, return (
}, <div>
{record.type==='text'?
<span>{val}</span>
:
<Form>
<Form.Item
validateTrigger={['onChange', 'onBlur']}
name={['courseName']}
rules={[
{ {
key: '2', required: true,
name: '培训计划名称2', message: "请输入课程名称",
age: 42,
address: 'London No. 1 Lake Park',
index: 1,
}, },
{ ]}>
key: '3', <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>
name: '培训计划名称3', </Form>}
age: 32, </div>
address: 'Sidney No. 1 Lake Park', )
index: 2, }
}, },
]; {
title: '操作',
key: 'operate',
dataIndex: 'operate',
width: '25%',
render: (val, record) => {
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">
<span className="icon iconfont">&#xe6f6;</span>
<span>删除</span>
</span>
</div>
)
}
}
];
return coursecolumns
}
const SortableItem = sortableElement(props => <tr {...props} />); // onSortEnd = ({ oldIndex, newIndex }) => {
const SortableContainer = sortableContainer(props => <tbody {...props} />); // 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 });
// }
// };
class TrainingTask extends React.Component { // DraggableContainer = props => (
state = { // <SortableContainer
dataSource: data, // 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}/>;
// };
onSortEnd = ({ oldIndex, newIndex }) => { addTask = () => {
const { dataSource } = this.state; const { dataSource } = this.state;
if (oldIndex !== newIndex) { const taskObj={
const newData = arrayMove([].concat(dataSource), oldIndex, newIndex).filter(el => !!el); taskName: '',
console.log('Sorted items: ', newData); index:dataSource.length,
type:'input',
courserList:[
]
}
const newData = [...dataSource,taskObj];
this.setState({ dataSource: newData }); this.setState({ dataSource: newData });
} }
};
DraggableContainer = props => ( handleRenameTaskName = (e,record) => {
<SortableContainer const { value } = e.target;
useDragHandle const { index } = record;
disableAutoscroll const { dataSource } = this.state;
helperClass="row-dragging" record.taskName = value;
onSortEnd={this.onSortEnd} }
{...props} handleTaskNameBlur = (e,record)=>{
/> const { value } = e.target;
); const {dataSource}= this.state;
if(value){
record.type="text";
this.setState(dataSource);
}
}
DraggableBodyRow = ({ className, style, ...restProps }) => { handleRenameCourseName = (e,record) => {
const { value } = e.target;
const { index } = record;
const { dataSource } = this.state; const { dataSource } = this.state;
// function findIndex base on Table rowKey props and should always be a right array index record.courseName = value;
const index = dataSource.findIndex(x => x.index === restProps['data-row-key']); }
return <SortableItem index={index} {...restProps} />;
}; handleCourseNameBlur = (e,record)=>{
const { value } = e.target;
const {dataSource}= this.state;
if(value){
record.type="text";
this.setState(dataSource);
}
}
render() { render() {
const { dataSource } = this.state; const { dataSource } = this.state;
return ( return (
<div className="training-task">
<Table <Table
pagination={false} pagination={false}
dataSource={dataSource} dataSource={dataSource}
columns={columns} columns={this.parseTaskColumns()}
rowKey="index" rowKey="index"
expandable={{ expandedRowRender={(record) => {
expandedRowRender: record => <Table if (record.courserList.length !== 0){
return <div>
<Table
pagination={false} pagination={false}
dataSource={dataSource} dataSource={record.courserList}
columns={columns} columns={this.parseCoursecolumns()}
rowKey="index" rowKey="index"
components={{ components={{
body: { body: {
...@@ -115,15 +285,23 @@ class TrainingTask extends React.Component { ...@@ -115,15 +285,23 @@ class TrainingTask extends React.Component {
row: this.DraggableBodyRow, row: this.DraggableBodyRow,
}, },
}} }}
/>, />
}} <div><Button><span>+</span><span>关联课程</span></Button></div>
components={{ </div>
body: { }else{
wrapper: this.DraggableContainer, return <div><Button><span>+</span><span>关联课程</span></Button></div>;
row: this.DraggableBodyRow, }
},
}} }}
// components={{
// body: {
// wrapper: this.DraggableContainer,
// row: this.DraggableBodyRow,
// },
// }}
/> />
<div><Button onClick={()=>this.addTask()}><span>+</span><span>添加任务</span></Button></div>
</div>
); );
} }
} }
......
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