ol-base-components 1.5.4 → 2.0.0

package/README.md

@@ -45,18 +45,17 @@ 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)
-    });
-  }
-});
+Vue.use(OlBaseComponents);
+
+//安装，可以在登录
+import {swaggerInstall} from "ol-base-components"; 
+swaggerInstall("http://192.168.xxx.xxx:20019/swagger/v1/swagger.json").then(() => {
+  // 成功获取swagger数据后加载页面， 这里可以写登录接口成功后执行的逻辑
+})
+
+// 卸载
+import { swaggerUnload } from "ol-base-components";
+swaggerUnload()
 ```
 
 
@@ -135,7 +134,9 @@ export default {
 
 ### 表格组件
 
-您可以在您的组件中使用表格组件组件，例如：
+##### 1. 您可以在您的组件中使用表格组件组件
+##### 2. 您可以在ol-table添加url参数接收完整的swagger地址，会自动帮您生成tableData.columns。您也可以在columns中添加，当prop相同时候，会自动合并，且columns权限大。
+例如：
 
 ```vue
 <template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol-base-components",
-  "version": "1.5.4",
+  "version": "2.0.0",
   "private": false,
   "main": "src/package/index.js",
   "scripts": {
@@ -9,8 +9,6 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@swagger-api/apidom-json-pointer": "^1.0.0-beta.44",
-    "@swagger-api/apidom-reference": "^1.0.0-beta.44",
     "core-js": "^3.8.3",
     "element-ui": "^2.15.14",
     "eslint": "^8.57.1",

package/src/App.vue

@@ -13,7 +13,13 @@
     <!-- url="/api/app/admission-info/paged-result" -->
 
     <div>table组件案例</div>
-    <ol-table
+    <ol-search
+      :form-search-data="formSearchData"
+      @handleSearch="handleSearch"
+      @handleReset="handleReset"
+      url="/api/app/admission-info/paged-result"
+    />
+    <!-- <ol-table
       :paginations="paginations"
       :empty-img="tableData.emptyImg"
       :btnlist="[]"
@@ -23,17 +29,17 @@
       @SelectionChange="SelectionChange"
       @handleSizeChange="handleSizeChange"
       @handleindexChange="handleindexChange"
-    ></ol-table>
+    ></ol-table> -->
     <el-button @click="handlePrint">接口</el-button>
   </div>
 </template>
 
 <script>
-import MyTable from "@/package/table/src/index.vue";
+// import MyTable from "@/package/table/src/index.vue";
 export default {
   name: "App",
   components: {
-    MyTable,
+    // MyTable,
   },
   data() {
     return {
@@ -177,6 +183,137 @@ export default {
         limit: 30, // 一页显示多少条
         pagetionShow: true,
       },
+
+      formSearchData: {
+        reset: true, // 重置
+        expendShow: true, // 展开
+        tableSearchSlice: 5,
+        value: {
+          DocNo: null, // 对应输入框的value字段
+          QualityCheckStateType: null,
+          QualityCheckState: null,
+          timer: []
+        },
+        tableSearch: [
+          // {
+          //   label: "标签号",
+          //   value: "carBodyTagNumber",
+          //   inputType: "text"
+          // },
+          // {
+          //   label: "车架号",
+          //   value: "frameNumber",
+          //   inputType: "text"
+          //   // value: "QualityCheckStateType",
+          //   // inputType: "select",
+          //   // children: this.SET_enumsSelect({
+          //   //   keyword: "qualityCheckTypeEnum",
+          //   // }),
+          // },
+          // {
+          //   label: "项目号",
+          //   value: "projectCode",
+          //   inputType: "text"
+          // },
+          // {
+          //   label: "状态描述",
+          //   value: "statusDescription",
+          //   inputType: "select",
+          //   // 0整车/1白车身/2碰撞加固车身/3爆破切割车身/4侧面切割下车身
+          //   children: [
+          //     {
+          //       key: 0,
+          //       value: "整车"
+          //     },
+          //     {
+          //       key: 1,
+          //       value: "白车身"
+          //     },
+          //     {
+          //       key: 2,
+          //       value: "碰撞加固车身"
+          //     },
+          //     {
+          //       key: 3,
+          //       value: "爆破切割车身"
+          //     },
+          //     {
+          //       key: 4,
+          //       value: "侧面切割下车身"
+          //     }
+          //   ]
+          // },
+          // {
+          //   label: "实验状态",
+          //   value: "experimentStatus",
+          //   inputType: "select",
+          //   // 0实验前 1实验中 2实验后
+          //   children: [
+          //     {
+          //       key: 0,
+          //       value: "实验前"
+          //     },
+          //     {
+          //       key: 1,
+          //       value: "实验中"
+          //     },
+          //     {
+          //       key: 2,
+          //       value: "实验后"
+          //     }
+          //   ]
+          // },
+          // {
+          //   label: "状态",
+          //   value: "tagStatus",
+          //   inputType: "select",
+          //   children: []
+          // },
+          // {
+          //   label: "车身类型",
+          //   value: "bodyWorkType",
+          //   inputType: "select",
+          //   children: []
+          // },
+          // {
+          //   label: "项目名称",
+          //   value: "projectName",
+          //   inputType: "text"
+          // },
+          // {
+          //   label: "入场日期",
+          //   inputType: "picker",
+          //   value: "admissionDate",
+          //   props: {
+          //     valueFormat: "yyyy-MM-dd",
+          //     format: "yyyy/MM/dd"
+          //   }
+          // },
+          // {
+          //   label: "打印次数",
+          //   value: "tagPrintNumber",
+          //   inputType: "number"
+          // },
+          // {
+          //   label: "创建时间",
+          //   value: "createdTime",
+          //   inputType: "picker",
+          //   props: {
+          //     type: "datetimerange",
+          //     startPlaceholder: "开始时间",
+          //     endPlaceholder: "结束时间",
+          //     placeholder: "选择时间范围",
+          //     valueFormat: "yyyy-MM-dd HH:mm:ss",
+          //     format: "yyyy/MM/dd HH:mm:ss"
+          //   }
+          // },
+          // {
+          //   label: "虚拟项目",
+          //   value: "tempProject",
+          //   inputType: "text"
+          // }
+        ]
+      },
     };
   },
   methods: {
@@ -184,9 +321,8 @@ export default {
       this.multipleSelection = row;
     },
     handleSearch(from) {
-      var self = this;
-      self.formSearchData.value = { ...from };
-      self.paginations.page = 1;
+      this.formSearchData.value = { ...from };
+      this.paginations.page = 1;
       this.getTable();
     },
     handleReset() { },
@@ -203,7 +339,21 @@ export default {
       // console.log(this);
       // const aaa = this.$api.getApi("Stock.get_api_app_stock_stock_pages")
       // console.log(6666, aaa);
-    }
+    },
+    // ================
+    getTable() { },
+    handleSearch(from) {
+
+      this.formSearchData.value = { ...from };
+      this.paginations.page = 1;
+      this.getTable();
+    },
+    handleReset() {
+      for (let key in this.formSearchData.value) {
+        this.formSearchData.value[key] = null;
+      }
+      this.paginations.page = 1;
+    },
   },
 };
 </script>

