Browse Source

社区自组织

V1.0
jiangyy 3 years ago
parent
commit
65e4044b27
  1. 379
      src/views/modules/communityService/sqzzz/cpts/edit.vue
  2. 177
      src/views/modules/shequzhili/event/cpts/add.vue

379
src/views/modules/communityService/sqzzz/cpts/edit.vue

@ -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>
@ -263,10 +234,15 @@ var geocoder; // 新建一个正逆地址解析类
export default { export default {
components: {}, components: {},
props: {}, props: {},
data() { data () {
return { return {
formType: "add", // addeditdetail formType: "add", // addeditdetail
searchOptions: [],
searchValue: '',
resultList: [],
loading: false,
btnDisable: false, btnDisable: false,
orgId: "", orgId: "",
@ -289,7 +265,7 @@ export default {
}; };
}, },
computed: { computed: {
dataRule() { dataRule () {
return { return {
organizationName: [ organizationName: [
{ required: true, message: "组织名称 不能为空", trigger: "blur" }, { required: true, message: "组织名称 不能为空", trigger: "blur" },
@ -324,14 +300,56 @@ export default {
}, },
watch: {}, watch: {},
async mounted() { async mounted () {
this.getCategoryList(); this.getCategoryList();
this.getVolunteerList(); this.getVolunteerList();
this.initMap();
}, },
methods: { methods: {
querySearchVolunteer(queryString, cb) {
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) {
const { volunteerList } = this; const { volunteerList } = this;
var results = queryString var results = queryString
? volunteerList.filter((item) => { ? volunteerList.filter((item) => {
@ -342,7 +360,7 @@ export default {
cb(results); cb(results);
}, },
handleSelectVolunteer(index, vItem) { handleSelectVolunteer (index, vItem) {
this.dataForm.organizationPersonnel[index] = { this.dataForm.organizationPersonnel[index] = {
personName: vItem.name, personName: vItem.name,
personPhone: vItem.mobile, personPhone: vItem.mobile,
@ -350,7 +368,7 @@ export default {
}; };
}, },
async getVolunteerList() { async getVolunteerList () {
const url = "/epmetuser/icresiuser/volunteer-list"; const url = "/epmetuser/icresiuser/volunteer-list";
const params = {}; const params = {};
const { data, code, msg } = await requestPost(url, params); const { data, code, msg } = await requestPost(url, params);
@ -368,7 +386,7 @@ export default {
} }
}, },
async getCategoryList() { async getCategoryList () {
const url = "/sys/dict/data/dictlist"; const url = "/sys/dict/data/dictlist";
const params = { const params = {
dictType: "self_org_category", dictType: "self_org_category",
@ -380,21 +398,42 @@ export default {
this.$message.error(msg); this.$message.error(msg);
} }
}, },
handleAddStaff() { handleAddStaff () {
this.dataForm.organizationPersonnel = [ this.dataForm.organizationPersonnel = [
...this.dataForm.organizationPersonnel, ...this.dataForm.organizationPersonnel,
{ personName: "", personPhone: "", icResiUserId: "" }, { personName: "", personPhone: "", icResiUserId: "" },
]; ];
}, },
handleDelStaff(index) { handleDelStaff (index) {
const { organizationPersonnel } = this.dataForm; const { organizationPersonnel } = this.dataForm;
organizationPersonnel.splice(index, 1); organizationPersonnel.splice(index, 1);
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,28 +478,16 @@ 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;
setTimeout(() => { setTimeout(() => {
this.btnDisable = false; this.btnDisable = false;
@ -488,7 +520,7 @@ export default {
}); });
}, },
async submit() { async submit () {
let url = ""; let url = "";
if (this.formType === "add") { if (this.formType === "add") {
url = "/heart/iccommunityselforganization/addcommunityselforganization"; url = "/heart/iccommunityselforganization/addcommunityselforganization";
@ -516,11 +548,16 @@ export default {
} }
}, },
handleCancle() { handleCancle () {
this.resetData(); this.resetData();
this.$emit("dialogCancle"); this.$emit("dialogCancle");
}, },
resetData() { resetData () {
this.searchValue = ''
this.searchOptions = []
this.resultList = []
this.orgId = ""; this.orgId = "";
this.dataForm = { this.dataForm = {
organizationName: "", organizationName: "",
@ -538,7 +575,7 @@ export default {
}; };
}, },
// //
startLoading() { startLoading () {
loading = Loading.service({ loading = Loading.service({
lock: true, // lock: true, //
text: "正在加载……", // text: "正在加载……", //
@ -546,7 +583,7 @@ export default {
}); });
}, },
// //
endLoading() { endLoading () {
// clearTimeout(timer); // clearTimeout(timer);
if (loading) { if (loading) {
loading.close(); loading.close();

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

@ -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 {

Loading…
Cancel
Save