异地打卡

src/projects/business/views/Master/Attendance/Sign.vue

@@ -1,26 +1,25 @@
 <template>
-<div>
-    <header class="mui-bar mui-bar-nav">
-			<h1 class="mui-title">异地打卡</h1>
-			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
-		</header>
+	<div>
+		<common @asynCallBack="asynCallBack"></common>
+		<top-header :pageTitle="pageTitle"></top-header>
+
 		<div class="mui-content vongi-wordcard">
 			<div class="mui-content-padded vongi-wordcard-padded">
 				<h5>当前打卡班次</h5>
-				<h3>2020-04-18<span>07:30 - 09:00</span></h3>
+				<h3>{{tjForm.workAttendanceDate}}<span v-text="tjForm.workAttendanceTime"></span></h3>
 			</div>
 			<div class="mui-content-padded">
 				<form class="mui-input-group">
 					<div class="mui-input-row">
 						<label><span class="colorfe616c">*</span>审批人</label>
-						<div class="mui-navigate-right">
-							<button id='showUserPicker' class="mui-btn mui-btn-block" type='button'>请选择</button>
+						<div class="mui-navigate-right" @click="selectPerson">
+							<button class="mui-btn mui-btn-block" type='button' v-text="approvalPersonName"></button>
 						</div>
 					</div>
 					<div class="mui-input-row">
 						<label><span class="colorfe616c">*</span>定位</label>
 						<div class="vongi-yidi-location mui-ellipsis">
-							<button class="mui-btn mui-btn-block" type='button'>江津东路荆鹏软件园附近</button>
+							<button class="mui-btn mui-btn-block" type='button' v-text="positionName"></button>
 							<span class="mui-icon mui-icon-location"></span>
 						</div>
 
@@ -30,31 +29,266 @@
 			<div class="mui-content-padded">
 				<h5>备注</h5>
 				<div class="mui-input-row">
-					<textarea id="textarea" rows="5" placeholder="请输入"></textarea>
+					<textarea v-model="tjForm.content" rows="5" placeholder="请输入"></textarea>
 				</div>
 			</div>
 			<div class="mui-content-padded">
 				<h5>上传照片</h5>
 				<div class="fyy-upphoto">
-					<div class="mui-col-xs-3 fyy-upphoto-close">
-						<img src="~$project/assets/img/zhaop.jpg" />
-						<a class="mui-icon mui-icon-closeempty"></a>
+					<div class="mui-col-xs-3" v-for="(item,index) in picList">
+						<img :src="item" @click="delPic(item)" />
 					</div>
-					<div class="mui-col-xs-3">
+					<div class="mui-col-xs-3" @click="chooseImage">
 						<a><span class="mui-icon mui-icon-plusempty"></span></a>
 					</div>
 				</div>
 			</div>
 			<div class="vongi-btn">
-				<button class="mui-btn mui-btn-primary " type="submit">
+				<button class="mui-btn mui-btn-primary" type="button" @click="submit">
 					提交
 				</button>
 			</div>
 		</div>
-</div>
+	</div>
 </template>
 
 <script>
