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, Radio, Switch } from 'antd'; import RBVideoPlayer from '../../../components/RBVideoPlayer/index'; import RBDragSortTable from '../../../components/RBDragSortTable/index'; import Selector from '../../../components/RBTableSelector/Selector'; import FooterToolbar from '../../../components/FooterToolbar/index'; import { RESOURCE_VIDEO } from '../../../utils/config'; import { genAbsolutePicUrl, renderStatus, statusToBool, boolToStatus, } from '../../../utils/utils'; import styles from './CoursewareCreate.less'; const fieldLabels = { code: '课件编号', title: '课件名称', category: '环节名称', digest: '课件简述', resourceList: '资源列表', status: '课件状态', }; const formItemLayout = { labelCol: { xs: { span: 24 }, sm: { span: 2 }, }, wrapperCol: { xs: { span: 24 }, sm: { span: 14 }, md: { span: 12 }, }, }; @connect(({ loading, courseware, resource }) => ({ resource, courseware, loading: loading.models.resource, submitting: loading.models.courseware, })) @Form.create() export default class CoursewareCreatePage extends Component { state = { modalSelectorDestroy: true, resourceType: 'Picture', }; componentWillMount() { // 进入页面前清空下model中state内容,防止上次内容造成干扰 const match = pathToRegexp('/product/courseware/create').exec(this.props.location.pathname); if (match) { this.cleanPageState(); } } componentDidMount() { // 组件挂载完成,检查是否是编辑操作,决定是否加载该课件数据 const matchId = this.isEdit(); if (matchId) { this.props.dispatch({ type: 'courseware/fetchCoursewareItem', payload: { id: matchId }, }); } } isEdit = () => { const { location } = this.props; const match = pathToRegexp('/product/courseware/edit/:id').exec(location.pathname); if (match) { return match[1]; } return false; } cleanPageState = () => { this.props.dispatch({ type: 'courseware/cleanItemState', payload: {}, }); } selectorDataFetcher = (params) => { const { resourceType } = this.state; if (resourceType === 'Picture') { this.props.dispatch({ type: 'resource/fetchImageList', payload: params, }); } if (resourceType === 'Video') { this.props.dispatch({ type: 'resource/fetchVideoList', payload: params, }); } } handleSelectorModalShow = () => { this.setState({ modalSelectorDestroy: false, }); this.selectorDataFetcher(); } handleSelectorCancel = () => { this.setState({ modalSelectorDestroy: true, }); } handleSelectorFinish = (rows) => { this.setState({ modalSelectorDestroy: true, }); this.props.dispatch({ type: 'courseware/fixResourceList', payload: rows, }); } handleSelectorChange = (params) => { this.selectorDataFetcher(params); } handleRadioChange = (e) => { this.setState({ resourceType: e.target.value, }, () => this.selectorDataFetcher()); } handleDragSortTableChange = (rows) => { this.props.dispatch({ type: 'courseware/fixResourceList', payload: rows, }); } handlePageBack = () => { this.props.dispatch(routerRedux.push({ pathname: '/product/courseware', state: this.props.location.state, })); } handlePageSubmit = (e) => { e.preventDefault(); this.props.form.validateFieldsAndScroll((err, values) => { if (!err) { const { status, ...rest } = values; values = { status: boolToStatus(status), ...rest }; const { courseware } = this.props; const { currentItem } = courseware; const { resourceList } = currentItem; let resourceIdList; if (resourceIdList) { resourceIdList = resourceList.map(item => item.id); } const matchId = this.isEdit(); if (matchId) { const params = { id: matchId, resourceList: resourceIdList, ...values, }; this.props.dispatch({ type: 'courseware/updateCoursewareItem', payload: params, states: this.props.location.state, }); } else { const params = { resourceList: resourceIdList, ...values, }; this.props.dispatch({ type: 'courseware/createCoursewareItem', payload: params, states: this.props.location.state, }); } } }); } render() { const { submitting, courseware, form, loading, resource } = this.props; const { modalSelectorDestroy, resourceType } = this.state; const { getFieldDecorator } = form; const { currentItem } = courseware; const { code, title, digest, category, status, resourceList = [] } = currentItem; const imageColumns = [{ title: '图片', dataIndex: 'path', key: 1, render: text => (
), width: '10%', }, { title: '编号', dataIndex: 'code', key: 2, width: '20%', }, { title: '名称', dataIndex: 'name', key: 3, width: '30%', }, { title: '格式', dataIndex: 'format', key: 4, }, { title: '状态', dataIndex: 'status', key: 5, render: text => renderStatus(text), }]; const renderCardName = () => { return (
资源列表
); }; const renderModalTitle = () => { return ( 图片 视频 ); }; // 根据选定的资源列表类型决定渲染样式 const renderResourceList = () => { if (!resourceList.length) { return (

你还未选择任何资源,请点击上方"资源列表"进行选择!

); } else if (resourceList[0].type === RESOURCE_VIDEO) { const videoItem = resourceList[0]; return (
); } else { return ( ); } }; return (
{getFieldDecorator('code', { rules: [ { required: true, message: '请填写课件编号', }, { pattern: /^[a-zA-Z0-9|-]+$/g, message: '编号包含非法字符', }, ], initialValue: code, })( )} {getFieldDecorator('title', { rules: [{ required: true, message: '请填写课件名称' }], initialValue: title, })( )} {getFieldDecorator('category', { initialValue: category, })( )} {getFieldDecorator('digest', { initialValue: digest, })( )} {getFieldDecorator('status', { valuePropName: 'checked', initialValue: statusToBool(status), })( )}
{renderResourceList()} {!modalSelectorDestroy && ( )}
); } }