yd_qycpfb/jp-mobile/pages/buildEditcf/buildEditcf.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() {},
		data() {
			return {
				title: '新建楼宇信息',
				inputForm: {
					"id": "23082c03aeb4464ea1b4577125a56767",
					"createDate": "2024-12-17 17:52:47",
					"createBy": {
						"id": "1506167921787850753",
						"admin": false,
						"roleIdList": [],
						"roleIds": "",
						"postIdList": [],
						"roleNames": ""
					},
					"updateDate": "2024-12-19 11:39:38",
					"updateBy": {
						"id": "1",
						"admin": false,
						"roleIdList": [],
						"roleIds": "",
						"postIdList": [],
						"roleNames": ""
					},
					"delFlag": 0,
					"parkManagement": {
						"id": "c8c61706e1e3430ca4fdd8413e7b6704",
						"parkName": "人工智能港",
						"propertyPerson": "洪晶晶",
						"propertyPhone": "13515140456"
					},
					"buildingName": "B3",
					"buildingLongitude": "120.11693",
					"buildingLatitude": "33.328376",
					"buildingContacts": "吉祥",
					"buildingDescribe": "",
					"buildingNum": "8",
					"buildingArea": "8081",
					"buildingIndustry": "",
					"placeSelectName": "盐城市/盐都区",
					"place": "320900/320903/320903004",
					"street": "1",
					"placeDetailed": "",
					"placeSelectType3": "320900",
					"placeSelectType4": "320903",
					"placeSelectType5": "320903004",
					"picture": "",
					"notes": "",
					"reserve2": "13813223933",
					"reserve3": "",
					"reserve4": "1",
					"reserve9": "00003"
				},
				autoUpload: false,
				picLists: [],
				picUrl: [],
				imageStyles: {
					width: 90,
					height: 90
				},
				parkList: [],
				ischeck: false,
			}
		},
		created() {},
		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 = "修改楼宇信息";
			}

		},
		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>