property/property_ui/people/pages/people/staffadd.vue

<template>
	<view class="check">
		<uni-forms ref="form" :model="datainfo" :rules="rules">
			<view class="cbox">
				<view class="chtop flexc">
					<image :src="line"></image>
					<view>员工信息</view>
				</view>
				<view class="chmain">
					<uni-forms-item label="人员姓名" name="staffName">
						<view class="flexc">
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.staffName" :inputBorder='false' placeholder="请输入人员姓名" />
							<view class="rimg"><image :src="rimg"></image></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="人员性别" name="gender">
						<view class="flexc">
							<view class="flex1"></view>
							<uni-data-checkbox :disabled="isdisabled" selectedColor="#0156FE" :map="map" selectedTextColor="#272727" v-model="datainfo.gender" :localdata="ygxbList" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="员工类别" name="staffCategory">
						<!-- <view class="flexc">
							<uni-easyinput v-model="yglb" :inputBorder='false' placeholder="请选择员工类别" />
							<picker range-key='dictLabel' :value="yglbidx" :range="yglbList"   @change='bindDateChange'>
								<view class="rimg"><image :src="rimg"></image></view>
							</picker>
						</view> -->
						<picker range-key='dictLabel' :disabled="isdisabled" :value="yglbidx" :range="yglbList"   @change='bindDateChange'>
							<view class="flexc">
								<view class="flex1 txr f13 co27" v-if="datainfo.staffCategory&&!yglb">{{statusFormats(datainfo.staffCategory,yglbList,'yglb')}}</view>
								<view class="flex1 txr f13" v-else :class="yglb?'co27':'coa'">{{yglb||"请选择员工类别"}}</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="维修类别" name="maintenanceCategory">
						<picker range-key='dictLabel' :disabled="isdisabled" :value="vxlbidx" :range="vxlbList"   @change='bindDateChangea'>
							<view class="flexc">
								<view class="flex1 txr f13 co27" v-if="datainfo.maintenanceCategory&&!vxlb">{{statusFormats(datainfo.maintenanceCategory,vxlbList,'vxlb')}}</view>
								<view class="flex1 txr f13" v-else :class="vxlb?'co27':'coa'">{{vxlb||"请选择维修类别"}}</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="手机号码" name="phoneNumber">
						<view class="flexc">
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.phoneNumber" :inputBorder='false' placeholder="请输入手机号码" />
							<view class="rimg"></view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="身份证号" name="idCard">
						<view class="flexc">
							<uni-easyinput :disabled="isdisabled" v-model="datainfo.idCard" :inputBorder='false' placeholder="请输入身份证号" />
							<view class="rimg"></view>
						</view>
					</uni-forms-item>
				</view>
			</view>
		</uni-forms>
		<view class="pdlr12 mt55">
			<view class="rhbtn" @click="getEditFn" v-if="isdisabled">修改</view>
			<view class="rhbtn" @click="getSubmit" v-else>确定</view>
		</view>

		<loading></loading>
	</view>
</template>

