@bit-sun/business-component 4.0.11-alpha.9 → 4.0.12-alpha.2

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

@@ -20,6 +20,7 @@
     cursor: pointer;
     font-size: 14px;
     font-weight: bolder;
+    background: #fafafa;
 
     span {
       position: absolute;
@@ -32,6 +33,11 @@
     background-color: @primary-color;
     color: #fff;
   }
+  &_expand_button_disabled:hover {
+    background-color: transparent;
+    color: rgba(0, 0, 0, 0.25);
+    cursor: not-allowed;
+  }
 
   &_dropdown_table {
     // padding: 4px 10px 6px;
@@ -92,16 +98,27 @@
     .ant-modal-body {
       padding: 0px;
       background: #F3F3F3;
-      height: 684px;
+      height: calc(100vh - 235px); // modal弹窗760 调整为700 适应小屏
       overflow: hidden;
     }
+    .ant-modal-footer {
+      .ant-btn.ant-btn-default {
+        color: @primary-color;
+        border-color: @primary-color;
+      }
+      .ant-btn-primary,.ant-btn-primary[disabled] {
+        background: @primary-color;
+        border-color: @primary-color;
+      }
+      .ant-btn-primary[disabled] {
+        opacity: .5;
+        color: #fff;
+      }
+    }
   }
 
   &_wrapper {
     position: relative;
-    min-height: 80vh;
-    max-height: 80vh;
-    overflow: hidden;
     font-size: 14px;
 
     &_topForm {
@@ -115,7 +132,7 @@
           display: flex;
           align-items: flex-start;
 
-          .ant-row .ant-form-item {
+          .ant-row .ant-form-item, .ant-row .ant-col .ant-space {
             font-size: 12px !important;
             margin-right: 0px !important;
             margin-bottom: 8px !important;

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

@@ -8,12 +8,11 @@ import { stringify } from 'querystring';
 import _, { escapeRegExp, isNil, values } from "lodash"
 import './index.less';
 import { BusinessSearchSelect, QueryMutipleInput } from '@/index';
-import { handleSourceName, getFormRowInfo, hasMoreQueryFields, defaultVisibleFieldsCount }  from './utils';
+import { handleSourceName, getFormRowInfo, hasMoreQueryFields, defaultVisibleFieldsCount, getRealStr, ColSpan, getTableHeigth }  from './utils';
 import { judgeIsRequestError } from '@/utils/requestUtils';
 import zhankaitiaojian from '../../../assets/zhankaitiaojian-icon.svg';
 
 const { Option } = Select;
-const ColSpan = 6;
 
 const SearchSelect = forwardRef((props: any, ref: any) => {
   const {
@@ -47,6 +46,9 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     extralHeaders = {},// 额外请求头参数
     specialBracket = false,// 是否使用特殊括弧显示选项 【value】text
     noNeedSplit = false,// label显示不需要任何特殊化
+    noOperate, // 级联禁用按钮设置字段
+    viewShowValueStr, // 详情展示值,不传展示组件处理的默认值
+    searchStartLength, // 默认不校验长度去搜索，如果配置了，则按照配置项长度进行处理搜索
   } = requestConfig || {};
   const resultSourceKey = handleSourceName(sourceName || requestConfig?.sourceName || ctx?.name || 'supplierCode')
 
@@ -66,10 +68,22 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     allowClear: true,
     listHeight: 160,
     optionLabelProp: "label",
-    autoClearSearchValue: false
+    autoClearSearchValue: false,
+    placement: 'bottomLeft'
   }
-  const initPagination = { showQuickJumper: true, showSizeChanger: true, showTotal: (total: any) => `共 ${total} 条` }
-  const tableInitPagination = { ...initPagination, total: 0, current: 1, pageSize: tableInitPageSize }
+  const initPagination = { showQuickJumper: true, showSizeChanger: false, showTotal: (total: any) => `共 ${total} 条`, pageSize: tableInitPageSize }
+  const tableInitPagination = { ...initPagination, total: 0, current: 1 }
+  const disabled = noOperate || selectProps?.disabled || props?.disabled;
+  const isHaveDependency = fixedparameter && fieldValToParam && ctx;
+  const isHaveDValue = () => {
+    let formValueList = [];
+    fieldValToParam.forEach((item: any, index: any) => {
+      const fixedParamVal = ctx.form.getFieldValue(fieldValToParam[index]);
+      formValueList.push(fixedParamVal);
+    });
+    return formValueList.filter((item: any) => item).length > 0
+  }
+  const sDisabled = disabled || (isHaveDependency && !!!isHaveDValue());
 
   const [items, setItems] = useState([]);
   const [selectOpen, setSelectOpen] = useState(false);
@@ -119,33 +133,43 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   const [tooltipVisible, setTooltipVisible] = useState(false);
   const [tableShowColumns, setTabletShowColumns] = useState(modalTableProps?.tableColumns?.filter(s => typeof s.defaultSort == 'number')?.sort((a,b)=> a.defaultSort-b.defaultSort)||[]);
   const [confirmLoading, setConfirmLoading] = useState(false);
+  const [modalSearched, setModalSearched]=useState(false);
+
+  const setSelectDataSource = (list,total: number) => {
+    setItems(list);
+    setItemsTotal(total);
+  }
+  const clearSelectDataSource = () => {
+    setSelectDataSource([],0)
+  }
 
   useImperativeHandle(ref, () => ({
     refreshDataSource: (reset: boolean = false) => {
       if (reset) {
         if (init) {
+          // 有关联，依赖项清空，此form项数据源也应清空, 也不可点击搜索
+          if(isHaveDependency){
+            clearSelectDataSource();
+            return;
+          }
           run('init');
         } else {
-          setItems([]);
-          setItemsTotal(0);
+          clearSelectDataSource();
         }
       } else {
         run();
       }
     },
-    clearDataSource: () => {
-      setItems([]);
-      setItemsTotal(0);
-    },
+    clearSelectDataSource:clearSelectDataSource,
     getTableFormRef: () => form,
     // 解决下拉框数据源的问题
     getSelectDataSource: () => items,
-    setSelectDataSource: (list: any, listTotal: number) => {
-      setItems(list);
-      setItemsTotal(listTotal);
-    },
+    setSelectDataSource,
     refreshSelectDataSource: () => {
       refreshItems()
+    },
+    handleModalVisible: (flag) => {
+      if (flag) { showModal(); } else { handleCancel(); }
     }
   }))
 
@@ -157,7 +181,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
 
     // 处理dependence参数
     const fixedParam = {};
-    if (fixedparameter && fieldValToParam && ctx) {
+    if (isHaveDependency) {
       fixedparameter.forEach((item: any, index: any) => {
         const fixedParamVal = ctx.form.getFieldValue(fieldValToParam[index]);
         if(fixedParamVal) {
@@ -374,14 +398,14 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
               })
             : [];
         }
-        source = Array.isArray(source) ? source : []
+        // 数据源 不可以有重复key
+        source = Array.isArray(source) ? _.uniqBy(source, 'value') : [];
         if(callback) {
           callback(source)
         } else {
           if (type === 1) {
             ctx?.form?.setFieldSource(resultSourceKey, source)
-            setItems(source)
-            setItemsTotal(Number(res?.total || res?.totalCount || source.length))
+            setSelectDataSource(source,(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)) })
@@ -431,6 +455,10 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     if (init) {
       run('init')
     }
+    // 编辑/详情页面回显
+    if(!init && !!value && ['edit','view'].includes(ctx?.mode)) {
+      run('init')
+    }
   }, [])
 
   useEffect(() => {
@@ -445,15 +473,13 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
 
   useEffect(() => {
     if (init) {
-      setItems([]);
-      setItemsTotal(0);
+      clearSelectDataSource();
       run('init')
     }
   },[selectBusinessType])
 
   // 处理键盘事件
   const handleKeyPress = (event) => {
-    console.log(event,'----event')
     if ((event.metaKey || event.ctrlKey) && (event.key === 'U' || event.keyCode == 85)) {
       // ctrl + U 键 重置
       onResetTable()
@@ -478,8 +504,12 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   },[isModalVisible])
 
   const showModal = () => {
-    // 弹窗打开默认不查询
-    // getData({ pageSize: tableInitPageSize, currentPage: 1 }, 3)
+    if(sDisabled) return;
+    
+    setSelectOpen(false)
+    setSearchValue('');
+    setModalSearched(false);
+
     setIsModalVisible(true);
     // 回显
     if (value) {
@@ -503,7 +533,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
       // 解决选择最后1页的sku，返回后，不显示名称问题
       const source = _.uniqBy(items.concat(selectedValue), 'value')
       ctx?.form?.setFieldSource(resultSourceKey, source)
-      setItems(source)
+      setSelectDataSource(source,source?.length)
       formaData(selectedValue, source);
     } else {
       const formatResult = selectMode ? [] : null
@@ -566,24 +596,15 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   const handleCancel = () => {
     clearModalTable();
     setIsModalVisible(false);
-    if (selectMode) {
-      run();
-    }
   };
 
   const refreshItems = () => {
     // 查看是否存在关联值 如果有关联值 就查询 没有就不能查询
     if (fieldValToParam && ctx && fixedparamsDisabled) {
-      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) {
+      if (!!isHaveDValue()) {
         run();
       } else {
-        setItems([]);
-        setItemsTotal(0);
+        clearSelectDataSource();
       }
     } else {
       run();
@@ -592,17 +613,18 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
 
   const onSearchChange = (v) => {
     setSearchValue(v);
-    if(v?.length < 4) return;
+    if(!!searchStartLength && v?.length < searchStartLength) return;
     refreshItems();
   }
 
   const onSearchTable = () => {
     const params = form.getFieldsValue();
+
+    // const isHaveParams = params && Object.keys(params).filter(item => params[item]).length > 0;
+    setModalSearched(true);
+
     setTableFormParams(params);
     getData({ ...params, pageSize: tableInitPageSize }, 2)
-    if (selectMode) {
-      getData(params)
-    }
   }
 
   const onResetTable = () => {
@@ -695,13 +717,23 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     },
     getCheckboxProps: selectProps?.getCheckboxProps ? selectProps?.getCheckboxProps : () => {
       return ({
-        disabled: selectProps?.disabled || props?.disabled || (!items.length && !tableData.length),
+        disabled: disabled || (!items.length && !tableData.length),
       })
     },
   };
 
-  const onDoubleClickSelect = (e, record) => {
-    if (!selectMode && !(selectProps?.disabled || props?.disabled || (!items.length && !tableData.length))) {
+  const onRowClickSelect = (e, record,type) => {
+    if (selectMode && !(disabled || (!items.length && !tableData.length))) {
+      const oldSelect = selectedRows;
+      const newSelect = [JSON.parse(JSON.stringify(record))];
+      const srs = getRealStr(oldSelect,newSelect,record);
+      const sks = srs.map((i: any) => i.value)
+
+      onChangeSelectedKeys(sks, srs)
+    }
+  }
+  const onDoubleClickSelect = (e, record,type) => {
+    if (!selectMode && !(disabled || (!items.length && !tableData.length))) {
       const srs = [JSON.parse(JSON.stringify(record))]
       const sks = srs.map((i: any) => i.value)
       onChangeSelectedKeys(sks, srs)
@@ -729,7 +761,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
           return (
             <Col span={ColSpan} key={i.name}>
               <Form.Item name={i.name} label={i.label} key={i.name}>
-                <Select style={{ width: '100%' }} placeholder='请选择' {...i?.field?.props} disabled={setDisabled(i.name)}>
+                <Select style={{ width: '100%' }} placeholder='请选择' onDeselect	={v => onSearchTable()} {...i?.field?.props} disabled={setDisabled(i.name)}>
                   {i?.initialSource?.length && i?.initialSource.map((m: any) => (
                     <Option value={m.value} key={m.value}>{m.text}</Option>
                   ))}
@@ -800,9 +832,11 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
   //   bsTableCode={bsTableCode}
   // />
 
-  const renderShowTable =  (tableList, type,) => {
+  const renderShowTable =  (tableList, type) => {
+    const tableBoxHeighth = getTableHeigth(modalTableProps?.tableSearchForm);
+    const oSY = `calc(100vh - 391px - 82px)`;  // 分页 24+16*2+10 「高 + margin * 2 + paddingBottom 10 」
     return (
-      <div style={{ height: '528px' }}>
+      <div style={{ height: `calc(100vh - 391px)` }}> 
         <Table
           bordered
           size="middle"
@@ -810,19 +844,26 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
           columns={tableShowColumns}
           dataSource={tableList}
           {...type=='noPage'?{
-            pagination: initPagination
+            pagination: initPagination,
+            locale: {
+              emptyText: '暂无已选结果',
+            }
           }:{
             pagination: tablePagination,
             onChange: handleTableChange,
-            loading: fetching
+            loading: fetching,
+            locale: {
+              emptyText: modalSearched? '无匹配结果,请更换其他内容再试' : '请输入搜索条件',
+            }
           }}
           rowKey={mappingValueField}
           scroll={{
             x: modalTableProps.overScrollX || 'max-content',
-            y: modalTableProps.overScrollY || 440,
+            y: modalTableProps.overScrollY || oSY,
           }}
           onRow={(record) => {
             return {
+              onClick: event => onRowClickSelect(event, record), // 点击行
               onDoubleClick: (event) =>
                 onDoubleClickSelect(event, record),
             };
@@ -839,14 +880,36 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     { label: `已选（${selectedRowKeys?.length || 0}）`, key: 'selected', children: renderShowTable(selectedRows?.map((s,index)=> ({...s,keyIndex:index+1}))||[],'noPage')  },
   ];
 
+  const resetSelectDataSource = () => {
+    setSearchValue('');
+    // 有关联值 不需要清空下拉框数据 也不需要重新去请求了
+    if(isHaveDependency) return;
+    clearSelectDataSource();
+    init && run('init')
+  }
+
   const onClear = () => {
     formaData([], items);
+    resetSelectDataSource();
+  }
+
+  const onDeselect = (...arg) => {
+    const oldSelect = value?.map(s => ({ value: s?.value||s }))||[];
+    const deRecord = arg[1];
+    const srs = oldSelect.filter((s: any) => s.value != deRecord?.value)
+    onSelectClick(srs, items,false)
+  }
+  const onSelectClick = (srs, ds,nr=true) => {
+    formaData(srs, ds);
+    nr && setSelectOpen(false);
   }
 
   const onDropdownVisibleChange = (visible) => {
     setSelectOpen(visible); 
-    // 解决多选时，关闭下拉框值 搜索项被清空但是没有重新调用onsearch事件的问题
-    selectMode && !visible && setSearchValue('')
+    // 关闭下拉框 如果首次本身就不展示数据的 没有选中数据-需要清空查询数据源; 首次展示的默认展示
+    if (!visible && !value?.length) {
+      resetSelectDataSource()
+    }
   }
   const renderTable = (dataSource) => {
     return (
@@ -857,11 +920,27 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
           {...(selectMode?{
             rowSelection: {
               type: 'checkbox',  
-              selectedRowKeys: labelInValue ? value.map(s=> (s?.value||s)) : value,
+              columnWidth: '24px',
+              selectedRowKeys: labelInValue ? value?.map(s=> (s?.value||s)) : value,
+              preserveSelectedRowKeys: true, // 避免搜索之后 没有了选中前的数据 保证sks的正确性
               onChange: (sks, srs) => {
-                formaData(srs, dataSource);
+                const oldSelect = value?.map(s => ({ value: s?.value||s }))||[];
+                let tmpSelectedRows = oldSelect.concat(srs).filter(item => item != undefined);
+                let realSrs = sks.map(key => tmpSelectedRows.filter(item => item.value == key)[0]).filter(item => item != undefined)
+                onSelectClick(realSrs, dataSource,false)
               }
-            }
+            },
+            onRow: (record, rowKey) => ({
+              onClick: event => {
+                event.stopPropagation();
+                event.nativeEvent.stopImmediatePropagation();
+
+                const oldSelect = value?.map(s => ({ value: s?.value||s }))||[];
+                const newSelect = [JSON.parse(JSON.stringify(record))];
+                const srs = getRealStr(oldSelect,newSelect,record);
+                onSelectClick(srs,dataSource,false)
+              }, // 点击行
+            })
           }:{
             rowSelection: {
               type: 'radio',
@@ -869,11 +948,10 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
               selectedRowKeys: labelInValue ? value?.value&&[value?.value]||[] : value&&[value]||[],
             },
             onRow: (record, rowKey) => ({
-              onDoubleClick: () => {
+              onClick: event => {
                 const srs = [JSON.parse(JSON.stringify(record))]
-                formaData(srs, dataSource);
-                setSelectOpen(false)
-              },
+                onSelectClick(srs,dataSource)
+              }, // 点击行
             })
           })}
           columns={selectProps?.renderTableColumns||[]}
@@ -936,6 +1014,9 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     return (getSelectValueText(value) || kongValue) as string;
   }
   const getShowStr = () => {
+    // 优先使用业务使用传入的展示
+    if(viewShowValueStr) return viewShowValueStr;
+
     const kongValue = '无'
     // 先判断labelInValue与否，labelInValue可以直接去value中获取字段名称，否则去下拉框数据里面去拿；
     // 再判断是单选还是多选，数据类型不同取值方式也不同
@@ -945,7 +1026,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     return getShowValueStr(kongValue);
   }
 
-  const isShouldShowStr = props.disabled && ctx
+  const isShouldShowStr = (props.disabled && ctx) || ctx?.mode == 'view';
   return (
     <div className={'search_select'}>
       {fieldComponent ? (
@@ -971,7 +1052,8 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             value={value}
             onChange={onchange}
             onClear={onClear}
-            disabled={props.disabled}
+            onDeselect={onDeselect}
+            disabled={sDisabled}
             dropdownStyle={{ borderRadius: '2px', padding: '10px 2px' }}
             open={selectOpen}
             onDropdownVisibleChange={onDropdownVisibleChange}
@@ -981,7 +1063,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
                 <Spin size="small" className='searchSelectSpin' />
               ) : (
                 <div style={{ textAlign: 'center' }}>
-                  <div>{searchValue?'无匹配结果,请更换其他内容再试':'请录入4位数以上字符进行模糊查询'}</div>
+                  <div>{(searchValue||init||isHaveDependency)?'无匹配结果,请更换其他内容再试':`请录入${searchStartLength?'4位数以上':''}字符进行模糊查询`}</div>
                 </div>
               )
             }
@@ -991,7 +1073,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             maxTagPlaceholder={maxTagPlaceholder}
             onSearch={(v) => onSearchChange(v)}
             {...(needModalTable ? {
-              suffixIcon: <div className="search_select_expand_button" onClick={showModal}><SearchOutlined /></div>
+              suffixIcon: <div className={`search_select_expand_button ${(sDisabled)?'search_select_expand_button_disabled':''}`} onClick={showModal}><SearchOutlined /></div>
             } : {})}
             {...currentSelectProps}
             getPopupContainer={(triggerNode) => (getPopupContainer && getPopupContainer(triggerNode)) || triggerNode.parentElement}
@@ -1009,6 +1091,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
       )}
       {needModalTable && isModalVisible && (
         <Modal
+          maskClosable={false}
           destroyOnClose
           width="80%"
           title={modalTableProps?.modalTableTitle}
@@ -1027,11 +1110,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
                     type="primary"
                     loading={confirmLoading}
                     onClick={handleOk}
-                    disabled={
-                      !tableData.length ||
-                      selectProps?.disabled ||
-                      props?.disabled
-                    }
+                    disabled={sDisabled}
                   >
                     确定
                   </Button>,

package/src/components/Functional/SearchSelect/utils.ts

@@ -1,9 +1,10 @@
+export const columnsPerRow = 4; // 每行的列数
+export const ColSpan = 6; // 查询条件 每行col = 24 /columnsPerRow
 export const handleSourceName = (sName: any) => {
   return sName
 }
 
 export const getFormRowInfo = (list: any) => {
-  const columnsPerRow = 4; // 每行的列数
   const totalRows = Math.ceil(list.length / columnsPerRow); // 计算总行数
   const lastRowColumns = (list.length+1) % columnsPerRow; // 计算最后一行的实际列数
   const emptySlots = lastRowColumns === 0 ? 0 : columnsPerRow - lastRowColumns; // 计算最后一行的空位数
@@ -24,4 +25,14 @@ export const hasMoreQueryFields = (modalTableProps: any) => {
   const { tableSearchForm } = modalTableProps || {}
   const visibleFieldsCount = getVisibleFieldsCount(modalTableProps);
   return visibleFieldsCount < tableSearchForm?.length;
+}
+
+export const getRealStr = (oldSelect: any,newSelect: any, record: any) => {
+  return oldSelect?.length ? oldSelect.some((o: any) => o.value == record?.value) ? oldSelect.filter((s: any) => s.value != record?.value) : [...oldSelect,...newSelect] : newSelect;
+}
+
+export const getTableHeigth = (list: any) => {
+  const totalRows = Math.ceil((list?.length+1) / 4);
+  if(totalRows == 1) return 502;  // modal弹窗760 调整为700 适应小屏     
+  return 488 - totalRows*10
 }

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

@@ -18,7 +18,7 @@ const TreeSearchSelect = (props: any) => {
     initialValue,
     treeCheckable = false,
     showSearch = true,
-    maxTagCount = 1,
+    maxTagCount = 4,
     multiple = false,
     isChoose = false, // 默认父节点不可选；传true则不限制
     rootDisabled = false, // 默认根节点可选