feat(metadata): edit metadata Form

src/pages/device/Product/Detail/Metadata/Base/Edit/index.tsx

@@ -2,9 +2,26 @@ import { Drawer } from 'antd';
 import { createSchemaField } from '@formily/react';
 import MetadataModel from '@/pages/device/Product/Detail/Metadata/Base/model';
 import { createForm } from '@formily/core';
-import { Radio, Select, Form, Input, FormItem, NumberPicker } from '@formily/antd';
+import {
+  FormLayout,
+  ArrayItems,
+  Editable,
+  Radio,
+  Select,
+  Form,
+  Input,
+  FormItem,
+  NumberPicker,
+  Space,
+} from '@formily/antd';
 import type { ISchema } from '@formily/json-schema';
-import { DataTypeList, EventLevel, PropertySource } from '@/pages/device/data';
+import {
+  DataTypeList,
+  DateTypeList,
+  EventLevel,
+  FileTypeList,
+  PropertySource,
+} from '@/pages/device/data';
 import { useCallback, useEffect, useState } from 'react';
 import { service } from '@/pages/device/Product';
 import { Store } from 'jetlinks-store';
@@ -23,6 +40,10 @@ const Edit = () => {
       Select,
       NumberPicker,
       Radio,
+      Editable,
+      ArrayItems,
+      Space,
+      FormLayout,
     },
   });
 
@@ -43,6 +64,13 @@ const Edit = () => {
         'x-decorator': 'FormItem',
         'x-component': 'Input',
       },
