xfapp/pages/accountManage/perAdd/perAdd.vue

<template>
	<view class="perAppWrapper">

		<form action="">
			<view style="height:30rpx"></view>
			<view class="form-item selectBox">
				<view class="title">
					<text class="necessary">*</text>
					联系方式:
				</view>
				<!-- <select name="" id="" v-model="phone" clearable>
					<option value="0">请选择</option>
					<option :value="item.phone" v-for="(item,index) in phoneListData" :key="index">{{item.phone}}
					</option>
				</select>
				<text class="icon iconfont margin-right-sm margin-left">&#xe63d;</text> -->
				<view class="example-body">
					<uni-combox :candidates="candidates" placeholder="请选择" v-model="phone"></uni-combox>
				</view>
				
			</view>
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>姓名:</view>
				<input name="input" v-model="name"></input>
			</view>

			<view class="form-item selectBox">
				<view class="title">
					<text class="necessary">*</text>
					所在单位:
				</view>
				<select name="" id="" v-model="company_code" clearable>
					<option value="">请选择</option>
					<option :value="item.owner_code" v-for="(item,index) in companyListData" :key="index"
						style="width:80%">{{item.owner_name}}</option>
				</select>
				<text class="icon iconfont margin-right-sm margin-left">&#xe63d;</text>
			</view>

			<view class="form-item">
				<view class="title"><text class="necessary">*</text>角色权限:</view>
				<radio-group name="gender" @change="radioChange">
					<label class="margin-right">
						<radio value="1" checked /><text>管理员</text>
					</label>
					<label>
						<radio value="2" /><text>普通员工</text>
					</label>
				</radio-group>
			</view>

			<view class="btn-area submitBottomBtn padding-lr-sm">
				<button class="bg-blue round  margin-top" @click="$noMultipleClicks(submit)">提 交 </button>
			</view>
						
			
		
			
		</form>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				noClick:true,
				companyListData: [],
				phoneListData: [],
				"phone": '',
				"company_code": "",
				"radioOne": "1",
				"power": "",
				"name":"",
				"candidates": [],
				city:''



			}
		},
		onLoad: function(option) {
			this.getSiteList();
			this.getPhoneList()

		},
		methods: {
			async submit() {
				//提交验证
				if (!this.phone) {
					uni.showToast({
						title: "请选择联系方式",
						icon: "none"
					});
					return
				}
				if (!this.name.replace(/^\s*/g,'')) {
					uni.showToast({
						title: "请输入姓名",
						icon: "none"
					});
					return
				}
				if (!this.company_code) {
					uni.showToast({
						title: "请选择所在单位",
						icon: "none"
					});
					return
				}
				let res = await this.addAuthority({
					"phone": this.phone,
					"name": this.name,
					"power": this.radioOne,
					"company_code": this.company_code
				})

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

			},

			//手机号码下拉请求数据
			async getPhoneList() {
				const res = await this.$myRequest({
					url: 'PermissionBinding/getphoneList',
				})
				this.phoneListData = res.data.data;

				 this.phoneListData.forEach(e => {
				    this.candidates.push(e.phone)
				})
				console.log(this.candidates)
			},
			//单位下拉请求数据
			async getSiteList() {
				const res = await this.$myRequest({
					url: 'Index/getCompanyList',
				})
				this.companyListData = res.data.data;
			},

			radioChange(e) {
				console.log('type:' + e.detail.value);
				this.radioOne = e.detail.value;
			},

			addAuthority(params = {}) {
				return this.$myRequest({
					url: 'PermissionBinding/setPermissionBinding',
					data: params
				})
			},


			formReset: function(e) {
				console.log('清空数据')
			}





		}
	}
</script>

<style lang="scss">
	.example-body{
		margin:0!important;
		width: calc(100% - 104px);
		z-index:10000
	}
	.uni-combox{
		padding:0 10px 0 0!important
	}
	
</style>