vue2-client 1.22.3 → 1.22.4

package/.history/src/base-client/components/common/HIS/HFormTable/HFormTable_20260311094834.vue

@@ -1,696 +0,0 @@
-<script setup>
-import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
-import { ref, computed, useAttrs, nextTick, onMounted, onBeforeUnmount } from 'vue'
-
-const props = defineProps({
-  // HFormTable特有的属性
-  tableStyle: {
-    type: String,
-    default: 'formtable-col1'
-  }
-})
-
-// 兼容多种样式配置
-const attrs = useAttrs()
-
-const wrapperClassObject = computed(() => {
-  const a = attrs
-  const classes = {}
-
-  // 通用布尔样式开关（以存在/空字符串/'true' 为真）
-  const booleanStyleKeys = [
-    'button-row-0margin',
-    'top-hidden',
-    'dialog-style',
-    'button-style',
-    'header-center',
-    'expanded-grid-white',
-    'report-mode',
-    // listView模式下隐藏“已选择”按钮
-    'listview-hide-selected',
-    'min-height-auto'
-  ]
-  for (const key of booleanStyleKeys) {
-    const val = a[key]
-    const truthy = val === true || val === '' || val === 'true'
-    if (truthy) classes[`h-form-table-${key}`] = true
-  }
-
-  // 兼容通过 attrs 透传的分页样式：将值映射为当前样式中存在的类名
-  const paginationAttr = a && a.paginationStyle
-  if (paginationAttr && ['pagination-center', 'custom-pagination'].includes(paginationAttr)) {
-    classes[`h-form-table-${paginationAttr}`] = true
-  }
-  return classes
-})
-
-// 从attrs中获取行高度，通过内联样式传递
-const wrapperStyleObject = computed(() => {
-  const a = attrs
-  const rowHeight = a['row-height'] || a.rowHeight || '37px'
-  return {
-    '--row-height': rowHeight
-  }
-})
-
-// 通过暴露的实例访问 $slots，避免直接依赖 Composition API 的 useSlots
-// 在模板中使用 `$slots` 遍历以保持与 Vue2 兼容
-// 创建对XFormTable组件的引用
-const xFormTableRef = ref()
-const wrapperRef = ref()
-
-// 使用 MutationObserver 监听行结构/高度变化，实时同步固定列
-let observer = null
-let resizeObserver = null
-let isSyncing = false
-let rafId = 0
-const getWrapperEl = () => wrapperRef.value
-const scheduleSync = () => {
-  if (isSyncing) return
-  if (rafId) cancelAnimationFrame(rafId)
-  rafId = requestAnimationFrame(() => {
-    rafId = 0
-    syncFixedExpandedHeights()
-  })
-}
-
-// 翻页/换行时固定列 tbody 可能晚于主表更新，先清空固定列内联高度再延迟同步，避免第二页沿用第一页高度
-const clearAllFixedRowHeights = () => {
-  try {
-    const wrapper = getWrapperEl()
-    if (!wrapper) return
-    const fixedRows = wrapper.querySelectorAll(
-      '.ant-table-fixed-right .ant-table-tbody > tr, .ant-table-fixed-right .ant-table-body-inner > table > tbody > tr, .ant-table-fixed-right .ant-table-body > table > tbody > tr'
-    )
-    fixedRows.forEach(f => {
-      if (!f) return
-      f.removeAttribute('data-synced-height')
-      f.style.removeProperty('height')
-      f.style.removeProperty('min-height')
-      f.style.removeProperty('max-height')
-      f.querySelectorAll('td').forEach(td => {
-        td.style.removeProperty('height')
-        td.style.removeProperty('min-height')
-        td.style.removeProperty('max-height')
-        td.style.removeProperty('line-height')
-      })
-    })
-  } catch (e) {
-    console.warn('[HFormTable] clearAllFixedRowHeights error:', e)
-  }
-}
-
-const scheduleSyncAfterPageChange = () => {
-  clearAllFixedRowHeights()
-  if (syncAfterPageChangeTimer) clearTimeout(syncAfterPageChangeTimer)
-  syncAfterPageChangeTimer = setTimeout(() => {
-    syncAfterPageChangeTimer = 0
-    scheduleSync()
-    // 再延迟一次，确保固定列已渲染并完成布局
-    setTimeout(scheduleSync, 60)
-  }, 80)
-}
-let syncAfterPageChangeTimer = 0
-
-const setupHeightSync = () => {
-  try {
-    const wrapper = getWrapperEl()
-    if (!wrapper || observer) return
-
-    observer = new MutationObserver((mutations) => {
-      if (isSyncing) return
-      const hasChildList = mutations.some(m => m.type === 'childList')
-      const hasAttr = mutations.some(m =>
-        m.type === 'attributes' &&
-        (m.attributeName === 'style' || m.attributeName === 'class')
-      )
-      if (hasChildList) {
-        // 换行/翻页：先清空固定列高度，再延迟同步，避免第二页沿用第一页高度
-        scheduleSyncAfterPageChange()
-      } else if (hasAttr) {
-        scheduleSync()
-      }
-    })
-
-    // 监听主表行变化（兼容不同 Ant Table DOM）
-    const mainTable =
-      wrapper.querySelector('.ant-table-body > table > tbody') ||
-      wrapper.querySelector('.ant-table-tbody')
-    if (mainTable) {
-      observer.observe(mainTable, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        attributeFilter: ['style', 'class']
-      })
-    }
-
-    // 同时监听固定列 tbody（有些情况下固定列延后渲染/更新）
-    const fixedTbody =
-      wrapper.querySelector('.ant-table-fixed-right .ant-table-body-inner > table > tbody') ||
-      wrapper.querySelector('.ant-table-fixed-right .ant-table-body > table > tbody') ||
-      wrapper.querySelector('.ant-table-fixed-right .ant-table-tbody')
-    if (fixedTbody) {
-      observer.observe(fixedTbody, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        attributeFilter: ['style', 'class']
-      })
-    }
-
-    // 兜底：表体尺寸变化也触发同步（如下拉弹出/收起、滚动条变化）
-    const tableBody = wrapper.querySelector('.ant-table-body') || wrapper.querySelector('.ant-table-body-inner')
-    if (!resizeObserver && tableBody && typeof ResizeObserver !== 'undefined') {
-      resizeObserver = new ResizeObserver(() => scheduleSync())
-      resizeObserver.observe(tableBody)
-    }
-  } catch (e) {
-    console.warn('[HFormTable] setupHeightSync error:', e)
-  }
-}
-
-// 同步固定列行高到主表对应行高，避免错位
-const syncFixedExpandedHeights = () => {
-  try {
-    const wrapper = getWrapperEl()
-    if (!wrapper) return
-    if (isSyncing) return
-    isSyncing = true
-    const mainRows = Array.from(
-      wrapper.querySelectorAll('.ant-table-tbody > tr.ant-table-row, .ant-table-body > table > tbody > tr.ant-table-row')
-    )
-    const fixedRows = Array.from(
-      wrapper.querySelectorAll('.ant-table-fixed-right .ant-table-tbody > tr, .ant-table-fixed-right .ant-table-body-inner > table > tbody > tr, .ant-table-fixed-right .ant-table-body > table > tbody > tr')
-    )
-
-    // 用 rowKey 精准匹配，避免固定列/主表 tr 数量不一致时错位
-    const getRowKey = (tr) => tr?.getAttribute?.('data-row-key') || tr?.dataset?.rowKey || ''
-    const mainHeights = new Map()
-    mainRows.forEach(m => {
-      const key = getRowKey(m)
-      if (!key) return
-      const h = Math.round(m.getBoundingClientRect().height)
-      if (!h) return
-      mainHeights.set(key, h)
-    })
-
-    // 无 key 的占位行：强制压成 0 高，避免底部占位行撑高整表（第二页“下面几行高”）
-    const collapsePlaceholderRow = (tr) => {
-      if (!tr) return
-      tr.removeAttribute('data-synced-height')
-      tr.style.setProperty('height', '0', 'important')
-      tr.style.setProperty('min-height', '0', 'important')
-      tr.style.setProperty('max-height', '0', 'important')
-      tr.style.setProperty('line-height', '0', 'important')
-      tr.style.setProperty('overflow', 'hidden', 'important')
-      tr.querySelectorAll('td').forEach(td => {
-        td.style.setProperty('height', '0', 'important')
-        td.style.setProperty('min-height', '0', 'important')
-        td.style.setProperty('max-height', '0', 'important')
-        td.style.setProperty('line-height', '0', 'important')
-        td.style.setProperty('padding', '0', 'important')
-        td.style.setProperty('border', 'none', 'important')
-        td.style.setProperty('overflow', 'hidden', 'important')
-      })
-    }
-
-    // 改用「顺序匹配」而非依赖 key 匹配（避免翻页后 key 时间差导致匹配失败）
-    // 主表行和固定列行按 DOM 顺序一一对应
-    const mainRowsList = mainRows.filter(m => getRowKey(m)) // 只取有 key 的主表行
-    const fixedRowsList = fixedRows.filter(f => getRowKey(f)) // 只取有 key 的固定列行
-    const count = Math.min(mainRowsList.length, fixedRowsList.length)
-
-    for (let i = 0; i < count; i++) {
-      const m = mainRowsList[i]
-      const f = fixedRowsList[i]
-      const key = getRowKey(m)
-      if (!key) continue
-
-      const h = Math.round(m.getBoundingClientRect().height)
-      if (!h) continue
-
-      const hs = String(h)
-      if (f.dataset.syncedHeight === hs) continue
-      f.dataset.syncedHeight = hs
-
-      // 彻底清理并重新设置高度，确保覆盖 CSS 样式
-      f.style.cssText = ''
-      f.style.setProperty('height', h + 'px', 'important')
-      f.style.setProperty('min-height', h + 'px', 'important')
-      f.style.setProperty('max-height', h + 'px', 'important')
-      f.style.setProperty('line-height', 'normal', 'important')
-      f.querySelectorAll('td').forEach(td => {
-        td.style.cssText = ''
-        td.style.setProperty('height', h + 'px', 'important')
-        td.style.setProperty('min-height', h + 'px', 'important')
-        td.style.setProperty('max-height', h + 'px', 'important')
-        td.style.setProperty('line-height', 'normal', 'important')
-        td.style.setProperty('vertical-align', 'middle', 'important')
-      })
-    }
-
-    // 清理所有固定列行中可能残留的旧高度（防止旧数据污染）
-    fixedRows.forEach(f => {
-      const key = getRowKey(f)
-      const mainKey = mainHeights.get(key)
-      if (!mainKey && f.dataset.syncedHeight) {
-        // 无对应主表 key，清理掉之前同步的高度
-        collapsePlaceholderRow(f)
-      }
-    })
-  } catch (e) {
-    console.warn('[HFormTable] syncFixedExpandedHeights error:', e)
-  } finally {
-    isSyncing = false
-  }
-}
-const onExpandLog = (expanded, record) => {
-  // 等DOM完成再测量
-  nextTick(() => {
-    // 设置实时监听（如果还没设置）
-    if (!observer) {
-      setupHeightSync()
-    }
-
-    // 立即同步一次（避免第一次展开时错位）
-    syncFixedExpandedHeights()
-
-    // 短延迟再同步一次（应对异步渲染）
-    setTimeout(() => {
-      syncFixedExpandedHeights()
-    }, 20)
-  })
-}
-
-onMounted(() => {
-  nextTick(() => {
-    setupHeightSync()
-    syncFixedExpandedHeights()
-  })
-})
-
-onBeforeUnmount(() => {
-  try {
-    observer?.disconnect?.()
-    resizeObserver?.disconnect?.()
-    if (rafId) cancelAnimationFrame(rafId)
-    if (syncAfterPageChangeTimer) clearTimeout(syncAfterPageChangeTimer)
-  } finally {
-    observer = null
-    resizeObserver = null
-    rafId = 0
-    syncAfterPageChangeTimer = 0
-    isSyncing = false
-  }
-})
-
-// 暴露方法给父组件使用
-defineExpose({
-  // 为了兼容性，保留getXFormTableInstance方法
-  getXFormTableInstance: () => xFormTableRef.value,
-  /** 等待配置结束的异步方法，委托给内部 XFormTable */
-  waitConfigEnd: () => xFormTableRef.value?.waitConfigEnd?.() ?? Promise.resolve()
-})
-
-// 计算是否使用自定义分页（兼容 attrs 透传与 tableStyle 配置）
-const isCustomPagination = computed(() => {
-  const a = attrs
-  const paginationAttr = (a && a.paginationStyle) || ''
-  return props.tableStyle === 'custom-pagination' || paginationAttr === 'custom-pagination'
-})
-// 是否隐藏顶部功能区
-const isHiddenFunctionalArea = computed(() => {
-  return attrs.hiddenFunctionalArea === 'true' || attrs.hiddenFunctionalArea === true
-})
-
-// 从 attrs 中获取 pageMaxSize，如果存在则作为 defaultPageSize
-const computedDefaultPageSize = computed(() => {
-  const pageMaxSize = attrs.pageMaxSize
-  // 将字符串转换为数字，如果无效则使用默认值
-  const numericPageSize = pageMaxSize ? Number(pageMaxSize) : null
-  const defaultSize = (numericPageSize && numericPageSize > 0) ? numericPageSize : 10
-
-  return defaultSize
-})
-</script>
-
-<template>
-  <div
-    ref="wrapperRef"
-    class="h-form-table-wrapper"
-    :class="[
-      `h-form-table-${tableStyle}`,
-      wrapperClassObject
-    ]"
-    :style="wrapperStyleObject"
-  >
-    <x-form-table
-      ref="xFormTableRef"
-      v-bind="$attrs"
-      :defaultPageSize="computedDefaultPageSize"
-      :customPagination="isCustomPagination"
-      :hiddenFunctionalArea="isHiddenFunctionalArea"
-      @expand="onExpandLog"
-      @configEnd="$emit('configEnd')"
-      v-on="$listeners"
-    >
-      <template v-for="(_, name) in $slots" #[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
-      </template>
-    </x-form-table>
-  </div>
-</template>
-
-<style scoped lang="less">
-// 表格行高度变量，默认37px
-@row-height: var(--row-height, 37px);
-
-.h-form-table-wrapper {
-  // 基础样式
-  :deep(.table-wrapper) {
-    .ant-table {
-      .ant-table-row {
-        margin: 0 !important;
-        height: @row-height !important;
-        max-height: @row-height !important;
-        line-height: @row-height !important;
-
-        > td {
-          height: @row-height !important;
-          min-height: @row-height !important;
-          max-height: @row-height !important;
-          padding: 0 8px !important;
-          box-sizing: border-box !important;
-          vertical-align: middle !important;
-
-          // 去掉内部元素的 margin，防止带下拉框的行被撑高
-          .ant-form-item,
-          .ant-form-item-control {
-            margin-bottom: 0 !important;
-            margin-top: 0 !important;
-          }
-          .ant-select,
-          .ant-input,
-          .ant-picker {
-            margin-bottom: 0 !important;
-            margin-top: 0 !important;
-            height: @row-height !important;
-            max-height: @row-height !important;
-            line-height: @row-height !important;
-          }
-          .ant-select-selection--single {
-            height: calc(@row-height - 2px) !important;
-            min-height: calc(@row-height - 2px) !important;
-          }
-          .ant-select-selection__rendered {
-            line-height: calc(@row-height - 2px) !important;
-          }
-        }
-      }
-      font-size: 16px;
-    }
-
-    .ant-alert-info {
-      display: none;
-    }
-  }
-
-  :deep(.ant-card) {
-    margin: -10px 0px 29px 0px;
-  }
-  :deep(.ant-space .ant-btn .anticon) {
-    display: none;
-  }
-  :deep(.ant-space .ant-btn) {
-    border: 0px;
-    box-shadow: none;
-    padding: 0px;
-    color: #5D5C5C;
-    font-weight: bold;
-    letter-spacing: 0em;
-    font-size: 18px;
-    line-height: normal;
-    background-color: transparent;
-    font-family: "Source Han Sans";
-  }
-
-  :deep(.ant-card-body) {
-    padding: 0 6px;
-  }
-
-  :deep(.ant-table-small) {
-    border-width: 0;
-
-    .ant-table-fixed {
-      border-radius: 0;
-      border-bottom: 1px solid #f0f0f0;
-    }
-  }
-
-  // 操作列（固定列）高度与主体一致，行内文字垂直居中
-  :deep(.ant-table-fixed-right .ant-table-body-inner) {
-    table tbody tr.ant-table-row {
-      height: @row-height !important;
-      max-height: @row-height !important;
-
-      > td {
-        height: @row-height !important;
-        min-height: @row-height !important;
-        max-height: @row-height !important;
-        padding: 0 8px !important;
-        box-sizing: border-box !important;
-        vertical-align: middle !important;
-        line-height: @row-height !important;
-      }
-    }
-  }
-  // 主表行高与固定列一致
-  :deep(.table-wrapper .ant-table-body > table > tbody > tr.ant-table-row) {
-    height: @row-height !important;
-    max-height: @row-height !important;
-  }
-
-  :deep(.ant-table-fixed-right .ant-btn),
-  :deep(.ant-table-fixed-right a) {
-    line-height: inherit !important;
-    vertical-align: middle !important;
-    padding: 0 4px;
-  }
-
-  // 表格高度样式
-  &.h-form-table-height {
-    :deep(.table-wrapper) {
-      .ant-select-open ~ .ant-table-content {
-        height: 500px !important;
-      }
-    }
-  }
-  // 表格最小高度自动
-  &.h-form-table-min-height-auto {
-    :deep(.table-wrapper) {
-      .ant-table:not(.ant-table-empty) {
-        .ant-table-content {
-          min-height: auto !important;
-          .ant-table-body {
-            min-height: auto !important;
-          }
-        }
-      }
-    }
-  }
-
-  // 修复数据量少时下拉框被挡住的问题：为表格内容区域设置最小高度
-  // 当表格有数据时，确保表格内容区域有足够高度，避免下拉框被挡住
-  // 注意：只在表格有数据时应用，避免空表格时显示问题
-  :deep(.table-wrapper) {
-    .ant-table:not(.ant-table-empty) {
-      .ant-table-content {
-        // 设置最小高度，确保即使数据少时也有足够空间显示下拉框
-        // 这个高度应该足够显示下拉框选项（通常下拉框高度约200-300px）
-        min-height: 300px;
-        .ant-table-body {
-          // 确保表格体也有最小高度，保证滚动容器有足够空间
-          min-height: 250px;
-        }
-      }
-    }
-  }
-
-  // 表格样式
-  &.h-form-table-table {
-    :deep(.ant-table-small .ant-table-fixed-header) {
-      .ant-table-content {
-        .ant-table-content {
-          .ant-table-body {
-            border-radius: 0 0 4px 4px;
-            // 修复展开行后固定列与主体错位：保持表体滚动容器为自动滚动
-            overflow: auto !important;
-          }
-        }
-      }
-    }
-  }
-  // 移除之前隐藏固定列占位行的样式，保持与主体行数一致
-  // 展开行单元格去除额外内边距，避免高度不一致
-  :deep(.ant-table-expanded-row > td) {
-    padding: 0 !important;
-  }
-  // 展开内容中的表单/控件去掉外边距，避免撑高
-  :deep(.ant-table-expanded-row .ant-form-item) {
-    margin-bottom: 0 !important;
-  }
-
-  // 移除之前的隐藏固定列样式，避免展开/合并后操作列消失
-  &.h-form-table-dialog-style {
-    /* 选择前面的兄弟元素 */
-    :global(.ant-col.ant-col-24[name="trGroup"]:has(+ .ant-card .ant-card-body .h-form-table-wrapper.h-form-table-dialog-style)) {
-      padding-top: 0px !important;
-      padding-left: 0px !important;
-    }
-
-    :global(.ant-card-body:has(.h-form-table-wrapper.h-form-table-dialog-style)) {
-      padding-top: 0px !important;
-      padding-left: 0px !important;
-    }
-  }
-  // 隐藏按钮区域
-  &.h-form-table-button-area-hide {
-    :deep(.ant-btn) {
-      display: none;
-    }
-
-    :deep(.table-wrapper) {
-      margin-top: -39px;
-    }
-  }
-
-  // 顶部区域隐藏（与按钮隐藏一致的视觉需求）
-  &.h-form-table-top-hidden {
-    :deep(.ant-btn) {
-      display: none;
-    }
-
-    :deep(.table-wrapper) {
-      margin-top: -39px;
-    }
-  }
-
-  // 列样式1
-  &.h-form-table-formtable-col1 {
-    :deep(.table-wrapper) {
-      .ant-row {
-        .ant-col span {
-          border: none;
-          width: auto;
-          margin-bottom: auto;
-        }
-      }
-
-      .ant-table {
-        .ant-table-body {
-          .ant-table-fixed colgroup col:nth-child(2) {
-            width: 50px;
-            min-width: 50px;
-          }
-        }
-
-        .ant-table-header {
-          .ant-table-fixed colgroup col:nth-child(2) {
-            width: 50px;
-            min-width: 50px;
-          }
-        }
-      }
-    }
-  }
-
-  // 底部分页居中 & 自定义分页样式（共用样式）
-  &.h-form-table-bottom-center,
-  &.h-form-table-custom-pagination {
-    :deep(.table-wrapper) {
-      .ant-row-flex-start {
-        position: relative;
-        display: flex;
-        align-items: center;
-        margin-top: 12px !important;
-        height: 32px;
-
-        // 防止第一个子元素无限拉伸，影响分页居中
-        > :first-child {
-          flex: 0 0 auto;
-        }
-
-        // 将第二个子元素（分页）绝对居中
-        > :nth-child(2) {
-          position: absolute;
-          left: 50%;
-          transform: translateX(-50%);
-        }
-      }
-    }
-  }
-
-  // 按钮行0margin
-  &.h-form-table-button-row-0margin {
-    :deep(.ant-row) {
-      margin: 0px;
-    }
-  }
-  // crud按钮样式
-  &.h-form-table-button-style {
-    :deep(.ant-btn){
-      border-radius: 6px;
-      background-color: #FFFFFF;
-      border: 1px solid #9499A0;
-      color: #313131;
-      font-weight: normal;
-      letter-spacing: 0em;
-      font-size: 16px;
-      font-family: "Source Han Sans";
-      line-height: normal;
-    }
-  }
-  // 表格内容全部居中样式
-  &.h-form-table-header-center {
-    :deep(.ant-table-thead > tr > th),
-    :deep(.ant-table-tbody > tr > td) {
-      text-align: center !important;
-    }
-  }
-  // 行展开白色背景
-  &.h-form-table-expanded-grid-white {
-    :deep(.ant-table-expanded-row){
-      background-color: white;
-    }
-  }
-  // listView模式下隐藏“已选择”按钮（该按钮包含 monitor 图标）
-  &.h-form-table-listview-hide-selected {
-    :deep(.ant-badge:has(.ant-btn .anticon-monitor)) {
-      display: none !important;
-    }
-  }
-  // 报表样式
-  @skip-cells: 2;
-  &.h-form-table-report-mode {
-    --skip-cells: 4;
-    :deep(.ant-table-header){
-      padding-bottom: 0px !important;
-    }
-    :deep(.ant-table-content){
-      border: 1px solid #E5E9F0;
-    }
-    :deep(.resize-table-th){
-      background-color: white !important;
-    }
-    :deep(.ant-table-row) {
-      .ant-table-row-cell-ellipsis {
-        &:nth-child(n + @{skip-cells}) {
-          color: #3362DA !important;
-        }
-      }
-    }
-  }
-}
-</style>
-