n20-common-lib 2.22.48 → 2.22.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.22.48",
+  "version": "2.22.49",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/TablePro/compat.js

@@ -0,0 +1,60 @@
+let vxeVersion = ''
+
+export function getVxeCore(vxe) {
+  return vxe && (vxe.VXETable || vxe.default || vxe)
+}
+
+export function setVxeVersion(version) {
+  vxeVersion = version || ''
+}
+
+export function getVxeVersion() {
+  return vxeVersion
+}
+
+export function compareVersion(version, target) {
+  const versionParts = `${version}`.split('.').map((item) => Number.parseInt(item, 10) || 0)
+  const targetParts = `${target}`.split('.').map((item) => Number.parseInt(item, 10) || 0)
+  const len = Math.max(versionParts.length, targetParts.length)
+  for (let i = 0; i < len; i++) {
+    const current = versionParts[i] || 0
+    const next = targetParts[i] || 0
+    if (current > next) return 1
+    if (current < next) return -1
+  }
+  return 0
+}
+
+export function isVxe320OrNewer() {
+  return compareVersion(vxeVersion, '3.20.0') >= 0
+}
+
+export function resolveMaybeFunction(value) {
+  return typeof value === 'function' ? value() : value
+}
+
+export function normalizeArray(value) {
+  const resolved = resolveMaybeFunction(value)
+  return Array.isArray(resolved) ? resolved : []
+}
+
+export function getColumnField(column) {
+  if (!column) return undefined
+  return column.field || column.property
+}
+
+export function getEventField(params) {
+  if (!params) return undefined
+  return params.field || params.property || getColumnField(params.column)
+}
+
+export function getRowValue(row, field) {
+  if (!row || !field) return undefined
+  if (Object.prototype.hasOwnProperty.call(row, field)) {
+    return row[field]
+  }
+  return `${field}`.split('.').reduce((value, key) => {
+    if (value === undefined || value === null) return undefined
+    return value[key]
+  }, row)
+}

package/src/components/TablePro/index.js

@@ -5,11 +5,28 @@ import numerify from 'numerify'
 import dayjs from 'dayjs'
 import { $lc } from '../../utils/i18n/index.js'
 import zhCN from 'vxe-table/lib/locale/lang/zh-CN'
