elink-star
/
epmet-work-pc
17
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

社区自组织

V1.0
jiangyy 3 years ago
parent
07a761374d
commit
65e4044b27
2 changed files with 361 additions and 393 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. 349
      src/views/modules/communityService/sqzzz/cpts/edit.vue
  2. 177
      src/views/modules/shequzhili/event/cpts/add.vue

349
src/views/modules/communityService/sqzzz/cpts/edit.vue
View File

@ -1,246 +1,217 @@
<template> <template>
<div> <div>
<div class="dialog-h-content scroll-h"> <div class="dialog-h-content scroll-h">
<el-form <el-form ref="ref_form"
ref="ref_form"
:inline="true" :inline="true"
:model="dataForm" :model="dataForm"
:rules="dataRule" :rules="dataRule"
:disabled="formType === 'detail'" :disabled="formType === 'detail'"
class="form" class="form">
> <el-form-item label="组织名称 "
<el-form-item
label="组织名称 "
prop="organizationName" prop="organizationName"
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="dataForm.organizationName" v-model="dataForm.organizationName">
>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="分类名称 "
label="分类名称 "
prop="categoryCode" prop="categoryCode"
label-width="150px" label-width="150px"
style="display: block" style="display: block">
> <el-select v-model="dataForm.categoryCode"
<el-select
v-model="dataForm.categoryCode"
placeholder="请选择" placeholder="请选择"
clearable clearable>
> <el-option v-for="item in categoryList"
<el-option
v-for="item in categoryList"
: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 <el-form-item label="组织人数 "
label="组织人数 "
prop="organizationPersonCount" prop="organizationPersonCount"
label-width="150px" label-width="150px"
style="display: block" style="display: block">
> <el-input class="item_width_1"
<el-input
class="item_width_1"
type="number" type="number"
maxlength="50" maxlength="50"
show-word-limit show-word-limit
placeholder="请输入组织人数 " placeholder="请输入组织人数 "
v-model="dataForm.organizationPersonCount" v-model="dataForm.organizationPersonCount">
>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="组织成员 "
label="组织成员 "
prop="organizationPersonnel" prop="organizationPersonnel"
label-width="150px" label-width="150px"
style="display: block" style="display: block">
>
<div class="m-staffs"> <div class="m-staffs">
<div <div class="item"
class="item"
:key="'staff' + index" :key="'staff' + index"
v-for="(item, index) in dataForm.organizationPersonnel" v-for="(item, index) in dataForm.organizationPersonnel">
> <el-autocomplete class="item_width_1"
<el-autocomplete
class="item_width_1"
v-model="item.personName" v-model="item.personName"
:fetch-suggestions="querySearchVolunteer" :fetch-suggestions="querySearchVolunteer"
placeholder="成员姓名" placeholder="成员姓名"
:maxlength="50" :maxlength="50"
show-word-limit show-word-limit
@select="(vItem) => handleSelectVolunteer(index, vItem)" @select="(vItem) => handleSelectVolunteer(index, vItem)"
:disabled="item.icResiUserId != ''" :disabled="item.icResiUserId != ''"></el-autocomplete>
></el-autocomplete>
<el-input <el-input style="margin-left: 10px"
style="margin-left: 10px"
class="item_width_1" class="item_width_1"
show-word-limit show-word-limit
placeholder="联系电话" placeholder="联系电话"
:disabled="item.icResiUserId != ''" :disabled="item.icResiUserId != ''"
v-model="item.personPhone" v-model="item.personPhone" />
/>
<el-button <el-button style="margin-left: 10px"
style="margin-left: 10px"
size="small" size="small"
@click="handleDelStaff(index)" @click="handleDelStaff(index)">删除</el-button>
>删除</el-button
>
</div> </div>
<div class="item-add"> <div class="item-add">
<el-button size="small" @click="handleAddStaff">添加</el-button> <el-button size="small"
@click="handleAddStaff">添加</el-button>
</div> </div>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="服务事项"
label="服务事项"
prop="serviceItem" prop="serviceItem"
label-width="150px" label-width="150px"
style="display: block" style="display: block">
> <el-input class="item_width_1"
<el-input
class="item_width_1"
type="textarea" type="textarea"
maxlength="1000" maxlength="1000"
show-word-limit show-word-limit
:rows="3" :rows="3"
placeholder="请输入服务事项，不超过1000字" placeholder="请输入服务事项，不超过1000字"
v-model="dataForm.serviceItem" v-model="dataForm.serviceItem"></el-input>
></el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="负责人 "
label="负责人 "
prop="principalName" prop="principalName"
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="dataForm.principalName" v-model="dataForm.principalName">
>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="联系电话 "
label="联系电话 "
prop="principalPhone" prop="principalPhone"
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="dataForm.principalPhone" v-model="dataForm.principalPhone">
>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="创建时间"
label="创建时间"
prop="organizationCreatedTime" prop="organizationCreatedTime"
label-width="150px" label-width="150px"
style="display: block" style="display: block">
> <el-date-picker v-model="dataForm.organizationCreatedTime"
<el-date-picker
v-model="dataForm.organizationCreatedTime"
placeholder="创建时间" placeholder="创建时间"
value-format="yyyy-MM-dd" value-format="yyyy-MM-dd">
>
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="地图位置"
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-input <!-- <el-input class="item_width_4"
class="item_width_4"
maxlength="50" maxlength="50"
placeholder="请输入关键字" placeholder="请输入关键字"
v-model="dataForm.address" v-model="keyWords">
>
</el-input> </el-input>
<el-button <el-button style="margin-left: 10px"
style="margin-left: 10px"
type="default" type="default"
size="small" size="small"
@click="handleSearchMap" @click="handleSearchMap">查询</el-button> -->
>查询</el-button
> <el-select v-model="searchValue"
<div id="app" class="div_map"></div> filterable
<div style="margin-top: 10px" v-show="false"> style="width: 500px"
remote
:reserve-keyword="true"
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading">
<el-option v-for="(item,index) in searchOptions"
@click.native="handleClickKey(index)"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div id="app"
class="div_map"></div>
<!-- <div style="margin-top: 10px"
v-show="false">
<span>经度</span> <span>经度</span>
<el-input <el-input class="item_width_3"
class="item_width_3"
maxlength="50" maxlength="50"
placeholder="请输入经度" placeholder="请输入经度"
v-model="dataForm.longitude" v-model="dataForm.longitude">
>
</el-input> </el-input>
<span style="margin-left: 20px">纬度</span> <span style="margin-left: 20px">纬度</span>
<el-input <el-input class="item_width_3"
class="item_width_3"
maxlength="50" maxlength="50"
placeholder="请输入纬度" placeholder="请输入纬度"
v-model="dataForm.latitude" v-model="dataForm.latitude">
>
</el-input> </el-input>
</div> -->
</div> </div>
</div>
</el-form-item> </el-form-item>
<el-form-item <el-form-item label="所在位置 "
label="备注" prop="address"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
maxlength="50"
show-word-limit
placeholder="请输入位置 "
v-model="dataForm.address">
</el-input>
</el-form-item>
<el-form-item label="备注"
prop="remark" prop="remark"
label-width="150px" label-width="150px"
style="display: block" style="display: block">
> <el-input class="item_width_1"
<el-input
class="item_width_1"
type="textarea" type="textarea"
maxlength="500" maxlength="500"
show-word-limit show-word-limit
:rows="3" :rows="3"
placeholder="请输入备注，不超过500字" placeholder="请输入备注，不超过500字"
v-model="dataForm.remark" v-model="dataForm.remark"></el-input>
></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div class="div_btn resi-btns"> <div class="div_btn resi-btns">
<el-button size="small" @click="handleCancle">取 消</el-button> <el-button size="small"
<el-button @click="handleCancle">取 消</el-button>
v-if="formType != 'detail'" <el-button v-if="formType != 'detail'"
type="primary" type="primary"
size="small" size="small"
:disabled="btnDisable" :disabled="btnDisable"
@click="handleComfirm" @click="handleComfirm">确 定</el-button>
>确 定</el-button
>
</div> </div>
</div> </div>
</template> </template>
@ -267,6 +238,11 @@ export default {
return { return {
formType: "add", //表单操作类型 add新增，edit编辑，detail详情 formType: "add", //表单操作类型 add新增，edit编辑，detail详情
searchOptions: [],
searchValue: '',
resultList: [],
loading: false,
btnDisable: false, btnDisable: false,
orgId: "", orgId: "",
@ -327,10 +303,52 @@ export default {
async mounted () { async mounted () {
this.getCategoryList(); this.getCategoryList();
this.getVolunteerList(); this.getVolunteerList();
this.initMap();
}, },
methods: { methods: {
async remoteMethod (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) {
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}` };
});
}
} else {
this.searchOptions = [
{
value: '0',
label: '未检索到结果'
}
]
}
} else {
this.searchOptions = [];
}
},
handleClickKey (index) {
let selPosition = this.resultList[index]
let lonlat = selPosition.lonlat.split(" ")
map.setCenter(lonlat[1], lonlat[0]);
map.setMarker(lonlat[1], lonlat[0]);
this.dataForm.latitude = lonlat[0];
this.dataForm.longitude = lonlat[1];
this.dataForm.address = selPosition.address + selPosition.name
},
querySearchVolunteer (queryString, cb) { querySearchVolunteer (queryString, cb) {
const { volunteerList } = this; const { volunteerList } = this;
var results = queryString var results = queryString
@ -392,9 +410,30 @@ export default {
this.dataForm.organizationPersonnel = organizationPersonnel; this.dataForm.organizationPersonnel = organizationPersonnel;
}, },
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 async initForm (type, row) {
initMap() { this.$refs.ref_form.resetFields();
this.formType = type;
console.log(row);
let { latitude, longitude } = this.$store.state.user; let { latitude, longitude } = this.$store.state.user;
if (row) {
this.dataForm = { ...this.dataForm, ...row };
this.orgId = this.dataForm.orgId;
} else {
this.dataForm.latitude = latitude
this.dataForm.longitude = longitude
}
if (!map) {
this.initMap(this.dataForm.latitude, this.dataForm.longitude);
}
},
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义
initMap (latitude, longitude) {
map = new daiMap( map = new daiMap(
document.getElementById("app"), document.getElementById("app"),
@ -410,22 +449,27 @@ export default {
map.on("dragend", (e) => { map.on("dragend", (e) => {
this.handleMoveCenter(e); this.handleMoveCenter(e);
}); });
},
async handleSearchMap() { map.setCenter(latitude, longitude);
const { msg, data } = await map.searchNearby(this.dataForm.address); map.setMarker(latitude, longitude);
if (msg == "success") {
const { lat, lng } = data;
map.setCenter(lat, lng);
map.setMarker(lat, lng);
this.dataForm.latitude = lat;
this.dataForm.longitude = lng;
} else {
this.$message.error("未检索到相关位置坐标");
}
}, },
async handleMoveCenter(e) { // async handleSearchMap () {
// const { msg, data } = await map.searchNearby(this.keyWords);
// if (msg == "success") {
// const { lat, lng } = data;
// map.setCenter(lat, lng);
// map.setMarker(lat, lng);
// this.dataForm.latitude = lat;
// this.dataForm.longitude = lng;
// this.handleMoveCenter()
// } else {
// this.$message.error("未检索到相关位置坐标");
// }
// },
async handleMoveCenter () {
//修改地图中心点 //修改地图中心点
const { lat, lng } = map.getCenter(); const { lat, lng } = map.getCenter();
this.dataForm.latitude = lat; this.dataForm.latitude = lat;
@ -434,26 +478,14 @@ 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.dataForm.address = data.address; this.dataForm.address = data.address
this.searchValue = data.address
this.searchOptions = []
} }
}, },
async initForm(type, row) {
this.$refs.ref_form.resetFields();
this.formType = type;
console.log(row);
if (row) {
this.dataForm = { ...this.dataForm, ...row };
this.orgId = this.dataForm.orgId;
await nextTick(800);
if (map) {
map.setCenter(row.latitude, row.longitude);
map.setMarker(row.latitude, row.longitude);
}
}
},
async handleComfirm () { async handleComfirm () {
this.btnDisable = true; this.btnDisable = true;
@ -521,6 +553,11 @@ export default {
this.$emit("dialogCancle"); this.$emit("dialogCancle");
}, },
resetData () { resetData () {
this.searchValue = ''
this.searchOptions = []
this.resultList = []
this.orgId = ""; this.orgId = "";
this.dataForm = { this.dataForm = {
organizationName: "", organizationName: "",

177
src/views/modules/shequzhili/event/cpts/add.vue
View File

@ -143,34 +143,33 @@
label-width="150px" label-width="150px"
style="display: block"> style="display: block">
<div style="width: 500px"> <div style="width: 500px">
<div class="div_map"> <el-input class="item_width_4"
<div id="app"></div>
<div class="div_searchmap">
<el-input class="cell-width-map"
maxlength="50" maxlength="50"
size="mini"
placeholder="请输入关键字" placeholder="请输入关键字"
v-model="keyWords"> v-model="formData.address">
</el-input> </el-input>
<el-button style="margin-left: 10px" <el-button style="margin-left: 10px"
type="primary" type="default"
size="mini" size="small"
@click="handleSearchMap">查询</el-button> @click="handleSearchMap">查询</el-button>
</div> <div id="map_event"
</div> class="div_map"></div>
<!-- <div style="margin-top: 10px" v-show="false">
<!-- <div style="margin-top: 10px">
<span>经度</span> <span>经度</span>
<el-input class="item_width_3" <el-input
class="item_width_3"
maxlength="50" maxlength="50"
placeholder="请输入经度" placeholder="请输入经度"
v-model="formData.longitude"> v-model="formData.longitude"
>
</el-input> </el-input>
<span style="margin-left: 20px">纬度</span> <span style="margin-left: 20px">纬度</span>
<el-input class="item_width_3" <el-input
class="item_width_3"
maxlength="50" maxlength="50"
placeholder="请输入纬度" placeholder="请输入纬度"
v-model="formData.latitude"> v-model="formData.latitude"
>
</el-input> </el-input>
</div> --> </div> -->
</div> </div>
@ -238,7 +237,7 @@
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 formVltHelper from "dai-js/tools/formVltHelper"; import formVltHelper from "dai-js/tools/formVltHelper";
import daiMap from "@/utils/dai-map";
import { isCard } from "@/utils/validate"; import { isCard } from "@/utils/validate";
let loading; // 加载动画 let loading; // 加载动画
@ -388,6 +387,7 @@ export default {
async mounted () { async mounted () {
const { user } = this.$store.state; const { user } = this.$store.state;
this.agencyId = user.agencyId; this.agencyId = user.agencyId;
let { latitude, longitude } = this.$store.state.user; let { latitude, longitude } = this.$store.state.user;
if (!latitude || latitude == "" || latitude == "0") { if (!latitude || latitude == "" || latitude == "0") {
latitude = 39.9088810666821; latitude = 39.9088810666821;
@ -398,6 +398,10 @@ export default {
this.formData.longitude = longitude; this.formData.longitude = longitude;
this.initMap(); this.initMap();
map.setCenter(this.formData.latitude, this.formData.longitude);
map.setMarker(this.formData.latitude, this.formData.longitude);
this.handleMoveCenter()
this.loadGrid(); this.loadGrid();
this.getCategoryList(); this.getCategoryList();
}, },
@ -567,126 +571,47 @@ export default {
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
initMap () { initMap () {
// 定义地图中心点坐标 let { latitude, longitude } = this.$store.state.user;
var center = new window.TMap.LatLng(
this.formData.latitude, map = new daiMap(
this.formData.longitude document.getElementById("map_event"),
); { latitude, longitude },
// 定义map变量，调用 TMap.Map() 构造函数创建地图 {
map = new window.TMap.Map(document.getElementById("app"), {
center: center, // 设置地图中心点坐标
zoom: 16.2, // 设置地图缩放级别 zoom: 16.2, // 设置地图缩放级别
pitch: 43.5, // 设置俯仰角 pitch: 43.5, // 设置俯仰角
rotation: 45, // 设置地图旋转角度 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", () => { map.on("dragend", (e) => {
this.handleMoveCenter(); this.handleMoveCenter(e);
}); });
this.handleMoveCenter();
// this.convert()
}, },
async handleSearchMap () {
setMarker (lat, lng) { const { msg, data } = await map.searchNearby(this.formData.address);
markers.setGeometries([]); if (msg == "success") {
markers.add([ const { lat, lng } = data;
{ map.setCenter(lat, lng);
id: "4", map.setMarker(lat, lng);
styleId: "marker",
position: new TMap.LatLng(lat, lng),
properties: {
title: "marker4",
},
},
]);
},
handleSearchMap () {
infoWindowList.forEach((infoWindow) => {
infoWindow.close();
});
infoWindowList.length = 0;
markers.setGeometries([]);
// 在地图显示范围内以给定的关键字搜索地点
search
.searchNearby({
keyword: this.keyWords,
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.formData.latitude = lat; this.formData.latitude = lat;
this.formData.longitude = lng; this.formData.longitude = lng;
this.convert();
} else { } else {
this.$message.error("未检索到相关位置坐标"); this.$message.error("未检索到相关位置坐标");
} }
});
}, },
handleMoveCenter () { async handleMoveCenter (e) {
//修改地图中心点 //修改地图中心点
const center = map.getCenter(); const { lat, lng } = map.getCenter();
const lat = center.getLat();
const lng = center.getLng();
this.formData.latitude = lat; this.formData.latitude = lat;
this.formData.longitude = lng; this.formData.longitude = lng;
this.setMarker(lat, lng); map.setMarker(lat, lng);
this.convert(lat, lng);
},
convert (lat, lng) { let { msg, data } = await map.getAddress(lat, lng);
markers.setGeometries([]); if (msg == "success") {
// var input = document.getElementById('location').value.split(','); this.formData.address = data.address;
let location;
if (lat && lng) {
location = new TMap.LatLng(lat, lng);
} else {
location = new TMap.LatLng(
this.formData.latitude,
this.formData.longitude
);
} }
// map.setCenter(location);
markers.updateGeometries([
{
id: "main", // 点标注数据数组
position: location,
},
]);
geocoder
.getAddress({ location: location }) // 将给定的坐标位置转换为地址
.then((result) => {
if (!this.isFirst) {
//再次查询时再赋值
this.formData.address = result.result.address;
}
if (this.isFirst) {
this.isFirst = false;
}
});
}, },
resetData () { resetData () {
@ -711,11 +636,17 @@ export default {
}, },
}; };
</script> </script>
<style <style lang="scss" scoped>
lang="scss" @import "@/assets/scss/modules/shequzhili/event-info.scss";
src="@/assets/scss/modules/shequzhili/event-info.scss"
scoped .item_width_4 {
></style> width: 350px;
}
.div_map {
margin-top: 10px;
}
</style>
<style lang="scss"> <style lang="scss">
.el-dialog__body { .el-dialog__body {

Write Preview
Loading…
Cancel
Save