是小王呀\24601
12 months ago
8 changed files with 3016 additions and 133 deletions
@ -0,0 +1,616 @@ |
|||
<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="所属区域" prop="typeName" label-width="100px"> |
|||
<el-select v-model="formData.positionId" placeholder="请选择" clearable> |
|||
<el-option v-for="item in SiteData" :key="item.id" :label="item.name" :value="item.id"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> --> |
|||
<el-col :span="12"> |
|||
<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> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<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> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<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> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<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> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<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> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="设备名称" prop="linkPhone" label-width="100px"> |
|||
<el-select class="u-item-width-normal" v-model="formData.classKey" placeholder="请选择" |
|||
clearable> |
|||
<el-option v-for="item in optionsStatus" :key="item.value" :label="item.lable" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="车辆颜色" prop="linkPhone" label-width="100px"> |
|||
<el-select class="u-item-width-normal" v-model="formData.classKey" placeholder="请选择" |
|||
clearable> |
|||
<el-option v-for="item in optionsStatus" :key="item.value" :label="item.lable" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label="核载人数" prop="linkPhone" label-width="100px"> |
|||
<el-input-number v-model="num" @change="handleChange" :min="1" :max="10" |
|||
label="描述文字"></el-input-number> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label="购置日期" prop="linkPhone" label-width="100px"> |
|||
<el-date-picker v-model="formData.shelveOnTimeFrom" type="datetime" placeholder="开始时间" |
|||
format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"> |
|||
</el-date-picker> |
|||
<!-- <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-input type="textarea" style="width: 580px" v-model.trim="formData.name" size="small" clearable |
|||
placeholder="请输入活动名称" :disabled="showdisabled" class="u-item-width-normal"></el-input> |
|||
</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> |
|||
@ -0,0 +1,776 @@ |
|||
<template> |
|||
<div> |
|||
<div class="g-main" style="flex-direction: column"> |
|||
<div class="m-search" style="flex-direction: column"> |
|||
<section :class="boxHeight ? 'm-form-box-height' : 'm-form-box-height-auto'"> |
|||
<el-form :inline="true" class="communityHeight" ref="ref_searchform" :label-width="'100px'"> |
|||
<el-form-item label="所属组织" prop="ownerName"> |
|||
<el-cascader class="u-item-width-normal" ref="myCascader" clearable size="small" |
|||
v-model.trim="formData.redeemOrgId" :options="orgOptions" :props="orgOptionProps" |
|||
@change="handleChangeAgency"></el-cascader> |
|||
</el-form-item> |
|||
<el-form-item label="车辆类型" prop="ownerPhone"> |
|||
<el-select class="u-item-width-normal" v-model="formData.classKey" placeholder="请选择" clearable> |
|||
<el-option v-for="item in optionsStatus" :key="item.value" :label="item.lable" :value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="车牌号码" prop="ownerPhone"> |
|||
<el-input v-model.trim="ownerPhone" class="u-item-width-normal" size="small" clearable |
|||
placeholder="请输入联系电话"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="车牌品牌" prop="ownerPhone"> |
|||
<el-input v-model.trim="ownerPhone" class="u-item-width-normal" size="small" clearable |
|||
placeholder="请输入联系电话"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="车主姓名" prop="ownerPhone"> |
|||
<el-input v-model.trim="ownerPhone" class="u-item-width-normal" size="small" clearable |
|||
placeholder="请输入联系电话"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="车主电话" prop="ownerPhone"> |
|||
<el-input v-model.trim="ownerPhone" class="u-item-width-normal" size="small" clearable |
|||
placeholder="请输入联系电话"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="车主证件号" prop="ownerPhone"> |
|||
<el-input v-model.trim="ownerPhone" class="u-item-width-normal" size="small" clearable |
|||
placeholder="请输入联系电话"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="录入时间" prop="ownerPhone"> |
|||
<el-date-picker class="u-item-width-normal" v-model="formData.shelveOnTimeFrom" type="datetime" |
|||
placeholder="开始时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"> |
|||
</el-date-picker><span style="margin: 0 10px">至</span><el-date-picker v-model="formData.shelveOnTimeTo" |
|||
class="u-item-width-normal" 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-form> |
|||
</section> |
|||
<el-row> |
|||
<el-col :span="24" align="right"> |
|||
<el-button style="margin-left: 10px" size="small" type="primary" @click="handleSearch">查询</el-button> |
|||
<el-button size="small" class="diy-button--white" @click="resetSearch">重置</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
<div class="m-table"> |
|||
<div class="u-table-btn2"> |
|||
<div class="u-table-btn2-left"> |
|||
<el-button style="" class="diy-button--blue" icon="el-icon-plus" size="small" |
|||
@click="handleAdd">添加车辆</el-button> |
|||
<!-- <el-button style="margin-left:10px" class="diy-button--white" size="small" |
|||
@click="handleExport">导出</el-button> --> |
|||
<!-- <el-button style="margin-left:10px" class="diy-button--white" size="small" |
|||
@click="deleteBatch">批量删除</el-button> --> |
|||
<el-button @click="handleExport" class="diy-button--white" size="small">导出</el-button> |
|||
<el-button class="diy-button--white" size="small"> |
|||
<el-upload :headers="$getElUploadHeaders()" ref="upload" class="upload-btn" action="uploadUlr" :limit="1" |
|||
:accept="'.xls,.xlsx'" :with-credentials="true" :show-file-list="false" :auto-upload="true" |
|||
:on-progress="handleProgress" :on-success="handleExcelSuccess" :before-upload="beforeExcelUpload" |
|||
:http-request="uploadHttpRequest"> |
|||
上传导入 |
|||
</el-upload> |
|||
</el-button> |
|||
<el-button style="margin-left: 10px" size="small" class="diy-button--add" type="parimary" |
|||
@click="deleteBatch">批量删除</el-button> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
|
|||
<div class="m-table-item"> |
|||
<el-table :data="tableData" border :show-overflow-tooltip="true" style="width: 100%"> |
|||
<el-table-column width="55"> |
|||
</el-table-column> |
|||
<el-table-column fixed="left" width="70" type="index" label="序号" header-align="center" align="center"> |
|||
</el-table-column> |
|||
<el-table-column prop="buildingName" fixed="left" label="所属组织" header-align="left" align="left" |
|||
min-width="180"> |
|||
<!-- <template slot-scope="scope"> |
|||
<a class="name-a" @click="handleToNextLevel(scope.row)"> |
|||
{{ scope.row.buildingName }} |
|||
</a> |
|||
</template> --> |
|||
</el-table-column> |
|||
<el-table-column prop="neighborHoodName" label="车牌号码" header-align="left" align="left" min-width="160"> |
|||
</el-table-column> |
|||
<el-table-column prop="buildingType" label="车辆类型" header-align="left" align="left" width="90"> |
|||
</el-table-column> |
|||
<el-table-column prop="buildingLeaderName" label="车辆颜色" header-align="left" align="left" min-width="90"> |
|||
</el-table-column> |
|||
<el-table-column prop="buildingLeaderMobile" label="核载人数" header-align="left" align="left" min-width="110"> |
|||
</el-table-column> |
|||
<el-table-column prop="totalUnitNum" header-align="left" align="left" label="车辆品牌"> |
|||
</el-table-column> |
|||
<el-table-column prop="totalFloorNum" header-align="left" align="left" label="姓购置日期"> |
|||
</el-table-column> |
|||
<el-table-column prop="realTotalHouseNum" header-align="left" align="left" width="90" label="车主姓名"> |
|||
</el-table-column> |
|||
<el-table-column prop="realTotalHouseNum" header-align="left" align="left" width="90" label="车主电话"> |
|||
</el-table-column> |
|||
<el-table-column prop="realTotalHouseNum" header-align="left" align="left" width="90" label="车主证件号"> |
|||
</el-table-column> |
|||
<el-table-column prop="realTotalHouseNum" header-align="left" align="left" width="90" label="录入时间"> |
|||
</el-table-column> |
|||
<el-table-column label="操作" fixed="right" width="220" header-align="center" align="center" class="operate"> |
|||
<template slot-scope="scope"> |
|||
|
|||
<el-button type="text" class="div-table-button--blue" size="small" |
|||
@click="handleDetail(scope.row)">查看</el-button> |
|||
<el-button type="text" class="div-table-button--blue" size="small" |
|||
@click="handleEdit(scope.row)">编辑</el-button> |
|||
|
|||
<el-button type="text" class="div-table-button--blue" size="small" |
|||
@click="handleDel(scope.row)">删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
<!-- 新增/修改弹出框 --> |
|||
<el-dialog :visible.sync="showAdd" :close-on-click-modal="false" :close-on-press-escape="false" |
|||
:title="formTitle" width="750px" top="10vh" class="dialog-h" @closed="showAddClose"> |
|||
<add ref="ref_form" v-if="showAdd" @showAddClose="showAddClose" /> |
|||
</el-dialog> |
|||
<!--查看弹出框 --> |
|||
<el-dialog :visible.sync="showinfo" :close-on-click-modal="false" :close-on-press-escape="false" |
|||
:title="formTitle" width="750px" top="10vh" class="dialog-h" @closed="showAddClose"> |
|||
<info ref="ref_form" v-if="showinfo" @showAddClose="showAddClose" /> |
|||
</el-dialog> |
|||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNo" |
|||
:page-sizes="[20, 50, 100, 200]" :page-size="parseInt(pageSize)" layout="sizes, prev, pager, next, total" |
|||
:total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</template> |
|||
<script> |
|||
import CDialog from "@c/CDialog"; |
|||
import add from "./add.vue"; |
|||
// import info from "./info.vue"; |
|||
import info from "./info.vue" |
|||
// import buildTable from "./buildTable"; |
|||
// import roomTable from "./roomTable"; |
|||
import { requestPost, requestGet } from "@/js/dai/request"; |
|||
import { mapGetters } from "vuex"; |
|||
import { Loading } from "element-ui"; // 引入Loading服务 |
|||
import nextTick from "dai-js/tools/nextTick"; |
|||
import debounce from "lodash/debounce"; |
|||
let loading; // 加载动画 |
|||
export default { |
|||
data() { |
|||
return { |
|||
//车辆类型 |
|||
optionsStatus:[ |
|||
{ |
|||
value: '1', |
|||
label: '自有' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '租赁' |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: '挂靠' |
|||
}, |
|||
{ |
|||
value: '4', |
|||
label: '其他' |
|||
} |
|||
], |
|||
formData:{ |
|||
redeemOrgId:"", |
|||
|
|||
}, |
|||
showinfo:false, |
|||
pageSize:20, |
|||
pageNo:1, |
|||
total:0, |
|||
ownerName:"", |
|||
ownerPhone:"", |
|||
buildingName:"", |
|||
neighborHoodName:"", |
|||
buildingType:"", |
|||
buildingLeaderName:"", |
|||
buildingLeaderMobile:"", |
|||
totalUnitNum:"", |
|||
totalFloorNum:"", |
|||
realTotalHouseNum:"", |
|||
boxHeight: true, |
|||
showAdd:false, |
|||
formTitle:"", |
|||
tableData: [ |
|||
{ |
|||
buildingName: '区划A', |
|||
neighborHoodName: '小区1', |
|||
buildingType: '住宅', |
|||
buildingLeaderName: '张三', |
|||
buildingLeaderMobile: '13812345678', |
|||
totalUnitNum: '单位A', |
|||
totalFloorNum: '5层', |
|||
realTotalHouseNum: '123456', |
|||
}, |
|||
{ |
|||
buildingName: '区划B', |
|||
neighborHoodName: '小区2', |
|||
buildingType: '商用', |
|||
buildingLeaderName: '李四', |
|||
buildingLeaderMobile: '13898765432', |
|||
totalUnitNum: '单位B', |
|||
totalFloorNum: '8层', |
|||
realTotalHouseNum: '654321', |
|||
}, |
|||
{ |
|||
buildingName: '区划C', |
|||
neighborHoodName: '小区3', |
|||
buildingType: '住宅', |
|||
buildingLeaderName: '王五', |
|||
buildingLeaderMobile: '13812349876', |
|||
totalUnitNum: '单位C', |
|||
totalFloorNum: '3层', |
|||
realTotalHouseNum: '123789', |
|||
}, |
|||
{ |
|||
buildingName: '区划D', |
|||
neighborHoodName: '小区4', |
|||
buildingType: '工业', |
|||
buildingLeaderName: '赵六', |
|||
buildingLeaderMobile: '13867891234', |
|||
totalUnitNum: '单位D', |
|||
totalFloorNum: '12层', |
|||
realTotalHouseNum: '789123', |
|||
}, |
|||
{ |
|||
buildingName: '区划E', |
|||
neighborHoodName: '小区5', |
|||
buildingType: '住宅', |
|||
buildingLeaderName: '钱七', |
|||
buildingLeaderMobile: '13854321098', |
|||
totalUnitNum: '单位E', |
|||
totalFloorNum: '6层', |
|||
realTotalHouseNum: '987654', |
|||
} |
|||
],//表格数据 |
|||
orgOptions:[],//所属组织 |
|||
orgOptionProps: { |
|||
value: 'agencyId', |
|||
label: 'agencyName', |
|||
children: 'subAgencyList', |
|||
emitPath: false, |
|||
multiple: false, |
|||
checkStrictly: true |
|||
},//所属组织配置 |
|||
|
|||
}; |
|||
}, |
|||
components: { |
|||
add,info |
|||
}, |
|||
async mounted() { |
|||
this.getOrgTreeList() |
|||
await this.loadOrgData(); |
|||
}, |
|||
computed: { |
|||
rowHeight() { |
|||
return this.$store.state.inIframe |
|||
? this.clientHeight - 140 + this.iframeHeight + "px" |
|||
: this.clientHeight - 140 + "px"; |
|||
}, |
|||
treeHeight() { |
|||
return this.$store.state.inIframe |
|||
? this.clientHeight - 245 + this.iframeHeight + "px" |
|||
: this.clientHeight - 245 + "px"; |
|||
}, |
|||
...mapGetters(["clientHeight", "iframeHeight"]), |
|||
showIcons() { |
|||
return function (data) { |
|||
if (data.level == "building") { |
|||
let arr = data.showNum.split("/"); |
|||
if (arr[0] !== arr[1]) { |
|||
return true; |
|||
} else { |
|||
return false; |
|||
} |
|||
} |
|||
}; |
|||
}, |
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
methods: { |
|||
//分页查询 |
|||
handleSizeChange(val) { |
|||
this.pageSize = val; |
|||
window.localStorage.setItem("pageSize", val); |
|||
this.getTableData(); |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.pageNo = val; |
|||
this.getTableData(); |
|||
}, |
|||
|
|||
//批量删除 |
|||
deleteBatch() { |
|||
if (this.selection.length > 0) { |
|||
this.$confirm("删除之后无法恢复，确认删除？", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
this.deleteresiBatch(); |
|||
}) |
|||
.catch((err) => { |
|||
if (err == "cancel") { |
|||
} |
|||
}); |
|||
} else { |
|||
this.$message.warning("请先选择要删除的居民"); |
|||
} |
|||
}, |
|||
//批量删除 |
|||
async deleteresiBatch() { |
|||
if (this.selection.length === 0) |
|||
return this.$message.error("请选择之后进行操作"); |
|||
let userIds = this.selection.map((item) => item.resiId); |
|||
this.$http |
|||
.post("/actual/base/residentBaseInfo/batchdel", userIds) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
this.$message.success("删除成功"); |
|||
this.handleSearchFrom(); |
|||
} |
|||
}) |
|||
.catch((err) => { |
|||
return this.$message.error("网络错误"); |
|||
}); |
|||
}, |
|||
handleProgress(event, file, fileList) { |
|||
|
|||
}, |
|||
async uploadHttpRequest(file) { |
|||
this.importLoading = true; |
|||
this.importBtnTitle = '正在上传中...'; |
|||
this.$message({ |
|||
showClose: true, |
|||
dangerouslyUseHTMLString: true, |
|||
message: "导入中，请到系统管理-<a id='clickA' style='cursor: pointer;'>导入记录</a>中查看进度", |
|||
duration: 3000 |
|||
}); |
|||
let than = this; |
|||
document.getElementById('clickA').addEventListener('click', function () { |
|||
than.$router.replace('/main/importRecord-index'); |
|||
}); |
|||
const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加 |
|||
formData.append('file', file.file); //添加文件对象 |
|||
formData.append('code', ''); //添加文件对象 |
|||
let url = '/governance/icEvent/importEvent' |
|||
if (this.importType == 2) { |
|||
url = '/governance/icEvent/importAwo' |
|||
} |
|||
console.log(url) |
|||
await this.$http |
|||
.post(url, formData) |
|||
.then(res => { |
|||
if (res.data.code == 0 && res.data.msg == 'success') { |
|||
const data = res.data.data; |
|||
this.dataList = [ |
|||
...Object.keys(data.option.exist).map(k => { |
|||
return { |
|||
index: k, |
|||
srcField: data.option.exist[k], |
|||
exist: true, |
|||
field: data.option.exist[k] |
|||
}; |
|||
}), |
|||
...Object.keys(data.option.notExist).map(k => { |
|||
return { |
|||
index: k, |
|||
srcField: data.option.notExist[k], |
|||
exist: false, |
|||
field: '' |
|||
}; |
|||
}) |
|||
]; |
|||
this.importOption = data.option; |
|||
this.importCode = data.code; |
|||
this.fileData = file; |
|||
} else this.$message.error(res.data.msg); |
|||
}) |
|||
.catch(err => { |
|||
console.log('失败', err); |
|||
file.onError(); //上传失败的文件会从文件列表中删除 |
|||
}); |
|||
this.importLoading = false; |
|||
this.importBtnTitle = '导入'; |
|||
this.$refs.upload.clearFiles(); |
|||
this.getTableData(); |
|||
}, |
|||
handleExcelSuccess(res, file) { |
|||
if (!res.code === 0 && !res.msg === 'success') { |
|||
this.$message.error(res.msg); |
|||
} |
|||
}, |
|||
//上传导入 |
|||
beforeExcelUpload(file) { |
|||
const isType = file.type === 'application/vnd.ms-excel'; |
|||
const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'; |
|||
const fileType = isType || isTypeComputer; |
|||
const isLt1M = file.size / 1024 / 1024 < 10; |
|||
if (!fileType) { |
|||
this.$message.error('上传文件只能是xls/xlsx格式！'); |
|||
} |
|||
|
|||
if (!isLt1M) { |
|||
this.$message.error('上传文件大小不能超过 10MB!'); |
|||
} |
|||
return fileType && isLt1M; |
|||
}, |
|||
//导出 |
|||
async handleExport() { |
|||
const url = "/governance/icEvent/export"; |
|||
const { pageSize, pageNo, formData } = this; |
|||
axios({ |
|||
url: window.SITE_CONFIG["apiURL"] + url, |
|||
method: "post", |
|||
data: { |
|||
pageSize, |
|||
pageNo, |
|||
...formData, |
|||
}, |
|||
responseType: "blob", |
|||
}) |
|||
.then((res) => { |
|||
let fileName = window.decodeURI( |
|||
res.headers["content-disposition"].split(";")[1].split("=")[1] |
|||
); |
|||
let blob = new Blob([res.data], { type: "application/vnd.ms-excel" }); |
|||
var url = window.URL.createObjectURL(blob); |
|||
var aLink = document.createElement("a"); |
|||
aLink.style.display = "none"; |
|||
aLink.href = url; |
|||
aLink.setAttribute("download", fileName); |
|||
document.body.appendChild(aLink); |
|||
aLink.click(); |
|||
document.body.removeChild(aLink); //下载完成移除元素 |
|||
window.URL.revokeObjectURL(url); //释放掉blob对象 |
|||
}) |
|||
.catch((err) => { |
|||
return this.$message.error("网络错误"); |
|||
}); |
|||
}, |
|||
|
|||
//删除 |
|||
handleDel(row){ |
|||
this.$confirm("删除之后无法回复，确认删除?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}) |
|||
.then(() => { |
|||
console.log(row.id,"online"); |
|||
let url="/voluntary/pointsAward/admin/delete" |
|||
let params={ |
|||
id:row.id |
|||
} |
|||
requestPost(url,params).then((res)=>{ |
|||
console.log(res,"res"); |
|||
this.getTableData() |
|||
|
|||
}) |
|||
}) |
|||
.catch(err => { |
|||
if (err == "cancel") { |
|||
|
|||
} |
|||
|
|||
}); |
|||
|
|||
}, |
|||
//获取当前列表 |
|||
async getTableData() { |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/gov/project/project/project-list"; |
|||
const url = "/voluntary/pointsAward/admin/list"; |
|||
let params = { |
|||
pageNo: this.pageNo, |
|||
shelveOnTimeFrom: this.formData.shelveOnTimeFrom, |
|||
redeemOrgId: this.formData.redeemOrgId, |
|||
pageTo: this.pageSize, |
|||
classKey: this.formData.classKey, |
|||
shelveOnTimeTo: this.formData.shelveOnTimeTo |
|||
|
|||
} |
|||
const { data, code, msg } = await requestGet(url, params) |
|||
if (code === 0) { |
|||
console.log("列表请求成功！！！！！！！！！！！！！！"); |
|||
this.total = data.total || 0; |
|||
this.tableData = data.list |
|||
// console.log(this.tableData, "this.tableData"); |
|||
this.tableData.forEach(item => { |
|||
console.log(item,"item"); |
|||
this.starList.forEach(item2 => { |
|||
console.log(item2,"item2"); |
|||
if (item.starLevel == item2.id) { |
|||
console.log(item.starId,item2.id, "item2.name"); |
|||
item.starName = item2.name |
|||
console.log(item2.name, "item2.name"); |
|||
|
|||
} |
|||
}) |
|||
|
|||
}) |
|||
console.log(this.tableData, "this.tableData1"); |
|||
|
|||
|
|||
} else { |
|||
} |
|||
}, |
|||
//选择当前组织 |
|||
handleChangeAgency(val) { |
|||
console.log(val); |
|||
this.redeemerOrgId = val |
|||
|
|||
}, |
|||
//获取当前组织 |
|||
getOrgTreeList() { |
|||
this.$http |
|||
.post("/gov/org/customeragency/agencygridtree", {orgTypeFilter:this.orgTypeFilter}) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg); |
|||
} else { |
|||
this.orgOptions = []; |
|||
this.orgOptions.forEach(item => { |
|||
item.subAgencyList.forEach(item2 => { |
|||
|
|||
}) |
|||
}) |
|||
this.orgOptions.push(res.data); |
|||
console.log(this.orgOptions,"this.orgOptions"); |
|||
|
|||
} |
|||
}) |
|||
.catch(() => { |
|||
return this.$message.error("网络错误"); |
|||
}); |
|||
}, |
|||
handleDetail(){ |
|||
this.formTitle = '查看' |
|||
this.showinfo = true |
|||
// this.$nextTick(() => { |
|||
// this.$refs.ref_form.initForm("info", ""); |
|||
// }); |
|||
}, |
|||
showAddClose(){ |
|||
console.log("23132132d"); |
|||
this.showAdd = false |
|||
}, |
|||
handleAdd() { |
|||
this.formTitle ='新增' |
|||
this.showAdd = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form.initForm("add", ""); |
|||
}); |
|||
}, |
|||
handleEdit() { |
|||
this.formTitle ='编辑' |
|||
this.showAdd = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form.initForm("edit", row); |
|||
}) |
|||
}, |
|||
// //加载组织数据 |
|||
async loadOrgData() { |
|||
const url = "/gov/org/agency/maporg"; |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/maporg" |
|||
let params = {}; |
|||
const { data, code, msg } = await requestPost(url, params); |
|||
if (code === 0) { |
|||
this.centerPoint = []; |
|||
this.centerPoint.push(data.latitude); |
|||
this.centerPoint.push(data.longitude); |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
//搜索 |
|||
handleSearch(val) { |
|||
this.pageNo = 1; |
|||
this.getTableData(); |
|||
}, |
|||
//重置搜索条件 |
|||
resetSearch() { |
|||
this.ownerName = ""; |
|||
this.ownerPhone = ""; |
|||
this.rentFlag = ""; |
|||
this.purpose = ""; |
|||
this.remark = ""; |
|||
this.updateStartDate = ""; |
|||
this.updateEndDate = ""; |
|||
this.neighborHoodId = ""; |
|||
this.buildingId = ""; |
|||
this.buildingUnitId = ""; |
|||
this.houseId = ""; |
|||
this.resiNumber =""; |
|||
this.pageSize = 10; |
|||
this.pageNo = 1; |
|||
|
|||
}, |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/visual/communityManage.scss"; |
|||
@import "@/assets/scss/modules/management/list-main.scss"; |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
.item_width_1 { |
|||
width: 260px; |
|||
} |
|||
|
|||
.m-search ::v-deep .el-row { |
|||
margin-right: 0; |
|||
} |
|||
|
|||
.g-main { |
|||
display: flex; |
|||
} |
|||
|
|||
.scrollar { |
|||
margin-top: 30px; |
|||
|
|||
/deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content { |
|||
background: #e6f0ff; |
|||
border-radius: 2px; |
|||
} |
|||
|
|||
/deep/ .el-tree-node:focus>.el-tree-node__content { |
|||
color: #0056d6; |
|||
// background-color: #e6f0ff; |
|||
} |
|||
|
|||
// /deep/ .el-tree-node__expand-icon { |
|||
// color: #0043c8; |
|||
// border: 1px solid #e1ecff; |
|||
// background-color: #e1ecff; |
|||
// padding: 0px; |
|||
// margin-right: 8px; |
|||
// font-size: 9px; |
|||
// } |
|||
/deep/.el-tree { |
|||
flex: 1; |
|||
|
|||
.el-tree-node { |
|||
margin-left: 2px; |
|||
} |
|||
|
|||
//原有的箭头 去掉 |
|||
// .el-icon svg { |
|||
// display: none; |
|||
// height: 0; |
|||
// width: 0; |
|||
// } |
|||
//引入图标的位置 |
|||
// .el-tree-node__expand-icon { |
|||
// // position: absolute; |
|||
// // left: 2px; |
|||
// // 图标是否旋转，如果是箭头类型的，可以设置旋转90度。 |
|||
// .expanded { |
|||
// transform: rotate(90deg); |
|||
// } |
|||
// // 未展开的节点 |
|||
// &:before { |
|||
// // content: "\008B"; |
|||
// // content: "\008B"; |
|||
// font-size: 12px; |
|||
// color: #0043c8; |
|||
// } |
|||
// } |
|||
// 叶子节点（不显示图标） |
|||
.is-leaf.el-tree-node__expand-icon::before { |
|||
// display: none; |
|||
// background: none !important; |
|||
// border: 0px; |
|||
// content: ""; |
|||
// width: 18px; |
|||
// height: 18px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.div_tree { |
|||
margin: 7px 8px 7px 7px; |
|||
width: 200px; |
|||
padding: 24px 15px; |
|||
background: #ffffff; |
|||
box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08), |
|||
0px 3px 6px -4px rgba(0, 0, 0, 0.12); |
|||
// border-radius: 5px; |
|||
overflow-y: hidden; |
|||
|
|||
/deep/ .el-scrollbar__wrap { |
|||
overflow-x: hidden !important; |
|||
} |
|||
|
|||
/deep/ .el-scrollbar__bar { |
|||
right: -2px; |
|||
} |
|||
|
|||
//搜索输入框样式 |
|||
/deep/ .el-input--medium .el-input__inner { |
|||
height: 32px; |
|||
background: rgba(0, 0, 0, 0.05); |
|||
border-radius: 4px; |
|||
} |
|||
} |
|||
|
|||
.custom-tree-node { |
|||
flex: 1; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
font-size: 14px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.over-ellipsis { |
|||
display: block; |
|||
width: 140PX; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
-webkit-line-clamp: 1; |
|||
} |
|||
|
|||
.filter_tree { |
|||
overflow-x: auto; |
|||
// background-color: #f6f6f6; |
|||
margin-top: 5px; |
|||
} |
|||
|
|||
.div_left { |
|||
// flex: 1; |
|||
width: calc(100% - 200px); |
|||
} |
|||
|
|||
::v-deep .el-dialog__body { |
|||
padding: 0; |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,590 @@ |
|||
<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> |
|||
Loading…
Reference in new issue