hz/ebiz-h5
1
0
Fork 0
mirror of http://112.124.100.131/GFRS/ebiz-h5.git synced 2025-12-10 06:56:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

刷新页面

Browse Source
This commit is contained in:
huichao
2020-07-27 18:11:53 +08:00
parent f21f4eeb3c
commit ad765d38cb
1 changed files with 228 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

424
src/views/ebiz/attendance/Monthly.vue
View File

@@ -1,119 +1,138 @@
<template>
<div>
<van-sticky>
<DatetimePicker
ref="datetimepicker"
model="inline"
:scroll-change-date="true"
:visible.sync="isShowCalendar"
:default-datetime="defaultDatetime"
:is-show-week-view="isShowWeek"
:minute-step="1"
:mark-date="markDate"
mark-type="dot"
week-start="sunday"
picker-type="date"
:show-today-button="true"
:disabled-week-view="false"
format="YY/MM/DD hh:mm"
@get-height="getHeight"
@confirm="dateConfirm"
@change="dateChange"
:name="name"
></DatetimePicker>
</van-sticky>
<van-sticky>
<DatetimePicker
ref="datetimepicker"
model="inline"
:scroll-change-date="true"
:visible.sync="isShowCalendar"
:default-datetime="defaultDatetime"
:is-show-week-view="isShowWeek"
:minute-step="1"
:mark-date="markDate"
mark-type="dot"
week-start="sunday"
picker-type="date"
:show-today-button="true"
:disabled-week-view="false"
format="YY/MM/DD hh:mm"
@get-height="getHeight"
@confirm="dateConfirm"
@change="dateChange"
:name="name"
></DatetimePicker>
</van-sticky>
<div class="footer" v-if="flagGo!=='4'">
<div class="fs12 c-gray-base h30 line-height ml15">班次：正常 09:00-18:00</div>
<div class=" h40 flex align-items-c border-gb footer-bg">
<div class="h40 flex align-items-c border-gb footer-bg">
<img class="h15 w15 ml15" src="@/assets/images/u20046.png" alt />
<div class="fs14 ml5">今日打卡{{count}}次，工时共计{{Number(amount).toFixed(2)}}小时</div>
</div>
<div class=" flex pt10 footer-bg">
<div class="flex pt10 footer-bg">
<div class="text-center ml10 white">
<div class="w18 h18 fs12 bg-gray radius50">上</div>
<div class="lin"></div>
<div class="w18 h18 fs12 bg-gray radius50">下</div>
<div class="w18 h18 fs12 bg-gray radius50">上</div>
<div class="lin"></div>
<div class="w18 h18 fs12 bg-gray radius50">下</div>
</div>
<div>
<div class="fs14 fw500 ml15">
打卡时间 <span v-if="flagGo!=='4'">{{goWorkTime}}</span>
打卡时间
<span v-if="flagGo!=='4'">{{goWorkTime}}</span>
<span class="c-gray-base">(上班 时间 {{workTime}})</span>
</div>
<!-- <img class="w30 h20 ml15" src="@/assets/images/u1213.png" alt /> -->
<div class="w41 h18 ml15 bg-blue-dark white fs13 text-center text1" v-if="flagGo=='0'">{{text}}</div>
<div class="w41 h18 ml15 white fs13 text-center text" v-if="flagGo=='1'||flagGo=='2'">{{text1}}</div>
<div
class="w41 h18 ml15 bg-blue-dark white fs13 text-center text1"
v-if="flagGo=='0'"
>{{text}}</div>
<div
class="w41 h18 ml15 white fs13 text-center text"
v-if="flagGo=='1'||flagGo=='2'"
>{{text1}}</div>
<div class="fs14 fw500 ml15 mt50">
打卡时间 <span v-if="flagOff!=='4'">{{offWorkTime}}</span>
打卡时间
<span v-if="flagOff!=='4'">{{offWorkTime}}</span>
<span class="c-gray-base">(下班 时间 {{workTimeOff}})</span>
</div>
<div class="w41 h18 ml15 bg-blue-dark white fs13 text-center text1" v-if="flagOff=='0'">{{text}}</div>
<div class="w41 h18 ml15 fs13 text-center text" v-if="flagOff=='1'||flagOff=='3'">{{text1}}</div>
<div
class="w41 h18 ml15 bg-blue-dark white fs13 text-center text1"
v-if="flagOff=='0'"
>{{text}}</div>
<div
class="w41 h18 ml15 fs13 text-center text"
v-if="flagOff=='1'||flagOff=='3'"
>{{text1}}</div>
</div>
</div>
</div>
<div v-if="flagGo=='4'" class="ml15">
今日休息
</div>
<div v-if="flagGo=='4'" class="ml15">今日休息</div>
</div>
</template>
<script>
import DatetimePicker from './DatetimePicker.vue'
import { Sticky } from 'vant'
import { getDayDetail,getMonthDetail } from '@/api/ebiz/attendance/attendance';
import { getDayDetail, getMonthDetail } from '@/api/ebiz/attendance/attendance'
import { formatDate } from './utils/util'
export default {
name: 'monthly',
components: {
DatetimePicker,
[Sticky.name]: Sticky,
DatetimePicker,
[Sticky.name]: Sticky,
},
data() {
return {
currentDate: new Date(),
date1:new Date(),
date1: new Date(),
defaultDatetime: new Date(),
date: '',
show: false,
isShowCalendar: true, // 是否显示弹窗
disabledWeekView:false,//是否显示周试图
disabledWeekView: false, //是否显示周试图
markDate: [
{
color: 'red',
date: ['2020/03/25']
date: ['2020/03/25'],
},
{
color: '#000000',
date: ['2020/03/29']
}
date: ['2020/03/29'],
},
], // 对象数组形式的标记日期，可以自定义标记颜色
// 所有的行事历任务
isShowWeek: false,
workTime:'',
workTimeOff:'',
count:'',
amount:'',
time:'',
week:'',
nomal:[],
name:'',
rest:[],
flagGo:'',
flagOff:'',
text:'',
text1:'',
goWorkTime:'',
offWorkTime:'',
workTime: '',
workTimeOff: '',
count: '',
amount: '',
time: '',
week: '',
nomal: [],
name: '',
rest: [],
flagGo: '',
flagOff: '',
text: '',
text1: '',
goWorkTime: '',
offWorkTime: '',
}
},
created(){
location.reload()
created() {
$(document).ready(function () {
//第一次进入页面刷新一次，仅一次
//location.href.indexOf("#")获取当前页面地址并在其中查找"#"首次出现位置，找不到就是-1
if (location.href.indexOf('#') == -1) {
//在当前页面地址加入"#"，使下次不再进入此判断
location.href = location.href + '#'
location.reload()
}
})
// console.log(JSON.parse(window.localStorage.getItem('obj1')).time)
this.date1=new Date(JSON.parse(window.localStorage.getItem('obj1')).time)
this.time=JSON.parse(window.localStorage.getItem('obj1')).time
this.name=JSON.parse(window.localStorage.getItem('obj1')).name
this.getMonthDetail1();
this.time=formatDate(this.currentDate, 'YY-MM-DD')
this.date1 = new Date(JSON.parse(window.localStorage.getItem('obj1')).time)
this.time = JSON.parse(window.localStorage.getItem('obj1')).time
this.name = JSON.parse(window.localStorage.getItem('obj1')).name
this.getMonthDetail1()
this.time = formatDate(this.currentDate, 'YY-MM-DD')
},
methods: {
onConfirm(date) {
@@ -121,172 +140,185 @@ export default {
},
//点击日期
dateChange(e) {
this.time=formatDate(e, 'YY-MM-DD')
this.time = formatDate(e, 'YY-MM-DD')
console.log(this.time)
this.getMonthDetail1()
this.week=String(new Date(e).getDay()).replace("0","日").replace("1","一").replace("2","二").replace("3","三").replace("4","四").replace("5","五").replace("6","六")
let date={
date:String(this.time)
this.week = String(new Date(e).getDay())
.replace('0', '日')
.replace('1', '一')
.replace('2', '二')
.replace('3', '三')
.replace('4', '四')
.replace('5', '五')
.replace('6', '六')
let date = {
date: String(this.time),
}
//日上班
getDayDetail(date).then((res) => {
console.log(res)
if (res.result == 0) {
;(this.workTime = res.content.workTime),
(this.workTimeOff = res.content.workTimeoff),
(this.count = res.content.count),
(this.amount = res.content.amount),
(this.flagGo = res.content.flagGo),
(this.flagOff = res.content.flagOff),
(this.goWorkTime = res.content.goWorkTime),
(this.offWorkTime = res.content.offWorkTime)
if (this.flagGo == '0' || this.flagOff == '0') {
this.goWorkTime = this.goWorkTime.split(' ')[1]
this.offWorkTime = this.offWorkTime.split(' ')[1]
this.text = '正常'
}
if (this.flagGo == '1') {
this.text1 = '缺勤'
}
if (this.flagGo == '2') {
this.text1 = '迟到'
}
if (this.flagOff == '3') {
this.text1 = '早退'
}
}
//日上班
getDayDetail(date).then(res=>{
console.log(res)
if(res.result == 0){
this.workTime=res.content.workTime,
this.workTimeOff=res.content.workTimeoff,
this.count=res.content.count,
this.amount=res.content.amount,
this.flagGo=res.content.flagGo,
this.flagOff=res.content.flagOff,
this.goWorkTime=res.content.goWorkTime,
this.offWorkTime=res.content.offWorkTime
if(this.flagGo=='0'|| this.flagOff=='0'){
this.goWorkTime=this.goWorkTime.split(' ')[1]
this.offWorkTime=this.offWorkTime.split(' ')[1]
this.text='正常'
}
if(this.flagGo=='1'){
this.text1='缺勤'
}
if(this.flagGo=='2'){
this.text1='迟到'
}
if(this.flagOff=='3'){
this.text1='早退'
}
}
})
})
},
dateConfirm(date){
dateConfirm(date) {
this.time = utils.formatDate(date, 'YY-MM-DD')
this.timeChange= formatDate(date, 'YY-MM')
this.week=String(new Date(date).getDay()).replace("0","日").replace("1","一").replace("2","二").replace("3","三").replace("4","四").replace("5","五").replace("6","六")
let date1={
date:this.time
this.timeChange = formatDate(date, 'YY-MM')
this.week = String(new Date(date).getDay())
.replace('0', '日')
.replace('1', '一')
.replace('2', '二')
.replace('3', '三')
.replace('4', '四')
.replace('5', '五')
.replace('6', '六')
let date1 = {
date: this.time,
}
getDayDetail(date1).then((res) => {
console.log(res)
if (res.result == 0) {
;(this.workTime = res.content.workTime),
(this.workTimeOff = res.content.workTimeoff),
(this.count = res.content.count),
(this.amount = res.content.amount),
(this.flagGo = res.content.flagGo),
(this.flagOff = res.content.flagOff),
(this.goWorkTime = res.content.goWorkTime),
(this.offWorkTime = res.content.offWorkTime)
if (this.flagGo == '0' || this.flagOff == '0') {
this.goWorkTime = this.goWorkTime.split(' ')[1]
this.offWorkTime = this.offWorkTime.split(' ')[1]
this.text = '正常'
}
if (this.flagGo == '1') {
this.text1 = '缺勤'
}
if (this.flagGo == '2') {
this.text1 = '迟到'
}
if (this.flagOff == '3') {
this.text1 = '早退'
}
}
getDayDetail(date1).then(res=>{
console.log(res)
if(res.result == 0){
this.workTime=res.content.workTime,
this.workTimeOff=res.content.workTimeoff,
this.count=res.content.count,
this.amount=res.content.amount,
this.flagGo=res.content.flagGo,
this.flagOff=res.content.flagOff,
this.goWorkTime=res.content.goWorkTime,
this.offWorkTime=res.content.offWorkTime
if(this.flagGo=='0'|| this.flagOff=='0'){
this.goWorkTime=this.goWorkTime.split(' ')[1]
this.offWorkTime=this.offWorkTime.split(' ')[1]
this.text='正常'
}
if(this.flagGo=='1'){
this.text1='缺勤'
}
if(this.flagGo=='2'){
this.text1='迟到'
}
if(this.flagOff=='3'){
this.text1='早退'
}
}
})
})
},
//月历
getMonthDetail1(){
console.log("================"+this.time)
let date={
date:this.time
}
if(Date.parse(this.time)<=Date.parse(formatDate(new Date(), 'YY-MM-DD'))){
getMonthDetail(date).then(res=>{
// console.log(res)
if(res.result == 0){
let arr1=[]
let obj1={}
let date1=[]
obj1.color='#FFD700'
for(let i=0;i<res.content.rest.length;i++){
let workTime=res.content.rest[i].split(' ')
let workTime1=workTime[0]
if(Date.parse(workTime1)<Date.parse(formatDate(new Date(), 'YY-MM-DD'))){
let arr2=res.content.rest.slice(0,i+1)
obj1.date=arr2
// console.log(arr2)
}
getMonthDetail1() {
console.log('================' + this.time)
let date = {
date: this.time,
}
if (Date.parse(this.time) <= Date.parse(formatDate(new Date(), 'YY-MM-DD'))) {
getMonthDetail(date).then((res) => {
// console.log(res)
if (res.result == 0) {
let arr1 = []
let obj1 = {}
let date1 = []
obj1.color = '#FFD700'
for (let i = 0; i < res.content.rest.length; i++) {
let workTime = res.content.rest[i].split(' ')
let workTime1 = workTime[0]
if (Date.parse(workTime1) < Date.parse(formatDate(new Date(), 'YY-MM-DD'))) {
let arr2 = res.content.rest.slice(0, i + 1)
obj1.date = arr2
// console.log(arr2)
}
arr1.push(obj1)
// console.log(obj1)
// this.mask=arr1
let arr=arr1
let obj={}
let date=[]
let arr3=[]
obj.color=' #00BFFF'
for(let t=0;t<res.content.normal.length;t++){
let workTime=res.content.normal[t].split(' ')
let workTime1=workTime[0]
date.push(workTime1)
// console.log(date)
obj.date=date
}
arr.push(obj)
// arr3=arr3.concat(arr1,arr)
this.markDate=arr
// console.log(this.mask)
}
})
}
arr1.push(obj1)
// console.log(obj1)
// this.mask=arr1
let arr = arr1
let obj = {}
let date = []
let arr3 = []
obj.color = ' #00BFFF'
for (let t = 0; t < res.content.normal.length; t++) {
let workTime = res.content.normal[t].split(' ')
let workTime1 = workTime[0]
date.push(workTime1)
// console.log(date)
obj.date = date
}
arr.push(obj)
// arr3=arr3.concat(arr1,arr)
this.markDate = arr
// console.log(this.mask)
}
})
}
},
getHeight(val) {
getHeight(val) {
this.calendarHeight = val
let taskList = document.getElementsByClassName('footer')[0].previousElementSibling
taskList.style.height = `${this.calendarHeight + 36}px`
},
//滑动结束
touchend(e){
touchend(e) {
// console.log(e)
// console.log(this.time)
// this.getMonthDetail1()
}
},
},
destroyed: function () {
// console.log("我已经离开了！");
localStorage.removeItem('obj1');
},
// console.log("我已经离开了！");
localStorage.removeItem('obj1')
},
}
</script>
<style>
.header {
width: 100%;
z-index: 100;
height:70px;
height: 70px;
}
.calendar {
/* z-index: -1; */
width: 100%;
}
.lin{
width: 1px;
height: 75px;
border-right: 1px solid #ccc;
margin-left:7px;
.lin {
width: 1px;
height: 75px;
border-right: 1px solid #ccc;
margin-left: 7px;
}
.text{
.text {
line-height: 18px;
border-radius: 10px;
background:#FFD700;
color:white
background: #ffd700;
color: white;
}
.text1{
line-height: 18px;
.text1 {
line-height: 18px;
border-radius: 10px;
background: #00BFFF;
color:white
background: #00bfff;
color: white;
}
.footer-bg{
background:#F7F7F7;
.footer-bg {
background: #f7f7f7;
}
</style>