wkjp-list-page 1.0.28 → 1.0.30

package/package.json

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

package/src/components/CommonListPage.vue

@@ -6,6 +6,19 @@
         :key="searchItemKey(item, index)"
       >
         <slot v-if="item.type === 'slot'" :name="item.slot" :item="item" :filters="filters"></slot>
+        <floating-search-input
+          v-else-if="isSearchInputWithAppend(item)"
+          :label="floatingLabelFor(item)"
+          :value="resolveInputString(item)"
+          :style="{ width: `${item.width || 150}px` }"
+          :maxlength="item.maxlength != null ? item.maxlength : ''"
+          :height="item.height || '32px'"
+          :clearable="item.clearable !== false"
+          :search-icon="item.searchIcon || 'el-icon-search'"
+          :search-button-title="item.searchButtonTitle || '查询'"
+          @input="(v) => handleSearchInput(item, v)"
+          @search="emitQuery"
+        />
         <floating-input
           v-else-if="item.type === 'input'"
           :label="floatingLabelFor(item)"
@@ -134,6 +147,7 @@
           :column="col"
           :resolve-cell-text="resolveCellText"
           :column-bind="tableColumnBind"
+          :parent-scoped-slots="$scopedSlots"
         />
         <el-table-column
           v-else-if="col.type !== 'slot' && isBuiltinCellColumn(col)"
@@ -309,6 +323,7 @@
 
 <script>
 import FloatingInput from "./FloatingInput.vue";
+import FloatingSearchInput from "./FloatingSearchInput.vue";
 import FloatingSelect from "./FloatingSelect.vue";
 import FloatingDatePicker from "./FloatingDatePicker.vue";
 import FloatingCascader from "./FloatingCascader.vue";
