@bit-sun/business-component 2.2.49 → 2.3.0-alpha.2

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

@@ -25,6 +25,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     needModalTable = true,
     getPopupContainer = undefined,
     fieldComponent,
+    selectBusinessType,
   } = props;
   const {
     url,
@@ -39,6 +40,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     mappingTextShowTextField,
     init = true,// 是否初始请求
     extralHeaders = {},// 额外请求头参数
+    specialBracket = false,// 是否使用特殊括弧显示选项 【value】text
   } = requestConfig || {};
   const resultSourceKey = handleSourceName(sourceName || requestConfig?.sourceName || 'supplierCode')
 
@@ -72,8 +74,10 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   const { run } = useDebounceFn(
     (v?: any) => {
       // 优化搜索参数 支持传多个
+      console.log(`🚀 => SearchSelect => v:`, v)
       let searchParams = {};
-      if (typeof selectParamsKey === 'string') {
+      console.log(`🚀 => SearchSelect => selectParamsKey:`, selectParamsKey)
+      if (typeof selectParamsKey === 'string' || typeof selectParamsInitKey === 'string') {
         let selectParamsInitValue = initVal
         if (labelInValue) {
           selectParamsInitValue = Array.isArray(initVal) ? initVal.map((i: any) => i.value || i.key).join(',') : initVal
@@ -87,6 +91,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
           searchParams = { ...searchParams, [i]: searchValue }
         })
       }
+      console.log(`🚀 => SearchSelect => searchParams:`, searchParams)
       // 防抖函数  待定
       getData(searchParams)
     },
@@ -100,7 +105,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   const [tableData, setTableData] = useState([]);
   const [tablePagination, setTablePagination] = useState(tableInitPagination)
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
-  const [doubleArr, setDoubleArr] = useState([]); // 存放双数组的数组
+  const [selectedRows, setSelectedRows] = useState([]);
   const [checkedAll, setCheckedAll] = useState(false)
   const [indeterminate, setIndeterminate] = useState(false)
   const [tableFormParams, setTableFormParams] = useState({});
@@ -136,7 +141,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   }))
 
   // 获取数据源 （type: 1下拉框 2/3弹框  不传值默认为下拉框）
-  const getData = (params = {}, type = 1) => {
+  const getData = (params = {}, type = 1,callback?: any) => {
     if (!requestConfig) return;
 
     setFetching(true)
@@ -151,9 +156,15 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
           // 解决依赖项在弹窗中回显/更改（如果不能更改，传参fixedparamsDisabled为true即可）
           if(type == 2 || type == 3) {
             const fixedChangeParamVal = form.getFieldValue(item);
+            let isDependenceValueChange = false;
+            let dependenceValue = fixedParamVal;
             // 依赖项在弹窗form中更改--①更换依赖值；②去掉依赖值
-            const isDependenceValueChange = (fixedChangeParamVal && fixedChangeParamVal !== fixedParamVal) || (type == 2 && !fixedChangeParamVal);
-            const dependenceValue = isDependenceValueChange ? fixedChangeParamVal : fixedParamVal;
+            if(!fixedparamsDisabled) {
+              isDependenceValueChange =
+                (fixedChangeParamVal && fixedChangeParamVal !== fixedParamVal)
+                || (type == 2 && !fixedChangeParamVal);
+              dependenceValue = isDependenceValueChange ? fixedChangeParamVal : fixedParamVal;
+            }
             fixedParam[item] = dependenceValue;
             form.setFieldsValue({ ...form?.getFieldsValue(), [item]: dependenceValue })
             if(isDependenceValueChange) {
@@ -305,7 +316,9 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
                 }
                 return {
                   ...item,
-                  text: item[mappingTextField],
+                  text: specialBracket 
+                    ? `【${item[mappingValueField]}】${item[mappingTextField]}` 
+                    : item[mappingTextField],
                   textShowText,
                   textShowKey: item[mappingTextShowKeyField || mappingValueField],
                   value: item[mappingValueField],
@@ -326,7 +339,9 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
                 }
                 return {
                   ...item,
-                  text: item[mappingTextField],
+                  text: specialBracket 
+                    ? `【${item[mappingValueField]}】${item[mappingTextField]}` 
+                    : item[mappingTextField],
                   textShowText,
                   textShowKey: item[mappingTextShowKeyField || mappingValueField],
                   value: item[mappingValueField],
@@ -335,13 +350,17 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             : [];
         }
         source = Array.isArray(source) ? source : []
-        if (type === 1) {
-          ctx?.form?.setFieldSource(resultSourceKey, source)
-          setItems(source)
-          setItemsTotal(Number(res?.total || res?.totalCount || source.length))
+        if(callback) {
+          callback(source)
         } else {
-          setTableData(source)
-          setTablePagination({ ...tablePagination, total: Number(res?.total || res?.totalCount || source.length), pageSize: Number(res?.size || res?.pageSize || (params?.pageSize || pageSize)), current: Number(res?.page || res?.currentPage || (params?.currentPage || currentPage)) })
+          if (type === 1) {
+            ctx?.form?.setFieldSource(resultSourceKey, source)
+            setItems(source)
+            setItemsTotal(Number(res?.total || res?.totalCount || source.length))
+          } else {
+            setTableData(source)
+            setTablePagination({ ...tablePagination, total: Number(res?.total || res?.totalCount || source.length), pageSize: Number(res?.size || res?.pageSize || (params?.pageSize || pageSize)), current: Number(res?.page || res?.currentPage || (params?.currentPage || currentPage)) })
+          }
         }
       })
       .catch((err) => { setFetching(false) });
@@ -388,6 +407,14 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     makeUniqueValue();
   }, [resultSourceKey])
 
