wkjp-list-page 1.0.16 → 1.0.17

package/README.md

@@ -89,7 +89,7 @@ deviceListApi(params) {
 **情况：** 运营想自定义表头、列太多想藏起来。  
 **默认：** **`columns` 达到 10 列及以上**（可用 **`column-config-auto-min`** 改阈值）时，表格最右侧自动出现 **表头设置** 齿轮；悬停齿轮显示 **「配置字段」** 提示（可用 **`column-config-tooltip`** 修改）。  
 **可选：** `:enable-column-config="true"` 强制开启；`:enable-column-config="false"` 强制关闭。  
-**作用：** 弹层内可 **搜索字段**、**显示/未显示** 分组、开关显隐、拖拽排序（固定列不可拖不可关）；点 **确认** 后才会作用到表格并触发 **`columns-change`**，点 **取消** / 关闭 / 再次点齿轮则放弃本次修改。
+**作用：** 弹层内可 **搜索字段**、**显示/未显示** 分组、开关显隐、拖拽排序；**复选框列（`type: selection`）不出现在设置里**且表格始终保留；**固定列**左侧显示「固定」且不可拖不可关。点 **确认** 后才会作用到表格并触发 **`columns-change`**，点 **取消** / 关闭 / 再次点齿轮则放弃本次修改。
 
 ### 2.2 不想要「查询」按钮，或想改按钮上的字
 
@@ -280,6 +280,7 @@ deviceListTransformList(list) {
 | `columnConfigTooltip` | `配置字段` | 表头设置齿轮图标悬停提示文案。 |
 | `columnConfigConfirmText` | `确认` | 表头设置弹层确认按钮文案。 |
 | `columnConfigCancelText` | `取消` | 表头设置弹层取消按钮文案。 |
+| `columnConfigFixedText` | `固定` | 固定列在拖拽图标位显示的文案。 |
 | `columnConfigTitle` | `表头设置` | 表头设置弹层标题。 |
 | `columnConfigSearchPlaceholder` | `搜索添加更多字段` | 表头设置内搜索框占位。 |
 | `showExport` | `false` | 为 `true` 且提供 `exportApi` 时，在搜索区右侧显示内置 **`exportFile`** 导出按钮。 |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wkjp-list-page",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "Vue2 + ElementUI CommonListPage component",
   "main": "src/index.js",
   "module": "src/index.js",

package/src/components/CommonListPage.vue

@@ -100,6 +100,7 @@
     </el-form>
 
     <el-table
+      ref="listTable"
       :data="innerTableData"
       v-loading="innerLoading"
       v-bind="tableAttrs"
@@ -165,9 +166,9 @@
       :append-to-body="true"
       :popper-options="columnConfigPopperOptions"
       popper-class="common-list-page-column-config-popper"
-      @show="onColumnConfigShow"
+      @show="handleColumnConfigShow"
     >
-      <div class="column-config-panel">
+      <div class="column-config-panel" :style="columnConfigPanelStyle">
               <div class="column-config-panel__head">
                 <span class="column-config-panel__title">{{ columnConfigTitle }}</span>
                 <i class="el-icon-close column-config-panel__close" @click="cancelColumnConfig"></i>
@@ -195,9 +196,13 @@
                       'column-config-panel__item--drag-over': dragOverIndex === idx
                     }"
                   >
+                    <span
+                      v-if="isFixedColumn(configColumns[idx])"
+                      class="column-config-panel__fixed-tag"
+                    >{{ columnConfigFixedText }}</span>
                     <i
+                      v-else
                       class="column-config-panel__drag el-icon-rank"
-                      :class="{ 'is-disabled': !canDragConfigIndex(idx) }"
                       @mousedown.prevent="onDragMouseDown(idx)"
                     ></i>
                     <span class="column-config-panel__label">{{ columnConfigLabel(configColumns[idx]) }}</span>
@@ -311,6 +316,8 @@ export default {
     columnConfigTooltip: { type: String, default: "配置字段" },
     columnConfigConfirmText: { type: String, default: "确认" },
     columnConfigCancelText: { type: String, default: "取消" },
+    /** 表头设置中固定列在拖拽位显示的文案 */
+    columnConfigFixedText: { type: String, default: "固定" },
     /** 表头设置弹层标题 */
     columnConfigTitle: { type: String, default: "表头设置" },
     /** 表头设置内搜索框占位 */
@@ -371,6 +378,7 @@ export default {
       columnConfigKeyword: "",
       dragFromIndex: -1,
       dragOverIndex: -1,
+      columnConfigPanelMaxHeight: null,
       configColumns: [],
       appliedColumns: [],
       /** 进入页时 filters 的快照，用于「清除查询」 */
@@ -392,12 +400,17 @@ export default {
     },
     visibleColumns() {
       const source = this.showColumnConfig ? this.appliedColumns : this.columns;
-      return source.filter((item) => item && item.hidden !== true && item._visible !== false);
+      return source.filter((item) => {
+        if (!item) return false;
+        if (item.type === "selection") return true;
+        return item.hidden !== true && item._visible !== false;
+      });
     },
     visibleConfigIndexes() {
       const indexes = [];
       for (let i = 0; i < this.configColumns.length; i++) {
         const col = this.configColumns[i];
+        if (!this.isConfigPanelColumn(col)) continue;
         if (col._visible !== false && this.matchesColumnConfigSearch(col)) indexes.push(i);
       }
       return indexes;
@@ -406,12 +419,21 @@ export default {
       const indexes = [];
       for (let i = 0; i < this.configColumns.length; i++) {
         const col = this.configColumns[i];
+        if (!this.isConfigPanelColumn(col)) continue;
         if (col._visible === false && this.matchesColumnConfigSearch(col)) indexes.push(i);
       }
       return indexes;
     },
     columnConfigPopperOptions() {
-      return { boundariesElement: "body", gpuAcceleration: false };
+      return {
+        boundariesElement: "body",
+        gpuAcceleration: false,
+        positionFixed: true
+      };
+    },
+    columnConfigPanelStyle() {
+      if (!this.columnConfigPanelMaxHeight) return {};
+      return { maxHeight: this.columnConfigPanelMaxHeight + "px" };
     },
     columnConfigSearchActive() {
       return String(this.columnConfigKeyword || "").trim() !== "";
@@ -557,6 +579,7 @@ export default {
   },
   beforeDestroy() {
     this.removeColumnDragListeners();
+    this.unbindColumnConfigResize();
   },
   methods: {
     forwardSelectionChange(selection) {
@@ -565,6 +588,10 @@ export default {
     isBuiltinCellColumn(col) {
       return col && ["selection", "index", "expand"].indexOf(col.type) !== -1;
     },
+    /** 复选框列不参与表头设置 */
+    isConfigPanelColumn(col) {
+      return col && col.type !== "selection";
+    },
     tableColumnBind(col) {
       var omit = ["valueGetter", "textFormatter", "defaultText", "emptyText", "hidden", "_visible", "_configKey"];
       var rest = {};
@@ -842,7 +869,7 @@ export default {
       const mapped = cols.map((col, index) =>
         Object.assign({}, col, {
           _configKey: this.buildConfigKey(col, index),
-          _visible: col.hidden !== true
+          _visible: col.type === "selection" ? true : col.hidden !== true
         })
       );
       const sorted = this.sortConfigColumns(mapped);
@@ -863,7 +890,8 @@ export default {
       return this.sortConfigColumns(
         (source || []).map((col) =>
           Object.assign({}, col, {
-            _visible: col._visible !== false && col.hidden !== true
+            _visible:
+              col.type === "selection" ? true : col._visible !== false && col.hidden !== true
           })
         )
       );
@@ -873,10 +901,26 @@ export default {
       this.columnConfigKeyword = "";
       this.dragFromIndex = -1;
       this.dragOverIndex = -1;
+      this.columnConfigPanelMaxHeight = null;
       this.removeColumnDragListeners();
+      this.unbindColumnConfigResize();
       const pop = this.$refs.columnConfigPopover;
       if (pop && typeof pop.doClose === "function") pop.doClose();
     },
+    bindColumnConfigResize() {
+      if (this._columnConfigResizeHandler || typeof window === "undefined") return;
+      this._columnConfigResizeHandler = () => {
+        if (this.columnConfigVisible) this.applyColumnConfigPopoverPosition();
+      };
+      window.addEventListener("resize", this._columnConfigResizeHandler);
+      window.addEventListener("scroll", this._columnConfigResizeHandler, true);
+    },
+    unbindColumnConfigResize() {
+      if (!this._columnConfigResizeHandler || typeof window === "undefined") return;
+      window.removeEventListener("resize", this._columnConfigResizeHandler);
+      window.removeEventListener("scroll", this._columnConfigResizeHandler, true);
+      this._columnConfigResizeHandler = null;
+    },
     toggleColumnConfig() {
       if (this.columnConfigVisible) {
         this.cancelColumnConfig();
@@ -886,6 +930,12 @@ export default {
       this.columnConfigVisible = true;
       const pop = this.$refs.columnConfigPopover;
       if (pop && typeof pop.doShow === "function") pop.doShow();
+      this.alignColumnConfigPopover();
+    },
+    handleColumnConfigShow() {
+      this.onColumnConfigShow();
+      this.alignColumnConfigPopover();
+      this.bindColumnConfigResize();
     },
     onColumnConfigShow() {
       this.columnConfigKeyword = "";
@@ -893,6 +943,55 @@ export default {
       this.dragOverIndex = -1;
       this.configColumns = this.cloneConfigColumnsFrom(this.appliedColumns);
     },
+    /** 弹层右缘与表格右缘对齐 */
+    alignColumnConfigPopover() {
+      const apply = () => this.applyColumnConfigPopoverPosition();
+      this.$nextTick(() => {
+        apply();
+        if (typeof window !== "undefined" && window.requestAnimationFrame) {
+          window.requestAnimationFrame(apply);
+        } else {
+          this.$nextTick(apply);
+        }
+      });
+    },
+    getTableHeaderAnchorRect(tableEl) {
+      if (!tableEl) return null;
+      const header =
+        tableEl.querySelector(".el-table__header-wrapper") ||
+        tableEl.querySelector(".el-table__header");
+      if (header) return header.getBoundingClientRect();
+      return tableEl.getBoundingClientRect();
+    },
+    applyColumnConfigPopoverPosition() {
+      const pop = this.$refs.columnConfigPopover;
+      const table = this.$refs.listTable;
+      if (!pop || !table || !table.$el) return;
+      const popper = pop.popperElm;
+      if (!popper) return;
+      const anchor = this.getTableHeaderAnchorRect(table.$el);
+      if (!anchor) return;
+      const viewportH =
+        (typeof window !== "undefined" && window.innerHeight) ||
+        (document.documentElement && document.documentElement.clientHeight) ||
+        0;
+      const viewportPadding = 12;
+      const popperPadV = 24;
+      const maxPopperHeight = Math.max(160, viewportH - anchor.bottom - viewportPadding);
+      const popperWidth = popper.offsetWidth || 320;
+      const left = Math.max(8, anchor.right - popperWidth);
+      this.columnConfigPanelMaxHeight = Math.max(120, maxPopperHeight - popperPadV);
+      popper.style.position = "fixed";
+      popper.style.left = left + "px";
+      popper.style.top = anchor.bottom + "px";
+      popper.style.right = "auto";
+      popper.style.bottom = "auto";
+      popper.style.margin = "0";
+      popper.style.transform = "none";
+      popper.style.maxHeight = maxPopperHeight + "px";
+      popper.style.overflow = "hidden";
+      popper.style.boxSizing = "border-box";
+    },
     cancelColumnConfig() {
       this.configColumns = this.cloneConfigColumnsFrom(this.appliedColumns);
       this.closeColumnConfigPopover();
@@ -962,7 +1061,8 @@ export default {
     applyColumnConfig() {
       this.appliedColumns = this.configColumns.map((col) =>
         Object.assign({}, col, {
-          hidden: col._visible === false
+          _visible: col.type === "selection" ? true : col._visible !== false,
+          hidden: col.type === "selection" ? false : col._visible === false
         })
       );
       this.$emit("columns-change", this.appliedColumns);
@@ -1401,7 +1501,8 @@ export default {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  max-height: min(70vh, calc(100vh - 120px));
+  min-height: 0;
+  overflow: hidden;
 }
 
 .column-config-panel__body {
@@ -1414,6 +1515,7 @@ export default {
 
 .column-config-panel__head {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 12px;
@@ -1436,6 +1538,7 @@ export default {
 }
 
 .column-config-panel__search {
+  flex-shrink: 0;
   margin-bottom: 12px;
 }
 
@@ -1495,11 +1598,20 @@ export default {
   cursor: grabbing;
 }
 
-.column-config-panel__drag.is-disabled,
 .column-config-panel__drag--placeholder {
   visibility: hidden;
 }
 
+.column-config-panel__fixed-tag {
+  flex-shrink: 0;
+  width: 28px;
+  font-size: 12px;
+  line-height: 1;
+  color: #909399;
+  text-align: center;
+  user-select: none;
+}
+
 .column-config-panel__label {
   flex: 1;
   min-width: 0;
@@ -1533,8 +1645,9 @@ export default {
   padding: 12px 14px !important;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
   z-index: 3000 !important;
-  max-height: calc(100vh - 80px);
-  overflow: visible;
+  overflow: hidden !important;
+  margin: 0 !important;
+  box-sizing: border-box !important;
 }
 
 .common-list-page-column-config-popper .el-switch {