ol-base-components 0.3.2 → 1.0.0

package/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <MyTable
+    <!-- <MyTable
       :paginations="paginations"
       :empty-img="tableData.emptyImg"
       :btnlist="[]"
@@ -9,7 +9,22 @@
       @SelectionChange="SelectionChange"
       @handleSizeChange="handleSizeChange"
       @handleindexChange="handleindexChange"
-    ></MyTable>
+    ></MyTable> -->
+    <!-- url="/api/app/admission-info/paged-result" -->
+
+    <div>table组件案例</div>
+    <ol-table
+      :paginations="paginations"
+      :empty-img="tableData.emptyImg"
+      :btnlist="[]"
+      url="/api/app/admission-info/paged-result"
+      :table-data="tableData"
+      :multiple-selection="multipleSelection"
+      @SelectionChange="SelectionChange"
+      @handleSizeChange="handleSizeChange"
+      @handleindexChange="handleindexChange"
+    ></ol-table>
+    <el-button @click="handlePrint">接口</el-button>
   </div>
 </template>
 
@@ -35,119 +50,123 @@ export default {
         }, // 序号和复选框
         rows: [], // 表数据
         columns: [
-          {
-            label: "",
-            minWidth: "",
-            type: "selection",
-            show: true,
-          },
-          {
-            prop: "qualityEnumDesc",
-            label: "状态",
-          },
-          {
-            prop: "stockTypeDesc",
-            label: "类型",
-          },
-          {
-            prop: "productCode",
-            label: "零件编码",
-            minWidth: "200",
-            sortable: false,
-            show: true,
-          },
-          {
-            prop: "productName",
-            label: "零件名称",
-            minWidth: "180",
-            sortable: false,
-            show: true,
-          },
-          {
-            prop: "productBatch",
-            label: "批次",
-            minWidth: "",
-            sortable: false,
-            show: true,
-          },
-          {
-            prop: "receivingTime",
-            label: "收货日期",
-            minWidth: "160",
-            sortable: false,
-            show: true,
-          },
-          {
-            prop: "expireTime",
-            label: "到期时间",
-          },
-          {
-            prop: "projectCode",
-            label: "项目号",
-          },
-          {
-            prop: "boxCode",
-            label: "箱卡号",
-          },
-          {
-            prop: "region",
-            label: "区域",
-          },
-          {
-            prop: "area",
-            label: "库区",
-          },
-          {
-            prop: "carBodyTagNumber",
-            label: "标签号",
-          },
-          {
-            prop: "cargoLocationCode",
-            label: "库位编码",
-            minWidth: "",
-            sortable: false,
-            show: true,
-          },
-          {
-            prop: "containerCode",
-            label: "容器编码",
-            minWidth: "",
-            sortable: false,
-            show: true,
-          },
-          {
-            prop: "totalQty",
-            label: "库存数量",
-            minWidth: "120",
-            sortable: false,
-            show: true,
-          },
-          {
-            prop: "usableQty",
-            label: "可用数量",
-            minWidth: "120",
-            sortable: false,
-            show: true,
-          },
-          {
-            prop: "lockQty",
-            label: "占用数量",
-            minWidth: "120",
-            sortable: false,
-            show: true,
-          },
-          {
-            prop: "stockoutBillNo",
-            label: "出库单号",
-          },
-          {
-            prop: "loadPercent",
-            label: "容器承载百分比",
-          },
-          {
-            prop: "alv",
-            label: "客户件号",
-          },
+          // {
+          //   label: "",
+          //   minWidth: "",
+          //   type: "selection",
+          //   show: true,
+          // },
+          {
+            prop: "remark",
+            label: "备注123",
+          },
+          {
+            prop: "qualityEnumDesc123",
+            label: "状态1111112222222",
+          },
+          // {
+          //   prop: "stockTypeDesc",
+          //   label: "类型",
+          // },
+          // {
+          //   prop: "productCode",
+          //   label: "零件编码",
+          //   minWidth: "200",
+          //   sortable: false,
+          //   show: true,
+          // },
+          // {
+          //   prop: "productName",
+          //   label: "零件名称",
+          //   minWidth: "180",
+          //   sortable: false,
+          //   show: true,
+          // },
+          // {
+          //   prop: "productBatch",
+          //   label: "批次",
+          //   minWidth: "",
+          //   sortable: false,
+          //   show: true,
+          // },
+          // {
+          //   prop: "receivingTime",
+          //   label: "收货日期",
+          //   minWidth: "160",
+          //   sortable: false,
+          //   show: true,
+          // },
+          // {
+          //   prop: "expireTime",
+          //   label: "到期时间",
+          // },
+          // {
+          //   prop: "projectCode",
+          //   label: "项目号",
+          // },
+          // {
+          //   prop: "boxCode",
+          //   label: "箱卡号",
+          // },
+          // {
+          //   prop: "region",
+          //   label: "区域",
+          // },
+          // {
+          //   prop: "area",
+          //   label: "库区",
+          // },
+          // {
+          //   prop: "carBodyTagNumber",
+          //   label: "标签号",
+          // },
+          // {
+          //   prop: "cargoLocationCode",
+          //   label: "库位编码",
+          //   minWidth: "",
+          //   sortable: false,
+          //   show: true,
+          // },
+          // {
+          //   prop: "containerCode",
+          //   label: "容器编码",
+          //   minWidth: "",
+          //   sortable: false,
+          //   show: true,
+          // },
+          // {
+          //   prop: "totalQty",
+          //   label: "库存数量",
+          //   minWidth: "120",
+          //   sortable: false,
+          //   show: true,
+          // },
+          // {
+          //   prop: "usableQty",
+          //   label: "可用数量",
+          //   minWidth: "120",
+          //   sortable: false,
+          //   show: true,
+          // },
+          // {
+          //   prop: "lockQty",
+          //   label: "占用数量",
+          //   minWidth: "120",
+          //   sortable: false,
+          //   show: true,
+          // },
+          // {
+          //   prop: "stockoutBillNo",
+          //   label: "出库单号",
+          // },
+          // {
+          //   prop: "loadPercent",
+          //   label: "容器承载百分比",
+          // },
+          // {
+          //   prop: "alv",
+          //   label: "客户件号",
+          // },
         ], // 表头
         operates: [], // 表格里面的操作按钮
         tableHeightDiff: 300,
