You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
590 lines
20 KiB
590 lines
20 KiB
11 months ago
|
<template>
|
||
|
<div>
|
||
|
|
||
|
<div class="dialog-h-content scroll-h">
|
||
|
|
||
|
<el-form ref="ref_form" :inline="true" :model="formData" :rules="dataRule" class="form">
|
||
|
<el-row>
|
||
|
<el-col :span="12">
|
||
|
<el-form-item label="车牌号码" label-width="100px" prop="name">
|
||
|
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
<el-col :span="12">
|
||
|
<el-form-item label="车主姓名" label-width="100px" prop="name">
|
||
|
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
<el-col :span="12">
|
||
|
<el-form-item label="车主电话" label-width="100px" prop="name">
|
||
|
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
<el-col :span="12">
|
||
|
<el-form-item label="车主身份证" label-width="100px" prop="name">
|
||
|
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
<el-col :span="12">
|
||
|
<el-form-item label="车辆品牌" label-width="100px" prop="name">
|
||
|
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
<el-col :span="12">
|
||
|
<el-form-item label="设备名称" prop="linkPhone" label-width="100px">
|
||
|
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
<el-col :span="12">
|
||
|
<el-form-item label="车辆颜色" prop="linkPhone" label-width="100px">
|
||
|
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
<el-col :span="12">
|
||
|
<el-form-item label="核载人数" prop="linkPhone" label-width="100px">
|
||
|
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
<el-col :span="24">
|
||
|
<el-form-item label="购置日期" prop="linkPhone" label-width="100px">
|
||
|
|
||
|
<!-- <span style="margin: 0 10px">至</span><el-date-picker
|
||
|
v-model="formData.shelveOnTimeTo" type="datetime" placeholder="结束时间"
|
||
|
format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
|
||
|
</el-date-picker> -->
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
<el-col :span="24">
|
||
|
<el-form-item label="备注" label-width="100px" prop="name">
|
||
|
|
||
|
</el-form-item>
|
||
|
</el-col>
|
||
|
</el-row></el-form>
|
||
|
<!-- <div class="div_btn">
|
||
|
<el-button size="small" @click="handleCancle">取 消</el-button>
|
||
|
<el-button size="small" type="primary" @click="handleComfirm">确
|
||
|
定</el-button>
|
||
|
</div> -->
|
||
|
</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 {
|
||
|
|
||
|
showdisabled:false,
|
||
|
searchOptions:[],
|
||
|
fileList:[],
|
||
|
searchValue:"",
|
||
|
Organizationaltype:[
|
||
|
{ label: "社区", value: 1 },
|
||
|
{ label: "企业", value: 2 },
|
||
|
{ label: "学校", value: 3 },
|
||
|
],
|
||
|
SiteData:[],
|
||
|
tableDate:{},
|
||
|
formData:
|
||
|
{
|
||
|
attrs:[],
|
||
|
positionId:"",//挂靠阵地
|
||
|
address: "",//地址
|
||
|
longitude: this.$store.state.user.longitude, //经度
|
||
|
latitude: this.$store.state.user.latitude,//纬度
|
||
|
},
|
||
|
uploadUrl: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadqrcodeV2',
|
||
|
customerId: localStorage.getItem('customerId'),
|
||
|
|
||
|
}
|
||
|
|
||
|
},
|
||
|
|
||
|
components: { Tinymce, UploadImage },
|
||
|
mounted() {
|
||
|
this.getSiteTableData()
|
||
|
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()
|
||
|
},
|
||
|
|
||
|
methods: {
|
||
|
//获取阵地列表
|
||
|
async getSiteTableData() {
|
||
|
// const url = "http://yapi.elinkservice.cn/mock/245/gov/project/project/project-list";
|
||
|
const url = "/voluntary/position/list";
|
||
|
let params = {
|
||
|
name: "",
|
||
|
type: "",
|
||
|
pageNo: "",
|
||
|
pageSize: ""
|
||
|
}
|
||
|
const { data, code, msg } = await requestGet(url, params);
|
||
|
if (code === 0) {
|
||
|
console.log("列表请求成功!!!!!!!!!!!!!!");
|
||
|
// this.total = data.total || 0;
|
||
|
this.SiteData = data.list
|
||
|
} else {
|
||
|
}
|
||
|
},
|
||
|
//父组件传的
|
||
|
async initForm(type, unitId) {
|
||
|
console.log(type, unitId,"i就理解哦i");
|
||
|
if(type=="info"){
|
||
|
this.showdisabled=true
|
||
|
this.getTableDetail(unitId)
|
||
|
}
|
||
|
if (type == "edit") {
|
||
|
this.getTableDetail(unitId)
|
||
|
}
|
||
|
|
||
|
},
|
||
|
//获取详情
|
||
|
getTableDetail(id) {
|
||
|
console.log(id,"dskljfksdljf");
|
||
|
let url = `/voluntary/positionVenues/edit/${id}`;
|
||
|
requestGet(url).then((res) => {
|
||
|
console.log(res);
|
||
|
if (res.code == 0) {
|
||
|
this.formData = res.data
|
||
|
this.searchValue= res.data.address
|
||
|
this.fileList=[{fileUrl:res.data.attrs[0].url}]
|
||
|
} else {
|
||
|
this.$message.error(res.msg)
|
||
|
}
|
||
|
|
||
|
})
|
||
|
|
||
|
|
||
|
},
|
||
|
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)
|
||
|
}
|
||
|
})
|
||
|
},
|
||
|
|
||
|
handleOnlineRegistration(value) {
|
||
|
//
|
||
|
if (value) {
|
||
|
this.online = true;
|
||
|
this.formData.online = 1;
|
||
|
} else {
|
||
|
this.online = false;
|
||
|
this.formData.cutOffTime = ''
|
||
|
this.formData.online = 0;
|
||
|
}
|
||
|
},
|
||
|
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 = ''
|
||
|
},
|
||
|
onChangeFileList1(e) {
|
||
|
console.log(e, 'sssssb');
|
||
|
this.fileList1 = e.length > 0 ? e.map(item => ({
|
||
|
fileType: '0',
|
||
|
fileUrl: item.response.data.url
|
||
|
})) : []; // 当e为空时清空fileList
|
||
|
if (e.length > 0) {
|
||
|
this.formData.brandImg = e[0].response.data.url;
|
||
|
} else {
|
||
|
this.formData.brandImg = '';
|
||
|
}
|
||
|
},
|
||
|
|
||
|
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)
|
||
|
})
|
||
|
}
|
||
|
},
|
||
|
|
||
|
// onChangeImgs(e) {
|
||
|
// this.activityImgs = [];
|
||
|
// if (e.length > 0) {
|
||
|
// e.forEach(item => {
|
||
|
// let ob = {
|
||
|
// fileType: '0',
|
||
|
// fileUrl: item.response.data.url
|
||
|
// };
|
||
|
// this.activityImgs.push(ob);
|
||
|
// });
|
||
|
// console.log('this.activityImgs',this.activityImgs)
|
||
|
// }
|
||
|
// },
|
||
|
|
||
|
handleChange(value) {},
|
||
|
handleTimeChange(time) {
|
||
|
if (time) {
|
||
|
const startTimeArray = util.dateFormatter(time[0], 'time').split('-')
|
||
|
console.log(startTimeArray);
|
||
|
const endTimeArray = util.dateFormatter(time[1], 'time').split('-')
|
||
|
console.log(endTimeArray);
|
||
|
this.formData.startTime = startTimeArray[0] + '-' + startTimeArray[1] + '-' + startTimeArray[2]
|
||
|
this.formData.endTime = endTimeArray[0] + '-' + endTimeArray[1] + '-' + endTimeArray[2]
|
||
|
// this.startTimeShow = startTimeArray[0] + '年' + startTimeArray[1] + '月' + startTimeArray[2] + '日'
|
||
|
// this.endTimeShow = endTimeArray[0] + '年' + endTimeArray[1] + '月' + endTimeArray[2] + '日'
|
||
|
} else {
|
||
|
this.formData.startTime = ''
|
||
|
this.formData.endTime = ''
|
||
|
}
|
||
|
|
||
|
},
|
||
|
|
||
|
|
||
|
async getDemandOptions() {
|
||
|
this.$http
|
||
|
.post("/actual/base/serviceitem/listAllCategory")
|
||
|
.then(({ data: res }) => {
|
||
|
if (res.code !== 0) {
|
||
|
return this.$message.error(res.msg);
|
||
|
} else {
|
||
|
console.log(res.data);
|
||
|
this.demandOptions = this.getFlagData(
|
||
|
this.getTreeData(res.data),
|
||
|
"usableFlag"
|
||
|
);
|
||
|
}
|
||
|
})
|
||
|
.catch(() => {
|
||
|
return this.$message.error("网络错误");
|
||
|
});
|
||
|
},
|
||
|
getFlagData(data, flag) {
|
||
|
if (!Array.isArray(data)) return [];
|
||
|
let arr1 = data.filter((item) => item[flag]);
|
||
|
let arr2 = arr1.map((item) => {
|
||
|
if (item.childCateList)
|
||
|
return { ...item, childCateList: this.getFlagData(item.childCateList, flag) };
|
||
|
else return item;
|
||
|
});
|
||
|
return arr2;
|
||
|
},
|
||
|
getTreeData(data) {
|
||
|
if (!Array.isArray(data)) return [];
|
||
|
let arr = data.map((item) => {
|
||
|
let _item = {};
|
||
|
if (item.childCateList) {
|
||
|
if (item.childCateList.length === 0)
|
||
|
_item = { ...item, childCateList: undefined };
|
||
|
else _item = { ...item, childCateList: this.getTreeData(item.childCateList) };
|
||
|
} else {
|
||
|
_item = { ...item };
|
||
|
}
|
||
|
return _item;
|
||
|
});
|
||
|
return arr;
|
||
|
},
|
||
|
async loadGrid() {
|
||
|
const url = "/gov/org/customergrid/gridoption"
|
||
|
|
||
|
let params = {
|
||
|
agencyId: this.agencyId
|
||
|
}
|
||
|
|
||
|
const { data, code, msg } = await requestPost(url, params)
|
||
|
|
||
|
if (code === 0) {
|
||
|
this.gridList = data
|
||
|
|
||
|
} else {
|
||
|
this.$message.error(msg)
|
||
|
}
|
||
|
|
||
|
},
|
||
|
async handleComfirm() {
|
||
|
console.log(this.formData," this.formData");
|
||
|
|
||
|
if (!this.formData.address) {
|
||
|
this.$message.error('请输入具体位置');
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
if (!this.formData.attrs ) {
|
||
|
this.$message.error('请上传图片');
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
if (!this.formData.linkPhone) {
|
||
|
this.$message.error('请填写联系电话');
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
if (!this.formData.positionId) {
|
||
|
this.$message.error('请选择挂靠阵地');
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
|
||
|
this.addActivity()
|
||
|
},
|
||
|
//增加
|
||
|
async addActivity() {
|
||
|
let url = '/voluntary/positionVenues/saveOrUpdate'
|
||
|
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.formData.address=selPosition.address + selPosition.nam
|
||
|
this.searchValue = selPosition.address + selPosition.name
|
||
|
console.log(this.formData.address," this.formData.address ");
|
||
|
|
||
|
},
|
||
|
|
||
|
|
||
|
|
||
|
},
|
||
|
computed: {
|
||
|
dataRule() {
|
||
|
return {
|
||
|
positionId: [
|
||
|
{ required: true, message: '请选择挂靠组织', trigger: 'blur' }
|
||
|
],
|
||
|
name: [
|
||
|
{ required: true, message: '请填写名称', trigger: 'blur' }
|
||
|
],
|
||
|
linkPhone: [
|
||
|
{ required: true, message: '电话不能为空不能为空', trigger: 'blur' },
|
||
|
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
||
|
],
|
||
|
|
||
|
fileList: [
|
||
|
{ required: true, message: '请选择封面图片', trigger: 'blur' }
|
||
|
],
|
||
|
address: [
|
||
|
{ 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;
|
||
|
}
|
||
|
}
|
||
|
.div_btn {
|
||
|
height: 50px;
|
||
|
display: flex;
|
||
|
justify-content: center;
|
||
|
align-items: center;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
</style>
|