bigDataApp/pages/equipMange/index/useroperation.vue

<template>
	<view class="">
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 44px;">
			<view style="position: fixed;z-index: 100;">
				<uni-nav-bar left-icon="back" left-text="返回" @clickLeft="clickLeft" title="用户详情"></uni-nav-bar>
			</view>
			<view class="useroperations">
				<u-form :model="user_meg" ref="uForm" class="uForm">
					<view class="uFormbg">
						<u-form-item label="姓名" left-icon="account" :left-icon-style="lefticonstyle" label-width="160rpx" :border-bottom="borderbottom"
						 prop="name">
							<u-input v-model="user_meg.username" :clearable="clearable" input-align="right" disabled />
						</u-form-item>
					</view>
					<view class="uFormbg">
						<u-form-item label="电话" left-icon="phone" :left-icon-style="lefticonstyle" label-width="160rpx" :border-bottom="borderbottom"
						 prop="intro">
							<u-input v-model="user_meg.mobile" :clearable="clearable" input-align="right" :disabled="alterTF" :class="{'uuinput':alterTF==false}"
							 @blur="bluechange(user_meg.mobile)" />
						</u-form-item>
						<p class="tishi" v-if="tishitf">手机格式错误</p>
					</view>
					<view class="uFormbg">
						<u-form-item label="主题" left-icon="calendar" :left-icon-style="lefticonstyle" label-width="160rpx" :border-bottom="borderbottom"
						 prop="passwold">
							<u-input v-model="theme_items" :clearable="clearable" input-align="right" :disabled="true" :class="{'uuinput':alterTF==false}"
							 type="selete" @click="theme_show = !alterTF" />
							<u-action-sheet :list="theme" v-model="theme_show" @click="themes" scroll-y="true"></u-action-sheet>
						</u-form-item>
					</view>
					<view class="uFormbg">
						<u-form-item label="用户类型" left-icon="grid" :left-icon-style="lefticonstyle" label-width="160rpx" :border-bottom="borderbottom">
							<u-input v-model="users_type[user_meg.user_type-1].text" :clearable="clearable" input-align="right" disabled />
						</u-form-item>
					</view>
					<view class="uFormbg">
						<u-form-item label="用户角色" left-icon="account-fill" :left-icon-style="lefticonstyle" label-width="160rpx"
						 :border-bottom="borderbottom">
							<u-input v-model="user_meg.role_name" :clearable="clearable" input-align="right" placeholder="请选择主题" :disabled="true"
							 :class="{'uuinput':alterTF==false}" @click="users_type_show = !alterTF" />
						</u-form-item>
					</view>
					<view class="uFormbg">
						<u-form-item label="是否可用" left-icon="order" :left-icon-style="lefticonstyle" label-width="160rpx" :border-bottom="borderbottom">
							<u-input v-model="tf" :clearable="clearable" input-align="right" disabled />
						</u-form-item>
					</view>
					<view class="uFormbg">
						<u-form-item label="创建时间" left-icon="clock" :left-icon-style="lefticonstyle" label-width="160rpx" :border-bottom="borderbottom">
							<u-input :clearable="clearable" input-align="right" disabled :value="user_meg.addtime|timeFormat()" />
						</u-form-item>
					</view>
				</u-form>
			</view>
			<view class="operation_group">
				<view class="group_one" v-if="btnTF">
					<view class="group_one_top">
						<button type="default" @click="recharge">充值</button>
						<button type="default" @click="compile">编辑</button>
						<button type="default" @click="forbidden" v-if="forbiddenTF" style="background-color: red;">禁用</button>
						<button type="default" @click="forbidden" v-else>可用</button>
						<button type="default" @click="changePassword">修改密码</button>
					</view>
					<view class="group_one_bot">
						<button type="default" @click="assignment">分配设备</button>
					</view>
				</view>
				<view class="group_two" v-else>
					<button type="default" @click="modification" :disabled="tijiaotf">确定</button>
				</view>
			</view>
			<u-popup v-model="users_type_show" mode="bottom" length="30%" class="pop-up">
				<scroll-view scroll-y="true" class="sheet">
					<view class="sheet-text" v-for="(item,index) in roles" :key="index">
						<p @click="typesofroles(index)">{{item.text}}</p>
					</view>
				</scroll-view>
				<button @click="users_type_show = false">取消</button>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_meg: {},
				lefticonstyle: {
					'color': "#57C878"
				},
				borderbottom: false,
				clearable: false,
				tf: "",
				usersofrole_show: true,
				btnTF: true,
				users_type: [{
					text: '超级管理员'
				}, {
					text: '经销商'
				}, {
					text: '农林政府单位'
				}, {
					text: '普通用户'
				}],
				users_type_show: false,
				forbiddenTF: null,
				alterTF: true,
				theme: [],
				theme_show: false,
				theme_items: '--',
				roles: [],
				roles_id: null,
				tishitf: false,
				tijiaotf: false
			}
		},
		methods: {
			async getForbidden() { //获取用户的使用状态
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=user.login.users_statu_updata',
					data: {
						uid: this.user_meg.uid,
						state: this.user_meg.state == '1' ? 4 : 1 //1是正常  4是禁用
					}
				})
				console.log(res)
				if (this.user_meg.state == "1" && res == true) {
					this.user_meg.state = '4'
					console.log(this.user_meg.state)
				} else {
					this.user_meg.state = '1'
					console.log(this.user_meg.state)
				}

				if (this.user_meg.state == '1') {
					this.tf = "正常"
					this.forbiddenTF = true
				} else if (this.user_meg.state == '4') {
					this.tf = "禁止使用"
					this.forbiddenTF = false
				}
			},
			async getGroup() { //获取用户的主题信息
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=pest.warning_record.rolemanage_view'
				})
				for (var i = 0; i < res.data.length; i++) {
					let obj = {}
					obj.text = res.data[i].role_describe
					obj.id = res.data[i].id
					if(obj.text != ''){
						this.theme.push(obj)
					}
					if (this.user_meg.user_group_id == res.data[i].id) { //根据主题id更改主题
						this.theme_items = res.data[i].role_describe
					}
					console.log(this.theme)
				}
			},
			async getThemes() { //获取用户角色
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=user.perms.role_list'
				})
				for (var i = 0; i < res.length; i++) {
					let obj = {}
					obj.text = res[i].role_name
					obj.id = res[i].role_id
					this.roles.push(obj)
				}
			},
			compile() { //编辑按钮
				this.btnTF = !this.btnTF
				this.alterTF = false
			},
			forbidden() { //禁用按钮
				this.getForbidden()
			},
			themes(index) { //主题下拉框
				this.theme_items = this.theme[index].text;
				this.user_meg.user_group_id_index = this.theme[index].id;
			},
			async getModification() { //修改用户
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=user.login.users_info_updata',
					data: {
						uid: this.user_meg.uid,
						mobile: this.user_meg.mobile,
						user_group_id: this.user_meg.user_group_id_index || '',
						user_type: this.user_meg.user_type,
						role_id: this.roles_id || this.user_meg.role_id
					},
				})
			},
			modification() { //修改用户确认按钮
				this.getModification()
				this.btnTF = true
				this.alterTF = true
			},
			typesofroles(idnex) { //主题下拉框选项按钮
				this.user_meg.role_name = this.roles[idnex].text
				this.users_type_show = false
				this.roles_id = this.roles[idnex].id
			},
			bluechange(str) { //手机号框失去焦点时检测手机号
				let regexp = /^1[23456789]\d{9}$/
				this.tishitf = !regexp.test(str)
				if (regexp.test(str)) {
					this.tijiaotf = !regexp.test(str)
				} else {
					this.tijiaotf = regexp.test(str)
				}

			},
			clickLeft() { //返回上一页按钮
				uni.navigateTo({
					url: './index'
				});
			},
			changePassword() { //修改密码
				uni.navigateTo({
					url: './changepasswold?item=' + JSON.stringify(this.user_meg)
				});
			},
			assignment() { //分配设备
				uni.navigateTo({
					url: './assignment?item=' + JSON.stringify(this.user_meg)
				});
			},
			async getRecharge() { //修改用户
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=user.login.user_add_package_time',
					data: {
						uid: this.user_meg.uid,
						user_test: 1
					},
				})
			},
			recharge() { //充值按钮
				uni.showModal({
					title: '提示',
					content: '是否向该用户充值一年费用?',
					success: function(res) {
						if (res.confirm) {
							this.getRecharge()
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		onLoad(option) {
			this.user_meg = JSON.parse(option.item)
			console.log(this.user_meg)
			if (this.user_meg.state == '1') {
				this.tf = "正常"
				this.forbiddenTF = true
			} else if (this.user_meg.state == '4') {
				this.tf = "禁止使用"
				this.forbiddenTF = false
			}
			this.getGroup()
			this.getThemes()
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false;
			}
			this.clickLeft();
			return true;
		},
	}
</script>

<style lang="scss">
	.useroperations {
		width: 100%;
		display: flex;
		justify-content: center;

		.uForm {
			margin-top: 44px;
			width: 95%;

			.uFormbg {
				width: 100%;
				background-color: #f3f3f3;
				margin-top: 20rpx;
			}

			.tishi {
				text-align: center;
				font-size: 24rpx;
				color: red;
			}

			.u-form-item {
				width: 95%;
				height: 80rpx;
				margin: 0 auto;
				padding: 5rpx 0;
			}

			.uuinput {
				background-color: white;
			}
		}
	}

	.operation_group {
		.group_one {
			.group_one_top {
				width: 90%;
				margin: 20rpx auto;
				display: flex;
				justify-content: space-around;

				button {
					width: 23%;
					height: 60rpx;
					line-height: 60rpx;
					background-color: $uni-color-success;
					color: white;
					font-size: 24rpx;
				}
			}

			.group_one_bot {
				width: 90%;
				margin: 20rpx auto;

				button {
					height: 60rpx;
					line-height: 60rpx;
					background-color: $uni-color-success;
					color: white;
					font-size: 30rpx;
				}
			}
		}

		.group_two {
			width: 90%;
			margin: 20rpx auto;

			button {
				background-color: $uni-color-success;
				color: white;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
			}
		}

	}

	.pop-up {
		.sheet {
			background-color: white;
			height: 400rpx;
			overflow: hidden;
			.sheet-text {
				height: 80rpx;
				p {
					text-align: center;
					height: 80rpx;
					line-height: 80rpx;
					color: black;
					font-size: 16px;
				}
			}

		}

		button {
			color: black;
			position: absolute;
			bottom: 0;
			width: 100%;
			font-size: 16px;
			height: 80rpx;
		}
	}
</style>