easy3wui 1.5.64-beta.5 → 1.5.64-beta.7

package/assets/editBigTable.css

@@ -44,3 +44,31 @@
   padding: 4px;
   font-size: 14px;
 }
+.Easy3wEditBigTable .textEditor {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: 100%;
+  padding-block: 0;
+  padding-inline: 6px;
+  border: 2px solid #ccc;
+  vertical-align: top;
+  color: var(--rdg-color);
+  background-color: var(--rdg-background-color);
+  font-family: inherit;
+  font-size: var(--rdg-font-size);
+}
+.Easy3wEditBigTable .textEditor:focus {
+  border-color: var(--rdg-selection-color);
+  outline: none;
+}
+.Easy3wEditBigTable .textEditor:-ms-input-placeholder {
+  color: #999;
+  opacity: 1;
+}
+.Easy3wEditBigTable .textEditor::placeholder {
+  color: #999;
+  opacity: 1;
+}

package/assets/index.css

@@ -1528,3 +1528,31 @@ input.ant-input-number-input {
   padding: 4px;
   font-size: 14px;
 }
+.Easy3wEditBigTable .textEditor {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  box-sizing: border-box;
+  inline-size: 100%;
+  block-size: 100%;
+  padding-block: 0;
+  padding-inline: 6px;
+  border: 2px solid #ccc;
+  vertical-align: top;
+  color: var(--rdg-color);
+  background-color: var(--rdg-background-color);
+  font-family: inherit;
+  font-size: var(--rdg-font-size);
+}
+.Easy3wEditBigTable .textEditor:focus {
+  border-color: var(--rdg-selection-color);
+  outline: none;
+}
+.Easy3wEditBigTable .textEditor:-ms-input-placeholder {
+  color: #999;
+  opacity: 1;
+}
+.Easy3wEditBigTable .textEditor::placeholder {
+  color: #999;
+  opacity: 1;
+}

package/lib/Easy3wEditBigTable/index.js

@@ -34,16 +34,12 @@ var _reactDataGrid = require('react-data-grid');
 
 var _reactDataGrid2 = _interopRequireDefault(_reactDataGrid);
 
-var _reactDataGridAddons = require('react-data-grid-addons');
+require('react-data-grid/lib/styles.css');
 
 var _xlsx = require('xlsx');
 
 var _xlsx2 = _interopRequireDefault(_xlsx);
 
-var _numeral = require('numeral');
-
-var _numeral2 = _interopRequireDefault(_numeral);
-
 var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
