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>

packages/core/client/src/schema-component/antd/association-field/SubTabs/index.ts

@@ -0,0 +1 @@
+export * from './hook';

packages/core/client/src/schema-component/antd/association-field/index.ts

@@ -1,4 +1,5 @@
 import { connect, mapReadPretty } from '@tachybase/schema';
+
 import { Action } from '../action';
 import { Editable } from './Editable';
 import { InternalPicker } from './InternalPicker';
@@ -7,6 +8,7 @@ import { ReadPretty } from './ReadPretty';
 import { SubTable } from './SubTable';
 
 export const AssociationField: any = connect(Editable, mapReadPretty(ReadPretty));
+export * from './SubTabs';
 
 AssociationField.SubTable = SubTable;
 AssociationField.Nester = Nester;

packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/AntdSelect.tsx

@@ -14,6 +14,7 @@ import {
   useCollectionField,
   useCollectionManager,
   useDesignable,
+  useFieldServiceFilter,
   useRequest,
 } from '@tachybase/client';
 import { isArray } from '@tachybase/utils/client';
@@ -33,7 +34,8 @@ export const AntdSelect = observer((props) => {
   const fieldSchema = useFieldSchema();
   const cm = useCollectionManager();
   const collection = useCollection();
-  const [filter, setFilter] = useState(service?.params?.filter);
+  const [fieldServiceFilter] = useFieldServiceFilter(service?.params);
+  const [filter, setFilter] = useState(fieldServiceFilter);
   const api = useAPIClient();
   const [selectValue, setSelectValue] = useState(value);
   const fieldNamesLabel = fieldNames?.label || 'label';
@@ -47,7 +49,7 @@ export const AntdSelect = observer((props) => {
     inputValue = value[fieldNamesLabel];
   }
 
-  const { data, run } = useRequest(
+  const { run } = useRequest(
     {
       resource: collectionName,
       action: 'list',
@@ -57,23 +59,23 @@ export const AntdSelect = observer((props) => {
     },
     {
       manual: true,
+      onSuccess(data) {
+        if (data) {
+          const dataOption = data['data']?.map((value) => {
+            return {
+              ...value,
+              label: value[fieldNamesLabel],
+              value: value[fieldNamesValue],
+            };
+          });
+          setOptions(dataOption);
+        }
+      },
     },
   );
   useEffect(() => {
     checkedPopup();
-  }, [filter]);
-  useEffect(() => {
-    if (data) {
-      const dataOption = data['data']?.map((value) => {
-        return {
-          ...value,
-          label: value[fieldNamesLabel],
-          value: value[fieldNamesValue],
-        };
-      });
-      setOptions(dataOption);
-    }
-  }, [data]);
+  }, [filter, popupVisible]);
 
   const checkedPopup = () => {
     if (collectionName) {
@@ -136,7 +138,13 @@ export const AntdSelect = observer((props) => {
             <Space>{fieldSchema['x-disabled'] ? '' : '请选择内容'}</Space>
           )}
         </div>
-        <Popup visible={popupVisible} className={`${styles['PopupStyle']}`} closeOnMaskClick>
+        <Popup
+          visible={popupVisible}
+          className={`${styles['PopupStyle']}`}
+          onMaskClick={() => {
+            setPopupVisible(false);
+          }}
+        >
           <MobileProvider>
             <SearchBar
               placeholder="请输入内容"
@@ -201,6 +209,10 @@ export const AntdSelect = observer((props) => {
                 color="primary"
                 onClick={() => {
                   setPopupVisible(false);
+                  const paramsFilter = { ...filter };
+                  if (paramsFilter[fieldNamesLabel]) delete paramsFilter[fieldNamesLabel];
+                  setSearchValue('');
+                  setFilter(paramsFilter);
                 }}
               >
                 取消
@@ -210,6 +222,11 @@ export const AntdSelect = observer((props) => {
                 onClick={() => {
                   onChange(selectValue);
                   setPopupVisible(false);
+                  const paramsFilter = { ...filter };
+                  if (paramsFilter[fieldNamesLabel]) delete paramsFilter[fieldNamesLabel];
+                  setSearchValue('');
+                  setFilter(paramsFilter);
+                  setSearchValue('');
                 }}
               >
                 确定

packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/CreateRecordAction.tsx

@@ -1,5 +1,5 @@
 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 { Button, CenterPopup, Modal, Popup } from 'antd-mobile';
@@ -37,6 +37,10 @@ export const CreateRecordAction = observer(
           onMaskClick={() => {
             setVisible(false);
           }}
+          showCloseButton
+          onClose={() => {
+            setVisible(false);
+          }}
           className={css`
             .adm-popup-body {
               height: 80vh;
@@ -45,7 +49,9 @@ export const CreateRecordAction = observer(
           `}
         >
           <MobileProvider>
-            <RecursionField schema={addNew} onlyRenderProperties />
+            <ActionContextProvider visible={visible} setVisible={setVisible}>
+              <RecursionField schema={addNew} onlyRenderProperties />
+            </ActionContextProvider>
           </MobileProvider>
         </Popup>
       </div>

packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/Select.tsx

@@ -23,7 +23,7 @@ export const MSelect = connect(
       filterProps['collectionName'] = collection.name;
     }
     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 };
   }),
@@ -32,7 +32,7 @@ export const MSelect = connect(
     const collectionField = useCollectionField();
     const isSlectField = ['multipleSelect', 'select'].includes(collectionField?.interface);
     const field = useField<any>();
-    const dataSource = field.dataSource || collectionField?.uiSchema.enum || [];
+    const dataSource = field?.dataSource || collectionField?.uiSchema.enum || [];
     const fieldNamesLabel = fieldNames?.label || 'label';
     if (isSlectField) {
       const option = [];
@@ -58,10 +58,10 @@ export const MSelect = connect(
       let redValue = '';
       if (isArray(value)) {
         redValue = value.reduce((prev, curr) => {
-          return prev + curr[fieldNamesLabel];
+          return prev + curr?.[fieldNamesLabel];
         }, '');
       } else {
-        redValue = value[fieldNamesLabel];
+        redValue = value?.[fieldNamesLabel] || '';
       }
       return (
         <div>