|
@@ -0,0 +1,250 @@
|
|
|
|
+<!--workStatus:1-工作,2-外出,3-出差,4-休假-->
|
|
|
|
+<!--result:0-缺卡,1-正常,2-迟到,3-早退, 4-出差,5-请假-->
|
|
|
|
+<!--type:0=设备打卡,1=外勤打卡、2=补卡-->
|
|
|
|
+<!--status:0:无操作, 1:机器打卡记录,2:请假审批详情,3:外勤打卡、补卡审批详情-->
|
|
|
|
+
|
|
|
|
+<template>
|
|
|
|
+ <div>
|
|
|
|
+ <common @asynCallBack="asynCallBack"></common>
|
|
|
|
+ <top-header :pageTitle="pageTitle"></top-header>
|
|
|
|
+
|
|
|
|
+ <div class="mui-content vongi-admin-kqtj">
|
|
|
|
+ <ul class="mui-table-view" style="margin-bottom: 10px;" >
|
|
|
|
+ <li class="mui-table-view-cell " style="text-align: center;" >
|
|
|
|
+ <span class="mui-icon mui-icon mui-icon-arrowleft" @click="optMonth(0)"></span> {{year}}.{{(month>9?"":"0")}}{{month}} <span class="mui-icon mui-icon mui-icon-arrowright" @click="optMonth(1)"></span>
|
|
|
|
+ </li>
|
|
|
|
+ </ul>
|
|
|
|
+
|
|
|
|
+ <div class="vongi-index flew-sp flew-items" style="margin-bottom: 10px;">
|
|
|
|
+ <div class="vongi-index-top">
|
|
|
|
+ <div class="mui-media-object mui-pull-left">
|
|
|
|
+ <img :src="person_data?(person_data.faceImageUrl+'?x-oss-process=image/resize,h_50,m_lfit'):''">
|
|
|
|
+ </div>
|
|
|
|
+ <div class="mui-media-body">
|
|
|
|
+ <h3 v-if="person_data">{{person_data.name}}</h3>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="vongi-index-right flew-items flew-sp">
|
|
|
|
+
|
|
|
|
+ 应出勤<a class="mui-pull-right" >{{obj.attendanceDays}}</a>天 / 实出勤<a class="mui-pull-right" >{{obj.totalAttendanceDays}}</a>天
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <ul class="mui-table-view">
|
|
|
|
+
|
|
|
|
+ <li class="mui-table-view-cell mui-collapse" v-for="(it,index) in recordList" >
|
|
|
|
+ <a class="mui-navigate-right" href="#">{{it.name}}
|
|
|
|
+ <span style="float: right; margin-right: 20px; color: rgba(136, 136, 136, 100); ">{{it.list.length}}</span></a>
|
|
|
|
+ <div class="mui-content-padded vongi-work">
|
|
|
|
+
|
|
|
|
+ <ul class="mui-table-view">
|
|
|
|
+ <li v-for="(item,index) in it.list" class="mui-table-view-cell">
|
|
|
|
+ {{item.recordTime}}
|
|
|
|
+ <div class="mui-media-body">
|
|
|
|
+ <button type="button" class="mui-btn mui-btn-primary" v-if="item.result=='1' && item.status=='1'" @click="goToInfo(item.supplementWorkId)">{{item.type=='1'?'已外勤打卡':'已补卡'}}</button>
|
|
|
|
+ <button type="button" class="mui-btn mui-btn-primary" v-if="item.result=='0' && item.status=='3'" @click="goToInfo(item.supplementWorkId)">已拒绝</button>
|
|
|
|
+ <button type="button" class="mui-btn mui-btn-primary" v-if="item.result=='0' && item.status=='0'" @click="goToInfo(item.supplementWorkId)">审核中</button>
|
|
|
|
+ <button type="button" class="mui-btn mui-btn-primary" v-if="item.result=='0' && item.status===null" @click="applybk(item.id,item.recordTime)">申请补卡</button>
|
|
|
|
+ <span :style="'color:'+statusColor[item.result]" v-text="status[item.result]">缺卡</span>
|
|
|
|
+ </div>
|
|
|
|
+ </li>
|
|
|
|
+ </ul>
|
|
|
|
+ </div>
|
|
|
|
+ </li>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </ul>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <loading :visible="isLoading"></loading>
|
|
|
|
+ </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 isReachBottom from '$project/utils/isReachBottom'
|
|
|
|
+ import {
|
|
|
|
+ mapGetters,
|
|
|
|
+ mapMutations
|
|
|
|
+ } from 'vuex'
|
|
|
|
+ import {
|
|
|
|
+ currentTimeStamp,
|
|
|
|
+ parseUnixTime
|
|
|
|
+ } from '$project/utils'
|
|
|
|
+ export default {
|
|
|
|
+ name: 'MasterAttendanceStatistic',
|
|
|
|
+ components: {
|
|
|
|
+ Common,
|
|
|
|
+ Loading,
|
|
|
|
+ TopHeader
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ pageTitle: '考勤统计',
|
|
|
|
+ year:0,
|
|
|
|
+ month:1,
|
|
|
|
+
|
|
|
|
+ listForm:{
|
|
|
|
+ date: '2021-06',
|
|
|
|
+ },
|
|
|
|
+ isLoading: false,
|
|
|
|
+ obj:{},
|
|
|
|
+ recordList: [],
|
|
|
|
+ status: ['缺卡', '正常', '迟到', '早退', '请假','出差'],
|
|
|
|
+ statusColor: ['#fe616c', '#05c8af', '#f6f448', '#f6f448', '#f6f448', '#f6f448'],
|
|
|
|
+
|
|
|
|
+ rightLink: {
|
|
|
|
+ show: true,
|
|
|
|
+ icon: 'icon-shijian',
|
|
|
|
+ style: 'font-size:14px;color:#000;',
|
|
|
|
+ title: '缺卡记录'
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.month= new Date().getMonth()+1;
|
|
|
|
+ this.year= new Date().getYear()+1900;
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ optMonth(opt){
|
|
|
|
+
|
|
|
|
+ if(opt){
|
|
|
|
+ if( this.month==12){
|
|
|
|
+ this.month=1;
|
|
|
|
+ this.year++;
|
|
|
|
+ }else{
|
|
|
|
+ this.month++;
|
|
|
|
+ }
|
|
|
|
+ }else{
|
|
|
|
+ if( this.month==1){
|
|
|
|
+ this.month=12;
|
|
|
|
+ this.year--;
|
|
|
|
+ }else{
|
|
|
|
+ this.month--;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ this.getList();
|
|
|
|
+ },
|
|
|
|
+ //申请补卡
|
|
|
|
+ applybk(id,time) {
|
|
|
|
+ this.$router.push({
|
|
|
|
+ name: 'MasterAttendanceApply',
|
|
|
|
+ query: {
|
|
|
|
+ id: id,
|
|
|
|
+ time:time
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ //跳转申请补卡详情
|
|
|
|
+ goToInfo(id) {
|
|
|
|
+ this.$router.push({
|
|
|
|
+ name: 'XsyApprovalInfo',
|
|
|
|
+ query: {
|
|
|
|
+ id: id,
|
|
|
|
+ formId:'applyWork'
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ //获取列表
|
|
|
|
+ getList() {
|
|
|
|
+ this.isLoading = true;
|
|
|
|
+ var obj={
|
|
|
|
+ date:this.year+"-"+(this.month>9?"":"0")+this.month
|
|
|
|
+ }
|
|
|
|
+ this.recordList=[];
|
|
|
|
+ API_Attendance.statistics(obj).then(response => {
|
|
|
|
+
|
|
|
|
+ //this.recordList = response.list;
|
|
|
|
+ var recordList=[]
|
|
|
|
+ var status=this.status
|
|
|
|
+ response.list.forEach(function(item, index) {
|
|
|
|
+ var bl=true;
|
|
|
|
+
|
|
|
|
+ for(var i in recordList){
|
|
|
|
+ var it=recordList[i];
|
|
|
|
+ if(it.result==item.result){
|
|
|
|
+ bl=false;
|
|
|
|
+ it.list.push(item);
|
|
|
|
+ break
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ if(bl){
|
|
|
|
+ var my={
|
|
|
|
+ result:item.result,
|
|
|
|
+ name:status[item.result],
|
|
|
|
+ list:[],
|
|
|
|
+ }
|
|
|
|
+ my.list.push(item)
|
|
|
|
+ recordList.push(my)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ this.recordList=recordList;
|
|
|
|
+ console.log(this.recordList)
|
|
|
|
+ this.obj=response;
|
|
|
|
+
|
|
|
|
+ this.isLoading = false;
|
|
|
|
+ }).catch(error => {
|
|
|
|
+ this.isLoading = false;
|
|
|
|
+ mui.toast(error);
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //选择日期
|
|
|
|
+ selectData() {
|
|
|
|
+ var _this = this;
|
|
|
|
+ var picker = new mui.DtPicker({
|
|
|
|
+ "type": "date",
|
|
|
|
+ "beginYear": 2020,
|
|
|
|
+ "endYear": 2040,
|
|
|
|
+ "endDate": new Date(),
|
|
|
|
+ "value": _this.subForm.queryDate
|
|
|
|
+ });
|
|
|
|
+ picker.show(function(rs) {
|
|
|
|
+ _this.subForm.queryDate = rs.text;
|
|
|
|
+ //获取公司列表
|
|
|
|
+ _this.getCompanyList();
|
|
|
|
+ picker.dispose();
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ asynCallBack() {
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ //获取列表
|
|
|
|
+ // this.getCompanyList();
|
|
|
|
+ this.getList();
|
|
|
|
+ },
|
|
|
|
+ destroyed() {
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ ...mapGetters({
|
|
|
|
+ openId: 'wx_openid',
|
|
|
|
+ token: 'token',
|
|
|
|
+ person_data: 'person_data',
|
|
|
|
+ person_popedom: 'person_popedom',
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+<style scoped src="$project/assets/css/xpgj.css"></style>
|
|
|
|
+
|
|
|
|
+<style scoped src="$project/assets/css/xpwyfyy.css"></style>
|
|
|
|
+<style src="$project/assets/css/iconfont.css"></style>
|
|
|
|
+<style scoped>
|
|
|
|
+ .colorAAA {
|
|
|
|
+ color: #AAAAAA;
|
|
|
|
+ }
|
|
|
|
+</style>
|