n20-common-lib 2.22.83 → 2.22.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "2.22.83",
+  "version": "2.22.84",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -54,6 +54,7 @@
     "axios": "*",
     "dayjs": "*",
     "decimal.js": "^10.5.0",
+    "dom-zindex": "^1.0.6",
     "js-cookie": "^3.0.1",
     "jsencrypt": "^3.3.2",
     "jsonwebtoken": "^8.5.1",

package/src/assets/css/table.scss

@@ -182,9 +182,7 @@ th.vxe-header--column {
   font-weight: $--font-weight-primary;
 }
 
-.vxe-table--tooltip-wrapper {
-  z-index: 9999 !important;
-}
+// tooltip 使用公共层级动态分配，避免固定值遮挡后打开的弹窗。
 
 .cell-default-set-- .vxe-table--body-wrapper .vxe-body--row .vxe-body--column .vxe-cell .vxe-cell--label:empty::before {
   content: '--';

package/src/components/TablePro/index.js

@@ -7,6 +7,7 @@ import { formatExchangeRate } from '../../utils/decimal'
 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'
+import installPopupZIndexBridge from '../../utils/popupZIndex'
 
 
 function getInstalledVxeVersion(vxe) {
@@ -153,6 +154,8 @@ if (vxeFormats && typeof vxeFormats.mixin === 'function') {
 }
 
 function install(Vue) {
+  // 原生 vxe-table 也接入 Element 弹层的公共层级。
+  installPopupZIndexBridge()
   Vue.use(vxeTable)
 }
 

package/src/components/TablePro/index.vue

@@ -142,6 +142,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'
+import installPopupZIndexBridge from '../../utils/popupZIndex'
 
 /** 将 Element 表格风格的 show-overflow-tooltip 转为 vxe-column 的 show-overflow */
 function hasOverflowTooltipKey(item) {
@@ -209,6 +210,10 @@ const renderer = {
 }
 export default {
   name: 'TablePro',
+  beforeCreate() {
+    // 按需引用时，在子表格创建 tooltip 前完成旧版层级适配。
+    installPopupZIndexBridge()
+  },
   components: {
     tableSetSize,
     empty,

package/src/utils/popupZIndex.js

@@ -0,0 +1,78 @@
+import Vue from 'vue'
+import vxeTable from 'vxe-table'
+import DomZIndex from 'dom-zindex'
+import PopupManager from 'element-ui/lib/utils/popup/popup-manager'
+import SourcePopupManager from 'element-ui/src/utils/popup/popup-manager'
+
+const BRIDGE_FLAG = '__n20PopupZIndexBridge__'
+
+function syncLegacyZIndex() {
+  const core = vxeTable.VXETable || vxeTable
+  const config = core.config
+  const zIndex = config && typeof config === 'object' ? Number(config.zIndex) : 0
+  if (zIndex > DomZIndex.getCurrent()) DomZIndex.setCurrent(zIndex)
+}
+
+function bridgePopupManager(manager) {
+  if (manager[BRIDGE_FLAG]) return
+
+  const descriptor = Object.getOwnPropertyDescriptor(manager, 'zIndex')
+  // Element 保存下一次可用值，dom-zindex 保存最后一次已分配值。
+  syncLegacyZIndex()
+  DomZIndex.setCurrent(Math.max(DomZIndex.getCurrent(), manager.zIndex - 1))
+  Object.defineProperty(manager, 'zIndex', {
+    configurable: true,
+    get() {
+      syncLegacyZIndex()
+      // 兼容先安装表格、后安装 Element，并保留业务自定义的初始层级。
+      const configuredZIndex = Number((Vue.prototype.$ELEMENT || {}).zIndex) || 2000
+      return Math.max(descriptor.get.call(manager), DomZIndex.getCurrent() + 1, configuredZIndex)
+    },
+    set(value) {
+      const nextZIndex = Number(value)
+      if (!Number.isFinite(nextZIndex)) return
+
+      const currentZIndex = Math.max(DomZIndex.getCurrent(), nextZIndex - 1)
+      DomZIndex.setCurrent(currentZIndex)
+      descriptor.set.call(manager, currentZIndex + 1)
+    }
+  })
+  Object.defineProperty(manager, BRIDGE_FLAG, { value: true })
+}
+
+function bridgeLegacyTooltip(component) {
+  const options = component && (component.options || component)
+  const methods = options && options.methods
+  if (!methods || !methods.updateZindex || methods.updateZindex[BRIDGE_FLAG]) return
+
+  const updateZindex = methods.updateZindex
+  const updatePlacement = methods.updatePlacement
+  // vxe 3.6 的 tooltip 不使用 dom-zindex，每次显示都要从共享层级重新分配。
+  methods.updateZindex = function () {
+    updateZindex.call(this)
+    syncLegacyZIndex()
+    this.tipZindex = DomZIndex.getNext()
+  }
+  Object.defineProperty(methods.updateZindex, BRIDGE_FLAG, { value: true })
+  methods.updatePlacement = function (...args) {
+    if (this.visible && this.tipStore && this.tipStore.style) {
+      // 兼容业务缓存的旧主题 CSS（9999 !important），使用动态内联层级覆盖。
+      this.tipStore.style.zIndex = `${this.zIndex || this.tipZindex} !important`
+    }
+    return updatePlacement.apply(this, args)
+  }
+}
+
+/** 同步 Element 与表格 tooltip 的层级，兼容旧版 vxe 及升级后的 vxe 3.20。 */
+export default function installPopupZIndexBridge() {
+  if (typeof document === 'undefined') return
+
+  bridgePopupManager(PopupManager)
+  bridgePopupManager(SourcePopupManager)
+  // 旧版导出 Tooltip；新版由 vxe-pc-ui 提供，直接复用上面的计数器桥接。
+  if (vxeTable.Tooltip) {
+    bridgeLegacyTooltip(vxeTable.Tooltip)
+    // Vue.use(vxeTable) 已执行时，注册的构造器也需要同步，支持按需引用 TablePro。
+    bridgeLegacyTooltip(Vue.options.components.VxeTooltip)
+  }
+}