Skip to content

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

feat:处理计划任务重命名

parent 5bcaa1b9
Showing with 278 additions and 95 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,128 +2,306 @@ ...@@ -2,128 +2,306 @@
* @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 = [
{
title: 'Name',
dataIndex: 'name',
className: 'drag-visible',
},
{
title: '操作',
key: 'operate',
dataIndex: 'operate',
width: '25%',
render: (val, record) => {
return (
<div className="operate">
<DragHandle />
</div>
)
}
}
];
const data = [ const data = [
{ {
key: '1', taskName: '培训计划名称A',
name: '培训计划名称1', index:0,
age: 32, type:'text',
address: 'New York No. 1 Lake Park', courserList:[
index: 0, {
courseName:'培训计划课程A-1',
type:'text',
index:0
},
{
courseName:'培训计划课程A-2',
type:'text',
index:1
},
{
courseName:'培训计划课程A-3',
type:'text',
index:2
}
]
}, },
{ {
key: '2', taskName: '培训计划名称B',
name: '培训计划名称2', index:1,
age: 42, type:'text',
address: 'London No. 1 Lake Park', courserList:[
index: 1, {
courseName:'培训计划课程B-1',
index:0,
type:'text',
},
{
courseName:'培训计划课程B-2',
index:1,
type:'text',
}
]
}, },
{ {
key: '3', taskName: '培训计划名称C',
name: '培训计划名称3', index:2,
age: 32, type:'text',
address: 'Sidney No. 1 Lake Park', courserList:[
index: 2, {
courseName:'培训计划课程c-1',
index:0,
type:'text'
}
]
}, },
]; ];
const SortableItem = sortableElement(props => <tr {...props} />); const SortableItem = sortableElement(props => <tr {...props} />);
const SortableContainer = sortableContainer(props => <tbody {...props} />); const SortableContainer = sortableContainer(props => <tbody {...props} />);
class TrainingTask extends React.Component { class TrainingTask extends React.Component {
state = {
dataSource: data, constructor(props) {
}; super(props);
this.state = {
dataSource: data,
};
}
parseTaskColumns = ()=>{
const columns = [
{
title: 'taskName',
dataIndex: 'taskName',
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: '操作',
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 columns;
}
parseCoursecolumns = ()=>{
const coursecolumns = [
{
title: 'courseName',
dataIndex: 'courseName',
className: 'drag-visible',
render: (val, record) => {
return (
<div>
{record.type==='text'?
<span>{val}</span>
:
<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>}
</div>
)
}
},
{
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
}
// 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 }) => { // 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 { 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,
this.setState({ dataSource: newData }); type:'input',
courserList:[
]
} }
}; const newData = [...dataSource,taskObj];
this.setState({ dataSource: newData });
DraggableContainer = props => ( }
<SortableContainer
useDragHandle handleRenameTaskName = (e,record) => {
disableAutoscroll const { value } = e.target;
helperClass="row-dragging" const { index } = record;
onSortEnd={this.onSortEnd} const { dataSource } = this.state;
{...props} record.taskName = value;
/> }
); 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 (
<Table <div className="training-task">
pagination={false} <Table
dataSource={dataSource}
columns={columns}
rowKey="index"
expandable={{
expandedRowRender: record => <Table
pagination={false} pagination={false}
dataSource={dataSource} dataSource={dataSource}
columns={columns} columns={this.parseTaskColumns()}
rowKey="index" rowKey="index"
components={{ expandedRowRender={(record) => {
body: { if (record.courserList.length !== 0){
wrapper: this.DraggableContainer, return <div>
row: this.DraggableBodyRow, <Table
}, pagination={false}
dataSource={record.courserList}
columns={this.parseCoursecolumns()}
rowKey="index"
components={{
body: {
wrapper: this.DraggableContainer,
row: this.DraggableBodyRow,
},
}}
/>
<div><Button><span>+</span><span>关联课程</span></Button></div>
</div>
}else{
return <div><Button><span>+</span><span>关联课程</span></Button></div>;
}
}} }}
/>, // components={{
}} // body: {
components={{ // wrapper: this.DraggableContainer,
body: { // row: this.DraggableBodyRow,
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