vue2-client 1.15.128 → 1.15.129

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

@@ -1,14 +1,118 @@
 <script setup lang="ts">
 import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
+import { ref, onMounted, onUpdated, getCurrentInstance, watch, nextTick } from 'vue'
 
-// 只定义HFormTable特有的属性
 defineProps({
-  // HFormTable特有的属性
   tableStyle: {
     type: String,
     default: 'formtable-col1'
   }
 })
+
+const xFormTableRef = ref(null)
+const instance = getCurrentInstance()
+
+// 防抖控制
+let syncTimeout = null
+function debounceSync (callback, delay = 100) {
+  if (syncTimeout) clearTimeout(syncTimeout)
+  syncTimeout = setTimeout(callback, delay)
+}
+
+// 方法缓存，避免重复挂载
+const syncedMethods = new WeakMap()
+
+function syncChildRefs () {
+  if (!instance || !instance.proxy || !xFormTableRef.value) return
+  const proxy = instance.proxy
+  const target = proxy.$refs
+  const childRefs = xFormTableRef.value.$refs
+  if (!childRefs) return
+
+  Object.entries(childRefs).forEach(([key, value]) => {
+    const v = Array.isArray(value) ? value[0] : value
+    if (target[key] !== v) target[key] = v
+  })
+  if (target.xFormTableRef !== xFormTableRef.value) target.xFormTableRef = xFormTableRef.value
+}
+
+function getAllFunctionNames (obj) {
+  if (!obj) return []
+  const names = new Set()
+  let current = obj
+  while (current && current !== Object.prototype) {
+    Object.getOwnPropertyNames(current).forEach(name => {
+      if (typeof obj[name] === 'function' && name !== 'constructor') names.add(name)
+    })
+    current = Object.getPrototypeOf(current)
+  }
+  return Array.from(names)
+}
+
+function syncChildMethods () {
+  if (!instance || !instance.proxy || !xFormTableRef.value) return
+  const proxy = instance.proxy
+  const inner = xFormTableRef.value
+  const cached = syncedMethods.get(inner) || new Set()
+
+  getAllFunctionNames(inner).forEach(name => {
+    if (cached.has(name) || proxy[name]) return
+    proxy[name] = function () {
+      if (xFormTableRef.value && typeof xFormTableRef.value[name] === 'function') {
+        return xFormTableRef.value[name].apply(xFormTableRef.value, arguments)
+      }
+    }
+    cached.add(name)
+  })
+  syncedMethods.set(inner, cached)
+}
+
+function syncAll () {
+  syncChildRefs()
+  syncChildMethods()
+}
+
+// 子组件生命周期事件回调，确保及时同步
+function onInnerMounted () { nextTick(function () { debounceSync(syncAll) }) }
+function onInnerUpdated () { nextTick(function () { debounceSync(syncChildRefs) }) }
+
+// 生命周期与监听
+onMounted(() => nextTick(() => debounceSync(syncAll)))
+onUpdated(() => nextTick(() => debounceSync(syncAll)))
+
+watch(() => xFormTableRef.value && xFormTableRef.value.$refs, () => nextTick(() => debounceSync(syncChildRefs)), { deep: true, flush: 'post' })
+watch(() => xFormTableRef.value, () => nextTick(() => debounceSync(syncChildMethods)), { flush: 'post' })
+
+// 常用方法显式代理（API更清晰）
+function createMethodProxy (methodName) {
+  return function () {
+    const inst = xFormTableRef.value
+    if (inst && typeof inst[methodName] === 'function') return inst[methodName].apply(inst, arguments)
+  }
+}
+
+const COMMON_METHODS = [
+  'reload', 'init', 'doSearch', 'resetForm', 'refreshTable',
+  'clearRowKeys', 'update', 'setTableData'
+]
+
+defineExpose({
+  getXFormTableInstance: () => xFormTableRef.value,
+  // 显式常用方法
+  ...COMMON_METHODS.reduce((acc, m) => {
+    acc[m] = createMethodProxy(m)
+    return acc
+  }, {}),
+  // 便捷：获取内部表格/表单ref
+  getTableRef: () => {
+    const refs = xFormTableRef.value && xFormTableRef.value.$refs
+    return (refs && (refs.table || refs.xTable)) || undefined
+  },
+  getFormRef: () => {
+    const refs = xFormTableRef.value && xFormTableRef.value.$refs
+    return (refs && (refs.form || refs.xForm)) || undefined
+  }
+})
 </script>
 
 <template>
