sy/src/components/Index.vue

<template>
	<el-container style="height: 100%">
		<el-header>
			<div v-if="userinfo.logo">
				<img :src="userinfo.logo" alt=""  style="position: absolute;left: 20px;top: 20px;width: 136px;">
			</div>
			<div class="navbarBtn">
				<!-- 用户 -->
				<div class="userinfo">
					欢迎您，{{ username }}
				</div>
				<!-- 标题 -->
				<div class="caption">
					<div v-if="userinfo.user_header" class="tit">{{userinfo.user_header}}</div>
					<div v-else class="tit">农产品溯源系统  助力绿色农业发展  为您的健康保驾护航</div>
					<div>
						Agricultural Products Traceability System
					</div>
				</div>
			</div>
		</el-header>
		<div class="site" v-if="userinfo.site">
			<i class="iconfont icon-jidi"></i>
			<span>{{userinfo.site}}</span>
		</div>
		<!-- 修改密码对话框 -->
		<el-dialog
			title="重置密码"
			:visible.sync="resetPassDialogVisible"
			width="500px"
			@close="resetPassDialogClosed"
		>
			<el-form
				ref="resetPassFormRef"
				:model="resetPassForm"
				label-width="90px"
				:rules="resetPassFormRules"
			>
				<el-form-item label="原始密码 : " prop="oldPass">
					<el-input type="password" v-model="resetPassForm.oldPass"></el-input>
				</el-form-item>
				<el-form-item label="新密码 : " prop="newPass">
					<el-input type="password" v-model="resetPassForm.newPass"></el-input>
				</el-form-item>
				<el-form-item label="确认新密码 : " prop="checkNewPass">
					<el-input
						type="password"
						v-model="resetPassForm.checkNewPass"
					></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="resetPassDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="resetPassSubm">确认</el-button>
			</span>
		</el-dialog>
		<el-container style="overflow: auto">
			<!-- 菜单 -->
			<el-aside width="200px">
				<el-menu
					:default-openeds="menuOpeneds"
					:default-active="$route.path"
					:collapse-transition="false"
					class="el-menu-vertical-demo"
					unique-opened
					:router="isRouter"
					active-text-color="rgb(57, 249, 190)"
				>
					<el-submenu
						:index="item.pur_id.toString()"
						v-for="item in menuList1"
						:key="item.pur_id"
					>
						<template slot="title">
							<i :class="iconObj[item.pur_id]"></i>
							<span>{{ item.purview_name }}</span>
						</template>
						<el-menu-item
							:index="menuIndex(subItem.menu)"
							v-for="subItem in item.children"
							:key="subItem.pur_id"
							@click="saveNavState('/index/' + subItem.menu)"
						>
							<template slot="title">
								<span>{{ subItem.purview_name }}</span>
							</template>
						</el-menu-item>
					</el-submenu>
					<el-menu-item
						:index="'/index/'+item.menu"
						v-for="item in menuList"
						:key="item.pur_id"
					>
						<i :class="iconObj[item.pur_id]"></i>
						<span slot="title">{{ item.purview_name }}</span>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-container>
				<el-main>
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</el-container>
</template>

