jiangyinzhi
366 lines
9.1 KiB
Vue
366 lines
9.1 KiB
Vue
<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
|
|
:rules="[{ required: true }]"
|
|
/>
|
|
<van-field
|
|
v-model="formData.ltitude"
|
|
label="纬度"
|
|
input-align="right"
|
|
placeholder="请输入"
|
|
required
|
|
:rules="[{ required: true }]"
|
|
/>
|
|
<van-field
|
|
v-model="formData.addressName"
|
|
label="定位地址"
|
|
input-align="right"
|
|
placeholder="请输入"
|
|
required
|
|
:rules="[{ required: true }]"
|
|
/>
|
|
<van-field
|
|
v-model="formData.clockType"
|
|
label="打卡类型"
|
|
input-align="right"
|
|
placeholder="请输入"
|
|
required
|
|
:rules="[{ required: true }]"
|
|
/>
|
|
<van-field
|
|
v-model="formData.clockNum"
|
|
label="打卡人数"
|
|
input-align="right"
|
|
placeholder="请输入"
|
|
v-input.numNo0
|
|
type="number"
|
|
required
|
|
:rules="[{ required: true }]"
|
|
/>
|
|
<!-- <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
|
|
ref="uploaderRef"
|
|
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() {
|
|
if (this.$refs.uploaderRef.checkImgisUpload(this.text1)) {
|
|
this.$notify({
|
|
message: '图片尚在上传或上传失败',
|
|
duration: 1000,
|
|
background: 'red',
|
|
})
|
|
return
|
|
}
|
|
if (
|
|
this.text1 == null ||
|
|
this.text1 == [] ||
|
|
this.text1.length == 0
|
|
) {
|
|
this.$notify({
|
|
message: '请上传打卡照片',
|
|
duration: 1000,
|
|
background: 'red',
|
|
})
|
|
return
|
|
}
|
|
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>
|