Browse Source

爱心活动

V1.0
jiangyy 3 years ago
parent
commit
6b9e0f7957
  1. 1
      src/views/modules/communityParty/heart/heartDetail.vue
  2. 920
      src/views/modules/communityParty/heart/heartForm.vue
  3. 525
      src/views/modules/communityService/dqfwzx/cpts/edit.vue

1
src/views/modules/communityParty/heart/heartDetail.vue

@ -183,6 +183,7 @@
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // Loading
import { requestPost } from '@/js/dai/request'
import daiMap from "@/utils/dai-map";
let loading //

920
src/views/modules/communityParty/heart/heartForm.vue

File diff suppressed because it is too large

525
src/views/modules/communityService/dqfwzx/cpts/edit.vue

@ -1,283 +1,232 @@
<template>
<div>
<div class="dialog-h-content scroll-h">
<el-form
ref="ref_form"
:inline="true"
:model="dataForm"
:rules="dataRule"
:disabled="formType === 'detail'"
class="form"
>
<el-form-item
label="中心名称 "
prop="centerName"
label-width="150px"
style="display: block"
>
<el-input
class="item_width_1"
maxlength="50"
show-word-limit
placeholder="请输入中心名称 "
v-model="dataForm.centerName"
>
<el-form ref="ref_form"
:inline="true"
:model="dataForm"
:rules="dataRule"
:disabled="formType === 'detail'"
class="form">
<el-form-item label="中心名称 "
prop="centerName"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
maxlength="50"
show-word-limit
placeholder="请输入中心名称 "
v-model="dataForm.centerName">
</el-input>
</el-form-item>
<el-form-item
label="办公电话"
prop="workPhone"
label-width="150px"
style="display: block"
>
<el-input
class="item_width_1"
maxlength="50"
show-word-limit
placeholder="请输入办公电话"
v-model="dataForm.workPhone"
>
<el-form-item label="办公电话"
prop="workPhone"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
maxlength="50"
show-word-limit
placeholder="请输入办公电话"
v-model="dataForm.workPhone">
</el-input>
</el-form-item>
<el-form-item
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-form-item 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="amStartTime"
label-width="150px"
style="display: block"
>
<el-form-item label="办公时间"
prop="amStartTime"
label-width="150px"
style="display: block">
<div class="row">
<span>上午</span>
<el-time-select
style="margin-left: 10px"
v-model="dataForm.amStartTime"
:picker-options="{
<el-time-select style="margin-left: 10px"
v-model="dataForm.amStartTime"
:picker-options="{
start: '00:00',
step: '00:30',
end: '12:00',
}"
placeholder="开始时间"
>
placeholder="开始时间">
</el-time-select>
<span style="margin: 0 5px"></span>
<el-time-select
v-model="dataForm.amEndTime"
:picker-options="{
<el-time-select v-model="dataForm.amEndTime"
:picker-options="{
start: '00:00',
step: '00:30',
end: '12:00',
minTime: dataForm.amStartTime,
}"
placeholder="结束时间"
>
placeholder="结束时间">
</el-time-select>
</div>
<div class="row" style="margin-top: 5px">
<div class="row"
style="margin-top: 5px">
<span>下午</span>
<el-time-select
style="margin-left: 10px"
v-model="dataForm.pmStartTime"
:picker-options="{
<el-time-select style="margin-left: 10px"
v-model="dataForm.pmStartTime"
:picker-options="{
start: '12:00',
step: '00:30',
end: '24:00',
}"
placeholder="开始时间"
>
placeholder="开始时间">
</el-time-select>
<span style="margin: 0 5px"></span>
<el-time-select
v-model="dataForm.pmEndTime"
:picker-options="{
<el-time-select v-model="dataForm.pmEndTime"
:picker-options="{
start: '12:00',
step: '00:30',
end: '24:00',
minTime: dataForm.pmStartTime,
}"
placeholder="结束时间"
>
placeholder="结束时间">
</el-time-select>
</div>
</el-form-item>
<el-form-item
label="位置坐标"
prop="longitude"
label-width="150px"
style="display: block"
>
<el-form-item label="地图位置"
prop="longitude"
label-width="150px"
style="display: block">
<div style="width: 500px">
<el-input
class="item_width_4"
maxlength="50"
placeholder="请输入关键字"
v-model="dataForm.locationAddress"
>
</el-input>
<el-button
style="margin-left: 10px"
type="primary"
size="small"
@click="handleSearchMap"
>查询</el-button
>
<div id="app" class="div_map"></div>
<div style="margin-top: 10px" v-show="false">
<span>经度</span>
<el-input
class="item_width_3"
maxlength="50"
placeholder="请输入经度"
v-model="dataForm.longitude"
>
</el-input>
<span style="margin-left: 20px">纬度</span>
<el-input
class="item_width_3"
maxlength="50"
placeholder="请输入纬度"
v-model="dataForm.latitude"
>
</el-input>
</div>
<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"
@click.native="handleClickKey(index)"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<div id="app_dqfwzx"
class="div_map"></div>
</div>
</el-form-item>
<el-form-item label="详细地址 "
prop="address"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
maxlength="50"
show-word-limit
placeholder="请输入位置 "
v-model="formData.address">
</el-input>
</el-form-item>
<el-form-item
label="可预约事项"
prop="matterList"
label-width="150px"
style="display: block"
>
<el-form-item label="可预约事项"
prop="matterList"
label-width="150px"
style="display: block">
<div class="m-staffs">
<div
class="item"
:key="'staff' + index"
v-for="(item, index) in dataForm.matterList"
>
<div class="item"
:key="'staff' + index"
v-for="(item, index) in dataForm.matterList">
<div class="item-info">
<el-input
class="item_width_1"
style="width: 150px"
maxlength="50"
show-word-limit
placeholder="事项名"
v-model="item.matterName"
:disabled="item.matterId != undefined"
/>
<el-upload :headers="$getElUploadHeaders()"
:disabled="item.matterId != undefined"
class="avatar-uploader"
:action="uploadUlr"
:data="{ customerId: customerId }"
:show-file-list="false"
:on-success="
<el-input class="item_width_1"
style="width: 150px"
maxlength="50"
show-word-limit
placeholder="事项名"
v-model="item.matterName"
:disabled="item.matterId != undefined" />
<el-upload :headers="$getElUploadHeaders()"
:disabled="item.matterId != undefined"
class="avatar-uploader"
:action="uploadUlr"
:data="{ customerId: customerId }"
:show-file-list="false"
:on-success="
(response, file, fileList) =>
handleImgSuccess(index, response, file, fileList)
"
:before-upload="beforeImgUpload"
>
<img
v-if="item.matterImg"
:src="item.matterImg"
style="width: 36px; height: 36px"
class="function-icon"
/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
:before-upload="beforeImgUpload">
<img v-if="item.matterImg"
:src="item.matterImg"
style="width: 36px; height: 36px"
class="function-icon" />
<i v-else
class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<div class="hint">事项封面图片小于1M</div>
</div>
<div class="item-pic">
<el-select
style="width: 150px; margin-left: 0"
v-model="item.appointmentType"
filterable
placeholder="预约类型"
:disabled="item.matterId != undefined"
>
<el-option
v-for="item in appointmentTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
<el-select style="width: 150px; margin-left: 0"
v-model="item.appointmentType"
filterable
placeholder="预约类型"
:disabled="item.matterId != undefined">
<el-option v-for="item in appointmentTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-time-select
style="width: 120px; margin-left: 20px"
v-model="item.startTime"
:picker-options="{
<el-time-select style="width: 120px; margin-left: 20px"
v-model="item.startTime"
:picker-options="{
start: '00:00',
step: '00:30',
end: '24:00',
}"
placeholder="开始时间"
:disabled="item.matterId != undefined"
>
placeholder="开始时间"
:disabled="item.matterId != undefined">
</el-time-select>
<span style="margin: 0 5px"></span>
<el-time-select
style="width: 120px"
v-model="item.endTime"
:picker-options="{
<el-time-select style="width: 120px"
v-model="item.endTime"
:picker-options="{
start: '00:00',
step: '00:30',
end: '24:00',
minTime: item.startTime,
}"
placeholder="结束时间"
:disabled="item.matterId != undefined"
>
placeholder="结束时间"
:disabled="item.matterId != undefined">
</el-time-select>
<el-button
style="margin-left: 20px"
size="small"
@click="handleDelStaff(index)"
>删除</el-button
>
<el-button style="margin-left: 20px"
size="small"
@click="handleDelStaff(index)">删除</el-button>
</div>
</div>
<div class="item-add">
<el-button size="small" type="warning" @click="handleAddStaff"
>添加</el-button
>
<el-button size="small"
type="warning"
@click="handleAddStaff">添加</el-button>
</div>
</div>
</el-form-item>
</el-form>
</div>
<div class="div_btn">
<el-button size="small" @click="handleCancle"> </el-button>
<el-button
size="small"
v-if="formType != 'detail'"
type="primary"
:disabled="btnDisable"
@click="handleComfirm"
> </el-button
>
<el-button size="small"
@click="handleCancle"> </el-button>
<el-button size="small"
v-if="formType != 'detail'"
type="primary"
:disabled="btnDisable"
@click="handleComfirm"> </el-button>
</div>
</div>
</template>
@ -286,6 +235,7 @@
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;
@ -295,12 +245,15 @@ let loading; // 加载动画
var geocoder; //
export default {
data() {
data () {
return {
uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2",
customerId: "",
formType: "add", // addeditdetail
searchOptions: [],
searchValue: '',
resultList: [],
btnDisable: false,
@ -339,7 +292,7 @@ export default {
},
components: {},
computed: {
dataRule() {
dataRule () {
return {
centerName: [
{ required: true, message: "中心名称 不能为空", trigger: "blur" },
@ -375,13 +328,13 @@ export default {
props: {},
watch: {},
async mounted() {
async mounted () {
this.customerId = localStorage.getItem("customerId");
this.initMap();
},
methods: {
handleImgSuccess(index, res, file) {
handleImgSuccess (index, res, file) {
if (res.code === 0 && res.msg === "success") {
console.log("res.data.url", res.data.url);
this.dataForm.matterList[index].matterImg = res.data.url;
@ -390,7 +343,7 @@ export default {
}
},
beforeImgUpload(file) {
beforeImgUpload (file) {
const isLt1M = file.size / 1024 / 1024 < 1;
if (!isLt1M) {
@ -399,7 +352,7 @@ export default {
return isLt1M;
},
handleAddStaff() {
handleAddStaff () {
this.dataForm.matterList = [
...this.dataForm.matterList,
{
@ -411,7 +364,7 @@ export default {
},
];
},
async handleDelStaff(index) {
async handleDelStaff (index) {
const { matterList } = this.dataForm;
let list = [...matterList];
let delItem = list.splice(index, 1);
@ -428,7 +381,7 @@ export default {
this.dataForm.matterList = list;
},
async delStaff(matterId) {
async delStaff (matterId) {
const { data, code, msg } = await requestPost(
"/gov/org/icpartyservicecenter/delmatter",
{
@ -438,104 +391,90 @@ export default {
return code === 0;
},
// init
initMap() {
let { latitude, longitude } = this.$store.state.user;
if (!latitude || latitude == "" || latitude == "0") {
latitude = 39.9088810666821;
longitude = 116.39743841556731;
}
//
var center = new window.TMap.LatLng(latitude, longitude);
// map TMap.Map()
map = new window.TMap.Map(document.getElementById("app"), {
center: center, //
zoom: 16.2, //
pitch: 43.5, //
rotation: 45, //
});
search = new window.TMap.service.Search({ pageSize: 10 });
//
markers = new TMap.MultiMarker({
map: map,
geometries: [],
});
infoWindowList = Array(10);
initMap (latitude, longitude) {
geocoder = new TMap.service.Geocoder(); //
map = new daiMap(
document.getElementById("app_ggfw"),
{ latitude, longitude },
{
zoom: 16.2, //
pitch: 43.5, //
rotation: 45, //
}
);
//
map.on("panend", (e) => {
map.on("dragend", (e) => {
this.handleMoveCenter(e);
});
// this.handleMoveCenter();
map.setCenter(latitude, longitude);
map.setMarker(latitude, longitude);
},
setMarker(lat, lng) {
markers.setGeometries([]);
markers.add([
{
id: "4",
styleId: "marker",
position: new TMap.LatLng(lat, lng),
properties: {
title: "marker4",
},
},
]);
async handleMoveCenter () {
//
const { lat, lng } = map.getCenter();
this.formData.latitude = lat;
this.formData.longitude = lng;
map.setMarker(lat, lng);
let { msg, data } = await map.getAddress(lat, lng);
if (msg == "success") {
this.formData.address = data.address
this.searchValue = data.address
this.searchOptions = []
}
},
handleSearchMap() {
infoWindowList.forEach((infoWindow) => {
infoWindow.close();
});
infoWindowList.length = 0;
markers.setGeometries([]);
//
search
.searchNearby({
keyword: this.dataForm.locationAddress,
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.dataForm.latitude = lat;
this.dataForm.longitude = lng;
} else {
this.$message.error("未检索到相关位置坐标");
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 = [];
}
},
handleMoveCenter(e) {
//
const center = map.getCenter();
const lat = center.getLat();
const lng = center.getLng();
this.dataForm.latitude = lat;
this.dataForm.longitude = lng;
this.setMarker(lat, lng);
if (e && e.originalEvent) {
geocoder
.getAddress({ location: new TMap.LatLng(lat, lng) }) //
.then((result) => {
this.dataForm.locationAddress = result.result.address;
});
}
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.formData.latitude = lonlat[1];
this.formData.longitude = lonlat[0];
this.formData.address = selPosition.address + selPosition.name
},
async initForm(type, row) {
this.$refs.ref_form.resetFields();
async initForm (type, row) {
this.$refs.ref_form.resetFields();
let { latitude, longitude } = this.$store.state.user;
this.formType = type;
console.log(row);
if (row) {
@ -545,7 +484,7 @@ export default {
}
},
async handleComfirm() {
async handleComfirm () {
this.btnDisable = true;
setTimeout(() => {
this.btnDisable = false;
@ -560,7 +499,7 @@ export default {
});
},
async submit() {
async submit () {
let url = "";
if (this.formType === "add") {
url = "/gov/org/icpartyservicecenter/addpartyservicecenter";
@ -609,11 +548,11 @@ export default {
}
},
handleCancle() {
handleCancle () {
this.resetData();
this.$emit("dialogCancle");
},
resetData() {
resetData () {
this.partyServiceCenterId = "";
this.dataForm = {
centerName: "",
@ -631,7 +570,7 @@ export default {
};
},
//
startLoading() {
startLoading () {
loading = Loading.service({
lock: true, //
text: "正在加载……", //
@ -639,7 +578,7 @@ export default {
});
},
//
endLoading() {
endLoading () {
// clearTimeout(timer);
if (loading) {
loading.close();

Loading…
Cancel
Save