9 changed files with 994 additions and 28 deletions
@ -0,0 +1,482 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
|
||||
|
<div class="dialog-h-content scroll-h"> |
||||
|
|
||||
|
<el-form ref="ref_form" :model="formData" :rules="dataRule" class="form"> |
||||
|
<!-- <el-col :span="12"> |
||||
|
<el-form-item label="所属组织" prop="agencyName" label-width="100px"> |
||||
|
<el-input v-model.trim="formData.agencyName" size="small" clearable placeholder="请输入组织名称" |
||||
|
:disabled="true" class="u-item-width-normal"></el-input> |
||||
|
</el-form-item> |
||||
|
--> |
||||
|
<el-form-item label="类型" prop="type" label-width="100px"> |
||||
|
<!-- <el-select :disabled="showdisabled" v-model="formData.type" placeholder="请选择" clearable class="u-item-width-normal"> |
||||
|
<el-option :disabled="showdisabled" class="u-item-width-normal" v-for="item in formData.optionstype" :key="item.value" :label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> --> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="名称" label-width="100px" prop="name"> |
||||
|
<!-- <el-input v-model.trim="formData.name" size="small" clearable placeholder="请输入名称" |
||||
|
:disabled="showdisabled" class="u-item-width-normal"></el-input> --> |
||||
|
<div>{{ formData.name }}</div> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="联系人" prop="linkman" label-width="100px"> |
||||
|
<div>{{ formData.linkman }}</div> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="联系电话" prop="linkPhone" label-width="100px"> |
||||
|
<div>{{ formData.linkPhone }}</div> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="办公时间" prop="workTime" label-width="100px"> |
||||
|
<div>{{ formData.workTime }}</div> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="图片" label-width="100px" prop="attrs"> |
||||
|
<template> |
||||
|
<img v-for="(item, index) in this.formData.attrs" :key="index" :src="item.url" style="width: 100px; height: 100px;"> |
||||
|
</template> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="阵地简介" prop="content" label-width="100px" style="display: block"> |
||||
|
<div>{{ formData.content }}</div> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="位置" prop="address" label-width="100px" style="display: block"> |
||||
|
<div style="width: 300px"> |
||||
|
<div>{{ formData.address }}</div> |
||||
|
<div id="app_activity" class="div_map"></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" |
||||
|
@click="handleComfirm">确 |
||||
|
定</el-button> |
||||
|
|
||||
|
</div> --> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapGetters } from 'vuex' |
||||
|
// import { Loading } from 'element-ui' // 引入Loading服务 |
||||
|
import { requestPost,requestGet } from '@/js/dai/request' |
||||
|
import Tinymce from '@c/tinymce2/index.vue' |
||||
|
import daiMap from "@/utils/dai-map"; |
||||
|
import util from '@js/util.js'; |
||||
|
// import UploadImage from './upload-image.vue' |
||||
|
import UploadImage from '@/views/modules/plugins/rent/upload-image.vue' |
||||
|
|
||||
|
var map |
||||
|
var search |
||||
|
var markers |
||||
|
var infoWindowList |
||||
|
var geocoder // 新建一个正逆地址解析类 |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
formData: |
||||
|
{ |
||||
|
agencyName:"", |
||||
|
agencyId: "", |
||||
|
linkman: "", |
||||
|
linkPhone: "", |
||||
|
content: "", |
||||
|
workTime: "", |
||||
|
attrs: [], |
||||
|
type: "", |
||||
|
name: "", |
||||
|
optionstype: [ |
||||
|
{ value: 0, label: "实践站" }, |
||||
|
{ value: 1, label: "实践点" }, |
||||
|
{ value: 2, label: "其它" }, |
||||
|
|
||||
|
], |
||||
|
address: "",//地址 |
||||
|
longitude: this.$store.state.user.longitude, //经度 |
||||
|
latitude: this.$store.state.user.latitude,//纬度 |
||||
|
}, |
||||
|
showdisabled:false, |
||||
|
uploadUrl: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2', |
||||
|
customerId: localStorage.getItem('customerId'), |
||||
|
|
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
components: { Tinymce, UploadImage }, |
||||
|
mounted() { |
||||
|
this.formData.agencyId=this.$store.state.user.agencyId |
||||
|
this.formData.agencyName=this.$store.state.user.agencyName |
||||
|
let { latitude, longitude } = this.$store.state.user; |
||||
|
if (!latitude || latitude == "" || latitude == "0") { |
||||
|
latitude = 39.9088810666821; |
||||
|
longitude = 116.39743841556731; |
||||
|
} |
||||
|
this.formData.latitude = latitude; |
||||
|
this.formData.longitude = longitude; |
||||
|
this.activityType() |
||||
|
this.listServerOrg() |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
//父组件传的 |
||||
|
async initForm(type, unitId) { |
||||
|
this.getTableDetail(unitId) |
||||
|
|
||||
|
}, |
||||
|
//获取详情 |
||||
|
getTableDetail(id) { |
||||
|
console.log(id,"dskljfksdljf"); |
||||
|
let url = `/voluntary/position/edit/${id}`; |
||||
|
console.log(url,"url"); |
||||
|
requestGet(url).then((res) => { |
||||
|
console.log(res); |
||||
|
if (res.code == 0) { |
||||
|
this.formData = res.data |
||||
|
this.fileList=[{fileUrl:res.data.attrs[0].url}] |
||||
|
console.log(this.formData,"this.formData"); |
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
//添加标签 |
||||
|
addDomain() { |
||||
|
if (this.formData.sponsors.length < 4) { |
||||
|
console.log("jshdfdsjdfkl"); |
||||
|
console.log(this.formData.sponsors,this.tableDate,); |
||||
|
this.formData.sponsors.push(this.tableDate); |
||||
|
console.log(this.formData.sponsors,this.tableDate,); |
||||
|
}else{ |
||||
|
this.$message.error("最多添加4个标签"); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
//删除动态 |
||||
|
removeDomain(item) { |
||||
|
console.log(item); |
||||
|
var index = this.formData.sponsors.indexOf(item) |
||||
|
if (index !== -1) { |
||||
|
this.formData.sponsors.splice(index, 1) |
||||
|
this.tableDate = {} |
||||
|
} |
||||
|
}, |
||||
|
validateContent() { |
||||
|
// 使用正则表达式去除HTML标签后检查内容 |
||||
|
const textContent = this.stripHtml(this.formData.sumUp); |
||||
|
if (textContent.trim() === '') { |
||||
|
this.formData.sumUp = null; |
||||
|
} |
||||
|
}, |
||||
|
stripHtml(html) { |
||||
|
const div = document.createElement('div'); |
||||
|
div.innerHTML = html; |
||||
|
return div.textContent || div.innerText || ''; |
||||
|
}, |
||||
|
async activityType() { |
||||
|
this.$nextTick(() => { |
||||
|
if (!map) { |
||||
|
this.initMap(this.formData.latitude, this.formData.longitude); |
||||
|
console.log("map", map,this.formData.latitude, this.formData.longitude) |
||||
|
} else { |
||||
|
map.setCenter(this.formData.latitude, this.formData.longitude); |
||||
|
map.setMarker(this.formData.latitude, this.formData.longitude); |
||||
|
console.log("mapmapmap", map) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
onChangeFileList(e) { |
||||
|
console.log(e, 'sssssb'); |
||||
|
this.fileList = e.length > 0 ? e.map(item => ({ |
||||
|
fileType: '0', |
||||
|
type:'image', |
||||
|
fileType: '0', |
||||
|
name:item.response.data.fileName, |
||||
|
fileUrl: item.response.data.url, |
||||
|
format: item.response.data.fileName.split('.').pop(), |
||||
|
url: item.response.data.url |
||||
|
})) : []; // 当e为空时清空fileList |
||||
|
if (e.length > 0) { |
||||
|
console.log(this.fileList,"this.fileList"); |
||||
|
this.formData.attrs=this.fileList; |
||||
|
console.log(this.formData.attrs,"this.fileList"); |
||||
|
|
||||
|
} else { |
||||
|
this.formData.coverPic = ''; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
removedImg() { |
||||
|
this.formData.coverPic = '' |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
onChangeImgs(e, rowIndex = 0) { |
||||
|
console.log('onChangeFileList', e) |
||||
|
if (e.length > 0) { |
||||
|
this.activityImgs = [] |
||||
|
e.forEach(item => { |
||||
|
let ob = { |
||||
|
fileType: '0', |
||||
|
fileUrl: item.response.data.url |
||||
|
} |
||||
|
this.activityImgs.push(ob) |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
async handleComfirm() { |
||||
|
console.log(this.formData," this.formData"); |
||||
|
// if (this.formData.type!==1&&!this.formData.type!=2&&!this.formData.type!=0) { |
||||
|
// this.$message.error('请选择类型'); |
||||
|
// return; |
||||
|
// } |
||||
|
|
||||
|
|
||||
|
if (!this.formData.linkPhone) { |
||||
|
this.$message.error('请输入电话'); |
||||
|
return; |
||||
|
} |
||||
|
if (!this.formData.linkman) { |
||||
|
this.$message.error('请输入姓名'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (!this.formData.address) { |
||||
|
this.$message.error('请选择位置'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (!this.formData.workTime) { |
||||
|
this.$message.error('请输入办公时间'); |
||||
|
return; |
||||
|
} |
||||
|
console.log(this.formData,"this.formData"); |
||||
|
this.addActivity() |
||||
|
}, |
||||
|
//增加 |
||||
|
async addActivity() { |
||||
|
let url = '/voluntary/position/saveOrUpdate' |
||||
|
console.log(); |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, this.formData) |
||||
|
if (code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '操作成功' |
||||
|
}) |
||||
|
// this.resetData() |
||||
|
this.$emit('showAddClose') |
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
}, |
||||
|
|
||||
|
handleCancle() { |
||||
|
console.log("sdlkfjklsdf "); |
||||
|
this.$emit('showAddClose') |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
// 地图初始化函数,本例取名为init,开发者可根据实际情况定义 |
||||
|
initMap(latitude, longitude) { |
||||
|
console.log(latitude, longitude,"564564568"); |
||||
|
map = new daiMap( |
||||
|
document.getElementById("app_activity"), |
||||
|
{ latitude, longitude }, |
||||
|
{ |
||||
|
zoom: 16.2, // 设置地图缩放级别 |
||||
|
pitch: 43.5, // 设置俯仰角 |
||||
|
rotation: 45, // 设置地图旋转角度 |
||||
|
} |
||||
|
); |
||||
|
|
||||
|
// 监听地图平移结束 |
||||
|
/* map.on("dragend", (e) => { |
||||
|
this.handleMoveCenter(e); |
||||
|
});*/ |
||||
|
map.on("click", (e) => { |
||||
|
this.handleMoveCenter(e); |
||||
|
}); |
||||
|
|
||||
|
map.setCenter(latitude, longitude); |
||||
|
map.setMarker(latitude, longitude); |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
|
||||
|
async handleMoveCenter(e) { |
||||
|
//修改地图中心点 |
||||
|
// const { lat, lng } = map.getCenter(); |
||||
|
const { lat, lng } = e.latLng; |
||||
|
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 |
||||
|
console.log(this.formData.address," this.formData.address "); |
||||
|
|
||||
|
this.searchValue = data.address |
||||
|
this.searchOptions = [] |
||||
|
// console.log('data,this.searchValue ', this.searchValue) |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async remoteMethod(query) { |
||||
|
console.log(query, "sfsvsdv"); |
||||
|
if (query !== '') { |
||||
|
|
||||
|
const { msg, data } = await map.searchNearby(query); |
||||
|
this.resultList = [] |
||||
|
|
||||
|
if (msg == "success" && data.resultList && data.resultList.length > 0) { |
||||
|
|
||||
|
if (data.resultList && data.resultList.length > 0) { |
||||
|
this.resultList = data.resultList |
||||
|
console.log(this.resultList, "this.resultList"); |
||||
|
this.searchOptions = this.resultList.map(item => { |
||||
|
return { value: `${item.id}`, label: `${item.address + item.title}` }; |
||||
|
|
||||
|
}); |
||||
|
console.log(this.searchOptions, "this.searchOptions"); |
||||
|
} |
||||
|
} 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.formData.latitude = lonlat[1]; |
||||
|
this.formData.longitude = lonlat[0]; |
||||
|
this.searchValue = selPosition.address + selPosition.name |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
}, |
||||
|
computed: { |
||||
|
dataRule() { |
||||
|
return { |
||||
|
type: [ |
||||
|
{ required: true, message: '请选择类型', trigger: 'blur' } |
||||
|
], |
||||
|
name: [ |
||||
|
{ required: true, message: '请选择名称', trigger: 'blur' } |
||||
|
], |
||||
|
linkman: [ |
||||
|
{ required: true, message: '请输入联系人', trigger: 'blur' }, |
||||
|
|
||||
|
], |
||||
|
linkPhone: [ |
||||
|
{ required: true, message: '请填写电话', trigger: 'blur' }, |
||||
|
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' } |
||||
|
], |
||||
|
content: [ |
||||
|
{ required: true, message: '请输入阵地介绍', trigger: 'blur' } |
||||
|
], |
||||
|
|
||||
|
attrs: [ |
||||
|
{ required: true, message: '请选择封面图片', trigger: 'blur' } |
||||
|
], |
||||
|
address: [ |
||||
|
{ required: true, message: '请选择位置', trigger: 'blur' } |
||||
|
], |
||||
|
workTime: [ |
||||
|
{ required: true, message: '请输入办公时间', trigger: 'blur' } |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
props: { |
||||
|
|
||||
|
|
||||
|
|
||||
|
}, |
||||
|
destroyed () { |
||||
|
map = null |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "@/assets/scss/modules/visual/communityManageForm.scss"; |
||||
|
</style> |
||||
|
<style lang="scss" scoped> |
||||
|
.item_width_1 { |
||||
|
width: 634px; |
||||
|
|
||||
|
/deep/.tox .tox-dialog { |
||||
|
z-index: 20000; |
||||
|
} |
||||
|
} |
||||
|
.u-item-width-normal{ |
||||
|
width: 222px; |
||||
|
} |
||||
|
|
||||
|
.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,482 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
|
||||
|
<div class="dialog-h-content scroll-h"> |
||||
|
|
||||
|
<el-form ref="ref_form" :model="formData" :rules="dataRule" class="form"> |
||||
|
<!-- <el-col :span="12"> |
||||
|
<el-form-item label="所属组织" prop="agencyName" label-width="100px"> |
||||
|
<el-input v-model.trim="formData.agencyName" size="small" clearable placeholder="请输入组织名称" |
||||
|
:disabled="true" class="u-item-width-normal"></el-input> |
||||
|
</el-form-item> |
||||
|
--> |
||||
|
<el-form-item label="类型" prop="type" label-width="100px"> |
||||
|
<!-- <el-select :disabled="showdisabled" v-model="formData.type" placeholder="请选择" clearable class="u-item-width-normal"> |
||||
|
<el-option :disabled="showdisabled" class="u-item-width-normal" v-for="item in formData.optionstype" :key="item.value" :label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> --> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="名称" label-width="100px" prop="name"> |
||||
|
<!-- <el-input v-model.trim="formData.name" size="small" clearable placeholder="请输入名称" |
||||
|
:disabled="showdisabled" class="u-item-width-normal"></el-input> --> |
||||
|
<div>{{ formData.name }}</div> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="联系人" prop="linkman" label-width="100px"> |
||||
|
<div>{{ formData.linkman }}</div> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="联系电话" prop="linkPhone" label-width="100px"> |
||||
|
<div>{{ formData.linkPhone }}</div> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="办公时间" prop="workTime" label-width="100px"> |
||||
|
<div>{{ formData.workTime }}</div> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="图片" label-width="100px" prop="attrs"> |
||||
|
<template> |
||||
|
<img v-for="(item, index) in this.formData.attrs" :key="index" :src="item.url" style="width: 100px; height: 100px;"> |
||||
|
</template> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="阵地简介" prop="content" label-width="100px" style="display: block"> |
||||
|
<div>{{ formData.content }}</div> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="位置" prop="address" label-width="100px" style="display: block"> |
||||
|
<div style="width: 300px"> |
||||
|
<div>{{ formData.address }}</div> |
||||
|
<div id="app_activity" class="div_map"></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" |
||||
|
@click="handleComfirm">确 |
||||
|
定</el-button> |
||||
|
|
||||
|
</div> --> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapGetters } from 'vuex' |
||||
|
// import { Loading } from 'element-ui' // 引入Loading服务 |
||||
|
import { requestPost,requestGet } from '@/js/dai/request' |
||||
|
import Tinymce from '@c/tinymce2/index.vue' |
||||
|
import daiMap from "@/utils/dai-map"; |
||||
|
import util from '@js/util.js'; |
||||
|
// import UploadImage from './upload-image.vue' |
||||
|
import UploadImage from '@/views/modules/plugins/rent/upload-image.vue' |
||||
|
|
||||
|
var map |
||||
|
var search |
||||
|
var markers |
||||
|
var infoWindowList |
||||
|
var geocoder // 新建一个正逆地址解析类 |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
formData: |
||||
|
{ |
||||
|
agencyName:"", |
||||
|
agencyId: "", |
||||
|
linkman: "", |
||||
|
linkPhone: "", |
||||
|
content: "", |
||||
|
workTime: "", |
||||
|
attrs: [], |
||||
|
type: "", |
||||
|
name: "", |
||||
|
optionstype: [ |
||||
|
{ value: 0, label: "实践站" }, |
||||
|
{ value: 1, label: "实践点" }, |
||||
|
{ value: 2, label: "其它" }, |
||||
|
|
||||
|
], |
||||
|
address: "",//地址 |
||||
|
longitude: this.$store.state.user.longitude, //经度 |
||||
|
latitude: this.$store.state.user.latitude,//纬度 |
||||
|
}, |
||||
|
showdisabled:false, |
||||
|
uploadUrl: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2', |
||||
|
customerId: localStorage.getItem('customerId'), |
||||
|
|
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
components: { Tinymce, UploadImage }, |
||||
|
mounted() { |
||||
|
this.formData.agencyId=this.$store.state.user.agencyId |
||||
|
this.formData.agencyName=this.$store.state.user.agencyName |
||||
|
let { latitude, longitude } = this.$store.state.user; |
||||
|
if (!latitude || latitude == "" || latitude == "0") { |
||||
|
latitude = 39.9088810666821; |
||||
|
longitude = 116.39743841556731; |
||||
|
} |
||||
|
this.formData.latitude = latitude; |
||||
|
this.formData.longitude = longitude; |
||||
|
this.activityType() |
||||
|
this.listServerOrg() |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
//父组件传的 |
||||
|
async initForm(type, unitId) { |
||||
|
this.getTableDetail(unitId) |
||||
|
|
||||
|
}, |
||||
|
//获取详情 |
||||
|
getTableDetail(id) { |
||||
|
console.log(id,"dskljfksdljf"); |
||||
|
let url = `/voluntary/position/edit/${id}`; |
||||
|
console.log(url,"url"); |
||||
|
requestGet(url).then((res) => { |
||||
|
console.log(res); |
||||
|
if (res.code == 0) { |
||||
|
this.formData = res.data |
||||
|
this.fileList=[{fileUrl:res.data.attrs[0].url}] |
||||
|
console.log(this.formData,"this.formData"); |
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
//添加标签 |
||||
|
addDomain() { |
||||
|
if (this.formData.sponsors.length < 4) { |
||||
|
console.log("jshdfdsjdfkl"); |
||||
|
console.log(this.formData.sponsors,this.tableDate,); |
||||
|
this.formData.sponsors.push(this.tableDate); |
||||
|
console.log(this.formData.sponsors,this.tableDate,); |
||||
|
}else{ |
||||
|
this.$message.error("最多添加4个标签"); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
//删除动态 |
||||
|
removeDomain(item) { |
||||
|
console.log(item); |
||||
|
var index = this.formData.sponsors.indexOf(item) |
||||
|
if (index !== -1) { |
||||
|
this.formData.sponsors.splice(index, 1) |
||||
|
this.tableDate = {} |
||||
|
} |
||||
|
}, |
||||
|
validateContent() { |
||||
|
// 使用正则表达式去除HTML标签后检查内容 |
||||
|
const textContent = this.stripHtml(this.formData.sumUp); |
||||
|
if (textContent.trim() === '') { |
||||
|
this.formData.sumUp = null; |
||||
|
} |
||||
|
}, |
||||
|
stripHtml(html) { |
||||
|
const div = document.createElement('div'); |
||||
|
div.innerHTML = html; |
||||
|
return div.textContent || div.innerText || ''; |
||||
|
}, |
||||
|
async activityType() { |
||||
|
this.$nextTick(() => { |
||||
|
if (!map) { |
||||
|
this.initMap(this.formData.latitude, this.formData.longitude); |
||||
|
console.log("map", map,this.formData.latitude, this.formData.longitude) |
||||
|
} else { |
||||
|
map.setCenter(this.formData.latitude, this.formData.longitude); |
||||
|
map.setMarker(this.formData.latitude, this.formData.longitude); |
||||
|
console.log("mapmapmap", map) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
onChangeFileList(e) { |
||||
|
console.log(e, 'sssssb'); |
||||
|
this.fileList = e.length > 0 ? e.map(item => ({ |
||||
|
fileType: '0', |
||||
|
type:'image', |
||||
|
fileType: '0', |
||||
|
name:item.response.data.fileName, |
||||
|
fileUrl: item.response.data.url, |
||||
|
format: item.response.data.fileName.split('.').pop(), |
||||
|
url: item.response.data.url |
||||
|
})) : []; // 当e为空时清空fileList |
||||
|
if (e.length > 0) { |
||||
|
console.log(this.fileList,"this.fileList"); |
||||
|
this.formData.attrs=this.fileList; |
||||
|
console.log(this.formData.attrs,"this.fileList"); |
||||
|
|
||||
|
} else { |
||||
|
this.formData.coverPic = ''; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
removedImg() { |
||||
|
this.formData.coverPic = '' |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
onChangeImgs(e, rowIndex = 0) { |
||||
|
console.log('onChangeFileList', e) |
||||
|
if (e.length > 0) { |
||||
|
this.activityImgs = [] |
||||
|
e.forEach(item => { |
||||
|
let ob = { |
||||
|
fileType: '0', |
||||
|
fileUrl: item.response.data.url |
||||
|
} |
||||
|
this.activityImgs.push(ob) |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
async handleComfirm() { |
||||
|
console.log(this.formData," this.formData"); |
||||
|
// if (this.formData.type!==1&&!this.formData.type!=2&&!this.formData.type!=0) { |
||||
|
// this.$message.error('请选择类型'); |
||||
|
// return; |
||||
|
// } |
||||
|
|
||||
|
|
||||
|
if (!this.formData.linkPhone) { |
||||
|
this.$message.error('请输入电话'); |
||||
|
return; |
||||
|
} |
||||
|
if (!this.formData.linkman) { |
||||
|
this.$message.error('请输入姓名'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (!this.formData.address) { |
||||
|
this.$message.error('请选择位置'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if (!this.formData.workTime) { |
||||
|
this.$message.error('请输入办公时间'); |
||||
|
return; |
||||
|
} |
||||
|
console.log(this.formData,"this.formData"); |
||||
|
this.addActivity() |
||||
|
}, |
||||
|
//增加 |
||||
|
async addActivity() { |
||||
|
let url = '/voluntary/position/saveOrUpdate' |
||||
|
console.log(); |
||||
|
|
||||
|
const { data, code, msg } = await requestPost(url, this.formData) |
||||
|
if (code === 0) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '操作成功' |
||||
|
}) |
||||
|
// this.resetData() |
||||
|
this.$emit('showAddClose') |
||||
|
|
||||
|
} else { |
||||
|
this.$message.error(msg) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
}, |
||||
|
|
||||
|
handleCancle() { |
||||
|
console.log("sdlkfjklsdf "); |
||||
|
this.$emit('showAddClose') |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
// 地图初始化函数,本例取名为init,开发者可根据实际情况定义 |
||||
|
initMap(latitude, longitude) { |
||||
|
console.log(latitude, longitude,"564564568"); |
||||
|
map = new daiMap( |
||||
|
document.getElementById("app_activity"), |
||||
|
{ latitude, longitude }, |
||||
|
{ |
||||
|
zoom: 16.2, // 设置地图缩放级别 |
||||
|
pitch: 43.5, // 设置俯仰角 |
||||
|
rotation: 45, // 设置地图旋转角度 |
||||
|
} |
||||
|
); |
||||
|
|
||||
|
// 监听地图平移结束 |
||||
|
/* map.on("dragend", (e) => { |
||||
|
this.handleMoveCenter(e); |
||||
|
});*/ |
||||
|
map.on("click", (e) => { |
||||
|
this.handleMoveCenter(e); |
||||
|
}); |
||||
|
|
||||
|
map.setCenter(latitude, longitude); |
||||
|
map.setMarker(latitude, longitude); |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
|
||||
|
async handleMoveCenter(e) { |
||||
|
//修改地图中心点 |
||||
|
// const { lat, lng } = map.getCenter(); |
||||
|
const { lat, lng } = e.latLng; |
||||
|
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 |
||||
|
console.log(this.formData.address," this.formData.address "); |
||||
|
|
||||
|
this.searchValue = data.address |
||||
|
this.searchOptions = [] |
||||
|
// console.log('data,this.searchValue ', this.searchValue) |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
async remoteMethod(query) { |
||||
|
console.log(query, "sfsvsdv"); |
||||
|
if (query !== '') { |
||||
|
|
||||
|
const { msg, data } = await map.searchNearby(query); |
||||
|
this.resultList = [] |
||||
|
|
||||
|
if (msg == "success" && data.resultList && data.resultList.length > 0) { |
||||
|
|
||||
|
if (data.resultList && data.resultList.length > 0) { |
||||
|
this.resultList = data.resultList |
||||
|
console.log(this.resultList, "this.resultList"); |
||||
|
this.searchOptions = this.resultList.map(item => { |
||||
|
return { value: `${item.id}`, label: `${item.address + item.title}` }; |
||||
|
|
||||
|
}); |
||||
|
console.log(this.searchOptions, "this.searchOptions"); |
||||
|
} |
||||
|
} 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.formData.latitude = lonlat[1]; |
||||
|
this.formData.longitude = lonlat[0]; |
||||
|
this.searchValue = selPosition.address + selPosition.name |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
}, |
||||
|
computed: { |
||||
|
dataRule() { |
||||
|
return { |
||||
|
type: [ |
||||
|
{ required: true, message: '请选择类型', trigger: 'blur' } |
||||
|
], |
||||
|
name: [ |
||||
|
{ required: true, message: '请选择名称', trigger: 'blur' } |
||||
|
], |
||||
|
linkman: [ |
||||
|
{ required: true, message: '请输入联系人', trigger: 'blur' }, |
||||
|
|
||||
|
], |
||||
|
linkPhone: [ |
||||
|
{ required: true, message: '请填写电话', trigger: 'blur' }, |
||||
|
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' } |
||||
|
], |
||||
|
content: [ |
||||
|
{ required: true, message: '请输入阵地介绍', trigger: 'blur' } |
||||
|
], |
||||
|
|
||||
|
attrs: [ |
||||
|
{ required: true, message: '请选择封面图片', trigger: 'blur' } |
||||
|
], |
||||
|
address: [ |
||||
|
{ required: true, message: '请选择位置', trigger: 'blur' } |
||||
|
], |
||||
|
workTime: [ |
||||
|
{ required: true, message: '请输入办公时间', trigger: 'blur' } |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
props: { |
||||
|
|
||||
|
|
||||
|
|
||||
|
}, |
||||
|
destroyed () { |
||||
|
map = null |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "@/assets/scss/modules/visual/communityManageForm.scss"; |
||||
|
</style> |
||||
|
<style lang="scss" scoped> |
||||
|
.item_width_1 { |
||||
|
width: 634px; |
||||
|
|
||||
|
/deep/.tox .tox-dialog { |
||||
|
z-index: 20000; |
||||
|
} |
||||
|
} |
||||
|
.u-item-width-normal{ |
||||
|
width: 222px; |
||||
|
} |
||||
|
|
||||
|
.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> |
Loading…
Reference in new issue