yuanqu_ui/work/pages/yyorder/limitdetail.vue

<template>
	<view>
		<view class="navbox">
			<uni-nav-bar color="#ffffff" left-icon="left" title="人员权限" :background-color="backgroundColor"
				:border="false" statusBar='true' fixed="true" @clickLeft='getBack'>
			</uni-nav-bar>
		</view>
		<image :src="navbg" class="navbg"></image>
		<view class="zxmain" :style="'margin-top:-'+marTop+'rpx;'">
			<view class="ytbox">
				<uni-forms ref="form" class="ytforms"  :modelValue="datainfo">
					<view class="ytsbox">
						<view class="yttit">人员信息</view>
						<view class="pt5">
							<uni-forms-item label="姓名"   name="personneName">
								<uni-easyinput :inputBorder="false"  v-model="datainfo.personneName" placeholder="请输入姓名">
								</uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="联系方式"   name="personnePhone">
								<uni-easyinput :inputBorder="false"  v-model="datainfo.personnePhone" placeholder="请输入联系方式">
								</uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="门禁权限" name="guard">
								<view class="pickbox" @click="getRecorddwFn">
									<view class="flexc flex1">
										<view class="flex1 f14" v-if="datainfo.guard&&!mjtxt">{{}}</view>
										<view class="flex1 f14" v-else :class="mjtxt?'':'coa'">{{mjtxt||"请选择门禁"}}</view>
										<image :src="hupimg" class="hupimg"></image>
									</view>
								</view>	
							</uni-forms-item>
							<uni-forms-item label="是否启用"  name="isEnable">
								<view class="pickbox">
									<view class="flexc flex1" >
										<uni-data-checkbox :selectedColor="actcolor" selectedTextColor='#222327' v-model="datainfo.isEnable" :localdata="qylist" />
									</view>
								</view>	
							</uni-forms-item>
							
							<uni-forms-item label="部门"   name="deptName">
								<view class="pickbox" @click="getRecordbmFn">
									<view class="flexc flex1">
										<view class="flex1 f14" :class="datainfo.deptName?'':'coa'">{{datainfo.deptName||"请选择部门"}}</view>
										<image :src="hupimg" class="hupimg"></image>
									</view>
								</view>	
							</uni-forms-item>
						</view>
						<view class="ybtn flexcc" @click="getSubmit">确认提交</view>
						<view class="tips"></view>
					</view>	
				</uni-forms>
			</view>
		</view>
		<!-- 选择门禁类型 -->
		<bartree-pickerfixed ref="treePickerzrdw" deptType='1' :multiple='true' @select-change="selectChangezrdw" title="选择门禁"
		:localdata="mjlist" :selectedData="selectedData" :checkVal='datainfo.guard'  valueKey="value" textKey="label" childrenKey="children"></bartree-pickerfixed>
		<!-- 选择部门 -->
		<bartree-pickerfixed ref="treePickerbm" deptType='1' :multiple='false' @select-change="selectChangebm" title="选择部门"
		:localdata="depTree" :selectedData="selectedDatabm" :checkVal='datainfo.deptName'  valueKey="id" textKey="label" childrenKey="children"></bartree-pickerfixed>
	</view>
</template>

