v3-lab-xcx/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 '@/component/homeConfigurationSlot'
	import { getHomeConfig } from '@/utils/homeConfig.js'

	components: {
		homeConfigurationSlot,
	},
	
	homeConfigData: [],
	
	demo() {
		let data = [
			{
				type: 'stripBox', //容器类型 minBox-小按钮 bigBox-大按钮 threeBox-三格按钮 stripBox-条形按钮
				layout: [
					{
						limits: "system:post:list", //权限字段
						route: "grading", //路由名称
						name: "分级管控", //名称
					}, 
				],
			},
		];
		this.$set(this,'homeConfigData',getHomeConfig(data));
	},
 -->
<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 === 'grading'" @click="buttonClick(item)">
						{{gradingCount>0?gradingCount+'项工作待完成':''}}
						<img src="@/images/basicsModules/icon_wdwg_gd.png" />
					</view>
				</view>
			</permissionsSlot>
		</view>
	</view>
</template>

<script>
	import {
		outSubjectPhoto,
		gradingControl
	} from '@/api/basicsModules/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') {
					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
					});
				}
			},
			//获取拍照检查配置
			async outSubjectPhoto() {
				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: '/pages_student/workbench/photoInspection?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: '/pages_student/workbench/photoInspection?newData=' + encodeURIComponent(JSON
								.stringify(obj)),
						});
					}
				}
			},
			//获取分级管控未完成总数
			async getGrading() {
				const {
					data
				} = await gradingControl({})
				if (data.code == 200) {
					this.$set(this, 'gradingCount', data.data.length);
				}
			},
			//调用摄像头
			saoCode() {
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						uni.navigateTo({
							url: '/pages_student/mine/codeSuccess?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>