Merge branch 'fix-v2-220418' into 'v2-220418'

src/components/SortableTableHeader/CustomColumnsConfigure/CustomColumnsConfigureModal.tsx

@@ -6,7 +6,7 @@ import { Modal, Checkbox, message } from 'antd';
 import { CloseOutlined, HolderOutlined } from '@ant-design/icons';
 import { ColumnType } from 'antd/lib/table/interface';
 import { CheckboxValueType } from 'antd/lib/checkbox/Group';
-import { ReactSortable, ItemInterface } from "react-sortablejs";
+import { ReactSortable, ItemInterface } from 'react-sortablejs';
 import { SortableColumnType } from '../interface';
 import './index.less';
 

src/components/SortableTableHeader/DraggableHeaderRow.tsx

@@ -2,7 +2,7 @@
  * @Description 可拖拽的表格头部 Row 组件
  */
 import React, { useMemo } from 'react';
-import { ReactSortable, ItemInterface } from 'react-sortablejs';
+import { ReactSortable, ItemInterface, Sortable, Store } from 'react-sortablejs';
 import { ColumnType } from 'antd/lib/table/interface';
 import { SortableContextProvider } from './context';
 
@@ -65,6 +65,13 @@ const DraggableHeaderRow: React.FC<DraggableHeaderRowProps> = (props) => {
     });
     setColumns?.(newColumns as SortableColumn[]);
   };
