ol-base-components 2.4.1 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol-base-components",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "private": false,
   "main": "src/package/index.js",
   "bin": {

package/src/App.vue

@@ -13,42 +13,26 @@
       :paginations="paginations"
       :empty-img="tableData.emptyImg"
       :btnlist="[]"
-      url="/api/app/stock-out/send-pick-tray-back"
+      url="/api/app/bind-record/bind-record-detail-pages"
       :table-data="tableData"
       :multiple-selection="multipleSelection"
       @SelectionChange="SelectionChange"
       @handleSizeChange="handleSizeChange"
       @handleindexChange="handleindexChange"
     ></ol-table>
-    <el-button @click="handlePrint">接口</el-button>
+    <!-- <el-button @click="handlePrint">接口</el-button>
 
-    <div class="ellipsis-container">
-      如何处理文本溢出？如何实现单行文本溢出显示省略号？如何实现多行文本溢出显示省略号？
-    </div>
+    <div
+      class="ellipsis-container"
+      id="ellipsis-container"
+      v-for="item in 5"
+      :key="item"
+    >如何处理文本溢出如何实现单行文本溢出显示省略号</div>
 
-    <!-- 三角形 -->
     <div class="triangle-up"></div>
     <div class="grid-content">
       <div>11</div>
       <div>11</div>
-      <!-- <div>11</div>
-      <div>11</div>
-      <div>11</div>
-      <div>11</div>
-      <div>11</div>
-      <div>11</div>
-      <div>11</div>
-      <div>11</div>
-      <div>11</div>
-      <div>11</div>
-      <div>11</div>
-      <div>11</div>
-      <div>11</div>
-      <div>11</div>
-      <div>11</div>
-      <div>11</div>
-      <div>11</div>
-      <div>11</div> -->
     </div>
 
     <div class="container">
@@ -59,7 +43,7 @@
 
     <div class="square-container">
       <div class="square"></div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -80,127 +64,13 @@ export default {
           headTool: true, // 开启头部工具栏
           refreshBtn: true, // 开启表格头部刷新按钮
           downloadBtn: true, // 开启表格头部下载按钮
+          useSlotHeader: false
         }, // 序号和复选框
-        rows: [], // 表数据
-        columns: [
-          // {
-          //   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: "客户件号",
-          // },
-        ], // 表头
+        rows: [{
+          bindStateEnum: '11',
+          tagNumber: '22'
+        }], // 表数据
+        columns: [],
         operates: [], // 表格里面的操作按钮
         tableHeightDiff: 300,
       },
@@ -343,7 +213,13 @@ export default {
       },
     };
   },
-  onMounted() { },
+  // onMounted() {
+
+  // },
+  mounted() {
+    const el = document.getElementById("ellipsis-container");
+    this.truncateMiddleByWidth(el)
+  },
   methods: {
     SelectionChange(row) {
       this.multipleSelection = row;
@@ -382,6 +258,26 @@ export default {
       }
       this.paginations.page = 1;
     },
+    truncateMiddleByWidth(el) {
+      let text = el.textContent;
+      if (el.scrollWidth <= el.clientWidth) return;
+      const suffix = text.slice(-3);
+      let left = 0;
+      let right = text.length - 3;
+      let result = '';
+      while (left <= right) {
+        let mid = Math.floor((left + right) / 2);
+        const temp = text.slice(0, mid) + '...' + suffix;
+        el.textContent = temp;
+        if (el.scrollWidth <= el.clientWidth) {
+          result = temp;
+          left = mid + 1;
+        } else {
+          right = mid - 1;
+        }
+      }
+      el.textContent = result;
+    }
   },
 };
 </script>
@@ -445,13 +341,14 @@ export default {
 }
 
 .ellipsis-container {
-  width: 100px;
+  width: 200px;
   // height: 100px;
   border: 1px solid #ccc;
   overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 4; /* 设置行数，例如3行 */
-  -webkit-box-orient: vertical;
+  white-space: nowrap;
+  // text-overflow: ellipsis;
+  // display: -webkit-box;
+  // -webkit-line-clamp: 4; /* 设置行数，例如3行 */
+  // -webkit-box-orient: vertical;
 }
 </style>

package/src/api/api.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 const fs = require("fs");
 const path = require("path");
 const SwaggerClient = require("swagger-client");
@@ -14,7 +14,6 @@ let defaultRemark = `/**
  * ⚠️  警告：此文件由脚本自动生成，请勿手动编辑！
  * ��  如需修改，请重新运行生成脚本
  * 📅  生成时间: ${new Date().toLocaleString()}
- * 
  */\n\n`;
 const spinnerChars = ["|", "/", "-", "\\"];
 let spinnerIndex = 0;