<script>
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import {getManagementAdd,getManagementPut,getManagementDetail} from "@/api/mine/work.js"
	import {getDictionaryFn} from "@/api/mine/register.js"
	import {selectValueKey} from "@/utils/common.js"
	import {getDeptFn} from "@/api/mine/mine.js"
	import bartreePickerfixed from "@/work/components/ba-tree-picker/ba-tree-pickerfixed.vue"
	export default {
		components: {bartreePickerfixed},
		data() {
			return {
				hupimg:require("@/static/images/order/hup.png"),
				navbg:require("@/static/images/navbg.png"),
				backgroundColor: "transparent",
				nvaHeight: 44,
				marTop: 0, //距离顶部的距离
				stubarHeight: 0, //
				datainfo:{
					"personneId":"",//ID
					"personneName":"",//人员姓名
					"personnePhone":"",//人员手机号
					"deptId":"",//部门id
					"deptName":"",//部门名称
					"humanFaceData":"",//人脸数据
					"guard":"",//门禁
					"isEnable":"0"//是否启用  0：是，1：否 
				},
				mjtxt:'',
				qylist:[{text:'是',value:'0'},{text:'否',value:'1'}],
				selectedData:[],
				selectedDatabm:[],
				actcolor:'#00A9F0',
				qyidx:[],
				sfqy:'',
				mjlist:[],
				depTree:[],
				ptype:'add',
				id:'',
				// name:this.$store.state.user.name,
				// userId:this.$store.state.user.userId,
				// deptId:this.$store.state.user.deptId,
				// deptName:this.$store.state.user.deptName,
			}
		},
		onPageScroll(e) {
			var scrollTop = Number(e.scrollTop);
			if (scrollTop > 0) {
				this.backgroundColor = '#0491FD'
			} else {
				this.backgroundColor = 'transparent'
			}
		},
		onLoad: function(e) {
			this.init()
			if(e.data){
				var data=JSON.parse(decodeURIComponent(e.data))
				if(data.type){
					this.ptype=data.type;
					this.id=data.id;
					this.getDetail()
				}
			}
			// this.getDataFn()
			uni.getSystemInfo({
				success: (e) => {
					this.stubarHeight = Number(e.statusBarHeight);
					this.nvaHeight = Number(e.statusBarHeight) + 44;
					this.tabscheight = Number(this.nvaHeight) * 2 + 100;
				}
			})
		},
		onShow() {},
		mounted() {
			this.getHeightFn()
		},
		methods: {
			checkPermi,
			checkRole,
			getBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			statusFormat(ite,list,type) {
				var aite=selectValueKey(list, ite);
				this.qyidx=aite.key
				return aite.actions;
			},
			statusFormats(ite,list,type){//多选匹配
				if(ite&&list&&list.length){
					var actions = [];
					var newArr=[];
					list.forEach(s => {
						if(ite.indexOf(s.value)>-1){
							actions.push(s.label);
							// var obj={
							// 	deptId:s.value,
							// 	deptName:s.label
							// }
							newArr.push(s.value)
						}
					})
					this.selectedData=newArr
					return actions.join(',')
				}else{
					return ''
				}	
			},
			init() {
				// 门禁
				getDictionaryFn('menj').then(res=>{
					if(res.code==200){
						this.mjlist = res.data.map(v => {
							return {
								label: v.dictLabel,
								value: v.dictValue
							}
						})
					}
				})
				getDeptFn().then(res=>{
					if(res.code==200){
						this.depTree=res.data
					}
				})
			},
			getRecorddwFn(){
				this.$refs.treePickerzrdw._show();
			},
			getRecordbmFn(){
				this.$refs.treePickerbm._show();
			},
			selectChangezrdw(e){
				var val=e;
				var newArr=[],newVal=[];
				var a=0;
				e.forEach((ite,idx)=>{
					newArr[idx]=ite.deptName
					newVal[idx]=ite.deptId
				})
				this.mjtxt=newArr.join(',')
				this.datainfo.guard=newVal.join(',');
			},
			selectChangebm(e){
				var val=e;
				this.datainfo.deptId=e[0].deptId
				this.datainfo.deptName=e[0].deptName
			},
			getHeightFn() {
				let query = uni.createSelectorQuery().in(this);
				//需要给黄色区域设置一个id标识，在这里是demo
				query.select('.navbox').boundingClientRect(data => {
					var top = data.top < 0 ? -data.top : data.top;
					var stubarHeight = Number(this.stubarHeight);
					this.marTop = stubarHeight > 0 ? 692 - Number(data.height) * 2 : 692 - Number(data.height) *
						2 + 40 //赋值，待会要用
					if (top <= this.nvaHeight) {
						const opacity = top / 100 // 计算透明度值
						const color = `rgba(4, 145, 253, ${opacity})`
						this.backgroundColor = color // 更新盒子背景颜色
					} else {
						this.backgroundColor = '#00A9F0'
					}
				}).exec();
			},
			getSubmit() {
				var that=this;
				var params = JSON.parse(JSON.stringify(this.datainfo))
				if(!params.personneName){
					this.$toast("请输入人员姓名")
					return
				}
				if(!params.personnePhone){
					this.$toast("请输入联系方式")
					return
				}
				if(!this.mjtxt){
					this.$toast("请选择门禁权限")
					return
				}
				if(!params.deptName){
					this.$toast("请选择部门")
					return
				}
				let regphone = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
				if (params.personnePhone && !regphone.test(params.personnePhone)) {
					that.$toast("请输入正确的手机号")
					return
				}
				uni.showLoading({
					title:"加载中"
				})
				if(this.ptype=='add'){
					getManagementAdd(params).then(res => {
						uni.hideLoading()
						if (res.code == 200) {
							this.$toast("新增成功")
							setTimeout(function(){
								uni.$emit('refreshlimitlist')
								uni.navigateBack({
									delta:1
								})
							},1200)
						} else {
							this.$toast(res.msg)
						}
					})
				}else{
					getManagementPut(params).then(res => {
						uni.hideLoading()
						if (res.code == 200) {
							this.$toast("修改成功")
							setTimeout(function(){
								uni.$emit('refreshlimitlist')
								uni.navigateBack({
									delta:1
								})
							},1200)
						} else {
							this.$toast(res.msg)
						}
					})
				}
			},
			getDetail(){
				getManagementDetail(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=JSON.parse(JSON.stringify(res.data))
						this.mjtxt=this.statusFormats(res.data.guard,this.mjlist)
						var deptId=res.data.deptId;
						var newArr=[];
						newArr.push(deptId)
						this.selectedDatabm=newArr
					}
				})
			}
		},

	}