@@ -170,7 +189,7 @@ export default {
       self.paginations.page = 1;
       this.getTable();
     },
-    handleReset() {},
+    handleReset() { },
     handleSizeChange(val) {
       this.paginations.page = 1;
       this.paginations.limit = val;
@@ -180,17 +199,22 @@ export default {
       this.paginations.page = val;
       this.getTable();
     },
+    async handlePrint() {
+      // console.log(this);
+      // const aaa = this.$api.getApi("Stock.get_api_app_stock_stock_pages")
+      // console.log(6666, aaa);
+    }
   },
 };
 </script>
 
 <style>
-#app {
+/* #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
-}
+} */
 </style>

package/src/main.js

@@ -2,11 +2,34 @@ import Vue from "vue";
 import ElementUI from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
 import App from "./App.vue";
-import OldCom from "@/package/table/index";
 
+import olCom, { Swagger } from "@/package/index.js";
+// const swaggerInstance = new Swagger(
+//   "http://220.179.249.140:20019/swagger/v1/swagger.json"
+// );
+// Vue.prototype.$api = swaggerInstance;
+// console.log(222, swaggerInstance);
+
+// async function fetchStockData() {
+//   const stockApi = await swaggerInstance.getApi(
+//     cccccccccccccccccccc
+//   ); // 获取 API 函数
+//   const res = await stockApi({
+//     // 调用 API 函数并传递参数
+//     Page: 1,
+//     MaxResultCount: 30,
+//   });
+//   console.log(res); // 打印返回的结果
+// }
+
+// fetchStockData(); // 调用函数以获取数据
+
+Vue.use(olCom);
 Vue.config.productionTip = false;
 Vue.use(ElementUI);
-Vue.use(OldCom);
-new Vue({
-  render: (h) => h(App),
-}).$mount("#app");
+
+setTimeout(() => {
+  new Vue({
+    render: (h) => h(App),
+  }).$mount("#app");
+}, 20000);

package/src/package/index.js

@@ -1,17 +1,49 @@
 import OlTable from "./table";
 import OlSearch from "./formSearch";
 import Dialog from "./dialog";
+import Swagger from "@/utils/swagger";
+
+const consoleTooltip = () => {
+  // 定义颜色和样式
+  const reset = "\x1b[0m"; // 重置样式
+  const green = "\x1b[32m"; // 绿色
+  const cyan = "\x1b[36m"; // 青色
+  const bold = "\x1b[1m"; // 粗体
+  const underline = "\x1b[4m"; // 下划线
+
+  // 定义图案
+  const star = "⭐";
+  const checkMark = "✔️";
+
+  // 输出成功提示
+  console.log(`
+${cyan}${bold}${star.repeat(
+    3
+  )}${green}${bold}${underline}ol-base-components 插件加载成功！ ${checkMark}
+${cyan}感谢使用我们的组件库，期待你的精彩应用！${reset}
+`);
+};
 
 const components = [OlTable, OlSearch, Dialog];
 
