vue2-client 1.16.52 → 1.16.55

package/package.json

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

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

@@ -177,8 +177,8 @@ defineExpose({
         border: 1px solid #CDCDCD;
         color: #5D5C5C;
         width: auto;
-        min-width: 124px;
-        max-width: 170px;
+        min-width: 110px;
+        max-width: 140px;
         white-space: nowrap;
         overflow: hidden;
         margin-right: 0px;

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

@@ -1,10 +1,17 @@
 <script setup lang="ts">
 import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
-import { ref, computed, useAttrs } from 'vue'
+import { ref, computed, useAttrs, defineProps } from 'vue'
 
 const xAddNativeFormRef = ref()
 
 const attrs = useAttrs()
+const props = defineProps({
+  // 是否启用 horizontal 模式的自定义配置
+  enableHorizontalCustom: {
+    type: Boolean,
+    default: false
+  }
+})
 const wrapperClassObject = computed(() => {
   const a = attrs
   const classes = {}
@@ -14,8 +21,9 @@ const wrapperClassObject = computed(() => {
     'query-conditions',
     'padding-50',
     'label-text-horizontal',
-    'item-control-width90%',
-    'label-text-justify'
+    'item-control-width90',
+    'label-text-justify',
+    'item-control-width700',
   ]
   for (const key of booleanStyleKeys) {
     const val = a[key]
@@ -45,6 +53,7 @@ defineExpose({
     <x-add-native-form
       ref="xAddNativeFormRef"
       v-bind="$attrs"
+      :enable-horizontal-custom="props.enableHorizontalCustom"
       v-on="$listeners"
     >
       <template v-for="(_, name) in $slots" #[name]="slotData">
@@ -158,6 +167,11 @@ defineExpose({
       width: 90%;
     }
   }
-
+  /**表单项700宽度 */
+  &.h-form-item-control-width700{
+    :deep(.ant-form-item-control-wrapper){
+      width: 700px;
+    }
+  }
 }
 </style>

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
   }
 })
 
@@ -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,7 @@ defineExpose({
       padding-top: 2px;
     }
     :deep(.ant-tabs-extra-content){
-        line-height: 0px !important;
+      line-height: 0px !important;
     }
   }
 }

package/src/base-client/components/common/XAddNativeForm/XAddNativeForm.vue

@@ -186,7 +186,13 @@ export default {
       default: null
     }
   },
-  props: {},
+  props: {
+    // 是否启用 horizontal 模式的自定义配置
+    enableHorizontalCustom: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
       DEFAULT_GROUP_NAME,
@@ -324,6 +330,17 @@ export default {
     },
     formItemLayoutGen () {
       if (this.layout === 'horizontal') {
+        // 如果启用了自定义配置，从 formItemLayout 读取（支持 0 值）
+        if (this.enableHorizontalCustom && this.formItemLayout) {
+          return {
+            labelCol: {
+              span: (this.formItemLayout.labelCol ?? 4),
+              offset: (this.formItemLayout.offset ?? 2)
+            },
+            wrapperCol: { span: (this.formItemLayout.wrapperCol ?? 14) },
+          }
+        }
+        // 默认配置
         return {
           labelCol: { span: 4, offset: 2 },
           wrapperCol: { span: 14 },

package/src/base-client/components/common/XReportGrid/XReportTrGroup.vue

@@ -84,7 +84,7 @@
             </template>
           </template>
         </div>
-        <a-card v-else class="flexItem" :bordered="false">
+        <a-card v-else class="flexItem" :bordered="false" :body-style="{ padding: 0 }">
           <!-- 插槽渲染 -->
           <template v-if="Array.isArray(cell)">
             <!-- 处理 cell 是数组的情况 -->
@@ -580,7 +580,7 @@ export default {
         })
 
         // 处理子节点样式
-        this.parseNestedStyles(classConfig, childStyles)
+       // this.parseNestedStyles(classConfig, childStyles)
       })
       return {
         rootStyles,

package/src/base-client/components/common/XTable/XTableWrapper.vue

@@ -13,6 +13,7 @@
     :scroll="{ x: tableContext.scrollXWidth, y: tableContext.scrollYHeight }"
     :showPagination="tableContext.showPagination"
     :hidePagination="tableContext.simpleMode"
+    :customPagination="tableContext.customPagination"
     :showSelected="!tableContext.simpleMode"
     :pageSize="tableContext.simpleMode ? 1000 : undefined"
     :pageMaxSize="tableContext.pageMaxSize"

package/src/base-client/components/his/XCharge/XCharge.vue

@@ -1,5 +1,10 @@
 <template>
   <div class="xcharge-wrapper">
+    <!-- 标题 -->
+    <x-title :title="config.title || '结算-收费方式'" :dot="true" />
+    <!-- 分割线 -->
+    <div class="top-divider"></div>
+
     <!-- 顶部金额信息区（表单行风格，宽度固定，每行4个） -->
     <a-row :gutter="0" class="amount-info">
       <a-col v-for="item in config.amountFields" :key="item.field" :span="6" class="form-row">
@@ -13,50 +18,60 @@
       </a-col>
     </a-row>
 
-    <a-divider/>
-
-    <!-- 支付方式选择区 -->
-    <div class="payment-methods">
-      <a-button
-        v-for="method in config.paymentMethods"
-        :key="method.key"
-        :class="['payment-btn', {
-          active: isMixedPaymentEnabled ? selectedMethods.includes(method.key) : selectedMethod === method.key
-        }]"
-        @click="isMixedPaymentEnabled ? toggleMethod(method.key) : selectMethod(method.key)"
-      >
-        <div>
-          <div class="pay-label">{{ method.label }}</div>
+    <!-- 支付方式选择区和支付详情容器 -->
+    <div class="payment-container">
+      <!-- 支付方式选择区 -->
+      <div class="payment-methods">
+        <div
+          v-for="method in config.paymentMethods"
+          :key="method.key"
+          :class="['payment-option', {
+            active: isMixedPaymentEnabled ? selectedMethods.includes(method.key) : selectedMethod === method.key
+          }]"
+          @click="isMixedPaymentEnabled ? toggleMethod(method.key) : selectMethod(method.key)"
+        >
+          <!-- 图标区域 -->
+          <div class="payment-icon" :class="{ multiple: getMethodIcons(method).length > 1 }">
+            <template v-if="getMethodIcons(method).length">
+              <img
+                v-for="(src, idx) in getMethodIcons(method)"
+                :key="idx"
+                :src="src"
+                :alt="method.label"
+                class="icon-image"
+              />
+            </template>
+            <div v-else class="icon-placeholder">{{ method.label.charAt(0) }}</div>
+          </div>
+          <!-- 标签区域 -->
+          <div class="payment-label">{{ method.label }}</div>
+          <!-- 选中指示器 -->
           <div v-if="isMixedPaymentEnabled && selectedMethods.includes(method.key)" class="selected-indicator">✓</div>
         </div>
