elink-star
/
esua-epdc-admin
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update dealDetail

release/hlpt
fengyu 3 years ago
parent
5c4435ba55 3ee6e78258
commit
e53d44addc
6 changed files with 1990 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 432
      src/views/modules/events/appeal-detail-view.vue
  2. 514
      src/views/modules/events/appeal-enforcement-add.vue
  3. 213
      src/views/modules/events/appeal-list.vue
  4. 30
      src/views/modules/events/appeal.vue
  5. 224
      src/views/modules/events/item-deal-detail-view.vue
  6. 628
      src/views/modules/events/item-examine-detail-view.vue

432
src/views/modules/events/appeal-detail-view.vue
View File

@ -0,0 +1,432 @@
<template>
<div class="project-handle">
<el-form :model="dataForm" ref="dataForm" style="width: 100%; height: 100%;">
<div class="project-detail">
<div class="project-detail-tip">诉求详情</div>
<el-form label-position="right" label-width="145px">
<el-form-item label="诉求内容:">
<div>{{dataForm.itemContent}}</div>
<el-image v-for="url in dataForm.images"
style="width: 100px; height: 100px; margin-right: 10px"
:key="url"
:src="url"
:preview-src-list="previewImgList"
@click="clickImg(url)">
</el-image>
<div v-if="dataForm.voice">
<audio controls style="height: 30px;">
<source :src="dataForm.voice" >
</audio>
</div>
</el-form-item>
<el-form-item v-if="dataForm.groupName && dataForm.groupName.length > 0" label="项目来源:" prop="ownGrid">
<div>{{dataForm.groupName}}</div>
</el-form-item>
<el-form-item label="上报时间:">
<div>{{dataForm.distributeTime}}</div>
</el-form-item>
<el-form-item label="上报人:">
<div>{{dataForm.nickName}}</div>
</el-form-item>
<el-form-item label="电话:" prop="mobile">
<div>{{dataForm.mobile}}</div>
</el-form-item>
<el-form-item label="所属类别:" prop="categoryName">
<div>{{dataForm.categoryName}}</div>
</el-form-item>
<el-form-item label="分类:" prop="categoryName">
<div>{{dataForm.peopleFlag == '0' ? '民生诉求' : dataForm.peopleFlag == '1' ? '发展诉求' : '执法诉求'}}</div>
</el-form-item>
<el-form-item v-if="dataForm.lawDetail && dataForm.lawDetail.assistUnit" label="事项名称:" prop="assistUnit">
<div>{{dataForm.lawDetail.assistUnit}}</div>
</el-form-item>
<el-form-item v-if="dataForm.lawDetail && dataForm.lawDetail.lawContent" label="诉求详情:" prop="assistUnit">
<div>{{dataForm.lawDetail.lawContent}}</div>
</el-form-item>
<el-form-item v-if="dataForm.lawDetail && dataForm.lawDetail.hostUnit" label="建议主办单位:" prop="assistUnit">
<div>{{dataForm.lawDetail.hostUnit}}</div>
</el-form-item>
<el-form-item v-if="dataForm.lawDetail && dataForm.lawDetail.assistUnit" label="建议协办单位:" prop="assistUnit">
<div>{{dataForm.lawDetail.assistUnit}}</div>
</el-form-item>
<el-form-item v-if="dataForm.lawDetail && dataForm.lawDetail.demand" label="有关需求:" prop="assistUnit">
<div>{{dataForm.lawDetail.demand}}</div>
</el-form-item>
<el-form-item v-if="dataForm.lawDetail && dataForm.lawDetail.lawType" label="事项类型:" prop="assistUnit">
<div>{{dataForm.lawDetail.lawType == '0' ? '计划事项' : '临时事项'}}</div>
</el-form-item>
<el-form-item v-if="dataForm.lawDetail && dataForm.lawDetail.isExchange" label="与部门是否沟通:" prop="assistUnit">
<div>{{dataForm.lawDetail.isExchange == '0' ? '已经沟通' : '尚未沟通'}}</div>
</el-form-item>
<el-form-item v-if="dataForm.lawDetail && dataForm.lawDetail.convenerName" label="召集人姓名:" prop="assistUnit">
<div>{{dataForm.lawDetail.convenerName}}</div>
</el-form-item>
<el-form-item v-if="dataForm.lawDetail && dataForm.lawDetail.convenerJob" label="召集人职务:" prop="assistUnit">
<div>{{dataForm.lawDetail.convenerJob}}</div>
</el-form-item>
<el-form-item v-if="dataForm.lawDetail && dataForm.lawDetail.convenerMobile" label="召集人电话:" prop="assistUnit">
<div>{{dataForm.lawDetail.convenerMobile}}</div>
</el-form-item>
<el-form-item v-if="dataForm.lawDetail && dataForm.lawDetail.contactName" label="联系人姓名:" prop="assistUnit">
<div>{{dataForm.lawDetail.contactName}}</div>
</el-form-item>
<el-form-item v-if="dataForm.lawDetail && dataForm.lawDetail.contactJob" label="联系人职务:" prop="assistUnit">
<div>{{dataForm.lawDetail.contactJob}}</div>
</el-form-item>
<el-form-item v-if="dataForm.lawDetail && dataForm.lawDetail.contactMobile" label="联系人电话:" prop="assistUnit">
<div>{{dataForm.lawDetail.contactMobile}}</div>
</el-form-item>
<el-form-item v-if="dataForm.lawDetail && dataForm.lawDetail.reportTime" label="报到时间:" prop="assistUnit">
<div>{{dataForm.lawDetail.reportTime}}</div>
</el-form-item>
<el-form-item v-if="dataForm.lawDetail && dataForm.lawDetail.reportAddress" label="报道地点:" prop="assistUnit">
<div>{{dataForm.lawDetail.reportAddress}}</div>
</el-form-item>
<el-form-item v-if="dataForm.lawDetail && dataForm.lawDetail.meetingName" label="会议名称:" prop="assistUnit">
<div>{{dataForm.lawDetail.meetingName}}</div>
</el-form-item>
</el-form>
<div class="container">
<div class="location"><span style="font-weight: bold;color: #606266">上报位置:</span> {{dataForm.issueAddress}}</div>
<div id="map"></div>
</div>
</div>
<div class="project-progress">
<div class="project-progress-tip">处理进展</div>
<el-timeline>
<el-timeline-item
v-for="(item, index) in timeLineList"
:key="item.id"
:color="item.type === 'init' ? 'red' : item.type === 'project' ? '#009688' : '#ffa546'">
<div :id="`content${index}`" style="line-height:25px; ">
<div
:style="{ marginBottom: '10px', width: '35px', height: '20px', fontSize: '12px', borderRadius: '4px', background: item.type === 'project' ? '#009688': item.type === 'issue' || item.type === 'issue-project' ? '#ffa546' : '', color: '#fff', textAlign: 'center', lineHeight: '20px'}"
v-if="item.type !== 'init'">
{{item.type === 'project' ? '项目': item.type === 'issue' || item.type === 'issue-project' ? '议题' : ''}}
</div>
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">[{{item | formatState}}]</span> {{item.createdTime}}</div>
<div v-if="item.state === 3">
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">来源社群：</span>{{item.groupName}}</div>
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理人：</span>{{item.handlerDept}}</div>
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理人电话：</span>{{item.mobile}}</div>
</div>
<div v-if="item.state !== 3">
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理部门：</span>{{item.handlerDept}}</div>
</div>
<div v-if="item.itemDeptDTOS && item.itemDeptDTOS.length > 0" style="width: 100%; display: flex;">
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">被吹哨部门：</span> </div>
<div>
<span v-for="(csDept, index1) in item.itemDeptDTOS" :key="index1">
{{ csDept.deptName }}<br/>
</span>
</div>
</div>
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理意见：</span> {{item.advice}}</div>
<div style="display: flex;">
<el-image v-for="url in item.images"
style="width: 60px; height: 60px; object-fit: cover; margin-right: 8px; border-radius: 2px;"
:key="url"
:src="url"
:preview-src-list="previewImgList"
alt="处理图片"
@click="clickImg(url)">
</el-image>
</div>
</div>
</el-timeline-item>
</el-timeline>
</div>
<div style="width: 100%; text-align:center; float:left;">
<el-button size="medium" style="width: 95px" type="primary" @click="back">返回</el-button>
</div>
</el-form>
</div>
</template>
<script>
import BMap from 'BMap'
import 'element-ui/lib/theme-chalk/timeline.css'
import 'element-ui/lib/theme-chalk/timeline-item.css'
import 'element-ui/lib/theme-chalk/image.css'
export default {
name: 'itemCloseDetailView',
data () {
return {
map: '',
dataForm: {
id: '',
nickName: '',
distributeTime: '',
itemContent: '',
handleProgressResultDTOS: [],
issueProgressResultDTOS: [],
images: [],
voice: ''
},
previewImgList: [],
order: '',
orderField: '',
timeLineList: []
}
},
mounted () {
this.dataForm.id = this.$route.query.id
this.init()
},
filters: {
formatState (item) {
if (item.type === 'project') {
if (item.state === 0 && item.itemDeptDTOS && item.itemDeptDTOS.length > 0) {
return '吹哨'
} else if (item.state === 0 && item.itemDeptDTOS && item.itemDeptDTOS.length === 0) {
return '回应'
} else if (item.state === 5) {
return '不予受理'
} else if (item.state === 10) {
return '结案'
} else if (item.state === 11) {
return '结案申请'
} else if (item.state === 12) {
return '响应拟办'
} else if (item.state === 13) {
return '直接办理'
} else if (item.state === 15) {
return '社区吹哨'
} else if (item.state === 20) {
return '网格化平台-受理'
} else if (item.state === 25) {
return '网格化平台-立案'
} else if (item.state === 30) {
return '网格化平台-派遣'
} else if (item.state === 35) {
return '网格化平台-中间再派'
} else if (item.state === 40) {
return '网格化平台-接单'
} else if (item.state === 45) {
return '网格化平台-处理'
} else if (item.state === 50) {
return '网格化平台-中间督办'
} else if (item.state === 55) {
return '网格化平台-催办'
} else if (item.state === 60) {
return '网格化平台-结案'
}
} else if (item.type === 'issue' || item.type === 'init') {
if (item.state === 0) {
return '审核通过'
} else if (item.state === 1) {
return '回应'
} else if (item.state === 2) {
return '关闭'
} else if (item.state === 3) {
return '转议题'
}
} else if (item.type === 'issue-project') {
return '转项目'
}
}
},
methods: {
back () {
this.$parent.init()
// this.$router.push({ path: this.$route.path })
},
initBmap (latitude, longitude) {
this.map = new BMap.Map('map')
const point = new BMap.Point(longitude, latitude)
var marker = new BMap.Marker(point)
this.map.addOverlay(marker)
this.map.centerAndZoom(point, 13)
this.map.enableScrollWheelZoom(true)
},
init () {
this.$nextTick(() => {
if (this.dataForm.id) {
this.getInfo()
}
})
},
clickImg (url) {
this.previewImgList = []
this.previewImgList.push(url)
},
getInfo () {
this.$http.get(`/events/item/getItemAppealDetail/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
this.dataForm.handleProgressResultDTOS.forEach((item, index, arr) => {
if (index === arr.length - 1) {
// item.type = 'issue-project'
item.type = 'project'
} else {
item.type = 'project'
}
})
this.dataForm.issueProgressResultDTOS.forEach((item, index, arr) => {
if (index === arr.length - 1) {
item.type = 'init'
} else {
item.type = 'issue'
}
})
this.timeLineList = [...this.dataForm.handleProgressResultDTOS, ...this.dataForm.issueProgressResultDTOS]
this.$nextTick(() => {
this.timeLineList.forEach((item, index) => {
const oDiv = document.getElementById(`content${index}`)
const oBorder = oDiv.parentNode.parentNode.parentNode.firstChild
console.log(111)
if (item.type === 'issue' || item.type === 'issue-project') {
oBorder.style.borderLeft = '1px solid #ffa546'
} else if (item.type === 'project') {
oBorder.style.borderLeft = '1px solid #009688'
}
})
})
this.initBmap(this.dataForm.issueLatitude, this.dataForm.issueLongitude)
}).catch(() => {})
}
}
}
</script>
<style lang="scss">
.project-handle {
.el-timeline {
padding-left: 9px;
font-size: 13px;
}
}
.el-form-item__label {
font-weight: bold;
}
</style>
<style lang="scss" scoped>
.project-handle {
width: 100%;
height: calc(100vh - 120px);
background: #ffffff;
box-sizing: border-box;
padding: 10px;
.project-detail {
width: 79%;
height: 80%;
border: 2px solid #ccc;
box-sizing: border-box;
padding: 10px;
float:left;
margin-bottom: 1%;
position: relative;
padding-top: 20px;
.project-detail-tip {
position: absolute;
top: 0;
left:0;
width: 80px;
height: 30px;
line-height: 30px;
color: #ffffff;
background: #4ac38b;
text-align:center;
}
.el-form {
width: 58%;
height: 100%;
float:left;
overflow-y:auto;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #aaa;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #fff;
}
}
.container {
width: 40%;
height: 80%;
float: right;
.location {
height: 30px;
line-height: 30px;
}
#map {
width: 100%;
height: calc(100% - 30px);
}
}
}
.project-progress {
width: 20%;
height: 80%;
float: right;
border: 2px solid #ccc;
box-sizing: border-box;
margin-left: 1%;
padding-top: 20px;
overflow-y:auto;
position: relative;
padding-top: 40px;
.project-progress-tip {
position: absolute;
top: 0;
left:0;
width: 80px;
height: 30px;
line-height: 30px;
color: #ffffff;
background: #0098ff;
text-align:center;
}
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #aaa;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #ccc;
}
}
.handle-operation {
width: 79%;
height: 49%;
box-sizing: border-box;
border: 2px solid #ccc;
float:left;
}
}
</style>

514
src/views/modules/events/appeal-enforcement-add.vue
View File

@ -0,0 +1,514 @@
<template>
<el-dialog :visible.sync="visible"
:title="!dataForm.id ? $t('add') : $t('update')"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="700px"
customClass="customWidth">
<el-form :model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmitHandle()"
:label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
<el-form-item label="事项名称"
prop="lawName" label-width="120px">
<el-input v-model="dataForm.lawName"
placeholder="请输入事项名称" style="width:90%;" maxlength="10"></el-input>
</el-form-item>
<el-form-item label="诉求详情"
prop="lawContent" label-width="120px">
<el-input v-model="dataForm.lawContent"
type="textarea"
:rows="6"
maxlength="500"
placeholder="请输入主要诉求内容（诉求详情不少于10个字）" style="width:90%;"></el-input>
</el-form-item>
<el-form-item label="建议主办单位"
prop="hostUnit" label-width="120px">
<el-input v-model="dataForm.hostUnit"
type="textarea"
:rows="6"
maxlength="500"
placeholder="请输入" style="width:90%;"></el-input>
</el-form-item>
<el-form-item label="建议协办单位"
prop="assistUnit" label-width="120px">
<el-input v-model="dataForm.assistUnit"
placeholder="请输入" style="width:90%;" maxlength="10"></el-input>
</el-form-item>
<el-form-item label="有关需求"
prop="demand" label-width="120px">
<el-input v-model="dataForm.demand"
type="textarea"
:rows="6"
maxlength="500"
placeholder="拟邀请区xx局分管局长、xx科长；熟悉xx相关业务的科室负责人。（可提出参会人员要求）" style="width:90%;"></el-input>
</el-form-item>
<el-form-item label="事项类型"
prop="demand" label-width="120px">
<el-radio-group v-model="dataForm.lawType">
<el-radio :label="0">计划事项</el-radio>
<el-radio :label="1">临时事项</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="与部门是否沟通"
prop="demand" label-width="120px">
<el-radio-group v-model="dataForm.isExchange">
<el-radio :label="0">已经沟通</el-radio>
<el-radio :label="1">尚未沟通</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="召集人姓名"
prop="convenerName" label-width="120px">
<el-input v-model="dataForm.convenerName"
placeholder="请输入" style="width:90%;" maxlength="10"></el-input>
</el-form-item>
<el-form-item label="召集人职务"
prop="convenerJob" label-width="120px">
<el-input v-model="dataForm.convenerJob"
placeholder="请输入" style="width:90%;" maxlength="10"></el-input>
</el-form-item>
<el-form-item label="召集人电话"
prop="convenerMobile" label-width="120px">
<el-input v-model="dataForm.convenerMobile"
placeholder="请输入" style="width:90%;" maxlength="11"></el-input>
</el-form-item>
<el-form-item label="联系人姓名"
prop="contactName" label-width="120px">
<el-input v-model="dataForm.contactName"
placeholder="请输入" style="width:90%;" maxlength="10"></el-input>
</el-form-item>
<el-form-item label="联系人职务"
prop="contactJob" label-width="120px">
<el-input v-model="dataForm.contactJob"
placeholder="请输入" style="width:90%;" maxlength="10"></el-input>
</el-form-item>
<el-form-item label="联系人电话"
prop="contactMobile" label-width="120px">
<el-input v-model="dataForm.contactMobile"
placeholder="请输入" style="width:90%;" maxlength="11"></el-input>
</el-form-item>
<el-form-item label="报到时间"
prop="reportTime"
label-width="120px">
<el-date-picker v-model="dataForm.reportTime"
type="datetime"
:picker-options="pickerBeginDateBefore"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
<el-form-item label="报道地点" prop="reportAddress" label-width="120px">
<el-input v-model="dataForm.reportAddress" type="text" clearable style="width:50%;"></el-input>&emsp;
<el-button type="primary" @click="searchKeyword()" class="custom-button-default">搜索</el-button>
</el-form-item>
<el-form-item label=" " prop="map">
<div>
<div id="container" style="width:500px;height:400px;"></div>
</div>
</el-form-item>
<el-form-item label="会议名称"
prop="meetingName" label-width="120px">
<el-input v-model="dataForm.meetingName"
placeholder="请输入" style="width:90%;" maxlength="10"></el-input>
</el-form-item>
<el-form-item label="上传图片" prop="images" label-width="120px">
<el-upload accept="image/png, image/jpeg"
:action="uploadUrl"
list-type="picture-card"
:file-list="dataForm.images"
:limit="3"
:on-success="handleAvatarActSuccess"
:on-remove="removeImage"
:on-exceed="handleExceed">
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
</el-form>
<template slot="footer">
<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
<el-button type="primary"
@click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
</template>
</el-dialog>
</template>
<script>
import debounce from 'lodash/debounce'
import jsonp from 'jsonp'
import Cookies from 'js-cookie'
var searchService
export default {
data () {
return {
visible: false,
dataForm: {
lawName: '', // 事项名称不可为空
lawContent: '', // 诉求详情不可为空
hostUnit: '', // 主办单位不可为空
assistUnit: '', // 协办单位不可为空
demand: '', // 有关需求不可为空
lawType: '', // 事项类型不可为空
isExchange: '', // 是否沟通不可为空
convenerName: '', // 召集人姓名不可为空
convenerJob: '', // 召集人职务不可为空
convenerMobile: '', // 召集人电话不可为空
contactName: '', // 联系人姓名不可为空
contactJob: '', // 联系人职务不可为空
contactMobile: '', // 联系人电话不可为空
reportTime: '', // 报到时间不能为空
reportAddress: '', // 报到地点不可为空
issueLatitude: 0, // 纬度不能为空
issueLongitude: 0, // 经度不能为空
meetingName: '', // 会议名称不可为空
itemVoice: '', // 语音
duration: '', // 语音时长
images: [], // 图片
city: '',
radius: 200
},
uploadUrl: '',
loading: false,
pickerBeginDateBefore: {
disabledDate: (time) => {
let beginDateVal = this.dataForm.endTime
if (beginDateVal) {
return time.getTime() > new Date(beginDateVal + ' 00:00:00').getTime()
}
}
}
}
},
watch: {
},
computed: {
dataRule () {
return {
lawName: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
lawContent: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
hostUnit: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
assistUnit: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
demand: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
lawType: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
isExchange: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
convenerName: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
convenerJob: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
convenerMobile: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' },
{ pattern: /^[1][1,2,3,4,5,6,7,8,9][0-9]{9}$/, message: '请输入正确号码格式', trigger: 'blur' }
],
contactName: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
contactJob: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
contactMobile: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' },
{ pattern: /^[1][1,2,3,4,5,6,7,8,9][0-9]{9}$/, message: '请输入正确号码格式', trigger: 'blur' }
],
reportTime: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
reportAddress: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
meetingName: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
},
methods: {
init () {
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
this.getMyLocation()
this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
})
},
getAddress (lat, lng) {
this.dataForm.issueLongitude = lng
this.dataForm.issueLatitude = lat
var url3 =
'https://apis.map.qq.com/ws/geocoder/v1/?location=' +
lat +
',' +
lng +
'&key=MQFBZ-LTWW6-R7XSK-MFXUQ-DVSIE-BGB4M&output=jsonp'
jsonp(url3, null, (err, data) => {
if (err) {
console.log(err)
}
console.log(data)
this.dataForm.reportAddress = data.result.address
})
},
getMyLocation () {
var geolocation = new qq.maps.Geolocation(
'MQFBZ-LTWW6-R7XSK-MFXUQ-DVSIE-BGB4M',
'e家党群-管理端'
)
geolocation.getIpLocation(this.showPosition, this.showErr)
},
showPosition (position) {
console.log(position)
this.dataForm.issueLatitude = position.lat
this.dataForm.issueLongitude = position.lng
this.dataForm.city = position.city
this.setMap()
},
showErr () {
console.log('定位失败')
this.getMyLocation() // 定位失败再请求定位，测试使用
},
setMap () {
const that = this
var markerList = []
var radiusList = []
// 步骤：定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
// 设置地图中心点
var myLatlng = new qq.maps.LatLng(
this.dataForm.issueLatitude,
this.dataForm.issueLongitude
)
// 定义工厂模式函数
var zoom = this.capacity()
var myOptions = {
zoom: zoom, // 设置地图缩放级别
center: myLatlng, // 设置中心点样式
mapTypeId: qq.maps.MapTypeId.ROADMAP // 设置地图样式详情参见MapType
}
// 获取dom元素添加地图信息
var map = new qq.maps.Map(
document.getElementById('container'),
myOptions
)
// 设置圆形
var radius = new qq.maps.Circle({
center: new qq.maps.LatLng(
this.dataForm.issueLatitude,
this.dataForm.issueLongitude
),
radius: this.dataForm.radius,
map: map
})
radiusList.push(radius)
var marker = new qq.maps.Marker({
position: myLatlng,
map: map
})
markerList.push(marker)
// 初始化mark点击事件
that.getAddress(that.dataForm.issueLatitude, that.dataForm.issueLongitude)
qq.maps.event.addListener(marker, 'click', function (event) {
that.addressCheckHandle()
})
// 添加监听事件 获取鼠标单击事件
qq.maps.event.addListener(map, 'click', function (event) {
that.cleanMarkRadius(markerList, radiusList)
that.getAddress(event.latLng.lat, event.latLng.lng)
var myLatlng = new qq.maps.LatLng(event.latLng.lat, event.latLng.lng)
map.setCenter(myLatlng)
var marker = new qq.maps.Marker({
position: event.latLng,
map: map
})
// 设置圆形
var radius = new qq.maps.Circle({
center: new qq.maps.LatLng(event.latLng.lat, event.latLng.lng),
radius: that.dataForm.radius,
map: map
})
radiusList.push(radius)
markerList.push(marker)
qq.maps.event.addListener(map, 'click', function (event) {
that.cleanMarkRadius(markerList, radiusList)
})
qq.maps.event.addListener(marker, 'click', function (event) {
that.addressCheckHandle()
})
})
// 调用地址解析类
searchService = new qq.maps.SearchService({
complete: function (result) {
var pois = result.detail.pois
if (pois == null || pois.length <= 0) {
alert('未找到地址!')
that.getAddress(that.dataForm.issueLatitude, that.dataForm.issueLongitude)
return
}
map.setCenter(pois[0].latLng)
that.getAddress(pois[0].latLng.lat, pois[0].latLng.lng)
var marker = new qq.maps.Marker({
map: map,
position: pois[0].latLng
})
// 设置圆形
var radius = new qq.maps.Circle({
center: new qq.maps.LatLng(pois[0].latLng.lat, pois[0].latLng.lng),
radius: that.dataForm.radius,
map: map
})
radiusList.push(radius)
markerList.push(marker)
that.cleanMarkRadius(markerList, radiusList)
qq.maps.event.addListener(marker, 'click', function (event) {
that.addressCheckHandle()
})
}
})
},
searchKeyword () {
searchService.setLocation(this.dataForm.city)
searchService.search(this.dataForm.reportAddress)
},
addressCheckHandle () {
if (this.dataForm.reportAddress === '' || !(this.dataForm.issueLatitude > 0)) {
alert('请选择地址!')
return
}
this.addressCheckVisible = true
this.$nextTick(() => {
this.$refs.addressCheck.init(this.dataForm)
})
},
cleanMarkRadius (markerList, radiusList) {
if (markerList) {
if (markerList.length > 1) {
for (var i4 = 0; i4 < markerList.length - 1; i4++) {
markerList[i4].setMap(null)
}
} else {
for (var i3 = 0; i3 < markerList.length; i3++) {
markerList[i3].setMap(null)
}
}
}
if (radiusList) {
if (radiusList.length > 1) {
for (var i2 = 0; i2 < radiusList.length - 1; i2++) {
radiusList[i2].setMap(null)
}
} else {
for (var i1 = 0; i1 < markerList.length; i1++) {
radiusList[i1].setMap(null)
}
}
}
},
capacity () {
if (this.dataForm.radius > 0 && this.dataForm.radius <= 25) {
return 18
} else if (this.dataForm.radius > 25 && this.dataForm.radius <= 50) {
return 17
} else if (this.dataForm.radius > 50 && this.dataForm.radius <= 100) {
return 16
} else if (this.dataForm.radius > 100 && this.dataForm.radius <= 200) {
return 15
} else if (this.dataForm.radius > 200 && this.dataForm.radius <= 500) {
return 14
} else if (this.dataForm.radius > 500 && this.dataForm.radius <= 1000) {
return 13
} else if (this.dataForm.radius > 1000 && this.dataForm.radius <= 2000) {
return 12
} else if (this.dataForm.radius > 2000 && this.dataForm.radius <= 5000) {
return 11
}
},
// 图片处理
handleAvatarActSuccess (res, file) {
let image = {}
image.name = Math.round(Math.random() * 5)
image.url = res.data.url
this.dataForm.images.push(image)
this.imgDataRule = false
},
removeImage (file, fileList) {
this.dataForm.images = fileList
if (this.dataForm.images.length > 0) {
this.imgDataRule = false
} else {
this.imgDataRule = true
}
},
handleExceed () {
this.$message({
showClose: true,
message: '最多上传三张图片',
type: 'warning'
})
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
let images = []
if (this.dataForm.images.length > 0) {
this.dataForm.images.forEach(element => {
images.push(element.url)
})
}
this.dataForm.images = images
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.$http['post']('/events/work/item/submitLawItem', this.dataForm).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
}).catch(() => { })
})
}, 1000, { 'leading': true, 'trailing': false })
}
}
</script>
<style lang="scss">
.customWidth {
width:35%
}
</style>

213
src/views/modules/events/appeal-list.vue
View File

@ -0,0 +1,213 @@
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-item__item}">
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataListSearch()"
>
<el-form-item label="诉求类型" prop="appealType" label-width="80px">
<el-select v-model="dataForm.appealType" placeholder="请选择" clearable>
<el-option label="民生" value="0"> </el-option>
<el-option label="发展" value="1"> </el-option>
<el-option label="执法" value="2"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="项目内容" prop="itemCode">
<el-input
v-model="dataForm.itemContent"
placeholder="请输入项目内容"
clearable
@keyup.native="btKeyUpItemContent"
style="width:200px;"
></el-input>
</el-form-item>
<br>
<div>
<el-form-item label="上报起始时间" prop="startTime" label-width="100px">
<el-date-picker
v-model="dataForm.startTime"
type="date"
:picker-options="pickerBeginDateBefore"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
placeholder="选择日期时间"
style="width:250px;" @change="changeTime"
>
</el-date-picker>
</el-form-item>
<el-form-item label="至" label-width="25px" prop="endTime">
<el-date-picker
v-model="dataForm.endTime"
type="date"
:picker-options="pickerBeginDateAfter"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
placeholder="选择日期时间"
style="width:250px;" @change="changeTime"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="success" @click="getDataListSearch()" class="custom-button-default">{{ $t('query') }}</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary"
class="custom-button-add"
@click="addAppealEnforcement()">新增执法诉求</el-button>
</el-form-item>
<!-- <el-form-item>
<el-button type="success"
@click="exportHandle()" class="custom-button-modify">{{ $t('export') }}</el-button>
</el-form-item> -->
</div>
</el-form>
<el-table
v-loading="dataListLoading"
:data="dataList"
border
@selection-change="dataListSelectionChangeHandle"
style="width: 100%;"
>
<el-table-column
label="序号"
type="index"
show-overflow-tooltip
align="center"
width="50"
></el-table-column>
<el-table-column
prop="itemContent"
label="项目内容"
header-align="center"
min-width="400"
align="left"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="createdTime"
label="转成项目时间"
header-align="center"
width="180"
align="center"
></el-table-column>
<el-table-column
prop="nickName"
label="提交人"
header-align="center"
min-width="200"
align="center"
show-overflow-tooltip
></el-table-column>
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150"
>
<template slot-scope="scope">
<el-button
type="text"
size="small"
class="custom-table-button-default"
@click="dealAction(scope.row.id)">详情
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"
>
</el-pagination>
</div>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"></add-or-update>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './appeal-enforcement-add'
export default {
mixins: [mixinViewModule],
name: 'AppealList',
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/events/item/getItemAppealPage',
getDataListIsPage: true,
exportURL: '/events/item/unexport'
},
dataForm: {
id: '',
itemState: '0',
startTime: '',
endTime: '',
streetId: '',
communityId: '',
gridId: '',
itemCode: '',
itemContent: '',
nickName: '',
mobile: '',
appealType: ''
},
addOrUpdateVisible: false,
pickerBeginDateBefore: {
disabledDate: (time) => {
let beginDateVal = this.dataForm.endTime
if (beginDateVal) {
return time.getTime() > new Date(beginDateVal + ' 00:00:00').getTime()
}
}
},
pickerBeginDateAfter: {
disabledDate: (time) => {
let EndDateVal = this.dataForm.startTime
if (EndDateVal) {
return time.getTime() < new Date(EndDateVal + ' 00:00:00').getTime()
}
}
}
}
},
components: {
AddOrUpdate
},
created: function () {
},
watch: {
},
methods: {
dealAction (id) {
this.$parent.selectComponent = 'AppealDetailView'
this.$router.push({ path: '/events-appeal', query: { id: id } })
},
addAppealEnforcement () {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init()
})
},
btKeyUpItemContent (e) {
e.target.value = e.target.value.replace(/[`~!#$%^&*()_\+=<>?:"{}|~！#￥%……&*（）={}|《》？：“”【】\\[\]、；‘’，。、\s+]/g, '')
this.dataForm.itemContent = e.target.value
}
}
}
</script>

30
src/views/modules/events/appeal.vue
View File

@ -0,0 +1,30 @@
<template>
<keep-alive include="AppealList">
<component :is="selectComponent"></component>
</keep-alive>
</template>
<script>
import AppealList from './appeal-list'
import AppealDetailView from './appeal-detail-view'
export default {
data () {
return {
selectComponent: AppealList
}
},
components: {
AppealList,
AppealDetailView
},
methods: {
init () {
this.selectComponent = AppealList
}
}
}
</script>
<style lang="scss" scoped>
</style>

224
src/views/modules/events/item-deal-detail-view.vue
View File

@ -2,10 +2,10 @@
<div class="project-handle">
<div style="width: 100%; height: 100%;">
<div class="project-detail">
<div class="project-detail-tip">议题详情</div>
<div class="project-detail-tip">项目详情</div>
<el-form label-position="right"
label-width="120px">
<el-form-item label="议题内容:"
<el-form-item label="项目内容:"
prop="eventContent">
<div>{{dataForm.itemContent}}</div>
<el-image v-for="url in dataForm.images"
@ -149,6 +149,12 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label="所属类别:" prop="categoryIds" v-if="categoryVisible">
<div class="block">
<el-cascader v-model="categoryIds" placeholder="试试搜索：城市管理" :props="{ checkStrictly: true }" :options="categoryOptions" filterable></el-cascader>
</div>
</el-form-item>
<el-form-item v-if="!hideResident" label="回复居民意见:" prop="outHandleAdvice">
<el-input v-model="postDataForm.outHandleAdvice"
type="textarea"
@ -336,6 +342,7 @@ export default {
outHandleImagesPC: [],
handleImages: [],
outHandleImages: [],
categoryId: ''
},
deptResultDTOSVisible: false,
evaluateDeptDTOSVisible: false,
@ -349,7 +356,10 @@ export default {
dialogImageUrl: "",
dialogVisible: false,
hideResident: false,
};
categoryVisible: false,
categoryIds: [],
categoryOptions: []
}
},
mounted() {
this.dataForm.id = this.$route.query.id;
@ -357,22 +367,14 @@ export default {
this.init();
},
filters: {
formatState(item) {
if (item.type === "project") {
if (
item.state === 0 &&
item.itemDeptDTOS &&
item.itemDeptDTOS.length > 0
) {
return "吹哨";
} else if (
item.state === 0 &&
item.itemDeptDTOS &&
item.itemDeptDTOS.length === 0
) {
return "办理";
} else if (item.state === 12) {
return "响应拟办";
formatState (item) {
if (item.type === 'project') {
if (item.state === 0 && item.itemDeptDTOS && item.itemDeptDTOS.length > 0) {
return '吹哨'
} else if (item.state === 0 && item.itemDeptDTOS && item.itemDeptDTOS.length === 0) {
return '办理'
} else if (item.state === 12 || item.state === 1001) {
return '响应拟办'
} else if (item.state === 13) {
return "直接办理";
} else if (item.state === 5) {
@ -460,14 +462,13 @@ export default {
},
],
handlerDeptIdRule: [
{
required: true,
message: this.$t("validate.required"),
trigger: "blur",
},
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
};
},
categoryIds: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
},
watch: {
"postDataForm.handleAdvice": function(val) {
@ -500,7 +501,12 @@ export default {
this.evaluateDeptDTOSVisible = false;
this.deptResultDTOSVisible = false;
}
},
if (val === 12 || val === 13) {
this.categoryVisible = true
} else {
this.categoryVisible = false
}
}
},
created: function() {
this.uploadUrl = `${
@ -508,7 +514,6 @@ export default {
}/oss/file/uploadImg?token=${Cookies.get("token")}`;
},
methods: {
//刷新
refreshProgress(){
this.timeloading = true;
this.$http
@ -523,7 +528,26 @@ export default {
})
.catch(() => {});
},
beforeAvatarUpload(file) {
getCategoryList () {
return this.$http.get('/events/category/list').then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
var data = res.data
this.getSelectedNode(data, data)
this.categoryOptions = data
}).catch(() => { })
},
getSelectedNode (nodeData, parent) {
nodeData.forEach(item => {
if ('children' in item && item.children.length === 0) {
delete item.children
} else if ('children' in item && item.children.length) {
this.getSelectedNode(item.children, item)
}
})
},
beforeAvatarUpload (file) {
if (this.postDataForm.outHandleImagesPC.length === 3) {
this.$message.error("最多上传3张图片!");
return false;
@ -702,13 +726,14 @@ export default {
this.isAble = false;
this.$nextTick(() => {
if (this.dataForm.id) {
this.postDataForm.handleAdvice = "";
this.postDataForm.outHandleAdvice = "";
this.postDataForm.handleCategory = "";
this.postDataForm.deptResultDTOS = [];
this.postDataForm.evaluateDeptDTOS = [];
this.getInfo();
this.getCommentList();
this.postDataForm.handleAdvice = ''
this.postDataForm.outHandleAdvice = ''
this.postDataForm.handleCategory = ''
this.postDataForm.deptResultDTOS = []
this.postDataForm.evaluateDeptDTOS = []
this.getInfo()
this.getCommentList()
this.getCategoryList()
}
});
},
@ -717,11 +742,59 @@ export default {
this.previewImgList.push(url);
},
// 获取信息
getInfo() {
this.$http
.get(`/events/item/${this.dataForm.id}`)
.then(({ data: res }) => {
getInfo () {
this.$http.get(`/events/item/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.timeloading = false;
this.dataForm = {
...this.dataForm,
...res.data
}
this.dataForm.handleProgressResultDTOS.forEach((item, index, arr) => {
// if (index === arr.length - 1) {
// item.type = 'issue-project'
// } else {
// item.type = 'project'
// }
item.type = 'project' // 2022.9.4 需求变更
})
this.dataForm.issueProgressResultDTOS.forEach((item, index, arr) => {
if (index === arr.length - 1) {
item.type = 'init'
} else {
item.type = 'issue'
}
})
this.timeLineList = [...this.dataForm.handleProgressResultDTOS, ...this.dataForm.issueProgressResultDTOS]
this.$nextTick(() => {
this.timeLineList.forEach((item, index) => {
const oDiv = document.getElementById(`content${index}`)
const oBorder = oDiv.parentNode.parentNode.parentNode.firstChild
if (item.type === 'issue' || item.type === 'issue-project') {
oBorder.style.borderLeft = '1px solid #ffa546'
} else if (item.type === 'project') {
oBorder.style.borderLeft = '1px solid #009688'
}
})
})
this.initBmap(this.dataForm.issueLatitude, this.dataForm.issueLongitude)
for (let index = 0; index < res.data.handleResultDTOS.length; index++) {
const handleResultDTO = res.data.handleResultDTOS[index]
if (handleResultDTO.select === true) {
this.dataForm.handleCategory = handleResultDTO.processResult
}
}
}).catch(() => { })
},
deleteComment (val) {
this.$confirm('确定要屏蔽该评论吗？屏蔽后不可恢复。', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http['post']('/events/item/deleteComment', { commentIds: [val] }).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
@ -835,29 +908,78 @@ export default {
.catch(() => {});
},
// 表单提交
dataFormSubmitHandle: debounce(
function() {
this.postDataForm.deptResultDTOS = [];
for (let i = 0; i < this.deptResult.length; i++) {
for (let j = 0; j < this.dataForm.deptResultDTOS.length; j++) {
if (this.deptResult[i] === this.dataForm.deptResultDTOS[j].deptId) {
this.postDataForm.deptResultDTOS.push(
this.dataForm.deptResultDTOS[j]
);
break;
}
dataFormSubmitHandle: debounce(function () {
this.postDataForm.categoryId = this.categoryIds[this.categoryIds.length - 1]
this.postDataForm.deptResultDTOS = []
for (let i = 0; i < this.deptResult.length; i++) {
for (let j = 0; j < this.dataForm.deptResultDTOS.length; j++) {
if (this.deptResult[i] === this.dataForm.deptResultDTOS[j].deptId) {
this.postDataForm.deptResultDTOS.push(this.dataForm.deptResultDTOS[j])
break
}
}
this.postDataForm.id = this.dataForm.id;
if (this.postDataForm.handleCategory === "") {
return this.$message.error("请选择处理选项");
}
<<<<<<< HEAD
if (this.deptResultDTOSVisible) {
if (
this.postDataForm.deptResultDTOS === undefined ||
this.postDataForm.deptResultDTOS.length <= 0
) {
return this.$message.error("请选择流转对象");
=======
} else {
this.postDataForm.deptResultDTOS = []
}
if (this.categoryVisible) {
if (this.postDataForm.categoryId === undefined || this.postDataForm.categoryId === '') {
return this.$message.error('请选择所属类别')
}
}
if (this.postDataForm.outHandleAdvice === '' && this.postDataForm.handleCategory !== 11) {
return this.$message.error('回复居民意见不能为空')
}
if (this.postDataForm.outHandleAdvice.length > 500 && this.postDataForm.handleCategory !== 11) {
return this.$message.error('回复居民意见不能超过500字')
}
if (this.postDataForm.handleAdvice === '') {
return this.$message.error('项目处理意见不能为空')
}
if (this.postDataForm.handleAdvice.length > 500) {
return this.$message.error('项目处理意见不能超过500字')
}
if (this.evaluateDeptDTOSVisible) {
this.postDataForm.evaluateDeptDTOS = this.dataForm.evaluateDeptDTOS
if (this.postDataForm.evaluateDeptDTOS.length !== this.dataForm.evaluateDeptDTOS.length) {
return this.$message.error('请完善满意度调查')
}
} else {
this.postDataForm.evaluateDeptDTOS = []
}
this.isAble = true
// 将对象遍历成数组
for (let oimg = 0; oimg < this.postDataForm.outHandleImagesPC.length; oimg++) {
this.postDataForm.outHandleImages[oimg] = this.postDataForm.outHandleImagesPC[oimg].url
}
for (let himg = 0; himg < this.postDataForm.handleImagesPC.length; himg++) {
this.postDataForm.handleImages[himg] = this.postDataForm.handleImagesPC[himg].url
}
this.$http['post'](
'/events/item/itemHandleSubmit', this.postDataForm).then(({ data: res }) => {
if (res.code !== 0) {
this.isAble = false
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
>>>>>>> 3ee6e782587c14f04784cbef302b82aa4114e8b8
}
} else {
this.postDataForm.deptResultDTOS = [];

628
src/views/modules/events/item-examine-detail-view.vue
View File

@ -0,0 +1,628 @@
<template>
<div class="project-handle">
<div style="width: 100%; height: 100%;">
<div class="project-detail">
<div class="project-detail-tip">议题详情</div>
<el-form label-position="right"
label-width="120px">
<el-form-item label="议题内容:"
prop="eventContent">
<div>{{dataForm.itemContent}}</div>
<el-image v-for="url in dataForm.images"
style="width: 100px; height: 100px; margin-right: 10px"
:key="url"
:src="url"
:preview-src-list="previewImgList"
@click="clickImg(url)">
</el-image>
<div v-if="dataForm.voice">
<audio controls style="height: 30px;">
<source :src="dataForm.voice" >
</audio>
</div>
</el-form-item>
<el-form-item v-if="dataForm.groupName && dataForm.groupName.length > 0"
label="项目来源:"
prop="ownGrid">
<div>{{dataForm.groupName}}</div>
</el-form-item>
<el-form-item label="上报时间:"
prop="distributeTime">
<div>{{dataForm.distributeTime}}</div>
</el-form-item>
<el-form-item label="上报人:"
prop="nickName">
<div>{{dataForm.nickName}}</div>
</el-form-item>
<el-form-item label="电话:"
prop="mobile">
<div>{{dataForm.mobile}}</div>
</el-form-item>
<el-form-item label="所属类别:"
prop="categoryName">
<div>{{dataForm.categoryName}}</div>
</el-form-item>
<el-form-item label="项目态度:">
<span>表达态度 {{dataForm.approveNum + dataForm.opposeNum + dataForm.commentNum}}</span>&nbsp;&nbsp;
<span>评论 {{dataForm.commentNum}}</span>&nbsp;&nbsp;
<span>支持 {{dataForm.approveNum}}</span>&nbsp;&nbsp;
<span>不支持 {{dataForm.opposeNum}}</span>
</el-form-item>
<el-form-item label="项目评论:">
<el-button type="text"
@click="innerVisible = true">查看评论</el-button>
</el-form-item>
</el-form>
<div class="container">
<div class="location"><span style="font-weight: bold;color: #606266">上报位置:</span> {{dataForm.issueAddress}}</div>
<div id="map"></div>
</div>
</div>
<div class="project-progress">
<div class="project-progress-tip">处理进展</div>
<el-timeline>
<el-timeline-item v-for="(item, index) in timeLineList"
:key="item.id"
:color="item.type === 'init' ? 'red' : item.type === 'project' ? '#009688' : '#ffa546'">
<div :id="`content${index}`"
style="line-height:25px; ">
<div :style="{ marginBottom: '10px', width: '35px', height: '20px', fontSize: '12px', borderRadius: '4px', background: item.type === 'project' ? '#009688': item.type === 'issue' || item.type === 'issue-project' ? '#ffa546' : '', color: '#fff', textAlign: 'center', lineHeight: '20px'}"
v-if="item.type !== 'init'">
{{item.type === 'project' ? '项目': item.type === 'issue' || item.type === 'issue-project' ? '议题' : ''}}
</div>
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">[{{item | formatState}}]</span> {{item.createdTime}}</div>
<div v-if="item.state === 3">
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">来源社群：</span>{{item.groupName}}</div>
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理人：</span>{{item.handlerDept}}</div>
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理人电话：</span>{{item.mobile}}</div>
</div>
<div v-if="item.state !== 3">
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理部门：</span>{{item.handlerDept}}</div>
</div>
<div v-if="item.itemDeptDTOS && item.itemDeptDTOS.length > 0"
style="width: 100%; display: flex;">
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">被吹哨部门：</span> </div>
<div>
<span v-for="(csDept, index1) in item.itemDeptDTOS"
:key="index1">
{{ csDept.deptName }}<br />
</span>
</div>
</div>
<div><span style="font-weight: bold; color: rgb(96, 98, 102);">处理意见：</span> {{item.advice}}</div>
<div style="display: flex;">
<el-image v-for="url in item.images"
style="width: 60px; height: 60px; object-fit: cover; margin-right: 8px; border-radius: 2px;"
:key="url"
:src="url"
:preview-src-list="previewImgList"
alt="处理图片"
@click="clickImg(url)">
</el-image>
</div>
</div>
</el-timeline-item>
</el-timeline>
</div>
<div class="handle-operation">
<div class="handle-operation-tip">处理操作</div>
<el-form ref="dataForm"
label-width="120px"
label-position="right"
style="width: 720px;"
:model="dataForm"
:rules="dataRule">
<el-form-item label="审批"
prop="checkFlag" label-width="120px">
<el-radio-group v-model="postDataForm.checkFlag">
<el-radio :label="0">同意</el-radio>
<el-radio :label="1">驳回</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="意见:" prop="outHandleAdvice">
<el-input v-model="postDataForm.outHandleAdvice"
type="textarea"
maxlength="100"
show-word-limit
placeholder="请输入"></el-input>
</el-form-item>
<el-form-item style="float: right;">
<el-button size="small"
type="primary"
:disabled="isAble"
style="width: 95px"
@click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
<el-button size="small"
style="width: 95px"
@click="backToItemDeal">返回</el-button>
</el-form-item>
</el-form>
</div>
</div>
<el-dialog width="90%"
title="评论"
:visible.sync="innerVisible"
append-to-body>
<el-table :data="commentsDTOs"
border
style="width: 100%;">
<el-table-column prop="user.userName"
label="发言人"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="commentTime"
label="发言时间"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="content"
label="发言内容"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="replyComment.userName"
label="被回复人"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="replyComment.content"
label="被回复内容"
header-align="center"
align="center"></el-table-column>
<el-table-column :label="$t('handle')"
header-align="center"
align="center"
width="150">
<template slot-scope="scope">
<el-button v-if="scope.row.shieldFlag === '0'"
type="button"
size="small"
@click="deleteComment(scope.row.commentId)">屏蔽</el-button>
<el-button v-if="scope.row.shieldFlag === '1'"
type="text"
size="small">已屏蔽</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination :current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="limitVal"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandleNew"
@current-change="pageCurrentChangeHandleNew">
</el-pagination>
</el-dialog>
</div>
</template>
<script>
import BMap from 'BMap'
import 'element-ui/lib/theme-chalk/timeline.css'
import 'element-ui/lib/theme-chalk/timeline-item.css'
import 'element-ui/lib/theme-chalk/image.css'
import debounce from 'lodash/debounce'
import 'quill/dist/quill.snow.css'
export default {
name: 'itemDealDetailView',
data () {
return {
map: '',
innerVisible: false,
dataForm: {
id: '',
nickName: '',
distributeTime: '',
itemContent: '',
images: [],
issueAddress: '',
handleProgressResultDTOS: [],
issueProgressResultDTOS: [],
outHandleAdvice: '',
issueLatitude: '',
issueLongitude: '',
voice: ''
},
isAble: false,
previewImgList: [],
commentsDTOs: [],
pageIndex: 0,
limitVal: 10,
total: null,
postDataForm: {
itemId: '',
checkFlag: 3,
outHandleAdvice: ''
},
timeLineList: [],
options: []
}
},
mounted () {
this.dataForm.id = this.$route.query.id
this.init()
},
filters: {
formatState (item) {
if (item.type === 'project') {
if (item.state === 0 && item.itemDeptDTOS && item.itemDeptDTOS.length > 0) {
return '吹哨'
} else if (item.state === 0 && item.itemDeptDTOS && item.itemDeptDTOS.length === 0) {
return '回应'
} else if (item.state === 5) {
return '不予受理'
} else if (item.state === 10) {
return '结案'
} else if (item.state === 11) {
return '结案申请'
} else if (item.state === 12 || item.state === 1001) {
return '响应拟办'
} else if (item.state === 13) {
return '直接办理'
} else if (item.state === 15) {
return '社区吹哨'
} else if (item.state === 20) {
return '网格化平台-受理'
} else if (item.state === 25) {
return '网格化平台-立案'
} else if (item.state === 30) {
return '网格化平台-派遣'
} else if (item.state === 35) {
return '网格化平台-中间再派'
} else if (item.state === 40) {
return '网格化平台-接单'
} else if (item.state === 45) {
return '网格化平台-处理'
} else if (item.state === 50) {
return '网格化平台-中间督办'
} else if (item.state === 55) {
return '网格化平台-催办'
} else if (item.state === 60) {
return '网格化平台-结案'
}
} else if (item.type === 'issue' || item.type === 'init') {
if (item.state === 0) {
return '审核通过'
} else if (item.state === 1) {
return '回应'
} else if (item.state === 2) {
return '关闭'
} else if (item.state === 3) {
return '转议题'
}
} else if (item.type === 'issue-project') {
return '转项目'
}
}
},
computed: {
dataRule () {
return {
checkFlag: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
outHandleAdvice: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
},
methods: {
backToItemDeal () {
this.$parent.selectComponent = 'ItemExamine'
},
initBmap (latitude, longitude) {
this.map = new BMap.Map('map')
const point = new BMap.Point(longitude, latitude)
var marker = new BMap.Marker(point)
this.map.addOverlay(marker)
this.map.centerAndZoom(point, 13)
this.map.enableScrollWheelZoom(true)
},
init () {
this.isAble = false
this.$nextTick(() => {
if (this.dataForm.id) {
this.getInfo()
this.getCommentList()
}
})
},
clickImg (url) {
this.previewImgList = []
this.previewImgList.push(url)
},
// 获取信息
getInfo () {
this.$http.get(`/events/item/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
this.dataForm.handleProgressResultDTOS.forEach((item, index, arr) => {
if (index === arr.length - 1) {
// item.type = 'issue-project'
item.type = 'project'
} else {
item.type = 'project'
}
})
this.dataForm.issueProgressResultDTOS.forEach((item, index, arr) => {
if (index === arr.length - 1) {
item.type = 'init'
} else {
item.type = 'issue'
}
})
this.timeLineList = [...this.dataForm.handleProgressResultDTOS, ...this.dataForm.issueProgressResultDTOS]
this.$nextTick(() => {
this.timeLineList.forEach((item, index) => {
const oDiv = document.getElementById(`content${index}`)
const oBorder = oDiv.parentNode.parentNode.parentNode.firstChild
if (item.type === 'issue' || item.type === 'issue-project') {
oBorder.style.borderLeft = '1px solid #ffa546'
} else if (item.type === 'project') {
oBorder.style.borderLeft = '1px solid #009688'
}
})
})
this.initBmap(this.dataForm.issueLatitude, this.dataForm.issueLongitude)
}).catch(() => { })
},
deleteComment (val) {
this.$confirm('确定要屏蔽该评论吗？屏蔽后不可恢复。', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http['post']('/events/item/deleteComment', { commentIds: [val] }).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.getCommentList()
}
})
}).catch(() => { })
}).catch(() => {
})
},
pageSizeChangeHandleNew (val) {
this.pageIndex = 1
this.limitVal = val
this.getCommentList()
},
pageCurrentChangeHandleNew (val) {
this.pageIndex = val
this.getCommentList()
},
// 评论
getCommentList () {
this.$http.get('/events/item/comments', { params: { id: this.dataForm.id, order: this.order, orderField: this.orderField, page: this.pageIndex, limit: this.limitVal }
}).then(({ data: res }) => {
if (res.code !== 0) {
this.commentsDTOs = []
this.total = 0
return this.$message.error(res.msg)
}
this.commentsDTOs = res.data.list
this.total = res.data.total
}).catch(() => { })
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.postDataForm.itemId = this.dataForm.id
console.log(this.postDataForm.checkFlag)
if (this.postDataForm.checkFlag === 3) {
return this.$message({
message: '请选择审批结果',
type: 'error',
duration: 2000,
onClose: () => {
return false
}
})
}
if (!this.postDataForm.outHandleAdvice) {
return this.$message({
message: '请填写意见',
type: 'error',
duration: 2000,
onClose: () => {
return false
}
})
}
this.isAble = true
// 将对象遍历成数组
this.$http['post'](
'/events/item/examineCase', this.postDataForm).then(({ data: res }) => {
if (res.code !== 0) {
this.isAble = false
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
// this.visible = false
// this.$emit('refreshDataList')
}
})
this.$parent.selectComponent = 'ItemExamine'
}).catch(() => { })
}, 1000, { 'leading': true, 'trailing': false })
}
}
</script>
<style>
.hide .el-upload--picture-card {
display: none;
}
</style>
<style lang="scss">
.project-handle {
.el-timeline {
padding-left: 9px;
font-size: 13px;
}
.el-textarea {
width: 600px !important;
}
.el-input {
width: 600px !important;
}
}
.el-form-item__label {
font-weight: bold;
}
</style>
<style lang="scss" scoped>
.project-handle {
width: 100%;
height: calc(100vh - 120px);
background: #ffffff;
box-sizing: border-box;
padding: 10px;
.project-detail {
width: 79%;
height: 49%;
border: 2px solid #ccc;
box-sizing: border-box;
padding: 10px;
padding-top: 20px;
float: left;
margin-bottom: 1%;
position: relative;
.project-detail-tip {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 30px;
line-height: 30px;
color: #ffffff;
background: #4ac38b;
text-align: center;
}
.el-form {
width: 58%;
height: 100%;
float: left;
overflow-y: auto;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #aaa;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #fff;
}
}
.container {
width: 40%;
height: 100%;
float: right;
.location {
height: 30px;
line-height: 30px;
}
#map {
width: 100%;
height: calc(100% - 30px);
}
}
}
.project-progress {
width: 20%;
height: 100%;
float: right;
border: 2px solid #ccc;
box-sizing: border-box;
margin-left: 1%;
padding-top: 40px;
overflow-y: auto;
position: relative;
.project-progress-tip {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 30px;
line-height: 30px;
color: #ffffff;
background: #0098ff;
text-align: center;
}
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #aaa;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #ccc;
}
}
.handle-operation {
padding-top: 20px;
box-sizing: border-box;
width: 79%;
height: 49%;
box-sizing: border-box;
border: 2px solid #ccc;
float: left;
overflow-y: auto;
position: relative;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #aaa;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #ccc;
}
.handle-operation-tip {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 30px;
line-height: 30px;
color: #ffffff;
background: #ff7600;
text-align: center;
}
}
}
</style>
Write Preview
Loading…
Cancel
Save