feat(form): form validator

src/pages/device/components/Metadata/Base/Edit/index.tsx

@@ -27,7 +27,7 @@ import { useMemo } from 'react';
 import { productModel } from '@/pages/device/Product';
 import { service } from '@/pages/device/components/Metadata';
 import { Store } from 'jetlinks-store';
-import type { DeviceMetadata, MetadataItem } from '@/pages/device/Product/typings';
+import type { MetadataItem } from '@/pages/device/Product/typings';
 
 import JsonParam from '@/components/Metadata/JsonParam';
 import ArrayParam from '@/components/Metadata/ArrayParam';
@@ -43,6 +43,7 @@ import { useParams } from 'umi';
 import { InstanceModel } from '@/pages/device/Instance';
 import FRuleEditor from '@/components/FRuleEditor';
 import { action } from '@formily/reactive';
+import { updateMetadata } from '@/utils/metadata';
 
 interface Props {
   type: 'product' | 'device';
@@ -322,6 +323,16 @@ const Edit = observer((props: Props) => {
       'x-component': 'Input',
       'x-disabled': MetadataModel.action === 'edit',
       'x-index': 0,
+      'x-validator': [
+        {
+          max: 64,
+          message: '最多可输入64个字符',
+        },
+        {
+          required: true,
+          message: '请输入ID',
+        },
+      ],
     },
     name: {
       title: intl.formatMessage({
@@ -332,6 +343,16 @@ const Edit = observer((props: Props) => {
       'x-decorator': 'FormItem',
       'x-component': 'Input',
       'x-index': 1,
+      'x-validator': [
+        {
+          max: 64,
+          message: '最多可输入64个字符',
+        },
+        {
+          required: true,
+          message: '请输入姓名',
+        },
+      ],
     },
     description: {
       title: intl.formatMessage({
@@ -341,6 +362,12 @@ const Edit = observer((props: Props) => {
       'x-decorator': 'FormItem',
       'x-component': 'Input.TextArea',
       'x-index': 100,
+      'x-validator': [
+        {
+          max: 200,
+          message: '最多可输入200个字符',
+        },
+      ],
     },
   } as any;
   const propertySchema: ISchema = {
@@ -678,26 +705,37 @@ const Edit = observer((props: Props) => {
 
     if (!typeMap.get(props.type)) return;
 
-    const metadata = JSON.parse(typeMap.get(props.type).metadata || '{}') as DeviceMetadata;
-    const config = (metadata[type] || []) as MetadataItem[];
-    const index = config.findIndex((item) => item.id === params.id);
-    if (index > -1) {
-      config[index] = params;
-      DB.getDB().table(`${type}`).update(params.id, params);
-    } else {
-      config.push(params);
-      DB.getDB().table(`${type}`).add(params, params.id);
-    }
+    // const metadata = JSON.parse(typeMap.get(props.type).metadata || '{}') as DeviceMetadata;
+    // const config = (metadata[type] || []) as MetadataItem[];
+    // const index = config.findIndex((item) => item.id === params.id);
+    // if (index > -1) {
+    //   config[index] = params;
+    //   DB.getDB().table(`${type}`).update(params.id, params);
+    // } else {
+    //   config.push(params);
+    //   DB.getDB().table(`${type}`).add(params, params.id);
+    // }
+
+    const updateDB = (t: 'add' | 'update', item: MetadataItem) => {
+      switch (t) {
+        case 'add':
+          DB.getDB().table(`${type}`).add(item, item.id);
+          return;
+        case 'update':
+          DB.getDB().table(`${type}`).update(item.id, item);
+          return;
+      }
+    };
 
+    const _data = updateMetadata(type, [params], typeMap.get(props.type), updateDB);
     if (props.type === 'product') {
-      const product = typeMap.get('product');
-      // product.metadata = JSON.stringify(metadata);
+      // const product = typeMap.get('product');
       // @ts-ignore
-      metadata[type] = config;
-      product.metadata = JSON.stringify(metadata);
-      saveMap.set('product', service.saveProductMetadata(product));
+      // metadata[type] = config;
+      // product.metadata = JSON.stringify(metadata);
+      saveMap.set('product', service.saveProductMetadata(_data));
     } else {
-      saveMap.set('device', service.saveDeviceMetadata(param.id, metadata));
+      saveMap.set('device', service.saveDeviceMetadata(param.id, { metadata: _data.metadata }));
     }
 
     const result = await saveMap.get(props.type);

src/pages/system/User/Save/index.tsx

@@ -5,9 +5,9 @@ import { createForm } from '@formily/core';
 import { createSchemaField } from '@formily/react';
 import React, { useEffect, useState } from 'react';
 import * as ICONS from '@ant-design/icons';
+import { PlusOutlined } from '@ant-design/icons';
 import { Form, FormItem, Input, Password, Select, Switch, TreeSelect } from '@formily/antd';
 import type { ISchema } from '@formily/json-schema';
-import { PlusOutlined } from '@ant-design/icons';
 import { action } from '@formily/reactive';
 import type { Response } from '@/utils/typings';
 import { service } from '@/pages/system/User';
@@ -96,13 +96,29 @@ const Save = (props: Props) => {
         name: 'name',
         'x-validator': [
           {
-            max: 50,
-            message: '最多可输入50个字符',
+            max: 64,
+            message: '最多可输入64个字符',
           },
           {
             required: true,
             message: '请输入姓名',
           },
+          {
+            triggerType: 'onBlur',
+            validator: (value: string) => {
+              return new Promise((resolve) => {
+                service
+                  .validateField('username', value)
+                  .then((resp) => {
+                    console.log(resp);
+                    resolve('');
+                  })
+                  .catch(() => {
+                    return '验证失败!';
+                  });
+              });
+            },
+          },
         ],
         // required: true,
       },

src/pages/system/User/serivce.ts

@@ -36,6 +36,12 @@ class Service extends BaseService<UserItem> {
       data,
     });
   };
+
+  validateField = (type: 'username' | 'password', name: string) =>
+    request(`/${SystemConst.API_BASE}/user/${type}/_validate`, {
+      method: 'POST',
+      data: name,
+    });
 }
 
 export default Service;