yuanqu_ui/work/pages/clock/setswork.vue

<template>
	<view class="lists">
		<view class="lbox">
			<view class="list" @click="getAdres">
				<view class="listl">考勤地址</view>
				<view class="listr">{{formData.locations||'请选择考勤地址'}}</view>
			</view>
			<view class="list">
				<view class="listl">考勤范围(米)</view>
				<input class="listi" v-model="formData.distance" placeholder-style="color:#aaaaaa" placeholder="请输入半径米数（单位默认：米）"/>
				<image :src="rimg"></image>
			</view>
			<!-- <view class="list" @click="getDeptname">
				<view class="listl">考勤部门</view>
				<view class="listi" :style="formData.deptName?'':'color:#AAAAAA;'">{{formData.deptName||'选择部门'}}</view>
				<image :src="rimg"></image>
			</view> -->
			<view class="list" >
				<view class="listl">是否开启考勤拍照</view>
				<!-- <view class="listi" > -->
			<picker @change="bindPickerChanges" range-key='label' :value="indexs" :range="surelist" class="listi">
				<view class="f15" :style="isPicture?'':'color: #AAAAAA;'">{{isPicture||"请选择是否开启考勤拍照"}}</view>
			</picker>
					<image :src="rimg"></image>
			</view>
		</view>
		<view class="lbox">
			<!-- <view class="list">
				<view class="listl">打卡次数</view>
				<picker @change="bindPickerChange"  :value="index" :range="array" class="listi">
					<view :style="formData.kaNum?'':'color: #AAAAAA;'">{{formData.kaNum||"请选择打卡次数"}}</view>
				</picker>
				<image :src="rimg"></image>
			</view>
			<block v-if="formData.kaNum==4">
				<view class="list" @click="showDatePicker(0)">
					<view class="listl">上午上班时间</view>
					<view class="listi" :style="formData.kaTimeAmIn?'':'color: #AAAAAA;'">{{formData.kaTimeAmIn||"请选择上班时间"}}</view>
					<image :src="rimg"></image>
				</view>
				<view class="list" @click="showDatePicker(1)">
					<view class="listl">上午下班时间</view>
					<view class="listi" :style="formData.kaTimeAmOut?'':'color: #AAAAAA;'">{{formData.kaTimeAmOut||"请选择上班时间"}}</view>
					<image :src="rimg"></image>
				</view>
				<view class="list" @click="showDatePicker(2)">
					<view class="listl">下午上班时间</view>
					<view class="listi" :style="formData.kaTimePmIn?'':'color: #AAAAAA;'">{{formData.kaTimePmIn||"请选择上班时间"}}</view>
					<image :src="rimg"></image>
				</view>
				<view class="list" @click="showDatePicker(3)">
					<view class="listl">下午下班时间</view>
					<view class="listi" :style="formData.kaTimePmOut?'':'color: #AAAAAA;'">{{formData.kaTimePmOut||"请选择下班时间"}}</view>
					<image :src="rimg"></image>
				</view>
			</block>
			<block v-else> -->
				<view class="list" @click="showDatePicker(0)">
					<view class="listl">上班时间</view>
					<view class="listi"  :style="formData.startWorkTime?'':'color: #AAAAAA;'">{{formData.startWorkTime||"请选择上班时间"}}</view>
					<image :src="rimg"></image>
				</view>
				<view class="list" @click="showDatePicker(3)">
					<view class="listl">下班时间</view>
					<view class="listi"  :style="formData.endWorkTime?'':'color: #AAAAAA;'">{{formData.endWorkTime||"请选择下班时间"}}</view>
					<image :src="rimg"></image>
				</view>
			<!-- </block> -->
		</view>
		
		
		<view class="listbtn" @click="getSure">确认</view>
		<dataTimePicke ref="setpicker" type="time" toolBarTitle="请选择时间" @change="timeChange"></dataTimePicke>
		<!-- 部门 -->
		<selectMorePicker ref="picker" :title="auiPicker.title" :layer="auiPicker.layer" :titflag='auiPicker.titflag'
			:data="auiPicker.data" @callback="pickerCallback"></selectMorePicker>
	</view>
</template>

