@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/components/Popup.vue

@@ -0,0 +1,393 @@
+<template>
+  <el-drawer v-if="type==='drawer'" class="popup-drawer" v-model="dialogVisible" :size="dialogWidth" :append-to-body="true" @closed="$emit('closed')">
+    <template v-slot:header><div class="header">
+      <span>{{title || headerTitle || pageTitle}}</span>
+      <i class="full-btn el-icon-full-screen" @click="fullscreen=!fullscreen"></i>
+    </div></template>
+    <epx-router-view :initRoute="query" :inline="true" :tab="tab"  @change="routerChange"></epx-router-view>
+  </el-drawer>
+  <el-dialog
+    ref="dialog"
+    v-else
+    v-model="dialogVisible"
+    :width="dialogWidth"
+    :modal="modal"
+    :close-on-click-modal="false"
+    :class="['popup-dialog', dialogPositionClass, {'popup-dialog--no-header': withHeader===false}]"
+    :style="dialogPositionStyle"
+    :align-center="dialogAlignCenter"
+    :fullscreen="fullscreen"
+    :destroy-on-close="true"
+    @opened="applyDialogStyle"
+    @closed="$emit('closed')"
+  >
+    <template v-slot:header><div class="header" >
+      <span>{{title || headerTitle || pageTitle}}</span>
+      <i class="full-btn el-icon-full-screen" @click="fullscreen=!fullscreen"></i>
+    </div></template>
+    <epx-router-view :initRoute="query" :inline="true" :tab="tab"  @change="routerChange"></epx-router-view>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'epx-popup',
+  emits: ['closed'],
+  props: {
+    title: String,
+    metaId: String,
+    flag: String,
+    component: String,
+    pageType: String,
+    tab: Object,
+    query: Object,
+    opener: Object,
+    type: String,
+    defaultFullscreen: {
+      type: Boolean,
+      default: false
+    },
+    dialogWidth: {
+      type: String,
+      default () {
+        return '70%'
+      }
+    },
+    modal: {
+      type: Boolean,
+      default: true
+    },
+    dialogHeight: {
+      type: String,
+      default: 'auto'
+    },
+    // 弹窗垂直位置：默认 'center' 上下居中；可配 'top'/'bottom'，
+    // 也可直接传具体偏移值（如 '15vh'、'100px'），按距顶部距离顶端对齐
+    dialogPosition: {
+      type: String,
+      default: 'center'
+    },
+    withHeader: {
+      type: Boolean,
+      default: true
+    }
+  },
+  directives: {
+    drag: {
+    // 指令的定义（T30b-B：Vue3 指令钩子 bind→beforeMount）
+      beforeMount: function (el) {
+        const dialogHeaderEl = el.querySelector('.el-dialog__header')
+        const dragDom = el.querySelector('.el-dialog')
+        dialogHeaderEl.style.cursor = 'move'
+        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+        const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
+        dialogHeaderEl.onmousedown = (e) => {
+          // 鼠标按下，计算当前元素距离可视区的距离
+          const disX = e.clientX - dialogHeaderEl.offsetLeft
+          const disY = e.clientY - dialogHeaderEl.offsetTop
+          // 获取到的值带px 正则匹配替换
+          let styL, styT
+          // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+          if (sty.left.includes('%')) {
+            styL =
+          +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100)
+            styT =
+          +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100)
+          } else {
+            styL = +sty.left.replace(/\px/g, '')
+            styT = +sty.top.replace(/\px/g, '')
+          }
+          document.onmousemove = function (e) {
+            // 通过事件委托，计算移动的距离
+            const l = e.clientX - disX
+            const t = e.clientY - disY
+            // 移动当前元素
+            dragDom.style.left = `${l + styL}px`
+            dragDom.style.top = `${t + styT}px`
+            // 将此时的位置传出去
+            // binding.value({x:e.pageX,y:e.pageY})
+          }
+          document.onmouseup = function () {
+            document.onmousemove = null
+            document.onmouseup = null
+          }
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      dialogVisible: true,
+      pageTitle: '',
+      headerTitle: '',
+      fullscreen: this.defaultFullscreen
+    }
+  },
+  provide () {
+    return {
+      dialog: this
+    }
+  },
+  computed: {
+    // 弹窗位置预设关键字
+    dialogPositionPresets () {
+      return ['center', 'top', 'bottom']
+    },
+    // EP <el-dialog> 原生 align-center：flex 化 .el-overlay-dialog 并给 .el-dialog margin:auto，
+    // 二维居中零自定义 CSS。只有 'center'（默认）才用，其余预设/自定义偏移各走各的实现（见下）
+    dialogAlignCenter () {
+      return (this.dialogPosition || 'center') === 'center'
+    },
+    // 预设关键字 -> 对应修饰类；非预设值（具体偏移）走 custom
+    dialogPositionClass () {
+      const pos = this.dialogPosition || 'center'
+      return this.dialogPositionPresets.includes(pos)
+        ? `popup-dialog--${pos}`
+        : 'popup-dialog--custom'
+    },
+    // top / 自定义偏移值：直接改写 EP 自己读取的 --el-dialog-margin-top 变量（见 el-dialog.scss
+    // margin: var(--el-dialog-margin-top, 15vh) auto 50px）。center 走 align-center、bottom 走
+    // :has() 反查 flex（见样式块），都不需要这个变量，返回空对象即可
+    dialogPositionStyle () {
+      const pos = this.dialogPosition || 'center'
+      if (pos === 'top') return { '--el-dialog-margin-top': '0' }
+      if (this.dialogPositionPresets.includes(pos)) return {}
+      return { '--el-dialog-margin-top': pos }
+    }
+  },
+  methods: {
+    routerChange ([routes, route]) {
+      if (route) {
+        // route.page 是 RouterView 的 $refs.page（epx-page/BasePage 实例），.$refs.component 才是真正的页面组件。
+        // Vue3 下页面组件是 defineAsyncComponent，本事件（RouterView routes watcher, flush:post）触发时它可能尚未 resolve，
+        // $refs.component 为 null ⇒ 原来 if(page) 落空、pageTitle 恒空 ⇒ 弹窗标题不显示。加空值保护并做兜底。
+        const page = route.page && route.page.$refs && route.page.$refs.component
+        if (page) {
+          this.pageTitle = page.pageConfig.title || (page.page && page.page.title) || page.meta.name
+        } else if (route.name) {
+          // 异步页面组件未就绪时兜底：RouterView.pageChange 已把页面 title 写入 route.name，直接取用
+          this.pageTitle = route.name
+        }
+      }
+    },
+    changeHeaderTitle (v) {
+      this.headerTitle = v
+    },
+    close () {
+      // X / ESC / 遮罩关闭统一由 popup.js 对 dialogVisible 的 $watch 归口处理
+      // （openedPopup 出栈、导航历史记账、opener 刷新），这里只负责隐藏，不再自己调 opener.$refesh
+      this.dialogVisible = false
+    },
+    // 把 dialogHeight / query.style 抹到真正的 .el-dialog 元素上。
+    // ⚠️ 别放回 mounted()：<el-dialog> 现在是 defineAsyncComponent 包装器（EP 按需加载），
+    //    父组件 mounted() 触发时包装器还只渲染了 Comment 占位、真身尚未 resolve，
+    //    这段会整体落空且**不报错**。挂在 EP 自己的 @opened 上：那是「真身已挂载 + 过渡已结束」
+    //    的确定时机，eager/lazy 两种形态都成立。
+    applyDialogStyle () {
+      if (!this.dialogHeight) return
+      const dialog = this.$refs.dialog
+      if (!dialog) return
+      // EP 的 ElDialog 根是 <teleport>，$el 是它的占位注释节点、不是元素（element-ui 时代
+      // $el 是 .el-dialog__wrapper、children[0] 才是 .el-dialog，老写法是那时候留下的）。
+      // 优先走 EP expose 出来的 dialogContentRef（其 $el 就是 .el-dialog），拿不到再退回老路径。
+      const content = dialog.dialogContentRef
+      const el = (content && content.$el) ||
+        (dialog.$el && dialog.$el.children && dialog.$el.children[0])
+      if (!el || !el.style) return
+      el.style.height = this.dialogHeight
+      // 设置了具体高度时，去掉 CSS 的 max-height:75% 限制，避免内容被截断
+      if (this.dialogHeight !== 'auto') {
+        el.style.maxHeight = 'none'
+      }
+      const styles = (this.query || {}).style || {}
+      for (const key in styles) {
+        el.style[key] = styles[key]
+      }
+    },
+    cleanupPopperChildren () {
+      // 递归清理所有子组件的 popper 和 timeout
+      // 这是防止 Element UI Tooltip/Popover 内存泄漏的关键方法
+      // T29：这里原有一个 `walk(vm)` 递归，用 `vm.$children` 遍历子树清 element-ui Tooltip/Popover 的
+      // `timeout` / `timeoutPending` / `popperElm` / `doDestroy`（那是 element-ui 的内部字段，用来修它的
+      // popper 泄漏）。**切 EP 后整块是死代码**：EP 的 ElTooltip/ElPopover/ElDropdown 都是 composition API
+      // （无 methods/data），实例上没有这些字段，popper 走 @popperjs/core + teleport 自管生命周期。
+      // 顺带清掉 Vue3 已移除的 `$children`（compat INSTANCE_CHILDREN）。
+    }
+  },
+  beforeUnmount () {
+    // 清理 Element UI 组件的 popper 和 timeout
+    // Popup 组件使用了 el-dialog 和 el-drawer，这些组件可能带有 tooltip，需要清理
+    this.cleanupPopperChildren()
+    // T1：这里原有一段 `if (this.opener) this.opener = null`。opener 是 prop，Vue3 的 props 是
+    // 只读代理，写它在严格模式下直接抛 `'set' on proxy: trap returned falsish`（Vue2 只警告），
+    // 合同台账点「编辑」必现。而且清了也没用：真正长期持有 opener 的是 popup.js 造的 popupObj
+    // （它进了 window.openedPopup），那份由 core/src/mixins/component.js 的 beforeUnmount 负责
+    // 置空——那里的 popup 是普通对象、不是组件实例，可以写。
+  },
+  updated () {
+    if (!this.headerTitle) {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+// .popup-dialog / .popup-dialog--no-header 的规则已移到文件末尾的**非 scoped** 样式块。
+// 原因：它们写在 scoped 块里时**自 EP 迁移起就一条都没生效过**，详见那边的注释。
+//
+// ⚠️ 下面 .popup-drawer 的那几条是**同一个病**（EP 同样把自定义类放在 .el-drawer 自身、
+// 并把它 teleport 出组件子树 ⇒ scoped 的 [data-v-x] 够不着），大概率也全都没生效。
+// 本次只处理了 dialog，drawer 保持原样待确认——恢复它会改变全平台抽屉的观感，需要人工核对。
+.full-btn {
+  float: right;
+  margin-right: 30px;
+  color: var(--epx-text-secondary);
+  cursor: pointer;
+}
+
+/**抽屉 */
+.popup-drawer {
+
+    :deep(.el-drawer__header) {
+      padding: 10px 20px;
+      font-size: var(--epx-font-size-l);
+      line-height: 24px;
+      flex-shrink: 0;
+      margin: 0;
+      border-bottom: 1px solid var(--epx-border);
+      .header {
+        >span {
+          color: var(--epx-text);
+        }
+      }
+      .full-btn {
+        margin-top: 4px
+      }
+    }
+    :deep(.el-drawer__body) {
+      background: #F3F5FA;
+    }
+
+}
+</style>
+
+<style lang="scss">
+/* ⚠️ 这一块**不能**用 scoped。原来 .popup-dialog 的规则写在上面的 scoped 块里，
+   自 EP 迁移起**整块从未生效**：
+   · element-ui 的 dialog DOM 是 `.el-dialog__wrapper[自定义类] > .el-dialog`，class 落在**外层 wrapper**，
+     所以 `.popup-dialog :deep(.el-dialog)` 能命中；
+   · EP 把 class 直接放到 `.el-dialog` **自身**，且 `.el-dialog` 被 teleport 出组件子树、
+     拿不到 scoped 的 `[data-v-x]` ⇒ 选择器永远不匹配。
+   实测证据（新增岗位弹窗）：`.el-dialog` 的 min-height 是 0px、max-height 是 none（原本写的是 200px / 75%），
+   header padding 是 EP 默认的 `0 32px 16px 0`（原本写的是 10px 20px）。
+   目标元素本来就是弹窗根节点，改成全局 + 类名限定即可。 */
+.popup-dialog {
+  display: flex;
+  flex-direction: column;
+  min-height: 200px;
+  max-height: 75%;
+  overflow: hidden;
+
+  &.is-fullscreen {
+    height: 100% !important;
+    max-height: 100%;
+  }
+
+  .el-dialog__header {
+    // 平台的页面型弹窗基本不带标题，标题栏里唯一可见的 .full-btn 又是 float 的
+    // ⇒ 这一格实测内容高度为 0，EP 默认的 padding-bottom:16px 纯粹是空白。
+    padding: 0;
+    margin-right: 80px; // 给右上角那两个 32×32 的角标按钮让位（有标题时不被压住）
+    // ⚠️ 必须给标题栏留一行真实高度。把它压成 0 之后正文会顶上来盖住右上角的按钮：
+    // 两个按钮是 position:absolute + z-index:auto，而 .epx-add-form 自身是 position:relative
+    // 且 DOM 顺序在后 —— 同为 auto 时后者胜出，实测 elementFromPoint 在按钮中心拿到的是
+    // epx-add-form-item__content，图标整个看不见了。
+    min-height: 32px;
+    font-size: var(--epx-font-size-l);
+    line-height: 24px;
+    flex-shrink: 0;
+    // ⚠️ 这里**不要**写死背景。深色下 --epx-bg-card(#1d1e1f) 比弹窗自身的 --el-bg-color(#141414)
+    // 浅一档，会在弹窗顶部露出一条明显的浅色带、还被 margin-right 截成半截矩形；
+    // 亮色下两者都是 #fff 所以看不出来，只有深色才暴露。继承弹窗背景即可。
+  }
+  // 「标题区和 X 没对齐」：全屏按钮原本是 float:right + margin-top:4px，而关闭按钮是 EP 的
+  // 48×48 绝对定位 —— 两套定位算出来的垂直中线差 4px、右边距差 82px。
+  // 统一成两个同尺寸、同 top、水平相邻的绝对定位方块（都相对 .el-dialog 定位，EP 已给它 position:relative）。
+  // top 用弹窗自身的内边距，让两个按钮正好落在标题栏那一行里（而不是压在弹窗的 padding 区、盖住正文）
+  .el-dialog__headerbtn {
+    top: var(--el-dialog-padding-primary, 16px);
+    right: 0;
+    width: 32px;
+    height: 32px;
+  }
+  .el-dialog__header .full-btn {
+    position: absolute;
+    top: var(--el-dialog-padding-primary, 16px);
+    right: 32px; // 紧挨关闭按钮
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    float: none;
+    margin: 0;
+  }
+  .el-dialog__body {
+    flex: 1;
+    min-height: 0; // flex 子项默认 min-height:auto，不清零的话内部滚动区撑不住
+    box-sizing: border-box;
+    overflow: auto;
+    // 里面装的是一整个页面（epx-page → 页面组件自带 .epx-component 外边距 → 表单自身内边距），
+    // 这层再叠 10px/20px 就是第二层重复内边距：实测左右各白占 20px、上下各 10px。
+    padding: 0;
+  }
+
+  // 页面根组件那层 .epx-component 外边距（base-page/BasePage.vue 的全局规则）在弹窗里是多余的
+  // 第三层——body 已经贴边了。只收窄到「页面容器 > 行 > 列 > 组件」这条直系链，
+  // 不影响页面**内部**嵌套组件之间的间距。
+  .epx-page__container > .el-row > .el-col > .epx-component {
+    margin: 0;
+    height: 100%;
+  }
+  // 表单自身的 10px 内边距与表单项的 10px 外边距重复，弹窗里去掉外面那层
+  .epx-form {
+    padding: 0;
+  }
+}
+.popup-dialog--no-header {
+  .el-dialog__header {
+    display: none;
+  }
+  .el-dialog__body {
+    padding: 0;
+  }
+}
+// The fullscreen chart designer supplies its own page header and close action.
+// Keep its page flush with the viewport instead of adding the dialog frame padding.
+.popup-dialog.is-fullscreen:has(.chart-design-page) {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+// 弹窗垂直位置配置点（dialogPosition：center 默认 / top / bottom / 具体偏移值如 '100px'）。
+// .el-overlay-dialog 是 EP 内部元素（teleport 到 body，scoped :deep 够不到，理由同上面大段说明），
+// 默认非 flex，.el-dialog 单纯靠 margin: var(--el-dialog-margin-top, 15vh) auto 50px 定位——
+// 横向的 auto 天然居中，纵向就是这个变量。
+// - center：吃 EP 原生 align-center prop（模板里 :align-center="dialogAlignCenter"），
+//   EP 自己把 .el-overlay-dialog 切成 flex 并给 .el-dialog margin:auto 做二维居中，不用写 CSS
+// - top / 自定义偏移：复用上面那个 --el-dialog-margin-top 变量（内联样式见 dialogPositionStyle），
+//   不需要 flex
+// - bottom：没有对应的官方变量，借 :has() 从 .el-dialog 的类反查父级 .el-overlay-dialog 开 flex 靠底
+//   （:has() 本仓已有先例：ModuleIndexPage.vue / Input.vue / AppIndex.vue）
+.el-overlay-dialog:has(.popup-dialog--bottom) {
+  display: flex;
+  align-items: flex-end;
+}
+.popup-dialog--bottom {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+</style>