jc-biz-components/lib/jc-detail-page/index.js

jc component library based on Antd

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _row = require('antd/lib/row');

var _row2 = _interopRequireDefault(_row);

var _card = require('antd/lib/card');

var _card2 = _interopRequireDefault(_card);

var _modal = require('antd/lib/modal');

var _modal2 = _interopRequireDefault(_modal);

var _upload = require('antd/lib/upload');

var _upload2 = _interopRequireDefault(_upload);

var _icon = require('antd/lib/icon');

var _icon2 = _interopRequireDefault(_icon);

var _table = require('antd/lib/table');

var _table2 = _interopRequireDefault(_table);

var _button = require('antd/lib/button');

var _button2 = _interopRequireDefault(_button);

var _col = require('antd/lib/col');

var _col2 = _interopRequireDefault(_col);

var _form = require('antd/lib/form');

var _form2 = _interopRequireDefault(_form);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _input = require('antd/lib/input');

var _input2 = _interopRequireDefault(_input);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _radio = require('antd/lib/radio');

var _radio2 = _interopRequireDefault(_radio);

var _checkbox = require('antd/lib/checkbox');

var _checkbox2 = _interopRequireDefault(_checkbox);

var _select = require('antd/lib/select');

var _select2 = _interopRequireDefault(_select);

var _datePicker = require('antd/lib/date-picker');

var _datePicker2 = _interopRequireDefault(_datePicker);

require('antd/lib/row/style');

require('antd/lib/card/style');

require('antd/lib/modal/style');

require('antd/lib/upload/style');

require('antd/lib/icon/style');

require('antd/lib/table/style');

require('antd/lib/button/style');

require('antd/lib/col/style');

require('antd/lib/form/style');

require('antd/lib/input/style');

require('antd/lib/radio/style');

require('antd/lib/checkbox/style');

require('antd/lib/select/style');

require('antd/lib/date-picker/style');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactRouterDom = require('react-router-dom');

var _classifytree = require('components/classifytree');

var _classifytree2 = _interopRequireDefault(_classifytree);

var _DescriptionList = require('../../components/DescriptionList');

var _DescriptionList2 = _interopRequireDefault(_DescriptionList);

var _PropertySelector = require('../../modules/commodity/meal/commodity/PropertySelector');

var _PropertySelector2 = _interopRequireDefault(_PropertySelector);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

// import styles from './style.css'
var RangePicker = _datePicker2['default'].RangePicker;
var Option = _select2['default'].Option;
var CheckboxGroup = _checkbox2['default'].Group;
var RadioGroup = _radio2['default'].Group;
var Description = _DescriptionList2['default'].Description;


var formItemLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 17 }
};

var formItemLayoutLarge = {
  labelCol: { span: 3 },
  wrapperCol: { span: 20 }
};

