vue2-client 1.19.97 → 1.19.99

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.19.97",
+  "version": "1.19.99",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

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

@@ -1,199 +1,330 @@
 <script setup>
 import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
-import { ref, computed, useAttrs, nextTick } from 'vue'
+import { ref, computed, useAttrs, nextTick, onMounted, onBeforeUnmount } from 'vue'
+
+// 常量配置
+const ROW_HEIGHT_DEFAULT = '37px'
+const BOOLEAN_STYLE_KEYS = [
+  'button-row-0margin',
+  'top-hidden',
+  'dialog-style',
+  'button-style',
+  'header-center',
+  'expanded-grid-white',
+  'report-mode',
+  'listview-hide-selected',
+  'min-height-auto'
+]
+const ALLOWED_PAGINATION_STYLES = ['pagination-center', 'custom-pagination']
+const SYNC_DELAY_AFTER_PAGE = 80
+const SYNC_DELAY_RETRY = 60
+const SYNC_DELAY_EXPAND = 20
+
+// 选择器常量
+const MAIN_TABLE_SELECTORS = [
+  '.ant-table-tbody > tr.ant-table-row',
+  '.ant-table-body > table > tbody > tr.ant-table-row'
+]
+const FIXED_TABLE_SELECTORS = [
+  '.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'
+]
+const MAIN_TBODY_SELECTORS = ['.ant-table-body > table > tbody', '.ant-table-tbody']
+const FIXED_TBODY_SELECTORS = [
+  '.ant-table-fixed-right .ant-table-body-inner > table > tbody',
+  '.ant-table-fixed-right .ant-table-body > table > tbody',
+  '.ant-table-fixed-right .ant-table-tbody'
+]
+const TABLE_BODY_SELECTORS = ['.ant-table-body', '.ant-table-body-inner']
+
+// 辅助函数
+const getRowKey = (tr) => tr?.getAttribute?.('data-row-key') || tr?.dataset?.rowKey || ''
+
+const cleanRowStyles = (element, isCollapse = false) => {
+  if (!element) return
+  element.removeAttribute('data-synced-height')
+  if (isCollapse) {
+    element.style.setProperty('height', '0', 'important')
+    element.style.setProperty('min-height', '0', 'important')
+    element.style.setProperty('max-height', '0', 'important')
+    element.style.setProperty('line-height', '0', 'important')
+    element.style.setProperty('overflow', 'hidden', 'important')
+  } else {
+    element.style.removeProperty('height')
+    element.style.removeProperty('min-height')
+    element.style.removeProperty('max-height')
+    element.style.removeProperty('line-height')
+  }
+}
+
+const cleanCellStyles = (td, isCollapse = false) => {
+  if (isCollapse) {
+    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')
+  } else {
+    td.style.removeProperty('height')
+    td.style.removeProperty('min-height')
+    td.style.removeProperty('max-height')
+    td.style.removeProperty('line-height')
+    td.style.removeProperty('vertical-align')
+  }
+}
+
+const queryFirst = (container, selectors) => {
+  for (const sel of selectors) {
+    const el = container.querySelector(sel)
+    if (el) return el
+  }
+  return null
+}
 
 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]
+  for (const key of BOOLEAN_STYLE_KEYS) {
+    const val = attrs[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)) {
+  const paginationAttr = attrs?.paginationStyle
+  if (paginationAttr && ALLOWED_PAGINATION_STYLES.includes(paginationAttr)) {
     classes[`h-form-table-${paginationAttr}`] = true
   }
   return classes
 })
 
-// 通过暴露的实例访问 $slots，避免直接依赖 Composition API 的 useSlots
-// 在模板中使用 `$slots` 遍历以保持与 Vue2 兼容
-// 创建对XFormTable组件的引用
+const wrapperStyleObject = computed(() => {
+  const rowHeight = attrs['row-height'] || attrs.rowHeight || ROW_HEIGHT_DEFAULT
+  return { '--row-height': rowHeight }
+})
+
 const xFormTableRef = ref()
