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-family: 'iconfont'; /* project id 2223403 */
src: url('//at.alicdn.com/t/font_2223403_x34sbltible.eot');
src: url('//at.alicdn.com/t/font_2223403_x34sbltible.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2223403_x34sbltible.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2223403_x34sbltible.woff') format('woff'),
url('//at.alicdn.com/t/font_2223403_x34sbltible.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2223403_x34sbltible.svg#iconfont') format('svg');
src: url('//at.alicdn.com/t/font_2223403_fad4h32dwuo.eot');
src: url('//at.alicdn.com/t/font_2223403_fad4h32dwuo.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2223403_fad4h32dwuo.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2223403_fad4h32dwuo.woff') format('woff'),
url('//at.alicdn.com/t/font_2223403_fad4h32dwuo.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2223403_fad4h32dwuo.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
......
src/h5.html
......@@ -2,7 +2,7 @@
* @Author: 吴文洁
* @Date: 2020-08-24 12:20:57
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-22 18:09:57
* @LastEditTime: 2021-02-24 15:31:49
* @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有
-->
......@@ -25,7 +25,7 @@
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="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.
......
src/index.html
......@@ -2,7 +2,7 @@
* @Author: 吴文洁
* @Date: 2020-08-24 12:20:57
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-22 18:10:04
* @LastEditTime: 2021-02-24 15:31:42
* @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有
-->
......@@ -25,7 +25,7 @@
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="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.
......
src/modules/plan-manage/components/TrainingTask.jsx
......@@ -2,128 +2,306 @@
* @Author: zhangleyuan
* @Date: 2021-02-20 16:45:51
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-23 19:51:49
* @LastEditTime: 2021-02-24 19:53:39
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import { Table } from 'antd';
import { Table ,Button,Input,Form} from 'antd';
import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';
import { MenuOutlined } from '@ant-design/icons';
import arrayMove from 'array-move';
import { withRouter } from 'react-router-dom';
import './TrainingTask.less';
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 = [
{
key: '1',
name: '培训计划名称1',
age: 32,
address: 'New York No. 1 Lake Park',
index: 0,
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
}
]
},
{
key: '2',
name: '培训计划名称2',
age: 42,
address: 'London No. 1 Lake Park',
index: 1,
taskName: '培训计划名称B',
index:1,
type:'text',
courserList:[
{
courseName:'培训计划课程B-1',
index:0,
type:'text',
},
{
courseName:'培训计划课程B-2',
index:1,
type:'text',
}
]
},
{
key: '3',
name: '培训计划名称3',
age: 32,
address: 'Sidney No. 1 Lake Park',
index: 2,
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 {
state = {
dataSource: data,
};
class TrainingTask extends React.Component {
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;
if (oldIndex !== newIndex) {
const newData = arrayMove([].concat(dataSource), oldIndex, newIndex).filter(el => !!el);
console.log('Sorted items: ', newData);
this.setState({ dataSource: newData });
const taskObj={
taskName: '',
index:dataSource.length,
type:'input',
courserList:[
]
}
};
DraggableContainer = props => (
<SortableContainer
useDragHandle
disableAutoscroll
helperClass="row-dragging"
onSortEnd={this.onSortEnd}
{...props}
/>
);
const newData = [...dataSource,taskObj];
this.setState({ dataSource: newData });
}
handleRenameTaskName = (e,record) => {
const { value } = e.target;
const { index } = record;
const { dataSource } = this.state;
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;
// 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 index={index} {...restProps} />;
};
record.courseName = value;
}
handleCourseNameBlur = (e,record)=>{
const { value } = e.target;
const {dataSource}= this.state;
if(value){
record.type="text";
this.setState(dataSource);
}
}
render() {
const { dataSource } = this.state;
return (
<Table
pagination={false}
dataSource={dataSource}
columns={columns}
rowKey="index"
expandable={{
expandedRowRender: record => <Table
<div className="training-task">
<Table
pagination={false}
dataSource={dataSource}
columns={columns}
columns={this.parseTaskColumns()}
rowKey="index"
components={{
body: {
wrapper: this.DraggableContainer,
row: this.DraggableBodyRow,
},
expandedRowRender={(record) => {
if (record.courserList.length !== 0){
return <div>
<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: {
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>
</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