easy3wui 1.5.63 → 1.5.64-beta.2

package/lib/Easy3wEditBigTable copy/index.js

@@ -0,0 +1,920 @@
+// /* eslint-disable no-alert */
+// import React, { Component } from 'react';
+// import { Modal } from 'antd';
+// import ReactDataGrid from 'react-data-grid';
+// import { Toolbar, Data } from 'react-data-grid-addons';
+// import XLSX from 'xlsx';
+// import numeral from 'numeral';
+// import classnames from 'classnames';
+// import Easy3wEditBigTableForm from './Easy3wEditBigTableForm';
+
+// const { Selectors } = Data;
+// export default class Easy3wEditBigTable extends Component {
+//   static defaultProps = {
+//     rowKey: 'autoAddNumber_idx_edit', // 表格主键 原始数据索引
+//   };
+//   constructor(props) {
+//     super(props);
+//     const { bidPureComponent } = this.props;
+//     if (bidPureComponent && typeof bidPureComponent === 'function') {
+//       bidPureComponent(this);
+//     }
+//     const { dataList } = this.props;
+//     const rows = this.touchLoopDataNum(dataList); // 表格数据
+//     // const rowsView = this.getRows(rows); // 表格显示数据
+//     this.state = {
+//       // 表格选择
+//       arrValues: [], // 表格选择行索引
+//       arrValuesInfo: [], // 表格选择行数据
+//       // 表格数据
+//       rows, // 表格数据 原始数据
+//       rowsView: rows, // 表格数据 显示数据
+//       // 表格列
+//       // 查询条件
+//       filters: {},
+//       // 排序--sort
+//       sortColumn: null, // 排序列
+//       sortDirection: null, // 排序方向
+//       // 批量录入
+//       visible: false, // 隐藏批量录入Modal
+//       // 保存标识
+//       saveFlag: true, // 保存标识 true 已保存 false 未保存
+//     };
+//   }
+//   componentDidMount() {
+//   }
+//   componentWillReceiveProps(nextProps) {
+//     const { dataUpdateTime } = this.props;
+//     if (dataUpdateTime !== nextProps.dataUpdateTime) {
+//       // const rows = this.getRows(); // 显示行数据
+//       const rows = this.touchLoopDataNum(nextProps.dataList); // 表格数据
+//       const rowsView = this.getRows(rows); // 表格显示数据
+//       this.touchSetState({ rows, rowsView });
+//     }
+//   }
+//   componentWillUnmount() {
+//     const { objToolbarProps } = this.props;
+//     const { unloadSaveFlag = true } = objToolbarProps || {};
+//     // unloadSaveFlag 是否在卸载后保存 true 需要保存 false 不需要保存
+//     const { saveFlag } = this.state;
+//     // saveFlag 是否已保存 true 已保存 false 未保存
+//     const { saveEditBigTableZJ } = this;
+//     if (unloadSaveFlag) {
+//       if (saveFlag) {
+//         // 已保存
+//       } else {
+//         // 有变更-未保存
+//         Modal.confirm({
+//           title: '提示',
+//           content: '表格数据未保存, 是否保存？',
+//           okText: '保存',
+//           cancelText: '取消',
+//           onOk: () => {
+//             saveEditBigTableZJ();
+//           },
+//         });
+//       }
+//     }
+//   }
+//   // 绑定组件
+//   bidPureComponent = (pureComponentName, that) => {
+//     this[pureComponentName] = that;
+//   }
+//   // 获取列表
+//   ReactDataGridRef = (ref) => {
+//     if (ref) {
+//       this.ReactDataGridRef = ref;
+//     }
+//   }
+//   // 表格编辑
+//   onGridRowsUpdated = (objUpdated) => {
+//     const { fromRow, toRow, fromRowData, action, cellKey } = objUpdated;
+//     let { updated } = objUpdated;
+//     if (action === 'COPY_PASTE') {
+//       updated[cellKey] = fromRowData[cellKey];
+//     }
+//     const { touchAutoCompute } = this.props;
+//     const { rows, rowsView } = this.state;
+
+//     for (let i = fromRow; i <= toRow;) {
+//       const objRowToUpdate = rowsView[i] || {};
+//       // let rowToUpdate = rows[i];
+//       // let updatedRow = update(rowToUpdate, {$merge: updated});
+//       // rows[i] = updatedRow;
+
+//       if (touchAutoCompute && typeof touchAutoCompute === 'function') { // 数据变更-自动计算行数据
+//         updated = touchAutoCompute({ ...objUpdated, toRowData: { ...objRowToUpdate } });
+//       }
+//       const { autoAddNumber_idx_edit: autoAddNumberIdxEdit } = objRowToUpdate;
+//       rows[autoAddNumberIdxEdit] = { ...rows[autoAddNumberIdxEdit], ...updated };
+//       rowsView[i] = { ...objRowToUpdate, ...updated };
+//       i += 1;
+//     }
+
+//     this.onGridRowsUpdatedZJ('onGridRowsUpdated', rows, rowsView);
+//   }
+//   // #region 表格选择
+//   // 表格选择---选择
+//   onRowsSelected = (rows) => {
+//     let { arrValues, arrValuesInfo } = this.state;
+//     const { rowKey, onRowsSelectedCb } = this.props;
+//     const arrValuesNew = []; // 表格选择行索引
+//     const arrValuesInfoNew = []; // 表格选择行数据
+//     rows.map((r) => {
+//       arrValuesNew.push(r.row[rowKey]);
+//       arrValuesInfoNew.push(r.row);
+//       return r;
+//     });
+//     arrValues = arrValues.concat(arrValuesNew); // 表格选择行索引
+//     arrValuesInfo = arrValuesInfo.concat(arrValuesInfoNew); // 表格选择行数据
+//     if (onRowsSelectedCb && typeof onRowsSelectedCb === 'function') { // 表格选择回调函数
+//       onRowsSelectedCb('onRowsSelected', arrValues, arrValuesInfo, arrValuesNew, arrValuesInfoNew);
+//     }
+//     this.onSelectedRowsChange(arrValues, arrValuesInfo);
+//   }
+//   // 表格选择---取消选择
+//   onRowsDeselected = (rows) => {
+//     const { arrValuesInfo } = this.state;
+//     const { rowKey, onRowsSelectedCb } = this.props;
+//     const arrValuesNew = []; // 表格选择行索引
+//     const arrValuesInfoNew = []; // 表格选择行数据
+//     const arrSelected = []; // 已选择的行索引
+//     const arrSelectedInfo = []; // 已选择的行数据
+//     arrValuesInfo.filter((item) => {
+//       let flag = true;
+//       rows.map((r) => {
+//         const { row } = r;
+//         if (item[rowKey] === row[rowKey]) {
+//           // 删除已取消选择的行
+//           flag = false;
+//           arrSelected.push(item[rowKey]);
+//           arrSelectedInfo.push(item);
+//         }
+//         return r;
+//       });
+//       if (flag) {
+//         arrValuesNew.push(item[rowKey]);
+//         arrValuesInfoNew.push(item);
+//       }
+//       return flag;
+//     });
+//     if (onRowsSelectedCb && typeof onRowsSelectedCb === 'function') { // 表格选择回调函数
+//       onRowsSelectedCb('onRowsDeselected', arrValuesNew, arrValuesInfoNew, arrSelected, arrSelectedInfo);
+//     }
+//     this.onSelectedRowsChange(arrValuesNew, arrValuesInfoNew);
+//   }
+//   // 改变选择状态
+//   onSelectedRowsChange = (arrValues, arrValuesInfo) => {
+//     this.setState({ arrValues, arrValuesInfo });
+//   }
+//   // #endregion 表格选择
+//   // #region 右上角按钮处理--toolbar
+//   // 新增
+//   touchAddRow = () => {
+//     const { rows, rowsView } = this.state;
+//     const intRows = rows.length;
+//     const objNewRow = {
+//       autoAddNumber_idx_edit: intRows || 0, // 自动添加序号 原始数据的索引
+//       autoAddNumber_idx_view: intRows + 1, // 自动添加序号 显示数据的索引
+//     };
+//     const intRowsView = rowsView.length;
+//     const objNewRowView = {
+//       autoAddNumber_idx_edit: intRows || 0, // 自动添加序号 原始数据的索引
+//       autoAddNumber_idx_view: intRowsView + 1, // 自动添加序号 显示数据的索引
+//     };
+//     // objNewRow[rowKey] = require('uuid/v1')(); // 自定义主键
+//     this.onGridRowsUpdatedZJ('touchAddRow', [...rows, objNewRow], [...rowsView, objNewRowView]);
+//   }
+//   // 复制
+//   touchCopyRow = () => {
+//     let { rows, rowsView } = this.state;
+//     const { arrValues } = this.state;
+//     if (arrValues.length) {
+//       const newArr = []; // 复制的新数组
+//       arrValues.forEach((key) => {
+//         const newRow = { ...rows[key] };
+//         newArr.push(newRow);
+//         return key;
+//       });
+//       rows = [...rows, ...newArr];
+//       rowsView = [...rowsView, ...newArr];
+//       this.onGridRowsUpdatedZJ('touchCopyRow', rows, rowsView);
+//     } else {
+//       Modal.error({
+//         title: '错误',
+//         content: '请选择要复制的行',
+//       });
+//     }
+//   }
+//   // 删除
+//   deleteRow = () => {
+//     const { rows } = this.state;
+//     const { arrValues, arrValuesInfo } = this.state;
+//     const { objToolbarProps, rowKey } = this.props;
+//     const { deleteRowInterface } = objToolbarProps;
+//     if (arrValues.length) {
+//       const arrRows = []; // 删除数据后的新数组
+//       // rows = rows.map((row, index) => {
+//       rows.map((row, index) => {
+//         let flag = true;
+//         arrValues.map((key) => {
+//           if (key === row[rowKey]) {
+//             // 删除选择的行
+//             flag = false;
+//           }
+//           return key;
+//         });
+//         if (flag) {
+//           arrRows.push({ ...row, autoAddNumber_idx_edit: index });
+//         }
+//         return flag;
+//       });
+//       const rowsView = this.getRows(arrRows); // 表格显示数据
+//       if (deleteRowInterface && typeof deleteRowInterface === 'function') { // 删除行接口
+//         deleteRowInterface(arrValuesInfo, arrValues);
+//       }
+//       this.onGridRowsUpdatedZJ('deleteRow', arrRows, rowsView);
+//       this.onSelectedRowsChange([], []); // 选择行清空
+//     } else {
+//       Modal.error({
+//         title: '错误',
+//         content: '请选择要删除的行',
+//       });
+//     }
+//   }
+//   // 导入
+//   touchImport = () => {
+//     const input = document.getElementById('touchImportExcel');
+//     // input.type = 'file';
+//     input.onchange = (e) => {
+//       const file = e.target.files[0];
+//       const reader = new FileReader();
+//       reader.onload = (event) => {
+//         const { arrColumnsKey } = this.getHearder();
+//         const data = event.target.result;
+//         const workbook = XLSX.read(data, { type: 'binary' });
+//         const firstSheetName = workbook.SheetNames[0];
+//         const worksheet = workbook.Sheets[firstSheetName];
+//         const rows = XLSX.utils.sheet_to_json(worksheet, { header: arrColumnsKey });
+//         rows.shift(); // 去掉表头
+//         const rowsView = this.getRows(rows); // 表格显示数据
+//         this.onGridRowsUpdatedZJ('touchImport', rows, rowsView);
+//       };
+//       reader.readAsBinaryString(file);
+//     };
+//     input.click();
+//   }
+//   // 导出--数据
+//   touchExport = () => {
+//     const { objSheet, arrColInfo } = this.getHearder();
+//     // const filterDataList = this.getRows();
+//     const { rowsView } = this.state;
+//     // 计算 rowsView 中所有对象字段最多的长度
+//     let maxFieldsLength = 0;
+//     rowsView.forEach((item) => {
+//       const fieldsLength = Object.keys(item).length;
+//       if (fieldsLength > maxFieldsLength) {
+//         maxFieldsLength = fieldsLength;
+//       }
+//       return item;
+//     });
+//     if (maxFieldsLength > arrColInfo.length) {
+//       for (let i = arrColInfo.length; i < maxFieldsLength;) {
+//         arrColInfo.push({ hidden: true });
+//         i += 1;
+//       }
+//     }
+//     // 创建工作簿和工作表
+//     const worksheet = XLSX.utils.json_to_sheet([objSheet, ...rowsView], { skipHeader: true });
+//     worksheet['!cols'] = arrColInfo;
+//     const workbook = XLSX.utils.book_new();
+//     XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
+
+//     // 生成Excel文件并触发下载
+//     XLSX.writeFile(workbook, 'exported_data.xlsx');
+//   }
+//   // 批量录入--显示批量录入Modal
+//   showModalBatchEditBigTable = () => {
+//     this.setState({
+//       visible: true, // 显示批量录入Modal
+//     });
+//   }
+//   // 批量录入--隐藏批量录入Modal
+//   hideModalBatchEditBigTable = () => {
+//     this.setState({
+//       visible: false, // 隐藏批量录入Modal
+//     });
+//   }
+//   // 批量录入--确认回调
+//   confirmCallbackBatchEditBigTable = (objFormData, objColumn) => {
+//     const { rows, rowsView } = this.state;
+//     const { touchAutoCompute, rowKey } = this.props;
+//     // const rows = this.getRows();
+//     rowsView.map((row, index) => {
+//       const { autoAddNumber_idx_edit: autoAddNumberIdxEdit } = row;
+//       let updated = { ...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,
+//           action: 'CELL_BATCH_CHANGE',
+//           fromRowData: row,
+//           toRowData: row,
+//         });
+//       }
+//       rows[autoAddNumberIdxEdit] = { ...rows[autoAddNumberIdxEdit], ...updated };
+//       rowsView[index] = { ...rowsView[index], ...updated };
+//       return row;
+//     });
+//     this.onGridRowsUpdatedZJ('confirmCallbackBatchEditBigTable', rows, rowsView);
+//   }
+//   // #endregion 右上角按钮处理--toolbar
+//   // #region 数据处理
+//   // 表格视图数据
+//   getRows = (rows) => {
+//     const { filters, sortColumn, sortDirection } = this.state;
+//     // 预处理数据，替换 null或undefined 值, 避免查询时报错
+//     const cleanedRows = (rows || this.state.rows).map((row) => {
+//       const cleanedRow = {};
+//       Object.keys(row).forEach((key) => {
+//         if (row[key] === null || row[key] === undefined) {
+//           cleanedRow[key] = '';
+//         } else if (key === sortColumn) {
+//           cleanedRow[key] = this.checkNum(row[key]) ? Number(row[key]) : row[key] || ''; // 排序字段类型转换
+//         } else {
+//           cleanedRow[key] = row[key];
+//         }
+//       });
+//       return cleanedRow;
+//     });
+//     return Selectors.getRows({ rows: cleanedRows, filters, sortColumn, sortDirection });
+//   }
+//   // 数据长度
+//   getSize = () => {
+//     const { rowsView } = this.state;
+//     return rowsView.length;
+//   }
+//   // 表格数据函数
+//   rowGetter = (rowIdx) => {
+//     const { rowsView } = this.state;
+//     // autoAddNumber_idx_view 自动添加序号 显示数据的索引
+//     if (rowsView[rowIdx]) {
+//       rowsView[rowIdx].autoAddNumber_idx_view = rowIdx + 1;
+//     }
+//     return rowsView[rowIdx];
+//   }
+//   // 数据循环--设置数据序号
+//   touchLoopDataNum = (dataList) => {
+//     const arrDataList = [];
+//     dataList.map((row, index) => {
+//       // autoAddNumber_idx_edit 自动添加序号 原始数据的索引
+//       arrDataList.push({ ...row, autoAddNumber_idx_edit: index });
+//       return row;
+//     });
+//     return arrDataList;
+//   }
+//   // 设置组件state
+//   touchSetState = (objState, callback) => {
+//     // objState 要设置的state对象
+//     // callback 回调函数 非必须
+//     if (callback && typeof callback === 'function') {
+//       this.setState(objState, callback);
+//     } else {
+//       this.setState(objState);
+//     }
+//   }
+//   // 数据循环--处理后的数据
+//   touchLoopData = () => {
+//     const { rowsView } = this.state;
+//     const objTotal = {}; // 总计对象
+//     rowsView.map((row, index) => {
+//       this.columns.map((item, idx) => {
+//         const { name, key, totalFlag, numberFormat, unit } = item;
+//         if (totalFlag && typeof totalFlag === 'boolean') {
+//           if (index === 0) {
+//             objTotal[key] = {}; // 初始值
+//             objTotal[key].name = name; // 初始值
+//             objTotal[key].value = 0; // 初始值
+//             objTotal[key].numberFormat = numberFormat; // 格式化
+//             objTotal[key].unit = unit; // 格式化
+//           }
+//           const intData = Number(row[key]) || 0;
+//           objTotal[key].value = (objTotal[key].value || 0) + intData;
+//         }
+//         return idx;
+//       });
+//       return index;
+//     });
+//     return objTotal;
+//   }
+//   // 导入导出表头
+//   getHearder = () => {
+//     const { columns } = this.props;
+//     const { arrColumnsKey, objSheet, arrColInfo } = this.props;
+
+//     const arrColumnsKeyNew = ['id'];
+//     const objSheetNew = { id: 'id' };
+//     // 定义列信息，隐藏第一列（A列）
+//     const arrColInfoNew = [
+//       { hidden: true }, // A列
+//     ];
+//     columns.forEach((column) => {
+//       const { key, name, hiddeKeys } = column;
+//       objSheetNew[key] = name;
+//       arrColumnsKeyNew.push(key);
+//       arrColInfoNew.push({});
+//       if (hiddeKeys) {
+//         const arrHiddenKeys = hiddeKeys.split(',');
+//         arrHiddenKeys.map((item) => {
+//           if (item === key) {
+//             // 隐藏列与显示列相同，则不添加入表头
+//           } else {
+//             objSheetNew[item] = item;
+//             arrColumnsKeyNew.push(item);
+//             arrColInfoNew.push({
+//               hidden: true,
+//             });
+//           }
+//           return item;
+//         });
+//       }
+//     });
+
+//     return { arrColumnsKey: arrColumnsKey || arrColumnsKeyNew, objSheet: objSheet || objSheetNew, arrColInfo: arrColInfo || arrColInfoNew };
+//   }
+//   // #endregion 数据处理
+
+//   // #region 查询条件
+//   // 表头排序
+//   onGridSort = (sortColumn, sortDirection) => {
+//     this.setState({ sortColumn, sortDirection }, () => {
+//       const rowsView = this.getRows();
+//       this.touchSetState({ rowsView });
+//     });
+//   }
+//   // 获取查询内容
+//   getValidFilterValues = (columnId) => {
+//     const { rows } = this.state;
+//     const { columns } = this.props;
+//     const column = columns.find(item => item.key === columnId);
+//     const { options, isTransformFlag } = column;
+//     const values = [];
+//     rows.map((r) => {
+//       if (r[columnId] === '' || r[columnId] === null || r[columnId] === undefined) {
+//         return r;
+//       } else {
+//         values.push(r[columnId]);
+//         return r;
+//       }
+//     });
+//     const arrOptionsLabel = [];
+//     const arrValues = values.filter((item, i, a) => {
+//       const flag = i === a.indexOf(item);
+//       if (flag && isTransformFlag) {
+//         let strLabel = '';
+//         let isLabel = false;
+//         options.map((option) => {
+//           if (option.value === item) {
+//             strLabel = option.label;
+//             isLabel = true;
+//           }
+//           return option;
+//         });
+//         arrOptionsLabel.push(isLabel ? strLabel : item);
+//       }
+//       return flag;
+//     });
+//     // arrOptionsLabel label数组
+//     // arrValues // value数组
+//     return isTransformFlag ? arrOptionsLabel : arrValues;
+//   }
+//   // 筛选条件变更
+//   handleFilterChange = (filter) => {
+//     const newFilters = Object.assign({}, this.state.filters);
+//     if (filter.filterTerm) {
+//       const { filterTerm, column } = filter;
+//       const { options, isTransformFlag } = column;
+//       if (options instanceof Array && options.length > 0 && filterTerm instanceof Array && isTransformFlag) {
+//         const arrFilterTerm = [];
+//         filterTerm.map((item) => {
+//           let isFlag = false;
+//           options.map((option) => {
+//             if (item.label === option.label) {
+//               arrFilterTerm.push({ value: option.value, label: option.value });
+//               isFlag = true;
+//             }
+//             return option;
+//           });
+//           if (!isFlag) {
+//             arrFilterTerm.push({ ...item });
+//           }
+//           return item;
+//         });
+//         filter.filterTerm = arrFilterTerm;
+//         filter.rawValue = arrFilterTerm;
+//       }
+//       newFilters[filter.column.key] = filter;
+//     } else {
+//       delete newFilters[filter.column.key];
+//     }
+//     this.setState({ filters: newFilters }, () => {
+//       const rowsView = this.getRows();
+//       this.touchSetState({ rowsView });
+//     });
+//   }
+//   // 清空筛选条件
+//   onClearFilters = () => {
+//     // all filters removed
+//     this.setState({ filters: {} }, () => {
+//       const rowsView = this.getRows();
+//       this.touchSetState({ rowsView });
+//     });
+//   }
+//   // #endregion 查询条件
+
+//   // #region toolbar处理
+//   getToolbar = () => {
+//     const { objToolbarProps } = this.props;
+//     const {
+//       // 新增
+//       addRowFlag, // 新增按钮标识 非必须
+//       addRowButtonText, // 新增按钮文字 非必须
+//       touchAddRow, // 新增按钮点击事件 非必须
+//       // 筛选
+//       enableFilter, // 筛选按钮标识 非必须
+//       filterRowsButtonText, // 筛选按钮文字 非必须
+//       // 自定义按钮
+//       arrBtn, // 自定义按钮数组 非必须
+//       // 按钮标识 保存 删除 导入 导出
+//       batchFlag, // 批量录入按钮标识 非必须
+//       batchButtonText, // 批量录入按钮文字 非必须
+//       showModalBatchEditBigTable, // 批量录入按钮点击事件 非必须
+//       saveFlag, // 保存按钮标识 非必须
+//       saveButtonText, // 保存按钮文字 非必须
+//       deleteFlag, // 删除按钮标识 非必须
+//       deleteButtonText, // 删除按钮文字 非必须
+//       deleteRow, // 删除按钮点击事件 非必须
+//       importFlag, // 导入按钮标识 非必须
+//       importButtonText, // 导入按钮文字 非必须
+//       touchImport, // 导入按钮点击事件 非必须
+//       exportFlag, // 导出按钮标识 非必须
+//       exportButtonText, // 导出按钮文字 非必须
+//       touchExport, // 导出按钮点击事件 非必须
+//     } = objToolbarProps;
+//     const toolbarProps = {};
+//     if (addRowFlag) { // 新增按钮
+//       toolbarProps.onAddRow = touchAddRow || this.touchAddRow;
+//       toolbarProps.addRowButtonText = addRowButtonText || '新增';
+//     } else if (enableFilter) { // 筛选按钮
+//       toolbarProps.enableFilter = enableFilter;
+//       toolbarProps.filterRowsButtonText = filterRowsButtonText || '筛选';
+//     }
+//     const toolbar = (
+//       <Toolbar
+//         {...toolbarProps}
+//         // 行数
+//         numberOfRows={this.getSize()}
+//       >
+//         {/* 自定义按钮 */}
+//         {
+//           arrBtn && arrBtn.map(btn => (
+//             <button type="button" className="btn" onClick={btn.onClick}>
+//               {btn.text}
+//             </button>
+//           ))
+//         }
+//         {/* 批量录入 删除 保存 导入 导出 */}
+//         {
+//           batchFlag ? (
+//             <button type="button" className="btn" onClick={showModalBatchEditBigTable || this.showModalBatchEditBigTable}>
+//               {batchButtonText || '批量录入'}
+//             </button>
+//           ) : ''
+//         }
+//         {
+//           saveFlag ? (
+//             <button type="button" className="btn" onClick={this.saveEditBigTableZJ}>
+//               {saveButtonText || '保存'}
+//             </button>
+//           ) : ''
+//         }
+//         {
+//           deleteFlag ? (
+//             <button type="button" className="btn" onClick={deleteRow || this.deleteRow}>
+//               {deleteButtonText || '删除'}
+//             </button>
+//           ) : ''
+//         }
+//         {
+//           importFlag ? (
+//             <button type="button" className="btn" onClick={touchImport || this.touchImport}>
+//               <input type="file" id="touchImportExcel" accept=".xlsx, .xls" style={{ display: 'none' }} />
+//               {importButtonText || '导入'}
+//             </button>
+//           ) : ''
+//         }
+//         {
+//           exportFlag ? (
+//             <button type="button" className="btn" onClick={touchExport || this.touchExport}>
+//               {exportButtonText || '导出'}
+//             </button>
+//           ) : ''
+//         }
+//       </Toolbar>
+//     );
+//     return toolbar;
+//   }
+//   // #endregion toolbar处理
+//   // #region 设置ReactDataGrid属性
+//   // 在单元格设置为活动状态之前调用，返回一个布尔值以确定单元格是否可编辑
+//   onCheckCellIsEditable = (obj) => {
+//     const { column } = obj;
+//     // column：当前列的信息。
+//     // idx：当前单元格的索引。
+//     // row：当前行的数据。
+//     // rowIdx：当前行的索引
+//     const { editable, editor, onCheckCellIsEditable } = column;
+//     let editableFlag = false; // 单元格是否可编辑 true 允许编辑 false 禁止编辑
+//     if (editable || editor) { // 单元格可编辑
+//       editableFlag = true;
+//       if (onCheckCellIsEditable && typeof onCheckCellIsEditable === 'function') {
+//         editableFlag = onCheckCellIsEditable(obj); // 自定义单元格是否可编辑
+//       }
+//     } else {
+//       editableFlag = false;
+//     }
+//     return editableFlag;
+//   }
+//   // 表格行渲染
+//   touchRowRenderer = (obj) => {
+//     const { onCheckCellIsEditable, touchSetRowClass, touchSetRowStyle } = this.props;
+//     const { renderBaseRow, columns, row, idx } = obj;
+//     const onCheckCellIsEditableNew = onCheckCellIsEditable || this.onCheckCellIsEditable;
+//     const columnsNew = [];
+//     // 单元格样式
+//     columns.map((column, index) => {
+//       const { touchSetCellClass } = column;
+//       let cellClass = column.cellClass || '';
+
+//       // 单元格样式
+//       if (touchSetCellClass && typeof touchSetCellClass === 'function') {
+//         cellClass += touchSetCellClass({ column, idx, row, columnIndex: index });
+//       }
+//       // 编辑单元格样式
+//       if (onCheckCellIsEditableNew({ column, idx, row })) {
+//         cellClass += 'custom-edit-cell'; // 编辑单元格样式
+//       }
+//       columnsNew.push({ ...column, cellClass });
+//       return column;
+//     });
+//     // 行样式-行class
+//     let rowClass = '';
+//     if (touchSetRowClass && typeof touchSetRowClass === 'function') {
+//       rowClass = touchSetRowClass({ row, idx, obj });
+//     }
+//     // 行样式-行style
+//     let rowStyle = {};
+//     if (touchSetRowStyle && typeof touchSetRowStyle === 'function') {
+//       rowStyle = touchSetRowStyle({ row, idx, obj });
+//     }
+
+//     return (
+//       <span className={rowClass} style={rowStyle}>
+//         {renderBaseRow({
+//           ...obj,
+//           columns: [...columnsNew],
+//         })}
+//       </span>
+//     );
+//   }
+//   getReactDataGridProps = () => {
+//     const { arrValues } = this.state;
+//     const { enableCellSelect, rowKey, objToolbarProps, rowSelection, onCheckCellIsEditable, touchRowRenderer } = this.props;
+//     const objReactDataGridProps = { }; // ReactDataGrid属性对象
+//     // toolbar属性
+//     if (objToolbarProps) {
+//       const { enableFilter } = objToolbarProps;
+//       objReactDataGridProps.toolbar = this.getToolbar();
+//       if (enableFilter) {
+//         objReactDataGridProps.onAddFilter = this.handleFilterChange;
+//         objReactDataGridProps.getValidFilterValues = this.getValidFilterValues;
+//         objReactDataGridProps.onClearFilters = this.onClearFilters;
+//       }
+//     }
+//     // 单元格选择
+//     if (enableCellSelect && typeof enableCellSelect === 'boolean') {
+//       objReactDataGridProps.enableCellSelect = enableCellSelect;
+//       objReactDataGridProps.onGridRowsUpdated = this.onGridRowsUpdated; // 表格编辑
+//       objReactDataGridProps.onCheckCellIsEditable = onCheckCellIsEditable || this.onCheckCellIsEditable; // 单元格是否可编辑
+//       // if (onCheckCellIsEditable) {
+//       // }
+//       objReactDataGridProps.rowRenderer = touchRowRenderer || this.touchRowRenderer; // 表格行渲染
+//     }
+//     // 表格行选择
+//     if (rowSelection && typeof rowSelection === 'boolean') {
+//       objReactDataGridProps.rowSelection = { // 表格选择
+//         showCheckbox: true,
+//         enableShiftSelect: true,
+//         onRowsSelected: this.onRowsSelected,
+//         onRowsDeselected: this.onRowsDeselected,
+//         selectBy: {
+//           keys: {
+//             rowKey,
+//             values: arrValues,
+//           },
+//           // indexes: this.state.arrValues,
+//         },
+//       };
+//     } else if (rowSelection) {
+//       objReactDataGridProps.rowSelection = rowSelection;
+//     }
+
+//     return objReactDataGridProps;
+//   }
+//   // 创建columns
+//   createColumns = () => {
+//     const { autoAddNumber, columns } = this.props;
+//     // 自动添加序号
+//     let columnsNew = [...columns];
+//     if (autoAddNumber && typeof autoAddNumber === 'boolean') {
+//       const objColumns = columns && columns.length > 0 ? columns[0] : {};
+//       const { frozen = false } = objColumns;
+//       columnsNew = [
+//         { name: '序号', key: 'autoAddNumber_idx_view', resizable: true, width: 50, frozen },
+//         ...columnsNew,
+//       ];
+//     }
+//     this.columns = columnsNew;
+//     return columnsNew;
+//   }
+//   // #endregion 设置ReactDataGrid属性
+//   // #region 保存
+//   // 保存表格数据
+//   onGridRowsUpdatedZJ = (operationType, rows, rowsView) => {
+//     const { onGridRowsUpdated } = this.props;
+//     if (onGridRowsUpdated && typeof onGridRowsUpdated === 'function') { // 数据变更-回调函数
+//       onGridRowsUpdated(operationType, rows);
+//       this.touchSetState({
+//         rows, // 表格数据
+//         rowsView, // 表格视图数据
+//         saveFlag: false, // 保存标识 true 已保存 false 未保存
+//       });
+//     }
+//   }
+//   // 保存表格数据
+//   saveEditBigTableZJ = () => {
+//     const { objToolbarProps } = this.props;
+//     const { saveEditBigTable } = objToolbarProps || {};
+//     if (saveEditBigTable && typeof saveEditBigTable === 'function') { // 数据变更-回调函数
+//       saveEditBigTable('saveEditBigTableZJ', () => this.touchSetState({ saveFlag: true }));
+//     }
+//   }
+//   // 设置保存标识
+//   touchSetSaveFlag = (saveFlag) => {
+//     this.setState({
+//       saveFlag, // 保存标识 true 已保存 false 未保存
+//     });
+//   }
+//   // #endregion 保存
+//   // #region 校验数据
+//   // 校验处理
+//   checkReactDataGridData = (clearFiltersFlag = true) => {
+//     if (clearFiltersFlag) {
+//       this.onClearFilters(); // 清空筛选条件
+//     }
+//     this.checkData(); // 校验数据
+//   }
+//   // 校验数据
+//   checkData = () => {
+//     const { rows } = this.state;
+//     const { columns } = this.props;
+//     let strCheckFailRows = ''; // 校验失败的行号
+//     const arrRequiredMessage = []; // 必填提示信息
+//     rows.forEach((row, rowIndex) => {
+//       let boolcheckFailFlag = false; // 校验失败标识
+//       columns.forEach((column, columnIndex) => {
+//         const { key, strName, name } = column;
+//         const editable = this.onCheckCellIsEditable({ column, idx: columnIndex, row, rowIdx: rowIndex });
+//         if (editable) { // 编辑的单元格
+//           let { required } = column;
+//           if (required && typeof required === 'function') {
+//             required = required({ row, rowIndex, column, columnIndex });
+//           }
+//           // key 字段
+//           // required 必填
+//           // strName 字串名称
+//           // name 字段名称
+//           if (required && !row[key]) {
+//             boolcheckFailFlag = true;
+//             const strRequiredMessage = `请录入第${rowIndex + 1}行的${strName || name};`;
+//             arrRequiredMessage.push(strRequiredMessage);
+//           }
+//         }
+//       });
+//       if (boolcheckFailFlag) {
+//         if (strCheckFailRows) {
+//           strCheckFailRows += `,${rowIndex + 1}`;
+//         } else {
+//           strCheckFailRows = `${rowIndex + 1}`;
+//         }
+//       }
+//     });
+//     if (strCheckFailRows) { // 校验失败
+//       Modal.error({
+//         title: '校验失败',
+//         content: (
+//           <div>
+//             {arrRequiredMessage.map((item, index) => (index === 0 ? <span>{item}</span> : <span><br />{item}</span>))}
+//           </div>
+//         ),
+//       });
+//       console.error(arrRequiredMessage, strCheckFailRows);
+//     }
+//     return { arrRequiredMessage, strCheckFailRows };
+//   }
+//   // #endregion 校验数据
+//   // 转换数字
+//   touchFormatNum = (num) => {
+//     return this.checkNum(num) ? numeral(num).format('0,0.00') : num || '';
+//   }
+//   // 变量 num 是一个有效的数字，即非空、不为 NaN 且是有限值
+//   checkNum = (num) => {
+//     return num !== '' && !isNaN(num) && isFinite(num);
+//     // return num !== '' && !isNaN(num) && isFinite(num) ? true : false;
+//   }
+//   render() {
+//     const { visible } = this.state;
+//     const { totalFlag, objOtherProps, objToolbarProps, strReactDataGridStyle, strAddReactDataGridStyle } = this.props;
+//     const objReactDataGridProps = this.getReactDataGridProps();
+//     const columns = this.createColumns(); // 表头
+//     const objTotal = totalFlag ? this.touchLoopData() : {}; // 循环数据获取
+//     return (
+//       <div className={classnames(['Easy3wEditBigTable'])}>
+//         <style>
+//           {
+//             strReactDataGridStyle || `${strAddReactDataGridStyle || ''}
+//               .custom-edit-cell {  
+//                 background-color: #f6ffed;
+//               }
+//             `
+//           }
+//         </style>
+//         <ReactDataGrid
+//           {...this.props}
+//           ref={this.ReactDataGridRef}
+//           columns={columns} // 表头
+//           // rows={rows}
+//           rowGetter={this.rowGetter} // 获取行数据
+//           rowsCount={this.getSize()} // 行数
+//           onGridSort={this.onGridSort}
+//           {...objReactDataGridProps}
+//           {...objOtherProps}
+//         />
+//         {
+//           totalFlag ? (
+//             <div>
+//               {
+//                 objTotal && Object.keys(objTotal).map((key, index) => (
+//                   <span key={key}>
+//                     { index === 0 ? '' : '；' }
+//                     <span>{objTotal[key].name}：</span>
+//                     <span> {objTotal[key].numberFormat ? this.touchFormatNum(objTotal[key].value) : objTotal[key].value} {objTotal[key].unit || ''}</span>
+//                   </span>
+//                 ))
+//               }
+//             </div>
+//           ) : ''
+//         }
+//         {
+//           visible ? (
+//             <Easy3wEditBigTableForm // 批量录入Modal
+//               visible={visible} // 是否显示
+//               objOtherParameters={{
+//                 ...objToolbarProps, // 工具栏属性
+//                 columns, // 表头
+//               }} // 其他参数
+//               bidPureComponent={that => this.bidPureComponent('Easy3wEditBigTableForm', that)} // 绑定组件
+//               confirmCallback={this.confirmCallbackBatchEditBigTable}
+//               hideModal={this.hideModalBatchEditBigTable}
+//             />
+//           ) : ''
+//         }
+//       </div>
+//     );
+//   }
+// }
+"use strict";