|
|
|
|
@ -0,0 +1,323 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<xy-dialog ref="dialog" :is-show.sync="isShow" type="form" :title="type === 'add' ? '新增打卡记录' : '编辑打卡记录'" :form="form" :rules="rules" @submit="submit">
|
|
|
|
|
<template v-slot:schedule_list_id>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-slot:lat>
|
|
|
|
|
<div class="xy-table-item">
|
|
|
|
|
<div class="xy-table-item-label">
|
|
|
|
|
经度 ：
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<el-input readonly v-model="form.lat " clearable placeholder="请输入经度 " style="width: 300px;" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-slot:lng>
|
|
|
|
|
<div class="xy-table-item">
|
|
|
|
|
<div class="xy-table-item-label">
|
|
|
|
|
纬度 ：
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<el-input readonly v-model="form.lng " clearable placeholder="请输入纬度 " style="width: 300px;" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-slot:address>
|
|
|
|
|
<div class="xy-table-item" style="margin-bottom: 22px;">
|
|
|
|
|
<div class="xy-table-item-label">
|
|
|
|
|
地图选择
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<avue-input-map v-model="map" :params="option" class="avue-map-input" placeholder="请选择地图"
|
|
|
|
|
style="width: 300px;"></avue-input-map>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item">
|
|
|
|
|
<div class="xy-table-item-label">
|
|
|
|
|
定位地址 ：
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<el-input v-model="form.address " clearable placeholder="请输入定位地址 " style="width: 300px;" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-slot:type>
|
|
|
|
|
<div class="xy-table-item">
|
|
|
|
|
<div class="xy-table-item-label">
|
|
|
|
|
<span style="color: red;font-weight: 600;padding-right: 4px;">*</span>打卡类型 ：
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<el-select v-model="form.type" clearable placeholder="请选择打卡类型 " style="width: 300px;">
|
|
|
|
|
<el-option v-for="item in types" :key="item.id" :label="item.value" :value="item.id"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<template v-if="form.type === 3">
|
|
|
|
|
<div class="xy-table-item">
|
|
|
|
|
<div class="xy-table-item-label">
|
|
|
|
|
服务记录 ：
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<xy-table style="margin-top: 20px;" size="mini" :height="200" :is-page="false" :list="scheduleInfo().sku" :table-item="skuTable">
|
|
|
|
|
<template v-slot:btns><</template>
|
|
|
|
|
</xy-table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-slot:upload_list>
|
|
|
|
|
<div class="xy-table-item">
|
|
|
|
|
<div class="xy-table-item-label">
|
|
|
|
|
打卡照片 ：
|
|
|
|
|
</div>
|
|
|
|
|
<div class="xy-table-item-content">
|
|
|
|
|
<el-upload
|
|
|
|
|
class="upload-demo"
|
|
|
|
|
:action="action"
|
|
|
|
|
:on-error="uploadFail"
|
|
|
|
|
:before-upload="uploadBefore"
|
|
|
|
|
:file-list="fileList"
|
|
|
|
|
:on-success="uploadSuccess"
|
|
|
|
|
:on-remove="remove"
|
|
|
|
|
list-type="picture"
|
|
|
|
|
style="width: 300px;">
|
|
|
|
|
<el-button size="small" type="primary">点击上传</el-button>
|
|
|
|
|
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
|
|
|
|
|
</el-upload>
|
|
|
|
|
<!-- <div v-if="form.avatar" style="position: relative;">-->
|
|
|
|
|
<!-- <img :src="form.avatar" class="avatar">-->
|
|
|
|
|
<!-- <Button class="img__delete" icon="md-close" shape="circle" size="small" type="error" @click="form.upload_list = []"></Button>-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
<!-- <el-upload v-else :action="action" :before-upload="uploadBefore" :limit="1" :on-error="uploadFail" :on-success="uploadSuccess" :show-file-list="true" accept="picture" class="avatar-uploader" list-type="picture-card">-->
|
|
|
|
|
<!-- <i class="el-icon-plus avatar-uploader-icon"></i>-->
|
|
|
|
|
<!-- </el-upload>-->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</xy-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import {
|
|
|
|
|
getForm,
|
|
|
|
|
save
|
|
|
|
|
} from '@/api/scheduleListLog';
|
|
|
|
|
import { save as saveSku } from '@/api/scheduleListSku'
|
|
|
|
|
export default {
|
|
|
|
|
props:{
|
|
|
|
|
scheduleListId:[Number,String],
|
|
|
|
|
types: {
|
|
|
|
|
type:Array,
|
|
|
|
|
default:()=>[{id:1,value:'签到'},{id:2,value:'过程打卡'},{id:3,value:'签退'}]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
inject:['scheduleInfo'],
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
isShow: false,
|
|
|
|
|
id: '',
|
|
|
|
|
type: '',
|
|
|
|
|
action: process.env.VUE_APP_UPLOAD_API,
|
|
|
|
|
map: [],
|
|
|
|
|
option: {
|
|
|
|
|
column: [
|
|
|
|
|
{
|
|
|
|
|
label: '坐标',
|
|
|
|
|
prop: 'map',
|
|
|
|
|
type: 'map',
|
|
|
|
|
//高德初始化参数
|
|
|
|
|
params: {
|
|
|
|
|
zoom: 10,
|
|
|
|
|
// zoomEnable: false,
|
|
|
|
|
// dragEnable: false,
|
|
|
|
|
}
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
skuTable:[
|
|
|
|
|
{
|
|
|
|
|
prop:'sku_info.name',
|
|
|
|
|
label:'服务名称',
|
|
|
|
|
minWidth:120
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
prop:'sku_info.time_lenth',
|
|
|
|
|
label:'应服务时间(分钟)',
|
|
|
|
|
width: 130
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label:'实际服务时间(分钟)',
|
|
|
|
|
width: 140,
|
|
|
|
|
customFn:(row) => {
|
|
|
|
|
return (
|
|
|
|
|
<el-input value={row.time} placeholder="实际服务时间" size="small" on={{['input']: e=>row.time = e}}></el-input>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
fileList:[],
|
|
|
|
|
form: {
|
|
|
|
|
schedule_list_id: "",
|
|
|
|
|
address: "",
|
|
|
|
|
lat: "",
|
|
|
|
|
lng: "",
|
|
|
|
|
type: "",
|
|
|
|
|
upload_list: [],
|
|
|
|
|
},
|
|
|
|
|
rules: {
|
|
|
|
|
type:[
|
|
|
|
|
{ required:true,message:'请选择打卡类型' }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
//上传
|
|
|
|
|
uploadFail(err) {
|
|
|
|
|
console.log(err)
|
|
|
|
|
},
|
|
|
|
|
uploadSuccess(response) {
|
|
|
|
|
console.log(response)
|
|
|
|
|
this.form.upload_list.push({upload_id:response.id})
|
|
|
|
|
},
|
|
|
|
|
uploadBefore(file) {
|
|
|
|
|
console.log(file)
|
|
|
|
|
if ((file.size / 1000) > 2024) {
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'warning',
|
|
|
|
|
message: '上传图片大小超过2M！'
|
|
|
|
|
})
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
remove(file,fileList){
|
|
|
|
|
this.form.upload_list = fileList.map(item => {
|
|
|
|
|
return {
|
|
|
|
|
upload_id:item.upload_id
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
async getDetail() {
|
|
|
|
|
const res = await getForm(this.id)
|
|
|
|
|
this.$integrateData(this.form, res)
|
|
|
|
|
console.log(this.form)
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
async submit() {
|
|
|
|
|
if(this.type === 'add'){
|
|
|
|
|
if(this.form.hasOwnProperty('id')){
|
|
|
|
|
delete this.form.id
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (this.type === 'editor') {
|
|
|
|
|
Object.defineProperty(this.form, 'id', {
|
|
|
|
|
value: this.id,
|
|
|
|
|
enumerable: true,
|
|
|
|
|
configurable: true,
|
|
|
|
|
writable: true
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
if(this.form.type === 3){
|
|
|
|
|
let promiseAll = this.scheduleInfo().sku.map(item => {
|
|
|
|
|
return saveSku({
|
|
|
|
|
id:item.id,
|
|
|
|
|
schedule_list_id:item.schedule_list_id,
|
|
|
|
|
sku_id:item.sku_id,
|
|
|
|
|
time:item.time
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
await Promise.all(promiseAll)
|
|
|
|
|
}
|
|
|
|
|
await save(this.form)
|
|
|
|
|
this.$successMessage(this.type, '打卡记录')
|
|
|
|
|
this.isShow = false
|
|
|
|
|
this.$emit('refresh')
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
isShow(val) {
|
|
|
|
|
if (val) {
|
|
|
|
|
console.log(1111,this.scheduleInfo().sku)
|
|
|
|
|
this.form.schedule_list_id = this.scheduleListId
|
|
|
|
|
if (this.type === 'editor') {
|
|
|
|
|
this.getDetail()
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
this.map = []
|
|
|
|
|
this.fileList = []
|
|
|
|
|
this.id = ''
|
|
|
|
|
this.type = ''
|
|
|
|
|
this.$refs['dialog'].reset()
|
|
|
|
|
delete this.form.id
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
map(val) {
|
|
|
|
|
if (val.length === 0 || !val) return
|
|
|
|
|
this.form.lng = val[0]
|
|
|
|
|
this.form.lat = val[1]
|
|
|
|
|
if(!this.form.address)this.form.address = val[2]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
@import "src/styles/index";
|
|
|
|
|
|
|
|
|
|
::v-deep .el-input__inner {
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.img__delete {
|
|
|
|
|
transform: scale(0.8, 0.8);
|
|
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 4px;
|
|
|
|
|
right: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep .avatar-uploader .el-upload {
|
|
|
|
|
border: 1px dashed #d9d9d9;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep .avatar-uploader .el-upload:hover {
|
|
|
|
|
border-color: $primaryColor;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep .el-upload--picture-card {
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
color: #8c939d;
|
|
|
|
|
width: 80px !important;
|
|
|
|
|
height: 80px !important;
|
|
|
|
|
line-height: 80px !important;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep .avatar-uploader-icon {
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
color: #8c939d;
|
|
|
|
|
width: 80px !important;
|
|
|
|
|
height: 80px !important;
|
|
|
|
|
line-height: 80px !important;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep .avatar {
|
|
|
|
|
width: 80px !important;
|
|
|
|
|
display: block;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::v-deep .el-input__inner {
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
