merge

2019-09-03 15:38:44 +08:00 · 2019-09-03 15:38:44 +08:00 · d429add1cd
parent b3cd55e135
commit d429add1cd
4 changed files with 158 additions and 5 deletions
--- a/docs/api.md
+++ b/docs/api.md
@ -83,6 +83,7 @@ import 'bee-table/build/Table.css';
 | [v2.2.2新增]showRowNum | 展示序号功能，false时不展示，true时展示默认情况，可传入自定义配置信息 | bool / obj:{name: '序号', key: '_index', // 在数据中存储的key值width: 50,base: 0,// 排序的基准值,为数字或者字母type:'number', // 排序类型,默认为number类型,支持单字母排序(type='ascii')} | false |
 | autoCheckedByClickRows | 设置为 false 时，表格行点击事件，不会自动勾选复选框 | bool | true |

+| autoSelect | 树型表格勾选时，是否开启子节点的联动 | bool | false |
 > 快捷键部分参考示例 (快捷键在table中的简单使用应用)

 *注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
@ -137,11 +138,35 @@ import 'bee-table/build/Table.css';
 | [v2.2.2新增]bgColor | 列背景颜色 | string | - |
 | [v2.2.2新增]titleAlign | 标题对齐方式 | 'left'\|'center'\|'right' | 'left' |
 | [v2.2.2新增]contentAlign | 内容对齐方式 | 'left'\|'center'\|'right' | 'left' |
-| [v2.2.2新增]required | 必填项,列标题展示红色星号 | bool | false |
+| [v2.2.2新增]required | 必填项的列标题展示红色星号 | bool | false |
+| isShow | 是否展示该列数据 | bool | true |
+| cellMenu | 渲染单元格内操作按钮 | object | - |
+
+#### [v2.2.x新增] cellMenu
+
+属性的参数说明如下:
+
+|名称|说明|类型|必填|默认值|
+|---|---|---|---|---|
+|menu|自定义的操作列表|array|是|[]|
+|icon|自定义图标|string/element|否|三圆点图标`<Icon type='uf-3dot-h'/>`|
+|iconSize|自定义图标时可能会出现右侧对齐的问题,需要手动调整图标大小|number|否|21|
+|trigger|控制下拉菜单的出现方式|'hover'\|'click'|否|'hover'|
+|className|下拉菜单的类名|string|否|-|
+
+其中,menu的配置如下:
+|名称|说明|类型|必填|默认值|
+|---|---|---|---|---|
+|key|每一项需要的唯一的key值|string|true|-|
+|text|每一项的标题|string|false|-|
+|icon|每一项的图标信息|string/element|false|-|
+|callback|点击行后的回调函数|Function(text,record,index)|false|-|

 #### [v2.2.2新增]fieldType

-fieldType属性控制了不同类型数据的渲染方式,其优先级低于render属性。目前，已有`string`,`number`,`currency`,`bool`,`link`,`date`类型，支持自定义配置(`string`类型为默认类型)。
+fieldType属性控制了不同类型数据的渲染方式,其优先级低于render属性。目前，已有`string`,`number`,`currency`,`bool`,`link`,`date`,`select`,`stringChinese`类型，支持自定义配置(`string`类型为默认类型)。
+
+- stringChinese类型的渲染同string,在配合高阶组件sort使用时,可支持中文拼音排序

 - numberConfig

@ -194,6 +219,15 @@ fieldType属性控制了不同类型数据的渲染方式,其优先级低于rend

 *需要单独安装[moment.js](http://momentjs.cn/),并将moment对象传入*

+- selectConfig
+
+|名称|说明|类型|必填项|默认值|
+|---|---|---|---|---|
+|options|下拉的key/value对应关系|object|是|-|
+|defaultShow|找不到对应关系时的展示值|string|否|''|
+
+*无options时按string类型渲染*
+
 ### 高阶函数
 Table内部封装了七个高阶组件，接收基础 Table 组件作为输入，输出一个新的复杂 Table 组件。高阶组件让代码更具有复用性、逻辑性与抽象特征。

--- a/src/ColumnManager.js
+++ b/src/ColumnManager.js
@ -24,12 +24,24 @@ export default class ColumnManager {
      columns = dragHandleColumn.concat(columns);
    }
    columns = this.addOrderColumn(columns,showRowNum);
-    
+    columns = this.deleteColumnNotShow(columns);
    this.columns = columns || this.normalize(elements);

    this.originWidth = originWidth;
  }

+  // delete the column which does not show
+  deleteColumnNotShow = (columns) => {
+    let len = columns.length;
+    for(let i=0; i < len; i++) {
+      if(columns && columns[i] && columns[i].isShow === false){
+        columns.splice(i,1);
+        i--;
+      }
+    }
+    return columns;
+  }
+
  // 向数据列中添加一列:序号
  addOrderColumn = (columns, showRowNum) => {
    if(!showRowNum){
@ -207,6 +219,7 @@ export default class ColumnManager {

  reset(columns, elements, showRowNum) {
    columns = this.addOrderColumn(columns,showRowNum);
+    columns = this.deleteColumnNotShow(columns);
    this.columns = columns || this.normalize(elements);
    this._cached = {};
  }
--- a/src/Table.scss
+++ b/src/Table.scss
@ -128,6 +128,31 @@ $icon-color:#505F79;
        margin: 0;
      }
    }
+    td.u-table-inline-icon{
+      position: relative;
+      padding-right: 24px;
+      span.u-table-inline-op-icon{
+        position: absolute;
+        right: 0;
+        .uf{
+          display: block;
+          vertical-align: top;
+        }
+      }
+      span.u-table-inline-op-icon-hover{
+        visibility: hidden;
+      }
+    } 
+  }
+  tr.u-table-row-hover{
+    td.u-table-inline-icon{
+      span.u-table-inline-op-icon-hover{
+        visibility: visible;
+      }
+    }
+  }
+  .u-table-inline-op-icon-hidden{
+    visibility: hidden;
  }
  tr.tr-row-hover {
    background: $hover-bg-color-base;
@ -313,6 +338,7 @@ $icon-color:#505F79;
      }
      tr.u-table-row-hover{
        background:unquote("rgb(#{$table-row-hover-bg-color})");
+        
      }
    }
    &-expand-icon {
@ -1091,3 +1117,15 @@ $icon-color:#505F79;
    border-color: #F44336 !important;
  }
 }
