fix: 修改移动端下拉框适配自定义数据选择 (#1102)

Reviewed-on: daoyoucloud/tachybase#1102
Reviewed-by: sealday <zhanglin@daoyoucloud.com>
Co-authored-by: wjh <wwwjh0710@163.com>
Co-committed-by: wjh <wwwjh0710@163.com>

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

@@ -14,17 +14,7 @@ export const MInput: ComposedInput = connect(
     return { placeholder: '请输入内容', clearable: true, ...props, style: { '--font-size': '12px' } };
   }),
   mapReadPretty((props) => {
-    return (
-      <Input
-        {...props}
-        readOnly
-        className={css`
-          .adm-text-area-element {
-            font-size: 12px;
-          }
-        `}
-      />
-    );
+    return <text style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{props.value}</text>;
   }),
 );
 
@@ -34,17 +24,7 @@ const MTextArea = connect(
     return { ...props, placeholder: '请输入内容', clearable: true, style: { '--font-size': '12px' } };
   }),
   mapReadPretty((props) => {
-    return (
-      <TextArea
-        {...props}
-        readOnly
-        className={css`
-          .adm-text-area-element {
-            font-size: 12px;
-          }
-        `}
-      />
-    );
+    return <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{props.value}</div>;
   }),
 );
 

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

@@ -23,7 +23,7 @@ import schema from './schema';
 import { useStyles } from './style';
 
 export const AntdSelect = observer((props) => {
-  const { value, collectionName, service, fieldNames, addMode, onChange, multiple } = props as any;
+  const { value, collectionName, service, fieldNames, addMode, onChange, multiple, mode } = props as any;
   const [popupVisible, setPopupVisible] = useState(false);
   const [searchValue, setSearchValue] = useState('');
   const { styles } = useStyles();
@@ -139,7 +139,7 @@ export const AntdSelect = observer((props) => {
   };
   return (
     <BlockItem>
-      {collectionName ? (
+      {!value || typeof value === 'object' ? (
         <div
           onClick={() => {
             setPopupVisible(true);
@@ -147,7 +147,7 @@ export const AntdSelect = observer((props) => {
           }}
           style={{ color: '#c5c5c5' }}
         >
-          {isArray(value) ? (
+          {isArray(value) && value.length ? (
             value.map((item, index) => (
               <Space key={index}>{`${item.label}${value.length - 1 === index ? '' : ','}`}</Space>
             ))
@@ -176,7 +176,7 @@ export const AntdSelect = observer((props) => {
           </Space>
         ) : null}
         <Divider />
-        {multiple ? (
+        {multiple || mode === 'multiple' ? (
           <CheckList
             multiple
             className={`${styles['checkListStyle']}`}
@@ -201,7 +201,7 @@ export const AntdSelect = observer((props) => {
           <PickerView
             columns={[options]}
             onChange={(value) => {
-              const changeValue = options.find((item) => item[fieldNames.value] === value[0]);
+              const changeValue = options.find((item) => item['value'] === value[0]);
               setSelectValue(changeValue);
             }}
           />

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

@@ -38,15 +38,23 @@ export const MSelect = connect(
       const field = useField<any>();
       const collectionField = useCollectionField();
       const dataSource = field.dataSource || collectionField?.uiSchema.enum || [];
+      const options =
+        typeof value === 'object'
+          ? value
+              .map((item) => {
+                if (dataSource.find((dataItem) => dataItem.value === item.value)) {
+                  return item;
+                }
+              })
+              .filter(Boolean)
+          : dataSource.filter((item) => item.value.toString() === value);
       return (
         <div>
-          {dataSource
-            .filter((option) => option.value == value)
-            .map((option, key) => (
-              <Tag key={key} color={getMobileColor(option.color)}>
-                {option.label}
-              </Tag>
-            ))}
+          {options.map((option, key) => (
+            <Tag key={key} color={getMobileColor(option.color)} style={{ margin: '5px' }}>
+              {option.label}
+            </Tag>
+          ))}
         </div>
       );
     }