ybxf-security-uniapp/pagesA/fire/fire_station/add_fireStation/add_fireStation.vue

<template>
	<view class=" uni-container">
		<view class="example container" :style="'height: ' + (screenHeight - wheight - 75) + 'px'">
			<!-- 自定义表单校验 1-->
			<!-- 自定义表单校验 1-->
			<u--form ref="customForm" :model="formData" labelPosition="left" labelWidth="150" labelAlign="left">
				<view class=" flex  flex-direction width100">
					<u-form-item label="社区名称" prop="micro_name" :required="true">
						<u-input v-model="formData.microName" placeholder="请输入社区名称" />
					</u-form-item>
					<u-form-item prop="org_name" label="所属单位" @click="
							showSex5 = true;
							hideKeyboard();
						" :required="true">
						<u-input v-model="formData.org_name" disabled disabledColor="#ffffff" placeholder="请选择所属单位">
						</u-input>
					</u-form-item>
					<u-form-item label="所属区县	" prop="county">
						<u-input v-model="formData.county" placeholder="请输入所属区县" />
					</u-form-item>
					<u-form-item label="建站日期" prop="built_on">
						<!-- 		<u-button customStyle="background-color: rgba(76, 178, 182, 0.5);" plain shape="circle"
							size="small" color="#fff" @click="unitTime = true" :text="builtOn"></u-button> -->
						<uni-datetime-picker :show="unitTime" v-model="formData.builtOn" mode="date" closeOnClickOverlay
							@confirm="ActiveUnitTime" @cancel="unitTime = false" @change="changetime"
							@close="unitTime = false"></uni-datetime-picker>
					</u-form-item>
					<u-form-item label="详细地址">
						<u-input v-model="formData.addr" placeholder="请输入详细地址" />
					</u-form-item>
					<u-form-item label="控制室值班人数" prop="dutyer">
						<u-input v-model="formData.dutyer" placeholder="请输入控制室值班人数	" />
						<button @click="goWorkNum" class="manyBtn">添加值班人</button>
					</u-form-item>
					<u-form-item label="报警电话">
						<u-input v-model="formData.alarmTel" placeholder="请输入报警电话	" />
					</u-form-item>
					<u-form-item label="负责人">
						<u-input v-model="formData.charger" placeholder="请输入负责人" />
						<button @click="goBigNum" class="manyBtn">添加负责人</button>
					</u-form-item>

					<u-form-item label="人员信息" prop="members">
						<u-input v-model="formData.members" placeholder="请输入队员人数" />
						<button @click="goPeopleMes" class="manyBtn">添加人员信息</button>
					</u-form-item>

					<u-form-item label="水罐车数量" prop="waterTanker">
						<u-input v-model="formData.waterTanker" placeholder="请输入水罐车" />
					</u-form-item>
					<u-form-item label="泡沫车数量" prop="foamCar">
						<u-input v-model="formData.foamCar" placeholder="请输入泡沫车" />
					</u-form-item>
					<u-form-item label="消防摩托数量" prop="fireMoto">
						<u-input v-model="formData.fireMoto" placeholder="请输入消防摩托数量" />
					</u-form-item>
					<u-form-item label="其它数量" prop="others">
						<u-input v-model="formData.others" placeholder="请输入其它" />
					</u-form-item>
				</view>
			</u--form>
			<u-action-sheet :show="showSex5" :actions="actions5" title="请选择单位" @close="showSex5 = false"
				@select="sexSelect5"></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 {
		getOrgId,
		createStation,
	}
	from '@/api/fire_station/index';
	import config from '@/config';
	import store from '@/store';
	var that = null;
	export default {
		data() {
			return {
				screenHeight: this.$screenHeight,
				wheight: '',
				showSex: false, //有无避难层
				showSex5: false, //所属单位
				actions5: [],
				// 每页数据量
				pageSize: 5,
				// 当前页
				pageNo: 1,
				// 数据总量
				total: 0,
				unitTime: false,
				loading: false,
				title: '生成隐患',
				content: '确认将此检查项目生成为隐患',
				// 自定义表单数据
				formData: {
					status: '0',
					builtOn: '',
					membersList: []
				},
				// 自定义表单校验规则
				customRules: {
					microName: {
						type: 'string',
						required: true,
						message: '社区名称不能为空',
						trigger: ['blur', 'change']
					},
					orgName: {
						type: 'string',
						required: true,
						message: '所属单位不能为空',
						trigger: ['blur', 'change']
					},
					number: {
						type: 'number',
						message: '所填项必须为数字',
						trigger: ['blur', 'change']
					},
					dutyer: {
						type: 'number',
						message: '所填项为数字类型',
						trigger: ['blur', 'change']
					},
					members: {
						type: 'number',
						message: '所填项为数字类型',
						trigger: ['blur', 'change']
					},
					foamCar: {
						type: 'number',
						message: '所填项为数字类型',
						trigger: ['blur', 'change']
					},
					fireMoto: {
						type: 'number',
						message: '所填项为数字类型',
						trigger: ['blur', 'change']
					},
					waterTanker: {
						type: 'number',
						message: '所填项为数字类型',
						trigger: ['blur', 'change']
					},
					others: {
						type: 'number',
						message: '所填项为数字类型',
						trigger: ['blur', 'change']
					},
					newEmpList: [],
				},

			};
		},
		computed: {},
		mounted() {
			uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
				this.wheight = data.height
			}).exec()
		},
		// 在 vue页面，向起始页通过事件传递数据
		onLoad: function(option) {
			// 获取单位id
			getOrgId({
				pageNo: this.pageNo,
				pageSize: this.pageSize,
				userId: this.$store.state.user.id
			}).then(response => {
				console.log(response, 'response');
				// 取到用户对应的单位名称与id
				response.data.map(v => {
					this.actions5.push({
						id: v.dwid,
						name: v.orgName
					});
				});
			});
		},
		onReady() {
			this.$refs.customForm.setRules(this.customRules);
		},
		onShow() {
			let empList = localStorage.getItem('empList')
			empList = JSON.parse(empList)
			let pack = {
				duty: empList[0].power,
				empName: empList[0].name,
				mobile: empList[0].phone,
				idcardno: empList[0].userNum
			}
			this.newEmpList = pack
			console.log(pack, 'pack');
		},
		methods: {
			submit(ref) {
				this.$refs[ref]
					.validate()
					.then(res => {
						// 因为需要提交的数据和绑定的数据不一样，所以要转换
						this.formData['status'] = 0;
						if (this.formData.builtOn) {
							this.formData.builtOn = this.formData.builtOn
						}
						if (this.newEmpList) {
							this.formData.empList = [this.newEmpList]
						}
						var jsdata = JSON.stringify(this.formData);
						createStation(jsdata).then(response => {
							// console.log('response.data.msg,', response.data);
							uni.showLoading({
								title: response.data.msg
							});
							setTimeout(() => {
								// console.log('新增成功！');
								uni.hideLoading();
								uni.navigateBack({
									delta: 1
								})
							}, 0);
						});
					})
					.catch(err => {
						// console.log('err错误信息为：', err);
						uni.showToast({
							icon: 'none',
							title: '错误！' + err[0].message
						})
					});
			},



			// 隐藏键盘
			hideKeyboard() {
				uni.hideKeyboard();
			},
			// 记录类型

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

			changetime(e) {
				console.log('change', e);
			},
			// 所属单位
			sexSelect5(e) {
				this.formData.orgId = e.id;
				this.formData.org_name = e.name;
				console.log(this.formData.orgId);
			},
			// 生成隐患弹出层   //暂存为草稿箱弹出层
			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);
			},
			// 值班
			goWorkNum() {
				uni.navigateTo({
					url: "/pagesA/fire/fire_station/people_fireStation/people_fireStation"
				})
			},
			// 负责人
			goBigNum() {
				uni.navigateTo({
					url: "/pagesA/fire/fire_station/people_fireStation/people_fireStation"
				})
			},
			// 普通人
			goPeopleMes() {
				uni.navigateTo({
					url: "/pagesA/fire/fire_station/people_fireStation/people_fireStation"
				})
			}
		}
	};
</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: 200rpx;
		margin-left: 0;
		font-size: 30rpx;
		background-color: #4cb2b6;
	}

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

	.example {
		overflow-y: auto;
	}

	/deep/ .antherBtn {
		width: 200rpx !important;
		height: 80rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.manyBtn {
		width: 150rpx;
		height: 60rpx;
		font-size: 20rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 20rpx;
		background-color: #4DB1B6;
		color: white;
	}
</style>