-      </a-button>
-    </div>
+      </div>
 
-    <a-divider v-if="isMixedPaymentEnabled && selectedMethods.length > 1"/>
-
-    <!-- 支付详情（同一行展示，仅在混合支付且选择方式>1时出现） -->
-    <div v-if="isMixedPaymentEnabled && selectedMethods.length > 1" class="mixed-payment-section simple">
-      <div class="payment-operation-row">
-        <div class="payment-inline">
-          <div v-for="method in selectedMethods" :key="method" class="inline-field">
-            <label class="form-label">{{ getAmountLabel(method) }}</label>
-            <a-input
-              v-model="paymentAmounts[method]"
-              type="number"
-              placeholder="请输入金额"
-              class="form-input"
-              @change="updatePaymentAmount(method, $event)"
-            />
+      <!-- 支付详情（同一行展示，仅在混合支付手动模式且选择方式>1时出现） -->
+      <div v-if="isMixedPaymentManualMode && selectedMethods.length > 1" class="mixed-payment-section simple">
+        <div class="payment-operation-row">
+          <div class="payment-inline">
+            <div v-for="method in selectedMethods" :key="method" class="inline-field">
+              <label class="form-label">{{ getAmountLabel(method) }}</label>
+              <a-input
+                v-model="paymentAmounts[method]"
+                type="number"
+                placeholder="请输入金额"
+                class="form-input"
+                @change="updatePaymentAmount(method, $event)"
+              />
+            </div>
           </div>
         </div>
       </div>
     </div>
 
-    <a-divider/>
-
     <!-- 底部金额和操作区（表单行风格，宽度固定） -->
     <a-row :gutter="0" class="bottom-info">
-      <a-col v-for="item in config.bottomFields" :key="item.field" :span="8" class="form-row">
+      <a-col v-for="item in config.bottomFields" :key="item.field" :span="6" class="form-row">
         <label class="form-label">{{ item.label }}</label>
         <a-input
           v-model="data[item.field]"
