elink-star
/
epmet-oper-gov-lingshan
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

公共服务资源

master
dai 2 years ago
parent
bcf49f42c2
commit
7e9e0b65c4
1 changed files with 551 additions and 435 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. 476
      src/views/modules/shequzhili/ggfwtc/ggfwForm.vue

476
src/views/modules/shequzhili/ggfwtc/ggfwForm.vue
View File

@ -1,239 +1,348 @@
<template>
<div>
<div class="dialog-h-content scroll-h">
<el-form ref="ref_form"
<el-form
ref="ref_form"
:inline="true"
:model="formData"
:rules="dataRule"
:disabled="formType === 'detail'"
class="form">
<el-form-item label="场所名称"
class="form"
>
<el-form-item
label="场所名称"
prop="name"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
style="display: block"
>
<el-input
class="item_width_1"
maxlength="50"
show-word-limit
placeholder="请输入场所名称"
v-model="formData.name">
v-model="formData.name"
>
</el-input>
</el-form-item>
<el-form-item label="场所类型"
<el-form-item
label="场所类型"
prop="category"
label-width="150px"
style="display: block">
<el-select class="item_width_1"
style="display: block"
>
<el-select
class="item_width_1"
v-model="formData.category"
placeholder="请选择"
filterable
clearable>
<el-option v-for="item in serviceList"
clearable
>
<el-option
v-for="item in serviceList"
:key="item.value"
:label="item.label"
:value="item.value">
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="占地面积"
<el-form-item
label="占地面积"
style="display: block"
prop="areaCovered"
label-width="150px">
<el-input-number class="item_width_4"
label-width="150px"
>
<el-input-number
class="item_width_4"
v-model="formData.areaCovered"
:precision="2"
:step="0.01"
:min="0"
:max="9600000"
label="占地面积"></el-input-number>平方公里
label="占地面积"
></el-input-number
>平方公里
</el-form-item>
<el-form-item label="容纳人数"
<el-form-item
label="容纳人数"
style="display: block"
prop="capacity"
label-width="150px">
<el-input-number class="item_width_4"
label-width="150px"
>
<el-input-number
class="item_width_4"
v-model="formData.capacity"
:min="0"
:max="9999"
label="容纳人数"></el-input-number>
label="容纳人数"
></el-input-number>
</el-form-item>
<el-form-item
label="负责人"
style="display: block"
label-width="150px"
prop="principal"
>
<el-input
v-model="formData.principal"
class="item_width_1"
placeholder="请输入负责人姓名"
></el-input>
</el-form-item>
<el-form-item
label="联系电话"
style="display: block"
label-width="150px"
prop="mobile"
>
<el-input
v-model="formData.mobile"
class="item_width_1"
placeholder="请输入联系电话"
></el-input>
</el-form-item>
<el-form-item label="负责人"
<el-form-item
label="片区民警姓名"
style="display: block"
label-width="150px"
prop="principal">
<el-input v-model="formData.principal"
prop="policeName"
>
<el-input
v-model="formData.policeName"
class="item_width_1"
placeholder="请输入负责人姓名"></el-input>
placeholder="请输入片区民警姓名"
></el-input>
</el-form-item>
<el-form-item label="联系电话"
<el-form-item
label="片区民警电话"
style="display: block"
label-width="150px"
prop="mobile">
<el-input v-model="formData.mobile"
prop="policePhone"
>
<el-input
v-model="formData.policePhone"
class="item_width_1"
placeholder="请输入联系电话"></el-input>
placeholder="请输入片区民警电话"
></el-input>
</el-form-item>
<el-form-item label="地图位置"
<el-form-item
label="片区网格员"
prop="griderId"
label-width="150px"
style="display: block"
>
<el-select
class="item_width_1"
v-model="formData.griderId"
placeholder="请选择"
filterable
clearable
>
<el-option
v-for="item in griderList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="地图位置"
prop="longitude"
label-width="150px"
style="display: block">
style="display: block"
>
<div style="width: 500px">
<el-select v-model="searchValue"
<el-select
v-model="searchValue"
filterable
style="width: 500px"
remote
:reserve-keyword="true"
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading">
<el-option v-for="(item,index) in searchOptions"
:loading="loading"
>
<el-option
v-for="(item, index) in searchOptions"
@click.native="handleClickKey(index)"
:key="item.value"
:label="item.label"
:value="item.value">
:value="item.value"
>
</el-option>
</el-select>
<div id="app_ggfw"
class="div_map"></div>
<div id="app_ggfw" class="div_map"></div>
</div>
</el-form-item>
<el-form-item label="详细地址 "
<el-form-item
label="详细地址 "
prop="address"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
style="display: block"
>
<el-input
class="item_width_1"
maxlength="50"
show-word-limit
placeholder="请输入位置 "
v-model="formData.address">
v-model="formData.address"
>
</el-input>
</el-form-item>
</el-form>
</div>
<div class="div_btn">
<el-button size="small"
@click="handleCancle">取 消</el-button>
<el-button size="small"
<el-button size="small" @click="handleCancle">取 消</el-button>
<el-button
size="small"
v-if="formType != 'detail'"
type="primary"
:disabled="btnDisable"
@click="handleComfirm">确 定</el-button>
@click="handleComfirm"
>确 定</el-button
>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from '@/js/dai/request'
import { mapGetters } from "vuex";
import { Loading } from "element-ui"; // 引入Loading服务
import { requestPost } from "@/js/dai/request";
import daiMap from "@/utils/dai-map";
var map;
var search;
var markers;
var infoWindowList;
var geocoder; // 新建一个正逆地址解析类
var map
var search
var markers
var infoWindowList
var geocoder // 新建一个正逆地址解析类
let loading // 加载动画
let loading; // 加载动画
export default {
data() {
return {
formType: 'add', //表单操作类型 add新增，edit编辑，detail详情
formType: "add", //表单操作类型 add新增，edit编辑，detail详情
searchOptions: [],
searchValue: '',
searchValue: "",
resultList: [],
loading: false,
btnDisable: false,
icPublicServiceId: '',
icPublicServiceId: "",
formData: {
name: '',//场所名称
category: '',
areaCovered: '',//占地面积
capacity: '',//容纳人数
address: '', //详细地址
name: "", //场所名称
category: "",
areaCovered: "", //占地面积
capacity: "", //容纳人数
address: "", //详细地址
longitude: null, //经度
latitude: null, //纬度
principal: '',
mobile: ''
principal: "",
mobile: "",
policeName: "",
policePhone: "",
griderId: "",
},
serviceList: [], //服务list
publicServiceData: {},
}
},
components: {},
mounted () {
griderList: [],
};
},
components: {},
mounted() {},
methods: {
async initForm(type, icPublicServiceId) {
this.startLoading()
this.startLoading();
this.$refs.ref_form.resetFields();
let { latitude, longitude } = this.$store.state.user;
//获取服务事项
await this.loadService()
await this.loadService();
await this.loadGrider();
this.formType = type
this.formType = type;
if (icPublicServiceId) {
this.icPublicServiceId = icPublicServiceId
this.formData.icPublicServiceId = icPublicServiceId
await this.loadFormData()
this.icPublicServiceId = icPublicServiceId;
this.formData.icPublicServiceId = icPublicServiceId;
await this.loadFormData();
} else {
this.formData.latitude = latitude
this.formData.longitude = longitude
this.formData.latitude = latitude;
this.formData.longitude = longitude;
}
// if (!map) {
this.initMap(this.formData.latitude, this.formData.longitude);
// }
this.endLoading()
this.endLoading();
},
//获取服务事项下拉框
async loadService() {
const url = "/gov/org/coverage/dict-select-list/public_service"
const url = "/gov/org/coverage/dict-select-list/public_service";
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/coverage/dict-select-list/public_service"
let params = {
}
let params = {};
const { data, code, msg } = await requestPost(url, params)
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.serviceList = data
this.serviceList = data;
} else {
this.$message.error(msg)
this.$message.error(msg);
}
},
//网格员列表
async loadGrider() {
const url = "/data/aggregator/epmetuser/listStaffByOrgAndRoles";
let params = {
orgId: this.$store.state.user.agencyId,
orgType: "agency",
pageNo: 1,
pageSize: 1000,
roleKeys: ["grid_manager", "grid_member"],
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.griderList = (data.list || []).map((item) => ({
...item,
label: item.staffName,
value: item.staffId,
}));
} else {
this.$message.error(msg);
}
},
//加载组织
async loadFormData() {
const url = '/gov/org/icPublicService/detail'
const url = "/gov/org/icPublicService/detail";
// const url = 'http://yapi.elinkservice.cn/mock/245/gov/org/icPublicService/detail'
let params = {
icPublicServiceId: this.icPublicServiceId
}
const { data, code, msg } = await requestPost(url, params)
icPublicServiceId: this.icPublicServiceId,
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
console.log(data)
console.log(data);
if (null != data) {
data: this.publicServiceData
data: this.publicServiceData;
}
this.formData = { ...data }
this.formData = { ...data };
// let { latitude, longitude } = this.$store.state.user;
// const lat = this.formData.latitude === null || this.formData.latitude === '' ? '' : this.formData.latitude;
// const lon = this.formData.longitude === null || this.formData.longitude === '' ? '' : this.formData.longitude;
@ -242,62 +351,56 @@ export default {
// this.setMarker(this.formData.latitude, this.formData.longitude)
// }
} else {
this.$message.error(msg)
this.$message.error(msg);
}
},
async handleComfirm() {
this.btnDisable = true
this.btnDisable = true;
setTimeout(() => {
this.btnDisable = false
}, 10000)
this.$refs['ref_form'].validate((valid, messageObj) => {
this.btnDisable = false;
}, 10000);
this.$refs["ref_form"].validate((valid, messageObj) => {
if (!valid) {
app.util.validateRule(messageObj)
this.btnDisable = false
app.util.validateRule(messageObj);
this.btnDisable = false;
} else {
this.addUnit()
this.addUnit();
}
})
});
},
async addUnit() {
let url = ''
if (this.formType === 'add') {
url = '/gov/org/icPublicService/add'
let url = "";
if (this.formType === "add") {
url = "/gov/org/icPublicService/add";
} else {
url = '/gov/org/icPublicService/edit'
url = "/gov/org/icPublicService/edit";
}
const { data, code, msg, internalMsg } = await requestPost(url, this.formData)
const { data, code, msg, internalMsg } = await requestPost(
url,
this.formData
);
if (code === 0) {
this.$message({
type: 'success',
message: '操作成功'
})
this.resetData()
this.$emit('dialogOk')
this.btnDisable = false
type: "success",
message: "操作成功",
});
this.resetData();
this.$emit("dialogOk");
this.btnDisable = false;
} else {
this.btnDisable = false
this.$message.error(internalMsg)
this.btnDisable = false;
this.$message.error(internalMsg);
}
},
handleCancle() {
this.resetData()
this.$emit('dialogCancle')
this.resetData();
this.$emit("dialogCancle");
},
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义
initMap(latitude, longitude) {
map = new daiMap(
document.getElementById("app_ggfw"),
{ latitude, longitude },
@ -315,10 +418,8 @@ export default {
map.setCenter(latitude, longitude);
map.setMarker(latitude, longitude);
},
async handleMoveCenter() {
//修改地图中心点
const { lat, lng } = map.getCenter();
@ -328,38 +429,41 @@ export default {
let { msg, data } = await map.getAddress(lat, lng);
if (msg == "success") {
this.formData.address = data.address
this.searchValue = data.address
this.searchOptions = []
this.formData.address = data.address;
this.searchValue = data.address;
this.searchOptions = [];
}
},
async remoteMethod(query) {
if (query !== '') {
if (query !== "") {
this.loading = true;
const { msg, data } = await map.searchNearby(query);
this.loading = false;
this.resultList = []
if (msg == "success" && data.resultList && data.resultList.length > 0) {
this.resultList = [];
if (
msg == "success" &&
data.resultList &&
data.resultList.length > 0
) {
if (data.resultList && data.resultList.length > 0) {
this.resultList = data.resultList
this.searchOptions = this.resultList.map(item => {
return { value: `${item.hotPointID}`, label: `${item.address + item.name}` };
this.resultList = data.resultList;
this.searchOptions = this.resultList.map((item) => {
return {
value: `${item.hotPointID}`,
label: `${item.address + item.name}`,
};
});
}
} else {
this.searchOptions = [
{
value: '0',
label: '未检索到结果'
}
]
value: "0",
label: "未检索到结果",
},
];
}
} else {
this.searchOptions = [];
@ -367,59 +471,74 @@ export default {
},
handleClickKey(index) {
let selPosition = this.resultList[index]
let lonlat = selPosition.lonlat.split(" ")
let selPosition = this.resultList[index];
let lonlat = selPosition.lonlat.split(" ");
map.setCenter(lonlat[1], lonlat[0]);
map.setMarker(lonlat[1], lonlat[0]);
this.formData.latitude = lonlat[1];
this.formData.longitude = lonlat[0];
this.formData.address = selPosition.address + selPosition.name
this.formData.address = selPosition.address + selPosition.name;
},
resetData() {
this.searchValue = ''
this.searchOptions = []
this.resultList = []
this.icPublicServiceId = ''
this.keyWords = ''
this.searchValue = "";
this.searchOptions = [];
this.resultList = [];
this.icPublicServiceId = "";
this.keyWords = "";
this.formData = {
name: '',
category: '',
areaCovered: '',
capacity: '',
address: '', //详细地址
longitude: '', //经度
latitude: '' //纬度
}
name: "",
category: "",
areaCovered: "",
capacity: "",
address: "", //详细地址
longitude: "", //经度
latitude: "", //纬度
policeName: "",
policePhone: "",
griderId: "",
};
},
// 开启加载动画
startLoading() {
loading = Loading.service({
lock: true, // 是否锁定
text: '正在加载……', // 加载中需要显示的文字
background: 'rgba(0,0,0,.7)' // 背景颜色
})
text: "正在加载……", // 加载中需要显示的文字
background: "rgba(0,0,0,.7)", // 背景颜色
});
},
// 结束加载动画
endLoading() {
// clearTimeout(timer);
if (loading) {
loading.close()
}
loading.close();
}
},
},
computed: {
dataRule() {
return {
name: [
{ required: true, message: '场所名称不能为空', trigger: 'blur' },
{
required: true,
message: "场所名称不能为空",
trigger: "blur",
},
],
category: [
{ required: true, message: '场所类别不能为空', trigger: 'blur' }
{
required: true,
message: "场所类别不能为空",
trigger: "blur",
},
],
address: [
{ required: true, message: '地址不能为空', trigger: 'blur' }
{
required: true,
message: "地址不能为空",
trigger: "blur",
},
],
/*longitude: [
{ required: true, message: '坐标不能为空', trigger: 'blur' }
@ -427,19 +546,16 @@ export default {
latitude: [
{ required: true, message: '坐标不能为空', trigger: 'blur' }
]*/
}
};
},
},
props: {
typeList: {
type: Array,
default: []
default: [],
},
}
}
},
};
</script>
<style scoped>
.div_map {

Write Preview
Loading…
Cancel
Save