ybxf-security-uniapp/pagesA/fire/fire_device/edit_device/edit_device.vue

<template>
	<view class=" uni-container">
		<view class="example container" :style="'height: ' + (screenHeight - wheight - 75) + 'px'">
			<!-- 自定义表单校验 1-->
			<u--form ref="customForm" :model="formData" labelPosition="left" labelWidth="150" labelAlign="left">
				<view class=" flex  flex-direction width100">
					<u-form-item label="设施名称	" prop="fpdName" :required="true">
						<u-input v-model="formData.fpdName" placeholder="必填。请输入设施名称" />
					</u-form-item>
					<u-form-item label="所属单位" @click="
							showSex5 = true;
							hideKeyboard();
						" :required="true" prop="orgName">
						<u--input v-model="formData.orgName" disabled disabledColor="#ffffff" placeholder="请选择所属单位">
						</u--input>
					</u-form-item>
					<u-form-item label="设施编号	" prop="fpdCode">
						<u-input v-model="formData.fpdCode" placeholder="请输入设施编号	" />
					</u-form-item>
					<u-form-item label="设施二维码">
						<img :src="formData.fpdQcode" alt="设施二维码" style='width: 300upx;height: 300upx;'
							@click="viewImageBig(formData.fpdQcode)">
					</u-form-item>

					<!-- 					<u-form-item label="设备状态" @click="
							showSex4 = true;
							hideKeyboard();
						">
						<u--input v-model="fpdStatus" disabled disabledColor="#ffffff" placeholder="请选择设备状态"></u--input>
					</u-form-item> -->

					<u-form-item label="所在位置	" prop="fpdLocal">
						<u-input v-model="formData.fpdLocal" placeholder="请输入所在位置" />
					</u-form-item>
					<u-form-item label="所属建筑" @click="
					showBuilding = true;
					hideKeyboard();
				">
						<u-input v-model="formData.buildingName" placeholder="请输入所属建筑" />
					</u-form-item>
					<u-form-item label="设施类别" prop="fpdType" @click="
							showSex = true;
							hideKeyboard();
						">
						<u--input v-model="formData.fpdTypeName" disabled disabledColor="#ffffff" placeholder="请选择设施类别">
						</u--input>
					</u-form-item>
				</view>
				<view class="show-title">
					<view class="paizhao">现场照片:<text style="color:#822e2e;"></text></view>
					<view class="">
						<image :src="photograph" @click="photoUpload()" class="tiantupian"></image>
					</view>
					<view>
						拍照上传
					</view>
					<uni-load-more v-show="loading" status="loading" :content-text="contentText" />
				</view>
				<view class="uni-grid-wraps" v-if="formData.picVOList">
					<view v-for="(items,indexs) in formData.picVOList" :key="indexs">
						<view style="display:flex;align-items:center;justify-content:space-between;">
							<view style="position: relative;width: 180rpx;float: left;margin: 10rpx 15rpx 0 0rpx;">
								<image :src="items.url" @click="viewImageBig(items.url)"
									style="width: 160rpx;height: 160rpx;border-radius: 30rpx;float: left;">
									<u-icon name="close" color="#4CB2B6" size="19" @click="closeImage(items,indexs)">
									</u-icon>
							</view>
							<view class="">
								<view>
									图片名称
								</view>
								<view style="margin-top:20rpx">
									<u-input v-model="items.picname" placeholder="请输入图片名称" />
								</view>
							</view>
						</view>
					</view>

				</view>

			</u--form>
			<u-action-sheet :show="showSex" :actions="actions2" title="设施类别" @close="showSex = false"
				@select="sexSelect2"></u-action-sheet>
			<u-action-sheet :show="showSex4" :actions="actions4" title="设备状态" @close="showSex4 = false"
				@select="sexSelect4"></u-action-sheet>
			<u-action-sheet :show="showSex5" :actions="actions5" title="请选择单位" @close="showSex5 = false"
				@select="sexSelect5"></u-action-sheet>
			<u-action-sheet :show="showBuilding" :actions="buildingData" title="请选择所属建筑" @close="showBuilding = false"
				@select="buildingSelect"></u-action-sheet>
			<!-- 加载中 -->
			<!-- <isLodingModel></isLodingModel> -->
		</view>
		<uni-row class="heigthButton">
			<u-button @click="submit('customForm')" type="primary" shape="circle" size="large" color="#4CB2B6"
				text="确认修改"></u-button>
		</uni-row>
	</view>
