@bit-sun/business-component 4.0.13-alpha.9 → 4.2.0-aiwei-alpha.1

package/src/components/Business/columnSettingTable/index.md

@@ -36,6 +36,7 @@ export default () => {
         ellipsis: {
           showTitle: false,
         },
+        showTotal: true,
       },
       {
         dataIndex: 'spuCode',
@@ -111,7 +112,7 @@ export default () => {
       x: '100%',
     },
     rowKey: 'id',
-    dataSource: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
+    dataSource: [{"id": 1},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
     pagination: {
       showTotal: (total: any) => `共 ${total} 条`,
       showQuickJumper: true,
@@ -182,113 +183,182 @@ export default () => {
 ## sula列设置表格
 
 ```tsx
-import React, { useState } from 'react';
+import React, { useState, Fragment, } from 'react';
+import { Segmented } from 'antd';
 import { SulaColumnSettingTable } from '../../../index.ts';
 
 export default () => {
   const settingTableRef = React.useRef(null);
-  const columns = [
-      {
-        dataIndex: 'lineNo',
-        title: '行号',
-        width: 80,
-        fixed: 'left',
-        ellipsis: {
-          showTitle: false,
-        },
-      },
-      {
-        dataIndex: 'skuName',
-        title: '商品名称',
-        fixed: 'left',
-        ellipsis: {
-          showTitle: false,
-        },
-      },
-      {
-        dataIndex: 'spuCode',
-        title: '商品代码',
-        fixed: 'left',
-        ellipsis: {
-          showTitle: true,
-        },
-      },
-      {
-        dataIndex: 'skuCode',
-        title: 'SKU',
-        fixed: 'left',
-        ellipsis: {
-          showTitle: true,
-        },
-      },
-      {
-        dataIndex: 'skuSpec',
-        title: '商品规格',
-        ellipsis: {
-          showTitle: false,
-        },
-      },
-      {
-        dataIndex: 'barCode',
-        title: '条码',
-        ellipsis: {
-          showTitle: false,
-        },
-      },
-      {
-        dataIndex: 'executeAmount',
-        title: '可执行数量',
-      },
-      {
-        dataIndex: 'planAmount',
-        title: '数量',
-        ellipsis: {
-          showTitle: false,
-        },
-      },
-      {
-        dataIndex: 'baseUnitCode',
-        title: '单位',
-        ellipsis: {
-          showTitle: false,
-        },
-      },
-      {
-        dataIndex: 'completeAmount',
-        title: '累计入库数量',
-      },
-      {
-        dataIndex: 'reverseNumber',
-        title: '累计退货数量',
-      },
-      {
-        dataIndex: 'taxRate',
-        title: '税率',
-      },
-      {
-        dataIndex: 'taxAmount',
-        title: '税额',
-      },
-      {
-        dataIndex: 'standardPrice',
-        title: '标准单价',
-      },
-      {
-        key: 'createUserName',
-        title: '操作人',
-      },
-      {
-        key: 'remark',
-        title: '备注',
-        textOverflow: true,
+  const [inputModel, setInputModel] = useState('整款模式'); // 录入模式
+  
+  const skuDetailColumns = [
+    {
+      title: '商品编码',
+      dataIndex: 'itemCode',
+      key: 'itemCode',
+      width: 120,
+    },
+    {
+      title: '商品名称',
+      dataIndex: 'itemName',
+      key: 'itemName',
+      width: 80,
+    },
+    {
+      key: 'skuCode',
+      dataIndex: 'skuCode',
+      title: 'SKU',
+      width: 160,
+      ellipsis: {
+        showTitle: false,
       },
-      {
-        key: 'operator',
-        title: '操作',
-        isPermissionColumn: true,
-        fixed: 'right',
-      }
-    ]
+    },
+    {
+      title: '图片',
+      dataIndex: ['mediaList', '0', 'url'],
+      images: true,
+      width: 60,
+    },
+    { title: '颜色', dataIndex: 'colorName', key: 'colorName', width: 100 },
+    { title: '尺码', dataIndex: 'sizeName', key: 'sizeName', width: 60 },
+    {
+      key: 'unitCode',
+      dataIndex: 'unitCode',
+      title: '单位',
+      width: 60
+    },
+    // ...showPropertyList,
+    {
+      key: 'salemanName',
+      dataIndex: 'salemanName',
+      title: '导购',
+      width: 120,
+    },
+    {
+      key: 'quantity',
+      dataIndex: 'quantity',
+      title: '数量',
+      align: 'right',
+      width: 70,
+    },
+    {
+      key: 'labelPrice',
+      dataIndex: 'labelPrice',
+      title: '吊牌价',
+      align: 'right',
+      width: 70,
+    },
+    {
+      key: 'money',
+      dataIndex: 'money',
+      title: '吊牌金额',
+      align: 'right',
+      width: 70,
+    },
+    {
+      key: 'realUnitPrice',
+      dataIndex: 'realUnitPrice',
+      title: '实际售价',
+      align: 'right',
+      width: 70,
+    },
+    {
+      key: 'discountRate',
+      dataIndex: 'discountRate',
+      title: '折扣率(%)',
+      align: 'right',
+      width: 100,
+    },
+    {
+      key: 'receivableMoney',
+      dataIndex: 'receivableMoney',
+      title: '实收金额',
+      align: 'right',
+      width: 100,
+    },
+    {
+      key: 'discountUnitPrice',
+      dataIndex: 'discountUnitPrice',
+      title: '优惠单价',
+      align: 'right',
+      width: 70,
+    },
+    {
+      key: 'discountMoney',
+      dataIndex: 'discountMoney',
+      title: '优惠金额',
+      align: 'right',
+      width: 100,
+    },
+    {
+      key: 'moneyDiffer',
+      dataIndex: 'moneyDiffer',
+      title: '抹零金额',
+      align: 'right',
+      width: 70,
+    },
+    
+    {
+      key: 'discountType',
+      dataIndex: 'discountType',
+      title: '优惠活动类型',
+      width: 120,
+    },
+    {
+      key: 'activityCode',
+      dataIndex: 'activityCode',
+      title: '活动编号',
+      width: 100,
+    },
+    {
+      key: 'column14',
+      dataIndex: 'column14',
+      title: '已发货数量',
+      align: 'right',
+      width: 70,
+    },
+    {
+      key: 'retQuantity',
+      dataIndex: 'retQuantity',
+      title: '已退数量',
+      align: 'right',
+      width: 70,
+    },
+    {
+      key: 'saleFlg',
+      dataIndex: 'saleFlg',
+      title: '销售方式',
+      width: 70,
+    },
+    {
+      key: 'returnReason',
+      dataIndex: 'returnReason',
+      title: '退货原因',
+      width: 100,
+    },
+  ];
+
+    const summary = () => {
+        return {
+          //diy: true,
+          cont: [
+            {
+              key: 'returnReason',
+              value: 0,
+            },
+          ],
+        };
+      };
+
+  // 表格字段控制
+  const getTableColumns = (inputModel: string, twoDimensions: string) => {
+    if(inputModel == 'SKU模式'){
+      return skuDetailColumns;
+    }else{
+      return [];
+    }
+  };
+
   const config = {
     modeType: 'view',
     rowKey: 'id',
@@ -297,7 +367,7 @@ export default () => {
       url: 'xxxxxx',
       converter: ({ data }: any) => {
         return {
-          list: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
+          list: [{"id": 1},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
           total: 40
         };
       },
@@ -313,37 +383,8 @@ export default () => {
     },
     rowSelection: {
     },
-    summary: () => {
-      return {
-        diy: true,
-        cont: [
-          {
-            key: 'spuCode',
-            value: 100,
-          },
-          {
-            key: 'skuSpec',
-            value: 200,
-          },
-          {
-            key: 'executeAmount',
-            value: 300,
-          },
-          {
-            key: 'completeAmount',
-            value: 300,
-          },
-          {
-            key: 'taxAmount',
-            value: 300,
-          },
-          {
-            key: 'standardPrice',
-            value: 300,
-          },
-        ],
-      }
-    },
+    isSpecial: true,
+    summary: summary,
     dynamicColumns: [
       {
         key: 'expectTime',
@@ -355,8 +396,31 @@ export default () => {
         key: 'price',
       },
     ],
-    columns,
+    columns: skuDetailColumns,
+    newUpdateSummary: 1,
+    isSpecial: true,
     tableCode: 'uniquecode-1',
+    actionsRender: [
+      {
+        position: 'right',
+        type: () => {
+          return (
+            <Fragment>
+              <Segmented
+                value={inputModel}
+                style={{ marginRight: 22 }}
+                onChange={(value: any) => {
+                  setInputModel(value)
+                }}
+                options={
+                  ['整款模式', 'SKU模式']
+                }
+              />
+            </Fragment>
+          );
+        },
+      },
+    ]
   }
   return (
     <SulaColumnSettingTable

package/src/components/Business/columnSettingTable/index.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { useState } from 'react';
 import { Table, Tooltip, Typography } from 'antd';
 import { Resizable } from 'react-resizable';
@@ -14,28 +15,39 @@ export default class ColumnSettingTable extends React.Component {
     super(props);
     this.state = {
       showColumns: [],
+      selectedRowKeys: [], // 新增状态，用于跟踪选中的行的键
+      selectedRows: [],
+      showSummary: null
     }
   }
 
   componentDidMount() {
-    const { columns }: any = this.props;
-    this.setInitialShowColumn(columns || [])
+    const { columns, updateSummary }: any = this.props;
+    this.setInitialShowColumn(columns || [], () => {
+      // 首次加载时调用 recalculateSummary 方法
+      this.recalculateSummary(updateSummary || '');
+    });
   }
 
 
   componentWillReceiveProps(nextProps: any) {
     // if (JSON.stringify(this.props.columns) !== JSON.stringify(nextProps.columns)) {
     // }
-    this.setInitialShowColumn(nextProps.columns || [])
-  }
+    this.setInitialShowColumn(nextProps.columns || [], () => {
+      this.recalculateSummary(nextProps.updateSummary);
+    });
+    if(nextProps.newUpdateSummary){
+      this.recalculateSummary(nextProps.newUpdateSummary);
+    }
+  };
 
-  setInitialShowColumn = (columns: any[]) => {
+  setInitialShowColumn = (columns: any[], callback?: () => void) => {
     // 获取当前列表定义数据
     let columnConfig = this.getConfigFromlocalstorage();
     let showColumns = getShowColumns(columns, columnConfig);
     this.setState({
-      showColumns,
-    })
+      showColumns
+    }, callback);
   }
 
   reSetInitialShowColumn = () => {
@@ -68,32 +80,97 @@ export default class ColumnSettingTable extends React.Component {
     return [];
   };
 
+  /**
+     * 新增函数，用于根据传入的小数位数进行四舍五入
+     * @param number
+     * @param decimalPlaces
+     * @returns
+     */
+  roundToDecimalPlaces = (number: any, decimalPlaces: number) => {
+    const factor = Math.pow(10, (decimalPlaces || 2));
+    return Math.round(Number(number || 0) * factor) / factor;
+  };
+
+  /**
+   * 合计行逻辑
+   * @returns
+   */
   getTableSummaryInfo = () => {
-    const { summary = undefined, rowSelection, expandable }: any = this.props;
-    const { showColumns }: any = this.state;
-    // let summaryRow = rowSelection ? [{}, ...showColumns] : [...showColumns];
-    let summaryRow = rowSelection && expandable ? [{}, {}, ...showColumns] : rowSelection || expandable ? [{}, ...showColumns] : [...showColumns]; //兼容table配置展开expandable属性导致汇总列位置不对的问题
-    let summaryInitial = summary().cont;
-    let summaryDom: any = <Table.Summary fixed>
-      <Table.Summary.Row>
-        {
-          [...summaryRow].map((item: any, index: number) => {
+    const { summary = undefined, rowSelection, expandable, modeType, dataSource, isSpecial = false, }: any = this.props;
+    const { showColumns } = this.state;
+
+    // 封装生成 summaryRow 的逻辑
+    const generateSummaryRow = () => {
+      if (rowSelection && expandable) {
+        return [{}, {}, ...showColumns];
+      } else if (rowSelection || expandable || isSpecial) {
+        return [{}, ...showColumns];
+      }
+      return [...showColumns];
+    };
+
+    const summaryRow = generateSummaryRow();
+
+    let summaryInitial: any = [];
+    // 完善判断逻辑
+    if (typeof summary === 'function') {
+      const summaryResult = summary();
+      if (summaryResult.diy && !Array.isArray(summaryResult)) {
+        summaryInitial = summaryResult.cont;
+      }
+    } else if (typeof summary === 'object' && summary !== null && summary.diy && !Array.isArray(summary)) {
+      summaryInitial = summary.cont;
+    }
+
+    // let offset = 0;
+    let validSummaryRow = summaryRow;
+    // if(summaryInitial && summaryInitial.length > 0){
+    //   summaryRow.filter((item) => {
+    //     if (Object.keys(item).length === 0) {
+    //       offset++;
+    //       return false;
+    //     }
+    //     return true;
+    //   });
+    // }
+
+    const summaryDom = (
+      <Table.Summary fixed>
+        <Table.Summary.Row>
+          {validSummaryRow.map((item, index) => {
+            const actualIndex = index;
+            let cellContent;
+
+            if (item.showTotal) {
+              cellContent = <Text type="danger">合计</Text>;
+            } else if (summaryInitial && summaryInitial.length > 0) {
+              const matchedItem = summaryInitial.find((inner: any) => inner.key === item.dataIndex || inner.key === item.key);
+              cellContent = <Text type="danger">{matchedItem ? matchedItem.value : ''}</Text>;
+            } else {
+              if (item.showSummary) {
+                const sum = dataSource.reduce((acc: any, record: any) => {
+                  const value = record[item.dataIndex];
+                  return acc + Number(value || 0);
+                }, 0);
+                const decimalPlaces = item.showDigit || 2;
+                const roundedSum = this.roundToDecimalPlaces(sum, decimalPlaces);
+                cellContent = <Text type="danger">{roundedSum}</Text>;
+              } else {
+                cellContent = <Text type="danger"></Text>;
+              }
+            }
+
             return (
-              <Table.Summary.Cell index={index}>
-                <Text type="danger">
-                  {
-                    summaryInitial.filter((inner: any) => inner.key === item.dataIndex || inner.key === item.key).length ?
-                      `${item.title}: ${summaryInitial.filter((inner: any) => inner.key === item.dataIndex || inner.key === item.key)[0].value}` : ''
-
-                  }
-                </Text>
+              <Table.Summary.Cell index={item.showTotal ? actualIndex + 1 : actualIndex}>
+                {cellContent}
               </Table.Summary.Cell>
-            )
-          })
-        }
-      </Table.Summary.Row >
-    </Table.Summary>
-  return () => summaryDom
+            );
+          })}
+        </Table.Summary.Row>
+      </Table.Summary>
+    );
+
+    return () => summaryDom;
   };
 
   handledynamicColumns = (col: any[]) => {
@@ -154,19 +231,52 @@ export default class ColumnSettingTable extends React.Component {
     }
   };
 
+  /**
+   * 处理行点击事件
+   * @param record
+   */
+  handleRowClick = (record: any) => {
+    const { selectedRowKeys, selectedRows, } = this.state;
+    const { rowKey }: any = this.props;
+    let newSelectedRowKeys = [...selectedRowKeys];
+    let newSelectedRows = [...selectedRows];
+
+    const keyIndex = newSelectedRowKeys.indexOf(record[rowKey]);
+    if (keyIndex > -1) {
+      // 如果已经选中，则取消选中
+      newSelectedRowKeys.splice(keyIndex, 1);
+      newSelectedRows.splice(keyIndex, 1);
+    } else {
+      // 如果未选中，则添加到选中列表
+      newSelectedRowKeys.push(record[rowKey]);
+      newSelectedRows.push(record);
+    }
+    this.setState({
+      selectedRowKeys: newSelectedRowKeys,
+      selectedRows: newSelectedRows,
+    });
+
+    // 手动调用外部传入的 onChange 函数
+    const { rowSelection }: any = this.props;
+    if (rowSelection && typeof rowSelection.onChange === 'function') {
+      // 直接将 record 作为数组元素传递
+      rowSelection.onChange(newSelectedRowKeys, newSelectedRows);
+    }
+  };
+
+  recalculateSummary = (nextProps: any) => {
+    if (this.state.showColumns.length) {
+      const showSummary = this.getTableSummaryInfo();
+      this.setState({ showSummary });
+    }
+  };
+
   render() {
-    const { columns, tableCode, appRequestConfig, summary = undefined, dynamicColumns = [], scroll={}, ...restProps }: any = this.props;
+    const { columns, tableCode, appRequestConfig, summary = undefined, dynamicColumns = [], scroll={}, rowSelection: propRowSelection, ...restProps }: any = this.props;
     let otherTableInfo = {
       ...restProps,
     };
-    let showSummary = null;
-    if (this.state.showColumns.length && !Array.isArray(summary)) {
-      if (summary && summary().diy) {
-        showSummary = this.getTableSummaryInfo();
-      } else {
-        showSummary = summary;
-      }
-    };
+    const { showSummary } = this.state;
 
     const handleColumns = (arr: any, indexArr: any[]) => {
       arr.forEach((item: any, index: any) => {
@@ -195,6 +305,7 @@ export default class ColumnSettingTable extends React.Component {
       showCol = this.handledynamicColumns(showCol);
     }
 
+
     otherTableInfo = {
       ...otherTableInfo,
       scroll: {
@@ -202,6 +313,24 @@ export default class ColumnSettingTable extends React.Component {
         ...scroll,
         x: restProps.overScrollX || this.getTableScrollXWidth(showCol)
       },
+      rowSelection: propRowSelection ? {
+        ...propRowSelection,
+        selectedRowKeys: this.state.selectedRowKeys,
+        onChange: (selectedRowKeys: any, selectedRows: any) => {
+            this.setState({
+                selectedRowKeys,
+                selectedRows
+            });
+            if (propRowSelection && propRowSelection.onChange) {
+              propRowSelection.onChange(selectedRowKeys, selectedRows);
+            }
+        },
+      } : false,
+      onRow: (record: any) => {
+        return {
+          onClick: () => this.handleRowClick(record), // 绑定行点击事件
+        };
+      },
       ...(
         showSummary ? { summary: showSummary } : {}
       )