@bit-sun/business-component 4.0.13-alpha.34 → 4.0.13-alpha.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bit-sun/business-component",
-  "version": "4.0.13-alpha.34",
+  "version": "4.0.13-alpha.35",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

package/src/components/Functional/DataValidation/index.tsx

@@ -28,7 +28,7 @@ import {
 } from '@ant-design/icons';
 import request from '@/utils/request';
 import './index.less';
-import _ from "lodash"
+import _, { ceil, isNumber } from "lodash"
 import { judgeIsRequestError } from '@/utils/requestUtils';
 import { readerXlsxToList } from '@/utils/xlsxUtil';
 
@@ -179,10 +179,26 @@ class DataValidation extends React.Component {
   }
 
   getCount = () => {
-    const { resultData } = this.state;
+    const { resultData = [] } = this.state;
+    const totalQuantity = resultData.reduce((total, item) => {
+        total += Number(item.quantity || 0);
+      return total;
+    }, 0);
+    const totalSuccessQuantity = resultData.filter(item => item.flag).reduce((total, item) => {
+        total += Number(item.quantity || 0);
+      return total;
+    }, 0);
+    const totalErrorQuantity = resultData.filter(item => !item.flag).reduce((total, item) => {
+        total += Number(item.quantity || 0);
+      return total;
+    }, 0);
     return {
       total: resultData.length,
+      totalQuantity,
+      totalSuccessQuantity,
+      totalErrorQuantity,
       error: resultData.filter((item) => !item.flag).length,
+      success: resultData.filter((item) => item.flag).length,
     };
   };
 