<script>
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import dataTimePicke from "@/components/timepick/dataTimePicke.vue"
	import selectMorePicker from "@/components/selectMorePicker.vue"
	import {getMapconfig,getBaoconfig,getXiuconfig,getdeptTreeNow} from "@/api/work/check.js"
	export default{
		data(){
			return{
				rimg:require("@/work/static/clock/right.png"),
				type:'add',
				kaTimeAmIn:'',
				formData:{
					"locations": "",
					"lon": "",
					"lat": "",
					"isPicture":'Y',
					"distance": "100",
					"startWorkTime": "09:00:00",
					"endWorkTime": "18:00:00",
				},
				deptName:"",
				array: ['2', '4',],
				index: 0,
				deptId:this.$store.state.user.deptId,
				typetime:"time",
				show:false,
				value:'',
				timeidx:-1,
				auiPicker: {
					title: '选择部门',
					layer: null,
					titflag: true,
					data: []
				},
				indexs:0,
				isPicture:'是',
				surelist:[{
					"label": '是',
					"value":'Y'
				},{
					"label": '否',
					"value":'N'
				}],
				dutyId:'',
				fromurl:'rule',//从哪来的
				
			}
		},
		components:{
			dataTimePicke,selectMorePicker
		},
		onLoad(e) {
			var that=this;
			// 判断是否修改
			uni.$on('refreshaddr',(e) => {
				const value = uni.getStorageSync('location');
				that.formData.locations=value.address;
				that.formData.lon=value.lng;
				that.formData.lat=value.lat;
			})
			// 考勤列表
			if(e.id){
				this.dutyId=e.id
				this.type='update'
				this.getMapconfig();
			}else{
				this.type='add';
				this.formData.locations=e.address||"";
				this.formData.lon=e.lng||'';
				this.formData.lat=e.lat||"";
			}
			if(e.fromurl){
				this.fromurl=e.fromurl
			}
			
		},
		onUnload(){
			uni.$off('refreshaddr')
		},
		
		mounted() {
			// this.getdeptTreeNow();
		},
		methods:{
			checkPermi,checkRole,
			//是否拍照
			showNucleic(){
				this.$refs.nucleinselet.show();
			},
			vacSureChange(e){
				this.formData.isPicture=e[0].value;
			},
			showDatePicker (e) {
				this.timeidx=e;
				this.$refs.setpicker.show();					
			},
			getDeptname(){
				this.$refs.picker.open().then(function() {
				});
			},
			pickerCallback(e) {
				const _this = this;
				let result = '';
				e.data.forEach(function(item, index) {
					if (index == 0) {
						result += item.label;
					} else {
						result += '/' + item.label;
					}
				});
				var len = e.data.length - 1
				_this.deptName = e.data[len].label;
				_this.formData.deptId = e.data[len].id;
				_this.formData.deptName = e.data[len].label;
			},
			getdeptTreeNow() {
				getdeptTreeNow().then(res => {
					if (res.code == 200) {
						if(res.data){
							this.auiPicker.data = res.data;
							// this.formData.deptName=res.data[0].label
							// this.formData.deptId=res.data[0].id
						}
					} else {
						this.$toast(res.msg)
					}
				})
			},
			timeChange(e){
				var that=this;
				if(this.timeidx==0){
					var endTime=this.formData.endWorkTime;
					if(endTime){
						var flag=this.getTimeFn(e,endTime)
						if(flag!=1){
							this.$toast('上班时间晚于下班时间')
							this.formData.endWorkTime=''
						}
					}
					this.formData.startWorkTime=e
				}else if(this.timeidx==3){
					var startt=this.formData.startWorkTime;
					if(!startt){
						this.$toast('请选择上班时间')
						setTimeout(function(){
							that.formData.endWorkTime='';
						},200)
						return
					}
					var flag=this.getTimeFn(startt,e)
					if(flag!=1){
						setTimeout(function(){
							that.formData.endWorkTime='';
						},200)
						this.$toast('下班时间早于上班时间')
						return
					}
					this.formData.endWorkTime=e
				}
			},
			// 时间比较
			getTimeFn(start,end){
				var timea=new Date();
				var timeb=new Date();
				var timeArra=start.split(':');
				timea.setHours(timeArra[0], timeArra[1], timeArra[2], 0);
				var timestra=timea.getTime();
				var timeArrb=end.split(':');
				timeb.setHours(timeArrb[0], timeArrb[1], timeArrb[2], 0);
				var timestrb=timeb.getTime();
				if(timestra>timestrb){
					return 0
				}else{
					return 1
				}	
			},
			cancelFn() {
				this.show = false;
			},
			confirmFn(e) {
				// this.inputValue = this.value
				this.show = false;
			},
			getAdres(){
this.$tab.navigateTo("/work/pages/clock/setwoek?address="+this.formData.locations+'&lng='+this.formData.lon+"&lat="+this.formData.lat+'&type='+this.type+'&fromurl='+this.fromurl)
			},
			bindPickerChange(e){
				var val=e.detail.value
				this.formData.kaNum=this.array[val];
			},
			bindPickerChanges(e){
				var val=e.detail.value;
				this.indexs=val
				this.isPicture=this.surelist[val].label
				this.formData.isPicture=this.surelist[val].value;
			},
			bindStartTimeChange(e){
				this.formData.kaTimeAmIn = e.detail.value
			},
			bindStartTimeChanges(e){
				this.formData.kaTimeAmOut = e.detail.value
			},
			bindEndTimeChanges(e){
				this.formData.kaTimePmIn = e.detail.value
			},
			bindEndTimeChange(e){
				this.formData.kaTimePmOut = e.detail.value
			},
			
			getMapconfig(){
				getMapconfig(this.dutyId).then(res=>{
					if(res.code==200){
						var that=this;
						this.formData=res.data
						var isPicture=res.data.isPicture
						if(isPicture=='Y'){
							this.isPicture='是';
							this.indexs=0;
						}else{
							this.isPicture='否';
							this.indexs=1;
						}	
					}else{
						 this.$toast(res.msg)
					}
					
				})
			},
			getSure(){
				if (this.formData.locations === "") {
					this.$toast('请选择考勤地址')
					return
				} 
				 if (this.formData.distance === "") {
					this.$toast('请输入打卡半径')
					return
				}  
				// if (this.formData.deptId === "") {
				// 	this.$toast('请选择打卡部门')
				// 	return
				// } 
				 if (this.formData.isPicture === "") {
					this.$toast('请选择是否开启拍照打卡')
					return
				}
				if(this.formData.startWorkTime === ""){
					this.$toast('请选择上班时间')
					return
				}
				if(this.formData.endWorkTime === ""){
					this.$toast('请选择下班时间')
					return
				}
				// if(this.formData.kaNum==2){
				// 	if(this.formData.kaTimeAmIn === ""){
				// 		this.$toast('请选择上班时间')
				// 		return
				// 	}
				// 	if(this.formData.kaTimePmOut === ""){
				// 		this.$toast('请选择下班班时间')
				// 		return
				// 	}
				// 	this.formData.kaTimeAmOut='';
				// 	this.formData.kaTimePmIn='';
				// }else{
				// 	if(this.formData.kaTimeAmIn === ""){
				// 		this.$toast('请选择上午上班时间')
				// 		return
				// 	}
				// 	if(this.formData.kaTimeAmOut === ""){
				// 		this.$toast('请选择上午下班时间')
				// 		return
				// 	}
				// 	if(this.formData.kaTimePmIn === ""){
				// 		this.$toast('请选择下午上班时间')
				// 		return
				// 	}
				// 	if(this.formData.kaTimePmOut === ""){
				// 		this.$toast('请选择下午下班时间')
				// 		return
				// 	}
				// }
				// 保存
				if(this.type=='add'){
					getBaoconfig(this.formData).then(res=>{
						if(res.code==200){
							var that=this;
							 this.$toast("保存成功")
							 setTimeout(function(){
								uni.$emit('reashlist')
							 	uni.navigateBack({
							 		delta:1
							 	})
							 },1200)
						}else{
							 this.$toast(res.msg)
						}
						
					})
				}else{
					// 修改
					getXiuconfig(this.formData).then(res=>{
						if(res.code==200){
							var that=this;
							this.$toast("修改成功")
							setTimeout(function(){
								 uni.$emit('reashlist')
								uni.navigateBack({
									delta:1
								})
							},1200)
						}else{
							 this.$toast(res.msg)
						}
						
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss"> 
.lbox{background: #FFFFFF;padding: 0 32rpx;margin-bottom: 28rpx;
box-shadow: 0px 4rpx 6rpx 0px rgba(189,189,189,0.35);
border-radius: 10rpx;}
	.lists{padding: 20rpx 32rpx;
		.list{padding:30rpx 0;display: flex;align-items: center;
			.listl{font-size:30rpx;font-weight: bold;
color: #343434;flex:0 0 auto;margin-right: 26rpx;}
			.listr{font-size: 30rpx;color: #1678FF;flex: 1 ;text-decoration: underline;text-align: right;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
			.listi{font-size:30rpx;color: #343434;flex:1;text-align: right;}
			image{width: 10rpx;height: 18rpx;flex: 0 0 auto;margin-left: 26rpx;}
		}
		.listbtn{width: 100%;height: 76rpx;background: #1678FF;
border-radius: 6px;font-size: 30rpx;color: #FFFFFF;margin-top:70rpx;line-height: 76rpx;text-align: center;}
	}
	.boxtopbb{text-decoration: none;}
</style>