@@ -82,9 +97,13 @@
 
 <script>
 import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+import XTitle from '../XTitle/XTitle.vue'
 
 export default {
   name: 'XCharge',
+  components: {
+    XTitle
+  },
   props: {
     queryParamsName: {
       type: String,
@@ -98,11 +117,13 @@ export default {
   data () {
     return {
       config: {
+        title: '', // 标题配置
         amountFields: [],
         paymentMethods: [],
         bottomFields: [],
-        actionButtons: [],
-        enableMixedPayment: false // 默认关闭混合支付
+        actionButtons: [], // 操作按钮
+        enableMixedPayment: false, // 默认关闭混合支付
+        mixedPaymentMode: 'manual' // 混合支付模式：'manual'手动输入，'auto'自动模式
       },
       data: {},
       selectedMethod: '', // 保持向后兼容
@@ -110,14 +131,13 @@ export default {
       paymentAmounts: {}, // 各支付方式的金额
       // 事件名配置（可通过配置覆盖）
       eventNames: {
-        method: 'method',
-        methods: 'methods',
-        totalPaymentAmount: 'totalPaymentAmount',
-        action: 'action',
-        // 新增：单个支付方式金额变更事件
-        paymentAmountChange: 'paymentAmountChange'
+        method: 'method', // 单选支付方式变更事件
+        methods: 'methods', // 多选支付方式变更事件
+        totalPaymentAmount: 'totalPaymentAmount', // 总支付金额变更事件
+        action: 'action', // 操作按钮点击事件
+        paymentAmountChange: 'paymentAmountChange' // 新增：单个支付方式金额变更事件
       },
-      hasInitialized: false
+      hasInitialized: false // 是否已初始化
     }
   },
   emits: ['init'],
@@ -126,6 +146,14 @@ export default {
     isMixedPaymentEnabled () {
       return this.config && this.config.enableMixedPayment === true
     },
+    // 是否为混合支付自动模式
+    isMixedPaymentAutoMode () {
+      return this.isMixedPaymentEnabled && this.config.mixedPaymentMode === 'auto'
+    },
+    // 是否为混合支付手动模式
+    isMixedPaymentManualMode () {
+      return this.isMixedPaymentEnabled && this.config.mixedPaymentMode === 'manual'
+    },
     // 预计算：金额标签映射（仅基于 paymentMethods 配置）
     amountLabelMap () {
       const map = {}
@@ -135,7 +163,7 @@ export default {
         const key = m && m.key
         const label = m && m.label
         if (!key) return
-        map[key] = m && m.amountLabel ? m.amountLabel : `${label || key}金额`
+        map[key] = `${label || key}金额`
       })
       return map
     }
@@ -147,6 +175,44 @@ export default {
     if (hasParam) this.hasInitialized = true
   },
   methods: {
+    // -------- 金额精度工具：使用「分」进行运算，避免浮点精度问题 --------
+    // 解析金额为分（整数）；非法输入按 0 处理
+    parseAmountToCents (value) {
+      if (value === null || value === undefined || value === '') return 0
+      // 允许字符串或数字，移除非数字与小数点字符
+      const str = String(value).replace(/[^0-9.-]/g, '')
+      if (str === '' || str === '-' || isNaN(Number(str))) return 0
+      // 四舍五入到分
+      return Math.round(Number(str) * 100)
+    },
+    // 将分格式化为金额（保留两位小数）
+    formatCentsToAmount (cents) {
+      const v = Number(cents) / 100
+      // 使用 toFixed 返回字符串，再转为数字，避免 0.30000000000004
+      return Number(v.toFixed(2))
+    },
+    // 规范化金额：返回保留两位小数的数字
+    normalizeAmount (value) {
+      return this.formatCentsToAmount(this.parseAmountToCents(value))
+    },
+    // 解析多图标：支持 method.icons 数组；否则回退到单个 icon
+    getMethodIcons (method) {
+      if (!method) return []
+      const icons = Array.isArray(method.icons) ? method.icons : (method.icon ? [method.icon] : [])
+      const resolved = icons.map(n => {
+        if (!n || typeof n !== 'string') return ''
+        if (n.startsWith('/') || n.startsWith('http')) return n
+        const baseName = n.replace(/\.(png|jpg|jpeg|webp|svg)$/i, '')
+        // 仅使用 @vue2-client 资源解析
+        try { return require('@vue2-client/assets/img/paymentMethod/' + baseName + '.png') } catch (e) {}
+        try { return require('@vue2-client/assets/img/paymentMethod/' + baseName + '.jpg') } catch (e) {}
+        try { return require('@vue2-client/assets/img/paymentMethod/' + baseName + '.jpeg') } catch (e) {}
+        try { return require('@vue2-client/assets/img/paymentMethod/' + baseName + '.webp') } catch (e) {}
+        try { return require('@vue2-client/assets/img/paymentMethod/' + baseName + '.svg') } catch (e) {}
+        return ''
+      }).filter(Boolean)
+      return resolved
+    },
     // 同步 data 中的 selectedMethods / paymentAmounts 到本地状态；并补回缺失的 data 字段
     hydrateFromData () {
       const incomingMethods = Array.isArray(this.data && this.data.selectedMethods) ? this.data.selectedMethods : undefined
@@ -231,17 +297,16 @@ export default {
       const method = this.config.paymentMethods.find(m => m.key === methodKey)
       return method ? method.label : methodKey
     },
-    // 获取支付金额字段标签（优先配置映射，其次方法自带 amountLabel，最后回退）
+    // 获取支付金额字段标签（优先使用映射，否则回退为“{label}金额”）
     getAmountLabel (methodKey) {
       const mapped = (this.config.paymentAmountLabels && this.config.paymentAmountLabels[methodKey]) || ''
       if (mapped) return mapped
       const method = this.config.paymentMethods.find(m => m.key === methodKey)
-      if (method && method.amountLabel) return method.amountLabel
       return `${method ? method.label : methodKey}金额`
     },
     // 新增：更新支付金额
     updatePaymentAmount (methodKey, event) {
-      const amount = parseFloat(event.target.value) || 0
+      const amount = this.normalizeAmount(event && event.target ? event.target.value : event)
       this.$set(this.paymentAmounts, methodKey, amount)
       if (!this.data.paymentAmounts || typeof this.data.paymentAmounts !== 'object') this.$set(this.data, 'paymentAmounts', {})
       this.$set(this.data.paymentAmounts, methodKey, amount)
@@ -251,12 +316,31 @@ export default {
     },
     // 新增：计算总支付金额
     calculateTotalPayment () {
-      const total = Object.values(this.paymentAmounts).reduce((sum, amount) => {
-        return sum + (parseFloat(amount) || 0)
+      const totalCents = Object.values(this.paymentAmounts).reduce((sumCents, amount) => {
+        return sumCents + this.parseAmountToCents(amount)
       }, 0)
+      const total = this.formatCentsToAmount(totalCents)
       this.data.totalPaymentAmount = total
       this.$emit(this.eventNames.totalPaymentAmount, total)
     },
+    // 新增：设置支付金额（由外部调用）
+    setPaymentAmounts (amounts) {
+      if (!this.isMixedPaymentEnabled || !amounts || typeof amounts !== 'object') return
+      // 更新本地状态
+      Object.keys(amounts).forEach(method => {
+        const normalized = this.normalizeAmount(amounts[method])
+        this.$set(this.paymentAmounts, method, normalized)
+      })
+      // 更新数据模型
+      if (!this.data.paymentAmounts || typeof this.data.paymentAmounts !== 'object') {
+        this.$set(this.data, 'paymentAmounts', {})
+      }
+      Object.keys(amounts).forEach(method => {
+        const normalized = this.normalizeAmount(amounts[method])
+        this.$set(this.data.paymentAmounts, method, normalized)
+      })
+      this.calculateTotalPayment()
+    },
     getConfig (configName, param) {
       if (configName) {
         console.log('configName', configName)
@@ -268,11 +352,13 @@ export default {
             return
           }
           this.config = {
+            title: res.title || '', // 标题配置
             amountFields: res.amountFields || [],
             paymentMethods: res.paymentMethods || [],
             bottomFields: res.bottomFields || [],
             actionButtons: res.actionButtons || [],
-            enableMixedPayment: res.enableMixedPayment === true
+            enableMixedPayment: res.enableMixedPayment === true,
+            mixedPaymentMode: res.mixedPaymentMode || 'manual' // 默认手动模式
           }
           // 事件名覆盖（fronImport风格）
           if (res.eventNames && typeof res.eventNames === 'object') {
@@ -340,14 +426,14 @@ export default {
     // 使用默认数据
     useDefaultData () {
       this.data = {
-        f_amount: 100,
+        f_amount: 0,
         f_insurance_amount: 0,
-        f_self_amount: 100,
-        f_balance: 100,
+        f_self_amount: 0,
+        f_balance: 0,
         out_of_pocket_amount: 0,
         biscount_amount: 0,
         billing_amount: 0,
-        received: 100,
+        received: 0,
         change: 0
       }
     },
@@ -399,10 +485,14 @@ export default {
 <style scoped>
 .xcharge-wrapper {
   background: #fff;
-  padding: 24px;
+  padding: 12px;
   border-radius: 8px;
 }
 
+.charge-title {
+  margin-bottom: 16px;
+}
+
 .amount-info {
   margin-bottom: 20px;
   display: flex;
@@ -410,26 +500,34 @@ export default {
   row-gap: 16px;
 }
 
+/* 顶部分割线 */
+.top-divider {
+  height: 2px;
+  opacity: 1;
+  background: #0057FE;
+  margin-top: 8px;
+  margin-bottom: 12px;
+}
+
 .form-row {
   display: flex;
   align-items: center;
-  margin-bottom: 30px;
 }
 
 .form-label {
   width: 100px;
-  font-size: 18px;
+  font-size: 16px;
   color: #333;
   font-weight: bold;
-  text-align: left;
+  text-align: center;
   letter-spacing: 1px;
   flex-shrink: 0;
 }
 
 .form-input {
-  width: 180px;
-  height: 40px;
-  font-size: 18px;
+  width: 200px;
+  height: 30px;
+  font-size: 16px;
   border-radius: 8px;
   border: 1.5px solid #dcdfe6;
   background: #fff;
@@ -442,44 +540,103 @@ export default {
   background: #f5f5f5;
 }
 
+/* 支付容器 */
+.payment-container {
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  margin-bottom: 10px;
+  height: 464px;
+  padding: 112px 31px 0px;
+}
+
 .payment-methods {
   display: flex;
   justify-content: space-around;
-  margin: 32px 0;
+  margin: 0 0 16px 0;
+  gap: 20px;
 }
 
-.payment-btn {
-  width: 180px;
-  height: 120px;
-  margin: 0 16px;
+.payment-option {
+  width: 220px;
+  height: 200px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: #f7f8fa;
   border: 1.5px solid #e4e7ed;
-  color: #333;
-  font-weight: bold;
-  font-size: 24px;
-  transition: all 0.2s;
-  box-shadow: none;
   border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  position: relative;
+}
+
+.payment-option:hover {
+  background: #0057FE;
+  border-color: #0057FE;
+  box-shadow: 0 2px 8px rgba(0, 87, 254, 0.2);
+}
+
+.payment-option.active {
+  background: #587EDF;
+  border-color: #587EDF;
+  color: #fff;
 }
 
-.payment-btn.active {
-  background: #409eff;
-  border-color: #409eff;
+.payment-option:hover .payment-label {
   color: #fff;
 }
 
-.pay-label {
+.payment-icon {
+  position: relative;
+  width: 65px;
+  height: 65px;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.payment-icon.multiple {
+  gap: 12px;
+}
+
+.icon-image {
+  width: 65px;
+  height: 65px;
+  object-fit: contain;
+  border-radius: 8px;
+}
+
+.icon-placeholder {
+  width: 100%;
+  height: 100%;
+  background: #ddd;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: 24px;
   font-weight: bold;
+  color: #666;
+}
+
+/* 移除徽章样式：模板已不再使用 */
+
+.payment-label {
+  font-size: 36px;
+  font-weight: 500;
+  text-align: center;
+  color: #333;
+}
+
+.payment-option.active .payment-label {
+  color: #fff;
 }
 
 .selected-indicator {
   position: absolute;
-  top: 8px;
-  right: 8px;
+  top: 12px;
+  right: 12px;
   background: #52c41a;
   color: #fff;
   border-radius: 50%;
@@ -493,11 +650,10 @@ export default {
 }
 
 .mixed-payment-section {
-  margin: 24px 0;
-  padding: 20px;
-  background: #f8f9fa;
-  border-radius: 8px;
-  border: 1px solid #e9ecef;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
 }
 
 .mixed-payment-section.simple {
@@ -510,7 +666,7 @@ export default {
   border: none;
   background: transparent;
   padding: 0;
-  margin-bottom: 12px;
+  margin: 0;
 }
 
 .section-title {
@@ -560,11 +716,11 @@ export default {
 
 .payment-inline {
   display: flex;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   column-gap: 32px;
-  overflow-x: auto;
+  row-gap: 16px;
 }
 
 .inline-field {
@@ -576,6 +732,7 @@ export default {
 
 .payment-inline .form-label {
   width: auto;
+  font-size: 16px;
 }
 
 .pay-shortcut {
@@ -607,4 +764,5 @@ export default {
   height: 38px;
   min-width: 90px;
 }
+
 </style>

package/src/base-client/components/his/XCharge/XChargeDemo.vue

@@ -10,22 +10,96 @@ export default {
       methods: [],
       total: 0,
       lastAmountChange: null,
-      lastAction: null
+      lastAction: null,
+      currentMode: 'manual' // 当前模式：manual, auto, single
     }
   },
   methods: {
     onMethod (value) { console.log('【事件】单选支付方式(method)：', value) },
-    onMethods (values) { console.log('【事件】多选支付方式(methods)：', values); this.methods = values },
+    onMethods (values) { 
+      console.log('【事件】多选支付方式(methods)：', values); 
+      this.methods = values
+      // 在自动模式下，由外部决定金额分配
+      if (this.currentMode === 'auto') {
+        this.autoDistributeAmounts(values)
+      }
+    },
     onTotal (total) { console.log('【事件】合计金额变更(totalPaymentAmount)：', total); this.total = total },
     onAmountChange (payload) { console.log('【事件】单个方式金额变更(paymentAmountChange)：', payload, '→ 方式：', payload.method, ' 金额：', payload.amount); this.lastAmountChange = payload },
-    onAction (payload) { console.log('【事件】操作(action)：', payload); this.lastAction = payload }
+    onAction (payload) { console.log('【事件】操作(action)：', payload); this.lastAction = payload },
+    switchMode (mode) {
+      this.currentMode = mode
+      // 根据模式切换配置
+      switch (mode) {
+        case 'manual':
+          this.queryParamsName = 'testChargeConfig'
+          break
+        case 'auto':
+          this.queryParamsName = 'testAutoMixedChargeConfig'
+          break
+        case 'single':
+          this.queryParamsName = 'testSingleChargeConfig'
+          break
+      }
+    },
+    getModeText (mode) {
+      const modeMap = {
+        'manual': '混合支付-手动模式',
+        'auto': '混合支付-自动模式',
+        'single': '单选模式'
+      }
+      return modeMap[mode] || mode
+    },
+    // 外部金额分配逻辑（示例：平均分配）
+    autoDistributeAmounts (selectedMethods) {
+      if (!selectedMethods || selectedMethods.length === 0) return
+      
+      // 示例：假设总金额为100，平均分配
+      const totalAmount = 100
+      const amountPerMethod = totalAmount / selectedMethods.length
+      
+      const amounts = {}
+      selectedMethods.forEach(method => {
+        amounts[method] = amountPerMethod
+      })
+      
+      // 调用组件的setPaymentAmounts方法
+      this.$refs.xCharge.setPaymentAmounts(amounts)
+    }
   }
 }
 </script>
 
 <template>
   <div class="demo">
+    <!-- 模式切换按钮 -->
+    <div class="mode-switcher">
+      <h3>XCharge 组件测试 - 混合支付模式切换</h3>
+      <div class="mode-buttons">
+        <a-button 
+          :type="currentMode === 'manual' ? 'primary' : 'default'"
+          @click="switchMode('manual')"
+        >
+          混合支付-手动模式
+        </a-button>
+        <a-button 
+          :type="currentMode === 'auto' ? 'primary' : 'default'"
+          @click="switchMode('auto')"
+        >
+          混合支付-自动模式
+        </a-button>
+        <a-button 
+          :type="currentMode === 'single' ? 'primary' : 'default'"
+          @click="switchMode('single')"
+        >
+          单选模式
+        </a-button>
+      </div>
+      <p class="current-mode">当前模式：{{ getModeText(currentMode) }}</p>
+    </div>
+
     <x-charge
+      ref="xCharge"
       :queryParamsName="queryParamsName"
       @method="onMethod"
       @methods="onMethods"
@@ -44,6 +118,28 @@ export default {
 
 <style scoped>
 .demo { padding: 16px; }
+.mode-switcher {
+  margin-bottom: 24px;
+  padding: 16px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  border: 1px solid #e9ecef;
+}
+.mode-switcher h3 {
+  margin: 0 0 16px 0;
+  color: #333;
+  font-size: 18px;
+}
+.mode-buttons {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.current-mode {
+  margin: 0;
+  color: #666;
+  font-weight: 500;
+}
 .info { margin-top: 16px; color: #333; }
 .info p { margin: 6px 0; }
 </style>

package/src/base-client/components/his/XCharge/testConfig.js

@@ -1,5 +1,9 @@
-// 测试配置 - 用于演示混合支付功能
+// XCharge 组件测试配置文件 - 最新最全版本
+// 包含所有功能：图标、徽章、混合支付模式、XTitle集成等
+
+// 1. 完整功能配置 - 混合支付手动模式（带图标和徽章）
 export const testChargeConfig = {
+  "title": "结算-收费方式", // 使用XTitle组件显示标题
   "amountFields": [
     {
       "field": 'f_amount',
@@ -35,19 +39,23 @@ export const testChargeConfig = {
   "paymentMethods": [
     {
       "key": '医保卡',
-      "label": '医保卡'
+      "label": '医保卡',
+      "icon": '/img/paymentMethod/medical-card.png'
     },
     {
       "key": '微信/支付宝',
-      "label": '微信/支付宝'
+      "label": '微信/支付宝',
+      "icon": '/img/paymentMethod/wechat-alipay.png'
     },
     {
       "key": '银行卡',
-      "label": '银行卡'
+      "label": '银行卡',
+      "icon": '/img/paymentMethod/bank-card.png'
     },
     {
       "key": '现金',
-      "label": '现金'
+      "label": '现金',
+      "icon": '/img/paymentMethod/cash.png'
     }
   ],
   "bottomFields": [
@@ -85,6 +93,7 @@ export const testChargeConfig = {
     }
   ],
   "enableMixedPayment": true, // 启用混合支付
+  "mixedPaymentMode": 'manual', // 混合支付模式：'manual'手动输入，'auto'自动模式
   // 可配置事件名，参考 fronImport 风格
   "eventNames": {
     "method": 'method',
@@ -95,8 +104,101 @@ export const testChargeConfig = {
   "dataSourceConfig": 'testChargeLogic'
 }
 
-// 单选模式测试配置
+// 2. 混合支付自动模式配置（外部控制金额分配）
+export const testAutoMixedChargeConfig = {
+  "title": "自动收费管理",
+  "amountFields": [
+    {
+      "field": 'f_amount',
+      "disabled": false,
+      "label": '费用总额'
+    },
+    {
+      "field": 'f_insurance_amount',
+      "disabled": true,
+      "label": '医保支付'
+    },
+    {
+      "field": 'f_self_amount',
+      "disabled": true,
+      "label": '自费金额'
+    },
+    {
+      "field": 'out_of_pocket_amount',
+      "disabled": true,
+      "label": '自付金额'
+    }
+  ],
+  "paymentMethods": [
+    {
+      "key": '医保卡',
+      "label": '医保卡',
+      "icon": 'icon1'
+    },
+    {
+      "key": '微信/支付宝',
+      "label": '微信/支付宝',
+      "icons": ['icon1','icon1']
+    },
+    {
+      "key": '银行卡',
+      "label": '银行卡',
+      "icon": 'icon1'
+    },
+    {
+      "key": '现金',
+      "label": '现金',
+      "icon": 'icon1'
+    }
+  ],
+  "bottomFields": [
+    {
+      "field": 'f_balance',
+      "label": '账户余额',
+      "disabled": false
+    },
+    {
+      "field": 'received',
+      "label": '实收',
+      "disabled": false
+    },
+    {
+      "field": 'change',
+      "label": '找零',
+      "disabled": false
+    }
+  ],
+  "actionButtons": [
+    {
+      "key": 'charge',
+      "label": '收费',
+      "icon": 'check'
+    },
+    {
+      "key": 'refund',
+      "label": '退费',
+      "icon": 'undo'
+    },
+    {
+      "key": 'print',
+      "label": '打印',
+      "icon": 'printer'
+    }
+  ],
+  "enableMixedPayment": true, // 启用混合支付
+  "mixedPaymentMode": 'auto', // 自动模式：不需要手动输入金额，由外部控制
+  "eventNames": {
+    "method": 'method',
+    "methods": 'methods',
+    "totalPaymentAmount": 'totalPaymentAmount',
+    "action": 'action'
+  },
+  "dataSourceConfig": 'testChargeLogic'
+}
+
+// 3. 单选模式配置（传统单选支付方式）
 export const testSingleChargeConfig = {
+  "title": "简单收费",
   "amountFields": [
     {
       "field": 'f_amount',
@@ -112,11 +214,13 @@ export const testSingleChargeConfig = {
   "paymentMethods": [
     {
       "key": '医保卡',
-      "label": '医保卡'
+      "label": '医保卡',
+      "icon": 'icon2'
     },
     {
       "key": '现金',
-      "label": '现金'
+      "label": '现金',
+      "icon": 'icon1'
     }
   ],
   "bottomFields": [
@@ -147,3 +251,189 @@ export const testSingleChargeConfig = {
   },
   "dataSourceConfig": 'testChargeLogic'
 }
+
+// 4. 最小配置示例（仅必需字段）
+export const testMinimalConfig = {
+  "title": "最小配置",
+  "enableMixedPayment": true,
+  "paymentMethods": [
+    {
+      key: '医保卡',
+      label: '医保卡',
+      icon: 'icon1'
+    },
+    {
+      key: '微信/支付宝',
+      label: '微信/支付宝',
+      icon: 'icon1'
+    }
+  ],
+  "amountFields": [
+    { field: 'f_amount', label: '费用总额' }
+  ],
+  "bottomFields": [
+    { field: 'received', label: '实收' },
+    { field: 'change', label: '找零' }
+  ],
+  "actionButtons": [
+    { key: 'charge', label: '收费' }
+  ]
+}
+
+// 5. 高级配置示例（包含所有可选字段）
+export const testAdvancedConfig = {
+  "title": "高级收费管理",
+  "amountFields": [
+    {
+      "field": 'f_amount',
+      "disabled": false,
+      "label": '费用总额'
+    },
+    {
+      "field": 'f_insurance_amount',
+      "disabled": true,
+      "label": '医保支付'
+    },
+    {
+      "field": 'f_self_amount',
+      "disabled": true,
+      "label": '自费金额'
+    },
+    {
+      "field": 'out_of_pocket_amount',
+      "disabled": true,
+      "label": '自付金额'
+    },
+    {
+      "field": 'biscount_amount',
+      "disabled": true,
+      "label": '折扣金额'
+    },
+    {
+      "field": 'billing_amount',
+      "disabled": true,
+      "label": '记账金额'
+    }
+  ],
+  "paymentMethods": [
+    {
+      "key": '医保卡',
+      "label": '医保卡',
+      "icon": '/img/paymentMethod/medical-card.png'
+    },
+    {
+      "key": '微信',
+      "label": '微信支付',
+      "icon": '/img/paymentMethod/wechat.png'
+    },
+    {
+      "key": '支付宝',
+      "label": '支付宝',
+      "icon": '/img/paymentMethod/alipay.png'
+    },
+    {
+      "key": '银行卡',
+      "label": '银行卡',
+      "icon": '/img/paymentMethod/bank-card.png'
+    },
+    {
+      "key": '现金',
+      "label": '现金',
+      "icon": '/img/paymentMethod/cash.png'
+    },
+    {
+      "key": '其他',
+      "label": '其他方式',
+      "icon": '/img/paymentMethod/other.png'
+    }
+  ],
+  "bottomFields": [
+    {
+      "field": 'f_balance',
+      "label": '账户余额',
+      "disabled": false
+    },
+    {
+      "field": 'received',
+      "label": '实收',
+      "disabled": false
+    },
+    {
+      "field": 'change',
+      "label": '找零',
+      "disabled": false
+    },
+    {
+      "field": 'discount',
+      "label": '优惠金额',
+      "disabled": false
+    }
+  ],
+  "actionButtons": [
+    {
+      "key": 'charge',
+      "label": '收费',
+      "icon": 'check'
+    },
+    {
+      "key": 'refund',
+      "label": '退费',
+      "icon": 'undo'
+    },
+    {
+      "key": 'print',
+      "label": '打印',
+      "icon": 'printer'
+    },
+    {
+      "key": 'save',
+      "label": '保存',
+      "icon": 'save'
+    }
+  ],
+  "enableMixedPayment": true,
+  "mixedPaymentMode": 'manual',
+  // 自定义事件名
+  "eventNames": {
+    "method": 'onPaymentMethodChange',
+    "methods": 'onPaymentMethodsChange',
+    "totalPaymentAmount": 'onTotalAmountChange',
+    "action": 'onActionClick'
+  },
+  "dataSourceConfig": 'advancedChargeLogic'
+}
+
+// 6. 无图标配置示例（测试占位符功能）
+export const testNoIconConfig = {
+  "title": "无图标测试",
+  "enableMixedPayment": true,
+  "paymentMethods": [
+    {
+      "key": '方式一',
+      "label": '方式一'
+      // 无icon配置，将显示首字母占位符
+    },
+    {
+      "key": '方式二',
+      "label": '方式二'
+      // 无icon配置，将显示首字母占位符
+    }
+  ],
+  "amountFields": [
+    { field: 'f_amount', label: '费用总额' }
+  ],
+  "bottomFields": [
+    { field: 'received', label: '实收' }
+  ],
+  "actionButtons": [
+    { key: 'charge', label: '收费' }
+  ]
+}
+
+// 配置说明：
+// 1. title: 标题文本，支持XTitle组件的所有功能
+// 2. paymentMethods.icon: 图标路径，支持相对路径和绝对路径
+// 3. mixedPaymentMode: 'manual'手动输入模式，'auto'自动模式
+// 4. enableMixedPayment: true启用混合支付，false为单选模式
+// 5. eventNames: 可自定义事件名称
+// 6. dataSourceConfig: 数据源逻辑配置名

package/src/base-client/components/his/XTitle/XTitle.vue

@@ -27,6 +27,11 @@ const props = defineProps({
   queryParamsName: {
     type: String,
     default: ''
+  },
+  // 新增：直接设置标题文本，优先级高于queryParamsName
+  title: {
+    type: String,
+    default: ''
   }
 })
 
@@ -75,6 +80,17 @@ const handleClick = () => {
 }
 
 const parseConfig = (data) => {
+  // 如果设置了title属性，直接使用title作为标签
+  if (props.title) {
+    config.value.label = props.title
+    config.value.type = 'title'
+    config.value.line = ''
+    config.value.color = ''
+    config.value.lineLength = ''
+    config.value.clickName = ''
+    return
+  }
+
   if (!data) return
 
   const parts = data.includes('-') ? data.split('-') : data === 'line' ? ['', 'title', 'line'] : [data]