@bit-sun/business-component 4.0.12-alpha.9 → 4.0.13-alpha.11

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,40 @@
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 功能组件
+  order: 0
+title: 批量搜索查询组件
+order: 2
+---
+
+## QueryMutipleSearchSelect
+
+Demo:
+
+```tsx
+import React, { useRef } from 'react';
+import { QueryMutipleSearchSelect } from '../../../index';
+
+export default () => {
+  const requestConfig = {
+    url: '/items/item/listNoPage/Simple',
+    filter: 'qp-itemCode,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?'无匹配结果,请更换其他内容再试': (selectProps?.notFoundText||`请录入编码/名称模糊查询`)}</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;

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

@@ -2,9 +2,27 @@
 @primary-color: #005cff;
 
 .search_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-dropdown {
+      top: 24px !important;
+      width: calc(141%) !important;
+    }
+
     // 下拉框清除图标位置调整
     .ant-select-clear {
       right: 33px;
@@ -16,6 +34,13 @@
     }
   }
 
+  &_show.search_select_show_list {
+    .ant-select-dropdown {
+      top: 24px !important;
+      width: calc(100% + 110px) !important;
+    }
+  }
+
   &_expand_button {
     position: relative;
     right: -11px;
@@ -48,11 +73,6 @@
   &_dropdown_table {
     // padding: 4px 10px 6px;
 
-    // 下拉table 复选框为单选时候隐藏
-    .ant-table-cell .ant-table-selection-column .ant-radio,table tr td.ant-table-selection-column .ant-radio-wrapper {
-      display: none;
-    }
-
     // 下拉table 表头表体样式
     .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table {
       font-family: MiSans-Regular;
@@ -78,7 +98,18 @@
     .ant-table.ant-table-bordered > .ant-table-container {
       .ant-table-body > table > tbody > tr > td.ant-table-selection-column,
       .ant-table-header > table > thead > tr > th.ant-table-selection-column {
-        display: none;
+        visibility: hidden; // 不使用 display: none; 是因为此设置不占位，会导致表格scroll.x: 'max-content' 计算不准确
+        padding: 0;
+        margin: 0;
+        width: 0;
+        height: 0;
+        min-width: 0;
+        min-height: 0;
+        border: none;
+
+        .ant-radio-wrapper {
+          display: none;
+        }
       }
     }
   }
@@ -134,7 +165,6 @@
         background-color: #fff;
         .ant-form {
           padding: 0;
-          overflow: hidden;
           display: flex;
           align-items: flex-start;
 
@@ -288,3 +318,11 @@
     height: 300px !important;
   }
 }
+
+.searchSelectMaxTagToolTip {
+  .ant-tooltip-inner {
+    max-height: 72px;
+    overflow-x: auto;
+    padding: 0px;
+  }
+}