+import { getColumnField, getRowValue, getVxeCore, setVxeVersion } from './compat.js'
+
+function getInstalledVxeVersion(vxe) {
+  const core = getVxeCore(vxe)
+  return (
+    (vxe && (vxe.tableVersion || vxe.version)) ||
+    (core && (core.tableVersion || core.version)) ||
+    ''
+  )
+}
+
+setVxeVersion(getInstalledVxeVersion(vxeTable))
+const vxeCore = getVxeCore(vxeTable)
+const setupVxeTable = (vxeTable && vxeTable.setup) || (vxeCore && vxeCore.setup)
+const vxeRenderer = (vxeTable && vxeTable.renderer) || (vxeCore && vxeCore.renderer)
+const vxeFormats = (vxeTable && vxeTable.formats) || (vxeCore && vxeCore.formats)
+
 // 打平对象
 function flattenObject(obj, prefix = '', result = {}) {
   // 遍历对象的每个属性
   for (const key in obj) {
-    if (obj.hasOwnProperty(key)) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
       // 构建当前属性的完整键名
       const fullKey = prefix ? `${prefix}.${key}` : key
 
@@ -24,103 +41,110 @@ function flattenObject(obj, prefix = '', result = {}) {
   }
   return result
 }
-vxeTable.setup({
-  size: 'small',
-  table: {
-    border: true,
-    align: 'center',
-    columnConfig: {
-      resizable: true
+if (typeof setupVxeTable === 'function') {
+  setupVxeTable.call(vxeCore || vxeTable, {
+    size: 'small',
+    table: {
+      border: true,
+      align: 'center',
+      columnConfig: {
+        resizable: true
+      }
+    },
+    // 对组件内置的提示语进行国际化翻译
+    i18n: (key, args) => {
+      return $lc(flattenObject(zhCN) && flattenObject(zhCN)[key])
     }
-  },
-  // 对组件内置的提示语进行国际化翻译
-  i18n: (key, args) => {
-    return $lc(flattenObject(zhCN) && flattenObject(zhCN)[key])
-  }
-})
+  })
+}
 // 创建一个简单的输入框筛选
-vxeTable.renderer.add('FilterInput', {
+if (vxeRenderer && typeof vxeRenderer.add === 'function') {
+  vxeRenderer.add('FilterInput', {
   // 筛选模板
-  renderFilter(h, renderOpts, params) {
-    return <filterContent params={params}></filterContent>
-  },
-  // 不显示底部按钮，使用自定义的按钮
-  showFilterFooter: false,
-  // 重置数据方法
-  filterResetMethod({ options }) {
-    options.forEach((option) => {
+    renderFilter(h, renderOpts, params) {
+      return <filterContent params={params}></filterContent>
+    },
+    // 不显示底部按钮，使用自定义的按钮
+    showFilterFooter: false,
+    // 重置数据方法
+    filterResetMethod({ options }) {
+      options.forEach((option) => {
+        option.data = ''
+      })
+    },
+    // 重置筛选复原方法（当未点击确认时，该选项将被恢复为默认值）
+    filterRecoverMethod({ option }) {
       option.data = ''
-    })
-  },
-  // 重置筛选复原方法（当未点击确认时，该选项将被恢复为默认值）
-  filterRecoverMethod({ option }) {
-    option.data = ''
-  },
-  // 筛选方法
-  filterMethod({ option, row, column }) {
-    const { data } = option
-    const cellValue = row[column.property]
-    if (cellValue) {
-      return cellValue.indexOf(data) > -1
+    },
+    // 筛选方法
+    filterMethod({ option, row, column }) {
+      const { data } = option
+      const field = getColumnField(column)
+      const cellValue = getRowValue(row, field)
+      if (cellValue !== undefined && cellValue !== null) {
+        return `${cellValue}`.indexOf(data) > -1
+      }
+      return false
     }
-    return false
-  }
-})
+  })
+}
 
 // 自定义全局的格式化处理函数
-vxeTable.formats.mixin({
-  // 格式化内容 为空转为--
-  formatName({ cellValue }) {
-    return cellValue || '--'
-  },
-  // 格式化性别
-  formatSex({ cellValue }) {
-    return cellValue ? (cellValue === '1' ? '男' : '女') : '--'
-  },
-  // 格式化下拉选项
-  formatSelect({ cellValue }, list) {
-    const item = list.find((item) => item.value === cellValue)
-    return item ? item.label : '--'
-  },
-  // 格式化日期，默认 yyyy-MM-dd
-  formatDate({ cellValue }) {
-    if (cellValue) {
-      return dayjs(cellValue).format('YYYY-MM-DD')
-    } else {
-      return '--'
-    }
-  },
-  // 四舍五入金额，每隔3位逗号分隔，默认2位数
-  formatAmount({ cellValue }) {
-    if (cellValue || cellValue === 0) {
-      // 判断是否为字符串类数字
-      if (/^-?\d+(\.\d+)?$/.test(cellValue)) {
-        return numerify(cellValue, '0,0.00')
+if (vxeFormats && typeof vxeFormats.mixin === 'function') {
+  vxeFormats.mixin({
+    // 格式化内容 为空转为--
+    formatName({ cellValue }) {
+      return cellValue || '--'
+    },
+    // 格式化性别
+    formatSex({ cellValue }) {
+      return cellValue ? (cellValue === '1' ? '男' : '女') : '--'
+    },
+    // 格式化下拉选项
+    formatSelect({ cellValue }, list) {
+      const item = list.find((item) => item.value === cellValue)
+      return item ? item.label : '--'
+    },
+    // 格式化日期，默认 yyyy-MM-dd
+    formatDate({ cellValue }) {
+      if (cellValue) {
+        return dayjs(cellValue).format('YYYY-MM-DD')
       } else {
-        return cellValue
+        return '--'
+      }
+    },
+    // 四舍五入金额，每隔3位逗号分隔，默认2位数
+    formatAmount({ cellValue }) {
+      if (cellValue || cellValue === 0) {
+        // 判断是否为字符串类数字
+        if (/^-?\d+(\.\d+)?$/.test(cellValue)) {
+          return numerify(cellValue, '0,0.00')
+        } else {
+          return cellValue
+        }
+        // return numerify(cellValue, '0,0.00')
+      } else {
+        return '--'
+      }
+    },
+    // 利率
+    formatRate({ cellValue }) {
+      if (cellValue || cellValue === 0) {
+        return numerify(cellValue, '0.000000')
+      } else {
+        return '--'
+      }
+    },
+    // 格式化时间，默认 yyyy-MM-dd HH:mm:ss
+    formatDatetime({ cellValue }) {
+      if (cellValue) {
+        return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
+      } else {
+        return '--'
       }
-      // return numerify(cellValue, '0,0.00')
-    } else {
-      return '--'
-    }
-  },
-  // 利率
-  formatRate({ cellValue }) {
-    if (cellValue || cellValue === 0) {
-      return numerify(cellValue, '0.000000')
-    } else {
-      return '--'
-    }
-  },
-  // 格式化时间，默认 yyyy-MM-dd HH:mm:ss
-  formatDatetime({ cellValue }) {
-    if (cellValue) {
-      return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
-    } else {
-      return '--'
     }
-  }
-})
+  })
+}
 
 function install(Vue) {
   Vue.use(vxeTable)

package/src/components/TablePro/index.vue

@@ -16,6 +16,7 @@
       show-header-overflow
       show-overflow
       :row-config="computedRowConfig"
+      :cell-config="computedCellConfig"
       :column-config="{
         resizable: true,
         useKey: true,
@@ -23,6 +24,7 @@
         ...$attrs['column-config']
       }"
       :scroll-y="computedScrollY"
+      :virtual-y-config="computedVirtualYConfig"
       :sort-config="{
         multiple: false,
         remote: true,
@@ -139,6 +141,7 @@
 import empty from '../Empty'
 import tableSetSize from '../TableSetSize/index.vue'
 import { $lc } from '../../utils/i18n/index.js'
+import { getColumnField, getEventField, isVxe320OrNewer, normalizeArray } from './compat.js'
 
 /** 将 Element 表格风格的 show-overflow-tooltip 转为 vxe-column 的 show-overflow */
 function hasOverflowTooltipKey(item) {
@@ -183,12 +186,14 @@ function mapColumnOverflowForVxe(item) {
 // vxe-table 3.6 在渲染行数超过 40 时会防抖更新虚拟滚动数据，快速滚动容易露出空白。
 // 保持较小的默认缓冲，让常见高度下走同步更新路径；业务仍可通过 scroll-y.oSize 覆盖。
 const DEFAULT_SCROLL_Y = { enabled: true, oSize: 6, gt: 30 }
+const DEFAULT_VIRTUAL_Y = { ...DEFAULT_SCROLL_Y, preSize: 1, immediate: true }
 const VXE_ROW_HEIGHT_MAP = {
   default: 48,
   medium: 44,
   small: 40,
   mini: 36
 }
+
 const renderer = {
   name: 'renderer',
   props: {
@@ -217,6 +222,10 @@ export default {
         return { ...DEFAULT_SCROLL_Y }
       }
     },
+    virtualYConfig: {
+      type: Object,
+      default: undefined
+    },
     dynamicRowHeight: {
       type: Boolean,
       default: false
@@ -296,8 +305,12 @@ export default {
       const small = attrs.small
       delete attrs.rowConfig
       delete attrs['row-config']
+      delete attrs.cellConfig
+      delete attrs['cell-config']
       delete attrs.scrollY
       delete attrs['scroll-y']
+      delete attrs.virtualYConfig
+      delete attrs['virtual-y-config']
       delete attrs.small
       return Object.assign({ size: this.sizeC || this.size }, attrs, this.sizeBind, small)
     },
@@ -311,12 +324,31 @@ export default {
         ...this.$attrs.rowConfig,
         ...this.$attrs['row-config']
       }
-      if (!this.dynamicRowHeight && rowConfig.height === undefined) {
+      const isVxe320 = isVxe320OrNewer()
+      if (!this.dynamicRowHeight && !isVxe320 && rowConfig.height === undefined) {
         rowConfig.height = this.getVirtualRowHeight()
       }
+      if (isVxe320) {
+        delete rowConfig.height
+      }
       return rowConfig
     },
+    computedCellConfig() {
+      const cellConfig = {
+        ...this.$attrs.cellConfig,
+        ...this.$attrs['cell-config']
+      }
+      const hasCellConfig = Object.keys(cellConfig).length > 0
+      if (!isVxe320OrNewer()) {
+        return hasCellConfig ? cellConfig : undefined
+      }
+      if (!this.dynamicRowHeight && cellConfig.height === undefined) {
+        cellConfig.height = this.getVirtualRowHeight()
+      }
+      return cellConfig
+    },
     computedScrollY() {
+      if (isVxe320OrNewer()) return undefined
       const scrollY = {
         ...DEFAULT_SCROLL_Y,
         ...(this.scrollY || {})
@@ -330,6 +362,24 @@ export default {
       }
       return scrollY
     },
+    computedVirtualYConfig() {
+      const attrVirtualYConfig = {
+        ...this.$attrs.virtualYConfig,
+        ...this.$attrs['virtual-y-config']
+      }
+      if (!isVxe320OrNewer()) return undefined
+      const virtualYConfig = {
+        ...DEFAULT_VIRTUAL_Y,
+        ...(this.scrollY || {}),
+        ...attrVirtualYConfig,
+        ...(this.virtualYConfig || {})
+      }
+      delete virtualYConfig.rHeight
+      if (this.dynamicRowHeight) {
+        virtualYConfig.enabled = false
+      }
+      return virtualYConfig
+    },
     _columns() {
       const raw = this.isAutoWidth ? this.calcColumnWidth(this.columns) : this.columns
       return raw.map(mapColumnOverflowForVxe)
@@ -347,30 +397,45 @@ export default {
     data() {
       // 翻页清除选中
       if (this.clearSelect) {
-        this.$refs.vxeTable.clearCheckboxRow()
+        this.callTableMethod('clearCheckboxRow')
         this.$emit('selection-change-method', [])
       }
       // 数据更新后重新设置合并单元格
       this.$nextTick(() => {
         if (this.mergeCells && this.mergeCells.length > 0 && this.$refs.vxeTable) {
-          this.$refs.vxeTable.setMergeCells(this.mergeCells)
+          this.callTableMethod('setMergeCells', this.mergeCells)
         }
         this.refreshTableLayout()
       })
     }
   },
   activated() {
-    this.$refs.vxeTable.loadData(this.data)
+    this.callTableMethod('loadData', this.data)
     // 数据更新后重新设置合并单元格
     this.$nextTick(() => {
       if (this.mergeCells && this.mergeCells.length > 0 && this.$refs.vxeTable) {
-        this.$refs.vxeTable.setMergeCells(this.mergeCells)
+        this.callTableMethod('setMergeCells', this.mergeCells)
       }
       this.refreshTableLayout()
     })
   },
   methods: {
+    callTableMethod(methodName, ...args) {
+      const xTable = this.$refs.vxeTable
+      if (!xTable || typeof xTable[methodName] !== 'function') return undefined
+      return xTable[methodName](...args)
+    },
+    getTableRows(methodName, ...args) {
+      return normalizeArray(this.callTableMethod(methodName, ...args))
+    },
     getVirtualRowHeight() {
+      const cellConfig = {
+        ...this.$attrs.cellConfig,
+        ...this.$attrs['cell-config']
+      }
+      if (cellConfig.height !== undefined) {
+        return cellConfig.height
+      }
       const rowConfig = {
         ...this.$attrs.rowConfig,
         ...this.$attrs['row-config']
@@ -410,18 +475,18 @@ export default {
         return true
       })
       // 判断当前可选行是否已全部选中
-      const checkedRows = this.$refs.vxeTable.getCheckboxRecords(false)
+      const checkedRows = this.getTableRows('getCheckboxRecords', false)
       const checkedSet = new Set(checkedRows)
       const isAllChecked = selectableRows.length > 0 && selectableRows.every((row) => checkedSet.has(row))
       if (isAllChecked) {
         // 已全选，则取消可选行的选中状态
         selectableRows.forEach((row) => {
-          this.$refs.vxeTable.setCheckboxRow(row, false)
+          this.callTableMethod('setCheckboxRow', row, false)
         })
       } else {
         // 未全选，则选中所有可选行
         selectableRows.forEach((row) => {
-          this.$refs.vxeTable.setCheckboxRow(row, true)
+          this.callTableMethod('setCheckboxRow', row, true)
         })
       }
       // 得手动触发
@@ -446,14 +511,14 @@ export default {
     // 清空选择
     clearSelection() {
       if (this.$refs.vxeTable) {
-        this.$refs.vxeTable.setAllCheckboxRow(false)
+        this.callTableMethod('setAllCheckboxRow', false)
         // 得手动触发
         this.handleSelectionChange()
       }
     },
     // 选中某些行
     toggleRowSelection(row, state = true) {
-      this.$refs.vxeTable.setCheckboxRow(row, state)
+      this.callTableMethod('setCheckboxRow', row, state)
       // 得手动触发
       this.handleSelectionChange()
     },
@@ -472,7 +537,7 @@ export default {
           return true
         })
         // 判断当前可选行是否已全部选中
-        const checkedRows = $table.getCheckboxRecords(false)
+        const checkedRows = normalizeArray($table.getCheckboxRecords(false))
         const checkedSet = new Set(checkedRows)
         const isAllChecked = selectableRows.length > 0 && selectableRows.every((row) => checkedSet.has(row))
         if (isAllChecked) {
@@ -501,17 +566,17 @@ export default {
       this.key++
       this.handleSelectionChange(row)
     },
-    customSortMethod({ sortList }) {
-      const orders = sortList.map((item) => {
+    customSortMethod(data = {}) {
+      const orders = normalizeArray(data.sortList).map((item) => {
         return {
-          column: item.field,
+          column: getEventField(item) || getColumnField(item.column),
           asc: item.order === 'asc'
         }
       })
       this.$emit('sort-change-method', orders)
     },
-    filterChange(data) {
-      const { filterList } = data
+    filterChange(data = {}) {
+      const filterList = normalizeArray(data.filterList || data.filters)
       // 输出全部条件
       const obj = {}
       // 复制默认筛选条件为空
@@ -521,17 +586,20 @@ export default {
         }
       })
       filterList.forEach((item) => {
-        if (item.column.filterMultiple) {
-          this.$set(obj, item.field, item.values)
+        const field = getEventField(item)
+        if (!field) return
+        if (item.column && item.column.filterMultiple) {
+          this.$set(obj, field, item.values)
         } else {
-          this.$set(obj, item.field, item.values && item.values[0])
+          this.$set(obj, field, item.values && item.values[0])
         }
       })
       // 输出单个条件
       const singleObj = {}
+      const currentField = getEventField(data)
       for (let key in obj) {
-        if (key === data.field) {
-          singleObj[data.field] = obj[data.field]
+        if (key === currentField) {
+          singleObj[currentField] = obj[currentField]
         }
       }
       if (this.isFiliterSingle) {
@@ -542,16 +610,17 @@ export default {
     },
     // row当前单次勾选的哪一行数据 包含checked字段
     handleSelectionChange(row = '') {
-      const val = this.$refs.vxeTable.getCheckboxRecords()
+      const currentRow = row && Object.prototype.hasOwnProperty.call(row, 'row') ? row.row : row
+      const val = this.getTableRows('getCheckboxRecords')
       // 支持跨页勾选
-      const val1 = this.$refs.vxeTable.getCheckboxReserveRecords()
-      this.$emit('selection-change-method', [...val, ...val1], row)
+      const val1 = this.getTableRows('getCheckboxReserveRecords')
+      this.$emit('selection-change-method', [...val, ...val1], currentRow)
     },
     // 点击行勾选/取消勾选
     handleCellClick({ row, column, $event }) {
       this.$emit('cell-click', { row, column, $event })
       // 如果点击的是 checkbox 列，不处理（由原生的 checkbox 处理）
-      if (column.type === 'checkbox') {
+      if (column && column.type === 'checkbox') {
         return
       }
 
@@ -563,7 +632,8 @@ export default {
       // - [class*="button"]: 包含 button 类名的元素
       // - [class*="el-link--inner"]: Element UI 链接组件内部元素
       // - a[href]: 链接标签
-      const target = $event.target
+      const target = $event && $event.target
+      if (!target) return
       const clickedButton = target.closest(
         'button, .el-button, .n20-button, [class*="button"], [class*="el-link--inner"], a[href]'
       )
@@ -592,7 +662,7 @@ export default {
 
       if (canCheck) {
         // 切换该行的勾选状态
-        this.$refs.vxeTable.toggleCheckboxRow(row)
+        this.callTableMethod('toggleCheckboxRow', row)
         this.key++ // 强制刷新 checkbox 显示
         this.handleSelectionChange(row)
       }