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

Write Preview
Loading…
Cancel
Save