vue2-client 1.16.51 → 1.16.52

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

@@ -1,32 +1,80 @@
-<script setup lang="ts">
+<script setup>
 import XTab from '@vue2-client/base-client/components/common/XTab/XTab.vue'
-import { ref } from 'vue'
-
-defineProps({
-  // HTab特有的属性
-  hasTopMargin: {
-    type: Boolean,
-    default: true
-  },
-  // 是否启用 style7 样式（细下划线、自适应）
-  useStyle7: {
-    type: Boolean,
-    default: false
-  },
-  // 是否叠加圆点样式（仅在 useStyle7 为 true 时生效）
-  useCycle: {
-    type: Boolean,
-    default: false
-  },
-  useStyle8: {
-    type: Boolean,
-    default: false
+import { ref, computed, useAttrs, useSlots, watch, onMounted } from 'vue'
+import { getConfigByName } from '@vue2-client/services/api/common'
+
+const props = defineProps({
+  // 标签栏右侧附加区域的配置名（可选）。提供时将自动加载配置并渲染到 tabBar 右侧。
+  tabBarExtraConfig: {
+    type: String,
+    default: undefined
+  }
+})
+
+// 兼容多种样式配置
+const attrs = useAttrs()
+const wrapperClassObject = computed(() => {
+  const a = attrs
+  const classes = {}
+
+  // 通用布尔样式开关（以存在/空字符串/'true' 为真）
+  const booleanStyleKeys = [
+    'hasTopMargin', 'useStyle7', 'useCycle', 'useStyle8'
+  ]
+  for (const key of booleanStyleKeys) {
+    const val = a[key]
+    const truthy = val === true || val === '' || val === 'true'
+    if (truthy) classes[`h-tab-${key}`] = true
   }
+  return classes
 })
 
 // 创建对XTab组件的引用
 const xTabRef = ref()
 
+// 获取插槽（避免模板中直接使用 $slots 触发类型检查错误）
+const slots = useSlots()
+const slotNames = computed(() => {
+  try {
+    return Object.keys(slots || {})
+  } catch (e) {
+    return []
+  }
+})
+
+// 右侧附加区域的动态配置
+const extraConfig = ref(null)
+const extraItems = computed(() => {
+  const cfg = extraConfig.value
+  return cfg && cfg.value ? cfg.value : []
+})
+
+// 本地异步组件映射（未全局注册时生效）
+const localMap = {
+  'x-input': () => import('@vue2-client/base-client/components/common/XInput/XInput.vue'),
+  'x-select': () => import('@vue2-client/base-client/components/his/XSelect/XSelect.vue'),
+  'x-radio': () => import('@vue2-client/base-client/components/his/XRadio/XRadio.vue'),
+  'x-buttons': () => import('@vue2-client/base-client/components/common/XButtons/XButtons.vue'),
+  'h-buttons': () => import('@vue2-client/base-client/components/common/HIS/HButtons/HButtons.vue')
+}
+
+// 从 attrs 中读取 serverName 与 env（保持向后兼容）
+const serverName = computed(() => (attrs && attrs.serverName))
+const env = computed(() => (attrs && attrs.env) || 'prod')
+
+const loadExtraConfig = (configName) => {
+  if (!configName) {
+    extraConfig.value = null
+    return
+  }
+  getConfigByName(configName, serverName.value, (res) => {
+    extraConfig.value = res
+  }, env.value === 'dev')
+}
+
+onMounted(() => loadExtraConfig(props.tabBarExtraConfig))
+watch(() => props.tabBarExtraConfig, loadExtraConfig)
+
 // 暴露方法给父组件使用
 defineExpose({
   // 为了兼容性，保留getXTabInstance方法
@@ -37,16 +85,32 @@ defineExpose({
 <template>
   <div
     class="h-tab-wrapper"
-    :class="{ 'h-tab-has-top-margin': hasTopMargin,
-              'h-tab-style7': useStyle7,
-              'h-tab-cycle': useStyle7 && useCycle,
-              'h-tab-style8': useStyle8}">
+    :class="[wrapperClassObject, extraItems.length > 1 ? 'h-tab-extra-wrapper-multiple' : '']">
     <x-tab
       ref="xTabRef"
       v-bind="$attrs"
       v-on="$listeners"
     >
-      <template v-for="(_, name) in $slots" #[name]="slotData">
+      <template v-if="extraItems.length" #tabBarExtraContent>
+        <!-- 父级可接管渲染；未提供则按配置兜底渲染 -->
+        <slot name="tabBarExtraContent" :config="extraConfig" :items="extraItems">
+          <div class="h-tab-extra-wrapper">
+            <component
+              v-for="(item, idx) in extraItems"
+              :is="localMap[item.slotType] || item.slotType"
+              :key="idx"
+              :ref="item.slotRef || `extra_${idx}`"
+              :serviceName="item.serviceName || serverName"
+              :serverName="item.serviceName || serverName"
+              :queryParamsName="item.slotConfig"
+              :env="env"
+              v-on="$listeners"
+              v-bind="item.attrs"
+            />
+          </div>
+        </slot>
+      </template>
+      <template v-for="name in slotNames" #[name]="slotData">
         <slot :name="name" v-bind="slotData" />
       </template>
     </x-tab>
@@ -109,7 +173,7 @@ defineExpose({
   }
 
   // 带顶部边距的样式
-  &.h-tab-has-top-margin {
+  &.h-tab-hasTopMargin {
     :deep(.ant-tabs-nav) {
       margin-top: 6px;
     }
@@ -128,7 +192,7 @@ defineExpose({
   }
 
   // 通用样式7：细下划线、透明背景、可配置宽度
-  &.h-tab-style7 {
+  &.h-tab-useStyle7 {
     :deep(.ant-tabs-tab-next),
     :deep(.ant-tabs-tab-prev-icon-target),
     :deep(.ant-tabs-tab-next-icon) { display: none; }
@@ -177,7 +241,7 @@ defineExpose({
     }
 
     // 可选：标签左侧圆点
-    &.h-tab-cycle {
+    &.h-tab-useCycle {
       :deep(.ant-tabs-tab) {
         position: relative;
         padding-left: 18px !important;
@@ -209,7 +273,7 @@ defineExpose({
     }
   }
   // 用户词条使用样式
-  &.h-tab-style8 {
+  &.h-tab-useStyle8 {
     :deep(.ant-tabs-tab-next),
     :deep(.ant-tabs-tab-prev-icon-target),
     :deep(.ant-tabs-tab-next-icon) { display: none; }
@@ -289,5 +353,30 @@ defineExpose({
       display: none; // 隐藏下划线
     }
   }
+  &.h-tab-extra-wrapper-multiple {
+    :deep(.h-tab-extra-wrapper){
+      display: flex;
+      justify-content: end;
+      gap: 8px;
+    }
+    :deep(.x-radio-group){
+      height: 32px;
+    }
+    :deep(.x-radio-item){
+      height: 32px;
+      display: flex;
+      align-items: center;
+      margin-bottom: 0px;
+    }
+    :deep(.ant-tabs-tab){
+      height: 34px;
+    }
+    :deep(.ant-tabs-nav-container){
+      padding-top: 2px;
+    }
+    :deep(.ant-tabs-extra-content){
+        line-height: 0px !important;
+    }
+  }
 }
 </style>

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

@@ -1,61 +1,61 @@
-<template>
-  <div class="h-tab-demo">
-<!--    &lt;!&ndash; XTab &ndash;&gt;-->
-<!--    <a-card title="XTab">-->
-<!--      <h-tab-->
-<!--        configName="openPrescriptionTab"-->
-<!--        serverName="af-his"-->
-<!--      />-->
-<!--    </a-card>-->
-
-    <!-- HFormTable -->
-    <a-card title="HFormTable" style="margin-top: 20px;">
-      <h-form-table
-        queryParamsName="outpatientAdviceAllCRUD"
-        serviceName="af-his"
-      />
-    </a-card>
-
-    <!-- HForm -->
-    <a-card title="HAddNativeForm" style="margin-top: 20px;">
-      <h-add-native-form
-        queryParamsName="TCMAdviceFormConfig"
-        serviceName="af-his"
-      />
-    </a-card>
-<!--    <a-card title="HFormGroup" style="margin-top: 20px;">-->
-<!--      <h-form-group-->
-<!--        queryParamsName="surgeryApplicationFormGroup"-->
-<!--        serviceName="af-his"-->
-<!--        :left-hide="true"-->
-<!--      />-->
-<!--    </a-card>-->
-<!--    &lt;!&ndash; HButtons &ndash;&gt;-->
-<!--    <a-card title="HButtons" style="margin-top: 20px;">-->
-<!--      <h-buttons-->
-<!--        queryParamsName="outpatientAdviceGroup"-->
-<!--        serviceName="af-his"-->
-<!--      />-->
-<!--    </a-card>-->
-  </div>
-</template>
-
-<script setup>
-// import HTab from './HTab/HTab.vue'
-import HFormTable from './HFormTable/HFormTable.vue'
-// import HButtons from './HButtons/HButtons.vue'
-import HAddNativeForm from '@vue2-client/base-client/components/common/HIS/HAddNativeForm/HAddNativeForm.vue'
- // import HFormGroup from './HFormGroup/HFormGroup.vue'
-</script>
-
-<style scoped lang="less">
-.h-tab-demo {
-  padding: 20px;
-
-  h4 {
-    color: #333;
-    margin-bottom: 10px;
-    font-size: 14px;
-  }
-}
-</style>
+<template>
+  <div class="h-tab-demo">
+<!--    &lt;!&ndash; XTab &ndash;&gt;-->
+<!--    <a-card title="XTab">-->
+<!--      <h-tab-->
+<!--        configName="openPrescriptionTab"-->
+<!--        serverName="af-his"-->
+<!--      />-->
+<!--    </a-card>-->
+
+    <!-- HFormTable -->
+    <a-card title="HFormTable" style="margin-top: 20px;">
+      <h-form-table
+        queryParamsName="outpatientAdviceAllCRUD"
+        serviceName="af-his"
+      />
+    </a-card>
+
+    <!-- HForm -->
+    <a-card title="HAddNativeForm" style="margin-top: 20px;">
+      <h-add-native-form
+        queryParamsName="TCMAdviceFormConfig"
+        serviceName="af-his"
+      />
+    </a-card>
+<!--    <a-card title="HFormGroup" style="margin-top: 20px;">-->
+<!--      <h-form-group-->
+<!--        queryParamsName="surgeryApplicationFormGroup"-->
+<!--        serviceName="af-his"-->
+<!--        :left-hide="true"-->
+<!--      />-->
+<!--    </a-card>-->
+<!--    &lt;!&ndash; HButtons &ndash;&gt;-->
+<!--    <a-card title="HButtons" style="margin-top: 20px;">-->
+<!--      <h-buttons-->
+<!--        queryParamsName="outpatientAdviceGroup"-->
+<!--        serviceName="af-his"-->
+<!--      />-->
+<!--    </a-card>-->
+  </div>
+</template>
+
+<script setup>
+// import HTab from './HTab/HTab.vue'
+import HFormTable from './HFormTable/HFormTable.vue'
+// import HButtons from './HButtons/HButtons.vue'
+import HAddNativeForm from '@vue2-client/base-client/components/common/HIS/HAddNativeForm/HAddNativeForm.vue'
+ // import HFormGroup from './HFormGroup/HFormGroup.vue'
+</script>
+
+<style scoped lang="less">
+.h-tab-demo {
+  padding: 20px;
+
+  h4 {
+    color: #333;
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
+}
+</style>