bigDataApp/pages/equipMange/index/addusers.vue

<template>
	<view>
		<view style="position: fixed;z-index: 100;top: 0;">
			<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" title="用户新增"></uni-nav-bar>
		</view>
		<view class="addusers">
			<u-form :model="form" 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" required>
						<u-input v-model="form.name" :clearable="clearable" input-align="right" placeholder="请输入姓名" />
					</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" required>
						<u-input v-model="form.intro" :clearable="clearable" input-align="right" placeholder="请输入电话" />
					</u-form-item>
				</view>
				<view class="uFormbg">
					<u-form-item label="密码" left-icon="lock" :left-icon-style="lefticonstyle" label-width="160rpx" :border-bottom="borderbottom"
					 prop="passwold" required>
						<u-input v-model="form.passwold" type="password" :clearable="clearable" input-align="right" placeholder="请输入密码" />
					</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="form.typesofrole" type="select" :clearable="clearable" @click="typesofrole[0].show = true"
						 input-align="right" placeholder="请选择角色类型" :select-open="typesofrole[0].show"/>
					</u-form-item>
				</view>
				<view class="uFormbg">
					<u-form-item label="主题" left-icon="calendar" :left-icon-style="lefticonstyle" label-width="160rpx" :border-bottom="borderbottom">
						<u-input v-model="form.theme" :clearable="clearable"  type="select" @click="theme_show = true" input-align="right" placeholder="请选择主题"
						  :select-open="theme_show"/>
						<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="form.usersofrole" type="select" :clearable="clearable" @click="usersofrole_show = true"
						 input-align="right" :placeholder="usersofrole[0].text" :select-open="usersofrole_show"/>
						<u-action-sheet :list="usersofrole" v-model="usersofrole_show" @click="usersofroles"></u-action-sheet>
					</u-form-item>
				</view>
				<view class="uFormbg">
					<u-form-item label="测试用户" left-icon="eye" :left-icon-style="lefticonstyle" label-width="160rpx" :border-bottom="borderbottom">
						<u-input v-model="form.testuser" type="select" :clearable="clearable" @click="testuser_show = true" input-align="right"
						 :placeholder="testuser[0].text" :select-open="testuser_show" />
						<u-action-sheet :list="testuser" v-model="testuser_show" @click="testusers"></u-action-sheet >
					</u-form-item>
				</view>
			</u-form>
		</view>
		<button class="submitbtn" @click="addusers">确 定</button>
		<u-popup v-model="typesofrole[0].show" mode="bottom" length="30%" class="pop-up">
			<scroll-view scroll-y="true" class="sheet">
				<view class="sheet-text" v-for="(item,index) in typesofrole[1]" :key="index">
					<p @click="typesofroles(item.role_name,item.role_id)">{{item.role_name}}</p>
				</view>
			</scroll-view>
			<button @click="typesofrole[0].show = false">取消</button>
		</u-popup>
	</view>
</template>
<style lang="scss">

</style>
<script>
	export default {
		data() {
			return {
				borderbottom: false,
				clearable: false,
				form: {
					name: null,
					intro: null,
					passwold: null,
					typesofrole: null,
					typesofrole_id: null,
					theme: null,
					usersofrole: null,
					usersofrole_id: null,
					testuser: null,
				},
				rules: {
					name: [{
							required: true,
							message: '请输入姓名',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						},
						{
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return value.length < 10 && value.length > 1
							},
							message: '请输入2-10个字符',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					intro: [{
						required: true,
						message: '请输入手机号',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号格式不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
					passwold: {
						required: true,
						message: '请输入密码',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}
				},
				lefticonstyle: {
					'color': '#57C878'
				},
				typesofrole: [{
					show: false
				}],
				theme_show: false,
				theme: [],
				usersofrole_show: false,
				usersofrole: [{
					text: "超级管理员"
				}, {
					text: "经销商"
				}, {
					text: "农林政府单位"
				}, {
					text: "普通用户"
				}],
				testuser_show: false,
				testuser: [{
					text: "是"
				}, {
					text: "否"
				}]
			}
		},
		methods: {
			typesofroles(value, id) {
				this.form.typesofrole = value;
				this.form.typesofrole_id = id
				this.typesofrole[0].show = false
			},
			themes(index) {
				this.form.theme = this.theme[index].text;
			},
			usersofroles(index) {
				this.form.usersofrole = this.usersofrole[index].text;
				this.form.usersofrole_id = index + 1
			},
			testusers(index) {
				this.form.testuser = this.testuser[index].text;
			},
			async getTypesofroles() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=user.perms.role_list'
				})
				this.typesofrole.push(res)
				console.log(res)
			},
			async getThemes() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=pest.warning_record.rolemanage_view'
				})
				console.log(res.data)
				for (var i = 0; i < res.data.length; i++) {
					let obj = {}
					obj.text = res.data[i].role_describe
					obj.role_id = res.data[i].id
					this.theme.push(obj)
				}
			},
			async getaddusers() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=user.login.regiest',
					data: {
						username: this.form.name,
						mobile: this.form.intro,
						password: this.form.passwold,
						role_id: this.form.typesofrole_id ? this.form.typesofrole_id : 1,
						user_type: this.form.usersofrole_id ? this.form.usersofrole_id : 1,
						cs_user: this.form.testuser == "是" ? 1 : 0
					}
				})
			},
			addusers() {
				if (this.form.name && this.form.intro && this.form.passwold) {
					this.getaddusers()
					uni.navigateTo({
						url: './index'
					});
				}
			},
			clickLeft() {
				uni.navigateTo({
					url: './index'
				});
			}
		},
		onLoad() {
			this.getTypesofroles()
			this.getThemes()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

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

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

			.uFormbg {
				width: 100%;
				padding: 0 20rpx;
				margin: 20rpx 0;
				background-color: #F7F8FA;

				.u-form-item {
					padding: 0 10rpx;
				}
			}

		}
	}

	.submitbtn {
		width: 100%;
		position: absolute;
		bottom: 80rpx;
		background-color: $uni-color-success;
		color: white;
	}

	.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>