+
+  const handleMove = (evt: Sortable.MoveEvent, originalEvent: Event, sortable: Sortable, store: Store): (boolean | void | 1 | -1) => {
+    if (!evt.related.className.includes('active')) {
+      return false;
+    }
+    return true;
+  };
   
   return (
     <ReactSortable
@@ -73,6 +80,7 @@ const DraggableHeaderRow: React.FC<DraggableHeaderRowProps> = (props) => {
       tag="tr"
       handle=".columns-draggable-handle"
       dataIdAttr="data-id"
+      onMove={handleMove}
     >
       <SortableContextProvider
         value={{

src/components/SortableTableHeader/README.md

@@ -5,6 +5,8 @@
 步骤 2: 将页面中定义给 Table 的 columns 传给 useSortableColumns，并设置Table组件的属性columns 为 useSortableColumns 返回的 columns
 步骤 3: 给 Table 组件设置对应 components、onHeaderRow 属性
 
+<font color=RoyalBlue>* 注：如果表格使用了 rowSelection 属性，记得 useSortableColumns 第二个参数传递 true，否则会出现不能正常拖拽、伸缩</font>
+
 ```tsx
 import React from 'react';
 import { Table } from 'antd';
@@ -51,7 +53,7 @@ const SortableTableList: React.FC<any> = () => {
     },
   ];
 
-  const [columns, setColumns] = useSortableColumns<UserInfoType>(defaultColumns);
+  const [columns, setColumns] = useSortableColumns<UserInfoType>(defaultColumns, false);
 
   return (
     <Table
@@ -123,7 +125,7 @@ const SortableTableList: React.FC<any> = () => {
     },
   ];
 
-  const [columns, setColumns] = useSortableColumns<UserInfoType>(defaultColumns);
+  const [columns, setColumns] = useSortableColumns<UserInfoType>(defaultColumns, false);
 
   return (
     <div>
@@ -149,8 +151,8 @@ const SortableTableList: React.FC<any> = () => {
             cell: SortableTableHeader.DraggableHeaderCell,
           },
         }}
-        onHeaderRow={(_, index) => ({
-          columns,
+        onHeaderRow={(internalColumns, index) => ({
+          columns: internalColumns,
           index,
           setColumns,
         }) as any}
@@ -194,7 +196,7 @@ const dataSource: UserInfoType[] = [
 
 const SortableTableList: React.FC<any> = () => {
 
-  const [columns, setColumns] = useSortableColumns<UserInfoType>([]);
+  const [columns, setColumns] = useSortableColumns<UserInfoType>([], false);
 
   const customColumnsConfigureRef = useRef<CustomColumnsConfigureRef | null>(null);
 
@@ -254,8 +256,8 @@ const SortableTableList: React.FC<any> = () => {
             cell: SortableTableHeader.DraggableHeaderCell,
           },
         }}
-        onHeaderRow={(_, index) => ({
-          columns,
+        onHeaderRow={(internalColumns, index) => ({
+          columns: internalColumns,
           index,
           setColumns,
         }) as any}

src/components/SortableTableHeader/useSortableColumns.ts

@@ -6,9 +6,12 @@ import { ColumnType } from 'antd/lib/table/interface';
 import { SortableColumn } from './DraggableHeaderRow';
 import { SortableColumnType } from './interface';
 
+// fix: && item.dataIndex 是为了判断 给Table传入了 rowSelection 的情况，这种情况下columns最前面会多出一项（勾选项）
+const isRowSelectionCol = (item: ColumnType<any>) => !item.dataIndex;
+
 // 拓展 th 属性
 // Antd的Table组件，如果想给 th 添加额外的属性只能通过 onHeaderCell
-const normailizeAdditionalHeaderCell = (dataSource: ColumnType<any>[]) => {
+const normailizeAdditionalHeaderCell = (dataSource: ColumnType<any>[], hasRowSelection: boolean) => {
   const ret: SortableColumn[] = [];
   if (!Array.isArray) {
     return ret;
@@ -16,15 +19,15 @@ const normailizeAdditionalHeaderCell = (dataSource: ColumnType<any>[]) => {
   dataSource.forEach((item: ColumnType<any>, index) => {
     const commonProps = {
       id: item.dataIndex as string,
-      draggable: !item.fixed && item.dataIndex, // fix: && item.dataIndex 是为了判断 给Table传入了 rowSelection 的情况，这种情况下columns最前面会多出一项（勾选项）
-      resizable: index !== dataSource.length - 1 && item.dataIndex,
+      draggable: !item.fixed && !isRowSelectionCol(item),
+      resizable: index !== dataSource.length - 1 && !isRowSelectionCol(item),
+      columnIndex: !hasRowSelection ? index : index + 1,
     };
     const atom = {
       ...item,
       onHeaderCell: () => {
         return {
           ...(item.onHeaderCell?.(item) || {}),
-          columnIndex: index,
           ...commonProps,
         };
       },
@@ -35,11 +38,11 @@ const normailizeAdditionalHeaderCell = (dataSource: ColumnType<any>[]) => {
   return ret;
 };
 
-const useSortableColumns = <R>(defaultColumns: ColumnType<R>[]): [SortableColumnType<R>[], (value: ColumnType<R>[]) => void] => {
-  const [columns, setColumns] = useState(normailizeAdditionalHeaderCell(defaultColumns));
+const useSortableColumns = <R>(defaultColumns: ColumnType<R>[], hasRowSelection: boolean): [SortableColumnType<R>[], (value: ColumnType<R>[]) => void] => {
+  const [columns, setColumns] = useState(normailizeAdditionalHeaderCell(defaultColumns, hasRowSelection));
 
   const handleSetColumns = (value: ColumnType<R>[]) => {
-    setColumns(normailizeAdditionalHeaderCell(value));
+    setColumns(normailizeAdditionalHeaderCell(value.filter((item) => !isRowSelectionCol(item)), hasRowSelection));
   };
 
   return [columns, handleSetColumns];

src/pages/transaction/purchaseOrder/index.tsx

@@ -91,7 +91,7 @@ const PurchaseOrder: React.FC<PurchaseOrderProps> = (props) => {
     }
   }
 
-  const [columns, setColumns] = useSortableColumns<GetOrderBuyerPageResponseDetail>(secondColumns());
+  const [columns, setColumns] = useSortableColumns<GetOrderBuyerPageResponseDetail>(secondColumns(), false);
 
   const fetchParams = useRef<any>({})
   const customColumnsConfigureRef = useRef<CustomColumnsConfigureRef | null>(null)

src/pages/transaction/saleOrder/index.tsx

@@ -113,7 +113,7 @@ const SaleOrder: React.FC<SaleOrderProps> = () => {
     }
   }
 
-  const [columns, setColumns] = useSortableColumns<GetOrderVendorPageResponseDetail>(secondColumns());
+  const [columns, setColumns] = useSortableColumns<GetOrderVendorPageResponseDetail>(secondColumns(), true);
 
   const { roles } = getAuth() || {}
   const serversRoles = roles.filter(item => item['roleType'] === MEMBER_ROLE_TYPE_SERVICE_CONSUMER)