From f3100030d78faa92d6e215e0120eb2854f9120c9 Mon Sep 17 00:00:00 2001
From: wjh <wwwjh0710@163.com>
Date: Mon, 3 Jun 2024 10:35:46 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E4=B8=8B=E6=8B=89=E6=A1=86=E9=80=82=E9=85=8D=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=95=B0=E6=8D=AE=E9=80=89=E6=8B=A9=20(#1102?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reviewed-on: https://git.daoyoucloud.com/daoyoucloud/tachybase/pulls/1102
Reviewed-by: sealday <zhanglin@daoyoucloud.com>
Co-authored-by: wjh <wwwjh0710@163.com>
Co-committed-by: wjh <wwwjh0710@163.com>
---
 .../components/antd-mobile/Input/Input.tsx    | 24 ++-----------------
 .../antd-mobile/Select/AntdSelect.tsx         | 10 ++++----
 .../components/antd-mobile/Select/Select.tsx  | 22 +++++++++++------
 3 files changed, 22 insertions(+), 34 deletions(-)

diff --git a/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Input/Input.tsx b/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Input/Input.tsx
index 416e95578..bdaf3cce9 100644
--- a/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Input/Input.tsx
+++ b/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>;
   }),
 );
 
diff --git a/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/AntdSelect.tsx b/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/AntdSelect.tsx
index 93dc380ca..44e98caea 100644
--- a/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/AntdSelect.tsx
+++ b/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);
             }}
           />
diff --git a/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/Select.tsx b/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/Select.tsx
index 116225db2..ce2d48507 100644
--- a/packages/plugins/@tachybase/plugin-mobile-client/src/client/core/schema/components/antd-mobile/Select/Select.tsx
+++ b/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>
       );
     }