Skip to content

O
OKR
Commit 2e33a568 authored by Zhang Xiaojie's avatar Zhang Xiaojie
Browse files
Options

考勤打卡UI界面

parent dcb4f10d
Hide whitespace changes
Inline Side-by-side
Showing with 150 additions and 37 deletions
src/views/attendance/attendance.vue
View file @ 2e33a568
......@@ -10,20 +10,49 @@
<!-- 顶部员工信息 -->
<div class=" mx-4 bg-bg-deep rounded-md py-5 px-7 text-white relative mt-12">
<p class="top align-baseline">
<span class="name text-xl mr-4">姓名</span> <span class="number text-sm">员工编号43</span>
<span class="name text-xl mr-4">{{name}}</span> <span class="number text-sm">员工编号{{memberid}}</span>
</p>
<p class="team-name text-base mt-3">杭州复杂美科技有限公司</p>
<p class="team-name text-base mt-3">{{teamname}}</p>
</div>
<!-- 考勤状态 -->
<p class=" h-8 text-sm bg-bg-warning text-text-warning ml-11 leading-8 px-3 inline-block rounded-2xl mt-3">
今日考勤异常
<p :class="{normal:(state==='正常')}"
class=" h-8 text-sm bg-bg-warning text-text-warning ml-11 leading-8 px-3 inline-block rounded-2xl mt-3">
今日考勤{{state}}
</p>
<!-- 打卡信息 -->
<div v-for="(punch,index) in list" :key="index">
<punch :punch="punch"/>
<!-- 打卡 -->
<div :last="last">
<!-- 上班打卡 -->
<div v-if="list.length==0">
<punch @attendance="record(arguments)" :last='true' @alert="toAlert">上班打卡</punch>
</div>
<!-- 打卡记录 -->
<div v-else>
<div v-for="(punch,index) in list" :key="index" >
<punch :punch="punch" @editNote="editNote"/>
</div>
<!-- 下班打卡 -->
<punch @attendance="record(arguments)" :last='true' @alert="toAlert" >下班打卡</punch>
</div>
</div>
<p class=" text-sm text-gray-400 pt-8 text-center pb-36">查看更多打卡记录请前往work.33.cn</p>
<!-- 打卡弹窗 -->
<van-dialog v-model="showPunch"
title="提示" show-cancel-button confirm-button-text="确认打卡" cancel-button-text="不打卡"
@confirm="confirm">
<div>
<p><span class=" mr-2 text-gray-400">打卡时间:</span><span>{{time}}</span></p>
<div class="flex"><span class=" mr-2 text-gray-400">打卡地点:</span><span class=" w-48">{{location}}</span></div>
</div>
</van-dialog>
<!-- 编辑备注弹窗 -->
<van-dialog v-model="showNote" title="编辑备注" confirm-button-text="提交">
<div>
<p>0/20-500</p>
<div>
请填写 <br> 1.工作计划/完成情况 <br> 2.对接人及周期 <br> 3.遇到的问题
</div>
</div>
</van-dialog>
</main-page>
</div>
</template>
......@@ -32,33 +61,68 @@
<script lang="ts">
import Vue,{ PropType } from 'vue';
import { punchList,Punch } from '@/DTO'
import { Toast } from 'vant';
export default Vue.extend({
name:'attendance',
components:{
'main-page': () => import('@/layout/main-page.vue'),
'punch': () => import('@/views/attendance/components/punch.vue')
},
props:{
punch:{
type:Object as PropType<Punch>
},
state:{
type:String,
default:'正常'
},
last:{
type:Boolean,
default:false
}
},
data(){
let list:Array<Punch> = punchList
let list:Array<Punch>=[]
list = punchList
return{
list
list,
name:'姓名',
memberid:43,
teamname:'杭州复杂美科技有限公司',
showPunch:false,
showNote:false,
time:'',
location:''
}
},
methods:{
handleClickLeft() {
console.log('click left')
console.log('click left')
},
record(msg:Array<string>){
this.time = msg[1]
this.location = msg[2]
},
}
toAlert(isShow:boolean){
this.showPunch = isShow
},
editNote(isShow:boolean){
this.showNote = isShow
},
confirm(){
Toast({
message:'上班打卡成功',
position:'bottom'
})
}
},
});
</script>
<style>
.normal{
background-color:#E8F3FF;
color:#32B2F7;
}
</style>
\ No newline at end of file
src/views/attendance/components/punch.vue
View file @ 2e33a568
<template>
<div class=" relative mt-4">
<!-- 左侧圆形 -->
<div
class=" w-4 h-4 bg-white border-2 border-color-primary rounded-full absolute top-11 left-4.5"></div>
<div class=" ml-12 mr-4 bg-white rounded-md pl-3 pb-4">
<div :class="{outside:(!isLocal&&punch!=null),lastNode:last}"
class=" w-4 h-4 bg-color-primary rounded-full absolute top-11 left-4.5"></div>
<!-- 右侧信息 -->
<div :class="{notLocal:(!isLocal&&punch!=null)}"
class=" ml-12 mr-4 bg-white rounded-md pl-3 pb-6">
<!-- 打卡日期 -->
<p class="date text-gray-500 text-sm pt-4">{{punch.date}}</p>
<p class="date text-gray-500 text-sm pt-4"><span>{{date}}</span><span class=" ml-1" v-if="last">再次打卡将覆盖上一条记录</span></p>
<!-- 打卡 -->
<div v-if="punch.location ==null"
class="round w-40 mx-auto relative">
<div v-if="punch == null"
class="round w-40 mx-auto relative"
@click="check">
<img src="../../../assets/oval.png" alt="" srcset="">
<div class=" absolute top-14 left-0 right-0 mx-auto text-center text-white">
<p class=" text-xl tracking-wide">上班打卡</p>
<p class=" text-xl tracking-wide"><slot></slot></p>
<p class=" text-base tracking-wider">{{time}}</p>
</div>
</div>
<p v-else class="text-base my-1.5">
<span class="text-text-primary mr-4">打卡时间{{punch.time}}</span>
<span v-if="punch.isLocal ==false" class=" text-yellow-500 border border-yellow-500 rounded px-1">异地</span>
<p v-else class=" my-1.5 flex items-start">
<span class="text-base text-text-primary mr-3">打卡时间{{punch.time}}</span>
<span v-if="punch.isLocal ==false" class=" text-yellow-500 border border-yellow-500 rounded tracking-wider text-sm">异地</span>
</p>
<!-- 定位信息 -->
<div class=" flex text-sm">
<img src="../../../assets/icons/location.png" alt="" class="w-4 h-5 mr-1 inline-block">
<div>
<span class="text-gray-500">{{punch.location}}</span>
<div class=" pt-1">
<span class="text-gray-500">{{location}}</span>
<!-- 异地备注 -->
<div v-if="punch.isLocal ==false"
<div v-if="punch != null && punch.isLocal ==false"
class=" pt-1">
<p class=" text-gray-400">备注：{{punch.note}}</p>
<span class=" text-color-primary px-5 py-2 pt-5">编辑备注</span>
<span class=" text-color-primary px-5 py-2">撤回申请</span>
<p class=" text-gray-400">备注：{{punch.note}}</p>
<div class=" mt-3 text-color-primary">
<span class="px-5 py-2 " @click="edit">编辑备注</span>
<span class="px-5 py-2" @click="cancel">撤回申请</span>
</div>
</div>
</div>
</div>
<!-- 刷新定位 -->
<p v-if="punch.location ==null" class=" text-color-primary text-sm w-24 bg-white px-5 py-2 mx-auto" >刷新定位</p>
<p v-if="punch == null" class=" text-color-primary text-sm w-24 bg-white px-5 py-2 mx-auto" @click="reload" >刷新定位</p>
</div>
</div>
</template>
......@@ -48,14 +53,29 @@ export default Vue.extend({
name:'punch',
props:{
punch:{
type:Object as PropType<Punch>
type:Object as PropType<Punch>
},
last:{
type:Boolean,
default:false
}
},
data(){
let isLocal,location,date,time
if(this.punch!=null){
isLocal = this.punch.isLocal
location = this.punch.location
date = this.punch.date
time = this.punch.time
}else{
location ='这里是当前定位可手动刷新'
}
return{
date:'',
time:'',
date,
time,
timer:0,
isLocal,
location
}
},
methods:{
......@@ -72,12 +92,28 @@ export default Vue.extend({
},
currentTime(){
this.timer = setInterval(this.getTime,1000)
},
check(){
let isShow = true
this.$emit('attendance',this.date,this.time,this.location)
this.$emit('alert',isShow)
console.log('submit');
},
reload(){
console.log('刷新定位');
},
edit(){
let isShow = true
this.$emit('editNote',isShow)
},
cancel(){
console.log("撤回申请");
}
},
mounted(){
this.getTime()
this.currentTime()
console.log(this.punch);
this.currentTime()
console.log(this.last);
},
beforeDestroy(){
......@@ -90,5 +126,16 @@ export default Vue.extend({
</script>
<style lang="less">
.notLocal{
background-color: #FFFBF8F3;
box-shadow: #DFDEDD 0 0 12px;
}
.outside{
background-color:#E99D1A;
border: none;
}
.lastNode{
background-color:rgb(250, 250, 250);
border: 2px solid #32B2F7 ;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment