@bit-sun/business-component 4.0.12-alpha.10 → 4.0.12-alpha.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bit-sun/business-component",
-  "version": "4.0.12-alpha.10",
+  "version": "4.0.12-alpha.12",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

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

@@ -1707,7 +1707,6 @@ export default () => {
   }
   const selectPropsMultiple = {
     mode: 'multiple',
-    maxTagCount: 1,
   }
 
   const [ tabKey, setTabKey ] = useState('single')

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

@@ -5,6 +5,11 @@
   &_show {
     display: flex;
 
+    .ant-select-dropdown {
+      top: 24px !important;
+      width: calc(150%) !important;
+    }
+
     // 下拉框清除图标位置调整
     .ant-select-clear {
       right: 33px;
@@ -16,6 +21,13 @@
     }
   }
 
+  &_show.search_select_show_list {
+    .ant-select-dropdown {
+      top: 24px !important;
+      width: calc(141%) !important;
+    }
+  }
+
   &_expand_button {
     position: relative;
     right: -11px;

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

@@ -8,7 +8,7 @@ import { stringify } from 'querystring';
 import _, { escapeRegExp, isNil, values } from "lodash"
 import './index.less';
 import { BusinessSearchSelect, QueryMutipleInput } from '@/index';
-import { handleSourceName, getFormRowInfo, hasMoreQueryFields, defaultVisibleFieldsCount, getRealStr, ColSpan, getTableHeigth }  from './utils';
+import { handleSourceName, getFormRowInfo, hasMoreQueryFields, defaultVisibleFieldsCount, getRealStr, ColSpan, getTableHeigth, getCurrentSRKs, getRenderSource }  from './utils';
 import { judgeIsRequestError } from '@/utils/requestUtils';
 import zhankaitiaojian from '../../../assets/zhankaitiaojian-icon.svg';
 
@@ -69,8 +69,13 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     listHeight: 160,
     optionLabelProp: "label",
     autoClearSearchValue: false,
-    placement: 'bottomLeft'
+    placement: 'bottomRight'
   }
+
+  const pathname = window.location.href;
+  var pattern = /(action|create|edit|view)/
+  const isFormPage = pathname.match(pattern)?.length > 0;
+
   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;
@@ -398,8 +403,15 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
               })
             : [];
         }
+        // 补充搜索项--选中的数据添加到数据源中去
+        const currentSRKs = getCurrentSRKs(selectMode,labelInValue,value)
+        if(currentSRKs?.length && currentSRKs?.some(s=> !source?.find(r=> r.value==s))) {
+          const selectedOption = items.filter(option => currentSRKs?.includes(option.value))||[];
+          source = (source||[]).concat(selectedOption)
+        }
         // 数据源 不可以有重复key
         source = Array.isArray(source) ? _.uniqBy(source, 'value') : [];
