feat(metadata): metadata Form UI

package.json

@@ -61,13 +61,13 @@
     "@ant-design/pro-form": "^1.18.3",
     "@ant-design/pro-layout": "^6.15.3",
     "@dabeng/react-orgchart": "^1.0.0",
-    "@formily/antd": "2.0.0-rc.14",
-    "@formily/core": "2.0.0-rc.14",
-    "@formily/json-schema": "2.0.0-rc.14",
-    "@formily/react": "2.0.0-rc.14",
-    "@formily/reactive": "2.0.0-rc.14",
-    "@formily/reactive-react": "2.0.0-rc.14",
-    "@formily/shared": "2.0.0-rc.14",
+    "@formily/antd": "2.0.0-rc.17",
+    "@formily/core": "2.0.0-rc.17",
+    "@formily/json-schema": "2.0.0-rc.17",
+    "@formily/react": "2.0.0-rc.17",
+    "@formily/reactive": "2.0.0-rc.17",
+    "@formily/reactive-react": "2.0.0-rc.17",
+    "@formily/shared": "2.0.0-rc.17",
     "@jetlinks/pro-list": "^1.10.8",
     "@jetlinks/pro-table": "^2.43.7",
     "@umijs/route-utils": "^1.0.36",

src/components/MetadataParam/index.tsx

@@ -0,0 +1,160 @@
+import {
+  NumberPicker,
+  FormLayout,
+  Editable,
+  ArrayItems,
+  FormItem,
+  Form,
+  Input,
+  Select,
+} from '@formily/antd';
+import { createForm } from '@formily/core';
+import { connect, createSchemaField } from '@formily/react';
+import type { ISchema } from '@formily/json-schema';
+import { DataTypeList } from '@/pages/device/data';
+import { Store } from 'jetlinks-store';
+
+interface Props {
+  value: Record<string, unknown>;
+  onChange: () => void;
+}
+
+const MetadataParam = connect((props: Props) => {
+  const form = createForm({
+    initialValues: props.value,
+  });
+
+  const SchemaField = createSchemaField({
+    components: {
+      FormItem,
+      Input,
+      Select,
+      MetadataParam,
+      ArrayItems,
+      Editable,
+      FormLayout,
+      NumberPicker,
+    },
+  });
+
+  const schema: ISchema = {
+    type: 'object',
+    properties: {
+      json2: {
+        type: 'array',
+        'x-component': 'ArrayItems',
+        'x-decorator': 'FormItem',
+        items: {
+          type: 'object',
+          'x-decorator': 'ArrayItems.Item',
+          properties: {
+            sort: {
+              type: 'void',
+              'x-decorator': 'FormItem',
+              'x-component': 'ArrayItems.SortHandle',
+            },
+            config: {
+              type: 'object',
+              title: '配置参数',
+              'x-decorator': 'Editable.Popover',
+              'x-component': 'FormLayout',
+              'x-component-props': {
+                layout: 'vertical',
+              },
+              'x-decorator-props': {
+                placement: 'left',
+              },
+              'x-reactions':
+                '{{(field)=>field.title = field.value && (field.value.name) || field.title}}',
+              properties: {
+                id: {
+                  title: '标识',
+                  required: true,
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Input',
+                },
+                name: {
+                  title: '名称',
+                  required: true,
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Input',
+                },
+                'valueType.type': {
+                  title: '数据类型',
+                  required: true,
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Select',
+                  enum: DataTypeList,
+                },
+                'valueType.unit': {
+                  title: '单位',
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Select',
+                  'x-visible': false,
+                  enum: Store.get('units'), // 理论上首层已经就缓存了单位数据，此处可直接获取
+                  'x-reactions': {
+                    dependencies: ['..valueType.type'],
+                    fulfill: {
+                      state: {
+                        visible: "{{['int','float','long','double'].includes($deps[0])}}",
+                      },
+                    },
+                  },
+                },
+                'valueType.scale': {
+                  title: '精度',
+                  'x-decorator': 'FormItem',
+                  'x-component': 'NumberPicker',
+                  'x-visible': false,
+                  'x-reactions': {
+                    dependencies: ['..valueType.type'],
+                    fulfill: {
+                      state: {
+                        visible: "{{['float','double'].includes($deps[0])}}",
+                      },
+                    },
+                  },
+                },
+
+                json: {
+                  type: 'string',
+                  title: 'JSON对象',
+                  'x-visible': false,
+                  'x-decorator': 'FormItem',
+                  'x-component': 'MetadataParam',
+                  'x-reactions': {
+                    dependencies: ['.valueType.type'],
+                    fulfill: {
+                      state: {
+                        visible: "{{['object'].includes($deps[0])}}",
+                      },
+                    },
+                  },
+                },
+              },
+            },
+            remove: {
+              type: 'void',
+              'x-decorator': 'FormItem',
+              'x-component': 'ArrayItems.Remove',
+            },
+          },
+        },
+        properties: {
+          add: {
+            type: 'void',
+            title: '添加参数',
+            'x-component': 'ArrayItems.Addition',
+          },
+        },
+      },
+    },
+  };
+
+  return (
+    <Form form={form} layout={'vertical'} size={'small'}>
+      <SchemaField schema={schema} />
+    </Form>
+  );
+});
+export default MetadataParam;

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

@@ -1,4 +1,4 @@
-import { Drawer } from 'antd';
+import { Button, Drawer } from 'antd';
 import { createSchemaField } from '@formily/react';
 import MetadataModel from '@/pages/device/Product/Detail/Metadata/Base/model';
 import { createForm } from '@formily/core';
@@ -27,6 +27,7 @@ import { service } from '@/pages/device/Product';
 import { Store } from 'jetlinks-store';
 import type { UnitType } from '@/pages/device/Product/typings';
 import { useIntl } from 'umi';
+import MetadataParam from '@/components/MetadataParam';
 
 const Edit = () => {
   const form = createForm({
@@ -44,6 +45,7 @@ const Edit = () => {
       ArrayItems,
       Space,
       FormLayout,
+      MetadataParam,
     },
   });
 
@@ -91,6 +93,25 @@ const Edit = () => {
           },
         },
       },
+      'valueType.elementType.type': {
+        title: '元素类型',
+        'x-decorator': 'FormItem',
+        'x-component': 'Select',
+        enum: DataTypeList,
+        'x-reactions': {
+          dependencies: ['valueType.type'],
+          fulfill: {
+            state: {
+              visible: "{{['array'].includes($deps[0])}}",
+            },
+          },
+        },
+      },
+      jsonConfig: {
+        title: 'JSON对象',
+        'x-decorator': 'FormItem',
+        'x-component': 'MetadataParam',
+      },
       enumConfig: {
         title: '枚举项',
         type: 'array',
@@ -494,6 +515,7 @@ const Edit = () => {
 
   useEffect(() => {
     getUnits().then((data) => {
+      Store.set('units', data);
       setUnits(data);
     });
   }, [getUnits]);
@@ -521,6 +543,15 @@ const Edit = () => {
       <Form form={form} layout="vertical" size="small">
         <SchemaField schema={metadataTypeMapping[MetadataModel.type].schema} />
       </Form>
+      <Button
+        onClick={async () => {
+          const data = await form.submit();
+          console.log(data, '提交数据');
+        }}
+      >
+        {' '}
+        获取数据
+      </Button>
     </Drawer>
   );
 };