399 lines
11 KiB
Vue
399 lines
11 KiB
Vue
<template>
|
||
<div class="AttendanceFiexdTime">
|
||
<div class="form-group">
|
||
<div class="form-group__item">
|
||
<div class="left">
|
||
<label>*</label>
|
||
<span>最早允许打卡时间</span>
|
||
</div>
|
||
<picker mode="time" start="08:00" end="21:00" @change="e => onTimeChange(e, 'workInFrom')">
|
||
<div class="right">
|
||
<span>{{ form.workInFrom || '请设置时间' }}</span>
|
||
<image src="./images/right.png" />
|
||
</div>
|
||
</picker>
|
||
</div>
|
||
<div class="form-group__item">
|
||
<div class="left">
|
||
<label>*</label>
|
||
<span>最晚允许打卡时间</span>
|
||
</div>
|
||
<picker mode="time" start="08:00" end="21:00" @change="e => onTimeChange(e, 'workOutEnd')">
|
||
<div class="right">
|
||
<span>{{ form.workOutEnd || '请设置时间' }}</span>
|
||
<image src="./images/right.png" />
|
||
</div>
|
||
</picker>
|
||
</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="form.openRestTime === '1'" @change="onOpenRestChange" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group__item" v-if="form.openRestTime === '1'">
|
||
<div class="left">
|
||
<label>*</label>
|
||
<span>休息开始</span>
|
||
</div>
|
||
<picker mode="time" start="08:00" end="21:00" @change="e => onTimeChange(e, 'restTimeBegin')">
|
||
<div class="right">
|
||
<span>{{ form.restTimeBegin || '请设置时间' }}</span>
|
||
<image src="./images/right.png" />
|
||
</div>
|
||
</picker>
|
||
</div>
|
||
<div class="form-group__item" v-if="form.openRestTime === '1'">
|
||
<div class="left">
|
||
<label>*</label>
|
||
<span>休息结束</span>
|
||
</div>
|
||
<picker mode="time" start="08:00" end="21:00" @change="e => onTimeChange(e, 'restTimeEnd')">
|
||
<div class="right">
|
||
<span>{{ form.restTimeEnd || '请设置时间' }}</span>
|
||
<image src="./images/right.png" />
|
||
</div>
|
||
</picker>
|
||
</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>
|
||
<picker :range="hours" mode="selector" @change="e => form.workHoursLimit = hours[e.detail.value]">
|
||
<div class="right">
|
||
<span>{{ form.workHoursLimit ? form.workHoursLimit + '小时' : '请选择工作时长' }}</span>
|
||
<image src="./images/right.png" />
|
||
</div>
|
||
</picker>
|
||
</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="form.openWorkPoint === '1'" @change="onWorkPointChange" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group__item form-group__checked form-item__address" v-if="form.openWorkPoint === '1' && address.address">
|
||
<div class="left">
|
||
<h2>{{ address.title }}</h2>
|
||
<p>{{ address.address }}</p>
|
||
<p style="margin-top: 8px;">允许打卡范围{{ address.distance }}米</p>
|
||
</div>
|
||
<div class="right" @click="address = {}">
|
||
<image src="./images/remove.png" />
|
||
<span>删除</span>
|
||
</div>
|
||
</div>
|
||
<div class="form-group__item form-group__checked" v-if="form.openWorkPoint === '1' && !address.address">
|
||
<div class="left left-add" @click="linkTo('./ChooseAddess')">
|
||
<div class="add-btn"></div>
|
||
<h2 style="color: #1088F9;">添加打卡点</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-btn" hover-class="text-hover" @click="save">保存</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
name: 'AttendanceFlexibleTime',
|
||
|
||
appName: '灵活时间打卡设置',
|
||
data () {
|
||
return {
|
||
hours: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17'],
|
||
form: {
|
||
openRestTime: '1',
|
||
openWorkPoint: '0',
|
||
workHoursLimit: '',
|
||
restTimeBegin: '',
|
||
restTimeEnd: '',
|
||
workInFrom: '',
|
||
workOutEnd: ''
|
||
},
|
||
address: {},
|
||
id: ''
|
||
}
|
||
},
|
||
|
||
onLoad (query) {
|
||
uni.$on('address', e => {
|
||
this.address = e
|
||
})
|
||
|
||
if (query.id) {
|
||
this.id = query.id
|
||
|
||
this.getInfo(query.id)
|
||
}
|
||
},
|
||
|
||
onUnload () {
|
||
uni.$off('address')
|
||
},
|
||
|
||
methods: {
|
||
linkTo (url) {
|
||
uni.navigateTo({
|
||
url
|
||
})
|
||
},
|
||
|
||
getInfo (id) {
|
||
this.$http.post(`/api/appattendanceconfig/queryDetailById?id=${id}`).then(res => {
|
||
if (res.code === 0) {
|
||
this.address = JSON.parse(res.data.workPointDesc)
|
||
this.form = {
|
||
...this.form,
|
||
...res.data
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
onTimeChange (e, type) {
|
||
this.form[type] = e.detail.value + ':00'
|
||
},
|
||
|
||
onOpenRestChange (e) {
|
||
this.form.restTimeBegin = ''
|
||
this.form.restTimeEnd = ''
|
||
this.form.openRestTime = e.detail.value ? '1' : '0'
|
||
},
|
||
|
||
onWorkPointChange (e) {
|
||
this.form.openWorkPoint = e.detail.value ? '1' : '0'
|
||
this.form.workPointDesc = {}
|
||
this.address = {}
|
||
},
|
||
|
||
save () {
|
||
if (!this.form.workInFrom) {
|
||
return this.$u.toast('请选择最早打卡时间')
|
||
}
|
||
|
||
if (!this.form.workOutEnd) {
|
||
return this.$u.toast('请选择最晚打卡时间')
|
||
}
|
||
|
||
if (this.$dayjs('2020-06-01 ' + this.form.workOutEnd).valueOf() <= this.$dayjs('2020-06-01 ' + this.form.workInFrom).valueOf()) {
|
||
return this.$u.toast('最晚打卡时间不能最早打卡时间')
|
||
}
|
||
|
||
if (this.form.openRestTime === '1') {
|
||
if (!this.form.restTimeBegin) {
|
||
return this.$u.toast('请选择休息时间')
|
||
}
|
||
|
||
if (!this.form.restTimeEnd) {
|
||
return this.$u.toast('请选择休息结束时间')
|
||
}
|
||
|
||
if (this.$dayjs('2020-06-01 ' + this.form.restTimeEnd).valueOf() <= this.$dayjs('2020-06-01 ' + this.form.restTimeBegin).valueOf()) {
|
||
return this.$u.toast('休息结束时间不能早于休息开始时间')
|
||
}
|
||
}
|
||
|
||
if (!this.form.workHoursLimit) {
|
||
return this.$u.toast('请选择工作时长')
|
||
}
|
||
|
||
if (this.form.openWorkPoint === '1' && !this.address.address) {
|
||
return this.$u.toast('请选择固定打卡点')
|
||
}
|
||
|
||
this.$loading()
|
||
this.$http.post('/api/appattendanceconfig/addOrUpdate', {
|
||
openRestTime: this.form.openRestTime,
|
||
workHoursLimit: this.form.workHoursLimit,
|
||
openWorkPoint: this.form.openWorkPoint,
|
||
workInFrom: `${this.form.workInFrom}`,
|
||
workOutEnd: `${this.form.workOutEnd}`,
|
||
restTimeBegin: `${this.form.restTimeBegin}`,
|
||
restTimeEnd: `${this.form.restTimeEnd}`,
|
||
type: 1,
|
||
workPointDesc: JSON.stringify(this.address),
|
||
id: this.id || ''
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.$u.toast('提交成功')
|
||
|
||
setTimeout(() => {
|
||
uni.$emit('update')
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
}, 500)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</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 {
|
||
flex: 1;
|
||
margin-right: 10px;
|
||
|
||
h2 {
|
||
margin-bottom: 12px;
|
||
color: #333333;
|
||
font-size: 32px;
|
||
}
|
||
|
||
p {
|
||
line-height: 1.2;
|
||
}
|
||
|
||
&.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.form-item__address {
|
||
.left {
|
||
flex: 1;
|
||
margin-right: 10px;
|
||
|
||
p {
|
||
line-height: 1.3;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
span {
|
||
margin-left: 10px;
|
||
color: #1088F9;
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|