uniapp/pages/authAdd/authAdd.vue

<template>
	<view class="appWrapper">
		<!-- 权限新增 start -->
		<form action=""  v-if="!phone">
			<view class="form-item margin-top">
				<view class="title">
					<text class="necessary">*</text>
					用户名称
				</view>

				<select name="" id="" v-model="formMess.mobile" filterable clearable>
					<option :value=item.phone v-for="item in phoneData">{{ item.phone}}</option>
				</select>

			</view>
			
			<view class="form-item">
				<view class="title " style="vertical-align:top">
					<text class="necessary">*</text>
					站点:
				</view>
				<view style="position:relative" class="innerZd">
					<input name="siteName" v-model="formMess.siteName" @click="test" @focus="focusfns" @input="handleInput()"
					 placeholder="请输入或选择"></input>

					<view class="siteItems" v-if="isShow" style="max-height:60vh;overflow:auto">
						<view class=" site-item" v-if="!siteItemData.length">暂无结果</view>

						<view class="site-item" v-for="(item,index) in siteItemData" @click="add(item,index)" :key="index">{{item.siteName}}</view>
					</view>
					<view style="width:500rpx;max-height:30vh;overflow:scroll" class="selectedBox">
						<button class="cu-btn  sm margin-xs" v-for="(item,index) in selectedData" @click="deleteItem(item,index)">
							{{item.siteName}}
							<text class="lg text-gray cuIcon-close"></text>
						</button>

					</view>
				</view>


			</view>

			<view class="form-item margin-top">
				<view class="title">
					<text class="necessary">*</text>
					角色权限
				</view>
				<radio-group name="gender" @change="radioChange">
					<label class="margin-right">
						<radio value="2" checked /><text>维护人员</text>
					</label>
					<label>
						<radio value="3" /><text>供电人员</text>
					</label>
				</radio-group>
			</view>

			<view class="btn-area submitBottomBtn padding-lr-sm">
				<button class="bg-blue round  margin-top" @click="addSubmit">提 交 </button>
			</view>
		</form>
		<!-- 权限新增 end -->
		
		
		
		<!-- 权限修改 start -->
		<form action=""  v-else>
			<view class="form-item margin-top">
				<view class="title">
					<text class="necessary">*</text>
					用户名称
				</view>
		
				<select name="" id="" v-model="authorityData.phone" filterable clearable disabled="disabled"> 
					<option :value=item.phone v-for="item in phoneData">{{ item.phone}}</option>
				</select>
		
			</view>
			
			<view class="form-item">
				<view class="title " style="vertical-align:top">
					<text class="necessary">*</text>
					站点:
				</view>
				<view style="position:relative" class="innerZd">
					<input name="siteName" v-model="authorityData.siteName" @click="test" @focus="focusfns" @input="handleInput()"
					 placeholder="请输入或选择"></input>
		
					<view class="siteItems" v-if="isShow" style="max-height:60vh;overflow:auto">
						<view class=" site-item" v-if="!siteItemData.length">暂无结果</view>
		
						<view class="site-item" v-for="(item,index) in siteItemData" @click="add(item,index)" :key="index">{{item.siteName}}</view>
					</view>
					<view style="width:500rpx;max-height:30vh;overflow:scroll" class="selectedBox">
						<button class="cu-btn  margin-xs" v-for="(item,index) in selectedData" @click="deleteItem(item,index)">
							{{item.siteName}}
							<text class="lg text-gray cuIcon-close"></text>
						</button>
		
					</view>
				</view>
		
		
			</view>
		
			<view class="form-item margin-top">
				<view class="title">
					<text class="necessary">*</text>
					角色权限
				</view>
				<radio-group name="gender" @change="radioChange">
					<label class="margin-right">
						<radio value="2" :checked='authorityData.permissionLabel == 2' /><text>维护人员</text>
					</label>
					<label>
						<radio value="3" :checked='authorityData.permissionLabel == 3' /><text>供电人员</text>
					</label>
				</radio-group>
			</view>
		
			<view class="btn-area submitBottomBtn padding-lr-sm">
				<button class="bg-blue round  margin-top" @click="editSbuimt">提 交 </button>
			</view>
		</form>
		<!-- 权限修改 end -->
	</view>
</template>

