RT_ZB/bigdata2/src/components/UserManger.vue

<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>用户列表</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="search-box">
			<div class="filter-box">
				<el-input
					size="small"
					placeholder="请输入用户名"
					@change="checkList()"
					clearable
					v-model="username"
				>
					<i slot="suffix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>
			
			<el-button v-if="have_type==0||staff==1" type="primary" size="mini" ><a style="color:#fff" href="systemmanage_user_add">添加新用户</a></el-button >
		</div>
		<el-row :gutter="10">
			<el-col
				:xs="24"
				:sm="24"
				:md="12"
				:lg="6"
				:xl="6"
				v-for="item in userList"
				:key="item.uid"
			>
				<el-card class="box-card pad0">
					<div class="img-box">
						<img src="@/assets/images/systemManger/user.png" />
						<p>{{ item.username }}</p>
					</div>
					<div class="detail">
						<p>
							模块类型
							<span v-if="item.user_type == '1' ">农业植保监测系统</span>
							<span v-if="item.user_type == '2' ">农业气象监测系统</span>
							<span v-if="item.user_type == '3' ">环境灾害预警系统</span>
							<span v-if="item.user_type == '4' ">农产品溯源系统</span>
							<span v-if="item.user_type == '5' ">可视农业应用系统</span>
							<span v-if="item.user_type == '6' ">苗情监测应用系统</span>
						</p>
						<p>
							用户类型
							<span v-if="item.user_have_type == '1' ">普通用户</span>
							<span v-if="item.user_have_type == '0' ">管理员</span>
						</p>
						<p>
							站点名称
							<span>{{ item.site || '无' }}</span>
						</p>
						<p>
							站点地址
							<span>{{ item.user_pro }} {{ item.user_city }} {{ item.user_area }}</span>
						</p>
						<p>
							标题
							<span>{{ item.user_header || '--' }}</span>
						</p>
						<p>
							logo
							<span><img style="width: 46px;height: 32px;" :src="item.logo" alt=""></span>
						</p>
					</div>
					<div class="btn">
						<el-button type="success" @click="edit(item)" plain>用户编辑</el-button>
						<el-button type="success" @click="resetPassword(item.id, item.username)" plain>重置密码</el-button>
						<!-- <a @click="edit(item)">
							<i class="iconfont icon-iconfontedit"></i>编辑
						</a>
						<a @click="resetPassword(item.uid, item.username)">
							<i class="iconfont icon-mima"></i>密码
						</a> -->
					</div>
				</el-card>
			</el-col>
		</el-row>
		<!-- 暂无数据 -->
		<div class="expertDiagnosis_referral_units_not" v-if="userList.length <= 0">
			<img
				src="@/assets/images/zanwu.png"
				alt
				class="expertDiagnosis_referral_units_notImg"
			/>
		</div>
		<el-pagination
			v-if="userList.length > 0"
			background
			:page-size="8"
			layout="prev, pager, next"
			:current-page="page"
			:total="totalNum"
			@current-change="changePage"
		></el-pagination>
		<!-- 重置密码 -->
		<el-dialog
			title="重置密码"
			:visible.sync="resetPassDialogVisible"
			width="30%"
			@close="resetPassDialogClosed"
		>
			<el-form
				ref="resetPassFormRef"
				:model="resetPassForm"
				label-width="110px"
				:rules="resetPassFormRules"
			>
				<el-form-item label="用户名 : " prop="username">
					<el-input
						type="text"
						disabled
						v-model="resetPassForm.username"
					></el-input>
				</el-form-item>
				<el-form-item v-if="userType != 1" label="原始密码 : " prop="oldPass">
					<el-input type="password" v-model="resetPassForm.oldPass"></el-input>
				</el-form-item>
				<el-form-item label="新密码 : " prop="pass">
					<el-input type="password" v-model="resetPassForm.pass"></el-input>
				</el-form-item>
				<el-form-item label="确认新密码 : " prop="checkPass">
					<el-input
						type="password"
						v-model="resetPassForm.checkPass"
					></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-dialog
			title="用户信息编辑"
			:visible.sync="editUserDialogVisible"
			width="500px"
			@close="editUserDialogClosed"
		>
			<el-form
				ref="editUserFormRef"
				:model="editUserForm"
				label-width="80px"
			>
				<el-form-item label="用户名 : ">
					<el-input v-model="editUserForm.username" disabled></el-input>
				</el-form-item>
				<el-form-item label="标题 : " >
					<el-input maxlength="11" v-model="editUserForm.user_header"></el-input>
				</el-form-item>
				<el-form-item label="logo : " >
					<el-upload
						class="avatar-uploader"
						action
						:auto-upload="false"
						:show-file-list="false"
						:on-change="changeUpload"
					>
						<img v-if="editUserForm.logo" :src="editUserForm.logo" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="站点名称 : " >
					<el-input maxlength="16" v-model="editUserForm.site"></el-input>
				</el-form-item>
				<el-form-item label="站点位置 : ">
					<div class="block">
						<el-cascader
							placeholder="搜索：河南"
							v-model="cityValue"
							:options="cityData"
							:props="props"
							@change="handleChange"
							filterable
						>
						</el-cascader>
					</div>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editUserDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editUserSubm">确认</el-button>
			</span>
		</el-dialog>
		<!-- vueCropper 剪裁图片实现-->
		<el-dialog title="图片剪裁" :visible.sync="cropperVisible" append-to-body>
			<div class="cropper-content">
				<div style="width: 100%; height: 500px">
					<vueCropper
						ref="cropper"
						:img="photo.img"
						autoCrop
						centerBox
						fixed
						:fixedNumber="photo.fixedNumber"
						:outputSize="photo.size"
						:outputType="photo.outputType"
					></vueCropper>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cropperVisible = false">取 消</el-button>
				<el-button type="primary" @click="finish">确认</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import cityData from './citydata.js'
export default {
	inject: ['reload'],
	data() {
		var checkMobile = (rule, value, callback) => {
			const regMobile = /^1\d{10}$/
			if (regMobile.test(value)) {
				callback()
			} else {
				// 返回一个错误提示
				callback(new Error('请输入合法的手机号码'))
			}
		}
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入新密码'))
			} else {
				if (this.resetPassForm.checkPass !== '') {
					this.$refs.resetPassFormRef.validateField('checkPass')
				}
				callback()
			}
		}
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'))
			} else if (value !== this.resetPassForm.pass) {
				callback(new Error('两次输入密码不一致!'))
			} else {
				callback()
			}
		}
		return {
			zanwu:'/images/expertDiagnosis/zanwu.png',
			role: '', //筛选项 角色类型
			userTypeCheck: '', //筛选项 用户类型
			username: '', //筛选项
			roleList: [],
			page: 1,
			userList: [],
			userGroupList: [],
			totalNum: 0,
			//省市县
			areaList: [],
			resetPassDialogVisible: false,
			addUserDialogVisible: false,
			editUserDialogVisible: false,
			resetPassForm: {
				username: '',
				uid: '',
				oldPass: '',
				pass: '',
				checkPass: ''
			},
			addUserForm: {
				username: '',
				mobile: '',
				pass: '',
				role_id: '',
				user_type: '',
				pcd: '',
				user_area: '',
				cs_user:false,//1为普通用户
				user_group_id:'' //用户组id
			},
			cropperVisible: false,
			// 裁剪组件的基础配置option
			photo: {
				img: '', // 裁剪图片的地址
				info: true, // 裁剪框的大小信息
				outputSize: 0.8, // 裁剪生成图片的质量
				outputType: 'jpeg', // 裁剪生成图片的格式
				// canScale: false, // 图片是否允许滚轮缩放
				// autoCrop: true, // 是否默认生成截图框
				// autoCropWidth: 300, // 默认生成截图框宽度
				// autoCropHeight: 200, // 默认生成截图框高度
				// fixedBox: true, // 固定截图框大小 不允许改变
				fixed: true, // 是否开启截图框宽高固定比例
				fixedNumber: [136, 32], // 截图框的宽高比例
				full: true, // 是否输出原图比例的截图
				canMoveBox: false, // 截图框能否拖动
				original: false, // 上传图片按照原始比例渲染
				centerBox: false, // 截图框是否被限制在图片里面
				infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
			},
			cityData,
			cityValue: [],
			props: {
				expandTrigger: 'hover',
				value: 'value'
			},
			editUserForm: {},
			//控制省/市/区显示
			editIsShow: false,
			//添加用户规则
			addUserFormRules: {
				username: [
					{ required: true, message: '请填写用户名', trigger: 'blur' }
				],
				mobile: [
					{ required: true, trigger: 'blur', message: '手机号不能为空' },
					{ validator: checkMobile, trigger: 'blur' }
				],
				pass: [{ required: true, message: '请填写用户密码', trigger: 'blur' }]
			},
			//重置密码格规则
			resetPassFormRules: {
				oldPass: [{ required: true, message: '请填原始密码', trigger: 'blur' }],
				pass: [
					{ validator: validatePass, trigger: 'blur' },
					{ required: true, message: '请填写新密码', trigger: 'blur' }
				],
				checkPass: [
					{ validator: validatePass2, trigger: 'blur' },
					{ required: true, message: '请确认新密码', trigger: 'blur' }
				]
			},
			have_type:'',
			staff:'',
		}
	},
	computed: {
		//获取用户类型
		userType: function () {
			return window.sessionStorage.getItem('myuser_type')
		}
	},
	created() {
	},
	mounted() {
		this.getList()
		this.have_type = localStorage.getItem('have_type')  // 0管理员  1用户
		this.staff = localStorage.getItem('staff')  // 1是admin
	},
	methods: {
		getList() {
			this.$axios({
				method: 'POST',
				url: '/api/user_list',
				data: this.qs.stringify({
					typelist:1,
					page: this.page,
					uname: this.username
				})
			}).then((res) => {
				this.userList = res.data.userlist
				this.totalNum = res.data.nums
			})
		},
		getUserGroup() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=pest.warning_record.rolemanage_view',
				data: this.qs.stringify({
					add_role: 'all'
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.userGroupList = res.data.data.data
				}
			})
		},
		recharge(id) {
			this.$confirm('是否向该用户充值一年费用?', '信息', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$axios({
						method: 'POST',
						url: '/api/api_gateway?method=user.login.user_add_package_time',
						data: this.qs.stringify({
							uid: id
						})
					}).then((res) => {
						if (res.data.message == '') {
							this.$message({
								type: 'success',
								message: '充值成功!'
							})
							this.getList()
						} else {
							this.$message({
								type: 'error',
								message: '充值失败!'
							})
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '充值取消！'
					})
				})
		},
		// 编辑用户信息
		edit(role) {
			this.editUserForm = JSON.parse(JSON.stringify(role))
			this.editUserDialogVisible = true
			this.cityValue = [this.editUserForm.user_pro,this.editUserForm.user_city,this.editUserForm.user_area]
			
		},
		// 上传按钮   限制图片大小
		changeUpload(file, fileList) {
			const isLt4M = file.size / 1024 / 1024 < 4
			if (!isLt4M) {
				this.$message.error('上传文件大小不能超过 4MB!')
				return false
			}
			// 上传成功后将图片地址赋值给裁剪框显示图片
			this.$nextTick(() => {
				this.photo.img = URL.createObjectURL(file.raw)
				this.cropperVisible = true
			})
		},
		// 点击裁剪，这一步是可以拿到处理后的地址
		finish() {
			// 获取截图的base64 数据
			this.$refs.cropper.getCropBlob((data) => {
				var form = new FormData()
				let resFile = this.blobToFile(data, 'filename.jpg')
				form.append('img_file', resFile)

				this.cropperVisible = false
				this.$axios({
					method: 'POST',
					url: '/api/base_photo',
					data: form
				}).then((res) => {
					this.editUserForm.logo = res.data.src
				})
			})
		},
		//转成file
		blobToFile(Blob, fileName) {
			Blob.lastModifiedDate = new Date()
			Blob.name = fileName
			return Blob
		},
		handleChange(value) {
			console.log(value)
			console.log(this.cityValue)
			this.editUserForm.user_pro = value[0]
			this.editUserForm.user_city = value[1]
			if(value[2]){
				this.editUserForm.user_area = value[2]
			}else{
				this.editUserForm.user_city = value[0].substring(0,value[0].length-1)
				this.editUserForm.user_area = value[1]
			}
		},
		login(uid, username) {
			//一键登录
			this.$confirm('一键登录将登录此用户，是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$axios({
						method: 'POST',
						url: '/api/api_gateway?method=user.login.auto_login',
						data: this.qs.stringify({
							uid
						})
					}).then((res) => {
						if (res.data.message == '') {
							this.$message({
								type: 'success',
								message: '操作成功!'
							})
							localStorage.setItem('username', username) //修改当前登录的用户名
							this.reload() //整体刷新
							this.$EventBus.$on('firstPage', (data) => {
								//默认显示菜单第一项
								this.$router.push(`${data}`)
							})
						} else {
							this.$message({
								type: 'warning',
								message: res.data.message
							})
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '取消一键登录！'
					})
				})
		},
		//用户禁用
		forbidUse(id, state, txt) {
			this.$confirm(txt, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$axios({
						method: 'POST',
						url: '/api/api_gateway?method=user.login.users_statu_updata',
						data: this.qs.stringify({
							uid: id,
							state: state
						})
					}).then((res) => {
						if (res.data.message == '') {
							this.$message({
								type: 'success',
								message: '操作成功!'
							})
							this.getList()
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '禁用取消！'
					})
				})
		},
		//密码重置
		resetPassword(id, name) {
			this.resetPassForm.id = id
			this.resetPassForm.username = name
			this.resetPassDialogVisible = true
		},
		resetPassSubm() {
			//暂时不用
			this.$refs.resetPassFormRef.validate((valid) => {
				if (!valid) return
				this.$axios({
					method: 'POST',
					url: '/api/systemmanage_user_list',
					data: this.qs.stringify({
						id: this.resetPassForm.id,
						req: 'resetpwd',
						userName:this.editUserForm.username,
						userpassWord: this.resetPassForm.pass,
						userRePassWord: this.resetPassForm.pass,
					})
				}).then((res) => {
					if (res.data == 0) {
						this.$message.success('修改密码成功')
						this.resetPassDialogVisible = false
					} else {
						this.$message.error(res.data.message)
					}
				})
			})
		},
		//监听重置密码对话框的关闭事件
		resetPassDialogClosed() {
			this.$refs.resetPassFormRef.resetFields()
		},
		changePage(value) {
			this.page = value
			this.getList()
		},
		//添加用户
		addUser() {
			this.addUserDialogVisible = true
		},
		//监听用户类型改变
		userTypeChange(val) {
			if (val == 3) {
				this.editIsShow = true
			} else {
				this.editIsShow = false
			}
		},
		//监听省/市/区
		pcdChange(val) {
			let addr_type = ''
			switch (val) {
				case '1':
					addr_type = 'province'
					break
				case '2':
					addr_type = 'city'
					break
				case '3':
					addr_type = 'district'
					break
			}
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=device.device_manage.device_addr',
				data: this.qs.stringify({
					addr_type
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.areaList = res.data.data
					this.editUserForm.user_area = ''
				}
			})
		},
		//添加用户提交
		addUserSubm() {
			this.$refs.addUserFormRef.validate((valid) => {
				if (!valid) return
				let cs_user=this.addUserForm.cs_user?'1':''
				this.$axios({
					method: 'POST',
					url: '/api/api_gateway?method=user.login.regiest',
					data: this.qs.stringify({
						username: this.addUserForm.username,
						mobile: this.addUserForm.mobile,
						password: this.addUserForm.pass,
						role_id: this.addUserForm.role_id,
						user_type: this.addUserForm.user_type,
						pcd: this.addUserForm.pcd,
						user_area: this.addUserForm.user_area,
						user_group_id: this.addUserForm.user_group_id,
						cs_user
					})
				}).then((res) => {
					if (res.data.message == '') {
						this.$message.success('添加用户成功！')
						this.addUserDialogVisible = false
						this.getList()
					} else {
						this.$message.error(res.data.message)
					}
				})
			})
		},
		addUserDialogClosed() {
			this.$refs.addUserFormRef.resetFields()
		},
		//修改用户信息提交
		editUserSubm() {
			this.$refs.editUserFormRef.validate((valid) => {
				if (!valid) return
				this.$axios({
					method: 'POST',
					url: '/api/user_detail',
					data: this.qs.stringify(this.editUserForm)
				}).then((res) => {
					if (res.data == 1) {
						this.editUserDialogVisible = false
						var curr = localStorage.getItem('username');
						if(curr == this.editUserForm.username){
							window.location.reload()
						}else{
							this.getList()
						}
					}
				})
			})
		},
		editUserDialogClosed() {
			this.$refs.editUserFormRef.resetFields()
			this.areaList = [] //清空省/市/区
			this.editIsShow = false
		},
		checkList() {
			this.page = 1
			this.getList()
		}
	},
	filters: {
		formatUserType(value) {
			switch (value) {
				case 1:
					return '超级管理员'
					break
				case 2:
					return '经销商'
					break
				case 3:
					return '农林政府单位'
					break
				case 4:
					return '普通用户'
					break
			}
		}
	}
}
</script>

<style lang='less' scoped>
.search-box {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	.filter-box > div {
		margin-right: 15px;
	}
	.el-input {
		width: 200px;
	}
	.el-date-editor--daterange {
		width: 222px;
	}
}
.el-card {
	.img-box {
		text-align: center;
		border-bottom: 1px solid #e1e1e1;
		padding: 15px 0;
		p {
			font-size: 14px;
			font-weight: 800;
			margin-top: 10px;
		}
	}
	.detail {
		border-bottom: 1px solid #e1e1e1;
		padding: 10px 0;
		padding: 0 20px;
		p {
			display: flex;
			justify-content: space-between;
			font-size: 13px;
			line-height: 34px;
			color: #666;
			padding: 0 0px;
		}
	}
	.btn {
		text-align: center;
		padding: 20px 10px;
		display: flex;
		justify-content: space-around;
		button {
			// flex: 1;
			margin: 0 8px;
			border: 1px solid #17bb89;
			color: #17bb89;
			// border-radius: 4px;	
			// font-size: 12px;
			// padding: 5px 5px;
			background: #fff;
			cursor: pointer;
			i {
				font-size: 12px;
				margin-right: 2px;
			}
		}
		button:hover{
			background: #fff;
			border: 1px solid #47d9ad;
    		color: #47d9ad;
		}
	}
}
// 暂无数据
.expertDiagnosis_referral_units_not {
	width: 272px;
	margin: 0 auto;
}
</style>