|
@@ -1,8 +1,8 @@
|
|
import React, { Component } from 'react'
|
|
import React, { Component } from 'react'
|
|
import { connect } from 'react-redux'
|
|
import { connect } from 'react-redux'
|
|
-import { Map, OpenData, View, Image, Text } from '@tarojs/components'
|
|
|
|
|
|
+import { Map, OpenData, View, Image, Text, Button } from '@tarojs/components'
|
|
import Taro from '@tarojs/taro';
|
|
import Taro from '@tarojs/taro';
|
|
-import { AtIcon, AtModal } from "taro-ui";
|
|
|
|
|
|
+import { AtIcon, AtModal, AtModalContent, AtModalAction, AtTextarea, AtButton } from "taro-ui";
|
|
import dayjs from 'dayjs';
|
|
import dayjs from 'dayjs';
|
|
import Skeleton from 'taro-skeleton'
|
|
import Skeleton from 'taro-skeleton'
|
|
|
|
|
|
@@ -52,12 +52,15 @@ class PunchClocks extends Component {
|
|
addressLongitude: '',
|
|
addressLongitude: '',
|
|
distance: '',
|
|
distance: '',
|
|
dtails: {},
|
|
dtails: {},
|
|
- loading: true
|
|
|
|
|
|
+ loading: true,
|
|
|
|
+ isAbnormalOpen: false,
|
|
|
|
+ clockInRemarks: "",//打卡说明
|
|
}
|
|
}
|
|
this.onChange = this.onChange.bind(this);
|
|
this.onChange = this.onChange.bind(this);
|
|
this.getSpacing = this.getSpacing.bind(this);
|
|
this.getSpacing = this.getSpacing.bind(this);
|
|
this.getData = this.getData.bind(this);
|
|
this.getData = this.getData.bind(this);
|
|
this.publicReleaseClockIn = this.publicReleaseClockIn.bind(this);
|
|
this.publicReleaseClockIn = this.publicReleaseClockIn.bind(this);
|
|
|
|
+ this.abnormalClockIn = this.abnormalClockIn.bind(this);
|
|
this.refresh = this.refresh.bind(this);
|
|
this.refresh = this.refresh.bind(this);
|
|
this.getDtails = this.getDtails.bind(this);
|
|
this.getDtails = this.getDtails.bind(this);
|
|
}
|
|
}
|
|
@@ -168,7 +171,7 @@ class PunchClocks extends Component {
|
|
Taro.offLocationChange();
|
|
Taro.offLocationChange();
|
|
this.nowTime && this.nowTime.clearTimeout();
|
|
this.nowTime && this.nowTime.clearTimeout();
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+ // 正常打卡
|
|
publicReleaseClockIn() {
|
|
publicReleaseClockIn() {
|
|
if (this.state.dtails.status === 3) {
|
|
if (this.state.dtails.status === 3) {
|
|
Taro.hideLoading()
|
|
Taro.hideLoading()
|
|
@@ -202,7 +205,8 @@ class PunchClocks extends Component {
|
|
}
|
|
}
|
|
publicReleaseClockIn({
|
|
publicReleaseClockIn({
|
|
id: this.state.dtails.id,
|
|
id: this.state.dtails.id,
|
|
- photoUrl: this.state.imgs.join(',')
|
|
|
|
|
|
+ photoUrl: this.state.imgs.join(','),
|
|
|
|
+ clockIn: 1,
|
|
}).then(v => {
|
|
}).then(v => {
|
|
Taro.hideLoading()
|
|
Taro.hideLoading()
|
|
if (v.error.length === 0) {
|
|
if (v.error.length === 0) {
|
|
@@ -224,7 +228,41 @@ class PunchClocks extends Component {
|
|
})
|
|
})
|
|
})
|
|
})
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+ // 异常打卡
|
|
|
|
+ abnormalClockIn() {
|
|
|
|
+ if (!this.state.clockInRemarks) {
|
|
|
|
+ Taro.showToast({ title: '请填写异常打卡原因!', icon: 'none' })
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ Taro.showLoading({ title: '正在提交...' });
|
|
|
|
+ publicReleaseClockIn({
|
|
|
|
+ id: this.state.dtails.id,
|
|
|
|
+ photoUrl: this.state.imgs.join(','),
|
|
|
|
+ clockInRemarks: this.state.clockInRemarks,
|
|
|
|
+ clockIn: 2,
|
|
|
|
+ }).then(v => {
|
|
|
|
+ Taro.hideLoading()
|
|
|
|
+ if (v.error.length === 0) {
|
|
|
|
+ Taro.showToast({ title: '打卡成功', icon: 'none' });
|
|
|
|
+ this.imagePicker.clear();
|
|
|
|
+ this.state.dtails.clockIn = 1;
|
|
|
|
+ this.setState({
|
|
|
|
+ dtails: this.state.dtails,
|
|
|
|
+ imgs: [],
|
|
|
|
+ clockInRemarks: "",
|
|
|
|
+ isAbnormalOpen: false,
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ Taro.showToast({ title: v.error[0].message, icon: 'none' })
|
|
|
|
+ }
|
|
|
|
+ }).catch(() => {
|
|
|
|
+ Taro.hideLoading()
|
|
|
|
+ Taro.showToast({
|
|
|
|
+ title: '系统错误,请稍后再试',
|
|
|
|
+ icon: 'none'
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ }
|
|
getData(fn) {
|
|
getData(fn) {
|
|
this.setState({
|
|
this.setState({
|
|
loading: true
|
|
loading: true
|
|
@@ -377,7 +415,7 @@ class PunchClocks extends Component {
|
|
</View>
|
|
</View>
|
|
<View className='switchContent' onClick={() => {
|
|
<View className='switchContent' onClick={() => {
|
|
Taro.switchTab({
|
|
Taro.switchTab({
|
|
- url: '/pages/examine/index',
|
|
|
|
|
|
+ url: '/pages/mybusiness/index',
|
|
})
|
|
})
|
|
}}>
|
|
}}>
|
|
<View className='switchTitle'>切换打卡</View>
|
|
<View className='switchTitle'>切换打卡</View>
|
|
@@ -391,11 +429,13 @@ class PunchClocks extends Component {
|
|
{
|
|
{
|
|
Object.keys(this.state.dtails).length <= 0 ?
|
|
Object.keys(this.state.dtails).length <= 0 ?
|
|
<View className='content'>
|
|
<View className='content'>
|
|
- <View className='punchClockContent' onClick={this.publicReleaseClockIn} style={{
|
|
|
|
- boxShadow: '1px 1px 15px 1px #acb8ad',
|
|
|
|
- background: '#828e83',
|
|
|
|
- marginTop: '85px',
|
|
|
|
- }}>
|
|
|
|
|
|
+ <View className='punchClockContent'
|
|
|
|
+ onClick={this.publicReleaseClockIn}
|
|
|
|
+ style={{
|
|
|
|
+ boxShadow: '1px 1px 15px 1px #acb8ad',
|
|
|
|
+ background: '#828e83',
|
|
|
|
+ marginTop: '85px',
|
|
|
|
+ }}>
|
|
<View className='punchClockTitle'>公出打卡</View>
|
|
<View className='punchClockTitle'>公出打卡</View>
|
|
<View className='punchClockTime'>{this.state.nowTime}</View>
|
|
<View className='punchClockTime'>{this.state.nowTime}</View>
|
|
</View>
|
|
</View>
|
|
@@ -442,44 +482,63 @@ class PunchClocks extends Component {
|
|
<View style={{ alignSelf: 'flex-start', width: '100%' }}>
|
|
<View style={{ alignSelf: 'flex-start', width: '100%' }}>
|
|
<ImagePicker ref={ref => this.imagePicker = ref} url='/api/admin/release/upload' showAddBtn={false} onChange={this.onChange} />
|
|
<ImagePicker ref={ref => this.imagePicker = ref} url='/api/admin/release/upload' showAddBtn={false} onChange={this.onChange} />
|
|
</View>
|
|
</View>
|
|
- <View className='punchClockContent' onClick={() => {
|
|
|
|
- let _this = this;
|
|
|
|
- Taro.showLoading({ title: '加载中...' })
|
|
|
|
- Taro.getSetting({
|
|
|
|
- success: (res) => {
|
|
|
|
- if (!res.authSetting['scope.userLocation']) {
|
|
|
|
- Taro.authorize({
|
|
|
|
- scope: 'scope.userLocation',
|
|
|
|
- success: () => {
|
|
|
|
- _this.publicReleaseClockIn();
|
|
|
|
- },
|
|
|
|
- fail: () => {
|
|
|
|
- Taro.hideLoading()
|
|
|
|
- this.setState({
|
|
|
|
- isOpened: true
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- } else {
|
|
|
|
- _this.publicReleaseClockIn();
|
|
|
|
|
|
+ {
|
|
|
|
+ // dtails.type == 3 &&
|
|
|
|
+ false &&
|
|
|
|
+ <View
|
|
|
|
+ className="photographUnusual"
|
|
|
|
+ onClick={() => {
|
|
|
|
+ if (this.state.imgs.length === 0) {
|
|
|
|
+ Taro.hideLoading()
|
|
|
|
+ Taro.showToast({ title: '请上传打卡照片', icon: 'none' })
|
|
|
|
+ return;
|
|
}
|
|
}
|
|
- }
|
|
|
|
- })
|
|
|
|
- }} style={{
|
|
|
|
- boxShadow:
|
|
|
|
- (!isNaN(parseInt(this.state.distance)))
|
|
|
|
- && this.state.distance <= this.wxConfig.clockInRange && this.state.distance >= 0 &&
|
|
|
|
|
|
+ this.setState({
|
|
|
|
+ isAbnormalOpen: true
|
|
|
|
+ })
|
|
|
|
+ }}
|
|
|
|
+ >异常</View>
|
|
|
|
+ }
|
|
|
|
+ <View className='punchClockContent'
|
|
|
|
+ onClick={() => {
|
|
|
|
+ let _this = this;
|
|
|
|
+ Taro.showLoading({ title: '加载中...' })
|
|
|
|
+ Taro.getSetting({
|
|
|
|
+ success: (res) => {
|
|
|
|
+ if (!res.authSetting['scope.userLocation']) {
|
|
|
|
+ Taro.authorize({
|
|
|
|
+ scope: 'scope.userLocation',
|
|
|
|
+ success: () => {
|
|
|
|
+ _this.publicReleaseClockIn();
|
|
|
|
+ },
|
|
|
|
+ fail: () => {
|
|
|
|
+ Taro.hideLoading()
|
|
|
|
+ this.setState({
|
|
|
|
+ isOpened: true
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ _this.publicReleaseClockIn();
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }}
|
|
|
|
+ style={{
|
|
|
|
+ boxShadow:
|
|
|
|
+ (!isNaN(parseInt(this.state.distance)))
|
|
|
|
+ && this.state.distance <= this.wxConfig.clockInRange && this.state.distance >= 0 &&
|
|
|
|
+ !(dayjs().isBefore(this.state.dtails.releaseStarts) || dayjs().isAfter(this.state.dtails.releaseEnds)) &&
|
|
|
|
+ dtails.status !== 3
|
|
|
|
+ ? (dtails.clockIn === 1 ? '1px 1px 15px 1px #3f82e8' : '1px 1px 15px 1px #659268') : '1px 1px 15px 1px #828e83',
|
|
|
|
+ background: (!isNaN(parseInt(this.state.distance)))
|
|
|
|
+ &&
|
|
|
|
+ this.state.distance <= this.wxConfig.clockInRange &&
|
|
|
|
+ this.state.distance >= 0 &&
|
|
!(dayjs().isBefore(this.state.dtails.releaseStarts) || dayjs().isAfter(this.state.dtails.releaseEnds)) &&
|
|
!(dayjs().isBefore(this.state.dtails.releaseStarts) || dayjs().isAfter(this.state.dtails.releaseEnds)) &&
|
|
dtails.status !== 3
|
|
dtails.status !== 3
|
|
- ? (dtails.clockIn === 1 ? '1px 1px 15px 1px #3f82e8' : '1px 1px 15px 1px #659268') : '1px 1px 15px 1px #828e83',
|
|
|
|
- background: (!isNaN(parseInt(this.state.distance)))
|
|
|
|
- &&
|
|
|
|
- this.state.distance <= this.wxConfig.clockInRange &&
|
|
|
|
- this.state.distance >= 0 &&
|
|
|
|
- !(dayjs().isBefore(this.state.dtails.releaseStarts) || dayjs().isAfter(this.state.dtails.releaseEnds)) &&
|
|
|
|
- dtails.status !== 3
|
|
|
|
- ? (dtails.clockIn === 1 ? '#3f82e8' : '#72cb78') : '#828e83'
|
|
|
|
- }}>
|
|
|
|
|
|
+ ? (dtails.clockIn === 1 ? '#3f82e8' : '#72cb78') : '#828e83'
|
|
|
|
+ }}>
|
|
<View className='punchClockTitle'>
|
|
<View className='punchClockTitle'>
|
|
{
|
|
{
|
|
dtails.clockIn === 1 ?
|
|
dtails.clockIn === 1 ?
|
|
@@ -495,12 +554,13 @@ class PunchClocks extends Component {
|
|
}}>
|
|
}}>
|
|
<Image src={Location} className='locationIcon' />
|
|
<Image src={Location} className='locationIcon' />
|
|
</View>
|
|
</View>
|
|
- <View className='punchRange' onClick={() => {
|
|
|
|
- this.mapCtx.moveToLocation({
|
|
|
|
- latitude: this.state.addressLatitude,
|
|
|
|
- longitude: this.state.addressLongitude,
|
|
|
|
- });
|
|
|
|
- }}>
|
|
|
|
|
|
+ <View className='punchRange'
|
|
|
|
+ onClick={() => {
|
|
|
|
+ this.mapCtx.moveToLocation({
|
|
|
|
+ latitude: this.state.addressLatitude,
|
|
|
|
+ longitude: this.state.addressLongitude,
|
|
|
|
+ });
|
|
|
|
+ }}>
|
|
<Image src={PunchRange} className='punchRangeIcon' />
|
|
<Image src={PunchRange} className='punchRangeIcon' />
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
@@ -578,15 +638,31 @@ class PunchClocks extends Component {
|
|
}}
|
|
}}
|
|
content='您拒绝了定位权限,请先前往设置打开定位权限'
|
|
content='您拒绝了定位权限,请先前往设置打开定位权限'
|
|
/>
|
|
/>
|
|
- {this.state.historicalIsOpened ? <HistoricalClock
|
|
|
|
- id={dtails.id}
|
|
|
|
- isOpened={this.state.historicalIsOpened}
|
|
|
|
- onClose={() => {
|
|
|
|
- this.setState({
|
|
|
|
- historicalIsOpened: false
|
|
|
|
- })
|
|
|
|
- }}
|
|
|
|
- /> : null}
|
|
|
|
|
|
+ {/* 异常打卡原因 */}
|
|
|
|
+ <AtModal isOpened={this.state.isAbnormalOpen}>
|
|
|
|
+ <AtModalContent>
|
|
|
|
+ <AtTextarea
|
|
|
|
+ value={this.state.clockInRemarks}
|
|
|
|
+ onChange={e => { this.setState({ clockInRemarks: e }) }}
|
|
|
|
+ maxLength={200}
|
|
|
|
+ placeholder='请填写异常打卡原因~'
|
|
|
|
+ />
|
|
|
|
+ </AtModalContent>
|
|
|
|
+ <AtModalAction>
|
|
|
|
+ <Button type='secondary' onClick={() => { this.setState({ isAbnormalOpen: false }) }}>取消</Button>
|
|
|
|
+ <Button type='primary' onClick={this.abnormalClockIn}>提交</Button>
|
|
|
|
+ </AtModalAction>
|
|
|
|
+ </AtModal>
|
|
|
|
+ {this.state.historicalIsOpened &&
|
|
|
|
+ <HistoricalClock
|
|
|
|
+ id={dtails.id}
|
|
|
|
+ isOpened={this.state.historicalIsOpened}
|
|
|
|
+ onClose={() => {
|
|
|
|
+ this.setState({
|
|
|
|
+ historicalIsOpened: false
|
|
|
|
+ })
|
|
|
|
+ }}
|
|
|
|
+ />}
|
|
</View>
|
|
</View>
|
|
)
|
|
)
|
|
}
|
|
}
|