<script>
	export default {

		data() {
			return {
				index: -1,
				type: '0',
				
				
				phone:'',
				authorityData:{},

				isShow: false,
				formMess: {
					"userName": "",
					"siteName": "",
					"place": "",
					"longitude": "",
					"dimension": "",
					"contactor": "",
					"mobile": "",
					
					
					
				},

				// 站点多选下拉
				siteItemDataOrigin: [],
				selectedData: [],
				phoneData:[],
				siteItemData: [],
				selectedArr: [],
				selectedString: '',
				radioOne: 3,

				
			}
		},

		mounted() {
			document.addEventListener('click', (e) => {
				if (e.target.className != 'uni-input-input') {
					this.isShow = false;
				}
			});
		},
		onLoad: function(option) {
			this.phone = option.phone;
			if (option.phone) {
				uni.setNavigationBarTitle({
					title: '权限修改'
				});
				this.getAuthority({"phone":this.phone})
			} else {
				uni.setNavigationBarTitle({
					title: '权限新增'
				});
			}
			this.getSiteList();
			this.getphoneList()
			
			
			


		},
		methods: {
			
			//修改提交
			editSbuimt(){
				this.selectedArr = [];
				this.selectedData.forEach(item => {
					this.selectedArr.push(item.id)
				})
				
				//修改验证
				
				if (!this.selectedData.length) {
					uni.showToast({
						title: "请选择站点",
						icon: "none"
					});
					return
				}
				console.log('this.selectedData')
				console.log(this.selectedData)
				this.selectedString = this.selectedArr.toString();
				this.setEditAuthority({
					"phone": this.authorityData.phone,
					"siteId": this.selectedString,
					"permissionLabel": this.radioOne
				})
				
			},
			
			
			// 修改请求
			async setEditAuthority(params={}) {
				const res = await this.$myRequest({
					url: 'AuthorityManagement/setEditAuthority',
					data:params
				})
				if (!res.data.flag) {
					uni.showToast({
						title: "添加失败",
						icon: "none"
					});
				} else {
					uni.showToast({
						title: "添加成功",
					});
				}
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/authManage/authManage',
				
					});
				}, 1000);
			
			},
			
			
			// 回显信息请求
			async getAuthority(params={}) {
				const res = await this.$myRequest({
					url: 'AuthorityManagement/getAuthority',
					data:params
				})
				this.authorityData=res.data.data[0]
				this.selectedData=res.data.data[0].siteIdData
			
			},
			
			
			radioChange(e) {
				console.log('type:' + e.detail.value);
				this.radioOne = e.detail.value;
			},
			//新增提交
			async addSubmit() {
				this.selectedArr = [];
				this.selectedData.forEach(item => {
					this.selectedArr.push(item.id)
				})
				this.selectedString = this.selectedArr.toString();
				//提交验证
				if (!this.formMess.mobile) {
					uni.showToast({
						title: "请选择用户",
						icon: "none"
					});
					return
				}
				if (!this.selectedData.length) {
					uni.showToast({
						title: "请选择站点",
						icon: "none"
					});
					return
				}
				let res = await this.addAuthority({
					"phone": this.formMess.mobile,
					"siteId": this.selectedString,
					"permissionLabel": this.radioOne
				})

				if (!res.data.flag) {
					uni.showToast({
						title: "添加失败",
						icon: "none"
					});
				} else {
					uni.showToast({
						title: "添加成功",
					});
				}
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/authManage/authManage',

					});
				}, 1000);

			},


			//电话号码下拉请求数据
			async getphoneList() {
				const res = await this.$myRequest({
					url: 'AuthorityManagement/getPhoneList',
				})
			
				this.phoneData = res.data.data;
				console.log(this.phoneData)
				
			},
			//站点下拉请求数据
			async getSiteList() {
				const res = await this.$myRequest({
					url: 'SiteManagement/getSiteList',
				})
				this.siteItemData = res.data.data;
				this.siteItemDataOrigin = res.data.data;
				
			},
			
			
			addAuthority(params = {}) {
				return this.$myRequest({
					url: 'AuthorityManagement/setaddAuthority',
					data: params
				})
			},

			add: function(item, index) {
				this.selectedData.push(item);
				console.log('1111')
				console.log(this.selectedData)	
				this.isShow = false;
				this.formMess.siteName = '';
				this.siteItemData.splice(index, 1);

			},
			deleteItem: function(item, index) {
				this.selectedData.splice(index, 1);
				this.siteItemDataOrigin.push(item);
				//将元素根据搜索内容过滤出来  这里改变了siteItemData
				this.siteItemData = this.getNotSelectItem();
				this.siteItemData = this.siteItemData.filter(item => item.siteName.indexOf(this.formMess.siteName) > -1);
			},

			// 站点多选下拉
			test: function() {
				this.isShow = !this.isShow;
			},
			test2: function() {
				this.isShow = false;
			},
			handleInput() {
				//将元素根据搜索内容过滤出来  这里改变了siteItemData
				this.siteItemData = this.getNotSelectItem();
				this.siteItemData = this.siteItemData.filter(item => item.siteName.indexOf(this.formMess.siteName) > -1);

			},
			// 站点多选下拉 end

			getNotSelectItem() {

				let ok1 = this.siteItemDataOrigin;
				let ok2 = this.selectedData;

				if (ok2.length) {
					for (let i = 0; i < ok2.length; i++) {
						for (let j = 0; j < ok1.length; j++) {
							if (ok1[j] === ok2[i]) { //值已经被选中
								ok1.splice(j, 1);
							}
						}
					}

				}
				return ok1;
			},

			formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				//定义表单规则
				var rule = [{
						name: "userName",
						checkType: "string",
						checkRule: "1,3",
						errorMsg: "姓名应为1-3个字符..."
					},
					// {name:"gender", checkType : "in", checkRule:"男,女",  errorMsg:"请选择性别"},
					// {name:"loves", checkType : "notnull", checkRule:"",  errorMsg:"请选择爱好"}
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					uni.showToast({
						title: "验证通过!",
						icon: "none"
					});
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			},
			formReset: function(e) {
				console.log('清空数据')
			},
			focusfns: function(e) {
				// this.getNotSelectItem();

				//将元素根据搜索内容过滤出来  这里改变了siteItemData

				this.siteItemData = this.getNotSelectItem();


				this.siteItemData = this.siteItemData.filter(item => item.siteName.indexOf(this.formMess.siteName) > -1);
			},





		}
	}
