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

党群议事页面调整

master
liuchuang 6 years ago
parent
d646bc4014
commit
44244e2aa8
2 changed files with 606 additions and 0 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. 371
      src/views/modules/events/item-deal-detail-view.vue
  2. 235
      src/views/modules/events/item-deal-list.vue

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

@ -0,0 +1,371 @@
<template>
<div class="project-handle">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" style="width: 100%; height: 100%;">
<div class="project-detail">
<el-form label-position="right" label-width="120px">
<el-form-item label="议题内容:" prop="eventContent">
<div>{{dataForm.itemContent}}</div>
<span v-for="(imgUrl, index) in dataForm.images" :key="index" style="margin: 5px">
<el-popover placement="bottom" title="" trigger="click">
<img :src="imgUrl" style='width: 300px;height: 300px;'>
<img slot="reference" :src="imgUrl" :alt="imgUrl" style="max-height: 100px;max-width: 100px">
</el-popover>
</span>
</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="categoryName">
<div>{{dataForm.categoryName}}</div>
</el-form-item>
</el-form>
<div class="container">
<div class="location">上报位置: {{dataForm.issueAddress}}</div>
<div id="map"></div>
</div>
</div>
<div class="project-progress">
<el-timeline>
<el-timeline-item
v-for="(activity, index) in this.dataForm.handleProgressResultDTOS"
:key="index"
:icon="activity.icon"
:type="activity.type"
:color="activity.color"
:size="activity.size">
<div v-if="activity.itemDeptDTOS.length > 0">{{activity.createdTime}} {{ '【吹哨】' }}</div>
<div v-else-if="activity.itemDeptDTOS.length <= 0 && activity.progressName !== '【审核通过】'">{{activity.createdTime}} {{ '【回应】' }}</div>
<div v-else>{{activity.createdTime}} {{activity.progressName}}</div>
<div>处理部门： {{activity.handlerDept}}</div>
<div v-if="activity.itemDeptDTOS.length > 0">
吹哨部门：<span v-for="(csDept, index1) in activity.itemDeptDTOS" :key="index1" :size="csDept.size">
{{ csDept.deptName }}
</span>
</div>
<div>处理意见： {{activity.advice}}</div>
</el-timeline-item>
</el-timeline>
</div>
<div class="handle-operation">
<el-form label-position="right" label-width="120px">
<el-form-item label="处理:" prop="handleCategory">
<el-select v-model="postDataForm.handleCategory" placeholder="请选择">
<el-option
v-for="handleResultDTO in dataForm.handleResultDTOS"
:key="handleResultDTO.processResult"
:label="handleResultDTO.processName"
:value="handleResultDTO.processResult">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="吹哨部门:" prop="deptResultDTOS" v-if="deptResultDTOSVisible">
<el-checkbox-group v-model="postDataForm.deptResultDTOS">
<el-checkbox v-for="deptResultDTO in dataForm.deptResultDTOS" :label="deptResultDTO" :key="deptResultDTO.deptName">{{deptResultDTO.deptName}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="回复居民意见:" prop="handleAdvice">
<el-input v-model="postDataForm.handleAdvice" type="textarea" placeholder="请您选择居民诉求的处理情况及答复意见，向居民公开展示"></el-input>
</el-form-item>
<el-form-item label="项目处理意见:" prop="outHandleAdvice">
<el-input v-model="postDataForm.outHandleAdvice" type="textarea" placeholder="请您填写项目的实际办理情况(自己处理、吹哨报道、内部协调)，便于相关部门了解项目的实际情况"></el-input>
</el-form-item>
<el-form-item label="满意度评价:" prop="evaluateDeptDTOS" v-if="evaluateDeptDTOSVisible">
<div v-for="(evaluateDeptDTO, index) in dataForm.evaluateDeptDTOS" :key="index">
<label>{{evaluateDeptDTO.deptName}}</label>&nbsp;
<el-radio-group v-model="evaluateDeptDTO.evaluationLevel">
<el-radio :label="2">非常满意</el-radio>
<el-radio :label="1">基本满意</el-radio>
<el-radio :label="0">不满意</el-radio>
</el-radio-group>
</div>
</el-form-item>
</el-form>
<template>
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
<el-button @click="backToItemDeal">返回</el-button>
</template>
</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 debounce from 'lodash/debounce'
export default {
name: 'itemDealDetailView',
data () {
return {
map: '',
dataForm: {
id: '',
nickName: '',
distributeTime: '',
itemContent: '',
images: [],
issueAddress: '',
handleProgressResultDTOS: [],
handleResultDTOS: [],
deptResultDTOS: [],
evaluateDeptDTOS: [],
handleAdvice: '',
outHandleAdvice: '',
handleCategory: '',
issueLatitude: '',
issueLongitude: ''
},
postDataForm: {
id: '',
handleAdvice: '',
outHandleAdvice: '',
handleCategory: '',
deptResultDTOS: [],
evaluateDeptDTOS: []
},
deptResultDTOSVisible: false,
evaluateDeptDTOSVisible: false
}
},
mounted () {
this.dataForm.id = this.$route.query.id
this.init()
},
computed: {
dataRule () {
return {
handleAdvice: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
outHandleAdvice: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
handleCategory: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
deptResultDTOS: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
evaluateDeptDTOS: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
},
watch: {
'postDataForm.handleAdvice': function (val) {
this.dataForm.handleAdvice = val
},
'postDataForm.outHandleAdvice': function (val) {
this.dataForm.outHandleAdvice = val
},
'postDataForm.handleCategory': function (val) {
if (val === 1) {
this.deptResultDTOSVisible = true
this.evaluateDeptDTOSVisible = false
for (let index = 0; index < this.dataForm.deptResultDTOS.length; index++) {
const deptResultDTO = this.dataForm.deptResultDTOS[index]
if (deptResultDTO.selected === true) {
this.postDataForm.deptResultDTOS.push(deptResultDTO)
}
}
} else if (val === 10) {
if (this.dataForm.evaluateDeptDTOS.length === 0) {
return
}
this.evaluateDeptDTOSVisible = true
this.deptResultDTOSVisible = false
} else {
this.evaluateDeptDTOSVisible = false
this.deptResultDTOSVisible = false
}
}
},
methods: {
backToItemDeal () {
this.$parent.selectComponent = 'ItemDeal'
},
initBmap (latitude, longitude) {
this.map = new BMap.Map('map')
const point = new BMap.Point(120.38821849395045, 36.120219258412966)
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.postDataForm.handleAdvice = ''
this.postDataForm.outHandleAdvice = ''
this.postDataForm.handleCategory = ''
this.postDataForm.deptResultDTOS = []
this.postDataForm.evaluateDeptDTOS = []
this.getInfo()
}
})
},
// 获取信息
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.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(() => {})
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.postDataForm.id = this.dataForm.id
if (this.postDataForm.handleCategory === '') {
return this.$message.error('请选择处理选项')
}
if (this.deptResultDTOSVisible) {
if (this.postDataForm.deptResultDTOS === undefined || this.postDataForm.deptResultDTOS.length <= 0) {
return this.$message.error('请选择流转对象')
}
} else {
this.postDataForm.deptResultDTOS = []
}
if (this.postDataForm.handleAdvice === '') {
return this.$message.error('回复居民意见不能为空')
}
if (this.postDataForm.handleAdvice.length > 500) {
return this.$message.error('回复居民意见不能超过500字')
}
if (this.postDataForm.outHandleAdvice === '') {
return this.$message.error('项目处理意见不能为空')
}
if (this.postDataForm.outHandleAdvice > 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.$http['post'](
'/events/item/itemHandleSubmit', this.postDataForm).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">
.project-handle {
.el-timeline {
padding-left: 9px;
font-size: 13px;
}
}
</style>
<style lang="scss" scoped>
.project-handle {
width: 100%;
height: calc(100vh - 50px - 38px - 15px);
background: #ffffff;
box-sizing: border-box;
padding: 10px;
.project-detail {
width: 79%;
height: 49%;
border: 2px solid #ccc;
box-sizing: border-box;
padding: 10px;
float:left;
margin-bottom: 1%;
.el-form {
width: 58%;
height: 100%;
float:left;
overflow-y:auto;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #fff;
}
&::-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: 20px;
overflow-y:auto;
&::-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>

235
src/views/modules/events/item-deal-list.vue
View File

@ -0,0 +1,235 @@
<template>
<el-card shadow="never"
class="aui-card--fill">
<div class="mod-item__item}">
<el-form :inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()">
<el-form-item label="街道">
<el-select v-model="dataForm.streetId"
placeholder="请选择"
clearable
@change="getCommunityList">
<el-option v-for="item in streetOptions"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="社区">
<el-select v-model="dataForm.communityId"
placeholder="请选择"
clearable
@change="getGridList">
<el-option v-for="item in communityOptions"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="网格">
<el-select v-model="dataForm.gridId" clearable
placeholder="请选择">
<el-option v-for="item in gridOptions"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="时间"
prop="startTime">
<el-date-picker v-model="dataForm.startTime"
type="date"
:picker-options="pickerBeginDateBefore"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
placeholder="选择日期时间">
</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="选择日期时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
</el-form-item>
</el-form>
<el-table v-loading="dataListLoading"
:data="dataList"
border
@selection-change="dataListSelectionChangeHandle"
style="width: 100%;">
<el-table-column type="selection"
header-align="center"
align="center"
width="50"></el-table-column>
<el-table-column label="序号"
type="index"
show-overflow-tooltip
width="50"></el-table-column>
<el-table-column prop="itemContent"
label="项目内容"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="createdTime"
label="转成项目时间"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="nickName"
label="提交人"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="participantsNum"
label="参与人数"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="approveNum"
label="支持"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="opposeNum"
label="反对"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="commentNum"
label="评论数"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="browseNum"
label="浏览数"
header-align="center"
align="center"></el-table-column>
<el-table-column :label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150">
<template slot-scope="scope">
<el-button v-if="$hasPermission('events:item:deal')"
type="text"
size="small"
@click="dealAction(scope.row.id)">{{ $t('deal') }}</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>
<!-- 弹窗, 新增 / 修改 -->
<detail v-if="detailVisible"
ref="detail"
@refreshDataList="getDataList"></detail>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import Detail from './item-deal-detail'
export default {
mixins: [mixinViewModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/events/item/page',
getDataListIsPage: true
},
detailVisible: false,
dataForm: {
id: '',
itemState: '0',
startTime: '',
endTime: '',
streetId: '',
communityId: '',
gridId: ''
},
streetOptions: [],
communityOptions: [],
gridOptions: [],
pickerBeginDateBefore: {
disabledDate: (time) => {
let beginDateVal = this.dataForm.startTime
if (beginDateVal) {
return time.getTime() > new Date(beginDateVal).getTime()
}
}
},
pickerBeginDateAfter: {
disabledDate: (time) => {
let EndDateVal = this.dataForm.endTime
if (EndDateVal) {
return time.getTime() < new Date(EndDateVal).getTime()
}
}
}
}
},
components: {
Detail
},
created: function () {
this.getStreetList()
},
methods: {
dealAction (id) {
this.$parent.selectComponent = 'ItemDealDetailView'
this.$router.push({ path: '/events-item-deal', query: { id: id } })
},
getStreetList () {
this.$http.get(`/sys/dept/sublist/` + (localStorage.getItem('street') === null ? '1169154711480528897' : localStorage.getItem('street'))).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.streetOptions = res.data
}).catch(() => { })
},
getCommunityList () {
if (this.dataForm.streetId === '') {
this.communityOptions = []
this.gridOptions = []
this.dataForm.communityId = ''
this.dataForm.gridId = ''
return
}
this.dataForm.communityId = ''
this.dataForm.gridId = ''
this.$http.get(`/sys/dept/sublist/` + this.dataForm.streetId).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.communityOptions = res.data
}).catch(() => { })
},
getGridList () {
if (this.dataForm.communityId === '') {
this.gridOptions = []
this.dataForm.gridId = ''
return
}
this.dataForm.gridId = ''
this.$http.get(`/sys/dept/sublist/` + this.dataForm.communityId).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.gridOptions = res.data
}).catch(() => { })
}
}
}
</script>
Write Preview
Loading…
Cancel
Save