@@ -319,6 +334,7 @@ export default {
   name: "CommonListPage",
   components: {
     FloatingInput,
+    FloatingSearchInput,
     FloatingSelect,
     FloatingDatePicker,
     FloatingCascader,
@@ -327,6 +343,12 @@ export default {
   },
   props: {
     filters: { type: Object, required: true },
+    /**
+     * 重置基准：首次传入的默认查询条件（深拷贝后冻结，后续查询怎么改都不影响「重置」）。
+     * 建议传入页面 `data` 里单独保存的一份默认值对象（勿与 `filters` 共用同一引用）。
+     * 未传时：在实例首次初始化时对当时的 `filters` 做一次快照（`v-if` 反复挂载时仍会按每次挂载时的 filters 快照，多 tab 请务必传本项）。
+     */
+    initialFilters: { type: Object, default: null },
     searchOption: { type: Array, default: () => [] },
     columns: { type: Array, default: () => [] },
     /**
@@ -386,7 +408,7 @@ export default {
     showQueryButton: { type: Boolean, default: true },
     /** 主查询按钮文案 */
     queryButtonText: { type: String, default: "查询" },
-    /** 是否显示「重置」按钮（在查询按钮右侧）：将 `filters` 恢复为进入页面时的快照 */
+    /** 是否显示「重置」按钮（在查询按钮右侧）：将 `filters` 恢复为 `initialFilters`（或首次快照） */
     showClearQueryButton: { type: Boolean, default: true },
     clearQueryButtonText: { type: String, default: "重置" },
     /**
@@ -463,9 +485,9 @@ export default {
       columnConfigPanelMaxHeight: null,
       configColumns: [],
       appliedColumns: [],
-      /** 进入页时 filters 的快照，用于「重置」 */
+      /** 重置基准快照（深拷贝后冻结，仅初始化时写入一次） */
       initialFiltersSnapshot: null,
-      initialFiltersCaptured: false
+      resetBaselineLocked: false
     };
   },
   computed: {
@@ -661,10 +683,25 @@ export default {
           this.innerPagination = Object.assign({}, this.innerPagination, v);
         }
       }
+    },
+    initialFilters: {
+      immediate: true,
+      handler(val) {
+        if (this.resetBaselineLocked) return;
+        if (val && typeof val === "object") {
+          this.lockResetBaseline(val);
+        }
+      }
     }
   },
   created() {
-    this.captureInitialFilters();
+    if (!this.resetBaselineLocked) {
+      const baseline =
+        this.initialFilters && typeof this.initialFilters === "object"
+          ? this.initialFilters
+          : this.filters;
+      this.lockResetBaseline(baseline);
+    }
     this.applyInnerPaginationConfig();
     if (this.fetchOnCreated) {
       this.fetchList();
@@ -775,25 +812,55 @@ export default {
       const id = item && (item.slot || item.prop || item.type || "");
       return "search-" + id + "-" + index;
     },
+    /** `type: 'inputSearch'` 或 `type: 'input'` 且 `appendSearch: true` */
+    isSearchInputWithAppend(item) {
+      if (!item) return false;
+      if (item.type === "inputSearch") return true;
+      return item.type === "input" && item.appendSearch === true;
+    },
     emitQuery() {
       this.$emit("query");
     },
     handleQueryClick() {
       this.fetchList({ resetPage: true });
     },
-    captureInitialFilters() {
-      if (this.initialFiltersCaptured || !this.filters) return;
+    /**
+     * 将 baseline 深拷贝为重置基准，仅首次调用生效；之后 filters 怎么变都不更新快照。
+     * @param {Object} baseline 优先使用 `initialFilters`，否则为首次 `filters`
+     */
+    lockResetBaseline(baseline) {
+      if (this.resetBaselineLocked || !this.filters) return;
+      if (!baseline || typeof baseline !== "object") return;
       try {
         const snap = {};
-        Object.keys(this.filters).forEach((key) => {
-          snap[key] = this.cloneFilterValue(this.filters[key]);
+        const keys = {};
+        Object.keys(this.filters).forEach(function (k) {
+          keys[k] = true;
+        });
+        Object.keys(baseline).forEach(function (k) {
+          keys[k] = true;
+        });
+        Object.keys(keys).forEach((key) => {
+          const val = Object.prototype.hasOwnProperty.call(baseline, key)
+            ? baseline[key]
+            : this.filters[key];
+          snap[key] = this.cloneFilterValue(val);
         });
         this.initialFiltersSnapshot = snap;
-        this.initialFiltersCaptured = true;
+        this.resetBaselineLocked = true;
       } catch (e) {
         this.initialFiltersSnapshot = null;
       }
     },
+    /** @deprecated 请使用 lockResetBaseline */
+    captureInitialFilters() {
+      if (this.resetBaselineLocked) return;
+      const baseline =
+        this.initialFilters && typeof this.initialFilters === "object"
+          ? this.initialFilters
+          : this.filters;
+      this.lockResetBaseline(baseline);
+    },
     cloneFilterValue(val) {
       if (val === null || val === undefined) return val;
       if (typeof val !== "object") return val;
@@ -1803,6 +1870,25 @@ export default {
   color: #409eff;
 }
 
+.common-list-page /deep/ .el-button--primary.is-disabled,
+.common-list-page /deep/ .el-button--primary.is-disabled:hover,
+.common-list-page /deep/ .el-button--primary.is-disabled:focus,
+.common-list-page /deep/ .el-button--primary:disabled {
+  background-color: #a0cfff;
+  border-color: #a0cfff;
+  color: #fff;
+  cursor: not-allowed;
+}
+
+.common-list-page /deep/ .el-button--primary.is-plain.is-disabled,
+.common-list-page /deep/ .el-button--primary.is-plain.is-disabled:hover,
+.common-list-page /deep/ .el-button--primary.is-plain:disabled {
+  background-color: #ecf5ff;
+  border-color: #ebeef5;
+  color: #a0cfff;
+  cursor: not-allowed;
+}
+
 /* ---------- 列表表格（极细外框兜底：空数据区不塌陷、无粗网格线） ---------- */
 .common-list-page /deep/ .el-table {
   overflow: hidden;
@@ -1911,6 +1997,28 @@ export default {
   color: #66b1ff;
 }
 
+.common-list-page /deep/ .el-table .cell .el-button--text.is-disabled,
+.common-list-page /deep/ .el-table .cell .el-button--text.is-disabled:hover,
+.common-list-page /deep/ .el-table .cell .el-button--text.is-disabled:focus,
+.common-list-page /deep/ .el-table .cell .el-button--text:disabled {
+  color: #c0c4cc !important;
+  cursor: not-allowed;
+}
+
+.common-list-page /deep/ .el-table .cell .el-button--text.el-button--danger.is-disabled,
+.common-list-page /deep/ .el-table .cell .el-button--text.el-button--danger.is-disabled:hover,
+.common-list-page /deep/ .el-table .cell .el-button--text.el-button--danger:disabled {
+  color: #fab6b6 !important;
+  cursor: not-allowed;
+}
+
+.common-list-page /deep/ .el-table .cell .el-button--text.el-button--warning.is-disabled,
+.common-list-page /deep/ .el-table .cell .el-button--text.el-button--warning.is-disabled:hover,
+.common-list-page /deep/ .el-table .cell .el-button--text.el-button--warning:disabled {
+  color: #f3d19e !important;
+  cursor: not-allowed;
+}
+
 .common-list-page /deep/ .el-pagination {
   margin-top: 14px;
   padding-right: 4px;

package/src/components/FloatingSearchInput.vue

@@ -0,0 +1,303 @@
+<template>
+  <div
+    class="floating-label-wrap floating-search-input"
+    :class="{
+      'is-focused': isFocused,
+      'has-value': hasValue,
+      'has-clear-btn': clearable && hasValue,
+    }"
+  >
+    <div class="floating-search-input__group">
+      <div class="floating-search-input__field">
+        <input
+          ref="input"
+          :type="type"
+          placeholder=" "
+          :value="value"
+          class="text-box"
+          :style="inputStyle"
+          :maxlength="maxlength"
+          @input="handleInput"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @keyup.enter="handleEnter"
+        />
+        <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>
+      </div>
+      <button
+        type="button"
+        class="floating-search-input__append"
+        tabindex="-1"
+        :title="searchButtonTitle"
+        @click="handleSearch"
+      >
+        <i :class="searchIcon"></i>
+      </button>
+    </div>
+    <label class="floating-label">{{ label }}</label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "FloatingSearchInput",
+  props: {
+    type: {
+      type: String,
+      default: "text",
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: String,
+      default: "",
+    },
+    maxlength: {
+      type: [String, Number],
+      default: "",
+    },
+    height: {
+      type: [String, Number],
+      default: "32px",
+    },
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+    searchIcon: {
+      type: String,
+      default: "el-icon-search",
+    },
+    searchButtonTitle: {
+      type: String,
+      default: "查询",
+    },
+  },
+  data() {
+    return {
+      isFocused: false,
+      hasValue: false,
+    };
+  },
+  computed: {
+    inputStyle() {
+      const height =
+        typeof this.height === "number" ? `${this.height}px` : this.height;
+      return {
+        height: height,
+        lineHeight: height,
+      };
+    },
+  },
+  methods: {
+    handleInput(event) {
+      const value = event.target.value;
+      this.hasValue = !!value;
+      this.$emit("input", value);
+    },
+    handleFocus() {
+      this.isFocused = true;
+    },
+    handleBlur() {
+      this.isFocused = false;
+    },
+    clearInput() {
+      this.hasValue = false;
+      this.$emit("input", "");
+      this.$nextTick(() => {
+        if (this.$refs.input) this.$refs.input.focus();
+      });
+    },
+    handleEnter() {
+      this.$emit("enter");
+    },
+    handleSearch() {
+      this.$emit("search");
+    },
+    checkValue() {
+      this.hasValue = !!this.value;
+    },
+  },
+  mounted() {
+    this.checkValue();
+  },
+  watch: {
+    value() {
+      this.checkValue();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.floating-search-input {
+  width: 100%;
+}
+
+.floating-search-input__group {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  background: #fff;
+  box-sizing: border-box;
+  overflow: hidden;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.floating-search-input__field {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+
+.floating-search-input .text-box {
+  width: 100%;
+  padding: 0 12px;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  box-sizing: border-box;
+  font-size: 13px;
+  color: #303133;
+  font-family: inherit;
+}
+
+.floating-search-input.has-clear-btn .text-box {
+  padding-right: 30px;
+}
+
+/* 与普通 FloatingInput 清除按钮一致 */
+.floating-search-input .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-search-input .floating-input__clear:hover {
+  color: #909399;
+}
+
+.floating-search-input .floating-input__clear i {
+  font-size: 14px;
+}
+
+.floating-search-input__append {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-left: 1px solid #dcdfe6;
+  background: #f5f7fa;
+  color: #909399;
+  cursor: pointer;
+  line-height: 1;
+}
+
+.floating-search-input__append:hover {
+  color: #409eff;
+  background: #ecf5ff;
+}
+
+.floating-search-input__append i {
+  font-size: 14px;
+}
+
+.floating-search-input > .floating-label {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 13px;
+  font-weight: 400;
+  color: #909399;
+  pointer-events: none;
+  transition: color 0.2s ease, transform 0.2s ease, top 0.2s ease,
+    left 0.2s ease, font-size 0.2s ease, background 0.2s ease,
+    padding 0.2s ease, box-shadow 0.2s ease;
+  background: transparent;
+  line-height: 1.2;
+  z-index: 4;
+  white-space: nowrap;
+  max-width: calc(100% - 52px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.floating-search-input.is-focused > .floating-label,
+.floating-search-input.has-value > .floating-label {
+  top: 0;
+  left: 10px;
+  transform: translateY(-50%);
+  font-size: 12px;
+  font-weight: 500;
+  color: #409eff;
+  padding: 0 6px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px #fff;
+}
+
+.floating-search-input__group:hover {
+  border-color: #c0c4cc;
+}
+
+.floating-search-input.is-focused .floating-search-input__group {
+  border-color: #409eff;
+  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.18);
+}
+
+.floating-search-input .text-box:focus {
+  outline: none;
+}
+</style>
+
+<style>
+.el-form-item.is-error .floating-search-input.is-focused .floating-label,
+.el-form-item.is-error .floating-search-input.has-value .floating-label {
+  color: #f56c6c !important;
+  box-shadow: 0 0 0 1px #fff;
+}
+
+.el-form-item.is-error .floating-search-input .floating-search-input__group {
+  border-color: #f56c6c !important;
+  box-shadow: none !important;
+}
+
+.el-form-item.is-error .floating-search-input.is-focused .floating-search-input__group {
+  border-color: #f56c6c !important;
+  box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2) !important;
+}
+</style>

package/src/components/FloatingSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="floating-label-wrap">
     <el-select
-      :value="value"
+      :value="selectValue"
       v-bind="$attrs"
       :multiple="multiple"
       :clearable="clearable"
@@ -53,6 +53,19 @@ export default {
     };
   },
   computed: {
+    selectValue() {
+      if (Array.isArray(this.value)) {
+        return this.value.length ? this.value : undefined;
+      }
+      if (
+        this.value === "" ||
+        this.value === null ||
+        this.value === undefined
+      ) {
+        return undefined;
+      }
+      return this.value;
+    },
     hasValue() {
       if (Array.isArray(this.value)) {
         return this.value.length > 0;