realty/virgo.wzfrontend/yui_wx/pages/billInvoice/billInvoice.vue

<template>
	<view class="form-box file-form-box bill-invoice">
		<uni-forms label-position="top" :modelValue="formData">
			<uni-forms-item label="发票名称" name="name">
				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入发票名称" />
			</uni-forms-item>
			<uni-forms-item label="发票类型" name="invoiceType">
				<view class="select-box" @click="openPicker">
					<text class="select-text" v-if="formData.invoiceType">{{invoice.name}}</text>
					<text class="select-label" v-else>请选择发票类型</text>
					<uni-icons class="form-icon" type="down" size="12" color="#8c8c8c"></uni-icons>
				</view>
			</uni-forms-item>
			<uni-forms-item label="发票代码" name="code">
				<uni-easyinput type="text" v-model="formData.code" placeholder="请输入发票代码" />
			</uni-forms-item>
			<uni-forms-item label="发票号码" name="name">
				<uni-easyinput type="text" v-model="formData.number" placeholder="请输入发票号码" />
			</uni-forms-item>
			<uni-forms-item label="货物名称" name="cargoName">
				<uni-easyinput type="text" v-model="formData.cargoName" placeholder="请输入货物名称" />
			</uni-forms-item>
			<uni-forms-item label="开票日期" name="date">
				<view class="select-box" @click="openDate">
					<text class="select-text" v-if="formData.date">{{formData.date}}</text>
					<text class="select-label" v-else>请选择日期</text>
					<uni-icons class="form-icon" type="down" size="12" color="#8c8c8c"></uni-icons>
				</view>
			</uni-forms-item>
			<uni-forms-item label="发票附件">
				<upload ref="upload" accept="all" type="insert"></upload>
			</uni-forms-item>
		</uni-forms>
		<lotusCalendar :calendarData="calendarData" @returnDate="calendarChange" @closeCalendar="closeCalendar">
		</lotusCalendar>
		<uv-picker ref="picker" :columns="columns" @confirm="confirm" keyName="name" :key="columns.length"></uv-picker>
		<view class="hui-button-box">
			<view class="hui-button" @click="submit">保存</view>
		</view>
	</view>
</template>

<script>
	import upload from '@/components/common/upload.vue'
	import lotusCalendar from "@/components/Winglau14-lotusCalendar/Winglau14-lotusCalendar.vue";
	import {
		insertPaymentInvoice,
		putPaymentStatus
	} from '@/request/api/contract.js'
	import {
		updatePayment
	} from '@/request/api/bill.js'
	export default {
		data() {
			return {
				formData: {
					name: '',
					code: '',
					number: '',
					cargoName: '',
					paymentId: '',
					paymentOrdinaryId: '',
					date: '',
					invoiceType: ''
				},
				type: '',
				billId: '',
				columns: [],
				calendarData: {
					isShow: false,
					choseTime: ''
				},
				invoice: {}
			}
		},
		onShow() {
			this.columns = [this.$field.field.invoiceType];
		},
		onLoad(body) {
			this.type = body.type;
			this.billId = body.billId;
			let type = this.type == '1' ? 'paymentId' : 'paymentOrdinaryId';
			this.formData[type] = body.billId;
			this.formData['organizationId'] = this.$store.getters.organization.id;
			if (this.type == '1') {
				this.formData['cargoName'] = '房租';
				this.formData['type'] = 1;
			} else {
				this.formData['type'] = 2;
			}
		},
		methods: {
			openPicker() {
				this.$refs.picker.open();
			},
			confirm(item) {
				let invoice = item.value[0];
				this.formData.invoiceType = invoice.id;
				this.invoice = invoice;
			},
			openDate() {
				this.calendarData.isShow = true;
			},
			calendarChange(res) {
				if (res.time) {
					this.formData.date = res.time;
				}
				this.calendarData.isShow = res.isShow;
			},
			closeCalendar(res) {
				this.calendarData.isShow = res.isShow;
			},
			submit() {
				if (!this.formData.name) return this.$toast('请输入发票名称');
				if (!this.formData.invoiceType) return this.$toast('请选择发票类型');
				let attachment = this.$refs.upload.getFile();
				if (attachment.length === 0) return this.$toast('请上传发票附件');
				let postData = JSON.parse(JSON.stringify(this.formData));
				postData['attachment'] = JSON.stringify(attachment);
				insertPaymentInvoice(postData).then(res => {
					if (res.code === 200) {
						if (this.type === '1') {
							putPaymentStatus(this.billId, 2);
						} else {
							updatePayment({
								id: this.billId,
								status: 2
							})
						}
						this.$toast('操作成功');
						uni.$emit('reloadBill');
						setTimeout(() => {
							this.$navigateBack();
						}, 400)
					}
				})
			}
		},
		components: {
			upload,
			lotusCalendar
		},
	}
</script>

<style lang="scss">
	.bill-invoice {
		padding: 30rpx;
		padding-bottom: 130rpx;
	}
</style>