fix(indexedDB): Modify create table logic

src/app.tsx

@@ -130,6 +130,24 @@ export const request: RequestConfig = {
       history.push('/user/login');
       return;
     }
+    if (response.status === 400) {
+      response.text().then((resp: string) => {
+        if (resp) {
+          notification.error({
+            key: 'error',
+            message: JSON.parse(resp).message,
+          });
+        } else {
+          response.json().then((res: any) => {
+            notification.error({
+              key: 'error',
+              message: `请求错误：${res.message}`,
+            });
+          });
+        }
+      });
+      return response;
+    }
     if (!response) {
       notification.error({
         description: '您的网络发生异常，无法连接服务器',

src/db.ts

@@ -6,6 +6,15 @@ class DexieDB {
 
   constructor() {
     this.db = new Dexie(SystemConst.API_BASE);
+    // 第一版本考虑动态创建表。但开关数据库造成数据库状态错误。
+    // 所以改为初始化就创建系统所需要的表。
+    this.db.version(1).stores({
+      permission: 'id,name,status,describe,type',
+      events: 'id,name',
+      properties: 'id,name',
+      functions: 'id,name',
+      tags: 'id,name',
+    });
   }
 
   getDB() {
@@ -21,11 +30,13 @@ class DexieDB {
     return this.db;
   }
 
+  /**
+   * 会造成数据库状态错误
+   * @deprecated
+   * @param extendedSchema
+   */
   updateSchema = async (extendedSchema: Record<string, string | null>) => {
-    // 打开后才能获取正确的版本号
-    // console.log(database)
     await this.getDB().close();
-    // 关闭后才可以更改表结构
     await this.getDB()
       .version(this.db.verno + 1)
       .stores(extendedSchema);

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

@@ -58,7 +58,7 @@ const BaseMetadata = observer((props: Props) => {
   ];
 
   const initData = useCallback(async () => {
-    const result = await DB.getDB().table(`${param.id}-${type}`).toArray();
+    const result = await DB.getDB().table(`${type}`).toArray();
     setData(result);
   }, [param.id, type]);
 

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

@@ -168,7 +168,7 @@ const Import = (props: Props) => {
     const data = (await form.submit()) as any;
 
     if (data.metadata === 'alink') {
-      service.convertMetadata('from', 'alink', data.import).subscribe({
+      service.convertMetadata('to', 'alink', data.import).subscribe({
         next: async (meta) => {
           await service.modify(param.id, { metadata: JSON.stringify(meta) });
         },

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

@@ -48,65 +48,38 @@ const ProductDetail = observer(() => {
   };
   const param = useParams<{ id: string }>();
 
+  const EventTable = DB.getDB().table(`events`);
+  const PropertyTable = DB.getDB().table(`properties`);
+  const FunctionTable = DB.getDB().table(`functions`);
+  const TagTable = DB.getDB().table(`tags`);
+
   useEffect(() => {
     if (!productModel.current) {
       history.goBack();
     } else {
       service.getProductDetail(param.id).subscribe((data) => {
-        // 存储到数据库
-        // events  functions  properties  tags
-        // 数据库存储 按设备名称-物模型类别存储  如：yanshi-tags
         const metadata: DeviceMetadata = JSON.parse(data.metadata);
 
-        const schema = {
-          [`${param.id}-functions`]: null,
-          [`${param.id}-tags`]: null,
-          [`${param.id}-events`]: null,
-          [`${param.id}-properties`]: null,
-        };
-        // return 表存在未清除完的情况。所以加载前再清除一次。 考虑优化
-        DB.updateSchema(schema).then(() => {
-          DB.updateSchema({
-            [`${param.id}-events`]: 'id',
-            [`${param.id}-properties`]: 'id',
-            [`${param.id}-functions`]: 'id',
-            [`${param.id}-tags`]: 'id',
-          })
-            .then(() => {
-              /// 应该先判断是否存在数据
-              const EventTable = DB.getDB().table(`${param.id}-events`);
-              EventTable.clear().then(() => {
-                EventTable.bulkAdd(metadata.events || []);
-              });
-              const PropertyTable = DB.getDB().table(`${param.id}-properties`);
-              PropertyTable.clear().then(() => {
-                PropertyTable.bulkAdd(metadata.properties || []);
-              });
-              const FunctionTable = DB.getDB().table(`${param.id}-functions`);
-              FunctionTable.clear().then(() => {
-                FunctionTable.bulkAdd(metadata.functions || []);
-              });
-              const TagTable = DB.getDB().table(`${param.id}-tags`);
-              TagTable.clear().then(() => {
-                TagTable.bulkAdd(metadata.tags || []);
-              });
-            })
-            .catch((error) => {
-              console.error(error);
-              throw new Error('IndexDB add Data Error');
-            });
+        EventTable.clear().then(() => {
+          EventTable.bulkAdd(metadata.events || []);
+        });
+        PropertyTable.clear().then(() => {
+          PropertyTable.bulkAdd(metadata.properties || []);
+        });
+        FunctionTable.clear().then(() => {
+          FunctionTable.bulkAdd(metadata.functions || []);
+        });
+        TagTable.clear().then(() => {
+          TagTable.bulkAdd(metadata.tags || []);
         });
       });
     }
 
     return () => {
-      const schema = {
-        [`${param.id}-functions`]: null,
-        [`${param.id}-tags`]: null,
-        [`${param.id}-events`]: null,
-        [`${param.id}-properties`]: null,
-      };
-      DB.updateSchema(schema);
+      EventTable.clear();
+      PropertyTable.clear();
+      FunctionTable.clear();
+      TagTable.clear();
     };
   }, [param.id]);