t20-common-lib 0.15.3 → 0.15.4

package/package.json

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

package/packages/dynamic-form/src/components/ScrollLoadSelect.vue

@@ -0,0 +1,145 @@
+<template>
+  <T20-Scroll-Load-Select
+    v-model="_value"
+    v-bind="passThroughProps"
+    v-on="innerListeners"
+    @canGetData="handleCanGetData"
+  />
+</template>
+
+<script>
+import { getDataForGet, getDataForPost } from '../utils/request'
+
+export default {
+  name: 'ScrollLoadSelect',
+  props: {
+    value: {
+      type: [String, Number, Array, Object],
+      default: undefined
+    },
+    items: {
+      type: Object,
+      default: () => ({})
+    },
+    label: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    _value: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    innerListeners() {
+      const listeners = { ...this.$listeners }
+      delete listeners.canGetData
+      return listeners
+    },
+    runtimeLabelKey() {
+      return this.items?.api?.labelKey || this.items?.props?.labelKey || this.$attrs.labelKey || 'label'
+    },
+    runtimeValueKey() {
+      return this.items?.api?.valueKey || this.items?.props?.valueKey || this.$attrs.valueKey || 'value'
+    },
+    runtimeSearchKeyName() {
+      return this.items?.api?.searchKeyName || this.items?.props?.searchKeyName || this.$attrs.searchKeyName || 'searchKey'
+    },
+    runtimePageSize() {
+      return this.items?.api?.pageSize || this.items?.props?.pageSize || this.$attrs.pageSize || 20
+    },
+    runtimeSelectedLabel() {
+      return this.items?.props?.selectedLabel || this.$attrs.selectedLabel || this.label || ''
+    },
+    runtimeRequestFn() {
+      if (this.items?.api?.apiUrl && this.items?.api?.requestMethod) {
+        return this.fetchByApiConfig
+      }
+      return this.$attrs.requestFn || this.$attrs['request-fn'] || this.fetchByStaticOptions
+    },
+    passThroughProps() {
+      return {
+        ...this.$attrs,
+        ...(this.items?.props || {}),
+        requestFn: this.runtimeRequestFn,
+        labelKey: this.runtimeLabelKey,
+        valueKey: this.runtimeValueKey,
+        searchKeyName: this.runtimeSearchKeyName,
+        pageSize: this.runtimePageSize,
+        selectedLabel: this.runtimeSelectedLabel
+      }
+    }
+  },
+  methods: {
+    resolvePath(data, path) {
+      if (!path) return data
+      return String(path)
+        .split('.')
+        .reduce((acc, key) => (acc == null ? acc : acc[key]), data)
+    },
+    normalizeList(rawList) {
+      if (!Array.isArray(rawList)) return []
+      return rawList.map(item => {
+        if (!item || typeof item !== 'object') {
+          return {
+            [this.runtimeLabelKey]: String(item),
+            [this.runtimeValueKey]: item
+          }
+        }
+        return item
+      })
+    },
+    async fetchByApiConfig(params = {}) {
+      const apiConfig = this.items?.api || {}
+      const method = String(apiConfig.requestMethod || '').toUpperCase()
+      const reqKeys = apiConfig.reqKeys || {}
+      const headerConfig = apiConfig.headerConfig || {}
+      const requestData = {
+        ...reqKeys,
+        ...params
+      }
+      let res = null
+      if (method === 'GET') {
+        res = await getDataForGet(apiConfig.apiUrl, requestData, headerConfig)
+      } else if (method === 'POST') {
+        res = await getDataForPost(apiConfig.apiUrl, requestData, headerConfig)
+      } else {
+        return []
+      }
+      const list = apiConfig.dataProp ? this.resolvePath(res, apiConfig.dataProp) : (res && res.data)
+      return this.normalizeList(list)
+    },
+    async fetchByStaticOptions(params = {}) {
+      const sourceOptions = Array.isArray(this.items?.options) ? this.items.options : []
+      const current = Number(params.current || 1)
+      const size = Number(params.size || this.runtimePageSize || 20)
+      const searchValue = params[this.runtimeSearchKeyName]
+      const normalizedKeyword = searchValue == null ? '' : String(searchValue).toLowerCase()
+      const filtered = sourceOptions.filter(item => {
+        if (!normalizedKeyword) return true
+        const label = item && item[this.runtimeLabelKey]
+        return String(label == null ? '' : label).toLowerCase().includes(normalizedKeyword)
+      })
+      const start = (current - 1) * size
+      return filtered.slice(start, start + size)
+    },
+    handleCanGetData(val, option) {
+      if (Array.isArray(option)) {
+        const labels = option
+          .map(item => item && item[this.runtimeLabelKey])
+          .filter(label => label !== undefined && label !== null)
+        this.$emit('update:label', labels.join(','))
+      } else if (option && typeof option === 'object') {
+        this.$emit('update:label', option[this.runtimeLabelKey] || '')
+      } else if (val === '' || val === null || val === undefined) {
+        this.$emit('update:label', '')
+      }
+      this.$emit('canGetData', val, option)
+    }
+  }
+}
+</script>

package/packages/dynamic-form/src/main.vue

@@ -118,6 +118,7 @@ export default {
       elementTypeChange: {
         SELECT: 'Select',
         SELECT_LAZY: 'LazySelect',
+        SELECT_SCROLL_LOAD: 'ScrollLoadSelect',
         DIALOG: 'Dialog',
         INPUT: 'Input',
         AMOUNT: 'Amount',