@bit-sun/business-component 4.0.12-alpha.3 → 4.0.12-alpha.30

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;
@@ -230,34 +231,8 @@ export default class ColumnSettingTable extends React.Component {
           }
         />
         {Array.isArray(summary) && (
-          <>
-            <div 
-              className='table-bssula-summary' 
-              style={{
-                right: '20%',
-                bottom: 0,
-                whiteSpace: 'nowrap',
-                overflowX: 'auto',
-              }}
-            >
-              {summary.map(item => (
-                <Text type='danger'>
-                  {item.label}: <span className='table-bssula-summary-count'>{item.count || 0}</span>
-                </Text>
-              ))}
-            </div>
-            <div style={{
-              width: '16px',
-              height: '26px',
-              opacity: 0.32,
-              transform: 'scaleX(-1)',
-              backgroundImage:'linear-gradient(270deg, #ffffff00 0%, #A4A4A4 100%)',
-              right: '20%',
-              position: 'absolute',
-              bottom: 0,
-            }}></div>
-          </>
-       )}
+          <TableSumComponent summary={summary} />
+        )}
       </div >
     )
   }

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Table as SulaTable, request } from 'bssula';
 import { Resizable } from 'react-resizable';
 import ColumnSetting from './columnSetting';
@@ -9,8 +9,10 @@ import {
   Typography,
 } from 'antd';
 import ENUM from '@/utils/enumConfig';
-import { handleBssulaColumnsSpecialParams, parseWidth } from '@/utils/utils';
+import { handleBssulaColumnsSpecialParams, parseWidth, uuid } from '@/utils/utils';
+import TableSumComponent from './components/TableSumComponent';
 const { Text } = Typography;
