@bit-sun/business-component 4.0.12-alpha.2 → 4.0.12-alpha.21

package/package.json

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

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

@@ -23,6 +23,28 @@ import { BsSulaQueryTable } from '../../../index.ts';
 export default () => {
   const config = {
     needPageHeader: false,
+    remoteDataSource: {
+      url: `https://randomuser.me/api`,
+      method: 'GET',
+      convertParams({ params }) {
+    return {
+      results: params.pageSize,
+      ...params,
+    };
+  },
+  converter({ data }) {
+    return {
+      list: data.results.map((item, index) => {
+        return {
+          ...item,
+          id: `${index}`,
+          name: `${item.name.first} ${item.name.last}`,
+        };
+      }),
+      total: 100,
+    };
+  },
+    },
     summary: [{
       label: '总金额',
       count: 100
@@ -72,26 +94,97 @@ export default () => {
     ],
     columns: [
       {
-        dataIndex: 'code',
-        title: '应用编码',
-        tableHeadFilterKey: 'qp-code-eq',
-      },
-      {
-        dataIndex: 'operator',
-        title: '操作',
-        fixed: 'right',
-        render: [
-          {
-            type: 'link',
-            code: 'User_ApplicationList_edit',
-            props: {
-              type: 'primary',
-              children: '编辑',
-            },
-            visible: '#{record.status === 1}',
-            action: ['refreshTable'],
-          },
-        ],
+        key: 'id',
+        title: 'ID',
+      },
+      {
+        key: 'name',
+        title: '姓名',
+        width: 30,
+      },
+      {
+        key: 'nat',
+        title: '国家',
+      },
+      {
+        key: 'gender',
+        title: '性别',
+        render: ({ text }) => {
+          return text === 'male' ? '男' : '女';
+        },
+      },
+      {
+        key: 'email',
+        title: '邮箱',
+      },
+      {
+        key: 'id',
+        title: 'ID',
+      },
+      {
+        key: 'name',
+        title: '姓名',
+      },
+      {
+        key: 'nat',
+        title: '国家',
+      },
+      {
+        key: 'gender',
+        title: '性别',
+        render: ({ text }) => {
+          return text === 'male' ? '男' : '女';
+        },
+      },
+      {
+        key: 'email',
+        title: '邮箱',
+      },
+      {
+        key: 'id',
+        title: 'ID',
+      },
+      {
+        key: 'name',
+        title: '姓名',
+      },
+      {
+        key: 'nat',
+        title: '国家',
+      },
+      {
+        key: 'gender',
+        title: '性别',
+        render: ({ text }) => {
+          return text === 'male' ? '男' : '女';
+        },
+      },
+      {
+        key: 'email',
+        title: '邮箱',
+      },
+      {
+        key: 'id',
+        title: 'ID',
+      },
+      {
+        key: 'name',
+        title: '姓名',
+      },
+      {
+        key: 'nat',
+        title: '国家',
+      },
+      {
+        key: 'gender',
+        title: '性别',
+        render: ({ text }) => {
+          return text === 'male' ? '男' : '女';
+        },
+      },
+      {
+        key: 'email',
+        title: '邮箱',
       },
     ],
     rowKey: 'id',

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

@@ -41,18 +41,120 @@ interface Field {
 const MemoQueryTable = React.memo(QueryTable);
 const { Text } = Typography;
 
-const ResizeableTitle = (props) => {
+const ResizeableTitle = (props: any) => {
   const { onResize, width, ...restProps } = props;
+  
+  const [innerWidth, setInnerWidth] = useState(width);
+  const [isResizing, setIsResizing] = useState(false); // 标记是否正在拖拽
+  const [isDragging, setIsDragging] = useState(false); // 标记拖拽句柄是否被拖拽
+  const [startX, setStartX] = useState(0); // 初始X坐标
+  const markerPosition = useRef({ left: 0, top: 0 });
+  const currentStart = useRef(0);
+  const uuidref = useRef(uuid());
+  
+  const prevWidthRef = useRef(width);
+
+  const handleMouseDown = (e: any) => {
+    currentStart.current = e.clientX;
+    markerPosition.current = { left: e.clientX, top: e.clientY }
+    setIsResizing(true);
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  };
+
+  const handleMouseMove = (e: any) => {
+    e.stopPropagation();
+    e.preventDefault();
+    // 更新标记位置
+    markerPosition.current = { left: e.clientX, top: e.clientY }
+    const dom: HTMLElement | null =  document.getElementById('text1');
+
+    if (dom && dom.style) {
+      dom.style.left = `${e.clientX}px`;
+      dom.style.top = `${e.clientY - 20}px`;
+    }
+  };
+
+  const handleMouseUp = (e: any) => {
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+    setIsResizing(false);
+  };
+  
+  const handleresize = (e: any, data: any, title: string) => {
+    const newWidth = data?.size?.width || 0;
+    setInnerWidth(newWidth); // 更新内部分宽度
+  };
+
+  const handleResizeStart = () => {
+    setIsResizing(true);
+  };
+
+  const handleResizeStop = (e: any, data: any) => {
+    setIsResizing(false);
+    if (onResize) {
+      onResize(e, data);
+    }
+  };
+
+  useEffect(() => {
+    if (width !== prevWidthRef.current) {
+      prevWidthRef.current = width;
+      setInnerWidth(width);
+    }
+  }, [width]);
+
+  const thStyle = {
+    boxShadow: isResizing ? '2px 2px 10px rgba(0, 0, 0, 0.3)' : 'none',
+  };
 
-  if (!width) {
-    return <th {...restProps} />;
-  }
   return (
     <Resizable
-      width={width}
+      width={innerWidth}
       height={0}
-      onResize={onResize}
-      draggableOpts={{ enableUserSelectHack: false }}
+      handle={
+        <div>
+          <div
+        style={{
+          width: '10px',
+          height: '30px',
+          cursor: 'col-resize', // 拖动时改变鼠标样式
+          position: 'absolute',
+          zIndex: 10,
+          top: 0,
+          right: 0,
+        }}
+        onMouseDown={handleMouseDown}
+        // onDrag={handleDrag}
+      >
+      </div>
+      {isResizing && <div
+          id="text1"
+          style={{
+            position: 'fixed',
+            left: markerPosition.current.left, // 跟随鼠标偏移一点
+            top: markerPosition.current.top - 20,
+            backgroundColor: '#1890ff',
+            color: 'white',
+            borderRadius: '4px',
+            zIndex: 9999,
+            pointerEvents: 'none',
+            height: '40px',
+            width: 2
+          }}
+        >
+        </div>}
+        </div>
+      }
+      onResize={(e: any, data: any) => {handleresize(e, data, restProps.title)}}
+      onResizeStart={handleResizeStart}
+      onResizeStop={handleResizeStop}
+      draggableOpts={{
+        enableUserSelectHack: true,
+        grid: [20, 20],
+        axis: 'x',
+        bounds: 'parent',
+      }}
     >
       <th {...restProps} />
     </Resizable>

package/src/components/Business/SearchSelect/BusinessUtils.tsx

@@ -15,6 +15,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
   
   // 默认type === 'supplier' 供应商选择器
   let requestConfig = {
+    init: true,
     url: `${prefixUrl.selectPrefix}/supplier`,
     filter: 'qp-name,code-orGroup,like', // 过滤参数
     otherParams: {
@@ -326,7 +327,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
     tableSearchForm =  [
       { name: 'qp-skuCode-in', label: 'SKU编码',type:'multipleQueryInput' },
       { name: 'qp-skuName-like', label: 'SKU名称' },
-      { name: 'qp-spuCode-like', label: '外部SPU编码' },
+      { name: 'qp-itemCode-like', label: '外部SPU编码' },
       { name: 'qp-eancode-in', label: '商品条码', field: {
         type: 'multipleQueryInput',
         props: {
@@ -784,6 +785,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/skuPropertyValue/list`,
       filter: 'qp-value-like', // 过滤参数
       mappingTextField: 'value',
@@ -1694,6 +1696,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/inventoryOrg`,
       filter: 'qp-name,code-orGroup,like', // 过滤参数
       mappingTextField: 'name',
@@ -1726,6 +1729,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/company`,
       filter: 'qp-name,code-orGroup,like', // 过滤参数
       mappingTextField: 'name',
@@ -1758,6 +1762,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/platCompany`,
       filter: 'qp-name,socialCreditCode-orGroup,like', // 过滤参数
       mappingTextField: 'name',
@@ -1790,6 +1795,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/employee/v2`,
       filter: 'qp-employeeNumber,name-orGroup,like', // 过滤参数
       mappingTextField: 'name',
@@ -1887,6 +1893,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/employee/pageList/v2`,
       filter: 'qp-username,name-orGroup,like', // 过滤参数
       mappingTextField: 'name',
@@ -2008,6 +2015,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
     const isLogisCompanyCodeSingleSearch = requestConfigProp?.fixedparameter?.some((i: any) => i == 'qp-logisCompanyCode-eq');
     const logisCompanyCodeSingleSearchName = isLogisCompanyCodeSingleSearch ? 'qp-logisCompanyCode-eq' : 'qp-logisCompanyCode-in';
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/deliveryMode`,
       filter: 'qp-name,code-orGroup,like', // 过滤参数
       mappingTextField: 'name',
@@ -2135,6 +2143,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/ruleTemplate`,
       filter: 'qp-name,code-orGroup,like', // 过滤参数
       mappingTextField: 'name',
@@ -2210,6 +2219,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/role`,
       filter: 'qp-name,code-orGroup,like', // 过滤参数
       mappingTextField: 'name',
@@ -2308,6 +2318,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/channelInfo`,
       filter: 'qp-name,code-orGroup,like', // 过滤参数
       mappingTextField: 'name',
@@ -2398,6 +2409,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/orgViewNode/common/pageList`,
       filter: 'qp-name-like', // 过滤参数
       mappingTextField: 'name',
@@ -2531,6 +2543,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/person`,
       filter: 'qp-code,name-orGroup,like', // 过滤参数
       mappingTextField: 'name',
@@ -2687,6 +2700,7 @@ export function commonFun (type?: string, prefixUrl: any, parentProps?:any) {
       ...selectConfigProps,
     }
     requestConfig = {
+      init: true,
       url: `${prefixUrl.selectPrefix}/priceType`,
       filter: 'qp-code,name-orGroup,like', // 过滤参数
       mappingTextField: 'name',

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

@@ -1707,7 +1707,6 @@ export default () => {
   }
   const selectPropsMultiple = {
     mode: 'multiple',
-    maxTagCount: 1,
   }
 
   const [ tabKey, setTabKey ] = useState('single')

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

@@ -26,7 +26,7 @@ const BusinessSearchSelect = forwardRef((props: any, ref: any) => {
       needModalTable,
       modalTableProps
     }
-  }, [props?.value, props.disabled, props.selectBusinessType]);
+  }, [props?.value, props.disabled, props.selectBusinessType,props.requestConfig?.noOperate]);
 
   useImperativeHandle(ref, () => ({
     getRef: () => innerRef,
@@ -52,5 +52,8 @@ export default React.memo(BusinessSearchSelect, (props, nextProps) => {
   if (props && props.selectBusinessType !== nextProps.selectBusinessType) {
     return false
   }
+  if (props && props.requestConfig && typeof props.requestConfig.noOperate === 'boolean' && props.requestConfig.noOperate !== nextProps.requestConfig.noOperate) {
+    return false
+  }
   return true
 });

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

@@ -0,0 +1,25 @@
+import React, { Fragment } from "react";
+import { Typography } from 'antd';
+import './style.less';
+
+//表格底部 金额总计
+export default ({
+  summary
+}: any) => {
+  const { Text } = Typography;
+  
+  return (
+    <Fragment>
+      <div className="table_sum_wrapper">
+        <div className='table-bssula-summary'>
+          {summary.map((item: any) => (
+            <Text type='danger'>
+              {item.label}: <span className='table-bssula-summary-count'>{item.count || 0}</span>
+            </Text>
+          ))}
+        </div>
+      </div>
+      <div className="sum_right_line"></div>
+    </Fragment>
+  )
+}

package/src/components/Business/columnSettingTable/components/style.less

@@ -0,0 +1,25 @@
+
+.table_sum_wrapper{
+  position: absolute;
+  overflow: hidden;
+  width: 80%;
+  height: 26px;
+  bottom: 0;
+  .table-bssula-summary{
+    height: 40px;
+    right: 0;
+    bottom: -20px;
+    white-space: nowrap;
+    overflow-x: auto;
+  }
+}
+.sum_right_line {
+  position: absolute;
+  right: 20%;
+  bottom: 0;
+  width: 16px;
+  height: 26px;
+  opacity: 0.32;
+  transform: scaleX(-1);
+  background-image: linear-gradient(270deg, #ffffff00 0%, #A4A4A4 100%);
+}

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

@@ -212,4 +212,4 @@
   .ant-dropdown-link {
     cursor: pointer;
   }
-}
+}

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

@@ -111,7 +111,7 @@ export default () => {
       x: '100%',
     },
     rowKey: 'id',
-    dataSource: [{}, {}],
+    dataSource: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
     pagination: {
       showTotal: (total: any) => `共 ${total} 条`,
       showQuickJumper: true,
@@ -291,17 +291,14 @@ export default () => {
     ]
   const config = {
     modeType: 'view',
-    scroll: {
-      x: '100%',
-    },
     rowKey: 'id',
     // initialDataSource: [{}, {}],
     remoteDataSource: {
       url: 'xxxxxx',
       converter: ({ data }: any) => {
         return {
-          list: [{},{}],
-          total: 2
+          list: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
+          total: 40
         };
       },
     },
@@ -310,8 +307,8 @@ export default () => {
       showQuickJumper: true,
       hideOnSinglePage: true,
       current: 1,
-      pageSize: 10,
-      total: 10,
+      pageSize: 30,
+      total: 40,
       size: 'small'
     },
     rowSelection: {

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

@@ -6,6 +6,7 @@ import { getItemDefaultWidth, getShowColumns, handleTextOverflow } from './utils
 import { noEmptyArray } from './utils';
 import ENUM from '@/utils/enumConfig';
 import { handleAntdColumnsSpecialParams } from '@/utils/utils';
+import TableSumComponent from './components/TableSumComponent';
 const { Text } = Typography;
 export default class ColumnSettingTable extends React.Component {
   state: any;
@@ -159,7 +160,7 @@ export default class ColumnSettingTable extends React.Component {
       ...restProps,
     };
     let showSummary = null;
-    if (this.state.showColumns.length) {
+    if (this.state.showColumns.length && !Array.isArray(summary)) {
       if (summary && summary().diy) {
         showSummary = this.getTableSummaryInfo();
       } else {
@@ -201,7 +202,9 @@ export default class ColumnSettingTable extends React.Component {
         ...scroll,
         x: restProps.overScrollX || this.getTableScrollXWidth(showCol)
       },
-      summary: showSummary,
+      ...(
+        showSummary ? { summary: showSummary } : {}
+      )
     }
     return (
       <div style={{ position: 'relative' }}>
@@ -227,6 +230,9 @@ export default class ColumnSettingTable extends React.Component {
           ...otherTableInfo
           }
         />
+        {Array.isArray(summary) && (
+          <TableSumComponent summary={summary} />
+        )}
       </div >
     )
   }