考勤列表

config/project.js

@@ -1 +1 @@
-exports.name = 'home'
+exports.name = 'business'

src/projects/business/apis/Master/attendance.js

@@ -6,7 +6,7 @@ import Qs from 'qs';
  * @param params
  */
 
-//
+//获取考勤记录
 export function pageList(params) {
 	return request({
 		url: '/mobile/workAttendance/pageList',

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

@@ -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>

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

@@ -19,10 +19,10 @@
 						</router-link>
 					</li>
 					<li class="mui-table-view-cell mui-media mui-col-xs-3">
-						<a href="javascript:void(0)">
+						<router-link :to="{name:'MasterAttendanceList'}">
 							<img src="~$project/assets/img/icon39.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)">