ol-base-components 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol-base-components",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "private": false,
   "main": "src/package/index.js",
   "scripts": {

package/src/package/index.js

@@ -24,6 +24,86 @@ ${cyan}感谢使用我们的组件库，期待你的精彩应用！${reset}
 `);
 };
 
+const DB_NAME = "SwaggerDB";
+const DB_VERSION = 1;
+const STORE_NAME = "swaggerDataStore";
+const LOGIN_STATUS_KEY = "isLoggedIn"; // 存储登录状态的键
+
+// 打开数据库
+function openDatabase() {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+
+    request.onupgradeneeded = (event) => {
+      const db = event.target.result;
+      db.createObjectStore(STORE_NAME);
+    };
+
+    request.onsuccess = (event) => {
+      resolve(event.target.result);
+    };
+
+    request.onerror = (event) => {
+      reject(event.target.error);
+    };
+  });
+}
+
+// 存储数据
+function storeData(data) {
+  return openDatabase().then((db) => {
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction(STORE_NAME, "readwrite");
+      const store = transaction.objectStore(STORE_NAME);
+      store.put(data, "swaggerData"); // 使用 'swaggerData' 作为键
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = (event) => reject(event.target.error);
+    });
+  });
+}
+
+// 获取数据
+function getData() {
+  return openDatabase().then((db) => {
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction(STORE_NAME, "readonly");
+      const store = transaction.objectStore(STORE_NAME);
+      const request = store.get("swaggerData");
+
+      request.onsuccess = (event) => {
+        resolve(event.target.result);
+      };
+
+      request.onerror = (event) => {
+        reject(event.target.error);
+      };
+    });
+  });
+}
+
+// 清除数据
+function clearData() {
+  return openDatabase().then((db) => {
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction(STORE_NAME, "readwrite");
+      const store = transaction.objectStore(STORE_NAME);
+      store.delete("swaggerData"); // 删除存储的数据
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = (event) => reject(event.target.error);
+    });
+  });
+}
+
+// 存储登录状态
+function storeLoginStatus(isLoggedIn) {
+  localStorage.setItem(LOGIN_STATUS_KEY, isLoggedIn);
+}
+
+// 获取登录状态
+function getLoginStatus() {
+  return localStorage.getItem(LOGIN_STATUS_KEY) === "true";
+}
+
 export const SwaggerHandler = async (Vue, swaggerUrl) => {
   const client = await new SwaggerClient(swaggerUrl);
   console.log("client", client);
@@ -32,10 +112,14 @@ export const SwaggerHandler = async (Vue, swaggerUrl) => {
 
 const components = [OlTable, OlSearch, Dialog];
 
+const SWAGGER_DATA_KEY = "swaggerData"; // 存储 Swagger 数据的键
+let isLoggedIn = false; // 用于跟踪用户登录状态
+
 const install = async function (
   Vue,
   options = {
     swaggerUrl: "",
+    successSwaggerCallback: null,
   }
 ) {
   // 遍历所有组件
@@ -43,14 +127,68 @@ const install = async function (
     Vue.component(`ol-${item.name}`, item);
   });
 
+  // 检查登录状态
+  const isLoggedIn = getLoginStatus();
+
+  // 如果 $swagger 已经存在，直接返回
+  if (Vue.prototype.$swagger) {
+    if (
+      options.successSwaggerCallback &&
+      typeof options.successSwaggerCallback === "function"
+    ) {
+      options.successSwaggerCallback();
+    }
+    return; // 数据已加载，直接返回
+  }
+
   if (options && options.swaggerUrl) {
-    // "http://220.179.249.140:20019/swagger/v1/swagger.json"
-    const client = await SwaggerClient(options.swaggerUrl);
-    Vue.prototype.$swagger = { specification: client.spec };
+    // 检查 IndexedDB 中是否存在 Swagger 数据
+    if (isLoggedIn) {
+      try {
+        const cachedData = await getData();
+        if (cachedData) {
+          Vue.prototype.$swagger = { specification: cachedData };
+          if (
+            options.successSwaggerCallback &&
+            typeof options.successSwaggerCallback === "function"
+          ) {
+            options.successSwaggerCallback();
+          }
+          return; // 数据已加载，直接返回
+        }
+      } catch (error) {
+        console.error("获取缓存数据失败:", error);
+      }
+    }
+
+    // 用户未登录或缓存数据不存在，重新请求 Swagger 数据
+    try {
+      const client = await SwaggerClient(options.swaggerUrl);
+      const swaggerData = client.spec; // 获取 Swagger 数据
+      await storeData(swaggerData); // 缓存数据到 IndexedDB
+      Vue.prototype.$swagger = { specification: swaggerData };
+      storeLoginStatus(true); // 设置用户为已登录状态
+      if (
+        options.successSwaggerCallback &&
+        typeof options.successSwaggerCallback === "function"
+      ) {
+        options.successSwaggerCallback();
+      }
+    } catch (error) {
+      console.error("获取 Swagger 数据失败:", error);
+    }
   }
   consoleTooltip();
 };
 
+// 提供一个方法用于用户退出登录时调用
+export const OlLogout = async function () {
+  // 重置登录状态
+  storeLoginStatus(false); // 清除 localStorage 中的登录状态
+  await clearData(); // 清空 IndexedDB 中的缓存数据
+  Vue.prototype.$swagger = null; // 清空 Swagger 数据
+};
+
 // 判断是否引入文件
 export default install; //全局导入
 export { OlTable, OlSearch, Dialog }; //按需导入

package/src/package/table/src/index.vue

@@ -361,75 +361,8 @@ export default {
       return this.tableData.columns.filter((column) =>
         Object.keys(column).includes("show") ? column.show : true
       );
-
-      // const swaggerColumns = this.$swagger.specification.paths[this.url].get.responses["200"].content['application/json'].schema.properties.items.items.properties
-      // swaggerColumns.forEach(item => {
-      //   const tempItem = this.tableData.columns.find((e) => e.prop == item.prop)
-      //   tempItem ? tempItem = { ...item, ...tempItem } : this.tableData.columns.push(item)
-      // })
-
-      // // 一定加上selection,通过show显示隐藏
-      // const itemSelection = this.tableData.columns.find((item) => item.type == "selection");
-      // const hasSelection = this.tableData.options.selection;
-      // if (itemSelection) {
-      //   itemSelection.show = !!hasSelection;
-      // } else {
-      //   this.tableData.columns.unshift({
-      //     label: "",
-      //     minWidth: "",
-      //     type: "selection",
-      //     show: !!hasSelection,
-      //   });
-      // }
-
-      // return this.tableData.columns.filter((column) =>
-      //   Object.keys(column).includes("show") ? column.show : true
-      // );
     },
-    // bindTableColumns1() {
-    //   // 读取接口和类型获取表头数据
-    //   if (!this.$swagger) return this.tableData.columns.filter((column) =>
-    //     Object.keys(column).includes("show") ? column.show : true
-    //   );
-    //   const tableColumns = this.$swagger.specification.paths[this.url].get.responses["200"].content['application/json'].schema.properties.items.items.properties
-    //   let swaggerColumns = Object.keys(tableColumns).reduce((acc, key) => {
-    //     const column = tableColumns[key];
-    //     if (column.description) {
-    //       acc.push({
-    //         prop: key,
-    //         label: column.description,
-    //         minWidth: column.minWidth || "150px",
-    //         sortable: true,
-    //         show: true,
-    //         attrs: {},
-    //       })
-    //     }
-    //     return acc;
-    //   }, []);
-
-    //   this.tableData.columns.filter((column) =>
-    //     Object.keys(column).includes("show") ? column.show : true
-    //   );
 
-    //   this.tableData.columns.forEach(dataColumn => {
-    //     const tempIndex = swaggerColumns.findIndex((item) => item.prop == dataColumn.prop)
-    //     if (tempIndex == -1) {
-    //       swaggerColumns.push(dataColumn)
-    //     } else {
-    //       Object.assign(swaggerColumns[tempIndex], dataColumn)
-    //     }
-    //   })
-
-    //   // 如果options.selection有多选框直接加
-    //   swaggerColumns.unshift({
-    //     label: "",
-    //     minWidth: "",
-    //     type: "selection",
-    //     show: true,
-    //   });
-    //   console.log('表头数据', swaggerColumns)
-    //   return swaggerColumns
-    // },
     checkedTableList: {
       get() {
         // 返回选中的列名
@@ -471,9 +404,21 @@ export default {
   methods: {
     init() {
       const swaggerColumns = this.$swagger.specification.paths[this.url].get.responses["200"].content['application/json'].schema.properties.items.items.properties
-      swaggerColumns.forEach(item => {
-        const tempItem = this.tableData.columns.find((e) => e.prop == item.prop)
-        tempItem ? tempItem = { ...item, ...tempItem } : this.tableData.columns.push(item)
+
+      Object.keys(swaggerColumns).forEach(key => {
+        const item = swaggerColumns[key]
+        let tempItem = this.tableData.columns.find((e) => e.prop == key)
+        if (tempItem) {
+          tempItem = { ...item, ...tempItem }
+        } else if (item.description) {
+          this.tableData.columns.push({
+            prop: key,
+            label: item.description,
+            show: true,
+            sortable: false,
+            attrs: {}
+          })
+        }
       })
 
       // 一定加上selection,通过show显示隐藏