|
@@ -6,20 +6,20 @@
|
|
<div class="mui-content vongi-wordcard">
|
|
<div class="mui-content vongi-wordcard">
|
|
<div class="mui-content-padded vongi-wordcard-padded">
|
|
<div class="mui-content-padded vongi-wordcard-padded">
|
|
<h5>当前打卡班次</h5>
|
|
<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>
|
|
<div class="mui-content-padded">
|
|
<div class="mui-content-padded">
|
|
<form class="mui-input-group">
|
|
<form class="mui-input-group">
|
|
<div class="mui-input-row">
|
|
<div class="mui-input-row">
|
|
<label><span class="colorfe616c">*</span>选择审批人</label>
|
|
<label><span class="colorfe616c">*</span>选择审批人</label>
|
|
<div class="mui-navigate-right" @click="selectPerson">
|
|
<div class="mui-navigate-right" @click="selectPerson">
|
|
- <button class="mui-btn mui-btn-block" type='button' v-text="tjForm.approvalPersonName">郑强</button>
|
|
|
|
|
|
+ <span class="mui-btn mui-btn-block" type='button' v-text="approvalPersonName"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mui-input-row">
|
|
<div class="mui-input-row">
|
|
- <label><span class="colorfe616c">*</span>选择补卡类型</label>
|
|
|
|
|
|
+ <label><span class="colorfe616c">*</span>选择打卡类型</label>
|
|
<div class="mui-navigate-right" @click="selectType">
|
|
<div class="mui-navigate-right" @click="selectType">
|
|
- <button class="mui-btn mui-btn-block" type='button' v-text="tjForm.typeName"></button>
|
|
|
|
|
|
+ <span class="mui-btn mui-btn-block" v-text="typeName"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</form>
|
|
@@ -27,14 +27,14 @@
|
|
<div class="mui-content-padded">
|
|
<div class="mui-content-padded">
|
|
<h5><span class="colorfe616c">*</span>申请理由</h5>
|
|
<h5><span class="colorfe616c">*</span>申请理由</h5>
|
|
<div class="mui-input-row">
|
|
<div class="mui-input-row">
|
|
- <textarea id="textarea" rows="5" placeholder="请输入"></textarea>
|
|
|
|
|
|
+ <textarea v-model="tjForm.content" rows="5" placeholder="请输入"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mui-content-padded">
|
|
<div class="mui-content-padded">
|
|
<h5>上传照片</h5>
|
|
<h5>上传照片</h5>
|
|
<div class="fyy-upphoto">
|
|
<div class="fyy-upphoto">
|
|
- <div class="mui-col-xs-3">
|
|
|
|
- <img src="~$project/assets/img/zhaop.jpg" />
|
|
|
|
|
|
+ <div class="mui-col-xs-3" v-for="(item,index) in picList">
|
|
|
|
+ <img :src="item" />
|
|
</div>
|
|
</div>
|
|
<div class="mui-col-xs-3" @click="chooseImage">
|
|
<div class="mui-col-xs-3" @click="chooseImage">
|
|
<a><span class="mui-icon mui-icon-plusempty"></span></a>
|
|
<a><span class="mui-icon mui-icon-plusempty"></span></a>
|
|
@@ -42,7 +42,7 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="vongi-btn">
|
|
<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>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@@ -54,7 +54,6 @@
|
|
|
|
|
|
<script>
|
|
<script>
|
|
require('$project/assets/js/mui.picker.min.js');
|
|
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 * as API_Attendance from '@/apis/Master/attendance'
|
|
import Common from '$project/components/Common.vue'
|
|
import Common from '$project/components/Common.vue'
|
|
import Loading from '$project/components/Loading.vue'
|
|
import Loading from '$project/components/Loading.vue'
|
|
@@ -63,7 +62,7 @@
|
|
mapGetters,
|
|
mapGetters,
|
|
mapMutations
|
|
mapMutations
|
|
} from 'vuex'
|
|
} from 'vuex'
|
|
- import wx from 'weixin-js-sdk'
|
|
|
|
|
|
+ import * as WxJsApi from '$project/utils/wxJsApi'
|
|
export default {
|
|
export default {
|
|
name: 'MasterAttendanceApply',
|
|
name: 'MasterAttendanceApply',
|
|
components: {
|
|
components: {
|
|
@@ -91,6 +90,8 @@
|
|
longitude: '',
|
|
longitude: '',
|
|
latitude: '',
|
|
latitude: '',
|
|
},
|
|
},
|
|
|
|
+ //typeName: '',
|
|
|
|
+ approvalPersonName: '',
|
|
personList: [],
|
|
personList: [],
|
|
picList: [],
|
|
picList: [],
|
|
}
|
|
}
|
|
@@ -126,69 +127,28 @@
|
|
mui.toast(error);
|
|
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() {
|
|
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;
|
|
|
|
|
|
+ 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();
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
|
|
+ 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() {
|
|
uploadpic() {
|
|
this.isLoading = true;
|
|
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 => {
|
|
|
|
|
|
+ WxJsApi.uploadPic(this.imgBase64).then(response => {
|
|
this.isLoading = false;
|
|
this.isLoading = false;
|
|
|
|
|
|
this.picList.push(response);
|
|
this.picList.push(response);
|
|
@@ -204,7 +164,7 @@
|
|
picker.setData(_this.syPersonList);
|
|
picker.setData(_this.syPersonList);
|
|
picker.show(function(selectItems) {
|
|
picker.show(function(selectItems) {
|
|
_this.tjForm.approvalPersonId = selectItems[0].value;
|
|
_this.tjForm.approvalPersonId = selectItems[0].value;
|
|
- _this.tjForm.approvalPersonName = selectItems[0].text;
|
|
|
|
|
|
+ _this.approvalPersonName = selectItems[0].text;
|
|
})
|
|
})
|
|
},
|
|
},
|
|
//类型选择
|
|
//类型选择
|
|
@@ -225,17 +185,50 @@
|
|
var _this = this;
|
|
var _this = this;
|
|
picker.show(function(selectItems) {
|
|
picker.show(function(selectItems) {
|
|
_this.tjForm.type = selectItems[0].value;
|
|
_this.tjForm.type = selectItems[0].value;
|
|
- _this.tjForm.typeName = selectItems[0].text;
|
|
|
|
|
|
+ //_this.typeName = 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() {
|
|
|
|
+ if (this.checkFrom()) {
|
|
|
|
+ this.tjForm.photoFile = this.picList.join(',');
|
|
|
|
+ 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);
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ },
|
|
asynCallBack() {
|
|
asynCallBack() {
|
|
|
|
|
|
},
|
|
},
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
|
|
+ //获取微信配置
|
|
|
|
+ WxJsApi.getWxConfig();
|
|
this.getTime();
|
|
this.getTime();
|
|
this.getPsersonList();
|
|
this.getPsersonList();
|
|
- this.getWxConfig();
|
|
|
|
},
|
|
},
|
|
destroyed() {},
|
|
destroyed() {},
|
|
computed: {
|
|
computed: {
|
|
@@ -256,6 +249,22 @@
|
|
console.log(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({
|
|
...mapGetters({
|
|
openId: 'wx_openid',
|
|
openId: 'wx_openid',
|
|
token: 'token',
|
|
token: 'token',
|
|
@@ -265,7 +274,7 @@
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
|
|
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
|
|
-<style scoped src="$project/assets/css/iconfont.css"></style>
|
|
|
|
-<style scoped src="$project/assets/css/mui.picker.min.css"></style>
|
|
|
|
|
|
+<style src="$project/assets/css/iconfont.css"></style>
|
|
|
|
+<style src="$project/assets/css/mui.picker.min.css"></style>
|
|
<style scoped>
|
|
<style scoped>
|
|
</style>
|
|
</style>
|