wkjp-list-page 1.0.14 → 1.0.16

package/README.md

@@ -86,9 +86,10 @@ deviceListApi(params) {
 
 ### 2.1 想让用户在页面上自己勾选显示哪些列、拖顺序
 
-**情况：** 运营想「配置表单」、列太多想藏起来。  
-**加：** 写上 **`enable-column-config`**（或 `:enable-column-config="true"`）  
-**作用：** 出现「配置表单」按钮和弹窗；左右固定列在弹窗里一般不让拖乱顺序。点确定会 **`columns-change`** 把当前列配置抛给父页面。
+**情况：** 运营想自定义表头、列太多想藏起来。  
+**默认：** **`columns` 达到 10 列及以上**（可用 **`column-config-auto-min`** 改阈值）时，表格最右侧自动出现 **表头设置** 齿轮；悬停齿轮显示 **「配置字段」** 提示（可用 **`column-config-tooltip`** 修改）。  
+**可选：** `:enable-column-config="true"` 强制开启；`:enable-column-config="false"` 强制关闭。  
+**作用：** 弹层内可 **搜索字段**、**显示/未显示** 分组、开关显隐、拖拽排序（固定列不可拖不可关）；点 **确认** 后才会作用到表格并触发 **`columns-change`**，点 **取消** / 关闭 / 再次点齿轮则放弃本次修改。
 
 ### 2.2 不想要「查询」按钮，或想改按钮上的字
 
@@ -97,8 +98,8 @@ deviceListApi(params) {
 
 ### 2.3 搜索条件太多，一屏排不下
 
-**情况：** 想默认只露前几项，其余用「展开查询 / 收起」收起来。  
-**加：** `:collapse-search="true"`；**`:search-visible-max`** 可省略，省略时默认只露出前 **6** 条查询项，其余用「展开查询 / 收起」。需要别的条数时再写数字（如 `4`）。  
+**默认：** **`searchOption` 超过 6 条**（可用 **`search-visible-max`** 改阈值）时，自动只露出前若干项，并显示「展开查询 / 收起」。  
+**可选：** `:collapse-search="false"` 关闭折叠；`:collapse-search="true"` 强制开启（未传时亦默认开启，由条数决定）。  
 **可选：** `:expand-search-text`、`:fold-search-text` 改展开、收起两个词。
 
 ### 2.4 想改表格条纹、边框、高度，或表头颜色
@@ -109,7 +110,7 @@ deviceListApi(params) {
 ### 2.5 想在「查询 / 清除」右边加「设备入网」等自己的按钮
 
 **情况：** 和组件自带按钮排在一行，靠右。  
-**加：** 用插槽 **`search-extra`** 里写你的按钮（有「配置表单」时，设备入网一般在它左边那一块）。
+**加：** 用插槽 **`search-extra`** 里写你的按钮（与内置导出按钮同一右侧区域）。
 
 ```vue
 <template #search-extra>
@@ -139,7 +140,7 @@ exportDeviceList(params, headers) {
 
 **可选：** `export-button-text`、`export-button-type`（同导出组件的按钮类型）、`export-disabled`、`export-headers`、`export-before`（`(querys) => boolean`，返回 `false` 则不调接口）、`export-max-limit`（与当前列表 `total` 比较，超出则只提示不导出）。
 
-> 与 **§2.5 `search-extra` 里自己写导出** 可以并存；内置导出在 **`search-extra` 与「配置表单」之间**。
+> 与 **§2.5 `search-extra` 里自己写导出** 可以并存；内置导出在 **`search-extra` 右侧**。
 
 ### 2.7 接口里不叫 `list` / `num`，组件认不出来
 
@@ -274,7 +275,13 @@ deviceListTransformList(list) {
 | `transformList` | `null` | 入表前改 `list`。 |
 | `blockListRequest` | `false` | **`true`**：拦截组件内所有列表请求（`fetchList` 不调 `api`）；拉表用 **`fetchList({ force: true })`**。**`false`**：不拦截，照常请求。 |
 | `fetchOnCreated` | `true` | **`false`**：不在 **`created`** 里自动发起首次列表请求，由父页面择机 **`fetchList`**；查询、分页、`autoQuery` 等仍照常。 |
-| `enableColumnConfig` | `false` | `true` 显示「配置表单」弹窗。 |
+| `enableColumnConfig` | （未传） | 未传时 **`columns.length >= columnConfigAutoMin`** 自动显示；`true` / `false` 强制开/关。 |
+| `columnConfigAutoMin` | `10` | 自动显示表头设置的列数阈值（列数 **达到该值及以上** 时显示）。 |
+| `columnConfigTooltip` | `配置字段` | 表头设置齿轮图标悬停提示文案。 |
+| `columnConfigConfirmText` | `确认` | 表头设置弹层确认按钮文案。 |
+| `columnConfigCancelText` | `取消` | 表头设置弹层取消按钮文案。 |
+| `columnConfigTitle` | `表头设置` | 表头设置弹层标题。 |
+| `columnConfigSearchPlaceholder` | `搜索添加更多字段` | 表头设置内搜索框占位。 |
 | `showExport` | `false` | 为 `true` 且提供 `exportApi` 时，在搜索区右侧显示内置 **`exportFile`** 导出按钮。 |
 | `exportApi` | `null` | `(params, headers?) => Promise`，导出请求；成功返回需含 `success`、`object`（下载链接），与内置导出组件约定一致。 |
 | `exportButtonText` | `导出` | 导出按钮文案。 |
@@ -290,8 +297,8 @@ deviceListTransformList(list) {
 | `queryButtonText` | `查询` | 查询按钮文案。 |
 | `showClearQueryButton` | `true` | 是否显示清除查询。 |
 | `clearQueryButtonText` | `清除查询` | 清除按钮文案。 |
-| `collapseSearch` | `false` | 为 `true` 时启用搜索区折叠。 |
-| `searchVisibleMax` | `null` | 折叠时默认展示条数；**未传且已开启 `collapse-search` 时按 6**；显式传 ≤0 则不折叠。 |
+| `collapseSearch` | （未传） | 未传时 **`searchOption.length > searchVisibleMax`** 自动折叠；`true` / `false` 强制开/关。 |
+| `searchVisibleMax` | `null` | 折叠时默认展示条数，**未传按 6**；查询项 **超过** 该值时出现「展开查询」；显式传 ≤0 则不折叠。 |
 | `expandSearchText` / `foldSearchText` | 展开查询 / 收起 | 折叠按钮文案。 |
 
 ---
@@ -310,7 +317,7 @@ deviceListTransformList(list) {
 | `input` | **`clearable` 默认 `true`**（有内容时出现清除）；`false` 关闭。另有 `maxlength`、`height`；回车触发 `query` 事件（不自动 `fetchList`）；其它类型若设 `autoQuery: true` 则变更后自动查。 |
 | `select` | `options`（平铺选项）、`multiple`、`clearable`（默认 true）、`filterable`、`disabled`。 |
 | `cascader` | **`options`** 为级联树；**`props` 或 `cascaderProps`** 为 `el-cascader` 的字段映射；`filters[prop]` 为 **路径数组**；可选 `filterable`、`collapseTags`、`showAllLevels`、`separator`、`debounce`、`height`。 |
-| 日期范围 | **`daterange` 未传 `valueFormat` 时默认 `yyyy-MM-dd`**（`date` / `month` / `year` / `datetime` 等同理，与 Element 约定不符时请自行传 `valueFormat`）。**`startPlaceholder` / `endPlaceholder` 未传时默认「开始日期」「结束日期」**（与上浮文案一致）。**`unlinkPanels`** 默认 `true`（对应 Element `unlink-panels`，左右面板月份独立）；设为 `false` 则两面板联动。另有 `rangeSeparator`（默认「至」）；可选 **`gmtBeginKey` / `gmtEndKey`** 同步写带时间的起止字段。 |
+| 日期范围 | **`daterange` 未传 `valueFormat` 时默认 `yyyy-MM-dd`**（`date` / `month` / `year` / `datetime` 等同理，与 Element 约定不符时请自行传 `valueFormat`）。范围上浮文案用 **`placeholder: [开始文案, 结束文案]`**（与 input 字段名一致；亦支持 `placeholders`），未传时默认「开始日期」「结束日期」（兼容 `startPlaceholder` / `endPlaceholder`）。**`unlinkPanels`** 默认 `true`；另有 `rangeSeparator`（默认「至」）。可选 **`gmtKeys: [beginFilterKey, endFilterKey]`**（亦支持 `gmtKey`）同步写带 `00:00:00` / `23:59:59` 的起止字段（兼容 `gmtBeginKey` / `gmtEndKey`）。 |
 
 ---
 

package/package.json

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

package/src/components/CommonListPage.vue

@@ -96,9 +96,6 @@
             :disabled="exportDisabled"
           />
         </el-form-item>
-        <el-form-item v-if="enableColumnConfig" class="common-list-page__column-config-item">
-          <el-button type="primary" plain @click="openColumnConfig">配置表单</el-button>
-        </el-form-item>
       </div>
     </el-form>
 
@@ -134,8 +131,111 @@
           </template>
         </el-table-column>
       </template>
+      <el-table-column
+        v-if="showColumnConfig"
+        key="__wkjp-column-config__"
+        width="48"
+        fixed="right"
+        align="center"
+        class-name="common-list-page__config-col"
+      >
+        <template slot="header">
+          <span
+            v-popover:columnConfigPopover
+            class="column-config-trigger"
+            :class="{ 'is-active': columnConfigVisible }"
+            @click.stop="toggleColumnConfig"
+          >
+            <el-tooltip :content="columnConfigTooltip" placement="top" :enterable="false">
+              <span class="column-config-trigger__inner">
+                <i class="el-icon-setting"></i>
+              </span>
+            </el-tooltip>
+          </span>
+        </template>
+      </el-table-column>
     </el-table>
 
+    <el-popover
+      ref="columnConfigPopover"
+      v-model="columnConfigVisible"
+      placement="bottom-end"
+      width="320"
+      trigger="manual"
+      :append-to-body="true"
+      :popper-options="columnConfigPopperOptions"
+      popper-class="common-list-page-column-config-popper"
+      @show="onColumnConfigShow"
+    >
+      <div class="column-config-panel">
+              <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>
+              </div>
+              <el-input
+                v-model="columnConfigKeyword"
+                size="small"
+                prefix-icon="el-icon-search"
+                :placeholder="columnConfigSearchPlaceholder"
+                clearable
+                class="column-config-panel__search"
+              />
+              <div class="column-config-panel__body">
+              <div class="column-config-panel__section">
+                <div class="column-config-panel__section-title">显示字段</div>
+                <ul v-if="visibleConfigIndexes.length" class="column-config-panel__list">
+                  <li
+                    v-for="idx in visibleConfigIndexes"
+                    :key="configColumns[idx]._configKey"
+                    :data-config-idx="idx"
+                    class="column-config-panel__item"
+                    :class="{
+                      'column-config-panel__item--fixed': isFixedColumn(configColumns[idx]),
+                      'column-config-panel__item--dragging': dragFromIndex === idx,
+                      'column-config-panel__item--drag-over': dragOverIndex === idx
+                    }"
+                  >
+                    <i
+                      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>
+                    <el-switch
+                      :value="configColumns[idx]._visible !== false"
+                      :disabled="isFixedColumn(configColumns[idx])"
+                      @input="(val) => setColumnVisible(idx, val)"
+                    />
+                  </li>
+                </ul>
+                <div v-else class="column-config-panel__empty">暂无匹配字段</div>
+              </div>
+              <div v-if="hiddenConfigIndexes.length" class="column-config-panel__section">
+                <div class="column-config-panel__section-title">未显示字段</div>
+                <ul class="column-config-panel__list">
+                  <li
+                    v-for="idx in hiddenConfigIndexes"
+                    :key="configColumns[idx]._configKey"
+                    :data-config-idx="idx"
+                    class="column-config-panel__item column-config-panel__item--hidden"
+                  >
+                    <span class="column-config-panel__drag column-config-panel__drag--placeholder"></span>
+                    <span class="column-config-panel__label">{{ columnConfigLabel(configColumns[idx]) }}</span>
+                    <el-switch
+                      :value="configColumns[idx]._visible !== false"
+                      @input="(val) => setColumnVisible(idx, val)"
+                    />
+                  </li>
+                </ul>
+              </div>
+              </div>
+              <div class="column-config-panel__footer">
+                <el-button size="small" @click="cancelColumnConfig">{{ columnConfigCancelText }}</el-button>
+                <el-button type="primary" size="small" @click="confirmColumnConfig">{{ columnConfigConfirmText }}</el-button>
+              </div>
+            </div>
+    </el-popover>
+
     <el-pagination
       v-if="innerPagination"
       background
@@ -148,34 +248,6 @@
       @current-change="handlePageChange"
     ></el-pagination>
 
-    <el-dialog
-      title="配置表单"
-      :visible.sync="columnConfigVisible"
-      width="900px"
-      :close-on-click-modal="false"
-    >
-      <div class="column-config-desc">拖动调整列顺序，勾选控制是否显示</div>
-      <ul class="column-config-list">
-        <li
-          v-for="(col, index) in configColumns"
-          :key="col._configKey"
-          :draggable="!isFixedColumn(col)"
-          class="column-config-item"
-          :class="{ 'column-config-item--fixed': isFixedColumn(col) }"
-          @dragstart="onDragStart(index)"
-          @dragover.prevent
-          @drop="onDrop(index)"
-        >
-          <i class="el-icon-rank"></i>
-          <el-checkbox v-model="col._visible">{{ col.label || col.prop || col.slot }}</el-checkbox>
-          <el-tag v-if="isFixedColumn(col)" type="info" size="mini">固定</el-tag>
-        </li>
-      </ul>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="columnConfigVisible = false">取 消</el-button>
-        <el-button type="primary" @click="confirmColumnConfig">确 定</el-button>
-      </span>
-    </el-dialog>
   </section>
 </template>
 
@@ -228,7 +300,21 @@ export default {
      */
     pagination: { type: Object, default: null },
     tableAttrs: { type: Object, default: () => ({}) },
-    enableColumnConfig: { type: Boolean, default: false },
+    /**
+     * 表头设置开关：显式 `true` / `false` 强制开/关；
+     * 未传时列数 **达到 `columnConfigAutoMin`（默认 10）及以上** 自动显示。
+     */
+    enableColumnConfig: { type: Boolean, default: undefined },
+    /** 未传 `enable-column-config` 时，列数达到该值及以上则自动显示表头设置 */
+    columnConfigAutoMin: { type: Number, default: 10 },
+    /** 表头设置齿轮图标悬停提示 */
+    columnConfigTooltip: { type: String, default: "配置字段" },
+    columnConfigConfirmText: { type: String, default: "确认" },
+    columnConfigCancelText: { type: String, default: "取消" },
+    /** 表头设置弹层标题 */
+    columnConfigTitle: { type: String, default: "表头设置" },
+    /** 表头设置内搜索框占位 */
+    columnConfigSearchPlaceholder: { type: String, default: "搜索添加更多字段" },
     /** 表头背景色，对应 Element `header-cell-style` 的 backgroundColor，可被 tableAttrs.header-cell-style 覆盖 */
     tableHeaderBg: { type: String, default: "#e5e9f2" },
     /**
@@ -244,11 +330,11 @@ export default {
     showClearQueryButton: { type: Boolean, default: true },
     clearQueryButtonText: { type: String, default: "清除查询" },
     /**
-     * 为 true 且 `searchOption` 条数大于有效折叠上限时，默认只展示前若干条，其后显示「展开查询」；展开后显示全部并可「收起」。
-     * 开启折叠且未传 `searchVisibleMax` 时，默认展示 **6** 条。
+     * 搜索区折叠：显式 `true` / `false` 强制开/关；
+     * 未传时 **`searchOption` 超过 `searchVisibleMax`（默认 6）** 自动显示「展开查询」。
      */
-    collapseSearch: { type: Boolean, default: false },
-    /** 折叠时最多展示的查询项条数（含 slot）；未开启 `collapse-search` 时不生效；开启后未传本项则默认 **6**；显式传 ≤0 表示不折叠 */
+    collapseSearch: { type: Boolean, default: undefined },
+    /** 折叠时默认展示的查询项条数；未传时按 **6**；显式传 ≤0 表示不折叠 */
     searchVisibleMax: { type: Number, default: null },
     expandSearchText: { type: String, default: "展开查询" },
     foldSearchText: { type: String, default: "收起" },
@@ -282,7 +368,9 @@ export default {
         pSizes: [10, 20, 30, 50, 100, 200]
       },
       columnConfigVisible: false,
-      draggingIndex: -1,
+      columnConfigKeyword: "",
+      dragFromIndex: -1,
+      dragOverIndex: -1,
       configColumns: [],
       appliedColumns: [],
       /** 进入页时 filters 的快照，用于「清除查询」 */
@@ -291,10 +379,43 @@ export default {
     };
   },
   computed: {
+    columnsList() {
+      return Array.isArray(this.columns) ? this.columns : [];
+    },
+    /** 是否展示表头设置（齿轮列 + 列显隐/排序能力） */
+    showColumnConfig() {
+      if (this.enableColumnConfig === true) return true;
+      if (this.enableColumnConfig === false) return false;
+      const min = Number(this.columnConfigAutoMin);
+      const threshold = Number.isFinite(min) && min > 0 ? Math.floor(min) : 10;
+      return this.columnsList.length >= threshold;
+    },
     visibleColumns() {
-      const source = this.enableColumnConfig ? this.appliedColumns : this.columns;
+      const source = this.showColumnConfig ? this.appliedColumns : this.columns;
       return source.filter((item) => item && item.hidden !== true && item._visible !== false);
     },
+    visibleConfigIndexes() {
+      const indexes = [];
+      for (let i = 0; i < this.configColumns.length; i++) {
+        const col = this.configColumns[i];
+        if (col._visible !== false && this.matchesColumnConfigSearch(col)) indexes.push(i);
+      }
+      return indexes;
+    },
+    hiddenConfigIndexes() {
+      const indexes = [];
+      for (let i = 0; i < this.configColumns.length; i++) {
+        const col = this.configColumns[i];
+        if (col._visible === false && this.matchesColumnConfigSearch(col)) indexes.push(i);
+      }
+      return indexes;
+    },
+    columnConfigPopperOptions() {
+      return { boundariesElement: "body", gpuAcceleration: false };
+    },
+    columnConfigSearchActive() {
+      return String(this.columnConfigKeyword || "").trim() !== "";
+    },
     mergedHeaderCellStyle() {
       const baseBg = this.tableHeaderBg || "#e5e9f2";
       const base = { backgroundColor: baseBg };
@@ -311,9 +432,13 @@ export default {
     searchOptionList() {
       return Array.isArray(this.searchOption) ? this.searchOption : [];
     },
-    /** 有效的折叠上限：`collapse-search` 为 false 时不折叠；为 true 且未传 `searchVisibleMax` 时默认 6；显式传 ≤0 时不折叠 */
+    /** 是否启用搜索折叠（未传 `collapse-search` 时默认开启，由条数决定是否展示「展开查询」） */
+    searchCollapseEnabled() {
+      return this.collapseSearch !== false;
+    },
+    /** 有效的折叠上限：未传 `searchVisibleMax` 时默认 6；显式传 ≤0 时不折叠 */
     effectiveSearchVisibleMax() {
-      if (!this.collapseSearch) return null;
+      if (!this.searchCollapseEnabled) return null;
       var raw = this.searchVisibleMax;
       if (raw === null || raw === undefined || raw === "") {
         return 6;
@@ -325,7 +450,7 @@ export default {
     searchCollapseActive() {
       var max = this.effectiveSearchVisibleMax;
       return (
-        this.collapseSearch === true &&
+        this.searchCollapseEnabled &&
         max != null &&
         this.searchOptionList.length > max
       );
@@ -339,7 +464,7 @@ export default {
     },
     /** 右侧成组：扩展区插槽 + 导出 + 配置表单，整体贴右且相邻 */
     hasSearchRightCluster() {
-      return this.enableColumnConfig || this.hasSearchExtraSlot || this.showExportWithApi;
+      return this.hasSearchExtraSlot || this.showExportWithApi;
     },
     hasSearchExtraSlot() {
       var s = this.$slots["search-extra"];
@@ -394,7 +519,7 @@ export default {
       handler(list) {
         var len = Array.isArray(list) ? list.length : 0;
         var max = this.effectiveSearchVisibleMax;
-        if (!this.collapseSearch || max == null || len <= max) {
+        if (!this.searchCollapseEnabled || max == null || len <= max) {
           this.searchExpanded = false;
         }
       },
@@ -404,7 +529,7 @@ export default {
       this.searchExpanded = false;
     },
     collapseSearch(val) {
-      if (!val) this.searchExpanded = false;
+      if (val === false) this.searchExpanded = false;
     },
     columns: {
       immediate: true,
@@ -430,6 +555,9 @@ export default {
       this.fetchList();
     }
   },
+  beforeDestroy() {
+    this.removeColumnDragListeners();
+  },
   methods: {
     forwardSelectionChange(selection) {
       this.$emit("selection-change", selection);
@@ -498,17 +626,54 @@ export default {
       return [];
     },
     floatingLabelFor(item) {
-      const text = (item.label || item.placeholder || "").trim();
+      const ph = item.placeholder;
+      const placeholderText = typeof ph === "string" ? ph : "";
+      const text = (item.label || placeholderText || "").trim();
       return text || " ";
     },
+    /**
+     * 范围上浮文案：`placeholder` / `placeholders` 传 `[开始, 结束]`；
+     * 兼容 `startPlaceholder` / `endPlaceholder`。
+     */
+    resolveRangePlaceholders(item) {
+      if (!item) return ["", ""];
+      const pick = function (arr) {
+        if (!Array.isArray(arr) || arr.length < 2) return null;
+        return [
+          String(arr[0] != null ? arr[0] : "").trim(),
+          String(arr[1] != null ? arr[1] : "").trim()
+        ];
+      };
+      const fromArray =
+        pick(item.placeholders) ||
+        pick(item.rangePlaceholders) ||
+        (Array.isArray(item.placeholder) ? pick(item.placeholder) : null);
+      if (fromArray) return fromArray;
+      return [(item.startPlaceholder || "").trim(), (item.endPlaceholder || "").trim()];
+    },
     dateRangeStartText(item) {
-      const t = (item.startPlaceholder || "").trim();
+      const t = this.resolveRangePlaceholders(item)[0];
       return t || "开始日期";
     },
     dateRangeEndText(item) {
-      const t = (item.endPlaceholder || "").trim();
+      const t = this.resolveRangePlaceholders(item)[1];
       return t || "结束日期";
     },
+    /** `gmtKeys` / `gmtKey` 传 `[begin, end]`；兼容 `gmtBeginKey` / `gmtEndKey` */
+    resolveGmtKeys(item) {
+      if (!item) return null;
+      const pick = function (arr) {
+        if (!Array.isArray(arr) || arr.length < 2) return null;
+        const begin = arr[0];
+        const end = arr[1];
+        if (begin && end) return [begin, end];
+        return null;
+      };
+      const fromArray = pick(item.gmtKeys) || pick(item.gmtKey);
+      if (fromArray) return fromArray;
+      if (item.gmtBeginKey && item.gmtEndKey) return [item.gmtBeginKey, item.gmtEndKey];
+      return null;
+    },
     resolveInputString(item) {
       if (!item.prop) return "";
       const v = this.filters[item.prop];
@@ -520,13 +685,16 @@ export default {
     },
     handleFieldChange(item, value) {
       if (item.prop) this.$set(this.filters, item.prop, value);
-      if (item.gmtBeginKey && item.gmtEndKey) {
+      const gmtKeys = this.resolveGmtKeys(item);
+      if (gmtKeys) {
+        const beginKey = gmtKeys[0];
+        const endKey = gmtKeys[1];
         if (Array.isArray(value) && value.length === 2 && value[0] && value[1]) {
-          this.$set(this.filters, item.gmtBeginKey, `${value[0]} 00:00:00`);
-          this.$set(this.filters, item.gmtEndKey, `${value[1]} 23:59:59`);
+          this.$set(this.filters, beginKey, `${value[0]} 00:00:00`);
+          this.$set(this.filters, endKey, `${value[1]} 23:59:59`);
         } else {
-          this.$set(this.filters, item.gmtBeginKey, "");
-          this.$set(this.filters, item.gmtEndKey, "");
+          this.$set(this.filters, beginKey, "");
+          this.$set(this.filters, endKey, "");
         }
       }
       if (typeof item.onChange === "function") item.onChange(value);
@@ -681,37 +849,124 @@ export default {
       this.appliedColumns = sorted.map((col) => Object.assign({}, col));
       this.configColumns = sorted.map((col) => Object.assign({}, col));
     },
-    openColumnConfig() {
-      this.configColumns = this.sortConfigColumns(this.appliedColumns.map((col) => Object.assign({}, col)));
+    columnConfigLabel(col) {
+      return String((col && (col.label || col.prop || col.slot)) || "").trim();
+    },
+    matchesColumnConfigSearch(col) {
+      const kw = String(this.columnConfigKeyword || "")
+        .trim()
+        .toLowerCase();
+      if (!kw) return true;
+      return this.columnConfigLabel(col).toLowerCase().indexOf(kw) !== -1;
+    },
+    cloneConfigColumnsFrom(source) {
+      return this.sortConfigColumns(
+        (source || []).map((col) =>
+          Object.assign({}, col, {
+            _visible: col._visible !== false && col.hidden !== true
+          })
+        )
+      );
+    },
+    closeColumnConfigPopover() {
+      this.columnConfigVisible = false;
+      this.columnConfigKeyword = "";
+      this.dragFromIndex = -1;
+      this.dragOverIndex = -1;
+      this.removeColumnDragListeners();
+      const pop = this.$refs.columnConfigPopover;
+      if (pop && typeof pop.doClose === "function") pop.doClose();
+    },
+    toggleColumnConfig() {
+      if (this.columnConfigVisible) {
+        this.cancelColumnConfig();
+        return;
+      }
+      this.onColumnConfigShow();
       this.columnConfigVisible = true;
+      const pop = this.$refs.columnConfigPopover;
+      if (pop && typeof pop.doShow === "function") pop.doShow();
+    },
+    onColumnConfigShow() {
+      this.columnConfigKeyword = "";
+      this.dragFromIndex = -1;
+      this.dragOverIndex = -1;
+      this.configColumns = this.cloneConfigColumnsFrom(this.appliedColumns);
+    },
+    cancelColumnConfig() {
+      this.configColumns = this.cloneConfigColumnsFrom(this.appliedColumns);
+      this.closeColumnConfigPopover();
     },
     confirmColumnConfig() {
+      this.applyColumnConfig();
+      this.closeColumnConfigPopover();
+    },
+    canDragConfigIndex(idx) {
+      const col = this.configColumns[idx];
+      return col && !this.columnConfigSearchActive && !this.isFixedColumn(col) && col._visible !== false;
+    },
+    setColumnVisible(idx, visible) {
+      const col = this.configColumns[idx];
+      if (!col || this.isFixedColumn(col)) return;
+      this.$set(this.configColumns[idx], "_visible", visible === true);
+    },
+    removeColumnDragListeners() {
+      if (this._columnDragMoveHandler) {
+        document.removeEventListener("mousemove", this._columnDragMoveHandler);
+        this._columnDragMoveHandler = null;
+      }
+      if (this._columnDragUpHandler) {
+        document.removeEventListener("mouseup", this._columnDragUpHandler);
+        this._columnDragUpHandler = null;
+      }
+    },
+    onDragMouseDown(idx) {
+      if (!this.canDragConfigIndex(idx)) return;
+      this.dragFromIndex = idx;
+      this.dragOverIndex = idx;
+      this._columnDragMoveHandler = (e) => this.onDragMouseMove(e);
+      this._columnDragUpHandler = () => this.onDragMouseUp();
+      document.addEventListener("mousemove", this._columnDragMoveHandler);
+      document.addEventListener("mouseup", this._columnDragUpHandler);
+    },
+    onDragMouseMove(e) {
+      if (this.dragFromIndex < 0) return;
+      const target = document.elementFromPoint(e.clientX, e.clientY);
+      if (!target) return;
+      const row = target.closest("[data-config-idx]");
+      if (!row) return;
+      const overIdx = Number(row.getAttribute("data-config-idx"));
+      if (!Number.isFinite(overIdx) || !this.canDragConfigIndex(overIdx)) return;
+      this.dragOverIndex = overIdx;
+    },
+    onDragMouseUp() {
+      this.removeColumnDragListeners();
+      if (
+        this.dragFromIndex >= 0 &&
+        this.dragOverIndex >= 0 &&
+        this.dragFromIndex !== this.dragOverIndex
+      ) {
+        this.moveConfigColumnByIndex(this.dragFromIndex, this.dragOverIndex);
+      }
+      this.dragFromIndex = -1;
+      this.dragOverIndex = -1;
+    },
+    moveConfigColumnByIndex(from, to) {
+      const cols = this.configColumns.slice();
+      if (this.isFixedColumn(cols[from]) || this.isFixedColumn(cols[to])) return;
+      const moving = cols[from];
+      cols.splice(from, 1);
+      cols.splice(to, 0, moving);
+      this.configColumns = cols;
+    },
+    applyColumnConfig() {
       this.appliedColumns = this.configColumns.map((col) =>
         Object.assign({}, col, {
           hidden: col._visible === false
         })
       );
-      this.columnConfigVisible = false;
       this.$emit("columns-change", this.appliedColumns);
     },
-    onDragStart(index) {
-      if (this.isFixedColumn(this.configColumns[index])) return;
-      this.draggingIndex = index;
-    },
-    onDrop(targetIndex) {
-      if (this.draggingIndex < 0 || this.draggingIndex === targetIndex) return;
-      const target = this.configColumns[targetIndex];
-      const moving = this.configColumns[this.draggingIndex];
-      if (this.isFixedColumn(target) || this.isFixedColumn(moving)) {
-        this.draggingIndex = -1;
-        return;
-      }
-      const next = this.configColumns.slice();
-      next[this.draggingIndex] = target;
-      next[targetIndex] = moving;
-      this.configColumns = next;
-      this.draggingIndex = -1;
-    },
     isFixedColumn(col) {
       return col && (col.fixed === "left" || col.fixed === "right" || col.configFixed === true);
     },
@@ -745,9 +1000,9 @@ export default {
   align-items: center;
   width: 100%;
   box-sizing: border-box;
-  margin-bottom: 14px;
+  /*margin-bottom: 14px;*/
   padding-bottom: 14px;
-  border-bottom: 1px solid #f0f2f5;
+  /*border-bottom: 1px solid #f0f2f5;*/
 }
 
 /* 覆盖业务里 el-form-item.right 等 float，避免与右侧成组抢布局 */
@@ -772,8 +1027,7 @@ export default {
   margin-right: 0 !important;
 }
 
-.common-list-page /deep/ .common-list-page__export-item,
-.common-list-page /deep/ .common-list-page__column-config-item {
+.common-list-page /deep/ .common-list-page__export-item {
   margin-left: 0 !important;
   margin-right: 0 !important;
   flex-shrink: 0;
@@ -1103,32 +1357,198 @@ export default {
   line-height: 28px;
 }
 
-.column-config-desc {
-  margin-bottom: 10px;
+.common-list-page /deep/ .common-list-page__config-col .cell {
+  padding: 0 !important;
+  overflow: visible;
+}
+
+.common-list-page /deep/ .common-list-page__config-col th.el-table__cell {
+  padding: 0 !important;
+  overflow: visible;
+}
+
+.column-config-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 4px;
+  color: #606266;
+  cursor: pointer;
+  transition: color 0.2s ease, background 0.2s ease;
+}
+
+.column-config-trigger__inner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.column-config-trigger:hover,
+.column-config-trigger.is-active {
+  color: #409eff;
+  background: #ecf5ff;
+}
+
+.column-config-trigger .el-icon-setting {
+  font-size: 16px;
+}
+
+.column-config-panel {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  max-height: min(70vh, calc(100vh - 120px));
+}
+
+.column-config-panel__body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  margin-right: -4px;
+  padding-right: 4px;
+}
+
+.column-config-panel__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.column-config-panel__title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.column-config-panel__close {
+  font-size: 16px;
   color: #909399;
+  cursor: pointer;
 }
-.column-config-list {
-  max-height: 420px;
-  overflow: auto;
-  padding: 0;
-  margin: 0;
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 8px;
+
+.column-config-panel__close:hover {
+  color: #606266;
 }
-.column-config-item {
+
+.column-config-panel__search {
+  margin-bottom: 12px;
+}
+
+.column-config-panel__section + .column-config-panel__section {
+  margin-top: 14px;
+  padding-top: 14px;
+  border-top: 1px solid #ebeef5;
+}
+
+.column-config-panel__section-title {
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: #909399;
+}
+
+.column-config-panel__list {
+  margin: 0;
+  padding: 0;
   list-style: none;
+}
+
+.column-config-panel__item {
   display: flex;
   align-items: center;
   gap: 8px;
-  border: 1px solid #ebeef5;
+  min-height: 36px;
+  padding: 4px 2px;
   border-radius: 4px;
-  padding: 8px 10px;
+}
+
+.column-config-panel__item--dragging {
+  background: #ecf5ff;
+}
+
+.column-config-panel__item--drag-over {
+  background: #f5f7fa;
+}
+
+.column-config-panel__item[draggable="true"] {
   cursor: move;
+}
+
+.column-config-panel__item--fixed {
+  cursor: default;
+}
+
+.column-config-panel__drag {
+  flex-shrink: 0;
+  width: 16px;
+  font-size: 14px;
+  color: #c0c4cc;
+  cursor: grab;
+  touch-action: none;
+}
+
+.column-config-panel__drag:active {
+  cursor: grabbing;
+}
+
+.column-config-panel__drag.is-disabled,
+.column-config-panel__drag--placeholder {
+  visibility: hidden;
+}
+
+.column-config-panel__label {
+  flex: 1;
   min-width: 0;
+  font-size: 13px;
+  color: #303133;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.column-config-item--fixed {
-  background: #f5f7fa;
-  cursor: not-allowed;
+
+.column-config-panel__empty {
+  padding: 8px 0;
+  font-size: 12px;
+  color: #c0c4cc;
+  text-align: center;
+}
+
+.column-config-panel__footer {
+  display: flex;
+  flex-shrink: 0;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #ebeef5;
+}
+</style>
+
+<style>
+.common-list-page-column-config-popper {
+  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;
+}
+
+.common-list-page-column-config-popper .el-switch {
+  pointer-events: auto !important;
+}
+
+.column-config-panel__switch {
+  flex-shrink: 0;
+  position: relative;
+  z-index: 2;
+  pointer-events: auto;
+}
+
+.common-list-page-column-config-popper .column-config-panel__switch .el-switch {
+  pointer-events: auto;
 }
 </style>