chore: select 增加showSearch选项

packages/app/src/components/filter-field/Select.tsx

@@ -1,6 +1,7 @@
 import {Col, Row, Select as SelectOri} from 'antd';
 import css from './index.module.css';
 import {FC} from 'react';
+import {filterOptions} from '@utils';
 
 type Props = {
   label: string;
@@ -8,7 +9,8 @@ type Props = {
   name: string;
   onChange: (value: string) => void;
   placeholder?: string;
-  options: {label: string, value: string}[]
+  options: {label: string, value: string}[];
+  showSearch?: boolean;
 };
 
 const Select: FC<Props> = function({
@@ -18,6 +20,7 @@ const Select: FC<Props> = function({
   placeholder,
   name,
   options,
+  showSearch,
 }) {
   function onSelectChange(value: string) {
     onChange(value);
@@ -31,7 +34,9 @@ const Select: FC<Props> = function({
         </Col>
         <Col span={16}>
           <SelectOri
-            style={{width: '100%'}}
+            showSearch={showSearch}
+            filterOption={showSearch ? filterOptions : false}
+            className='width-full'
             id={`filter_${name}`}
             data-testid={`filter_${name}`}
             placeholder={placeholder ?? '请输入'}

packages/app/src/components/modal-field/Select.tsx

@@ -1,3 +1,4 @@
+import {filterOptions} from '@utils';
 import css from './index.module.css';
 import {Row, Col, Select} from 'antd';
 import classNames from 'classnames';
@@ -10,6 +11,7 @@ type Props = {
   width?: string;
   data: {value: string, label: string}[];
   required?: boolean;
+  showSearch?: boolean;
 } & UseControllerProps<any, any>;
 
 const ModalSelect: FC<Props> = function({
@@ -19,6 +21,7 @@ const ModalSelect: FC<Props> = function({
   placeholder,
   data,
   required,
+  showSearch,
 }) {
   return (
     <Row className='full-width' gutter={12}>
@@ -45,10 +48,11 @@ const ModalSelect: FC<Props> = function({
             return (
               <>
                 <Select
+                  showSearch={showSearch}
                   rootClassName={classNames([css.modalSelect, css.filedWidth])}
                   data-testid={`select_${name}`}
                   defaultActiveFirstOption={false}
-                  filterOption={false}
+                  filterOption={showSearch ? filterOptions : false}
                   placeholder={placeholder ?? '请选择'}
                   id={`operation_${name}`}
                   // 处理placeholder不显示问题

packages/app/src/components/modal-field/index.module.css

@@ -51,4 +51,9 @@
     border-radius: unset;
     box-shadow: unset !important;
   }
+
+  & :global(.ant-select-selection-search) {
+    inset-inline-start: 0 !important;
+    inset-inline-end: 0 !important;
+  }
 }

packages/app/src/pages/matter/filter/index.tsx

@@ -22,6 +22,7 @@ const Filter: FC = function() {
           value={matter}
           onChange={onChange('matter')}
           name='matterCode'
+          showSearch
         />
         <FilterSelect
           label='库位'
@@ -29,6 +30,7 @@ const Filter: FC = function() {
           value={storage}
           onChange={onChange('storage')}
           name='StorageCode'
+          showSearch
         />
         <FilterButtonGroup
           onSearch={onSeach}

packages/app/src/pages/matter/table/modal/Info.tsx

@@ -18,12 +18,14 @@ const Info: FC<Props> = function({id}) {
         label='物料'
         control={control}
         data={matterOtions}
+        showSearch
       />
       <ModalSelect
         name='storageLocationCode'
         label='库位'
         control={control}
         data={storageOtions}
+        showSearch
       />
     </>
   );

packages/app/src/pages/matter/table/modal/index.tsx

@@ -27,7 +27,7 @@ const PutModal: FC<Props> = function({visible, onClose, id, onFetch}) {
       testId='matter_modal'
       onSubmit={onSubmit}
       isLoading={isLoading}
-      height='420px'
+      height='500px'
       width='600px'
     >
       <FormProvider {...formInstance}>

packages/app/src/pages/stock-operation/index.module.css

@@ -53,4 +53,9 @@
     border-radius: unset;
     box-shadow: unset !important;
   }
+
+  & :global(.ant-select-selection-search) {
+    inset-inline-start: 0 !important;
+    inset-inline-end: 0 !important;
+  }
 }

packages/app/src/pages/stock-operation/select/index.tsx

@@ -45,10 +45,13 @@ const Select: FC<Props> = function({
             return (
               <>
                 <AntdSelect
+                  showSearch
                   rootClassName={classNames([css.modalSelect, css.filedWidth])}
                   data-testid={`select_${name}`}
                   defaultActiveFirstOption={false}
-                  filterOption={false}
+                  filterOption={function(input, options) {
+                    return (options?.label ?? '').includes(input);
+                  }}
                   placeholder={placeholder ?? '请选择'}
                   id={`select_${name}`}
                   // 处理placeholder不显示问题

packages/app/src/utils/filter-options/index.tsx

@@ -0,0 +1,3 @@
+export function filterOptions(input: string, options?: {label: string, value: string}) {
+  return (options?.label ?? '').includes(input);
+}

packages/app/src/utils/index.ts

@@ -5,3 +5,4 @@ export * from './clearHistoryState';
 export * from './types';
 export * from './sortMenu';
 export * from './deleteConfirm';
+export * from './filter-options';