ol-base-components 1.3.1 → 1.5.0

package/README.md

@@ -19,8 +19,10 @@ npm install ol-base-components
 
 ## 使用说明
 
-在您的 Vue 项目中，您需要在入口文件（通常是 `main.js` 或 `app.js`）中导入并使用该组件库：
+- **基本用法**：通用常规组件，ol-table   ol-search   ol-dialogTemplate
+- **带 Swagger 支持的用法**：适用于需要从 Swagger API 获取数据的场景。通过传入 `swaggerUrl` 和 `successSwaggerCallback`，可以在成功获取 Swagger 数据后初始化 Vue 实例。
 
+### 1. 基本用法
 ```javascript
 // main.js
 import Vue from "vue";
@@ -35,6 +37,29 @@ new Vue({
 }).$mount("#app");
 ```
 
+### 2. 带 Swagger 支持的用法
+```javascript
+// main.js
+import Vue from "vue";
+import App from "./App.vue";
+import OlBaseComponents from "ol-base-components"; // 导入组件库
+
+// 使用组件库
+Vue.use(OlBaseComponents, {
+  swaggerUrl: "http://192.168.xxx.xxx:20019/swagger/v1/swagger.json",
+  successSwaggerCallback: () => {
+    new Vue({
+      el: "#app",
+      router,
+      store,
+      i18n,
+      render: h => h(App)
+    });
+  }
+});
+```
+
+
 ## 组件示例
 
 ### 搜索框组件

package/package.json

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

package/src/package/index.js

@@ -115,6 +115,64 @@ const components = [OlTable, OlSearch, Dialog];
 const SWAGGER_DATA_KEY = "swaggerData"; // 存储 Swagger 数据的键
 let isLoggedIn = false; // 用于跟踪用户登录状态
 
+// 自定义加载指示器
+function showLoading() {
+  // 创建样式
+  const style = document.createElement("style");
+  style.innerHTML = `
+     @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+    #loading-spinner {
+      width: 50px; /* 调整大小 */
+      height: 50px; /* 调整大小 */
+      border: 8px solid rgba(255, 255, 255, 0.3);
+      border-top: 8px solid #a8c8e0; /* 与背景色协调的颜色 */
+      border-radius: 50%;
+      animation: spin 1s linear infinite; /* 添加旋转动画 */
+      margin-bottom: 10px; /* 图标和文本之间的间距 */
+    }
+    #loading {
+      background: linear-gradient(135deg, #a8c8e0, #f0f4f8); /* 更柔和的渐变背景 */
+      color: #333; /* 文本颜色 */
+    }
+   `;
+  document.head.appendChild(style);
+
+  // 创建加载指示器
+  const loadingDiv = document.createElement("div");
+  loadingDiv.id = "loading";
+  loadingDiv.style.position = "fixed";
+  loadingDiv.style.top = "0";
+  loadingDiv.style.left = "0";
+  loadingDiv.style.width = "100%";
+  loadingDiv.style.height = "100%";
+  loadingDiv.style.display = "flex"; // 使用 flexbox
+  loadingDiv.style.flexDirection = "column"; // 设置为上下排列
+  loadingDiv.style.justifyContent = "center"; // 垂直居中
+  loadingDiv.style.alignItems = "center"; // 水平居中
+
+  // 创建旋转的加载图标
+  const spinner = document.createElement("div");
+  spinner.id = "loading-spinner";
+  loadingDiv.appendChild(spinner);
+
+  // 添加文本
+  const loadingText = document.createElement("div");
+  loadingText.innerText = "初始化数据中，请耐心等待...";
+  loadingDiv.appendChild(loadingText);
+
+  document.body.appendChild(loadingDiv);
+}
+
+function hideLoading() {
+  const loadingDiv = document.getElementById("loading");
+  if (loadingDiv) {
+    document.body.removeChild(loadingDiv);
+  }
+}
+
 const install = async function (
   Vue,
   options = {
@@ -126,7 +184,6 @@ const install = async function (
   components.map((item) => {
     Vue.component(`ol-${item.name}`, item);
   });
-
   // 检查登录状态
   const isLoggedIn = getLoginStatus();
 
@@ -163,6 +220,7 @@ const install = async function (
 
     // 用户未登录或缓存数据不存在，重新请求 Swagger 数据
     try {
+      showLoading();
       const client = await SwaggerClient(options.swaggerUrl);
       const swaggerData = client.spec; // 获取 Swagger 数据
       await storeData(swaggerData); // 缓存数据到 IndexedDB
@@ -173,6 +231,7 @@ const install = async function (
         typeof options.successSwaggerCallback === "function"
       ) {
         options.successSwaggerCallback();
+        hideLoading();
       }
     } catch (error) {
       console.error("获取 Swagger 数据失败:", error);

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

@@ -404,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显示隐藏