package/src/main.js

@@ -6,10 +6,10 @@ import OlCom from "@/package/index.js";
 
 Vue.use(ElementUI);
 
-Vue.use(OlCom, {
-  swaggerUrl: "http://220.179.249.140:20019/swagger/v1/swagger.json",
-});
-
+Vue.use(OlCom);
+// swaggerInstall("http://220.179.249.140:20019/swagger/v1/swagger.json").then(
+//   () => {}
+// );
 new Vue({
   render: (h) => h(App),
 }).$mount("#app");

package/src/package/formSearch/src/index.vue

@@ -149,15 +149,14 @@
             size="small"
             type="primary"
             @click="handleSearch('formSearch')"
-            >查询
+          >查询
           </el-button>
           <el-button
             v-if="formSearchData.reset"
             plain
             size="small"
             @click="handleReset('formSearch')"
-            >重置</el-button
-          >
+          >重置</el-button>
           <el-button
             v-if="formSearchData.expendShow"
             plain
@@ -165,8 +164,7 @@
             :icon="expend ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
             @click="handleExpend('formSearch')"
           >
-            {{ expend ? "收起" : "展开" }}</el-button
-          >
+            {{ expend ? "收起" : "展开" }}</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -189,6 +187,8 @@
 </template>
 
 <script>