package/src/api/run.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 const http = require("http");
 const fs = require("fs");
 const path = require("path");
@@ -10,6 +10,11 @@ const swaggerUrl = process.argv[2]
   : "";
 const outputPath = process.argv[3] || "src/api/swagger.js";
 
+let defaultRemark = `/**
+ * ⚠️  警告：此文件由脚本自动生成，请勿手动编辑！
+ * ��  如需修改，请重新运行生成脚本
+ * 📅  生成时间: ${new Date().toLocaleString()}
+ */\n\n`;
 const spinnerChars = ["|", "/", "-", "\\"];
 let spinnerIndex = 0;
 let dotCount = 0;
@@ -131,12 +136,7 @@ const generateApiModules = (swagger) => {
   }
 
   // 生成最终的输出字符串
-  let output = `/**
- * ⚠️  警告：此文件由脚本自动生成，请勿手动编辑！
- * ��  如需修改，请重新运行生成脚本
- * 📅  生成时间: ${new Date().toLocaleString()}
- * 
- */\n\n`;
+  let output = defaultRemark;
   for (const [moduleName, methods] of Object.entries(apiModules)) {
     const description = tags.find((e) => e.name === moduleName).description;
     output += `// ${description}\n`;

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

@@ -101,6 +101,7 @@
         @select-all="selectAll"
         @row-click="rowClick"
       >
+
         <el-table-column
           v-if="tableData.options && tableData.options.index"
           width="60"
@@ -116,48 +117,65 @@
           type="selection"
           label=""
         />
-        <template v-for="(item, index) in bindTableColumns">
-          <el-table-column
-            :key="index"
-            :label="item.label"
-            :prop="item.prop"
-            :min-width="item.minWidth || '150px'"
-            :show-overflow-tooltip="item.overHidden || true"
-            :type="item.type || 'normal'"
-            v-bind="{
+        <!-- 新增插槽，允许父组件自定义表头 -->
+        <template v-if="tableData.options && tableData.options.useSlotHeader">
+          <slot
+            name="table-columns"
+            :columns="bindTableColumns"
+          >
+            <template v-for="(item, index) in bindTableColumns">
+              <my-table-column
+                :column="item"
+                :key="index"
+              />
+            </template>
+          </slot>
+        </template>
+        <!-- 防止之前逻辑出现纰漏，故保留之前逻辑再扩展自定义插槽方式渲染 -->
+        <template v-else>
+          <template v-for="(item, index) in bindTableColumns">
+            <el-table-column
+              :key="index"
+              :label="item.label"
+              :prop="item.prop"
+              :min-width="item.minWidth || '150px'"
+              :show-overflow-tooltip="item.overHidden || true"
+              :type="item.type || 'normal'"
+              v-bind="{
               align: 'center',
               width: item.width,
               fixed: item.fixed || false,
               sortable: item.sortable || false,
               ...item.attrs,
             }"
-          >
-            <template v-slot:header>
-              <el-tooltip
-                :content="`${item.label} ${item.prop}`"
-                placement="top"
-              >
-                <span>{{ item.label }}</span>
-              </el-tooltip>
-            </template>
-            <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>
-          </el-table-column>
+              <template v-slot:header>
+                <el-tooltip
+                  :content="`${item.label} ${item.prop}`"
+                  placement="top"
+                >
+                  <span>{{ item.label }}</span>
+                </el-tooltip>
+              </template>
+              <template
+                v-if="item.render"
+                v-slot="scope"
+              >
+                <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>
+            </el-table-column>
+          </template>
         </template>
+
         <el-table-column
           v-if="tableData.operates && tableData.operates.length > 0"
           label="操作"
@@ -260,6 +278,77 @@ export default {
         return <div>{renDom.props.render()}</div>;
       },
     },