</template>
<script>
	import {
		updateDevice, //获取消防设施列表
		getOrgId,
		fpdGet
	} from '@/api/fire_device';
	import {
		DICT_TYPE,
		getDictDatas
	} from '@/utils/dict';
	import config from '@/config'
	import {
		getAccessToken
	} from '@/utils/auth'
	import {
		getArc, //获取建筑信息列表
	} from '@/api/architecture';
	import loadImage from 'blueimp-load-image';
	const baseUrlImg = config.baseUrlImg
	const baseUrl = config.baseUrl
	let that = null;
	export default {
		data() {
			return {
				showBuilding: false,
				buildingData: [],
				contentText: {
					contentrefresh: '上传照片中',
				},
				screenHeight: this.$screenHeight,
				wheight: '',
				photograph: `${baseUrlImg}/checkActive/photograph.png`,
				showSex: false, //有无避难层
				showSex4: false, //设备状态
				showSex5: false, //所属单位
				actions2: getDictDatas(DICT_TYPE.FPD_TYPE),
				actions4: [{
					id: 0,
					name: '正常'
				}, {
					id: 1,
					name: '有问题'
				}],
				actions5: [],
				// 每页数据量
				pageSize: 5,
				// 当前页
				pageNo: 1,
				// 数据总量
				total: 0,
				// tableData数据加载中
				loading: false,
				// 自定义表单数据
				formData: {
					status: '0',
					orgName: '',
					picVOList: [],
					fpdTypeName: '',
					fpdType: ''
				},
				fileList1: [],
				// 用于显示下拉确认内容，不作为提交
				fpdStatus: '',
				// 自定义表单校验规则
				customRules: {
					fpdName: {
						type: 'string',
						required: true,
						message: '设施名称不能为空',
						trigger: ['blur', 'change']
					},

				},
			};
		},
		computed: {},
		mounted() {
			uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
				this.wheight = data.height
			}).exec()
		},
		watch: {
			loading: {
				handler(newLength, oldLength) {
					this.$modal.isLoadingModel(this.loading)
				},
				immediate: true
			}
		},
		// 在 vue页面，向起始页通过事件传递数据
		onLoad: function(option) {
			this.actions2.map(i => {
				i.name = i.label;
				i.id = i.value;
			});
			this.buildingData = JSON.parse(option.buildingData)
			this.loading = true
			// 接收传值
			var data = option.id;
			that = this;
			fpdGet({
				id: option.id
			}).then(res => {
				this.formData = res.data
				that.formData.orgName = res.data.orgDO.orgName
				this.actions2.map(i => {
					if (res.data.fpdType == i.id) {
						this.formData.fpdTypeName = i.name
						this.formData.fpdType = i.id
					}
				})
				that.buildingData.map(v => {
					if (v.id == that.formData.buildingId) {
						that.formData.buildingName = v.name
					}
				})


			})

			// const eventChannel = this.getOpenerEventChannel();
			// eventChannel.on('acceptDataFromOpenerPage', function(val) {
			// 	that.formData = val;
			// });

			// 
			if (that.formData.fpdStatus === '' || that.formData.fpdStatus === null) {
				that.fpdStatus = ''
			} else if (that.formData.fpdStatus == 0) {
				that.fpdStatus = '正常'
			} else if (that.formData.fpdStatus == 1) {
				that.fpdStatus = '有问题'
			}

			// 获取单位id
			getOrgId({
				pageNo: this.pageNo,
				pageSize: this.pageSize,
				userId: this.$store.state.user.id
			}).then(response => {
				this.loading = false
				// 取到用户对应的单位名称与id
				response.data.map(v => {
					this.actions5.push({
						id: v.id,
						name: v.orgName
					});
				});
			});
		},
		onReady() {
			this.$refs.customForm.setRules(this.customRules);
		},
		onShow() {


		},
		methods: {
			//所属建筑
			buildingSelect(e) {
				this.formData.buildingId = e.id;
				this.formData.buildingName = e.name;
			},
			viewImageBig(i) {
				let imgList = []
				imgList.push(i)
				uni.previewImage({
					urls: imgList,
					current: i
				});
			},
			// ===
			closeImage(val, index) {
				this.formData.picVOList.splice(index, 1)

			},
			photoUpload() {
				let pictures = [];
				let that = this;
				uni.chooseImage({
					sourceType: ['camera'], //实现拍照
					count: 3,
					sizeType: ['original', 'compressed'],
					// sourceType: ['album','camera'], //打开系统相册
					success(res) {
						that.loading = true
						if (Array.isArray(res.tempFilePaths)) { //从相册选择有三张的情况
							res.tempFilePaths.forEach(item => {
								loadImage(
									item,
									function(canvas) {
										canvas.toBlob(function(blob) {
											// 压缩后的 Blob 对象
											const compressedFile = blob;
											// 将压缩后的文件 `compressedFile` 转换为临时URL
											const fileUrl = URL.createObjectURL(
												compressedFile);
											uni.uploadFile({
												url: baseUrl +
													'/admin-api/infra/file/upload', //后端用于处理图片并返回图片地址的接口    
												filePath: item,
												name: 'file',
												header: {
													"Authorization": 'Bearer ' +
														getAccessToken(),
												}, //请求token
												success: (res) => {
													let imgUrl = JSON.parse(res
														.data)
													that.loading = false
													//拍照下展示的图片
													that.formData.picVOList.push({
														url: imgUrl.data,
														picname: ''
													})

													that.$forceUpdate();
													// // 返回的url
												},
												fail: () => {
													that.loading = false

												}
											})
											URL.revokeObjectURL(fileUrl);
										}, 'image/jpeg', 0.6); // 设置压缩后的图片格式为 JPEG，压缩质量为 0.6
									}, {
										canvas: true,
										maxWidth: 800
									} // 设置最大宽度为 800px
								);
							})
						}
					}
				})
			},
			submit(ref) {
				this.$refs[ref]
					.validate()
					.then(res => {
						this.formData['status'] = 0;
						this.formData.picVOList.forEach((item) => {
							// 删除除了feildname和url以外的多余字段
							Object.keys(item).forEach((key) => {
								if (key !== 'picname' && key !== 'url' && key !== 'fpdid') {
									delete item[key];
								}
							});
							// 如果feildname为空，赋值为默认名称
							if (!item.picname) {
								item.picname = '默认名称';
							}
							if (!item.fpdid) {
								item.fpdid = this.formData.id
							}
						});

						var jsdata = JSON.stringify(this.formData);

						updateDevice(jsdata).then(response => {
							uni.showLoading({
								title: response.data.msg
							});
							setTimeout(() => {

								uni.navigateBack({
									delta: 1
								})
							}, 0);
						});
					})
					.catch(err => {
						uni.showToast({
							icon: 'none',
							title: '错误！' + err[0].message
						})
					});
			},
			// 隐藏键盘
			hideKeyboard() {
				uni.hideKeyboard();
			},
			// 有无避难层
			sexSelect2(e) {
				this.formData.fpdTypeName = e.label;
				this.formData.fpdType = e.id;
			},
			// 设备状态
			sexSelect4(e) {
				this.formData.fpdStatus = e.id;
				this.fpdStatus = e.name;
			},
			// 所属单位
			sexSelect5(e) {
				this.formData.orgId = e.id;
				this.formData.orgName = e.name;
			},

			// 生成隐患弹出层   //暂存为草稿箱弹出层
			cancel() {
				this.show = false;
			},
			confirm() {
				setTimeout(() => {
					// 0.5秒后自动关闭
					this.show = false;
				}, 500);
			},

			// 触底的事件
			scrolltolower() {
				// 判断是否还有下一页数据
				if (this.pageNo * this.pageSize >= this.total)
					return uni.showToast({
						title: `数据加载完毕`
					});
				// 判断是否正在请求其它数据，如果是，则不发起额外的请求
				if (this.loading) return;
				this.pageNo += 1;
				this.showCheckboxShow(this.pageNo);
			}
		}
	};
