@bit-sun/business-component 1.1.26 → 1.1.29

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

@@ -7,12 +7,13 @@ import axios from 'axios';
 import { stringify } from 'querystring';
 import _ from "loadsh"
 import './index.less';
+import { BusinessSearchSelect } from '@/index';
 
 const { Option } = Select;
 
 const SearchSelect = (props: any) => {
   const {
-    value,
+    value, // 必传
     onChange,
     selectProps={},
     modalTableProps={},
@@ -21,8 +22,9 @@ const SearchSelect = (props: any) => {
     ctx,
     sourceName,
     needModalTable=true,
+    getPopupContainer=undefined
   } = props;
-  const { url, otherParams, isMap, fixedparameter, fieldValToParam, mappingTextField='name', mappingTextShowKeyField,mappingValueField='code' } = requestConfig || {};
+  const { url, otherParams, isMap, fixedparameter, fieldValToParam, mappingTextField='name', mappingTextShowKeyField,mappingValueField='code', mappingTextShowTextField } = requestConfig || {};
   const resultSourceKey = sourceName || requestConfig?.sourceName || 'supplierCode'
 
   const selectMode = selectProps?.mode  // 设定当前选择器 为单选或者多选模式 无设定为单选模式（默认）
@@ -183,6 +185,8 @@ const SearchSelect = (props: any) => {
           delete params[key]
         }else if (Array.isArray(element)) {
           params[key] = element.join(',');
+        } else if(element == null || element === undefined || String(element).trim() === '') {
+          delete params[key]
         }
       }
     }