+	require('$project/assets/js/mui.picker.min.js');
+	import * as API_Attendance from '@/apis/Master/attendance'
+	import Common from '$project/components/Common.vue'
+	import Loading from '$project/components/Loading.vue'
+	import TopHeader from '$project/components/TopHeader.vue'
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	import * as WxJsApi from '$project/utils/wxJsApi'
+	import MapLoader from '$project/utils/AMap'
+	export default {
+		name: 'MasterAttendanceSign',
+		components: {
+			Common,
+			Loading,
+			TopHeader
+		},
+		data() {
+			return {
+				pageTitle: '异地打卡',
+
+				isLoading: false,
+
+				subForm: {
+					workAttendanceId: ''
+				},
+				tjForm: {
+					workAttendanceDate: '',
+					workAttendanceTime: '',
+					type: '1', //外勤打卡/补卡（1/2）
+					content: '',
+					approvalPersonId: '',
+					workAttendanceId: '',
+					photoFile: '',
+					longitude: '',
+					latitude: '',
+				},
+				//typeName: '',
+				approvalPersonName: '',
+				personList: [],
+				picList: [],
+				positionName: '',
+			}
+		},
+		created() {
+
+		},
+		methods: {
+			//获取详情
+			getTime() {
+				this.isLoading = true;
+				API_Attendance.patchCard(this.subForm).then(response => {
+
+					this.tjForm.workAttendanceDate = response.workAttendanceDate;
+					this.tjForm.workAttendanceTime = response.workAttendanceTime;
+
+					this.isLoading = false;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//获取审核人列表
+			getPsersonList() {
+				this.isLoading = true;
+				API_Attendance.getApprovalList().then(response => {
+
+					this.personList = response.data;
+
+					this.isLoading = false;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//微信选择图片
+			chooseImage() {
+				WxJsApi.chooseImage().then(res => {
+					var localData = res.localData;
+
+					if (localData.indexOf('data:image') != 0) {
+						//判断是否有这样的头部
+						localData = 'data:image/jpeg;base64,' + localData
+					}
+					localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
+					this.imgBase64 = localData;
+					//显示裁剪图片
+					//_this.showCropper(field);
+					this.uploadpic();
+				}).catch(error => {
+					mui.toast(error);
+				})
+			},
+			//上传图片
+			uploadpic() {
+				this.isLoading = true;
+				WxJsApi.uploadPic(this.imgBase64).then(response => {
+					this.isLoading = false;
+
+					this.picList.push(response);
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//选择审核人
+			selectPerson() {
+				var _this = this;
+				var picker = new mui.PopPicker();
+				picker.setData(_this.syPersonList);
+				picker.show(function(selectItems) {
+					_this.tjForm.approvalPersonId = selectItems[0].value;
+					_this.approvalPersonName = selectItems[0].text;
+				})
+			},
+			//表单检测
+			checkFrom() {
+				if (!this.tjForm.type) {
+					mui.toast('请选择打卡类型');
+					return false;
+				} else if (!this.tjForm.approvalPersonId) {
+					mui.toast('请选择审批人');
+					return false;
+				} else if (!this.tjForm.content) {
+					mui.toast('请输入申请内容');
+					return false;
+				} else {
+					return true;
+				}
+			},
+			//提交
+			submit() {
+				this.tjForm.photoFile = this.picList.join(',');
+				if (this.checkFrom()) {
+					this.isLoading = true;
+					API_Attendance.postPatchCard(this.tjForm).then(response => {
+						this.isLoading = false;
+						this.$router.push({
+							name: 'Master',
+							query: {}
+						})
+					}).catch(error => {
+						this.isLoading = false;
+						mui.toast(error);
+					})
+				}
+			},
+			//删除图片
+			delPic(item) {
+				let picList = this.picList;
+				let index = picList.indexOf(item);
+				if (index > -1) {
+					picList.splice(index, 1);
+				}
+				this.picList = picList;
+			},
+			//获取经纬度
+			getPoint() {
+				WxJsApi.getLocation().then((res) => {
+					this.tjForm.latitude = res.latitude;
+					this.tjForm.longitude = res.longitude;
+				})
+			},
+			//获取定位地址
+			getPositionByLonLats(lng, lat) {
+				var _this = this;
+				MapLoader().then(AMap => {
+					var lnglatXY = [lng, lat];
+					AMap.service('AMap.Geocoder', function() {
+						geocoder = new AMap.Geocoder({});
+						geocoder.getAddress(lnglatXY, function(status, result) {
+							if (status === 'complete' && result.info === 'OK') {
+								var address = result.regeocode.formattedAddress;
+								console.log(address);
+								_this.positionName = address;
+							} else {
+								_this.positionName = '无法获取定位';
+							}
+						});
+					});
+				})
+			},
+			asynCallBack() {
+
+			},
+		},
+		mounted() {
+			//获取微信配置
+			WxJsApi.getWxConfig(['chooseImage', 'getLocalImgData', 'getLocation']);
+			//获取经纬度
+			this.getPoint();
+			this.getTime();
+			this.getPsersonList();
+		},
+		destroyed() {},
+		computed: {
+			syPersonList: {
+				// getter
+				get: function() {
+					let list = [];
+					this.personList.forEach(function(item, index) {
+						list.push({
+							value: item.id,
+							text: item.name
+						});
+					})
+					return list;
+				},
+				// setter
+				set: function(newValue) {
+					console.log(newValue)
+				}
+			},
+			typeName: {
+				// getter
+				get: function() {
+					if (this.tjForm.type == '1') {
+						return '外勤打卡';
+					} else if (this.tjForm.type == '2') {
+						return '补卡';
+					} else {
+						return '无';
+					}
+				},
+				// setter
+				set: function(newValue) {
+					console.log(newValue)
+				}
+			},
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+			})
+		}
+	}
 </script>
 
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>

src/projects/business/views/Master/Home.vue

@@ -64,10 +64,10 @@
 						</a>
 					</li>
 					<li class="mui-table-view-cell mui-media mui-col-xs-3">
-						<a href="javascript:void(0)">
+						<router-link :to="{name:'MasterAttendanceSign'}">
 							<img src="~$project/assets/img/cicon05.png" />
 							<div class="mui-media-body">异地打卡</div>
-						</a>
+						</router-link>
 					</li>
 					<li class="mui-table-view-cell mui-media mui-col-xs-3 kfz">
 						<a href="javascript:void(0)">

src/utils/AMap.js

@@ -0,0 +1,17 @@
+export default function MapLoader() {
+	return new Promise((resolve, reject) => {
+		if (window.AMap) {
+			resolve(window.AMap)
+		} else {
+			var script = document.createElement('script')
+			script.type = 'text/javascript'
+			script.async = true
+			script.src = 'http://webapi.amap.com/maps?v=1.4.15&callback=initAMap&key=09abadb2e35fc61fd84042c518e9aebf'
+			script.onerror = reject
+			document.head.appendChild(script)
+		}
+		window.initAMap = () => {
+			resolve(window.AMap)
+		}
+	})
+}

src/utils/wxJsApi.js

@@ -67,3 +67,22 @@ export function uploadPic(imgBase64) {
 	});
 	return promise;
 }
+
+//获取坐标
+export function getLocation() {
+	let promise = new Promise((resolve, reject) => {
+		wx.ready(function() {
+			wx.getLocation({
+				type: 'gcj02', // 默认为wgs84的gps坐标，可传入'gcj02'
+				success: function(res) {
+					resolve(response);
+				},
+				faile: function(res) {
+					reject(res);
+				},
+				complete() {}
+			})
+		})
+	})
+	return promise;
+}