var DetailPage = function (_Component) {
  (0, _inherits3['default'])(DetailPage, _Component);

  function DetailPage() {
    var _ref;

    var _temp, _this, _ret;

    (0, _classCallCheck3['default'])(this, DetailPage);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3['default'])(this, (_ref = DetailPage.__proto__ || Object.getPrototypeOf(DetailPage)).call.apply(_ref, [this].concat(args))), _this), _this._renderInput = function (formItem) {
      var getFieldDecorator = _this.props.form.getFieldDecorator;

      return _react2['default'].createElement(
        _col2['default'],
        { span: 8 },
        _react2['default'].createElement(
          _form2['default'].Item,
          (0, _extends3['default'])({}, formItemLayout, {
            label: formItem.label
          }),
          getFieldDecorator(formItem.fieldName, {
            initialValue: formItem.initialValue || '',
            rules: formItem.rules
          })(_react2['default'].createElement(_input2['default'], {
            placeholder: '请输入' + formItem.label,
            autoComplete: 'off'
          }))
        )
      );
    }, _this._filterOption = function (input, option) {
      return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    }, _this._renderSelect = function (formItem) {
      var getFieldDecorator = _this.props.form.getFieldDecorator;

      return _react2['default'].createElement(
        _col2['default'],
        { span: 8 },
        _react2['default'].createElement(
          _form2['default'].Item,
          (0, _extends3['default'])({}, formItemLayout, {
            label: formItem.label
          }),
          getFieldDecorator(formItem.fieldName, {
            initialValue: formItem.initialValue || undefined,
            rules: formItem.rules
          })(_react2['default'].createElement(
            _select2['default'],
            {
              showSearch: formItem.showSearch || false,
              placeholder: '请选择' + formItem.label,
              getPopupContainer: function getPopupContainer() {
                return document.getElementById('form');
              },
              filterOption: _this._filterOption
            },
            formItem.dictionary.map(function (dictItem) {
              return _react2['default'].createElement(
                Option,
                {
                  key: dictItem.key,
                  value: dictItem.key
                },
                dictItem.value
              );
            })
          ))
        )
      );
    }, _this._renderRangePicker = function (formItem) {
      var getFieldDecorator = _this.props.form.getFieldDecorator;

      return getFieldDecorator(formItem.fieldName, { rules: formItem.rules })(_react2['default'].createElement(RangePicker, {
        style: { width: '100%' },
        format: 'YYYY-MM-DD HH:mm:ss',
        placeholder: ['开始日期', '结束日期'],
        showTime: {
          hideDisabledOptions: false
        }
      }));
    }, _this._renderRadio = function (formItem) {
      var getFieldDecorator = _this.props.form.getFieldDecorator;

      return _react2['default'].createElement(
        _col2['default'],
        { span: 8 },
        _react2['default'].createElement(
          _form2['default'].Item,
          (0, _extends3['default'])({}, formItemLayout, {
            label: formItem.label
          }),
          getFieldDecorator(formItem.fieldName, {
            initialValue: formItem.initialValue || undefined,
            rules: formItem.rules
          })(_react2['default'].createElement(
            RadioGroup,
            null,
            formItem.dictionary.map(function (dictItem) {
              return _react2['default'].createElement(
                _radio2['default'],
                {
                  key: dictItem.key,
                  value: dictItem.key
                },
                dictItem.value
              );
            })
          ))
        )
      );
    }, _this._renderCheckbox = function (formItem) {
      var getFieldDecorator = _this.props.form.getFieldDecorator;

      return _react2['default'].createElement(
        _col2['default'],
        { span: 8 },
        _react2['default'].createElement(
          _form2['default'].Item,
          (0, _extends3['default'])({}, formItemLayout, {
            label: formItem.label
          }),
          getFieldDecorator(formItem.fieldName, {
            initialValue: formItem.initialValue || undefined,
            rules: formItem.rules
          })(_react2['default'].createElement(
            CheckboxGroup,
            null,
            formItem.dictionary.map(function (dictItem) {
              return _react2['default'].createElement(
                _checkbox2['default'],
                {
                  style: { marginTop: '10px' },
                  key: dictItem.key,
                  value: dictItem.key
                },
                dictItem.value
              );
            })
          ))
        )
      );
    }, _this._renderClassifyTree = function (formItem) {
      return _react2['default'].createElement(_classifytree2['default'], {
        allowClear: false,
        isTreeSelect: true,
        treeData: formItem.treeData,
        onSelect: formItem.onSelect
      });
    }, _this._renderPropertyPull = function (formItem) {
      return _react2['default'].createElement(
        _form2['default'].Item,
        null,
        formItem.property.propertyPull.map(function (m, i) {
          return _react2['default'].createElement(_PropertySelector2['default'], {
            list: m,
            key: i,
            index: i
          });
        }),
        formItem.property.propertyPull.length < 1 && _react2['default'].createElement(
          _button2['default'],
          {
            style: { margin: '0 16px 15px 0' },
            onClick: formItem.propertyEvent._addPropertySelector
          },
          '\u6DFB\u52A0\u89C4\u683C\u5C5E\u6027'
        ),
        formItem.property.length > 0 && _react2['default'].createElement(
          _button2['default'],
          {
            style: { marginBottom: '15px' },
            onClick: formItem.propertyEvent._handleConfirm
          },
          '\u786E\u8BA4'
        ),
        formItem.property.propertyColumns.length > 0 && _react2['default'].createElement(_table2['default'], {
          bordered: true,
          columns: formItem.propertyEvent._getColumns,
          dataSource: formItem.propertyEvent._getData,
          pagination: false
        })
      );
    }, _this._renderCommodityImg = function (formItem) {
      var getFieldDecorator = _this.props.form.getFieldDecorator;

      return _react2['default'].createElement(
        _form2['default'].Item,
        (0, _extends3['default'])({}, formItemLayoutLarge, {
          label: formItem.label
        }),
        getFieldDecorator(formItem.fieldName, {
          valuePropName: 'fileList',
          getValueFromEvent: function getValueFromEvent(e) {
            return formItem.CommodityImgEvent._processFileUpload(e, formItem.CommodityImgEvent.setGoodsImage);
          },
          initialValue: formItem.initialValue,
          rules: formItem.rules
        })(_react2['default'].createElement(
          _upload2['default'],
          {
            listType: 'picture-card',
            action: 'http://upload.qiniu.com',
            beforeUpload: formItem.CommodityImgEvent.beforeUpload,
            data: { token: formItem.CommodityImgState.qiniuToken },
            accept: 'image/jpg, image/jpeg, image/png',
            onPreview: formItem.CommodityImgEvent.onPreview,
            onChange: formItem.CommodityImgEvent.onChange,
            needOrder: true,
            onRemove: _this.props.pageType === 'edit'
          },
          formItem.CommodityImgState.imageList < formItem.CommodityImgState.imageNum && _this.props.pageType === 'edit' ? _react2['default'].createElement(
            'div',
            null,
            _react2['default'].createElement(_icon2['default'], { type: 'plus' }),
            _react2['default'].createElement(
              'div',
              { className: 'ant-upload-text' },
              '\u4E0A\u4F20\u56FE\u50CF'
            )
          ) : null
        )),
        _react2['default'].createElement(
          _modal2['default'],
          {
            visible: formItem.CommodityImgState.modalVisible,
            footer: null,
            onCancel: formItem.CommodityImgEvent._coverCancel
          },
          _react2['default'].createElement('img', {
            alt: 'example',
            style: { width: '100%', height: '100%' },
            src: formItem.CommodityImgState.preview
          })
        )
      );
    }, _this._renderTable = function (formItem) {
      return _react2['default'].createElement(
        _col2['default'],
        null,
        _react2['default'].createElement(_table2['default'], {
          columns: formItem.columns,
          dataSource: formItem.dataSource,
          rowKey: function rowKey(item, index) {
            return index;
          },
          bordered: true,
          pagination: formItem.pagination
        }),
        formItem.tableFooter && formItem.tableFooter.map(function (footer, index) {
          return _react2['default'].createElement(
            'div',
            {
              className: 'footer',
              style: {
                display: 'flex',
                'flex-direction': 'column',
                'text-align': 'right',
                'font-size': '18px',
                'font-weight': 'bold',
                'margin-top': '10px'
              },
              key: index
            },
            _react2['default'].createElement(
              'div',
              null,
              footer.label,
              '\uFF1A',
              _react2['default'].createElement(
                'span',
                null,
                footer.text
              )
            )
          );
        })
      );
    }, _this._renderFormItem = function (formItems) {
      return formItems.map(function (formItem, index) {
        return _react2['default'].createElement(
          _card2['default'],
          {
            title: formItem.cardTitle,
            key: index,
            bordered: false,
            style: { marginBottom: 24 }
          },
          formItem.detail.map(function (item) {
            switch (item.componentType) {
              case 'Input':
                return _this._renderInput(item);
              case 'Select':
                return _this._renderSelect(item);
              case 'RangePicker':
                return _this._renderRangePicker(item);
              case 'ClassifyTree':
                return _this._renderClassifyTree(item);
              case 'Radio':
                return _this._renderRadio(item);
              case 'Checkbox':
                return _this._renderCheckbox(item);
              case 'Property':
                return _this._renderPropertyPull(item);
              case 'CommodityImg':
                return _this._renderCommodityImg(item);
              case 'Table':
                return _this._renderTable(item);
              default:
                return _react2['default'].createElement(
                  'p',
                  null,
                  '\u6682\u4E0D\u652F\u6301'
                );
            }
          })
        );
      });
    }, _this._renderButtons = function (buttons) {
      return _react2['default'].createElement(
        _form2['default'].Item,
        { className: 'btn-container' },
        buttons.map(function (button, index) {
          if (button.type === 'action') {
            return _react2['default'].createElement(
              _button2['default'],
              {
                key: index,
                type: 'primary',
                className: 'button',
                onClick: function onClick() {
                  return button.onClick(_this.props.form.getFieldsValue());
                }
              },
              button.desc
            );
          } else if (button.type === 'link') {
            return _react2['default'].createElement(
              _reactRouterDom.Link,
              {
                key: index,
                className: 'button',
                to: button.url
              },
              _react2['default'].createElement(
                _button2['default'],
                { type: 'primary' },
                button.desc
              )
            );
          }
        })
      );
    }, _this._renderPageType = function (formItem) {
      if (_this.props.pageType === 'see') {
        return _this._renderDetail(formItem);
      } else if (_this.props.pageType === 'edit') {
        return _this._renderFormItem(formItem);
      }
    }, _this._renderDetail = function (formItem) {
      return formItem.map(function (cards, index) {
        if (cards.cardType === 'Img') {
          return _this._renderFormItem(formItem.filter(function (item) {
            return item.cardType === 'Img';
          }));
        } else if (cards.cardType === 'Property') {
          return _this._renderFormItem(formItem.filter(function (item) {
            return item.cardType === 'Property';
          }));
        } else if (cards.cardType === 'Table') {
          return _this._renderFormItem(formItem.filter(function (item) {
            return item.cardType === 'Table';
          }));
        } else {
          return _react2['default'].createElement(
            _card2['default'],
            {
              key: index,
              title: cards.cardTitle,
              style: { marginBottom: 24 },
              bordered: false
            },
            _react2['default'].createElement(
              _DescriptionList2['default'],
              {
                key: index,
                style: { marginBottom: 24 }
              },
              cards.detail.map(function (item, index) {
                return _react2['default'].createElement(
                  Description,
                  {
                    key: index,
                    term: item.label,
                    style: { marginBottom: 24 }
                  },
                  item.viewValue
                );
              })
            )
          );
        }
      });
    }, _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret);
  }

  (0, _createClass3['default'])(DetailPage, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          details = _props.details,
          buttons = _props.buttons,
          pageType = _props.pageType,
          goodsId = _props.goodsId;

      return _react2['default'].createElement(
        _form2['default'],
        {
          id: 'form',
          className: 'form'
        },
        goodsId && _react2['default'].createElement(
          _card2['default'],
          {
            bordered: false
          },
          _react2['default'].createElement(
            _col2['default'],
            {
              span: 20,
              style: { fontSize: '16px', fontWeight: '500' }
            },
            '\u5546\u54C1Id\uFF1A',
            goodsId
          ),
          pageType === 'edit' && _react2['default'].createElement(
            _col2['default'],
            { span: 4 },
            this._renderButtons(buttons)
          )
        ),
        _react2['default'].createElement(
          _row2['default'],
          null,
          this._renderPageType(details)
        )
      );
    }
  }]);
  return DetailPage;
}(_react.Component);

DetailPage.propTypes = {
  details: _propTypes2['default'].array,
  buttons: _propTypes2['default'].array
};

exports['default'] = _form2['default'].create()(DetailPage);
module.exports = exports['default'];