es-form-table/packages/es-form-table/elem.props.js

基于element-ui-form和table两大组件进一步改良的控件，目的是为了解放前端在表单这块的操作

/*字段映射*/
const fieldMappingObjectKey = {

}
const fieldMappingArrayKey = {
  'title': 'label',
  'dataIndex': 'prop'
}

const fieldMappingObject = function (realProps) {
  const res = {};
  Object.keys(realProps).forEach(key => {
    if(fieldMappingObjectKey[key]){
      res[fieldMappingObjectKey[key]] = realProps[key];
    }else{
      res[key] = realProps[key];
    }
  })
  return res
}

const fieldMappingArray = function (esProps, realProps=[]) {
  var res = [];
  realProps.forEach(v => {
    var cv = Object.assign({}, esProps, {...v});
    if(cv.type === 'selection'){
      if(cv.display === 'radio'){
        cv.label = '';
        delete cv.type
      }else{
        cv.display = 'checkbox'
      }
    }
    Object.keys(fieldMappingArrayKey).forEach(k => {
      if(cv.hasOwnProperty(k)){
        cv[fieldMappingArrayKey[k]] = cv[k];
        delete cv[k]
      }
    });
    res.push(cv)
  })
  return res
}

const FormProps = {
  'inline': false,
  'label-position': 'right',
  'label-width': undefined,
  'label-suffix': undefined,
  'hide-required-asterisk': false,
  'show-message': true,
  'inline-message': false,
  'status-icon': false,
  'validate-on-rule-change': true,
  'size': undefined,
  'disabled': false,
}

const EsFormProps = {
  'inline': true,
}

const TableProps = {
  'data': undefined,
  'height': undefined,         /*Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。*/
  'max-height': undefined,     /*Table 的最大高度。合法的值为数字或者单位为 px 的高度*/
  'stripe': false,             /*是否为斑马纹 table*/
  'border': false,             /*是否带有纵向边框	*/
  'size': undefined,
  'fit': true,
  'show-header': true,
  'highlight-current-row': false,
  'current-row-key': undefined,
  'row-class-name': undefined,
  'row-style': undefined,
  'cell-class-name': undefined,
  'cell-style': undefined,
  'header-row-class-name': undefined,
  'header-row-style': undefined,        /*表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style*/
  'header-cell-class-name': undefined,
  'header-cell-style': undefined,
  'row-key': undefined,
  'empty-text': '暂无数据',
  'default-expand-all': false,
  'expand-row-keys': undefined,
  'default-sort': undefined,
  'tooltip-effect': undefined,
  'show-summary': false,
  'sum-text': '合计',
  'summary-method': undefined,
  'span-method': undefined,
  'select-on-indeterminate': undefined,
  'indent': 16,
  'lazy': undefined,
  'load': undefined,
  'tree-props': { hasChildren: 'hasChildren', children: 'children' }
}

const EsTableProps = {}

const TableColumnProps = {
  'type': undefined,
  'index': undefined,
  'column-key': undefined,
  'label': undefined,
  'prop': undefined,
  'width': undefined,
  'min-width': undefined,
  'fixed': undefined,
  'render-header': undefined,
  'sortable': false,
  'sort-method': undefined,
  'sort-by': undefined,
  'sort-orders': undefined,
  'resizable': undefined,
  'formatter': undefined,
  'show-overflow-tooltip': false,
  'align': 'left',
  'header-align': undefined,
  'class-name': undefined,
  'label-class-name': undefined,
  'selectable': undefined,
  'reserve-selection': false,
  'filters': undefined,
  'filter-placement': undefined,
  'filter-multiple': true,
  'filter-method': undefined,
  'filtered-value': undefined,
}

const EsTableColumnProps = {
  'display': 'checkbox',
}

const PaginationProps = {
  'small': false,
  'background': false,
  'page-size': 10,
  'total': undefined,
  'page-count': undefined,
  'pager-count': 7,
  'current-page': 1,
  'layout': 'prev, pager, next, jumper',
  'page-sizes': [10, 20, 30, 40, 50, 100],
  'popper-class': undefined,
  'prev-text': undefined,
  'next-text': undefined,
  'disabled': false,
  'hide-on-single-page': undefined
}

const EsPaginationProps = {
  'prev-text': '上一页',
  'next-text': '下一页',
  'layout': 'total, sizes, prev, pager, next, jumper',
  'page-sizes': [10, 20, 50, 100],
}

function _mergeElemProps(component) {
  switch (component) {
    case 'Form':
      return Object.assign({}, FormProps, EsFormProps)
    case 'Table':
      return Object.assign({}, TableProps, EsTableProps)
    case 'Table-column':
      return Object.assign({}, TableColumnProps, EsTableColumnProps)
    case 'Pagination':
      return Object.assign({}, PaginationProps, EsPaginationProps)
  }
}

export function mergeElemProps(component, realProps) {
  var type = Object.prototype.toString.call(realProps);
  if(type === '[object Object]'){
    return Object.assign({}, _mergeElemProps(component), fieldMappingObject(realProps));
  }else if(type === '[object Array]'){
    return fieldMappingArray(_mergeElemProps(component), realProps)
  }else{
    return realProps
  }
}

export const PAGE_CURRENT = 'current-page';
export const PAGE_SIZE = 'page-size';