fix: 修改物模型快速导入

src/pages/device/components/Metadata/Cat/index.tsx

@@ -1,8 +1,8 @@
-import { Button, Drawer, message, Space, Tabs } from 'antd';
+import { Button, Drawer, message, Space, Spin, Tabs } from 'antd';
 import { useEffect, useState } from 'react';
 import { productModel, service } from '@/pages/device/Product';
 import { observer } from '@formily/react';
-import { InstanceModel } from '@/pages/device/Instance';
+import { InstanceModel, service as deviceService } from '@/pages/device/Instance';
 import { useLocation } from 'umi';
 import InstanceService from '@/pages/device/Instance/service';
 import { downloadObject } from '@/utils/util';
@@ -24,14 +24,28 @@ const Cat = observer((props: Props) => {
   };
   const metadata = metadataMap[props.type];
   const [value, setValue] = useState(metadata);
+  const [loading, setLoading] = useState<boolean>(false);
   const _path = location.pathname.split('/');
   const id = _path[_path.length - 1];
 
   useEffect(() => {
     if (props.visible) {
-      setValue(metadata);
+      setLoading(true);
+      if (props.type === 'device') {
+        deviceService.detail(id).then((resp) => {
+          setLoading(false);
+          InstanceModel.current = resp.result;
+          setValue(resp.result.metadata);
+        });
+      } else {
+        service.detail(id).then((resp) => {
+          setLoading(false);
+          productModel.current = resp.result;
+          setValue(resp.result.metadata);
+        });
+      }
     }
-  }, [props.visible]);
+  }, [props.visible, props.type]);
 
   useEffect(() => {
     service.codecs().subscribe({
@@ -97,34 +111,36 @@ const Cat = observer((props: Props) => {
         </Space>
       }
     >
-      <div style={{ background: '#F6F6F6' }}>
-        <p style={{ padding: 10, color: 'rgba(0, 0, 0, 0.55)' }}>
-          物模型是对设备在云端的功能描述，包括设备的属性、服务和事件。物联网平台通过定义一种物的描述语言来描述物模型，称之为
-          TSL（即 Thing Specification Language），采用 JSON 格式，您可以根据 TSL
-          组装上报设备的数据。您可以导出完整物模型，用于云端应用开发。
-        </p>
-      </div>
-      <Tabs onChange={convertMetadata}>
-        {codecs?.map((item) => (
-          <Tabs.TabPane tab={item.name} tabKey={item.id} key={item.id}>
-            <div style={{ border: '1px solid #eee', height: 670, width: 650 }}>
-              <JMonacoEditor
-                height={'100%'}
-                theme="vs"
-                language="json"
-                key={item.id}
-                value={value}
-                editorDidMount={(editor: any) => {
-                  editor.getAction('editor.action.formatDocument').run();
-                  editor.onDidScrollChange?.(() => {
+      <Spin spinning={loading}>
+        <div style={{ background: '#F6F6F6' }}>
+          <p style={{ padding: 10, color: 'rgba(0, 0, 0, 0.55)' }}>
+            物模型是对设备在云端的功能描述，包括设备的属性、服务和事件。物联网平台通过定义一种物的描述语言来描述物模型，称之为
+            TSL（即 Thing Specification Language），采用 JSON 格式，您可以根据 TSL
+            组装上报设备的数据。您可以导出完整物模型，用于云端应用开发。
+          </p>
+        </div>
+        <Tabs onChange={convertMetadata}>
+          {codecs?.map((item) => (
+            <Tabs.TabPane tab={item.name} tabKey={item.id} key={item.id}>
+              <div style={{ border: '1px solid #eee', height: 670, width: 650 }}>
+                <JMonacoEditor
+                  height={'100%'}
+                  theme="vs"
+                  language="json"
+                  key={item.id}
+                  value={value}
+                  editorDidMount={(editor: any) => {
                     editor.getAction('editor.action.formatDocument').run();
-                  });
-                }}
-              />
-            </div>
-          </Tabs.TabPane>
-        ))}
-      </Tabs>
+                    editor.onDidScrollChange?.(() => {
+                      editor.getAction('editor.action.formatDocument').run();
+                    });
+                  }}
+                />
+              </div>
+            </Tabs.TabPane>
+          ))}
+        </Tabs>
+      </Spin>
     </Drawer>
   );
 });

src/pages/device/components/Metadata/Import/index.tsx

@@ -17,6 +17,7 @@ import { InstanceModel } from '@/pages/device/Instance';
 import _ from 'lodash';
 import type { DeviceMetadata } from '@/pages/device/Product/typings';
 import MetadataAction from '@/pages/device/components/Metadata/DataBaseAction';
+import { useMemo, useState } from 'react';
 interface Props {
   visible: boolean;
   close: () => void;
@@ -25,9 +26,14 @@ interface Props {
 
 const Import = (props: Props) => {
   const param = useParams<{ id: string }>();
-  const form = createForm({
-    initialValues: {},
-  });
+  const form = useMemo(
+    () =>
+      createForm({
+        initialValues: {},
+      }),
+    [props.visible],
+  );
+  const [loading, setLoading] = useState<boolean>(false);
 
   const SchemaField = createSchemaField({
     components: {
@@ -282,32 +288,22 @@ const Import = (props: Props) => {
 
   const handleImport = async () => {
     const data = (await form.submit()) as any;
-    const checkProperties = (metadataJson: string) => {
-      const metadata = JSON.parse(metadataJson.metadata);
-      return (
-        !!metadata &&
-        !!metadata?.properties &&
-        !!metadata?.events &&
-        !!metadata?.functions &&
-        !!metadata?.tags
-      );
-    };
-
+    setLoading(true);
     if (data.metadata === 'alink') {
       service.convertMetadata('from', 'alink', data.import).subscribe({
         next: async (meta) => {
           const metadata = JSON.stringify(operateLimits(meta));
-          // eslint-disable-next-line @typescript-eslint/no-throw-literal
-          if (!checkProperties(metadata)) throw 'error';
           if (props?.type === 'device') {
             await deviceService.saveMetadata(param.id, metadata);
           } else {
             await service.modify(param.id, { metadata: metadata });
           }
+          setLoading(false);
           MetadataAction.insert(JSON.parse(metadata || '{}'));
           onlyMessage('导入成功');
         },
         error: () => {
+          setLoading(false);
           onlyMessage('发生错误!', 'error');
         },
       });
@@ -317,6 +313,13 @@ const Import = (props: Props) => {
     } else {
       try {
         const _object = JSON.parse(data[props?.type === 'device' ? 'import' : data?.type] || '{}');
+        if (
+          !(!!_object?.properties || !!_object?.events || !!_object?.functions || !!_object?.tags)
+        ) {
+          onlyMessage('物模型数据不正确', 'error');
+          setLoading(false);
+          return;
+        }
         const params = {
           id: param.id,
           metadata: JSON.stringify(operateLimits(_object as DeviceMetadata)),
@@ -328,17 +331,14 @@ const Import = (props: Props) => {
         } else {
           resp = await service.modify(param.id, params);
         }
+        setLoading(false);
         if (resp.status === 200) {
           if (props?.type === 'device') {
             const metadata: DeviceMetadata = JSON.parse(paramsDevice || '{}');
-            // eslint-disable-next-line @typescript-eslint/no-throw-literal
-            if (!checkProperties(metadata)) throw 'error';
             MetadataAction.insert(metadata);
             onlyMessage('导入成功');
           } else {
             const metadata: DeviceMetadata = JSON.parse(params?.metadata || '{}');
-            // eslint-disable-next-line @typescript-eslint/no-throw-literal
-            if (!checkProperties(metadata)) throw 'error';
             MetadataAction.insert(metadata);
             onlyMessage('导入成功');
           }
@@ -347,6 +347,7 @@ const Import = (props: Props) => {
         Store.set(SystemConst.REFRESH_METADATA_TABLE, true);
         props.close();
       } catch (e) {
+        setLoading(false);
         onlyMessage(e === 'error' ? '物模型数据不正确' : '上传json格式的物模型文件', 'error');
       }
     }
@@ -359,6 +360,7 @@ const Import = (props: Props) => {
       visible={props.visible}
       onCancel={() => props.close()}
       onOk={handleImport}
+      confirmLoading={loading}
     >
       <div style={{ background: 'rgb(236, 237, 238)' }}>
         <p style={{ padding: 10 }}>

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

@@ -112,10 +112,10 @@ const Save = (props: Props) => {
               placeholder: '请输入r2bdc或者jdbc连接地址，示例：r2dbc:mysql://127.0.0.1:3306/test',
             },
             'x-validator': [
-              {
-                max: 64,
-                message: '最多可输入64个字符',
-              },
+              // {
+              //   max: 64,
+              //   message: '最多可输入64个字符',
+              // },
               {
                 required: true,
                 message: '请输入URL',
@@ -144,10 +144,10 @@ const Save = (props: Props) => {
               placeholder: '请输入管理地址，示例：http://localhost:15672',
             },
             'x-validator': [
-              {
-                max: 64,
-                message: '最多可输入64个字符',
-              },
+              // {
+              //   max: 64,
+              //   message: '最多可输入64个字符',
+              // },
               {
                 required: true,
                 message: '请输入管理地址',
@@ -176,10 +176,10 @@ const Save = (props: Props) => {
               placeholder: '请输入链接地址，示例：localhost:5672',
             },
             'x-validator': [
-              {
-                max: 64,
-                message: '最多可输入64个字符',
-              },
+              // {
+              //   max: 64,
+              //   message: '最多可输入64个字符',
+              // },
               {
                 required: true,
                 message: '请输入链接地址',