src/components/fee/returnPayFee.vue

<template>
  <el-dialog 
    :title="$t('returnPayFee.fillRefundReason')" 
    :visible.sync="visible"
    width="50%"
    center
  >
    <el-form :model="returnFeeDetailInfo" label-width="120px">
      <el-form-item :label="$t('returnPayFee.paymentId')">
        <el-input v-model="returnFeeDetailInfo.detailId" readonly />
      </el-form-item>
      
      <el-form-item :label="`${$t('returnPayFee.cycle')}(单位月)`">
        <el-input v-model="returnFeeDetailInfo.cycles" readonly />
      </el-form-item>
      
      <el-form-item :label="$t('returnPayFee.receivableAmount')">
        <el-input v-model="returnFeeDetailInfo.receivableAmount" readonly />
      </el-form-item>
      
      <el-form-item :label="$t('returnPayFee.receivedAmount')">
        <el-input v-model="returnFeeDetailInfo.receivedAmount" readonly />
      </el-form-item>
      
      <el-form-item :label="$t('returnPayFee.paymentTime')">
        <el-input v-model="returnFeeDetailInfo.payTime" readonly />
      </el-form-item>
      
      <el-form-item :label="$t('returnPayFee.refundReason')" required>
        <el-input
          type="textarea"
          :rows="3"
          v-model="returnFeeDetailInfo.reason"
          :placeholder="$t('returnPayFee.enterRefundReason')"
        ></el-input>
      </el-form-item>
    </el-form>
    
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" @click="submitReturnPayFee">{{ $t('returnPayFee.submitRefund') }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getCommunityId } from '@/api/community/communityApi'
import { saveReturnPayFee } from '@/api/fee/propertyFeeApi'
export default {
  name: 'ReturnPayFee',
  data() {
    return {
      visible: false,
      returnFeeDetailInfo: {
        detailId: '',
        cycles: '',
        receivableAmount: '',
        receivedAmount: '',
        payTime: '',
        reason: '',
        communityId: '',
        feeId: '',
        feeTypeCd: '',
        configId: ''
      },
      communityId: ''
    }
  },
  created() {
    this.communityId = getCommunityId()
  },
  methods: {
    open(params) {
      this.returnFeeDetailInfo = {
        ...this.returnFeeDetailInfo,
        communityId: params.communityId || this.communityId,
        payTime: params.createTime,
        detailId: params.detailId,
        cycles: params.cycles,
        receivableAmount: params.receivableAmount,
        receivedAmount: params.receivedAmount,
        feeId: params.mainFeeInfo.feeId || '',
        feeTypeCd: params.mainFeeInfo.feeTypeCd || '',
        configId: params.mainFeeInfo.configId || '',
        remark: params.remark || ''
      }
      this.visible = true
    },
    returnPayFeeValidate() {
      if (!this.returnFeeDetailInfo.reason) {
        this.$message.error(this.$t('returnPayFee.refundReasonRequired'))
        return false
      }
      if (this.returnFeeDetailInfo.reason.length > 200) {
        this.$message.error(this.$t('returnPayFee.refundReasonTooLong'))
        return false
      }
      return true
    },
    async submitReturnPayFee() {
      if (!this.returnPayFeeValidate()) return
      
      try {
        const res = await saveReturnPayFee(this.returnFeeDetailInfo)
        if (res.code === 0) {
          this.$message.success(this.$t('common.operateSuccess'))
          this.visible = false
          this.$emit('success')
        } else {
          this.$message.error(res.msg || this.$t('common.operateFailed'))
        }
      } catch (error) {
        console.error('提交退费申请失败:', error)
        this.$message.error(this.$t('common.operateFailed'))
      }
    }
  }
}
</script>
<style scoped>
.el-input, .el-textarea {
  width: 100%;
}
</style>