wkjp-list-page 1.0.7 → 1.0.9

package/README.md

@@ -55,8 +55,8 @@ Vue.use(CommonListPage);
 // data 示例（命名仅作示例，按你页面改）
 deviceListFilters: { keyword: "", status: "" },
 deviceListSearchOption: [
-  { type: "input", prop: "keyword", label: "关键词", autoQuery: false },
-  { type: "select", prop: "status", label: "状态", options: [{ label: "全部", value: "" }], autoQuery: false }
+  { type: "input", prop: "keyword", label: "关键词" },
+  { type: "select", prop: "status", label: "状态", options: [{ label: "全部", value: "" }], autoQuery: true }
 ],
 deviceListColumns: [
   { type: "index", label: "#", width: 55 },
@@ -275,6 +275,7 @@ deviceListTransformList(list) {
 | `exportMaxLimit` | `null` | 若设置：当前列表 `total` 超过该值则提示不导出。 |
 | `tableAttrs` | `{}` | 透传 `el-table`。 |
 | `tableHeaderBg` | `#e5e9f2` | 表头背景色。 |
+| `cellEmptyText` | `--` | 非 slot 列空值占位；列上可用 `emptyText` / `defaultText` 单独覆盖。 |
 | `showQueryButton` | `true` | 是否显示查询按钮。 |
 | `queryButtonText` | `查询` | 查询按钮文案。 |
 | `showClearQueryButton` | `true` | 是否显示清除查询。 |
@@ -294,12 +295,12 @@ deviceListTransformList(list) {
 | `prop` | 对应 `filters[prop]`（`slot` 可省略）。 |
 | `label` / `placeholder` | 浮动标签，优先 `label`。 |
 | `width` | 宽度（数字，内部会加 `px`）。 |
-| `autoQuery` | 默认 `true`；`false` 时变更后不自动查（需点查询或回车）。 |
+| `autoQuery` | 默认 `false`；为 `true` 时选择/日期等变更后自动 `fetchList`（重置第 1 页）。 |
 | `onChange` | `(val) => void`。 |
-| `input` | `maxlength`、`height`。回车触发 `query` 事件（不自动 `fetchList`，需自行处理或依赖其它筛选项的 `autoQuery`）。 |
+| `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`。 |
-| 日期范围 | `valueFormat`（默认 `yyyy-MM-dd`）、`startPlaceholder`、`endPlaceholder`；可选 **`gmtBeginKey` / `gmtEndKey`** 同步写带时间的起止字段。 |
+| 日期范围 | **`daterange` 未传 `valueFormat` 时默认 `yyyy-MM-dd`**（`date` / `month` / `year` / `datetime` 等同理，与 Element 约定不符时请自行传 `valueFormat`）。**`startPlaceholder` / `endPlaceholder` 未传时默认「开始日期」「结束日期」**（与上浮文案一致）。**`unlinkPanels`** 默认 `true`（对应 Element `unlink-panels`，左右面板月份独立）；设为 `false` 则两面板联动。另有 `rangeSeparator`（默认「至」）；可选 **`gmtBeginKey` / `gmtEndKey`** 同步写带时间的起止字段。 |
 
 ---
 
@@ -308,11 +309,15 @@ deviceListTransformList(list) {
 非 `slot` 列会 **透传** 到 `el-table-column`（`prop`、`label`、`width`、`fixed` 等）。  
 内置列类型 **`selection` / `index` / `expand`** 不做自定义单元格包装。
 
+最简写法：**`{ prop: 'name', label: '姓名' }`**，值为 `null` / `undefined` / `''`（以及 `textFormatter` 得到空串）时，默认显示 **`--`**；表格上 **`cell-empty-text`** 可改全局占位；列上 **`emptyText`**（优先）或 **`defaultText`** 可单独改该列。
+
 | 字段 | 说明 |
 |------|------|
 | `type: 'slot'` + `slot` | 自定义列，父组件具名插槽。 |
 | `hidden` | 隐藏。 |
-| `valueGetter` / `textFormatter` / `defaultText` | 展示用（非 slot 列）。 |
+| `valueGetter` | `(row, index) => any`，取展示用原始值（不填则用 `row[prop]`）。 |
+| `textFormatter` | `(value, row, index) => any`，格式化后若为空仍走空值占位。 |
+| `emptyText` / `defaultText` | 空值时显示文案；**`emptyText` 优先**；都不设则用 **`cell-empty-text`**（默认 `--`）。 |
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wkjp-list-page",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Vue2 + ElementUI CommonListPage component",
   "main": "src/index.js",
   "module": "src/index.js",
@@ -40,7 +40,5 @@
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.3"
   },
-  "dependencies": {
-    "qs": "6.11.2"
-  }
+  "dependencies": {}
 }

package/src/components/CommonListPage.vue

@@ -13,6 +13,7 @@
           :style="{ width: `${item.width || 150}px` }"
           :maxlength="item.maxlength != null ? item.maxlength : ''"
           :height="item.height || '32px'"
+          :clearable="item.clearable !== false"
           @input="(v) => handleSearchInput(item, v)"
           @enter="emitQuery"
         />
@@ -57,14 +58,14 @@
           v-else-if="isDatePicker(item.type)"
           :value="resolveValue(item)"
           :type="item.type || 'date'"
-          :unlink-panels="item.unlinkPanels !== false"
+          :unlink-panels="resolveSearchUnlinkPanels(item)"
           :editable="item.editable === true"
           :range-separator="item.rangeSeparator || '至'"
           :style="{ width: `${item.width || (item.type === 'daterange' || item.type === 'datetimerange' ? 300 : 150)}px` }"
           :label="floatingLabelFor(item)"
           :start-text="dateRangeStartText(item)"
           :end-text="dateRangeEndText(item)"
-          :value-format="item.valueFormat || 'yyyy-MM-dd'"
+          :value-format="resolveSearchDateValueFormat(item)"
           :height="item.height || '32px'"
           @input="(val) => handleFieldChange(item, val)"
         />
@@ -220,6 +221,11 @@ export default {
     enableColumnConfig: { type: Boolean, default: false },
     /** 表头背景色，对应 Element `header-cell-style` 的 backgroundColor，可被 tableAttrs.header-cell-style 覆盖 */
     tableHeaderBg: { type: String, default: "#e5e9f2" },
+    /**
+     * 非 slot 列：值为 `null` / `undefined` / `''`，或 `textFormatter` 得到上述空值时的占位。
+     * 列上可用 **`emptyText`**（优先）或 **`defaultText`** 覆盖；仅写 `{ prop, label }` 时默认显示 `--`。
+     */
+    cellEmptyText: { type: String, default: "--" },
     /** 是否显示搜索区「查询」按钮；点击会 `fetchList({ resetPage: true })` */
     showQueryButton: { type: Boolean, default: true },
     /** 主查询按钮文案 */
@@ -402,7 +408,7 @@ export default {
       return col && ["selection", "index", "expand"].indexOf(col.type) !== -1;
     },
     tableColumnBind(col) {
-      var omit = ["valueGetter", "textFormatter", "defaultText", "hidden", "_visible", "_configKey"];
+      var omit = ["valueGetter", "textFormatter", "defaultText", "emptyText", "hidden", "_visible", "_configKey"];
       var rest = {};
       Object.keys(col || {}).forEach(function (k) {
         if (omit.indexOf(k) === -1) rest[k] = col[k];
@@ -494,23 +500,54 @@ export default {
         }
       }
       if (typeof item.onChange === "function") item.onChange(value);
-      if (item.autoQuery !== false) {
+      if (item.autoQuery === true) {
         this.fetchList({ resetPage: true });
       }
     },
     isDatePicker(type) {
       return ["date", "daterange", "datetime", "datetimerange", "month", "year"].includes(type);
     },
+    /**
+     * 有 `valueFormat`（非空字符串）则用之；否则 **`daterange` 与 `date` 等** 默认 **`yyyy-MM-dd`**（与历史 `item.valueFormat || 'yyyy-MM-dd'` 一致）。
+     */
+    resolveSearchDateValueFormat(item) {
+      if (!item) return "yyyy-MM-dd";
+      const vf = item.valueFormat;
+      if (vf != null && String(vf).trim() !== "") return vf;
+      return "yyyy-MM-dd";
+    },
+    /**
+     * 对应 Element `unlink-panels`：**默认 `true`**（左右面板月份不联动）；仅当 **`unlinkPanels: false`** 时为 `false`。
+     */
+    resolveSearchUnlinkPanels(item) {
+      return item.unlinkPanels !== false;
+    },
+    isCellDisplayEmpty(display) {
+      return display === null || display === undefined || display === "";
+    },
     resolveCellText(col, row, index) {
-      const value = typeof col.valueGetter === "function" ? col.valueGetter(row, index) : row[col.prop];
-      if (typeof col.textFormatter === "function") return col.textFormatter(value, row, index);
-      if (value === null || value === undefined || value === "") return col.defaultText !== undefined ? col.defaultText : "--";
-      return value;
+      const raw = typeof col.valueGetter === "function" ? col.valueGetter(row, index) : row[col.prop];
+      let display;
+      if (typeof col.textFormatter === "function") {
+        display = col.textFormatter(raw, row, index);
+      } else {
+        display = raw;
+      }
+      if (this.isCellDisplayEmpty(display)) {
+        if (col.emptyText !== undefined && col.emptyText !== null) return col.emptyText;
+        if (col.defaultText !== undefined && col.defaultText !== null) return col.defaultText;
+        return this.cellEmptyText;
+      }
+      return display;
     },
     omitSlotType(col) {
       const rest = Object.assign({}, col);
       delete rest.type;
       delete rest.slot;
+      delete rest.valueGetter;
+      delete rest.textFormatter;
+      delete rest.defaultText;
+      delete rest.emptyText;
       return rest;
     },
     handleSizeChange(size) {

package/src/components/ExportFile.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import qs from "qs";
+import { stringifyExportQuerys } from "../utils/stringifyExportQuerys";
 import { createDownLoadLink } from "../utils/createDownLoadLink";
 
 export default {
@@ -163,8 +163,7 @@ export default {
             /* ignore */
           }
           _export.link =
-            `${_pathPrefix}?${qs.stringify(_parameters, {
-              indices: false,
+            `${_pathPrefix}?${stringifyExportQuerys(_parameters, {
               skipNulls: true,
             })}` + (auth ? `&authorization=${auth}` : "");
         }

package/src/components/FloatingDatePicker.vue

@@ -16,8 +16,8 @@
       :type="type"
       :value-format="valueFormat"
       :placeholder="isRange ? undefined : singlePlaceholder"
-      :start-placeholder="isRange ? rangePh : undefined"
-      :end-placeholder="isRange ? rangePh : undefined"
+      :start-placeholder="nativeStartPlaceholder"
+      :end-placeholder="nativeEndPlaceholder"
       class="floating-date-picker-inner"
       :style="editorStyle"
       @input="onInput"
@@ -70,8 +70,25 @@ export default {
     isRange() {
       return RANGE_TYPES.indexOf(this.type) !== -1;
     },
-    rangePh() {
-      return " ";
+    /** 与 Element `start-placeholder` 对齐；未单独传 attrs 时用 `startText`（默认「开始日期」） */
+    nativeStartPlaceholder() {
+      if (!this.isRange) return undefined;
+      const fromAttr =
+        this.$attrs.startPlaceholder !== undefined
+          ? this.$attrs.startPlaceholder
+          : this.$attrs["start-placeholder"];
+      if (fromAttr != null && String(fromAttr).trim() !== "") return fromAttr;
+      const t = (this.startText || "").trim();
+      return t || "开始日期";
+    },
+    /** 与 Element `end-placeholder` 对齐；未单独传 attrs 时用 `endText`（默认「结束日期」） */
+    nativeEndPlaceholder() {
+      if (!this.isRange) return undefined;
+      const fromAttr =
+        this.$attrs.endPlaceholder !== undefined ? this.$attrs.endPlaceholder : this.$attrs["end-placeholder"];
+      if (fromAttr != null && String(fromAttr).trim() !== "") return fromAttr;
+      const t = (this.endText || "").trim();
+      return t || "结束日期";
     },
     singlePlaceholder() {
       return " ";

package/src/components/FloatingInput.vue

@@ -1,7 +1,11 @@
 <template>
   <div
     class="floating-label-wrap"
-    :class="{ 'is-focused': isFocused, 'has-value': hasValue }"
+    :class="{
+      'is-focused': isFocused,
+      'has-value': hasValue,
+      'has-clear-btn': clearable && hasValue
+    }"
   >
     <input
       ref="input"
@@ -16,6 +20,17 @@
       @blur="handleBlur"
       @keyup.enter="$emit('enter')"
     />
+    <button
+      v-if="clearable && hasValue"
+      type="button"
+      class="floating-input__clear"
+      tabindex="-1"
+      aria-label="清除"
+      @mousedown.prevent
+      @click="clearInput"
+    >
+      <i class="el-icon-circle-close"></i>
+    </button>
     <label class="floating-label">{{ label }}</label>
   </div>
 </template>
@@ -44,6 +59,11 @@ export default {
       type: [String, Number],
       default: "32px",
     },
+    /** 为 true 且有内容时显示清除按钮；与 `searchOption` 里 `input` 默认 `clearable: true` 对齐 */
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -73,6 +93,13 @@ export default {
     handleBlur() {
       this.isFocused = false;
     },
+    clearInput() {
+      this.hasValue = false;
+      this.$emit("input", "");
+      this.$nextTick(() => {
+        if (this.$refs.input) this.$refs.input.focus();
+      });
+    },
     checkValue() {
       this.hasValue = !!this.value;
     },
@@ -142,6 +169,39 @@ export default {
   font-family: inherit;
 }
 
+.floating-label-wrap.has-clear-btn .text-box {
+  padding-right: 30px;
+}
+
+.floating-input__clear {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  color: #c0c4cc;
+  cursor: pointer;
+  border-radius: 50%;
+  line-height: 1;
+}
+
+.floating-input__clear:hover {
+  color: #909399;
+}
+
+.floating-input__clear i {
+  font-size: 14px;
+}
+
 .floating-label-wrap .text-box:hover {
   border-color: #c0c4cc;
 }

package/src/utils/stringifyExportQuerys.js

@@ -0,0 +1,27 @@
+/**
+ * 导出链接查询串（替代 `qs.stringify`，避免旧构建链解析 `node_modules` 里 async generator 等新语法）。
+ * 行为对齐原用法：`indices: false`（数组同一 key 多次）、`skipNulls: true`。
+ *
+ * @param {Record<string, unknown>} obj
+ * @param {{ skipNulls?: boolean }} [options] 仅 `skipNulls`；数组为同一 key 多次 append（对齐 `qs` 的 `indices: false`）。
+ * @returns {string}
+ */
+export function stringifyExportQuerys(obj, options) {
+  var opts = options || {};
+  var skipNulls = opts.skipNulls === true;
+  var sp = new URLSearchParams();
+  if (!obj || typeof obj !== "object") return "";
+  Object.keys(obj).forEach(function (key) {
+    var val = obj[key];
+    if (skipNulls && (val === null || val === undefined)) return;
+    if (Array.isArray(val)) {
+      val.forEach(function (item) {
+        if (skipNulls && (item === null || item === undefined)) return;
+        sp.append(key, item == null ? "" : String(item));
+      });
+    } else {
+      sp.append(key, val == null ? "" : String(val));
+    }
+  });
+  return sp.toString();
+}