@@ -191,7 +207,7 @@ class DataValidation extends React.Component {
     const { notValid } = this.props;
     return {
       container: 'luckysheet',
-      showtoolbar: false,
+      // showtoolbar: false,
       hook: {
         columnTitleCellRenderBefore: function (columnAbc, postion, ctx) {
           if (columnAbc.name) {
@@ -233,18 +249,9 @@ class DataValidation extends React.Component {
           // console.info(data,sheetFile,ctx)
         },
       },
-      // showtoolbarConfig: {
-      //   undoRedo: true, //撤销重做，注意撤消重做是两个按钮，由这一个配置决定显示还是隐藏
-      //   paintFormat: false, //格式刷
-      //   currencyFormat: false, //货币格式
-      //   percentageFormat: false, //百分比格式
-      //   numberDecrease: false, // '减少小数位数'
-      //   numberIncrease: false, // '增加小数位数
-      //   moreFormats: false, // '更多格式'
-      //   font: true, // '字体'
-      //   fontSize: true, // '字号大小'
-
-      // },
+      showtoolbarConfig: {
+        sortAndFilter: true,
+      },
       data: [
         {
           name: 'Cell', //工作表名称
@@ -365,7 +372,7 @@ class DataValidation extends React.Component {
       showsheetbar: false,
       optionstate: false,
       showstatisticBarConfig: {
-        count: false, // 计数栏
+        count: true, // 计数栏
         view: false, // 打印视图
         zoom: false, // 缩放
       },
@@ -422,6 +429,54 @@ class DataValidation extends React.Component {
     return data.filter(d => _.compact(Object.values(d)).length);
   };
 
+  naturalCompare = (a, b) => {
+  const checkNumber = (value) => {
+    return /^[-+]?(\d+\.?\d*|\.\d+)([eE][-+]?\d+)?$/.test(value.trim())
+  };
+
+  if (checkNumber(a) && checkNumber(b)) {
+    return Number(a) - Number(b);
+  }
+  // 优先处理 "通过" 的情况
+  if (a === "通过" && b !== "通过") return -1;
+  if (b === "通过" && a !== "通过") return 1;
+  
+  return a.localeCompare(b);
+
+}
+
+customSort = (a, b) => {
+
+  // 处理空值
+  const aEmpty = !a;
+
+  const bEmpty = !b;
+
+  if (aEmpty && bEmpty) return 0;
+
+  if (aEmpty) return 1; // a空，排后面
+
+  if (bEmpty) return -1; // b空，a排前面
+
+  return this.naturalCompare(a, b);
+
+}
+
+  sortData = (sorterKey: string) => {
+    let sheetData = luckysheet.getSheetData();
+    let newData = JSON.parse(JSON.stringify(sheetData)).sort((cur, prev) => {
+      let cellIndex = itemsTemp.findIndex(item => item.code === sorterKey);
+      if (sorterKey === 'checkresult') {
+        cellIndex = itemsTemp.length;
+      }
+      return this.customSort(cur[cellIndex]?.v, prev[cellIndex]?.v);
+    })
+    luckysheet.create(this.setConfig(luckysheet.transToCellData(newData)));
+    this.setState({
+      data: luckysheet.transToCellData(newData),
+    });
+  }
+
   resetData = () => {
     const { validDataUrl, validDataParams, updateData, columns, isBrandAuth, isCheckStockNum = true, customerColumnsMapping } = this.props;
     const resultData = this.getData().filter(d => {
@@ -523,7 +578,6 @@ class DataValidation extends React.Component {
 
   toggleData = () => {
     const { showErrorData, data } = this.state;
-
     if (showErrorData) {
       luckysheet.create(this.setConfig(data));
     } else {
@@ -615,6 +669,44 @@ class DataValidation extends React.Component {
       </div>
     </Menu>
   );
+
+
+  getSortList = () => {
+    let sortList = []
+    if (this.props?.customerColumnsMapping?.length) {
+      sortList = this.props?.customerColumnsMapping?.map((item, index) => {
+        return createItem('item-0', index, item.title, item.name, this.format);
+      })||[]
+    } else {
+      sortList = this.props?.columns?.map((item, index) => {
+        if (!mapping.get(item))
+          throw Error(
+            `${item} is not in DataValidation component, please fix this error`,
+          );
+        return createItem('item-0', index, mapping.get(item), item, this.format);
+      })||[];
+    }
+
+    return (
+      <Menu>
+        {
+          (sortList || []).map((item, index) =>{
+            return  (
+              <>
+                <Menu.Item key={index} className="sheet_table-menu_item_text">
+                  <a onClick={() => this.sortData(item.code)}>{item.content}</a>
+                </Menu.Item>
+                <Menu.Divider />
+              </>
+            )
+          })
+        }
+        <Menu.Item key="checkresult" className="sheet_table-menu_item_text">
+          <a onClick={() => this.sortData('checkresult')}>校验结果</a>
+        </Menu.Item>
+      </Menu>
+    )
+  }
   
   getSheetMap = () => {
     const { customerColumnsMapping, columns } = this.props;
@@ -708,6 +800,8 @@ class DataValidation extends React.Component {
       left: '0px',
       top: '0px',
     };
+
+    console.log('itemsTemp', itemsTemp)
     return (
       <>
         <div className="sheet_table_top">
@@ -766,6 +860,16 @@ class DataValidation extends React.Component {
                 <DownOutlined />
               </Button>
             </Dropdown>
+            <Dropdown
+              trigger={['click']}
+              overlay={this.getSortList()}
+              placement="bottomRight"
+            >
+              <Button>
+                排序
+                <DownOutlined />
+              </Button>
+            </Dropdown>
 
             {!notValid && <Button type="primary" onClick={this.resetData}>
               识别
@@ -776,9 +880,13 @@ class DataValidation extends React.Component {
         <div style={{ position: 'relative', height: '400px' }}>
           <div id="luckysheet" style={luckyCss}></div>
         </div>
-        {!this.props.notValid && <div className="sheet_table_footer">
+        {!this.props.notValid && !!totalSummary.total && <div className="sheet_table_footer">
           <span className="sheet_table_footer_l">
-            共 {totalSummary.total} 条数据{!notValid && `, 其中错误 ${totalSummary.error} 项`}
+            共 {totalSummary.total} 条数据：
+            <span style={{color: 'green', marginLeft: '5px'}}> 成功条数：</span>{totalSummary.success}
+            <span style={{color: 'green', marginLeft: '5px'}}> 成功数量：</span>{totalSummary.totalSuccessQuantity || 0}
+            <span style={{color: 'red', marginLeft: '5px'}}> 失败条数：</span>{totalSummary.error || 0}
+            <span style={{color: 'red', marginLeft: '5px'}}> 失败数量：</span>{totalSummary.totalErrorQuantity || 0}
           </span>
           {!notValid && <Space className="sheet_table_footer_r">
             <Checkbox