2BCmsBrowser/src/routes/Combo/Edit/index.js

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Card, Table, Form, Spin, Input, InputNumber, Button, Icon, message } from 'antd';
import queryString from 'query-string';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import ProductSelectModal from './product';
import { Codes, pageSize, productType } from '../../../utils/config';

@Form.create()
@connect(state => ({
  comboDetail: state.comboDetail,
  product: state.product,
}))
export default class PackageProfile extends PureComponent {
  state = { proType: [Codes.CODE_COURSE] }; // 产品类型[默认为课程资源]

  handleEditProuctClick = () => {
    const { proType } = this.state;
    this.props.dispatch({ type: 'comboDetail/showModal' });
    this.props.dispatch({
      type: 'product/query',
      payload: {
        type: proType[0],
        pageNo: 1,
        pageSize,
      }
    });
  }

  handleInputNumberChange = (value, record) => {
    const { currentItem } = this.props.comboDetail;
    const { products } = currentItem;
    const boundPriceProducts = [...products];
    boundPriceProducts.map(item => item.pid === record.pid ? item.cpPrice = value : null);
    this.props.dispatch({
      type: 'comboDetail/savePrice',
      payload: boundPriceProducts,
    });
  }

  handleProductModalOk = (data) => {
    this.props.dispatch({
      type: 'comboDetail/saveProducts',
      payload: data ,
    });
  }

  handleProductModalCancel = () => {
    this.props.dispatch({ type: 'comboDetail/hideModal' });
  }

  handleProductModalSearch = (data) => {
    const newData = { ...data };
    const { proType } = this.state;
    if (newData.keyword) {
      newData[newData.field] = newData.keyword;
    }
    delete newData.field;
    delete newData.keyword;

    this.props.dispatch({
      type: 'product/query',
      payload: {
        ...newData,
        type: proType[0],
        pageNo: 1,
        pageSize,
      }
    });
  }

  handleProductModalTableChange = (pagination, filterArgs, filters) => {
    // 待选资源列表中资源类型过滤选项
    const { type } = filterArgs;
    if (Array.isArray(type) && type.length) {
      this.setState({ proType: type.map(item => item) });
    } else {
      this.setState({ proType: [Codes.CODE_COURSE] });
      filterArgs.type = [Codes.CODE_COURSE];
    }

    const newFilters = { ...filters };
    if (newFilters.keyword) {
      newFilters[newFilters.field] = newFilters.keyword;
    }
    delete newFilters.field;
    delete newFilters.keyword;

    // table header filter
    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]);
    this.props.dispatch({ type: 'product/query', payload: data });
  }

  handlePageCancel = () => {
    const { filters } = this.props.comboDetail;
    this.props.dispatch(routerRedux.push({
      pathname: '/product/package',
      search: queryString.stringify(filters),
    }));
    this.props.dispatch({ type: 'comboDetail/initState' });
  }

  handlePageSubmit = (e) => {
    e.preventDefault();
    const { dispatch, form, comboDetail } = this.props;
    const { currentItem, operType, filters } = comboDetail;
    const { products } = currentItem;
    const { validateFields, getFieldsValue } = form;
    validateFields((errors) => {
      if (errors) return;
      if (products && products.filter(item => !item.cpPrice).length > 0 ) {
        message.error('还有供应商价格未填写!');
        return;
      }
      // add params `code` and `name`
      const data = { ...getFieldsValue() };
      // add params `products`
      if (Array.isArray(products)) {
        data.products = products.map(item => ({
          pid: item.pid,
          type: item.type,
          cpPrice: item.cpPrice,
        }));
      }
      // add params `status`
      if (operType === 'create') {
        data.status = Codes.CODE_NORMAL;
        data.type = Codes.CODE_PACKAGE;
      }
      else if (operType === 'update') {
        data.status = currentItem.status;
        data.id = currentItem.id;
      }
      dispatch({
        type: `comboDetail/${operType}`,
        payload: data,
        callback: () => {
          dispatch(routerRedux.push({
            pathname: '/product/package',
            search: queryString.stringify(filters),
          }));
        }
      });
    });
  }

  render() {
    const { form, comboDetail, product } = this.props;
    const { proType } = this.state;
    const { modalShow, currentItem, itemLoading } = comboDetail;
    const { list, listLoading, pagination } = product;
    const { products } = currentItem;
    const { getFieldDecorator } = form;

    const formItemLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 12 },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    const tableFormLayout = {
      wrapperCol: { offset: 7, span: 12 },
    };

    const columns = [{
    //   title: '封面',
    //   dataIndex: 'coverUrl',
    //   key: 'coverUrl',
    //   render: (text, record) => {},
    // },{
      title: '编号',
      dataIndex: 'code',
      key: 'code',
      width: '20%',
    },{
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: '20%',
    },{
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      render: (text, record) => productType[text],
      width: '15%',
    },{
      title: '供应商',
      dataIndex: 'cpName',
      key: 'cpName',
      width: '17%',
    },{
      title: '供应商价格',
      dataIndex: 'cpPrice',
      key: 'cpPrice',
      render: (text, record) => (
        <InputNumber
          min={0}
          value={record.cpPrice}
          onChange={(value) => this.handleInputNumberChange(value, record)}
          formatter={value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
          parser={value => value.replace(/\¥\s?|(,*)/g, '')}
        />
      ),
      width: '28%',
    }];

    return (
      <PageHeaderLayout>
        <Spin spinning={itemLoading}>
          <Card>
            <Form layout="horizontal" onSubmit={this.handlePageSubmit}>
              <Form.Item label="产品包编号" { ...formItemLayout }>
                {getFieldDecorator('code', {
                  rules: [{ required: true, type: 'string', message: '编号为必填项!' }],
                })(<Input placeholder="请输入" />)}
              </Form.Item>
              <Form.Item label="产品包名称" { ...formItemLayout }>
                {getFieldDecorator('name', {
                  rules: [{ required: true, type: 'string', message: '名称为必填项!' }],
                })(<Input placeholder="请输入" />)}
              </Form.Item>
              <Form.Item label="选择产品" { ...formItemLayout }>
                <Button onClick={this.handleEditProuctClick} type="primary" size="small" icon="select">选择</Button>
              </Form.Item>
              <Form.Item { ...tableFormLayout }>
                <Table
                  simple
                  bordered
                  columns={columns}
                  dataSource={products || []}
                  pagination={false}
                  rowKey={record => record.id}
                  locale={{
                    emptyText: <span style={{ color: "#C6D0D6" }}>&nbsp;&nbsp;<Icon type="frown-o"/>
                      该产品包内暂无相关内容!</span>
                  }}
                />
              </Form.Item>
              <Form.Item { ...submitFormLayout } style={{ marginTop: 32 }}>
                <Button onClick={this.handlePageCancel}>取消</Button>
                <Button type="primary" style={{ marginLeft: 35 }} htmlType="submit">提交</Button>
              </Form.Item>
            </Form>
            {/*产品选择模态框*/}
            <ProductSelectModal
              rowKeyName="id"
              modalVisible={modalShow}
              selTableData={products || []}
              width={600}
              style={{ top: 20 }}
              fsTableDataSource={list}
              fsTableLoading={listLoading}
              fsTablePagination={pagination}
              fsFilteredValue={proType}
              onOk={this.handleProductModalOk}
              onCancel={this.handleProductModalCancel}
              onSearch={this.handleProductModalSearch}
              fsTableOnChange={this.handleProductModalTableChange}
            />
          </Card>
        </Spin>
      </PageHeaderLayout>
    );
  }
}