@@ -218,18 +222,42 @@ const SearchSelect = (props: any) => {
           source = res
             ? res[keys]
               ? res[keys].map((item: any) => {
+                let textShowText = item[mappingTextField]
+                if(mappingTextShowTextField) {
+                  textShowText = []
+                  if(Array.isArray(mappingTextShowTextField)) {
+                    mappingTextShowTextField.forEach((r: any) => {
+                      textShowText.push(item[r])
+                    })
+                  } else {
+                    textShowText = item[mappingTextShowTextField]
+                  }
+                }
                 return {
                   ...item,
                   text: item[mappingTextField],
+                  textShowText,
                   textShowKey: item[mappingTextShowKeyField || mappingValueField],
                   value: item[mappingValueField],
                 };
               })
               : Array.isArray(res) &&
               res?.map((item: Record<string, any>) => {
+                let textShowText = item[mappingTextField]
+                if(mappingTextShowTextField) {
+                  textShowText = []
+                  if(Array.isArray(mappingTextShowTextField)) {
+                    mappingTextShowTextField.forEach((r: any) => {
+                      textShowText.push(item[r])
+                    })
+                  } else {
+                    textShowText = item[mappingTextShowTextField]
+                  }
+                }
                 return {
                   ...item,
                   text: item[mappingTextField],
+                  textShowText,
                   textShowKey: item[mappingTextShowKeyField || mappingValueField],
                   value: item[mappingValueField],
                 };
@@ -254,7 +282,7 @@ const SearchSelect = (props: any) => {
     const { target } = e;
     const totalPage = Math.ceil(itemsTotal / pageSize)
     // 判断是否滑动到底部
-    const isTouchGround = target.scrollTop + target.offsetHeight === target.scrollHeight
+    const isTouchGround = target.scrollTop + target.offsetHeight === target.scrollHeight // >=scrollHeight
     // 判断数据是否还没有加载到了最后一页
     const canPageAdd = scrollPage < totalPage
     if (isTouchGround && canPageAdd) {
@@ -262,6 +290,16 @@ const SearchSelect = (props: any) => {
       setScrollPage(nextScrollPage);
       getData({currentPage: nextScrollPage}); // 调用api方法
     }
+
+    //判断是否滑动到顶部
+    const isTouchTop = target.scrollTop ===0  // <=0
+    // 判断数据是否到第一页
+    const canPageJian = scrollPage > 1
+    if (isTouchTop && canPageJian) {
+      const preScrollPage = scrollPage - 1;
+      setScrollPage(preScrollPage);
+      getData({currentPage: preScrollPage}); // 调用api方法
+    }
   }
 
   useEffect(() => {
@@ -288,7 +326,7 @@ const SearchSelect = (props: any) => {
         setSelectedRowKeys(labelInValue ? value.map(i => i.key) : value)
         setPopValue(labelInValue ? value.map(i => ({ value: i.key, text: i.label })) : value.map(i => ({ value: i })));
         setIndeterminate(!!value.length && value.length < itemsTotal);
-        setCheckedAll(value.length === itemsTotal);
+        setCheckedAll(itemsTotal && value.length === itemsTotal);
         // 需清空数据
         if(!value.length) {
           setDoubleArr([])
@@ -300,14 +338,18 @@ const SearchSelect = (props: any) => {
     }
   };
 
-  const handleOk = () => {
-    if(popvalue?.length) {
-      formaData(popvalue);
+  const handleSelectOver = (selectedValue: any) => {
+    if(selectedValue?.length) {
+      formaData(selectedValue);
       // 解决选择最后1页的sku，返回后，不显示名称问题
-      const source = _.uniqBy(items.concat(popvalue), 'value')
+      const source = _.uniqBy(items.concat(selectedValue), 'value')
       ctx?.form?.setFieldSource(resultSourceKey, source)
       setItems(source)
     }
+  }
+
+  const handleOk = () => {
+    handleSelectOver(popvalue)
     handleCancel();
   };
 
@@ -325,6 +367,9 @@ const SearchSelect = (props: any) => {
     form.resetFields();
     setTableFormParams({});
     setIsModalVisible(false);
+    if(selectMode) {
+      run();
+    }
   };
 
   const onSearchChange = (e) => {
@@ -341,6 +386,9 @@ const SearchSelect = (props: any) => {
     const params = form.getFieldsValue();
     setTableFormParams(params);
     getData({ ...params, pageSize: tableInitPageSize }, 2)
+    if(selectMode){
+      getData(params)
+    }
   }
 
   const onResetTable = () => {
@@ -355,12 +403,17 @@ const SearchSelect = (props: any) => {
 
   const onChangeCheckAll = (e) => {
     if(e.target.checked) {
-      // 如果下拉框有所有数据就处理选中所有，如果没有 就默认查出所有数据
-      if(items.length === itemsTotal) {
-        const currentItemsData = JSON.parse(JSON.stringify(items))
-        setSelectedRowKeys(currentItemsData.map(i => i.value))
-        setPopValue(currentItemsData);
-      } else {
+      // 如果下拉框有所有数据就处理选中所有【items.length === itemsTotal】(最多可选100条)
+      // 如果超过100条 就默认查出所有数据
+      const currentItemsData = JSON.parse(JSON.stringify(items))
+      const totalPage = Math.ceil(itemsTotal / tablePagination?.pageSize)
+      for(let i=0; i <= totalPage-1; i++){
+        doubleArr[i] = currentItemsData.slice(tablePagination?.pageSize*i,tablePagination?.pageSize*(i+1))
+      }
+      setDoubleArr(doubleArr)
+      setSelectedRowKeys(currentItemsData.map(i => i.value))
+      setPopValue(currentItemsData);
+      if(items.length < itemsTotal) {
         // TODO 请求接口获取所有数据
       }
     } else {
@@ -385,12 +438,14 @@ const SearchSelect = (props: any) => {
       return txt.replace(regexp, `<span style="color:red">${heightTxt}</span>`)
     }
     return (
-      <div ref={(nodeElement) => {
-        if (nodeElement) {
-          nodeElement.innerHTML = heightLightTxt(text, filterTxt)
-        }
-      }}
-      />
+      <Tooltip title={text}>
+        <div ref={(nodeElement) => {
+          if (nodeElement) {
+            nodeElement.innerHTML = heightLightTxt(text, filterTxt)
+          }
+        }}
+        />
+      </Tooltip>
     )
   }
 
@@ -431,6 +486,9 @@ const SearchSelect = (props: any) => {
       // 处理单选
       filterRows = selectRows;
       sksResult = selectRows.map((i) => i.value)
+      // 单选直接选中 不需要确定
+      handleSelectOver(filterRows)
+      handleCancel();
     }
 
     setSelectedRowKeys(sksResult)
@@ -487,6 +545,16 @@ const SearchSelect = (props: any) => {
           )
         }
 
+        if(i?.type === 'businessSearchSelect') {
+          return (
+            <div>
+              <Form.Item name={i.name} label={i.label} key={i.name}>
+                <BusinessSearchSelect {...i.field.props} />
+              </Form.Item>
+            </div>
+          )
+        }
+
         // 默认type是input
         return (
           <Form.Item name={i.name} label={i.label} key={i.name}>
@@ -499,77 +567,74 @@ const SearchSelect = (props: any) => {
     }
   }
 
-  const TooltipContent = () => {
-    if(selectMode && value && value?.length){
-      const listSelected = JSON.parse(JSON.stringify(items)).filter((i: any) => value.find(item => item === i.value)) || []
-      const onClose = (e: any,item: any) => {
-        e.preventDefault();
-        const newValue = JSON.parse(JSON.stringify(value)).filter((i: any) => i !== item.value)
-        onChange(newValue);
-      }
-      return listSelected?.length && listSelected.map((i: any) => (
+  const maxTagPlaceholder = (selectedValues) => {
+    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)
+      onChange(newValue);
+    }
+    return (
+      <Tooltip title={selectedValues.map((i: any) => (
         <Tag
           closable={true}
           onClose={(e) => onClose(e,i)}
           style={{ marginRight: 3, background: '#f5f5f5', height: '24px', border: '1px solid #f0f0f0' }}
         >
-          {i.text}
+          {i.label}
         </Tag>
-      )) || ''
-    } else {
-      setTooltipVisible(false)
-    }
-    return ''
+      ))}>
+        {`+ ${selectedValues?.length}`}
+      </Tooltip>
+    )
   }
 
   return (
     <div className={'search_select'}>
       <div className="search_select_show" id={`search_select_div_${uniqueValue}`}>
-        <Tooltip title={TooltipContent} visible={tooltipVisible} trigger={'hover'} onVisibleChange={visible => { if(selectMode && value && value?.length) { setTooltipVisible(visible)} }}>
-          <Select
-            virtual
-            labelInValue={labelInValue}
-            value={value}
-            onChange={onChange}
-            dropdownRender={menu => (
-              <>
-                <Input
-                  value={searchValue}
-                  style={{ width: '98%', marginLeft: '1%' }}
-                  placeholder="请输入"
-                  onChange={e=> onSearchChange(e)}
-                  onBlur={onSearchBlur}
-                  onKeyDown={(e) => {
-                    //  阻止多选的冒泡
-                    e.stopPropagation()
-                  }}
-                />
-                <Divider style={{ margin: '8px 0' }} />
-                {menu}
-              </>
-            )}
-            notFoundContent={
-              fetching ? <Spin size="small" /> :
-                <div style={{ textAlign: 'center'}}>
-                  <div style={{ marginBottom: 16 }}>
-                    <CopyOutlined style={{ fontSize: '50px' }} />
-                  </div>
-                  <div>无匹配结果，请更换其他内容再试</div>
+        <Select
+          virtual
+          labelInValue={labelInValue}
+          value={value}
+          onChange={onChange}
+          dropdownRender={menu => (
+            <>
+              <Input
+                value={searchValue}
+                style={{ width: '98%', marginLeft: '1%' }}
+                placeholder="请输入"
+                onChange={e=> onSearchChange(e)}
+                onBlur={onSearchBlur}
+                onKeyDown={(e) => {
+                  //  阻止多选的冒泡
+                  e.stopPropagation()
+                }}
+              />
+              <Divider style={{ margin: '8px 0' }} />
+              {menu}
+            </>
+          )}
+          notFoundContent={
+            fetching ? <Spin size="small" /> :
+              <div style={{ textAlign: 'center'}}>
+                <div style={{ marginBottom: 16 }}>
+                  <CopyOutlined style={{ fontSize: '50px' }} />
                 </div>
-            }
-            onPopupScroll={SelectScroll}
-            style={{ width: needModalTable?'calc(100% - 30px)':'calc(100%)' }}
-            placeholder="请选择"
-            {...currentSelectProps}
-            getPopupContainer={() => document.getElementById(`search_select_div_${uniqueValue}`)}
-          >
-            {items.map(item => (
-              <Option key={item.value} label={item.text}>
-                {LightHeightOption({ text: `${item.textShowKey}       ${item.text}`, filterTxt: searchValue })}
-              </Option>
-            ))}
-          </Select>
-        </Tooltip>
+                <div>无匹配结果，请更换其他内容再试</div>
+              </div>
+          }
+          onPopupScroll={SelectScroll}
+          style={{ width: needModalTable?'calc(100% - 30px)':'calc(100%)' }}
+          placeholder="请选择"
+          maxTagPlaceholder={maxTagPlaceholder}
+          {...currentSelectProps}
+          getPopupContainer={() => (getPopupContainer && getPopupContainer()) || document.getElementById(`search_select_div_${uniqueValue}`)}
+        >
+          {items.map(item => (
+            <Option key={item.value} label={item.text}>
+              {LightHeightOption({ text: `${item.textShowKey}       ${Array.isArray(item.textShowText) && item.textShowText.join('    ') || item.textShowText}`, filterTxt: searchValue })}
+            </Option>
+          ))}
+        </Select>
         {needModalTable && (
           <Button style={{width: '30px', padding: '2px', height: 'auto'}} onClick={showModal} type="primary">
             <SearchOutlined />
@@ -583,7 +648,7 @@ const SearchSelect = (props: any) => {
           visible={isModalVisible}
           onOk={handleOk}
           onCancel={handleCancel}
-          footer={[
+          footer={selectMode?[
             <Button key="back" onClick={handleCancel}>
               取消
             </Button>,
@@ -595,7 +660,7 @@ const SearchSelect = (props: any) => {
             >
               确定
             </Button>,
-          ]}
+          ]:null}
         >
           <div className={'search_select_wrapper'}>
             <div className={'search_select_wrapper_click_flag'} onClick={() => setCaretLeftFlag(!caretLeftFlag)}>