|
|
|
@ -1,22 +1,32 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="app-container form-box" style="padding:20px">
|
|
|
|
|
<div class="app-container form-box" style="padding: 20px">
|
|
|
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
|
|
|
|
<el-card class="top15 ">
|
|
|
|
|
<el-card class="top15">
|
|
|
|
|
<div class="table-card">
|
|
|
|
|
<el-row type="flex" class="mt10" justify="space-around">
|
|
|
|
|
<el-col :span="8"></el-col>
|
|
|
|
|
<el-col :span="8" class="formTitle"> {{title}}</el-col>
|
|
|
|
|
<el-col :span="8" style="text-align: right;padding-right: 20px;">
|
|
|
|
|
<el-col :span="8" class="formTitle"> {{ title }}</el-col>
|
|
|
|
|
<el-col :span="8" style="text-align: right; padding-right: 20px">
|
|
|
|
|
<!-- <el-button type="primary" icon="el-icon-printer" size="mini" @click="handlePrint">打印预览</el-button> -->
|
|
|
|
|
<el-button type="primary" plain icon="el-icon-check" size="mini" @click="submitForm" v-if="!isNewShow">保存</el-button>
|
|
|
|
|
<el-button type="primary" size="mini" @click="handleBack">返回</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
plain
|
|
|
|
|
icon="el-icon-check"
|
|
|
|
|
size="mini"
|
|
|
|
|
@click="submitForm"
|
|
|
|
|
v-if="!isNewShow"
|
|
|
|
|
>保存</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button type="primary" size="mini" @click="handleBack"
|
|
|
|
|
>返回</el-button
|
|
|
|
|
>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="table-card table-card-content">
|
|
|
|
|
<el-row :gutter="20">
|
|
|
|
|
<el-col :span="8" class="line-rt pr-4">
|
|
|
|
|
<el-form-item label="上传发票" style="margin-left: -50px;">
|
|
|
|
|
<el-form-item label="上传发票" style="margin-left: -50px">
|
|
|
|
|
<UploadImgPdf :files="fileList" @onConfirm="handleImg" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
@ -24,48 +34,90 @@
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="发票类型" prop="invoiceType">
|
|
|
|
|
<el-select v-model="form.invoiceType" class="wd100" size="small" placeholder="请选择" filterable>
|
|
|
|
|
<el-option v-for="it of typeList" :key="it.value" :value="it.value" :label="it.label"></el-option>
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="form.invoiceType"
|
|
|
|
|
class="wd100"
|
|
|
|
|
size="small"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
filterable
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="it of typeList"
|
|
|
|
|
:key="it.value"
|
|
|
|
|
:value="it.value"
|
|
|
|
|
:label="it.label"
|
|
|
|
|
></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="发票代码" prop="invoiceCode">
|
|
|
|
|
<el-input size="small" v-model="form.invoiceCode" placeholder="请输入发票代码" />
|
|
|
|
|
<el-input
|
|
|
|
|
size="small"
|
|
|
|
|
v-model="form.invoiceCode"
|
|
|
|
|
placeholder="请输入发票代码"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="发票号码" prop="invoiceNum">
|
|
|
|
|
<el-input size="small" v-model="form.invoiceNum" placeholder="请输入发票号码" />
|
|
|
|
|
<el-input
|
|
|
|
|
size="small"
|
|
|
|
|
v-model="form.invoiceNum"
|
|
|
|
|
placeholder="请输入发票号码"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="开票日期" prop="invoiceDate">
|
|
|
|
|
<el-date-picker clearable v-model="form.invoiceDate" value-format="yyyy/MM/dd" class=" wd100" type="date" placeholder="选择开票日期" />
|
|
|
|
|
<el-date-picker
|
|
|
|
|
clearable
|
|
|
|
|
v-model="form.invoiceDate"
|
|
|
|
|
value-format="yyyy/MM/dd"
|
|
|
|
|
class="wd100"
|
|
|
|
|
type="date"
|
|
|
|
|
placeholder="选择开票日期"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="税额" prop="taxAmount">
|
|
|
|
|
<el-input size="small" v-model="form.taxAmount" placeholder="请输入税额" />
|
|
|
|
|
<el-input
|
|
|
|
|
size="small"
|
|
|
|
|
v-model="form.taxAmount"
|
|
|
|
|
placeholder="请输入税额"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="不含税金额" prop="excludingTaxAmount">
|
|
|
|
|
<el-input size="small" v-model="form.excludingTaxAmount" placeholder="请输入不含税金额" />
|
|
|
|
|
<el-input
|
|
|
|
|
size="small"
|
|
|
|
|
v-model="form.excludingTaxAmount"
|
|
|
|
|
placeholder="请输入不含税金额"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="价税合计" prop="totalAmount">
|
|
|
|
|
<el-input size="small" v-model="form.totalAmount" placeholder="请输入价税合计" />
|
|
|
|
|
<el-input
|
|
|
|
|
size="small"
|
|
|
|
|
v-model="form.totalAmount"
|
|
|
|
|
placeholder="请输入价税合计"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
<el-form-item label="销售方" prop="seller">
|
|
|
|
|
<el-input size="small" v-model="form.seller" placeholder="请输入销售方" />
|
|
|
|
|
<el-input
|
|
|
|
|
size="small"
|
|
|
|
|
v-model="form.seller"
|
|
|
|
|
placeholder="请输入销售方"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
@ -128,25 +180,25 @@
|
|
|
|
|
<script>
|
|
|
|
|
import { createInvoice, updateInvoice, getInvoice } from "@/api/bs/invoice";
|
|
|
|
|
import { listData } from "@/api/system/dict/data";
|
|
|
|
|
import dayjs from 'dayjs';
|
|
|
|
|
import dayjs from "dayjs";
|
|
|
|
|
export default {
|
|
|
|
|
name: '',
|
|
|
|
|
name: "",
|
|
|
|
|
components: {
|
|
|
|
|
UploadImgPdf: () => import('@/components/UploadImgPdf'),
|
|
|
|
|
UploadImgPdf: () => import("@/components/UploadImgPdf"),
|
|
|
|
|
// printHtml: () => import('./printHtml'),
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
title() {
|
|
|
|
|
return this.$route.query.id ? '修改我的发票' : '添加我的发票'
|
|
|
|
|
return this.$route.query.id ? "修改我的发票" : "添加我的发票";
|
|
|
|
|
},
|
|
|
|
|
isNewShow() {
|
|
|
|
|
return this.$route.query.isShow
|
|
|
|
|
}
|
|
|
|
|
return this.$route.query.isShow;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.handleInitList()
|
|
|
|
|
this.handleInitList();
|
|
|
|
|
if (this.$route.query.id) {
|
|
|
|
|
this.handleInitForm(this.$route.query.id)
|
|
|
|
|
this.handleInitForm(this.$route.query.id);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
@ -162,88 +214,97 @@ export default {
|
|
|
|
|
// 表单校验
|
|
|
|
|
rules: {
|
|
|
|
|
files: [{ required: true, message: "附件不能为空", trigger: "blur" }],
|
|
|
|
|
invoiceType: [{ required: true, message: "发票类型不能为空", trigger: "change" }],
|
|
|
|
|
invoiceCode: [{ required: true, message: "发票代码不能为空", trigger: "blur" }],
|
|
|
|
|
invoiceNum: [{ required: true, message: " 发票号码不能为空", trigger: "blur" }],
|
|
|
|
|
invoiceDate: [{ required: true, message: "开票日期不能为空", trigger: "blur" }],
|
|
|
|
|
invoiceType: [
|
|
|
|
|
{ required: true, message: "发票类型不能为空", trigger: "change" },
|
|
|
|
|
],
|
|
|
|
|
invoiceCode: [
|
|
|
|
|
{ required: true, message: "发票代码不能为空", trigger: "blur" },
|
|
|
|
|
],
|
|
|
|
|
invoiceNum: [
|
|
|
|
|
{ required: true, message: " 发票号码不能为空", trigger: "blur" },
|
|
|
|
|
],
|
|
|
|
|
invoiceDate: [
|
|
|
|
|
{ required: true, message: "开票日期不能为空", trigger: "blur" },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
typeList: [],
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
handleImg(list) {
|
|
|
|
|
this.fileList = list
|
|
|
|
|
this.fileList = list;
|
|
|
|
|
},
|
|
|
|
|
handleTimeChange(val) {
|
|
|
|
|
console.log('266+6', val);
|
|
|
|
|
this.$set(this.form, 'invoiceDate', dayjs(val).format('YYYY/MM/DD'))
|
|
|
|
|
console.log("266+6", val);
|
|
|
|
|
this.$set(this.form, "invoiceDate", dayjs(val).format("YYYY/MM/DD"));
|
|
|
|
|
},
|
|
|
|
|
handleInitList() {
|
|
|
|
|
listData({
|
|
|
|
|
pageNo: 1,
|
|
|
|
|
pageSize: 50,
|
|
|
|
|
dictType: 'bs_invoice_type',
|
|
|
|
|
dictType: "bs_invoice_type",
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
this.typeList = res.data.list || []
|
|
|
|
|
})
|
|
|
|
|
this.typeList = res.data.list || [];
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
handleBack() {
|
|
|
|
|
history.back()
|
|
|
|
|
history.back();
|
|
|
|
|
},
|
|
|
|
|
handleInitForm(id) {
|
|
|
|
|
getInvoice(id).then(res => {
|
|
|
|
|
getInvoice(id).then((res) => {
|
|
|
|
|
this.form = {
|
|
|
|
|
...res.data || {},
|
|
|
|
|
invoiceDate: new Date(res.data.invoiceDate)
|
|
|
|
|
}
|
|
|
|
|
this.fileList = this.form.files
|
|
|
|
|
console.log('form...', this.form);
|
|
|
|
|
...(res.data || {}),
|
|
|
|
|
invoiceDate: new Date(res.data.invoiceDate),
|
|
|
|
|
};
|
|
|
|
|
this.fileList = this.form.files;
|
|
|
|
|
console.log("form...", this.form);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
submitForm() {
|
|
|
|
|
this.$refs["form"].validate(valid => {
|
|
|
|
|
this.$refs["form"].validate((valid) => {
|
|
|
|
|
if (!valid) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
let form = {
|
|
|
|
|
...this.form,
|
|
|
|
|
files: this.fileList,
|
|
|
|
|
invoiceDate: dayjs(this.form.invoiceDate).valueOf()
|
|
|
|
|
}
|
|
|
|
|
invoiceDate: dayjs(this.form.invoiceDate).valueOf(),
|
|
|
|
|
};
|
|
|
|
|
// 修改的提交
|
|
|
|
|
if (this.form.id != null) {
|
|
|
|
|
updateInvoice(form).then(response => {
|
|
|
|
|
updateInvoice(form).then((response) => {
|
|
|
|
|
// this.form = {}
|
|
|
|
|
// this.fileList = []
|
|
|
|
|
// this.$refs.form.resetFields()
|
|
|
|
|
history.back()
|
|
|
|
|
history.back();
|
|
|
|
|
this.$modal.msgSuccess("修改成功!");
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// 添加的提交
|
|
|
|
|
createInvoice(form).then(response => {
|
|
|
|
|
createInvoice(form).then((response) => {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.form = {}
|
|
|
|
|
this.fileList = []
|
|
|
|
|
this.$refs.form.resetFields()
|
|
|
|
|
this.$modal.msgSuccess("新增成功,本页面可以重复添加发票!如需退出,请点击返回按钮!");
|
|
|
|
|
})
|
|
|
|
|
this.form = {};
|
|
|
|
|
this.fileList = [];
|
|
|
|
|
this.$refs.form.resetFields();
|
|
|
|
|
this.$modal.msgSuccess(
|
|
|
|
|
"新增成功,本页面可以重复添加发票!如需退出,请点击返回按钮!"
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
// history.back()
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
cancel() {
|
|
|
|
|
this.$emit('onCancel')
|
|
|
|
|
this.$emit("onCancel");
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
@import '@/assets/styles/form/index.scss';
|
|
|
|
|
@import "@/assets/styles/form/index.scss";
|
|
|
|
|
.my-process-designer {
|
|
|
|
|
background: #fff !important;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</style>
|
|
|
|
|