@@ -54,9 +50,6 @@ var _Easy3wEditBigTableForm2 = _interopRequireDefault(_Easy3wEditBigTableForm);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-/* eslint-disable no-alert */
-var Selectors = _reactDataGridAddons.Data.Selectors;
-
 var Easy3wEditBigTable = function (_Component) {
   (0, _inherits3['default'])(Easy3wEditBigTable, _Component);
 
@@ -69,18 +62,48 @@ var Easy3wEditBigTable = function (_Component) {
       _this[pureComponentName] = that;
     };
 
+    _this.touchCreateColumns = function (columns) {
+      var _this$props = _this.props,
+          _this$props$autoAddNu = _this$props.autoAddNumber,
+          autoAddNumber = _this$props$autoAddNu === undefined ? true : _this$props$autoAddNu,
+          selectedFlag = _this$props.selectedFlag;
+
+      if (autoAddNumber) {
+        columns.unshift({
+          name: '序号',
+          key: 'index',
+          renderCell: function renderCell(_ref) {
+            var rowIdx = _ref.rowIdx;
+            return rowIdx + 1;
+          }
+        });
+      }
+      if (selectedFlag) {
+        columns.unshift(_reactDataGrid.SelectColumn);
+      }
+      return columns;
+    };
+
     _this.touchDP = function () {
-      var rows = _this.props.rows;
+      var dataList = _this.props.dataList;
 
-      var arrOriginalRows = [].concat(rows); // 原始数据
+      var arrOriginalRows = [].concat(dataList); // 原始数据
       var _this$state = _this.state,
           objFilters = _this$state.objFilters,
           sortColumns = _this$state.sortColumns;
 
       var arrRows = [].concat(arrOriginalRows);
+      var numFlag = false;
       if (objFilters.enabled) {
         // 启用筛选条件
         arrRows = _this.touchFilter(objFilters, arrOriginalRows);
+        numFlag = true;
+      }
+      if (!numFlag) {
+        arrRows.map(function (item, index) {
+          item.autoAddNumber_idx_edit = index;
+          return item;
+        });
       }
       if (sortColumns.length > 0) {
         // 有排序字段
@@ -93,7 +116,8 @@ var Easy3wEditBigTable = function (_Component) {
       var objFiltersNew = (0, _extends5['default'])({}, objFilters);
       delete objFiltersNew.enabled;
       var arrFilterKeys = Object.keys(objFiltersNew);
-      return arrRows.filter(function (r) {
+      return arrRows.filter(function (r, index) {
+        r.autoAddNumber_idx_edit = index;
         var filterFlag = true;
         arrFilterKeys.map(function (key) {
           filterFlag = filterFlag && (objFilters[key] || objFilters[key] === 0 ? r[key] && r[key].includes(objFilters[key]) : true);
@@ -114,7 +138,7 @@ var Easy3wEditBigTable = function (_Component) {
         }
         return true;
       });
-      return arrRows.sort(function (a, b) {
+      var arr = arrRows.sort(function (a, b) {
         // const comparator = getComparator(objSortColumns.columnKey);
         var compResult = 0; // 比较结果
         switch (dataType) {
@@ -162,6 +186,7 @@ var Easy3wEditBigTable = function (_Component) {
           return compResult;
         }
       });
+      return arr;
     };
 
     _this.touchcountTotal = function () {
@@ -306,18 +331,18 @@ var Easy3wEditBigTable = function (_Component) {
     };
 
     _this.touchAddRow = function () {
-      var _ref;
+      var _ref2;
 
       var rowKey = _this.props.rowKey;
-      var rows = _this.props.rows;
+      var dataList = _this.props.dataList;
 
-      _this.saveEditBigTableModelZJ('touchAddRow', [].concat(rows, [(_ref = {}, _ref[rowKey] = 'add_' + (rows.length - 1) + '_' + new Date().getTime(), _ref)]));
+      _this.saveEditBigTableModelZJ('touchAddRow', [].concat(dataList, [(_ref2 = {}, _ref2[rowKey] = 'add_' + (dataList.length - 1) + '_' + new Date().getTime(), _ref2)]));
     };
 
     _this.touchCopyRow = function () {
-      var _this$props = _this.props,
-          rows = _this$props.rows,
-          rowKey = _this$props.rowKey;
+      var _this$props2 = _this.props,
+          dataList = _this$props2.dataList,
+          rowKey = _this$props2.rowKey;
       var arrValuesInfo = _this.state.arrValuesInfo;
 
       if (arrValuesInfo.length) {
@@ -329,7 +354,7 @@ var Easy3wEditBigTable = function (_Component) {
           arrNew.push(newRow);
           return item;
         });
-        _this.saveEditBigTableModelZJ('touchCopyRow', [].concat(rows, arrNew));
+        _this.saveEditBigTableModelZJ('touchCopyRow', [].concat(dataList, arrNew));
       } else {
         _modal2['default'].error({
           title: '错误',
@@ -339,18 +364,18 @@ var Easy3wEditBigTable = function (_Component) {
     };
 
     _this.deleteRow = function () {
-      var rows = _this.props.rows;
+      var dataList = _this.props.dataList;
       var _this$state2 = _this.state,
           arrValues = _this$state2.arrValues,
           arrValuesInfo = _this$state2.arrValuesInfo;
-      var _this$props2 = _this.props,
-          objToolbarProps = _this$props2.objToolbarProps,
-          rowKey = _this$props2.rowKey;
+      var _this$props3 = _this.props,
+          objToolbarProps = _this$props3.objToolbarProps,
+          rowKey = _this$props3.rowKey;
       var deleteRowInterface = objToolbarProps.deleteRowInterface;
 
       if (arrValues.length) {
         var arrRows = []; // 删除数据后的新数组
-        rows.map(function (row) {
+        dataList.map(function (row) {
           var flag = true;
           arrValues.map(function (key) {
             if (key === row[rowKey]) {
@@ -379,12 +404,12 @@ var Easy3wEditBigTable = function (_Component) {
       }
     };
 
-    _this.getHearder = function () {
-      var _this$props3 = _this.props,
-          columns = _this$props3.columns,
-          arrColumnsKey = _this$props3.arrColumnsKey,
-          objSheet = _this$props3.objSheet,
-          arrColInfo = _this$props3.arrColInfo;
+    _this.touchGetHearder = function () {
+      var _this$props4 = _this.props,
+          columns = _this$props4.columns,
+          arrColumnsKey = _this$props4.arrColumnsKey,
+          objSheet = _this$props4.objSheet,
+          arrColInfo = _this$props4.arrColInfo;
 
 
       var arrColumnsKeyNew = ['id'];
@@ -425,17 +450,17 @@ var Easy3wEditBigTable = function (_Component) {
         var file = e.target.files[0];
         var reader = new FileReader();
         reader.onload = function (event) {
-          var _this$getHearder = _this.getHearder(),
-              arrColumnsKey = _this$getHearder.arrColumnsKey;
+          var _this$touchGetHearder = _this.touchGetHearder(),
+              arrColumnsKey = _this$touchGetHearder.arrColumnsKey;
 
           var data = event.target.result;
           var workbook = _xlsx2['default'].read(data, { type: 'binary' });
           var firstSheetName = workbook.SheetNames[0];
           var worksheet = workbook.Sheets[firstSheetName];
-          var rows = _xlsx2['default'].utils.sheet_to_json(worksheet, { header: arrColumnsKey });
-          rows.shift(); // 去掉表头
-          // const rowsView = this.getRows(rows); // 表格显示数据
-          _this.saveEditBigTableModelZJ('touchImport', rows);
+          var dataList = _xlsx2['default'].utils.sheet_to_json(worksheet, { header: arrColumnsKey });
+          dataList.shift(); // 去掉表头
+          // const rowsView = this.getRows(dataList); // 表格显示数据
+          _this.saveEditBigTableModelZJ('touchImport', dataList);
         };
         reader.readAsBinaryString(file);
       };
@@ -443,9 +468,9 @@ var Easy3wEditBigTable = function (_Component) {
     };
 
     _this.touchExport = function () {
-      var _this$getHearder2 = _this.getHearder(),
-          objSheet = _this$getHearder2.objSheet,
-          arrColInfo = _this$getHearder2.arrColInfo;
+      var _this$touchGetHearder2 = _this.touchGetHearder(),
+          objSheet = _this$touchGetHearder2.objSheet,
+          arrColInfo = _this$touchGetHearder2.arrColInfo;
 
       var rowsView = [].concat(_this.arrRows);
       // 计算 rowsView 中所有对象字段最多的长度
@@ -486,61 +511,46 @@ var Easy3wEditBigTable = function (_Component) {
     };
 
     _this.confirmCallbackBatchEditBigTable = function (objFormData, objColumn) {
-      var _this$props4 = _this.props,
-          rows = _this$props4.rows,
-          touchAutoCompute = _this$props4.touchAutoCompute,
-          rowKey = _this$props4.rowKey;
+      var _this$props5 = _this.props,
+          dataList = _this$props5.dataList,
+          touchAutoCompute = _this$props5.touchAutoCompute,
+          rowKey = _this$props5.rowKey;
 
       var rowsView = [].concat(_this.arrRows);
-      rowsView.map(function (row, index) {
-        var rowId = row[rowKey];
+      rowsView.map(function (row) {
+        // const rowId = row[rowKey];
+        var autoAddNumberIdxEdit = row.autoAddNumber_idx_edit;
         // const { [rowKey]:  } = row;
+
         var updated = (0, _extends5['default'])({}, objFormData);
         if (touchAutoCompute && typeof touchAutoCompute === 'function') {
           // 数据变更-自动计算行数据
-          // action 改变的动作类型，'CELL_UPDATE' 单元格更新，'CELL_BATCH_CHANGE' 单元格批量更新 CELL_UPDATE, COLUMN_FILL, COPY_PASTE, CELL_DRAG
-          // cellKey 改变的单元格的key
-          // fromRow 改变的单元格的原来行序号
-          // fromRowData 改变的单元格的原来行数据
-          // fromRowId 改变的单元格的原来行id(行唯一标识)
-          // rowIds 所有被选中的行id
-          // toRow 改变的单元格的新行序号
-          // toRowId 改变的单元格的新行id
-          // updated 改变的单元格的新值
           updated = touchAutoCompute({
             cellKey: objColumn.key,
-            fromRow: index,
-            toRow: index,
-            fromRowId: row[rowKey],
-            toRowId: row[rowKey],
-            rowIds: [row[rowKey]],
             updated: updated,
-            action: 'CELL_BATCH_CHANGE',
-            fromRowData: row,
             toRowData: row
           });
         }
-        rows[rowId] = (0, _extends5['default'])({}, rows[rowId], updated);
-        rowsView[index] = (0, _extends5['default'])({}, rowsView[index], updated);
+        dataList[autoAddNumberIdxEdit] = (0, _extends5['default'])({}, dataList[autoAddNumberIdxEdit], updated);
         return row;
       });
-      _this.saveEditBigTableModelZJ('confirmCallbackBatchEditBigTable', rows);
+      _this.saveEditBigTableModelZJ('confirmCallbackBatchEditBigTable', dataList);
     };
 
-    _this.saveEditBigTableModelZJ = function (operationType, rows) {
+    _this.saveEditBigTableModelZJ = function (operationType, dataList) {
       var saveEditBigTableModel = _this.props.saveEditBigTableModel;
 
       if (saveEditBigTableModel && typeof saveEditBigTableModel === 'function') {
         // 数据变更-回调函数
-        saveEditBigTableModel(operationType, rows);
+        saveEditBigTableModel(operationType, dataList);
       }
     };
 
     _this.saveEditBigTableZJ = function () {
       var objToolbarProps = _this.props.objToolbarProps;
 
-      var _ref2 = objToolbarProps || {},
-          saveEditBigTable = _ref2.saveEditBigTable;
+      var _ref3 = objToolbarProps || {},
+          saveEditBigTable = _ref3.saveEditBigTable;
 
       if (saveEditBigTable && typeof saveEditBigTable === 'function') {
         // 数据变更-回调函数
@@ -556,8 +566,40 @@ var Easy3wEditBigTable = function (_Component) {
       });
     };
 
+    _this.touchRowsChange = function (updatedRows, obj) {
+      var indexes = obj.indexes,
+          column = obj.column;
+      var _this$props6 = _this.props,
+          touchAutoCompute = _this$props6.touchAutoCompute,
+          dataList = _this$props6.dataList;
+      var key = column.key;
+
+      if (indexes && indexes.length) {
+        indexes.map(function (index) {
+          var updated = updatedRows[index];
+          var _updated = updated,
+              autoAddNumberIdxEdit = _updated.autoAddNumber_idx_edit;
+
+          if (touchAutoCompute && typeof touchAutoCompute === 'function') {
+            var _updated2;
+
+            updated = touchAutoCompute({
+              cellKey: key,
+              updated: (_updated2 = {}, _updated2[column.key] = updated[column.key], _updated2),
+              toRowData: _this.arrRows[index]
+            });
+          }
+          dataList[autoAddNumberIdxEdit] = (0, _extends5['default'])({}, dataList[autoAddNumberIdxEdit], updated);
+          return index;
+        });
+        _this.saveEditBigTableModelZJ('touchRowsChange', dataList);
+      }
+    };
+
     _this.touchSelectedRowsChange = function (selectedRows) {
-      var rowKey = _this.props.rowKey;
+      var _this$props7 = _this.props,
+          rowKey = _this$props7.rowKey,
+          touchSelectedRowsChangeCB = _this$props7.touchSelectedRowsChangeCB;
 
       var arrValuesInfo = Array.from(selectedRows);
       var arrValues = [];
@@ -565,6 +607,9 @@ var Easy3wEditBigTable = function (_Component) {
         arrValues.push(item[rowKey]);
         return item;
       });
+      if (touchSelectedRowsChangeCB && typeof touchSelectedRowsChangeCB === 'function') {
+        touchSelectedRowsChangeCB(arrValues, arrValuesInfo, selectedRows);
+      }
       _this.setState({
         // 表格选择
         selectedRows: selectedRows, // 选中的行
@@ -596,9 +641,9 @@ var Easy3wEditBigTable = function (_Component) {
   Easy3wEditBigTable.prototype.componentWillUnmount = function componentWillUnmount() {
     var objToolbarProps = this.props.objToolbarProps;
 
-    var _ref3 = objToolbarProps || {},
-        _ref3$unloadSaveFlag = _ref3.unloadSaveFlag,
-        unloadSaveFlag = _ref3$unloadSaveFlag === undefined ? true : _ref3$unloadSaveFlag;
+    var _ref4 = objToolbarProps || {},
+        _ref4$unloadSaveFlag = _ref4.unloadSaveFlag,
+        unloadSaveFlag = _ref4$unloadSaveFlag === undefined ? true : _ref4$unloadSaveFlag;
     // unloadSaveFlag 是否在卸载后保存 true 需要保存 false 不需要保存
 
 
@@ -626,7 +671,9 @@ var Easy3wEditBigTable = function (_Component) {
   };
   // 绑定组件
 
+  // #region 表头列处理
 
+  // #endregion 表头列处理
   // #region 数据处理
   // 数据处理
 
@@ -685,6 +732,10 @@ var Easy3wEditBigTable = function (_Component) {
 
   // #endregion 保存
 
+  // #region 表单数据编辑
+
+  // #endregion 表单数据编辑
+
   // #region 行选择
 
 
@@ -702,11 +753,11 @@ var Easy3wEditBigTable = function (_Component) {
         selectedRows = _state.selectedRows;
     var _props = this.props,
         columns = _props.columns,
-        rows = _props.rows,
         objToolbarProps = _props.objToolbarProps,
         rowKey = _props.rowKey,
         topTotalFlag = _props.topTotalFlag,
-        bottomTotalFlag = _props.bottomTotalFlag;
+        bottomTotalFlag = _props.bottomTotalFlag,
+        objOtherProps = _props.objOtherProps;
     // #region 表格数据处理，排序(sort)、筛选(filter)
 
     this.arrRows = this.touchDP();
@@ -726,8 +777,11 @@ var Easy3wEditBigTable = function (_Component) {
       { className: (0, _classnames2['default'])(['Easy3wEditBigTable']) },
       objToolbarProps ? this.getToolbar() : '',
       _react2['default'].createElement(_reactDataGrid2['default'], (0, _extends5['default'])({}, objPrps, {
-        columns: columns // 表头
-        , rows: this.arrRows // 行数据
+        columns: this.touchCreateColumns(columns) // 表头
+        , defaultColumnOptions: {
+          resizable: true // 可调整列宽
+        },
+        rows: this.arrRows // 行数据
         , headerRowHeight: objFilters.enabled ? 70 : undefined // 表头高度
         // 排序
         , sortColumns: sortColumns // 排序字段
@@ -738,7 +792,10 @@ var Easy3wEditBigTable = function (_Component) {
         },
         selectedRows: selectedRows,
         onSelectedRowsChange: this.touchSelectedRowsChange
-      })),
+        // 表格编辑时触发
+        , onRowsChange: this.touchRowsChange
+        // 其它属性
+      }, objOtherProps)),
       visible ? _react2['default'].createElement(_Easy3wEditBigTableForm2['default'] // 批量录入Modal
       , { visible: visible // 是否显示
         , objOtherParameters: {
@@ -754,10 +811,12 @@ var Easy3wEditBigTable = function (_Component) {
   };
 
   return Easy3wEditBigTable;
-}(_react.Component);
+}(_react.Component); /* eslint-disable no-param-reassign */
+/* eslint-disable no-alert */
+
 
 Easy3wEditBigTable.defaultProps = {
-  rowKey: 'id' // 表格主键 原始数据索引
+  rowKey: 'autoAddNumber_idx_edit' // 表格主键 原始数据索引
 };
 exports['default'] = Easy3wEditBigTable;
 module.exports = exports['default'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy3wui",
-  "version": "1.5.64-beta.5",
+  "version": "1.5.64-beta.7",
   "description": "easy3wui components for react",
   "keywords": [
     "react",