+const wrapperRef = ref()
 
-// 使用 MutationObserver 监听展开行高度变化，实时同步固定列
+// 状态变量
 let observer = null
+let resizeObserver = null
+let isSyncing = false
+let rafId = 0
+let syncAfterPageChangeTimer = 0
+
+const getWrapperEl = () => wrapperRef.value
+
+const scheduleSync = () => {
+  if (isSyncing) return
+  if (rafId) cancelAnimationFrame(rafId)
+  rafId = requestAnimationFrame(() => {
+    rafId = 0
+    syncFixedExpandedHeights()
+  })
+}
+
+const clearAllFixedRowHeights = () => {
+  try {
+    const wrapper = getWrapperEl()
+    if (!wrapper) return
+    const fixedRows = wrapper.querySelectorAll(FIXED_TABLE_SELECTORS.join(', '))
+    fixedRows.forEach(f => {
+      if (!f) return
+      cleanRowStyles(f, true)
+      f.querySelectorAll('td').forEach(td => cleanCellStyles(td, true))
+    })
+  } catch (e) {
+    console.warn('[HFormTable] clearAllFixedRowHeights error:', e)
+  }
+}
+
+const scheduleSyncAfterPageChange = () => {
+  clearAllFixedRowHeights()
+  if (syncAfterPageChangeTimer) clearTimeout(syncAfterPageChangeTimer)
+  syncAfterPageChangeTimer = setTimeout(() => {
+    syncAfterPageChangeTimer = 0
+    scheduleSync()
+    setTimeout(scheduleSync, SYNC_DELAY_RETRY)
+  }, SYNC_DELAY_AFTER_PAGE)
+}
+
 const setupHeightSync = () => {
   try {
-    const wrapper = document.querySelector('.h-form-table-wrapper')
+    const wrapper = getWrapperEl()
     if (!wrapper || observer) return
 
+    const mainTable = queryFirst(wrapper, MAIN_TBODY_SELECTORS)
+    const fixedTbody = queryFirst(wrapper, FIXED_TBODY_SELECTORS)
+    const tableBody = queryFirst(wrapper, TABLE_BODY_SELECTORS)
+
+    const observerOptions = {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['style', 'class']
+    }
+
     observer = new MutationObserver((mutations) => {
-      // 只在展开行相关变化时同步，避免不必要的计算
-      const hasRelevantChange = mutations.some(mutation =>
-        mutation.type === 'attributes' &&
-        (mutation.attributeName === 'style' || mutation.attributeName === 'class') ||
-        mutation.type === 'childList'
+      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 (hasRelevantChange) {
-        syncFixedExpandedHeights()
+      if (hasChildList) {
+        scheduleSyncAfterPageChange()
+      } else if (hasAttr) {
+        scheduleSync()
       }
     })
 
-    // 监听主表展开行的属性变化
-    const mainTable = wrapper.querySelector('.ant-table-body > table > tbody')
-    if (mainTable) {
-      observer.observe(mainTable, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        attributeFilter: ['style', 'class']
-      })
+    if (mainTable) observer.observe(mainTable, observerOptions)
+    if (fixedTbody) observer.observe(fixedTbody, observerOptions)
+
+    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 = document.querySelector('.h-form-table-wrapper')
+    const wrapper = getWrapperEl()
     if (!wrapper) return
-    const mainRows = Array.from(wrapper.querySelectorAll('.ant-table-body > table > tbody > tr'))
-    const fixedRows = Array.from(wrapper.querySelectorAll('.ant-table-fixed-right .ant-table-body-inner > table > tbody > tr'))
-    const len = Math.min(mainRows.length, fixedRows.length)
-
-    for (let i = 0; i < len; i++) {
-      const m = mainRows[i]
-      const f = fixedRows[i]
-      if (!f) continue
-
-      if (m.classList.contains('ant-table-expanded-row')) {
-        const h = m.clientHeight
-        // 缓存高度，避免重复设置
-        if (f.dataset.syncedHeight === h.toString()) continue
-        f.dataset.syncedHeight = h.toString()
-
-        // 强制同步高度，使用 !important 覆盖其他样式
-        f.style.setProperty('height', h + 'px', 'important')
-        f.style.setProperty('min-height', h + 'px', 'important')
-        f.style.setProperty('max-height', h + 'px', 'important')
-
-        // 同步单元格高度，确保完全一致
-        const tds = f.querySelectorAll('td')
-        tds.forEach(td => {
-          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('padding', '0', 'important')
-          td.style.setProperty('border', 'none', 'important')
-        })
-      } else {
-        // 清理非展开行的内联样式和缓存
-        if (f.dataset.syncedHeight) {
-          f.removeAttribute('data-synced-height')
-          f.style.removeProperty('height')
-          f.style.removeProperty('min-height')
-          f.style.removeProperty('max-height')
-          const tds = f.querySelectorAll('td')
-          tds.forEach(td => {
-            td.style.removeProperty('height')
-            td.style.removeProperty('min-height')
-            td.style.removeProperty('max-height')
-            td.style.removeProperty('padding')
-            td.style.removeProperty('border')
-          })
-        }
-      }
+    if (isSyncing) return
+    isSyncing = true
+
+    const mainRows = Array.from(wrapper.querySelectorAll(MAIN_TABLE_SELECTORS.join(', ')))
+    const fixedRows = Array.from(wrapper.querySelectorAll(FIXED_TABLE_SELECTORS.join(', ')))
+
+    // 只取有 key 的行进行顺序匹配
+    const mainRowsList = mainRows.filter(m => getRowKey(m))
+    const fixedRowsList = fixedRows.filter(f => getRowKey(f))
+    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
+
+      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')
+      })
     }
+
+    // 清理无对应主表 key 的固定列行
+    const mainKeys = new Set(mainRowsList.map(m => getRowKey(m)))
+    fixedRows.forEach(f => {
+      const key = getRowKey(f)
+      if (!mainKeys.has(key) && f.dataset.syncedHeight) {
+        cleanRowStyles(f, true)
+        f.querySelectorAll('td').forEach(td => cleanCellStyles(td, true))
+      }
+    })
   } catch (e) {
     console.warn('[HFormTable] syncFixedExpandedHeights error:', e)
+  } finally {
+    isSyncing = false
   }
 }
 
