fix: 修复移动端快速添加功能 (#1153)
Reviewed-on: daoyoucloud/tachybase#1153 Reviewed-by: sealday <zhanglin@daoyoucloud.com> Co-authored-by: wjh <wwwjh0710@163.com> Co-committed-by: wjh <wwwjh0710@163.com>
This commit is contained in:
		
							parent
							
								
									7ef88ad093
								
							
						
					
					
						commit
						f807ab8e01
					
				@ -0,0 +1 @@
 | 
				
			|||||||
 | 
					export * from './hook';
 | 
				
			||||||
@ -1,4 +1,5 @@
 | 
				
			|||||||
import { connect, mapReadPretty } from '@tachybase/schema';
 | 
					import { connect, mapReadPretty } from '@tachybase/schema';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
import { Action } from '../action';
 | 
					import { Action } from '../action';
 | 
				
			||||||
import { Editable } from './Editable';
 | 
					import { Editable } from './Editable';
 | 
				
			||||||
import { InternalPicker } from './InternalPicker';
 | 
					import { InternalPicker } from './InternalPicker';
 | 
				
			||||||
@ -7,6 +8,7 @@ import { ReadPretty } from './ReadPretty';
 | 
				
			|||||||
import { SubTable } from './SubTable';
 | 
					import { SubTable } from './SubTable';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export const AssociationField: any = connect(Editable, mapReadPretty(ReadPretty));
 | 
					export const AssociationField: any = connect(Editable, mapReadPretty(ReadPretty));
 | 
				
			||||||
 | 
					export * from './SubTabs';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
AssociationField.SubTable = SubTable;
 | 
					AssociationField.SubTable = SubTable;
 | 
				
			||||||
AssociationField.Nester = Nester;
 | 
					AssociationField.Nester = Nester;
 | 
				
			||||||
 | 
				
			|||||||
@ -14,6 +14,7 @@ import {
 | 
				
			|||||||
  useCollectionField,
 | 
					  useCollectionField,
 | 
				
			||||||
  useCollectionManager,
 | 
					  useCollectionManager,
 | 
				
			||||||
  useDesignable,
 | 
					  useDesignable,
 | 
				
			||||||
 | 
					  useFieldServiceFilter,
 | 
				
			||||||
  useRequest,
 | 
					  useRequest,
 | 
				
			||||||
} from '@tachybase/client';
 | 
					} from '@tachybase/client';
 | 
				
			||||||
import { isArray } from '@tachybase/utils/client';
 | 
					import { isArray } from '@tachybase/utils/client';
 | 
				
			||||||
