v3-lab-xcx/pages/component/homeConfigurationSlot.vue

<!--
 首页按钮匹配组件
	<homeConfigurationSlot v-if="homeConfigData[0]" :homeConfig="homeConfigData[0]"></homeConfigurationSlot>
	<homeConfigurationSlot v-if="homeConfigData[1]" :homeConfig="homeConfigData[1]"></homeConfigurationSlot>
	<homeConfigurationSlot v-if="homeConfigData[2]" :homeConfig="homeConfigData[2]"></homeConfigurationSlot>
	<homeConfigurationSlot v-if="homeConfigData[3]" :homeConfig="homeConfigData[3]"></homeConfigurationSlot>

 	import { homeConfigurationSlot } from '@/pages/component/homeConfigurationSlot'
	import { getHomeConfig } from '@/utils/homeConfig.js'

	components: {
		homeConfigurationSlot,
	},

	homeConfigData: [],


	async systemAppletLayoutSelect() {
		const {data} = await systemAppletLayoutSelect({module:'home'})
		if(data.code == 200){
		  let list = JSON.parse(JSON.stringify(data.data))
		  for(let i=0;i<list.length;i++){
			list[i].layout = JSON.parse(list[i].layout);
		  }
		  this.$set(this,'homeConfigData',getHomeConfig(list));
		}
	},
 -->
<template>
	<view class="homeConfigurationSlot">
		<!-- 小型按钮模块 -->
		<view class="min-icon-button-box" v-if="homeConfig.type == 'minBox'">
			<permissionsSlot v-for="(item,index) in homeConfig.layout" :key="index" :hasPermi="item.limits">
				<view class="min-button-box" @click="buttonClick(item)">
					<img :src="item.img">
					<view>{{item.name}}</view>
				</view>
			</permissionsSlot>
		</view>
		<!-- 大型按钮模块 -->
		<view class="big-icon-button-box" v-if="homeConfig.type == 'bigBox'">
			<permissionsSlot class="imgBox" v-for="(item,index) in homeConfig.layout" :key="index" :hasPermi="item.limits">
				<img :src="item.img" @click="buttonClick(item)">
			</permissionsSlot>
		</view>
		<!-- 三格按钮 -->
		<view class="three-big-icon-button-box" v-if="homeConfig.type == 'threeBox'">
			<permissionsSlot class="imgBox" v-for="(item,index) in homeConfig.layout" :key="index" :hasPermi="item.limits">
				<img v-if="index<3" :src="item.img" @click="buttonClick(item)">
			</permissionsSlot>
		</view>
		<!-- 条型按钮 -->
		<view v-if="homeConfig.type == 'stripBox'">
			<permissionsSlot v-for="(item,index) in homeConfig.layout" :key="index" :hasPermi="item.limits">
				<view class="grading">
					<img class="grading_l" :src="item.img" />
					<view class="grading_c">{{item.name}}</view>
					<view class="grading_r" v-if="item.route === 'gradingControl'" @click="buttonClick(item)">
						{{gradingCount>0?gradingCount+'项工作待完成':''}}
						<img src="@/pages/images/icon_wdwg_gd.png" />
					</view>
				</view>
			</permissionsSlot>
		</view>
	</view>
</template>