-const onExpandLog = (expanded, record) => {
-  // 等DOM完成再测量
+const onExpandLog = () => {
   nextTick(() => {
-    // 设置实时监听（如果还没设置）
     if (!observer) {
       setupHeightSync()
     }
-
-    // 立即同步一次（避免第一次展开时错位）
     syncFixedExpandedHeights()
-
-    // 短延迟再同步一次（应对异步渲染）
-    setTimeout(() => {
-      syncFixedExpandedHeights()
-    }, 20)
+    setTimeout(() => syncFixedExpandedHeights(), SYNC_DELAY_EXPAND)
   })
 }
 
-// 暴露方法给父组件使用
-defineExpose({
-  // 为了兼容性，保留getXFormTableInstance方法
-  getXFormTableInstance: () => xFormTableRef.value,
-  /** 等待配置结束的异步方法，委托给内部 XFormTable */
-  waitConfigEnd: () => xFormTableRef.value?.waitConfigEnd?.() ?? Promise.resolve()
+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
+  }
 })
 
-// 计算是否使用自定义分页（兼容 attrs 透传与 tableStyle 配置）
+// 计算属性
 const isCustomPagination = computed(() => {
-  const a = attrs
-  const paginationAttr = (a && a.paginationStyle) || ''
+  const paginationAttr = attrs?.paginationStyle || ''
   return props.tableStyle === 'custom-pagination' || paginationAttr === 'custom-pagination'
 })
