vue2-client 1.16.54 → 1.16.57

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

@@ -8,6 +8,11 @@ const props = defineProps({
   tabBarExtraConfig: {
     type: String,
     default: undefined
+  },
+  // 控制标签间距，覆盖内部 XTab 的默认 10px；默认置 0 清除外边距
+  tabBarGutter: {
+    type: Number,
+    default: 0
   }
 })
 
@@ -19,7 +24,7 @@ const wrapperClassObject = computed(() => {
 
   // 通用布尔样式开关（以存在/空字符串/'true' 为真）
   const booleanStyleKeys = [
-    'hasTopMargin', 'useStyle7', 'useCycle', 'useStyle8'
+    'hasTopMargin', 'useStyle7', 'useCycle', 'useStyle8', 'ant-tabs-bar-left0'
   ]
   for (const key of booleanStyleKeys) {
     const val = a[key]
@@ -88,6 +93,7 @@ defineExpose({
     :class="[wrapperClassObject, extraItems.length > 1 ? 'h-tab-extra-wrapper-multiple' : '']">
     <x-tab
       ref="xTabRef"
+      :tabBarGutter="props.tabBarGutter"
       v-bind="$attrs"
       v-on="$listeners"
     >
@@ -125,6 +131,20 @@ defineExpose({
   }
 
   :deep(.ant-tabs-nav) {
+    // 去除导航容器默认左右内边距，避免收缩时左侧多出一截
+    .ant-tabs-nav-container,
+    .ant-tabs-nav-scroll {
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+    }
+
+    // 移除左右切换箭头带来的占位
+    .ant-tabs-tab-prev,
+    .ant-tabs-tab-next {
+      display: none !important;
+      width: 0 !important;
+    }
+
     .ant-tabs-tab-next-icon {
       display: none;
     }
@@ -132,7 +152,7 @@ defineExpose({
     .ant-tabs-tab {
       background-color: transparent;
       border-radius: 6px 6px 0 0;
-      color: #5D5C5C;
+      color: #313131;
       font-weight: bold;
       width: 134px;
       font-size: 18px;
@@ -155,6 +175,13 @@ defineExpose({
 
   :deep(.ant-tabs-bar) {
     border-bottom: 2px solid #0057FE;
+    margin: 20px 10px 0 10px;
+  }
+
+  // 滚动状态下的容器左右内边距清零，避免左侧多出一截
+  :deep(.ant-tabs-nav-container-scrolling) {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
   }
 
   :deep(.ant-tabs-tab-arrow-show) {
@@ -375,7 +402,14 @@ defineExpose({
       padding-top: 2px;
     }
     :deep(.ant-tabs-extra-content){
-        line-height: 0px !important;
+      line-height: 0px !important;
+    }
+  }
+  // 侧边栏tab页签移除左侧空白区域
+  &.t-tab-ant-tabs-bar-left0 {
+    :deep(.ant-tabs-bar) {
+      border-bottom: 2px solid #0057FE;
+      margin: 20px 0px 0 4px;
     }
   }
 }

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>