@bit-sun/business-component 2.4.19 → 3.0.0-alpha.1

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

@@ -3,9 +3,9 @@ import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'rea
 import { useDebounceFn } from 'ahooks';
 import { Input, Button, Modal, Select, Divider, message, Spin, Form, Table, Checkbox, TreeSelect, Tooltip, Tag } from 'antd';
 import { SearchOutlined, CopyOutlined, CaretLeftOutlined } from '@ant-design/icons';
-import axios from 'axios';
+import request from '@/utils/request';
 import { stringify } from 'querystring';
-import _ from "lodash"
+import _, { escapeRegExp, isNil } from "lodash"
 import './index.less';
 import { BusinessSearchSelect, QueryMutipleInput } from '@/index';
 import { handleSourceName }  from './utils';
@@ -239,7 +239,17 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             }
           });
           delete params[key];
+        } else if (element && key.indexOf('*multiInput') >= 0) {
+        let name = '',
+          value = element['value'];
+        if (value.indexOf(',') >= 0) {
+          name = `qp-${element['name']}-in`;
+        } else {
+          name = `qp-${element['name']}-like`;
         }
+        params[name] = value;
+        delete params[key];
+      }
         else if (element && key.indexOf('*') >= 0) {
           const dataParams = key.split('*');
           dataParams.forEach((value, index) => {
@@ -273,9 +283,11 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
       ...otherParams, // 默认参数
       ...fixedParam,
       ...params,
+    };
+    if (isNil(queryParams[selectParamsKey])) {
+      queryParams[selectParamsKey] = searchValue;
     }
-
-    axios
+    request
       .get(
         `${url}?${stringify(queryParams)}`,
         {
@@ -436,6 +448,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
         setPopValue(labelInValue ? value.map(i => ({ value: i.key, text: i.label })) : value.map(i => ({ value: i })));
         setIndeterminate(!!value.length && value.length < itemsTotal);
         setCheckedAll(itemsTotal && value.length === itemsTotal);
+
       } else {
         setSelectedRowKeys(labelInValue ? [value.key] : [value])
         setSelectedRows(labelInValue ? [{ [mappingValueField]: value.key, value: value.key, text: value.label }] : [{ [mappingValueField]: value, value: value }])
@@ -547,6 +560,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
       setSelectedRows(currentItemsData)
     })
   }
+
   const onChangeCheckAll = (e) => {
     if (e.target.checked) {
       // 如果下拉框有所有数据就处理选中所有【items.length === itemsTotal】(最多可选100条)
@@ -578,8 +592,9 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
       if (heightTxt === '') {
         return text
       }
+      const searchString = escapeRegExp(heightTxt);
       // 前面filterOption 不区分大小写，这里用i
-      const regexp = new RegExp(heightTxt, 'gi')
+      const regexp = new RegExp(searchString, 'gi')
       return text.replace(regexp, `<span style="color:red">${heightTxt}</span>`)
     }
     return (
@@ -762,29 +777,37 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
 
   return (
     <div className={'search_select'}>
-      {fieldComponent ?
-        (<div onClick={() => {
-          fieldComponent.props?.onClick?.()
-          showModal()
-        }}>{fieldComponent}</div>) :
-        (<div className="search_select_show" id={`search_select_div_${uniqueValue}`}>
+      {fieldComponent ? (
+        <div
+          onClick={() => {
+            fieldComponent.props?.onClick?.();
+            showModal();
+          }}
+        >
+          {fieldComponent}
+        </div>
+      ) : (
+        <div
+          className="search_select_show"
+          id={`search_select_div_${uniqueValue}`}
+        >
           <Select
             virtual
             labelInValue={labelInValue}
             value={value}
             onChange={onChange}
             disabled={props.disabled}
-            dropdownRender={menu => (
+            dropdownRender={(menu) => (
               <>
                 <Input
                   value={searchValue}
                   style={{ width: '98%', marginLeft: '1%' }}
                   placeholder="请输入"
-                  onChange={e => onSearchChange(e)}
+                  onChange={(e) => onSearchChange(e)}
                   onBlur={onSearchBlur}
                   onKeyDown={(e) => {
                     //  阻止多选的冒泡
-                    e.stopPropagation()
+                    e.stopPropagation();
                   }}
                 />
                 <Divider style={{ margin: '8px 0' }} />
@@ -792,13 +815,16 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
               </>
             )}
             notFoundContent={
-              fetching ? <Spin size="small" /> :
+              fetching ? (
+                <Spin size="small" className='searchSelectSpin' />
+              ) : (
                 <div style={{ textAlign: 'center' }}>
                   <div style={{ marginBottom: 16 }}>
                     <CopyOutlined style={{ fontSize: '50px' }} />
                   </div>
                   <div>无匹配结果，请更换其他内容再试</div>
                 </div>
+              )
             }
             onPopupScroll={SelectScroll}
             style={{ width: needModalTable ? 'calc(100% - 30px)' : 'calc(100%)' }}
@@ -817,73 +843,154 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             ))}
           </Select>
           {needModalTable && (
-            <Button style={{ width: '30px', padding: '2px', height: 'auto' }} onClick={showModal} type="primary">
+            <Button
+              style={{ width: '30px', padding: '2px', height: 'auto' }}
+              onClick={showModal}
+              type="primary"
+            >
               <SearchOutlined />
             </Button>
           )}
-        </div>)}
+        </div>
+      )}
       {needModalTable && isModalVisible && (
         <Modal
-          width='80%'
+          width="80%"
           title={modalTableProps?.modalTableTitle}
           visible={isModalVisible}
           onOk={handleOk}
           onCancel={handleCancel}
-          footer={(selectMode || modalTableProps?.modalRadioNeedFooter) ? [
-            <Button key="back" onClick={handleCancel}>
-              取消
-            </Button>,
-            <Button
-              key="submit"
-              type="primary"
-              onClick={handleOk}
-              disabled={!tableData.length || (selectProps?.disabled || props?.disabled)}
-            >
-              确定
-            </Button>,
-          ] : null}
+          footer={
+            selectMode || modalTableProps?.modalRadioNeedFooter
+              ? [
+                  <Button key="back" onClick={handleCancel}>
+                    取消
+                  </Button>,
+                  <Button
+                    key="submit"
+                    type="primary"
+                    onClick={handleOk}
+                    disabled={
+                      !tableData.length ||
+                      selectProps?.disabled ||
+                      props?.disabled
+                    }
+                  >
+                    确定
+                  </Button>,
+                ]
+              : null
+          }
           {...(modalTableProps?.modalProps || {})}
         >
           <div className={'search_select_wrapper'}>
-            <div className={'search_select_wrapper_click_flag'} onClick={() => setCaretLeftFlag(!caretLeftFlag)}>
-              <CaretLeftOutlined className={caretLeftFlag ? 'search_select_wrapper_click_flag_arrow' : 'search_select_wrapper_click_flag_arrow_1'} />
+            <div
+              className={'search_select_wrapper_click_flag'}
+              onClick={() => setCaretLeftFlag(!caretLeftFlag)}
+            >
+              <CaretLeftOutlined
+                className={
+                  caretLeftFlag
+                    ? 'search_select_wrapper_click_flag_arrow'
+                    : 'search_select_wrapper_click_flag_arrow_1'
+                }
+              />
             </div>
-            <div className={caretLeftFlag ? 'search_select_wrapper_left' : 'search_select_wrapper_left1'}>
+            <div
+              className={
+                caretLeftFlag
+                  ? 'search_select_wrapper_left'
+                  : 'search_select_wrapper_left1'
+              }
+            >
               <div className={'select_list_columns'}>
                 <div className={'select_list_columns_tips'}>搜索</div>
                 <div className={'select_list_columns_formItems'}>
-                  <Form form={form} layout='vertical' key='modalForm'>
+                  <Form form={form} layout="vertical" key="modalForm">
                     {formItem(modalTableProps?.tableSearchForm)}
                   </Form>
                 </div>
               </div>
               <div className={'select_list_searchButton'}>
-                <Button key='reset' className={'select_list_button_space'} onClick={onResetTable}>重置</Button>
-                <Button key='search' type="primary" onClick={onSearchTable}>查询</Button>
+                <Button
+                  key="reset"
+                  className={'select_list_button_space'}
+                  onClick={onResetTable}
+                >
+                  重置
+                </Button>
+                <Button key="search" type="primary" onClick={onSearchTable}>
+                  查询
+                </Button>
               </div>
             </div>
-            <div className={caretLeftFlag ? 'search_select_wrapper_right' : 'search_select_wrapper_right1'}>
+            <div
+              className={
+                caretLeftFlag
+                  ? 'search_select_wrapper_right'
+                  : 'search_select_wrapper_right1'
+              }
+            >
               <div>
                 <div className={'select_list_selectTips'}>
-                  <div style={{ marginLeft: 8 }}>搜索结果共<span style={themeColor}>{tablePagination?.total || 0}</span>项{selectMode ? <span>， 本次已选<span style={themeColor}>{selectedRowKeys?.length || 0}</span>项</span> : ''}</div>
-                  <div style={{ color: 'rgba(127, 127, 127, 0.6470588235294118)' }}>{selectMode ? '勾选后点击确定按钮完成选择' : '双击数据行或点击单选图标完成选择'}</div>
+                  <div style={{ marginLeft: 8 }}>
+                    搜索结果共
+                    <span style={themeColor}>
+                      {tablePagination?.total || 0}
+                    </span>
+                    项
+                    {selectMode ? (
+                      <span>
+                        ， 本次已选
+                        <span style={themeColor}>
+                          {selectedRowKeys?.length || 0}
+                        </span>
+                        项
+                      </span>
+                    ) : (
+                      ''
+                    )}
+                  </div>
+                  <div
+                    style={{ color: 'rgba(127, 127, 127, 0.6470588235294118)' }}
+                  >
+                    {selectMode
+                      ? '勾选后点击确定按钮完成选择'
+                      : '双击数据行或点击单选图标完成选择'}
+                  </div>
                 </div>
                 <Table
-                  size='small'
+                  size="small"
                   rowSelection={rowSelection}
                   columns={modalTableProps?.tableColumns}
                   dataSource={tableData}
                   pagination={tablePagination}
                   onChange={handleTableChange}
                   rowKey={mappingValueField}
-                  scroll={{ x: modalTableProps.overScrollX || 'max-content', y: modalTableProps.overScrollY || null }}
-                  onRow={record => {
+                  scroll={{
+                    x: modalTableProps.overScrollX || 'max-content',
+                    y: modalTableProps.overScrollY || null,
+                  }}
+                  onRow={(record) => {
                     return {
-                      onDoubleClick: event => onDoubleClickSelect(event, record),
+                      onDoubleClick: (event) =>
+                        onDoubleClickSelect(event, record),
                     };
                   }}
                 />
-                {selectMode ? <div className={'select_list_selectAll'}><Checkbox indeterminate={indeterminate} checked={checkedAll} onChange={onChangeCheckAll} disabled={selectProps?.disabled || props?.disabled} /> 全选所有页面</div> : ''}
+                {selectMode ? (
+                  <div className={'select_list_selectAll'}>
+                    <Checkbox
+                      indeterminate={indeterminate}
+                      checked={checkedAll}
+                      onChange={onChangeCheckAll}
+                      disabled={selectProps?.disabled || props?.disabled}
+                    />{' '}
+                    全选所有页面
+                  </div>
+                ) : (
+                  ''
+                )}
               </div>
             </div>
           </div>

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { TreeSelect, Tooltip, Tag } from 'antd';
-import axios from 'axios';
+import request from '@/utils/request';
 import { stringify } from 'querystring';
 import _ from "lodash"
 import { judgeIsRequestSuccess } from '@/utils/requestUtils';
@@ -77,7 +77,7 @@ const TreeSearchSelect = (props: any) => {
       [`${paramsKey}`]: q,
       ...initialParams,
     }
-    axios.get(`${url}?${stringify(paramsData)}`, { headers }).then(async (res: any) => {
+    request.get(`${url}?${stringify(paramsData)}`, {headers}).then(async (res: any) => {
       const resData = res?.data || [];
       let coverData;
 
@@ -100,14 +100,15 @@ const TreeSearchSelect = (props: any) => {
 
   const formatData = (value: any) => {
     if (labelInValue) {
-      const formatResult = multiple || treeCheckable ? value.map((i: any) => ({ ...i, key: i.value })) : { ...value, key: value?.value };
+      const formatResult = multiple||treeCheckable ? value.map((i: any) => ({...i, key: i.value})) : { ...value, key: value?.value };
       return formatResult
     } else {
-      const formatResult = multiple || treeCheckable ? value.map((i: any) => (i?.value || i)) : (_.get(value?.[0], 'value') || value)
+      const formatResult = multiple||treeCheckable ? value.map((i: any) => (i?.value || i)) : (_.get(value?.[0], 'value') || value)
       return formatResult
     }
   }
-  const parallelData = (data: any, result: any) => {
+
+  const parallelData = (data: any,result: any) => {
     data.forEach((i: any) => {
       result.push(i);
       if (i[treeChildrenRoom]) {
@@ -116,31 +117,32 @@ const TreeSearchSelect = (props: any) => {
     });
     return result;
   }
-  const getSelectItem = (tData: any, selectValue: any) => {
-    const handleList = tData || [];
+  const getSelectItem = (tData: any,selectValue: any) => {
+    const handleList = tData||[];
     let result = [];
-    if (labelInValue) {
-      result = multiple || treeCheckable ? (selectValue?.map((i: any) => {
-        if (handleList.some((s: any) => s.key == i.value)) {
+    if(labelInValue) {
+      result = multiple||treeCheckable ? (selectValue?.map((i: any) => {
+        if(handleList.some((s: any) => s.key == i.value)){
           return handleList.find((s: any) => s.key == i.value)
         }
-      }) || []) : (handleList?.find((s: any) => s.key == selectValue?.value) || {})
+      }) || []) : (handleList?.find((s: any) => s.key == selectValue?.value)||{})
     } else {
       const cValue = _.get(selectValue?.[0], 'value', selectValue);
-      result = multiple || treeCheckable ? (selectValue?.map((i: any) => {
-        if (handleList.some((s: any) => s.key == i)) {
+      result = multiple||treeCheckable ? (selectValue?.map((i: any) => {
+        if(handleList.some((s: any) => s.key == i)){
           return handleList.find((s: any) => s.key == i)
         }
-      }) || []) : (handleList?.find((s: any) => s.key == cValue) || {})
+      }) || []) : (handleList?.find((s: any) => s.key == cValue)||{})
     }
     return result;
   }
+
   const handleChange = (data: any, dataName: any) => {
     const handleData = formatData(data);
     // 获取选中树节点当条数据，并返回给调用业务
-    const parallelTreeData = parallelData(treeData, [])
-    const currentItem = getSelectItem(parallelTreeData, data)
-    onChange(handleData, data, currentItem, parallelTreeData);
+    const parallelTreeData = parallelData(treeData,[])
+    const currentItem = getSelectItem(parallelTreeData,data)
+    onChange(handleData,data,currentItem,parallelTreeData);
     onChangeName && onChangeName(dataName);
     getTreeData && getTreeData(treeData); // 把树节点暴露出去
     ctx?.form?.setFieldValue(ctx.name, handleData);
@@ -151,17 +153,17 @@ const TreeSearchSelect = (props: any) => {
   }, []);
 
   const maxTagPlaceholder = (selectedValues: any) => {
-    const onClose = (e: any, item: any) => {
+    const onClose = (e: any,item: any) => {
       e.preventDefault();
-      const newValue = labelInValue ? JSON.parse(JSON.stringify(value)).filter((i: any) => i.value !== item.value) : JSON.parse(JSON.stringify(value)).filter((i: any) => i !== item.value)
-      const newValueName = labelInValue ? null : JSON.parse(JSON.stringify(valueName)).filter((i: any) => i !== item.label)
+      const newValue = labelInValue ? JSON.parse(JSON.stringify(value)).filter((i: any) => i.value !== item.value): JSON.parse(JSON.stringify(value)).filter((i: any) => i !== item.value)
+      const newValueName = labelInValue ? null: JSON.parse(JSON.stringify(valueName)).filter((i: any) => i !== item.label)
       handleChange(newValue, newValueName);
     }
     return (
       <Tooltip title={selectedValues.map((i: any) => (
         <Tag
           closable={true}
-          onClose={(e) => onClose(e, i)}
+          onClose={(e) => onClose(e,i)}
           style={{ marginRight: 3, background: '#f5f5f5', height: '24px', border: '1px solid #f0f0f0' }}
         >
           {i.label}
@@ -193,7 +195,7 @@ const TreeSearchSelect = (props: any) => {
         multiple={multiple} // 	支持多选（当设置 treeCheckable 时自动变为 true）
         maxTagPlaceholder={maxTagPlaceholder}
         onChange={handleChange}
-        disabled={disabled || mode === 'view' || ctx?.mode === 'view'}
+        disabled={disabled || mode==='view' || ctx?.mode === 'view'}
         getPopupContainer={(triggerNode) => (getPopupContainer && getPopupContainer(triggerNode)) || document.body}
       >
       </TreeSelect>