chore: 调整库位信息

packages/app/src/apis/storage.ts

@@ -11,11 +11,15 @@ import {request} from './request';
 const BASE_URL = '/storage';
 
 /** 获取库位列表 */
-export function getStorageList(data: GetStorageListParams): BaseListResult<StorageListData> {
+export function getStorageList(
+  data: GetStorageListParams,
+  signal?: AbortSignal,
+): BaseListResult<StorageListData> {
   return request({
     method: 'GET',
     url: `${BASE_URL}/getStorage`,
     data,
+    signal,
   });
 }
 

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

@@ -22,9 +22,10 @@ const DictionarySelect: FC<Props> = function ({
   name,
   selectKey,
 }) {
-  const options = useDictionaryOptions(selectKey, true, function ({code, tldId}) {
+  const options = useDictionaryOptions(selectKey, true, function ({code, tldId, name}) {
     if (selectKey === '供应商/客户' || selectKey === '公司' || selectKey === '部门字典')
       return code;
+    if (selectKey === '物料类型') return name;
 
     return tldId;
   });
@@ -37,6 +38,10 @@ const DictionarySelect: FC<Props> = function ({
       <div className={css.fieldWrapper}>
         <SelectOri
           showSearch
+          allowClear
+          onClear={() => {
+            onChange?.('');
+          }}
           filterOption={filterOptions}
           className='width-full'
           id={`filter_${name}`}

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

@@ -8,7 +8,7 @@ type Props = {
   label: string;
   value: string;
   name: string;
-  onChange: (value: string) => void;
+  onChange?: (value: string) => void;
   placeholder?: string;
   options: {label: string; value: string}[];
   showSearch?: boolean;

packages/app/src/hooks/use-filter-group/index.tsx

@@ -1,4 +1,10 @@
-import {FilterDatePicker, FilterField, FilterKeySelect, RangeValue} from '@components';
+import {
+  FilterDatePicker,
+  FilterField,
+  FilterKeySelect,
+  FilterSelect,
+  RangeValue,
+} from '@components';
 import {DictionaryParamsType} from '@models';
 import {Dayjs} from 'dayjs';
 import {useEffect, useMemo, useRef} from 'react';
@@ -9,9 +15,15 @@ export type MapValue<S extends Record<string, string>> =
   | {label: string; type: 'field' | 'date'; value: keyof S}
   | {
       label: string;
-      type: 'select';
+      type: 'keySelect';
       selectKey: DictionaryParamsType;
       value: keyof S;
+    }
+  | {
+      label: string;
+      type: 'select';
+      value: keyof S;
+      options: {label: string; value: string}[];
     };
 
 export type FilterGroupMap<S extends Record<string, string>> = Map<string, MapValue<S>>;
@@ -119,7 +131,7 @@ export function useFieldGroup<S extends Record<string, string>>(
               />
             );
           }
-          case 'select': {
+          case 'keySelect': {
             return (
               <FilterKeySelect
                 key={state.label}
@@ -131,6 +143,18 @@ export function useFieldGroup<S extends Record<string, string>>(
               />
             );
           }
+          case 'select': {
+            return (
+              <FilterSelect
+                key={state.label}
+                name={state.value as string}
+                label={state.label}
+                value={fields[state.value as string]}
+                onChange={onChange?.(state.value)}
+                options={[{label: '全部', value: ''}, ...state.options]}
+              />
+            );
+          }
         }
       });
     },

packages/app/src/hooks/use-table-search-event/index.ts

@@ -26,11 +26,11 @@ export function useTableSearchEvent<T>(
 export function useTableSearchToolEvents<T>(
   context: Context<TableSearchContext<T>>,
   payload?: T,
-  options: {callback?: () => void; resetCallback?: () => void} = {},
+  options: {searchCallback?: () => void; resetCallback?: () => void} = {},
 ) {
   const dispatch = useContextSection(context, state => state[1]);
-  const {callback, resetCallback} = options;
-  const callbackFn = useLatest(callback);
+  const {searchCallback, resetCallback} = options;
+  const callbackFn = useLatest(searchCallback);
 
   const onSearch = useCallback(
     function () {

packages/app/src/models/request/storage.ts

@@ -8,8 +8,10 @@ export type GetStorageListParams = {
   storageLocationName: string;
   /** 库位类型 */
   storageLocationType: string;
-  /** 是否禁用 */
+  /** 是否混合库位 */
   isNotDisable: string;
+  /** 所属仓库 */
+  warehouseWhere: string;
 } & ListParams;
 
 /** 新增库位 */

packages/app/src/pages/storage/context.ts

@@ -6,6 +6,7 @@ export const contextState: OriginalListParams<GetStorageListParams> = {
   storageLocationCode: '',
   storageLocationType: '',
   isNotDisable: '',
+  warehouseWhere: '',
 };
 
 export const context = createTableSearchContext(contextState);

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

@@ -1,67 +1,56 @@
-import {FilterField, FilterButtonGroup, FilterSelect, FilterFieldWrapper} from '@components';
+import {FilterButtonGroup, FilterFieldWrapper, FilterSelectorModal} from '@components';
 import {Card} from 'antd';
 import {FC} from 'react';
 import {
   useContextSection,
-  useDictionaryOptions,
+  useFilterDB,
   useFilterField,
-  useTableExportEvent,
-  useTableSearchEvent,
+  useTableSearchToolEvents,
+  useFieldGroup,
 } from '@hooks';
-import {context, pageContext, searchContext} from '../context';
-import {exportStorage} from '@apis';
-
-const disableOptions = [
-  {label: '全部', value: ''},
-  {label: '是', value: '1'},
-  {label: '否', value: '0'},
-];
+import {context, contextState, searchContext} from '../context';
+import {fixedMap, sourceMap} from './state';
 
 const Filter: FC = function () {
-  const [{code, name, isNotDisable, type}, onChange] = useFilterField({
-    name: '',
-    code: '',
-    type: '',
-    isNotDisable: '',
-  });
-  const onSearch = useTableSearchEvent(context, {
-    storageLocationName: name,
-    storageLocationCode: code,
-    storageLocationType: type,
-    isNotDisable,
+  const [fields, {onChange, resetState}] = useFilterField({...contextState}, true);
+  const [visible, {onSearch, onReset, onShowModal, onCloseModal}] = useTableSearchToolEvents(
+    context,
+    fields,
+    {
+      resetCallback: resetState,
+    },
+  );
+  const {isSearching} = useContextSection(searchContext, state => state[0]);
+  const [filterList, {set}] = useFilterDB();
+  const FilterFields = useFieldGroup(filterList, sourceMap, {
+    fields,
+    fixedMap,
+    onChange,
+    onSearch,
   });
-  const [isExporting, onExport] = useTableExportEvent({pageContext, context, fn: exportStorage});
-  const {isSearching, refetch} = useContextSection(searchContext, state => state[0]);
-  const typeOptions = useDictionaryOptions('物料类型', true);
 
   return (
-    <Card>
-      <FilterFieldWrapper>
-        <FilterField name='storageCode' label='库位编号' value={code} onChange={onChange('code')} />
-        <FilterField name='storageName' label='库位名称' value={name} onChange={onChange('name')} />
-        <FilterSelect
-          name='storageState'
-          label='混合库位'
-          value={isNotDisable}
-          onChange={onChange('isNotDisable')}
-          options={disableOptions}
-        />
-        <FilterSelect
-          name='storageState'
-          label='物料类型'
-          value={type}
-          onChange={onChange('type')}
-          options={typeOptions}
-        />
-        <FilterButtonGroup
-          isSearching={isSearching}
-          isExporting={isExporting}
-          onSearch={onSearch}
-          onExport={onExport}
-          onRefresh={refetch}
-        />
-      </FilterFieldWrapper>
-    </Card>
+    <>
+      <Card>
+        <FilterFieldWrapper>
+          {FilterFields}
+          <FilterButtonGroup
+            isSearching={isSearching}
+            onSearch={onSearch}
+            onReset={onReset}
+            onFilter={onShowModal}
+          />
+        </FilterFieldWrapper>
+      </Card>
+
+      <FilterSelectorModal
+        visible={visible}
+        onClose={onCloseModal}
+        source={filterList}
+        filtermap={sourceMap}
+        onConfirm={set}
+      />
+    </>
   );
 };
 

packages/app/src/pages/storage/filter/state.ts

@@ -0,0 +1,27 @@
+import {FilterGroupMap, MapValue} from '@hooks';
+import {contextState} from '../context';
+
+export const sourceMap: FilterGroupMap<typeof contextState> = new Map([
+  ['1', {label: '所属仓库', type: 'keySelect', value: 'warehouseWhere', selectKey: '仓库'}],
+  [
+    '2',
+    {label: '物料类型', type: 'keySelect', value: 'storageLocationType', selectKey: '物料类型'},
+  ],
+  [
+    '3',
+    {
+      label: '混合库位',
+      type: 'select',
+      value: 'isNotDisable',
+      options: [
+        {label: '是', value: '1'},
+        {label: '否', value: '0'},
+      ],
+    },
+  ],
+]);
+
+export const fixedMap: MapValue<typeof contextState>[] = [
+  {label: '库位名称', type: 'field', value: 'storageLocationName'},
+  {label: '库位编号', type: 'field', value: 'storageLocationCode'},
+];

packages/app/src/pages/storage/table/hooks.tsx

@@ -2,7 +2,7 @@ import {deleteStorage} from '@apis';
 import {ColumnsType} from 'antd/es/table';
 import {StorageListData} from '@models';
 import {Button} from 'antd';
-import {DOUBLE_BTN_WIDTH, MIDDLE_TABLE_WIDTH, NORMAL_TABLE_WIDTH, SMALL_TABLE_WIDTH} from '@utils';
+import {DOUBLE_BTN_WIDTH, LARGE_TABLE_WIDTH, MIDDLE_TABLE_WIDTH, NORMAL_TABLE_WIDTH} from '@utils';
 import {useTableModalEvent, useTableDeleteEvent} from '@hooks';
 
 const tableColumns: ColumnsType<StorageListData> = [
@@ -10,7 +10,7 @@ const tableColumns: ColumnsType<StorageListData> = [
     title: '库位编号',
     dataIndex: 'storageLocationCode',
     key: 'storageLocationCode',
-    width: SMALL_TABLE_WIDTH,
+    width: NORMAL_TABLE_WIDTH,
   },
   {
     title: '库位名称',
@@ -22,7 +22,7 @@ const tableColumns: ColumnsType<StorageListData> = [
     title: '所在仓库',
     dataIndex: 'wareHouseName',
     key: 'wareHouseName',
-    width: NORMAL_TABLE_WIDTH,
+    width: LARGE_TABLE_WIDTH,
   },
   {
     title: '物料类型',

packages/app/src/pages/storage/table/index.tsx

@@ -4,24 +4,31 @@ import StorageModal from './modal';
 import {context, pageContext, searchContext} from '../context';
 import {useHandle} from './hooks';
 import {Table, TableTools} from '@components';
-import {getStorageList} from '@apis';
-import {useContextSection, useQueryTableList} from '@hooks';
+import {exportStorage, getStorageList} from '@apis';
+import {useContextSection, useQueryTableList, useTableExportEvent} from '@hooks';
 
 const TableList: FC = function () {
   const params = useContextSection(context, state => state[0]);
 
-  const [{data, count}, {refetch}] = useQueryTableList({
+  const [{data, count, isFetching}, {refetch}] = useQueryTableList({
     queryFn: getStorageList,
     params,
     pageContext,
     searchContext,
   });
   const [{columns, visible, editId}, {onAdd, onClose}] = useHandle(refetch);
+  const [isExporting, onExport] = useTableExportEvent({pageContext, context, fn: exportStorage});
 
   return (
     <>
       <Card className='table-wrapper'>
-        <TableTools onClick={onAdd} />
+        <TableTools
+          onAdd={onAdd}
+          onRefresh={refetch}
+          onExport={onExport}
+          isRefreshing={isFetching}
+          isExporting={isExporting}
+        />
 
         <Table
           data-testid='storage_table'

packages/app/src/pages/storage/table/modal/hooks.ts

@@ -101,7 +101,7 @@ export function useFormInfoValue(id: string) {
       setValue('storageLocationName', data?.storageLocationName ?? '');
       setValue('storageIsNotDisable', data?.isNotDisable ?? '0');
       setValue('storageWarehouse', data?.warehouseWhere ?? '');
-      setValue('storageMaterialType', data?.storageLocationType?.split(',') ?? []);
+      setValue('storageMaterialType', data?.storageLocationType?.split(',').filter(Boolean) ?? []);
     },
     [data, setValue],
   );

packages/app/src/pages/user/filter/state.ts

@@ -3,7 +3,7 @@ import {contextState} from '../context';
 
 export const sourceMap: FilterGroupMap<typeof contextState> = new Map([
   ['1', {label: '真实姓名', type: 'field', value: 'realName'}],
-  ['2', {label: '所在部门', type: 'select', value: 'department', selectKey: '部门字典'}],
+  ['2', {label: '所在部门', type: 'keySelect', value: 'department', selectKey: '部门字典'}],
   ['3', {label: '角色名称', type: 'field', value: 'role'}],
   ['4', {label: '邮箱', type: 'field', value: 'email'}],
   ['5', {label: '电话', type: 'field', value: 'landline'}],