vue2-client 1.16.15 → 1.16.19

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

@@ -1,569 +1,610 @@
-<template>
-  <div class="xcharge-wrapper">
-    <!-- 顶部金额信息区（表单行风格，宽度固定，每行4个） -->
-    <a-row :gutter="0" class="amount-info">
-      <a-col v-for="item in config.amountFields" :key="item.field" :span="6" class="form-row">
-        <label class="form-label">{{ item.label }}</label>
-        <a-input
-          v-model="data[item.field]"
-          :value="data[item.field]"
-          :disabled="item.disabled"
-          class="form-input"
-        />
-      </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 v-if="isMixedPaymentEnabled && selectedMethods.includes(method.key)" class="selected-indicator">✓</div>
-        </div>
-      </a-button>
-    </div>
-
-    <a-divider/>
-
-    <!-- 支付详情（同一行展示） -->
-    <div v-if="(isMixedPaymentEnabled && selectedMethods.length > 0) || (!isMixedPaymentEnabled && selectedMethod)" class="mixed-payment-section simple">
-      <!-- 混合支付：所有金额输入在同一行展示 -->
-      <div v-if="isMixedPaymentEnabled" 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 v-if="!isMixedPaymentEnabled && selectedMethod" class="payment-operation-row">
-        <div class="payment-inline">
-          <div class="inline-field">
-            <label class="form-label">{{ getAmountLabel(selectedMethod) }}</label>
-            <a-input
-              v-model="paymentAmounts[selectedMethod]"
-              type="number"
-              placeholder="请输入金额"
-              class="form-input"
-              @change="updatePaymentAmount(selectedMethod, $event)"
-            />
-          </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">
-        <label class="form-label">{{ item.label }}</label>
-        <a-input
-          v-model="data[item.field]"
-          :disabled="item.disabled"
-          class="form-input"
-          @change="bottomFieldsChange($event,item)"
-        />
-      </a-col>
-    </a-row>
-    <a-row class="actions-row" justify="center">
-      <a-button
-        v-for="btn in config.actionButtons"
-        :key="btn.key"
-        @click="handleAction(btn.key)"
-        :icon="btn.icon"
-        style="margin: 0 8px"
-      >
-        {{ btn.label }}
-      </a-button>
-    </a-row>
-  </div>
-</template>
-
-<script>
-import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
-
-export default {
-  name: 'XCharge',
-  props: {
-    queryParamsName: {
-      type: String,
-      default: ''
-    },
-    parameter: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data () {
-    return {
-      config: {
-        amountFields: [],
-        paymentMethods: [],
-        bottomFields: [],
-        actionButtons: [],
-        enableMixedPayment: false // 默认关闭混合支付
-      },
-      data: {},
-      selectedMethod: '', // 保持向后兼容
-      selectedMethods: [], // 新增：支持多选支付方式
-      paymentAmounts: {}, // 各支付方式的金额
-      // 事件名配置（可通过配置覆盖）
-      eventNames: {
-        method: 'method',
-        methods: 'methods',
-        totalPaymentAmount: 'totalPaymentAmount',
-        action: 'action',
-        // 新增：单个支付方式金额变更事件
-        paymentAmountChange: 'paymentAmountChange'
-      },
-      hasInitialized: false
-    }
-  },
-  emits: ['init'],
-  computed: {
-    // 安全访问混合支付配置
-    isMixedPaymentEnabled () {
-      return this.config && this.config.enableMixedPayment === true
-    },
-    // 预计算：金额标签映射（仅基于 paymentMethods 配置）
-    amountLabelMap () {
-      const map = {}
-      const methods = Array.isArray(this.config.paymentMethods) ? this.config.paymentMethods : []
-      // 先用 methods 构建默认与自定义
-      methods.forEach(m => {
-        const key = m && m.key
-        const label = m && m.label
-        if (!key) return
-        map[key] = m && m.amountLabel ? m.amountLabel : `${label || key}金额`
-      })
-      return map
-    }
-  },
-  created () {
-    const hasParam = this.parameter && Object.keys(this.parameter).length > 0
-    // 始终加载组件配置；仅当有参数时，getConfig 内部才会拉取数据
-    this.getConfig(this.queryParamsName, this.parameter || {})
-    if (hasParam) this.hasInitialized = true
-  },
-  methods: {
-    selectMethod (value) {
-      this.selectedMethod = value
-      this.data.selectedMethod = value
-      // 单一模式下初始化对应的支付数据
-      if (!this.isMixedPaymentEnabled && value) {
-        if (!this.paymentAmounts[value]) this.initPaymentData(value)
-      }
-      this.$emit(this.eventNames.method, value)
-    },
-    // 新增：切换支付方式选择（支持多选）
-    toggleMethod (methodKey) {
-      const index = this.selectedMethods.indexOf(methodKey)
-      if (index > -1) {
-        // 如果已选中，则移除
-        this.selectedMethods.splice(index, 1)
-        this.removePaymentData(methodKey)
-      } else {
-        // 如果未选中，则添加
-        this.selectedMethods.push(methodKey)
-        this.initPaymentData(methodKey)
-      }
-
-      // 更新选中状态
-      this.selectedMethod = this.selectedMethods.length > 0 ? this.selectedMethods[0] : ''
-      this.data.selectedMethods = [...this.selectedMethods]
-
-      this.$emit(this.eventNames.methods, this.selectedMethods)
-      this.$emit(this.eventNames.method, this.selectedMethod) // 保持向后兼容
-    },
-    // 新增：移除支付方式
-    removeMethod (methodKey) {
-      const index = this.selectedMethods.indexOf(methodKey)
-      if (index > -1) {
-        this.selectedMethods.splice(index, 1)
-        this.removePaymentData(methodKey)
-        this.$emit(this.eventNames.methods, this.selectedMethods)
-      }
-    },
-    // 新增：初始化支付数据
-    initPaymentData (methodKey) {
-      this.$set(this.paymentAmounts, methodKey, '')
-      if (!this.data.paymentAmounts || typeof this.data.paymentAmounts !== 'object') this.$set(this.data, 'paymentAmounts', {})
-      this.$set(this.data.paymentAmounts, methodKey, '')
-    },
-    // 新增：移除支付数据
-    removePaymentData (methodKey) {
-      this.$delete(this.paymentAmounts, methodKey)
-      if (this.data && this.data.paymentAmounts) this.$delete(this.data.paymentAmounts, methodKey)
-    },
-    // 新增：获取支付方式标签
-    getMethodLabel (methodKey) {
-      const method = this.config.paymentMethods.find(m => m.key === methodKey)
-      return method ? method.label : methodKey
-    },
-    // 获取金额字段展示名（配置映射 / paymentMethods.amountLabel / 默认「{方式}金额」）
-    getAmountLabel (methodKey) {
-      return (this.amountLabelMap && this.amountLabelMap[methodKey]) || `${methodKey}金额`
-    },
-    // 新增：获取支付金额字段标签（优先配置映射，其次方法自带 amountLabel，最后回退）
-    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
-      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)
-      this.calculateTotalPayment()
-      // 单个方式金额变更事件，向父组件上抛
-      this.$emit(this.eventNames.paymentAmountChange, { method: methodKey, amount })
-    },
-    // 新增：计算总支付金额
-    calculateTotalPayment () {
-      const total = Object.values(this.paymentAmounts).reduce((sum, amount) => {
-        return sum + (parseFloat(amount) || 0)
-      }, 0)
-      this.data.totalPaymentAmount = total
-      this.$emit(this.eventNames.totalPaymentAmount, total)
-    },
-    getConfig (configName, param) {
-      if (configName) {
-        console.log('configName', configName)
-        getConfigByName(configName, 'af-his', res => {
-          console.log('res', res)
-          // 检查是否有错误
-          if (res && res.ERROR) {
-            console.warn('配置获取失败:', res.ERROR)
-            return
-          }
-          this.config = {
-            amountFields: res.amountFields || [],
-            paymentMethods: res.paymentMethods || [],
-            bottomFields: res.bottomFields || [],
-            actionButtons: res.actionButtons || [],
-            enableMixedPayment: res.enableMixedPayment === true
-          }
-          // 事件名覆盖（fronImport风格）
-          if (res.eventNames && typeof res.eventNames === 'object') {
-            this.eventNames = { ...this.eventNames, ...res.eventNames }
-          }
-          this.selectedMethod = res.paymentMethods?.[0]?.key || ''
-
-          // 如果启用混合支付，初始化选中状态
-          if (this.isMixedPaymentEnabled && res.paymentMethods?.length > 0) {
-            this.selectedMethods = [res.paymentMethods[0].key]
-            this.initPaymentData(res.paymentMethods[0].key)
-          } else if (!this.isMixedPaymentEnabled && this.selectedMethod) {
-            // 单一支付初始化
-            this.initPaymentData(this.selectedMethod)
-          }
-
-          // 初始化数据：仅当传入了有效 param 时才拉取数据
-          const hasParam = param && Object.keys(param || {}).length > 0
-          if (hasParam && res.dataSourceConfig) {
-            runLogic(res.dataSourceConfig, param, 'af-his').then(resData => {
-              this.data = { ...resData }
-            }).catch(error => {
-              console.warn('数据获取失败（保持现有数据）:', error)
-            })
-          }
-        })
-      }
-    },
-    refreshList (param) {
-      this.getConfig(this.queryParamsName, param)
-    },
-    async init (conditionData) {
-      if(conditionData.data){
-        this.data = { ...conditionData.data }
-      }
-      if(conditionData.params){
-        await this.getConfig(this.queryParamsName, conditionData.params)
-      }
-      this.hasInitialized = true
-    },
-    // 使用默认数据
-    useDefaultData () {
-      this.data = {
-        f_amount: 100,
-        f_insurance_amount: 0,
-        f_self_amount: 100,
-        f_balance: 100,
-        out_of_pocket_amount: 0,
-        biscount_amount: 0,
-        billing_amount: 0,
-        received: 100,
-        change: 0
-      }
-    },
-    handleAction (key) {
-      console.warn('选择的的方法 ====》' + key)
-      console.warn('页面数据 ====》' + JSON.stringify(this.data))
-      console.warn('选择的支付方式 ====》' + this.selectedMethod)
-
-      if (this.isMixedPaymentEnabled) {
-        console.warn('混合支付方式 ====》' + JSON.stringify(this.selectedMethods))
-        console.warn('支付详情 ====》' + JSON.stringify({ amounts: this.paymentAmounts }))
-      }
-
-      const actionData = {
-        key,
-        data: this.data,
-        method: this.selectedMethod,
-        // 统一返回支付详情，单一模式时 selectedMethods 仅含一个
-        mixedPayment: {
-          selectedMethods: this.isMixedPaymentEnabled ? this.selectedMethods : (this.selectedMethod ? [this.selectedMethod] : []),
-          paymentAmounts: this.paymentAmounts,
-          totalPaymentAmount: this.data.totalPaymentAmount || 0
-        }
-      }
-
-      this.$emit(this.eventNames.action, actionData)
-    },
-    bottomFieldsChange (e, item) {
-      if (item.changeEventName && this.$listeners[item.changeEventName]) {
-        this.$emit(item.changeEventName, e, item)
-      }
-    }
-  },
-  watch: {
-    configName (val) {
-      this.getConfig()
-    }
-  }
-}
-</script>
-
-<style scoped>
-.xcharge-wrapper {
-  background: #fff;
-  padding: 24px;
-  border-radius: 8px;
-}
-
-.amount-info {
-  margin-bottom: 20px;
-  display: flex;
-  flex-wrap: wrap;
-  row-gap: 16px;
-}
-
-.form-row {
-  display: flex;
-  align-items: center;
-  margin-bottom: 30px;
-}
-
-.form-label {
-  width: 100px;
-  font-size: 18px;
-  color: #333;
-  font-weight: bold;
-  text-align: left;
-  letter-spacing: 1px;
-  flex-shrink: 0;
-}
-
-.form-input {
-  width: 180px;
-  height: 40px;
-  font-size: 18px;
-  border-radius: 8px;
-  border: 1.5px solid #dcdfe6;
-  background: #fff;
-  color: #333;
-  padding-left: 12px;
-}
-
-.form-input[disabled] {
-  color: #999;
-  background: #f5f5f5;
-}
-
-.payment-methods {
-  display: flex;
-  justify-content: space-around;
-  margin: 32px 0;
-}
-
-.payment-btn {
-  width: 180px;
-  height: 120px;
-  margin: 0 16px;
-  display: flex;
-  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;
-}
-
-.payment-btn.active {
-  background: #409eff;
-  border-color: #409eff;
-  color: #fff;
-}
-
-.pay-label {
-  font-size: 24px;
-  font-weight: bold;
-}
-
-.selected-indicator {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  background: #52c41a;
-  color: #fff;
-  border-radius: 50%;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: bold;
-}
-
-.mixed-payment-section {
-  margin: 24px 0;
-  padding: 20px;
-  background: #f8f9fa;
-  border-radius: 8px;
-  border: 1px solid #e9ecef;
-}
-
-.mixed-payment-section.simple {
-  padding: 0;
-  background: transparent;
-  border: none;
-}
-
-.mixed-payment-section.simple .payment-operation-row {
-  border: none;
-  background: transparent;
-  padding: 0;
-  margin-bottom: 12px;
-}
-
-.section-title {
-  margin: 0 0 20px 0;
-  font-size: 18px;
-  font-weight: bold;
-  color: #333;
-  text-align: center;
-}
-
-.payment-operation-row {
-  margin-bottom: 20px;
-  padding: 16px;
-  background: #fff;
-  border-radius: 6px;
-  border: 1px solid #d9d9d9;
-}
-
-.payment-method-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.method-name {
-  font-size: 16px;
-  font-weight: bold;
-  color: #1890ff;
-}
-
-.remove-btn {
-  color: #ff4d4f;
-  padding: 0;
-  height: auto;
-}
-
-.remove-btn:hover {
-  color: #ff7875;
-}
-
-.payment-fields {
-  margin-top: 12px;
-}
-
-.payment-inline {
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: center;
-  column-gap: 32px;
-  overflow-x: auto;
-}
-
-.inline-field {
-  display: inline-flex;
-  align-items: center;
-  column-gap: 16px;
-  white-space: nowrap;
-}
-
-.payment-inline .form-label {
-  width: auto;
-}
-
-.pay-shortcut {
-  font-size: 16px;
-  color: #888;
-}
-
-.bottom-info {
-  margin-top: 24px;
-  display: flex;
-  flex-wrap: wrap;
-  row-gap: 16px;
-}
-
-.actions-row {
-  margin-top: 32px;
-  display: flex;
-  justify-content: center;
-}
-
-.actions-row .ant-btn {
-  margin: 0 8px;
-  background: #444;
-  color: #fff;
-  border-radius: 6px;
-  border: none;
-  font-size: 16px;
-  font-weight: 500;
-  height: 38px;
-  min-width: 90px;
-}
-</style>
+<template>
+  <div class="xcharge-wrapper">
+    <!-- 顶部金额信息区（表单行风格，宽度固定，每行4个） -->
+    <a-row :gutter="0" class="amount-info">
+      <a-col v-for="item in config.amountFields" :key="item.field" :span="6" class="form-row">
+        <label class="form-label">{{ item.label }}</label>
+        <a-input
+          v-model="data[item.field]"
+          :value="data[item.field]"
+          :disabled="item.disabled"
+          class="form-input"
+        />
+      </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 v-if="isMixedPaymentEnabled && selectedMethods.includes(method.key)" class="selected-indicator">✓</div>
+        </div>
+      </a-button>
+    </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)"
+            />
+          </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">
+        <label class="form-label">{{ item.label }}</label>
+        <a-input
+          v-model="data[item.field]"
+          :disabled="item.disabled"
+          class="form-input"
+          @change="bottomFieldsChange($event,item)"
+        />
+      </a-col>
+    </a-row>
+    <a-row class="actions-row" justify="center">
+      <a-button
+        v-for="btn in config.actionButtons"
+        :key="btn.key"
+        @click="handleAction(btn.key)"
+        :icon="btn.icon"
+        style="margin: 0 8px"
+      >
+        {{ btn.label }}
+      </a-button>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XCharge',
+  props: {
+    queryParamsName: {
+      type: String,
+      default: ''
+    },
+    parameter: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      config: {
+        amountFields: [],
+        paymentMethods: [],
+        bottomFields: [],
+        actionButtons: [],
+        enableMixedPayment: false // 默认关闭混合支付
+      },
+      data: {},
+      selectedMethod: '', // 保持向后兼容
+      selectedMethods: [], // 新增：支持多选支付方式
+      paymentAmounts: {}, // 各支付方式的金额
+      // 事件名配置（可通过配置覆盖）
+      eventNames: {
+        method: 'method',
+        methods: 'methods',
+        totalPaymentAmount: 'totalPaymentAmount',
+        action: 'action',
+        // 新增：单个支付方式金额变更事件
+        paymentAmountChange: 'paymentAmountChange'
+      },
+      hasInitialized: false
+    }
+  },
+  emits: ['init'],
+  computed: {
+    // 安全访问混合支付配置
+    isMixedPaymentEnabled () {
+      return this.config && this.config.enableMixedPayment === true
+    },
+    // 预计算：金额标签映射（仅基于 paymentMethods 配置）
+    amountLabelMap () {
+      const map = {}
+      const methods = Array.isArray(this.config.paymentMethods) ? this.config.paymentMethods : []
+      // 先用 methods 构建默认与自定义
+      methods.forEach(m => {
+        const key = m && m.key
+        const label = m && m.label
+        if (!key) return
+        map[key] = m && m.amountLabel ? m.amountLabel : `${label || key}金额`
+      })
+      return map
+    }
+  },
+  created () {
+    const hasParam = this.parameter && Object.keys(this.parameter).length > 0
+    // 始终加载组件配置；仅当有参数时，getConfig 内部才会拉取数据
+    this.getConfig(this.queryParamsName, this.parameter || {})
+    if (hasParam) this.hasInitialized = true
+  },
+  methods: {
+    // 同步 data 中的 selectedMethods / paymentAmounts 到本地状态；并补回缺失的 data 字段
+    hydrateFromData () {
+      const incomingMethods = Array.isArray(this.data && this.data.selectedMethods) ? this.data.selectedMethods : undefined
+      const incomingAmounts = this.data && this.data.paymentAmounts && typeof this.data.paymentAmounts === 'object' ? this.data.paymentAmounts : undefined
+
+      if (incomingMethods) {
+        this.selectedMethods = [...incomingMethods]
+        this.selectedMethod = this.selectedMethods[0] || ''
+      } else {
+        this.data.selectedMethods = [...this.selectedMethods]
+        this.data.selectedMethod = this.selectedMethod
+      }
+
+      if (incomingAmounts) {
+        // 用 $set 逐项写入，保持响应式
+        Object.keys(incomingAmounts).forEach(k => this.$set(this.paymentAmounts, k, incomingAmounts[k]))
+      } else if (!this.data.paymentAmounts) {
+        this.$set(this.data, 'paymentAmounts', { ...this.paymentAmounts })
+      }
+
+      // 根据 amounts 回算合计
+      this.calculateTotalPayment()
+    },
+    selectMethod (value) {
+      this.selectedMethod = value
+      this.data.selectedMethod = value
+      // 单一模式下初始化对应的支付数据
+      if (!this.isMixedPaymentEnabled && value) {
+        if (!this.paymentAmounts[value]) this.initPaymentData(value)
+      }
+      // 同步到数据模型，单一模式下也记录 selectedMethods 便于父层读取
+      this.data.selectedMethods = this.isMixedPaymentEnabled ? [...this.selectedMethods] : (value ? [value] : [])
+      this.$emit(this.eventNames.method, value)
+    },
+    // 新增：切换支付方式选择（支持多选）
+    toggleMethod (methodKey) {
+      const index = this.selectedMethods.indexOf(methodKey)
+      if (index > -1) {
+        // 如果已选中，则移除
+        this.selectedMethods.splice(index, 1)
+        this.removePaymentData(methodKey)
+      } else {
+        // 如果未选中，则添加
+        this.selectedMethods.push(methodKey)
+        this.initPaymentData(methodKey)
+      }
+
+      // 更新选中状态
+      this.selectedMethod = this.selectedMethods.length > 0 ? this.selectedMethods[0] : ''
+      this.data.selectedMethod = this.selectedMethod
+      this.data.selectedMethods = [...this.selectedMethods]
+
+      this.$emit(this.eventNames.methods, this.selectedMethods)
+      this.$emit(this.eventNames.method, this.selectedMethod) // 保持向后兼容
+    },
+    // 新增：移除支付方式
+    removeMethod (methodKey) {
+      const index = this.selectedMethods.indexOf(methodKey)
+      if (index > -1) {
+        this.selectedMethods.splice(index, 1)
+        this.removePaymentData(methodKey)
+        // 同步所选方式到数据模型
+        this.data.selectedMethods = [...this.selectedMethods]
+        this.selectedMethod = this.selectedMethods[0] || ''
+        this.data.selectedMethod = this.selectedMethod
+        this.$emit(this.eventNames.methods, this.selectedMethods)
+      }
+    },
+    // 新增：初始化支付数据（可传入初始金额，默认空字符串）
+    initPaymentData (methodKey, initialValue = '') {
+      this.$set(this.paymentAmounts, methodKey, initialValue)
+      if (!this.data.paymentAmounts || typeof this.data.paymentAmounts !== 'object') this.$set(this.data, 'paymentAmounts', {})
+      this.$set(this.data.paymentAmounts, methodKey, initialValue)
+    },
+    // 新增：移除支付数据
+    removePaymentData (methodKey) {
+      this.$delete(this.paymentAmounts, methodKey)
+      if (this.data && this.data.paymentAmounts) this.$delete(this.data.paymentAmounts, methodKey)
+    },
+    // 新增：获取支付方式标签
+    getMethodLabel (methodKey) {
+      const method = this.config.paymentMethods.find(m => m.key === methodKey)
+      return method ? method.label : methodKey
+    },
+    // 获取支付金额字段标签（优先配置映射，其次方法自带 amountLabel，最后回退）
+    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
+      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)
+      this.calculateTotalPayment()
+      // 单个方式金额变更事件，向父组件上抛
+      this.$emit(this.eventNames.paymentAmountChange, { method: methodKey, amount })
+    },
+    // 新增：计算总支付金额
+    calculateTotalPayment () {
+      const total = Object.values(this.paymentAmounts).reduce((sum, amount) => {
+        return sum + (parseFloat(amount) || 0)
+      }, 0)
+      this.data.totalPaymentAmount = total
+      this.$emit(this.eventNames.totalPaymentAmount, total)
+    },
+    getConfig (configName, param) {
+      if (configName) {
+        console.log('configName', configName)
+        getConfigByName(configName, 'af-his', res => {
+          console.log('res', res)
+          // 检查是否有错误
+          if (res && res.ERROR) {
+            console.warn('配置获取失败:', res.ERROR)
+            return
+          }
+          this.config = {
+            amountFields: res.amountFields || [],
+            paymentMethods: res.paymentMethods || [],
+            bottomFields: res.bottomFields || [],
+            actionButtons: res.actionButtons || [],
+            enableMixedPayment: res.enableMixedPayment === true
+          }
+          // 事件名覆盖（fronImport风格）
+          if (res.eventNames && typeof res.eventNames === 'object') {
+            this.eventNames = { ...this.eventNames, ...res.eventNames }
+          }
+          // 处理默认选中项（支持 paymentMethods[].default === true）
+          const methods = Array.isArray(this.config.paymentMethods) ? this.config.paymentMethods : []
+          const defaultMethods = methods.filter(m => m && m.default === true)
+
+          if (this.isMixedPaymentEnabled) {
+            // 混合支付：默认选中全部 default=true 的方式；若没有默认，则保留现有逻辑选择第一个
+            if (defaultMethods.length > 0) {
+              this.selectedMethods = defaultMethods.map(m => m.key).filter(Boolean)
+            } else if (methods.length > 0) {
+              this.selectedMethods = [methods[0].key]
+            } else {
+              this.selectedMethods = []
+            }
+            // 初始化金额为 0
+            this.selectedMethods.forEach(k => this.initPaymentData(k, 0))
+            this.selectedMethod = this.selectedMethods[0] || ''
+            // 同步到数据模型
+            this.data.selectedMethods = [...this.selectedMethods]
+          } else {
+            // 单一支付：若存在默认项，选中第一个默认；否则选中第一个
+            if (defaultMethods.length > 0) {
+              this.selectedMethod = defaultMethods[0] && defaultMethods[0].key || ''
+            } else {
+              this.selectedMethod = methods[0] && methods[0].key || ''
+            }
+            if (this.selectedMethod) this.initPaymentData(this.selectedMethod, 0)
+            // 同步到数据模型，单一模式下也记录 selectedMethods
+            this.data.selectedMethods = this.selectedMethod ? [this.selectedMethod] : []
+          }
+
+          // 初始化数据：仅当传入了有效 param 时才拉取数据
+          const hasParam = param && Object.keys(param || {}).length > 0
+          if (hasParam && res.dataSourceConfig) {
+            runLogic(res.dataSourceConfig, param, 'af-his').then(resData => {
+              // 合并数据，避免覆盖 selectedMethods / paymentAmounts 等本地状态
+              this.data = { ...this.data, ...resData }
+              // 让本地状态与 data 保持一致
+              this.hydrateFromData()
+            }).catch(error => {
+              console.warn('数据获取失败（保持现有数据）:', error)
+            })
+          }
+        })
+      }
+    },
+    refreshList (param) {
+      this.getConfig(this.queryParamsName, param)
+    },
+    async init (conditionData) {
+      if (conditionData.data) {
+        // 合并初始化数据，避免覆盖 selectedMethods / paymentAmounts 等本地状态
+        this.data = { ...this.data, ...conditionData.data }
+        this.hydrateFromData()
+      }
+      if (conditionData.params) {
+        await this.getConfig(this.queryParamsName, conditionData.params)
+      }
+      this.hasInitialized = true
+    },
+    // 使用默认数据
+    useDefaultData () {
+      this.data = {
+        f_amount: 100,
+        f_insurance_amount: 0,
+        f_self_amount: 100,
+        f_balance: 100,
+        out_of_pocket_amount: 0,
+        biscount_amount: 0,
+        billing_amount: 0,
+        received: 100,
+        change: 0
+      }
+    },
+    handleAction (key) {
+      console.warn('选择的的方法 ====》' + key)
+      console.warn('页面数据 ====》' + JSON.stringify(this.data))
+      console.warn('选择的支付方式 ====》' + this.selectedMethod)
+
+      if (this.isMixedPaymentEnabled) {
+        console.warn('混合支付方式 ====》' + JSON.stringify(this.selectedMethods))
+        console.warn('支付详情 ====》' + JSON.stringify({ amounts: this.paymentAmounts }))
+      }
+
+      const actionData = {
+        key,
+        data: this.data,
+        method: this.selectedMethod,
+        // 统一返回支付详情，单一模式时 selectedMethods 仅含一个
+        mixedPayment: {
+          selectedMethods: this.isMixedPaymentEnabled ? this.selectedMethods : (this.selectedMethod ? [this.selectedMethod] : []),
+          paymentAmounts: this.paymentAmounts,
+          totalPaymentAmount: this.data.totalPaymentAmount || 0
+        }
+      }
+
+      this.$emit(this.eventNames.action, actionData)
+    },
+    bottomFieldsChange (e, item) {
+      // 统一抛出到底部字段变更事件到父级组件
+      this.$emit('bottomFieldChange', {
+        event: e,
+        item: item,
+        field: item.field,
+        value: e && e.target ? e.target.value : undefined
+      })
+
+      // 保持原有的自定义事件逻辑（向后兼容）
+      if (item.changeEventName && this.$listeners[item.changeEventName]) this.$emit(item.changeEventName, e, item)
+    }
+  },
+  watch: {
+    configName (val) {
+      this.getConfig()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.xcharge-wrapper {
+  background: #fff;
+  padding: 24px;
+  border-radius: 8px;
+}
+
+.amount-info {
+  margin-bottom: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 16px;
+}
+
+.form-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 30px;
+}
+
+.form-label {
+  width: 100px;
+  font-size: 18px;
+  color: #333;
+  font-weight: bold;
+  text-align: left;
+  letter-spacing: 1px;
+  flex-shrink: 0;
+}
+
+.form-input {
+  width: 180px;
+  height: 40px;
+  font-size: 18px;
+  border-radius: 8px;
+  border: 1.5px solid #dcdfe6;
+  background: #fff;
+  color: #333;
+  padding-left: 12px;
+}
+
+.form-input[disabled] {
+  color: #999;
+  background: #f5f5f5;
+}
+
+.payment-methods {
+  display: flex;
+  justify-content: space-around;
+  margin: 32px 0;
+}
+
+.payment-btn {
+  width: 180px;
+  height: 120px;
+  margin: 0 16px;
+  display: flex;
+  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;
+}
+
+.payment-btn.active {
+  background: #409eff;
+  border-color: #409eff;
+  color: #fff;
+}
+
+.pay-label {
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.selected-indicator {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: #52c41a;
+  color: #fff;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.mixed-payment-section {
+  margin: 24px 0;
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  border: 1px solid #e9ecef;
+}
+
+.mixed-payment-section.simple {
+  padding: 0;
+  background: transparent;
+  border: none;
+}
+
+.mixed-payment-section.simple .payment-operation-row {
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin-bottom: 12px;
+}
+
+.section-title {
+  margin: 0 0 20px 0;
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+}
+
+.payment-operation-row {
+  margin-bottom: 20px;
+  padding: 16px;
+  background: #fff;
+  border-radius: 6px;
+  border: 1px solid #d9d9d9;
+}
+
+.payment-method-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.method-name {
+  font-size: 16px;
+  font-weight: bold;
+  color: #1890ff;
+}
+
+.remove-btn {
+  color: #ff4d4f;
+  padding: 0;
+  height: auto;
+}
+
+.remove-btn:hover {
+  color: #ff7875;
+}
+
+.payment-fields {
+  margin-top: 12px;
+}
+
+.payment-inline {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  column-gap: 32px;
+  overflow-x: auto;
+}
+
+.inline-field {
+  display: inline-flex;
+  align-items: center;
+  column-gap: 16px;
+  white-space: nowrap;
+}
+
+.payment-inline .form-label {
+  width: auto;
+}
+
+.pay-shortcut {
+  font-size: 16px;
+  color: #888;
+}
+
+.bottom-info {
+  margin-top: 24px;
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 16px;
+}
+
+.actions-row {
+  margin-top: 32px;
+  display: flex;
+  justify-content: center;
+}
+
+.actions-row .ant-btn {
+  margin: 0 8px;
+  background: #444;
+  color: #fff;
+  border-radius: 6px;
+  border: none;
+  font-size: 16px;
+  font-weight: 500;
+  height: 38px;
+  min-width: 90px;
+}
+</style>