t20-common-lib 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "t20-common-lib",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "T20",
   "private": false,
   "main": "dist/index.js",
@@ -32,6 +32,7 @@
     "core-js": "^2.6.12",
     "dayjs": "^1.11.18",
     "element-ui": "^2.15.13",
+    "lodash-es": "^4.17.21",
     "normalize.css": "^8.0.1",
     "vue": "^2.6.14",
     "vue-server-renderer": "^2.6.14",

package/packages/branch-bank-select/index.js

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

package/packages/branch-bank-select/src/main.vue

@@ -0,0 +1,185 @@
+<template>
+  <el-select
+    v-model="branchBankNo"
+    v-select-lazy="lazyGet"
+    :multiple="multiple"
+    :loading="loading"
+    filterable
+    clearable
+    :filter-method="debouncedFilter"
+    popper-class="branchBankSelect"
+    @change="handleBranchChange"
+    @focus="handleFocus"
+    @clear="() => handleFilter('')"
+  >
+    <el-option
+      v-for="item in branchBankList"
+      :key="item.cnapsNo"
+      :label="item.branchBankName"
+      :value="item[valueKey]"
+    >
+      <slot name="option" :item="item">
+        <div class="flex-column flex-c" style="height: 100%">
+          <div style="line-height: 20px; font-weight: bold">
+            {{ item.branchBankName }}
+          </div>
+          <div style="line-height: 20px">{{ item.cnapsNo }}</div>
+        </div>
+      </slot>
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+import { debounce } from 'lodash-es';
+
+export default {
+  name: "BranchBankSelect",
+  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;
+            binding.value();
+          }
+        });
+      }
+    }
+  },
+  props: {
+    value: {
+      type: [String, Number, Array, Object],
+      default: undefined
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    bankCode: {
+      type: [String, Number, Array],
+      default: "",
+    },
+    valueKey: {
+      type: String,
+      default: "cnapsNo",
+    },
+    requestFn: {
+      type: Function,
+      required: true
+    }
+  },
+  data() {
+    return {
+      branchBankNo: this.value,
+      branchBankList: [],
+      loading: false,
+      page: {
+        current: 1,
+        size: 20,
+        key: "",
+        hasMore: true,
+      }
+    };
+  },
+  watch: {
+    value(newVal) {
+      this.branchBankNo = newVal;
+    },
+    bankCode: {
+      immediate: true,
+      handler() {
+        this.resetAndFetch();
+      },
+    },
+  },
+  created() {
+    this.debouncedFilter = debounce(this.handleFilter, 300);
+  },
+  mounted() {
+    this.fetchBranchData(true);
+  },
+  methods: {
+    lazyGet() {
+      if (this.page.hasMore) {
+        this.page.current++;
+        this.fetchBranchData();
+      }
+    },
+    async fetchBranchData(isInitial = false) {
+      if (this.loading || !this.page.hasMore) return;
+      if (typeof this.requestFn !== 'function') {
+        console.error("requestFn prop must be a function.");
+        return;
+      }
+      this.loading = true;
+
+      const params = {
+        "page.size": this.page.size,
+        "page.current": this.page.current,
+        key: this.page.key,
+        isDomestic: 1,
+      };
+
+      if (Array.isArray(this.bankCode) && this.bankCode.length > 0) {
+        params.bankNoList = this.bankCode;
+      } else if (this.bankCode) {
+        params.bankNo = this.bankCode;
+      }
+
+      try {
+        const { list = [] } = await this.requestFn(params);
+        if (isInitial) {
+          this.branchBankList = list;
+        } else {
+          this.branchBankList = this.branchBankList.concat(list);
+        }
+        this.page.hasMore = list.length === this.page.size;
+      } catch (error) {
+        console.error("Failed to fetch branch data:", error);
+      } finally {
+        this.loading = false;
+      }
+    },
+    handleFilter(val) {
+      this.page.key = val;
+      this.page.current = 1;
+      this.page.hasMore = true;
+      this.fetchBranchData(true);
+    },
+    resetAndFetch() {
+      this.branchBankList = [];
+      this.page.current = 1;
+      this.page.key = "";
+      this.page.hasMore = true;
+      this.branchBankNo = this.multiple ? [] : "";
+      this.fetchBranchData(true);
+    },
+    handleBranchChange(val) {
+      this.$emit('input', val);
+      this.$emit("canGetData", val);
+    },
+    handleFocus() {
+      if (!this.page.key && this.branchBankList.length === 0) {
+        this.handleFilter('');
+      }
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.branchBankSelect {
+  .el-select-dropdown__item {
+    height: 52px !important;
+    line-height: 52px !important;
+  }
+}
+</style>

package/src/index.js

@@ -12,6 +12,7 @@ import StatisCard from '../packages/statis-card/index.js'
 import PageHeader from '../packages/page-header/index.js'
 import CommonCollapse from '../packages/common-collapse/index.js'
 import MultiCurrencyStatistics from '../packages/multi-currency-statistics/index.js'
+import BranchBankSelect from '../packages/branch-bank-select/index.js'
 
 // 存储组件列表
 const components = [
@@ -22,7 +23,8 @@ const components = [
   StatisCard,
   CommonCollapse,
   PageHeader,
-  MultiCurrencyStatistics
+  MultiCurrencyStatistics,
+  BranchBankSelect
 ]
 
 // 定义 install 方法，接收 Vue 作为参数
@@ -59,6 +61,7 @@ export {
   TabPane,
   PageHeader,
   MultiCurrencyStatistics,
+  BranchBankSelect,
   repairEl,
   getColumnWidth,
   getCellAlign,