+
 export default class ColumnSettingSulaTable extends React.Component {
   sulaTableRef: React.RefObject<unknown>;
   state: any;
@@ -126,21 +128,123 @@ export default class ColumnSettingSulaTable extends React.Component {
 
   ResizeableTitle = (props: any) => {
     const { onResize, width, ...restProps } = props;
-
-    if (!width) {
-      return <th {...restProps} />;
-    }
+    
+    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',
+    };
+  
     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>
     );
-  }
+  };
 
   getTableScrollXWidth = (cols: any[]) => {
     if (cols.every((item: any) => item.width)) {
@@ -197,6 +301,7 @@ export default class ColumnSettingSulaTable extends React.Component {
         ...scroll,
         x: restProps.overScrollX || this.getTableScrollXWidth(showCol)
       },
+      sticky: true,
       ...(
         showSummary ? { summary: showSummary } : {}
       )
@@ -226,33 +331,7 @@ export default class ColumnSettingSulaTable extends React.Component {
           }
         />
        {Array.isArray(summary) && (
-        <>
-          <div 
-            className='table-bssula-summary' 
-            style={{
-              right: '20%',
-              bottom: 0,
-              whiteSpace: 'nowrap',
-              overflowX: 'auto',
-            }}
-          >
-            {summary.map(item => (
-              <Text type='danger'>
-                {item.label}: <span className='table-bssula-summary-count'>{item.count || 0}</span>
-              </Text>
-            ))}
-          </div>
-           <div style={{
-            width: '16px',
-            height: '26px',
-            opacity: 0.32,
-            transform: 'scaleX(-1)',
-            backgroundImage:'linear-gradient(270deg, #ffffff00 0%, #A4A4A4 100%)',
-            right: '20%',
-            position: 'absolute',
-            bottom: 0,
-          }}></div>
-        </>
+          <TableSumComponent summary={summary} />
        )}
       </div >
     )

package/src/components/Functional/QueryMutipleSelect/index.less

@@ -0,0 +1,117 @@
+@border-color: #d9d9d9;
+@primary-color: #005cff;
+
+.query_select {
+  // 选择器 隐藏滚动条 横向滑动
+  .ant-select-selector{
+    height: 24px;
+    overflow: hidden;
+    .ant-select-selection-overflow{
+      height: 40px;
+      flex-wrap: nowrap;
+      overflow-x: auto;
+    }
+    .ant-select-selection-overflow-item {
+      align-self: auto;
+    }
+  }
+  &_show {
+    display: flex;
+
+    // 下拉框清除图标位置调整
+    .ant-select-clear {
+      right: 33px;
+    }
+
+    // 解决多选宽度不够 滑动会白一块的问题
+    .ant-select-multiple.ant-select-show-arrow .ant-select-selector, .ant-select-multiple.ant-select-allow-clear .ant-select-selector {
+      padding-right: 28px;
+    }
+
+    .ant-select-dropdown {
+      top: 24px !important;
+      left: -110px !important;
+      width: calc(100% + 110px) !important;
+    }
+  }
+
+  &_expand_button {
+    position: relative;
+    right: -11px;
+    width: 30px;
+    border-left: 1px solid @border-color;
+    height: 24px;
+    cursor: pointer;
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.85);
+    span {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+  &_expand_button:hover {
+    background-color: @primary-color;
+    color: #fff;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+
+  &_wrapper {
+    &_top {
+      color: #8E8E8E;
+    }
+  }
+
+  &_textArea {
+    margin-top: 10px;
+    .ant-input {
+      height: 300px;
+      background: #FAFAFA;
+      border: 0.8px solid #E0E0E0;
+      resize: none;
+      border-radius: 0;
+    }
+  }
+}
+
+.multiInput_modal{
+  .ant-modal-header{
+    height: 32px;
+    padding: 0 16px;
+    font-size: 12px;
+  }
+  .ant-modal-title{
+    line-height: 32px;
+  }
+  .ant-modal-close-x{
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+  }
+  .ant-modal-footer{
+    padding-right: 8px;
+    height: 44px;
+    .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
+      margin-left: 6px;
+    }
+    .ant-btn {
+      width: 56px;
+      height: 28px;
+      font-weight: 500;
+    }
+  }
+}
+
+.searchSelectMaxTagToolTip {
+  .ant-tooltip-inner {
+    max-height: 72px;
+    overflow-x: auto;
+    padding: 0px;
+  }
+  .ant-tag {
+    display: flex;
+    width: fit-content;
+  }
+}

package/src/components/Functional/QueryMutipleSelect/index.md

@@ -0,0 +1,41 @@
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 功能组件
+  order: 0
+title: 批量搜索查询组件
+order: 2
+---
+
+## QueryMutipleInput
+
+Demo:
+
+```tsx
+import React, { useRef } from 'react';
+import { QueryMutipleSearchSelect } from '../../../index';
+
+export default () => {
+  const requestConfig = {
+    url: '/items/item/listNoPage/Simple',
+    filter: 'qp-name-like', // qp-itemCode-like
+    // filter: 'qp-skuCode,name-orGroup,like',
+    mappingTextField: 'name',
+    mappingValueField: 'itemCode',
+    sourceName: 'qp-itemCode-in'
+  }
+  const handleOnChange = (value) => {
+    console.log(value);
+  };
+
+  return (
+    <div>
+      <QueryMutipleSearchSelect onValueChange={handleOnChange} requestConfig={requestConfig} />
+    </div>
+  );
+};
+```
+
+More skills for writing demo: https://d.umijs.org/guide/demo-principle

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

@@ -0,0 +1,242 @@
+import React, { useState, useEffect } from 'react';
+import { useDebounceFn } from 'ahooks';
+import _, { isNil } from "lodash"
+import { Select, Input, Button, Modal, ConfigProvider, Spin, message } from 'antd';
+import { DashOutlined } from '@ant-design/icons';
+import request from '@/utils/request';
+import { judgeIsRequestError } from '@/utils/requestUtils';
+import './index.less';
+import { convertUrlQueryParams, convertBodyParams, convertResData, handleSourceName, makeUniqueValue, LightHeightOption, handleSelectOptionsShowValue, maxTagPlaceholder }  from '../SearchSelect/utils';
+
+export const getValue = (value: any, selectMode?: any) => {
+  return selectMode ? (typeof value == 'string' && value?.length && value?.split?.(',')||[]) : value;
+}
+
+const QueryMutipleSearchSelect = ({ onValueChange, requestConfig={}, selectProps={}, ctx }: any) => {
+  const { filter, method = 'get', url, extralHeaders = {}, otherParams = {}, specialBracket = false, noNeedSplit = false, } = requestConfig;
+  const selectParamsKey = filter || 'qp-codeAndName-like';
+  const resultSourceKey = handleSourceName(requestConfig?.sourceName || ctx?.name || 'skuCode')
+  const currentSelectProps = {
+    showArrow: true,
+    showSearch: true,
+    filterOption: false,
+    allowClear: true,
+    listHeight: 160,
+    labelInValue: false,
+    maxTagCount: 4,
+    ...selectProps,
+  }
+  const selectMode = selectProps?.mode  // 设定当前选择器 为单选或者多选模式 无设定为单选模式（默认）
+
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useState<any>();
+  const [popvalue, setPopValue] = useState();
+  const [source, setSource] = useState([]);
+  const { run } = useDebounceFn(
+    () => {
+      getData()
+    },
+    {
+      wait: 1000,
+    },
+  );
+
+  const [fetching, setFetching] = useState(false);
+  const [searchValue, setSearchValue] = useState('');
+  const [uniqueValue, setUniqueValue] = useState(resultSourceKey);
+
+  useEffect(() => {
+    setPopValue(value);
+    onValueChange(value);
+  }, [value]);
+
+  useEffect(() => {
+    setUniqueValue(makeUniqueValue());
+  }, [resultSourceKey])
+
+  const showModal = () => {
+    setIsModalVisible(true);
+    //弹窗打开时 默认搜索内容换行显示
+    setPopValue((data: any) => data?.replace(/,/g, '\n'));
+  };
+
+  const handleOk = () => {
+    formaData(popvalue);
+    setIsModalVisible(false);
+  };
+
+  const formaData = (v: any) => {
+    let formatValue: any = ToCDB(v)
+      ?.split(/[/\n/\s,;]/)
+      ?.filter((item) => item)
+      ?.join(',');
+    setValue(formatValue);
+  };
+
+  const handleCancel = () => {
+    setIsModalVisible(false);
+  };
+
+  const outerChange = (v: any) => {
+    formaData(v)
+  };
+
+  const onChange = (e: any) => {
+    const v = e.target.value;
+    setPopValue(v);
+  };
+
+   // 获取下拉框数据源-不分页
+   const getData = (params: any = {}, callback?: any) => {
+    if (!requestConfig) return;
+    if (!url) return;
+
+    setFetching(true)
+
+    const queryParams = {
+      ...otherParams, // 默认参数
+      ...params,
+    };
+    if (isNil(queryParams[selectParamsKey])) {
+      queryParams[selectParamsKey] = searchValue;
+    }
+
+    let getRequest;
+    const methodName = method?.toLocaleLowerCase();
+    if(['post','patch','put'].includes(methodName)) {
+      getRequest = request[methodName](`${url}${convertUrlQueryParams(queryParams)}`,convertBodyParams(queryParams))
+    } else {
+      getRequest = request.get( `${url}${convertUrlQueryParams(queryParams)}`,{headers: { ...extralHeaders }})
+    }
+
+    if (!getRequest) return;
+
+    getRequest.then((result: any) => {
+        setFetching(false)
+        result = result.data;
+        if (judgeIsRequestError(result)) {
+          message.error(result.msg);
+          return;
+        }
+        const res = result.data;
+        const dSource: any = convertResData(requestConfig, res, { selectMode, labelInValue: currentSelectProps?.labelInValue, value, type: 1, items: source, needTopSelectedSource: false });
+
+        if(callback) {
+          callback(source)
+        } else {
+          setSource(dSource)
+        }
+      })
+      .catch((err: any) => { setFetching(false) });
+  }
+  const onSearchChange = (v: any) => {
+    setSearchValue(v);
+    run();
+  }
+
+  return (
+    <div className={'query_select'}>
+      <div className="query_select_show" id={`query_multiple_select_div_${uniqueValue}`}>
+        <Select
+          value={getValue(value, selectMode)}
+          onChange={outerChange}
+          open={open}
+          onBlur={(v: any) => {
+            onSearchChange(v)
+            setOpen(false);
+          }}
+          onClick={() => setOpen(true)}
+          onPaste={(e: any) => {
+            formaData(e.clipboardData.getData('text'));
+            e.preventDefault();
+          }}
+          onSearch={(v) => onSearchChange(v)}
+          onSelect={() => {
+            if(selectMode) return;
+            setTimeout(() => {
+              setOpen(false)
+            }, 0)
+          }}
+          style={{ width: 'calc(100%)' }}
+          suffixIcon={<div className={`query_select_expand_button`} onClick={showModal}><DashOutlined /></div>}
+          placeholder="请选择"
+          maxTagPlaceholder={(v)=> maxTagPlaceholder(v,{ selectProps:currentSelectProps, onChange:outerChange, value:getValue(value, selectMode), setIsMaxTagsOpen:()=>{} })}
+          notFoundContent={
+            fetching ? (
+              <Spin size="small" className='searchSelectSpin' />
+            ) : (
+              <div style={{ textAlign: 'center' }}>
+                <div>{searchValue?'无匹配结果,请更换其他内容再试':`请录入内容模糊查询`}</div>
+              </div>
+            )
+          }
+          getPopupContainer={(triggerNode) => triggerNode.parentElement}
+          {...currentSelectProps}
+        >
+           {source.map((item: any) => (
+              <Select.Option key={item.value} label={item.text}>
+                {LightHeightOption({
+                  text: handleSelectOptionsShowValue(specialBracket, noNeedSplit, item),
+                  filterTxt: searchValue,
+                  needToolTips: false
+                })}
+              </Select.Option>
+            ))}
+        </Select>
+      </div>
+      <Modal
+        width={600}
+        title="多值录入"
+        visible={isModalVisible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        className='multiInput_modal'
+        bodyStyle={{
+          padding: '10px 16px'
+        }}
+        footer={[
+          <ConfigProvider autoInsertSpaceInButton = { false }> 
+            <Button key="back" onClick={handleCancel}>
+              取消
+            </Button>
+          </ConfigProvider>,
+          <ConfigProvider autoInsertSpaceInButton = { false }> 
+            <Button key="submit" type="primary" onClick={handleOk}>
+              录入
+            </Button>
+          </ConfigProvider>,
+        ]}
+      >
+        <div className={'query_select_wrapper'}>
+          <div className={'query_select_wrapper_top'}>如需同时使用多个值进行查询，请使用逗号，分号、空格或换行进行值的分割，中英文格式的符号均支持</div>
+          <div className={'query_select_textArea'}>
+            <Input.TextArea
+              placeholder='在此录入...'
+              value={popvalue}
+              onChange={onChange}
+              rows={12}
+              showCount={false}
+            />
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+function ToCDB(selectStr: any) {
+  var tmp = '';
+  if(!selectStr?.length) return '';
+  const str =  Array.isArray(selectStr) ? selectStr.join(',') : selectStr;
+  for (var i = 0; i < str?.length; i++) {
+    if (str?.charCodeAt?.(i) > 65248 && str?.charCodeAt?.(i) < 65375) {
+      tmp += String.fromCharCode(str?.charCodeAt(i) - 65248);
+    } else {
+      tmp += String.fromCharCode(str.charCodeAt(i));
+    }
+  }
+  return tmp;
+}
+
+export default QueryMutipleSearchSelect;