kubbo/dvcp_v2_wxcp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

考勤静态页面

Browse Source
This commit is contained in:
yanran200730
2022-03-08 17:02:42 +08:00
parent b768efcb5d
commit 7faac31464
8 changed files with 1126 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
src/saas/AppCountryAlbum/Attendance.vue Normal file
View File

@@ -0,0 +1,250 @@
<template>
<div class="Attendance">
<div class="Attendance-top">
<div>
<div class="left">
<h2>09</h2>
<div class="left-wrapper__right">
<h3>2022年2月</h3>
<p>日·数据统计</p>
</div>
</div>
<div class="right">
<image src="./images/qiehuan.png" />
<span>切换日期</span>
</div>
</div>
</div>
<div class="info">
<div class="info-tab">
<div class="left">
<span @click="currIndex = 0" :class="[currIndex === 0 ? 'active' : '']">全部 10</span>
<span @click="currIndex = 1" :class="[currIndex === 1 ? 'active' : '']">已出勤 10</span>
<span @click="currIndex = 2" :class="[currIndex === 2 ? 'active' : '']">未出勤 10</span>
</div>
<div class="right" @click="linkTo('/saas/AppCountryAlbum/AttendanceSetting')">考勤设置</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 10" :key="index">
<div class="table-row__left">
<h2>陶白白</h2>
<p>已上传1张</p>
</div>
<span>8:30-6:00</span>
<span>10.5小时</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Attendance',
appName: '考勤统计',
data () {
return {
currIndex: 0
}
},
onLoad () {
},
methods: {
linkTo (url) {
uni.navigateTo({
url
})
}
}
}
</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>

262
src/saas/AppCountryAlbum/AttendanceFiexdTime.vue Normal file
View File

@@ -0,0 +1,262 @@
<template>
<div class="AttendanceFiexdTime">
<div class="form-group">
<div class="form-group__item">
<div class="left">
<label>*</label>
<span>上班打卡时间</span>
</div>
<div class="right">
<span>09:00</span>
<image src="./images/right.png" />
</div>
</div>
<div class="form-group__item">
<div class="left">
<label>*</label>
<span>下班打卡时间</span>
</div>
<div class="right">
<span>18:00</span>
<image src="./images/right.png" />
</div>
</div>
</div>
<div class="form-group">
<div class="form-group__item form-group__checked">
<div class="left">
<h2>是否开启休息时间</h2>
<p>若开启休息时间，则休息时间不计入工作时长</p>
</div>
<div class="right">
<switch color="#1088F9" checked />
</div>
</div>
<div class="form-group__item">
<div class="left">
<label>*</label>
<span>休息开始</span>
</div>
<div class="right">
<span>请设置时间</span>
<image src="./images/right.png" />
</div>
</div>
<div class="form-group__item">
<div class="left">
<label>*</label>
<span>休息结束</span>
</div>
<div class="right">
<span>请设置时间</span>
<image src="./images/right.png" />
</div>
</div>
</div>
<div class="form-group">
<div class="form-group__item form-group__checked">
<div class="left">
<h2>允许打卡时间范围</h2>
<p>超过打卡时间则记为迟到，提前打卡则记为早退</p>
</div>
</div>
<div class="form-group__item">
<div class="left">
<label>*</label>
<span>上班打卡</span>
</div>
<div class="right">
<span>上班前2小时可打卡</span>
<image src="./images/right.png" />
</div>
</div>
<div class="form-group__item">
<div class="left">
<label>*</label>
<span>下班打卡</span>
</div>
<div class="right">
<span>下班后2小时可打卡</span>
<image src="./images/right.png" />
</div>
</div>
</div>
<div class="form-group">
<div class="form-group__item form-group__checked">
<div class="left">
<h2>是否开启固定打卡点</h2>
<p>若开启，不在固定范围内打卡将不计入考勤</p>
</div>
<div class="right">
<switch color="#1088F9" checked />
</div>
</div>
<div class="form-group__item form-group__checked">
<div class="left">
<h2>绿地蓝海A座</h2>
<p>湖北省武汉市武昌区和平大道750号</p>
<p style="margin-top: 8px;">允许打卡范围200米</p>
</div>
<div class="right">
<image :src="`${$cdn}askform/sc1.png`" />
<span>删除</span>
</div>
</div>
<div class="form-group__item form-group__checked">
<div class="left left-add" @click="linkTo('/saas/AppCountryAlbum/ChooseAddess')">
<div class="add-btn"></div>
<h2 style="color: #1088F9;">添加打卡点</h2>
</div>
</div>
</div>
<div class="form-btn" hover-class="text-hover">保存</div>
</div>
</template>
<script>
export default {
name: 'AttendanceFiexdTime',
appName: '固定时间打卡设置',
data () {
return {
}
},
onLoad () {
},
methods: {
linkTo (url) {
uni.navigateTo({
url
})
}
}
}
</script>
<style lang="scss" scoped>
.AttendanceFiexdTime {
padding-bottom: 130px;
* {
line-height: 1;
box-sizing: border-box;
}
.form-btn {
position: fixed;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 112px;
line-height: 112px;
text-align: center;
color: #fff;
font-size: 32px;
background: #1365DD;
&:active {
opacity: 0.8;
}
}
.form-group {
margin-bottom: 16px;
padding: 0 32px;
background: #fff;
.form-group__item {
display: flex;
align-items: center;
justify-content: space-between;
height: 112px;
font-size: 32px;
color: #333333;
border-bottom: 1px solid #DDDDDD;
&.form-group__checked {
height: auto;
padding: 32px 0;
.left {
h2 {
margin-bottom: 12px;
color: #333333;
font-size: 32px;
}
&.left-add {
display: flex;
align-items: center;
h2 {
margin-bottom: 0;
}
}
.add-btn {
position: relative;
width: 48px;
height: 48px;
margin-right: 16px;
border-radius: 50%;
overflow: hidden;
background: #1088F9;
&::after {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
width: 4px;
height: 24px;
background: #fff;
content: ' ';
transform: translate(-50%, -50%);
}
&::before {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
width: 24px;
height: 4px;
background: #fff;
content: ' ';
transform: translate(-50%, -50%);
}
}
p {
color: #999999;
font-size: 28px;
}
}
}
label {
color: #FF4466;
}
&:last-child {
border: none;
}
.right {
display: flex;
align-items: center;
color: #999999;
image {
width: 32px;
height: 32px;
}
}
}
}
}
</style>

