yd_qycpfb/jp-mobile/pages/revenue/RevenueForm.vue

<template>
	<view>
		<cu-custom bgColor="bg-blue" backUrl="/pages/revenue/RevenueList" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{title}}</block>
		</cu-custom>
		<form @submit="formSubmit" class="cu-list menu">
			<view class="cu-form-group margin-top">
				<view class="title">
					<text class="red-color ">* </text> 企业
				</view>
				<jp-picker v-model="inputForm.qiId" rangeKey="label" rangeValue="value" :range="parkList">
				</jp-picker>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">
					<text class="red-color ">* </text> 类别
				</view>
				<jp-picker v-model="inputForm.lb" rangeKey="label" rangeValue="value"
					:range="$dictUtils.getDictList('s_lb')">
					<view class="picker">
						{{$dictUtils.getDictLabel('s_lb', inputForm.lb ,'请选择')}}
					</view>
				</jp-picker>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">
					<text class="red-color ">* </text> 税源办
				</view>
				<jp-picker v-model="inputForm.des3" rangeKey="label" rangeValue="value"
					:range="$dictUtils.getDictList('yes_no')">
					<view class="picker">
						{{$dictUtils.getDictLabel('yes_no', inputForm.des3 ,'请选择')}}
					</view>
				</jp-picker>
			</view>
			<view class="cu-form-group margin-top" v-if="this.inputForm.des3 !=='1'">
				<view class="title">
					<text class="red-color ">* </text> 月份
				</view>
				<picker mode="date" :value="inputForm.des1" fields="month" @change="DateChange">
					<view class="picker">
						{{inputForm.des1}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group margin-top" v-if="this.inputForm.des3 ==='1'">
				<view class="title">
					<text class="red-color ">* </text> 开始月份
				</view>
				<picker mode="date" :value="inputForm.des1" fields="month" @change="DateChange">
					<view class="picker">
						{{inputForm.des1}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group margin-top" v-if="this.inputForm.des3 ==='1'">
				<view class="title">
					<text class="red-color ">* </text> 结束月份
				</view>
				<picker mode="date" :value="inputForm.des2" fields="month" @change="DateChange2">
					<view class="picker">
						{{inputForm.des2}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">
					<text class="red-color ">* </text> 金额(万元)
				</view>
				<input placeholder='请填写金额' type="digit" v-model="inputForm.amount"></input>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">
					<text class="red-color "></text> 备注
				</view>
				<textarea placeholder='请填写备注' v-model="inputForm.remark"></textarea>
			</view>
			<view class="cu-form-group margin-top">
				<uni-file-picker style="margin-bottom: 10px;" limit="9" ref="picFile" v-model="picLists"
					fileMediatype="image" mode="grid" title="图片上传" :auto-upload="autoUpload" @select="select"
					@progress="progress" @success="success" @fail="fail" @delete="deleteFile"
					:imageStyles="imageStyles">
				</uni-file-picker>
			</view>
			<view class="padding-xl">
				<button form-type="submit" class="cu-btn block bg-blue margin-tb-sm lg">提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	var graceChecker = require("@/common/graceChecker.js");
	import revenueListService from '@/api/revenue/revenueListService'
	export default {
		onShow() {
			this.$auth.checkLogin()
		},
		data() {
			return {
				title: '新建企业税收',
				inputForm: {
					id: '',
					qiId: '',
					lb: '',
					date: [new Date().getFullYear(), new Date().getMonth() + 1],
					des1: '',
					amount: '',
					remark: '',
					des2: '',
					des3: '',

				},
				autoUpload: false,
				picLists: [],
				picUrl: [],
				imageStyles: {
					width: 90,
					height: 90
				},
				parkList: [],
			}
		},
		created() {
			this.getParkList()
		},
		mounted() {
			this.inputForm.des1 = `${this.inputForm.date[0]}-${this.inputForm.date[1]}`;
			this.inputForm.des2 = `${this.inputForm.date[0]}-${this.inputForm.date[1]}`;
		},
		async onLoad(query) {
			if (query && query.id) {
				this.titile = "修改企业税收";
				let {
					data
				} = await revenueListService.queryById(query.id)
				console.log(data)
				if (data.pic != null) {
					data.pic = data.pic.split(",")
					var list = data.pic
					list.forEach(item => {
						this.picUrl.push({
							'url': item,
							'uuid': item
						})
						this.picLists.push({
							'url': item,
							'uuid': item
						})
					})
				} else {
					data.pic = []
				}
				this.inputForm = this.recover(this.inputForm, data)
			}
		},
		methods: {
			getParkList() {
				revenueListService.enterpriseList({
					current: 1,
					size: -1,
				}).then(({
					data
				}) => {
					this.parkList = data.records.map((item) => {
						return {
							label: item.name,
							value: item.id
						}
					})
					console.log(this.parkList, '=============>')
				}).catch(e => {
					console.log(e)
				})
			},
			DateChange(e) {
				this.inputForm.des1 = e.detail.value
			},
			DateChange2(e) {
				this.inputForm.des2 = e.detail.value
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},
			// 上传成功
			success(e) {
				console.log('上传成功')
			},
			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			deleteFile(e) {
				this.picUrl.splice(e.index, 1)
			},
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
				var _this = this
				var i = 0
				upload()

				function upload() {
					if (i >= e.tempFiles.length) {
						return;
					}
					var item = e.tempFiles[i]
					uni.showLoading({
						title: "上传中",
						mask: true
					});
					uni.uploadFile({
						url: '/file/upload?uploadPath=', // 仅为示例，非真实的接口地址
						filePath: item.url,
						name: 'file',
						formData: {
							'fileName': item.name
						},
						header: {
							'token': _this.$auth.getUserToken()
						},
						success: (res) => {
							var data = res.data
							if (typeof data['error'] != "undefined") {
								uni.showToast({
									icon: 'none',
									title: '上传失败，请联系开发！'
								});
								_this.$refs.picFile.clearFiles(_this.picLists.length)
							} else {
								_this.picUrl.push({
									url: data,
									uuid: item.uuid
								})
								i++;
								upload()
							}
						},
						fail: () => {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: '上传失败，请联系开发！'
							});
							_this.$refs.picFile.clearFiles(_this.picLists.length)
						},
						complete: function() {
							uni.hideLoading();
						}
					});
				}
			},
			formSubmit: function(e) {
				//定义表单规则
				var rule = [{
						name: "qiId",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "企业不能为空"
					},
					{
						name: "lb",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "类别不能为空"
					},
					{
						name: "des1",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "月份不能为空"
					},
					{
						name: "amount",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "金额不能为空"
					}
				];
				//进行表单检查
				var formData = this.inputForm;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					uni.showLoading()
					this.inputForm.pic = [];
					this.picUrl.forEach(item => {
						this.inputForm.pic.push(item.url)
					})
					this.inputForm.pic = this.inputForm.pic.toString();
					revenueListService.save(this.inputForm).then(({
						data
					}) => {
						uni.showToast({
							title: data,
							icon: "success"
						});
						uni.navigateTo({
							url: '/pages/revenue/RevenueList'
						})
					}).catch((e) => {

					})

				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			}
		}
	}
</script>
<style>
	/* .file-title) {
	    font-size: 17px !important;
	} */
</style>