<script>
	import config from '@/config'
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import {staffAdd,staffPut,staffDet} from "@/api/work/people.js"
	import {getDictionaryFn} from "@/api/system/user.js"
	import {selectValueKey} from "@/utils/common.js"
	export default {
		components: {},
		data() {
			return {
				line: require('@/car/static/car/line.png'),
				car: require('@/car/static/car/carico.png'),
				rimg: require('@/people/static/people/rimg.png'),
				aphoto: require('@/people/static/people/aphoto.png'),
				check: require('@/people/static/people/check.png'),
				ncheck: require('@/people/static/people/ncheck.png'),
				baseUrl: config.baseUrl,
				checkflag:true,
				datainfo: {
					// "staffId":"",//员工id员工id
					// "userId":"",//员工账号id
					"staffName":"",//员工姓名
					"gender":"",//员工性别（1男 2女）
					"staffCategory":"",//员工类别，1：保安 2:维修人员 3：物业管理
					"maintenanceCategory":"",//维修分类
					"phoneNumber":"",//手机号码
					// "avatarPhoto":"",//头像
					"idCard":"",//身份证号码
					// "idCardFront":"",//身份证正面
					// "idCardBack":"",//身份证反面
					// "certificate":"",//相关证件
				},
				rules: {
				  staffName: {rules: [{required: true,errorMessage: '请输入人员姓名' }]},
				  gender: {rules: [{required: true,errorMessage: '请选择人员性别' }]},
				  staffCategory: {rules: [{required: true,errorMessage: '请选择员工类别' }]},
				  phoneNumber: {rules: [{required: true,errorMessage: '请输入手机号'}, {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,errorMessage:'请输入正确的手机号码'}]},
				},
				yglb:'',
				vxlb:'',
				yglbidx:0,
				vxlbidx:0,
				ygxbList:[],
				yglbList:[],
				vxlbList:[],
				map:{text:'dictLabel',value:'dictValue'},
				id:'',
				ptype:'add',
				isdisabled:false,
			}
		},
		onLoad: function(e) {
			this.init()
			if(e.id){
				this.id=e.id;
				this.ptype='edit';
				// this.isdisabled=true;
				this.getDetailFn()
			}
		},
		methods: {
			checkPermi,
			checkRole,
			getEditFn(){
				this.isdisabled=false;
			},
			statusFormats(data, list,type) {
				var aite=selectValueKey(list, data);
				if(type=='yglb'){
					this.yglbidx=aite.key
				}else if(type=='vxlb'){
					this.vxlbidx=aite.key;
				}
				return aite.actions;
			},
			init(){
				// 员工类别
				getDictionaryFn('yaungong').then(res=>{
					if(res.code==200){
						this.yglbList = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue: v.dictValue
							}
						})
					}
				})
				// 维修类别
				getDictionaryFn('weixiutype').then(res=>{
					if(res.code==200){
						this.vxlbList = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue: v.dictValue
							}
						})
					}
				})
				//性别
				getDictionaryFn('gender').then(res=>{
					if(res.code==200){
						this.ygxbList = res.data.map(v => {
							return {
								dictLabel: v.dictLabel,
								dictValue: v.dictValue
							}
						})
					}
				})
			},
			bindDateChange(e){
				var val=e.detail.value;
				var vala=this.yglbList[val].dictValue;
				if(vala!=this.datainfo.staffCategory){
					this.datainfo.staffCategory=this.yglbList[val].dictValue;
					this.yglb=this.yglbList[val].dictLabel;
					this.datainfo.maintenanceCategory='';
					this.vxlb='';
					this.vxlbidx=0;
				}
				
			},
			bindDateChangea(e){
				var val=e.detail.value;
				this.datainfo.maintenanceCategory=this.vxlbList[val].dictValue;
				this.vxlb=this.vxlbList[val].dictLabel;
			},
			getSubmit(){
				var that=this;
				this.$refs.form.validate().then(res => {
					var params=JSON.parse(JSON.stringify(this.datainfo))
					// 手机号验证
					let regphone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
					if (params.phoneNumber && !regphone.test(params.phoneNumber)) {
						this.$toast("请输入正确的手机号")
						return
					}
					let _IDRe18 =
						/^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
					let _IDre15 = /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
					// 校验身份证：
					if (params.idCard&&!_IDRe18.test(params.idCard) && !_IDre15.test(params.idCard)) {
						this.$toast("请输入正确身份证号")
						return
					}
					if(this.ptype=='add'){
						staffAdd(params).then(res=>{
							if(res.code==200){
								this.$toast("新增成功")
								setTimeout(function(){
									uni.$emit("refStaffList")
									uni.navigateBack({
										delta:1
									})
								},1500)
							}
						})
					}else{
						staffPut(params).then(res=>{
							if(res.code==200){
								this.$toast("修改成功")
								setTimeout(function(){
									uni.$emit("refStaffList")
									uni.navigateBack({
										delta:1
									})
								},1500)
							}
						})
					}
					
				})
			},
			getDetailFn(){
				staffDet(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=res.data;
					}
				})
			},
			// getaddImage(e) {
			// 	let that = this;
			// 	let file = [],
			// 		count = 9
			// 	uni.chooseImage({
			// 		count: 1,
			// 		success: function(res) {
			// 			let img = res.tempFilePaths;
			// 			if (img.length + file.length > count) {
			// 				uni.showToast({
			// 					title: '最多上传' + count + '张图片',
			// 					icon: 'none',
			// 					duration: 2000
			// 				})
			// 			} else {
			// 				let imglen = res.tempFilePaths.length;
			// 				var fuwufile = [];
			// 				uploadIdentify('/common/upload', img, 0, 0, 0, imglen, fuwufile, function(rs) {
			// 					var resurl = rs[0];
			// 					if (e == 'front') {
			// 						that.datainfo.front = resurl.fileName;
			// 					} else {
			// 						that.datainfo.back = resurl.fileName;
			// 					}
			// 					if (rs && rs.length > 0) {
			// 						var obj = {
			// 							type: e,
			// 							url: resurl.urlOnline
			// 						}
			// 						that.getOcrIdCard(obj)
			// 					}
			// 				})
			// 			}
			// 		}
			// 	});
			// },
			// getOcrIdCard(obj) {
			// 	var params = {
			// 		image: obj.url,
			// 		idCardSide: obj.type
			// 	}
			// 	getOcrIdCard(params).then(res => {
			// 		if (res.code == 200) {
			// 			var datainfo = res.data;
			// 			if (obj.type == 'front') {
			// 				this.datainfo.realName = datainfo.realName;
			// 				this.datainfo.idCard = datainfo.idCard;
			// 				this.datainfo.address = datainfo.address;
			// 			} else {
			// 				this.datainfo.expirationDate = datainfo.expirationDate
			// 			}
			// 		}
			// 	})
			// }
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.check /deep/ .uni-forms-item__error{left:auto;right: 0;margin-top: 10rpx;z-index: 1;}
.check /deep/ .uni-forms-item{min-height: 106rpx;box-sizing: border-box;display: flex;align-items: center;margin-bottom: 0;border-bottom: 2rpx solid #E6E6E6;padding:10rpx 0;}
.check .cbox /deep/ .uni-forms-item:last-child{border: none;}
.check /deep/ .uni-forms-item__label{font-weight: bold;font-size: 26rpx;color: #222327;flex: 0 0 auto;width: auto !important;}
.check /deep/ .uni-easyinput{flex: 1;text-align: right;font-size: 26rpx;color: #222327;}
.check /deep/ .uni-easyinput__content-textarea{min-height: 40rpx;font-size: 26rpx;}
.check /deep/ .uni-easyinput__placeholder-class{font-size: 26rpx;color: #AAAAAA;}
.check /deep/ .uni-input-input{font-size: 26rpx;}
.check /deep/ .uni-textarea-textarea{font-size: 26rpx;}
.check /deep/ .is-disabled{color: #222327;background-color: #ffffff !important;}
.check /deep/ .uni-data-checklist .checklist-group .checklist-box{margin:10rpx 8rpx 10rpx 16rpx;}
.check /deep/ .uni-data-checklist{flex: 0 0 auto;}
.check{min-height: 100vh;padding: 20rpx 18rpx 24rpx;box-sizing: border-box;}
.cbox{background: #FFFFFF;border-radius: 20rpx;flex: 1;margin-bottom: 24rpx;
	.chtop{padding-top: 32rpx;margin-bottom: 8rpx;
		image{width: 14rpx;height: 48rpx;margin-right: 20rpx;}
		view{font-weight: bold;font-size: 32rpx;color: #272727;}
	}
	.chmain{
		padding: 0 32rpx;
		.upbox{height: 224rpx;background: #EFF4FF;border-radius: 20rpx;display: flex;align-items: center;justify-content: center;flex-direction: column;margin-bottom: 8rpx;overflow: auto;
			.img{width: 100%;height: 100%;}
			.addimg{width: 70rpx;height: 70rpx;margin-bottom: 16rpx;}
			view{font-weight: bold;font-size: 26rpx;color: #4C6686;}
		}
		.rimg{width: 16rpx;height: 28rpx;flex: 0 0 auto;margin-left: 20rpx;
			image{width: 100%;height: 100%;}
		}
		.checkimg{width: 80rpx;height: 40rpx;margin-right: 8rpx;}
		.aphoto{padding: 0 24rpx;border-left: 2rpx solid #e6e6e6;margin-left: 26rpx;
			image{width: 40rpx;height: 38rpx;}
		}
	}
	
}
</style>