整合上架版进入标准流程
This commit is contained in:
aixianling
331
src/project/saas/AppCountryAlbum/Attendance.vue
Normal file
331
src/project/saas/AppCountryAlbum/Attendance.vue
Normal file
@@ -0,0 +1,331 @@
|
||||
<template>
|
||||
<div class="Attendance">
|
||||
<div class="Attendance-top">
|
||||
<div>
|
||||
<div class="left">
|
||||
<h2>{{ DD }}</h2>
|
||||
<div class="left-wrapper__right">
|
||||
<h3>{{ yyyyMM }}</h3>
|
||||
<p>日·数据统计</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right" @click="isShow = true">
|
||||
<image src="./images/qiehuan.png" />
|
||||
<span>切换日期</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="info-tab">
|
||||
<div class="left">
|
||||
<span @click="changeTab(0)" :class="[currIndex === 0 ? 'active' : '']">全部 {{ attendanceCount.all || 0 }}</span>
|
||||
<span @click="changeTab(1)" :class="[currIndex === 1 ? 'active' : '']">已出勤 {{ attendanceCount.hasIn || 0 }}</span>
|
||||
<span @click="changeTab(2)" :class="[currIndex === 2 ? 'active' : '']">未出勤 {{ attendanceCount.hasOut || 0 }}</span>
|
||||
</div>
|
||||
<div class="right" @click="linkTo('./AttendanceSetting')" v-if="isAdmin">考勤设置</div>
|
||||
</div>
|
||||
<div class="info-table">
|
||||
<div class="table-header">
|
||||
<span>人员</span>
|
||||
<span>上下班时间</span>
|
||||
<span>工作时长</span>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="table-row" v-for="(item, index) in list" :key="index">
|
||||
<div class="table-row__left">
|
||||
<h2><AiOpenData v-if="item.userId" type="userName" :openid="item.userId"></AiOpenData></h2>
|
||||
<p>已上传{{ item.photoCount || 0 }}张</p>
|
||||
</div>
|
||||
<span>{{ item.workInTime }}-{{ item.workOutTime || '' }}</span>
|
||||
<span>{{ item.workHours || 0 }}小时</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<u-calendar v-model="isShow" mode="date" @change="onDateChange"></u-calendar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Attendance',
|
||||
|
||||
appName: '考勤统计',
|
||||
|
||||
data () {
|
||||
return {
|
||||
date: '',
|
||||
currIndex: 0,
|
||||
list: [],
|
||||
attendanceCount: {},
|
||||
all: '1',
|
||||
hasIn: '',
|
||||
hasOut: '',
|
||||
yyyyMM: '',
|
||||
DD: '',
|
||||
isShow: false,
|
||||
isAdmin: false
|
||||
}
|
||||
},
|
||||
|
||||
onLoad (query) {
|
||||
this.isAdmin = !!this.$store.state.user.adminAuthType
|
||||
|
||||
if (query.date) {
|
||||
this.date = this.$dayjs(query.date).format('YYYY年MM月DD')
|
||||
this.yyyyMM = this.$dayjs(query.date).format('YYYY年MM月')
|
||||
this.DD = this.$dayjs(query.date).format('DD')
|
||||
} else {
|
||||
this.date = this.$dayjs(new Date).format('YYYY年MM月DD')
|
||||
this.yyyyMM = this.$dayjs(new Date).format('YYYY年MM月')
|
||||
this.DD = this.$dayjs(new Date).format('DD')
|
||||
}
|
||||
|
||||
this.getList()
|
||||
this.getTotal()
|
||||
},
|
||||
|
||||
methods: {
|
||||
linkTo (url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
},
|
||||
|
||||
changeTab (index) {
|
||||
if (index === 0) {
|
||||
this.all = '1'
|
||||
this.hasIn = ''
|
||||
this.hasOut = ''
|
||||
} else if (index === 1) {
|
||||
this.all = ''
|
||||
this.hasIn = '1'
|
||||
this.hasOut = ''
|
||||
} else {
|
||||
this.all = ''
|
||||
this.hasIn = ''
|
||||
this.hasOut = '1'
|
||||
}
|
||||
|
||||
this.currIndex = index
|
||||
|
||||
this.getList()
|
||||
},
|
||||
|
||||
onDateChange (e) {
|
||||
this.date = `${e.year}年${e.month > 9 ? e.month : '0' + e.month}月${e.day > 9 ? e.day : '0' + e.day}`
|
||||
|
||||
this.yyyyMM = `${e.year}年${e.month > 9 ? e.month : '0' + e.month}月`
|
||||
this.DD = e.day > 9 ? e.day : '0' + e.day
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getList()
|
||||
this.getTotal()
|
||||
})
|
||||
},
|
||||
|
||||
getTotal () {
|
||||
this.$http.post(`/api/appattendancerecord/attendanceCount?queryTime=${this.date.replace(/年|月/g, '-')}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.attendanceCount = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getList () {
|
||||
this.$loading()
|
||||
this.$http.post(`/api/appattendancerecord/alldetail?all=${this.all}&hasIn=${this.hasIn}&hasOut=${this.hasOut}&queryTime=${this.date.replace(/年|月/g, '-')}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.list = res.data.map(v => {
|
||||
return {
|
||||
...v,
|
||||
workInTime: v.workInTime ? this.$dayjs(v.workInTime).format('HH:mm') : '',
|
||||
workOutTime: v.workOutTime ? this.$dayjs(v.workOutTime).format('HH:mm') : ''
|
||||
}
|
||||
})
|
||||
|
||||
this.$hideLoading()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Attendance {
|
||||
padding: 0 0 0;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
i, em {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.info-table {
|
||||
margin-top: 32px;
|
||||
padding: 0 32px;
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 96px;
|
||||
background: #F4F9FD;
|
||||
border-radius: 8px;
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-body {
|
||||
.table-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 160px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
background: #F4F9FD;
|
||||
}
|
||||
|
||||
div {
|
||||
h2 {
|
||||
margin-bottom: 16px;
|
||||
color: #333333;
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
div, span {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #333;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
position: relative;
|
||||
top: -116px;
|
||||
margin: 0 32px;
|
||||
padding: 0 0 86px 0;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.02);
|
||||
border-radius: 16px;
|
||||
|
||||
.info-tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 108px;
|
||||
padding: 0 32px 0 16px;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
span {
|
||||
width: 124px;
|
||||
height: 108px;
|
||||
line-height: 108px;
|
||||
margin-right: 32px;
|
||||
text-align: center;
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
transition: all ease 0.3s;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #1365DD;
|
||||
border-bottom: 2px solid #1365DD;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #3975C6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Attendance-top {
|
||||
height: 320px;
|
||||
width: 100%;
|
||||
padding: 58px 32px 0;
|
||||
background: #3975C6;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 56px;
|
||||
padding: 0 36px;
|
||||
background: #285DA4;
|
||||
border-radius: 28px;
|
||||
|
||||
image {
|
||||
width: 36px;
|
||||
height: 26px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #FFFFFF;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
|
||||
h2 {
|
||||
margin-right: 16px;
|
||||
font-size: 100px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 8px;
|
||||
color: #a9c3e6;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 32px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user