wkjp-list-page 1.0.27 → 1.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wkjp-list-page",
-  "version": "1.0.27",
+  "version": "1.0.29",
   "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)"
@@ -128,6 +141,14 @@
             <slot :name="col.slot" :row="scope.row" :scope="scope"></slot>
           </template>
         </el-table-column>
+        <nested-table-column
+          v-else-if="col.children && col.children.length"
+          :key="'col-nested-' + idx + '-' + (col.prop || col.label)"
+          :column="col"
+          :resolve-cell-text="resolveCellText"
+          :column-bind="tableColumnBind"
+          :parent-scoped-slots="$scopedSlots"
+        />
         <el-table-column
           v-else-if="col.type !== 'slot' && isBuiltinCellColumn(col)"
           :key="'col-builtin-' + idx + '-' + col.type"
@@ -302,19 +323,23 @@
 
 <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";
 import ExportFile from "./ExportFile.vue";
+import NestedTableColumn from "./NestedTableColumn.vue";
 
 export default {
   name: "CommonListPage",
   components: {
     FloatingInput,
+    FloatingSearchInput,
     FloatingSelect,
     FloatingDatePicker,
     FloatingCascader,
-    ExportFile
+    ExportFile,
+    NestedTableColumn,
   },
   props: {
     filters: { type: Object, required: true },
@@ -689,6 +714,13 @@ export default {
     /** 表头 + 当前页数据中最长展示文本的字符数（slot 列仅表头） */
     getColumnMaxContentLength(col) {
       var labelLen = this.textDisplayLength((col && (col.label || col.prop || col.slot)) || "");
+      if (col && col.children && col.children.length) {
+        var nestedMax = labelLen;
+        for (var c = 0; c < col.children.length; c++) {
+          nestedMax = Math.max(nestedMax, this.getColumnMaxContentLength(col.children[c]));
+        }
+        return nestedMax;
+      }
       if (!col || col.type === "slot" || this.isBuiltinCellColumn(col)) {
         return labelLen;
       }
@@ -702,6 +734,12 @@ export default {
     },
     resolveAutoColumnLayout(col) {
       if (!col) return {};
+      if (col.children && col.children.length) {
+        var nestedLayout = {};
+        if (col.width != null && col.width !== "") nestedLayout.width = col.width;
+        if (col.minWidth != null && col.minWidth !== "") nestedLayout.minWidth = col.minWidth;
+        return nestedLayout;
+      }
       var hasWidth = col.width != null && col.width !== "";
       var hasMinWidth = col.minWidth != null && col.minWidth !== "";
       if (hasWidth || hasMinWidth) {
@@ -733,7 +771,16 @@ export default {
       return layout;
     },
     tableColumnBind(col) {
-      var omit = ["valueGetter", "textFormatter", "defaultText", "emptyText", "hidden", "_visible", "_configKey"];
+      var omit = [
+        "valueGetter",
+        "textFormatter",
+        "defaultText",
+        "emptyText",
+        "hidden",
+        "_visible",
+        "_configKey",
+        "children",
+      ];
       var rest = {};
       Object.keys(col || {}).forEach(function (k) {
         if (omit.indexOf(k) === -1) rest[k] = col[k];
@@ -744,6 +791,12 @@ 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");
     },
@@ -1772,6 +1825,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;
@@ -1880,6 +1952,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;

package/src/components/NestedTableColumn.vue

@@ -1,34 +1,41 @@
 <script>
 /**
- * 递归渲染带 children 的列配置（多级表头）
- * 由 CommonListPage 在检测到 columns[].children 时使用
+ * 递归渲染 el-table-column，支持 columns[].children 多级表头。
  */
 export default {
   name: "NestedTableColumn",
   props: {
     column: { type: Object, required: true },
-    /** (col, row, rowIndex) => 展示文案，与 CommonListPage.resolveCellText 一致 */
-    formatCell: { type: Function, default: null },
-    /** (col) => 传给 el-table-column 的绑定对象 */
+    resolveCellText: { type: Function, default: null },
     columnBind: { type: Function, default: null },
   },
   render(h) {
     const col = this.column;
     const slots = this.$scopedSlots;
-    const bind = this.columnBind;
-    const formatCell = this.formatCell;
+    const resolveCellText = this.resolveCellText;
+    const columnBind = this.columnBind;
 
     if (col.children && col.children.length) {
+      const parentBind =
+        typeof columnBind === "function" ? columnBind(col) || {} : {};
+      const parentProps = {
+        label: parentBind.label != null ? parentBind.label : col.label,
+        align: parentBind.align != null ? parentBind.align : col.align,
+        fixed: parentBind.fixed != null ? parentBind.fixed : col.fixed,
+        width: parentBind.width != null ? parentBind.width : col.width,
+        minWidth: parentBind.minWidth != null ? parentBind.minWidth : col.minWidth,
+        headerAlign: parentBind.headerAlign,
+      };
       return h(
         "el-table-column",
-        { props: { label: col.label, align: col.align } },
+        { props: parentProps },
         col.children.map((child, idx) =>
           h("nested-table-column", {
             key: `${child.prop || child.label || "col"}-${idx}`,
             props: {
               column: child,
-              formatCell,
-              columnBind: bind,
+              resolveCellText,
+              columnBind,
             },
             scopedSlots: slots,
           }),
@@ -36,60 +43,31 @@ export default {
       );
     }
 
-    if (col.type === "slot" && col.slot && slots[col.slot]) {
-      const slotProps = bind ? bind(this.omitSlotMeta(col)) : this.omitSlotMeta(col);
+    const bind = typeof columnBind === "function" ? columnBind(col) || {} : {};
+    const columnProps = Object.assign({}, bind);
+    delete columnProps.children;
+
+    if (col.slot && slots[col.slot]) {
       return h("el-table-column", {
-        props: slotProps,
+        props: columnProps,
         scopedSlots: {
           default: (scope) => slots[col.slot](scope),
         },
       });
     }
 
-    if (col.type === "selection" || col.type === "index" || col.type === "expand") {
-      return h("el-table-column", {
-        props: bind ? bind(col) : col,
-      });
-    }
-
-    const columnProps = bind ? bind(col) : this.leafColumnProps(col);
-
-    if (typeof col.formatter === "function") {
-      columnProps.formatter = col.formatter;
-      return h("el-table-column", { props: columnProps });
-    }
-
     return h("el-table-column", {
       props: columnProps,
       scopedSlots: {
         default: (scope) => {
           const text =
-            typeof formatCell === "function"
-              ? formatCell(col, scope.row, scope.$index)
+            typeof resolveCellText === "function"
+              ? resolveCellText(col, scope.row, scope.$index)
               : scope.row[col.prop];
           return h("span", String(text == null ? "" : text));
         },
       },
     });
   },
-  methods: {
-    omitSlotMeta(col) {
-      const rest = Object.assign({}, col);
-      delete rest.slot;
-      delete rest.type;
-      return rest;
-    },
-    leafColumnProps(col) {
-      return {
-        prop: col.prop,
-        label: col.label,
-        sortable: col.sortable,
-        width: col.width,
-        minWidth: col.minWidth,
-        align: col.align,
-        showOverflowTooltip: col.showOverflowTooltip,
-      };
-    },
-  },
 };
 </script>