wkjp-list-page 1.0.28 → 1.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wkjp-list-page",
-  "version": "1.0.28",
+  "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)"
@@ -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,
@@ -775,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");
     },
@@ -1803,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;
@@ -1911,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;