1573 lines
58 KiB
Vue
1573 lines
58 KiB
Vue
<template>
|
||
<div class="bill-detail-container">
|
||
<el-tabs v-model="activeTab">
|
||
<el-tab-pane label="账单基本信息" name="basicInfo">
|
||
<div class="bill-header">
|
||
<div class="bill-header-left">
|
||
<h3>账单信息</h3>
|
||
</div>
|
||
<div class="bill-header-right">
|
||
<el-button
|
||
type="primary"
|
||
@click="openPaymentDialog"
|
||
:disabled="!canPayBill">
|
||
账单支付
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
<el-descriptions :column="3" border size="medium">
|
||
<el-descriptions-item label="账单编号">{{ billDetail.totBillNo }}</el-descriptions-item>
|
||
<el-descriptions-item label="账单来源">{{ getBillSourceName(billDetail.billSource) }}</el-descriptions-item>
|
||
<el-descriptions-item label="账单状态">
|
||
<el-tag :type="billDetail.billStatus === '1' ? 'success' : 'info'">
|
||
{{ billDetail.billStatus === '1' ? '开启' : '关闭' }}
|
||
</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="对方名称">{{ billDetail.paysdName }}</el-descriptions-item>
|
||
<el-descriptions-item label="支付联系方式">{{ billDetail.payeeContact }}</el-descriptions-item>
|
||
<el-descriptions-item label="关联合同">{{ billDetail.contractNumber || '无' }}</el-descriptions-item>
|
||
<el-descriptions-item label="费用类型">{{ billDetail.feTpName }}</el-descriptions-item>
|
||
<el-descriptions-item label="计费周期">
|
||
{{ billDetail.chggBgnDt }} 至 {{ billDetail.chggEndDt }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="应收日期">{{ billDetail.pybDt }}</el-descriptions-item>
|
||
<el-descriptions-item label="结清状态">
|
||
<el-tag :type="getClearStatusType(billDetail.clearStatus)">
|
||
{{ getClearStatusName(billDetail.clearStatus) }}
|
||
</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="逾期状态">
|
||
<el-tag :type="billDetail.overdueStatus === '1' ? 'danger' : 'success'">
|
||
{{ billDetail.overdueStatus === '1' ? '逾期' : '正常' }}
|
||
</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="滞纳金状态">
|
||
<el-tag :type="getLateFeeStatusType(billDetail.ovdueStatus)">
|
||
{{ getLateFeeStatusName(billDetail.ovdueStatus) }}
|
||
</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="账单金额">{{ formatAmount(billDetail.accblAmt) }}</el-descriptions-item>
|
||
<el-descriptions-item label="应收金额">{{ formatAmount(billDetail.accigRcvAmt) }}</el-descriptions-item>
|
||
<el-descriptions-item label="实收金额">{{ formatAmount(billDetail.atmRecvAmt) }}</el-descriptions-item>
|
||
<el-descriptions-item label="需收金额">{{ formatAmount(billDetail.needAmount) }}</el-descriptions-item>
|
||
<el-descriptions-item label="调整金额">{{ formatAmount(billDetail.adjAmt) }}</el-descriptions-item>
|
||
<el-descriptions-item label="应收滞纳金">{{ formatAmount(billDetail.receivableOvdueAmt) }}</el-descriptions-item>
|
||
<el-descriptions-item label="税率">{{ billDetail.taxRate }}%</el-descriptions-item>
|
||
<el-descriptions-item label="税额">{{ formatAmount(billDetail.paybleTaxAmount) }}</el-descriptions-item>
|
||
<el-descriptions-item label="含税规则">{{ billDetail.taxInclusiveRule }}</el-descriptions-item>
|
||
<el-descriptions-item label="特殊账单类型">{{ billDetail.specialBillType }}</el-descriptions-item>
|
||
<el-descriptions-item label="开据状态">
|
||
<el-tag :type="billDetail.receiptStatus === '1' ? 'success' : 'info'">
|
||
{{ billDetail.receiptStatus === '1' ? '已开据' : '未开据' }}
|
||
</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="所属公司">{{ billDetail.corNm }}</el-descriptions-item>
|
||
<el-descriptions-item label="租赁数(计租面积)">{{ billDetail.rentArea }} ㎡</el-descriptions-item>
|
||
<el-descriptions-item label="项目名称">{{ billDetail.projectName }}</el-descriptions-item>
|
||
<el-descriptions-item label="账单备注" :span="3">{{ billDetail.billRemark || '无' }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="账单明细查询" name="billDetails">
|
||
<el-table :data="billDetailsList" border style="width: 100%">
|
||
<el-table-column prop="feeTypeName" label="费用类型" min-width="120" show-overflow-tooltip></el-table-column>
|
||
<el-table-column label="应收金额" min-width="120" align="right">
|
||
<template slot-scope="scope">
|
||
{{ formatAmount(scope.row.receivableAmount) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="税率" min-width="80" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.taxRate }}%
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="税额" min-width="120" align="right">
|
||
<template slot-scope="scope">
|
||
{{ formatAmount(scope.row.taxAmount) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="startDate" label="开始日期" min-width="120" align="center"></el-table-column>
|
||
<el-table-column prop="endDate" label="结束日期" min-width="120" align="center"></el-table-column>
|
||
<el-table-column prop="remark" label="账单备注" min-width="200" show-overflow-tooltip></el-table-column>
|
||
<el-table-column label="操作" width="120" align="center" fixed="right">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
@click="handleAdjustment(scope.row)"
|
||
:disabled="!canAdjustBill">
|
||
调整
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div v-if="billDetailsList.length === 0" class="empty-data">
|
||
<el-empty description="暂无账单明细"></el-empty>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="账单调整" name="billAdjustment">
|
||
<div class="bill-adjustment-container">
|
||
<div class="adjustment-list">
|
||
<el-table :data="adjustmentList" border style="width: 100%; margin-top: 15px">
|
||
<el-table-column prop="adjTpCd" label="调整类型" min-width="100">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.adjTpCd === '1' ? '调增' : '调减' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="adjDate" label="调整日期" min-width="120" align="center"></el-table-column>
|
||
<el-table-column prop="adjMethod" label="调整方式" min-width="120">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.adjMethod === '1' ? '按金额调整' : '按比例调整' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="调整金额" min-width="120" align="right">
|
||
<template slot-scope="scope">
|
||
{{ formatAmount(scope.row.adjAmt) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="调整比例" min-width="100" align="center">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.adjRate ? scope.row.adjRate + '%' : '-' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="adjStatus" label="调整状态" min-width="100">
|
||
<template slot-scope="scope">
|
||
<el-tag :type="scope.row.adjStatus === '1' ? 'success' : 'info'">
|
||
{{ scope.row.adjStatus === '1' ? '正常' : '作废' }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="billDetailType" label="账单明细类型" min-width="120">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.billDetailType === '1' ? '滞纳金' : '原账单' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="adjSource" label="调整来源" min-width="120">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.adjSource === '1' ? '账单直接调整' : '合同调整' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="createTime" label="创建时间" min-width="150" align="center"></el-table-column>
|
||
<el-table-column label="操作" width="120" align="center" fixed="right">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" type="text" @click="viewAdjustmentDetail(scope.row)" v-if="scope.row.adjStatus === '1'">附件详情</el-button>
|
||
<el-button size="mini" type="text" class="delete-btn" @click="voidAdjustment(scope.row)" v-if="scope.row.adjStatus === '1'">作废</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div v-if="adjustmentList.length === 0" class="empty-data">
|
||
<el-empty description="暂无账单调整记录"></el-empty>
|
||
</div>
|
||
<div class="pagination-container" v-if="adjustmentList.length > 0">
|
||
<el-pagination
|
||
background
|
||
@size-change="handleAdjustmentSizeChange"
|
||
@current-change="handleAdjustmentCurrentChange"
|
||
:current-page="adjustmentQuery.pageNum"
|
||
:page-sizes="[5, 10, 20, 50]"
|
||
:page-size="adjustmentQuery.pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="adjustmentTotal">
|
||
</el-pagination>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="房源信息" name="roomInfo">
|
||
<el-table :data="roomList" border style="width: 100%">
|
||
<el-table-column prop="roomNumber" label="房号" min-width="100"></el-table-column>
|
||
<el-table-column prop="floorName" label="楼层" min-width="100"></el-table-column>
|
||
<el-table-column prop="buildingName" label="楼宇" min-width="120"></el-table-column>
|
||
<el-table-column prop="projectName" label="项目" min-width="150"></el-table-column>
|
||
<el-table-column prop="rentArea" label="计租面积(㎡)" min-width="120" align="right"></el-table-column>
|
||
</el-table>
|
||
<div v-if="roomList.length === 0" class="empty-data">
|
||
<el-empty description="暂无房源信息"></el-empty>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="附件信息" name="attachment">
|
||
<div class="attachment-header">
|
||
<el-upload
|
||
class="upload-area"
|
||
action="#"
|
||
:http-request="uploadFile"
|
||
:before-upload="beforeFileUpload"
|
||
multiple
|
||
:limit="10">
|
||
<el-button type="primary" icon="el-icon-plus">添加附件</el-button>
|
||
<div slot="tip" class="el-upload__tip">只能上传jpg/png/pdf文件，且不超过5MB</div>
|
||
</el-upload>
|
||
</div>
|
||
<el-table :data="attachmentList" border style="width: 100%; margin-top: 15px">
|
||
<el-table-column prop="fileName" label="文件名" min-width="200" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="operatorName" label="操作人" width="150"></el-table-column>
|
||
<el-table-column prop="operateTime" label="操作时间" width="180"></el-table-column>
|
||
<el-table-column label="操作" width="200" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" type="text" @click="previewFile(scope.row)">预览</el-button>
|
||
<el-button size="mini" type="text" @click="downloadFile(scope.row)">下载</el-button>
|
||
<el-button size="mini" type="text" class="delete-btn" @click="deleteFile(scope.row)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div v-if="attachmentList.length === 0" class="empty-data">
|
||
<el-empty description="暂无附件信息"></el-empty>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="操作记录" name="operationLog">
|
||
<el-table :data="operationList" border style="width: 100%">
|
||
<el-table-column prop="oprContent" label="操作内容" min-width="300" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="oprPersonNm" label="操作人" width="150"></el-table-column>
|
||
<el-table-column prop="oprTime" label="操作时间" width="180"></el-table-column>
|
||
</el-table>
|
||
<div v-if="operationList.length === 0" class="empty-data">
|
||
<el-empty description="暂无操作记录"></el-empty>
|
||
</div>
|
||
<div class="pagination-container" v-if="operationTotal > 0">
|
||
<el-pagination
|
||
background
|
||
@size-change="handleOperationSizeChange"
|
||
@current-change="handleOperationCurrentChange"
|
||
:current-page="operationQuery.pageNum"
|
||
:page-sizes="[5, 10, 20, 50]"
|
||
:page-size="operationQuery.pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="operationTotal">
|
||
</el-pagination>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
|
||
<!-- 文件预览对话框 -->
|
||
<el-dialog title="附件预览" :visible.sync="previewDialogVisible" width="800px" append-to-body>
|
||
<div class="preview-container" v-loading="previewLoading">
|
||
<div v-if="previewUrl && isPdf" class="preview-iframe">
|
||
<iframe :src="previewUrl" width="100%" height="500px" frameborder="0"></iframe>
|
||
</div>
|
||
<div v-else-if="previewUrl && isImage" class="preview-image">
|
||
<img :src="previewUrl" style="max-width: 100%;" />
|
||
</div>
|
||
<div v-else-if="!previewLoading" class="preview-error">
|
||
<i class="el-icon-warning"></i>
|
||
<p>预览加载失败，请尝试下载后查看</p>
|
||
<div class="preview-actions">
|
||
<el-button type="primary" @click="downloadCurrentPreview">下载文件</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="previewDialogVisible = false">关 闭</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 账单调整对话框 -->
|
||
<el-dialog title="账单调整" :visible.sync="adjustmentDialogVisible" width="700px" append-to-body @close="resetAdjustmentForm">
|
||
<el-form ref="adjustmentForm" :model="adjustmentForm" :rules="adjustmentRules" label-width="120px">
|
||
<el-form-item label="调整类型" prop="adjTpCd" required>
|
||
<el-radio-group v-model="adjustmentForm.adjTpCd">
|
||
<el-radio label="1">调增</el-radio>
|
||
<el-radio label="2">调减</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="调整日期" prop="adjDate" required>
|
||
<el-date-picker
|
||
v-model="adjustmentForm.adjDate"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
value-format="yyyy-MM-dd"
|
||
style="width: 220px">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="调整方式" prop="adjMethod" required>
|
||
<el-radio-group v-model="adjustmentForm.adjMethod" @change="handleAdjMethodChange">
|
||
<el-radio label="1">按金额调整</el-radio>
|
||
<el-radio label="2">按比例调整</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="调整金额" prop="adjAmt" required v-if="adjustmentForm.adjMethod == '1'">
|
||
<el-input-number
|
||
v-model="adjustmentForm.adjAmt"
|
||
:min="0"
|
||
:precision="2"
|
||
:max="adjustmentForm.adjTpCd === '2' ? billDetail.accigRcvAmt : undefined"
|
||
@change="calculateAdjustAmount"
|
||
style="width: 220px">
|
||
</el-input-number>
|
||
<span class="form-hint">调整后金额: {{ formatAmount(adjustedAmount) }}</span>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="调整比例(%)" prop="adjRate" required v-if="adjustmentForm.adjMethod == '2'">
|
||
<el-input-number
|
||
v-model="adjustmentForm.adjRate"
|
||
:min="0"
|
||
:max="adjustmentForm.adjTpCd === '2' ? 100 : undefined"
|
||
:precision="2"
|
||
@change="calculateAdjustAmount"
|
||
style="width: 220px">
|
||
</el-input-number>
|
||
<span class="form-hint">调整后金额: {{ formatAmount(adjustedAmount) }}</span>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="备注" prop="remark">
|
||
<el-input
|
||
type="textarea"
|
||
v-model="adjustmentForm.remark"
|
||
placeholder="请输入调整原因或其他备注信息"
|
||
:rows="3"
|
||
style="width: 400px">
|
||
</el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="附件">
|
||
<el-upload
|
||
class="upload-area"
|
||
action="#"
|
||
:http-request="uploadAdjustmentAttachment"
|
||
:file-list="adjustmentFileList"
|
||
:before-upload="beforeAdjustmentUpload"
|
||
multiple
|
||
:limit="10">
|
||
<el-button size="small" type="primary">添加附件</el-button>
|
||
<div slot="tip" class="el-upload__tip">只能上传jpg/png/pdf文件，且不超过5MB</div>
|
||
</el-upload>
|
||
|
||
<el-table v-if="adjustmentFileList.length > 0" :data="adjustmentFileList" border style="width: 100%; margin-top: 15px">
|
||
<el-table-column prop="name" label="文件名" min-width="200" show-overflow-tooltip></el-table-column>
|
||
<el-table-column label="操作" width="150" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" type="text" @click="previewAdjustmentFile(scope.row)">预览</el-button>
|
||
<el-button size="mini" type="text" class="delete-btn" @click="deleteAdjustmentFile(scope.$index)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="adjustmentDialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="submitAdjustment" :loading="adjustmentSubmitting">确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 账单调整附件详情弹窗 -->
|
||
<el-dialog title="账单调整附件详情" :visible.sync="adjustmentAttachmentDialogVisible" width="800px" append-to-body>
|
||
<el-table :data="adjustmentAttachmentList" border style="width: 100%">
|
||
<el-table-column prop="fileName" label="文件名" min-width="200" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="createUserId" label="操作人" width="150"></el-table-column>
|
||
<el-table-column prop="createTime" label="操作时间" width="180"></el-table-column>
|
||
<el-table-column label="操作" width="200" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" type="text" @click="previewFile(scope.row)">预览</el-button>
|
||
<el-button size="mini" type="text" @click="downloadFile(scope.row)">下载</el-button>
|
||
<el-button size="mini" type="text" class="delete-btn" @click="deleteAdjustmentAttachment(scope.row)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div v-if="adjustmentAttachmentList.length === 0" class="empty-data">
|
||
<el-empty description="暂无附件信息"></el-empty>
|
||
</div>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="adjustmentAttachmentDialogVisible = false">关 闭</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 账单支付对话框 -->
|
||
<el-dialog title="账单支付" :visible.sync="paymentDialogVisible" width="800px" append-to-body @close="resetPaymentForm">
|
||
<el-form ref="paymentForm" :model="paymentForm" :rules="paymentRules" label-width="120px" class="payment-form">
|
||
<!-- 第一部分：结清状态 -->
|
||
<div class="payment-section">
|
||
<h4>账单状态</h4>
|
||
<el-descriptions :column="1" border size="medium">
|
||
<el-descriptions-item label="结清状态">
|
||
<el-tag :type="getClearStatusType(billDetail.clearStatus)">
|
||
{{ getClearStatusName(billDetail.clearStatus) }}
|
||
</el-tag>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
|
||
<!-- 第二部分：可编辑费用列表 -->
|
||
<div class="payment-section">
|
||
<h4>费用信息</h4>
|
||
<el-descriptions :column="2" border size="medium">
|
||
<el-descriptions-item label="费用类型">{{ billDetail.feTpName }}</el-descriptions-item>
|
||
<el-descriptions-item label="应收金额">{{ formatAmount(billDetail.accigRcvAmt) }}</el-descriptions-item>
|
||
<el-descriptions-item label="实收金额">{{ formatAmount(billDetail.atmRecvAmt) }}</el-descriptions-item>
|
||
<el-descriptions-item label="需收金额">{{ formatAmount(billDetail.needAmount) }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
<el-form-item style="margin-top: 20px;" label="本次收款" prop="occuAmt" required>
|
||
<div class="amount-input-wrapper">
|
||
<el-input-number
|
||
v-model="paymentForm.occuAmt"
|
||
:min="0.01"
|
||
:max="billDetail.needAmount || 0"
|
||
:precision="2"
|
||
:step="0.01"
|
||
@change="calculateRemainingAmount"
|
||
style="width: 300px;margin-right: 10px;">
|
||
</el-input-number>
|
||
<el-button size="small" type="primary" @click="fillFullAmount" class="fill-btn">收完</el-button>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="剩余待收">
|
||
<span>{{ formatAmount(remainingAmount) }}</span>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="入账时间" prop="inaccDate" required>
|
||
<el-date-picker
|
||
v-model="paymentForm.inaccDate"
|
||
type="date"
|
||
placeholder="选择日期"
|
||
value-format="yyyy-MM-dd"
|
||
style="width: 300px">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<!-- 第三部分：支付方式 -->
|
||
<div class="payment-section">
|
||
<h4>支付方式</h4>
|
||
<el-form-item label="支付方式" prop="payModeName" required>
|
||
<el-select v-model="paymentForm.payModeName" placeholder="请选择支付方式" style="width: 300px">
|
||
<el-option
|
||
v-for="item in paymentMethods"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="凭证号">
|
||
<el-input v-model="paymentForm.txVchrNo" placeholder="请输入凭证号" style="width: 300px"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="摘要">
|
||
<el-input v-model="paymentForm.summ" placeholder="请输入摘要" style="width: 300px"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="备注">
|
||
<el-input
|
||
type="textarea"
|
||
v-model="paymentForm.remark"
|
||
placeholder="请输入备注信息"
|
||
:rows="3"
|
||
style="width: 300px">
|
||
</el-input>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<!-- 第四部分：附件信息 -->
|
||
<div class="payment-section">
|
||
<h4>附件信息</h4>
|
||
<div class="upload-wrapper">
|
||
<el-upload
|
||
class="upload-area"
|
||
action="#"
|
||
:http-request="uploadPaymentAttachment"
|
||
:file-list="paymentFileList"
|
||
:before-upload="beforePaymentUpload"
|
||
multiple
|
||
:limit="10">
|
||
<el-button size="small" type="primary">添加附件</el-button>
|
||
<div slot="tip" class="el-upload__tip">只能上传jpg/png/pdf文件，且不超过5MB</div>
|
||
</el-upload>
|
||
</div>
|
||
|
||
<el-table v-if="paymentFileList.length > 0" :data="paymentFileList" border style="width: 100%; margin-top: 15px">
|
||
<el-table-column prop="name" label="文件名" min-width="200" show-overflow-tooltip></el-table-column>
|
||
<el-table-column label="操作" width="150" align="center">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" type="text" @click="previewPaymentFile(scope.row)">预览</el-button>
|
||
<el-button size="mini" type="text" class="delete-btn" @click="deletePaymentFile(scope.$index)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="paymentDialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="submitPayment" :loading="paymentSubmitting">确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getBillDetail, getBillAttachmentList, deleteBillAttachment, getBillAdjustmentList, addBillAdjustment, voidBillAdjustment, uploadBillAdjustmentAttachment, uploadBillAttachment, getBillAdjustmentAttachmentList, deleteBillAdjustmentAttachment, getBillOperationRecords, submitBillPayment, uploadBillPaymentAttachment, deleteBillPaymentAttachment } from '@/api/finance'
|
||
|
||
export default {
|
||
name: 'BillDetail',
|
||
props: {
|
||
billId: {
|
||
type: [Number, String],
|
||
required: true
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
activeTab: 'basicInfo',
|
||
loading: false,
|
||
billDetail: {},
|
||
billDetailsList: [],
|
||
roomList: [],
|
||
attachmentList: [],
|
||
operationList: [],
|
||
|
||
// 账单调整相关
|
||
adjustmentList: [],
|
||
adjustmentTotal: 0,
|
||
adjustmentQuery: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
billId: ''
|
||
},
|
||
adjustmentLoading: false,
|
||
adjustmentDialogVisible: false,
|
||
adjustmentSubmitting: false,
|
||
adjustedAmount: 0,
|
||
adjustmentForm: {
|
||
billId: '',
|
||
billDetailId: '',
|
||
adjTpCd: '1', // 默认调增
|
||
adjDate: new Date().toISOString().slice(0, 10), // 默认今天
|
||
adjMethod: '1', // 默认按金额调整
|
||
adjAmt: 0,
|
||
adjRate: 0,
|
||
billDetailType: '原账单',
|
||
adjSource: '账单直接调整',
|
||
projectId: '',
|
||
remark: '',
|
||
adjSource: '1' // 默认 账单直接调整
|
||
},
|
||
adjustmentRules: {
|
||
adjTpCd: [
|
||
{ required: true, message: '请选择调整类型', trigger: 'change' }
|
||
],
|
||
adjDate: [
|
||
{ required: true, message: '请选择调整日期', trigger: 'change' }
|
||
],
|
||
adjMethod: [
|
||
{ required: true, message: '请选择调整方式', trigger: 'change' }
|
||
],
|
||
adjAmt: [
|
||
{ required: true, message: '请输入调整金额', trigger: 'blur' }
|
||
],
|
||
adjRate: [
|
||
{ required: true, message: '请输入调整比例', trigger: 'blur' }
|
||
]
|
||
},
|
||
adjustmentFileList: [],
|
||
|
||
// 预览相关
|
||
previewDialogVisible: false,
|
||
previewLoading: false,
|
||
previewUrl: '',
|
||
previewBlob: null,
|
||
currentPreviewName: '',
|
||
isPdf: false,
|
||
isImage: false,
|
||
|
||
// 调整附件相关
|
||
adjustmentAttachmentDialogVisible: false,
|
||
adjustmentAttachmentList: [],
|
||
currentAdjustmentId: '',
|
||
|
||
// 操作记录相关
|
||
operationTotal: 0,
|
||
operationQuery: {
|
||
pageNum: 1,
|
||
pageSize: 10
|
||
},
|
||
|
||
// 支付相关
|
||
paymentDialogVisible: false,
|
||
paymentSubmitting: false,
|
||
paymentForm: {
|
||
billId: '',
|
||
billDetailId: '',
|
||
occuAmt: 0,
|
||
inaccDate: new Date().toISOString().slice(0, 10),
|
||
payModeName: '1',
|
||
txVchrNo: '',
|
||
summ: '',
|
||
remark: ''
|
||
},
|
||
paymentRules: {
|
||
occuAmt: [
|
||
{ required: true, message: '请输入本次收款金额', trigger: 'blur' }
|
||
],
|
||
inaccDate: [
|
||
{ required: true, message: '请选择入账时间', trigger: 'change' }
|
||
],
|
||
payModeName: [
|
||
{ required: true, message: '请选择支付方式', trigger: 'change' }
|
||
]
|
||
},
|
||
paymentFileList: [],
|
||
paymentMethods: [
|
||
{ value: '1', label: '现金' },
|
||
{ value: '2', label: '网银转账' },
|
||
{ value: '3', label: 'POS机' },
|
||
{ value: '4', label: '支付宝' },
|
||
{ value: '5', label: '微信' },
|
||
{ value: '6', label: '转账支票' },
|
||
{ value: '7', label: '其他方式' },
|
||
{ value: '8', label: '线上支付' }
|
||
],
|
||
remainingAmount: 0, // 剩余待收金额
|
||
}
|
||
},
|
||
created() {
|
||
this.getBillData()
|
||
},
|
||
computed: {
|
||
// 判断是否可以调整账单
|
||
canAdjustBill() {
|
||
if (!this.billDetail) return false
|
||
// 账单状态为开启且不在支付中
|
||
return this.billDetail.billStatus === '1' && this.billDetail.clearStatus !== '6'
|
||
},
|
||
// 判断是否可以支付账单
|
||
canPayBill() {
|
||
if (!this.billDetail) return false
|
||
// 账单不能是已结清，且不能在支付中
|
||
return this.billDetail.clearStatus !== '1' && this.billDetail.clearStatus !== '6'
|
||
}
|
||
},
|
||
methods: {
|
||
// 获取账单数据
|
||
getBillData() {
|
||
this.loading = true
|
||
|
||
// 获取账单详情
|
||
getBillDetail(this.billId).then(response => {
|
||
this.billDetail = response.data || {}
|
||
|
||
// 处理账单明细
|
||
this.processBillDetails()
|
||
|
||
// 设置调整查询参数的账单ID
|
||
this.adjustmentQuery.billId = this.billId
|
||
// 获取账单调整记录
|
||
this.getAdjustmentList()
|
||
|
||
// 模拟房源信息数据，实际应从接口获取或者账单详情中提取
|
||
this.roomList = this.billDetail.rooms
|
||
|
||
this.loading = false
|
||
}).catch(() => {
|
||
this.loading = false
|
||
})
|
||
|
||
// 获取附件列表
|
||
this.getAttachmentList()
|
||
|
||
// 获取操作记录
|
||
this.getOperationList()
|
||
},
|
||
// 处理账单明细数据
|
||
processBillDetails() {
|
||
this.billDetailsList = []
|
||
|
||
// 添加原始账单明细
|
||
if (this.billDetail) {
|
||
this.billDetailsList.push({
|
||
feeTypeName: this.billDetail.feTpName || '-',
|
||
receivableAmount: this.billDetail.accigRcvAmt,
|
||
taxRate: this.billDetail.taxRate || 0,
|
||
taxAmount: this.billDetail.paybleTaxAmount || 0,
|
||
startDate: this.billDetail.chggBgnDt || '-',
|
||
endDate: this.billDetail.chggEndDt || '-',
|
||
remark: this.billDetail.billRemark || '-',
|
||
billDetailType: '0' // 原账单类型
|
||
})
|
||
}
|
||
|
||
// 添加滞纳金明细（如果存在）
|
||
if (this.billDetail.ovdueStatus === '1' && this.billDetail.receivableOvdueAmt > 0) {
|
||
this.billDetailsList.push({
|
||
feeTypeName: '滞纳金',
|
||
receivableAmount: this.billDetail.receivableOvdueAmt || 0,
|
||
taxRate: 0,
|
||
taxAmount: 0,
|
||
startDate: this.billDetail.pybDt || '-', // 滞纳金产生日期，使用应收日期
|
||
endDate: this.formatDate(new Date()) || '-', // 滞纳金产生的结束日期，使用当前日期
|
||
remark: '滞纳金',
|
||
billDetailType: '1' // 滞纳金类型
|
||
})
|
||
}
|
||
},
|
||
// 格式化日期
|
||
formatDate(date) {
|
||
if (!(date instanceof Date)) return '';
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
return `${year}-${month}-${day}`;
|
||
},
|
||
// 格式化金额
|
||
formatAmount(amount) {
|
||
if (amount === undefined || amount === null) {
|
||
return '0.00'
|
||
}
|
||
return parseFloat(amount).toFixed(2) + ' 元'
|
||
},
|
||
// 获取账单来源名称
|
||
getBillSourceName(source) {
|
||
const sourceMap = {
|
||
'1': '合同账单',
|
||
'2': '收费标准账单',
|
||
'3': '自建全部账单',
|
||
'4': '自建关联合同账单',
|
||
'5': '自建未关联合同账单'
|
||
}
|
||
return sourceMap[source] || '未知来源'
|
||
},
|
||
// 获取结清状态类型
|
||
getClearStatusType(status) {
|
||
const statusMap = {
|
||
'0': 'info',
|
||
'1': 'success',
|
||
'2': 'warning',
|
||
'3': 'danger',
|
||
'5': 'primary',
|
||
'6': 'info',
|
||
'7': 'success'
|
||
}
|
||
return statusMap[status] || 'info'
|
||
},
|
||
// 获取结清状态名称
|
||
getClearStatusName(status) {
|
||
const statusMap = {
|
||
'0': '未付款',
|
||
'1': '已结清',
|
||
'2': '部分结清',
|
||
'3': '待退款',
|
||
'5': '待收款',
|
||
'6': '对账确认中',
|
||
'7': '已付款'
|
||
}
|
||
return statusMap[status] || '未知状态'
|
||
},
|
||
// 获取滞纳金状态类型
|
||
getLateFeeStatusType(status) {
|
||
const statusMap = {
|
||
'0': 'info',
|
||
'1': 'warning',
|
||
'2': 'success'
|
||
}
|
||
return statusMap[status] || 'info'
|
||
},
|
||
// 获取滞纳金状态名称
|
||
getLateFeeStatusName(status) {
|
||
const statusMap = {
|
||
'0': '无滞纳金',
|
||
'1': '有滞纳金',
|
||
'2': '滞纳金免除'
|
||
}
|
||
return statusMap[status] || '未知状态'
|
||
},
|
||
// 预览文件
|
||
previewFile(file) {
|
||
this.previewLoading = true
|
||
this.previewDialogVisible = true
|
||
this.currentPreviewName = file.fileName || '附件'
|
||
this.previewUrl = ''
|
||
this.isPdf = false
|
||
this.isImage = false
|
||
|
||
// 根据文件名后缀判断文件类型
|
||
const fileExt = file.fileName ? file.fileName.split('.').pop().toLowerCase() : ''
|
||
|
||
try {
|
||
// 创建blob对象 - 实际项目中应该调用预览API获取文件数据
|
||
fetch(file.storePath)
|
||
.then(response => response.blob())
|
||
.then(blob => {
|
||
this.previewBlob = blob
|
||
|
||
// 判断文件类型
|
||
if (fileExt === 'pdf') {
|
||
this.isPdf = true
|
||
this.isImage = false
|
||
} else if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExt)) {
|
||
this.isPdf = false
|
||
this.isImage = true
|
||
}
|
||
|
||
// 创建URL用于预览
|
||
this.previewUrl = URL.createObjectURL(blob)
|
||
this.previewLoading = false
|
||
})
|
||
.catch(error => {
|
||
console.error('预览失败', error)
|
||
this.$message.error('获取预览数据失败')
|
||
this.previewLoading = false
|
||
})
|
||
} catch (error) {
|
||
console.error('预览失败', error)
|
||
this.$message.error('获取预览数据失败')
|
||
this.previewLoading = false
|
||
}
|
||
},
|
||
|
||
// 下载当前预览的文件
|
||
downloadCurrentPreview() {
|
||
if (!this.previewBlob) {
|
||
this.$message.error('没有可下载的文件')
|
||
return
|
||
}
|
||
|
||
const url = URL.createObjectURL(this.previewBlob)
|
||
const link = document.createElement('a')
|
||
link.href = url
|
||
link.setAttribute('download', this.currentPreviewName)
|
||
document.body.appendChild(link)
|
||
link.click()
|
||
document.body.removeChild(link)
|
||
URL.revokeObjectURL(url)
|
||
},
|
||
|
||
// 下载文件
|
||
downloadFile(file) {
|
||
// 实际应调用API下载
|
||
const link = document.createElement('a')
|
||
link.href = file.storePath
|
||
link.download = file.fileName
|
||
link.click()
|
||
},
|
||
|
||
// 删除附件
|
||
deleteFile(file) {
|
||
this.$confirm('确认删除该附件?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
deleteBillAttachment(file.id).then(response => {
|
||
if (response.code === '0000000000000000') {
|
||
this.$message.success('删除成功')
|
||
// 重新获取附件列表
|
||
this.getAttachmentList()
|
||
} else {
|
||
this.$message.error(response.message || '删除失败')
|
||
}
|
||
}).catch(() => {
|
||
this.$message.error('删除失败')
|
||
})
|
||
}).catch(() => {})
|
||
},
|
||
|
||
// 获取附件列表
|
||
getAttachmentList() {
|
||
getBillAttachmentList(this.billId).then(response => {
|
||
this.attachmentList = response.data || []
|
||
})
|
||
},
|
||
// 获取账单调整记录
|
||
getAdjustmentList() {
|
||
this.adjustmentLoading = true
|
||
getBillAdjustmentList({
|
||
...this.adjustmentQuery,
|
||
billId: this.billId
|
||
}).then(response => {
|
||
if (response.code === '0000000000000000') {
|
||
this.adjustmentList = response.data.list || []
|
||
this.adjustmentTotal = response.data.total || 0
|
||
} else {
|
||
this.$message.error(response.message || '获取账单调整记录失败')
|
||
this.adjustmentList = []
|
||
this.adjustmentTotal = 0
|
||
}
|
||
this.adjustmentLoading = false
|
||
}).catch(() => {
|
||
this.adjustmentList = []
|
||
this.adjustmentTotal = 0
|
||
this.adjustmentLoading = false
|
||
})
|
||
},
|
||
// 账单调整分页大小变化
|
||
handleAdjustmentSizeChange(val) {
|
||
this.adjustmentQuery.pageSize = val
|
||
this.getAdjustmentList()
|
||
},
|
||
// 账单调整页码变化
|
||
handleAdjustmentCurrentChange(val) {
|
||
this.adjustmentQuery.pageNum = val
|
||
this.getAdjustmentList()
|
||
},
|
||
// 查看账单调整详情
|
||
viewAdjustmentDetail(row) {
|
||
this.adjustmentAttachmentDialogVisible = true
|
||
this.adjustmentAttachmentList = []
|
||
this.currentAdjustmentId = row.id
|
||
this.getAdjustmentAttachmentList()
|
||
},
|
||
// 进行账单调整
|
||
handleAdjustment(row = null) {
|
||
this.adjustmentDialogVisible = true
|
||
this.adjustmentForm.billId = this.billId
|
||
this.adjustmentForm.billDetailId = this.billDetail.billDetails && this.billDetail.billDetails.length > 0
|
||
? this.billDetail.billDetails[0].id
|
||
: ''
|
||
this.adjustmentForm.projectId = this.billDetail.projectId || ''
|
||
|
||
// 设置账单明细类型
|
||
if (row && row.billDetailType) {
|
||
this.adjustmentForm.billDetailType = row.billDetailType
|
||
} else {
|
||
this.adjustmentForm.billDetailType = '0' // 默认原账单
|
||
}
|
||
|
||
// 预设调整金额为0，方便用户输入
|
||
this.adjustmentForm.adjAmt = 0
|
||
this.adjustmentForm.adjRate = 0
|
||
this.calculateAdjustAmount()
|
||
},
|
||
// 调整方式变更
|
||
handleAdjMethodChange() {
|
||
// 重新计算调整后金额
|
||
this.calculateAdjustAmount()
|
||
},
|
||
// 计算调整后金额
|
||
calculateAdjustAmount() {
|
||
const originalAmount = parseFloat(this.billDetail.accigRcvAmt || 0)
|
||
let adjustmentValue = 0
|
||
|
||
if (this.adjustmentForm.adjMethod === '1') {
|
||
adjustmentValue = parseFloat(this.adjustmentForm.adjAmt || 0)
|
||
} else if (this.adjustmentForm.adjMethod === '2') {
|
||
// 按比例计算调整金额
|
||
adjustmentValue = originalAmount * parseFloat(this.adjustmentForm.adjRate || 0) / 100
|
||
}
|
||
|
||
// 根据调整类型计算最终金额
|
||
if (this.adjustmentForm.adjTpCd === '1') { // 调增
|
||
this.adjustedAmount = originalAmount + adjustmentValue
|
||
} else { // 调减
|
||
this.adjustedAmount = Math.max(0, originalAmount - adjustmentValue)
|
||
}
|
||
},
|
||
// 上传附件前检查
|
||
beforeAdjustmentUpload(file) {
|
||
const isValidType = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'application/pdf'
|
||
const isLt5M = file.size / 1024 / 1024 < 5
|
||
|
||
if (!isValidType) {
|
||
this.$message.error('只能上传JPG/PNG/PDF格式的文件!')
|
||
}
|
||
|
||
if (!isLt5M) {
|
||
this.$message.error('文件大小不能超过5MB!')
|
||
}
|
||
|
||
return isValidType && isLt5M
|
||
},
|
||
// 上传调整附件
|
||
uploadAdjustmentAttachment(options) {
|
||
const file = options.file
|
||
|
||
// 创建临时URL供预览
|
||
const tempUrl = URL.createObjectURL(file)
|
||
|
||
// 向上传列表中添加文件
|
||
this.adjustmentFileList.push({
|
||
name: file.name,
|
||
file: file,
|
||
url: tempUrl,
|
||
status: 'ready'
|
||
})
|
||
},
|
||
// 预览调整附件
|
||
previewAdjustmentFile(file) {
|
||
this.previewLoading = true
|
||
this.previewDialogVisible = true
|
||
this.currentPreviewName = file.name || '附件'
|
||
this.previewUrl = ''
|
||
this.isPdf = false
|
||
this.isImage = false
|
||
|
||
// 根据文件名后缀判断文件类型
|
||
const fileExt = file.name ? file.name.split('.').pop().toLowerCase() : ''
|
||
|
||
try {
|
||
// 获取文件内容
|
||
const blob = file.file ? file.file : new Blob()
|
||
this.previewBlob = blob
|
||
|
||
// 设置文件类型标志
|
||
if (fileExt === 'pdf') {
|
||
this.isPdf = true
|
||
} else if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExt)) {
|
||
this.isImage = true
|
||
}
|
||
|
||
// 创建URL用于预览
|
||
this.previewUrl = file.url
|
||
this.previewLoading = false
|
||
} catch (error) {
|
||
console.error('预览失败', error)
|
||
this.$message.error('获取预览数据失败')
|
||
this.previewLoading = false
|
||
}
|
||
},
|
||
// 删除调整附件
|
||
deleteAdjustmentFile(index) {
|
||
this.adjustmentFileList.splice(index, 1)
|
||
},
|
||
// 重置调整表单
|
||
resetAdjustmentForm() {
|
||
if (this.$refs.adjustmentForm) {
|
||
this.$refs.adjustmentForm.resetFields()
|
||
}
|
||
this.adjustmentFileList = []
|
||
this.adjustedAmount = 0
|
||
this.adjustmentForm = {
|
||
billId: '',
|
||
billDetailId: '',
|
||
adjTpCd: '1',
|
||
adjDate: new Date().toISOString().slice(0, 10),
|
||
adjMethod: '1',
|
||
adjAmt: 0,
|
||
adjRate: 0,
|
||
billDetailType: '原账单',
|
||
adjSource: '账单直接调整',
|
||
projectId: '',
|
||
remark: '',
|
||
adjSource: '1'
|
||
}
|
||
},
|
||
// 提交账单调整
|
||
submitAdjustment() {
|
||
this.$refs.adjustmentForm.validate(valid => {
|
||
if (valid) {
|
||
this.adjustmentSubmitting = true
|
||
|
||
// 构建请求数据
|
||
const adjustmentData = { ...this.adjustmentForm }
|
||
|
||
// 如果是比例调整，需要计算实际调整金额
|
||
if (adjustmentData.adjMethod === '2') {
|
||
const originalAmount = parseFloat(this.billDetail.accigRcvAmt || 0)
|
||
adjustmentData.adjAmt = originalAmount * parseFloat(adjustmentData.adjRate || 0) / 100
|
||
}
|
||
|
||
// 提交调整
|
||
addBillAdjustment(adjustmentData)
|
||
.then(response => {
|
||
if (response.code === '0000000000000000') {
|
||
// 上传附件
|
||
if (this.adjustmentFileList.length > 0) {
|
||
this.uploadAdjustmentAttachments(response.data)
|
||
} else {
|
||
this.$message.success('账单调整成功')
|
||
this.adjustmentDialogVisible = false
|
||
// 重新获取账单信息和调整记录
|
||
this.getBillData()
|
||
this.adjustmentSubmitting = false
|
||
}
|
||
} else {
|
||
this.$message.error(response.message || '账单调整失败')
|
||
this.adjustmentSubmitting = false
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('账单调整失败', error)
|
||
this.$message.error('账单调整失败，请稍后重试')
|
||
this.adjustmentSubmitting = false
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 上传调整附件
|
||
uploadAdjustmentAttachments(adjustmentId) {
|
||
const uploadPromises = this.adjustmentFileList.map(fileItem => {
|
||
return uploadBillAdjustmentAttachment(adjustmentId, fileItem.file)
|
||
})
|
||
|
||
Promise.all(uploadPromises)
|
||
.then(() => {
|
||
this.$message.success('账单调整成功')
|
||
this.adjustmentDialogVisible = false
|
||
// 重新获取账单信息和调整记录
|
||
this.getBillData()
|
||
this.adjustmentSubmitting = false
|
||
})
|
||
.catch(error => {
|
||
console.error('附件上传失败', error)
|
||
this.$message.warning('账单调整成功，但部分附件上传失败')
|
||
this.adjustmentDialogVisible = false
|
||
// 重新获取账单信息和调整记录
|
||
this.getBillData()
|
||
this.adjustmentSubmitting = false
|
||
})
|
||
},
|
||
// 作废调整记录
|
||
voidAdjustment(row) {
|
||
this.$confirm('确定要作废此账单调整吗?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
voidBillAdjustment({
|
||
adjustmentId: row.id,
|
||
canceledDate: new Date().toISOString().slice(0, 10),
|
||
remark: '用户手动作废'
|
||
}).then(response => {
|
||
if (response.code === '0000000000000000') {
|
||
this.$message.success('作废成功')
|
||
// 重新获取账单信息和调整记录
|
||
this.getBillData()
|
||
} else {
|
||
this.$message.error(response.message || '作废失败')
|
||
}
|
||
}).catch(() => {
|
||
this.$message.error('作废失败')
|
||
})
|
||
}).catch(() => {})
|
||
},
|
||
// 上传前检查文件
|
||
beforeFileUpload(file) {
|
||
const isValidType = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'application/pdf'
|
||
const isLt5M = file.size / 1024 / 1024 < 5
|
||
|
||
if (!isValidType) {
|
||
this.$message.error('只能上传JPG/PNG/PDF格式的文件!')
|
||
}
|
||
|
||
if (!isLt5M) {
|
||
this.$message.error('文件大小不能超过5MB!')
|
||
}
|
||
|
||
return isValidType && isLt5M
|
||
},
|
||
// 上传文件
|
||
uploadFile(options) {
|
||
const file = options.file
|
||
this.$confirm('确认上传该文件?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'info'
|
||
}).then(() => {
|
||
this.$message.info('开始上传附件，请稍候...')
|
||
// 调用上传附件API
|
||
uploadBillAttachment(this.billDetail.id, file).then(response => {
|
||
if (response.code === '0000000000000000') {
|
||
this.$message.success('上传成功')
|
||
// 重新获取附件列表
|
||
this.getAttachmentList()
|
||
} else {
|
||
this.$message.error(response.message || '上传失败')
|
||
}
|
||
}).catch(() => {
|
||
this.$message.error('上传失败')
|
||
})
|
||
}).catch(() => {
|
||
// 取消上传
|
||
})
|
||
},
|
||
// 获取调整附件列表
|
||
getAdjustmentAttachmentList() {
|
||
getBillAdjustmentAttachmentList(this.currentAdjustmentId).then(response => {
|
||
if (response.code === '0000000000000000') {
|
||
this.adjustmentAttachmentList = response.data || []
|
||
} else {
|
||
this.$message.error(response.message || '获取附件列表失败')
|
||
this.adjustmentAttachmentList = []
|
||
}
|
||
}).catch(() => {
|
||
this.$message.error('获取附件列表失败')
|
||
this.adjustmentAttachmentList = []
|
||
})
|
||
},
|
||
// 删除账单调整附件
|
||
deleteAdjustmentAttachment(file) {
|
||
this.$confirm('确认删除该附件?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
deleteBillAdjustmentAttachment(file.id).then(response => {
|
||
if (response.code === '0000000000000000') {
|
||
this.$message.success('删除成功')
|
||
// 重新获取附件列表
|
||
this.getAdjustmentAttachmentList()
|
||
} else {
|
||
this.$message.error(response.message || '删除失败')
|
||
}
|
||
}).catch(() => {
|
||
this.$message.error('删除失败')
|
||
})
|
||
}).catch(() => {})
|
||
},
|
||
// 操作记录分页大小变化
|
||
handleOperationSizeChange(val) {
|
||
this.operationQuery.pageSize = val
|
||
this.getOperationList()
|
||
},
|
||
// 操作记录页码变化
|
||
handleOperationCurrentChange(val) {
|
||
this.operationQuery.pageNum = val
|
||
this.getOperationList()
|
||
},
|
||
// 获取操作记录列表
|
||
getOperationList() {
|
||
getBillOperationRecords(this.billId, this.operationQuery).then(response => {
|
||
if (response.code === '0000000000000000') {
|
||
this.operationList = response.data.list || []
|
||
this.operationTotal = response.data.total || 0
|
||
} else {
|
||
this.$message.error(response.message || '获取操作记录失败')
|
||
this.operationList = []
|
||
this.operationTotal = 0
|
||
}
|
||
}).catch(() => {
|
||
this.$message.error('获取操作记录失败')
|
||
this.operationList = []
|
||
this.operationTotal = 0
|
||
})
|
||
},
|
||
// 打开支付对话框
|
||
openPaymentDialog() {
|
||
// 重置表单
|
||
this.resetPaymentForm()
|
||
|
||
this.paymentDialogVisible = true
|
||
this.paymentForm.billId = this.billId
|
||
this.paymentForm.billDetailId = this.billDetail.billDetails && this.billDetail.billDetails.length > 0
|
||
? this.billDetail.billDetails[0].id
|
||
: ''
|
||
this.paymentForm.occuAmt = 0
|
||
this.calculateRemainingAmount()
|
||
},
|
||
// 计算剩余待收金额
|
||
calculateRemainingAmount() {
|
||
const needAmount = parseFloat(this.billDetail.needAmount || 0)
|
||
const paymentAmount = parseFloat(this.paymentForm.occuAmt || 0)
|
||
this.remainingAmount = Math.max(0, needAmount - paymentAmount)
|
||
},
|
||
// 填充全额
|
||
fillFullAmount() {
|
||
this.paymentForm.occuAmt = parseFloat(this.billDetail.needAmount || 0)
|
||
this.calculateRemainingAmount()
|
||
},
|
||
// 重置支付表单
|
||
resetPaymentForm() {
|
||
if (this.$refs.paymentForm) {
|
||
this.$refs.paymentForm.resetFields()
|
||
}
|
||
this.paymentFileList = []
|
||
this.remainingAmount = 0
|
||
this.paymentForm = {
|
||
billId: '',
|
||
billDetailId: '',
|
||
occuAmt: 0,
|
||
inaccDate: new Date().toISOString().slice(0, 10),
|
||
payModeName: '1',
|
||
txVchrNo: '',
|
||
summ: '',
|
||
remark: ''
|
||
}
|
||
},
|
||
// 上传前检查支付附件
|
||
beforePaymentUpload(file) {
|
||
const isValidType = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'application/pdf'
|
||
const isLt5M = file.size / 1024 / 1024 < 5
|
||
|
||
if (!isValidType) {
|
||
this.$message.error('只能上传JPG/PNG/PDF格式的文件!')
|
||
return false
|
||
}
|
||
|
||
if (!isLt5M) {
|
||
this.$message.error('文件大小不能超过5MB!')
|
||
return false
|
||
}
|
||
|
||
return isValidType && isLt5M
|
||
},
|
||
// 上传支付附件
|
||
uploadPaymentAttachment(options) {
|
||
const file = options.file
|
||
|
||
// 创建临时URL供预览
|
||
const tempUrl = URL.createObjectURL(file)
|
||
|
||
// 向上传列表中添加文件
|
||
this.paymentFileList.push({
|
||
name: file.name,
|
||
file: file,
|
||
url: tempUrl,
|
||
status: 'ready'
|
||
})
|
||
},
|
||
// 预览支付附件
|
||
previewPaymentFile(file) {
|
||
this.previewLoading = true
|
||
this.previewDialogVisible = true
|
||
this.currentPreviewName = file.name || '附件'
|
||
this.previewUrl = ''
|
||
this.isPdf = false
|
||
this.isImage = false
|
||
|
||
// 根据文件名后缀判断文件类型
|
||
const fileExt = file.name ? file.name.split('.').pop().toLowerCase() : ''
|
||
|
||
try {
|
||
// 获取文件内容
|
||
const blob = file.file ? file.file : new Blob()
|
||
this.previewBlob = blob
|
||
|
||
// 设置文件类型标志
|
||
if (fileExt === 'pdf') {
|
||
this.isPdf = true
|
||
} else if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExt)) {
|
||
this.isImage = true
|
||
}
|
||
|
||
// 创建URL用于预览
|
||
this.previewUrl = file.url
|
||
this.previewLoading = false
|
||
} catch (error) {
|
||
console.error('预览失败', error)
|
||
this.$message.error('获取预览数据失败')
|
||
this.previewLoading = false
|
||
}
|
||
},
|
||
// 删除支付附件
|
||
deletePaymentFile(index) {
|
||
this.paymentFileList.splice(index, 1)
|
||
},
|
||
// 提交支付
|
||
submitPayment() {
|
||
this.$refs.paymentForm.validate(valid => {
|
||
if (valid) {
|
||
// 验证支付金额
|
||
if (this.paymentForm.occuAmt <= 0) {
|
||
this.$message.error('支付金额必须大于0')
|
||
return
|
||
}
|
||
|
||
if (this.paymentForm.occuAmt > this.billDetail.needAmount) {
|
||
this.$message.error('支付金额不能超过需收金额')
|
||
return
|
||
}
|
||
|
||
this.paymentSubmitting = true
|
||
|
||
// 准备表单数据
|
||
const paymentData = {...this.paymentForm}
|
||
|
||
// 如果有附件，需要转换日期格式，后端接收Date类型
|
||
if (paymentData.inaccDate) {
|
||
// 保持字符串格式，后端会处理
|
||
}
|
||
|
||
submitBillPayment(paymentData)
|
||
.then(response => {
|
||
if (response.code === '0000000000000000') {
|
||
// 上传附件
|
||
if (this.paymentFileList.length > 0) {
|
||
this.uploadPaymentAttachments(response.data.id)
|
||
} else {
|
||
this.$message.success('账单支付成功')
|
||
this.paymentDialogVisible = false
|
||
// 重新获取账单信息
|
||
this.getBillData()
|
||
this.paymentSubmitting = false
|
||
}
|
||
} else {
|
||
this.$message.error(response.message || '账单支付失败')
|
||
this.paymentSubmitting = false
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('账单支付失败', error)
|
||
this.$message.error('账单支付失败，请稍后重试')
|
||
this.paymentSubmitting = false
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 上传支付附件
|
||
uploadPaymentAttachments(transactionId) {
|
||
if (this.paymentFileList.length === 0) {
|
||
this.$message.success('账单支付成功')
|
||
this.paymentDialogVisible = false
|
||
// 重新获取账单信息
|
||
this.getBillData()
|
||
this.paymentSubmitting = false
|
||
return
|
||
}
|
||
|
||
const uploadPromises = this.paymentFileList.map(fileItem => {
|
||
return uploadBillPaymentAttachment(transactionId, fileItem.file)
|
||
})
|
||
|
||
Promise.all(uploadPromises)
|
||
.then(() => {
|
||
this.$message.success('账单支付成功')
|
||
this.paymentDialogVisible = false
|
||
// 重新获取账单信息
|
||
this.getBillData()
|
||
this.paymentSubmitting = false
|
||
})
|
||
.catch(error => {
|
||
console.error('附件上传失败', error)
|
||
this.$message.warning('账单支付成功，但部分附件上传失败')
|
||
this.paymentDialogVisible = false
|
||
// 重新获取账单信息
|
||
this.getBillData()
|
||
this.paymentSubmitting = false
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.delete-btn {
|
||
color: #F56C6C;
|
||
}
|
||
|
||
.pagination-container {
|
||
margin-top: 20px;
|
||
text-align: right;
|
||
}
|
||
|
||
.bill-detail-container {
|
||
padding: 10px;
|
||
|
||
.bill-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
|
||
.bill-header-left {
|
||
h3 {
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.payment-form {
|
||
.el-form-item {
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.amount-input-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.fill-btn {
|
||
margin-left: 10px;
|
||
height: 32px;
|
||
padding: 8px 15px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.payment-section {
|
||
margin-bottom: 25px;
|
||
|
||
h4 {
|
||
margin: 15px 0 10px;
|
||
padding-left: 8px;
|
||
border-left: 3px solid #409EFF;
|
||
font-size: 16px;
|
||
color: #303133;
|
||
}
|
||
|
||
.el-descriptions {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.upload-wrapper {
|
||
margin-bottom: 10px;
|
||
padding: 10px;
|
||
background-color: #f9f9f9;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
|
||
.empty-data {
|
||
margin: 20px 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.bill-adjustment-container {
|
||
.operation-bar {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-bottom: 15px;
|
||
}
|
||
}
|
||
|
||
.form-hint {
|
||
margin-left: 10px;
|
||
color: #909399;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.upload-area {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.preview-container {
|
||
min-height: 500px;
|
||
max-height: 700px;
|
||
overflow: auto;
|
||
|
||
.preview-iframe {
|
||
width: 100%;
|
||
height: 500px;
|
||
border: none;
|
||
}
|
||
|
||
.preview-image {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 300px;
|
||
}
|
||
|
||
.preview-error {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 300px;
|
||
color: #909399;
|
||
|
||
i {
|
||
font-size: 48px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
p {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.preview-actions {
|
||
margin-top: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.attachment-header {
|
||
margin-bottom: 15px;
|
||
}
|
||
}
|
||
</style> |