+  useEffect(() => {
+    if (init) {
+      setItems([]);
+      setItemsTotal(0);
+      run('init')
+    }
+  },[selectBusinessType])
+
   const showModal = () => {
     getData({ pageSize: tableInitPageSize, currentPage: 1 }, 3)
     setIsModalVisible(true);
@@ -395,15 +422,13 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     if (value) {
       if (selectMode) {
         setSelectedRowKeys(labelInValue ? value.map(i => i.key) : value)
+        setSelectedRows(labelInValue ? value.map(i => ({ [mappingValueField]: i.key, value: i.key, text: i.label })) : value.map(i => ({ [mappingValueField]: i, value: i })))
         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);
-        // 需清空数据
-        if (!value.length) {
-          setDoubleArr([])
-        }
       } else {
         setSelectedRowKeys(labelInValue ? [value.key] : [value])
+        setSelectedRows(labelInValue ? [{ [mappingValueField]: value.key, value: value.key, text: value.label }] : [{ [mappingValueField]: value, value: value }])
         setPopValue(labelInValue ? [{ value: value.key, text: value.label }] : [{ value: value }]);
       }
     }
@@ -416,6 +441,9 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
       ctx?.form?.setFieldSource(resultSourceKey, source)
       setItems(source)
       formaData(selectedValue, source);
+    } else {
+      const formatResult = selectMode ? [] : null
+      onChange(formatResult, selectedValue)
     }
   }
 
@@ -440,7 +468,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     setTableData([]);
     setTablePagination(tableInitPagination);
     setSelectedRowKeys([]);
-    setDoubleArr([]);
+    setSelectedRows([]);
     setCheckedAll(false);
     setIndeterminate(false);
   };
@@ -501,25 +529,32 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     getData({ ...tableFormParams, pageSize: pagination.pageSize, currentPage: pagination.current }, 2)
   }
 
