chore: fetch select 增加loading状态

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

@@ -12,6 +12,7 @@ type Props = {
   placeholder?: string;
   options: {label: string; value: string}[];
   showSearch?: boolean;
+  loading?: boolean;
 };
 
 const Select: FC<Props> = function ({
@@ -22,6 +23,7 @@ const Select: FC<Props> = function ({
   name,
   options,
   showSearch,
+  loading,
 }) {
   function onSelectChange(value: string) {
     onChange(value);
@@ -44,6 +46,7 @@ const Select: FC<Props> = function ({
             value={value}
             options={options}
             onChange={onSelectChange}
+            loading={loading}
             getPopupContainer={(node: HTMLElement) => node.parentNode as HTMLElement}
           />
         </div>

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

@@ -15,6 +15,7 @@ type Props = {
   showSearch?: boolean;
   tip?: string;
   onSearch?: (value: string) => void;
+  loading?: boolean;
 } & UseControllerProps<any, any>;
 
 const ModalSelect: FC<Props> = function ({
@@ -27,6 +28,7 @@ const ModalSelect: FC<Props> = function ({
   showSearch,
   tip,
   onSearch,
+  loading,
 }) {
   return (
     <Row className='full-width' gutter={12}>
@@ -64,6 +66,7 @@ const ModalSelect: FC<Props> = function ({
                   getPopupContainer={(node: HTMLElement) => node.parentNode as HTMLElement}
                   onSearch={onSearch}
                   listHeight={150}
+                  loading={loading}
                 />
                 {tip && <p className={css.textTip}>{tip}</p>}
                 <p className={classNames([css.errorTips, {[css.errorTipsHidden]: !errorTips}])}>

packages/app/src/hooks/use-options/index.ts

@@ -147,7 +147,7 @@ export function useDictionaryWidthCode(
 ) {
   const [code, setCode] = useState('');
 
-  const {data} = useQuery(
+  const {data, isFetching} = useQuery(
     [getDictionaryOptions.name, type, addAll, 'useDictionaryWidthCode', code],
     async function () {
       const data = await getDictionaryOptions(type, '', code);
@@ -179,5 +179,5 @@ export function useDictionaryWidthCode(
     return debounce(onSearchValue, 500, {leading: false, trailing: true});
   }, []);
 
-  return [data, onSearch] as const;
+  return [{data, isFetching}, onSearch] as const;
 }

packages/app/src/pages/home/user/index.module.css

@@ -4,7 +4,6 @@
   cursor: pointer;
 
   & span {
-    margin-left: 16px;
     color: #666;
   }
 }

packages/app/src/pages/home/user/index.tsx

@@ -1,4 +1,4 @@
-import {Avatar, Dropdown} from 'antd';
+import {Avatar, Dropdown, Space} from 'antd';
 import css from './index.module.css';
 import {FC} from 'react';
 import {items, useLogout} from './hook';
@@ -6,6 +6,7 @@ import {useStore} from 'zustand';
 import {userStore} from '@stores';
 import face from '@assets/images/face.svg';
 import PassModal from './modal';
+import {DownOutlined} from '@ant-design/icons';
 
 const User: FC = function () {
   const [{visible}, {onClick, onClose}] = useLogout();
@@ -13,11 +14,12 @@ const User: FC = function () {
 
   return (
     <>
-      <Dropdown menu={{items, onClick}}>
-        <div className={css.user}>
+      <Dropdown menu={{items, onClick}} arrow>
+        <Space className={css.user} size='middle'>
           <Avatar src={face} alt='face' />
           <span data-testid='user_name'>{name}</span>
-        </div>
+          <DownOutlined />
+        </Space>
       </Dropdown>
 
       <PassModal visible={visible} onClose={onClose} />

packages/app/src/pages/material-bind/table/modal/Info.tsx

@@ -11,9 +11,12 @@ type Props = {
 const Info: FC<Props> = function ({id}) {
   const {control} = useFormContext<FormState>();
   const userOptions = useUserOptions();
-  const [materialOptions, onMaterialSearch] = useDictionaryWidthCode('物料字典', {
-    findValue: state => state.code,
-  });
+  const [{data: materialOptions, isFetching}, onMaterialSearch] = useDictionaryWidthCode(
+    '物料字典',
+    {
+      findValue: state => state.code,
+    },
+  );
   useWatchId(id, onMaterialSearch);
 
   return (
@@ -25,6 +28,7 @@ const Info: FC<Props> = function ({id}) {
         control={control}
         data={materialOptions}
         onSearch={onMaterialSearch}
+        loading={isFetching}
       />
     </>
   );

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

@@ -7,9 +7,12 @@ type Props = {id: string};
 
 const Info: FC<Props> = function ({id}) {
   const {control, watch} = useFormContextState();
-  const [materialOptions, onMaterialSearch] = useDictionaryWidthCode('物料字典', {
-    findValue: state => state.code,
-  });
+  const [{data: materialOptions, isFetching}, onMaterialSearch] = useDictionaryWidthCode(
+    '物料字典',
+    {
+      findValue: state => state.code,
+    },
+  );
   useWatchId(id, onMaterialSearch);
   const warehouseOptions = useDictionaryOptions('仓库');
   const warehouseId = watch('warehouseId');
@@ -23,6 +26,7 @@ const Info: FC<Props> = function ({id}) {
         control={control}
         data={materialOptions}
         onSearch={onMaterialSearch}
+        loading={isFetching}
       />
       <ModalSelect
         name='warehouseId'

packages/app/src/pages/product-report/table/modal/index.tsx

@@ -10,7 +10,8 @@ type Props = {
 };
 
 const AddModal: FC<Props> = function (props) {
-  const [materialOptions, onMaterialSearch] = useDictionaryWidthCode('物料字典');
+  const [{data: materialOptions, isFetching}, onMaterialSearch] =
+    useDictionaryWidthCode('物料字典');
   const [{isLoading, control}, {onSubmit}] = useFormState({...props, onSearch: onMaterialSearch});
   const corporationOptions = useDictionaryOptions('公司', false, state => state.code);
   const unitOptions = useDictionaryOptions('计量单位');
@@ -26,6 +27,7 @@ const AddModal: FC<Props> = function (props) {
         control={control}
         data={materialOptions}
         onSearch={onMaterialSearch}
+        loading={isFetching}
       />
       <ModalSelect label='计量单位' name='measUnitId' data={unitOptions} control={control} />
       <ModalField label='数量' type='number' name='orderCount' control={control} />

packages/app/src/pages/production-requisition/table/modal/index.tsx

@@ -11,7 +11,8 @@ type Props = {
 };
 
 const AddModal: FC<Props> = function (props) {
-  const [materialOptions, onMaterialSearch] = useDictionaryWidthCode('物料字典');
+  const [{isFetching, data: materialOptions}, onMaterialSearch] =
+    useDictionaryWidthCode('物料字典');
   const [{control, isLoading}, {onSubmit}] = useFormState({...props, onSearch: onMaterialSearch});
   const corporationOptions = useDictionaryOptions('公司', false, state => state.code);
   const departmentOptions = useDictionaryOptions('部门字典', false, state => state.code);
@@ -34,6 +35,7 @@ const AddModal: FC<Props> = function (props) {
         onSearch={onMaterialSearch}
         data={materialOptions}
         name='materialId'
+        loading={isFetching}
       />
       <ModalSelect data={unitOptions} control={control} label='计量单位' name='measUnitId' />
       <ModalField control={control} label='数量' name='orderCount' type='number' />

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

@@ -10,10 +10,12 @@ type Props = {
 };
 
 const AddModal: FC<Props> = function ({visible, onClose, onFetch}) {
-  const [materialOptions, onMaterialSearch] = useDictionaryWidthCode('物料字典');
-  const [supplierOptions, onSupplierSearch] = useDictionaryWidthCode('供应商/客户', {
-    findValue: state => state.code,
-  });
+  const [{data: materialOptions, isFetching: isMaterialFetching}, onMaterialSearch] =
+    useDictionaryWidthCode('物料字典');
+  const [{data: supplierOptions, isFetching: isSupplierFetching}, onSupplierSearch] =
+    useDictionaryWidthCode('供应商/客户', {
+      findValue: state => state.code,
+    });
   const [{control, isLoading}, {onSubmit}] = useFormState({
     visible,
     onClose,
@@ -42,6 +44,7 @@ const AddModal: FC<Props> = function ({visible, onClose, onFetch}) {
         label='物料'
         name='materialId'
         onSearch={onMaterialSearch}
+        loading={isMaterialFetching}
       />
       <ModalSelect data={measUnitOptions} control={control} label='计量单位' name='measUnitId' />
       <ModalField name='purchaseCount' label='采购数量' control={control} type='number' />
@@ -54,6 +57,7 @@ const AddModal: FC<Props> = function ({visible, onClose, onFetch}) {
         label='供应商'
         name='supplierNo'
         onSearch={onSupplierSearch}
+        loading={isSupplierFetching}
       />
       <ModalSelect data={corporationOptions} control={control} label='公司' name='companyNo' />
       <ModalDate control={control} label='订单日期' name='poDate' />

packages/app/src/pages/relocation-order/table/modal/index.tsx

@@ -10,7 +10,8 @@ type Props = {
 };
 
 const AddModal: FC<Props> = function (props) {
-  const [materialOptions, onMaterialSearch] = useDictionaryWidthCode('物料字典');
+  const [{data: materialOptions, isFetching}, onMaterialSearch] =
+    useDictionaryWidthCode('物料字典');
   const [{isLoading, control}, {onSubmit}] = useFormState({...props, onSearch: onMaterialSearch});
   const storageOptions = useDictionaryOptions('仓库');
   const utilsOptions = useDictionaryOptions('计量单位');
@@ -26,6 +27,7 @@ const AddModal: FC<Props> = function (props) {
         onSearch={onMaterialSearch}
         label='物料'
         name='materialId'
+        loading={isFetching}
       />
       <ModalField label='移库数量' name='orderCount' control={control} type='number' />
       <ModalSelect control={control} data={utilsOptions} label='计量单位' name='measUnitId' />

packages/app/src/pages/sell-order/table/modal/index.tsx

@@ -10,10 +10,12 @@ type Props = {
 };
 
 const AddModal: FC<Props> = function (props) {
-  const [materialOptions, onMaterialSearch] = useDictionaryWidthCode('物料字典');
-  const [customerOptions, onCustomerSearch] = useDictionaryWidthCode('供应商/客户', {
-    findValue: state => state.code,
-  });
+  const [{data: materialOptions, isFetching: isMaterialFetching}, onMaterialSearch] =
+    useDictionaryWidthCode('物料字典');
+  const [{data: customerOptions, isFetching: isCustomerFetching}, onCustomerSearch] =
+    useDictionaryWidthCode('供应商/客户', {
+      findValue: state => state.code,
+    });
   const [{isLoading, control}, {onSubmit}] = useFormState({
     ...props,
     onSearch() {
@@ -34,6 +36,7 @@ const AddModal: FC<Props> = function (props) {
         name='materialId'
         data={materialOptions}
         onSearch={onMaterialSearch}
+        loading={isMaterialFetching}
       />
       <ModalSelect control={control} label='计量单位' name='measUnitId' data={utilsOptions} />
       <ModalField control={control} label='交货数量' name='gsDeliveryCount' type='number' />
@@ -49,6 +52,7 @@ const AddModal: FC<Props> = function (props) {
         name='customerNo'
         data={customerOptions}
         onSearch={onCustomerSearch}
+        loading={isCustomerFetching}
       />
       <ModalSelect control={control} label='公司' name='companyNumber' data={companyOptions} />
       <ModalDate control={control} label='单据日期' name='docDate' />

packages/app/src/pages/semi-draw/table/modal/index.tsx

@@ -10,7 +10,8 @@ type Props = {
 };
 
 const AddModal: FC<Props> = function (props) {
-  const [materialOptions, onMaterialSearch] = useDictionaryWidthCode('物料字典');
+  const [{data: materialOptions, isFetching}, onMaterialSearch] =
+    useDictionaryWidthCode('物料字典');
   const [{control, isLoading}, {onSubmit}] = useFormState({...props, onSearch: onMaterialSearch});
   const corporationOptions = useDictionaryOptions('公司', false, state => state.code);
   const departmentOptions = useDictionaryOptions('部门字典', false, state => state.code);
@@ -27,6 +28,7 @@ const AddModal: FC<Props> = function (props) {
         onSearch={onMaterialSearch}
         data={materialOptions}
         name='materialId'
+        loading={isFetching}
       />
       <ModalSelect data={unitOptions} control={control} label='计量单位' name='measUnitId' />
       <ModalField control={control} label='数量' name='orderCount' type='number' />

packages/app/src/pages/semi-report/table/modal/index.tsx

@@ -10,7 +10,8 @@ type Props = {
 };
 
 const AddModal: FC<Props> = function (props) {
-  const [materialOptions, onMaterialSearch] = useDictionaryWidthCode('物料字典');
+  const [{data: materialOptions, isFetching}, onMaterialSearch] =
+    useDictionaryWidthCode('物料字典');
   const [{isLoading, control}, {onSubmit}] = useFormState({...props, onSearch: onMaterialSearch});
   const corporationOptions = useDictionaryOptions('公司', false, state => state.code);
   const unitOptions = useDictionaryOptions('计量单位');
@@ -26,6 +27,7 @@ const AddModal: FC<Props> = function (props) {
         control={control}
         data={materialOptions}
         onSearch={onMaterialSearch}
+        loading={isFetching}
       />
       <ModalSelect label='计量单位' name='measUnitId' data={unitOptions} control={control} />
       <ModalField label='数量' type='number' name='orderCount' control={control} />