yd_qycpfb/jp-mobile/pages/buildEdit/buildEdit.vue

<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true" v-if="title == '新建楼宇信息'">
			<block slot="backText">返回</block>
			<block slot="content">新建楼宇信息</block>
		</cu-custom>
		<cu-custom bgColor="bg-blue" :isBack="true" v-if="title == '修改楼宇信息'">
			<block slot="backText">返回</block>
			<block slot="content">修改楼宇信息</block>
		</cu-custom>
		<cu-custom bgColor="bg-blue" :isBack="true" v-if="title == '查看楼宇信息'">
			<block slot="backText">返回</block>
			<block slot="content">查看楼宇信息</block>
		</cu-custom>
		<form @submit="formSubmit" class="cu-list menu">
			<view class="cu-form-group margin-top">
				<view class="title">
					所属园区
				</view>
				<jp-picker v-model="inputForm.parkManagement.id" rangeKey="label" rangeValue="value"
					:range="parkList" :disabled="ischeck">
				</jp-picker>
			</view>

			<view class="cu-form-group margin-top">
				<view class="title">
					<text class="red-color ">* </text> 楼宇名称
				</view>
				<input v-model="inputForm.buildingName" placeholder="请填写楼宇名称" :disabled="ischeck"></input>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">
					楼宇经度
				</view>
				<input v-model="inputForm.buildingLongitude" placeholder="请填写楼宇经度" :disabled="ischeck"></input>
			</view>

			<view class="cu-form-group margin-top">
				<view class="title">
					楼宇纬度
				</view>
				<input v-model="inputForm.buildingLatitude" placeholder="请填写楼宇纬度" :disabled="ischeck"></input>
			</view>

			<view class="cu-form-group margin-top">
				<view class="title">
					楼宇联系人
				</view>
				<input v-model="inputForm.buildingContacts" placeholder="请填写楼宇联系人" :disabled="ischeck"></input>
			</view>

			<view class="cu-form-group margin-top">
				<view class="title">
					楼宇联系人电话
				</view>
				<input v-model="inputForm.reserve2" placeholder="请填写楼宇联系人电话" :disabled="ischeck"></input>
			</view>

			<view class="cu-form-group margin-top">
				<view class="title">
					楼宇层数
				</view>
				<input v-model="inputForm.buildingNum" placeholder="请填写楼宇层数" :disabled="ischeck"></input>
			</view>

			<view class="cu-form-group margin-top">
				<view class="title">
					楼宇总面积
				</view>
				<input v-model="inputForm.buildingArea" placeholder="请填写楼宇总面积" :disabled="ischeck"></input>
			</view>

			<view class="cu-form-group margin-top">
				<view class="title">
					地点
				</view>
				<input v-model="inputForm.placeSelectName" placeholder="请填写地点" disabled="disabled"></input>
			</view>

			<view class="cu-form-group margin-top">
				<view class="title">
					街道
				</view>
				<jp-picker v-model="inputForm.street" rangeKey="label" rangeValue="value"
					:range="$dictUtils.getDictList('region_management')" :disabled="ischeck">
					<view class="picker">
						{{$dictUtils.getDictLabel('region_management', inputForm.street ,'请选择')}}
					</view>
				</jp-picker>
			</view>

			<view class="cu-form-group margin-top">
				<uni-file-picker style="margin-bottom: 10px;" limit="3" 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" :disabled="ischeck">
				</uni-file-picker>
			</view>

			<view class="cu-form-group margin-top">
				<view class="title">
					楼宇产业定位
				</view>
				<textarea v-model="inputForm.buildingIndustry" placeholder="请填写楼宇产业定位" :disabled="ischeck"></textarea>
			</view>

			<view class="cu-form-group margin-top">
				<view class="title">
					楼宇描述
				</view>
				<textarea v-model="inputForm.buildingDescribe" placeholder="请填写楼宇描述" :disabled="ischeck"></textarea>
			</view>

			<view class="cu-form-group margin-top">
				<view class="title">
					备注
				</view>
				<textarea placeholder='请填写备注' v-model="inputForm.notes" :disabled="ischeck"></textarea>
			</view>
			<view style="height: 40rpx;"></view>
			<view class="padding-xl" v-if="!ischeck">
				<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'
	import loginService from '@/api/auth/loginService.js'
	export default {
		onShow() {
			this.$auth.checkLogin()
		},
		data() {
			return {
				title: '新建楼宇信息',
				inputForm: {
					id: '',
					parkManagement: {
						id: ''
					},
					buildingName: '',
					buildingLongitude: '',
					buildingLatitude: '',
					buildingContacts: '',
					buildingDescribe: '',
					buildingNum: '',
					buildingArea: '',
					buildingIndustry: '',
					placeSelectName: '盐城市/盐都区',
					street: '',
					placeDetailed: '',
					picture: '',
					notes: '',
					reserve2: ''

				},
				autoUpload: false,
				picLists: [],
				picUrl: [],
				imageStyles: {
					width: 90,
					height: 90
				},
				parkList: [],
				ischeck: false,
			}
		},
		created() {
			this.getParkList()
		},
		mounted() {
			
		},
		async onLoad(query) {
			console.log(query, '==============>query')
			if (query && query.ischeck) {
				this.ischeck = true
				this.title = "查看楼宇信息";
			}
			if (query && query.id && !query.ischeck) {
				this.title = "修改楼宇信息";
			}
			if (query && query.id) {
				let {
					data
				} = await loginService.queryByIdBuild(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() {
				loginService.parkList({
					current: 1,
					size: 1000000,
				}).then(({
					data
				}) => {
					this.parkList = data.records.map((item) => {
						return {
							label: item.parkName,
							value: item.id
						}
					})
					console.log(this.parkList, '=============>')
				}).catch(e => {
					console.log(e)
				})
			},
			
			// 获取上传进度
			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: "buildingName",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "楼宇名称不能为空"
					},
				];
				//进行表单检查
				var formData = this.inputForm;
				var checkRes = graceChecker.check(formData, rule);
				console.log(checkRes, '===================>checkRes')
				if (checkRes) {
					uni.showLoading()
					this.inputForm.picture = [];
					this.picUrl.forEach(item => {
						this.inputForm.picture.push(item.url)
					})
					this.inputForm.picture = this.inputForm.picture.toString();
					loginService.buildSave(this.inputForm).then(({
						data
					}) => {
						uni.showToast({
							title: data,
							icon: "success"
						});
						uni.navigateTo({
							url: '/pages/buildList/buildList'
						})
					}).catch((e) => {

					})

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