n20-common-lib 3.3.28 → 3.3.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "3.3.28",
+  "version": "3.3.29",
   "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/components/TablePro/index.js

@@ -6,6 +6,7 @@ import dayjs from 'dayjs'
 import XEUtils from 'xe-utils'
 import { $lc } from '../../utils/i18n/index.js'
 import zhCN from 'vxe-table/lib/locale/lang/zh-CN'
+import installPopupZIndexBridge from '../../utils/popupZIndex'
 // 打平对象
 function flattenObject(obj, prefix = '', result = {}) {
   // 遍历对象的每个属性
@@ -158,6 +159,8 @@ vxeTable.formats.mixin({
   }
 }) */
 function install(Vue) {
+  // 原生 vxe-table 与 TablePro 使用同一套弹层层级。
+  installPopupZIndexBridge()
   Vue.use(vxeTable)
 }
 

package/src/components/TablePro/index.vue

@@ -138,6 +138,7 @@ import tableSetSize from '../TableSetSize/index.vue'
 import { $lc } from '../../utils/i18n/index.js'
 import XEUtils from 'xe-utils'
 import { isTableCellInteractiveTarget } from './cellClick'
+import installPopupZIndexBridge from '../../utils/popupZIndex'
 const DEFAULT_SCROLL_Y = {
   enabled: true,
   gt: 30,
@@ -161,6 +162,10 @@ const renderer = {
 }
 export default {
   name: 'TablePro',
+  beforeCreate() {
+    // 按需引用组件时，也要在子表格创建 tooltip 前完成层级桥接。
+    installPopupZIndexBridge()
+  },
   components: {
     tableSetSize,
     empty,

package/src/components/v3/TablePro/index.js

@@ -3,8 +3,9 @@ import 'vxe-table/lib/style.css'
 import filterContent from './filterContent.vue'
 import numerify from 'numerify'
 import dayjs from 'dayjs'
-import { $lc } from '../../utils/i18n/index.js'
+import { $lc } from '../../../utils/i18n/index.js'
 import zhCN from 'vxe-table/lib/locale/lang/zh-CN'
+import installPopupZIndexBridge from '../../../utils/popupZIndex'
 // 打平对象
 function flattenObject(obj, prefix = '', result = {}) {
   // 遍历对象的每个属性
@@ -123,6 +124,8 @@ vxeTable.formats.mixin({
 })
 
 function install(Vue) {
+  // v3 独立安装时也复用公共层级桥接。
+  installPopupZIndexBridge()
   Vue.use(vxeTable)
 }
 

package/src/components/v3/TablePro/index.vue

@@ -454,6 +454,7 @@ import { saveTransform } from '../../ShowColumn/index.vue'
 import tableOperate from '../../TableOperate/index.vue'
 import { isTableCellInteractiveTarget } from '../../TablePro/cellClick'
 import OperateBtns from '../../TableProOperateColumn/OperateBtns.vue'
+import installPopupZIndexBridge from '../../../utils/popupZIndex'
 
 const DEFAULT_OPERATE_COLUMN_WIDTH = 180
 
@@ -473,6 +474,10 @@ const renderer = {
 }
 export default {
   name: 'TableProV3',
+  beforeCreate() {
+    // 按需引用 v3 组件时，也在子表格创建 tooltip 前完成公共桥接。
+    installPopupZIndexBridge()
+  },
   components: {
     tableOperate,
     tableShowColumn,

package/src/utils/popupZIndex.js

@@ -0,0 +1,42 @@
+import Vue from 'vue'
+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 bridgePopupManager(manager) {
+  if (manager[BRIDGE_FLAG]) return
+
+  const descriptor = Object.getOwnPropertyDescriptor(manager, 'zIndex')
+
+  // Element 保存下一次可用的层级，dom-zindex 保存最后一次已分配的层级。
+  DomZIndex.setCurrent(Math.max(DomZIndex.getCurrent(), manager.zIndex - 1))
+  Object.defineProperty(manager, 'zIndex', {
+    configurable: true,
+    get() {
+      // 兼容先安装表格、后安装 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 })
+}
+
+/** 统一 Element 弹层与 vxe tooltip 的层级，重复安装 v2/v3 时只桥接一次。 */
+export default function installPopupZIndexBridge() {
+  if (typeof document === 'undefined') return
+
+  bridgePopupManager(PopupManager)
+  // 组件库的 loading 等指令仍引用 Element 源码入口，需要同步这份管理器。
+  bridgePopupManager(SourcePopupManager)
+}