xunjian_app/scan_pages/scanning/scanning.vue

<template>
	<view class=" ccc scning ">
		<view style="width: 200rpx;">
			<u-tabs bar-width="80" item-width="80" :list="list" :is-scroll="false" :current="current" @change="change">
			</u-tabs>
		</view>

		<scroll-view :scroll-y="true" class="u-p-l-30 u-p-r-30 u-p-b-48 scrll-height u-p-t-26">
			<block v-if="current == 0">
				<u-cell-group>
					<u-cell-item :value="scmdata.name" bg-color="#ffffff" :border-bottom="true" :border-top="false"
						:title-style="{'fontSize':'28rpx','color':'#333333','fontWeight':'bold'}"
						:value-style="{'fontSize':'28rpx','color':'#808080'}" :arrow="false" title="点位名称">
					</u-cell-item>
					<u-cell-item :value="scmdata.id" bg-color="#ffffff" :border-bottom="true" :border-top="false"
						:title-style="{'fontSize':'28rpx','color':'#333333','fontWeight':'bold'}"
						:value-style="{'fontSize':'28rpx','color':'#808080'}" :arrow="false" title="房间编号">
					</u-cell-item>
					<u-cell-item :value="scmdata.buildingName + scmdata.floorName" bg-color="#ffffff"
						:border-bottom="true" :border-top="false"
						:title-style="{'fontSize':'28rpx','color':'#333333','fontWeight':'bold'}"
						:value-style="{'fontSize':'28rpx','color':'#808080'}" :arrow="false" title="房间位置">
					</u-cell-item>
					<u-cell-item :value="scmdata.taskName" bg-color="#ffffff" :border-bottom="true" :border-top="false"
						:title-style="{'fontSize':'28rpx','color':'#333333','fontWeight':'bold'}"
						:value-style="{'fontSize':'28rpx','color':'#808080'}" :arrow="false" title="巡检计划">
					</u-cell-item>
				</u-cell-group>
				<view class="collect_tit u-row-left u-flex">
					<view class="tit">
						巡检项目
					</view>
					<image :src="icon1"></image>
					<span>设备：{{scmdata.devices.length}}件</span>
					<image :src="icon2"></image>
					<span>项目：{{checkItemCount}}个</span>
				</view>
				<!-- 自带项目巡检-设备名 -->
				<view class="zidai_xiangmu">
					<label class="sel_point u-flex u-row-between" @click="sel_show1 ()">
						<view class="sel_tit u-flex u-row-left u-m-l-26">
							<span>{{scmdata.name}}自带项目</span>
							<sup class="sup">*</sup>
						</view>
						<view class="triangle u-m-r-26" :style="tri_style1">
						</view>
					</label>
					<!-- 巡检项目名 -->
					<view class="scan_itm1" v-show="itm1_show" v-for="(item1,i) in scmdata.checkItems" :key="item1.id">
						<view class="tit  u-m-t-32 ">
							<view class=" u-flex u-row-left u-col-center">
								<span>{{i + 1}}.{{item1.checkItem.checkItem.itemName}}</span>
								<sup class="sup" v-if="item1.checkItem.checkItem.isRequired">*</sup>
							</view>
							<view class="u-m-t-12">
								<span style="color: #B3B3B3; font-size: 24rpx;"
									v-if="item1.checkItem.extra.validMinValue != null">{{"填值范围：" + item1.checkItem.extra.validMinValue + '~' +item1.checkItem.extra.validMaxValue}}</span>
							</view>
						</view>
						<!-- 选择类巡检操作 -->
						<!-- 单选 -->
						<block v-if="item1.checkItem.checkItem.itemType == 1 && item1.checkItem.allowMultiple == false">
							<scaradio ref="scarad" :scan_id="item1.id" :options="item1.checkItem.options" />
						</block>
						<!-- 多选 -->
						<block v-if="item1.checkItem.checkItem.itemType == 1 && item1.checkItem.allowMultiple == true">
							<scachebox v-if="item1" ref="scachb" :scan_id="item1.id"
								:options="item1.checkItem.options" />
						</block>
						<!-- 数字类巡检操作 -->
						<block v-if="item1.checkItem.checkItem.itemType == 2">
							<scanum v-if="item1" ref="scanum" :scan_id="item1.id"
								:min="item1.checkItem.extra.validMinValue" :max="item1.checkItem.extra.validMaxValue"
								:places="item1.checkItem.extra.decimalPlaces" />
						</block>
						<!-- 文本类巡检操作 -->
						<block v-if="item1.checkItem.checkItem.itemType == 3">
							<scatex v-if="item1" :defaultValue="item1.checkItem.checkItem.defaultValue" ref="scatex"
								:scan_id="item1.id" />
						</block>
						<!-- 拍照类巡检操作 -->
						<block v-if="item1.checkItem.checkItem.itemType == 4">
							<scaimg v-if="item1" ref="scaimg" :scan_id="item1.id"
								:photoPoints="item1.checkItem.photoPoints" />
						</block>
					</view>
				</view>

				<!-- 巡检设备-设备名 -->
				<block class="xunjain_shebei" v-for="(item3,j) in scmdata.devices" :key="j">
					<label class="sel_point u-flex u-row-between u-m-t-40" @click="sel_show(j)">
						<view class="sel_tit u-flex u-row-left u-m-l-26">
							<span>{{item3.deviceName}}</span>
							<sup class="sup">*</sup>
						</view>
						<view class="triangle u-m-r-26" :style="sel_style[j].tri_style">
						</view>
					</label>
					<!-- 巡检项目名 -->
					<view v-show="sel_style[j].it_show">
						<block class="scan_itm1" v-for="(item4,i) in item3.checkItems" :key="item4.id">
							<view class="tit  u-m-t-32 ">
								<view class=" u-flex u-row-left u-col-center">
									<span>{{i + 1}}.{{item4.checkItem.checkItem.itemName}}</span>
									<sup class="sup" v-if="item4.checkItem.checkItem.isRequired">*</sup>
								</view>
								<view class="u-m-t-12">
									<span style="color: #B3B3B3; font-size: 24rpx;"
										v-if="item4.checkItem.extra.validMinValue != null">{{"填值范围：" + item4.checkItem.extra.validMinValue + '~' + item4.checkItem.extra.validMaxValue}}</span>
								</view>
							</view>
							<!-- 选择类巡检操作 -->
							<!-- 单选 -->
							<block
								v-if="item4.checkItem.checkItem.itemType == 1 && item4.checkItem.allowMultiple == false">
								<scaradio v-if="item4" ref="scarad" :scan_id="item4.id"
									:options="item4.checkItem.options" />
							</block>
							<!-- 多选 -->
							<block
								v-if="item4.checkItem.checkItem.itemType == 1 && item4.checkItem.allowMultiple == true">
								<scachebox v-if="item4" ref="scachb" :scan_id="item4.id"
									:options="item4.checkItem.options" />
							</block>
							<!-- 数字类巡检操作 -->
							<block v-if="item4.checkItem.checkItem.itemType == 2">
								<scanum v-if="item4" ref="scanum" :scan_id="item4.id"
									:min="item4.checkItem.extra.validMinValue"
									:max="item4.checkItem.extra.validMaxValue"
									:places="item4.checkItem.extra.decimalPlaces" />
							</block>
							<!-- 文本类巡检操作 -->
							<block v-if="item4.checkItem.checkItem.itemType == 3">
								<scatex v-if="item4" :defaultValue="item4.checkItem.checkItem.defaultValue" ref="scatex"
									:scan_id="item4.id" />
							</block>
							<!-- 拍照类巡检操作 -->
							<block v-if="item4.checkItem.checkItem.itemType == 4">
								<scaimg v-if="item4" ref="scaimg" :scan_id="item4.id"
									:photoPoints="item4.checkItem.photoPoints" />
							</block>
						</block>
					</view>

				</block>
				<u-button  :hair-line="false" ripple-bg-color="blue" :disabled="guan" @click="scabtnclick"
					:custom-style="customStyle">确定</u-button>
			</block>
			<block v-else>
				<protow :option="option" :taskName="scmdata.taskName"
					:position="scmdata.buildingName + scmdata.floorName" />
			</block>
		</scroll-view>
		<!-- <u-tabbar :list="tabbar" :mid-button="true"></u-tabbar> -->
		<!-- 记录页面 -->

		<u-toast ref="sacast" />
	</view>