+    myTableColumn: {
+      functional: true,
+      props: {
+        column: { type: Object, required: true }
+      },
+      render(h, ctx) {
+        const col = ctx.props.column;
+
+        // 多级表头处理
+        if (col.children && col.children.length) {
+          return h(
+            'el-table-column',
+            {
+              props: {
+                label: col.label,
+                ...col.attrs
+              }
+            },
+            col.children.map((child, idx) =>
+              h(ctx.parent.$options.components.myTableColumn, {
+                props: { column: child },
+                key: idx
+              })
+            )
+          );
+        }
+
+        // 单列表头处理
+        return h(
+          'el-table-column',
+          {
+            props: {
+              label: col.label,
+              prop: col.prop,
+              minWidth: col.minWidth || '150px',
+              showOverflowTooltip: col.overHidden || true,
+              type: col.type || 'normal',
+              align: 'center',
+              width: col.width,
+              fixed: col.fixed || false,
+              sortable: col.sortable || false,
+              ...col.attrs
+            }
+          },
+          [
+            // 表头插槽 - 添加 el-tooltip
+            h('template', { slot: 'header' }, [
+              h('el-tooltip', {
+                props: {
+                  content: `${col.label} ${col.prop}`,
+                  placement: 'top'
+                }
+              }, [
+                h('span', col.label)
+              ])
+            ]),
+            // 内容插槽 - 支持自定义渲染
+            col.render ? h('template', { slot: 'default' }, {
+              render: (scope) => h(ctx.parent.$options.components.renderDom, {
+                props: { render: () => col.render(scope.row) }
+              })
+            }) : null,
+            // 插槽渲染
+            col.renderSlot ? h('template', { slot: 'default' }, {
+              render: (scope) => ctx.parent.$scopedSlots[col.prop] ?
+                ctx.parent.$scopedSlots[col.prop](scope) : null
+            }) : null
+          ].filter(Boolean)
+        );
+      }
+    }
   },
   model: {
     prop: "multipleSelection",
@@ -305,6 +394,7 @@ export default {
             headTool: true, // 开启头部工具栏
             refreshBtn: true, // 开启表格头部刷新按钮
             downloadBtn: true, // 开启表格头部下载按钮
+            useSlotHeader: false, // 使用插槽自定义表头
           }, // 序号和复选框
           rows: [], // 表数据
           columns: [], // 表头
@@ -402,30 +492,103 @@ export default {
     },
   },
   methods: {
+    // init() {
+    //   // 从 IndexedDB 中获取 Swagger 数据
+    //   getData().then((swaggerData) => {
+    //     const swaggerColumns = swaggerData.paths[this.url].get.responses["200"].content['application/json'].schema.properties.items.items.properties;
+
+    //     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: {}
+    //         });
+    //       }
+    //     });
+    //     console.log(`\x1b[36m\x1b[4mol插件-表格`, this.tableData.columns)
+    //   }).catch((error) => {
+    //     console.error("获取 Swagger 数据失败:", error);
+    //   });
+    // },
+    // 支持多级表头 useSlotHeader: true，且支持排序，通过columns中的顺序实现
+    //  columns: [
+    //       {
+    //         label: '一级表头',
+    //         children: [{ prop: 'bindStateEnum', label: '112' }, { prop: 'tagNumber' }]
+    //       },
+    //       {
+    //         prop: "remark",
+    //         label: "备注123",
+    //       },
+    //     ],
     init() {
       // 从 IndexedDB 中获取 Swagger 数据
       getData().then((swaggerData) => {
         const swaggerColumns = swaggerData.paths[this.url].get.responses["200"].content['application/json'].schema.properties.items.items.properties;
 
+        // 递归映射函数
+        const mapSwaggerToColumns = (columns) => {
+          columns.forEach(column => {
+            if (column.children && column.children.length) {
+              mapSwaggerToColumns(column.children);
+            } else {
+              if (column.prop && swaggerColumns[column.prop]) {
+                const swaggerItem = swaggerColumns[column.prop];
+                Object.assign(column, {
+                  label: swaggerItem.description,
+                  show: true,
+                  sortable: false,
+                  ...column
+                });
+              }
+            }
+          });
+        };
+
+        mapSwaggerToColumns(this.tableData.columns);
+
         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) {
+          const existingColumn = this.findColumnByProp(this.tableData.columns, key);
+          if (!existingColumn && item.description) {
             this.tableData.columns.push({
               prop: key,
               label: item.description,
               show: true,
               sortable: false,
-              attrs: {}
+              attrs: {},
+              ...item
             });
           }
         });
+
         console.log(`\x1b[36m\x1b[4mol插件-表格`, this.tableData.columns)
       }).catch((error) => {
         console.error("获取 Swagger 数据失败:", error);
       });
+    },
+    // 递归查找列配置的辅助方法
+    findColumnByProp(columns, prop) {
+      for (const column of columns) {
+        if (column.children && column.children.length) {
+          const found = this.findColumnByProp(column.children, prop);
+          if (found) return found;
+        } else if (column.prop === prop) {
+          return column;
+        }
+      }
+      return null;
+    },
+    // 多级表头转换
+    multilevelHeader() {
+
     },
     radioChange() {
       this.$emit("radioChange", this.twinPage);