cloud-b2b 1.1.57 → 1.1.59

package/src/SuperForm2/SuperForm.js

@@ -0,0 +1,588 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import helper from '../helper';
+import Control, {getTitle, makeString} from '../Control';
+import {Icon, Form, Row, Col, Checkbox, Tooltip} from 'antd';
+import variables from '../variables';
+
+const FormItem = Form.Item;
+const defaultSize = 'large';
+const defaultColNum = 4;
+
+const TYPE = [
+  'readonly',
+  'text',
+  'search',
+  'searchText',
+  'select',
+  'selectText',
+  'radioGroup',
+  'number',
+  'date',
+  'textArea',
+  'password',
+  'editor',
+  'selectWriting',
+  'selectSearch',
+  'empty',
+  'captcha',
+  'area',
+  'uploadImg',
+  'cascader',
+  'checkbox',
+  'treeSelect'
+];
+
+/**
+ * key：[必须]，用于唯一标识该Form下的一个表单元素
+ * title：[必须]，表单元素的标签
+ * type：[必须]，表单元素类型
+ * required: [可选]，是否为必填项
+ * options: [可选]，对象数组(type为readonly，radio，search, searchText，select, selectText时有效)
+ * span: [可选]，占据的列数，默认为1
+ * showAdd: [可选]，是否显示+号，点击+号会触发onAdd事件，默认为false
+ * rule: [可选]，用于设置校验规则
+ */
+const ControlType = {
+  key: PropTypes.string.isRequired,
+  title: PropTypes.string,
+  type: PropTypes.oneOf(TYPE).isRequired,
+  required: PropTypes.bool,
+  options: PropTypes.array,
+  span: PropTypes.number,
+  onCheckItem: PropTypes.any,
+  showAdd: PropTypes.any,
+  rule: PropTypes.object,
+  props: PropTypes.object,
+};
+
+class Controlled extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {value: props.value};
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.value !== nextProps.value) {
+      this.setState({value: nextProps.value});
+    }
+  }
+
+  onChange = (value) => {
+    const {onChange} = this.props;
+    this.setState({value});
+    onChange && onChange(value);
+  };
+
+  render() {
+    const props = {
+      ...this.props,
+      size:'large',
+      value: this.state.value,
+      onChange: this.onChange
+    };
+    return <Control {...props} />;
+  }
+}
+
+/**
+ * colNum：[可选]，表单的列数，默认为4
+ * readonly: [可选]，为true时，所有表单元素都是只读的; 为字符串数组时，用于指定key的表单元素是只读的
+ * hideControls: [可选]，指定key的表单元素被隐藏
+ * options: [可选]，键值对，值与ControlType中options作用相同，但优先级更高
+ * onChange：内容改变时触发，原型为func(key, value)
+ * onSearch：搜索框中用户输入时触发，原型为func(key, title, control)
+ * onAdd: 点击+号时触发，原型为func(key)
+ * checkable:是否显示checkbox选择框
+ * onOpenChange:控制日期框显示隐藏回调func(key, open)
+ * onAreaSearch:联级选择器触发，原型为func(key - 当前联级key, title - 输入值, parentKey - 主体联级key)
+ * onFileChange:上传组件触发,原型为func（key,{fileList, fileDeleteList}）
+ */
+class SuperForm2 extends React.Component {
+  static propTypes = {
+    controls: PropTypes.arrayOf(PropTypes.shape(ControlType)).isRequired,
+    value: PropTypes.object,
+    colNum: PropTypes.number,
+    valid: PropTypes.bool,
+    readonly: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
+    hideControls: PropTypes.array,
+    options: PropTypes.object,
+    onChange: PropTypes.func,
+    onSearch: PropTypes.func,
+    onExitValid: PropTypes.func,
+    onAdd: PropTypes.func,
+    checkable: PropTypes.bool,
+    onOpenChange: PropTypes.func,
+    onGetCode: PropTypes.func,
+    onFileChange: PropTypes.func,
+    onAreaSearch: PropTypes.func,
+    buildSuperUploadProps: PropTypes.func, //构建type===uploadImg时，SuperUpload组件需要的公共属性函数，已在项目公共文件state.js中提供，可直接引用
+    layout: PropTypes.string,
+  };
+
+  onAdd = (key, title) => {
+    const {onAdd} = this.props;
+    onAdd && onAdd(key, title);
+  };
+
+  onFileChange = ({key}, file) => {
+    const {onFileChange} = this.props;
+    onFileChange && onFileChange(key, file);
+  };
+
+  onChange = (key, value) => {
+    const {onChange} = this.props;
+    if (onChange) {
+      this.onExitValid(key);
+      onChange(key, value);
+    }
+  };
+
+  onGetCode = (key, value) => {
+    const {onGetCode} = this.props;
+    onGetCode && onGetCode();
+  }
+
+  onBlur = (key, value) => {
+    const {onChange} = this.props;
+    if (onChange) {
+      this.onExitValid(key);
+      onChange(key, value);
+    }
+  };
+
+  onExitValid = (key,value) => {
+    if (key === this.validKey) {
+      this.validKey = '';
+      this.props.onExitValid();
+    }
+    this.props.onChangeOperate && this.props.onChangeOperate(key,value);
+  };
+
+  // 动态生成getValidState方法
+  initValidState = () => {
+    const {value, valid} = this.props;
+    const invalid = () => null;
+    const _valid = ({key, required}) => {
+      if (required) {
+        if (!value || helper.isEmpty2(value[key]) || ( !Array.isArray(value[key]) && typeof value[key] === 'object' && helper.isEmpty(value[key].value))) {
+          this.getValidState = invalid;
+          this.validKey = key;
+          return 'error';
+        }
+      }
+      return null;
+    };
+    this.getValidState = valid ? _valid : invalid;
+  };
+
+  validDate = ({key, type}) => (date) => {
+    const {value={}} = this.props;
+    if (!date || !value[key]) {
+      return false;
+    } else {
+      if (type === '>') {
+        return date.format('YYYY-MM-DD') < value[key];
+      } else if (type === '<') {
+        return date.format('YYYY-MM-DD') > value[key];
+      } else {
+        return false;
+      }
+    }
+  };
+
+  getPopupContainer = () => {
+    const {container} = this.props;
+    if (typeof container === 'undefined') {
+      return ReactDOM.findDOMNode(this);
+    } else if (typeof container === 'boolean') {
+      return document.body;
+    } else {
+      return ReactDOM.findDOMNode(container);
+    }
+  };
+
+  getMaxWidth = () => {
+    const {colNum=defaultColNum} = this.props;
+    return colNum * 1200;
+  };
+
+  getContainer = () => {
+    return this.props.getContainer;
+  };
+
+  getControls = () => {
+    const {hideControls, controls} = this.props;
+    if (!hideControls) {
+      return controls;
+    } else {
+      return controls.filter(control => !hideControls.some(key => control.key === key));
+    }
+  };
+
+  getType = ({key, type}) => {
+    const {readonly} = this.props;
+    if (['area', 'uploadImg'].includes(type)){
+      return type;
+    } else if (!readonly) {
+      return type;
+    } else if (readonly === true) {
+      return 'readonly';
+    } else if (Array.isArray(readonly) && readonly.some(readonlyKey => readonlyKey === key)) {
+      return 'readonly';
+    } else {
+      return type;
+    }
+  };
+
+  specialProps = (type, {key, props={}, type:originType}) => {
+    if (type === 'readonly') {
+      if (originType === 'textArea') {
+        return {
+          type: 'textArea',
+          readonly: true,
+          onBlur: this.onExitValid.bind(this, key)
+        }
+      } else if (originType === 'uploadImg') {
+        const commonProps = this.props.buildSuperUploadProps ? this.props.buildSuperUploadProps() : {};
+        return {
+          ...props,
+          ...commonProps,
+          readonly: true,
+          onBlur: this.onExitValid.bind(this, key)
+        };
+      } else {
+        return {
+          onBlur: this.onExitValid.bind(this, key)
+        };
+      }
+    } else if (type === 'text' || type === 'textArea') {
+      return {
+        ...props,
+        onChange: this.onExitValid.bind(this, key),
+        onBlur: this.onChange.bind(this, key)
+      }
+    } else if (type === 'date') {
+      const propsObj = {
+        ...props,
+        onChange: this.onBlur.bind(this, key),
+        onBlur: this.onExitValid.bind(this, key)
+      };
+      if (this.props.onOpenChange && typeof this.props.onOpenChange === 'function') {
+        propsObj.onOpenChange = this.props.onOpenChange.bind(this, key);
+      }
+      return propsObj;
+    }else if (type === 'captcha'){
+      return {
+        ...props,
+        onChange: this.onBlur.bind(this, key),
+        onBlur: this.onExitValid.bind(this, key),
+        onGetCode: this.onGetCode.bind(this, key)
+      }
+    } else if (type === 'area'){
+      return {
+        ...props,
+        onChange: this.onBlur.bind(this, key),
+        onBlur: this.onExitValid.bind(this, key),
+        onAreaSearch: this.props.onAreaSearch
+      }
+    } else if (type === 'uploadImg') {
+      const commonProps = this.props.buildSuperUploadProps ? this.props.buildSuperUploadProps() : {};
+      return {
+        ...props,
+        ...commonProps,
+        onChange: this.onBlur.bind(this, key),
+        onBlur: this.onExitValid.bind(this, key)
+      };
+    } else if (type === 'double'){
+      return props
+    }else {
+      return {
+        ...props,
+        onChange: this.onBlur.bind(this, key),
+        onBlur: this.onExitValid.bind(this, key)
+      };
+    }
+  };
+
+  getControlProps = (control, status) => {
+    const {value={},readonly} = this.props;
+    const type = this.getType(control);
+    const props = this.specialProps(type, control);
+    return {
+      autoFocus: !!status,
+      type, ...props,
+      size: defaultSize,
+      value: makeString(value[control.key]),
+    };
+  };
+
+  getOptions = (key, options) => {
+    const higher = this.props.options || {};
+    return higher[key] || options;
+  };
+
+  toEmpty = (props) => {
+
+  };
+
+  toText = (props) => {
+    return <Controlled {...props} />;
+  };
+
+  toPassword = (props) => {
+    return <Controlled {...props} />;
+  };
+
+  toEditor = (props,control) => {
+    props.inputKey =control.key
+    return <Controlled {...props} />;
+  };
+
+  toSelectWriting = (props,control) => {
+    return <Controlled {...props} />;
+  };
+
+
+  toTextArea = (props, control) => {
+    if(control.allFullFather){
+      props.rows = control.rows;
+      props.maxLength = control.maxLength;
+      props.style = {
+        'resize': 'none'
+      };
+    }else{
+      props.autoSize = {minRows: 1, maxRows: 5};
+    }
+    return <Controlled {...props} />;
+  };
+
+  toNumber = (props) => {
+    props.defaultValue = props.value;
+    delete props.value;
+    return <Control {...props} />;
+  };
+  toDoubleInput=(props, control, cc)=>{
+    props.defaultValue = props.value;
+    props.doubleKey = props.key;
+    props.doubleValue = helper.getObject(cc, props.key);
+    props.onChangeKey1 = this.onChange.bind(this, props.key[0])
+    props.onChangeKey2 = this.onChange.bind(this, props.key[1])
+    delete props.value;
+    return <Control {...props} />;
+}
+  toSelect = (props, {options, key}) => {
+    props.getPopupContainer = this.getPopupContainer;
+    props.options = this.getOptions(key, options);
+    props.dropdownMatchSelectWidth = false;
+    return <Control {...props} />;
+  };
+  toTreeSelect = (props,filter) => {
+    const container = this.getContainer();
+    container && (props.getPopupContainer = container);
+    props.options = this.getOptions(filter);
+    props.onSearch = this.createSearchEvent(filter);
+    props.placeholder = filter.placeholder || '';
+    return <Control {...props} />;
+  };
+  createSearchEvent = (control) => {
+    if (this.props.onSearch) {
+      return value => this.props.onSearch(control.key, value, control);
+    } else {
+      return null;
+    }
+  };
+
+  createGetCodeEvent = (control) => {
+    if (this.props.onGetCode) {
+      return value => this.props.onGetCode(control.key, value, control);
+    } else {
+      return null;
+    }
+  };
+
+  toSearch = (props, control) => {
+    props.getPopupContainer = this.getPopupContainer;
+    props.options = this.getOptions(control.key, control.options);
+    props.onSearch = this.createSearchEvent(control);
+    props.dropdownMatchSelectWidth = false;
+    props.size = 'large';
+    return <Control {...props} />;
+  };
+
+  toDate = (props, {rule}) => {
+    props.getCalendarContainer = this.getPopupContainer;
+    props.style = {width: '100%'};
+    rule && (props.disabledDate = this.validDate(rule));
+    return <Control {...props} />;
+  };
+
+  toRadioGroup = (props, {key, options}) => {
+    props.options = this.getOptions(key, options);
+    return <Control {...props} />;
+  };
+
+  captcha = (props, control) => {
+    props.onGetCode = this.props.onGetCode;
+    return <Control {...props} />
+  }
+
+  toReadonly = (props, {options, key}) => {
+    props.value = getTitle(props.value, this.getOptions(key, options));
+    return <Control {...props} />;
+  };
+
+  selectSearch = (props, control) => {
+    props.getPopupContainer = this.getPopupContainer;
+    props.options = this.getOptions(control.key, control.options);
+    props.onSearch = this.createSearchEvent(control);
+    props.dropdownMatchSelectWidth = false;
+    return <Control {...props} />;
+  };
+
+  area = (props, {key,options}) => {
+    const {readonly} = this.props;
+    props.parentKey = key;
+    props.options = this.getOptions(key, options);
+    props.dropdownMatchSelectWidth = false;
+    props.readonly = readonly === true || Array.isArray(readonly) && readonly.some(readonlyKey => readonlyKey === key) ? true : false;
+    return <Control {...props} />;
+  };
+
+  uploadImg = (props, control) => {
+    const {readonly} = this.props;
+    props.required = control.required || false;
+    props.onFileChange = this.onFileChange.bind(this,control);
+    props.readonly = readonly === true || Array.isArray(readonly) && readonly.some(readonlyKey => readonlyKey === control.key) ? true : false;
+    return <Control {...props} />
+  };
+
+  toCascader = (props, control) => {
+    const container = this.getContainer();
+    container && (props.getPopupContainer = container);
+    props.options = control.options || [];
+    props.onSearch = this.createSearchEvent(control);
+    props.placeholder = props.placeholder || '';
+    props.loadData = this.createSearchEvent(control);
+    return <Control {...props} />;
+  };
+
+  toCheckbox = (props, control) => {
+    const options = control.options || [];
+    return <Checkbox.Group options={options} onChange={this.onBlur.bind(this, control.key)} value={this.props.value[control.key]} />
+  };
+
+  toControl = (props, control) => {
+    switch (props.type) {
+      case 'readonly':
+        return this.toReadonly(props, control);
+      case 'double':
+        return this.toDoubleInput(props, control, this.props.value);
+      case 'text':
+        return this.toText(props, control);
+      case 'number':
+        return this.toNumber(props, control);
+      case 'select':
+      case 'selectText':
+        return this.toSelect(props, control);
+      case 'search':
+      case 'searchText':
+        return this.toSearch(props, control);
+      case 'date':
+        return this.toDate(props, control);
+      case 'radioGroup':
+        return this.toRadioGroup(props, control);
+      case 'textArea':
+        return this.toTextArea(props, control);
+      case 'password':
+        return this.toPassword(props, control);
+      case 'editor':
+        return this.toEditor(props, control);
+      case 'selectWriting' :
+        return this.toSelectWriting(props,control)
+      case 'selectSearch':
+        return this.selectSearch(props, control);
+      case 'empty':
+        return this.toEmpty(props, control);
+      case 'captcha':
+        return this.captcha(props, control);
+      case 'area':
+        return this.area(props, control);
+      case 'uploadImg':
+        return this.uploadImg(props, control);
+      case 'cascader':
+        return this.toCascader(props, control);
+      case 'treeSelect':
+        return this.toTreeSelect(props, control);
+      case 'checkbox':
+        return this.toCheckbox(props, control);
+      default:
+        return 'type error';
+    }
+  };
+
+  toLabel = ({title, showAdd, key,showInfo,showInfoTitle}, type) => {
+    if (showAdd && (type !== 'readonly')) {
+      const onClick = this.onAdd.bind(this, key, title);
+      return <span>{title}<Icon role='add' type='plus-circle-o' onClick={onClick}/></span>;
+    } else if (showInfo){
+      return <span>{title}<Tooltip title={showInfoTitle}><Icon type="info-circle" /></Tooltip></span>
+    }
+    else {
+      return title;
+    }
+  };
+
+  toCol = (span, control) => {
+    const factor = control.span || 1;
+    const status = this.getValidState(control);
+    const controlProps = this.getControlProps(control, status);
+    const itemProps = {
+      label: this.toLabel(control, controlProps.type),
+      required: control.required,
+      validateStatus: status
+    };
+    const {checkable,onCheckItem} = this.props;
+    return control.type !== 'empty' ? (
+      <Col span={span * factor} key={control.key}>
+        {checkable && <Checkbox className={variables('SuperForm2').checkbox} onChange={onCheckItem.bind(this,control)} checked={control.checked} />}
+        <FormItem {...itemProps} className={checkable ? variables('SuperForm2').formItemWithCheckbox : '' } labelCol={{xs:{span: 24},sm:{span:8}}} wrapperCol={{xs:{span:24},sm:{span:16}}}>
+          {this.toControl(controlProps, control)}
+        </FormItem>
+      </Col>
+    ) : (
+      <Col span={span * factor} key={control.key} style={{height: '44px'}}/>
+    );
+  };
+
+  toCols = () => {
+    let {colNum=defaultColNum,allFullFather} = this.props;
+    if(allFullFather){
+      colNum = 1;
+    }
+    const span = 24 / colNum;
+    return this.getControls().map(control => {
+      if(allFullFather){
+        control.allFullFather = allFullFather;
+      }
+      return this.toCol(span, control)
+    });
+  };
+
+  render() {
+    this.initValidState();
+    const {layout='horizontal'} = this.props;
+    return (
+      <div className={variables('SuperForm2')}>
+        <Form layout={layout} style={{maxWidth: this.props.allFullFather ? '100%' : this.getMaxWidth()}}>
+          <Row gutter={20}>
+            {this.toCols()}
+          </Row>
+        </Form>
+      </div>
+    );
+  }
+}
+
+export default SuperForm2;

