是小王呀\24601
1 year ago
4 changed files with 692 additions and 582 deletions
@ -0,0 +1,492 @@ |
|||
<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">typeName |
|||
<div>{{ formData.typeName }}</div> |
|||
</el-option> |
|||
</el-select> --> |
|||
<div>{{ formData.positionName }}</div> |
|||
</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="linkPhone" label-width="100px"> |
|||
<div>{{ formData.linkPhone }}</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="linkPhone" label-width="100px"> |
|||
<div>{{ formData.tags }}</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="workTime" label-width="100px"> |
|||
<div>{{ formData.workTime }}</div> |
|||
</el-form-item> |
|||
<el-form-item label="备注" prop="workTime" label-width="100px"> |
|||
<div>{{ formData.remark }}</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/sphereLife/detail/${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}] |
|||
this.searchValue=res.data.address |
|||
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