<script>
export default {
	data() {
		var validateNewPass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入新密码'))
			} else {
				if (this.resetPassForm.checkPass !== '') {
					this.$refs.resetPassFormRef.validateField('checkNewPass')
				}
				callback()
			}
		}
		var validateCheckPass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'))
			} else if (value !== this.resetPassForm.newPass) {
				callback(new Error('两次输入密码不一致!'))
			} else {
				callback()
			}
		}
		return {
			isRouter: true,
			// 被激活导航地址
			// activePath:this.$store.state.activePath,
			changeHomedialogVisible: false,
			iconObj: {
				20: 'iconfont icon-shujuzhanshi',
				22: 'iconfont icon-shebei',
				25: 'iconfont icon-jidi',
				28: 'iconfont icon-xitong',
				36: 'iconfont icon-cebaoguanli',
				40: 'iconfont icon-huanjingjiance',
				42: 'iconfont icon-jiankong',
				44: 'iconfont icon-fangzhi',
				46: 'iconfont icon-nongchangguanli',
				48: 'iconfont icon-nongshiguanli',
				58: 'iconfont icon-suyuan',
				124: 'iconfont icon-zhuanjia',
				129: 'iconfont icon-shouhou',
				6: 'iconfont icon-xitong'
			},
			menuOpeneds:['/index/farmBaseManger'],
			userinfo:'',
			menuList1: [{
				menu: "",
				parent_perm_id: 0,
				pur_id: 46,
				purview_name: "农场管理",
				children:[
					{
						menu: "farmBaseManger",
						parent_perm_id: 46,
						pur_id: 80,
						purview_name: "基地列表",
					},
					{
						menu: "farmFieldsManger",
						parent_perm_id: 46,
						pur_id: 47,
						purview_name: "地块管理",
					}
				]
			},
			{
				menu: "",
				parent_perm_id: 0,
				pur_id: 48,
				purview_name: "农事管理",
				children:[
					{
						menu: "farmThingPlant",
						parent_perm_id: 48,
						pur_id: 49,
						purview_name: "种植",
					},
					{
						menu: "farmThingApplyFerti",
						parent_perm_id: 48,
						pur_id: 50,
						purview_name: "施肥",
					},
					{
						menu: "farmThingspray",
						parent_perm_id: 48,
						pur_id: 51,
						purview_name: "喷药",
					},
					{
						menu: "farmThingWatering",
						parent_perm_id: 48,
						pur_id: 52,
						purview_name: "灌溉",
					},
					{
						menu: "farmThingMore",
						parent_perm_id: 48,
						pur_id: 57,
						purview_name: "更多",
					},
					{
						menu: "farmThingHarvest",
						parent_perm_id: 48,
						pur_id: 53,
						purview_name: "采收",
					},
					{
						menu: "farmThingSale",
						parent_perm_id: 48,
						pur_id: 141,
						purview_name: "销售",
					},
					{
						menu: "farmThingTransport",
						parent_perm_id: 48,
						pur_id: 142,
						purview_name: "运输",
					}
					
				]
			},
			{
				menu: "",
				parent_perm_id: 0,
				pur_id: 58,
				purview_name: "溯源系统",
				children:[
					{
						menu: "resultInfoList",
						parent_perm_id: 58,
						pur_id: 59,
						purview_name: "溯源信息",
					},
				]
			},], //首页菜单
			menuList: [{
			"purview_name": "用户列表",
			"menu": "userManger",
			"parent_perm_id": 6,
			"pur_id": 6
			},],
			// activePath:'',
			username: '',
			userphoto:'',
			userHeadImg: '',
			resetPassDialogVisible: false,
			resetPassForm: {
				oldPass: '',
				newPass: '',
				checkNewPass: ''
			},
			resetPassFormRules: {
				oldPass: [
					{ required: true, message: '请输入原始密码', trigger: 'blur' }
				],
				newPass: [{ validator: validateNewPass, trigger: 'blur' }],
				checkNewPass: [{ validator: validateCheckPass, trigger: 'blur' }]
			},
		}
	},
	created: function () {
		this.getuserinfo()
		// this.$router.push('xycb')
	},
	computed: {
	},
	watch: {
	},
	mounted() {
	},
	methods: {
		dropdownHandle(command) {
			if (command == 'editPwd') {
				this.changePass()
			} else if (command == 'outSys') {
				this.outSys()
			} else {
				this.$router.push({ path: command })
			}
		},
		getuserinfo() {
			this.$axios({
				method: 'post',
				url: '/userinfo_'
			}).then((res) => {
				this.username = res.data.username
				this.userphoto = res.data.userphoto
				localStorage.setItem('username', res.data.username)  // 0管理员  1用户
			})
			this.$axios({
				method: 'get',
				url: '/user_detail'
			}).then((res) => {
				this.userinfo = res.data
				localStorage.setItem('have_type', this.userinfo.have_type)  // 0管理员  1用户
				localStorage.setItem('staff', this.userinfo.staff)  // 1是admin
			})
		},
		getNavList() {
			this.$axios({
				method: 'GET',
				url: '/home'
			}).then((res) => {
				let navList = res.data
				this.menuList1 = navList
			})
		},
		dropdownHandle(command) {
			if (command == 'editPwd') {
				this.changePass()
			} else if (command == 'outSys') {
				this.outSys()
			} else {
				this.$router.push({ path: command })
			}
		},
		handleCommand(command) {
			// this.$message('click on item ' + command);
			document.body.className = 'custom-' + command
			window.sessionStorage.setItem('bodyCalss', 'custom-' + command)
		},
		outSys() {
			this.$axios({
				method: 'POST',
				url: '/logout_user'
			}).then((res) => {
				if (res.data.message == '') {
					window.localStorage.removeItem('isLogin')
					window.localStorage.removeItem('session')
					this.$router.push('/login')
					// window.sessionStorage.setItem('activePath', '/index/home')
				}
			})
		},
		changePass() {
			this.resetPassDialogVisible = true
		},
		resetPassDialogClosed() {},
		resetPassSubm() {
			this.$refs.resetPassFormRef.validate((valid) => {
				if (!valid) return
				this.$axios({
					method: 'POST',
					url: '/changepwd',
					data: this.qs.stringify({
						old_password: this.resetPassForm.oldPass,
						new_password: this.resetPassForm.newPass,
						confirm_password: this.resetPassForm.checkNewPass
					})
				}).then((res) => {
					if (res.data.message == '') {
						this.$message({
							message: '密码修改成功！',
							type: 'success'
						})
						this.resetPassDialogVisible = false
					}
				})
			})
		},
	
		menuIndex(menu) {
			if (menu == 'bFourSituations') {
				return ''
			} else if (menu == 'equipDistribute') {
				return ''
			} else if (menu == 'bCbd') {
				return ''
			} else if (menu == 'bQxz') {
				return ''
			} else if (menu == 'bSy') {
				return ''
			} else if (menu == 'bBzy') {
				return ''
			} else {
				return '/index/' + menu
			}
		},
		//保存菜单的激活地址
		saveNavState(activePath) {
			// let path='/'+activePath.split('/')[activePath.split('/').length-1]
			let path = activePath.slice(6)
			// console.log(path)
			// console.log(activePath)
			if (activePath == '/index/bFourSituations') {
				// this.$router.replace('/index/home')
				this.BFourSituations(path) //跳转到大数据平台
			} else if (activePath == '/index/equipDistribute') {
				// this.$router.push('/index/home')
				this.BFourSituations(path) //跳转到大数据平台
			} else if (activePath == '/index/bCbd') {
				this.BFourSituations(path) //跳转到大数据平台
				// this.$router.push('/index/home')
			} else if (activePath == '/index/bQxz') {
				// this.$router.push('/index/home')
				this.BFourSituations(path) //跳转到大数据平台
			} else if (activePath == '/index/bSy') {
				// this.$router.push('/index/home')
				this.BFourSituations(path) //跳转到大数据平台
			} else if (activePath == '/index/bBzy') {
				// this.$router.push('/index/home')
				this.BFourSituations(path) //跳转到大数据平台
			}
		},
		BFourSituations(path) {
			const { href } = this.$router.resolve({
				path: path
			})
			window.open(href, '_blank')
		},
		goBD(path) {
			const { href } = this.$router.resolve({
				path: path
			})
			window.open(href, '_blank')
		}
	}
}
</script>