-// 是否隐藏顶部功能区
+
 const isHiddenFunctionalArea = computed(() => {
-  return attrs.hiddenFunctionalArea === 'true' || attrs.hiddenFunctionalArea === true
+  return attrs?.hiddenFunctionalArea === 'true' || attrs?.hiddenFunctionalArea === true
 })
 
-// 从 attrs 中获取 pageMaxSize，如果存在则作为 defaultPageSize
 const computedDefaultPageSize = computed(() => {
-  const pageMaxSize = attrs.pageMaxSize
-  // 将字符串转换为数字，如果无效则使用默认值
+  const pageMaxSize = attrs?.pageMaxSize
   const numericPageSize = pageMaxSize ? Number(pageMaxSize) : null
-  const defaultSize = (numericPageSize && numericPageSize > 0) ? numericPageSize : 10
+  return (numericPageSize && numericPageSize > 0) ? numericPageSize : 10
+})
 
-  return defaultSize
+defineExpose({
+  getXFormTableInstance: () => xFormTableRef.value,
+  waitConfigEnd: () => xFormTableRef.value?.waitConfigEnd?.() ?? Promise.resolve()
 })
 </script>
 
 <template>
   <div
+    ref="wrapperRef"
     class="h-form-table-wrapper"
     :class="[
       `h-form-table-${tableStyle}`,
       wrapperClassObject
     ]"
+    :style="wrapperStyleObject"
   >
     <x-form-table
       ref="xFormTableRef"
@@ -213,25 +344,48 @@ const computedDefaultPageSize = computed(() => {
 </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: 0px;
-
-        .ant-form-item {
-          margin: 0px;
-
-          .ant-form-item-control-wrapper {
-            .ant-form-item-control {
-              line-height: 0px;
-
-              .ant-select-selection--multiple {
-                padding-bottom: 2px;
-              }
-            }
-            width: 100%;
+        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;
           }
         }
       }
@@ -275,6 +429,36 @@ const computedDefaultPageSize = computed(() => {
     }
   }
 
+  // 操作列（固定列）高度与主体一致，行内文字垂直居中
+  :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) {
@@ -461,7 +645,7 @@ const computedDefaultPageSize = computed(() => {
       background-color: white;
     }
   }
-  // listView模式下隐藏“已选择”按钮（该按钮包含 monitor 图标）
+  // listView模式下隐藏"已选择"按钮（该按钮包含 monitor 图标）
   &.h-form-table-listview-hide-selected {
     :deep(.ant-badge:has(.ant-btn .anticon-monitor)) {
       display: none !important;

package/src/base-client/components/common/XForm/XFormItem.vue

@@ -845,7 +845,7 @@ export default {
     if (this.attr.dataChangeFunc) {
       this.debouncedDataChangeFunc = debounce(this.dataChangeFunc, 200)
       // 执行一次
-      this.dataChangeFunc()
+      this.dataChangeFunc(true)
     }
     if (this.attr.showFormItemFunc) {
       this.debouncedShowFormItemFunc = debounce(this.showFormItemFunc, 100)
@@ -1092,7 +1092,8 @@ export default {
     },
 
     // Select组件change处理
-    handleSelectChange() {
+    handleSelectChange(a,b,c) {
+      console.warn(a,b,c)
       this.handleFormItemChange()
     },
 
@@ -1246,7 +1247,8 @@ export default {
         this.getDataCallback(option)
       }
     },
-    async dataChangeFunc() {
+    // f 是否是初始化执行的
+    async dataChangeFunc(f = false) {
       if (this.attr.dataChangeFunc) {
         await executeStrFunctionByContext(this, this.attr.dataChangeFunc, [
           this.form,
@@ -1255,7 +1257,8 @@ export default {
           util,
           this.mode,
           runLogic,
-          getConfigByNameAsync
+          getConfigByNameAsync,
+          f
         ])
       }
     },