import React, { Component } from 'react'; import pathToRegexp from 'path-to-regexp'; import { connect } from 'dva'; import { routerRedux } from 'dva/router'; import { message, Form, Modal, Card, Button, Input, InputNumber, Table, Switch, Select, Radio } from 'antd'; import { renderProductType, statusToBool, boolToStatus, addRowKey } from '../../../utils/utils'; import Selector from '../../../components/AXTableSelector/Selector'; import FooterToolbar from '../../../components/FooterToolbar/index'; import styles from './PackageCreate.less'; const Message = message; const fieldLabels = { code: '套餐包编号', name: '套餐包名称', status: '套餐包状态', }; const formItemLayout = { labelCol: { xs: { span: 24 }, sm: { span: 3 }, }, wrapperCol: { xs: { span: 24 }, sm: { span: 14 }, md: { span: 12 }, }, }; @connect(({loading, product}) => ({ product, pLoading: loading.models.product, })) @Form.create() export default class PackageCreatePage extends Component { state = { productType: 'Course', selectorModalDestroy: true, }; componentWillMount() { const match = pathToRegexp('/product/package/create').exec(this.props.location.pathname); if (match) { this.cleanPageState(); } } componentDidMount() { const matchId = this.isEdit(); if (matchId) { this.props.dispatch({ type: 'product/fetchProductItem', payload: { pid: matchId }, }); } } isEdit = () => { const { location } = this.props; const match = pathToRegexp('/product/package/edit/:id').exec(location.pathname); if (match) { return match[1]; } return false; } cleanPageState = () => { this.props.dispatch({ type: 'product/cleanItemState', payload: {}, }); } selectorDataFetcher = (name, params) => { switch (name) { case 'Course': this.props.dispatch({ type: 'product/fetchCourseList', payload: params, }); return; case 'Support': this.props.dispatch({ type: 'product/fetchSupportList', payload: params, }); return; } } handleRadioChange = (e) => { this.setState({ productType: e.target.value, }); this.selectorDataFetcher(e.target.value); } handleSelectorModalShow = () => { this.setState({ selectorModalDestroy: false, }); this.selectorDataFetcher(this.state.productType); } handleSelectorChange = (params) => { this.selectorDataFetcher( this.state.productType, params ); } handleSelectorFinish = (rows) => { this.setState({ selectorModalDestroy: true, }); this.props.dispatch({ type: 'product/fixCurrentItem', payload: { products: rows, }, }); } handleSelectorCancel = () => { this.setState({ selectorModalDestroy: true, }); } handleDragSortTableChange = (rows) => { this.props.dispatch({ type: 'product/fixCurrentItem', payload: { products: rows }, }); } handlePriceInputChange = (field, key, value) => { const { product } = this.props; const { currentItem } = product; const { products = [] } = currentItem; let newData =[...products] newData = newData.map(item => { if (item.id === key) { return { ...item, [`${field}Price`]: value, }; } else { return {...item}; } }); this.props.dispatch({ type: 'product/fixCurrentItem', payload: { products: newData } }); } handlePageBack = () => { this.props.dispatch(routerRedux.push({ pathname: '/product/package', 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 }; // products字段处理 const { product } = this.props; const { currentItem } = product; const { products } = currentItem; let productList = []; let submittable = true; if (products) { for (let index in products) { let product = products[index]; if (!product.cpPrice || !product.merchantPrice) { Message.error('还有价格未填写!'); submittable = false; break; } productList.push({ pid: product.pid, type: product.type, cpPrice: product.cpPrice, merchantPrice: product.merchantPrice, }); } } // 参数未正确填写不可提交 if (!submittable) { return; } const matchId = this.isEdit(); if (matchId) { const params = { id: matchId, products: productList, ...values, }; this.props.dispatch({ type: 'product/updatePackageItem', payload: params, states: this.props.location.state, }); } else { const params = { products: productList, ...values, }; this.props.dispatch({ type: 'product/createPackageItem', payload: params, states: this.props.location.state, }); } } }); } render() { const { form, pLoading, product } = this.props; const { selectorModalDestroy, productType } = this.state; const { currentItem } = product; const { code, name, status, products = [] } = currentItem; const { getFieldDecorator } = form; const productColumns = [{ title: '序号', dataIndex: 'index', key: 0, align: 'center', render: (text, record, index) => index + 1, width: 50, }, { title: '产品编号', dataIndex: 'code', key: 1, width: '22%', }, { title: '产品名称', dataIndex: 'name', key: 2, }, { title: '产品类型', dataIndex: 'type', key: 3, align: 'center', render: (text) => renderProductType(text), width: '10%', }, { title: '供应商价格(¥)', dataIndex: 'cpPrice', key: 4, align: 'center', render: (text, record) => ( this.handlePriceInputChange('cp', record.key, value)} /> ), width: '15%', }, { title: '平台方价格(¥)', dataIndex: 'merchantPrice', key: 5, align: 'center', render: (text, record) => ( this.handlePriceInputChange('merchant', record.key, value)} /> ), width: '15%', }]; const renderCardName = () => { return (
课程配套
); } const renderModalTitle = () => { return ( 课程 配套 ); } const getProductModal = () => { return ( ); } return (
{/* 基础信息Card */}
{getFieldDecorator('code', { rules: [ { required: true, message: '请填写套餐包编号', }, { pattern: /^[a-zA-Z0-9|-]+$/g, message: '编号包含非法字符', } ], initialValue: code, })( )} {getFieldDecorator('name', { rules: [{ required: true, message: '请填写套餐包名称' }], initialValue: name, })( )} {getFieldDecorator('status', { valuePropName: 'checked', initialValue: statusToBool(status), })( )}
{!selectorModalDestroy && getProductModal()} ); } }