t20-common-lib 0.12.23 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "t20-common-lib",
-  "version": "0.12.23",
+  "version": "0.13.0",
   "description": "T20",
   "private": false,
   "main": "dist/index.js",

package/packages/scroll-load-select/index.js

@@ -0,0 +1,9 @@
+import ScrollLoadSelect from './src/main';
+
+/* istanbul ignore next */
+ScrollLoadSelect.install = function(Vue) {
+  Vue.component(ScrollLoadSelect.name, ScrollLoadSelect);
+};
+
+export default ScrollLoadSelect;
+

package/packages/scroll-load-select/src/main.vue

@@ -0,0 +1,209 @@
+<template>
+  <el-select
+    v-model="innerValue"
+    v-select-lazy="lazyGet"
+    :multiple="multiple"
+    filterable
+    clearable
+    :filter-method="debouncedFilter"
+    :placeholder="placeholder"
+    @change="handleChange"
+    @focus="handleFocus"
+    @clear="() => handleFilter('')"
+  >
+    <el-option
+      v-if="displayOption"
+      :key="`display-${displayOption[valueKey]}`"
+      :label="displayOption[labelKey]"
+      :value="displayOption[valueKey]"
+    />
+
+    <el-option
+      v-for="item in options"
+      :key="String(item[valueKey])"
+      :label="item[labelKey]"
+      :value="item[valueKey]"
+    />
+  </el-select>
+</template>
+
+<script>
+import { debounce } from 'lodash-es';
+
+export default {
+  name: "ScrollLoadSelect",
+  directives: {
+    'select-lazy': {
+      bind(el, binding) {
+        const dropdown = el.querySelector('.el-select-dropdown__wrap');
+        if (!dropdown) return;
+
+        let maxMoveY = 0;
+        dropdown.addEventListener('scroll', function () {
+          if (this.scrollTop <= 20) {
+            maxMoveY = 0;
+          }
+          if (this.scrollTop > maxMoveY + 60 && this.scrollTop + this.clientHeight > this.scrollHeight - 60) {
+            maxMoveY = this.scrollTop;
+            if (typeof binding.value === 'function') binding.value();
+          }
+        });
+      }
+    }
+  },
+  props: {
+    value: {
+      type: [String, Number, Array, Object],
+      default: undefined
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    requestFn: {
+      type: Function,
+      required: true
+    },
+    labelKey: {
+      type: String,
+      default: "label",
+    },
+    valueKey: {
+      type: String,
+      default: "value",
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    pageSize: {
+      type: Number,
+      default: 20,
+    },
+    searchKeyName: {
+      type: String,
+      default: "searchKey",
+    },
+    selectedLabel: {
+      type: String,
+      default: "",
+    }
+  },
+  data() {
+    return {
+      innerValue: this.value,
+      options: [],
+      page: {
+        current: 1,
+        size: this.pageSize,
+        key: "",
+        hasMore: true,
+      }
+    };
+  },
+  watch: {
+    value(newVal) {
+      this.innerValue = newVal;
+    },
+    pageSize(newVal) {
+      this.page.size = newVal;
+    }
+  },
+  created() {
+    this.debouncedFilter = debounce(this.handleFilter, 300);
+  },
+  computed: {
+    displayOption() {
+      if (this.multiple) return null;
+      if (this.innerValue === undefined || this.innerValue === null || this.innerValue === "") return null;
+      if (!this.selectedLabel) return null;
+
+      const existed = this.options.some(item => item && item[this.valueKey] == this.innerValue);
+      if (existed) return null;
+
+      return {
+        [this.valueKey]: this.innerValue,
+        [this.labelKey]: this.selectedLabel,
+      };
+    }
+  },
+  methods: {
+    lazyGet() {
+      if (this.page.hasMore) {
+        this.page.current++;
+        this.fetchData(false);
+      }
+    },
+    async fetchData(isInitial = false) {
+      if (!this.page.hasMore) return;
+      if (typeof this.requestFn !== 'function') return;
+
+      const params = {
+        size: this.page.size,
+        current: this.page.current
+      };
+      params[this.searchKeyName] = this.page.key;
+
+      try {
+        const res = await this.requestFn(params);
+
+        let data = [];
+        if (Array.isArray(res)) {
+          data = res;
+        } else if (res && Array.isArray(res.list)) {
+          data = res.list;
+        } else if (res && Array.isArray(res.data)) {
+          data = res.data;
+        } else {
+          data = [];
+        }
+
+        if (isInitial) {
+          this.options = data;
+        } else {
+          this.options = this.options.concat(data);
+        }
+
+        this.page.hasMore = data.length === this.page.size;
+      } catch (e) {
+        // 静默失败，避免影响表单使用；需要的话可由外层通过 requestFn 自行提示
+        this.page.hasMore = false;
+      }
+    },
+    handleFilter(val) {
+      this.page.key = val;
+      this.page.current = 1;
+      this.page.hasMore = true;
+      this.fetchData(true);
+    },
+    handleFocus() {
+      if (!this.page.key && this.options.length === 0) {
+        this.handleFilter('');
+      }
+    },
+    handleChange(val) {
+      this.$emit('input', val);
+
+      const findByValueKey = (v) => {
+        if (v === undefined || v === null) return null;
+        return this.options.find(item => item && item[this.valueKey] == v) || null;
+      };
+
+      let option = null;
+      if (this.multiple) {
+        if (Array.isArray(val)) {
+          option = val.map(v => findByValueKey(v)).filter(i => i != null);
+        } else {
+          option = [];
+        }
+      } else {
+        option = findByValueKey(val) || null;
+      }
+
+      this.$emit('change', val);
+      this.$emit('canGetData', val, option);
+    }
+  },
+};
+</script>
+

package/src/index.js

@@ -19,6 +19,7 @@ import DatePickerPor from '../packages/date-picker-por/index.js'
 import DynamicDescriptions from '../packages/dynamic-descriptions/index.js'
 import SelectTreeUnit from '../packages/select-tree-unit/index.js'
 import SelectTreeUnitForm from '../packages/select-tree-unit-form/index.js'
+import ScrollLoadSelect from '../packages/scroll-load-select/index.js'
 
 // 存储组件列表
 const components = [
@@ -31,6 +32,7 @@ const components = [
   PageHeader,
   MultiCurrencyStatistics,
   BranchBankSelect,
+  ScrollLoadSelect,
   TabPage,
   InputNumber,
   DatePickerPor,
@@ -75,6 +77,7 @@ export {
   TabPage,
   MultiCurrencyStatistics,
   BranchBankSelect,
+  ScrollLoadSelect,
   InputNumber,
   DatePickerPor,
   DynamicDescriptions,