</script>




<style lang="scss">
	page {
		height: 100% !important
	}


	.cu-form-group {
		border-top: 0;

	}

	input,
	select,
	option {
		line-height: 70rpx;
		padding: 0 20rpx;
		height: 70rpx;
		border: 1px solid #EDEDED;
		// width:500rpx!important;
		background-color: #fff;
		box-sizing: border-box;
		appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
		color: #999;


	}

	select:focus,
	select:active,
	select:hover {
		outline: none;
	}

	select {
		background: url(../../static/arrow.png) no-repeat scroll 98% center;
		background-size: 6%;
	}

	.form-item label text {
		position: relative;
		top: 2rpx
	}

	.form-item {
		padding: 0 40rpx;
		display: flex;
		align-items: top;
		margin-bottom: 20rpx;


		.title {
			width: 170rpx;
			position: relative;

			.necessary {
				color: red;
				display: inline-block;
				position: absolute;
				top: -2rpx;
				left: -20rpx;
				font-size: 40rpx;

			}
		}

		input,
		select {
			width: 500rpx;
			font-size: 28rpx;
		}


	}





	/* 站点多选下拉样式 start */

	.layui-btn {
		background-color: #5fb878;
	}

	a {
		text-decoration: none;
	}

	.label {
		padding: 2px 0px;
		background: #aaa;
		border-radius: 2px;
		color: #fff;
		display: block;
		line-height: 20px;
		height: 20px;
		margin: 2px 5px 2px 0;
		float: left;
	}

	.label span {
		padding: 0 5px;
		color: #fff;
	}

	.close {
		padding: 1px 5px !important;
	}

	.close:hover {
		/* background-color: #009E94;
	    border-radius: 2px;
	    color: tomato; */
	}

	.selectId input {
		width: 100% !important;
	}

	.selectId input {
		height: 25px;
		padding: 1px 5px;
		border-radius: 3px;
		width: calc(100% - 12px);
		outline-color: #5fb878;
		border: 1px solid #5fb878;
	}

	.selectId {
		position: relative;
	}

	.selectId dl {
		border: 1px solid #eee;
		border-radius: 3px;
		margin: 2px 0px;
		max-height: 300px;
		overflow-x: hidden;
		white-space: nowrap;
		position: absolute;
		width: 100%;
		top: 40px;
		background: #fff;
		z-index: 1000
	}

	.selectId dl dd {
		margin: 0;
		padding: 5px 10px;
	}

	.selectId dl dd:hover {
		background-color: #5FB878;
		color: white;
	}

	.AD {
		/* width: 210px;
	        margin-left: 40px; */
		overflow-y: auto;
		max-height: 200px;
		/* border: 2px solid #5fb878;
	        border-radius: 6px;
	        padding: 1px 2px; */
	}

	form .AD span {
		width: auto;
	}

	.siteSelect {
		width: 71%;
		display: inline-block;
	}
	.selectedBox .cu-btn{
		padding: 6rpx 20rpx;
		    font-size: 22rpx;
		    height: auto;
		    line-height: 36rpx;
		    text-align: left;
		
	}


	/* 站点多选下拉样式end */
</style>