vue2-client 1.16.81 → 1.16.83

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

@@ -1,379 +1,394 @@
-<script setup>
-import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
-import { ref, computed, useAttrs, nextTick } 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'
-  ]
-  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
-})
-
-// 通过暴露的实例访问 $slots，避免直接依赖 Composition API 的 useSlots
-// 在模板中使用 `$slots` 遍历以保持与 Vue2 兼容
-// 创建对XFormTable组件的引用
-const xFormTableRef = ref()
-
-// 使用 MutationObserver 监听展开行高度变化，实时同步固定列
-let observer = null
-const setupHeightSync = () => {
-  try {
-    const wrapper = document.querySelector('.h-form-table-wrapper')
-    if (!wrapper || observer) return
-
-    observer = new MutationObserver((mutations) => {
-      // 只在展开行相关变化时同步，避免不必要的计算
-      const hasRelevantChange = mutations.some(mutation =>
-        mutation.type === 'attributes' &&
-        (mutation.attributeName === 'style' || mutation.attributeName === 'class') ||
-        mutation.type === 'childList'
-      )
-      if (hasRelevantChange) {
-        syncFixedExpandedHeights()
-      }
-    })
-
-    // 监听主表展开行的属性变化
-    const mainTable = wrapper.querySelector('.ant-table-body > table > tbody')
-    if (mainTable) {
-      observer.observe(mainTable, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        attributeFilter: ['style', 'class']
-      })
-    }
-  } catch (e) {
-    console.warn('[HFormTable] setupHeightSync error:', e)
-  }
-}
-
-// 同步固定列中的"展开行"高度到主表展开行高度，避免错位
-const syncFixedExpandedHeights = () => {
-  try {
-    const wrapper = document.querySelector('.h-form-table-wrapper')
-    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')
-          })
-        }
-      }
-    }
-  } catch (e) {
-    console.warn('[HFormTable] syncFixedExpandedHeights error:', e)
-  }
-}
-
-const onExpandLog = (expanded, record) => {
-  // 等DOM完成再测量
-  nextTick(() => {
-    // 设置实时监听（如果还没设置）
-    if (!observer) {
-      setupHeightSync()
-    }
-
-    // 立即同步一次（避免第一次展开时错位）
-    syncFixedExpandedHeights()
-
-    // 短延迟再同步一次（应对异步渲染）
-    setTimeout(() => {
-      syncFixedExpandedHeights()
-    }, 20)
-  })
-}
-
-// 暴露方法给父组件使用
-defineExpose({
-  // 为了兼容性，保留getXFormTableInstance方法
-  getXFormTableInstance: () => xFormTableRef.value
-})
-
-// 计算是否使用自定义分页（兼容 attrs 透传与 tableStyle 配置）
-const isCustomPagination = computed(() => {
-  const a = attrs
-  const paginationAttr = (a && a.paginationStyle) || ''
-  return props.tableStyle === 'custom-pagination' || paginationAttr === 'custom-pagination'
-})
-</script>
-
-<template>
-  <div
-    class="h-form-table-wrapper"
-    :class="[
-      `h-form-table-${tableStyle}`,
-      wrapperClassObject
-    ]"
-  >
-    <x-form-table
-      ref="xFormTableRef"
-      v-bind="$attrs"
-      :customPagination="isCustomPagination"
-      @expand="onExpandLog"
-      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">
-.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%;
-          }
-        }
-      }
-      font-size: 16px;
-    }
-
-    .ant-alert-info {
-      display: none;
-    }
-  }
-
-  :deep(.ant-card) {
-    margin: -10px 0px 29px 0px;
-  }
-
-  :deep(.ant-btn) {
-    border: 0px;
-    box-shadow: none;
-    padding: 0px;
-    color: #5D5C5C;
-    font-weight: bold;
-    letter-spacing: 0em;
-    font-size: 18px;
-    line-height: normal;
-    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;
-    }
-  }
-
-  // 表格高度样式
-  &.h-form-table-height {
-    :deep(.table-wrapper) {
-      .ant-select-open ~ .ant-table-content {
-        height: 500px !important;
-      }
-    }
-  }
-
-  // 表格样式
-  &.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;
-    }
-  }
-}
-</style>
+<script setup>
+import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
+import { ref, computed, useAttrs, nextTick } 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'
+  ]
+  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
+})
+
+// 通过暴露的实例访问 $slots，避免直接依赖 Composition API 的 useSlots
+// 在模板中使用 `$slots` 遍历以保持与 Vue2 兼容
+// 创建对XFormTable组件的引用
+const xFormTableRef = ref()
+
+// 使用 MutationObserver 监听展开行高度变化，实时同步固定列
+let observer = null
+const setupHeightSync = () => {
+  try {
+    const wrapper = document.querySelector('.h-form-table-wrapper')
+    if (!wrapper || observer) return
+
+    observer = new MutationObserver((mutations) => {
+      // 只在展开行相关变化时同步，避免不必要的计算
+      const hasRelevantChange = mutations.some(mutation =>
+        mutation.type === 'attributes' &&
+        (mutation.attributeName === 'style' || mutation.attributeName === 'class') ||
+        mutation.type === 'childList'
+      )
+      if (hasRelevantChange) {
+        syncFixedExpandedHeights()
+      }
+    })
+
+    // 监听主表展开行的属性变化
+    const mainTable = wrapper.querySelector('.ant-table-body > table > tbody')
+    if (mainTable) {
+      observer.observe(mainTable, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['style', 'class']
+      })
+    }
+  } catch (e) {
+    console.warn('[HFormTable] setupHeightSync error:', e)
+  }
+}
+
+// 同步固定列中的"展开行"高度到主表展开行高度，避免错位
+const syncFixedExpandedHeights = () => {
+  try {
+    const wrapper = document.querySelector('.h-form-table-wrapper')
+    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')
+          })
+        }
+      }
+    }
+  } catch (e) {
+    console.warn('[HFormTable] syncFixedExpandedHeights error:', e)
+  }
+}
+
+const onExpandLog = (expanded, record) => {
+  // 等DOM完成再测量
+  nextTick(() => {
+    // 设置实时监听（如果还没设置）
+    if (!observer) {
+      setupHeightSync()
+    }
+
+    // 立即同步一次（避免第一次展开时错位）
+    syncFixedExpandedHeights()
+
+    // 短延迟再同步一次（应对异步渲染）
+    setTimeout(() => {
+      syncFixedExpandedHeights()
+    }, 20)
+  })
+}
+
+// 暴露方法给父组件使用
+defineExpose({
+  // 为了兼容性，保留getXFormTableInstance方法
+  getXFormTableInstance: () => xFormTableRef.value
+})
+
+// 计算是否使用自定义分页（兼容 attrs 透传与 tableStyle 配置）
+const isCustomPagination = computed(() => {
+  const a = attrs
+  const paginationAttr = (a && a.paginationStyle) || ''
+  return props.tableStyle === 'custom-pagination' || paginationAttr === 'custom-pagination'
+})
+</script>
+
+<template>
+  <div
+    class="h-form-table-wrapper"
+    :class="[
+      `h-form-table-${tableStyle}`,
+      wrapperClassObject
+    ]"
+  >
+    <x-form-table
+      ref="xFormTableRef"
+      v-bind="$attrs"
+      :customPagination="isCustomPagination"
+      @expand="onExpandLog"
+      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">
+.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%;
+          }
+        }
+      }
+      font-size: 16px;
+    }
+
+    .ant-alert-info {
+      display: none;
+    }
+  }
+
+  :deep(.ant-card) {
+    margin: -10px 0px 29px 0px;
+  }
+
+  :deep(.ant-btn) {
+    border: 0px;
+    box-shadow: none;
+    padding: 0px;
+    color: #5D5C5C;
+    font-weight: bold;
+    letter-spacing: 0em;
+    font-size: 18px;
+    line-height: normal;
+    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;
+    }
+  }
+
+  // 表格高度样式
+  &.h-form-table-height {
+    :deep(.table-wrapper) {
+      .ant-select-open ~ .ant-table-content {
+        height: 500px !important;
+      }
+    }
+  }
+
+  // 表格样式
+  &.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;
+    }
+  }
+}
+</style>