Hotax/src/routes/Product/Package/PackageCreate.js

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) => (
        <InputNumber
          min={0}
          value={text}
          style={{width: '100%'}}
          onChange={(value) => this.handlePriceInputChange('cp', record.key, value)}
        />
      ),
      width: '15%',
    }, {
      title: '平台方价格(¥)',
      dataIndex: 'merchantPrice',
      key: 5,
      align: 'center',
      render: (text, record) => (
        <InputNumber
          min={0}
          value={text}
          style={{width: '100%'}}
          onChange={(value) => this.handlePriceInputChange('merchant', record.key, value)}
        />
      ),
      width: '15%',
    }];

    const renderCardName = () => {
      return (
        <div className={styles.cardName}>
          <span>
            <a onClick={this.handleSelectorModalShow}>课程配套</a>
          </span>
        </div>
      );
    }
    const renderModalTitle = () => {
      return (
        <Radio.Group
          value={productType}
          onChange={this.handleRadioChange}
          className={styles.radio}
        >
          <Radio.Button value="Course">课程</Radio.Button>
          <Radio.Button value="Support">配套</Radio.Button>
        </Radio.Group>
      );
    }

    const getProductModal = () => {
      return (
        <Modal
          visible
          width={1100}
          footer={null}
          title={renderModalTitle()}
          maskClosable={false}
          onCancel={this.handleSelectorCancel}
        >
          <Selector
            multiple
            loading={pLoading}
            selectorName={productType}
            fixedName="Product"
            list={product.list}
            pageNo={product.pageNo}
            pageSize={product.pageSize}
            totalSize={product.totalSize}
            onCancel={this.handleSelectorCancel}
            onChange={this.handleSelectorChange}
            onFinish={this.handleSelectorFinish}
          />
        </Modal>
      );
    }
    return (
      <div>
        {/* 基础信息Card */}
        <Card title="基础信息" style={{marginBottom: 16}}>
          <Form>
            <Form.Item hasFeedback label={fieldLabels.code} {...formItemLayout}>
              {getFieldDecorator('code', {
                rules: [
                  {
                    required: true, message: '请填写套餐包编号',
                  }, {
                    pattern: /^[a-zA-Z0-9|-]+$/g, message: '编号包含非法字符',
                  }
                ],
                initialValue: code,
              })(
                <Input
                  placeholder="请输入"
                  disabled={this.isEdit() ? true : false}
                />
              )}
            </Form.Item>
            <Form.Item hasFeedback label={fieldLabels.name} {...formItemLayout}>
              {getFieldDecorator('name', {
                rules: [{ required: true, message: '请填写套餐包名称' }],
                initialValue: name,
              })(
                <Input placeholder="请输入" />
              )}
            </Form.Item>
            <Form.Item label={fieldLabels.status} {...formItemLayout}>
              {getFieldDecorator('status', {
                valuePropName: 'checked',
                initialValue: statusToBool(status),
              })(
                <Switch
                  checkedChildren="正常"
                  unCheckedChildren="删除"
                />
              )}
            </Form.Item>
          </Form>
        </Card>
        <Card title={renderCardName()} style={{marginBottom: 70}}>
          <Table
            bordered
            pagination={false}
            className={styles.table}
            dataSource={addRowKey(products)}
            columns={productColumns}
          />
          {!selectorModalDestroy && getProductModal()}
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button
            onClick={this.handlePageBack}
            style={{ marginRight: 10 }}
          >取消
          </Button>
          <Button
            type="primary"
            onClick={this.handlePageSubmit}
          >提交
          </Button>
        </FooterToolbar>
      </div>
    );
  }
}