+      'expands.source': {
+        title: '来源',
+        required: true,
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+        enum: PropertySource,
+      },
       'valueType.type': {
         title: '数据类型',
         required: true,
@@ -50,16 +78,240 @@ const Edit = () => {
         'x-component': 'Select',
         enum: DataTypeList,
       },
+      'expands.maxLength': {
+        title: '最大长度',
+        'x-decorator': 'FormItem',
+        'x-component': 'NumberPicker',
+        'x-reactions': {
+          dependencies: ['valueType.type'],
+          fulfill: {
+            state: {
+              visible: "{{['string'].includes($deps[0])}}",
+            },
+          },
+        },
+      },
+      enumConfig: {
+        title: '枚举项',
+        type: 'array',
+        'x-decorator': 'FormItem',
+        'x-component': 'ArrayItems',
+        items: {
+          type: 'object',
+          'x-component': 'ArrayItems.Item',
+          properties: {
+            sort: {
+              type: 'void',
+              'x-decorator': 'FormItem',
+              'x-component': 'ArrayItems.SortHandle',
+            },
+            popover: {
+              type: 'void',
+              title: '枚举项配置',
+              'x-decorator': 'Editable.Popover',
+              'x-component': 'FormLayout',
+              'x-component-props': {
+                layout: 'vertical',
+              },
+              'x-reactions': [
+                {
+                  fulfill: {
+                    schema: {
+                      title: '{{$self.query(".label").value() : $self.query(".value").value() }}',
+                    },
+                  },
+                },
+              ],
+              properties: {
+                label: {
+                  type: 'string',
+                  title: 'Label',
+                  required: true,
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Input',
+                  'x-component-props': {
+                    placeholder: '标识',
+                  },
+                },
+                value: {
+                  type: 'string',
+                  title: 'Value',
+                  required: true,
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Input',
+                  'x-component-props': {
+                    placeholder: '对该枚举项的描述',
+                  },
+                },
+              },
+            },
+            remove: {
+              type: 'void',
+              'x-decorator': 'FormItem',
+              'x-component': 'ArrayItems.Remove',
+            },
+          },
+        },
+        properties: {
+          addition: {
+            type: 'void',
+            title: '新增枚举项',
+            'x-component': 'ArrayItems.Addition',
+          },
+        },
+        'x-reactions': {
+          dependencies: ['valueType.type'],
+          fulfill: {
+            state: {
+              visible: "{{['enum'].includes($deps[0])}}",
+            },
+          },
+        },
+      },
+      trueConfig: {
+        title: '布尔值',
+        type: 'void',
+        'x-decorator': 'FormItem',
+        'x-decorator-props': {
+          asterisk: true,
+          feedbackLayout: 'none',
+        },
+        'x-reactions': {
+          dependencies: ['valueType.type'],
+          fulfill: {
+            state: {
+              visible: "{{['boolean'].includes($deps[0])}}",
+            },
+          },
+        },
+        'x-component': 'Space',
+        properties: {
+          'valueType.elementType.trueText': {
+            'x-decorator': 'FormItem',
+            'x-component': 'Input',
+            default: '是',
+            'x-component-props': {
+              placeholder: 'trueText',
+            },
+          },
+          'valueType.elementType.trueValue': {
+            'x-decorator': 'FormItem',
+            'x-component': 'Input',
+            default: true,
+            'x-component-props': {
+              placeholder: 'trueValue',
+            },
+          },
+        },
+      },
+      falseConfig: {
+        type: 'void',
+        'x-decorator': 'FormItem',
+        'x-decorator-props': {
+          asterisk: true,
+          feedbackLayout: 'none',
+        },
+        'x-reactions': {
+          dependencies: ['valueType.type'],
+          fulfill: {
+            state: {
+              visible: "{{['boolean'].includes($deps[0])}}",
+            },
+          },
+        },
+        'x-component': 'Space',
+        properties: {
+          'valueType.elementType.falseText': {
+            'x-decorator': 'FormItem',
+            'x-component': 'Input',
+            default: '否',
+            'x-component-props': {
+              placeholder: 'falseText',
+            },
+          },
+          'valueType.elementType.falseValue': {
+            'x-decorator': 'FormItem',
+            'x-component': 'Input',
+            default: false,
+            'x-component-props': {
+              placeholder: 'falseValue',
+            },
+          },
+        },
+      },
+      'valueType.elementType.format': {
+        title: '时间格式',
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+        enum: DateTypeList,
+        'x-reactions': {
+          dependencies: ['valueType.type'],
+          fulfill: {
+            state: {
+              visible: "{{['date'].includes($deps[0])}}",
+            },
+          },
+        },
+      },
       'valueType.scale': {
         title: '精度',
         'x-decorator': 'FormItem',
         'x-component': 'NumberPicker',
+        'x-reactions': {
+          dependencies: ['valueType.type'],
+          fulfill: {
+            state: {
+              visible: "{{['float','double'].includes($deps[0])}}",
+            },
+          },
+        },
+      },
+      'valueType.elementType.fileType': {
+        title: '文件类型',
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+        'x-visible': false,
+        enum: FileTypeList,
+        'x-reactions': {
+          dependencies: ['valueType.type'],
+          fulfill: {
+            state: {
+              visible: "{{['file'].includes($deps[0])}}",
+            },
+          },
+        },
+      },
+      'valueType.elementType.expands.maxLength': {
+        title: '密码长度',
+        'x-decorator': 'FormItem',
+        'x-component': 'NumberPicker',
+        'x-decorator-props': {
+          tooltip: '字节',
+        },
+        'x-visible': false,
+        'x-reactions': {
+          dependencies: ['valueType.type'],
+          fulfill: {
+            state: {
+              visible: "{{['password'].includes($deps[0])}}",
+            },
+          },
+        },
       },
       'valueType.unit': {
         title: '单位',
         'x-decorator': 'FormItem',
         'x-component': 'Select',
+        'x-visible': false,
         enum: units,
+        'x-reactions': {
+          dependencies: ['valueType.type'],
+          fulfill: {
+            state: {
+              visible: "{{['int','float','long','double'].includes($deps[0])}}",
+            },
+          },
+        },
       },
       'expands.readOnly': {
         title: '是否只读',
@@ -77,13 +329,6 @@ const Edit = () => {
           },
         ],
       },
-      'expands.source': {
-        title: '来源',
-        required: true,
-        'x-decorator': 'FormItem',
-        'x-component': 'Select',
-        enum: PropertySource,
-      },
       description: {
         title: '描述',
         'x-decorator': 'FormItem',

src/pages/device/data.ts

@@ -97,3 +97,26 @@ export const EventLevel: { label: string; value: string }[] = [
     value: '紧急',
   },
 ];
+
+export const DateTypeList = [
+  {
+    label: 'String类型的UTC时间戳 (毫秒)',
+    value: 'string',
+  },
+  {
+    label: 'yyyy-MM-dd',
+    value: 'yyyy-MM-dd',
+  },
+  {
+    label: 'yyyy-MM-dd HH:mm:ss',
+    value: 'yyyy-MM-dd HH:mm:ss',
+  },
+  {
+    label: 'yyyy-MM-dd HH:mm:ss EE',
+    value: 'yyyy-MM-dd HH:mm:ss EE',
+  },
+  {
+    label: 'yyyy-MM-dd HH:mm:ss zzz',
+    value: 'yyyy-MM-dd HH:mm:ss zzz',
+  },
+];