locale(device): productDetail translate

src/components/Metadata/ConfigParam/index.tsx

@@ -0,0 +1,65 @@
+import { Editable, FormItem, FormLayout, Input, Select } from '@formily/antd';
+import type { ISchema } from '@formily/react';
+import { createSchemaField } from '@formily/react';
+
+interface Props {
+  config: MetadataConfig[];
+}
+
+const ConfigParam = (props: Props) => {
+  const SchemaField = createSchemaField({
+    components: {
+      FormItem,
+      Input,
+      Select,
+      Editable,
+      FormLayout,
+    },
+  });
+
+  const formatConfig = (config: MetadataConfig[]) => {
+    if (!config) return {};
+    return config.reduce((acc, t) => {
+      const { properties } = t;
+      const configSchema = properties.reduce((cur, i) => {
+        return {
+          ...cur,
+          [i.property]: {
+            title: i.name,
+            'x-decorator': 'FormItem',
+            // 判断type 类型
+            'x-component': 'Select',
+            enum: i.type.elements.map((e) => ({
+              label: e.text,
+              value: e.value,
+            })),
+          },
+        };
+      }, {});
+      return {
+        ...acc,
+        [t.name]: {
+          type: 'void',
+          title: t.name,
+          'x-component': 'FormLayout',
+          'x-component-props': {
+            layout: 'vertical',
+          },
+          'x-decorator': 'Editable.Popover',
+          'x-decorator-props': {
+            className: 'config-array',
+            placement: 'left',
+          },
+          properties: configSchema,
+        },
+      };
+    }, {});
+  };
+
+  const schema: ISchema = {
+    type: 'object',
+    properties: formatConfig(props.config),
+  };
+  return <SchemaField schema={schema} />;
+};
+export default ConfigParam;

src/components/Metadata/ConfigParam/typing.d.ts

@@ -0,0 +1,21 @@
+type MetadataConfig = {
+  name: string;
+  description: string;
+  scopes: string[];
+  properties: {
+    property: string;
+    name: string;
+    scopes: [];
+    type: {
+      elements: {
+        value: string;
+        text: string;
+        description: string;
+      }[];
+      multi: boolean;
+      name: string;
+      id: string;
+      type: string;
+    };
+  }[];
+};

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

@@ -1,6 +1,7 @@
 import { Button, Drawer } from 'antd';
 import { createSchemaField } from '@formily/react';
 import MetadataModel from '@/pages/device/Product/Detail/Metadata/Base/model';
+import type { Field, IFieldState } from '@formily/core';
 import { createForm } from '@formily/core';
 import {
   FormLayout,
@@ -23,14 +24,17 @@ import {
   PropertySource,
 } from '@/pages/device/data';
 import { useCallback, useEffect, useState } from 'react';
-import { service } from '@/pages/device/Product';
+import { productModel, service } from '@/pages/device/Product';
 import { Store } from 'jetlinks-store';
 import type { UnitType } from '@/pages/device/Product/typings';
-import { useIntl } from 'umi';
+
 import JsonParam from '@/components/Metadata/JsonParam';
 import ArrayParam from '@/components/Metadata/ArrayParam';
 import EnumParam from '@/components/Metadata/EnumParam';
 import BooleanEnum from '@/components/Metadata/BooleanParam';
+import ConfigParam from '@/components/Metadata/ConfigParam';
+import { useIntl } from '@@/plugin-locale/localeExports';
+import { lastValueFrom } from 'rxjs';
 
 const Edit = () => {
   const form = createForm({
@@ -52,6 +56,35 @@ const Edit = () => {
       ArrayParam,
       EnumParam,
       BooleanEnum,
+      ConfigParam,
+    },
+    scope: {
+      async asyncOtherConfig(field: Field) {
+        const typeField = field.query('..valueType.type').take() as IFieldState;
+        const idField = field.query('..id').take() as IFieldState;
+        if (!typeField || !idField) return;
+        const type = typeField.value;
+        const id = idField.value;
+        // 获取配置
+        const productId = productModel.current?.id;
+        if (!productId || !id || !type) return;
+        const config = (await lastValueFrom(
+          service.getMetadataConfig({
+            deviceId: productId,
+            metadata: {
+              id,
+              type: 'property',
+              dataType: type,
+            },
+          }),
+        )) as unknown[];
+        field.setState({
+          visible: config.length > 0,
+        });
+        field.setComponentProps({
+          config,
+        });
+      },
     },
   });
 
@@ -243,6 +276,15 @@ const Edit = () => {
               },
             ],
           },
