From 3ab93d0f134f9ab9f57fb9b5e0a3e22adf8410c0 Mon Sep 17 00:00:00 2001
From: "liutao.fe" <liutao.fe@bytedance.com>
Date: Sun, 28 Aug 2022 14:30:02 +0800
Subject: [PATCH] feat: support array element type Enum

---
 .../components/Fields/FieldContentEditor.tsx  | 35 +++++++++++++++++--
 .../components/Fields/FieldContentRender.tsx  | 17 +++++++--
 .../schema/SchemaFieldEditor/Field.tsx        | 26 ++++++++++++++
 3 files changed, 72 insertions(+), 6 deletions(-)

diff --git a/packages/admin/src/components/Fields/FieldContentEditor.tsx b/packages/admin/src/components/Fields/FieldContentEditor.tsx
index cca1fe7b..4f1d915c 100644
--- a/packages/admin/src/components/Fields/FieldContentEditor.tsx
+++ b/packages/admin/src/components/Fields/FieldContentEditor.tsx
@@ -4,6 +4,7 @@ import { Rule } from 'antd/es/form'
 import { IConnectEditor, IDatePicker, IFileAndImageEditor } from '@/components/Fields'
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
 import { IObjectEditor } from './Object'
+import { FormListFieldData } from 'antd/es/form/FormList'
 
 const MarkdownEditor = React.lazy(() => import('@/components/Fields/Markdown'))
 const RichTextEditor = React.lazy(() => import('@/components/Fields/RichText'))
@@ -154,6 +155,36 @@ export function getFieldEditor(field: SchemaField, key: number) {
       )
       break
     case 'Array':
+      const schemaField = field as SchemaField & { [key: string]: any };
+      const renderItem = (formField: FormListFieldData) => {
+        switch (schemaField.elementType) {
+          case 'Enum':
+            return (
+              <Form.Item {...formField} noStyle validateTrigger={['onChange', 'onBlur']}>
+                <Select style={{ width: '40%' }} >
+                  {enumElements?.length ? (
+                    enumElements?.map((ele, index) => (
+                      <Option value={ele.value} key={index}>
+                        {ele.label}
+                      </Option>
+                    ))
+                  ) : (
+                    <Option value="" disabled>
+                      空
+                    </Option>
+                  )}
+                </Select>
+              </Form.Item>
+            );
+          default:
+            return (
+              <Form.Item {...formField} noStyle validateTrigger={['onChange', 'onBlur']}>
+                <Input style={{ width: '60%' }} />
+              </Form.Item>
+            );
+        }
+      }
+      
       FieldEditor = (
         <Form.List name={name}>
           {(fields, { add, remove }) => {
@@ -162,9 +193,7 @@ export function getFieldEditor(field: SchemaField, key: number) {
                 {fields?.map((field, index) => {
                   return (
                     <Form.Item key={index}>
-                      <Form.Item {...field} noStyle validateTrigger={['onChange', 'onBlur']}>
-                        <Input style={{ width: '60%' }} />
-                      </Form.Item>
+                      {renderItem(field)}
                       <MinusCircleOutlined
                         className="dynamic-delete-button"
                         style={{ margin: '0 8px' }}
diff --git a/packages/admin/src/components/Fields/FieldContentRender.tsx b/packages/admin/src/components/Fields/FieldContentRender.tsx
index b2744cf2..6cce33a5 100644
--- a/packages/admin/src/components/Fields/FieldContentRender.tsx
+++ b/packages/admin/src/components/Fields/FieldContentRender.tsx
@@ -152,11 +152,22 @@ export function getFieldRender(field: SchemaField) {
           return text
         }
 
+        const f = field as SchemaField & { [key: string]: any };
+
+        const renderItem = (val: string, index: number) => {
+          switch (f.elementType) {
+            case 'Enum':
+              const enumOptions = f.enumElements || [];
+              const displayVal = enumOptions.find(e => e.value === val)?.label;
+              return <Tag key={index}>{displayVal || val}</Tag>; 
+            default:
+              return <Tag key={index}>{val}</Tag>;
+          }
+        }
+
         return (
           <Space direction="vertical">
-            {record[name]?.map((val: string, index: number) => (
-              <Tag key={index}>{val}</Tag>
-            ))}
+            {record[name]?.map(renderItem)}
           </Space>
         )
       }
diff --git a/packages/admin/src/pages/project/schema/SchemaFieldEditor/Field.tsx b/packages/admin/src/pages/project/schema/SchemaFieldEditor/Field.tsx
index d6f395d0..fbe56776 100644
--- a/packages/admin/src/pages/project/schema/SchemaFieldEditor/Field.tsx
+++ b/packages/admin/src/pages/project/schema/SchemaFieldEditor/Field.tsx
@@ -260,6 +260,32 @@ export function getFieldFormItem(
           </Form.Item>
         </>
       )
+    case 'Array':
+      const renderElement = (fieldType: string,) => {
+        switch (fieldType) {
+          case 'Enum':
+            return getFieldFormItem(fieldType, { ...options });
+          default:
+            return null;
+        }
+      }
+
+      return (
+        <>
+          <Form.Item label="数组元素类型" name="elementType" validateTrigger={['onChange']}>
+            <Select placeholder="元素值类型">
+              <Option value="Enum">枚举</Option>
+              <Option value="any">任意类型</Option>
+            </Select>
+          </Form.Item>
+          <Form.Item label="数组元素配置" dependencies={['elementType']}>
+            {(ele) => {
+              const filed = ele.getFieldValue('elementType');
+              return renderElement(filed);
+            }}
+          </Form.Item>
+        </> 
+      )
     default:
       return ''
   }