|
|
@@ -1,9 +1,8 @@
|
|
|
<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>
|
|
|
@@ -13,14 +12,14 @@
|
|
|
<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="tjForm.approvalPersonName">郑强</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<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="selectType">
|
|
|
+ <button class="mui-btn mui-btn-block" type='button' v-text="tjForm.typeName"></button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
@@ -37,24 +36,236 @@
|
|
|
<div class="mui-col-xs-3">
|
|
|
<img src="~$project/assets/img/zhaop.jpg" />
|
|
|
</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>
|
|
|
+ 提交
|
|
|
+ </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
-</div>
|
|
|
+
|
|
|
+ <loading :visible="isLoading"></loading>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ require('$project/assets/js/mui.picker.min.js');
|
|
|
+ import * as API_WeiXin from '$project/apis/weixin'
|
|
|
+ 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 wx from 'weixin-js-sdk'
|
|
|
+ export default {
|
|
|
+ name: 'MasterAttendanceApply',
|
|
|
+ components: {
|
|
|
+ Common,
|
|
|
+ Loading,
|
|
|
+ TopHeader
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pageTitle: '补卡申请',
|
|
|
+
|
|
|
+ isLoading: false,
|
|
|
+
|
|
|
+ subForm: {
|
|
|
+ workAttendanceId: this.$route.query.id
|
|
|
+ },
|
|
|
+ tjForm: {
|
|
|
+ workAttendanceDate: '',
|
|
|
+ workAttendanceTime: '',
|
|
|
+ type: '2', //外勤打卡/补卡（1/2）
|
|
|
+ content: '',
|
|
|
+ approvalPersonId: '',
|
|
|
+ workAttendanceId: this.$route.query.id,
|
|
|
+ photoFile: '',
|
|
|
+ longitude: '',
|
|
|
+ latitude: '',
|
|
|
+ },
|
|
|
+ personList: [],
|
|
|
+ picList: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取微信配置
|
|
|
+ getWxConfig() {
|
|
|
+ this.isLoading = true;
|
|
|
+ API_WeiXin.getConfig().then(response => {
|
|
|
+ var wxconfig = response.wxConfig;
|
|
|
+ console.log(wxconfig.nonceStr)
|
|
|
+ this.wxConfig = wxconfig;
|
|
|
+ wx.config({
|
|
|
+ debug: false, // 开启调试模式,
|
|
|
+ appId: wxconfig.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
|
|
|
+ timestamp: wxconfig.timestamp, // 必填，生成签名的时间戳
|
|
|
+ nonceStr: wxconfig.nonceStr, // 必填，生成签名的随机串
|
|
|
+ signature: wxconfig.signature, // 必填，签名，见附录1
|
|
|
+ jsApiList: ['chooseImage', 'getLocalImgData'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
|
|
|
+ });
|
|
|
+
|
|
|
+ this.isLoading = false;
|
|
|
+ }).catch(error => {
|
|
|
+ this.isLoading = false;
|
|
|
+ mui.toast(error);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //微信选择图片
|
|
|
+ chooseImage() {
|
|
|
+ var _this = this;
|
|
|
+ wx.chooseImage({
|
|
|
+ count: 1,
|
|
|
+ sizeType: ['compressed'],
|
|
|
+ sourceType: ['album', 'camera'],
|
|
|
+ success: function(res) {
|
|
|
+ var localIds = res.localIds;
|
|
|
+ console.log(localIds);
|
|
|
+ wx.getLocalImgData({
|
|
|
+ localId: localIds[0],
|
|
|
+ success: function(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();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //上传图片
|
|
|
+ uploadpic() {
|
|
|
+ this.isLoading = true;
|
|
|
+ var _this = this;
|
|
|
+ var formData = new FormData();
|
|
|
+ formData.append('photoName', '1.jpg');
|
|
|
+ formData.append('photoBase64Data', this.imgBase64);
|
|
|
+
|
|
|
+ console.log(formData);
|
|
|
+ console.log(typeof formData);
|
|
|
+
|
|
|
+ API_Common.uploadBase64(formData).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.tjForm.approvalPersonName = selectItems[0].text;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //类型选择
|
|
|
+ selectType() {
|
|
|
+ var picker = new mui.PopPicker();
|
|
|
+ if (this.tjForm.type = 2) {
|
|
|
+ var data = [{
|
|
|
+ value: '2',
|
|
|
+ text: '补卡'
|
|
|
+ }]
|
|
|
+ } else {
|
|
|
+ var data = [{
|
|
|
+ value: '1',
|
|
|
+ text: '外勤打卡'
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ picker.setData(data);
|
|
|
+ var _this = this;
|
|
|
+ picker.show(function(selectItems) {
|
|
|
+ _this.tjForm.type = selectItems[0].value;
|
|
|
+ _this.tjForm.typeName = selectItems[0].text;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ asynCallBack() {
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getTime();
|
|
|
+ this.getPsersonList();
|
|
|
+ this.getWxConfig();
|
|
|
+ },
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ...mapGetters({
|
|
|
+ openId: 'wx_openid',
|
|
|
+ token: 'token',
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
|
|
|
<style scoped src="$project/assets/css/iconfont.css"></style>
|
|
|
-<style>
|
|
|
+<style scoped src="$project/assets/css/mui.picker.min.css"></style>
|
|
|
+<style scoped>
|
|
|
</style>
|