+.u-dropdown{
+  ul.u-table-inline-op-dropdowm{
+    li.u-dropdown-menu-item{
+      padding: 0 20px 0 10px;
+      height: 30px;
+      line-height: 30px;
+      i.uf{
+        font-size: 12px;
+      }
+    }
+  }
+}
--- a/src/TableCell.js
+++ b/src/TableCell.js
@ -4,6 +4,9 @@ import objectPath from 'object-path';
 import i18n from './lib/i18n';
 import { getComponentLocale } from 'bee-locale/build/tool';
 import { formatMoney } from './lib/utils';
+import Dropdown from 'bee-dropdown';
+import Menu from 'bee-menus';
+const { Item } = Menu;
 const propTypes = {
    record: PropTypes.object,
    clsPrefix: PropTypes.string,
@ -19,6 +22,9 @@ class TableCell extends Component{
     super(props);
     this.isInvalidRenderCellText = this.isInvalidRenderCellText.bind(this);
     this.handleClick = this.handleClick.bind(this);
+     this.state = {
+       showDropdowm: false
+     }
 }
  isInvalidRenderCellText(text) {
    return text && !React.isValidElement(text) &&
@ -108,13 +114,66 @@ class TableCell extends Component{
    </span>;
  }

-  // 渲染时间类型
+  // 渲染时间类型-l
  renderDate = ( data, config={}) => {
    const { moment, format } = config;
    if(!moment)return data;
    return moment(data).format(format || 'YYYY-MM-DD');
  }

+  // 渲染下拉类型，主要为编辑表格铺垫
+  renderSelect = ( data, config={}) => {
+    if(config.options){
+      data = config.options[data] || config.defaultShow;
+    }
+    return data;
+  }
+
+
+  // 渲染行内菜单
+  renderColumnMenu = (colMenu, text, record, index) => {
+    if (!colMenu) return null;
+    let { menu, trigger = 'hover', className = '', icon = <i className='uf uf-3dot-h' />, iconSize = 21 } = colMenu;
+    let items = [];
+    items = menu.map((item) => {
+      return <Item key={item.key} onClick={() => { this.onClickColMenu(item.callback, text, record, index) }}>
+        {item.icon}
+        {item.text}
+      </Item>
+    })
+    if (items.length === 0) return null;
+    className += ' u-table-inline-op-dropdowm'
+    let menus = <Menu className={className}>{items}</Menu>;
+    let top = `calc(50% - ${iconSize / 2}px)`;
+    let visibility = this.state.showDropdowm ? 'visible' : '';
+    let iconClassName = `u-table-inline-op-icon u-table-inline-op-icon-hover`;
+    return <Dropdown
+      trigger={[trigger]}
+      overlay={menus}
+      animation="slide-up"
+      onVisibleChange={this.changeShowDropdowm}
+    >
+      {<span className={iconClassName} style={{ fontSize: iconSize, top: top, visibility: visibility }}>{icon}</span>}
+    </Dropdown>
+  }
+
+  // 下拉按钮状态改变，点击后保持图标常驻
+  changeShowDropdowm = (val) => {
+    this.setState({
+      showDropdowm: val
+    })
+  }
+
+  // 菜单点击事件
+  onClickColMenu = (callback, text, record, index) => {
+    if (callback) {
+      callback(text, record, index);
+    }
+    this.setState({
+      showDropdowm: false,
+    })
+  }
+
  render() {
    const { record, indentSize, clsPrefix, indent,
            index, expandIcon, column ,fixed,showSum, bodyDisplayInRow,lazyStartIndex,lazyEndIndex} = this.props;
@ -136,6 +195,7 @@ class TableCell extends Component{
      }
    }

+    let colMenu = this.renderColumnMenu(column.cellMenu, text, record, index);
    // 根据 fieldType 来渲染数据
    if(!render){
      switch(column.fieldType){
@ -173,6 +233,10 @@ class TableCell extends Component{
          text = this.renderDate(text, column.dateConfig);
          break;
        }
+        case 'select':{
+          text = this.renderSelect(text, column.selectConfig);
+          break;
+        }
        default : {
          break;
        }
@ -213,6 +277,9 @@ class TableCell extends Component{
    if(expandIcon && expandIcon.props.expandable){ 
      className = className+` ${clsPrefix}-has-expandIcon`
    }
+    if(colMenu){
+      className += ' u-table-inline-icon'
+    }
    return (
      <td
        colSpan={colSpan}
@ -220,11 +287,12 @@ class TableCell extends Component{
        className={className}
        onClick={this.handleClick}
        title={title}
-        style={{color:fontColor,backgroundColor:bgColor}}
+        style={{color:fontColor,backgroundColor:bgColor,}}
      >
        {indentText}
        {expandIcon}
        {text}
+        {colMenu}
      </td>
    );
  }