vue2-client 1.16.14 → 1.16.15

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

@@ -1,238 +1,569 @@
-<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: selectedMethod === method.key }]"
-        @click="selectMethod(method.key)"
-      >
-        <div>
-          <div class="pay-label">{{ method.label }}</div>
-        </div>
-      </a-button>
-    </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: []
-      },
-      data: {},
-      selectedMethod: '',
-    }
-  },
-  created () {
-    this.getConfig(this.queryParamsName, {})
-  },
-  methods: {
-    selectMethod (value) {
-      this.selectedMethod = value
-      this.data.selectedMethod = value
-      this.$emit('method', value)
-    },
-    getConfig (configName, param) {
-      getConfigByName(configName, 'af-his', res => {
-        this.config = res
-        this.selectedMethod = res.paymentMethods?.[0]?.key || ''
-        // 初始化数据
-        runLogic(res.dataSourceConfig, param, 'af-his').then(resData => {
-          this.data = { ...resData }
-        })
-      })
-    },
-    refreshList (param) {
-      this.getConfig(this.queryParamsName, param)
-    },
-    handleAction (key) {
-      console.warn('选择的的方法 ====》' + key)
-      console.warn('页面数据 ====》' + JSON.stringify(this.data))
-      console.warn('选择的支付方式 ====》' + this.selectedMethod)
-      this.$emit('action', { key, data: this.data, method: this.selectedMethod })
-    },
-    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;
-}
-
-.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/>
+
+    <!-- 支付详情（同一行展示） -->
+    <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>