+import { getData } from '../../index.js'
+
 export default {
   name: "search",
   directives: {
@@ -250,6 +250,10 @@ export default {
     },
   },
   props: {
+    url: {
+      type: String,
+      default: '',
+    },
     formSearchData: {
       type: Object,
       default: () => {
@@ -298,11 +302,13 @@ export default {
       optionBox: [],
     };
   },
+  async created() {
+    this.init()
+  },
   watch: {
     "formSearchData.value": {
       handler: function (newVal, OldVal) {
         if (newVal) {
-          console.log(newVal, "newVal");
           return (this.formSearch = {
             ...newVal,
           });
@@ -313,20 +319,80 @@ export default {
     },
   },
   methods: {
+    async init() {
+      const swaggerData = await getData()
+      const swaggersearchColumns = swaggerData.paths[this.url].get.parameters || []
+      swaggersearchColumns.forEach((item) => {
+        let tempItem = this.formSearchData.tableSearch.find(e => e.value.toLowerCase() === item.name.toLowerCase())
+        if (tempItem) {
+          // 匹配到
+          tempItem = { ...item, ...tempItem }
+        } else if (item.description) {
+          // 未匹配到
+          const pushItem = {
+            value: item.name,
+            label: item.description,
+            inputType: 'text',
+            props: {}
+          }
+          if (item.schema.enum && Array.isArray(item.schema.enum)) {
+            //枚举值
+            pushItem.inputType = 'select'
+            pushItem.children = item.schema.enum.map(e => ({ key: e, value: e }))
+          } else if (item.schema.format === 'date-time') {
+            //日期
+            pushItem.inputType = 'picker'
+            pushItem.props.valueFormat = 'yyyy-MM-dd'
+            pushItem.props.format = 'yyyy/MM/dd'
+          } else if (item.schema && item.schema.type === 'string') {
+            pushItem.inputType = 'text'
+          }
+          this.formSearchData.tableSearch.push(pushItem)
+        }
+      })
+
+      //  单独处理创建时间 就是BeginTime，EndTime
+      const requiredNames = ['BeginTime', 'EndTime'];
+      const hseCreatedTime = requiredNames.every(name =>
+        swaggersearchColumns.some(item => item.name === name)
+      );
+      if (hseCreatedTime) {
+        this.formSearchData.tableSearch.push({
+          label: "创建时间",
+          value: "createdTime",
+          inputType: "picker",
+          props: {
+            type: "datetimerange",
+            startPlaceholder: "开始时间",
+            endPlaceholder: "结束时间",
+            placeholder: "选择时间范围",
+            valueFormat: "yyyy-MM-dd HH:mm:ss",
+            format: "yyyy/MM/dd HH:mm:ss"
+          }
+        })
+      }
+      console.log(`\x1b[36m\x1b[4mol插件-搜索框渲染`, this.formSearchData.tableSearch)
+    },
     // 树形下拉
     getValue(val) {
       this.$emit("getTreeSelectValue", val);
     },
     // 搜索查询按钮
     handleSearch(formName, item) {
+      if (this.formSearch.createdTime) {
+        this.formSearch.BeginTime = this.formSearch.createdTime[0];
+        this.formSearch.EndTime = this.formSearch.createdTime[1];
+      }
+      const tempFormSearch = Object.assign({}, this.formSearch)
       if (this.formSearchData.rules) {
         return this.$refs[formName].validate((valid) => {
           if (!valid) return false;
-
-          this.$emit("handleSearch", Object.assign({}, this.formSearch), item);
+          this.$emit("handleSearch", tempFormSearch, item);
         });
       }
-      this.$emit("handleSearch", Object.assign({}, this.formSearch), item);
+      this.$emit("handleSearch", tempFormSearch, item);
+      console.log(`\x1b[36m\x1b[4mol插件-搜索框查询`, tempFormSearch)
+
     },
     loadmore(obj) {
       this.$emit("loadmore", obj);
@@ -374,9 +440,9 @@ export default {
       this.expend = !this.expend; // 展开和收起
       this.findTableSearch = this.expend
         ? this.formSearchData.tableSearch.slice(
-            0,
-            this.formSearchData.tableSearch.length
-          )
+          0,
+          this.formSearchData.tableSearch.length
+        )
         : this.formSearchData.tableSearch.slice(0, this.tableSearchSlice);
 
       this.$emit("btnHandleExpend", this.expend);

package/src/package/index.js

@@ -97,25 +97,25 @@ function clearData() {
 const swaggerInstall = async (swaggerUrl) => {
   if (!swaggerUrl) return Promise.reject(new Error("Swagger URL is required.")); // 检查 Swagger URL
 
-  // 尝试从 IndexedDB 获取 Swagger 数据
+  // IndexedDB 获取 Swagger 数据
   const cachedData = await getData();
   if (cachedData) {
     consoleTooltip();
-    return Promise.resolve(cachedData); // 返回已解析的 Promise
+    return Promise.resolve(cachedData);
   } else {
     // 如果没有缓存数据，重新请求 Swagger 数据
     try {
       showLoading();
       const client = await SwaggerClient(swaggerUrl);
-      const swaggerData = client.spec; // 获取 Swagger 数据
-      await storeData(swaggerData); // 缓存数据到 IndexedDB
+      const swaggerData = client.spec;
+      await storeData(swaggerData);
       hideLoading();
       consoleTooltip();
-      return Promise.resolve(swaggerData); // 返回已解析的 Promise
+      return Promise.resolve(swaggerData);
     } catch (error) {
       hideLoading();
       console.error("获取 Swagger 数据失败:", error);
-      return Promise.reject(error); // 返回拒绝的 Promise
+      return Promise.reject(error);
     }
   }
 };
@@ -128,7 +128,6 @@ const components = [OlTable, OlSearch, Dialog];
 
 // 自定义加载指示器
 function showLoading() {
-  // 创建样式
   const style = document.createElement("style");
   style.innerHTML = `
      @keyframes spin {
@@ -160,10 +159,10 @@ function showLoading() {
   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"; // 水平居中
+  loadingDiv.style.display = "flex";
+  loadingDiv.style.flexDirection = "column";
+  loadingDiv.style.justifyContent = "center";
+  loadingDiv.style.alignItems = "center";
 
   // 创建旋转的加载图标
   const spinner = document.createElement("div");
@@ -186,14 +185,12 @@ function hideLoading() {
 }
 
 const install = async function (Vue) {
-  // 遍历所有组件
   components.map((item) => {
     Vue.component(`ol-${item.name}`, item);
   });
   consoleTooltip();
 };
 
-// 判断是否引入文件
-export default install; //全局导入
-export { OlTable, OlSearch, Dialog }; //按需导入
+export default install;
+export { OlTable, OlSearch, Dialog };
 export { swaggerInstall, swaggerUnload };

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

@@ -82,7 +82,10 @@
     </template>
 
     <!--  表格  -->
-    <div class="tablebox">
+    <div
+      class="tablebox"
+      :key="tableData.columns.length"
+    >
       <el-table
         :ref="tableRef"
         v-loading="tableData.loading"
@@ -315,10 +318,6 @@ export default {
       type: Boolean,
       default: true,
     },
-    displayDetail: {
-      type: Boolean,
-      default: true,
-    },
     pageSizes: {
       type: Array,
       default: () => {
@@ -396,17 +395,10 @@ export default {
             this.$set(column, "show", false);
           }
         });
-      },
-    },
-  },
-  watch: {
-    displayDetail: {
-      handler() {
         this.$nextTick(() => {
-          this.$refs[this.tableRef].doLayout();
-        });
+          this.$refs.tableRef.doLayout()
+        })
       },
-      deep: true,
     },
   },
   methods: {