+        
         if(callback) {
           callback(source)
         } else {
@@ -913,10 +925,16 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
     setSelectOpen(visible); 
     // 关闭下拉框 如果首次本身就不展示数据的 没有选中数据-需要清空查询数据源; 首次展示的默认展示
     if (!visible && !value?.length) {
-      resetSelectDataSource()
+      setTimeout(() => {
+        // 延时 是为了避免 执行时候出现下拉框弹两次的问题-可以看到数据源从展示到显示空数据框的问题
+        resetSelectDataSource()
+      }, 200)
     }
   }
   const renderTable = (dataSource) => {
+    const currentSRKs = getCurrentSRKs(selectMode,labelInValue,value)
+    const renderSource = getRenderSource(currentSRKs,items)
+
     return (
       <div className={`search_select_dropdown_table ${!selectMode?'search_select_dropdown_table1':''}`}>
         <Table
@@ -926,7 +944,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             rowSelection: {
               type: 'checkbox',  
               columnWidth: '24px',
-              selectedRowKeys: labelInValue ? value?.map(s=> (s?.value||s)) : value,
+              selectedRowKeys: currentSRKs,
               preserveSelectedRowKeys: true, // 避免搜索之后 没有了选中前的数据 保证sks的正确性
               onChange: (sks, srs) => {
                 const oldSelect = value?.map(s => ({ value: s?.value||s }))||[];
@@ -950,7 +968,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             rowSelection: {
               type: 'radio',
               columnWidth: 0,
-              selectedRowKeys: labelInValue ? value?.value&&[value?.value]||[] : value&&[value]||[],
+              selectedRowKeys: currentSRKs,
             },
             onRow: (record, rowKey) => ({
               onClick: event => {
@@ -960,7 +978,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             })
           })}
           columns={selectProps?.renderTableColumns||[]}
-          dataSource={items}
+          dataSource={renderSource}
           size="middle"
           pagination={false}
           rowKey={mappingValueField}
@@ -1049,7 +1067,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
           {getShowStr()}
         </div>) :
         <div
-          className="search_select_show"
+          className={`${isFormPage ? '' : 'search_select_show_list'} search_select_show`}
           id={`search_select_div_${uniqueValue}`}
         >
           <Select
@@ -1059,7 +1077,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
             onClear={onClear}
             onDeselect={onDeselect}
             disabled={sDisabled}
-            dropdownStyle={{ borderRadius: '2px', padding: '10px 2px' }}
+            dropdownStyle={{ borderRadius: '2px', padding: '10px 2px'}}
             open={selectOpen}
             onDropdownVisibleChange={onDropdownVisibleChange}
             dropdownRender={(menu) => items?.length ? renderTable(items) : menu}
@@ -1081,7 +1099,7 @@ const SearchSelect = forwardRef((props: any, ref: any) => {
               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}
+            getPopupContainer={(triggerNode) => triggerNode.parentElement || getPopupContainer && getPopupContainer(triggerNode)}
           >
             {items.map(item => (
               <Option key={item.value} label={item.text}>

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

@@ -4,6 +4,7 @@ export const handleSourceName = (sName: any) => {
   return sName
 }
 
+// ------------------------------------------处理样式相关--开始----------------------------------------
 export const getFormRowInfo = (list: any) => {
   const totalRows = Math.ceil(list.length / columnsPerRow); // 计算总行数
   const lastRowColumns = (list.length+1) % columnsPerRow; // 计算最后一行的实际列数
@@ -35,4 +36,36 @@ export const getTableHeigth = (list: any) => {
   const totalRows = Math.ceil((list?.length+1) / 4);
   if(totalRows == 1) return 358;  // modal弹窗760 调整为700 适应小屏     
   return 411 - totalRows*10  
-}
+}
+
+// ------------------------------------------处理样式相关--结束----------------------------------------
+
+
+// ------------------------------------------处理数据相关--开始----------------------------------------
+export const getCurrentSRKs = (selectMode: any,labelInValue:boolean,value: any) => {
+  return selectMode ? (labelInValue ? value?.map((s: any)=> (s?.value||s)) : value) : (labelInValue ? value?.value&&[value?.value]||[] : value&&[value]||[])
+}
+
+export const getRenderSource = (currentSRKs: any, items: any) => {
+  // 创建映射对象 用于记录原始选中顺序
+  const orderMap = new Map<number, number>();
+  currentSRKs.forEach((value: any, index: number) => {
+    orderMap.set(value, index);
+  });
+
+  // 被选中数据集合，获取之后排序
+  const selectedOption = items?.filter((option: any) => currentSRKs?.includes(option.value))||[];
+  const selectedOptionSort = selectedOption?.sort((a: any, b: any) => {
+    return (orderMap.get(a.value) ?? Infinity) - (orderMap.get(b.value) ?? Infinity);
+  })||[];
+
+  // 未选中数据集合
+  const otherOptions = items?.filter((option: any) => !currentSRKs?.includes(option.value))||[];
+
+  return [
+    ...selectedOptionSort,
+    ...otherOptions
+  ]
+}
+
+// ------------------------------------------处理数据相关--结束----------------------------------------