</template>

<script>
	import icon1 from '@/static/img/devi.png'
	import icon2 from '@/static/img/proj.png'
	// import jia from '@/static/img/jia.png'
	import {
		mapState
	} from 'vuex'
	import {
		partinfo,
		checkItemlist,
		patrolRecord,
		listForMobile
	} from '@/api/index.js'
	import dayjs from "dayjs";
	import scaradio from './scanItem/scanradio.vue'
	import scachebox from './scanItem/scanchebox.vue'
	import scanum from './scanItem/scannum.vue'
	import scatex from './scanItem/scantex.vue'
	import scaimg from './scanItem/scanimg.vue'
	import protow from './protow'
	export default {
		name: "sacnning",
		components: {
			scaradio,
			scachebox,
			scanum,
			scatex,
			scaimg,
			protow
		},
		data() {
			return {
				icon1: icon1,
				icon2: icon2,
				tri_style1: '', //自带项目三角形样式变化
				itm1_show: true, //自带项目三角形样式变化
				sel_style: [], //设备巡检下拉虚拟DOM数组
				//上方导航项
				list: [{
					name: '巡检'
				}, {
					name: '记录'
				}],
				current: 0, //跳转栏
				option: undefined, //跳转页面的option
				scmdata: undefined, //巡检数据
				checkItemCount: 0, //项目数
				guan: false,
				uploadlist: [],
				// uploadlist1:[],
				dataindex: 1,
				fromcasl: {},
				timerefs: new Date().getTime(), //因为用了$set的原因 多列表会不刷新 加入一个key 会让子组件重新渲染
				finishStatus: ["", "按时完成", "尚未巡检", "超时漏检", "提前完成", "延时完成"],
				fromarray: [],
				user: uni.getStorageSync('user'),
				customStyle: {
					width: '690rpx',
					height: '90rpx',
					marginBottom: '48rpx',
					background: '#4A8BFF',
					borderRadius: '4rpx',
					border: "none",
					fontSize: '28rpx',
					fontFamily: 'Microsoft YaHei-3970(82674968)',
					fontWeight: 'bold',
					color: '#FFFFFF',
					textAlign: 'center',
					lineHeight: '90rpx !important',
					marginTop: '48rpx',
				}
			}
		},
		computed: {
			...mapState({
				tabbar: state => state.tabbar.tabbar,
				timer: state => state.user.timer,
			})
		},
		onLoad(option) {

			if (this.option) {
				this.init(option.roomId, option.taskId)
			} else {
				this.option = option

				this.init(option.roomId, option.taskId)
			}
		},
		methods: {
			//自带项目三角样式变化
			sel_show1() {
				this.itm1_show = !this.itm1_show;
				if (!this.itm1_show) {
					this.tri_style1 =
						'margin-top: 0rpx;margin-bottom:10rpx;border-top-color:transparent;border-bottom-color: #808080;';
				} else {
					this.tri_style1 =
						'margin-top: 10rpx;margin-bottom:0rpx;border-top-color:#808080;border-bottom-color: transparent;';
				}
			},
			//设备三角形样式变化
			sel_show(index) {
				// obj.tri_style
				// obj.it_show
				this.sel_style[index].it_show = !this.sel_style[index].it_show
				if (!this.sel_style[index].it_show) {
					this.sel_style[index].tri_style =
						'margin-top: 0rpx;margin-bottom:10rpx;border-top-color:transparent;border-bottom-color: #808080;';
				} else {
					this.sel_style[index].tri_style =
						'margin-top: 10rpx;margin-bottom:0rpx;border-top-color:#808080;border-bottom-color: transparent;';
				}
			},
			// 顶部跳转栏
			change(index) {
				this.current = index
			},
			//处理提交数据
			async scabtnclick() {
				this.guan = true;
				this.customStyle.background = "grey";
				try {
					await this.sumitComponent()
					console.log("数据提交前确认", this.$store.state.user.items); // TODO isRequired
					this.scanSubmit()
				} catch {
					this.$refs.sacast.show({
						title: '提交失败，请稍后再试',
					})
					//开启按钮
					this.customStyle.background = '#4A8BFF';
					this.guan = false;
				}
				
			},
			async sumitComponent() {
				if (this.$refs.scaimg) {
					for (let i = 0; i < this.$refs.scaimg.length; i++) {
						await this.$refs.scaimg[i].submit()
					}
					this.$refs.sacast.show({
						title: '图片上传中...',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						// type: 'success', 
						// 如果不需要图标，请设置为false
						// icon: false
					})
				}
				if (this.$refs.scatex) {
					this.$refs.scatex.forEach(i => {
						i.submit()
					});
				}
				if (this.$refs.scanum) {
					this.$refs.scanum.forEach(i => {
						i.submit()
					});
				}
				if (this.$refs.scarad) {
					this.$refs.scarad.forEach(i => {
						i.submit()
					});
				}
				if (this.$refs.scachb) {
					this.$refs.scachb.forEach(i => {
						i.submit()
					});
				}
				
			},
			//提交数据接口
			async scanSubmit() {
				//能改
				setTimeout(() => {
					//开启按钮
					this.customStyle.background = '#4A8BFF';
					this.guan = false;
				}, 3000)
				let {
					message,
					code,
					data
				} = await patrolRecord({
					roomId: this.option.roomId,
					taskId: this.option.taskId,
					items: this.$store.state.user.items
				})
				if (code == 200) {
					//清空提交巡检数据数组
					this.$store.state.user.items = [];
					this.$refs.sacast.show({
						title: '巡检完成',
						type: 'success',
					})
					//跳转巡检记录
					this.change(1)
				} else {
					//清空提交巡检数据数组
					console.log('this.$store.state.user.items',this.$store.state.user.items)
					this.$store.state.user.items = [];
					this.$refs.sacast.show({
						title: message,
						type: 'warning',
					})
				}
			},
			//重置表单（未用到，只需更新items为空数组，其他会随组件刷新）
			scanReset() {
				this.$nextTick(() => {
					if (this.$refs.scatex) {
						this.$refs.scatex.forEach(i => {
							i.reset()
						});
					}
					if (this.$refs.scanum) {
						this.$refs.scanum.forEach(i => {
							i.reset()
						});
					}
					if (this.$refs.scarad) {
						this.$refs.scarad.forEach(i => {
							i.reset()
						});
					}
					if (this.$refs.scaimg) {
						this.$refs.scaimg.forEach(i => {
							i.reset()
						});
					}
					if (this.$refs.scachb) {
						this.$refs.scachb.forEach(i => {
							i.reset()
						});
					}
				})
			},
			//获取巡检房间信息与巡检检查项目规则
			init(roomId, taskId) {
				checkItemlist({
						taskId,
						roomId
					})
					.then(({
						data
					}) => {
						//处理自带巡检项目数据
						if (data.checkItems.length != 0) {
							//处理自带巡检项JSON数据
							data.checkItems.forEach(i => {
								i.checkItem = JSON.parse(i.checkItem)
							})
						}
						//计算巡检项目数量
						this.checkItemCount += data.checkItems.length
						//处理设备巡检项目数据
						if (data.devices.length != 0) {
							data.devices.forEach(i => {
								this.checkItemCount += i.checkItems.length
								let obj = {}
								obj.tri_style =
									'margin-top: 10rpx;margin-bottom:0rpx;border-top-color:#808080;border-bottom-color: transparent;'
								obj.it_show = true
								this.sel_style.push(obj)
								//处理设备巡检项JSON数据
								i.checkItems.forEach(h => {
									h.checkItem = JSON.parse(h.checkItem)
								})
							})
						}
						this.scmdata = data
					})
			},
			recyle(e) {
				const {
					key,
					boll,
					name
				} = e

				this.$set(this.from.aircondparol, key, {
					name,
					boll: !boll,
				}); //与组件那边同步刷新
				this.timerefs = new Date().getTime() //刷新父组件
				// this.$forceUpdate()

			},
			raidodx(index) {
				let fromarray = this.fromarray
				if (fromarray.length == 0) {
					this.fromarray.push(index)
				} else {
					let sum
					let a = fromarray.find((index2, key) => {
						sum = -1

						if (index2.itemId == index.itemId) {
							sum = key
							return key
						} else {
							sum = -1
						}
					})

					if (sum != -1) {
						this.fromarray.splice(sum, 1)
					}
					this.fromarray.push(index)
				}

			},

		},
	}