<style scoped lang="less">
@keyframes ringing {
	0% {
		transform: rotate(-15deg);
	}
	2% {
		transform: rotate(15deg);
	}
	12%,
	4% {
		transform: rotate(-18deg);
	}
	14%,
	6% {
		transform: rotate(18deg);
	}
	8% {
		transform: rotate(-22deg);
	}
	10% {
		transform: rotate(22deg);
	}
	16% {
		transform: rotate(-12deg);
	}
	18% {
		transform: rotate(12deg);
	}
	20% {
		transform: rotate(0);
	}
}
.el-header {
	height: 189px !important;
	background: url(../assets/images/headBj.jpg) no-repeat center;
	background-size: 100% 100%;
	.navbarBtn {
		color: #fff;
		.userinfo {
			font-size: 12px;
			text-align: right;
			margin-top: 10px;
			.userheadImg {
				width: 35px;
				height: 35px;
				border-radius: 50%;
				vertical-align: middle;
				margin-right: 6px;
			}
		}
		.caption {
			margin-top: 7px;
			text-align: center;
			font-size: 16px;
			letter-spacing: 0.5px;
			.tit {
				font-size: 20px;
				line-height: 46px;
				font-weight: 700;
				letter-spacing: 7px;
			}
		}
	}
}
.site{
	position: absolute;
    right: 10px;
    top: 199px;
    z-index: 888;
	font-size: 14px;
	color: #226a4d;
	span{
		color: #333;
		letter-spacing: 1px;
		font-size: 13px;
	}
}
/deep/.el-dropdown-menu__item {
	padding: 0 10px;
}
.el-popper.newsDropdown {
	padding: 0;
	margin: 0;
	h5 {
		background: #35a478;
		color: #fff;
		padding: 15px;
		text-transform: uppercase;
		font-size: 11px;
		margin: 0;
	}
	/deep/.popper__arrow {
		border-bottom-color: #35a478;
		&::after {
			border-bottom-color: #35a478;
		}
	}
	ul {
		border: 1px solid #ddd;
		border-top: 0;
		padding: 0 10px;
		.news {
			display: block;
			margin: 0;
			float: none;
			background: none;
			padding: 5px 5px;
			border-bottom: 1px solid #eee;
			.txtContent {
				max-width: 250px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				display: inline-block;
				min-width: 250px;
				// display: flex;
				a {
					color: #333;
					font-size: 12px;
					padding: 7px 10px;
					-moz-border-radius: 2px;
					-webkit-border-radius: 2px;
					border-radius: 2px;
					-moz-transition: all 0.2s ease-out 0s;
					-webkit-transition: all 0.2s ease-out 0s;
					transition: all 0.2s ease-out 0s;
				}
				a:hover {
					background: none;
					color: #428bca;
					text-decoration: none;
				}
			}
		}
	}
}
.sysAside {
	position: absolute;
	z-index: 999;
	left: 0;
	top: 60px;
	bottom: 0;
	z-index: 999;
	transition: all 0.5s;
}
.el-aside {
	// background-color: #3D4C5A;
	color: #333;
	// line-height: 200px;
	// .el-menu-item.is-active{background:#17BB89!important}
	// .el-submenu__title i{color:#fff}
	.el-menu {
		border: none;
	}
	.iconfont {font-size:18px;margin-right:10px;}
	.icon-chouchongbug{font-size:22px;}
}
.changeHomeItem {
	text-align: center;
	img {
		width: 100%;
		height: 110px;
	}
	.tit {
		margin-top: 10px;
	}
}
</style>