经费提案整改

2026-10-30 15:50:53 +08:00
parent 29260423d5
commit 4f85bb08e2
9 changed files with 271 additions and 9 deletions
@@ -10,7 +10,7 @@
              :finished="tableFinished"
              finished-text="没有更多了"
              @load="onLoad">
-      <div class="table-list-container">
+      <div class="table-list-container" @click="showOverflowText">
        <div v-for="(row, index) in tableData" :key="index" class="table-list-item"
             :data-row-id="row && row.id ? row.id : ''">
          <slot name="header" :index="index" :row="row">
@@ -36,6 +36,12 @@
        </div>
      </div>
    </van-list>
+    <van-popover ref="overflowPopover" :value="overflowVisible" :style="overflowAnchorStyle"
+                 :placement="overflowPlacement" get-container="body" @input="onOverflowInput"
+                 @opened="positionOverflow">
+      <div class="table-list-overflow-content">{{ overflowText }}</div>
+      <template #reference><span></span></template>
+    </van-popover>
  </van-pull-refresh>
 </template>
 <script>
@@ -90,10 +96,138 @@ module.exports = {
      tableLoading: false,
      tableFinished: false,
      tableRefreshing: false,
-      localPageForm: {...this.page_form}
+      localPageForm: {...this.page_form},
+      overflowVisible: false,
+      overflowText: "",
+      overflowTarget: null,
+      overflowPlacement: "top",
+      overflowAnchorStyle: {}
    }
  },
  methods: {
+    // 只响应真正被截断的纯文字，保留卡片内按钮和业务插槽原有的点击行为。
+    showOverflowText(event) {
+      const target = event.target
+      if (!target || !target.closest) return
+      const card = target.closest(".table-list-item")
+      if (!card || target.closest(".item-actions, a, button, input, textarea, select, [role=button], [tabindex], [onclick]")) return
+      if (target.children.length || !target.textContent.trim() || this.hasOverflowClickHandler(target, card)) return
+      const style = window.getComputedStyle(target)
+      if (style.textOverflow !== "ellipsis" || (target.scrollWidth <= target.clientWidth && target.scrollHeight <= target.clientHeight)) return
+
+      const rect = target.getBoundingClientRect()
+      this.overflowTarget = target
+      this.overflowText = target.textContent.trim()
+      this.overflowPlacement = rect.top < 180 ? "bottom" : "top"
+      this.overflowAnchorStyle = {
+        position: "fixed",
+        display: "block",
+        pointerEvents: "none",
+        left: rect.left + "px",
+        top: rect.top + "px",
+        width: rect.width + "px",
+        height: rect.height + "px"
+      }
+      if (!this.overflowVisible) this.bindOverflowListeners()
+      this.overflowVisible = true
+      this.$nextTick(() => {
+        const instance = this.$refs.overflowPopover
+        if (instance) instance.updateLocation()
+        setTimeout(() => this.positionOverflow(), 50)
+        setTimeout(() => this.positionOverflow(), 350)
+      })
+    },
+
+    // 检查文字及其卡片内的祖先节点，避免干扰已有 Vue 点击事件。
+    hasOverflowClickHandler(target, card) {
+      const ancestors = []
+      let element = target
+      while (element && element !== card.parentElement) {
+        ancestors.push(element)
+        element = element.parentElement
+      }
+      const visit = (node) => {
+        if (!node) return false
+        const events = node.data ? [node.data.on, node.data.nativeOn] : []
+        if (ancestors.includes(node.elm) && events.some((handlers) => handlers &&
+            Object.keys(handlers).some((key) => /^[~!&]*(click|touchstart|pointerdown|mousedown)$/.test(key)))) return true
+        if (node.componentInstance && visit(node.componentInstance._vnode)) return true
+        return Array.isArray(node.children) && node.children.some((child) => visit(child))
+      }
+      return visit(this._vnode)
+    },
+
+    // Vant 的弹层挂在 body；校正窗口边缘的位置，避免完整文字被屏幕裁掉。
+    positionOverflow() {
+      const instance = this.$refs.overflowPopover
+      const popup = instance && instance.$refs.popover && instance.$refs.popover.$el
+      if (!this.overflowVisible || !this.overflowTarget || !popup) return
+      const rect = popup.getBoundingClientRect()
+      const anchor = this.overflowTarget.getBoundingClientRect()
+      if (!rect.width || !rect.height) return
+      const margin = 8
+      const left = Math.max(margin, Math.min(rect.left, window.innerWidth - rect.width - margin))
+      let top = rect.top
+      if (top < margin) top = anchor.bottom + 8
+      if (top + rect.height > window.innerHeight - margin) top = anchor.top - rect.height - 8
+      top = Math.max(margin, Math.min(top, window.innerHeight - rect.height - margin))
+      popup.style.left = (parseFloat(popup.style.left) || 0) + left - rect.left + "px"
+      popup.style.top = (parseFloat(popup.style.top) || 0) + top - rect.top + "px"
+      const arrow = popup.querySelector(".van-popover__arrow")
+      if (arrow) {
+        arrow.style.left = Math.max(12, Math.min(anchor.left + anchor.width / 2 - left, rect.width - 12)) + "px"
+      }
+    },
+
+    onOverflowInput(visible) {
+      this.overflowVisible = visible
+      if (!visible) {
+        this.overflowTarget = null
+        this.unbindOverflowListeners()
+      }
+    },
+
+    // 监听只在气泡打开时存在，PJAX 替换页面前也会关闭气泡并注销。
+    bindOverflowListeners() {
+      document.addEventListener("click", this.closeOverflowOnClick)
+      window.addEventListener("scroll", this.closeOverflowOnMove, true)
+      window.addEventListener("resize", this.closeOverflowOnMove)
+      window.addEventListener("transitionend", this.onOverflowAnimationEnd)
+      window.addEventListener("animationend", this.onOverflowAnimationEnd)
+      $(document).on("pjax:send", this.closeOverflowForNavigation)
+    },
+
+    unbindOverflowListeners() {
+      document.removeEventListener("click", this.closeOverflowOnClick)
+      window.removeEventListener("scroll", this.closeOverflowOnMove, true)
+      window.removeEventListener("resize", this.closeOverflowOnMove)
+      window.removeEventListener("transitionend", this.onOverflowAnimationEnd)
+      window.removeEventListener("animationend", this.onOverflowAnimationEnd)
+      $(document).off("pjax:send", this.closeOverflowForNavigation)
+    },
+
+    closeOverflowForNavigation() {
+      this.onOverflowInput(false)
+    },
+
+    // Vant 会在动画结束时重新计算定位，随后再次限制气泡的屏幕边界。
+    onOverflowAnimationEnd() {
+      if (this.overflowVisible) setTimeout(() => this.positionOverflow(), 0)
+    },
+
+    // 滚动或改变屏幕尺寸时关闭气泡，避免气泡脱离原文字位置。
+    closeOverflowOnMove(event) {
+      if (event && event.target && event.target.closest && event.target.closest(".table-list-overflow-content")) return
+      this.onOverflowInput(false)
+    },
+
+    closeOverflowOnClick(event) {
+      if (!this.overflowVisible) return
+      if (this.overflowTarget && this.overflowTarget.contains(event.target)) return
+      if (event.target.closest && event.target.closest(".table-list-overflow-content")) return
+      this.onOverflowInput(false)
+    },
+
    /**
     * 获取当前列表快照。
     * 返回值包含已加载记录、分页参数和加载完成状态，供业务页面在进入详情前暂存列表现场。
@@ -186,10 +320,28 @@ module.exports = {
  },
  mounted() {
    this.$emit("ready")
+  },
+  beforeDestroy() {
+    this.unbindOverflowListeners()
  }
 }
 </script>

+<style>
+/* Vant 将气泡挂到 body，控制宽高并允许长文本在气泡内滚动。 */
+.table-list-overflow-content {
+  max-width: min(240px, calc(100vw - 48px));
+  max-height: 160px;
+  padding: 10px 12px;
+  overflow-y: auto;
+  color: #253247;
+  font-size: 13px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+</style>
+
 <style scoped>
 .table-list-container {
  padding: 0;