新增打卡页面
This commit is contained in:
jiangyinzhi
@@ -0,0 +1,339 @@
|
||||
<template>
|
||||
<div>
|
||||
<van-form ref="form" @submit="save">
|
||||
<div class="cont">
|
||||
<div class="container">
|
||||
<div class="part">
|
||||
<div class="nengyuan">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="formData.lgitude"
|
||||
label="经度"
|
||||
input-align="right"
|
||||
placeholder="请输入"
|
||||
required
|
||||
/>
|
||||
<van-field
|
||||
v-model="formData.ltitude"
|
||||
label="纬度"
|
||||
input-align="right"
|
||||
placeholder="请输入"
|
||||
required
|
||||
/>
|
||||
<van-field
|
||||
v-model="formData.addressName"
|
||||
label="定位地址"
|
||||
input-align="right"
|
||||
placeholder="请输入"
|
||||
required
|
||||
/>
|
||||
<van-field
|
||||
v-model="formData.clockType"
|
||||
label="打卡类型"
|
||||
input-align="right"
|
||||
placeholder="请输入"
|
||||
required
|
||||
/>
|
||||
<van-field
|
||||
v-model="formData.clockNum"
|
||||
label="打卡人数"
|
||||
input-align="right"
|
||||
placeholder="请输入"
|
||||
v-input.numNo0
|
||||
type="number"
|
||||
required
|
||||
/>
|
||||
<!-- <van-field
|
||||
v-model="formData.clockTime"
|
||||
label="打卡时间"
|
||||
input-align="right"
|
||||
placeholder="请输入"
|
||||
readonly
|
||||
/> -->
|
||||
<van-field
|
||||
v-model="formData.remark"
|
||||
label="备注"
|
||||
input-align="right"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="part part1">
|
||||
<div class="title">
|
||||
<div class="tit"></div>
|
||||
<div class="titInfo">打卡照片</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pic">
|
||||
<Uploader
|
||||
type="text1"
|
||||
:value="text1"
|
||||
:maxCount="1"
|
||||
:deletable="showSubmit"
|
||||
@afterRead="afterRead"
|
||||
@delImg="delImg"
|
||||
@onUpload="onUpload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-btn" v-if="showSubmit">
|
||||
<van-button native-type="submit">提交</van-button>
|
||||
</div>
|
||||
</van-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Notify } from 'vant'
|
||||
import Uploader from '@/views/facilityManage/common-vue/uploader.vue'
|
||||
import {
|
||||
getLocationMessage,
|
||||
getPosition,
|
||||
// chooseAlbumAndTakePhoto,
|
||||
} from '@/utils/dsbridge'
|
||||
import { format } from '@/utils/timeUtil.js'
|
||||
import { insertPositionData, getPositionData } from '@/api/api.js'
|
||||
import { downloadUrl } from '@/settings'
|
||||
export default {
|
||||
components: {
|
||||
Uploader,
|
||||
},
|
||||
computed:{
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
text1: [],
|
||||
|
||||
formData: {
|
||||
lgitude: '',
|
||||
ltitude: '',
|
||||
addressName: '',
|
||||
clockType: '',
|
||||
clockNum: '',
|
||||
remark: '',
|
||||
fileName: '',
|
||||
fileId: ''
|
||||
},
|
||||
showSubmit: false,
|
||||
taskId: '',
|
||||
customerId: '',
|
||||
animation: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.title = '打卡信息收集'
|
||||
this.taskId = JSON.parse(sessionStorage.getItem('tidCid')).taskId
|
||||
this.customerId = JSON.parse(sessionStorage.getItem('tidCid')).customerId
|
||||
this.getHistory()
|
||||
},
|
||||
methods: {
|
||||
// 查询打卡记录
|
||||
getHistory(){
|
||||
this.text1 = []
|
||||
getPositionData({taskId: this.taskId}).then(res => {
|
||||
console.log(res.code , res.data);
|
||||
if(res.code == 0&&res.data){
|
||||
for (const key in this.formData) {
|
||||
if (Object.hasOwnProperty.call(this.formData, key)) {
|
||||
this.formData[key] = res.data[key]
|
||||
}
|
||||
}
|
||||
if (res.data.fileId) {
|
||||
this.$set(this.text1,0, {
|
||||
fileName: res.data.fileName,
|
||||
fileId: res.data.fileId,
|
||||
url: `${downloadUrl}${res.data.fileId}`
|
||||
})
|
||||
console.log(this.text1);
|
||||
}
|
||||
this.$forceUpdate()
|
||||
this.showSubmit = false
|
||||
}else{
|
||||
this.showSubmit = true
|
||||
this.getLocation()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取当前位置
|
||||
getLocation() {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
this.formData.lgitude = 31.560001
|
||||
this.formData.ltitude = 118.708980
|
||||
this.formData.addressName = '江苏省南京市江宁区'
|
||||
}
|
||||
try {
|
||||
// this.formData.clockTime = format(new Date().getTime())
|
||||
} catch (error) {}
|
||||
getPosition((data) => {
|
||||
if (data) {
|
||||
console.log(data, '位置信息')
|
||||
this.formData.lgitude = data.longitude
|
||||
this.formData.ltitude = data.latitude
|
||||
} else {
|
||||
Notify({ type: 'warning', message: '未获取到位置信息' })
|
||||
}
|
||||
})
|
||||
getLocationMessage((data) => {
|
||||
if (data) {
|
||||
this.formData.addressName = data
|
||||
} else {
|
||||
Notify({ type: 'warning', message: '未获取到定位信息' })
|
||||
}
|
||||
})
|
||||
this.animation = requestAnimationFrame(this.getLocation)
|
||||
},
|
||||
/**
|
||||
* 图片方法
|
||||
*/
|
||||
//浏览器 ios 会走这个方法
|
||||
afterRead(data, type) {
|
||||
this[type].push({
|
||||
fileName: data.original_name,
|
||||
fileId: data.attach_id,
|
||||
url: `${downloadUrl}${data.attach_id}`
|
||||
})
|
||||
|
||||
this.formData.fileName = data.original_name
|
||||
this.formData.fileId = data.attach_id
|
||||
},
|
||||
//安卓会调用的方法
|
||||
onUpload(data, type) {
|
||||
this[type].push(data[0])
|
||||
this.formData.fileName = data[0].fileName
|
||||
this.formData.fileId = data[0].fileId
|
||||
},
|
||||
delImg(file, detail, type) {
|
||||
if(!this.showSubmit) return
|
||||
if (type == 'text1') {
|
||||
this.delIsObj(this.text1)
|
||||
this.text1.splice(detail.index, 1)
|
||||
this.formData.fileName = ''
|
||||
this.formData.fileId = ''
|
||||
}
|
||||
},
|
||||
//判断删除的list中是否为对象格式
|
||||
delIsObj(delList) {
|
||||
const list = delList.map((ele) => {
|
||||
if (ele instanceof Object) {
|
||||
return ele.url
|
||||
}
|
||||
return ele
|
||||
})
|
||||
return list
|
||||
},
|
||||
// 保存
|
||||
save() {
|
||||
let params = {
|
||||
...this.formData,
|
||||
// clockAbout: JSON.stringify(this.text1),
|
||||
taskId: this.taskId,
|
||||
customerId: this.customerId,
|
||||
}
|
||||
insertPositionData(params).then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$toast('打卡成功')
|
||||
this.$router.push({
|
||||
name: 'taskManage',
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
beforeDestroy(){
|
||||
if(this.animation){
|
||||
cancelAnimationFrame(this.animation)
|
||||
this.animation = null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/deep/.van-field__label {
|
||||
color: #333;
|
||||
}
|
||||
.cont {
|
||||
height: calc(100vh - 50px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.pic-style {
|
||||
display: inline-block;
|
||||
margin: 10px 0 10px 20px;
|
||||
}
|
||||
.part {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
.nengyuan {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
} // .faqi {
|
||||
// background-color: #63cbb6;
|
||||
// color: #fff;
|
||||
// border-radius: 8px;
|
||||
// margin-top: 20px;
|
||||
// }
|
||||
.title1 {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
border-bottom: 1px solid #eee;
|
||||
.titInfo {
|
||||
font-size: 14px;
|
||||
color: #10968b;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.titInfo1 {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.part1 {
|
||||
padding: 0 15px;
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
.tit {
|
||||
height: 15px;
|
||||
width: 4px;
|
||||
background: #2c827c;
|
||||
margin-top: 7.5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.titInfo {
|
||||
font-size: 14px;
|
||||
color: #10968b;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.titInfo1 {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.part2 {
|
||||
padding: 5px 15px;
|
||||
}
|
||||
.footer-btn {
|
||||
height: 35px;
|
||||
padding: 0 0.4rem;
|
||||
/deep/ .van-button {
|
||||
width: 100%;
|
||||
background: #34baae;
|
||||
border-radius: 10px;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user