@ -33,7 +34,8 @@ export const AntdSelect = observer((props) => {
 | 
				
			|||||||
  const fieldSchema = useFieldSchema();
 | 
					  const fieldSchema = useFieldSchema();
 | 
				
			||||||
  const cm = useCollectionManager();
 | 
					  const cm = useCollectionManager();
 | 
				
			||||||
  const collection = useCollection();
 | 
					  const collection = useCollection();
 | 
				
			||||||
  const [filter, setFilter] = useState(service?.params?.filter);
 | 
					  const [fieldServiceFilter] = useFieldServiceFilter(service?.params);
 | 
				
			||||||
 | 
					  const [filter, setFilter] = useState(fieldServiceFilter);
 | 
				
			||||||
  const api = useAPIClient();
 | 
					  const api = useAPIClient();
 | 
				
			||||||
  const [selectValue, setSelectValue] = useState(value);
 | 
					  const [selectValue, setSelectValue] = useState(value);
 | 
				
			||||||
  const fieldNamesLabel = fieldNames?.label || 'label';
 | 
					  const fieldNamesLabel = fieldNames?.label || 'label';
 | 
				
			||||||
@ -47,7 +49,7 @@ export const AntdSelect = observer((props) => {
 | 
				
			|||||||
    inputValue = value[fieldNamesLabel];
 | 
					    inputValue = value[fieldNamesLabel];
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  const { data, run } = useRequest(
 | 
					  const { run } = useRequest(
 | 
				
			||||||
    {
 | 
					    {
 | 
				
			||||||
      resource: collectionName,
 | 
					      resource: collectionName,
 | 
				
			||||||
      action: 'list',
 | 
					      action: 'list',
 | 
				
			||||||
@ -57,23 +59,23 @@ export const AntdSelect = observer((props) => {
 | 
				
			|||||||
    },
 | 
					    },
 | 
				
			||||||
    {
 | 
					    {
 | 
				
			||||||
      manual: true,
 | 
					      manual: true,
 | 
				
			||||||
 | 
					      onSuccess(data) {
 | 
				
			||||||
 | 
					        if (data) {
 | 
				
			||||||
 | 
					          const dataOption = data['data']?.map((value) => {
 | 
				
			||||||
 | 
					            return {
 | 
				
			||||||
 | 
					              ...value,
 | 
				
			||||||
 | 
					              label: value[fieldNamesLabel],
 | 
				
			||||||
 | 
					              value: value[fieldNamesValue],
 | 
				
			||||||
 | 
					            };
 | 
				
			||||||
 | 
					          });
 | 
				
			||||||
 | 
					          setOptions(dataOption);
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					      },
 | 
				
			||||||
    },
 | 
					    },
 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
  useEffect(() => {
 | 
					  useEffect(() => {
 | 
				
			||||||
    checkedPopup();
 | 
					    checkedPopup();
 | 
				
			||||||
  }, [filter]);
 | 
					  }, [filter, popupVisible]);
 | 
				
			||||||
  useEffect(() => {
 | 
					 | 
				
			||||||
    if (data) {
 | 
					 | 
				
			||||||
      const dataOption = data['data']?.map((value) => {
 | 
					 | 
				
			||||||
        return {
 | 
					 | 
				
			||||||
          ...value,
 | 
					 | 
				
			||||||
          label: value[fieldNamesLabel],
 | 
					 | 
				
			||||||
          value: value[fieldNamesValue],
 | 
					 | 
				
			||||||
        };
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
      setOptions(dataOption);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }, [data]);
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
  const checkedPopup = () => {
 | 
					  const checkedPopup = () => {
 | 
				
			||||||
    if (collectionName) {
 | 
					    if (collectionName) {
 | 
				
			||||||
@ -136,7 +138,13 @@ export const AntdSelect = observer((props) => {
 | 
				
			|||||||
            <Space>{fieldSchema['x-disabled'] ? '' : '请选择内容'}</Space>
 | 
					            <Space>{fieldSchema['x-disabled'] ? '' : '请选择内容'}</Space>
 | 
				
			||||||
          )}
 | 
					          )}
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
        <Popup visible={popupVisible} className={`${styles['PopupStyle']}`} closeOnMaskClick>
 | 
					        <Popup
 | 
				
			||||||
 | 
					          visible={popupVisible}
 | 
				
			||||||
 | 
					          className={`${styles['PopupStyle']}`}
 | 
				
			||||||
 | 
					          onMaskClick={() => {
 | 
				
			||||||
 | 
					            setPopupVisible(false);
 | 
				
			||||||
 | 
					          }}
 | 
				
			||||||
 | 
					        >
 | 
				
			||||||
          <MobileProvider>
 | 
					          <MobileProvider>
 | 
				
			||||||
            <SearchBar
 | 
					            <SearchBar
 | 
				
			||||||
              placeholder="请输入内容"
 | 
					              placeholder="请输入内容"
 | 
				
			||||||
@ -201,6 +209,10 @@ export const AntdSelect = observer((props) => {
 | 
				
			|||||||
                color="primary"
 | 
					                color="primary"
 | 
				
			||||||
                onClick={() => {
 | 
					                onClick={() => {
 | 
				
			||||||
                  setPopupVisible(false);
 | 
					                  setPopupVisible(false);
 | 
				
			||||||
 | 
					                  const paramsFilter = { ...filter };
 | 
				
			||||||
 | 
					                  if (paramsFilter[fieldNamesLabel]) delete paramsFilter[fieldNamesLabel];
 | 
				
			||||||
 | 
					                  setSearchValue('');
 | 
				
			||||||
 | 
					                  setFilter(paramsFilter);
 | 
				
			||||||
                }}
 | 
					                }}
 | 
				
			||||||
              >
 | 
					              >
 | 
				
			||||||
                取消
 | 
					                取消
 | 
				
			||||||
@ -210,6 +222,11 @@ export const AntdSelect = observer((props) => {
 | 
				
			|||||||
                onClick={() => {
 | 
					                onClick={() => {
 | 
				
			||||||
                  onChange(selectValue);
 | 
					                  onChange(selectValue);
 | 
				
			||||||
                  setPopupVisible(false);
 | 
					                  setPopupVisible(false);
 | 
				
			||||||
 | 
					                  const paramsFilter = { ...filter };
 | 
				
			||||||
 | 
					                  if (paramsFilter[fieldNamesLabel]) delete paramsFilter[fieldNamesLabel];
 | 
				
			||||||
 | 
					                  setSearchValue('');
 | 
				
			||||||
 | 
					                  setFilter(paramsFilter);
 | 
				
			||||||
 | 
					                  setSearchValue('');
 | 
				
			||||||
                }}
 | 
					                }}
 | 
				
			||||||
              >
 | 
					              >
 | 
				
			||||||
                确定
 | 
					                确定
 | 
				
			||||||
 | 
				
			|||||||
@ -1,5 +1,5 @@
 | 
				
			|||||||
import React, { useState } from 'react';
 | 
					import React, { useState } from 'react';
 | 
				
			||||||
import { css, SchemaComponentOptions, useApp, useCollection } from '@tachybase/client';
 | 
					import { ActionContextProvider, css, SchemaComponentOptions, useApp, useCollection } from '@tachybase/client';
 | 
				
			||||||
import { observer, RecursionField, useField, useFieldSchema } from '@tachybase/schema';
 | 
					import { observer, RecursionField, useField, useFieldSchema } from '@tachybase/schema';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
import { Button, CenterPopup, Modal, Popup } from 'antd-mobile';
 | 
					import { Button, CenterPopup, Modal, Popup } from 'antd-mobile';
 | 
				
			||||||
@ -37,6 +37,10 @@ export const CreateRecordAction = observer(
 | 
				
			|||||||
          onMaskClick={() => {
 | 
					          onMaskClick={() => {
 | 
				
			||||||
            setVisible(false);
 | 
					            setVisible(false);
 | 
				
			||||||
          }}
 | 
					          }}
 | 
				
			||||||
 | 
					          showCloseButton
 | 
				
			||||||
 | 
					          onClose={() => {
 | 
				
			||||||
 | 
					            setVisible(false);
 | 
				
			||||||
 | 
					          }}
 | 
				
			||||||
          className={css`
 | 
					          className={css`
 | 
				
			||||||
            .adm-popup-body {
 | 
					            .adm-popup-body {
 | 
				
			||||||
              height: 80vh;
 | 
					              height: 80vh;
 | 
				
			||||||
@ -45,7 +49,9 @@ export const CreateRecordAction = observer(
 | 
				
			|||||||
          `}
 | 
					          `}
 | 
				
			||||||
        >
 | 
					        >
 | 
				
			||||||
          <MobileProvider>
 | 
					          <MobileProvider>
 | 
				
			||||||
            <RecursionField schema={addNew} onlyRenderProperties />
 | 
					            <ActionContextProvider visible={visible} setVisible={setVisible}>
 | 
				
			||||||
 | 
					              <RecursionField schema={addNew} onlyRenderProperties />
 | 
				
			||||||
 | 
					            </ActionContextProvider>
 | 
				
			||||||
          </MobileProvider>
 | 
					          </MobileProvider>
 | 
				
			||||||
        </Popup>
 | 
					        </Popup>
 | 
				
			||||||
      </div>
 | 
					      </div>
 | 
				
			||||||
 | 
				
			|||||||
@ -23,7 +23,7 @@ export const MSelect = connect(
 | 
				
			|||||||
      filterProps['collectionName'] = collection.name;
 | 
					      filterProps['collectionName'] = collection.name;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    if (typeof filterProps['value'] !== 'object') {
 | 
					    if (typeof filterProps['value'] !== 'object') {
 | 
				
			||||||
      filterProps['value'] = dataSource.filter((item) => item.value.toString() === filterProps['value']);
 | 
					      filterProps['value'] = dataSource.filter((item) => item.value.toString() === filterProps?.['value']);
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    return { ...filterProps };
 | 
					    return { ...filterProps };
 | 
				
			||||||
  }),
 | 
					  }),
 | 
				
			||||||
@ -32,7 +32,7 @@ export const MSelect = connect(
 | 
				
			|||||||
    const collectionField = useCollectionField();
 | 
					    const collectionField = useCollectionField();
 | 
				
			||||||
    const isSlectField = ['multipleSelect', 'select'].includes(collectionField?.interface);
 | 
					    const isSlectField = ['multipleSelect', 'select'].includes(collectionField?.interface);
 | 
				
			||||||
    const field = useField<any>();
 | 
					    const field = useField<any>();
 | 
				
			||||||
    const dataSource = field.dataSource || collectionField?.uiSchema.enum || [];
 | 
					    const dataSource = field?.dataSource || collectionField?.uiSchema.enum || [];
 | 
				
			||||||
    const fieldNamesLabel = fieldNames?.label || 'label';
 | 
					    const fieldNamesLabel = fieldNames?.label || 'label';
 | 
				
			||||||
    if (isSlectField) {
 | 
					    if (isSlectField) {
 | 
				
			||||||
      const option = [];
 | 
					      const option = [];
 | 
				
			||||||
@ -58,10 +58,10 @@ export const MSelect = connect(
 | 
				
			|||||||
      let redValue = '';
 | 
					      let redValue = '';
 | 
				
			||||||
      if (isArray(value)) {
 | 
					      if (isArray(value)) {
 | 
				
			||||||
        redValue = value.reduce((prev, curr) => {
 | 
					        redValue = value.reduce((prev, curr) => {
 | 
				
			||||||
          return prev + curr[fieldNamesLabel];
 | 
					          return prev + curr?.[fieldNamesLabel];
 | 
				
			||||||
        }, '');
 | 
					        }, '');
 | 
				
			||||||
      } else {
 | 
					      } else {
 | 
				
			||||||
        redValue = value[fieldNamesLabel];
 | 
					        redValue = value?.[fieldNamesLabel] || '';
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
      return (
 | 
					      return (
 | 
				
			||||||
        <div>
 | 
					        <div>
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user