jiangyy
4 years ago
5 changed files with 1850 additions and 396 deletions
@ -0,0 +1,311 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
|
||||
|
<div class="dialog-h-content scroll-h"> |
||||
|
<el-form ref="ref_form" |
||||
|
:inline="true" |
||||
|
:model="formData" |
||||
|
class="form"> |
||||
|
|
||||
|
<el-form-item label="服务事项" |
||||
|
label-width="150px" |
||||
|
prop="serviceMatterShow"> |
||||
|
<span class="detail_span">{{formData.serviceMatterShow}}</span> |
||||
|
|
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="单位名称" |
||||
|
prop="unitId" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<span class="detail_span">{{formData.unitName}}</span> |
||||
|
|
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="活动标题" |
||||
|
prop="title" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<span class="detail_span">{{formData.title}}</span> |
||||
|
|
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="活动目标" |
||||
|
prop="target" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<span class="detail_span">{{formData.target}}</span> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="活动内容" |
||||
|
prop="target" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<p class="text_p" |
||||
|
v-html="formData.content"></p> |
||||
|
|
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="服务人数" |
||||
|
style="display: block" |
||||
|
prop="peopleCount" |
||||
|
label-width="150px"> |
||||
|
<span class="detail_span">{{formData.peopleCount}}</span> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="活动时间" |
||||
|
style="display: block" |
||||
|
prop="activityTime" |
||||
|
label-width="150px"> |
||||
|
<span class="detail_span">{{formData.activityTime}}</span> |
||||
|
|
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="活动地址" |
||||
|
prop="address" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<span class="detail_span">{{formData.address}}</span> |
||||
|
|
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="活动坐标" |
||||
|
prop="longitude" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
|
||||
|
<div style="width:500px"> |
||||
|
|
||||
|
<div id="app"> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="活动结果" |
||||
|
prop="result" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
|
||||
|
<p class="text_p" |
||||
|
v-html="formData.result"></p> |
||||
|
|
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
|
||||
|
<div class="div_btn"> |
||||
|
<el-button size="small" |
||||
|
@click="handleCancle">取 消</el-button> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
import { Loading } from 'element-ui' // 引入Loading服务 |
||||
|
|
||||
|
var map |
||||
|
var search |
||||
|
var markers |
||||
|
var infoWindowList |
||||
|
var geocoder // 新建一个正逆地址解析类 |
||||
|
|
||||
|
let loading // 加载动画 |
||||
|
export default { |
||||
|
data () { |
||||
|
return { |
||||
|
formData: {}, |
||||
|
} |
||||
|
}, |
||||
|
components: {}, |
||||
|
mounted () { |
||||
|
this.initMap() |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
handleCancle () { |
||||
|
|
||||
|
this.$emit('diaClose') |
||||
|
|
||||
|
}, |
||||
|
async initForm (row) { |
||||
|
|
||||
|
this.startLoading() |
||||
|
for (let item of this.serviceList) { |
||||
|
|
||||
|
if (row.serviceMatter === item.value) { |
||||
|
row.serviceMatterShow = item.label |
||||
|
} |
||||
|
} |
||||
|
this.formData = { ...row } |
||||
|
|
||||
|
map.setCenter(new TMap.LatLng(this.formData.latitude, this.formData.longitude)) |
||||
|
this.setMarker(this.formData.latitude, this.formData.longitude) |
||||
|
|
||||
|
this.endLoading() |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 |
||||
|
initMap () { |
||||
|
// 定义地图中心点坐标 |
||||
|
var center = new window.TMap.LatLng(36.0722275, 120.38945519) |
||||
|
// 定义map变量，调用 TMap.Map() 构造函数创建地图 |
||||
|
map = new window.TMap.Map(document.getElementById('app'), { |
||||
|
center: center, // 设置地图中心点坐标 |
||||
|
zoom: 17.2, // 设置地图缩放级别 |
||||
|
pitch: 43.5, // 设置俯仰角 |
||||
|
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', () => { |
||||
|
this.handleMoveCenter() |
||||
|
}) |
||||
|
this.handleMoveCenter() |
||||
|
this.convert() |
||||
|
}, |
||||
|
|
||||
|
setMarker (lat, lng) { |
||||
|
markers.setGeometries([]) |
||||
|
markers.add([ |
||||
|
{ |
||||
|
id: '4', |
||||
|
styleId: 'marker', |
||||
|
position: new TMap.LatLng(lat, lng), |
||||
|
properties: { |
||||
|
title: 'marker4' |
||||
|
} |
||||
|
} |
||||
|
]) |
||||
|
}, |
||||
|
|
||||
|
handleSearchMap () { |
||||
|
infoWindowList.forEach((infoWindow) => { |
||||
|
infoWindow.close() |
||||
|
}) |
||||
|
infoWindowList.length = 0 |
||||
|
markers.setGeometries([]) |
||||
|
// 在地图显示范围内以给定的关键字搜索地点 |
||||
|
search |
||||
|
.searchRectangle({ |
||||
|
keyword: this.keyWords, |
||||
|
bounds: map.getBounds() |
||||
|
}) |
||||
|
.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.longitude = lng |
||||
|
this.convert() |
||||
|
} else { |
||||
|
this.$message.error('未检索到相关位置坐标') |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
handleMoveCenter () { |
||||
|
//修改地图中心点 |
||||
|
const center = map.getCenter() |
||||
|
const lat = center.getLat() |
||||
|
const lng = center.getLng() |
||||
|
this.formData.latitude = lat |
||||
|
this.formData.longitude = lng |
||||
|
this.setMarker(lat, lng) |
||||
|
this.convert(lat, lng) |
||||
|
}, |
||||
|
|
||||
|
convert (lat, lng) { |
||||
|
markers.setGeometries([]); |
||||
|
// var input = document.getElementById('location').value.split(','); |
||||
|
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) => { |
||||
|
// this.formData.address = result.result.address |
||||
|
// 显示搜索到的地址 |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 开启加载动画 |
||||
|
startLoading () { |
||||
|
loading = Loading.service({ |
||||
|
lock: true, // 是否锁定 |
||||
|
text: '正在加载……', // 加载中需要显示的文字 |
||||
|
background: 'rgba(0,0,0,.7)' // 背景颜色 |
||||
|
}) |
||||
|
}, |
||||
|
// 结束加载动画 |
||||
|
endLoading () { |
||||
|
// clearTimeout(timer); |
||||
|
if (loading) { |
||||
|
loading.close() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: {}, |
||||
|
props: { |
||||
|
serviceList: { |
||||
|
type: Array, |
||||
|
default: [] |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped > |
||||
|
@import "@/assets/scss/modules/visual/communityManageForm.scss"; |
||||
|
</style> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.detail_span { |
||||
|
width: 500px; |
||||
|
font-weight: bold; |
||||
|
text-align: left; |
||||
|
margin: 0 0; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
.text_p { |
||||
|
margin: 0 0; |
||||
|
border: 3px; |
||||
|
|
||||
|
> p { |
||||
|
margin: 0 0; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,604 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
|
||||
|
<div class="dialog-h-content scroll-h"> |
||||
|
<el-form ref="ref_form" |
||||
|
:inline="true" |
||||
|
:model="formData" |
||||
|
:rules="dataRule" |
||||
|
:disabled="formType === 'detail'" |
||||
|
class="form"> |
||||
|
|
||||
|
<el-form-item label="服务事项" |
||||
|
label-width="150px" |
||||
|
prop="serviceMatterList"> |
||||
|
|
||||
|
<el-checkbox-group class="item_width_1" |
||||
|
style="display:flex;flex-wrap:wrap" |
||||
|
v-model="formData.serviceMatterList"> |
||||
|
<el-checkbox v-for="item in serviceList" |
||||
|
:key="item.value" |
||||
|
:label="item.value">{{item.label}}</el-checkbox> |
||||
|
|
||||
|
</el-checkbox-group> |
||||
|
|
||||
|
<!-- <el-select class="item_width_1" |
||||
|
v-model="formData.serviceMatter" |
||||
|
placeholder="请选择" |
||||
|
clearable> |
||||
|
<el-option v-for="item in serviceList" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> --> |
||||
|
|
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="单位名称" |
||||
|
prop="unitIdList" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<el-checkbox-group class="item_width_1" |
||||
|
style="display:flex;flex-wrap:wrap" |
||||
|
v-model="formData.unitIdList"> |
||||
|
<el-checkbox v-for="item in unitList" |
||||
|
:key="item.value" |
||||
|
:label="item.value">{{item.label}}</el-checkbox> |
||||
|
|
||||
|
</el-checkbox-group> |
||||
|
<!-- <el-select class="item_width_1" |
||||
|
v-model="formData.unitId" |
||||
|
placeholder="请选择" |
||||
|
clearable> |
||||
|
<el-option v-for="item in unitList" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> --> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="活动标题" |
||||
|
prop="title" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<el-input class="item_width_1" |
||||
|
maxlength="50" |
||||
|
show-word-limit |
||||
|
placeholder="请输入活动标题" |
||||
|
v-model="formData.title"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="活动目标" |
||||
|
prop="target" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<el-input class="item_width_1" |
||||
|
type="textarea" |
||||
|
maxlength="100" |
||||
|
show-word-limit |
||||
|
:rows="3" |
||||
|
placeholder="请输入活动目标，不超过100字" |
||||
|
v-model="formData.target"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="活动内容" |
||||
|
prop="target" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<div class="item_width_1"> |
||||
|
<Tinymce class="tinymce_view " |
||||
|
v-if="formType!='detail'" |
||||
|
v-model="formData.content" |
||||
|
:height="250" |
||||
|
placeholder="在这里输入文字" /> |
||||
|
|
||||
|
<p v-else |
||||
|
class="text_p" |
||||
|
v-html="formData.content"></p> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="服务人数" |
||||
|
style="display: block" |
||||
|
prop="peopleCount" |
||||
|
label-width="150px"> |
||||
|
<el-input-number class="item_width_1" |
||||
|
v-model="formData.peopleCount" |
||||
|
:min="0" |
||||
|
label="服务人数"></el-input-number> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="活动时间" |
||||
|
style="display: block" |
||||
|
prop="activityTime" |
||||
|
label-width="150px"> |
||||
|
<el-date-picker v-model="formData.activityTime" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
type="datetime" |
||||
|
placeholder="选择时间"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="活动坐标" |
||||
|
prop="longitude" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<div class="item_width_1"> |
||||
|
|
||||
|
<div class="div_map"> |
||||
|
<div id="app"> |
||||
|
|
||||
|
</div> |
||||
|
<div class="div_searchmap"> |
||||
|
<el-input class="item_width_4" |
||||
|
maxlength="50" |
||||
|
size="mini" |
||||
|
placeholder="请输入关键字" |
||||
|
v-model="keyWords"> |
||||
|
</el-input> |
||||
|
<el-button style="margin-left: 10px" |
||||
|
type="primary" |
||||
|
size="mini" |
||||
|
@click="handleSearchMap">查询</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div style="margin-top: 10px"> |
||||
|
<span>经度</span> |
||||
|
<el-input class="item_width_3" |
||||
|
maxlength="50" |
||||
|
placeholder="请输入经度" |
||||
|
v-model="formData.longitude"> |
||||
|
</el-input> |
||||
|
<span style="margin-left: 20px">纬度</span> |
||||
|
<el-input class="item_width_3" |
||||
|
maxlength="50" |
||||
|
placeholder="请输入纬度" |
||||
|
v-model="formData.latitude"> |
||||
|
</el-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="活动地址" |
||||
|
prop="address" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
|
||||
|
<el-input class="item_width_1" |
||||
|
v-model="formData.address"> |
||||
|
</el-input> |
||||
|
|
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="活动结果" |
||||
|
prop="result" |
||||
|
label-width="150px" |
||||
|
style="display: block"> |
||||
|
<div class="item_width_1"> |
||||
|
<Tinymce class="tinymce_view " |
||||
|
v-if="formType!='detail'" |
||||
|
v-model="formData.result" |
||||
|
:height="250" |
||||
|
placeholder="在这里输入文字" /> |
||||
|
|
||||
|
<p v-else |
||||
|
class="text_p" |
||||
|
v-html="formData.result"></p> |
||||
|
</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> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import { Loading } from 'element-ui' // 引入Loading服务 |
||||
|
import { requestPost } from '@/js/dai/request' |
||||
|
import Tinymce from '@c/tinymce/index.vue' |
||||
|
|
||||
|
var map |
||||
|
var search |
||||
|
var markers |
||||
|
var infoWindowList |
||||
|
var geocoder // 新建一个正逆地址解析类 |
||||
|
|
||||
|
let loading // 加载动画 |
||||
|
export default { |
||||
|
data () { |
||||
|
return { |
||||
|
formType: 'add', //表单操作类型 add新增，edit编辑，detail详情 |
||||
|
|
||||
|
btnDisable: false, |
||||
|
|
||||
|
keyWords: '', |
||||
|
activityId: '', |
||||
|
formData: { |
||||
|
serviceMatter: '',//服务事项 |
||||
|
serviceMatterList: [], |
||||
|
unitId: '',//单位ID |
||||
|
unitIdList: [], |
||||
|
title: '',//活动标题 |
||||
|
target: '',//活动目标 |
||||
|
content: '',//活动内容 |
||||
|
activityTime: '',//活动时间 |
||||
|
peopleCount: 0,//服务人数 |
||||
|
result: '', //活动结果 |
||||
|
address: '', //详细地址 |
||||
|
longitude: 36.0722275, //经度 |
||||
|
latitude: 120.38945519 //纬度 |
||||
|
}, |
||||
|
serviceList: [] |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
components: { Tinymce }, |
||||
|
mounted () { |
||||
|
this.initMap() |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
|
||||
|
async initForm (type, activityId) { |
||||
|
this.startLoading() |
||||
|
this.$refs.ref_form.resetFields(); |
||||
|
|
||||
|
//获取服务事项 |
||||
|
await this.loadService() |
||||
|
|
||||
|
this.formType = type |
||||
|
if (activityId) { |
||||
|
this.activityId = activityId |
||||
|
this.formData.id = activityId |
||||
|
await this.loadFormData() |
||||
|
} else { |
||||
|
map.setCenter(new TMap.LatLng(36.0722275, 120.38945519)) |
||||
|
this.setMarker(36.0722275, 120.38945519) |
||||
|
} |
||||
|
this.endLoading() |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
//获取服务事项下拉框 |
||||
|
async loadService () { |
||||
|
const url = "/heart/serviceitem/dict-list" |
||||
|
|
||||
|
let params = { |
||||
|
type: 'usable' |
||||
|
// parentCategoryCode: '1010' |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.serviceList = data |
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
//加载组织 |
||||
|
async loadFormData () { |
||||
|
const url = '/heart/icpartyactivity/detail' |
||||
|
// const url = 'http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/detail' |
||||
|
let params = { |
||||
|
id: this.activityId |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.formData = data |
||||
|
console.log(this.formData.content) |
||||
|
let style_img = "style='width:50px;height:40px;' " |
||||
|
|
||||
|
if (this.formData.content) { |
||||
|
this.formData.content = this.formData.content.replace(/<img/g, "<img style='width:200px;height:120px;'") |
||||
|
// let array=this.formData.content.split('<img') |
||||
|
|
||||
|
} |
||||
|
console.log(this.formData.content) |
||||
|
map.setCenter(new TMap.LatLng(parseFloat(this.formData.latitude), parseFloat(this.formData.longitude))) |
||||
|
this.setMarker(this.formData.latitude, this.formData.longitude) |
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async handleComfirm () { |
||||
|
this.btnDisable = true |
||||
|
setTimeout(() => { |
||||
|
this.btnDisable = false |
||||
|
}, 10000) |
||||
|
this.$refs['ref_form'].validate((valid, messageObj) => { |
||||
|
if (!valid) { |
||||
|
app.util.validateRule(messageObj) |
||||
|
this.btnDisable = false |
||||
|
} else { |
||||
|
this.addActivity() |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
async addActivity () { |
||||
|
let url = '/heart/icpartyactivity/save' |
||||
|
// let url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/save" |
||||
|
|
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, this.formData) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '操作成功' |
||||
|
}) |
||||
|
this.resetData() |
||||
|
this.$emit('dialogOk') |
||||
|
this.btnDisable = false |
||||
|
} else { |
||||
|
this.btnDisable = false |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
handleCancle () { |
||||
|
|
||||
|
this.resetData() |
||||
|
this.$emit('dialogCancle') |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
// 地图初始化函数，本例取名为init，开发者可根据实际情况定义 |
||||
|
initMap () { |
||||
|
// 定义地图中心点坐标 |
||||
|
var center = new window.TMap.LatLng(36.0722275, 120.38945519) |
||||
|
// 定义map变量，调用 TMap.Map() 构造函数创建地图 |
||||
|
map = new window.TMap.Map(document.getElementById('app'), { |
||||
|
center: center, // 设置地图中心点坐标 |
||||
|
zoom: 17.2, // 设置地图缩放级别 |
||||
|
pitch: 43.5, // 设置俯仰角 |
||||
|
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', () => { |
||||
|
this.handleMoveCenter() |
||||
|
}) |
||||
|
this.handleMoveCenter() |
||||
|
this.convert() |
||||
|
}, |
||||
|
|
||||
|
setMarker (lat, lng) { |
||||
|
markers.setGeometries([]) |
||||
|
markers.add([ |
||||
|
{ |
||||
|
id: '4', |
||||
|
styleId: 'marker', |
||||
|
position: new TMap.LatLng(lat, lng), |
||||
|
properties: { |
||||
|
title: 'marker4' |
||||
|
} |
||||
|
} |
||||
|
]) |
||||
|
}, |
||||
|
|
||||
|
handleSearchMap () { |
||||
|
infoWindowList.forEach((infoWindow) => { |
||||
|
infoWindow.close() |
||||
|
}) |
||||
|
infoWindowList.length = 0 |
||||
|
markers.setGeometries([]) |
||||
|
// 在地图显示范围内以给定的关键字搜索地点 |
||||
|
search |
||||
|
.searchRectangle({ |
||||
|
keyword: this.keyWords, |
||||
|
bounds: map.getBounds() |
||||
|
}) |
||||
|
.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.longitude = lng |
||||
|
this.convert() |
||||
|
} else { |
||||
|
this.$message.error('未检索到相关位置坐标') |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
handleMoveCenter () { |
||||
|
//修改地图中心点 |
||||
|
const center = map.getCenter() |
||||
|
const lat = center.getLat() |
||||
|
const lng = center.getLng() |
||||
|
this.formData.latitude = lat |
||||
|
this.formData.longitude = lng |
||||
|
this.setMarker(lat, lng) |
||||
|
this.convert(lat, lng) |
||||
|
}, |
||||
|
|
||||
|
convert (lat, lng) { |
||||
|
markers.setGeometries([]); |
||||
|
// var input = document.getElementById('location').value.split(','); |
||||
|
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) => { |
||||
|
this.formData.address = result.result.address |
||||
|
// 显示搜索到的地址 |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
resetData () { |
||||
|
this.activityId = '' |
||||
|
this.keyWords = '' |
||||
|
this.formData = { |
||||
|
serviceMatter: '',//服务事项 |
||||
|
serviceMatterList: [], |
||||
|
unitId: '',//单位ID |
||||
|
unitIdList: [], |
||||
|
title: '',//活动标题 |
||||
|
target: '',//活动目标 |
||||
|
content: '',//活动内容 |
||||
|
activityTime: '',//活动时间 |
||||
|
peopleCount: 0,//服务人数 |
||||
|
result: '', //活动结果 |
||||
|
address: '', //详细地址 |
||||
|
longitude: 36.0722275, //经度 |
||||
|
latitude: 120.38945519 //纬度 |
||||
|
} |
||||
|
}, |
||||
|
// 开启加载动画 |
||||
|
startLoading () { |
||||
|
loading = Loading.service({ |
||||
|
lock: true, // 是否锁定 |
||||
|
text: '正在加载……', // 加载中需要显示的文字 |
||||
|
background: 'rgba(0,0,0,.7)' // 背景颜色 |
||||
|
}) |
||||
|
}, |
||||
|
// 结束加载动画 |
||||
|
endLoading () { |
||||
|
// clearTimeout(timer); |
||||
|
if (loading) { |
||||
|
loading.close() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
dataRule () { |
||||
|
return { |
||||
|
serviceMatterList: [ |
||||
|
{ required: true, message: '服务事项不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
unitIdList: [ |
||||
|
{ required: true, message: '单位名称不能为空', trigger: 'blur' }, |
||||
|
], |
||||
|
title: [ |
||||
|
{ required: true, message: '活动标题不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
|
||||
|
target: [ |
||||
|
{ required: true, message: '活动目标不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
content: [ |
||||
|
{ required: true, message: '活动内容不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
activityTime: [ |
||||
|
{ required: true, message: '活动时间不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
result: [ |
||||
|
{ required: true, message: '活动结果不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
address: [ |
||||
|
{ required: true, message: '详细地址不能为空', trigger: 'blur' } |
||||
|
], |
||||
|
longitude: [ |
||||
|
{ required: true, message: '坐标不能为空', trigger: 'blur' } |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
props: { |
||||
|
|
||||
|
unitList: { |
||||
|
type: Array, |
||||
|
default: [] |
||||
|
}, |
||||
|
|
||||
|
// serviceList: { |
||||
|
// type: Array, |
||||
|
// default: [] |
||||
|
// }, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
<style lang="scss" scoped > |
||||
|
@import "@/assets/scss/modules/visual/communityManageForm.scss"; |
||||
|
</style> |
||||
|
<style lang="scss" scoped> |
||||
|
.item_width_1 { |
||||
|
width: 560px; |
||||
|
|
||||
|
/deep/.tox .tox-dialog { |
||||
|
z-index: 20000; |
||||
|
} |
||||
|
} |
||||
|
.tinymce_view { |
||||
|
::v-deep .tox .tox-dialog { |
||||
|
z-index: 2000000000; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.div_map { |
||||
|
position: relative; |
||||
|
} |
||||
|
.div_searchmap { |
||||
|
z-index: 5000; |
||||
|
position: absolute; |
||||
|
top: 5px; |
||||
|
left: 5px; |
||||
|
} |
||||
|
|
||||
|
.tinymce_view { |
||||
|
height: 400px; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
.text_p { |
||||
|
margin: 0; |
||||
|
padding: 0 10px; |
||||
|
border: 1px solid #d9d9d9; |
||||
|
border-radius: 5px; |
||||
|
> p { |
||||
|
margin: 0; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,694 @@ |
|||||
|
<template> |
||||
|
<div class="div_main"> |
||||
|
<div class="div_search"> |
||||
|
<el-form :inline="true" |
||||
|
:model="formData" |
||||
|
ref="ref_searchform" |
||||
|
:label-width="'100px'"> |
||||
|
<div> |
||||
|
|
||||
|
<el-form-item label="单位名称" |
||||
|
prop="unitId"> |
||||
|
<el-select class="item_width_1" |
||||
|
v-model="formData.unitId" |
||||
|
size="small" |
||||
|
placeholder="全部" |
||||
|
clearable> |
||||
|
<el-option v-for="item in unitList" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
|
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="服务事项" |
||||
|
prop="serviceMatter"> |
||||
|
<el-select class="item_width_2" |
||||
|
v-model="formData.serviceMatter" |
||||
|
size="small" |
||||
|
placeholder="请选择" |
||||
|
clearable> |
||||
|
<el-option v-for="item in serviceList" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
|
||||
|
</el-form-item> |
||||
|
|
||||
|
</div> |
||||
|
<div> |
||||
|
<el-form-item label="活动标题" |
||||
|
prop="title"> |
||||
|
<el-input v-model="formData.title" |
||||
|
size="small" |
||||
|
class="item_width_1" |
||||
|
clearable |
||||
|
placeholder="请输入内容"> |
||||
|
</el-input> |
||||
|
|
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="活动时间" |
||||
|
prop="startTime"> |
||||
|
<el-date-picker v-model="timeRange" |
||||
|
size="small" |
||||
|
type="daterange" |
||||
|
value-format="yyyy-MM-dd HH:mm:ss" |
||||
|
@change="handleTimeChange" |
||||
|
range-separator="至" |
||||
|
start-placeholder="开始时间" |
||||
|
end-placeholder="结束时间"> |
||||
|
</el-date-picker> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-button style="margin-left:10px" |
||||
|
class="diy-button--search" |
||||
|
size="small" |
||||
|
@click="handleSearch">查询</el-button> |
||||
|
<el-button style="margin-left:10px" |
||||
|
class="diy-button--reset" |
||||
|
size="small" |
||||
|
@click="resetSearch">重置</el-button> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="div_table"> |
||||
|
<div class="div_btn"> |
||||
|
<el-button style="" |
||||
|
class="diy-button--add" |
||||
|
size="small" |
||||
|
@click="handleAdd">新增</el-button> |
||||
|
<!-- |
||||
|
<el-upload ref="upload" |
||||
|
:multiple='false' |
||||
|
:show-file-list='false' |
||||
|
:before-upload="beforeUpload" |
||||
|
action="" |
||||
|
accept=".xls,.xlsx" |
||||
|
:limit="1" |
||||
|
:on-exceed="handleExceed" |
||||
|
:http-request="uploadFile"> |
||||
|
<el-button style="margin-left:10px" |
||||
|
size="small" |
||||
|
class="diy-button--delete">导入</el-button> |
||||
|
|
||||
|
|
||||
|
</el-upload> |
||||
|
<el-button style="float:left" |
||||
|
class="diy-button--reset" |
||||
|
size="small" |
||||
|
@click="handleExport">导出</el-button>--> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<el-table class="table" |
||||
|
:data="tableData" |
||||
|
border |
||||
|
:height="tableHeight" |
||||
|
v-loading="tableLoading" |
||||
|
:header-cell-style="{background:'#2195FE',color:'#FFFFFF'}" |
||||
|
style="width: 100%"> |
||||
|
|
||||
|
<el-table-column label="序号" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
type="index" |
||||
|
width="50"></el-table-column> |
||||
|
<el-table-column prop="unitName" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="单位名称" |
||||
|
width="180"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="title" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="活动标题" |
||||
|
min-width="180"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="address" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="活动地址" |
||||
|
min-width="230"> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="peopleCount" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="服务人数" |
||||
|
width="100"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="activityTime" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="活动时间" |
||||
|
width="230"> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="activityTime" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
label="来源" |
||||
|
width="100"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="scope.row.actId">小程序</span> |
||||
|
<span v-else>管理平台</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column label="操作" |
||||
|
fixed="right" |
||||
|
width="140" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
class="operate"> |
||||
|
<template slot-scope="scope"> |
||||
|
|
||||
|
<el-button type="text" |
||||
|
style="color:#1C6AFD;text-decoration: underline;" |
||||
|
size="small" |
||||
|
@click="handleDetail(scope.row)">查看</el-button> |
||||
|
<el-button v-if="!scope.row.actId" |
||||
|
type="text" |
||||
|
style="color:#00A7A9;text-decoration: underline;" |
||||
|
size="small" |
||||
|
@click="handleEdit(scope.row)">修改</el-button> |
||||
|
|
||||
|
<el-button type="text" |
||||
|
style="color:#D51010;text-decoration: underline;" |
||||
|
size="small" |
||||
|
@click="handleDelete(scope.row)">删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<div> |
||||
|
<el-pagination @size-change="handleSizeChange" |
||||
|
@current-change="handleCurrentChange" |
||||
|
:current-page.sync="pageNo" |
||||
|
:page-sizes="[10, 20, 50]" |
||||
|
:page-size="pageSize" |
||||
|
layout="sizes, prev, pager, next, total" |
||||
|
:total="total"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 修改弹出框 --> |
||||
|
<el-dialog :visible.sync="formShow" |
||||
|
:close-on-click-modal="false" |
||||
|
:close-on-press-escape="false" |
||||
|
:title="formTitle" |
||||
|
width="950px" |
||||
|
top="5vh" |
||||
|
class="dialog-h" |
||||
|
@closed="diaClose"> |
||||
|
<difficulty-form ref="ref_form" |
||||
|
:unitList="unitList" |
||||
|
@dialogCancle="addFormCancle" |
||||
|
@dialogOk="addFormOk"></difficulty-form> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<el-dialog :visible.sync="detailShow" |
||||
|
:close-on-click-modal="false" |
||||
|
:close-on-press-escape="false" |
||||
|
:title="'活动详情'" |
||||
|
width="950px" |
||||
|
top="5vh" |
||||
|
class="dialog-h" |
||||
|
@closed="detailClosed"> |
||||
|
<difficulty-detail ref="ref_detail" |
||||
|
:serviceList="serviceList" |
||||
|
@diaClose="diaClose"></difficulty-detail> |
||||
|
</el-dialog> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
import difficultyForm from './difficultyForm' |
||||
|
import difficultyDetail from './difficultyDetail' |
||||
|
import util from '@js/util.js'; |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import { Loading } from 'element-ui' // 引入Loading服务 |
||||
|
|
||||
|
let loading // 加载动画 |
||||
|
export default { |
||||
|
data () { |
||||
|
return { |
||||
|
loading: false, |
||||
|
total: 0, |
||||
|
pageSize: 10, |
||||
|
pageNo: 0, |
||||
|
tableLoading: false, |
||||
|
agencyId: '', |
||||
|
unitList: [],//单位list |
||||
|
serviceList: [ |
||||
|
{ |
||||
|
id: "1", |
||||
|
name: '积极配合社区安全巡查员进行场所消防、安全等方面的检查。' |
||||
|
}, |
||||
|
{ |
||||
|
id: "2", |
||||
|
name: '积极配合' |
||||
|
}, |
||||
|
{ |
||||
|
id: "3", |
||||
|
name: '积极配合社区安全巡查员进行' |
||||
|
}, |
||||
|
{ |
||||
|
id: "4", |
||||
|
name: '积极配合社区安全巡查员进行场所消防、安全等方面的检查。并具备安全意识及设备设施' |
||||
|
}, |
||||
|
],//服务list |
||||
|
pickerOptions: { //控制时间范围 |
||||
|
disabledDate (time) { |
||||
|
return time.getTime() > (Date.now() - (24 * 60 * 60 * 1000)) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
timeRange: [], |
||||
|
unitId: '', |
||||
|
formData: { |
||||
|
unitId: '', |
||||
|
title: '', |
||||
|
serviceMatter: '', |
||||
|
startTime: '', |
||||
|
endTime: '' |
||||
|
}, |
||||
|
|
||||
|
tableData: [], |
||||
|
|
||||
|
//form相关 |
||||
|
formShow: false, |
||||
|
formTitle: '新增活动', |
||||
|
detailShow: false, |
||||
|
|
||||
|
files: "", |
||||
|
fileName: "", |
||||
|
uploadUlr: window.SITE_CONFIG['apiURL'] + '/gov/org/neighborhood/import' |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
difficultyForm, difficultyDetail |
||||
|
}, |
||||
|
async created () { |
||||
|
|
||||
|
}, |
||||
|
async mounted () { |
||||
|
//获取服务事项 |
||||
|
await this.loadService() |
||||
|
|
||||
|
const { user } = this.$store.state |
||||
|
this.agencyId = user.agencyId |
||||
|
|
||||
|
//获取建联单位 |
||||
|
await this.loadUnit() |
||||
|
//获取网格下拉框数据 |
||||
|
await this.loadTable() |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
handleSearch () { |
||||
|
this.loadTable() |
||||
|
}, |
||||
|
|
||||
|
async loadUnit () { |
||||
|
const url = "/heart/icpartyunit/option" |
||||
|
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/option" |
||||
|
|
||||
|
let params = { |
||||
|
agencyId: this.agencyId |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.unitList = data |
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
//获取服务事项下拉框 |
||||
|
async loadService () { |
||||
|
const url = "/heart/serviceitem/dict-list" |
||||
|
|
||||
|
|
||||
|
let params = { |
||||
|
// parentCategoryCode: '1010' |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.serviceList = data |
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
async loadTable () { |
||||
|
this.tableLoading = true |
||||
|
|
||||
|
const url = "/heart/icpartyactivity/search" |
||||
|
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/list" |
||||
|
let params = { |
||||
|
agencyId: this.agencyId, |
||||
|
pageSize: this.pageSize, |
||||
|
pageNo: this.pageNo, |
||||
|
...this.formData |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.total = data.total |
||||
|
this.tableData = data.list |
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
this.tableLoading = false |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
diaClose () { |
||||
|
this.$refs.ref_form.resetData() |
||||
|
this.formShow = false |
||||
|
}, |
||||
|
|
||||
|
detailClosed () { |
||||
|
this.detailShow = false |
||||
|
}, |
||||
|
|
||||
|
handleDetail (row) { |
||||
|
// this.detailShow = true |
||||
|
this.formTitle = '详情' |
||||
|
this.formShow = true |
||||
|
this.$nextTick(() => { |
||||
|
// this.$refs.ref_detail.initForm(row) |
||||
|
this.$refs.ref_form.initForm('detail', row.id) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
handleAdd () { |
||||
|
this.formTitle = '新增' |
||||
|
this.formShow = true |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.ref_form.initForm('add', null) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
handleEdit (row) { |
||||
|
this.formTitle = '修改' |
||||
|
this.formShow = true |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.ref_form.initForm('edit', row.id) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
addFormCancle () { |
||||
|
this.formShow = false |
||||
|
}, |
||||
|
addFormOk () { |
||||
|
this.formShow = false |
||||
|
this.loadTable() |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
async handleDelete (row) { |
||||
|
|
||||
|
this.$confirm("确认删除?", "提示", { |
||||
|
confirmButtonText: "确定", |
||||
|
cancelButtonText: "取消", |
||||
|
type: "warning" |
||||
|
}) |
||||
|
.then(() => { |
||||
|
this.deleteActivity(row) |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
if (err == "cancel") { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
async deleteActivity (row) { |
||||
|
const url = "/heart/icpartyactivity/delete" |
||||
|
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/delete" |
||||
|
|
||||
|
let params = { |
||||
|
id: row.id |
||||
|
} |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, params) |
||||
|
|
||||
|
if (code === 0) { |
||||
|
this.$message({ |
||||
|
type: "success", |
||||
|
message: "删除成功" |
||||
|
}); |
||||
|
|
||||
|
this.loadTable() |
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
//重置搜索条件 |
||||
|
resetSearch () { |
||||
|
this.timeRange = [] |
||||
|
this.formData = { |
||||
|
gridId: '', |
||||
|
unitName: '', |
||||
|
serviceMatter: '', |
||||
|
type: '', |
||||
|
contact: '', |
||||
|
contactMobile: '' |
||||
|
} |
||||
|
this.pageSize = 10 |
||||
|
this.pageNo = 0 |
||||
|
this.loadTable() |
||||
|
}, |
||||
|
|
||||
|
//导出表格 |
||||
|
async handleExport () { |
||||
|
let title = '联建活动列表' |
||||
|
|
||||
|
const url = "/heart/icpartyactivity/export" |
||||
|
let params = { |
||||
|
agencyId: this.agencyId, |
||||
|
|
||||
|
...this.formData |
||||
|
|
||||
|
} |
||||
|
|
||||
|
app.ajax.exportFilePost( |
||||
|
url, |
||||
|
params, |
||||
|
(data, rspMsg) => { |
||||
|
|
||||
|
this.download(data, title + '.xls') |
||||
|
}, |
||||
|
(rspMsg, data) => { |
||||
|
this.$message.error(rspMsg); |
||||
|
} |
||||
|
); |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
// 下载文件 |
||||
|
download (data, fileName) { |
||||
|
if (!data) { |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
var csvData = new Blob([data]) |
||||
|
|
||||
|
if (window.navigator && window.navigator.msSaveOrOpenBlob) { |
||||
|
window.navigator.msSaveOrOpenBlob(csvData, fileName); |
||||
|
} |
||||
|
// for Non-IE (chrome, firefox etc.) |
||||
|
else { |
||||
|
var a = document.createElement('a'); |
||||
|
document.body.appendChild(a); |
||||
|
a.style = 'display: none'; |
||||
|
var url = window.URL.createObjectURL(csvData); |
||||
|
a.href = url; |
||||
|
a.download = fileName; |
||||
|
a.click(); |
||||
|
a.remove(); |
||||
|
window.URL.revokeObjectURL(url); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
// 上传文件之前的钩子 |
||||
|
beforeUpload (file) { |
||||
|
this.files = file; |
||||
|
|
||||
|
const isText = file.type === 'application/vnd.ms-excel' |
||||
|
const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' |
||||
|
|
||||
|
if (!isText && !isTextComputer) { |
||||
|
this.$message.error('请选择正确格式的文件') |
||||
|
return false |
||||
|
} else { |
||||
|
this.fileName = file.name; |
||||
|
return true |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
// 上传文件个数超过定义的数量 |
||||
|
handleExceed (files, fileList) { |
||||
|
this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`) |
||||
|
}, |
||||
|
|
||||
|
async uploadFile () { |
||||
|
this.loading = true |
||||
|
|
||||
|
if (this.fileName == "") { |
||||
|
this.$message.warning('请选择要上传的文件！') |
||||
|
return false |
||||
|
} |
||||
|
|
||||
|
//清空上传列表 |
||||
|
this.$refs['upload'].clearFiles() |
||||
|
|
||||
|
var url = '/heart/icpartyactivity/import' |
||||
|
let fileFormData = new FormData(); |
||||
|
fileFormData.append('file', this.files);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名 |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, fileFormData) |
||||
|
if (code === 0) { |
||||
|
this.$message({ |
||||
|
type: "success", |
||||
|
message: "导入成功" |
||||
|
}); |
||||
|
|
||||
|
this.loadTable() |
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
|
||||
|
handleTimeChange (time) { |
||||
|
if (time) { |
||||
|
const startTimeArray = util.dateFormatter(time[0], 'date').split('-') |
||||
|
const endTimeArray = util.dateFormatter(time[1], 'date').split('-') |
||||
|
|
||||
|
this.formData.startTime = startTimeArray[0] + '-' + startTimeArray[1] + '-' + startTimeArray[2] + ' 00:00:00' |
||||
|
this.formData.endTime = endTimeArray[0] + '-' + endTimeArray[1] + '-' + endTimeArray[2] + ' 23:59:59' |
||||
|
|
||||
|
// this.startTimeShow = startTimeArray[0] + '年' + startTimeArray[1] + '月' + startTimeArray[2] + '日' |
||||
|
// this.endTimeShow = endTimeArray[0] + '年' + endTimeArray[1] + '月' + endTimeArray[2] + '日' |
||||
|
} else { |
||||
|
this.formData.startTime = '' |
||||
|
this.formData.endTime = '' |
||||
|
// this.startTimeShow = '' |
||||
|
// this.endTimeShow = '' |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
handleSizeChange (val) { |
||||
|
this.pageSize = val |
||||
|
this.pageNo = 1 |
||||
|
this.loadTable() |
||||
|
}, |
||||
|
handleCurrentChange (val) { |
||||
|
this.pageNo = val |
||||
|
this.loadTable() |
||||
|
}, |
||||
|
|
||||
|
// 开启加载动画 |
||||
|
startLoading () { |
||||
|
loading = Loading.service({ |
||||
|
lock: true, // 是否锁定 |
||||
|
text: '正在加载……', // 加载中需要显示的文字 |
||||
|
background: 'rgba(0,0,0,.7)' // 背景颜色 |
||||
|
}) |
||||
|
}, |
||||
|
// 结束加载动画 |
||||
|
endLoading () { |
||||
|
// clearTimeout(timer); |
||||
|
if (loading) { |
||||
|
loading.close() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
tableHeight () { |
||||
|
|
||||
|
return (this.clientHeight - 430) |
||||
|
|
||||
|
}, |
||||
|
rowHeight () { |
||||
|
return (this.clientHeight - 200) + 'px' |
||||
|
}, |
||||
|
...mapGetters(['clientHeight']) |
||||
|
}, |
||||
|
watch: { |
||||
|
|
||||
|
}, |
||||
|
props: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped > |
||||
|
.div_main { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.div_search { |
||||
|
background: #ffffff; |
||||
|
border-radius: 4px; |
||||
|
padding: 30px 20px 5px; |
||||
|
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.item_width_1 { |
||||
|
width: 260px; |
||||
|
} |
||||
|
.item_width_2 { |
||||
|
width: 495px; |
||||
|
} |
||||
|
|
||||
|
.div_table { |
||||
|
background: #ffffff; |
||||
|
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1); |
||||
|
border-radius: 4px; |
||||
|
margin-top: 15px; |
||||
|
padding: 23px 30px 10px; |
||||
|
|
||||
|
.table { |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.div_btn { |
||||
|
} |
||||
|
|
||||
|
.el-row { |
||||
|
/* margin-bottom: 20px; */ |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
margin-top: 10px; |
||||
|
margin-right: 50px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue