RT_SY/src/pages/systemmanger/UserManger.vue

<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>系统管理</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="search-box">
			<div class="filter-box">
				<el-select
					size="small"
					v-model="role"
					placeholder="请选择角色类型"
					clearable
					@change="checkList()"
				>
					<el-option
						v-for="item in roleList"
						:label="item.role_name"
						:value="item.role_id"
						:key="item.role_id"
					></el-option>
				</el-select>
				<el-select
					size="small"
					v-model="userTypeCheck"
					placeholder="请选择用户类型"
					clearable
					@change="checkList()"
				>
					<el-option label="超级管理员" :value="1"></el-option>
					<el-option label="经销商" :value="2"></el-option>
					<el-option label="农林政府单位" :value="3"></el-option>
					<el-option label="普通用户" :value="4"></el-option>
				</el-select>
				<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 type="primary" size="mini" @click="addUser()"
				>添加新用户</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
							v-if="item.state == 1"
							src="@/assets/images/systemManger/user.png"
						/>
						<img
							v-if="item.state == 4"
							src="@/assets/images/systemManger/user_dis.png"
						/>
						<p>{{ item.username }}</p>
						<div>
							<el-button type="text" @click="login(item.uid, item.username)"
								>一键登录</el-button
							>
						</div>
					</div>
					<div class="detail">
						<p>
							创建时间
							<span>{{ (item.addtime * 1000) | formatTime }}</span>
						</p>
						<p>
							用户角色
							<span>{{ item.role_name }}</span>
						</p>
						<p>
							用户所属
							<span>{{ item.regiest_source_name || '--' }}</span>
						</p>
						<p>
							用户类型
							<span>{{ item.user_type | formatUserType }}</span>
						</p>
						<p>
							用户手机号
							<span>{{ item.mobile }}</span>
						</p>
						<p>
							上次登录
							<span>{{ (item.login_time * 1000) | formatTime }}</span>
						</p>
						<p>
							用户到期时间
							<span>{{ (item.expire_time * 1000) | formatTime }}</span>
						</p>
					</div>
					<div class="btn">
						<a @click="recharge(item.uid)">
							<i class="iconfont icon-chongzhi"></i>充值
						</a>
						<a @click="edit(item)">
							<i class="iconfont icon-iconfontedit"></i>编辑
						</a>
						<template v-if="item.state == 1">
							<a @click="forbidUse(item.uid, 4, '确认禁用该用户?')">
								<i class="iconfont icon-jinyong"></i>禁用
							</a>
						</template>
						<template v-else>
							<a @click="forbidUse(item.uid, 1, '确认恢复该用户?')">
								<i class="iconfont icon-jinyong"></i>恢复
							</a>
						</template>
						<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/expertDiagnosis/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="addUserDialogVisible"
			width="30%"
			@close="addUserDialogClosed"
		>
			<el-form
				ref="addUserFormRef"
				:model="addUserForm"
				label-width="80px"
				:rules="addUserFormRules"
			>
				<el-form-item label="用户名 : " prop="username">
					<el-input v-model="addUserForm.username"></el-input>
				</el-form-item>
				<el-form-item label="电话 : " prop="mobile">
					<el-input v-model="addUserForm.mobile"></el-input>
				</el-form-item>
				<el-form-item label="密码  : " prop="pass">
					<el-input v-model="addUserForm.pass"></el-input>
				</el-form-item>
				<el-form-item label="角色类型 : ">
					<el-select
						style="width: 100%"
						size="small"
						v-model="addUserForm.role_id"
						placeholder="请选择角色类型"
					>
						<el-option
							v-for="item in roleList"
							:label="item.role_name"
							:value="item.role_id"
							:key="item.role_id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="主题 : " prop="user_group_id">
					<el-select
						style="width: 100%"
						clearable
						v-model="addUserForm.user_group_id"
						placeholder="请选择主题"
					>
						<el-option
							v-for="(item, index) in userGroupList"
							:label="item.role_describe"
							:value="item.id"
							:key="index"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="用户类型 : " prop="user_type" v-if="userType == 1">
					<el-select
						style="width: 100%"
						clearable
						v-model="addUserForm.user_type"
						@change="userTypeChange"
						placeholder="请选择角色类型"
					>
						<el-option label="超级管理员" :value="1"></el-option>
						<el-option label="经销商" :value="2"></el-option>
						<el-option label="农林政府单位" :value="3"></el-option>
						<el-option label="普通用户" :value="4"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="用户类型 : " prop="user_type" v-if="userType != 1">
					<el-select
						style="width: 100%"
						clearable
						v-model="addUserForm.user_type"
						@change="userTypeChange"
						placeholder="请选择角色类型"
					>
						<el-option label="普通用户" :value="4"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="省/市/区 : " v-show="editIsShow" prop="pcd">
					<el-select
						style="width: 100%"
						clearable
						v-model="addUserForm.pcd"
						placeholder="请选择省、市、县"
						@change="pcdChange"
					>
						<el-option label="省" value="1"></el-option>
						<el-option label="市" value="2"></el-option>
						<el-option label="县" value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="省/市/区 : " v-show="editIsShow" prop="user_area">
					<el-select
						style="width: 100%"
						clearable
						v-model="addUserForm.user_area"
						placeholder="请选择省、市、县"
						@change="pcdChange"
					>
						<el-option
							:label="item"
							:value="item"
							v-for="item in areaList"
							:key="item"
						></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addUserDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addUserSubm">确认</el-button>
			</span>
		</el-dialog>
		<!-- 用户编辑 -->
		<el-dialog
			title="用户信息编辑"
			:visible.sync="editUserDialogVisible"
			width="500px"
			@close="editUserDialogClosed"
		>
			<el-form
				ref="editUserFormRef"
				:model="editUserForm"
				label-width="80px"
				:rules="editUserFormRules"
			>
				<el-form-item label="用户名 : ">
					<el-input v-model="editUserForm.username" disabled></el-input>
				</el-form-item>
				<el-form-item label="电话 : " prop="mobile">
					<el-input v-model="editUserForm.mobile"></el-input>
				</el-form-item>
				<el-form-item label="角色类型 : " prop="role_id">
					<el-select
						style="width: 100%"
						clearable
						v-model="editUserForm.role_id"
						placeholder="请选择角色类型"
					>
						<el-option
							v-for="item in roleList"
							:label="item.role_name"
							:value="item.role_id"
							:key="item.role_id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="用户组 : " prop="user_group_id">
					<el-select
						style="width: 100%"
						clearable
						v-model="editUserForm.user_group_id"
						placeholder="请选择用户组"
					>
						<el-option
							v-for="(item, index) in userGroupList"
							:label="item.role_describe"
							:value="item.id"
							:key="index"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="用户类型 : " prop="user_type" v-if="userType == 1">
					<el-select
						disabled
						style="width: 100%"
						clearable
						v-model="editUserForm.user_type"
						@change="userTypeChange"
						placeholder="请选择角色类型"
					>
						<el-option label="超级管理员" :value="1"></el-option>
						<el-option label="经销商" :value="2"></el-option>
						<el-option label="农林政府单位" :value="3"></el-option>
						<el-option label="普通用户" :value="4"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="用户类型 : " prop="user_type" v-if="userType != 1">
					<el-select
						disabled
						style="width: 100%"
						clearable
						v-model="editUserForm.user_type"
						@change="userTypeChange"
						placeholder="请选择角色类型"
					>
						<el-option label="普通用户" :value="4"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					label="省/市/区 : "
					v-show="editIsShow || editUserForm.user_type == 3"
					prop="pcd"
				>
					<el-select
						style="width: 100%"
						clearable
						v-model="editUserForm.pcd"
						placeholder="请选择省、市、县"
						@change="pcdChange"
					>
						<el-option label="省" value="1"></el-option>
						<el-option label="市" value="2"></el-option>
						<el-option label="县" value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					label="省/市/区 : "
					v-show="editIsShow || editUserForm.user_type == 3"
					prop="user_area"
				>
					<el-select
						style="width: 100%"
						clearable
						v-model="editUserForm.user_area"
						placeholder="请选择省、市、县"
						@change="pcdChange"
					>
						<el-option
							:label="item"
							:value="item"
							v-for="item in areaList"
							:key="item"
						></el-option>
					</el-select>
				</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>
	</div>
</template>

<script>
import cityData from './citydata'
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 {
			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: '',
				user_group_id: '' //用户组id
			},
			cityData,
			editUserForm: {},
			//控制省/市/区显示
			editIsShow: false,
			//编辑用户规则
			editUserFormRules: {
				user_phone: [{ validator: checkMobile, trigger: 'blur' }]
			},
			//添加用户规则
			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' }
				]
			}
		}
	},
	computed: {
		//获取用户类型
		userType: function () {
			return window.sessionStorage.getItem('myuser_type')
		}
	},
	created() {
		this.getRoleList()
	},
	mounted() {
		this.getList()
		this.getUserGroup() //获取用户组
	},
	methods: {
		getRoleList() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=user.perms.role_list'
			}).then((res) => {
				if (res.data.message == '') {
					this.roleList = res.data.data.map((item) => {
						return {
							role_id: item.role_id,
							role_name: item.role_name
						}
					})
				}
			})
		},
		getList() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=user.login.users_info',
				data: this.qs.stringify({
					role_id: this.role,
					page_size: 8,
					user_type: this.userTypeCheck,
					page: this.page,
					username: this.username
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.userList = res.data.data.data
					this.totalNum = res.data.data.count
				}
			})
		},
		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 = role
			if (role.role_id == 0) {
				//把0转换成""
				this.editUserForm.role_id = ''
			}
			this.editUserDialogVisible = true
		},
		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.uid = id
			// this.resetPassForm.username = name
			// this.resetPassDialogVisible = true
			this.$confirm('是否重置密码 ? 重置后的密码为 yf_123456', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$axios({
						method: 'POST',
						url: '/api/api_gateway?method=user.login.admin_changepwd',
						data: this.qs.stringify({
							uid: id
						})
					}).then((res) => {
						if (res.data.message == '') {
							this.$message({
								type: 'success',
								message: '操作成功!'
							})
							this.getList()
						} else {
							this.$message({
								type: 'warning',
								message: res.data.message
							})
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '取消重置密码！'
					})
				})
		},
		resetPassSubm() {
			//暂时不用
			this.$refs.resetPassFormRef.validate((valid) => {
				if (!valid) return
				this.$axios({
					method: 'POST',
					url: '/api/api_gateway?method=user.login.changepwd',
					data: this.qs.stringify({
						uid: this.resetPassForm.uid,
						old_password: this.resetPassForm.oldPass,
						new_password: this.resetPassForm.pass,
						confirm_password: this.resetPassForm.checkPass
					})
				}).then((res) => {
					if (res.data.message=='') {
						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
				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
					})
				}).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/api_gateway?method=user.login.users_info_updata',
					data: this.qs.stringify({
						uid: this.editUserForm.uid,
						// username: this.editUserForm.username,
						mobile: this.editUserForm.mobile,
						role_id: this.editUserForm.role_id,
						user_type: this.editUserForm.user_type,
						pcd: this.editUserForm.pcd,
						user_area: this.editUserForm.user_area,
						user_group_id: this.editUserForm.user_group_id
					})
				}).then((res) => {
					if (res.data.message == '') {
						this.editUserDialogVisible = false
						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;
		a {
			flex: 1;
			margin: 0 8px;
			border: 1px solid #17bb89;
			color: #17bb89;
			border-radius: 4px;
			font-size: 12px;
			padding: 5px 5px;
			cursor: pointer;
			i {
				font-size: 12px;
				margin-right: 2px;
			}
		}
	}
}
// 暂无数据
.expertDiagnosis_referral_units_not {
	width: 272px;
	margin: 0 auto;
}
</style>