his/openhis-ui-vue3/src/views/inHospitalManagement/charge/advanceDeposit/components/refundDialog.vue

<template>
  <el-dialog
    title="确认退费"
    v-model="props.open"
    width="700px"
    append-to-body
    destroy-on-close
    @close="close"
    @open="open"
  >
    <div>
      <el-form
        :model="form"
        :rules="rules"
        ref="chargeDialogRef"
        label-width="110px"
        label-position="left"
      >
        <el-text size="large">
          <!-- <el-form-item label="费用性质：" prop="currentDate"> {{ '自费' }} </el-form-item> -->
        </el-text>
        <!-- 自费支付 -->
        <div class="payment-container">
          <!-- <el-form-item label="支付方式：" prop="payEnum" style="display: flex">
            <el-select
              v-model="form.payEnum"
              placeholder="选择支付方式"
              style="width: 160px"
              @change="clearAmount(index)"
            >
              <el-option
                v-for="payEnum in props.payLists"
                :key="payEnum.value"
                :label="payEnum.label"
                :value="payEnum.value"
                :disabled="isMethodDisabled(payEnum.value)"
              />
            </el-select>
          </el-form-item> -->
          <el-form-item label="退费金额：" prop="amount">
            <div class="suffix-wrapper">
              <el-input-number
                v-model="form.amount"
                :precision="2"
                :min="0"
                :max="props.patientInfo.balanceAmount"
                :controls="false"
                placeholder="金额"
                class="amount-input"
                @change="handleAmountChange"
              />
              <span class="suffix-text">元</span>
            </div>
          </el-form-item>
        </div>
        <!-- 金额汇总 -->
        <div class="summary">
          <el-space :size="30">
            <div class="summary-item">
              <el-form-item label="实退合计：" prop="displayAmount">
                <el-text type="success">
                  {{ form.displayAmount ? form.displayAmount : 0 + ' 元' }}
                </el-text>
              </el-form-item>
            </div>
          </el-space>
        </div>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
  
<script setup>
import {refund} from './api';
import {getCurrentInstance, reactive, ref} from 'vue';

const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  totalAmount: {
    type: Number,
    default: 0.0,
  },
  patientInfo: {
    type: Object,
    default: undefined,
  },
  payLists: {
    type: Array,
    default: () => [],
  },
});

const { proxy } = getCurrentInstance();
const data = reactive({
  form: {},
  rules: {},
});

const { queryParams, form, rules } = toRefs(data);

const emit = defineEmits(['close']);
const payMethods = ref(undefined);

async function submit() {
  form.value.patientId = props.patientInfo.patientId;
  form.value.encounterId = props.patientInfo.encounterId;
  form.value.accountId = props.patientInfo.accountId;
  console.log(props.patientInfo, 'patientInfo');
  refund(form.value).then((res) => {
    if (res.code == 200) {
      reset();
      emit('close', {
        status: 'success',
        busNo: props.patientInfo?.busNo,
      });
    }
  });
}

function open() {
  form.value.amount = props.patientInfo.balanceAmount;
}

/** 重置操作表单 */
function reset() {
  form.value = {
    patientId: undefined,
    encounterId: undefined,
    displayAmount: 0,
    payEnum: undefined,
    amount: undefined,
  };
  proxy.resetForm('chargeDialogRef');
}

/**
 * 处理金额变化事件
 *
 * 当表单中的金额发生变化时，将显示金额设置为实际金额
 */
function handleAmountChange() {
  form.value.displayAmount = form.value.amount;
}

function close() {
  reset();
  emit('close');
}
</script>

<style scoped>
:deep(.pagination-container .el-pagination) {
  right: 20px !important;
}
.charge-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px 30px;
}

.header {
  margin-bottom: 10px;
}

.amount-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 15px 0;
}

.amount {
  font-size: 20px;
  font-weight: bold;
}

.payment-type {
  margin: 15px 0;
}

.payment-container {
  margin: 15px 0;
}

.payment-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.amount-input {
  width: 140px;
}

.add-payment {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tip {
  font-size: 12px;
}

.summary {
  margin: 25px 0;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.summary-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.action-buttons {
  text-align: center;
  margin-top: 25px;
}

.el-text.el-text--success {
  font-size: 18px !important;
  font-weight: 500;
}

.el-text.el-text--warning {
  font-size: 18px !important;
  font-weight: 500;
}

.suffix-wrapper {
  position: relative;
  display: inline-block; /* 保持行内布局 */
}

.suffix-text {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none; /* 避免点击干扰 */
}

/* 调整输入框内边距 */
.amount-input .el-input__inner {
  padding-right: 30px !important;
}
</style>