import React, { Component } from 'react'; import pathToRegexp from 'path-to-regexp'; import { connect } from 'dva'; import { routerRedux } from 'dva/router'; import { Form, Modal, Card, Button, Input, Switch } from 'antd'; import AXDragSortTable from '../../../components/AXDragSortTable'; import Selector from '../../../components/AXTableSelector/Selector'; import FooterToolbar from '../../../components/FooterToolbar'; import { renderStatus, statusToBool, boolToStatus } from '../../../utils/utils'; const fieldLabels = { code: '课编号', title: '课名称', digest: '课简述', status: '课状态', }; const formItemLayout = { labelCol: { xs: { span: 24 }, sm: { span: 2 }, }, wrapperCol: { xs: { span: 24 }, sm: { span: 14 }, md: { span: 12 }, }, }; @connect(({ loading, lesson, courseware }) => ({ lesson, courseware, loading: loading.models.courseware, submitting: loading.models.lesson, })) @Form.create() export default class LessonCreatePage extends Component { state = { modalSelectorDestroy: true, }; componentWillMount() { const match = pathToRegexp('/product/lesson/create').exec(this.props.location.pathname); if (match) { this.cleanPageState(); } } componentDidMount() { const matchId = this.isEdit(); if (matchId) { this.props.dispatch({ type: 'lesson/fetchLessonItem', payload: { id: matchId }, }); } } isEdit = () => { const { location } = this.props; const match = pathToRegexp('/product/lesson/edit/:id').exec(location.pathname); if (match) { return match[1]; } return false; }; cleanPageState = () => { this.props.dispatch({ type: 'lesson/cleanItemState', payload: {}, }); }; selectorDataFetcher = (params) => { this.props.dispatch({ type: 'courseware/fetchCoursewareList', payload: params, }); }; handleSelectorModalShow = () => { this.setState({ modalSelectorDestroy: false, }); this.selectorDataFetcher(); }; handleSelectorCancel = () => { this.setState({ modalSelectorDestroy: true, }); }; handleSelectorFinish = (rows) => { this.setState({ modalSelectorDestroy: true, }); this.props.dispatch({ type: 'lesson/fixCoursewareList', payload: rows, }); }; handleSelectorChange = (params) => { this.selectorDataFetcher(params); }; handleDragSortTableChange = (rows) => { this.props.dispatch({ type: 'lesson/fixCoursewareList', payload: rows, }); }; handlePageBack = () => { this.props.dispatch(routerRedux.push({ pathname: '/product/lesson/list', state: this.props.location.state, })); }; handlePageSubmit = (e) => { e.preventDefault(); this.props.form.validateFieldsAndScroll((err, values) => { if (!err) { // 从表单中提取相关字段 const { status, ...rest } = values; const newVals = { status: boolToStatus(status), ...rest }; const { lesson } = this.props; const { currentItem } = lesson; const { wareList } = currentItem; // 提取wareIdList let wareIdList; if (wareList) { wareIdList = wareList.map(item => item.id); } const matchId = this.isEdit(); if (matchId) { const params = { id: matchId, wareList: wareIdList, ...newVals, }; this.props.dispatch({ type: 'lesson/updateLessonItem', payload: params, states: this.props.location.state, }); } else { const params = { wareList: wareIdList, ...newVals, }; this.props.dispatch({ type: 'lesson/createLessonItem', payload: params, states: this.props.location.state, }); } } }); }; render() { const { submitting, lesson, form, loading, courseware } = this.props; const { list, pageSize, pageNo, totalSize } = courseware; const { modalSelectorDestroy } = this.state; const { getFieldDecorator } = form; const { currentItem } = lesson; const { code, title, digest, status, wareList = [] } = currentItem; const coursewareColumns = [{ title: '编号', dataIndex: 'code', key: 1, width: '20%', render: (text, record) => ( {text} ), }, { title: '名称', dataIndex: 'title', key: 2, width: '30%', render: (text, record) => ( {text} ), }, { title: '状态', dataIndex: 'status', key: 3, render: text => renderStatus(text), }]; const renderCardName = () => { return ( ); }; return (