乡村相册迁移位置
This commit is contained in:
aixianling
413
src/project/caw/AppCountryAlbum/AttendanceFiexdTime.vue
Normal file
413
src/project/caw/AppCountryAlbum/AttendanceFiexdTime.vue
Normal file
@@ -0,0 +1,413 @@
|
||||
<template>
|
||||
<div class="AttendanceFiexdTime">
|
||||
<div class="form-group">
|
||||
<div class="form-group__item">
|
||||
<div class="left">
|
||||
<label>*</label>
|
||||
<span>上班打卡时间</span>
|
||||
</div>
|
||||
<picker mode="time" @change="e => onTimeChange(e, 'workInTime')">
|
||||
<div class="right">
|
||||
<span>{{ form.workInTime || '请设置时间' }}</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" @change="e => onTimeChange(e, 'workOutTime')">
|
||||
<div class="right">
|
||||
<span>{{ form.workOutTime || '请设置时间' }}</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" @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" @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>
|
||||
<p>超过打卡时间则记为迟到，提前打卡则记为早退</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group__item">
|
||||
<div class="left">
|
||||
<label>*</label>
|
||||
<span>上班打卡</span>
|
||||
</div>
|
||||
<picker mode="time" @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" @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.openWorkPoint === '1'" @change="onWorkPointChange" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group__item form-item__address form-group__checked" 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: 'AttendanceFiexdTime',
|
||||
|
||||
appName: '固定时间打卡设置',
|
||||
|
||||
data () {
|
||||
return {
|
||||
form: {
|
||||
openRestTime: '1',
|
||||
openWorkPoint: '0',
|
||||
workInTime: '',
|
||||
restTimeBegin: '',
|
||||
restTimeEnd: '',
|
||||
workOutTime: '',
|
||||
workInFrom: '',
|
||||
workOutEnd: ''
|
||||
},
|
||||
address: {}
|
||||
}
|
||||
},
|
||||
|
||||
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.workInTime) {
|
||||
return this.$u.toast('请选择上班打卡时间')
|
||||
}
|
||||
|
||||
if (!this.form.workOutTime) {
|
||||
return this.$u.toast('请选择下班打卡时间')
|
||||
}
|
||||
|
||||
if (this.$dayjs('2020-06-01 ' + this.form.workOutTime).valueOf() <= this.$dayjs('2020-06-01 ' + this.form.workInTime).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.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.openWorkPoint === '1' && !this.address.address) {
|
||||
return this.$u.toast('请选择固定打卡点')
|
||||
}
|
||||
|
||||
this.$loading()
|
||||
this.$http.post('/api/appattendanceconfig/addOrUpdate', {
|
||||
openRestTime: this.form.openRestTime,
|
||||
openWorkPoint: this.form.openWorkPoint,
|
||||
workInFrom: `${this.form.workInFrom}`,
|
||||
workOutEnd: `${this.form.workOutEnd}`,
|
||||
workInTime: `${this.form.workInTime}`,
|
||||
workOutTime: `${this.form.workOutTime}`,
|
||||
restTimeBegin: `${this.form.restTimeBegin}`,
|
||||
restTimeEnd: `${this.form.restTimeEnd}`,
|
||||
type: 0,
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user