编辑
This commit is contained in:
liuye
@@ -14,6 +14,9 @@
|
||||
<div class="detail-content__wrapper">
|
||||
<div class="detail-content__wrapper--left">
|
||||
<ai-card title="基础信息">
|
||||
<template #right>
|
||||
<el-button type="primary" @click="editClick()" v-if="detail.eventStatus != 2 && detail.eventStatus != 3">编辑</el-button>
|
||||
</template>
|
||||
<template #content>
|
||||
<ai-wrapper>
|
||||
<ai-info-item label="上报人员" :value="detail.name"></ai-info-item>
|
||||
@@ -153,6 +156,112 @@
|
||||
</el-tree>
|
||||
</div>
|
||||
</ai-dialog>
|
||||
<ai-dialog
|
||||
:visible.sync="isShowEdit"
|
||||
width="800px"
|
||||
@close="onCloseEdit"
|
||||
title="编辑事件"
|
||||
@onConfirm="onConfirmEdit">
|
||||
<el-form class="ai-form" label-width="120px" :model="editInfo" ref="editInfo">
|
||||
<el-form-item label="事件类型" prop="groupName" :rules="[{ required: true, message: '请选择事件类型' }]" style="width: 100%;">
|
||||
<ai-select v-model="editInfo.groupName" :selectList="typeList" placeholder="请选择" />
|
||||
</el-form-item>
|
||||
<el-form-item label="事件描述" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入事件描述' }]">
|
||||
<el-input type="textarea" :rows="8" :maxlength="500" v-model="editInfo.content" clearable placeholder="请输入事件描述" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="上报位置" prop="address" style="width: 100%;" :rules="[{ required: true, message: '请选择上报位置' }]">
|
||||
<el-input disabled size="small" v-model="editInfo.address" style="width: calc(100% - 100px);"></el-input>
|
||||
<el-button @click="showMap = true" style="margin-left:16px;">地图标绘</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属网格" prop="girdName" style="width: 100%;" :rules="[{ required: true, message: '请选择所属网格' }]">
|
||||
<!-- <el-input disabled size="small" v-model="editInfo.girdName" clearable>
|
||||
<template slot="append">
|
||||
<ai-picker :ops="{label: 'girdName'}" :instance="instance" v-model="editInfo.girdId" @pick="e => onUserChange(e)" dialogTitle="选择所属网格" action="/app/appgirdmemberinfo/queryMyGirdList">
|
||||
<div class="time-select">
|
||||
<span class="dept-name" style="color:#999;">选择所属网格</span>
|
||||
<i class="el-icon-arrow-down"></i>
|
||||
</div>
|
||||
</ai-picker>
|
||||
</template>
|
||||
</el-input> -->
|
||||
<el-input disabled size="small" v-model="editInfo.girdName" clearable placeholder="请选择所属网格">
|
||||
<template slot="append">
|
||||
<el-button @click="getEditGirdList().then(()=>isEditShowUser=true )">选择</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片" prop="files" style="width: 100%;">
|
||||
<ai-uploader
|
||||
:instance="instance"
|
||||
v-model="editInfo.files"
|
||||
isShowTip
|
||||
:limit="9">
|
||||
</ai-uploader>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="name" style="width: 50%;" :rules="[{ required: true, message: '请输入姓名' }]">
|
||||
<el-input
|
||||
size="small"
|
||||
v-model="editInfo.name"
|
||||
placeholder="请输入..."
|
||||
clearabel
|
||||
:maxLength="11"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式" prop="phone" style="width: 50%;" :rules="[{ required: true, message: '请输入联系方式' }]">
|
||||
<el-input
|
||||
size="small"
|
||||
v-model="editInfo.phone"
|
||||
placeholder="请输入..."
|
||||
clearabel
|
||||
:maxLength="11"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
<ai-dialog title="地图" :visible.sync="showMap" @opened="initMapSelect" width="800px" class="mapDialog" @onConfirm="selectMap">
|
||||
<div id="mapDialog" style="height:400px;"></div>
|
||||
<el-form label-width="80px" style="padding: 10px 20px 0 0;">
|
||||
<el-row type="flex" justify="space-between">
|
||||
<el-form-item label="经度">
|
||||
<el-input disabled size="small" v-model="placeDetail.lng" style="width:100px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="纬度">
|
||||
<el-input disabled size="small" v-model="placeDetail.lat" style="width:100px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="地址">
|
||||
<el-input disabled size="small" v-model="placeDetail.address" style="width:300px;"></el-input>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-input id="searchPlaceInput" size="medium" class="searchPlaceInput" clearable v-model="searchPlace" autocomplete="on" @change="placeSearch.search(searchPlace)" placeholder="请输入关键字">
|
||||
<el-button type="primary" slot="append" @click="placeSearch.search(searchPlace)">搜索</el-button>
|
||||
</el-input>
|
||||
<div id="searchPlaceOutput" />
|
||||
</ai-dialog>
|
||||
<ai-dialog
|
||||
:visible.sync="isEditShowUser"
|
||||
width="800px"
|
||||
title="选择所属网格"
|
||||
@onConfirm="onEditConfirm">
|
||||
<div class="grid-wrapper">
|
||||
<el-tree
|
||||
:filter-node-method="filterNodeEdit"
|
||||
ref="tree"
|
||||
:props="defaultProps"
|
||||
node-key="id"
|
||||
:data="treeEdit"
|
||||
highlight-current
|
||||
@current-change="onTreeEditChange">
|
||||
<div class="tree-container" slot-scope="{ data }">
|
||||
<div class="tree-container__user">
|
||||
<div class="tree-user__item">
|
||||
<span>{{ data.girdName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tree>
|
||||
</div>
|
||||
</ai-dialog>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</template>
|
||||
@@ -197,7 +306,20 @@ export default {
|
||||
content: [],
|
||||
eventStatus: '1'
|
||||
},
|
||||
evaluation: {}
|
||||
evaluation: {},
|
||||
isShowEdit: false, //编辑工单信息
|
||||
editInfo: {},
|
||||
placeDetail: {
|
||||
lng: '',
|
||||
lat: '',
|
||||
address: ''
|
||||
},
|
||||
showMap: false,
|
||||
searchPlace: '',
|
||||
map: null,
|
||||
typeList: [],
|
||||
isEditShowUser: false,
|
||||
treeEdit: []
|
||||
}
|
||||
},
|
||||
|
||||
@@ -231,6 +353,7 @@ export default {
|
||||
this.initMap()
|
||||
})
|
||||
this.isLoading = false
|
||||
this.getTypeList()
|
||||
}
|
||||
}).catch(() => {
|
||||
this.isLoading = false
|
||||
@@ -284,6 +407,11 @@ export default {
|
||||
|
||||
return (data.girdName && data.girdName.indexOf(value) !== -1) || (data.name && data.name.indexOf(value) !== -1) || (data.name && data.phone.indexOf(value) !== -1)
|
||||
},
|
||||
filterNodeEdit(value, data) {
|
||||
if (!value) return true
|
||||
|
||||
return (data.girdName && data.girdName.indexOf(value) !== -1)
|
||||
},
|
||||
|
||||
onTreeChange(e) {
|
||||
this.gridInfo = e
|
||||
@@ -395,7 +523,129 @@ export default {
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
editClick() {
|
||||
this.isShowEdit = true
|
||||
this.editInfo = {...this.detail}
|
||||
this.editInfo.girdIds = []
|
||||
if(this.editInfo.girdId) {
|
||||
this.editInfo.girdIds.push(this.editInfo.girdId)
|
||||
}
|
||||
},
|
||||
|
||||
selectMap() {
|
||||
this.editInfo.lng = this.placeDetail.lng
|
||||
this.editInfo.lat = this.placeDetail.lat
|
||||
this.editInfo.address = this.placeDetail.address
|
||||
this.showMap = false
|
||||
},
|
||||
|
||||
initMapSelect() {
|
||||
AMapLoader.load({
|
||||
key: 'b553334ba34f7ac3cd09df9bc8b539dc',
|
||||
version: '2.0',
|
||||
plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder'],
|
||||
}).then((AMap2) => {
|
||||
this.map = new AMap2.Map('mapDialog', {
|
||||
resizeEnable: true,
|
||||
zooms: [6, 20],
|
||||
zoom: 11,
|
||||
center:[107.11059, 31.56618],
|
||||
})
|
||||
this.placeSearch = new AMap2.PlaceSearch({ map: this.map })
|
||||
new AMap2.AutoComplete({
|
||||
input: 'searchPlaceInput',
|
||||
output: 'searchPlaceOutput',
|
||||
}).on('select', (e) => {
|
||||
if (e?.poi) {
|
||||
this.placeSearch.setCity(e.poi.adcode)
|
||||
this.movePosition(e.poi.location)
|
||||
}
|
||||
})
|
||||
this.map.on('click', (e) => {
|
||||
new AMap2.Geocoder().getAddress(e.lnglat, (sta, res) => {
|
||||
if (res?.regeocode) {
|
||||
this.placeDetail = {
|
||||
lng: e.lnglat?.lng,
|
||||
lat: e.lnglat?.lat,
|
||||
address: res.regeocode.formattedAddress,
|
||||
}
|
||||
}
|
||||
})
|
||||
this.movePosition(e.lnglat)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
movePosition(center) {
|
||||
if (this.map) {
|
||||
this.map.clearMap()
|
||||
this.map.panTo(center)
|
||||
this.map.add([
|
||||
new AMap.Marker({
|
||||
position: center,
|
||||
clickable: true,
|
||||
}),
|
||||
])
|
||||
this.map.setFitView()
|
||||
}
|
||||
},
|
||||
|
||||
getEditGirdList() {
|
||||
return this.instance.post(`/app/appgirdmemberinfo/queryMyGirdList`).then(res => {
|
||||
if (res?.data) {
|
||||
this.treeEdit = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onTreeEditChange(e) {
|
||||
console.log(e)
|
||||
this.editInfo.girdId = e.id
|
||||
this.editInfo.girdName = e.girdName
|
||||
},
|
||||
|
||||
onEditConfirm() {
|
||||
if(!this.editInfo.girdId) {
|
||||
return this.$message.error('请选择网格!')
|
||||
}
|
||||
this.isEditShowUser = false
|
||||
},
|
||||
|
||||
onCloseEdit() {
|
||||
this.isShowEdit = false
|
||||
this.editInfo = {}
|
||||
},
|
||||
|
||||
onConfirmEdit() {
|
||||
this.$refs.editInfo.validate(v => {
|
||||
if (v) {
|
||||
this.instance.post('/app/apppatrolreportinfov2/addByGirdMember', {
|
||||
...this.editInfo,
|
||||
id: this.$route.query.id
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.isShowEdit = false
|
||||
this.getDetail()
|
||||
this.$message.success('编辑成功!')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getTypeList() {
|
||||
this.typeList = []
|
||||
this.instance.post(`/app/apppatrolreportinfov2/eventTypeList?eventSource=${this.detail.eventSource}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
res.data.map((item) => {
|
||||
var i = {dictName: item, dictValue: item}
|
||||
this.typeList.push(i)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -259,7 +259,7 @@ export default {
|
||||
},
|
||||
handleDelete(ids) {
|
||||
this.$confirm("是否要进行删除?").then(() => {
|
||||
this.instance.post("/app/appsessionarchivereportinfo/delete", null, {
|
||||
this.instance.post("/app/apppatrolreportinfov2/delete", null, {
|
||||
params: {ids}
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
|
||||
Reference in New Issue
Block a user