3 changed files with 341 additions and 31 deletions
@ -1,49 +1,329 @@ |
|||
<template> |
|||
<div class="g-main"> |
|||
<div class="title-small title_postion">基础信息</div> |
|||
<div> |
|||
<div class="title-small"></div> |
|||
<el-row type="flex" class="f-m-top29"> |
|||
<el-col :span="12" class="f-flex"> |
|||
<div class="f-label">所属网格:</div> |
|||
<div class="f-label">姓名:</div> |
|||
<div class="f-left8 f-font-color">{{ name }}</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row type="flex" class="f-m-top29"> |
|||
<el-col :span="12" class="f-flex"> |
|||
<div class="f-label">联系电话:</div> |
|||
<div class="f-left8 f-font-color">{{ mobile }}</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row type="flex" class="f-m-top29"> |
|||
<el-col :span="12" class="f-flex"> |
|||
<div class="f-label">所属组织:</div> |
|||
<div class="f-left8 f-font-color">{{ gridName }}</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row type="flex" class="f-m-top29"> |
|||
<el-col :span="12" class="f-flex"> |
|||
<div class="f-label">所属房屋:</div> |
|||
<div class="f-left8 f-font-color">{{ homeName }}</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
<div> |
|||
<div class="m-table"> |
|||
<div class="div_btn"> |
|||
<el-radio-group v-model="labelPosition" size="small" @change="selectPosition"> |
|||
<el-radio-button label="event">12345投诉</el-radio-button> |
|||
<el-radio-button label="province">省满意度调查</el-radio-button> |
|||
<el-radio-button label="community">社区自评</el-radio-button> |
|||
</el-radio-group> |
|||
</div> |
|||
<el-table :visible.sync="showEvent" v-if="showEvent" :data="eventList" class="m-table-item" |
|||
:height="maxTableHeight"> |
|||
<el-table-column label="序号" fixed="left" type="index" align="center" /> |
|||
<el-table-column prop="gridName" align="center" min-width="140" label="所属组织" |
|||
:show-overflow-tooltip="true" /> |
|||
<el-table-column prop="categoryName" label="事件分类" min-width="100" align="center" |
|||
:show-overflow-tooltip="true" /> |
|||
<el-table-column prop="happenTime" align="center" :show-overflow-tooltip="true" label="接收时间" /> |
|||
<el-table-column prop="eventContent" label="问题描述" width="140" align="center" |
|||
:show-overflow-tooltip="true" /> |
|||
<el-table-column prop="timeLimit" align="center" :show-overflow-tooltip="true" label="办结时限" /> |
|||
<el-table-column prop="name" align="center" label="联系人" :show-overflow-tooltip="true" /> |
|||
<el-table-column prop="mobile" align="center" label="联系电话" :show-overflow-tooltip="true" /> |
|||
<el-table-column prop="address" align="center" :show-overflow-tooltip="true" label="详细地址" /> |
|||
</el-table> |
|||
<el-table :visible.sync="showProvince" v-if="showProvince" :data="provinceList" class="m-table-item" |
|||
:height="maxTableHeight"> |
|||
<el-table-column label="序号" header-align="center" align="center" type="index" /> |
|||
<el-table-column label="街道" prop="streetName" header-align="center" align="center" |
|||
show-overflow-tooltip /> |
|||
<el-table-column label="社区" prop="communityName" header-align="center" align="center" |
|||
show-overflow-tooltip /> |
|||
<el-table-column label="姓名" prop="name" header-align="center" align="center" /> |
|||
<el-table-column label="回访电话" prop="mobile" header-align="center" align="center" |
|||
show-overflow-tooltip /> |
|||
<el-table-column label="领域" prop="scopeName" header-align="center" align="center" |
|||
show-overflow-tooltip /> |
|||
<el-table-column label="问题" prop="problemDesc" header-align="center" align="center" |
|||
show-overflow-tooltip /> |
|||
<el-table-column label="是否完成" prop="completeFlag" header-align="center" align="center" |
|||
show-overflow-tooltip> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.completeFlag != null ? scope.row.completeFlag === 1 ? '已完成' : |
|||
scope.row.completeFlag |
|||
=== 0 ? '正在推进' : '已完成并取消风险标记' : '--' }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="完成时限" prop="completeTime" header-align="center" align="center" |
|||
show-overflow-tooltip> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.completeTime ? scope.row.completeTime.substr(0, 10) : '--' }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="备注" prop="remark" header-align="center" align="center" show-overflow-tooltip /> |
|||
</el-table> |
|||
<el-table :visible.sync="showCommunity" v-if="showCommunity" :data="communityList" class="m-table-item" |
|||
:height="maxTableHeight"> |
|||
<el-table-column label="序号" header-align="center" align="center" type="index" width="50" /> |
|||
<el-table-column label="填写时间" prop="createdTime" header-align="center" align="center" /> |
|||
<el-table-column label="姓名" prop="reporterName" header-align="center" align="center" /> |
|||
<el-table-column label="联系电话" prop="reporterMobile" :show-overflow-tooltip="true" header-align="center" |
|||
align="center" /> |
|||
<el-table-column label="回访方式" prop="followUpWay" :formatter="formatterFollowUpWay" header-align="center" |
|||
align="center" /> |
|||
<el-table-column label="文化设施" prop="evaCulturalFacility" :formatter="formatter" header-align="center" |
|||
align="center" /> |
|||
<el-table-column label="体育设施" prop="evaSportsFacility" :formatter="formatter" header-align="center" |
|||
align="center" /> |
|||
<el-table-column label="生态环境" prop="evaEcologicalEnv" :formatter="formatter" header-align="center" |
|||
align="center" /> |
|||
<el-table-column label="社会治安" prop="evaSocialSecurity" :formatter="formatter" header-align="center" |
|||
align="center" /> |
|||
<el-table-column label="社会救助" prop="evaSocialAssistance" :formatter="formatter" header-align="center" |
|||
align="center" /> |
|||
<el-table-column label="老有所养" prop="evaOldPeopleProvide" :formatter="formatter" header-align="center" |
|||
align="center" /> |
|||
<el-table-column label="基础教育" prop="evaBasicEducation" :formatter="formatter" header-align="center" |
|||
align="center" /> |
|||
<el-table-column label="病有所医" prop="evaMedical" :formatter="formatter" header-align="center" |
|||
align="center" /> |
|||
<el-table-column label="回访状态" prop="followUpStatus" :formatter="formatterFollowUpStatus" |
|||
header-align="center" align="center" /> |
|||
</el-table> |
|||
<div style="margin-block: 10px;display: flex;justify-content: end;"> |
|||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" :page-sizes="[20, 50, 100, 200]" :page-size="parseInt(pageSize)" |
|||
layout="sizes, prev, pager, next, total" :total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { requestPost, requestGet } from "@/js/dai/request"; |
|||
import { mapGetters } from "vuex"; |
|||
export default { |
|||
name: "eventInspces", |
|||
props: { |
|||
resiId: { |
|||
type: String, |
|||
type: String |
|||
}, |
|||
orgName: { |
|||
type: String |
|||
} |
|||
}, |
|||
data() { |
|||
return {} |
|||
return { |
|||
name: '', |
|||
mobile: '', |
|||
resiDetail: {}, |
|||
eventList: [], |
|||
provinceList: [], |
|||
communityList: [], |
|||
pageNo: 0, |
|||
pageSize: window.localStorage.getItem("pageSize") || 20, |
|||
total: 1, |
|||
showEvent: false, |
|||
showProvince: false, |
|||
showCommunity: false, |
|||
labelPosition: 'event', |
|||
formLabelAlign: { |
|||
name: '', |
|||
region: '', |
|||
type: '' |
|||
} |
|||
} |
|||
}, |
|||
async created() { |
|||
this.loadEvent(); |
|||
this.getResiDetail(); |
|||
await this.loadEvent(); |
|||
}, |
|||
computed: { |
|||
maxTableHeight() { |
|||
const h = this.clientHeight - this.searchH - 275 + this.iframeHeight; |
|||
const _h = this.clientHeight - 275 - this.searchH; |
|||
return this.$store.state.inIframe ? h : _h; |
|||
}, |
|||
...mapGetters(["clientHeight", "iframeHeight"]), |
|||
gridName() { |
|||
let arr = []; |
|||
if (this.resiDetail.houseInfo && this.resiDetail.houseInfo.gridName) { |
|||
arr = this.resiDetail.houseInfo.gridName; |
|||
} else { |
|||
arr = "--"; |
|||
} |
|||
return arr; |
|||
}, |
|||
homeName() { |
|||
let arr = []; |
|||
if (this.resiDetail.houseInfo && this.resiDetail.houseInfo.homeName) { |
|||
arr = this.resiDetail.houseInfo.homeName; |
|||
} else { |
|||
arr = "--"; |
|||
} |
|||
return arr; |
|||
}, |
|||
}, |
|||
mounted() { }, |
|||
methods: { |
|||
//加载事件列表 |
|||
async loadEvent() { |
|||
this.eventList = [] |
|||
this.pageNo = 0 |
|||
const url = "/governance/eventInspect/getEventByResiId"; |
|||
const { data, code, msg } = await requestPost(url, { |
|||
resiId: row.resiId |
|||
resiId: this.resiId, |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize |
|||
}); |
|||
if (code === 0) { |
|||
// this.getTableData(); |
|||
this.total = data.total || 0; |
|||
this.eventList = data.list ? data.list.map((item) => { return item; }) : []; |
|||
this.showEvent = true; |
|||
} else { |
|||
this.$message.error(msg); |
|||
} |
|||
}, |
|||
async getResiDetail() { |
|||
this.$http |
|||
.post(`/actual/base/residentBaseInfo/detail/${this.resiId}`) |
|||
.then((res) => { |
|||
this.resiDetail = res.data.data; |
|||
this.name = this.resiDetail.name; |
|||
this.mobile = this.resiDetail.mobile; |
|||
}).catch((err) => { |
|||
this.$message.error(err); |
|||
}); |
|||
}, |
|||
loadCommunity() { |
|||
this.communityList = [] |
|||
this.pageNo = 0 |
|||
const url = '/governance/satisfaction/communitySelfInsp/inspResult/list'; |
|||
this.$http.get(url + `?resiId=${this.resiId}&pageNo=${this.pageNo}&pageSize=${this.pageSize}`) |
|||
.then((res) => { |
|||
const data = res.data.data; |
|||
if (res.status === 200) { |
|||
this.total = data.total || 0; |
|||
this.communityList = data.list; |
|||
} |
|||
}).catch((msg) => { |
|||
this.$message.error(msg); |
|||
}); |
|||
}, |
|||
loadProvince() { |
|||
this.provinceList = [] |
|||
this.pageNo = 0 |
|||
const url = '/governance/provinceEvaluationRecord/pageInfo'; |
|||
let params = { |
|||
resiId: this.resiId, |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize |
|||
} |
|||
this.$http.post(url, params).then((res => { |
|||
const data = res.data.data; |
|||
if (res.status === 200) { |
|||
this.total = data.total || 0; |
|||
this.provinceList = data.childData; |
|||
} |
|||
})).catch((err => { |
|||
this.$message.error(err); |
|||
})); |
|||
}, |
|||
handleSizeChange(val) { |
|||
this.pageSize = val; |
|||
window.localStorage.setItem("pageSize", val); |
|||
this.selectPosition(); |
|||
}, |
|||
handleCurrentChange(val) { |
|||
this.pageNo = val; |
|||
this.selectPosition(); |
|||
}, |
|||
//切换标签 |
|||
selectPosition() { |
|||
if (this.labelPosition === 'event') { |
|||
this.showEvent = true |
|||
this.showProvince = false |
|||
this.showCommunity = false |
|||
this.eventList = [] |
|||
this.loadEvent(); |
|||
} else if (this.labelPosition === 'province') { |
|||
this.showEvent = false |
|||
this.showCommunity = false |
|||
this.showProvince = true |
|||
this.provinceList = [] |
|||
this.loadProvince(); |
|||
} else if (this.labelPosition === 'community') { |
|||
this.showEvent = false |
|||
this.showProvince = false |
|||
this.showCommunity = true |
|||
this.communityList = [] |
|||
this.loadCommunity(); |
|||
} |
|||
}, |
|||
formatter: function (row) { |
|||
let value = ''; |
|||
if (row.evaCulturalFacility) { |
|||
value = row.evaCulturalFacility |
|||
} else if (row.evaSportsFacility) { |
|||
value = row.evaSportsFacility |
|||
} else if (row.evaEcologicalEnv) { |
|||
value = row.evaEcologicalEnv |
|||
} else if (row.evaSocialSecurity) { |
|||
value = row.evaSocialSecurity |
|||
} else if (row.evaSocialAssistance) { |
|||
value = row.evaSocialAssistance |
|||
} else if (row.evaOldPeopleProvide) { |
|||
value = row.evaOldPeopleProvide |
|||
} else if (row.evaBasicEducation) { |
|||
value = row.evaBasicEducation |
|||
} else if (row.evaMedical) { |
|||
value = row.evaMedical |
|||
} |
|||
return value === 'veryGood' ? '满意' : value === 'good' ? '基本满意' : value === 'bad' ? '不满意' : ''; |
|||
}, |
|||
formatterFollowUpWay: function (row) { |
|||
return row.followUpWay === 1 ? '电话回访' : row.followUpWay === 2 ? '上门回访' : '未知'; |
|||
}, |
|||
formatterFollowUpStatus: function (row) { |
|||
return row.followUpStatus === 0 ? '接受回访' : row.followUpStatus === 1 ? '已回访' : |
|||
row.followUpStatus === -1 ? '不接受回访' : '未知'; |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/assets/scss/modules/management/list-main.scss"; |
|||
</style> |
|||
|
|||
.f-m-top29 { |
|||
margin-top: 29px; |
|||
padding-left: 20px; |
|||
} |
|||
|
|||
.f-left8 { |
|||
margin-left: 8px; |
|||
} |
|||
|
|||
.f-font-color { |
|||
color: #000; |
|||
font-weight: 400; |
|||
}</style> |
|||
Loading…
Reference in new issue