<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="form" :model="form" :rules="rules" label-width="120px">
|
<!-- 任务信息展示 -->
|
<el-divider>任务信息</el-divider>
|
<el-descriptions :column="2" border v-if="taskInfo.taskId">
|
<el-descriptions-item label="任务编号">{{ taskInfo.taskCode }}</el-descriptions-item>
|
<el-descriptions-item label="服务单号">{{ taskInfo.serviceCode || taskInfo.legacyServiceOrderId || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="出发地" :span="2">{{ taskInfo.departure }}</el-descriptions-item>
|
<el-descriptions-item label="目的地" :span="2">{{ taskInfo.destination }}</el-descriptions-item>
|
<el-descriptions-item label="完成时间">{{ taskInfo.completionTime }}</el-descriptions-item>
|
<el-descriptions-item label="任务金额">
|
<span style="color: #F56C6C; font-weight: bold;">¥{{ taskInfo.transferPrice || '0.00' }}</span>
|
</el-descriptions-item>
|
</el-descriptions>
|
|
<!-- 发票信息 -->
|
<el-divider>发票信息</el-divider>
|
|
<el-form-item label="开票类型" prop="invoiceType">
|
<el-radio-group v-model="form.invoiceType">
|
<el-radio :label="1">个人</el-radio>
|
<el-radio :label="2">企业</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
|
<el-form-item label="发票抬头" prop="invoiceName">
|
<el-input v-model="form.invoiceName" placeholder="请输入发票抬头" maxlength="200" />
|
</el-form-item>
|
|
<el-form-item label="发票金额" prop="invoiceMoney">
|
<el-input
|
v-model="form.invoiceMoney"
|
placeholder="请输入发票金额"
|
type="number"
|
:max="maxInvoiceMoney"
|
>
|
<template slot="append">元</template>
|
</el-input>
|
<div v-if="maxInvoiceMoney" style="color: #909399; font-size: 12px; margin-top: 4px;">
|
可申请金额上限：¥{{ maxInvoiceMoney }}
|
</div>
|
</el-form-item>
|
|
<el-form-item label="发票备注">
|
<el-input v-model="form.invoiceRemarks" type="textarea" placeholder="请输入备注" maxlength="500" />
|
</el-form-item>
|
|
<!-- 企业信息（仅企业类型显示） -->
|
<template v-if="form.invoiceType === 2">
|
<el-divider>企业信息</el-divider>
|
|
<el-form-item label="注册地址" prop="companyAddress">
|
<el-input v-model="form.companyAddress" placeholder="请输入企业注册地址" maxlength="200" />
|
</el-form-item>
|
|
<el-form-item label="开户银行" prop="companyBank">
|
<el-input v-model="form.companyBank" placeholder="请输入开户银行" maxlength="100" />
|
</el-form-item>
|
|
<el-form-item label="银行账号" prop="companyBankNo">
|
<el-input v-model="form.companyBankNo" placeholder="请输入银行账号" maxlength="50" />
|
</el-form-item>
|
</template>
|
|
<!-- 邮寄信息 -->
|
<el-divider>邮寄信息</el-divider>
|
|
<el-form-item label="邮寄地址" prop="mailAddress">
|
<el-input v-model="form.mailAddress" placeholder="请输入邮寄地址" maxlength="200" />
|
</el-form-item>
|
|
<el-form-item label="邮编">
|
<el-input v-model="form.zipCode" placeholder="请输入邮编" maxlength="10" />
|
</el-form-item>
|
|
<el-form-item label="联系人" prop="contactName">
|
<el-input v-model="form.contactName" placeholder="请输入联系人" maxlength="50" />
|
</el-form-item>
|
|
<el-form-item label="联系电话" prop="contactPhone">
|
<el-input v-model="form.contactPhone" placeholder="请输入联系电话" maxlength="20" />
|
</el-form-item>
|
|
<el-form-item label="联系邮箱">
|
<el-input v-model="form.contactEmail" placeholder="请输入联系邮箱" maxlength="100" />
|
</el-form-item>
|
</el-form>
|
|
<div class="action-bar" style="margin-top: 20px; text-align: center;">
|
<el-button @click="goBack">取消</el-button>
|
<el-button type="primary" @click="submitForm">提交申请</el-button>
|
</div>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
import { addInvoice } from "@/api/system/invoice";
|
|
export default {
|
name: "InvoiceApply",
|
data() {
|
return {
|
// 任务信息
|
taskInfo: {
|
taskId: null,
|
taskCode: null,
|
legacyServiceOrderId: null,
|
serviceCode: null,
|
departure: null,
|
destination: null,
|
completionTime: null,
|
transferPrice: null
|
},
|
// 表单数据
|
form: {
|
serviceOrderId: null,
|
legacyServiceOrderId: null, // 旧系统服务单ID
|
invoiceType: 1,
|
invoiceName: null,
|
invoiceMoney: null,
|
invoiceRemarks: null,
|
companyAddress: null,
|
companyBank: null,
|
companyBankNo: null,
|
zipCode: null,
|
mailAddress: null,
|
contactName: null,
|
contactPhone: null,
|
contactEmail: null
|
},
|
// 最大发票金额
|
maxInvoiceMoney: null,
|
// 表单校验
|
rules: {
|
invoiceType: [
|
{ required: true, message: "请选择开票类型", trigger: "change" }
|
],
|
invoiceName: [
|
{ required: true, message: "请输入发票抬头", trigger: "blur" }
|
],
|
invoiceMoney: [
|
{ required: true, message: "请输入发票金额", trigger: "blur" },
|
{
|
validator: (rule, value, callback) => {
|
if (!value || value <= 0) {
|
callback(new Error('发票金额必须大于0'));
|
} else if (this.maxInvoiceMoney && parseFloat(value) > this.maxInvoiceMoney) {
|
callback(new Error(`发票金额不能超过任务金额¥${this.maxInvoiceMoney}`));
|
} else {
|
callback();
|
}
|
},
|
trigger: 'blur'
|
}
|
],
|
companyAddress: [
|
{ required: true, message: "请输入企业注册地址", trigger: "blur" }
|
],
|
companyBank: [
|
{ required: true, message: "请输入开户银行", trigger: "blur" }
|
],
|
companyBankNo: [
|
{ required: true, message: "请输入银行账号", trigger: "blur" }
|
],
|
mailAddress: [
|
{ required: true, message: "请输入邮寄地址", trigger: "blur" }
|
],
|
contactName: [
|
{ required: true, message: "请输入联系人", trigger: "blur" }
|
],
|
contactPhone: [
|
{ required: true, message: "请输入联系电话", trigger: "blur" },
|
{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }
|
]
|
}
|
};
|
},
|
created() {
|
// 从 sessionStorage 获取任务信息
|
const taskInfoStr = sessionStorage.getItem('invoiceTaskInfo');
|
if (taskInfoStr) {
|
this.taskInfo = JSON.parse(taskInfoStr);
|
this.form.serviceOrderId = this.taskInfo.taskId;
|
// 如果任务信息中有旧系统服务单ID，也要保存
|
if (this.taskInfo.legacyServiceOrderId) {
|
this.form.legacyServiceOrderId = this.taskInfo.legacyServiceOrderId;
|
}
|
|
// 设置最大发票金额
|
if (this.taskInfo.transferPrice) {
|
this.maxInvoiceMoney = parseFloat(this.taskInfo.transferPrice);
|
// 自动带入任务金额
|
this.form.invoiceMoney = this.maxInvoiceMoney;
|
}
|
|
// 清除 sessionStorage
|
sessionStorage.removeItem('invoiceTaskInfo');
|
} else if (this.$route.query.taskId) {
|
// 如果没有 sessionStorage，尝试从 query 获取
|
this.$modal.msgError("缺少任务信息，请从任务详情页进入");
|
this.goBack();
|
}
|
},
|
methods: {
|
/** 提交表单 */
|
submitForm() {
|
this.$refs["form"].validate(valid => {
|
if (valid) {
|
// 企业类型需要验证企业信息
|
if (this.form.invoiceType === 2) {
|
if (!this.form.companyAddress || !this.form.companyBank || !this.form.companyBankNo) {
|
this.$modal.msgError("请完善企业信息");
|
return;
|
}
|
}
|
|
// 再次验证金额
|
const money = parseFloat(this.form.invoiceMoney);
|
if (this.maxInvoiceMoney && money > this.maxInvoiceMoney) {
|
this.$modal.msgError(`发票金额不能超过任务金额¥${this.maxInvoiceMoney}`);
|
return;
|
}
|
|
addInvoice(this.form).then(response => {
|
this.$modal.msgSuccess("提交成功");
|
setTimeout(() => {
|
this.goBack();
|
}, 1500);
|
});
|
}
|
});
|
},
|
|
/** 返回 */
|
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;
|
}
|
</style>
|
