@bit-sun/business-component 1.1.25 → 1.1.28

package/src/components/Business/SearchSelect/BusinessUtils.ts

@@ -6,7 +6,7 @@ import { getDictionarySource, getDictionaryTextByValue, loadSelectSource } from
 const hasDictSharingType =  getDictionarySource('UC000013')?.length;
 const sharingTypeDataList = hasDictSharingType && getDictionarySource('UC000013') || sharingType
 
-export function commonFun (type?: string, prefixUrl: any) {
+export function commonFun (type?: string, prefixUrl: any, requestConfigProp?: any, modalTableBusProps?:any) {
   // 默认type === 'supplier' 供应商选择器
   let requestConfig = {
     url: `${prefixUrl.selectPrefix}/supplier`,
@@ -14,6 +14,7 @@ export function commonFun (type?: string, prefixUrl: any) {
     otherParams: {
       sorter: 'desc-id'
     }, // 默认参数
+    ...requestConfigProp
   }
 
   /*
@@ -155,7 +156,8 @@ export function commonFun (type?: string, prefixUrl: any) {
         dataIndex: 'sharingType',
         render: (text: number) => hasDictSharingType ? getDictionaryTextByValue('UC000013', text) : sharingType.find((i: any) => i.value === text)?.text
       },
-    ]
+    ],
+    ...modalTableBusProps,
   }
   let needModalTable = true;
 
@@ -171,6 +173,7 @@ export function commonFun (type?: string, prefixUrl: any) {
         sorter: 'desc-id'
       }, // 默认参数
       sourceName: 'skuCode',
+      ...requestConfigProp,
     }
     tableSearchForm = [
       { name: 'qp-name-like', label: 'SKU名称' },
@@ -279,7 +282,8 @@ export function commonFun (type?: string, prefixUrl: any) {
           title: '条形码',
           dataIndex: 'barCode',
         },
-      ]
+      ],
+      ...modalTableBusProps
     }
   }
 
@@ -296,6 +300,7 @@ export function commonFun (type?: string, prefixUrl: any) {
         sorter: 'desc-id'
       }, // 默认参数
       sourceName: 'warehouseIds',
+      ...requestConfigProp,
     }
     tableSearchForm = [
       { name: 'qp-physicalWarehouseName-like', label: '物理仓名称' },
@@ -346,7 +351,8 @@ export function commonFun (type?: string, prefixUrl: any) {
           title: '所属公司',
           dataIndex: 'companyName',
         },
-      ]
+      ],
+      ...modalTableBusProps
     }
   }
   if(type === 'realWarehouse') {
@@ -361,6 +367,7 @@ export function commonFun (type?: string, prefixUrl: any) {
         sorter: 'desc-id'
       }, // 默认参数
       sourceName: 'warehouseIds',
+      ...requestConfigProp,
     }
     tableSearchForm = [
       { name: 'qp-realWarehouseName-like', label: '逻辑仓名称' },
@@ -384,7 +391,8 @@ export function commonFun (type?: string, prefixUrl: any) {
           dataIndex: 'realWarehouseType',
           render: (text: number) => getDictionaryTextByValue('SC00004', text),
         },
-      ]
+      ],
+      ...modalTableBusProps,
     }
   }
 
@@ -401,6 +409,7 @@ export function commonFun (type?: string, prefixUrl: any) {
         sorter: 'desc-id'
       }, // 默认参数
       sourceName: 'warehouseIds',
+      ...requestConfigProp,
     }
     needModalTable = false
   }
@@ -416,6 +425,7 @@ export function commonFun (type?: string, prefixUrl: any) {
         sorter: 'desc-id'
       }, // 默认参数
       sourceName: 'warehouseIds',
+      ...requestConfigProp,
     }
     needModalTable = false
   }
@@ -431,6 +441,7 @@ export function commonFun (type?: string, prefixUrl: any) {
         sorter: 'desc-id'
       }, // 默认参数
       sourceName: 'customCode',
+      ...requestConfigProp,
     }
     tableSearchForm = [
       { name: 'qp-name-like', label: '客户名称' },
@@ -528,7 +539,8 @@ export function commonFun (type?: string, prefixUrl: any) {
           dataIndex: 'sharingType',
           render: (text: number) => hasDictSharingType ? getDictionaryTextByValue('UC000013', text) : sharingType.find((i: any) => i.value === text)?.text,
         },
-      ]
+      ],
+      ...modalTableBusProps
     }
   }
 
@@ -543,6 +555,7 @@ export function commonFun (type?: string, prefixUrl: any) {
         sorter: 'desc-id'
       }, // 默认参数
       sourceName: 'code',
+      ...requestConfigProp,
     }
     tableSearchForm = [
       { name: 'qp-name-like', label: '店铺名称' },
@@ -664,7 +677,8 @@ export function commonFun (type?: string, prefixUrl: any) {
           title: '归属核算主体',
           dataIndex: 'accountingName',
         },
-      ]
+      ],
+      ...modalTableBusProps
     }
   }
 
@@ -680,6 +694,7 @@ export function commonFun (type?: string, prefixUrl: any) {
         sorter: 'desc-id'
       }, // 默认参数
       sourceName: 'accountingSubjectCode',
+      ...requestConfigProp,
     }
     needModalTable = false
   }
@@ -695,6 +710,7 @@ export function commonFun (type?: string, prefixUrl: any) {
         sorter: 'desc-id'
       }, // 默认参数
       sourceName: 'inventoryOrgCode',
+      ...requestConfigProp,
     }
     needModalTable = false
   }
@@ -710,6 +726,7 @@ export function commonFun (type?: string, prefixUrl: any) {
         sorter: 'desc-id'
       }, // 默认参数
       sourceName: 'corporationCompany',
+      ...requestConfigProp,
     }
     needModalTable = false
   }
@@ -718,7 +735,7 @@ export function commonFun (type?: string, prefixUrl: any) {
   if(type === 'employee') {
     requestConfig = {
       url: `${prefixUrl.selectPrefix}/employee/v2`,
-      filter: 'qp-name,employeeNumber-orGroup,like', // 过滤参数
+      filter: 'qp-employeeNumber,name-orGroup,like', // 过滤参数
       mappingTextField: 'name',
       mappingTextShowKeyField: 'employeeNumber',
       mappingValueField: 'employeeNumber',
@@ -727,6 +744,7 @@ export function commonFun (type?: string, prefixUrl: any) {
         sorter: 'desc-id'
       }, // 默认参数
       sourceName: 'employeeNumber',
+      ...requestConfigProp,
     }
     tableSearchForm = [
       { name: 'qp-name-like', label: '员工名称' },
@@ -781,7 +799,8 @@ export function commonFun (type?: string, prefixUrl: any) {
           title: '手机号',
           dataIndex: 'officeTelephone',
         },
-      ]
+      ],
+      ...modalTableBusProps
     }
   }
 
@@ -797,6 +816,7 @@ export function commonFun (type?: string, prefixUrl: any) {
         sorter: 'desc-id'
       }, // 默认参数
       sourceName: 'deliveryModeCode',
+      ...requestConfigProp
     }
     tableSearchForm = [
       { name: 'qp-name-like', label: '配送方式名称' },
@@ -880,7 +900,8 @@ export function commonFun (type?: string, prefixUrl: any) {
           dataIndex: 'remark',
           title: '备注',
         },
-      ]
+      ],
+      ...modalTableBusProps
     }
   }
 

package/src/components/Business/SearchSelect/index.md

@@ -177,14 +177,11 @@ export default () => {
       setValue(value)
     },
     // requestConfig: {
-    //   url: `/bop/api/physicalWarehouse`,
-    //   filter: 'qp-physicalWarehouseName,physicalWarehouseCode-orGroup,like',
-    //   mappingTextField: 'physicalWarehouseName',
     //   mappingValueField: 'physicalWarehouseCode',
-    //   otherParams: {
-    //     sorter: 'desc-id'
-    //   }, // 默认参数
-    //   sourceName: 'warehouseIds',
+    //   sourceName: 'physicalWarehouseCode',
+    // },
+    // modalTableProps: {
+    //   modalTableTitle: '选择物理仓-更改title测试',
     // },
     prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
     selectProps,

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

@@ -1,26 +1,43 @@
-import React from 'react';
+/*
+ * @Description:
+ * @Author: rodchen
+ * @Date: 2022-05-07 15:17:28
+ * @LastEditTime: 2022-05-08 21:01:21
+ * @LastEditors: rodchen
+ */
+import React, { useMemo } from 'react';
 import { commonFun } from './BusinessUtils';
 import SearchSelect from '@/components/Functional/SearchSelect';
 
+const MemoSearchSelect = React.memo(SearchSelect)
 
 const  BusinessSearchSelect = (props: any) => {
   const businessType = props?.selectBusinessType || 'supplier';
   const prefixUrl = props?.prefixUrl || { selectPrefix: '/bop/api', formSelectFix: '/bop/api' };
 
-  const { requestConfig, modalTableProps, needModalTable } = commonFun(businessType, prefixUrl);
-
-  const currentProps = {
-    requestConfig,
-    ...props,
-    needModalTable,
-    modalTableProps
-  }
+  const { requestConfig, modalTableProps, needModalTable } = commonFun(businessType, prefixUrl,props?.requestConfig || {}, props?.modalTableProps || {});
+  const currentProps = useMemo(() => {
+    return {
+      ...props,
+      requestConfig,
+      needModalTable,
+      modalTableProps
+    }
+  }, [props?.value])
 
   return (
     <div>
-      <SearchSelect {...currentProps} />
+      <MemoSearchSelect {...currentProps} />
     </div>
   );
 };
 
-export default BusinessSearchSelect;
+export default React.memo(BusinessSearchSelect, (props, nextProps) => {
+  if(props && props.labelInValue && props.value && JSON.stringify(props.value) !== JSON.stringify(nextProps.value)) {
+    return false
+  }
+  if(props && props.value !== nextProps.value) {
+    return false
+  }
+  return true
+});

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

@@ -12,7 +12,7 @@ const { Option } = Select;
 
 const SearchSelect = (props: any) => {
   const {
-    value,
+    value, // 必传
     onChange,
     selectProps={},
     modalTableProps={},
@@ -21,6 +21,7 @@ const SearchSelect = (props: any) => {
     ctx,
     sourceName,
     needModalTable=true,
+    getPopupContainer=undefined
   } = props;
   const { url, otherParams, isMap, fixedparameter, fieldValToParam, mappingTextField='name', mappingTextShowKeyField,mappingValueField='code' } = requestConfig || {};
   const resultSourceKey = sourceName || requestConfig?.sourceName || 'supplierCode'
@@ -300,14 +301,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();
   };
 
@@ -431,6 +436,8 @@ const SearchSelect = (props: any) => {
       // 处理单选
       filterRows = selectRows;
       sksResult = selectRows.map((i) => i.value)
+      // 单选直接选中 不需要确定
+      handleSelectOver(filterRows)
     }
 
     setSelectedRowKeys(sksResult)
@@ -499,77 +506,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}       ${item.text}`, filterTxt: searchValue })}
+            </Option>
+          ))}
+        </Select>
         {needModalTable && (
           <Button style={{width: '30px', padding: '2px', height: 'auto'}} onClick={showModal} type="primary">
             <SearchOutlined />
@@ -583,7 +587,7 @@ const SearchSelect = (props: any) => {
           visible={isModalVisible}
           onOk={handleOk}
           onCancel={handleCancel}
-          footer={[
+          footer={selectMode?[
             <Button key="back" onClick={handleCancel}>
               取消
             </Button>,
@@ -595,7 +599,7 @@ const SearchSelect = (props: any) => {
             >
               确定
             </Button>,
-          ]}
+          ]:null}
         >
           <div className={'search_select_wrapper'}>
             <div className={'search_select_wrapper_click_flag'} onClick={() => setCaretLeftFlag(!caretLeftFlag)}>