package/src/SuperIcon/SuperIcon.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import {Icon} from 'antd';
+
+const SuperIcon = ({type, style={}, ...props}) => {
+  if (!type) {
+    return <Icon style={style} {...props} />;
+  } else if (type.substring(0, 4) !== 'pld-') {
+    return <Icon type={type} style={style} {...props} />;
+  } else {
+    return <i className={`pldicon anticon anticon-${type}`} style={style} />
+  }
+};
+
+export default SuperIcon;

package/src/SuperPagination/SuperPagination.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Pagination} from 'antd';
+
+/**
+ * maxRecords: 最大记录数
+ * selRecords: [可选]已选记录条数
+ * currentPage：当前页码
+ * pageSize：页面大小
+ * align: 分页组件的对齐方式，默认居右
+ * pageSizeType: 字符串数组，页面大小规格
+ * description：字符串描述，类似'共有{maxRecords}条记录'
+ * onPageChange：跳转到新的一页时触发，原型func(pageNumber)
+ * onPageSizeChange: 页大小改变时触发，原型func(pageSize, pageNumber)
+ */
+class SuperPagination extends React.Component {
+  static propTypes = {
+    maxRecords: PropTypes.number,
+    selRecords: PropTypes.number,
+    currentPage: PropTypes.number,
+    pageSize:  PropTypes.number,
+    align: PropTypes.oneOf(['left', 'right', 'center']),
+    pageSizeType: PropTypes.array,
+    description: PropTypes.string,
+    style: PropTypes.object,
+    onPageNumberChange: PropTypes.func,
+    onPageSizeChange: PropTypes.func
+  };
+
+  onChange = (page) => {
+    const {callback = {}} = this.props;
+    const onPageNumberChange = this.props.onPageNumberChange || callback.onPageNumberChange;
+    onPageNumberChange && onPageNumberChange(page);
+  };
+
+  onShowSizeChange = (current, size) => {
+    const {callback = {}} = this.props;
+    const onPageSizeChange = this.props.onPageSizeChange || callback.onPageSizeChange;
+    onPageSizeChange && onPageSizeChange(size, current || 1);
+  };
+
+  render() {
+    const {currentPage, maxRecords, pageSize, pageSizeType, align, description, selRecords, page={}, option={}, style={}} = this.props;
+    const desp = description || (this.props.config || {}).pageDesp || '';
+    const props = {
+      current: currentPage || page.currentPage,
+      total: maxRecords || page.maxRecords,
+      pageSize: pageSize || page.pageSize,
+      showSizeChanger: true,
+      showQuickJumper: true,
+      pageSizeOptions: pageSizeType || option.pageSizeType || [],
+      onChange: this.onChange,
+      onShowSizeChange: this.onShowSizeChange,
+      showTotal: (total) => desp.replace('{maxRecords}', total).replace('{selRecords}', selRecords || 0),
+      style: Object.assign({}, style, {
+        display: 'inline-block',
+        textAlign: 'left',
+        verticalAlign: 'top'
+      })
+    };
+    return <div style={{textAlign: align || 'right'}}><Pagination {...props} /></div>;
+  }
+}
+
+export default SuperPagination;