<template>
|
<div class="app-container">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span class="card-title">审核发票申请</span>
|
<el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回</el-button>
|
</div>
|
|
<!-- 申请信息（只读） -->
|
<el-form ref="viewForm" :model="invoice" label-width="120px" disabled>
|
<el-divider content-position="left">申请信息</el-divider>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="服务单号">
|
<el-input v-model="invoice.serviceCode" placeholder="暂无" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="开票类型">
|
<el-radio-group v-model="invoice.invoiceType">
|
<el-radio :label="1">个人</el-radio>
|
<el-radio :label="2">企业</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item label="发票抬头">
|
<el-input v-model="invoice.invoiceName" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="发票金额">
|
<el-input v-model="invoice.invoiceMoney">
|
<template slot="prepend">¥</template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="联系电话">
|
<el-input v-model="invoice.contactPhone" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20" v-if="invoice.invoiceType === 2">
|
<el-col :span="24">
|
<el-form-item label="注册地址">
|
<el-input v-model="invoice.companyAddress" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20" v-if="invoice.invoiceType === 2">
|
<el-col :span="12">
|
<el-form-item label="开户银行">
|
<el-input v-model="invoice.companyBank" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="银行账号">
|
<el-input v-model="invoice.companyBankNo" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item label="邮寄地址">
|
<el-input v-model="invoice.mailAddress" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item label="备注">
|
<el-input type="textarea" v-model="invoice.invoiceRemarks" :rows="3" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
|
<!-- 审核信息 -->
|
<el-form ref="auditForm" :model="auditForm" :rules="rules" label-width="120px">
|
<el-divider content-position="left">审核信息</el-divider>
|
|
<el-form-item label="审核结果" prop="status">
|
<el-radio-group v-model="auditForm.status" @change="handleStatusChange">
|
<el-radio :label="1">通过</el-radio>
|
<el-radio :label="2">驳回</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
|
<!-- 审核通过时上传发票 -->
|
<el-form-item
|
v-if="auditForm.status === 1"
|
label="发票文件"
|
prop="invoiceUrl"
|
:rules="[{ required: true, message: '请上传发票文件', trigger: 'change' }]"
|
>
|
<el-upload
|
class="upload-demo"
|
:action="uploadAction"
|
:headers="uploadHeaders"
|
:on-success="handleUploadSuccess"
|
:on-error="handleUploadError"
|
:before-upload="beforeUpload"
|
:file-list="fileList"
|
:limit="1"
|
accept=".pdf,.jpg,.jpeg,.png"
|
>
|
<el-button size="small" type="primary">点击上传</el-button>
|
<div slot="tip" class="el-upload__tip">支持PDF、JPG、PNG格式，且不超过10MB</div>
|
</el-upload>
|
<div v-if="auditForm.invoiceUrl" style="margin-top: 10px;">
|
<el-link type="primary" :href="auditForm.invoiceUrl" target="_blank">查看已上传发票</el-link>
|
</div>
|
</el-form-item>
|
|
<el-form-item v-if="auditForm.status === 1" label="发票编号" prop="invoiceNo">
|
<el-input v-model="auditForm.invoiceNo" placeholder="请输入发票编号" />
|
</el-form-item>
|
|
<!-- 驳回时必填驳回原因 -->
|
<el-form-item
|
label="审核备注"
|
prop="auditRemarks"
|
:rules="auditForm.status === 2 ? [{ required: true, message: '请输入驳回原因', trigger: 'blur' }] : []"
|
>
|
<el-input
|
type="textarea"
|
v-model="auditForm.auditRemarks"
|
:rows="4"
|
:placeholder="auditForm.status === 2 ? '请输入驳回原因（必填）' : '请输入审核意见（可选）'"
|
/>
|
</el-form-item>
|
</el-form>
|
|
<!-- 操作按钮 -->
|
<div class="action-bar">
|
<el-button @click="goBack">取 消</el-button>
|
<el-button type="primary" @click="submitAudit" :loading="submitting">提交审核</el-button>
|
</div>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
import { getInvoice, updateInvoice } from "@/api/system/invoice";
|
import { getToken } from "@/utils/auth";
|
import { Message } from 'element-ui';
|
|
export default {
|
name: "InvoiceAudit",
|
data() {
|
return {
|
// 发票信息
|
invoice: {},
|
// 审核表单
|
auditForm: {
|
invoiceId: null,
|
status: 1,
|
invoiceNo: null,
|
invoiceUrl: null,
|
auditRemarks: null
|
},
|
// 上传相关
|
uploadAction: process.env.VUE_APP_BASE_API + "/common/upload",
|
uploadHeaders: { Authorization: "Bearer " + getToken() },
|
fileList: [],
|
// 提交状态
|
submitting: false,
|
// 表单验证
|
rules: {
|
status: [{ required: true, message: "请选择审核结果", trigger: "change" }]
|
}
|
};
|
},
|
created() {
|
const invoiceId = this.$route.query.invoiceId;
|
if (invoiceId) {
|
this.getDetail(invoiceId);
|
} else {
|
this.$modal.msgError("缺少发票ID参数");
|
this.goBack();
|
}
|
},
|
methods: {
|
/** 获取发票详情 */
|
getDetail(invoiceId) {
|
getInvoice(invoiceId).then(response => {
|
this.invoice = response.data;
|
this.auditForm.invoiceId = response.data.invoiceId;
|
|
// 如果已有发票文件，显示在文件列表中
|
if (response.data.invoiceUrl) {
|
this.auditForm.invoiceUrl = response.data.invoiceUrl;
|
this.fileList = [{
|
name: '已上传发票',
|
url: response.data.invoiceUrl
|
}];
|
}
|
}).catch(() => {
|
this.$modal.msgError("获取发票详情失败");
|
this.goBack();
|
});
|
},
|
|
/** 状态变化处理 */
|
handleStatusChange(value) {
|
// 切换状态时清空审核备注
|
this.auditForm.auditRemarks = '';
|
},
|
|
/** 文件上传前验证 */
|
beforeUpload(file) {
|
const isLt10M = file.size / 1024 / 1024 < 10;
|
if (!isLt10M) {
|
Message.error('上传文件大小不能超过 10MB!');
|
return false;
|
}
|
const fileType = file.type;
|
const isPDF = fileType === 'application/pdf';
|
const isImage = fileType.startsWith('image/');
|
if (!isPDF && !isImage) {
|
Message.error('只能上传PDF或图片文件!');
|
return false;
|
}
|
return true;
|
},
|
|
/** 文件上传成功 */
|
handleUploadSuccess(response, file, fileList) {
|
if (response.code === 200) {
|
this.auditForm.invoiceUrl = response.url || response.fileName;
|
this.fileList = fileList;
|
Message.success('上传成功');
|
} else {
|
Message.error(response.msg || '上传失败');
|
}
|
},
|
|
/** 文件上传失败 */
|
handleUploadError(err, file, fileList) {
|
Message.error('上传失败，请重试');
|
console.error(err);
|
},
|
|
/** 提交审核 */
|
submitAudit() {
|
this.$refs["auditForm"].validate(valid => {
|
if (valid) {
|
// 审核通过时必须上传发票
|
if (this.auditForm.status === 1 && !this.auditForm.invoiceUrl) {
|
this.$modal.msgError('审核通过时必须上传发票文件');
|
return;
|
}
|
// 驳回时必须填写驳回原因
|
if (this.auditForm.status === 2 && !this.auditForm.auditRemarks) {
|
this.$modal.msgError('驳回时必须填写驳回原因');
|
return;
|
}
|
|
this.submitting = true;
|
updateInvoice(this.auditForm).then(response => {
|
this.$modal.msgSuccess("审核成功");
|
this.goBack();
|
}).catch(() => {
|
this.submitting = false;
|
});
|
}
|
});
|
},
|
|
/** 返回列表 */
|
goBack() {
|
this.$tab.closePage();
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.card-title {
|
font-size: 18px;
|
font-weight: bold;
|
color: #303133;
|
}
|
|
.action-bar {
|
border-top: 1px solid #EBEEF5;
|
padding-top: 20px;
|
text-align: center;
|
}
|
|
::v-deep .el-form-item__label {
|
font-weight: 500;
|
}
|
|
::v-deep .el-divider__text {
|
font-size: 16px;
|
font-weight: bold;
|
color: #409EFF;
|
}
|
</style>
|
