ybxf-security-uniapp/pagesA/fire/fpd_detection/add_detection/add_detection.vue

<template>
	<view class=" uni-container">
		<view class="example container" :style="'height: ' + (screenHeight - wheight - 75) + 'px'">
			<!-- 自定义表单校验 1-->
			<u-form ref="customForm" :rules='customRules' :model="formData" labelPosition="left" labelWidth="150"
				labelAlign="left">
				<view class=" flex  flex-direction width100">
					<u-form-item label="检测项目" prop="detinspect" :required="true"
						@click="showInspOption = true;hideKeyboard();">
						<u--input v-model="formData.detinspect" disabled disabledColor="#ffffff"
							placeholder="请选择检测项目"></u--input>
						<!-- <u-input v-model="formData.detinspect" placeholder="请输入检测项目" /> -->
					</u-form-item>

					<u-form-item label="预计检测时间" prop="detdate">
						<uni-datetime-picker :show="unitTime" v-model="formData.detdate" type="datetime"
							closeOnClickOverlay @confirm="ActiveUnitTime" @cancel="unitTime = false"
							@change="changetime" @close="unitTime = false"></uni-datetime-picker>
					</u-form-item>
					<u-form-item label="检测维保结果" prop="detresult" @click="
							showreOption = true;
							hideKeyboard();" :required="true">
						<u--input v-model="formData.detresult.name" disabled disabledColor="#ffffff"
							placeholder="请选择检测维保结果"></u--input>
						<!-- <u-input v-model="formData.detresult" placeholder="请输入检测维保结果" /> -->
					</u-form-item>
					<u-form-item label="所属单位" @click="
							showSex5 = true;
							hideKeyboard();" prop="orgName" :required="true">
						<u--input v-model="formData.orgName" disabled disabledColor="#ffffff"
							placeholder="请选择所属单位"></u--input>
					</u-form-item>
					<u-form-item label="附件">
						<!-- 选择文件上传 -->
						<uni-file-picker v-model="formData.File" del-icon limit="1" auto-upload file-mediatype="all"
							@select="select" @delete="deleteFile">
							<button type="primary" class="selectBtn"
								style="background-color: rgba(76, 178, 182, 0.5);">选择附件</button>
							<!-- 加载中 -->
							<isLodingModel v-if="loading"></isLodingModel>
						</uni-file-picker>
					</u-form-item>
				</view>
			</u-form>
			<u-action-sheet :show="showSex5" :actions="actions5" title="请选择单位" @close="showSex5 = false"
				@select="sexSelect5"></u-action-sheet>
			<!-- 检测结果选项框 -->
			<u-action-sheet :show="showreOption" :actions="resultOptions" title="请选择检测维保结果"
				@close="showreOption = false" @select="setResult"></u-action-sheet>
			<!-- 检测项目选项框 -->
			<!-- 			<u-action-sheet :show="showInspOption" :actions="detinspectOptions" title="请选择检测项目"
				@close="showInspOption = false" @select="setInsp"></u-action-sheet> -->
			<!-- ----隐患 -->
			<u-popup :show="showInspOption" :round="10" @close="showInspOption=false">
				<view style="width: 70vw;overflow-y: auto;margin-bottom: 80rpx;padding:0 10px">
					<view style="position: sticky; top: 0; background-color: white;height:50px;padding-top: 10px;">
						<text class="text-xl">选择检测项目:</text>
						<text class="btn" @tap="onSelectAll">
							{{selectAll?'取消全选':'全选'}}
						</text>
					</view>
					<view class="person-forward" style="margin-top: 10px;">
						<u-checkbox-group placement="column" v-model="checkArr" @change="checkboxChange2"
							activeColor="#4CB2B6" iconSize="red">
							<u-checkbox v-for="(items, indexs) in detinspectOptions" :key="indexs"
								:customStyle="{marginBottom: '60rpx'}" :label="items.name" :name="items.name">
							</u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="flex flex-direction-row "
						style="position: fixed;bottom: 10px;left: 50%;transform: translate(-50%);height: 100rpx;width: 80%">
						<u-button shape="circle" type="primary" color="#4CB2B6" text="确定" @click="checkboxConfirm2()"
							customStyle="margin-right:20px;padding:0 30px">
						</u-button>
						<u-button type="primary" plain color="#4CB2B6" text="取消" shape="circle"
							@click="checkboxCancel2()" customStyle="padding:0 30px">
						</u-button>
					</view>
				</view>
			</u-popup>
			<!-- ----隐患 -->
		</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 {
		createFpdDetection, // 更新
		getOrgId,
		upload, //上传文件
	} from '@/api/fpdDetection/index.js';
	import {
		DICT_TYPE,
		getDictDatas
	} from '@/utils/dict';
	import {
		getAccessToken
	} from '@/utils/auth';
	import config from '@/config';
	import store from '@/store';
	import {
		uploadAvatar
	} from '@/api/system/user';

	const baseUrl = config.baseUrl;
	var that = null;
	export default {
		data() {
			return {
				isCheckAll: false,
				screenHeight: this.$screenHeight,
				wheight: '',
				showSex5: false, //所属单位
				actions: [],
				actions2: getDictDatas(DICT_TYPE.TRAIN_DRILL),
				actions5: [],
				//检测维保结果
				showreOption: false,
				resultOptions: getDictDatas(DICT_TYPE.BACKEND_DET_RESULT), //检测维保结果选项
				//检测项目
				showInspOption: false,
				detinspectOptions: getDictDatas(DICT_TYPE.DICT_INSPECT_TYPE), //检测项目选项
				checkArr: [],
				// 每页数据量
				pageSize: 5,
				// 当前页
				pageNo: 1,
				// 数据总量
				total: 0,
				unitTime: false,
				loading: false,
				selectAll: false,
				title: '生成隐患',
				content: '确认将此检查项目生成为隐患',
				// 自定义表单数据
				formData: {
					status: '0',
					File: [],
					detresult: {
						id: null,
						name: null
					}
				},
				// 自定义表单校验规则
				customRules: {
					detinspect: {
						type: 'string',
						required: true,
						message: '	检测项目不能为空',
						trigger: ['blur', 'change']
					},
					unitTime: {
						type: 'string',
						message: '预计检测时间不能为空',
						trigger: ['blur', 'change']
					},
					orgName: {
						// pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
						// 自定义验证函数
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							//是否符合正则 且不为空
							if (!value) {
								return false
							}
						},
						message: '请输入检测维保结果',
						trigger: ['blur', 'change']
					},
					detresult: {
						// pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
						// 自定义验证函数
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							//是否符合正则 且不为空
							if (!value.id) {
								return false
							}
						},
						message: '请输入检测维保结果',
						trigger: ['blur', 'change']
					}
				}
			};
		},
		watch: {
			loading: {
				handler(newLength, oldLength) {
					this.$modal.isLoadingModel(this.loading)
				},
				immediate: true
			}
		},
		computed: {},
		mounted() {
			uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
				this.wheight = data.height
			}).exec()
		},
		// 在 vue页面，向起始页通过事件传递数据
		// 在 vue页面，向起始页通过事件传递数据
		onLoad: function(option) {
			this.formData.orgName = option.orgName ? option.orgName : ''
			this.formData.orgId = option.orgId ? option.orgId : ''
			this.actions2.map(i => {
				i.name = i.label;
				i.id = i.value;
			});

			// 获取单位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
					});
				});
			});
			//初始化检测结果选项
			const trueArr = []
			this.resultOptions.forEach(item => {
				trueArr.push({
					id: item.value,
					name: item.label
				})
			})
			this.resultOptions = [...trueArr]
			//初始化检测项目选项
			const trueArr1 = []
			// console.log('detinspectOptions', this.detinspectOptions);
			this.detinspectOptions.forEach(item => {
				trueArr1.push({
					id: item.value,
					name: item.label
				})
			})
			this.detinspectOptions = [...trueArr1]
		},
		onReady() {
			this.$refs.customForm.setRules(this.customRules);
		},

		methods: {
			onSelectAll() {
				this.selectAll = !this.selectAll;
				this.checkArr = this.selectAll ? this.detinspectOptions.map(item => item.name) : [];
			},
			submit(ref) {
				// console.log(this.formData, 'alertalertalert');
				// if (!this.formData.orgName) {
				// 	return this.$modal.msgError('请选择所属单位')
				// }
				// if (this.formData.unitTime && this.formData.unitTime.indexOf(":") === -1) {
				// 	this.formData.unitTime = this.formData.unitTime + ' 00:00:00'
				// }
				this.$refs[ref]
					.validate()
					.then(res => {
						this.formData['status'] = 0;
						// console.log('this.formData', this.formData);
						if (this.formData.File.length > 0) {
							this.formData.att = this.formData.File[0].url.toString();
						} else {
							this.formData.att = ''
						}
						//对要提交的数据进行处理 {id,name}只保存name
						this.$set(this.formData, 'detresult', this.formData.detresult.id)
						var jsdata = JSON.stringify(this.formData);
						// console.log(jsdata, 'jsdatajsdatajsdata');
						createFpdDetection(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 => {});
					})
					.catch(err => {
						// console.log(err,'eeeeeeeeee');
						// uni.showToast({
						// 	icon:'none',
						// 	title:'错误！'+ err[0].message
						// })
					});
			},
			// 上传图片 获取上传状态
			// 选择上传触发函数
			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) {
				const that = this;
				this.loading = true
				await uni.uploadFile({
					url: baseUrl + '/admin-api/infra/file/upload', //后端用于处理图片并返回图片地址的接口
					filePath: tempFilePaths[i],
					name: 'file',
					header: {
						Authorization: 'Bearer ' + getAccessToken()
					}, //请求token
					success: res => {
						// console.log('uploadres', res);
						let data = JSON.parse(res.data);
						// 返回的url
						var fileLink = data.data;
						const code = data.code;
						// 如果成功，将返回的data数据给 formdata
						if (code == 0) {
							that.formData.File.push({
								url: fileLink,
								name: fileLink
							});
							uni.showToast({
								title: '文件上传成功！'
							});
							that.loading = false
							// that.formData.attId = fileLink
						}
						// this.formData.attId = this.formData.attId.toString();

					},
					fail: () => {
						// console.log('err');
						uni.showToast({
							icon: 'error',
							title: '文件上传失败！'
						});
					}
				});
			},
			// 移出图片函数
			async deleteFile(e) {
				// console.log(e);
				this.formData.attId = [];
				// console.log('移除了：', this.formData.attId);
			},
			//检测项目多选框选中
			checkboxChange2(arr) { //勾选的事件
				console.log('arr', arr);
				this.checkArr = [...arr]

			},
			//多选确定事件
			checkboxConfirm2() {
				this.showInspOption = false
				this.formData.detinspect = this.checkArr.join(',')
				// console.log('detinspect',this.formData.detinspect);
			},
			//多选取消事件
			checkboxCancel2() {
				this.showInspOption = false
				// console.log('this.formData.detinspect',this.formData.detinspect);
				if (this.formData.detinspect) {
					const nowArr = this.formData.detinspect.split(',')
					this.checkArr = [...nowArr]
				} else {
					this.checkArr = []
				}

			},
			// 隐藏键盘
			hideKeyboard() {

				uni.hideKeyboard();
			},

			changetime(e) {
				console.log('change', e);
			},
			// 所属单位
			sexSelect5(e) {
				// console.log('e',e);
				this.formData.orgId = e.id;
				this.formData.orgName = e.name;
				// console.log(this.formData);
			},
			// 检测维保结果select事件
			setResult(e) {
				// console.log('e', e);
				this.formData.detresult = {
					id: e.id,
					name: e.name
				};
				// this.formData.orgName = e.name;
			},
			// 检测检测项目select事件
			setInsp(e) {
				// console.log('e', e);
				this.formData.detinspect = e.name;
				// this.formData.orgName = 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);
			}
		}
	};
</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,
	/deep/.u-transition {
		overflow-y: auto;
		height: 1000rpx;
		background-color: #fff;
	}

	.example {
		overflow-y: auto;
	}
	.btn{
		color: #4CB2B6;
		margin-left: 20px;
		padding:10rpx 40rpx;
		border: 1px solid #4CB2B6;
		border-radius: 8rpx;
	}
</style>