<script>
	import {
		outSubjectPhoto,
		gradingControl,
		getGentleIdentifier
	} from '@/pages/api/index.js'
	export default {
		name: "homeConfigurationSlot",
		props: {
			homeConfig: {},
		},
		data() {
			return {
				gradingCount: 0, //分级管控未完成总数
			}
		},
		created() {

		},
		mounted() {
			this.initializeData();
		},
		methods: {
			//初始化
			initializeData() {
				let self = this;
				for (let i = 0; i < self.homeConfig.layout.length; i++) {
					//分级管控
					if (self.homeConfig.layout[i].route === 'grading') {
						self.getGrading();
					}
				}
			},
			//按钮点击事件
			buttonClick(item) {
				if (item.buttonType === 'page') { //随手拍
					if (item.route === 'snapshotManage') { //安全检查
						uni.navigateTo({
							url: item.routeUrl,
						});
					}
					if (item.route === 'safetyExamine') { //安全检查
						/* uni.navigateTo({
							url: item.routeUrl,
						}); */
						this.getGentleIdentifier(item.routeUrl)
					}
					if (item.route === 'leaveInspection') { //离开检查
						uni.navigateTo({
							url: item.routeUrl,
						});
						//this.outSubjectPhoto(item.routeUrl);
					}
					if (item.route === 'accessQualification') { //准入审核
						uni.navigateTo({
							url: item.routeUrl,
						});
						//this.outSubjectPhoto(item.routeUrl);
					}
					if (item.route === 'gasBottle') { //气瓶管理
						uni.navigateTo({
							url: item.routeUrl,
						});
					}
					if (item.route === 'warningRecording') { //安全报警
						uni.navigateTo({
							url: item.routeUrl,
						});
					}
					if (item.route === 'emergencyEvacuation') { //应急处置
						uni.navigateTo({
							url: item.routeUrl,
						});
					}
					if (item.route === 'gradingControl') { //分級管控
						uni.navigateTo({
							url: item.routeUrl,
						});
					}
					//学生端------------------------
					if (item.route === 'integralExchange') { //积分兑换
						uni.navigateTo({
							url: item.routeUrl,
						});
						//this.saoCode(item.routeUrl)
					}
					if (item.route === 'accessApplication') { //准入申请
						uni.navigateTo({
							url: item.routeUrl,
						});
					}
					console.log('item',item)
					if (item.route === 'meViolation') { //违规记录
						uni.navigateTo({
							url: item.routeUrl,
						});
					}
					if (item.route === 'studentGasBottle') { //气瓶管理
						uni.navigateTo({
							url: item.routeUrl,
						});
					}




				} else if (item.buttonType === 'button') {
					if (item.route === 'photoInspection') {
						this.outSubjectPhoto();
					}
				} else if (item.buttonType === 'none') {
					uni.showToast({
						title: '暂未开放',
						icon: "none",
						mask: true,
						duration: 2000
					});
				}
			},
			//获取用户身份标识"adminGentle": false,   管理员身份 "rectifyGentle": false, 院级管理员collegeGentle   整改身份"applyGentle": false    检查者身份
			async getGentleIdentifier(routeUrl) {
				let self = this;
				const {
					data
				} = await getGentleIdentifier();
				if (data.code == 200) {
					let pageType = null
					// 如果是管理员 检查者和整改者
					let list = [];
					if (data.data.adminGentle || data.data.collegeGentle) { //校级管理员
						list.push({
							name: '管理员',
							pageType: 1
						})
					}
					if (data.data.applyGentle || data.data.myApplyGentle) {
						list.push({
							name: '检查者',
							pageType: 2
						})
					}
					if (data.data.rectifyGentle) {
						list.push({
							name: '整改者',
							pageType: 3
						})
					}
					if (!data.data.adminGentle && !data.data.applyGentle && !data.data.myApplyGentle && !data.data
						.rectifyGentle && !data.data.collegeGentle) {

					}
					uni.setStorageSync('gentleIdentifier', list)
					uni.setStorageSync('gentleIdentifierData', data.data)
					if (list.length > 0) {
						uni.navigateTo({
							url: routeUrl,
						});
					} else {
						uni.showToast({
							title: '没有相关权限',
							icon: "none",
							mask: true,
							duration: 2000
						});
					}
				}
			},
			//获取拍照检查配置
			async outSubjectPhoto(routeUrl) {
				const {
					data
				} = await outSubjectPhoto();
				if (data.code == 200) {
					if (data.data == null) {
						//需要检查(重新填写)
						let obj = {
							sub: "实验室照片",
							subUrl: "",
							garbage: "垃圾桶清理后照片",
							garbageUrl: "",
							dangerous: "使用危险设备照片(选填)",
							dangerousUrl: "",
							sourceRisk: "危险源设备使用登记本照片(选填)",
							sourceRiskUrl: "",
						};
						uni.navigateTo({
							url: routeUrl + '?newData=' + encodeURIComponent(JSON.stringify(obj)),
						});
					} else if (data.data == false) {
						//不需要检查
						uni.showToast({
							title: '暂无检查数据',
							icon: "none",
							mask: true,
							duration: 2000
						});
					} else {
						//需要检查(修改内容)
						let obj = {
							id: data.data.id,
							sub: "实验室照片",
							subUrl: data.data.subUrl,
							garbage: "垃圾桶清理后照片",
							garbageUrl: data.data.garbageUrl,
							dangerous: "使用危险设备照片(选填)",
							dangerousUrl: data.data.dangerousUrl,
							sourceRisk: "危险源设备使用登记本照片(选填)",
							sourceRiskUrl: data.data.sourceRiskUrl,
						};
						uni.navigateTo({
							url: routeUrl + '?newData=' + encodeURIComponent(JSON.stringify(obj)),
						});
					}
				}
			},
			//获取分级管控未完成总数
			async getGrading() {
				const {
					data
				} = await gradingControl({})
				if (data.code == 200) {
					this.$set(this, 'gradingCount', data.data.length);
				}
			},
			//调用摄像头
			saoCode(routeUrl) {
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						uni.navigateTo({
							url: routeUrl + '?q=' + encodeURIComponent(JSON
								.stringify(res.result))
						});
					}
				});
			},
		},
	}