</script>

<style lang="scss">
	.scning .scrll-height {
		width: 100%;
		box-sizing: border-box;
		height: calc(100vh - 78rpx);
		background: #FFFFFF;
	}

	// .scning view {
	// 	line-height: 1;
	// }

	.left-boto-txt {
		position: absolute;
		left: 30rpx;
		top: 107rpx;
		font-size: 28rpx;
	}

	.xianchang {
		width: auto;
		font-size: 14px;
		color: #333333;
		font-weight: bold;
		padding: 26rpx 32rpx;
	}


	.collect_tit {
		width: 690rpx;
		height: 104rpx;

		.tit {
			width: 128rpx;
			// height: 33rpx;
			line-height: 33rpx;
			margin-left: 30rpx;
			font-size: 32rpx;
			font-family: Microsoft YaHei-3970(82674968);
			font-weight: bold;
			color: #010101;

		}

		image {
			max-width: 24rpx;
			max-height: 24rpx;
			margin-left: 42rpx;
		}

		span {
			line-height: 33rpx;
			// height: 24rpx;
			margin-left: 10rpx;
			font-size: 24rpx;
			font-family: Microsoft YaHei-3970(82674968);
			font-weight: 400;
			color: #808080;
		}
	}


	.sup {
		color: red;
	}

	.sel_point {
		width: 690rpx;
		height: 70rpx;
		background: #EBF8FF;



		.triangle {
			margin-top: 10rpx;
			display: inline-block;
			/* Base Style */
			border: solid 10rpx transparent;
			border-top-color: #808080;
		}
	}

	.u-radio,
	.u-checkbox {
		margin-top: 29rpx;
	}

	.u-radio__label,
	.u-checkbox__label {
		color: #333333 !important;
		width: 100%;
	}

	input {
		width: 100%;
		height: 100%;
		// text-indent: 20rpx;
	}

	.inp {
		width: 690rpx;
		height: 80rpx;
		padding: 18rpx;
		border: 1rpx solid #BFBFBF;
		border-radius: 6rpx;
	}

	.tex {
		width: 690rpx;
		height: 210rpx;
		border: 1rpx solid #BFBFBF;
		border-radius: 6rpx;
	}

	textarea {
		width: 100%;
		height: 100%;
		margin-top: 10rpx;
		text-indent: 20rpx;
	}

	.upload-image {
		width: 139rpx;
		height: 139rpx;
		margin-right: 45rpx;
		// background-image: url(../../static/img/jia.png);
		// background-repeat: no-repeat;
		// background-size: 100%;
		// line-height: 32px !important;
	}

	.scan-item-hidden {
		display: none;
	}

	.scan-form-item-show {
		display: block;
	}
</style>