</script>
<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: #f5f7f9;
		position: relative;
	}

	.buttomBorder {
		height: 0px;
		border: 1px dashed #cbd5e1;
	}

	/deep/ .uni-section .uni-section-header {
		padding: 0px;
	}

	/deep/ .u-form-item__body {
		font-weight: 500;
		flex-direction: column !important;
	}

	/deep/ .u-form-item__body__left__content__label {
		margin-bottom: 16rpx;
		font-size: 30rpx !important;
		color: #274647 !important;
	}

	.arrow-icon {
		//主动检查箭头
		position: absolute;
		right: 14px;
		top: 49px;
		transform: rotate(90deg);
	}

	/deep/ .u-input[data-v-fdbb9fe6],
	/deep/ .u-input.data-v-fdbb9fe6,
	/deep/ .u-input {
		background-color: #fff;
	}

	/deep/.u-button[data-v-3bf2dba7],
	/deep/.u-button.data-v-3bf2dba7,
	/deep/.u-button {
		width: 60% !important;
	}

	//弹框样式
	.btnList {
		// width: 40%;
		display: flex;

		// display:flex;
		.u-button[data-v-3bf2dba7] {
			width: 30%;
		}
	}

	/deep/ .u-popup__content {
		//弹出的宽高
		height: 100%;
	}

	/deep/ .u-form-item__body__right__message {
		//校验的文字的位置
		margin-left: 10rpx !important;
	}

	/deep/ .uicon-close {
		//关闭按钮背景色
		background-color: rgba(199, 203, 210, 0.9);
		border-radius: 10%;
	}

	.checkbox {
		.checkbox-item {
			box-sizing: border-box;
			padding-top: 40px;
		}
	}

	//侧边联动
	.page-body {
		display: flex;
		background: #fff;
		overflow: hidden;
	}

	.nav {
		display: flex;
		width: 100%;
	}

	.nav-left {
		width: 25%;
		background: #fafafa;
	}

	.nav-left-item {
		height: 100upx;
		border-right: solid 1px #f1f1f1;
		border-bottom: solid 1px #f1f1f1;
		font-size: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/deep/.nav-right-item[data-v-73caef23],
	/deep/.nav-right-item {
		display: flex;
		flex-wrap: wrap;
	}

	.nav-left-item:last-child {
		border-bottom: none;
	}

	.nav-right {
		width: 75%;
	}

	.box {
		display: block;
		overflow: hidden;
		border-bottom: 20upx solid #f3f3f3;
		/* min-height: 100vh; */
		/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
	}

	.box:last-child {
		border: none;
		// min-height: 100vh;
	}

	.nav-right-item {
		margin-top: 20px;
		// width: 28%;
		// min-height: 200upx;
		float: left;
		text-align: center;
		padding: 11upx;
		font-size: 28upx;
		background: #fff;

		/deep/.u-checkbox__icon-wrap[data-v-532d01c7],
		/deep/.u-checkbox__icon-wrap {
			//复选框的样式
			margin: 0 20rpx;
		}

		/deep/ uni-view[data-v-3d1b15f2] {
			//复选框上线的间距
			margin: 20rpx 0 !important;
		}

		// /deep/ .u-checkbox__icon-wrap--square{
		// 	margin: 20rpx;
		// }
		.u-checkbox-label--right[data-v-532d01c7],
		.u-checkbox-label--right {
			margin-right: 40rpx;
		}
	}

	.nav-right-item image {
		width: 150upx;
		height: 150upx;
	}

	.active {
		font-weight: 700;
		color: #274647;
		background: #fff;
		border-right: 0;
	}

	::-webkit-scrollbar {
		/*取消小程序的默认导航条样式*/
		width: 0;
		height: 0;
		color: transparent;
	}

	.selectBtn {
		width: 250rpx;
		margin-left: 0;
		font-size: 30rpx;
		background-color: #4cb2b6;
	}

	.tiantupian {
		width: 95rpx;
		height: 95rpx;
	}

	.example {
		overflow-y: auto;
	}

	/deep/.u-action-sheet {
		overflow-y: auto;
		height: 1000rpx;
		background-color: #fff;
	}
</style>