</script>

<style lang="stylus" scoped>
	.homeConfigurationSlot {
		margin: 0;
		padding: 0;

		.min-icon-button-box {
			display flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			width: 710rpx;
			margin: 20rpx;
			background: #ffffff;
			border-radius: 20rpx;
			padding-bottom: 20rpx;

			.min-button-box {
				width: 176rpx;

				img {
					height: 75rpx;
					width: 75rpx;
					margin: 30rpx auto 10rpx;
				}

				view {
					text-align: center;
					font-size: 24rpx;
				}
			}
		}

		.big-icon-button-box {
			margin: 10rpx 0 0 20rpx;

			.imgBox {
				display: inline-block;
				width: 350rpx;
				height: 150rpx;
				margin: 10rpx 10rpx 0 0;
			}

			img {
				width: 350rpx;
				height: 150rpx;
			}
		}

		.three-big-icon-button-box {
			width: 710rpx;
			height: 354rpx;
			margin: 20rpx 20rpx 0;
			background: #ffffff;
			border-radius: 20rpx;
			position: relative;

			.imgBox:nth-child(1) {
				position: absolute;
				left: 13rpx;
				top: 20rpx;
				width: 310rpx;
				height: 150rpx;
				margin-bottom: 14rpx;

				img {
					width: 310rpx;
					height: 150rpx;
				}
			}

			.imgBox:nth-child(2) {
				position: absolute;
				left: 13rpx;
				top: 180rpx;
				width: 310rpx;
				height: 150rpx;

				img {
					width: 310rpx;
					height: 150rpx;
				}
			}

			.imgBox:nth-child(3) {
				position: absolute;
				right: 13rpx;
				top: 20rpx;
				width: 362rpx;
				height: 310rpx;

				// margin: 22rpx 13rpx 22rpx 0;
				img {
					width: 362rpx;
					height: 310rpx;
				}
			}
		}

		.grading {
			width: 712rpx;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx 0 20rpx 20rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.grading_l {
				width: 34rpx;
				height: 34rpx;
				margin-left: 16rpx;
			}

			.grading_c {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				margin-left: 16rpx;
			}

			.grading_r {
				width: 504rpx;
				height: 80rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #EE3A3A;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				>img {
					width: 20rpx;
					height: 20rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>