@@ -19,8 +123,11 @@ defineProps({
     ]"
   >
     <x-form-table
+      ref="xFormTableRef"
       v-bind="$attrs"
       v-on="$listeners"
+      @hook:mounted="onInnerMounted"
+      @hook:updated="onInnerUpdated"
     >
       <template v-for="(_, name) in $slots" #[name]="slotData">
         <slot :name="name" v-bind="slotData" />

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

@@ -1,51 +1,134 @@
 <script setup lang="ts">
 import XTab from '@vue2-client/base-client/components/common/XTab/XTab.vue'
-import { ref } from 'vue'
+import { ref, onMounted, onUpdated, getCurrentInstance, watch, nextTick } from 'vue'
 
 defineProps({
-  // HTab特有的属性
   hasTopMargin: {
     type: Boolean,
     default: true
   }
 })
 
-// 创建对XTab组件的引用
-const xTabRef = ref()
+const emit = defineEmits(['ready'])
 
-// 暴露方法给父组件使用
-defineExpose({
-  // 为了兼容性，保留getXTabInstance方法
-  getXTabInstance: () => xTabRef.value,
+const xTabRef = ref(null)
+const instance = getCurrentInstance()
 
-  // 直接暴露常用方法，方便调用
-  tabPaneChange: function () {
-    if (xTabRef.value) {
-      return xTabRef.value.tabPaneChange.apply(xTabRef.value, arguments)
-    }
-  },
-  initConfig: function () {
-    if (xTabRef.value) {
-      return xTabRef.value.initConfig()
-    }
-  },
-  getConfig: function () {
-    if (xTabRef.value) {
-      return xTabRef.value.getConfig()
+// 就绪承诺
+let _resolveReady = null
+let _readyPromise = null
+function resetReady () {
+  _readyPromise = new Promise(function (resolve) { _resolveReady = resolve })
+}
+resetReady()
+function markReady () {
+  if (_resolveReady) { _resolveReady(); _resolveReady = null }
+  emit('ready')
+}
+
+// 防抖控制
+let syncTimeout = null
+function debounceSync (callback, delay = 100) {
+  if (syncTimeout) clearTimeout(syncTimeout)
+  syncTimeout = setTimeout(callback, delay)
+}
+
+// 方法缓存
+const syncedMethods = new WeakMap()
+
+function getAllFunctionNames (obj) {
+  if (!obj) return []
+  const names = new Set()
+  let current = obj
+  while (current && current !== Object.prototype) {
+    Object.getOwnPropertyNames(current).forEach(name => {
+      if (typeof obj[name] === 'function' && name !== 'constructor') names.add(name)
+    })
+    current = Object.getPrototypeOf(current)
+  }
+  return Array.from(names)
+}
+
+function syncChildMethods () {
+  if (!instance || !instance.proxy || !xTabRef.value) return
+  const proxy = instance.proxy
+  const inner = xTabRef.value
+  const cached = syncedMethods.get(inner) || new Set()
+  getAllFunctionNames(inner).forEach(name => {
+    if (cached.has(name) || proxy[name]) return
+    proxy[name] = function () {
+      if (xTabRef.value && typeof xTabRef.value[name] === 'function') {
+        return xTabRef.value[name].apply(xTabRef.value, arguments)
+      }
     }
-  },
-  // 暴露XTab的属性访问方法
-  getActiveKey: function () {
-    return xTabRef.value && xTabRef.value.activeKey
-  },
-
-  getConfigData: function () {
-    return xTabRef.value && xTabRef.value.config
-  },
-
-  getShowTabBar: function () {
-    return xTabRef.value && xTabRef.value.showTabBar
+    cached.add(name)
+  })
+  syncedMethods.set(inner, cached)
+}
+
+// 访问时动态合并 $refs：原始 + 子组件（拍平数组）+ xTabRef
+function installRefsGetter () {
+  if (!instance || !instance.proxy) return
+  const proxy = instance.proxy
+  const baseRefs = proxy.$refs
+  if (!baseRefs) return
+  try {
+    Object.defineProperty(proxy, '$refs', {
+      configurable: true,
+      get () {
+        const merged = {}
+        // 基础 refs
+        if (baseRefs) {
+          Object.keys(baseRefs).forEach(function (k) { merged[k] = baseRefs[k] })
+        }
+        // 子组件 refs
+        const child = xTabRef.value && xTabRef.value.$refs
+        if (child) {
+          Object.keys(child).forEach(function (k) {
+            const v = Array.isArray(child[k]) ? child[k][0] : child[k]
+            merged[k] = v
+          })
+        }
+        // xTabRef 本身
+        merged.xTabRef = xTabRef.value
+        return merged
+      }
+    })
+  } catch (e) {
+    // 忽略 defineProperty 失败，保持原逻辑
+  }
+}
+
+function syncAll () {
+  syncChildMethods()
+  markReady()
+}
+
+// 生命周期与监听
+onMounted(() => nextTick(() => {
+  installRefsGetter()
+  debounceSync(function () { syncAll() })
+}))
+onUpdated(() => nextTick(() => debounceSync(function () { syncAll() })))
+watch(() => xTabRef.value, () => nextTick(() => { resetReady(); debounceSync(function () { syncAll() }) }), { flush: 'post' })
+
+// 常用方法显式代理
+function createMethodProxy (methodName) {
+  return function () {
+    const inst = xTabRef.value
+    if (inst && typeof inst[methodName] === 'function') return inst[methodName].apply(inst, arguments)
   }
+}
+
+const COMMON_METHODS = ['tabPaneChange', 'initConfig', 'getConfig']
+
+defineExpose({
+  getXTabInstance: () => xTabRef.value,
+  whenReady: () => _readyPromise,
+  ...COMMON_METHODS.reduce((acc, m) => { acc[m] = createMethodProxy(m); return acc }, {}),
+  getActiveKey: () => xTabRef.value && xTabRef.value.activeKey,
+  getConfigData: () => xTabRef.value && xTabRef.value.config,
+  getShowTabBar: () => xTabRef.value && xTabRef.value.showTabBar,
 })
 </script>
 
@@ -65,16 +148,9 @@ defineExpose({
 
 <style scoped lang="less">
 .h-tab-wrapper {
-  // 基础样式
-  :deep(.ant-tabs-tab-next) {
-    display: none;
-  }
-
+  :deep(.ant-tabs-tab-next) { display: none; }
   :deep(.ant-tabs-nav) {
-    .ant-tabs-tab-next-icon {
-      display: none;
-    }
-
+    .ant-tabs-tab-next-icon { display: none; }
     .ant-tabs-tab {
       background-color: transparent;
       border-radius: 6px 6px 0 0;
@@ -88,7 +164,6 @@ defineExpose({
       height: 32px;
       text-align: center;
     }
-
     .ant-tabs-tab-active {
       background-color: #0057FE;
       color: #ffffff;
@@ -98,43 +173,14 @@ defineExpose({
       text-align: center;
     }
   }
-
-  :deep(.ant-tabs-bar) {
-    border-bottom: 2px solid #0057FE;
-  }
-
-  :deep(.ant-tabs-tab-arrow-show) {
-    display: none;
-  }
-
-  :deep(.ant-tabs-ink-bar) {
-    background-color: transparent;
-    bottom: -1px;
-    display: none;
-    height: 0;
-  }
-
-  :deep(.ant-tabs-tab-prev-icon-target) {
-    display: none;
-  }
-
-  // 带顶部边距的样式
+  :deep(.ant-tabs-bar) { border-bottom: 2px solid #0057FE; }
+  :deep(.ant-tabs-tab-arrow-show) { display: none; }
+  :deep(.ant-tabs-ink-bar) { background-color: transparent; bottom: -1px; display: none; height: 0; }
+  :deep(.ant-tabs-tab-prev-icon-target) { display: none; }
   &.h-tab-has-top-margin {
-    :deep(.ant-tabs-nav) {
-      margin-top: 6px;
-    }
-
-    :deep(.ant-tabs-bar) {
-      margin: 0 6px;
-    }
-
-    :deep(.ant-card-body) {
-      padding: 6px 0;
-
-      .ant-card-body {
-        padding: 6px;
-      }
-    }
+    :deep(.ant-tabs-nav) { margin-top: 6px; }
+    :deep(.ant-tabs-bar) { margin: 0 6px; }
+    :deep(.ant-card-body) { padding: 6px 0; .ant-card-body { padding: 6px; } }
   }
 }
 </style>