elink-star
/
ShibeiWorkPlatform_Frontend
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat:增加地图

master
123456 3 years ago
parent
21c45fba0e
commit
7a49e276c5
4 changed files with 996 additions and 274 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 446
      src/views/modules/plugins/point/icpointnucleicmonitoring-add-or-update.vue
  2. 130
      src/views/modules/plugins/point/icpointnucleicmonitoring.vue
  3. 515
      src/views/modules/plugins/point/icpointvaccinesinoculation-add-or-update.vue
  4. 179
      src/views/modules/plugins/point/icpointvaccinesinoculation.vue

446
src/views/modules/plugins/point/icpointnucleicmonitoring-add-or-update.vue
View File

@ -1,133 +1,393 @@
<template>
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
<el-form-item label="所属组织名称" prop="orgName">
<el-input v-model="dataForm.orgName" placeholder="所属组织名称"></el-input>
</el-form-item>
<el-form-item label="核酸监测点名称" prop="name">
<el-input v-model="dataForm.name" placeholder="核酸监测点名称"></el-input>
</el-form-item>
<el-form-item label="服务时间" prop="serveTime">
<el-input v-model="dataForm.serveTime" type="textarea" :rows="2" placeholder="请输入服务时间，如：每日开放 上午：8:00-11:30 ；下午：13:00-17:00"></el-input>
</el-form-item>
<el-form-item label="咨询电话" prop="mobile">
<el-input v-model="dataForm.mobile" placeholder="咨询电话" :change="check_num()"></el-input>
</el-form-item>
<el-form-item label="监测点地址" prop="address">
<el-input v-model="dataForm.address" placeholder="监测点地址"></el-input>
</el-form-item>
</el-form>
<div>
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmitHandle()"
label-width="120px"
>
<el-form-item label="所属组织名称" prop="orgName">
<!-- <el-input v-model="dataForm.orgName" placeholder="所属组织名称"></el-input> -->
<el-select v-model="dataForm.orgName" placeholder="所属组织名称">
<el-option
v-for="item in organizationList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="核酸监测点名称" prop="name">
<el-input
v-model="dataForm.name"
placeholder="核酸监测点名称"
></el-input>
</el-form-item>
<el-form-item label="服务时间" prop="serveTime">
<el-input
v-model="dataForm.serveTime"
type="textarea"
:rows="2"
placeholder="请输入服务时间，如：每日开放 上午：8:00-11:30 ；下午：13:00-17:00"
></el-input>
</el-form-item>
<el-form-item label="咨询电话" prop="mobile">
<el-input
v-model="dataForm.mobile"
placeholder="咨询电话"
:change="check_num()"
></el-input>
</el-form-item>
<el-form-item label="监测点地址" prop="address">
<el-input
v-model="dataForm.address"
placeholder="监测点地址"
disabled
></el-input>
</el-form-item>
<el-form-item label="位置坐标" prop="longitude" style="display: block">
<div>
<el-input
class="item_width_4"
maxlength="50"
placeholder="例:青岛市时代国际广场"
v-model="keyWords"
style="width: 200px"
>
</el-input>
<el-button
style="margin-left: 10px"
type="primary"
size="small"
@click="handleSearchMap"
>查询</el-button
>
<div
id="map_app"
class="div_map"
style="width: 500px; height: 300px; margin-top: 20px"
></div>
<div style="margin-top: 10px">
<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>
<template slot="footer">
<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
<el-button @click="visible = false">{{ $t("cancel") }}</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">{{
$t("confirm")
}}</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
import debounce from 'lodash/debounce'
export default {
data () {
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: '',
serveTime: '',
mobile: '',
address: '',
longitude: '',
latitude: ''
}
}
id: "",
customerId: "",
orgId: "",
orgName: "",
pid: "",
pids: "",
name: "",
serveTime: "",
mobile: "",
address: "",
longitude: "120.38945519",
latitude: "36.0722275",
},
keyWords: null,
organizationList: [],
};
},
computed: {
dataRule () {
dataRule() {
return {
customerId: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
orgId: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
orgName: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
name: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
serveTime: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
mobile: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
address: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
longitude: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
latitude: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
};
},
},
mounted() {
this.getFormInfo();
this.initMap();
},
methods: {
init () {
this.visible = true
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义
initMap() {
// 定义地图中心点坐标
var center = new window.TMap.LatLng(36.0722275, 120.38945519);
// 定义map变量，调用 TMap.Map() 构造函数创建地图
map = new window.TMap.Map(document.getElementById("map_app"), {
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
.searchRectangle({
keyword: this.keyWords,
bounds: map.getBounds(),
})
.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 = result.result.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()
this.$refs["dataForm"].resetFields();
if (this.dataForm.id) {
this.getInfo()
this.getInfo();
}
})
});
},
// 获取信息
getInfo () {
this.$http.get(`/epmetuser/icPointNucleicMonitoring/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
}).catch(() => {})
getInfo() {
console.log(111111);
this.$http
.get(`/epmetuser/icPointNucleicMonitoring/${this.dataForm.id}`)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.dataForm = {
...this.dataForm,
...res.data,
};
})
.catch(() => {});
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.$http[!this.dataForm.id ? 'post' : 'put']('/epmetuser/icPointNucleicMonitoring/', this.dataForm).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
dataFormSubmitHandle: debounce(
function () {
this.$refs["dataForm"].validate((valid) => {
if (!valid) {
return false;
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
}).catch(() => {})
})
}, 1000, { 'leading': true, 'trailing': false }),
//限制
check_num: function(){
this.dataForm.mobile = this.dataForm.mobile.replace(/[^\a-\z\A-\Z0-9]/g, '');
}
}
}
this.$http[!this.dataForm.id ? "post" : "put"](
"/epmetuser/icPointNucleicMonitoring/",
this.dataForm
)
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
this.$message({
message: this.$t("prompt.success"),
type: "success",
duration: 500,
onClose: () => {
this.visible = false;
this.$emit("refreshDataList");
},
});
})
.catch(() => {});
});
},
1000,
{ leading: true, trailing: false }
),
//限制
check_num: function () {
this.dataForm.mobile = this.dataForm.mobile.replace(
/[^\a-\z\A-\Z0-9]/g,
""
);
},
},
};
</script>

130
src/views/modules/plugins/point/icpointnucleicmonitoring.vue
View File

@ -1,31 +1,91 @@
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-user__icPointNucleicMonitoring}">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<el-form-item>
<el-input v-model="dataForm.id" placeholder="id" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button @click="getDataList()">{{ $t("query") }}</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
<el-button type="primary" @click="addOrUpdateHandle()">{{
$t("add")
}}</el-button>
</el-form-item>
<el-form-item>
<el-button type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
<el-button type="danger" @click="deleteHandle()">{{
$t("deleteBatch")
}}</el-button>
</el-form-item>
</el-form>
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
<el-table-column prop="orgName" label="所属组织名称" header-align="center" align="center"></el-table-column>
<el-table-column prop="name" label="核酸监测点名称" header-align="center" align="center"></el-table-column>
<el-table-column prop="serveTime" label="服务时间" header-align="center" align="center"></el-table-column>
<el-table-column prop="mobile" label="咨询电话" header-align="center" align="center"></el-table-column>
<el-table-column prop="address" label="监测点地址" header-align="center" align="center"></el-table-column>
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
<el-table
v-loading="dataListLoading"
:data="dataList"
border
@selection-change="dataListSelectionChangeHandle"
style="width: 100%"
>
<el-table-column
type="selection"
header-align="center"
align="center"
width="50"
></el-table-column>
<el-table-column
prop="orgName"
label="所属组织名称"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="name"
label="核酸监测点名称"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="serveTime"
label="服务时间"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="mobile"
label="咨询电话"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="address"
label="监测点地址"
header-align="center"
align="center"
></el-table-column>
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150"
>
<template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
<el-button
type="text"
size="small"
@click="addOrUpdateHandle(scope.row.id)"
>{{ $t("update") }}</el-button
>
<el-button
type="text"
size="small"
@click="deleteHandle(scope.row.id)"
>{{ $t("delete") }}</el-button
>
</template>
</el-table-column>
</el-table>
@ -36,35 +96,47 @@
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle">
@current-change="pageCurrentChangeHandle"
>
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
<el-dialog
:visible.sync="addOrUpdateVisible"
:title="!dataForm.id ? $t('add') : $t('update')"
:close-on-click-modal="false"
:close-on-press-escape="false"
:destroy-on-close="true"
>
<add-or-update
ref="addOrUpdate"
@refreshDataList="getDataList"
></add-or-update>
</el-dialog>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './icpointnucleicmonitoring-add-or-update'
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./icpointnucleicmonitoring-add-or-update";
export default {
export default {
mixins: [mixinViewModule],
data () {
data() {
return {
mixinViewModuleOptions: {
getDataListURL: '/epmetuser/icPointNucleicMonitoring/page',
getDataListURL: "/epmetuser/icPointNucleicMonitoring/page",
getDataListIsPage: true,
deleteURL: '/epmetuser/icPointNucleicMonitoring',
deleteIsBatch: true
deleteURL: "/epmetuser/icPointNucleicMonitoring",
deleteIsBatch: true,
},
dataForm: {
id: ''
}
}
id: "",
},
};
},
components: {
AddOrUpdate
}
}
AddOrUpdate,
},
};
</script>

515
src/views/modules/plugins/point/icpointvaccinesinoculation-add-or-update.vue
View File

@ -1,165 +1,448 @@
<template>
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
<el-form-item label="所属组织名称" prop="orgName">
<el-input v-model="dataForm.orgName" placeholder="所属组织名称"></el-input>
</el-form-item>
<el-form-item label="疫苗接种点名称" prop="name">
<el-input v-model="dataForm.name" placeholder="疫苗接种点名称"></el-input>
</el-form-item>
<el-form-item label="接种日期" prop="inoculationDate">
<el-input v-model="dataForm.inoculationDate" placeholder="接种日期"></el-input>
</el-form-item>
<el-form-item label="接种上午开始时间" prop="moStartTime">
<el-input v-model="dataForm.moStartTime" placeholder="接种上午开始时间"></el-input>
</el-form-item>
<el-form-item label="接种上午结束时间" prop="moEndTime">
<el-input v-model="dataForm.moEndTime" placeholder="接种上午结束时间"></el-input>
</el-form-item>
<el-form-item label="接种下午开始时间" prop="afStartTime">
<el-input v-model="dataForm.afStartTime" placeholder="接种下午开始时间"></el-input>
</el-form-item>
<el-form-item label="接种下午结束时间" prop="afEndTime">
<el-input v-model="dataForm.afEndTime" placeholder="接种下午结束时间"></el-input>
</el-form-item>
<el-form-item label="" prop="noAvailableVaccines">
<el-checkbox v-model="dataForm.noAvailableVaccines" true-label="1" false-label="2">暂无疫苗</el-checkbox>
</el-form-item>
<el-form-item label="咨询电话" prop="mobile">
<el-input v-model="dataForm.mobile" placeholder="咨询电话"></el-input>
</el-form-item>
<el-form-item label="接种点地址" prop="address">
<el-input v-model="dataForm.address" placeholder="接种点地址"></el-input>
</el-form-item>
</el-form>
<div>
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmitHandle()"
label-width="120px"
>
<el-form-item label="所属组织名称" prop="orgName">
<!-- <el-input
v-model="dataForm.orgName"
placeholder="所属组织名称"
></el-input> -->
<el-select v-model="dataForm.orgName" placeholder="所属组织名称">
<el-option
v-for="item in organizationList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="疫苗接种点名称" prop="name">
<el-input
v-model="dataForm.name"
placeholder="疫苗接种点名称"
></el-input>
</el-form-item>
<el-form-item label="接种日期" prop="inoculationDate">
<el-input
v-model="dataForm.inoculationDate"
placeholder="接种日期"
></el-input>
</el-form-item>
<el-form-item label="接种上午开始时间" prop="moStartTime">
<el-input
v-model="dataForm.moStartTime"
placeholder="接种上午开始时间"
></el-input>
</el-form-item>
<el-form-item label="接种上午结束时间" prop="moEndTime">
<el-input
v-model="dataForm.moEndTime"
placeholder="接种上午结束时间"
></el-input>
</el-form-item>
<el-form-item label="接种下午开始时间" prop="afStartTime">
<el-input
v-model="dataForm.afStartTime"
placeholder="接种下午开始时间"
></el-input>
</el-form-item>
<el-form-item label="接种下午结束时间" prop="afEndTime">
<el-input
v-model="dataForm.afEndTime"
placeholder="接种下午结束时间"
></el-input>
</el-form-item>
<el-form-item label="" prop="noAvailableVaccines">
<el-checkbox
v-model="dataForm.noAvailableVaccines"
true-label="1"
false-label="2"
>暂无疫苗</el-checkbox
>
</el-form-item>
<el-form-item label="咨询电话" prop="mobile">
<el-input v-model="dataForm.mobile" placeholder="咨询电话"></el-input>
</el-form-item>
<el-form-item label="接种点地址" prop="address">
<el-input
v-model="dataForm.address"
placeholder="接种点地址"
></el-input>
</el-form-item>
<el-form-item label="位置坐标" prop="longitude" style="display: block">
<div>
<el-input
class="item_width_4"
maxlength="50"
placeholder="例:青岛市时代国际广场"
v-model="keyWords"
style="width: 200px"
>
</el-input>
<el-button
style="margin-left: 10px"
type="primary"
size="small"
@click="handleSearchMap"
>查询</el-button
>
<div
id="map_app"
class="div_map"
style="width: 500px; height: 300px; margin-top: 20px"
></div>
<div style="margin-top: 10px">
<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>
<template slot="footer">
<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
<el-button @click="visible = false">{{ $t("cancel") }}</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">{{
$t("confirm")
}}</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
import debounce from 'lodash/debounce'
export default {
data () {
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: '',
mobile: '',
address: '',
longitude: '',
latitude: ''
}
}
id: "",
customerId: "",
orgId: "",
orgName: "",
pid: "",
pids: "",
name: "",
inoculationDate: "",
moStartTime: "",
moEndTime: "",
afStartTime: "",
afEndTime: "",
noAvailableVaccines: "",
mobile: "",
address: "",
longitude: "120.38945519",
latitude: "36.0722275",
},
keyWords: null,
organizationList: [],
};
},
computed: {
dataRule () {
dataRule() {
return {
customerId: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
orgId: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
orgName: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
name: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
inoculationDate: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
moStartTime: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
moEndTime: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
afStartTime: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
afEndTime: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
noAvailableVaccines: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
mobile: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
address: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
longitude: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
latitude: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
],
};
},
},
mounted() {
this.getFormInfo();
this.initMap();
},
methods: {
init () {
this.visible = true
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义
initMap() {
// 定义地图中心点坐标
var center = new window.TMap.LatLng(36.0722275, 120.38945519);
// 定义map变量，调用 TMap.Map() 构造函数创建地图
map = new window.TMap.Map(document.getElementById("map_app"), {
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
.searchRectangle({
keyword: this.keyWords,
bounds: map.getBounds(),
})
.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 = result.result.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()
this.$refs["dataForm"].resetFields();
if (this.dataForm.id) {
this.getInfo()
this.getInfo();
}
})
});
},
// 获取信息
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
}
}).catch(() => {})
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,
};
})
.catch(() => {});
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
console.log(this.dataForm)
// this.$refs['dataForm'].validate((valid) => {
// if (!valid) {
// 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.msg)
// }
// this.$message({
// message: this.$t('prompt.success'),
// type: 'success',
// duration: 500,
// onClose: () => {
// this.visible = false
// this.$emit('refreshDataList')
// }
// })
// }).catch(() => {})
// })
}, 1000, { 'leading': true, 'trailing': false })
}
}
dataFormSubmitHandle: debounce(
function () {
console.log(this.dataForm);
// this.$refs['dataForm'].validate((valid) => {
// if (!valid) {
// 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.msg)
// }
// this.$message({
// message: this.$t('prompt.success'),
// type: 'success',
// duration: 500,
// onClose: () => {
// this.visible = false
// this.$emit('refreshDataList')
// }
// })
// }).catch(() => {})
// })
},
1000,
{ leading: true, trailing: false }
),
},
};
</script>

179
src/views/modules/plugins/point/icpointvaccinesinoculation.vue
View File

@ -1,38 +1,133 @@
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-user__icPointVaccinesInoculation}">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<el-form-item>
<el-input v-model="dataForm.id" placeholder="id" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
<el-button @click="getDataList()">{{ $t("query") }}</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
<el-button type="primary" @click="addOrUpdateHandle()">{{
$t("add")
}}</el-button>
</el-form-item>
<el-form-item>
<el-button type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
<el-button type="danger" @click="deleteHandle()">{{
$t("deleteBatch")
}}</el-button>
</el-form-item>
</el-form>
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
<el-table-column prop="orgName" label="所属组织名称" header-align="center" align="center"></el-table-column>
<el-table-column prop="name" label="疫苗接种点名称" header-align="center" align="center"></el-table-column>
<el-table-column prop="inoculationDate" label="接种日期" header-align="center" align="center"></el-table-column>
<el-table-column prop="moStartTime" label="接种上午开始时间" header-align="center" align="center"></el-table-column>
<el-table-column prop="moEndTime" label="接种上午结束时间" header-align="center" align="center"></el-table-column>
<el-table-column prop="afStartTime" label="接种下午开始时间" header-align="center" align="center"></el-table-column>
<el-table-column prop="afEndTime" label="接种下午结束时间" header-align="center" align="center"></el-table-column>
<el-table-column prop="noAvailableVaccines" label="暂无疫苗（1：是；2：否）" header-align="center" align="center"></el-table-column>
<el-table-column prop="mobile" label="咨询电话" header-align="center" align="center"></el-table-column>
<el-table-column prop="address" label="接种点地址" header-align="center" align="center"></el-table-column>
<el-table-column prop="longitude" label="经度" header-align="center" align="center"></el-table-column>
<el-table-column prop="latitude" label="纬度" header-align="center" align="center"></el-table-column>
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
<el-table
v-loading="dataListLoading"
:data="dataList"
border
@selection-change="dataListSelectionChangeHandle"
style="width: 100%"
>
<el-table-column
type="selection"
header-align="center"
align="center"
width="50"
></el-table-column>
<el-table-column
prop="orgName"
label="所属组织名称"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="name"
label="疫苗接种点名称"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="inoculationDate"
label="接种日期"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="moStartTime"
label="接种上午开始时间"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="moEndTime"
label="接种上午结束时间"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="afStartTime"
label="接种下午开始时间"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="afEndTime"
label="接种下午结束时间"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="noAvailableVaccines"
label="暂无疫苗（1：是；2：否）"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="mobile"
label="咨询电话"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="address"
label="接种点地址"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="longitude"
label="经度"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="latitude"
label="纬度"
header-align="center"
align="center"
></el-table-column>
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150"
>
<template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
<el-button
type="text"
size="small"
@click="addOrUpdateHandle(scope.row.id)"
>{{ $t("update") }}</el-button
>
<el-button
type="text"
size="small"
@click="deleteHandle(scope.row.id)"
>{{ $t("delete") }}</el-button
>
</template>
</el-table-column>
</el-table>
@ -43,35 +138,47 @@
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle">
@current-change="pageCurrentChangeHandle"
>
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
<el-dialog
:visible.sync="addOrUpdateVisible"
:title="!dataForm.id ? $t('add') : $t('update')"
:close-on-click-modal="false"
:close-on-press-escape="false"
:destroy-on-close="true"
>
<add-or-update
ref="addOrUpdate"
@refreshDataList="getDataList"
></add-or-update>
</el-dialog>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './icpointvaccinesinoculation-add-or-update'
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./icpointvaccinesinoculation-add-or-update";
export default {
export default {
mixins: [mixinViewModule],
data () {
data() {
return {
mixinViewModuleOptions: {
getDataListURL: '/epmetuser/icPointVaccinesInoculation/page',
getDataListURL: "/epmetuser/icPointVaccinesInoculation/page",
getDataListIsPage: true,
deleteURL: '/epmetuser/icPointVaccinesInoculation',
deleteIsBatch: true
deleteURL: "/epmetuser/icPointVaccinesInoculation",
deleteIsBatch: true,
},
dataForm: {
id: ''
}
}
id: "",
},
};
},
components: {
AddOrUpdate
}
}
AddOrUpdate,
},
};
</script>

Write Preview
Loading…
Cancel
Save