+  const onCheckAllData = (pSize) => {
+    getData({ ...tableFormParams, pageSize: pSize, currentPage: 1 }, 2,(source) => {
+      const currentItemsData = JSON.parse(JSON.stringify(source))
+      setSelectedRowKeys(currentItemsData.map(i => i.value))
+      setPopValue(currentItemsData);
+      setSelectedRows(currentItemsData)
+    })
+  }
   const onChangeCheckAll = (e) => {
     if (e.target.checked) {
       // 如果下拉框有所有数据就处理选中所有【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 请求接口获取所有数据
+        const totalPage = Math.ceil(itemsTotal / tablePagination?.pageSize);
+        const allPageSize = totalPage * tablePagination?.pageSize;
+        onCheckAllData(allPageSize)
+      } else {
+        const currentItemsData = JSON.parse(JSON.stringify(items))
+        setSelectedRowKeys(currentItemsData.map(i => i.value))
+        setPopValue(currentItemsData);
+        setSelectedRows(currentItemsData)
       }
     } else {
       setSelectedRowKeys([])
       setPopValue([]);
-      setDoubleArr([])
+      setSelectedRows([])
     }
     setIndeterminate(false);
     setCheckedAll(e.target.checked);
@@ -529,13 +564,13 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     const {
       filterTxt, text,
     } = props
