|
|
|
@ -1,5 +1,5 @@ |
|
|
|
<template> |
|
|
|
<div style="height:600px;overflow:auto;padding: 20px;" class="form-class"> |
|
|
|
<div style="height: 600px; overflow: auto; padding: 20px" class="form-class"> |
|
|
|
<el-form |
|
|
|
:model="dataForm" |
|
|
|
:rules="dataRule" |
|
|
|
@ -22,81 +22,93 @@ |
|
|
|
<el-input |
|
|
|
v-model="dataForm.name" |
|
|
|
placeholder="疫苗接种点名称" |
|
|
|
:disabled='dialogTitle == "查看"' |
|
|
|
:disabled="dialogTitle == '查看'" |
|
|
|
></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="接种日期" prop="inoculationDate"> |
|
|
|
<!-- <el-input |
|
|
|
v-model="dataForm.inoculationDate" |
|
|
|
placeholder="接种日期" |
|
|
|
></el-input> --> |
|
|
|
<el-date-picker |
|
|
|
v-model="dataForm.inoculationDate" |
|
|
|
value-format="yyyy-MM-dd" |
|
|
|
type="date" |
|
|
|
placeholder="选择日期" |
|
|
|
:disabled='dialogTitle == "查看"' |
|
|
|
> |
|
|
|
</el-date-picker> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="上午接种时间" prop="morningTime" class="time-class"> |
|
|
|
<el-time-picker |
|
|
|
is-range |
|
|
|
v-model="morningTime" |
|
|
|
format="HH:mm" |
|
|
|
value-format="HH:mm" |
|
|
|
range-separator="至" |
|
|
|
start-placeholder="开始时间" |
|
|
|
end-placeholder="结束时间" |
|
|
|
placeholder="选择时间范围" |
|
|
|
@change="startTimeChange" |
|
|
|
:disabled='dialogTitle == "查看"' |
|
|
|
:clearable="false" |
|
|
|
:editable="false" |
|
|
|
> |
|
|
|
</el-time-picker> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="下午接种时间" prop="afterTime" class="time-class"> |
|
|
|
<el-time-picker |
|
|
|
is-range |
|
|
|
v-model="afterTime" |
|
|
|
format="HH:mm" |
|
|
|
value-format="HH:mm" |
|
|
|
range-separator="至" |
|
|
|
start-placeholder="开始时间" |
|
|
|
end-placeholder="结束时间" |
|
|
|
placeholder="选择时间范围" |
|
|
|
@change="endTimeChange" |
|
|
|
:disabled='dialogTitle == "查看"' |
|
|
|
:clearable="false" |
|
|
|
:editable="false" |
|
|
|
> |
|
|
|
</el-time-picker> |
|
|
|
<el-form-item label="接种时间" :class="dataForm.noAvailableVaccines != '2'?'':'time-class'"> |
|
|
|
<div class="data-block"> |
|
|
|
<div style="width: 30%"> |
|
|
|
<el-date-picker |
|
|
|
v-model="dataForm.inoculationDate" |
|
|
|
value-format="yyyy-MM-dd" |
|
|
|
type="date" |
|
|
|
:clearable="false" |
|
|
|
placeholder="选择日期" |
|
|
|
:disabled="dialogTitle == '查看'" |
|
|
|
> |
|
|
|
</el-date-picker> |
|
|
|
</div> |
|
|
|
<div class="time-block"> |
|
|
|
<div> |
|
|
|
<span>上午</span> |
|
|
|
<el-time-picker |
|
|
|
is-range |
|
|
|
v-model="morningTime" |
|
|
|
format="HH:mm" |
|
|
|
value-format="HH:mm" |
|
|
|
range-separator="至" |
|
|
|
start-placeholder="开始时间" |
|
|
|
end-placeholder="结束时间" |
|
|
|
placeholder="选择时间范围" |
|
|
|
@change="startTimeChange" |
|
|
|
:disabled="dialogTitle == '查看'" |
|
|
|
:clearable="false" |
|
|
|
:editable="false" |
|
|
|
style="width: 56%" |
|
|
|
> |
|
|
|
</el-time-picker> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<span>下午</span> |
|
|
|
<el-time-picker |
|
|
|
is-range |
|
|
|
v-model="afterTime" |
|
|
|
format="HH:mm" |
|
|
|
value-format="HH:mm" |
|
|
|
range-separator="至" |
|
|
|
start-placeholder="开始时间" |
|
|
|
end-placeholder="结束时间" |
|
|
|
placeholder="选择时间范围" |
|
|
|
@change="endTimeChange" |
|
|
|
:disabled="dialogTitle == '查看'" |
|
|
|
:clearable="false" |
|
|
|
:editable="false" |
|
|
|
style="width: 56%" |
|
|
|
> |
|
|
|
</el-time-picker> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="" prop="noAvailableVaccines"> |
|
|
|
<el-checkbox |
|
|
|
v-model="dataForm.noAvailableVaccines" |
|
|
|
true-label="1" |
|
|
|
false-label="2" |
|
|
|
:disabled='dialogTitle == "查看"' |
|
|
|
:disabled="dialogTitle == '查看'" |
|
|
|
>暂无疫苗</el-checkbox |
|
|
|
> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="咨询电话" prop="mobile"> |
|
|
|
<el-input v-model="dataForm.mobile" :disabled='dialogTitle == "查看"' placeholder="咨询电话"></el-input> |
|
|
|
<el-input |
|
|
|
v-model="dataForm.mobile" |
|
|
|
:disabled="dialogTitle == '查看'" |
|
|
|
placeholder="咨询电话" |
|
|
|
></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="接种点地址" prop="address"> |
|
|
|
<el-input |
|
|
|
v-model="dataForm.address" |
|
|
|
placeholder="例:青岛市时代国际广场" |
|
|
|
style="width: 65%" |
|
|
|
></el-input> |
|
|
|
<el-button |
|
|
|
style="margin-left: 10px" |
|
|
|
type="primary" |
|
|
|
size="small" |
|
|
|
@click="handleSearchMap" |
|
|
|
>查询</el-button |
|
|
|
> |
|
|
|
style="margin-left: 10px" |
|
|
|
type="primary" |
|
|
|
size="small" |
|
|
|
@click="handleSearchMap" |
|
|
|
>查询</el-button |
|
|
|
> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item |
|
|
|
label="位置坐标" |
|
|
|
@ -122,7 +134,7 @@ |
|
|
|
>查询</el-button |
|
|
|
> --> |
|
|
|
<div |
|
|
|
id="map_app" |
|
|
|
id="map_add" |
|
|
|
class="div_map" |
|
|
|
style="width: 500px; height: 300px; margin-top: 20px" |
|
|
|
></div> |
|
|
|
@ -153,9 +165,12 @@ |
|
|
|
</el-form> |
|
|
|
<div class="submit"> |
|
|
|
<el-button @click="closeSubmit">{{ $t("cancel") }}</el-button> |
|
|
|
<el-button v-if='dialogTitle != "查看"' type="primary" @click="dataFormSubmitHandle()">{{ |
|
|
|
$t("confirm") |
|
|
|
}}</el-button> |
|
|
|
<el-button |
|
|
|
v-if="dialogTitle != '查看'" |
|
|
|
type="primary" |
|
|
|
@click="dataFormSubmitHandle()" |
|
|
|
>{{ $t("confirm") }}</el-button |
|
|
|
> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
@ -187,8 +202,8 @@ export default { |
|
|
|
noAvailableVaccines: "1", |
|
|
|
mobile: "", |
|
|
|
address: "", |
|
|
|
longitude: "120.38945519", |
|
|
|
latitude: "36.0722275", |
|
|
|
longitude: "", |
|
|
|
latitude: "", |
|
|
|
}, |
|
|
|
keyWords: null, |
|
|
|
// organizationList: [], |
|
|
|
@ -213,13 +228,6 @@ export default { |
|
|
|
trigger: "blur", |
|
|
|
}, |
|
|
|
], |
|
|
|
inoculationDate: [ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
message: this.$t("validate.required"), |
|
|
|
trigger: "blur", |
|
|
|
}, |
|
|
|
], |
|
|
|
noAvailableVaccines: [ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
@ -258,11 +266,11 @@ export default { |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
props:{ |
|
|
|
dialogTitle:{ |
|
|
|
type:String, |
|
|
|
default:'' |
|
|
|
} |
|
|
|
props: { |
|
|
|
dialogTitle: { |
|
|
|
type: String, |
|
|
|
default: "", |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
startTimeChange() { |
|
|
|
@ -279,14 +287,14 @@ export default { |
|
|
|
return false; |
|
|
|
} |
|
|
|
if (hour_0 == 12) { |
|
|
|
if(minute_0 > 0 || second_0 > 0){ |
|
|
|
if (minute_0 > 0 || second_0 > 0) { |
|
|
|
this.$message.error("请选择00:00-12:00时间段的时间"); |
|
|
|
this.morningTime = null; |
|
|
|
return false; |
|
|
|
} |
|
|
|
} |
|
|
|
if (hour_1 == 12) { |
|
|
|
if(minute_1 > 0 || second_1 > 0){ |
|
|
|
if (minute_1 > 0 || second_1 > 0) { |
|
|
|
this.$message.error("请选择00:00-12:00时间段的时间"); |
|
|
|
this.morningTime = null; |
|
|
|
return false; |
|
|
|
@ -310,14 +318,14 @@ export default { |
|
|
|
return false; |
|
|
|
} |
|
|
|
if (hour_0 == 12) { |
|
|
|
if(minute_0 == 0 && second_0 == 0){ |
|
|
|
if (minute_0 == 0 && second_0 == 0) { |
|
|
|
this.$message.error("请选择12:01-23:59时间段的时间"); |
|
|
|
this.afterTime = null; |
|
|
|
return false; |
|
|
|
} |
|
|
|
} |
|
|
|
if (hour_1 == 12) { |
|
|
|
if(minute_1 == 0 && second_1 == 0){ |
|
|
|
if (minute_1 == 0 && second_1 == 0) { |
|
|
|
this.$message.error("请选择12:01-23:59时间段的时间"); |
|
|
|
this.afterTime = null; |
|
|
|
return false; |
|
|
|
@ -332,14 +340,16 @@ export default { |
|
|
|
}, |
|
|
|
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 |
|
|
|
initMap() { |
|
|
|
let { latitude, longitude } = this.dataForm; |
|
|
|
// 定义地图中心点坐标 |
|
|
|
let _this = this; |
|
|
|
var center = new window.TMap.LatLng( |
|
|
|
_this.dataForm.latitude, |
|
|
|
_this.dataForm.longitude |
|
|
|
); |
|
|
|
if (!latitude || latitude == "" || latitude == "0") { |
|
|
|
latitude = 39.9088810666821; |
|
|
|
longitude = 116.39743841556731; |
|
|
|
} |
|
|
|
console.log(latitude, longitude); |
|
|
|
var center = new window.TMap.LatLng(latitude, longitude); |
|
|
|
// 定义map变量，调用 TMap.Map() 构造函数创建地图 |
|
|
|
map = new window.TMap.Map(document.getElementById("map_app"), { |
|
|
|
map = new window.TMap.Map(document.getElementById("map_add"), { |
|
|
|
center: center, // 设置地图中心点坐标 |
|
|
|
zoom: 17.2, // 设置地图缩放级别 |
|
|
|
pitch: 43.5, // 设置俯仰角 |
|
|
|
@ -352,12 +362,14 @@ export default { |
|
|
|
geometries: [], |
|
|
|
}); |
|
|
|
infoWindowList = Array(10); |
|
|
|
|
|
|
|
geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类 |
|
|
|
|
|
|
|
// 监听地图平移结束 |
|
|
|
map.on("panend", () => { |
|
|
|
this.handleMoveCenter(); |
|
|
|
}); |
|
|
|
this.handleMoveCenter(); |
|
|
|
// this.handleMoveCenter() |
|
|
|
this.convert(); |
|
|
|
}, |
|
|
|
handleMoveCenter() { |
|
|
|
@ -380,7 +392,6 @@ export default { |
|
|
|
// 在地图显示范围内以给定的关键字搜索地点 |
|
|
|
search |
|
|
|
.searchRectangle({ |
|
|
|
// keyword: this.keyWords, |
|
|
|
keyword: this.dataForm.address, |
|
|
|
bounds: map.getBounds(), |
|
|
|
}) |
|
|
|
@ -390,6 +401,7 @@ export default { |
|
|
|
const { |
|
|
|
location: { lat, lng }, |
|
|
|
} = data[0]; |
|
|
|
|
|
|
|
map.setCenter(new TMap.LatLng(lat, lng)); |
|
|
|
this.setMarker(lat, lng); |
|
|
|
this.dataForm.latitude = lat; |
|
|
|
@ -423,8 +435,14 @@ export default { |
|
|
|
geocoder |
|
|
|
.getAddress({ location: location }) // 将给定的坐标位置转换为地址 |
|
|
|
.then((result) => { |
|
|
|
this.dataForm.address = result.result.address; |
|
|
|
this.dataForm.address = |
|
|
|
this.dataForm.address !== "" && |
|
|
|
this.dataForm.address !== null && |
|
|
|
(this.dataForm.longitude === "" || this.dataForm.longitude === null) |
|
|
|
? this.dataForm.address |
|
|
|
: result.result.address; |
|
|
|
// 显示搜索到的地址 |
|
|
|
console.log(this.dataForm.address); |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
@ -460,8 +478,6 @@ export default { |
|
|
|
if (this.dataForm.id) { |
|
|
|
this.getInfo(); |
|
|
|
} else { |
|
|
|
this.dataForm.longitude = "120.38945519"; |
|
|
|
this.dataForm.latitude = "36.0722275"; |
|
|
|
this.initMap(); |
|
|
|
} |
|
|
|
}); |
|
|
|
@ -478,11 +494,13 @@ export default { |
|
|
|
...this.dataForm, |
|
|
|
...res.data, |
|
|
|
}; |
|
|
|
this.morningTime = [res.data.moStartTime,res.data.moEndTime] |
|
|
|
this.afterTime = [res.data.afStartTime,res.data.afEndTime] |
|
|
|
if(!this.dataForm.longitude && !this.dataForm.latitude){ |
|
|
|
this.dataForm.longitude = "120.38945519" |
|
|
|
this.dataForm.latitude = "36.0722275" |
|
|
|
if (res.data.moStartTime !== "" && res.data.afStartTime !== "") { |
|
|
|
this.morningTime = [res.data.moStartTime, res.data.moEndTime]; |
|
|
|
this.afterTime = [res.data.afStartTime, res.data.afEndTime]; |
|
|
|
} |
|
|
|
if (!this.dataForm.longitude && !this.dataForm.latitude) { |
|
|
|
this.dataForm.longitude = "120.38945519"; |
|
|
|
this.dataForm.latitude = "36.0722275"; |
|
|
|
} |
|
|
|
this.initMap(); |
|
|
|
}) |
|
|
|
@ -495,13 +513,24 @@ export default { |
|
|
|
if (!valid) { |
|
|
|
return false; |
|
|
|
} |
|
|
|
if(this.morningTime === null){ |
|
|
|
this.$message.error('请填写上午接种时间'); |
|
|
|
return false |
|
|
|
if(!this.dataForm.inoculationDate && |
|
|
|
this.dataForm.noAvailableVaccines === "2"){ |
|
|
|
this.$message.error("请选择接种日期"); |
|
|
|
return false; |
|
|
|
} |
|
|
|
if(this.afterTime === null ){ |
|
|
|
this.$message.error('请填写下午接种时间'); |
|
|
|
return false |
|
|
|
if ( |
|
|
|
this.morningTime === null && |
|
|
|
this.dataForm.noAvailableVaccines === "2" |
|
|
|
) { |
|
|
|
this.$message.error("请填写上午接种时间"); |
|
|
|
return false; |
|
|
|
} |
|
|
|
if ( |
|
|
|
this.afterTime === null && |
|
|
|
this.dataForm.noAvailableVaccines === "2" |
|
|
|
) { |
|
|
|
this.$message.error("请填写下午接种时间"); |
|
|
|
return false; |
|
|
|
} |
|
|
|
this.$http[!this.dataForm.id ? "post" : "put"]( |
|
|
|
"/epmetuser/icPointVaccinesInoculation/", |
|
|
|
@ -509,7 +538,9 @@ export default { |
|
|
|
) |
|
|
|
.then(({ data: res }) => { |
|
|
|
if (res.code !== 0) { |
|
|
|
return this.$message.error(res.internalMsg); |
|
|
|
return this.$message.error( |
|
|
|
res.internalMsg ? res.internalMsg : res.msg |
|
|
|
); |
|
|
|
} |
|
|
|
this.$message({ |
|
|
|
message: this.$t("prompt.success"), |
|
|
|
@ -532,6 +563,15 @@ export default { |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style scoped> |
|
|
|
.data-block { |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
.time-block>div{ |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
.time-block span { |
|
|
|
padding: 10px; |
|
|
|
} |
|
|
|
.position_label >>> .el-form-item__label::before { |
|
|
|
color: #fff !important; |
|
|
|
} |
|
|
|
@ -539,21 +579,20 @@ export default { |
|
|
|
text-align: center; |
|
|
|
margin: auto; |
|
|
|
} |
|
|
|
.form-class .el-input{ |
|
|
|
.form-class .el-input { |
|
|
|
width: 75%; |
|
|
|
} |
|
|
|
.form-class .el-textarea{ |
|
|
|
width: 75%!important; |
|
|
|
.form-class .el-textarea { |
|
|
|
width: 75% !important; |
|
|
|
} |
|
|
|
.time-class{ |
|
|
|
.time-class { |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
.time-class::before{ |
|
|
|
content: '*'; |
|
|
|
color: #F56C6C; |
|
|
|
position: absolute; |
|
|
|
left:16px; |
|
|
|
top: 10px; |
|
|
|
.time-class::before { |
|
|
|
content: "*"; |
|
|
|
color: #f56c6c; |
|
|
|
position: absolute; |
|
|
|
left: 42px; |
|
|
|
top: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
wanggongfeng
3 years ago