@bit-sun/business-component 2.0.14 → 2.0.17-alpha.0

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

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
 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';
@@ -11,20 +11,33 @@ import { BusinessSearchSelect, QueryMutipleInput } from '@/index';
 
 const { Option } = Select;
 
-const SearchSelect = (props: any) => {
+const SearchSelect = forwardRef((props: any, ref: any) => {
   const {
     value, // 必传
     onChange,
-    selectProps={},
-    modalTableProps={},
-    labelInValue=false,
+    selectProps = {},
+    modalTableProps = {},
+    labelInValue = false,
     requestConfig,
     ctx,
     sourceName,
-    needModalTable=true,
-    getPopupContainer=undefined
+    needModalTable = true,
+    getPopupContainer = undefined,
+    fieldComponent,
   } = props;
-  const { url, otherParams, isMap, fixedparameter, fieldValToParam, mappingTextField='name', mappingTextShowKeyField,mappingValueField='code', mappingTextShowTextField } = requestConfig || {};
+  const {
+    url,
+    otherParams,// 默认参数
+    isMap,
+    fixedparameter,
+    fieldValToParam,
+    mappingTextField = 'name',
+    mappingTextShowKeyField,
+    mappingValueField = 'code',
+    mappingTextShowTextField,
+    init = true,// 是否初始请求
+    extralHeaders = {},// 额外请求头参数
+  } = requestConfig || {};
   const resultSourceKey = sourceName || requestConfig?.sourceName || 'supplierCode'
 
   const selectMode = selectProps?.mode  // 设定当前选择器 为单选或者多选模式 无设定为单选模式（默认）
@@ -57,10 +70,10 @@ const SearchSelect = (props: any) => {
     (v?: any) => {
       // 优化搜索参数 支持传多个
       let searchParams = {};
-      if(typeof selectParamsKey === 'string') {
+      if (typeof selectParamsKey === 'string') {
         searchParams = v ? { [selectParamsInitKey]: initVal } : { [selectParamsKey]: searchValue }
       }
-      if(Array.isArray(selectParamsKey)) {
+      if (Array.isArray(selectParamsKey)) {
         selectParamsKey.forEach((i: any) => {
           searchParams = { ...searchParams, [i]: searchValue }
         })
@@ -84,8 +97,27 @@ const SearchSelect = (props: any) => {
   const [tableFormParams, setTableFormParams] = useState({});
   const [tooltipVisible, setTooltipVisible] = useState(false);
 
+  useImperativeHandle(ref, () => ({
+    refreshDataSource: (reset: boolean = false) => {
+      if (reset) {
+        if (init) {
+          run('init');
+        } else {
+          setItems([]);
+          setItemsTotal(0);
+        }
+      } else {
+        run();
+      }
+    },
+    clearDataSource: () => {
+      setItems([]);
+      setItemsTotal(0);
+    },
+  }))
+
   // 获取数据源 （type: 1下拉框 2弹框  不传值默认为下拉框）
-  const getData = (params={}, type=1) => {
+  const getData = (params = {}, type = 1) => {
     if (!requestConfig) return;
 
     setFetching(true)
@@ -145,13 +177,13 @@ const SearchSelect = (props: any) => {
           delete params[key];
         } else if (typeof element === 'boolean' && key.indexOf('*checkBox*') >= 0) {
           const dataParams = key.split('*checkBox*');
-          if(element){
+          if (element) {
             params[dataParams[0]] = 0
           }
           delete params[key];
-        }else if (element && key.indexOf('*cascader*') >= 0) {
+        } else if (element && key.indexOf('*cascader*') >= 0) {
           const dataParams = key.split('*cascader*');
-          params[dataParams[0]] = element[element.length -1]
+          params[dataParams[0]] = element[element.length - 1]
           delete params[key];
         } else if (element && key.indexOf('*date*') >= 0) {
           const dataParams = key.split('*date*')
@@ -185,9 +217,9 @@ const SearchSelect = (props: any) => {
             params[`qp-${dataParams}-${params[key][0]}`] = params[key][1]
           }
           delete params[key]
-        }else if (Array.isArray(element)) {
+        } else if (Array.isArray(element)) {
           params[key] = element.join(',');
-        } else if(element == null || element === undefined || String(element).trim() === '') {
+        } else if (element == null || element === undefined || String(element).trim() === '') {
           delete params[key]
         }
       }
@@ -202,7 +234,11 @@ const SearchSelect = (props: any) => {
     }
 
     axios
-      .get(`${url}?${stringify(queryParams)}`)
+      .get(
+        `${url}?${stringify(queryParams)}`,
+        {
+          headers: { ...extralHeaders }
+        })
       .then((result: any) => {
         setFetching(false)
         result = result.data;
@@ -225,9 +261,9 @@ const SearchSelect = (props: any) => {
             ? res[keys]
               ? res[keys].map((item: any) => {
                 let textShowText = item[mappingTextField]
-                if(mappingTextShowTextField) {
+                if (mappingTextShowTextField) {
                   textShowText = []
-                  if(Array.isArray(mappingTextShowTextField)) {
+                  if (Array.isArray(mappingTextShowTextField)) {
                     mappingTextShowTextField.forEach((r: any) => {
                       textShowText.push(item[r])
                     })
@@ -246,9 +282,9 @@ const SearchSelect = (props: any) => {
               : Array.isArray(res) &&
               res?.map((item: Record<string, any>) => {
                 let textShowText = item[mappingTextField]
-                if(mappingTextShowTextField) {
+                if (mappingTextShowTextField) {
                   textShowText = []
-                  if(Array.isArray(mappingTextShowTextField)) {
+                  if (Array.isArray(mappingTextShowTextField)) {
                     mappingTextShowTextField.forEach((r: any) => {
                       textShowText.push(item[r])
                     })
@@ -267,13 +303,13 @@ const SearchSelect = (props: any) => {
             : [];
         }
         source = Array.isArray(source) ? source : []
-        if(type === 1) {
+        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))})
+          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) });
@@ -290,26 +326,28 @@ const SearchSelect = (props: any) => {
     if (isTouchGround && canPageAdd) {
       const nextScrollPage = scrollPage + 1;
       setScrollPage(nextScrollPage);
-      getData({currentPage: nextScrollPage}); // 调用api方法
+      getData({ currentPage: nextScrollPage }); // 调用api方法
     }
 
     //判断是否滑动到顶部
-    const isTouchTop = target.scrollTop ===0  // <=0
+    const isTouchTop = target.scrollTop === 0  // <=0
     // 判断数据是否到第一页
     const canPageJian = scrollPage > 1
     if (isTouchTop && canPageJian) {
       const preScrollPage = scrollPage - 1;
       setScrollPage(preScrollPage);
-      getData({currentPage: preScrollPage}); // 调用api方法
+      getData({ currentPage: preScrollPage }); // 调用api方法
     }
   }
 
   useEffect(() => {
-    run('init')
+    if (init) {
+      run('init')
+    }
   }, [])
 
   useEffect(() => {
-    if(value) {
+    if (value) {
       setPopValue(value);
     }
   }, [value]);
@@ -322,14 +360,14 @@ const SearchSelect = (props: any) => {
     getData({ pageSize: tableInitPageSize, currentPage: 1 }, 2)
     setIsModalVisible(true);
     // 回显
-    if(value) {
-      if(selectMode) {
+    if (value) {
+      if (selectMode) {
         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(itemsTotal && value.length === itemsTotal);
         // 需清空数据
-        if(!value.length) {
+        if (!value.length) {
           setDoubleArr([])
         }
       } else {
@@ -340,7 +378,7 @@ const SearchSelect = (props: any) => {
   };
 
   const handleSelectOver = (selectedValue: any) => {
-    if(selectedValue?.length) {
+    if (selectedValue?.length) {
       formaData(selectedValue);
       // 解决选择最后1页的sku，返回后，不显示名称问题
       const source = _.uniqBy(items.concat(selectedValue), 'value')
@@ -355,7 +393,7 @@ const SearchSelect = (props: any) => {
   };
 
   const formaData = (value) => {
-    if(labelInValue) {
+    if (labelInValue) {
       const formatResult = value.map((i: any) => ({ key: i[mappingValueField], label: i[mappingTextField], value: i[mappingValueField] }))
       onChange(selectMode ? formatResult : formatResult[0])
     } else {
@@ -368,26 +406,45 @@ const SearchSelect = (props: any) => {
     form.resetFields();
     setTableFormParams({});
     setIsModalVisible(false);
-    if(selectMode) {
+    if (selectMode) {
       run();
     }
   };
 
+  const refreshItems = () => {
+    // 查看是否存在关联值 如果有关联值 就查询 没有就不能查询
+    if (fieldValToParam && ctx) {
+      let formValueList = [];
+      fieldValToParam.forEach((item: any, index: any) => {
+        const fixedParamVal = ctx.form.getFieldValue(fieldValToParam[index]);
+        formValueList.push(fixedParamVal);
+      });
+      if (formValueList.filter((item: any) => item).length > 0) {
+        run();
+      } else {
+        setItems([]);
+        setItemsTotal(0);
+      }
+    } else {
+      run();
+    }
+  }
+
   const onSearchChange = (e) => {
     setSearchValue(e.target.value);
-    run();
+    refreshItems();
   }
 
   const onSearchBlur = () => {
-    setSearchValue('')
-    run();
+    setSearchValue('');
+    refreshItems();
   }
 
   const onSearchTable = () => {
     const params = form.getFieldsValue();
     setTableFormParams(params);
     getData({ ...params, pageSize: tableInitPageSize }, 2)
-    if(selectMode){
+    if (selectMode) {
       getData(params)
     }
   }
@@ -403,18 +460,18 @@ const SearchSelect = (props: any) => {
   }
 
   const onChangeCheckAll = (e) => {
-    if(e.target.checked) {
+    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))
+      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) {
+      if (items.length < itemsTotal) {
         // TODO 请求接口获取所有数据
       }
     } else {
@@ -466,13 +523,13 @@ const SearchSelect = (props: any) => {
     return res.filter(Boolean); //去掉undefined的情况
   };
 
-  const onChangeSelectedKeys=(selectKeys,selectRows) => {
+  const onChangeSelectedKeys = (selectKeys, selectRows) => {
     const nowPage = tablePagination?.current;
 
     let filterRows = []; // 存放拼接后的一维数组的变量
     let sksResult = [];
 
-    if(selectMode) {
+    if (selectMode) {
       // 处理多选分页累计选中
       // 勾选生成二维数组
       doubleArr[nowPage ? nowPage - 1 : 0] = selectRows
@@ -500,7 +557,7 @@ const SearchSelect = (props: any) => {
 
   // 生成唯一值
   const makeUniqueValue = () => {
-    const generateUnitKey = (((1+Math.random())*0x10000)|0).toString(16);
+    const generateUnitKey = (((1 + Math.random()) * 0x10000) | 0).toString(16);
     setUniqueValue(generateUnitKey);
     return generateUnitKey;
   }
@@ -511,15 +568,17 @@ const SearchSelect = (props: any) => {
     onChange: (sks, srs) => {
       onChangeSelectedKeys(sks, srs)
     },
-    getCheckboxProps: () => ({
-      disabled: selectProps?.disabled || props?.disabled,
-    }),
+    getCheckboxProps: () => {
+      return ({
+        disabled: selectProps?.disabled || props?.disabled || !items.length,
+      })
+    },
   };
 
   const onDoubleClickSelect = (e, record) => {
-    if(!selectMode) {
+    if (!selectMode && !(selectProps?.disabled || props?.disabled || !items.length)) {
       const srs = [JSON.parse(JSON.stringify(record))]
-      const sks = srs.map((i:any) => i.value)
+      const sks = srs.map((i: any) => i.value)
       onChangeSelectedKeys(sks, srs)
     }
   }
@@ -527,9 +586,9 @@ const SearchSelect = (props: any) => {
   const themeColor = { color: '#1890ff' }
 
   const formItem = (list) => {
-    if(isModalVisible && list?.length) {
+    if (isModalVisible && list?.length) {
       return list.map((i: any) => {
-        if(i?.type === 'select' || i?.field?.type === 'select') {
+        if (i?.type === 'select' || i?.field?.type === 'select') {
           return (
             <Form.Item name={i.name} label={i.label} key={i.name}>
               <Select style={{ width: '100%' }} placeholder='请选择' {...i?.field?.props}>
@@ -541,7 +600,7 @@ const SearchSelect = (props: any) => {
           )
         }
 
-        if(i?.type === 'treeSelect' || i?.field?.type === 'treeSelect') {
+        if (i?.type === 'treeSelect' || i?.field?.type === 'treeSelect') {
           return (
             <Form.Item name={i.name} label={i.label} key={i.name}>
               <TreeSelect style={{ width: '100%' }} placeholder='请选择' {...i?.field?.props}></TreeSelect>
@@ -549,7 +608,7 @@ const SearchSelect = (props: any) => {
           )
         }
 
-        if(i?.type === 'businessSearchSelect' || i?.field?.type === 'businessSearchSelect') {
+        if (i?.type === 'businessSearchSelect' || i?.field?.type === 'businessSearchSelect') {
           return (
             <div>
               <Form.Item name={i.name} label={i.label} key={i.name}>
@@ -586,16 +645,16 @@ const SearchSelect = (props: any) => {
   }
 
   const maxTagPlaceholder = (selectedValues) => {
-    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 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)}
+          onClose={(e) => onClose(e, i)}
           style={{ marginRight: 3, background: '#f5f5f5', height: '24px', border: '1px solid #f0f0f0' }}
         >
           {i.label}
@@ -608,19 +667,25 @@ const SearchSelect = (props: any) => {
 
   return (
     <div className={'search_select'}>
-      <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 => (
             <>
               <Input
                 value={searchValue}
                 style={{ width: '98%', marginLeft: '1%' }}
                 placeholder="请输入"
-                onChange={e=> onSearchChange(e)}
+                onChange={e => onSearchChange(e)}
                 onBlur={onSearchBlur}
                 onKeyDown={(e) => {
                   //  阻止多选的冒泡
@@ -633,7 +698,7 @@ const SearchSelect = (props: any) => {
           )}
           notFoundContent={
             fetching ? <Spin size="small" /> :
-              <div style={{ textAlign: 'center'}}>
+              <div style={{ textAlign: 'center' }}>
                 <div style={{ marginBottom: 16 }}>
                   <CopyOutlined style={{ fontSize: '50px' }} />
                 </div>
@@ -641,7 +706,7 @@ const SearchSelect = (props: any) => {
               </div>
           }
           onPopupScroll={SelectScroll}
-          style={{ width: needModalTable?'calc(100% - 30px)':'calc(100%)' }}
+          style={{ width: needModalTable ? 'calc(100% - 30px)' : 'calc(100%)' }}
           placeholder="请选择"
           maxTagPlaceholder={maxTagPlaceholder}
           {...currentSelectProps}
@@ -654,11 +719,11 @@ const SearchSelect = (props: 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%'
@@ -666,7 +731,7 @@ const SearchSelect = (props: any) => {
           visible={isModalVisible}
           onOk={handleOk}
           onCancel={handleCancel}
-          footer={selectMode?[
+          footer={selectMode ? [
             <Button key="back" onClick={handleCancel}>
               取消
             </Button>,
@@ -678,11 +743,11 @@ const SearchSelect = (props: any) => {
             >
               确定
             </Button>,
-          ]:null}
+          ] : null}
         >
           <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' } />
+              <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={'select_list_columns'}>
@@ -694,11 +759,11 @@ const SearchSelect = (props: any) => {
                 </div>
               </div>
               <div className={'select_list_searchButton'}>
-                <Button key='reset' className={'select_list_button_space'}  onClick={onResetTable}>重置</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>
@@ -727,6 +792,6 @@ const SearchSelect = (props: any) => {
       )}
     </div>
   );
-};
+});
 
 export default SearchSelect;

package/src/index.ts

@@ -20,3 +20,5 @@ export { default as CommodityEntry } from './components/Business/CommodityEntry'
 export { default as CheckOneUser } from './utils/CheckOneUser';
 export { default as TreeSearchSelect } from './components/Functional/TreeSearchSelect';
 export { default as BusinessTreeSearchSelect } from './components/Business/TreeSearchSelect';
+export { default as StateFlow } from './components/Business/StateFlow';
+export { default as GuideWrapper } from './components/Business/CommonGuideWrapper';

package/typings.d.ts

@@ -1,2 +1,4 @@
 declare module '*.css';
 declare module '*.less';
+declare module '*.png';
+declare module '*.svg';