26 changed files with 3753 additions and 1973 deletions
@ -1 +1,5 @@ |
|||
/src/icons/iconfont.js |
|||
rules: { |
|||
// allow debugger during development |
|||
'no-debugger': 'error', |
|||
} |
|||
@ -0,0 +1,234 @@ |
|||
<template> |
|||
<el-card shadow="never" |
|||
class="aui-card--fill"> |
|||
<div class="mod-demo__epdcevents}"> |
|||
<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 label="序号" |
|||
type="index" |
|||
show-overflow-tooltip |
|||
align="center" |
|||
width="50"></el-table-column> |
|||
<el-table-column prop="issueContent" |
|||
label="议题内容" |
|||
header-align="center" |
|||
width="330" |
|||
align="center"></el-table-column> |
|||
<el-table-column prop="createdTime" |
|||
label="提交时间" |
|||
header-align="center" |
|||
width="160" |
|||
align="center"></el-table-column> |
|||
<el-table-column prop="nickName" |
|||
label="提交人" |
|||
header-align="center" |
|||
width="120" |
|||
align="center"></el-table-column> |
|||
<el-table-column prop="participateNum" |
|||
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:change:look')" |
|||
type="text" |
|||
size="small" |
|||
@click="detailAction(scope.row.id)">{{ $t('look') }}</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 './issue-detail' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
name: 'issueChangelist', |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/events/issue/page', |
|||
getDataListIsPage: true |
|||
}, |
|||
detailVisible: false, |
|||
dataForm: { |
|||
startTime: '', |
|||
endTime: '', |
|||
streetId: '', |
|||
communityId: '', |
|||
gridId: '', |
|||
state: '4' |
|||
}, |
|||
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: { |
|||
detailAction (id) { |
|||
this.$parent.selectComponent = 'IssueCloseDetailView' |
|||
this.$router.push({ path: '/events-issue-change', 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> |
|||
@ -1,232 +1,25 @@ |
|||
<template> |
|||
<el-card shadow="never" |
|||
class="aui-card--fill"> |
|||
<div class="mod-demo__epdcevents}"> |
|||
<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 label="序号" |
|||
type="index" |
|||
show-overflow-tooltip |
|||
width="50"></el-table-column> |
|||
<el-table-column prop="issueContent" |
|||
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="participateNum" |
|||
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:change:look')" |
|||
type="text" |
|||
size="small" |
|||
@click="detailAction(scope.row.id)">{{ $t('look') }}</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> |
|||
<keep-alive include="issueChangelist"> |
|||
<component :is="selectComponent"></component> |
|||
</keep-alive> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import Detail from './issue-detail' |
|||
import IssueChangeList from './issue-change-list' |
|||
import IssueCloseDetailView from './issue-close-detail-view' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/events/issue/page', |
|||
getDataListIsPage: true |
|||
}, |
|||
detailVisible: false, |
|||
dataForm: { |
|||
startTime: '', |
|||
endTime: '', |
|||
streetId: '', |
|||
communityId: '', |
|||
gridId: '', |
|||
state: '4' |
|||
}, |
|||
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() |
|||
} |
|||
} |
|||
} |
|||
selectComponent: IssueChangeList |
|||
} |
|||
}, |
|||
components: { |
|||
Detail |
|||
}, |
|||
created: function () { |
|||
this.getStreetList() |
|||
}, |
|||
methods: { |
|||
detailAction (id) { |
|||
this.detailVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.detail.dataForm.id = id |
|||
this.$refs.detail.init() |
|||
}) |
|||
}, |
|||
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(() => { }) |
|||
} |
|||
IssueChangeList, |
|||
IssueCloseDetailView |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,272 @@ |
|||
<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="议题内容:"> |
|||
<div>{{dataForm.issueContent}}</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="ownGrid"> |
|||
<div>{{dataForm.ownGrid}}</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="议题态度:"> |
|||
<span>表达态度 {{dataForm.approveNum + dataForm.opposeNum + dataForm.commentNum}}</span> |
|||
<span>评论 {{dataForm.commentNum}}</span> |
|||
<span>支持 {{dataForm.approveNum}}</span> |
|||
<span>反对 {{dataForm.opposeNum}}</span> |
|||
</el-form-item> |
|||
<el-form-item label="议题评论:"> |
|||
<el-button type="primary" @click="innerVisible = true">查看评论</el-button> |
|||
</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-form-item> |
|||
<el-timeline> |
|||
<el-timeline-item v-for="(jobFeedbackDTO, index) in dataForm.feedbackDTOList" :key="index" placement="top"> |
|||
<div v-if="jobFeedbackDTO.stateName === '【反馈】'">{{jobFeedbackDTO.createdTime}} {{'【回应】'}}</div> |
|||
<div v-else>{{jobFeedbackDTO.createdTime}} {{jobFeedbackDTO.stateName}}</div> |
|||
<div>处理部门： {{jobFeedbackDTO.handlerDept}}</div> |
|||
<div>处理意见： {{jobFeedbackDTO.advice}}</div> |
|||
</el-timeline-item> |
|||
</el-timeline> |
|||
</el-form-item> |
|||
</div> |
|||
</el-form> |
|||
<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' |
|||
export default { |
|||
name: 'IssueCloseDetailView', |
|||
data () { |
|||
return { |
|||
map: '', |
|||
innerVisible: false, |
|||
dataForm: { |
|||
id: '', |
|||
nickName: '', |
|||
distributeTime: '', |
|||
issueContent: '', |
|||
feedbackDTOList: [], |
|||
images: [] |
|||
}, |
|||
order: '', |
|||
orderField: '', |
|||
pageIndex: 1, |
|||
limitVal: 10, |
|||
total: 0, |
|||
commentsDTOs: [] |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.dataForm.id = this.$route.query.id |
|||
this.init() |
|||
}, |
|||
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.getInfo() |
|||
this.getCommentList() |
|||
} |
|||
}) |
|||
}, |
|||
deleteComment (val) { |
|||
this.$http['post']('/events/issue/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(() => {}) |
|||
}, |
|||
getInfo () { |
|||
this.$http.get(`/events/issue/issueContentDetail/${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) |
|||
}).catch(() => {}) |
|||
}, |
|||
pageSizeChangeHandleNew (val) { |
|||
this.pageIndex = 1 |
|||
this.limitVal = val |
|||
this.getCommentList() |
|||
}, |
|||
pageCurrentChangeHandleNew (val) { |
|||
this.pageIndex = val |
|||
this.getCommentList() |
|||
}, |
|||
getCommentList () { |
|||
this.$http.get('/events/issue/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(() => {}) |
|||
} |
|||
} |
|||
} |
|||
</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: 70%; |
|||
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> |
|||
@ -0,0 +1,235 @@ |
|||
<template> |
|||
<el-card shadow="never" |
|||
class="aui-card--fill"> |
|||
<div class="mod-demo__epdcevents}"> |
|||
<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 label="序号" |
|||
type="index" |
|||
show-overflow-tooltip |
|||
align="center" |
|||
width="50"></el-table-column> |
|||
<el-table-column prop="issueContent" |
|||
label="议题内容" |
|||
header-align="center" |
|||
width="330" |
|||
align="center"></el-table-column> |
|||
<el-table-column prop="createdTime" |
|||
label="提交时间" |
|||
header-align="center" |
|||
width="160" |
|||
align="center"></el-table-column> |
|||
<el-table-column prop="nickName" |
|||
label="提交人" |
|||
header-align="center" |
|||
width="120" |
|||
align="center"></el-table-column> |
|||
<el-table-column prop="participateNum" |
|||
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:close:look')" |
|||
type="text" |
|||
size="small" |
|||
@click="detailAction(scope.row.id)">{{ $t('look') }}</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 './issue-close-detail-view' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
name: 'IssueCloseList', |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/events/issue/page', |
|||
getDataListIsPage: true |
|||
}, |
|||
detailVisible: false, |
|||
dataForm: { |
|||
startTime: '', |
|||
endTime: '', |
|||
streetId: '', |
|||
communityId: '', |
|||
gridId: '', |
|||
state: '2' |
|||
}, |
|||
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: { |
|||
detailAction (id) { |
|||
this.$parent.selectComponent = 'IssueCloseDetailView' |
|||
this.$router.push({ path: '/events-issue-close', 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> |
|||
@ -1,233 +1,25 @@ |
|||
<template> |
|||
<el-card shadow="never" |
|||
class="aui-card--fill"> |
|||
<div class="mod-demo__epdcevents}"> |
|||
<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 label="序号" |
|||
type="index" |
|||
show-overflow-tooltip |
|||
width="50"></el-table-column> |
|||
<el-table-column prop="issueContent" |
|||
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="participateNum" |
|||
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:close:look')" |
|||
type="text" |
|||
size="small" |
|||
@click="detailAction(scope.row.id)">{{ $t('look') }}</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> |
|||
<keep-alive include="IssueCloseList"> |
|||
<component :is="selectComponent"></component> |
|||
</keep-alive> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import Detail from './issue-detail' |
|||
import IssueClose from './issue-close-list' |
|||
import IssueCloseDetailView from './issue-close-detail-view' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/events/issue/page', |
|||
getDataListIsPage: true |
|||
}, |
|||
detailVisible: false, |
|||
dataForm: { |
|||
startTime: '', |
|||
endTime: '', |
|||
streetId: '', |
|||
communityId: '', |
|||
gridId: '', |
|||
state: '2' |
|||
}, |
|||
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() |
|||
} |
|||
} |
|||
} |
|||
selectComponent: IssueClose |
|||
} |
|||
}, |
|||
components: { |
|||
Detail |
|||
}, |
|||
created: function () { |
|||
this.getStreetList() |
|||
}, |
|||
methods: { |
|||
detailAction (id) { |
|||
this.detailVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.detail.dataForm.id = id |
|||
this.$refs.detail.init() |
|||
}) |
|||
}, |
|||
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(() => { }) |
|||
} |
|||
IssueClose, |
|||
IssueCloseDetailView |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,283 @@ |
|||
<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.issueContent}}</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="ownGrid"> |
|||
<div>{{dataForm.ownGrid}}</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> |
|||
<div class="container"> |
|||
<div class="location">上报位置: {{dataForm.address}}</div> |
|||
<div id="map"></div> |
|||
</div> |
|||
</div> |
|||
<div class="project-progress"> |
|||
<el-form-item> |
|||
<el-timeline> |
|||
<el-timeline-item v-for="(jobFeedbackDTO, index) in dataForm.jobFeedbackDTOS" :key="index" placement="top"> |
|||
<div v-if="jobFeedbackDTO.stateName === '【反馈】'">{{jobFeedbackDTO.createdTime}} {{'【回应】'}}</div> |
|||
<div v-else>{{jobFeedbackDTO.createdTime}} {{jobFeedbackDTO.stateName}}</div> |
|||
<div>处理部门： {{jobFeedbackDTO.handlerDept}}</div> |
|||
<div>处理意见： {{jobFeedbackDTO.advice}}</div> |
|||
</el-timeline-item> |
|||
</el-timeline> |
|||
</el-form-item> |
|||
</div> |
|||
<div class="handle-operation"> |
|||
<el-form label-width="120px" label-position="right" style="width: 720px;" > |
|||
<el-form-item label="处理:" prop="state"> |
|||
<el-select v-model="dataForm.state" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in verifyOptions" |
|||
:key="item.verifyFlag" |
|||
:label="item.verifyTitle" |
|||
:value="item.verifyFlag"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="处理意见:" prop="advice"> |
|||
<el-input v-model="dataForm.advice" type="textarea" placeholder="请您填写居民诉求的处理情况及答复意见，向居民公开展示，500字以内"></el-input> |
|||
</el-form-item> |
|||
<el-form-item style="float: right;"> |
|||
<el-button size="small" type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> |
|||
<el-button size="small" @click="backToItemDeal">返回</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</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: '', |
|||
issueContent: '', |
|||
nickName: '', |
|||
distributeTime: '', |
|||
advice: '', |
|||
state: '', |
|||
jobFeedbackDTOS: [], |
|||
images: [] |
|||
}, |
|||
verifyOptions: [{ |
|||
verifyFlag: '1', |
|||
verifyTitle: '回应' |
|||
}, { |
|||
verifyFlag: '2', |
|||
verifyTitle: '关闭议题' |
|||
}, { |
|||
verifyFlag: '4', |
|||
verifyTitle: '转为项目' |
|||
}] |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.dataForm.id = this.$route.query.id |
|||
this.init() |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
advice: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
eventState: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
state: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
backToItemDeal () { |
|||
this.$parent.selectComponent = 'IssueProcessList' |
|||
}, |
|||
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.getInfo() |
|||
} |
|||
}) |
|||
}, |
|||
// 获取信息 |
|||
getInfo () { |
|||
this.$http.get(`/events/issue/waitHandleIssueDetail/${this.dataForm.id}`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.dataForm = { |
|||
...this.dataForm, |
|||
...res.data |
|||
} |
|||
console.log(JSON.stringify(this.dataForm)) |
|||
this.initBmap(this.dataForm.issueLatitude, this.dataForm.issueLongitude) |
|||
}).catch(() => {}) |
|||
}, |
|||
// 表单提交 |
|||
dataFormSubmitHandle: debounce(function () { |
|||
this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
if (this.dataForm.advice.length > 500) { |
|||
return this.$message.error('处理意见不超过500字') |
|||
} |
|||
this.$http['post']('/events/issue/issueWaitHandleSubmit', 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') |
|||
} |
|||
}) |
|||
this.$parent.selectComponent = 'IssueProcessList' |
|||
}).catch(() => {}) |
|||
}) |
|||
}, 1000, { 'leading': true, 'trailing': false }) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.project-handle { |
|||
.el-timeline { |
|||
padding-left: 9px; |
|||
font-size: 13px; |
|||
} |
|||
.el-textarea { |
|||
width: 600px !important; |
|||
} |
|||
.el-input { |
|||
width: 600px !important; |
|||
} |
|||
} |
|||
</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 { |
|||
padding-top: 20px; |
|||
box-sizing: border-box; |
|||
width: 79%; |
|||
height: 49%; |
|||
box-sizing: border-box; |
|||
border: 2px solid #ccc; |
|||
float:left; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,249 @@ |
|||
<template> |
|||
<el-card shadow="never" |
|||
class="aui-card--fill"> |
|||
<div class="mod-demo__epdcevents}"> |
|||
<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 label="序号" |
|||
type="index" |
|||
show-overflow-tooltip |
|||
align="center" |
|||
width="50"></el-table-column> |
|||
<el-table-column prop="issueContent" |
|||
label="议题内容" |
|||
header-align="center" |
|||
width="330" |
|||
align="center"></el-table-column> |
|||
<el-table-column prop="createdTime" |
|||
label="提交时间" |
|||
header-align="center" |
|||
width="160" |
|||
align="center"></el-table-column> |
|||
<el-table-column prop="nickName" |
|||
label="提交人" |
|||
header-align="center" |
|||
width="120" |
|||
align="center"></el-table-column> |
|||
<el-table-column prop="participateNum" |
|||
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:issue:look')" |
|||
type="text" |
|||
size="small" |
|||
@click="detailAction(scope.row.id)">{{ $t('look') }}</el-button> |
|||
<el-button v-if="$hasPermission('events:issue: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> |
|||
<!-- 弹窗, 新增 / 修改 --> |
|||
<process-deal v-if="processDealVisible" |
|||
ref="processDeal" |
|||
@refreshDataList="getDataList"></process-deal> |
|||
<detail v-if="detailVisible" |
|||
ref="detail" |
|||
@refreshDataList="getDataList"></detail> |
|||
</div> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import ProcessDeal from './issue-process-deal' |
|||
import Detail from './issue-close-detail-view' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
name: 'processlist', |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/events/issue/page', |
|||
getDataListIsPage: true |
|||
}, |
|||
detailVisible: false, |
|||
processDealVisible: false, |
|||
dataForm: { |
|||
startTime: '', |
|||
endTime: '', |
|||
streetId: '', |
|||
communityId: '', |
|||
gridId: '', |
|||
state: '0' |
|||
}, |
|||
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: { |
|||
ProcessDeal, |
|||
Detail |
|||
}, |
|||
created: function () { |
|||
this.getStreetList() |
|||
}, |
|||
methods: { |
|||
detailAction (id) { |
|||
this.$parent.selectComponent = 'IssueCloseDetailView' |
|||
this.$router.push({ path: '/events-issue-process', query: { id: id } }) |
|||
}, |
|||
dealAction (id) { |
|||
this.$parent.selectComponent = 'IssueProcessDetailView' |
|||
this.$router.push({ path: '/events-issue-process', 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> |
|||
@ -1,250 +1,27 @@ |
|||
<template> |
|||
<el-card shadow="never" |
|||
class="aui-card--fill"> |
|||
<div class="mod-demo__epdcevents}"> |
|||
<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 label="序号" |
|||
type="index" |
|||
show-overflow-tooltip |
|||
width="50"></el-table-column> |
|||
<el-table-column prop="issueContent" |
|||
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="participateNum" |
|||
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:issue:look')" |
|||
type="text" |
|||
size="small" |
|||
@click="detailAction(scope.row.id)">{{ $t('look') }}</el-button> |
|||
<el-button v-if="$hasPermission('events:issue: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> |
|||
<!-- 弹窗, 新增 / 修改 --> |
|||
<process-deal v-if="processDealVisible" |
|||
ref="processDeal" |
|||
@refreshDataList="getDataList"></process-deal> |
|||
<detail v-if="detailVisible" |
|||
ref="detail" |
|||
@refreshDataList="getDataList"></detail> |
|||
</div> |
|||
</el-card> |
|||
<keep-alive include="processlist"> |
|||
<component :is="selectComponent"></component> |
|||
</keep-alive> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import ProcessDeal from './issue-process-deal' |
|||
import Detail from './issue-detail' |
|||
import IssueProcessList from './issue-process-list' |
|||
import IssueProcessDetailView from './issue-process-detail-view' |
|||
import IssueCloseDetailView from './issue-close-detail-view' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/events/issue/page', |
|||
getDataListIsPage: true |
|||
}, |
|||
detailVisible: false, |
|||
processDealVisible: false, |
|||
dataForm: { |
|||
startTime: '', |
|||
endTime: '', |
|||
streetId: '', |
|||
communityId: '', |
|||
gridId: '', |
|||
state: '0' |
|||
}, |
|||
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() |
|||
} |
|||
} |
|||
} |
|||
selectComponent: IssueProcessList |
|||
} |
|||
}, |
|||
components: { |
|||
ProcessDeal, |
|||
Detail |
|||
}, |
|||
created: function () { |
|||
this.getStreetList() |
|||
}, |
|||
methods: { |
|||
detailAction (id) { |
|||
this.detailVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.detail.dataForm.id = id |
|||
this.$refs.detail.init() |
|||
}) |
|||
}, |
|||
dealAction (id) { |
|||
this.processDealVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.processDeal.dataForm.id = id |
|||
this.$refs.processDeal.init() |
|||
}) |
|||
}, |
|||
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(() => { }) |
|||
} |
|||
IssueProcessList, |
|||
IssueProcessDetailView, |
|||
IssueCloseDetailView |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,190 @@ |
|||
<template> |
|||
<div class="project-handle"> |
|||
<el-form :model="dataForm" 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.eventContent}}</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="ownGrid"> |
|||
<div>{{dataForm.ownGrid}}</div> |
|||
</el-form-item> |
|||
<el-form-item label="上报时间:" prop="createdTime"> |
|||
<div>{{dataForm.createdTime}}</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="stateName"> |
|||
<div>{{dataForm.stateName}}</div> |
|||
</el-form-item> |
|||
<el-form-item label="处理意见:" prop="advice"> |
|||
<div>{{dataForm.advice}}</div> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="container"> |
|||
<div class="location">上报位置: {{dataForm.address}}</div> |
|||
<div id="map"></div> |
|||
</div> |
|||
</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' |
|||
export default { |
|||
data () { |
|||
return { |
|||
map: '', |
|||
dataForm: { |
|||
id: '', |
|||
eventContent: '', |
|||
nickName: '', |
|||
stateName: '', |
|||
advice: '', |
|||
eventState: '', |
|||
createdTime: '', |
|||
images: [] |
|||
} |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.dataForm.id = this.$route.query.id |
|||
this.init() |
|||
}, |
|||
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.visible = true |
|||
this.$nextTick(() => { |
|||
if (this.dataForm.id) { |
|||
this.getInfo() |
|||
} |
|||
}) |
|||
}, |
|||
// 获取信息 |
|||
getInfo () { |
|||
this.$http.get(`/events/epdcevents/rejectEventDetail/${this.dataForm.id}`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.dataForm = { |
|||
...this.dataForm, |
|||
...res.data |
|||
} |
|||
console.log(JSON.stringify(this.dataForm)) |
|||
this.initBmap(this.dataForm.issueLatitude, this.dataForm.issueLongitude) |
|||
}).catch(() => {}) |
|||
} |
|||
} |
|||
} |
|||
</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: 100%; |
|||
height: 70%; |
|||
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> |
|||
@ -0,0 +1,214 @@ |
|||
<template> |
|||
<el-card shadow="never" |
|||
class="aui-card--fill"> |
|||
<div class="mod-demo__epdcevents}"> |
|||
<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 label="序号" |
|||
type="index" |
|||
align="center" |
|||
show-overflow-tooltip |
|||
width="50"></el-table-column> |
|||
<el-table-column prop="eventContent" |
|||
label="议题内容" |
|||
header-align="center" |
|||
width="520" |
|||
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 :label="$t('handle')" |
|||
fixed="right" |
|||
header-align="center" |
|||
align="center" |
|||
width="150"> |
|||
<template slot-scope="scope"> |
|||
<el-button v-if="$hasPermission('events:reject:look')" |
|||
type="text" |
|||
size="small" |
|||
@click="detailAction(scope.row.id)">{{ $t('look') }}</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> |
|||
<!-- 弹窗, 新增 / 修改 --> |
|||
<reject-detail v-if="rejectDetailVisible" |
|||
ref="rejectDetail" |
|||
@refreshDataList="getDataList"></reject-detail> |
|||
</div> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import RejectDetail from './issue-reject-detail' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
name: 'IssueRejectList', |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/events/epdcevents/rejectEvents', |
|||
getDataListIsPage: true, |
|||
deleteURL: '/events/epdcevents', |
|||
deleteIsBatch: true |
|||
}, |
|||
rejectDetailVisible: false, |
|||
dataForm: { |
|||
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: { |
|||
RejectDetail |
|||
}, |
|||
created: function () { |
|||
this.getStreetList() |
|||
}, |
|||
methods: { |
|||
detailAction (id) { |
|||
this.$parent.selectComponent = 'IssueRejectDetailView' |
|||
this.$router.push({ path: '/events-issue-reject', 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> |
|||
@ -1,214 +1,25 @@ |
|||
<template> |
|||
<el-card shadow="never" |
|||
class="aui-card--fill"> |
|||
<div class="mod-demo__epdcevents}"> |
|||
<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 label="序号" |
|||
type="index" |
|||
show-overflow-tooltip |
|||
width="50"></el-table-column> |
|||
<el-table-column prop="eventContent" |
|||
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 :label="$t('handle')" |
|||
fixed="right" |
|||
header-align="center" |
|||
align="center" |
|||
width="150"> |
|||
<template slot-scope="scope"> |
|||
<el-button v-if="$hasPermission('events:reject:look')" |
|||
type="text" |
|||
size="small" |
|||
@click="detailAction(scope.row.id)">{{ $t('look') }}</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> |
|||
<!-- 弹窗, 新增 / 修改 --> |
|||
<reject-detail v-if="rejectDetailVisible" |
|||
ref="rejectDetail" |
|||
@refreshDataList="getDataList"></reject-detail> |
|||
</div> |
|||
</el-card> |
|||
<keep-alive include="IssueRejectList"> |
|||
<component :is="selectComponent"></component> |
|||
</keep-alive> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import RejectDetail from './issue-reject-detail' |
|||
import IssueRejectList from './issue-reject-list' |
|||
import IssueRejectDetailView from './issue-reject-detail-view' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/events/epdcevents/rejectEvents', |
|||
getDataListIsPage: true, |
|||
deleteURL: '/events/epdcevents', |
|||
deleteIsBatch: true |
|||
}, |
|||
rejectDetailVisible: false, |
|||
dataForm: { |
|||
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() |
|||
} |
|||
} |
|||
} |
|||
selectComponent: IssueRejectList |
|||
} |
|||
}, |
|||
components: { |
|||
RejectDetail |
|||
}, |
|||
created: function () { |
|||
this.getStreetList() |
|||
}, |
|||
methods: { |
|||
detailAction (id) { |
|||
this.rejectDetailVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.rejectDetail.dataForm.id = id |
|||
this.$refs.rejectDetail.init() |
|||
}) |
|||
}, |
|||
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(() => { }) |
|||
} |
|||
IssueRejectList, |
|||
IssueRejectDetailView |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,287 @@ |
|||
<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.eventContent}}</div> |
|||
<span v-for="(imgUrl, index) in urls" :key="index" style="margin: 5px"> |
|||
<el-popover placement="bottom" title="" trigger="click"> |
|||
<img :src="imgUrl" style='width: 800px;height: 600px;'> |
|||
<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="ownGrid"> |
|||
<div>{{dataForm.ownGrid}}</div> |
|||
</el-form-item> |
|||
<el-form-item label="上报时间:" prop="createdTime"> |
|||
<div>{{dataForm.createdTime}}</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> |
|||
<div class="container"> |
|||
<div class="location">上报位置: {{dataForm.address}}</div> |
|||
<div id="map"></div> |
|||
</div> |
|||
</div> |
|||
<div class="handle-operation"> |
|||
<el-form label-width="120px" label-position="right" style="width: 720px;"> |
|||
<el-form-item label="审核:" prop="eventState"> |
|||
<el-radio v-model="dataForm.eventState" label="4">审核通过</el-radio> |
|||
<el-radio v-model="dataForm.eventState" label="2">驳回</el-radio> |
|||
</el-form-item> |
|||
<el-form-item label="议题所属类别:" prop="categoryId" v-if="categoryVisible"> |
|||
<el-select v-model="dataForm.categoryId" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in categoryOptions" |
|||
:key="item.id" |
|||
:label="item.categoryName" |
|||
:value="item.id"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="处理意见:" prop="advice"> |
|||
<el-input :rows="4" v-model="dataForm.advice" type="textarea" placeholder="请您填写居民诉求的处理情况及答复意见，向居民公开展示，500字以内"></el-input> |
|||
</el-form-item> |
|||
<el-form-item style="float: right;"> |
|||
<el-button size="small" type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> |
|||
<el-button size="small" @click="backToItemDeal">{{ '返回' }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import debounce from 'lodash/debounce' |
|||
import BMap from 'BMap' |
|||
import 'element-ui/lib/theme-chalk/timeline.css' |
|||
import 'element-ui/lib/theme-chalk/timeline-item.css' |
|||
export default { |
|||
name: 'IssueReviewDetailView', |
|||
data () { |
|||
return { |
|||
map: '', |
|||
dataForm: { |
|||
id: '', |
|||
eventContent: '', |
|||
nickName: '', |
|||
categoryId: '', |
|||
advice: '', |
|||
eventState: '4' |
|||
}, |
|||
categoryVisible: true, |
|||
urls: [], |
|||
categoryOptions: [] |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.dataForm.id = this.$route.query.id |
|||
this.init() |
|||
}, |
|||
computed: { |
|||
dataRule () { |
|||
return { |
|||
categoryId: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
eventState: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
], |
|||
advice: [ |
|||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
'dataForm.eventState': function (val) { |
|||
if (val === '2') { |
|||
this.categoryVisible = false |
|||
} else { |
|||
this.categoryVisible = true |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
backToItemDeal () { |
|||
this.$parent.selectComponent = 'IssueReviewList' |
|||
}, |
|||
init () { |
|||
this.$nextTick(() => { |
|||
if (this.dataForm.id) { |
|||
this.getInfo() |
|||
this.getCategoryList() |
|||
} |
|||
}) |
|||
}, |
|||
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) |
|||
}, |
|||
getCategoryList () { |
|||
this.$http.get('/events/eventcategory/list', |
|||
{ |
|||
params: { |
|||
categoryCode: '0' |
|||
} |
|||
} |
|||
).then(({ data: res }) => { |
|||
this.dataListLoading = false |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.categoryOptions = res.data |
|||
}).catch(() => {}) |
|||
}, |
|||
// 获取信息 |
|||
getInfo () { |
|||
this.$http.get(`/events/epdcevents/${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) |
|||
this.urls = res.data.imageArray |
|||
}).catch(() => {}) |
|||
}, |
|||
// 表单提交 |
|||
dataFormSubmitHandle: debounce(function () { |
|||
this.$refs['dataForm'].validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
if (this.dataForm.advice.length > 500) { |
|||
return this.$message.error('处理意见不超过500字') |
|||
} |
|||
this.$http['post']('/events/epdcevents/review', 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.$parent.selectComponent = 'IssueReviewList' |
|||
this.$emit('refreshDataList') |
|||
} |
|||
}) |
|||
}).catch(() => {}) |
|||
}) |
|||
}, 1000, { 'leading': true, 'trailing': false }) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.project-handle { |
|||
.el-timeline { |
|||
padding-left: 9px; |
|||
font-size: 13px; |
|||
} |
|||
.el-textarea { |
|||
width: 600px !important; |
|||
} |
|||
.el-input { |
|||
width: 600px !important; |
|||
} |
|||
} |
|||
</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: 100%; |
|||
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: #ccc; |
|||
} |
|||
&::-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 { |
|||
padding-top: 20px; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
height: 49%; |
|||
box-sizing: border-box; |
|||
border: 2px solid #ccc; |
|||
float:left; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,214 @@ |
|||
<template> |
|||
<el-card shadow="never" |
|||
class="aui-card--fill"> |
|||
<div class="mod-demo__epdcevents}"> |
|||
<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 label="序号" |
|||
type="index" |
|||
show-overflow-tooltip |
|||
align="center" |
|||
width="50"></el-table-column> |
|||
<el-table-column prop="eventContent" |
|||
label="议题内容" |
|||
header-align="center" |
|||
width="520" |
|||
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 :label="$t('handle')" |
|||
fixed="right" |
|||
header-align="center" |
|||
align="center" |
|||
width="150"> |
|||
<template slot-scope="scope"> |
|||
<el-button v-if="$hasPermission('events:epdcevents:verify')" |
|||
type="text" |
|||
size="small" |
|||
@click="detailAction(scope.row.id)">{{ $t('verify') }}</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> |
|||
<!-- 弹窗, 新增 / 修改 --> |
|||
<review-detail v-if="reviewDetailVisible" |
|||
ref="reviewDetail" |
|||
@refreshDataList="getDataList"></review-detail> |
|||
</div> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import ReviewDetail from './issue-review-detail' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
name: 'issueReviewList', |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/events/epdcevents/page', |
|||
getDataListIsPage: true, |
|||
deleteURL: '/events/epdcevents', |
|||
deleteIsBatch: true |
|||
}, |
|||
reviewDetailVisible: false, |
|||
dataForm: { |
|||
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: { |
|||
ReviewDetail |
|||
}, |
|||
created: function () { |
|||
this.getStreetList() |
|||
}, |
|||
methods: { |
|||
detailAction (id) { |
|||
this.$parent.selectComponent = 'IssueReviewDetailView' |
|||
this.$router.push({ path: '/events-issue-review', 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> |
|||
@ -1,214 +1,25 @@ |
|||
<template> |
|||
<el-card shadow="never" |
|||
class="aui-card--fill"> |
|||
<div class="mod-demo__epdcevents}"> |
|||
<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 label="序号" |
|||
type="index" |
|||
show-overflow-tooltip |
|||
width="50"></el-table-column> |
|||
<el-table-column prop="eventContent" |
|||
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 :label="$t('handle')" |
|||
fixed="right" |
|||
header-align="center" |
|||
align="center" |
|||
width="150"> |
|||
<template slot-scope="scope"> |
|||
<el-button v-if="$hasPermission('events:epdcevents:verify')" |
|||
type="text" |
|||
size="small" |
|||
@click="detailAction(scope.row.id)">{{ $t('verify') }}</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> |
|||
<!-- 弹窗, 新增 / 修改 --> |
|||
<review-detail v-if="reviewDetailVisible" |
|||
ref="reviewDetail" |
|||
@refreshDataList="getDataList"></review-detail> |
|||
</div> |
|||
</el-card> |
|||
<keep-alive include="issueReviewList"> |
|||
<component :is="selectComponent"></component> |
|||
</keep-alive> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import ReviewDetail from './issue-review-detail' |
|||
import IssueReviewList from './issue-review-list' |
|||
import IssueReviewDetailView from './issue-review-detail-view' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/events/epdcevents/page', |
|||
getDataListIsPage: true, |
|||
deleteURL: '/events/epdcevents', |
|||
deleteIsBatch: true |
|||
}, |
|||
reviewDetailVisible: false, |
|||
dataForm: { |
|||
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() |
|||
} |
|||
} |
|||
} |
|||
selectComponent: IssueReviewList |
|||
} |
|||
}, |
|||
components: { |
|||
ReviewDetail |
|||
}, |
|||
created: function () { |
|||
this.getStreetList() |
|||
}, |
|||
methods: { |
|||
detailAction (id) { |
|||
this.reviewDetailVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.reviewDetail.dataForm.id = id |
|||
this.$refs.reviewDetail.init() |
|||
}) |
|||
}, |
|||
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(() => { }) |
|||
} |
|||
IssueReviewList, |
|||
IssueReviewDetailView |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,290 @@ |
|||
<template> |
|||
<div class="project-handle"> |
|||
<el-form :model="dataForm" ref="dataForm" style="width: 100%; height: 100%;"> |
|||
<div class="project-detail"> |
|||
<el-form label-position="right" label-width="120px"> |
|||
<el-form-item label="议题内容:"> |
|||
<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="上报时间:"> |
|||
<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="项目态度:"> |
|||
<span>表达态度 {{dataForm.approveNum + dataForm.opposeNum + dataForm.commentNum}}</span> |
|||
<span>评论 {{dataForm.commentNum}}</span> |
|||
<span>支持 {{dataForm.approveNum}}</span> |
|||
<span>反对 {{dataForm.opposeNum}}</span> |
|||
</el-form-item> |
|||
<el-form-item label="项目评论:"> |
|||
<el-button type="primary" @click="innerVisible = true">查看评论</el-button> |
|||
</el-form-item> |
|||
<el-form-item label="用户满意度评价:" v-if="dataForm.itemState === 10"> |
|||
<div>{{dataForm.evaluationScore}}</div> |
|||
</el-form-item> |
|||
<el-form-item label="部门满意度评价:" v-if="dataForm.itemState === 10"> |
|||
<div v-for="(deptEvaluateResultDTO, index) in dataForm.deptEvaluateResultDTOS" :key="index" style="margin: 5px"> |
|||
<span>{{deptEvaluateResultDTO.deptName}}</span> |
|||
<span>{{deptEvaluateResultDTO.evaluationLevel}}</span> |
|||
</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.progressName !== '【已关闭】' && 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> |
|||
</el-form> |
|||
<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' |
|||
export default { |
|||
name: 'itemCloseDetailView', |
|||
data () { |
|||
return { |
|||
map: '', |
|||
innerVisible: false, |
|||
dataForm: { |
|||
id: '', |
|||
nickName: '', |
|||
distributeTime: '', |
|||
itemContent: '', |
|||
handleProgressResultDTOS: [], |
|||
images: [] |
|||
}, |
|||
order: '', |
|||
orderField: '', |
|||
pageIndex: 1, |
|||
limitVal: 10, |
|||
total: 0, |
|||
commentsDTOs: [] |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.dataForm.id = this.$route.query.id |
|||
this.init() |
|||
}, |
|||
methods: { |
|||
backToItemDeal () { |
|||
this.$parent.selectComponent = 'ItemClose' |
|||
}, |
|||
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.getInfo() |
|||
this.getCommentList() |
|||
} |
|||
}) |
|||
}, |
|||
deleteComment (val) { |
|||
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(() => {}) |
|||
}, |
|||
getInfo () { |
|||
this.$http.get(`/events/item/contentDetail/${this.dataForm.id}`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.dataForm = { |
|||
...this.dataForm, |
|||
...res.data |
|||
} |
|||
console.log(JSON.stringify(this.dataForm)) |
|||
this.initBmap(this.dataForm.issueLatitude, this.dataForm.issueLongitude) |
|||
}).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(() => {}) |
|||
} |
|||
} |
|||
} |
|||
</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: 60%; |
|||
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> |
|||
@ -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 label="序号" |
|||
type="index" |
|||
show-overflow-tooltip |
|||
align="center" |
|||
width="50"></el-table-column> |
|||
<el-table-column prop="itemContent" |
|||
label="项目内容" |
|||
header-align="center" |
|||
width="330" |
|||
align="center"></el-table-column> |
|||
<el-table-column prop="createdTime" |
|||
label="转成项目时间" |
|||
header-align="center" |
|||
width="160" |
|||
align="center"></el-table-column> |
|||
<el-table-column prop="nickName" |
|||
label="提交人" |
|||
header-align="center" |
|||
width="120" |
|||
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:look')" |
|||
type="text" |
|||
size="small" |
|||
@click="detailAction(scope.row.id)">{{ $t('look') }}</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="detailRef" |
|||
@refreshDataList="getDataList"></detail> |
|||
</div> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import Detail from './item-detail' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
name: 'ItemCloseList', |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/events/item/page', |
|||
getDataListIsPage: true |
|||
}, |
|||
dataForm: { |
|||
id: '', |
|||
itemState: '5', |
|||
startTime: '', |
|||
endTime: '', |
|||
streetId: '', |
|||
communityId: '', |
|||
gridId: '' |
|||
}, |
|||
detailVisible: false, |
|||
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: { |
|||
detailAction (id) { |
|||
this.$parent.selectComponent = 'ItemCloseDetailView' |
|||
this.$router.push({ path: '/events-item-close', 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> |
|||
@ -1,233 +1,25 @@ |
|||
<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 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:look')" |
|||
type="text" |
|||
size="small" |
|||
@click="detailAction(scope.row.id)">{{ $t('look') }}</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="detailRef" |
|||
@refreshDataList="getDataList"></detail> |
|||
</div> |
|||
</el-card> |
|||
<keep-alive include="ItemCloseList"> |
|||
<component :is="selectComponent"></component> |
|||
</keep-alive> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import Detail from './item-detail' |
|||
import ItemClose from './item-close-list' |
|||
import ItemCloseDetailView from './item-close-detail-view' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/events/item/page', |
|||
getDataListIsPage: true |
|||
}, |
|||
dataForm: { |
|||
id: '', |
|||
itemState: '5', |
|||
startTime: '', |
|||
endTime: '', |
|||
streetId: '', |
|||
communityId: '', |
|||
gridId: '' |
|||
}, |
|||
detailVisible: false, |
|||
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() |
|||
} |
|||
} |
|||
} |
|||
selectComponent: ItemClose |
|||
} |
|||
}, |
|||
components: { |
|||
Detail |
|||
}, |
|||
created: function () { |
|||
this.getStreetList() |
|||
}, |
|||
methods: { |
|||
detailAction (id) { |
|||
this.detailVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.detailRef.dataForm.id = id |
|||
this.$refs.detailRef.init() |
|||
}) |
|||
}, |
|||
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(() => { }) |
|||
} |
|||
ItemClose, |
|||
ItemCloseDetailView |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,467 @@ |
|||
<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="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> |
|||
<span>评论 {{dataForm.commentNum}}</span> |
|||
<span>支持 {{dataForm.approveNum}}</span> |
|||
<span>反对 {{dataForm.opposeNum}}</span> |
|||
</el-form-item> |
|||
<el-form-item label="项目评论:"> |
|||
<el-button type="primary" @click="innerVisible = true">查看评论</el-button> |
|||
</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-width="120px" label-position="right" style="width: 720px;" :rules="dataRule"> |
|||
<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-select v-model="deptResult" multiple placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in dataForm.deptResultDTOS" |
|||
:key="item.deptId" |
|||
:label="item.deptName" |
|||
:value="item.deptId"> |
|||
</el-option> |
|||
</el-select> |
|||
</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> |
|||
<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-item style="float: right;"> |
|||
<el-button size="small" type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> |
|||
<el-button size="small" @click="backToItemDeal">返回</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
</div> |
|||
</el-form> |
|||
<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 debounce from 'lodash/debounce' |
|||
export default { |
|||
name: 'itemDealDetailView', |
|||
data () { |
|||
return { |
|||
map: '', |
|||
innerVisible: false, |
|||
dataForm: { |
|||
id: '', |
|||
nickName: '', |
|||
distributeTime: '', |
|||
itemContent: '', |
|||
images: [], |
|||
issueAddress: '', |
|||
handleProgressResultDTOS: [], |
|||
handleResultDTOS: [], |
|||
deptResultDTOS: [], |
|||
evaluateDeptDTOS: [], |
|||
handleAdvice: '', |
|||
outHandleAdvice: '', |
|||
handleCategory: '', |
|||
issueLatitude: '', |
|||
issueLongitude: '' |
|||
}, |
|||
deptResult: [], |
|||
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(() => {}) |
|||
}, |
|||
deleteComment (val) { |
|||
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(() => {}) |
|||
}, |
|||
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 () { |
|||
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('请选择处理选项') |
|||
} |
|||
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; |
|||
} |
|||
.el-textarea { |
|||
width: 600px !important; |
|||
} |
|||
.el-input { |
|||
width: 600px !important; |
|||
} |
|||
} |
|||
</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 { |
|||
padding-top: 20px; |
|||
box-sizing: border-box; |
|||
width: 79%; |
|||
height: 49%; |
|||
box-sizing: border-box; |
|||
border: 2px solid #ccc; |
|||
float:left; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,236 @@ |
|||
<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 label="序号" |
|||
type="index" |
|||
show-overflow-tooltip |
|||
align="center" |
|||
width="50"></el-table-column> |
|||
<el-table-column prop="itemContent" |
|||
label="项目内容" |
|||
header-align="center" |
|||
width="330" |
|||
align="center"></el-table-column> |
|||
<el-table-column prop="createdTime" |
|||
label="转成项目时间" |
|||
header-align="center" |
|||
width="160" |
|||
align="center"></el-table-column> |
|||
<el-table-column prop="nickName" |
|||
label="提交人" |
|||
header-align="center" |
|||
width="120" |
|||
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], |
|||
name: 'ItemDealList', |
|||
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> |
|||
@ -1,238 +1,25 @@ |
|||
<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> |
|||
<keep-alive include="ItemDealList"> |
|||
<component :is="selectComponent"></component> |
|||
</keep-alive> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import Detail from './item-deal-detail' |
|||
import ItemDeal from './item-deal-list' |
|||
import ItemDealDetailView from './item-deal-detail-view' |
|||
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() |
|||
} |
|||
} |
|||
} |
|||
selectComponent: ItemDeal |
|||
} |
|||
}, |
|||
components: { |
|||
Detail |
|||
}, |
|||
created: function () { |
|||
this.getStreetList() |
|||
}, |
|||
methods: { |
|||
dealAction (id) { |
|||
this.detailVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.detail.dataForm.id = id |
|||
this.$refs.detail.init() |
|||
}) |
|||
}, |
|||
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(() => { }) |
|||
} |
|||
ItemDeal, |
|||
ItemDealDetailView |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
|
|||
@ -0,0 +1,236 @@ |
|||
<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 label="序号" |
|||
type="index" |
|||
show-overflow-tooltip |
|||
align="center" |
|||
width="50"></el-table-column> |
|||
<el-table-column prop="itemContent" |
|||
label="项目内容" |
|||
header-align="center" |
|||
width="257" |
|||
align="center"></el-table-column> |
|||
<el-table-column prop="createdTime" |
|||
label="转成项目时间" |
|||
header-align="center" |
|||
width="160" |
|||
align="center"></el-table-column> |
|||
<el-table-column prop="nickName" |
|||
label="提交人" |
|||
header-align="center" |
|||
width="120" |
|||
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 prop="evaluationScore" |
|||
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:look')" type="text" size="small" @click="detailAction1(scope.row.id)">{{ $t('look') }}</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="detailRef" |
|||
@refreshDataList="getDataList"></detail> |
|||
</div> |
|||
</el-card> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import Detail from './item-detail' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
name: 'ItemEndList', |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/events/item/page', |
|||
getDataListIsPage: true |
|||
}, |
|||
dataForm: { |
|||
id: '', |
|||
itemState: '10', |
|||
startTime: '', |
|||
endTime: '', |
|||
streetId: '', |
|||
communityId: '', |
|||
gridId: '' |
|||
}, |
|||
detailVisible: false, |
|||
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: { |
|||
detailAction1 (id) { |
|||
this.$parent.selectComponent = 'ItemCloseDetailView' |
|||
this.$router.push({ path: '/events-item-end', 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> |
|||
@ -1,234 +1,25 @@ |
|||
<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 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 prop="evaluationScore" |
|||
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:look')" type="text" size="small" @click="detailAction1(scope.row.id)">{{ $t('look') }}</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="detailRef" |
|||
@refreshDataList="getDataList"></detail> |
|||
</div> |
|||
</el-card> |
|||
<keep-alive include="ItemEndList"> |
|||
<component :is="selectComponent"></component> |
|||
</keep-alive> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import Detail from './item-detail' |
|||
import ItemEndList from './item-end-list' |
|||
import ItemCloseDetailView from './item-close-detail-view' |
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/events/item/page', |
|||
getDataListIsPage: true |
|||
}, |
|||
dataForm: { |
|||
id: '', |
|||
itemState: '10', |
|||
startTime: '', |
|||
endTime: '', |
|||
streetId: '', |
|||
communityId: '', |
|||
gridId: '' |
|||
}, |
|||
detailVisible: false, |
|||
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() |
|||
} |
|||
} |
|||
} |
|||
selectComponent: ItemEndList |
|||
} |
|||
}, |
|||
components: { |
|||
Detail |
|||
}, |
|||
created: function () { |
|||
this.getStreetList() |
|||
}, |
|||
methods: { |
|||
detailAction1 (id) { |
|||
this.detailVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.detailRef.dataForm.id = id |
|||
this.$refs.detailRef.init() |
|||
}) |
|||
}, |
|||
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(() => { }) |
|||
} |
|||
ItemEndList, |
|||
ItemCloseDetailView |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
</style> |
|||
|
|||
@ -1,220 +0,0 @@ |
|||
<template> |
|||
<div class="project-handle"> |
|||
|
|||
<div class="project-detail"> |
|||
<el-form label-position="right" label-width="120px"> |
|||
<el-form-item label="议题内容："> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="议题图片："> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="上报时间："> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="上报人："> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="电话："> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="所属类别："> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="项目态度:"> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="项目评论："> |
|||
<el-button type="text">查看评论</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="container"> |
|||
<div class="location">上报位置: 山东省青岛市市北区南宁路138号</div> |
|||
<div id="map"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="project-progress"> |
|||
<el-timeline> |
|||
<el-timeline-item |
|||
v-for="(activity, index) in activities" |
|||
:key="index" |
|||
:icon="activity.icon" |
|||
:type="activity.type" |
|||
:color="activity.color" |
|||
:size="activity.size"> |
|||
<div v-html="activity.content"></div> |
|||
</el-timeline-item> |
|||
</el-timeline> |
|||
</div> |
|||
|
|||
<div class="handle-operation"> |
|||
<el-form label-position="right" label-width="120px"> |
|||
<el-form-item label="处理:"> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="吹哨部门:"> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="回复居民意见"> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="项目处理意见"> |
|||
|
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import BMap from 'BMap' |
|||
import 'element-ui/lib/theme-chalk/timeline.css' |
|||
import 'element-ui/lib/theme-chalk/timeline-item.css' |
|||
export default { |
|||
name: 'projectHandle', |
|||
data () { |
|||
return { |
|||
map: '', |
|||
activities: [{ |
|||
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>', |
|||
color: '#0980ff' |
|||
}, |
|||
{ |
|||
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>', |
|||
color: '#FF4C52' |
|||
}, |
|||
{ |
|||
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>', |
|||
color: '#FF4C52' |
|||
}, |
|||
{ |
|||
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>', |
|||
color: '#FF4C52' |
|||
}, |
|||
{ |
|||
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>', |
|||
color: '#FF4C52' |
|||
}, |
|||
{ |
|||
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>', |
|||
color: '#FF4C52' |
|||
}, |
|||
{ |
|||
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>', |
|||
color: '#FF4C52' |
|||
}, |
|||
{ |
|||
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>', |
|||
color: '#FF4C52' |
|||
}, |
|||
{ |
|||
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>', |
|||
color: '#FF4C52' |
|||
}, |
|||
{ |
|||
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>', |
|||
color: '#FF4C52' |
|||
}, |
|||
{ |
|||
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>', |
|||
color: '#FF4C52' |
|||
}, |
|||
{ |
|||
content: '<div>2019-09-25 12:32:32 【回应】</div><div>处理部门： 街道处理部门</div><div>处理意见： 氛围分隔符方式风格人物</div>' |
|||
}] |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.initBmap() |
|||
}, |
|||
methods: { |
|||
initBmap () { |
|||
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) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.project-handle { |
|||
width: 100%; |
|||
height: 100vh; |
|||
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> |
|||
Loading…
Reference in new issue