246
src/saas/AppCountryAlbum/AttendanceFlexibleTime.vue Normal file
View File

@@ -0,0 +1,246 @@
<template>
<div class="AttendanceFiexdTime">
<div class="form-group">
<div class="form-group__item">
<div class="left">
<label>*</label>
<span>最早允许打卡时间</span>
</div>
<div class="right">
<span>09:00</span>
<image src="./images/right.png" />
</div>
</div>
<div class="form-group__item">
<div class="left">
<label>*</label>
<span>最晚允许打卡时间</span>
</div>
<div class="right">
<span>18:00</span>
<image src="./images/right.png" />
</div>
</div>
</div>
<div class="form-group">
<div class="form-group__item form-group__checked">
<div class="left">
<h2>是否开启休息时间</h2>
<p>若开启休息时间，则休息时间不计入工作时长</p>
</div>
<div class="right">
<switch color="#1088F9" checked />
</div>
</div>
<div class="form-group__item">
<div class="left">
<label>*</label>
<span>休息开始</span>
</div>
<div class="right">
<span>请设置时间</span>
<image src="./images/right.png" />
</div>
</div>
<div class="form-group__item">
<div class="left">
<label>*</label>
<span>休息结束</span>
</div>
<div class="right">
<span>请设置时间</span>
<image src="./images/right.png" />
</div>
</div>
</div>
<div class="form-group">
<div class="form-group__item form-group__checked">
<div class="left">
<h2>工作时长要求</h2>
</div>
</div>
<div class="form-group__item">
<div class="left">
<label>*</label>
<span>时长要求</span>
</div>
<div class="right">
<span>8小时</span>
<image src="./images/right.png" />
</div>
</div>
</div>
<div class="form-group">
<div class="form-group__item form-group__checked">
<div class="left">
<h2>是否开启固定打卡点</h2>
<p>若开启，不在固定范围内打卡将不计入考勤</p>
</div>
<div class="right">
<switch color="#1088F9" checked />
</div>
</div>
<div class="form-group__item form-group__checked">
<div class="left">
<h2>绿地蓝海A座</h2>
<p>湖北省武汉市武昌区和平大道750号</p>
<p style="margin-top: 8px;">允许打卡范围200米</p>
</div>
<div class="right">
<image :src="`${$cdn}askform/sc1.png`" />
<span>删除</span>
</div>
</div>
<div class="form-group__item form-group__checked">
<div class="left left-add">
<div class="add-btn"></div>
<h2 style="color: #1088F9;">添加打卡点</h2>
</div>
</div>
</div>
<div class="form-btn" hover-class="text-hover">保存</div>
</div>
</template>
<script>
export default {
name: 'AttendanceFlexibleTime',
appName: '灵活时间打卡设置',
data () {
return {
}
},
onLoad () {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.AttendanceFiexdTime {
padding-bottom: 130px;
* {
line-height: 1;
box-sizing: border-box;
}
.form-btn {
position: fixed;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 112px;
line-height: 112px;
text-align: center;
color: #fff;
font-size: 32px;
background: #1365DD;
&:active {
opacity: 0.8;
}
}
.form-group {
margin-bottom: 16px;
padding: 0 32px;
background: #fff;
.form-group__item {
display: flex;
align-items: center;
justify-content: space-between;
height: 112px;
font-size: 32px;
color: #333333;
border-bottom: 1px solid #DDDDDD;
&.form-group__checked {
height: auto;
padding: 32px 0;
.left {
h2 {
margin-bottom: 12px;
color: #333333;
font-size: 32px;
}
&.left-add {
display: flex;
align-items: center;
h2 {
margin-bottom: 0;
}
}
.add-btn {
position: relative;
width: 48px;
height: 48px;
margin-right: 16px;
border-radius: 50%;
overflow: hidden;
background: #1088F9;
&::after {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
width: 4px;
height: 24px;
background: #fff;
content: ' ';
transform: translate(-50%, -50%);
}
&::before {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
width: 24px;
height: 4px;
background: #fff;
content: ' ';
transform: translate(-50%, -50%);
}
}
p {
color: #999999;
font-size: 28px;
}
}
}
label {
color: #FF4466;
}
&:last-child {
border: none;
}
.right {
display: flex;
align-items: center;
color: #999999;
image {
width: 32px;
height: 32px;
}
}
}
}
}
</style>

109
src/saas/AppCountryAlbum/AttendanceSetting.vue Normal file
View File

@@ -0,0 +1,109 @@
<template>
<div class="AttendanceSetting">
<div class="cell-group">
<div class="cell-item" hover-class="bg-hover" @click="linkTo('/saas/AppCountryAlbum/AttendanceFiexdTime')">
<div class="cell-item__left">
<h2>固定时间上下班</h2>
<p>有固定的上下班时间，考核迟到早退</p>
</div>
<image src="./images/right.png" />
</div>
<div class="cell-item" hover-class="bg-hover" @click="linkTo('/saas/AppCountryAlbum/AttendanceFlexibleTime')">
<div class="cell-item__left">
<h2>灵活时间上下班</h2>
<p>上下班时间不固定，考核工时时长</p>
</div>
<image src="./images/right.png" />
</div>
</div>
<div class="tips">
当前考勤时间为00:00~24:00，若新增考勤规则则以
新增规则为准；
工作时长=（最晚拍照时间）-（最早拍照时间）；
若员工“最早”或者“最晚”拍照时间缺失，对应工作时长为空；
上班时间=最早拍照时间；
下班时间=最晚拍照时间。
</div>
</div>
</template>
<script>
export default {
name: 'AttendanceSetting',
appName: '考勤设置',
data () {
return {
}
},
onLoad () {
},
methods: {
linkTo (url) {
uni.navigateTo({
url
})
}
}
}
</script>
<style lang="scss" scoped>
.text-hover {
opacity: 0.7;
}
.bg-hover {
background: #eee;
}
.AttendanceSetting {
.tips {
line-height: 44px;
margin: 32px;
font-size: 28px;
color: #999999;
white-space: pre-line;
}
.cell-group {
.cell-item {
display: flex;
align-items: center;
justify-content: space-between;
height: 156px;
margin-bottom: 16px;
padding: 0 32px;
background: #FFFFFF;
&:active {
background: #eee;
}
image {
width: 32px;
height: 32px;
}
&:last-child {
margin-bottom: 0;
}
h2 {
margin-bottom: 12px;
color: #333333;
font-size: 32px;
}
p {
color: #999999;
font-size: 28px;
}
}
}
}
</style>

253
src/saas/AppCountryAlbum/ChooseAddess.vue Normal file
View File

@@ -0,0 +1,253 @@
<template>
<div class="Attendance-address">
<map @tap="onClick"></map>
<u-popup v-model="isShow" :closeable="false" border-radius="32" height="70%" mode="bottom">
<div class="wrapper">
<div class="top">
<span @click="isShow = false">取消</span>
<span>确定</span>
</div>
<div class="address-search">
<div class="address-search__wrapper">
<image src="./images/search.png" />
<input placeholder-style="color: #98A6B6" placeholder="搜索地点" v-model="address">
</div>
</div>
<scroll-view scroll-y>
<div class="address-item" v-for="(item, index) in 20" :key="index">
<div class="left">
<h2>苗栗路-地铁站</h2>
<p>50m内 | 江汉区轨道交通6号线</p>
</div>
<div class="right" :class="[currIndex === index ? 'active' : '']"></div>
</div>
</scroll-view>
<div class="address-btn">
<span>打卡有效范围</span>
<div class="right" @click="isShowScope = true">
<i>200米</i>
<image src="./images/w-right.png" />
</div>
</div>
</div>
</u-popup>
<u-popup v-model="isShowScope" :closeable="false" :z-index="11111" border-radius="16" mode="bottom">
<div class="ActionSheet">
<div class="ActionSheet-list">
<div :class="[chooseIndex === 0 ? 'active' : '']">100米</div>
<div :class="[chooseIndex === 1 ? 'active' : '']">200米</div>
<div :class="[chooseIndex === 2 ? 'active' : '']">300米</div>
<div :class="[chooseIndex === 3 ? 'active' : '']">400米</div>
<div :class="[chooseIndex === 4 ? 'active' : '']">500米</div>
</div>
<div class="cancel-btn" @click="isShowScope = false">取消</div>
</div>
</u-popup>
</div>
</template>
<script>
export default {
name: 'ChooseAddess',
appName: '选择打卡点',
data () {
return {
latitude: '',
longitude: '',
isShow: false,
address: '',
currIndex: 0,
chooseIndex: 1,
isShowScope: false
}
},
onLoad () {
uni.getLocation({
type: 'wgs84',
success: res => {
console.log(res)
this.longitude = res.longitude
this.latitude = res.latitude
}
})
},
methods: {
onClick (e) {
console.log(e)
this.isShow = true
}
}
}
</script>
<style lang="scss" scoped>
.Attendance-address {
width: 100%;
height: 100vh;
.ActionSheet {
background: #F5F6F6;
.ActionSheet-list {
margin-bottom: 8px;
background: #fff;
div {
height: 112px;
line-height: 112px;
text-align: center;
color: #333333;
font-size: 32px;
border-bottom: 1px solid #D8DDE6;
&.active {
color: #1365DD;
font-weight: 600;
}
&:last-child {
border: none;
}
}
}
.cancel-btn {
height: 112px;
line-height: 112px;
color: #333;
font-size: 32px;
text-align: center;
font-weight: 600;
background: #fff;
}
}
* {
box-sizing: border-box;
line-height: 1;
font-style: normal;
}
.wrapper {
height: 100%;
overflow: hidden;
scroll-view {
height: calc(100% - 308px);
padding: 0 32px;
.address-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 32px 0;
border-bottom: 1px solid #EEEEEE;
&:last-child {
border: none;
}
.right {
width: 32px;
height: 32px;
border-radius: 50%;
border: 4px solid #CCCCCC;
transition: all ease 0.3s;
&.active {
border: 10px solid #1365DD;
}
}
h2 {
margin-bottom: 20px;
color: #222222;
font-weight: 600;
font-size: 34px;
}
p {
color: #999999;
font-size: 28px;
}
}
}
.address-search {
display: flex;
align-items: center;
height: 100px;
padding: 0 32px;
.address-search__wrapper {
display: flex;
align-items: center;
width: 100%;
height: 72px;
padding: 0 32px;
background: #F6F7F9;
border-radius: 36px;
image {
width: 48px;
height: 48px;
}
input {
flex: 1;
font-size: 26px;
color: #333;
}
}
}
.address-btn {
display: flex;
align-items: center;
justify-content: space-between;
height: 112px;
line-height: 112px;
padding: 0 32px;
text-align: center;
color: #FFFFFF;
font-size: 32px;
background: #1365DD;
image {
width: 32px;
height: 32px;
margin-left: 4px;
}
.right {
display: flex;
align-items: center;
}
}
.top {
display: flex;
align-items: center;
justify-content: space-between;
height: 96px;
padding: 0 32px;
font-size: 32px;
color: #999;
font-weight: 600;
span:last-child {
color: #222;
}
}
}
map {
width: 100%;
height: 100%;
}
}
</style>

8
src/saas/AppCountryAlbum/components/Organize.vue
View File

@@ -47,7 +47,7 @@
<div class="info-item info-work">
<div class="info-item__title">
<h2>考勤统计</h2>
<image src="../images/right.png" />
<image src="../images/right.png" @click="linkTo('/saas/AppCountryAlbum/Attendance')" />
</div>
<div class="info-work__wrapper">
<div class="top">
@@ -104,7 +104,11 @@
},
methods: {
linkTo (url) {
uni.navigateTo({
url
})
}
}
}
</script>

BIN
src/saas/AppCountryAlbum/images/search.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 854 B

BIN
src/saas/AppCountryAlbum/images/w-right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 248 B