|
|
@@ -1,103 +1,27 @@
|
|
|
<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>
|
|
|
- <a class=" mui-pull-right" href=""><span class="mui-icon iconfont icon-shijian"></span>缺卡记录</a>
|
|
|
- </header>
|
|
|
+ <div>
|
|
|
+ <common @asynCallBack="asynCallBack"></common>
|
|
|
+ <top-header :pageTitle="pageTitle" :rightLink="rightLink" :doRightLink="doRightLink"></top-header>
|
|
|
+
|
|
|
<div class="mui-content">
|
|
|
<div class="mui-content-padded vongi-work">
|
|
|
- <h5>2020-09-28</h5>
|
|
|
- <ul class="mui-table-view">
|
|
|
- <li class="mui-table-view-cell">
|
|
|
- 12:00
|
|
|
- <div class="mui-media-body">
|
|
|
- <button type="button" class="mui-btn mui-btn-primary">申请补卡</button>
|
|
|
- <span class="colorfe616c">缺卡</span>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li class="mui-table-view-cell">
|
|
|
- 12:00
|
|
|
- <div class="mui-media-body">
|
|
|
- <span class="colorf8b155">早退</span>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li class="mui-table-view-cell">
|
|
|
- 12:00
|
|
|
- <div class="mui-media-body">
|
|
|
- <span class="color55f868">正常</span>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="mui-content-padded vongi-work">
|
|
|
- <h5>2020-09-27</h5>
|
|
|
- <ul class="mui-table-view">
|
|
|
- <li class="mui-table-view-cell">
|
|
|
- 12:00
|
|
|
- <div class="mui-media-body">
|
|
|
- <button type="button" class="mui-btn mui-btn-primary">申请补卡</button>
|
|
|
- <span class="colorfe616c">缺卡</span>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li class="mui-table-view-cell">
|
|
|
- 12:00
|
|
|
- <div class="mui-media-body">
|
|
|
- <span class="colorf8b155">早退</span>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li class="mui-table-view-cell">
|
|
|
- 12:00
|
|
|
- <div class="mui-media-body">
|
|
|
- <span class="color55f868">正常</span>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 缺卡记录 -->
|
|
|
- <div class="mui-content">
|
|
|
- <div class="mui-content-padded vongi-work">
|
|
|
- <h5>2020-09-28</h5>
|
|
|
+ <!-- <h5>2020-09-28</h5> -->
|
|
|
<ul class="mui-table-view">
|
|
|
- <li class="mui-table-view-cell">
|
|
|
- 12:00
|
|
|
- <div class="mui-media-body">
|
|
|
- <button type="button" class="mui-btn mui-btn-primary">申请补卡</button>
|
|
|
- <span class="colorfe616c">缺卡</span>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li class="mui-table-view-cell">
|
|
|
- 12:00
|
|
|
- <div class="mui-media-body">
|
|
|
- <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">申请中</button>
|
|
|
- <span class="colorfe616c">缺卡</span>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li class="mui-table-view-cell">
|
|
|
- 12:00
|
|
|
+ <li v-for="(item,index) in recordList" class="mui-table-view-cell">
|
|
|
+ {{item.recordTime}}
|
|
|
<div class="mui-media-body">
|
|
|
- <button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">已拒绝</button>
|
|
|
- <span class="colorfe616c">缺卡</span>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="mui-content-padded vongi-work">
|
|
|
- <h5>2020-09-27</h5>
|
|
|
- <ul class="mui-table-view">
|
|
|
- <li class="mui-table-view-cell">
|
|
|
- 12:00
|
|
|
- <div class="mui-media-body">
|
|
|
- <button type="button" class="mui-btn mui-btn-primary">申请补卡</button>
|
|
|
- <span class="colorfe616c">缺卡</span>
|
|
|
+ <button type="button" class="mui-btn mui-btn-primary" v-if="item.result=='1' && item.status=='1'" @click="goToInfo(item.fillAttendanceId)">已补卡</button>
|
|
|
+ <button type="button" class="mui-btn mui-btn-primary" v-if="item.result=='0' && item.status=='2'" @click="goToInfo(item.fillAttendanceId)">已拒绝</button>
|
|
|
+ <button type="button" class="mui-btn mui-btn-primary" v-if="item.result=='0' && item.status=='0'" @click="goToInfo(item.fillAttendanceId)">审核中</button>
|
|
|
+ <button type="button" class="mui-btn mui-btn-primary" v-if="item.result=='0' && item.status===null" @click="applybk(item.id)">申请补卡</button>
|
|
|
+ <span :style="'color:'+statusColor[item.result]" v-text="status[item.result]">缺卡</span>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- 审批弹窗 -->
|
|
|
- <div class="mui-backdrop mui-active" style="display: block;"></div>
|
|
|
+ <!-- 审批弹窗 -->
|
|
|
+ <!-- <div class="mui-backdrop mui-active" style="display: block;"></div>
|
|
|
<div class="mui-card fyy-popup" style="display: block;">
|
|
|
<div class="mui-card-header mui-h3">审批意见</div>
|
|
|
<div class="mui-card-content">
|
|
|
@@ -108,14 +32,148 @@
|
|
|
<div class="vongi-btn">
|
|
|
<button class="mui-btn mui-btn-primary ">提交</button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-</div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ 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'
|
|
|
+ export default {
|
|
|
+ name: 'MasterAttendanceList',
|
|
|
+ components: {
|
|
|
+ Common,
|
|
|
+ Loading,
|
|
|
+ TopHeader
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pageTitle: '考勤记录',
|
|
|
+
|
|
|
+ isLoading: false,
|
|
|
+
|
|
|
+ listForm: {
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ token: '',
|
|
|
+ totalPage: 1,
|
|
|
+ result: 0,
|
|
|
+ },
|
|
|
+ recordList: [],
|
|
|
+ status: ['缺卡', '正常', '迟到', '早退'],
|
|
|
+ statusColor: ['#fe616c', '#05c8af', '#f6f448', '#f6f448'],
|
|
|
+
|
|
|
+ rightLink: {
|
|
|
+ show: true,
|
|
|
+ icon: 'icon-shijian',
|
|
|
+ style: 'font-size:14px;color:#000;',
|
|
|
+ title: '缺卡记录'
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.listForm.openId = this.openId;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //申请补卡
|
|
|
+ applybk(id) {
|
|
|
+ this.$router.push({
|
|
|
+ name: 'MasterAttendanceApply',
|
|
|
+ query: {
|
|
|
+ id: id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //跳转申请补卡详情
|
|
|
+ goToInfo(id) {
|
|
|
+ this.$router.push({
|
|
|
+ name: 'MasterAttendanceInfo',
|
|
|
+ query: {
|
|
|
+ id: id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取列表
|
|
|
+ getList() {
|
|
|
+ this.isLoading = true;
|
|
|
+ API_Attendance.pageList(this.listForm).then(response => {
|
|
|
+ if (response) {
|
|
|
+ if (this.listForm.pageIndex == 1) {
|
|
|
+ this.recordList = response.data;
|
|
|
+ this.listForm.pageIndex = response.pageNumber;
|
|
|
+ this.listForm.totalPage = response.totalPage;
|
|
|
+ } else {
|
|
|
+ this.recordList = [
|
|
|
+ ...this.recordList,
|
|
|
+ ...response.data
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.listForm.pageIndex++;
|
|
|
+ this.isLoading = false;
|
|
|
+ }).catch(error => {
|
|
|
+ this.isLoading = false;
|
|
|
+ mui.toast(error);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //下拉事件
|
|
|
+ handleScrool() {
|
|
|
+ if (isReachBottom()) {
|
|
|
+ console.log('到达底部')
|
|
|
+ if (this.listForm.pageIndex <= this.listForm.totalPage && this.isLoading == false) {
|
|
|
+ this.getList();
|
|
|
+ } else {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //右上角点击事件
|
|
|
+ doRightLink() {
|
|
|
+ this.listForm.pageIndex = 1;
|
|
|
+ this.listForm.result = this.listForm.result == 1 ? 0 : 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ asynCallBack() {
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getList();
|
|
|
+ //监控下拉加载事件
|
|
|
+ var _this = this;
|
|
|
+ window.addEventListener('scroll', _this.handleScrool);
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ //销毁监听事件
|
|
|
+ var _this = this;
|
|
|
+ window.removeEventListener('scroll', _this.handleScrool);
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({
|
|
|
+ openId: 'wx_openid',
|
|
|
+ token: 'token',
|
|
|
+ })
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'listForm.result': function(newVal, oldVal) {
|
|
|
+ if (newVal == 0) {
|
|
|
+ this.rightLink.title = '缺卡记录';
|
|
|
+ } else {
|
|
|
+ this.rightLink.title = '考勤记录';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
|
|
|
<style scoped src="$project/assets/css/iconfont.css"></style>
|
|
|
-<style>
|
|
|
+<style scoped>
|
|
|
</style>
|
