@bit-sun/business-component 1.1.3 → 1.1.7

package/src/components/SearchSelect/index.tsx

@@ -3,7 +3,6 @@ import React, { useState, useEffect } from 'react';
 import { useDebounceFn } from 'ahooks';
 import { Input, Button, Modal, Select, Divider, message, Spin, Form, Table, Checkbox } from 'antd';
 import { SearchOutlined, CopyOutlined, CaretLeftOutlined } from '@ant-design/icons';
-import { QueryMutipleInput } from '@bit-sun/business-component';
 import axios from 'axios';
 import { stringify } from 'querystring';
 import _ from "loadsh"
@@ -11,15 +10,26 @@ import './index.less';
 
 const { Option } = Select;
 
-// initValue: { value: string | number, label?: ReactNode }
-const SearchSelect = ({ onValueChange, selectProps={}, selectDataUrl, initValue, modalTableProps={} }) => {
+const SearchSelect = (props: any) => {
+  const {
+    value,
+    onChange,
+    selectProps={},
+    modalTableProps={},
+    labelInValue=false,
+    requestConfig,
+    ctx,
+  } = props;
+
   const selectMode = selectProps?.mode  // 设定当前选择器 为单选或者多选模式 无设定为单选模式（默认）
-  const initVal = initValue || (selectMode ? [] : null)
+  const initVal = value || (selectMode ? [] : null);
   const pageSize = 100 // 下拉框默认分页 条数
   const tableInitPageSize = 10 // 弹框默认分页 条数
   const currentPage = 1
+  const selectParamsKey = requestConfig?.filter || 'qp-codeAndName-like'
   const currentSelectProps = {
     ...selectProps,
+    // 以下属性不可更改----设计配置项
     showSearch: false,
     filterOption: false,
     allowClear: true,
@@ -34,12 +44,21 @@ const SearchSelect = ({ onValueChange, selectProps={}, selectDataUrl, initValue,
   const [fetching, setFetching] = useState(false);
   const [searchValue, setSearchValue] = useState('');
   const [isModalVisible, setIsModalVisible] = useState(false);
-  const [value, setValue] = useState(initVal);
   const [popvalue, setPopValue] = useState(initVal);
   const { run } = useDebounceFn(
     () => {
+      // 优化搜索参数 支持传多个
+      let searchParams = {};
+      if(typeof selectParamsKey === 'string') {
+        searchParams = { [selectParamsKey]: searchValue }
+      }
+      if(Array.isArray(selectParamsKey)) {
+        selectParamsKey.forEach((i: any) => {
+          searchParams = { ...searchParams, [i]: searchValue }
+        })
+      }
       // 防抖函数  待定
-      getData({ 'qp-name-like': searchValue })
+      getData(searchParams)
     },
     {
       wait: 1000,
@@ -58,33 +77,78 @@ const SearchSelect = ({ onValueChange, selectProps={}, selectDataUrl, initValue,
   const [indeterminate, setIndeterminate] = useState(false)
 
   // 获取数据源 （type: 1下拉框 2弹框  不传值默认为下拉框）
-  const getData = (initParams, type=1) => {
+  const getData = (params={}, type=1) => {
+    if (!requestConfig) return;
+    const { url, otherParams, isMap, fixedparameter, fieldValToParam, mappingTextField='name', mappingValueField='code' } = requestConfig;
+
     setFetching(true)
+
+    // 处理dependence参数
+    const fixedParam = {};
+    if (fixedparameter && fieldValToParam && ctx) {
+      fixedparameter.forEach((item: any, index: any) => {
+        const fixedParamVal = ctx.form.getFieldValue(fieldValToParam[index]);
+        if (fixedParamVal) {
+          fixedParam[item] = fixedParamVal;
+        }
+      });
+    }
+
     const queryParams = {
       pageSize,
       currentPage,
-      ...initParams,
-      sorter: 'desc-createTime'
+      ...otherParams, // 默认参数
+      ...fixedParam,
+      ...params,
     }
+
     axios
-      .get(`${selectDataUrl}?${stringify(queryParams)}`)
-      .then((result) => {
+      .get(`${url}?${stringify(queryParams)}`)
+      .then((result: any) => {
         setFetching(false)
         result = result.data;
         if (result.status !== '0') {
           message.error(result.msg);
           return;
         }
-        const res = result.data?.items || [];
+        const res = result.data;
+        let source = [];
+        if (isMap) {
+          source = Object.keys(res).map((d, i) => {
+            return {
+              text: Object.values(res)[i],
+              value: d,
+            };
+          });
+        } else {
+          const keys = res.list ? 'list' : 'items';
+          source = res
+            ? res[keys]
+              ? res[keys].map((item: any) => {
+                return {
+                  ...item,
+                  text: item[mappingTextField],
+                  value: item[mappingValueField],
+                };
+              })
+              : Array.isArray(res) &&
+              res?.map((item: Record<string, any>) => {
+                return {
+                  ...item,
+                  text: item[mappingTextField],
+                  value: item[mappingValueField],
+                };
+              })
+            : [];
+        }
+        source = Array.isArray(source) ? source : []
         if(type === 1) {
-          setItems(res)
-          setItemsTotal(Number(result.data?.total))
+          ctx?.form?.setFieldSource('supplierCode', source)
+          setItems(source)
+          setItemsTotal(Number(res?.total))
         } else {
-          setTableData(res)
-          setTablePagination({...tablePagination, total: Number(result.data?.total), pageSize: Number(result.data?.size), current: Number(result.data?.page)})
-          // if(checkedAll) {
-          //   onChangeSelectedKeys(res.map((i) => i.code), res, result.data?.page, 'show')
-          // }
+          setTableData(source)
+          setTablePagination({...tablePagination, total: Number(res?.total), pageSize: Number(res?.size), current: Number(res?.page)})
         }
       })
       .catch((err) => { setFetching(false) });
@@ -110,8 +174,10 @@ const SearchSelect = ({ onValueChange, selectProps={}, selectDataUrl, initValue,
   }, [])
 
   useEffect(() => {
-    setPopValue(value);
-    onValueChange(value);
+    if(value) {
+      setPopValue(value);
+      onChange(value);
+    }
   }, [value]);
 
   const showModal = () => {
@@ -120,15 +186,15 @@ const SearchSelect = ({ onValueChange, selectProps={}, selectDataUrl, initValue,
     // 回显
     if(value) {
       if(selectMode) {
-        setSelectedRowKeys(value.map(i => i.key))
-        setSelectedRows(value.map(i => ({ code: i.key, name: i.label })))
-        setPopValue(value.map(i => ({ code: i.key, name: i.label })));
+        setSelectedRowKeys(labelInValue ? value.map(i => i.key) : value)
+        setSelectedRows(labelInValue ? value.map(i => ({ value: i.key, text: i.label })) : value.map(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(value.length === itemsTotal);
       } else {
-        setSelectedRowKeys([value.key])
-        setSelectedRows([{ code: value.key, name: value.label }])
-        setPopValue([{ code: value.key, name: value.label }]);
+        setSelectedRowKeys(labelInValue ? [value.key] : [value])
+        setSelectedRows(labelInValue ? [{ value: value.key, text: value.label }] : [{ value: value.key }])
+        setPopValue(labelInValue ? [{ value: value.key, text: value.label }] : [{ value: value.key }]);
       }
     }
   };
@@ -141,8 +207,13 @@ const SearchSelect = ({ onValueChange, selectProps={}, selectDataUrl, initValue,
   };
 
   const formaData = (value) => {
-    const formatResult = value.map((i: any) => ({ key: i.code, label: i.name, value: i.code }))
-    setValue(selectMode ? formatResult : formatResult[0])
+    if(labelInValue) {
+      const formatResult = value.map((i: any) => ({ key: i.code, label: i.name, value: i.code }))
+      onChange(selectMode ? formatResult : formatResult[0])
+    } else {
+      const formatResult = selectMode ? value.map((i: any) => i.value) : _.get(value[0], 'value')
+      onChange(formatResult)
+    }
   };
 
   const handleCancel = () => {
@@ -159,11 +230,6 @@ const SearchSelect = ({ onValueChange, selectProps={}, selectDataUrl, initValue,
     run();
   }
 
-  //（ 多选模式下 选中数据再搜索 删除部分搜索内容会优先触发这个函数 删除掉已选中内容才会去触发onSearchChange函数进行搜索）
-  const outerChange = (sValue) => {
-    setValue(sValue);
-  };
-
   const onSearchTable = () => {
     const params = form.getFieldsValue();
     getData({ ...params, pageSize: tableInitPageSize }, 2)
@@ -180,13 +246,10 @@ const SearchSelect = ({ onValueChange, selectProps={}, selectDataUrl, initValue,
 
   const onChangeCheckAll = (e) => {
     if(e.target.checked) {
-      // 方案一：此种方案存在的问题是，数据不真实 回显下拉框有问题
-      // const currentTableData = JSON.parse(JSON.stringify(tableData))
-      // onChangeSelectedKeys(currentTableData.map((i) => i.code),currentTableData,tablePagination.current, 'checkAll')
-      // 方案二：如果下拉框有所有数据就处理选中所有，如果没有 就默认查出所有数据
+      // 如果下拉框有所有数据就处理选中所有，如果没有 就默认查出所有数据
       if(items.length === itemsTotal) {
         const currentItemsData = JSON.parse(JSON.stringify(items))
-        setSelectedRowKeys(currentItemsData.map(i => i.code))
+        setSelectedRowKeys(currentItemsData.map(i => i.value))
         setSelectedRows(currentItemsData)
         setPopValue(currentItemsData);
       } else {
@@ -229,69 +292,63 @@ const SearchSelect = ({ onValueChange, selectProps={}, selectDataUrl, initValue,
     for (var i = 0; i < params.length; i++) {
       if (Array.isArray(params[i])) {
         // 去重
-        res = _.uniqBy(res.concat(mapRows(params[i])), 'code');
+        res = _.uniqBy(res.concat(mapRows(params[i])), 'value');
       } else {
         res.push(params[i]);
         // 去重
-        res = _.uniqBy(res, 'code')
+        res = _.uniqBy(res, 'value')
       }
     }
     return res.filter(Boolean); //去掉undefined的情况
   };
 
-  const onChangeSelectedKeys=(selectKeys,selectRows, nowPage, type) => {
-    // 处理全选 & 全选时进入某一页首次展示
-    // if(type === 'checkAll') {
-    //   const totalFullPage = Math.floor(tablePagination.total / tableInitPageSize) // 整数页
-    //   const lastPage = tablePagination.total % tableInitPageSize  // 最后一页剩余条数
-    //   const currentTableData = JSON.parse(JSON.stringify(tableData))
-    //   // 选中非最后一页
-    //   if(currentTableData.length === tableInitPageSize) {
-    //     for(var i = 0; i < totalFullPage; i++) {
-    //       doubleArr[i] = JSON.parse(JSON.stringify(tableData.map(i => ({ ...i, code: _.uniqueId('custom_') }))))
-    //     }
-    //     if(lastPage > 0) {
-    //       // 深拷贝 避免splice时候更改了tableData的指向地址
-    //       doubleArr[totalFullPage] = currentTableData.splice(0, lastPage)
-    //     }
-    //   } else {
-    //     for(var i = 0; i < totalFullPage; i++) {
-    //       const SwallowDigits = tableInitPageSize-currentTableData.length; // 需要补足位数
-    //       const SwallowDigitsArray = Array.from({length: SwallowDigits }); // 生成补足数组
-    //       doubleArr[i] = JSON.parse(JSON.stringify(tableData.concat(SwallowDigitsArray).map(i => ({ ...i, code: _.uniqueId('custom_') }))))
-    //     }
-    //   }
-    // }
-    // if(type === 'show') {}
-
-    // 勾选生成二维数组
-    doubleArr[nowPage ? nowPage - 1 : 0] = selectRows
-    // console.log(doubleArr)
-    setDoubleArr(doubleArr)
-    // 这块扁平化成为一位数组
-    const filterRows = mapRows(doubleArr);
-    // console.log(filterRows)
-    setFilterRows(filterRows)
-
-    const sksResult = filterRows.map((i) => i.code)
+  const onChangeSelectedKeys=(selectKeys,selectRows) => {
+    const nowPage = tablePagination?.current;
+
+    let filterRows = [];
+    let sksResult = [];
+
+    if(selectMode) {
+      // 处理多选分页累计选中
+      // 勾选生成二维数组
+      doubleArr[nowPage ? nowPage - 1 : 0] = selectRows
+      // console.log(doubleArr)
+      setDoubleArr(doubleArr)
+      // 这块扁平化成为一位数组
+      filterRows = mapRows(doubleArr);
+      // console.log(filterRows)
+      setFilterRows(filterRows)
+
+      sksResult = filterRows.map((i) => i.value)
+    } else {
+      // 处理单选
+      filterRows = selectRows;
+      sksResult = selectRows.map((i) => i.value)
+    }
+
     setSelectedRowKeys(sksResult)
     setSelectedRows(filterRows)
     setPopValue(filterRows);
-
-    if(type === 'change') {
-      setIndeterminate(!!filterRows.length && filterRows.length < tablePagination?.total);
-      setCheckedAll(filterRows.length === tablePagination?.total);
-    }
+    setIndeterminate(!!filterRows.length && filterRows.length < tablePagination?.total);
+    setCheckedAll(filterRows.length === tablePagination?.total);
   }
 
   const rowSelection = {
     type: selectMode ? 'checkbox' : 'radio',
     selectedRowKeys,
     onChange: (sks, srs) => {
-      onChangeSelectedKeys(sks, srs, tablePagination?.current, 'change')
+      onChangeSelectedKeys(sks, srs)
     },
   };
 
+  const onDoubleClickSelect = (e, record) => {
+    if(!selectMode) {
+      const srs = [JSON.parse(JSON.stringify(record))]
+      const sks = srs.map((i:any) => i.value)
+      onChangeSelectedKeys(sks, srs)
+    }
+  }
+
   const themeColor = { color: '#1890ff' }
 
   const formItem = (list) => {
@@ -326,24 +383,34 @@ const SearchSelect = ({ onValueChange, selectProps={}, selectDataUrl, initValue,
       <div className="search_select_show" id='search_select_div'>
         <Select
           virtual
-          labelInValue
+          labelInValue={labelInValue}
           value={value}
-          onChange={outerChange}
+          onChange={onChange}
           dropdownRender={menu => (
             <>
-              <Input value={searchValue} style={{ width: '98%', marginLeft: '1%' }} placeholder="请输入" onChange={e=> onSearchChange(e)} onBlur={onSearchBlur} />
+              <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 style={{ textAlign: 'center'}}>
+                <div style={{ marginBottom: 16 }}>
+                  <CopyOutlined style={{ fontSize: '50px' }} />
+                </div>
+                <div>无匹配结果，请更换其他内容再试</div>
               </div>
-              <div>无匹配结果，请更换其他内容再试</div>
-            </div>
           }
           onPopupScroll={SelectScroll}
           {...currentSelectProps}
@@ -352,8 +419,8 @@ const SearchSelect = ({ onValueChange, selectProps={}, selectDataUrl, initValue,
           placeholder="请选择"
         >
           {items.map(item => (
-            <Option key={item.code} label={item.name}>
-              {LightHeightOption({ text: `${item.code}       ${item.name}`, filterTxt: searchValue })}
+            <Option key={item.value} label={item.text}>
+              {LightHeightOption({ text: `${item.value}       ${item.text}`, filterTxt: searchValue })}
             </Option>
           ))}
         </Select>
@@ -371,7 +438,7 @@ const SearchSelect = ({ onValueChange, selectProps={}, selectDataUrl, initValue,
           <Button key="back" onClick={handleCancel}>
             取消
           </Button>,
-          <Button key="submit" type="primary" onClick={handleOk}>
+          <Button key="submit" type="primary" onClick={handleOk} disabled={selectProps?.disabled || props?.disabled}>
             确定
           </Button>,
         ]}
@@ -384,7 +451,7 @@ const SearchSelect = ({ onValueChange, selectProps={}, selectDataUrl, initValue,
             <div className={'select_list_columns'}>
               <div className={'select_list_columns_tips'}>搜索</div>
               <div className={'select_list_columns_formItems'}>
-                <Form form={form} layout='vertical'>
+                <Form form={form} layout='vertical' key='modalForm'>
                   {formItem(modalTableProps?.tableSearchForm)}
                 </Form>
               </div>
@@ -409,6 +476,11 @@ const SearchSelect = ({ onValueChange, selectProps={}, selectDataUrl, initValue,
                 onChange={handleTableChange}
                 rowKey='code'
                 scroll={{ x: modalTableProps.overScrollX || 'max-content', y: modalTableProps.overScrollY || null }}
+                onRow={record => {
+                  return {
+                    onDoubleClick: event => onDoubleClickSelect(event, record),
+                  };
+                }}
               />
               {selectMode ? <div className={'select_list_selectAll'}><Checkbox indeterminate={indeterminate} checked={checkedAll} onChange={onChangeCheckAll} /> 全选所有页面</div> : ''}
             </div>

package/src/index.ts

@@ -17,3 +17,4 @@ export { default as DataValidation } from './components/DataValidation';
 export { default as QueryMutipleInput } from './components/QueryMutipleInput';
 export { default as CheckOneUser } from './utils/CheckOneUser';
 export { default as SearchSelect } from './components/SearchSelect';
+export { default as BusinessSearchSelect } from './components/SearchSelect/business/BusinessSearchSelect';