realty/virgo.wzfrontend/console/src/components/work/bill/common/invoiceForm.vue

<template>
	<div class="hui-flex hui-dialog">
		<div class="hui-flex-box hui-dialog-content">
			<el-form ref="form" label-position="top" :model="form">
				<el-form-item label="发票名称" prop="name" :rules="[{required: true, message: '请输入发票名称'}]">
					<el-input type="text" v-model="form.name" placeholder="请输入发票名称"></el-input>
				</el-form-item>
				<el-form-item label="发票类型" prop="invoiceType" :rules="[{required: true, message: '请选择发票类型'}]">
					<el-select v-model="form.invoiceType" placeholder="请选择发票类型">
						<el-option :label="item.name" :value="item.id" v-for="(item,index) in $field.field.invoiceType"
							:key="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="发票代码" prop="code" :rules="[{required: true, message: '请输入发票代码'}]">
					<el-input type="text" v-model="form.code" placeholder="请输入发票代码"></el-input>
				</el-form-item>
				<el-form-item label="发票号码" prop="number" :rules="[{required: true, message: '请输入发票号码'}]">
					<el-input type="text" v-model="form.number" placeholder="请输入发票号码"></el-input>
				</el-form-item>
				<el-form-item label="货物名称" prop="cargoName" :rules="[{required: true, message: '请输入货物名称'}]">
					<el-input type="text" v-model="form.cargoName" placeholder="请输入货物名称"></el-input>
				</el-form-item>
				<el-form-item label="发票金额" prop="invoiceAmount" :rules="[{required: true, message: '请输入发票金额'}]">
					<el-input type="text" v-model="form.invoiceAmount" placeholder="请输入发票金额"></el-input>
				</el-form-item>
				<el-form-item label="开票日期" prop="date" :rules="[{required: true, message: '请输入开票日期'}]">
					<el-date-picker v-model="form.date" value-format="yyyy-MM-dd" type="date" placeholder="请选择开票日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="发票附件" class="hui-textarea">
					<upload ref="upload" :list="responsibility" type="insert" accept=".png, .jpg, .jpeg, .pdf"
						text="上传发票">
					</upload>
				</el-form-item>
			</el-form>
		</div>
		<div class="hui-dialog-submit">
			<el-button size="medium" @click="$emit('callback')">取 消</el-button>
			<el-button size="medium" type="primary" @click="submit" :loading="loading">保 存</el-button>
		</div>
	</div>
</template>

<script>
	import upload from '@/components/common/upload'
	import {
		insertPaymentInvoice,
		putPaymentStatus
	} from '@/httpApi/contract'
	import {
		updatePayment
	} from '@/httpApi/bill'
	export default {
		props: ['itemId', 'type'],
		data() {
			return {
				form: {
					name: '',
					invoiceType: 1,
					code: '',
					number: '',
					date: '',
					cargoName: '',
					data: '{}',
					invoiceAmount: ''
				},
				responsibility: [],
				loading: false
			}
		},
		created() {
			this.form['organizationId'] = this.$store.getters.organization.id;
			this.form[this.type + 'Id'] = this.itemId;
			if (this.type === 'payment') {
				this.form['type'] = 1;
			} else {
				this.form['type'] = 2;
			}
		},
		methods: {
			submit() {
				this.loading = true;
				this.$refs.form.validate((valid) => {
					if (valid) {
						if (this.$refs.upload.fileList.length === 0) return this.$message.warning('请上传发票');
						let postData = JSON.parse(JSON.stringify(this.form));
						postData['attachment'] = JSON.stringify(this.$refs.upload.fileList);
						insertPaymentInvoice(postData).then(res => {
							this.loading = false;
							if (res.state) {
								if (this.type === 'payment') {
									putPaymentStatus(this.itemId, 2);
								} else {
									updatePayment({
										id: this.itemId,
										status: 2
									})
								}
								this.$message.success('操作成功');
								this.$emit('callback', 'init');
							}
						})
					} else {
						this.loading = false;
						return false;
					}
				});
			}
		},
		components: {
			upload
		},
	}
</script>

<style>
</style>