-    const heightLightTxt = (txt, heightTxt) => {
+    const heightLightTxt = (text, heightTxt) => {
       if (heightTxt === '') {
-        return txt
+        return text
       }
       // 前面filterOption 不区分大小写，这里用i
       const regexp = new RegExp(heightTxt, 'gi')
-      return txt.replace(regexp, `<span style="color:red">${heightTxt}</span>`)
+      return text.replace(regexp, `<span style="color:red">${heightTxt}</span>`)
     }
     return (
       <Tooltip title={text}>
@@ -566,37 +601,19 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   };
 
   const onChangeSelectedKeys = (selectKeys, selectRows) => {
-    const nowPage = tablePagination?.current;
-
-    let filterRows = []; // 存放拼接后的一维数组的变量
-    let sksResult = [];
+    let sksResult = selectRows.map((i) => i.value);
 
-    if (selectMode) {
-      // 处理多选分页累计选中
-      // 勾选生成二维数组
-      doubleArr[nowPage ? nowPage - 1 : 0] = selectRows
-      // console.log(doubleArr)
-      setDoubleArr(doubleArr)
-      // 这块扁平化成为一位数组
-      filterRows = mapRows(doubleArr);
-      // console.log(filterRows)
-
-      sksResult = filterRows.map((i) => i.value)
-    } else {
-      // 处理单选
-      filterRows = selectRows;
-      sksResult = selectRows.map((i) => i.value)
-      // 单选 默认直接选中 不需要确定  配置了modalRadioNeedFooter就需要确定
-      if(!modalTableProps?.modalRadioNeedFooter) {
-        handleSelectOver(filterRows)
-        handleCancel();
-      }
+    // 单选 默认直接选中 不需要确定  配置了modalRadioNeedFooter就需要确定
+    if(!selectMode && !modalTableProps?.modalRadioNeedFooter) {
+      handleSelectOver(selectRows)
+      handleCancel();
     }
 
     setSelectedRowKeys(sksResult)
-    setPopValue(filterRows);
-    setIndeterminate(!!filterRows.length && filterRows.length < tablePagination?.total);
-    setCheckedAll(filterRows.length === tablePagination?.total);
+    setSelectedRows(selectRows)
+    setPopValue(selectRows);
+    setIndeterminate(!!selectRows.length && selectRows.length < tablePagination?.total);
+    setCheckedAll(selectRows.length === tablePagination?.total);
   }
 
   // 生成唯一值
@@ -609,8 +626,13 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   const rowSelection = {
     type: selectMode ? 'checkbox' : 'radio',
     selectedRowKeys,
+    preserveSelectedRowKeys: true,
     onChange: (sks, srs) => {
-      onChangeSelectedKeys(sks, srs)
+      // 处理翻页后，之前存储的selectedRows变为undefined
+      // selectedRows合并新数组，过滤undefined，过滤留下对应selectedRowKeys的集合
+      let tmpSelectedRows = selectedRows.concat(srs).filter(item => item != undefined);
+      let totalSelectedRows = sks.map(key => tmpSelectedRows.filter(item => item[mappingValueField] == key)[0]).filter(item => item != undefined)
+      onChangeSelectedKeys(sks, totalSelectedRows)
     },
     getCheckboxProps: () => {
       return ({
@@ -716,6 +738,14 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     )
   }
 
+  const handleSelectOptionsShowValue = (specialBracket: boolean, item: object) => {
+    let showText = Array.isArray(item.textShowText) &&
+      item.textShowText.join('    ') || item.textShowText;
+    return specialBracket 
+      ? `【${item.textShowKey}】${showText}`
+      : `${item.textShowKey}       ${showText}`
+  };
+
   return (
     <div className={'search_select'}>
       {fieldComponent ?
@@ -762,10 +792,17 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             maxTagPlaceholder={maxTagPlaceholder}
             {...currentSelectProps}
             getPopupContainer={(triggerNode) => (getPopupContainer && getPopupContainer(triggerNode)) || triggerNode.parentElement}
+            onClear={() => { 
+              console.log('@清空回调');
+              run();
+            }}
           >
             {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 })}
+                {LightHeightOption({ 
+                  text: handleSelectOptionsShowValue(specialBracket, item), 
+                  filterTxt: searchValue 
+                })}
               </Option>
             ))}
           </Select>

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

@@ -19,7 +19,8 @@ const TreeSearchSelect = (props: any) => {
     showSearch = true,
     maxTagCount = 1,
     multiple = false,
-    isChoose = false,
+    isChoose = false, // 默认父节点不可选；传true则不限制
+    rootDisabled = false, // 默认根节点可选
     mode,
     getPopupContainer,
     labelInValue = false,
@@ -34,13 +35,15 @@ const TreeSearchSelect = (props: any) => {
 
   const {
     url,
+    headers,
     paramsKey = 'qp-name-like',
     resKeyValue = ['id', 'name'],
     initialParams = {},
   } = remoteSource;
 
   const mapSearchTree = (treeDataItem: any) => {
-    const haveChildren = Array.isArray(treeDataItem.children) && treeDataItem.children.length > 0;
+    const haveChildren = Array.isArray(treeDataItem.children) && treeDataItem.children.length > 0; // 盘算是否为父节点
+    const isRoot = treeDataItem?.id == '0'; // 判断是否为根节点
     return {
       title: treeDataItem[resKeyValue[1]],
       key: treeDataItem[resKeyValue[0]],
@@ -48,16 +51,19 @@ const TreeSearchSelect = (props: any) => {
       parentId: treeDataItem.parent,
       data: { ...treeDataItem },
       isLeaf: !haveChildren,
-      disabled: isDisabled(haveChildren),
+      disabled: isDisabled(haveChildren,isRoot),
       children: haveChildren ? treeDataItem.children.map((i: any) => mapSearchTree(i)) : [],
     };
   };
 
-  const isDisabled = (children: any) => {
+  const isDisabled = (isParent: boolean,isRoot: boolean) => {
     if (isChoose) {
+      if(rootDisabled && isRoot){
+        return rootDisabled
+      }
       return false;
     }
-    return children;
+    return isParent;
   }
 
   /* 实时查询   但是目前用的直接是完整数据源, 所以没有使用 */
@@ -66,7 +72,7 @@ const TreeSearchSelect = (props: any) => {
       [`${paramsKey}`]: q,
       ...initialParams,
     }
-    axios.get(`${url}?${stringify(paramsData)}`).then(async (res: any) => {
+    axios.get(`${url}?${stringify(paramsData)}`, {headers}).then(async (res: any) => {
       const resData = res?.data || [];
       let coverData;
 
@@ -96,9 +102,40 @@ const TreeSearchSelect = (props: any) => {
       return formatResult
     }
   }
+  const parallelData = (data: any,result: any) => {
+    data.forEach((i: any) => {
+      result.push(i);
+      if (i.children) {
+        parallelData(i.children, result);
+      }
+    });
+    return result;
+  }
+  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)){
+          return handleList.find((s: any) => s.key == i.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)){
+          return handleList.find((s: any) => s.key == i)
+        }
+      }) || []) : (handleList?.find((s: any) => s.key == cValue)||{})
+    }
+    return result;
+  }
   const handleChange = (data: any, dataName: any) => {
     const handleData = formatData(data);
-    onChange(handleData,data);
+    // 获取选中树节点当条数据，并返回给调用业务
+    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);