ybxf-security-uniapp/pagesA/fire/unit_info/edit_unit_info/edit_unit_info.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="200" labelAlign="left">
				<view class=" flex  flex-direction width100">
					<u-form-item label="单位名称" prop="orgName" :required="true">
						<u-input v-model="formData.orgName" placeholder="必填。请输入单位名称" />
					</u-form-item>
					<u-form-item label="负责人" prop="orgCharge" :required="true">
						<u-input v-model="formData.orgCharge" placeholder="必填。请输入负责人" />
					</u-form-item>
					<u-form-item label="消防安全管理人" prop="aqglr"  :required="true">
						<u-input v-model="formData.aqglr" placeholder="请输入消防安全管理人" />
					</u-form-item>
					<u-form-item label="消防安全管理人电话		" prop="aqglrdh" :required="true">
						<u-input v-model="formData.aqglrdh" placeholder="请输入消防安全管理人电话" />
					</u-form-item>
					<u-form-item label="消防安全管理人身份证		" prop="aqglrsfz" :required="true">
						<u-input v-model="formData.aqglrsfz" placeholder="请输入消防安全管理人身份证" />
					</u-form-item>
					<u-form-item label="消防安全负责人	">
						<u-input v-model="formData.aqzrr" placeholder="请输入消防安全负责人" />
					</u-form-item>
					<u-form-item label="消防安全负责人电话	">
						<u-input v-model="formData.aqzrrdh" placeholder="请输入消防安全负责人电话" />
					</u-form-item>
					<u-form-item label="消防安全负责人身份证		">
						<u-input v-model="formData.aqzrrsfz" placeholder="请输入消防安全负责人身份证" />
					</u-form-item>
					<u-form-item label="单位传真">
						<u-input v-model="formData.dwcz" placeholder="请输入单位传真" />
					</u-form-item>
					<u-form-item label="单位电话">
						<u-input v-model="formData.dwdh" placeholder="请输入单位电话" />
					</u-form-item>
					<!-- <u-form-item label="单位等级">
						<u-input v-model="formData.dwdj" placeholder="请输入单位等级" />
					</u-form-item> -->
					<!-- <u-form-item label="单位类型" @click="
							showSex = true;
							hideKeyboard();
						">
						<u--input v-model="formData.dwxzName" disabled disabledColor="#ffffff" placeholder="单位类型">
						</u--input>
					</u-form-item> -->
					<u-form-item prop="dwdz" @click='agree_poup()'>
						<view class="address-with-icon">
							<view class="address-label">
								<view class="main-label">
									单位地址
								</view>
								<view class="address-sub-label">
									<view class="address-icon">
										<u-icon name="map-fill" color="#2979ff" size="20"></u-icon>
									</view>
									<view class="address-title">
										更新地址
									</view>
								</view>
							</view>
							<view class="address-input">
								<u-input v-model="formData.dwdz" placeholder="请输入单位地址" />
							</view>
						</view>
					</u-form-item>
					<u-form-item label="单位电子邮箱	">
						<u-input v-model="formData.dwdzyx" placeholder="请输入单位电子邮箱" />
					</u-form-item>
					<u-form-item label="监管单位类别" @click="
							showSex = true;
							hideKeyboard();
						">
						<u-input v-model="formData.dwxzName" placeholder="请输入监管单位类别" />
					</u-form-item>
					<!-- <u-form-item label="单位拼音简称">
						<u-input v-model="formData.dwpyjc" placeholder="请输入单位拼音简称" />
					</u-form-item> -->

					<u-form-item label="负责人电话">
						<u-input v-model="formData.frdbdh" placeholder="请输入负责人电话" />
					</u-form-item>
					<u-form-item label="负责人身份证">
						<u-input v-model="formData.frdbsfz" placeholder="请输入负责人身份证" />
					</u-form-item>
					<u-form-item label="归口部门">
						<u-input v-model="formData.gkbm" placeholder="请输入归口部门" />
					</u-form-item>

					<!-- 	<u-form-item label="单位成立时间">
					<u-input v-model="formData.dwclsj" placeholder="请输入单位成立时间" />
				</u-form-item> -->

					<!-- 单位成立时间  --  确认重点单位时间  --  取消重点单位时间 -->
					<u-form-item label="单位成立时间：">
						<uni-datetime-picker :show="unitTime" v-model="formData.dwclsj" type="date" closeOnClickOverlay
							@confirm="ActiveUnitTime" @cancel="unitTime = false" @change="changetime"
							@close="unitTime = false"></uni-datetime-picker>
					</u-form-item>
					<!-- 确认重点单位时间 -->
					<u-form-item label="确认重点单位时间：">
						<uni-datetime-picker :show="showtimeStart" v-model="formData.qrsj" type="date"
							closeOnClickOverlay @confirm="confirmStarttime" @cancel="showtimeStart = false"
							@change="changetime" @close="showtimeStart = false"></uni-datetime-picker>
					</u-form-item>
					<!-- 取消重点单位时间 -->
					<u-form-item label="取消重点单位时间：">
						<uni-datetime-picker :show="showtimeEnd" v-model="formData.qxsj" type="date" closeOnClickOverlay
							@confirm="confirmEndtime" @cancel="showtimeEnd = false" @change="changetime"
							@close="showtimeEnd = false"></uni-datetime-picker>
					</u-form-item>
					<u-form-item label="其他情况">
						<u-input v-model="formData.qtqk" placeholder="请输入其他情况" />
					</u-form-item>
					<u-form-item label="上级消防管辖单位" @click="
							showSuperiorFire = true;
							hideKeyboard();
						">
						<u-input v-model="formData.sjxfgxdw" placeholder="请输入上级消防管辖单位" />
					</u-form-item>
					<!-- <u-form-item label="排序号">
						<u-input v-model="formData.sort" placeholder="请输入排序号" />
					</u-form-item> -->

					<u-form-item label="行政区域">
						<u-input v-model="formData.xzqy" placeholder="请输入行政区域" />
					</u-form-item>
					<u-form-item label="单位邮政编码">
						<u-input v-model="formData.yzbm" placeholder="请输入单位邮政编码" />
					</u-form-item>
					<!-- 	<u-form-item label="消防类型	">
						<u-input v-model="formData.xflx" placeholder="请输入消防类型	" />
					</u-form-item> -->
					<u-form-item label="专兼职消防管理人">
						<u-input v-model="formData.zjzxfglr" placeholder="请输入专兼职消防管理人" />
					</u-form-item>
					<u-form-item label="专兼职消防管理人电话">
						<u-input v-model="formData.zjzxfglrdh" placeholder="请输入专兼职消防管理人电话" />
					</u-form-item>
					<u-form-item label="专兼职消防管理人身份证">
						<u-input v-model="formData.zjzxfglrsfz" placeholder="请输入专兼职消防管理人身份证" />
					</u-form-item>
					<u-form-item label="消防预案">
						<!-- 选择文件上传，limit="1则最多选择一张图片，del-icon隐藏删除按钮 -->
						<uni-file-picker v-model="formData.attId" del-icon limit="1" auto-upload file-mediatype="all"
							@select="select" @delete="deleteFile">
							<button type="primary" class="selectBtn">选择文件</button>
							<!-- 加载中 -->
							<isLodingModel v-if="loading"></isLodingModel>
						</uni-file-picker>
					</u-form-item>
					<u-form-item label="已上传消防预案" v-if="formData.xfya" labelWidth="150">
						<u-icon name="close" color="#4CB2B6" size="24" @click="closeImage()">
						</u-icon>
						<!-- #ifdef MP-WEIXIN -->
						<text style="color:#00a3f4;cursor: pointer;margin-left: 50rpx !important;"
							@click.native="viewSee(formData.xfya)">点击预览文件</text>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<a style="color:#00a3f4;cursor: pointer;margin-left: 50rpx !important;"
							@click="viewSee(formData.xfya)">点击预览文件</a>
						<!-- #endif -->
					</u-form-item>
					<!-- <u-form-item label="组织结构代码">
						<u-input v-model="formData.zzjgdm" placeholder="请输入组织结构代码" />
					</u-form-item> -->
				</view>
			</u--form>
			<u-action-sheet :show="showSex" :actions="actions" title="单位类型" @close="showSex = false"
				@select="sexSelect"></u-action-sheet>
			<u-action-sheet :show="showSuperiorFire" :actions="SuperiorFireValue" title="上级消防管辖单位"
				@close="showSuperiorFire = false" @select="SelectSuperiorFire" class="tankuang"></u-action-sheet>
		</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 {
		updateUnit, // 更新
		getOrg //获取大队列表
	} from '@/api/unit_info';
	import {
		DICT_TYPE,
		getDictDatas
	} from '@/utils/dict';
	import {
		downSee,
	} from '@/utils/common'
	import {
		getAccessToken
	} from '@/utils/auth'
	let that = null;
	import config from '@/config'
	const baseUrl = config.baseUrl
	export default {
		data() {
			return {
				SuperiorFireValue: [], //上级消防数据
				showSuperiorFire: false, //上级消防下拉是否展示
				showGender: false, //所属单位下拉框展示
				showSex: false, //所属单位
				actions: getDictDatas(DICT_TYPE.BACKEND_ORG_TYPE2), //单位类型
				unitTime: false,
				showtimeStart: false,
				showtimeEnd: false,
				title: '生成隐患',
				loading: false,
				content: '确认将此检查项目生成为隐患',
				// 自定义表单数据
				formData: {
					dwdz: '',
					dwclsj: '',
					qrsj: '',
					qxsj: '',
					attId: [],
					xfya: ''
				},
				sjxfgxdwId: '', //上级消防管辖单位id
				customRules: {
					orgName: {
						type: 'string',
						required: true,
						message: '单位名称不能为空',
						trigger: ['blur', 'change']
					},
					orgCharge: {
						type: 'string',
						required: true,
						message: '负责人不能为空',
						trigger: ['blur', 'change']
					},
					aqglr: {
						type: 'string',
						required: true,
						message: '消防安全管理人不能为空',
						trigger: ['blur', 'change']
					},
					aqglrdh: {
						// pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
						// 自定义验证函数
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							//是否符合正则 且不为空
							const reg = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/
							if(reg.test(value) && value){
								return true
							}
							return false
						},
						message: '请输入正确的电话号码',
						trigger: ['blur', 'change']
					},
					aqzrrdh: {
						// pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
						// 自定义验证函数
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							//是否符合正则 且不为空
							const reg = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/
							if(reg.test(value) && value){
								return true
							}
							return false
						},
						type: 'string',
						message: '请输入正确的电话号码',
						trigger: ['blur', 'change']
					},
					dwdh: {
						pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
						message: '请输入正确的电话号码',
						trigger: ['blur', 'change']
					},
					aqglrsfz: {
						// pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
						// 自定义验证函数
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							//是否符合正则 且不为空
							const reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/
							if(reg.test(value) && value){
								return true
							}
							return false
						},
						message: "请输入合法身份证号",
						trigger: ['blur', 'change']
					},

					aqzrrsfz: {
						pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,

						message: "请输入合法身份证号",
						trigger: ['blur', 'change']
					},
					frdbsfz: {
						pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
						message: "请输入合法身份证号",
						trigger: ['blur', 'change']
					}
				},
				screenHeight: this.$screenHeight,
				wheight: ''
			};
		},
		mounted() {
			uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
				this.wheight = data.height
			}).exec()
		},
		computed: {},
		watch: {
			loading: {
				handler(newLength, oldLength) {
					this.$modal.isLoadingModel(this.loading)
				},
				immediate: true
			}
		},
		// 在 vue页面，向起始页通过事件传递数据
		onLoad: function(option) {
			this.actions.map(i => {
				i.name = i.label;
				i.id = i.value;
			});

			var data = option.id;
			that = this;
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('acceptDataFromOpenerPage', function(val) {
				this.sjxfgxdwId = val.sjxfgxdw
				that.formData = val;
			});
			that.formData.attId = []
			//单位类型 显示传递过来的选项值
			that.actions.map(i => {
				if (that.formData.dwxz == i.value) {
					that.formData.dwxzName = i.label
				}
			});
			getOrg().then(res => {
				this.SuperiorFireValue = res.data
				console.log(this.SuperiorFireValue, 'resers');
			})
		},
		onReady() {
			this.$refs.customForm.setRules(this.customRules);
		},

		methods: {
			SelectSuperiorFire(e) {
				this.formData.sjxfgxdw = e.name
				this.sjxfgxdwId = e.id
			},
			closeImage() {
				this.formData.attId = []
				this.formData.xfya=''
				this.$forceUpdate()
			},
			//查看已上传附件
			viewSee(val) {
				downSee(val)
			},
			// 获取单位地址
			agree_poup() {
				const that = this
				uni.chooseLocation({
					success: function(res) {
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						// console.log("agree_poup this.formData", that.formData);
						that.formData.dwdz = res.address;
					}
				});
			},
			select(e) {
				// 根据所选图片的个数，多次调用上传函数
				let promises = [];
				for (let i = 0; i < e.tempFilePaths.length; i++) {
					const promise = this.uploadFiles(e.tempFilePaths, i);
					promises.push(promise);
				}
				Promise.all(promises).then(result => {});
			},
			// 上传文件函数
			async uploadFiles(tempFilePaths, i) {
				this.loading = true
				that = this;
				await uni.uploadFile({
					url: baseUrl + '/admin-api/infra/file/upload', //后端用于处理图片并返回图片地址及文件的接口
					filePath: tempFilePaths[i],
					name: 'file',
					header: {
						Authorization: 'Bearer ' + getAccessToken()
					}, //请求token
					success: res => {
						let data = JSON.parse(res.data);
						that.formData.attId[0] = data.data
						uni.showToast({
							title: '文件上传成功！'
						});
						that.loading = false
					},
					fail: () => {
						uni.showToast({
							icon: 'error',
							title: '文件上传失败！'
						});
						that.loading = false
					}
				});
			},
			// 移出图片函数
			async deleteFile(e) {
				this.formData.attId = [];
				// console.log('移除了：');
			},
			submit(ref) {
				this.$refs[ref]
					.validate()
					.then(res => {
						this.SuperiorFireValue.map(i => {
							if (this.formData.sjxfgxdw == i.name || this.formData.sjxfgxdw == i.id) {
								this.sjxfgxdwId = i.id
							}
						})
						this.formData['status'] = 0;
						this.formData.xfya = this.formData.attId.join('')
						let jsdata = {
							...this.formData
						}
						jsdata.sjxfgxdw = this.sjxfgxdwId.toString()
						jsdata = JSON.stringify(jsdata);
						console.log(jsdata, 'jsdatajsdatajsdata');
						updateUnit(jsdata).then(response => {
							console.log('response.data.msg,', response.data);
							uni.navigateBack({
								delta: 2
							});
						});
					})
					.catch(err => {
						console.log('err错误信息为：', err);
						uni.showToast({
							icon: 'none',
							title: '错误！' + err[0].message
						})
					});
			},

			// 隐藏键盘
			hideKeyboard() {
				uni.hideKeyboard();
			},
			// 单位类型
			sexSelect(e) {
				this.formData.dwxz = e.value;
				this.formData.dwlx = e.value;
				this.formData.dwxzName = e.label;
				console.log("sexSelect this.formData.dwxz=", this.formData.dwxz);
			},

			// 触底的事件
			scrolltolower() {
				// 判断是否还有下一页数据
				if (this.pageNo * this.pageSize >= this.total)
					return uni.showToast({
						title: `数据加载完毕`
					});
				// 判断是否正在请求其它数据，如果是，则不发起额外的请求
				if (this.loading) return;
				this.pageNo += 1;
				this.showCheckboxShow(this.pageNo);
			},
			// 单位成立时间
			ActiveUnitTime(e) {
				this.unitTime = false;
				console.log(e.value, e.mode);
				let value = new Date(e.value);
				// this.formData.dwclsj = uni.$u.timeFormat(e.value, 'yyyy/mm/dd');
			},
			// 开始时间
			confirmStarttime(e) {
				this.showtimeStart = false;
				console.log(e.value, e.mode);
				let value = new Date(e.value);
				this.formData.qrsj = uni.$u.timeFormat(e.value, 'yyyy/mm/dd');
			},
			changetime(e) {
				console.log('change', e);
			},
			// 结束时间
			confirmEndtime(e) {
				this.showtimeEnd = false;
				console.log(e.value, e.mode);
				let value = new Date(e.value);
				this.formData.qxsj = uni.$u.timeFormat(e.value, 'yyyy/mm/dd');
			}
		}
	};
</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],
		.u-button {
			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;
	}

	.text-Width {
		width: 380rpx;
		font-size: 30rpx;
		text-align: center;
		align-items: center;
		justify-content: center;
		display: flex;
		flex-direction: column;
		white-space: pre-wrap;
	}

	.uni-row[data-v-1d993189],
	.uni-row {
		position: relative;
		left: -100rpx;
		flex-direction: column;
		box-sizing: border-box;
	}

	.fixedButton {
		background-color: #F5F7F9;
		margin-top: 20rpx;
		width: 100vw;
	}

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

	.tankuang {}

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