城阳pc工作端前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

576 lines
18 KiB

<template>
<div style="max-height: 82vh; overflow: auto; padding: 20px"
class="form-class">
<el-form :model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmitHandle()"
label-width="130px">
<!--<el-form-item label="所属组织名称" prop="orgName">-->
<!--<el-select v-model="dataForm.orgName" placeholder="所属组织名称">-->
<!--<el-option-->
<!--v-for="item in organizationList"-->
<!--:key="item.value"-->
<!--:label="item.label"-->
<!--:value="item.value"-->
<!--&gt;-->
<!--</el-option>-->
<!--</el-select>-->
<!--</el-form-item>-->
<el-form-item label="疫苗接种点名称"
prop="name">
<el-input v-model="dataForm.name"
placeholder="疫苗接种点名称"
:disabled="dialogTitle == '查看'"></el-input>
</el-form-item>
<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 == '查看'">暂无疫苗</el-checkbox>
</el-form-item>
<el-form-item label="咨询电话"
prop="mobile">
<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>
</el-form-item>
<el-form-item label="位置坐标"
class="position_label"
prop="longitude"
style="display: block">
<div>
<!-- <el-input
class="item_width_4"
maxlength="50"
placeholder="例:青岛市时代国际广场"
v-model="keyWords"
style="width: 200px"
:disabled='dialogTitle == "查看"'
>
</el-input>
<el-button
style="margin-left: 10px"
type="primary"
size="small"
@click="handleSearchMap"
>查询</el-button
> -->
<div id="map_add"
class="div_map"
style="width: 500px; height: 300px; margin-top: 20px"></div>
<div style="margin-top: 10px"
v-show="false">
<span>经度</span>
<el-input class="item_width_3"
maxlength="50"
placeholder="请输入经度"
v-model="dataForm.longitude"
disabled
style="width: 200px; margin-left: 20px">
</el-input>
<span style="margin-left: 20px">纬度</span>
<el-input class="item_width_3"
maxlength="50"
placeholder="请输入纬度"
v-model="dataForm.latitude"
disabled
style="width: 200px; margin-left: 20px">
</el-input>
</div>
</div>
</el-form-item>
</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>
</div>
</div>
</template>
<script>
import debounce from "lodash/debounce";
var map;
var search;
var markers;
var geocoder;
var infoWindowList;
export default {
data () {
return {
visible: false,
dataForm: {
id: "",
customerId: "",
orgId: "",
orgName: "",
pid: "",
pids: "",
name: "",
inoculationDate: "",
moStartTime: "",
moEndTime: "",
afStartTime: "",
afEndTime: "",
noAvailableVaccines: "1",
mobile: "",
address: "",
longitude: "",
latitude: "",
},
keyWords: null,
// organizationList: [],
morningTime: null,
afterTime: null,
};
},
computed: {
dataRule () {
return {
customerId: [
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
name: [
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
noAvailableVaccines: [
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
mobile: [
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
address: [
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
longitude: [
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
latitude: [
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
};
},
},
props: {
dialogTitle: {
type: String,
default: "",
},
},
methods: {
startTimeChange () {
if (Array.isArray(this.morningTime) && this.morningTime.length > 0) {
let hour_0 = Number(this.morningTime[0].substring(0, 2));
let hour_1 = Number(this.morningTime[1].substring(0, 2));
let minute_0 = Number(this.morningTime[0].substring(3, 5));
let minute_1 = Number(this.morningTime[1].substring(3, 5));
let second_0 = Number(this.morningTime[0].substring(6, 8));
let second_1 = Number(this.morningTime[1].substring(6, 8));
if (hour_0 > 12 || hour_1 > 12) {
this.$message.error("请选择00:00-12:00时间段的时间");
this.morningTime = null;
return false;
}
if (hour_0 == 12) {
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) {
this.$message.error("请选择00:00-12:00时间段的时间");
this.morningTime = null;
return false;
}
}
this.dataForm.moStartTime = this.morningTime[0];
this.dataForm.moEndTime = this.morningTime[1];
}
},
endTimeChange () {
if (Array.isArray(this.afterTime) && this.afterTime.length > 0) {
let hour_0 = Number(this.afterTime[0].substring(0, 2));
let hour_1 = Number(this.afterTime[1].substring(0, 2));
let minute_0 = Number(this.afterTime[0].substring(3, 5));
let minute_1 = Number(this.afterTime[1].substring(3, 5));
let second_0 = Number(this.afterTime[0].substring(6, 8));
let second_1 = Number(this.afterTime[1].substring(6, 8));
if (hour_0 < 12 || hour_1 < 12) {
this.$message.error("请选择12:01-23:59时间段的时间");
this.afterTime = null;
return false;
}
// if (hour_0 == 12) {
// 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) {
// this.$message.error("请选择12:01-23:59时间段的时间");
// this.afterTime = null;
// return false;
// }
// }
this.dataForm.afStartTime = this.afterTime[0];
this.dataForm.afEndTime = this.afterTime[1];
}
},
closeSubmit () {
this.$emit("closeDialog");
},
// 地图初始化函数,本例取名为init,开发者可根据实际情况定义
initMap () {
let { latitude, longitude } = this.$store.state.user;
// 定义地图中心点坐标
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_add"), {
center: center, // 设置地图中心点坐标
zoom: 17.2, // 设置地图缩放级别
pitch: 43.5, // 设置俯仰角
rotation: 45, // 设置地图旋转角度
});
search = new window.TMap.service.Search({ pageSize: 10 });
// 新建一个地点搜索类
markers = new TMap.MultiMarker({
map: map,
geometries: [],
});
infoWindowList = Array(10);
geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
// 监听地图平移结束
map.on("panend", () => {
this.handleMoveCenter();
});
// this.handleMoveCenter()
this.convert();
},
handleMoveCenter () {
//修改地图中心点
const center = map.getCenter();
const lat = center.getLat();
const lng = center.getLng();
this.dataForm.latitude = lat;
this.dataForm.longitude = lng;
this.setMarker(lat, lng);
this.convert(lat, lng);
},
// 地图查询
handleSearchMap () {
infoWindowList.forEach((infoWindow) => {
infoWindow.close();
});
infoWindowList.length = 0;
markers.setGeometries([]);
// 在地图显示范围内以给定的关键字搜索地点
search
.searchNearby({
keyword: this.dataForm.address,
radius: 1000,
autoExtend: true,
center: map.getCenter(),
})
.then((result) => {
let { data } = result;
if (Array.isArray(data) && data.length > 0) {
const {
location: { lat, lng },
} = data[0];
map.setCenter(new TMap.LatLng(lat, lng));
this.setMarker(lat, lng);
this.dataForm.latitude = lat;
this.dataForm.longitude = lng;
this.convert();
} else {
this.$message.error("未检索到相关位置坐标");
}
});
},
convert (lat, lng) {
markers.setGeometries([]);
// var input = document.getElementById('location').value.split(',');
let location;
if (lat && lng) {
location = new TMap.LatLng(lat, lng);
} else {
location = new TMap.LatLng(
this.dataForm.latitude,
this.dataForm.longitude
);
}
// map.setCenter(location);
markers.updateGeometries([
{
id: "main", // 点标注数据数组
position: location,
},
]);
geocoder
.getAddress({ location: location }) // 将给定的坐标位置转换为地址
.then((result) => {
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);
});
},
setMarker (lat, lng) {
markers.setGeometries([]);
markers.add([
{
id: "4",
styleId: "marker",
position: new TMap.LatLng(lat, lng),
properties: {
title: "marker4",
},
},
]);
},
// 获取所属组织列表
// getFormInfo() {
// this.$http
// .post(`/gov/org/agency/community-list`)
// .then(({ data: res }) => {
// if (res.code !== 0) {
// return this.$message.error(res.msg);
// }
// this.organizationList = res.data;
// })
// .catch(() => {});
// },
init () {
this.visible = true;
this.$nextTick(() => {
this.$refs["dataForm"].resetFields();
if (this.dataForm.id) {
this.getInfo();
} else {
this.initMap();
}
});
},
// 获取信息
getInfo () {
this.$http
.get(`/epmetuser/icPointVaccinesInoculation/${this.dataForm.id}`)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.dataForm = {
...this.dataForm,
...res.data,
};
if (res.data.moStartTime !== "") {
this.morningTime = [res.data.moStartTime, res.data.moEndTime];
}
if (res.data.afStartTime !== "") {
this.afterTime = [res.data.afStartTime, res.data.afEndTime];
}
this.initMap();
})
.catch(() => { });
},
// 表单提交
dataFormSubmitHandle: debounce(
function () {
this.$refs["dataForm"].validate((valid) => {
if (!valid) {
return false;
}
if (
!this.dataForm.inoculationDate &&
this.dataForm.noAvailableVaccines === "2"
) {
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/",
this.dataForm
)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(
res.internalMsg ? res.internalMsg : res.msg
);
}
this.$message({
message: this.$t("prompt.success"),
type: "success",
duration: 500,
onClose: () => {
this.visible = false;
this.$emit("refreshDataList");
this.closeSubmit();
},
});
})
.catch(() => { });
});
},
1000,
{ leading: true, trailing: false }
),
},
};
</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;
}
.submit {
text-align: center;
margin: auto;
}
.form-class .el-input {
width: 75%;
}
.form-class .el-textarea {
width: 75% !important;
}
.time-class {
position: relative;
}
.time-class::before {
content: "*";
color: #f56c6c;
position: absolute;
left: 42px;
top: 10px;
}
</style>