+          // 存储配置
+          configConfig: {
+            type: 'void',
+            title: '其他配置',
+            'x-visible': false,
+            'x-decorator': 'FormItem',
+            'x-component': 'ConfigParam',
+            'x-reactions': '{{asyncOtherConfig}}',
+          },
         },
       },
 
@@ -377,7 +419,7 @@ const Edit = () => {
   };
 
   const metadataTypeMapping: Record<string, { name: string; schema: ISchema }> = {
-    property: {
+    properties: {
       name: '属性',
       schema: propertySchema,
     },
@@ -385,11 +427,11 @@ const Edit = () => {
       name: '事件',
       schema: eventSchema,
     },
-    function: {
+    functions: {
       name: '功能',
       schema: functionSchema,
     },
-    tag: {
+    tags: {
       name: '标签',
       schema: tagSchema,
     },
@@ -420,7 +462,7 @@ const Edit = () => {
 
   return (
     <Drawer
-      width="20vw"
+      width="25vw"
       visible
       title={`${intl.formatMessage({
         id: `pages.data.option.${MetadataModel.action}`,
@@ -435,18 +477,21 @@ const Edit = () => {
       }}
       destroyOnClose
       zIndex={1000}
+      footer={
+        <Button
+          onClick={async () => {
+            // const data = await form.submit() as MetadataItem;
+            // const {type} = MetadataModel;
+            // saveMetadata(type, data);
+          }}
+        >
+          获取数据
+        </Button>
+      }
     >
       <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>
   );
 };

src/pages/device/Product/Detail/Metadata/Base/columns.ts

@@ -66,9 +66,9 @@ const TagColumns: ProColumns<MetadataItem>[] = BaseColumns.concat([
 ]);
 
 const MetadataMapping = new Map<string, ProColumns<MetadataItem>[]>();
-MetadataMapping.set('property', PropertyColumns);
+MetadataMapping.set('properties', PropertyColumns);
 MetadataMapping.set('events', EventColumns);
-MetadataMapping.set('tag', TagColumns);
-MetadataMapping.set('function', FunctionColumns);
+MetadataMapping.set('tags', TagColumns);
+MetadataMapping.set('functions', FunctionColumns);
 
 export default MetadataMapping;

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

@@ -3,7 +3,7 @@ import ProTable from '@jetlinks/pro-table';
 import { useCallback, useEffect, useState } from 'react';
 import { useParams } from 'umi';
 import DB from '@/db';
-import type { MetadataItem } from '@/pages/device/Product/typings';
+import type { MetadataItem, MetadataType } from '@/pages/device/Product/typings';
 import MetadataMapping from '@/pages/device/Product/Detail/Metadata/Base/columns';
 import { Button, Popconfirm, Tooltip } from 'antd';
 import { EditOutlined, MinusOutlined, PlusOutlined } from '@ant-design/icons';
@@ -13,7 +13,7 @@ import MetadataModel from '@/pages/device/Product/Detail/Metadata/Base/model';
 import { useIntl } from '@@/plugin-locale/localeExports';
 
 interface Props {
-  type: 'events' | 'function' | 'property' | 'tag';
+  type: MetadataType;
 }
 
 const BaseMetadata = observer((props: Props) => {

src/pages/device/Product/Detail/Metadata/Base/model.ts

@@ -1,10 +1,10 @@
 import { model } from '@formily/reactive';
-import type { MetadataItem } from '@/pages/device/Product/typings';
+import type { MetadataItem, MetadataType } from '@/pages/device/Product/typings';
 
 type MetadataModelType = {
   item: MetadataItem | unknown;
   edit: boolean;
-  type: 'events' | 'function' | 'property' | 'tag';
+  type: MetadataType;
   action: 'edit' | 'add';
 };
 const MetadataModel = model<MetadataModelType>({

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

@@ -31,9 +31,9 @@ const Metadata = observer(() => {
           id: 'pages.device.productDetail.metadata.attributeDefinition',
           defaultMessage: '属性定义',
         })}
-        key="property"
+        key="properties"
       >
-        <BaseMetadata type={'property'} />
+        <BaseMetadata type={'properties'} />
       </Tabs.TabPane>
       <Tabs.TabPane
         tab={intl.formatMessage({
@@ -42,7 +42,7 @@ const Metadata = observer(() => {
         })}
         key="functions"
       >
-        <BaseMetadata type={'function'} />
+        <BaseMetadata type={'functions'} />
       </Tabs.TabPane>
       <Tabs.TabPane
         tab={intl.formatMessage({
@@ -58,9 +58,9 @@ const Metadata = observer(() => {
           id: 'pages.device.productDetail.metadata.labelDefinition',
           defaultMessage: '标签定义',
         })}
-        key="tag"
+        key="tags"
       >
-        <BaseMetadata type={'tag'} />
+        <BaseMetadata type={'tags'} />
       </Tabs.TabPane>
     </Tabs>
   );

src/pages/device/Product/Detail/index.tsx

@@ -47,9 +47,9 @@ const ProductDetail = observer(() => {
 
         DB.updateSchema({
           [`${param.id}-events`]: 'id,name',
-          [`${param.id}-property`]: 'id,name',
-          [`${param.id}-function`]: 'id,name',
-          [`${param.id}-tag`]: 'id,name',
+          [`${param.id}-properties`]: 'id,name',
+          [`${param.id}-functions`]: 'id,name',
+          [`${param.id}-tags`]: 'id,name',
         })
           .then(() => {
             /// 应该先判断是否存在数据
@@ -57,15 +57,15 @@ const ProductDetail = observer(() => {
             EventTable.clear().then(() => {
               EventTable.bulkAdd(metadata.events || []);
             });
-            const PropertyTable = DB.getDB().table(`${param.id}-property`);
+            const PropertyTable = DB.getDB().table(`${param.id}-properties`);
             PropertyTable.clear().then(() => {
               PropertyTable.bulkAdd(metadata.properties || []);
             });
-            const FunctionTable = DB.getDB().table(`${param.id}-function`);
+            const FunctionTable = DB.getDB().table(`${param.id}-functions`);
             FunctionTable.clear().then(() => {
               FunctionTable.bulkAdd(metadata.functions || []);
             });
-            const TagTable = DB.getDB().table(`${param.id}-tag`);
+            const TagTable = DB.getDB().table(`${param.id}-tags`);
             TagTable.clear().then(() => {
               TagTable.bulkAdd(metadata.tags || []);
             });
@@ -80,9 +80,9 @@ const ProductDetail = observer(() => {
       // 删除表是把index 设置为空
       DB.updateSchema({
         [`${param.id}-events`]: null,
-        [`${param.id}-property`]: null,
-        [`${param.id}-function`]: null,
-        [`${param.id}-tag`]: null,
+        [`${param.id}-properties`]: null,
+        [`${param.id}-functions`]: null,
+        [`${param.id}-tags`]: null,
       });
     };
   }, [param.id]);

src/pages/device/Product/service.ts

@@ -1,5 +1,5 @@
 import BaseService from '@/utils/BaseService';
-import type { ProductItem } from '@/pages/device/Product/typings';
+import type { MetadataType, ProductItem } from '@/pages/device/Product/typings';
 import { request } from 'umi';
 import SystemConst from '@/utils/const';
 import { concatMap, defer, from, toArray } from 'rxjs';
@@ -39,7 +39,7 @@ class Service extends BaseService<ProductItem> {
   public getMetadataConfig = (params: {
     deviceId: string;
     metadata: {
-      type: 'function' | 'property' | 'events' | 'tag';
+      type: MetadataType | 'property';
       id: string;
       dataType: string;
     };

src/pages/device/Product/typings.d.ts

@@ -40,6 +40,8 @@ export type ConfigMetadata = {
   properties: ConfigProperty[];
 };
 
+export type MetadataType = 'events' | 'functions' | 'properties' | 'tags';
+
 export type DeviceMetadata = {
   events: Partial<EventMetadata>[];
   properties: Partial<PropertyMetadata>[];