</script>
<style>
/* 	page {
		background: #ffffff;
	} */
</style>
<style lang="scss" scoped>
.ytbox /deep/ .uni-forms .uni-forms-item{padding: 10rpx 26rpx 10rpx;border: 2rpx solid #0391FD;margin-bottom: 24rpx;border-radius: 12rpx;}
.ytbox /deep/ .uni-forms-item__label{flex: 0 0 auto;width: 144rpx !important;font-size: 28rpx;font-weight: bold;position: relative;color: #161616;text-align-last: justify;}
.ytbox /deep/ .uni-forms-item__label text{flex: 1;}
.ytbox /deep/ .uni-forms-item__label .is-required{position: absolute;right: 0;color: #F10C31;margin-top: 16rpx;}
.ytbox /deep/ uni-textarea{flex: 1;width: auto;text-align: right;}
.ytbox /deep/ .uni-textarea-placeholder{font-size: 28rpx;color: #DDDDDD !important;}
.ytbox /deep/ .uni-easyinput__placeholder-class{font-size: 28rpx;color: #AAAAAA;}
.ytbox /deep/ .uni-forms-item__content{display: flex;align-items: center;flex-direction: row;}
.ytbox /deep/ .uni-easyinput{flex: 1;text-align: right;}
.ytbox /deep/ .uni-easyinput__content-input{font-size: 28rpx;}
 .ytbox /deep/ .uni-forms-item__error{margin-top:20rpx;left: auto;right: 0;}
.ytbox /deep/ .checklist-group{justify-content: end;}
 .disable{background: #EFF0F2;border: none !important;}
 .ytbox{width: 684rpx;margin: 0 auto;padding-top: 24rpx;position: relative;flex: 1;overflow: auto;background-color: #ffffff;padding-bottom: 4rpx;border-radius: 14rpx;}
.ytforms{
	.yttit{font-size: 28rpx;font-weight: bold;margin-bottom: 56rpx;
color: #161616;display: flex;align-items: center;padding: 0rpx 26rpx;box-sizing: border-box;position: relative;
		&::before{content: '';width: 6rpx;height: 34rpx;background: $com-cd3;border-radius: 4rpx;position: absolute;top: 50%;transform: translateY(-50%);left: 0rpx;}
	}
	.ytsbox{background-color: #ffffff;padding: 32rpx 28rpx 0;border-radius: 14rpx;margin-bottom: 24rpx;
		.intit{font-weight: 500;flex: 1;font-size: 26rpx;text-align: right;color: #666666;}
		.pickbox{flex: 1;text-align: right;font-weight: 500;font-size: 28rpx;color: #161616;
			.hupimg{width: 18rpx;height: 14rpx;margin-left: 12rpx;flex: 0 0 auto;}
		}
		
	}
}
// 按钮
	.ybtn{width: 100%;height: 90rpx;background: $com-cd3;border-radius: 14rpx;margin: 100rpx auto 0;font-size: 28rpx;font-weight: 500;color: #FFFFFF;
		&.btn1{background-color: #9a9c9e;}
	}
	.tips{font-weight: bold;margin-top: 28rpx;
font-size: 22rpx;line-height: 34rpx;
color: #FF0000;}

.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;	}
.navbg{width: 100%;height: 692rpx;}	
.zxmain{position: relative;padding: 20rpx 32rpx 40rpx;box-sizing: border-box;display: flex;
		min-height: calc(100vh - 44px);		
}
</style>