-const install = function (Vue) {
+const install = function (
+  Vue,
+  option = {
+    swaggerUrl: "",
+  }
+) {
+  // "http://220.179.249.140:20019/swagger/v1/swagger.json"
+  const swaggerInstance = new Swagger(option?.swaggerUrl);
+  Vue.prototype.$swagger = swaggerInstance;
   // 遍历所有组件
   components.map((item) => {
     Vue.component(`ol-${item.name}`, item);
   });
+
+  consoleTooltip();
 };
+
 // 判断是否引入文件
-export default {
-  install,
-  ...components,
-};
+export default install; //全局导入
+export { OlTable, OlSearch, Dialog }; //按需导入
+export { Swagger };

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

@@ -2,15 +2,16 @@
   <div class="table_list_fix">
     <!-- 扩展性内容 -->
     <slot name="content_context" />
-    <template
-      v-if="
+    <template v-if="
         btnlist.length ||
         tableData.options.headTool ||
         tableData.options.refreshBtn ||
         tableData.options.downloadBtn
-      "
-    >
-      <div v-if="showBtnBox" class="btnbox">
+      ">
+      <div
+        v-if="showBtnBox"
+        class="btnbox"
+      >
         <!-- 左侧按钮 -->
         <div>
           <el-button
@@ -20,7 +21,10 @@
             :type="btn.types ? btn.types : 'primary'"
             @click="btn.method"
           >
-            <i v-if="btn.icon" :class="btn.icon" />
+            <i
+              v-if="btn.icon"
+              :class="btn.icon"
+            />
             {{ btn.title }}
           </el-button>
         </div>
@@ -36,14 +40,17 @@
                 <i class="el-icon-s-operation" />
               </div>
             </div>
-            <el-dropdown-menu slot="dropdown" style="padding: 5px">
+            <el-dropdown-menu
+              slot="dropdown"
+              style="padding: 5px"
+            >
               <el-checkbox-group v-model="checkedTableColumns">
                 <el-checkbox
                   v-for="column in checkedTableList"
                   :key="column.prop"
                   class="checkbox"
                   :label="column.prop"
-                  >{{ column.label }}
+                >{{ column.label }}
                 </el-checkbox>
               </el-checkbox-group>
             </el-dropdown-menu>
@@ -123,12 +130,21 @@
                 <span>{{ item.label }}</span>
               </el-tooltip>
             </template>
-            <template v-if="item.render" v-slot="scope">
+            <template
+              v-if="item.render"
+              v-slot="scope"
+            >
               <!-- 使用函数式组件进行dom渲染 -->
               <render-dom :render="() => item.render(scope.row)" />
             </template>
-            <template v-else-if="item.renderSlot" v-slot="scope">
-              <slot :row="scope.row" :name="item.prop" />
+            <template
+              v-else-if="item.renderSlot"
+              v-slot="scope"
+            >
+              <slot
+                :row="scope.row"
+                :name="item.prop"
+              />
             </template>
           </el-table-column>
         </template>
@@ -158,18 +174,23 @@
                       btn.disabled && btn.disabled(scope.row, scope.$index)
                     "
                     @click.stop="btn.method(scope.row, scope.$index)"
-                    >{{ btn.label
+                  >{{ btn.label
                     }}{{
                       tableData.operates.length >= 2 ? "&nbsp;&nbsp;" : ""
-                    }}</el-button
-                  >
+                    }}</el-button>
                 </span>
               </template>
-            </div> </template
-          >·
+            </div>
+          </template>·
         </el-table-column>
-        <div slot="empty" class="empty">
-          <img v-if="tableData.rows.length == 0" :src="nodata" />
+        <div
+          slot="empty"
+          class="empty"
+        >
+          <img
+            v-if="tableData.rows.length == 0"
+            :src="nodata"
+          />
         </div>
       </el-table>
     </div>
@@ -234,6 +255,10 @@ export default {
     event: "SelectionChange",
   },
   props: {
+    url: {
+      type: String,
+      default: "",
+    }, // 接口地址
     printListObj: {
       type: Object,
       default: () => {
@@ -329,9 +354,46 @@ export default {
   },
   computed: {
     bindTableColumns() {
-      return this.tableData.columns.filter((column) =>
+      // 读取接口和类型获取表头数据
+
+      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() {
@@ -507,13 +569,8 @@ export default {
   color: dodgerblue;
 }
 
-.pagination {
-  text-align: center;
-}
-
 .tablebox {
   box-sizing: border-box;
-  min-height: 240px;
   flex: 1;
   overflow: auto;
 }

package/src/utils/swagger/index.js

@@ -0,0 +1,21 @@
+// index.js
+import SwaggerClient from "swagger-client";
+// 创建一个新的列数组
+class Swagger {
+  constructor(swaggerUrl, options = {}) {
+    this.swaggerUrl = swaggerUrl;
+    this.options = options;
+    // this.apis = {};
+    this.specification = {}; // swagger规范
+    this.init();
+  }
+
+  async init() {
+    const client = await SwaggerClient({
+      url: this.swaggerUrl,
+    });
+    this.specification = client.spec;
+  }
+}
+
+export default Swagger;