@bit-sun/business-component 2.4.24 → 2.4.26-beta01

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 request from '@/utils/request';
+import axios from 'axios';
 import { stringify } from 'querystring';
-import _, { escapeRegExp, isNil } from "lodash"
+import _ from "lodash"
 import './index.less';
 import { BusinessSearchSelect, QueryMutipleInput } from '@/index';
 import { handleSourceName }  from './utils';
@@ -239,17 +239,7 @@ 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) => {
@@ -283,11 +273,9 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
       ...otherParams, // 默认参数
       ...fixedParam,
       ...params,
-    };
-    if (isNil(queryParams[selectParamsKey])) {
-      queryParams[selectParamsKey] = searchValue;
     }
-    request
+
+    axios
       .get(
         `${url}?${stringify(queryParams)}`,
         {
@@ -448,7 +436,6 @@ 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 }])
@@ -560,7 +547,6 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
       setSelectedRows(currentItemsData)
     })
   }
-
   const onChangeCheckAll = (e) => {
     if (e.target.checked) {
       // 如果下拉框有所有数据就处理选中所有【items.length === itemsTotal】(最多可选100条)
@@ -592,9 +578,8 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
       if (heightTxt === '') {
         return text
       }
-      const searchString = escapeRegExp(heightTxt);
       // 前面filterOption 不区分大小写，这里用i
-      const regexp = new RegExp(searchString, 'gi')
+      const regexp = new RegExp(heightTxt, 'gi')
       return text.replace(regexp, `<span style="color:red">${heightTxt}</span>`)
     }
     return (
@@ -777,37 +762,29 @@ 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' }} />
@@ -815,16 +792,13 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
               </>
             )}
             notFoundContent={
-              fetching ? (
-                <Spin size="small" className='searchSelectSpin' />
-              ) : (
+              fetching ? <Spin size="small" /> :
                 <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%)' }}
@@ -843,154 +817,73 @@ 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/SearchSelect/utils.ts

@@ -1,3 +1,3 @@
-export const handleSourceName = (sName: any) => {
-  return sName
-}
+export const handleSourceName = (sName: any) => {
+  return sName
+}

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { TreeSelect, Tooltip, Tag } from 'antd';
-import request from '@/utils/request';
+import axios from 'axios';
 import { stringify } from 'querystring';
 import _ from "lodash"
 import { judgeIsRequestSuccess } from '@/utils/requestUtils';
@@ -77,7 +77,7 @@ const TreeSearchSelect = (props: any) => {
       [`${paramsKey}`]: q,
       ...initialParams,
     }
-    request.get(`${url}?${stringify(paramsData)}`, {headers}).then(async (res: any) => {
+    axios.get(`${url}?${stringify(paramsData)}`, { headers }).then(async (res: any) => {
       const resData = res?.data || [];
       let coverData;
 
@@ -100,15 +100,14 @@ 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]) {
@@ -117,32 +116,31 @@ 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);
@@ -153,17 +151,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}
@@ -195,7 +193,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>