2BCmsBrowser/src/routes/Goods/Add/index.js

import React, { PureComponent } from 'react';
import { routerRedux } from 'dva/router';
import PropTypes from 'prop-types';
import queryString from 'query-string';
import { connect } from 'dva';
import { Upload, Spin, Switch, Popover, Badge, Table, Radio, Card, Form, Input, Icon, Button, Select } from 'antd';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import CourseSelectModal from './course';
import SupportSelectModal from './support';
import PackageSelectModal from './package';
import { Codes, productType } from '../../../utils/config';
import styles from './index.less';

const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const Option = Select.Option;
const { Meta } = Card;
const { TextArea } = Input;

@Form.create()
@connect(state => ({
  course: state.course,
  support: state.support,
  combo: state.combo,
  merchant: state.merchant,
  goodsDetail: state.goodsDetail,
}))
export default class GoodsAdd extends PureComponent {
  state = {
    radioType: Codes.CODE_COURSE,
    curClickedBtn: null,
    courseModalVisible: false,
    supportModalVisible: false,
    packageModalVisible: false,
    selectItem: null,
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'merchant/query',
      payload: {
        pageNo: 1,
        pageSize: 1000,
        status: Codes.CODE_NORMAL,
        domain: Codes.CODE_PJ,
      }
    })
  }

  handleRadioOnChange = (e) => {
    this.setState({ radioType: e.target.value });
  }

  handleModalSearch = (data) => {
    const { curClickedBtn } = this.state;
    const { dispatch } = this.props;
    const newData = { ...data };
    if (newData.keyword) {
      newData[newData.field] = newData.keyword;
      delete newData.field;
      delete newData.keyword;
    } else {
      delete newData.field;
      delete newData.keyword;
    }
    if (curClickedBtn === Codes.CODE_COURSE) {
      dispatch({
        type: 'course/query',
        payload: { ...newData, pageNo: 1, pageSize: 10, status: Codes.CODE_NORMAL },
      });
    }
  }

  handleModalOk = (data) => {
    const { curClickedBtn } = this.state;
    const { dispatch } = this.props;
    if (curClickedBtn === Codes.CODE_COURSE) {
      this.setState({
        selectItem: data,
        courseModalVisible: false,
      });
    } else if(curClickedBtn === Codes.CODE_SUPPORT) {
      this.setState({
        selectItem: data,
        supportModalVisible: false,
      });
    } else if (curClickedBtn === Codes.CODE_PACKAGE) {
      this.setState({
        selectItem: data,
        packageModalVisible: false,
      });
    }
  }

  handleModalCancel = () => {
    const { curClickedBtn } = this.state;
    const { dispatch } = this.props;
    if (curClickedBtn === Codes.CODE_COURSE) {
      this.setState({ courseModalVisible: false });
    } else if (curClickedBtn === Codes.CODE_SUPPORT) {
      this.setState({ supportModalVisible: false });
    } else if (curClickedBtn === Codes.CODE_PACKAGE) {
      this.setState({ packageModalVisible: false });
    }
  }

  handleModalShow = (name) => {
    const { dispatch } = this.props;
    if (name === Codes.CODE_COURSE) {
      this.setState({
        curClickedBtn: name,
        courseModalVisible: true,
      }, () => {
        dispatch({
          type: 'course/query',
          payload: {
            pageNo: 1,
            pageSize: 10,
            status: Codes.CODE_NORMAL,
          }
        });
      })
    } else if (name === Codes.CODE_SUPPORT) {
      this.setState({
        curClickedBtn: name,
        supportModalVisible: true,
      }, () => {
        dispatch({
          type: 'support/query',
          payload: {
            pageNo: 1,
            pageSize: 10,
            status: Codes.CODE_NORMAL,
          }
        });
      })
    } else if (name === Codes.CODE_PACKAGE) {
      this.setState({
        curClickedBtn: name,
        packageModalVisible: true,
      }, () => {
        dispatch({
          type: 'combo/query',
          payload: {
            pageNo: 1,
            pageSize: 10,
            status: Codes.CODE_NORMAL,
          }
        });
      })
    }
  }

  handleModalTableChange = () => {
    const { curClickedBtn } = this.state;
    const { dispatch } = this.props;
    const newFilters = { ...filters };
    if (newFilters.keyword) {
      newFilters[newFilters.field] = newFilters.keyword;
      delete newFilters.field;
      delete newFilters.keyword;
    } else {
      delete newFilters.field;
      delete newFilters.keyword;
    }
    const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');
    const tableFilters = Object.keys(filterArgs).reduce((obj, key) => {
      const newObj = { ...obj };
      newObj[key] = getValue(filterArgs[key]);
      return newObj;
    }, {});

    const data = { ...newFilters, ...tableFilters, pageNo: pagination.current, pageSize: pagination.pageSize };
    Object.keys(data).map(key => data[key] ? null : delete data[key]);
    if (curClickedBtn === Codes.CODE_COURSE) {
      dispatch({ type: 'course/query', payload: { ...data, status: Codes.CODE_NORMAL } });
    } else if (curClickedBtn === Codes.CODE_SUPPORT) {
      dispatch({ type: 'support/query', payload: { ...data, status: Codes.CODE_NORMAL } });
    } else if (curClickedBtn === Codes.CODE_PACKAGE) {
      dispatch({ type: 'combo/query', payload: { ...data, status: Codes.CODE_PACKAGE } });
    }
  }

  handlePageSubmit = (e) => {
    e.preventDefault();
    const {
      dispatch,
      form: {
        validateFields,
        getFieldsValue,
        resetFields,
      },
      goodsDetail: {
        filters,
      }
    } = this.props;
    const {
      selectItem,
      radioType,
    } = this.state;
    validateFields(errors => {
      if (errors) return;
      const data = {
        ...getFieldsValue(['merchantId', 'status']),
        pid: selectItem.pid,
      };
      data.status ? data.status = Codes.CODE_NORMAL : data.status = Codes.CODE_DELETE;
      dispatch({
        type: `goodsDetail/createMerchantProduct`,
        payload: data,
        callback: () => {
          dispatch(
            routerRedux.push({
              pathname: '/goods',
              search: queryString.stringify(filters),
            })
          );
          resetFields();
        }
      });
    });
  }

  handlePageCancel = () => {
    const { dispatch, goodsDetail: { filters } } = this.props;
    dispatch(
      routerRedux.push({
        pathname: '/goods',
        search: queryString.stringify(filters),
      })
    );
  }

  renderLabelName = () => {
    const { radioType } = this.state;
    switch (radioType) {
      case Codes.CODE_COURSE:
        return '选择课程';
        break;
      case Codes.CODE_SUPPORT:
        return '选择配套';
        break;
      case Codes.CODE_PACKAGE:
        return '选择课程包';
        break;
      default:
        break;
    }
  }

  render() {
    const formItemLayout = {
      labelCol: {
        span: 7,
      },
      wrapperCol: {
        span: 12,
      },
    };
    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };
    const {
      form: {
        getFieldDecorator
      },
      item = {},
      course,
      merchant,
      support,
      combo
    } = this.props;
    const {
      radioType,
      selectItem,
      courseModalVisible,
      supportModalVisible,
      packageModalVisible,
    } = this.state;

    return (
      <PageHeaderLayout>
        <Card>
          <Form layout="horizontal" onSubmit={this.handlePageSubmit}>
            <FormItem label="选择渠道：" {...formItemLayout}>
              {getFieldDecorator('merchantId', {
                rules: [{ required: true, type: 'string', message: '此项为必选项!' }],
              })(<Select placeholder="请选择" style={{ width: '43%' }}>{merchant.list.map(item => <Option value={item.id} key={item.id}>{item.name}</Option>)}</Select>)}
            </FormItem>
            <FormItem label="产品类型：" {...formItemLayout}>
              {getFieldDecorator('type', {
                rules: [{ required: true, type: 'string', message: '请选择产品类型!' }],
                initialValue: radioType,
              })(
                <RadioGroup onChange={this.handleRadioOnChange}>
                  {Object.keys(productType).map(key =>
                    <Radio value={key} key={key}>{productType[key]}</Radio>)
                  }
                </RadioGroup>
              )}
            </FormItem>
            <FormItem label={this.renderLabelName()} {...formItemLayout}>
              <Button size="small" type="primary" icon="select" onClick={() => this.handleModalShow(radioType)}>选择</Button>
            </FormItem>
            <FormItem {...submitFormLayout}>
              {selectItem ?
                <Card
                  title={selectItem.name}
                  hoverable
                  cover={<img alt="暂无封面图片" src={selectItem.coverUrl} />}
                  style={{ width: '50%' }}
                >
                </Card> :
                <Button type="dashed" className={styles.newButton}>未选择</Button>
              }
            </FormItem>
            <FormItem label="上架状态：" {...formItemLayout}>
              {getFieldDecorator('status', {
                valuePropsName: 'checked',
            })(<Switch defaultChecked={false} checkedChildren="出售" unCheckedChildren="下架" />)}
            </FormItem>
            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button onClick={this.handlePageCancel}>取消</Button>
              <Button type="primary" style={{ marginLeft: 35 }} htmlType="submit">提交</Button>
            </FormItem>
          </Form>
          {/*查询课程的模态选择框*/}
          <CourseSelectModal
            rowKeyName="id"
            modalVisible={courseModalVisible}
            style={{ top: 30 }}
            onOk={this.handleModalOk}
            onCancel={this.handleModalCancel}
            onSearch={this.handleModalSearch}
            fsTableDataSource={course.list || []}
            fsTableLoading={course.listLoading}
            fsTablePagination={course.pagination}
            fsTableOnChange={this.handleModalTableChange}
          />
          {/*查询配套的模态选择框*/}
          <SupportSelectModal
            rowKeyName="id"
            modalVisible={supportModalVisible}
            style={{ top: 30 }}
            onOk={this.handleModalOk}
            onCancel={this.handleModalCancel}
            onSearch={this.handleModalSearch}
            fsTableDataSource={support.list || []}
            fsTableLoading={support.listLoading}
            fsTablePagination={support.pagination}
            fsTableOnChange={this.handleModalTableChange}
          />
          {/*查询课程包的模态选择框*/}
          <PackageSelectModal
            rowKeyName="id"
            modalVisible={packageModalVisible}
            style={{ top: 30 }}
            onOk={this.handleModalOk}
            onCancel={this.handleModalCancel}
            onSearch={this.handleModalSearch}
            fsTableDataSource={combo.list || []}
            fsTableLoading={combo.listLoading}
            fsTablePagination={combo.pagination}
            fsTableOnChange={this.handleModalTableChange}
          />
        </Card>
      </PageHeaderLayout>
    );
  }
}