ybxf-security-uniapp/pagesA/fire/archive/add_archive/add_archive1.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="100%" labelAlign="left">
				<view class=" flex  flex-direction width100">
					<u-form-item label="居民住宅区名称" prop="jmzzqmc" :required="true">
						<u-input v-model="formData.jmzzqmc" placeholder="必填。请输入居民住宅区名称" />
					</u-form-item>
					<u-form-item label="联系电话" prop="lxdh" :required="true">
						<u-input v-model="formData.lxdh" placeholder="必填。请输入联系电话" />
					</u-form-item>
					<u-form-item label="消防安全管理人" prop="xfaqglr" :required="true">
						<u-input v-model="formData.xfaqglr" placeholder="必填。请输入消防安全管理人" />
					</u-form-item>
					<!-- 	<u-form-item label="所属乡镇街道" @click="
							showSex = true;
							hideKeyboard();">
						<u--input
							v-model="formData.streetName"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择所属乡镇街道"
						></u--input>
					</u-form-item> -->
					<u-form-item label="地址"><u-input v-model="formData.dz" placeholder="请输入地址" /></u-form-item>
					<u-form-item label="居民人数	" prop="jmrs">
						<u-input v-model="formData.jmrs" placeholder="请输入居民人数" />
					</u-form-item>
					<u-form-item label="进驻时间">
						<uni-datetime-picker :show="unitTime" v-model="formData.jzsj" mode="date" closeOnClickOverlay
							@confirm="ActiveUnitTime" @cancel="unitTime = false"
							@close="unitTime = false"></uni-datetime-picker>
					</u-form-item>

					<u-form-item label="物业服务企业名称">
						<u-input v-model="formData.wymc" placeholder="请输入物业服务企业名称" />
					</u-form-item>
					<u-form-item label="消防设施器材情况 (示例:自动喷水灭火系统、)">
						<u-input v-model="formData.xfssqc" placeholder="请输入消防设施器材情况" />
					</u-form-item>
					<u-form-item label="备注">
						<u-textarea auto-height maxlength="-1" v-model="formData.remark"
							placeholder="请输入备注"></u-textarea>
					</u-form-item>
				</view>
			</u--form>
			<u-popup :show="show" mode="center" :round="15" :closeOnClickOverlay="true" @close="close">
				<view style="height: 390px;width: 350px;">
					<swiper :indicator-dots="true" class="swiper">
						<swiper-item v-for="(i, index) in actionsMaplist" :key="index">
							<u-grid :border="true">
								<u-grid-item :customStyle="{ width: 210 + 'rpx', height: 220 + 'rpx' }"
									v-for="(item, index1) in i" :index="index1" :key="index1"
									@click="info(item), (show = false)">
									<text class="grid-text">{{ item.name }}</text>
								</u-grid-item>
							</u-grid>
						</swiper-item>
					</swiper>
				</view>
			</u-popup>
		</view>
		<u-action-sheet :show="showSex" :actions="actionsStreet" title="所属街道" @close="showSex = false"
			@select="sexSelect">
			<text style="margin: 10px 20px 30px 20px; color: #303133; font-size: 15px;"
				v-for="(item,index) in actionsStreet" :key="index" @click="sexSelect(item)">{{item.name}}</text>
		</u-action-sheet>
		<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 {
		createArchive, // 创建
		getDepartment, //获取登陆人的部门信息
		streetPage
	} from '@/api/archive/index1.js';
	import {
		choiceStreet
	} from '@/utils/common.js';
	var that = null;
	export default {
		data() {
			return {
				screenHeight: this.$screenHeight,
				wheight: '',
				show: false, //所属乡镇街道
				show1: '', // 是否显示弹窗 0不显示
				showSex: false,
				actionsMaplist: [],
				actionsStreet: [],
				pageSizeStreet: 10,
				pageNoStreet: 1,
				// 每页数据量
				pageSize: 5,
				// 当前页
				pageNo: 1,
				// 数据总量
				total: 0,
				unitTime: false,
				loading: false,
				// 自定义表单数据
				formData: {
					status: '0'
				},
				// 自定义表单校验规则
				customRules: {
					jmzzqmc: {
						type: 'string',
						required: true,
						message: '居民住宅区名称不能为空',
						trigger: ['blur', 'change']
					},
					lxdh: {
						required: true,
						message: '请输入正确的电话号',
						trigger: ['blur', 'change'],
						pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
					},
					xfaqglr: {
						type: 'string',
						required: true,
						message: '消防安全管理人不能为空',
						trigger: ['blur', 'change']
					},
					jmrs: {
						type: 'number',
						message: '居住人数为数字',
						trigger: ['blur', 'change']
					},
					streetName: {
						type: 'string',
						required: true,
						message: '所属乡镇街道不能为空',
						trigger: ['blur', 'change']
					},
				}
			};
		},
		computed: {},
		mounted() {
			uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
				this.wheight = data.height
			}).exec()
		},
		// 在 vue页面，向起始页通过事件传递数据
		onLoad: function(option) {
			// // 以下内容都是为了 选择街道
			// const deptValue = uni.getStorageSync('getDepartment_key'); //所有街道
			// const deptId = uni.getStorageSync('getUserInfo_key').userInfo.deptId; //登录用户的街道id
			// var newArrar  = {};//新对象
			// // 如果存在街道id，就直接取出对应的名称
			// if(deptId){
			// 	newArrar = deptValue.find((item) => {
			// 	   if(item.id === deptId){
			// 	     this.formData.streetId = item.id;
			// 	     this.formData.streetName = item.name;
			// 	   }
			// 	 })
			// 	 // show1 ='0' 点击将不再显示弹窗
			// 	 this.show1 ='0'
			// 	 // 如果没有街道id，就获取所有街道id，选择一个街道提交
			// }else{
			// 	// 获取所有街道
			// 		// storage存储的街道值不为空就执行
			// 		if (deptValue.length > 0) {
			// 			deptValue.map(v => {
			// 				this.actions.push({
			// 					id: v.id,
			// 					name: v.name
			// 				});
			// 			});
			// 			// 如果本地storage为空就执行网络请求，获取所有部门
			// 		}else{
			// 			getDepartment({}).then(res => {
			// 				if (res.data.length > 0) {
			// 					deptValue.map(v => {
			// 						this.actions.push({
			// 							id: v.id,
			// 							name: v.name
			// 						});
			// 					});
			// 				}
			// 			})
			// 		}
			// 	this.actionsMaplist = this.splitArray(this.actions, 9);
			// }

		},
		onReady() {
			this.$refs.customForm.setRules(this.customRules);
		},
		onShow() {
			choiceStreet(this)
		},
		methods: {
			sexSelect(e) {
				this.formData.streetId = e.id
				this.formData.streetName = e.name
				this.showSex = false
			},
			// size每组数组多少个，如：10
			// array需要拆分的数组
			splitArray(array, size) {
				let data = [];
				for (let i = 0; i < array.length; i += size) {
					data.push(array.slice(i, i + size));
				}
				return data;
			},
			submit(ref) {
				this.$refs[ref]
					.validate()
					.then(res => {
						this.formData['status'] = 0;
						var jsdata = JSON.stringify(this.formData);
						createArchive(jsdata).then(response => {
							uni.showLoading({
								title: response.data.msg
							});
							uni.hideLoading();
							uni.navigateBack({
								delta: 1
							});
						});
					})
					.catch(err => {
						uni.showToast({
							icon: 'none',
							title: '错误！' + err[0].message
						});
					});
			},

			// 隐藏键盘
			hideKeyboard() {
				uni.hideKeyboard();
				if (this.show1 == '0') {
					this.show = false
				} else {
					this.show = true
				}
			},

			// 单位成立时间
			ActiveUnitTime(e) {
				this.unitTime = false;
				let value = new Date(e.value);
				this.formData.jzsj = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
			},

			close() {
				this.show = false;
			},
			confirm(e) {
				this.show = false;
			},
			cancel() {
				this.show = false;
			},
			change(e) {
			},
			info(e) {
				this.formData.streetId = e.id;
				this.formData.streetName = e.name;
			},


			// 回调参数为包含columnIndex、value、values

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

	body {
		background-color: #f5f7f9;
	}
   .uni-container{
	   // background-color: #f5f7f9;
   }
	.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;
	}

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

	/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;
	}

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

	.swiper {
		height: 370px;
	}

	.grid-text {
		padding-left: 15rpx;
		font-weight: 600;
		font-size: 16px;
		color: #636363;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

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

	.example {
		overflow-y: auto;
	}
</style>