easy3wui 1.5.55-beta2 → 1.5.55-beta5

package/lib/Easy3wEditBigTable/index.js

@@ -71,8 +71,7 @@ var Easy3wEditBigTable = function (_Component) {
     };
 
     _this.onGridRowsUpdated = function (objUpdated) {
-      var fromRow = objUpdated.fromRow,
-          fromRowData = objUpdated.fromRowData;
+      var fromRowData = objUpdated.fromRowData;
       var updated = objUpdated.updated;
       var _this$props = _this.props,
           touchAutoCompute = _this$props.touchAutoCompute,
@@ -83,7 +82,6 @@ var Easy3wEditBigTable = function (_Component) {
         // 数据变更-自动计算行数据
         updated = touchAutoCompute(objUpdated);
       }
-      console.log('onGridRowsUpdated', objUpdated, updated);
       var autoAddNumberIdxEdit = fromRowData.autoAddNumber_idx_edit;
 
       dataList[autoAddNumberIdxEdit] = (0, _extends3['default'])({}, fromRowData, updated);
@@ -98,22 +96,37 @@ var Easy3wEditBigTable = function (_Component) {
     };
 
     _this.onRowsSelected = function (rows) {
-      _this.setState({
-        arrSelectedIndexes: _this.state.arrSelectedIndexes.concat(rows.map(function (r) {
-          return r.rowIdx;
-        })) // 表格选择行索引
-      });
+      var arrValues = _this.state.arrValues;
+      var rowKey = _this.props.rowKey;
+
+      var arrValuesNew = arrValues.concat(rows.map(function (r) {
+        return r.row[rowKey];
+      })); // 表格选择行索引
+      _this.onSelectedRowsChange(arrValuesNew);
     };
 
     _this.onRowsDeselected = function (rows) {
-      var rowIndexes = rows.map(function (r) {
-        return r.rowIdx;
-      });
-      _this.setState({
-        arrSelectedIndexes: _this.state.arrSelectedIndexes.filter(function (i) {
-          return rowIndexes.indexOf(i) === -1;
-        }) // 表格选择行索引
+      var arrValues = _this.state.arrValues;
+      var rowKey = _this.props.rowKey;
+
+      var arrValuesNew = arrValues.filter(function (key) {
+        var flag = true;
+        rows.map(function (r) {
+          var row = r.row;
+
+          if (key === row[rowKey]) {
+            // 删除已取消选择的行
+            flag = false;
+          }
+          return r;
+        });
+        return flag;
       });
+      _this.onSelectedRowsChange(arrValuesNew);
+    };
+
+    _this.onSelectedRowsChange = function (arrValues) {
+      _this.setState({ arrValues: arrValues });
     };
 
     _this.touchAddRow = function () {
@@ -132,14 +145,14 @@ var Easy3wEditBigTable = function (_Component) {
       var _this$props3 = _this.props,
           onGridRowsUpdated = _this$props3.onGridRowsUpdated,
           dataList = _this$props3.dataList;
-      var arrSelectedIndexes = _this.state.arrSelectedIndexes;
+      var arrValues = _this.state.arrValues;
 
-      if (arrSelectedIndexes.length) {
+      if (arrValues.length) {
         var newArr = []; // 复制的新数组
-        arrSelectedIndexes.forEach(function (rowIdx) {
-          var newRow = (0, _extends3['default'])({}, dataList[rowIdx]);
+        arrValues.forEach(function (key) {
+          var newRow = (0, _extends3['default'])({}, dataList[key]);
           newArr.push(newRow);
-          return rowIdx;
+          return key;
         });
         var dataListNew = [].concat(dataList, newArr);
         if (onGridRowsUpdated && typeof onGridRowsUpdated === 'function') {
@@ -157,21 +170,36 @@ var Easy3wEditBigTable = function (_Component) {
     _this.deleteRow = function () {
       var _this$props4 = _this.props,
           dataList = _this$props4.dataList,
-          onGridRowsUpdated = _this$props4.onGridRowsUpdated;
-      var arrSelectedIndexes = _this.state.arrSelectedIndexes;
-
-      if (arrSelectedIndexes.length) {
-        var dataListNew = []; // 复制的新数组
-        dataList.forEach(function (row, index) {
-          if (arrSelectedIndexes.indexOf(index) === -1) {
-            dataListNew.push(row);
-          }
-          return index;
+          onGridRowsUpdated = _this$props4.onGridRowsUpdated,
+          objToolbarProps = _this$props4.objToolbarProps,
+          rowKey = _this$props4.rowKey;
+      var deleteRowInterface = objToolbarProps.deleteRowInterface;
+      var arrValues = _this.state.arrValues;
+
+      if (arrValues.length) {
+        // const dataListNew = []; // 删除选择行后的新数组
+        var dataListDel = []; // 要删除的行数组
+        var dataListNew = dataList.filter(function (row) {
+          var flag = true;
+          arrValues.map(function (key) {
+            if (key === row[rowKey]) {
+              dataListDel.push(row);
+              // 删除选择的行
+              flag = false;
+            }
+            return key;
+          });
+          return flag;
         });
+        if (deleteRowInterface && typeof deleteRowInterface === 'function') {
+          // 删除行接口
+          deleteRowInterface(dataListDel, arrValues);
+        }
         if (onGridRowsUpdated && typeof onGridRowsUpdated === 'function') {
           // 数据变更-回调函数
           onGridRowsUpdated('deleteRow', dataListNew);
         }
+        _this.onSelectedRowsChange([]); // 选择行清空
       } else {
         _modal2['default'].error({
           title: '错误',
@@ -255,7 +283,8 @@ var Easy3wEditBigTable = function (_Component) {
       var _this$props5 = _this.props,
           touchAutoCompute = _this$props5.touchAutoCompute,
           onGridRowsUpdated = _this$props5.onGridRowsUpdated,
-          dataList = _this$props5.dataList;
+          dataList = _this$props5.dataList,
+          rowKey = _this$props5.rowKey;
       // if (touchAutoCompute && typeof touchAutoCompute === 'function') { // 数据变更-自动计算行数据
       //   updated = touchAutoCompute(objUpdated);
       // }
@@ -277,8 +306,6 @@ var Easy3wEditBigTable = function (_Component) {
           // toRow 改变的单元格的新行序号
           // toRowId 改变的单元格的新行id
           // updated 改变的单元格的新值
-          var rowKey = _this.ReactDataGridRef.props.rowKey;
-
           updated = touchAutoCompute({ cellKey: objColumn.key, fromRow: autoAddNumberIdxView, toRow: autoAddNumberIdxView, fromRowId: row[rowKey], toRowId: row[rowKey], rowIds: [row[rowKey]], updated: updated, action: 'CELL_BATCH_CHANGE', fromRowData: row });
         }
         dataList[autoAddNumberIdxEdit] = (0, _extends3['default'])({}, row, updated);
@@ -297,10 +324,11 @@ var Easy3wEditBigTable = function (_Component) {
           sortDirection = _this$state.sortDirection;
       var _this$props6 = _this.props,
           dataList = _this$props6.dataList,
-          enableCellSelect = _this$props6.enableCellSelect;
+          enableCellSelect = _this$props6.enableCellSelect,
+          rowSelection = _this$props6.rowSelection;
 
       var rows = dataList;
-      if (enableCellSelect) {
+      if (enableCellSelect || rowSelection) {
         rows = _this.touchLoopDataBefore();
       }
       return Selectors.getRows({ rows: rows, filters: filters, sortColumn: sortColumn, sortDirection: sortDirection });
@@ -319,11 +347,12 @@ var Easy3wEditBigTable = function (_Component) {
     _this.touchLoopDataBefore = function () {
       var dataList = _this.props.dataList;
 
-      var rows = dataList.map(function (row, index) {
+      dataList.map(function (row, index) {
         // autoAddNumber_idx_edit 自动添加序号 数据更新时使用确定当前更新的行
-        return (0, _extends3['default'])({}, row, { autoAddNumber_idx_edit: index });
+        dataList[index] = (0, _extends3['default'])({}, row, { autoAddNumber_idx_edit: index });
+        return row;
       });
-      return rows;
+      return dataList;
     };
 
     _this.touchLoopData = function () {
@@ -485,11 +514,57 @@ var Easy3wEditBigTable = function (_Component) {
       return toolbar;
     };
 
+    _this.onCheckCellIsEditable = function (obj) {
+      var column = obj.column;
+      // column：当前列的信息。
+      // idx：当前单元格的索引。
+      // row：当前行的数据。
+      // rowIdx：当前行的索引
+
+      var editable = column.editable,
+          editor = column.editor;
+
+      if (editable || editor) {
+        // 单元格可编辑
+        return true; // 返回 true 表示允许编辑
+      } else {
+        return false; // 返回 false 表示禁止编辑
+      }
+    };
+
+    _this.touchRowRenderer = function (obj) {
+      var onCheckCellIsEditable = _this.props.onCheckCellIsEditable;
+      var renderBaseRow = obj.renderBaseRow,
+          columns = obj.columns,
+          row = obj.row,
+          idx = obj.idx;
+
+      var onCheckCellIsEditableNew = onCheckCellIsEditable || _this.onCheckCellIsEditable;
+      var columnsNew = [].concat(columns);
+      columns.map(function (column, index) {
+        if (onCheckCellIsEditableNew({ column: column, idx: idx, row: row })) {
+          columnsNew[index] = (0, _extends3['default'])({}, column, { cellClass: (column.cellClass || '') + ' custom-edit-cell' });
+        }
+        return column;
+      });
+      return _react2['default'].createElement(
+        'span',
+        null,
+        renderBaseRow((0, _extends3['default'])({}, obj, {
+          columns: [].concat(columnsNew)
+        }))
+      );
+    };
+
     _this.getReactDataGridProps = function () {
+      var arrValues = _this.state.arrValues;
       var _this$props8 = _this.props,
           enableCellSelect = _this$props8.enableCellSelect,
+          rowKey = _this$props8.rowKey,
           objToolbarProps = _this$props8.objToolbarProps,
-          rowSelection = _this$props8.rowSelection;
+          rowSelection = _this$props8.rowSelection,
+          onCheckCellIsEditable = _this$props8.onCheckCellIsEditable,
+          touchRowRenderer = _this$props8.touchRowRenderer;
 
       var objReactDataGridProps = {}; // ReactDataGrid属性对象
       // toolbar属性
@@ -506,6 +581,10 @@ var Easy3wEditBigTable = function (_Component) {
       if (enableCellSelect && typeof enableCellSelect === 'boolean') {
         objReactDataGridProps.enableCellSelect = enableCellSelect;
         objReactDataGridProps.onGridRowsUpdated = _this.onGridRowsUpdated; // 表格编辑
+        if (onCheckCellIsEditable) {
+          objReactDataGridProps.onCheckCellIsEditable = onCheckCellIsEditable; // 单元格是否可编辑
+        }
+        objReactDataGridProps.rowRenderer = touchRowRenderer || _this.touchRowRenderer; // 表格行渲染
       }
       // 表格行选择
       if (rowSelection && typeof rowSelection === 'boolean') {
@@ -515,8 +594,11 @@ var Easy3wEditBigTable = function (_Component) {
           onRowsSelected: _this.onRowsSelected,
           onRowsDeselected: _this.onRowsDeselected,
           selectBy: {
-            rowKey: 'id',
-            indexes: _this.state.arrSelectedIndexes
+            keys: {
+              rowKey: rowKey || 'id',
+              values: arrValues
+            }
+            // indexes: this.state.arrValues,
           }
         };
       } else if (rowSelection) {
@@ -534,7 +616,11 @@ var Easy3wEditBigTable = function (_Component) {
 
       var columnsNew = [].concat(columns);
       if (autoAddNumber && typeof autoAddNumber === 'boolean') {
-        columnsNew = [{ name: '序号', key: 'autoAddNumber_idx_view', resizable: true, width: 50 }].concat(columnsNew);
+        var objColumns = columns && columns.length > 0 ? columns[0] : {};
+        var _objColumns$frozen = objColumns.frozen,
+            frozen = _objColumns$frozen === undefined ? false : _objColumns$frozen;
+
+        columnsNew = [{ name: '序号', key: 'autoAddNumber_idx_view', resizable: true, width: 50, frozen: frozen }].concat(columnsNew);
       }
       _this.columns = columnsNew;
       return columnsNew;
@@ -616,7 +702,7 @@ var Easy3wEditBigTable = function (_Component) {
     }
     _this.state = {
       // 表格选择
-      arrSelectedIndexes: [], // 表格选择行索引
+      arrValues: [], // 表格选择行索引
       // 查询条件
       filters: {},
       // 排序--sort
@@ -644,6 +730,8 @@ var Easy3wEditBigTable = function (_Component) {
 
   // 表格选择---取消选择
 
+  // 改变选择状态
+
   // #endregion 表格选择
   // #region 右上角按钮处理--toolbar
   // 新增
@@ -687,6 +775,9 @@ var Easy3wEditBigTable = function (_Component) {
 
   // #endregion toolbar处理
   // #region 设置ReactDataGrid属性
+  // 在单元格设置为活动状态之前调用，返回一个布尔值以确定单元格是否可编辑
+
+  // 表格行渲染
 
   // 创建columns
 
@@ -707,7 +798,9 @@ var Easy3wEditBigTable = function (_Component) {
     var _props = this.props,
         totalFlag = _props.totalFlag,
         objOtherProps = _props.objOtherProps,
-        objToolbarProps = _props.objToolbarProps;
+        objToolbarProps = _props.objToolbarProps,
+        strReactDataGridStyle = _props.strReactDataGridStyle,
+        strAddReactDataGridStyle = _props.strAddReactDataGridStyle;
 
     var objReactDataGridProps = this.getReactDataGridProps();
     var columns = this.createColumns(); // 表头
@@ -715,7 +808,12 @@ var Easy3wEditBigTable = function (_Component) {
     return _react2['default'].createElement(
       'div',
       { style: { backgroundColor: '#fff' } },
-      _react2['default'].createElement(_reactDataGrid2['default'], (0, _extends3['default'])({
+      _react2['default'].createElement(
+        'style',
+        null,
+        strReactDataGridStyle || (strAddReactDataGridStyle || '') + '\n              .custom-edit-cell {  \n                background-color: #f6ffed;\n              }\n            '
+      ),
+      _react2['default'].createElement(_reactDataGrid2['default'], (0, _extends3['default'])({}, this.props, {
         ref: this.ReactDataGridRef,
         columns: columns // 表头
         // rows={rows}
@@ -762,5 +860,8 @@ var Easy3wEditBigTable = function (_Component) {
   return Easy3wEditBigTable;
 }(_react.Component);
 
+Easy3wEditBigTable.defaultProps = {
+  rowKey: 'autoAddNumber_idx_edit'
+};
 exports['default'] = Easy3wEditBigTable;
 module.exports = exports['default'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy3wui",
-  "version": "1.5.55-beta2",
+  "version": "1.5.55-beta5",
   "description": "easy3wui components for react",
   "keywords": [
     "react",