295 lines
9.5 KiB
Vue
295 lines
9.5 KiB
Vue
<template>
|
|
<section class="AppReportAtWill">
|
|
<ai-list v-if="!detail">
|
|
<template #title>
|
|
<ai-title title="随手拍" isShowArea isShowBottomBorder v-model="areaId" :instance="instance" @change="page.current=1,getTableData()"></ai-title>
|
|
</template>
|
|
<template #content>
|
|
<ai-search-bar>
|
|
<template #left>
|
|
<el-select size="small" v-model="search.status" placeholder="处理状态" clearable @change="page.current=1,getTableData()">
|
|
<el-option v-for="(op,i) in handleStatusOps" :key="i" v-bind="op"/>
|
|
</el-select>
|
|
<el-select
|
|
size="small"
|
|
v-model="search.publicityStatus"
|
|
placeholder="公示状态"
|
|
clearable
|
|
@change="page.current = 1, getTableData()">
|
|
<el-option v-for="(op,i) in publicityStatusOps" :key="i" v-bind="op"/>
|
|
</el-select>
|
|
<el-select
|
|
size="small"
|
|
v-model="search.reportType"
|
|
placeholder="类型"
|
|
clearable
|
|
@change="page.current = 1, getTableData()">
|
|
<el-option v-for="(op,i) in reportTypeOps" :key="i" v-bind="op"/>
|
|
</el-select>
|
|
<el-date-picker
|
|
type="daterange"
|
|
v-model="search.dateRange"
|
|
size="small"
|
|
start-placeholder="上报开始时间"
|
|
end-placeholder="上报结束时间"
|
|
clearable
|
|
value-format="yyyy-MM-dd"
|
|
@change="page.current = 1, getTableData()"/>
|
|
</template>
|
|
<template #right>
|
|
<el-input
|
|
size="small"
|
|
v-model="search.address"
|
|
clearable suffix-icon="iconfont iconSearch"
|
|
placeholder="上报人/区域/事件描述"
|
|
@keyup.enter.native="page.current = 1, getTableData()"
|
|
@clear="page.current = 1, getTableData(), search.address = ''" />
|
|
</template>
|
|
</ai-search-bar>
|
|
|
|
<ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total" :current.sync="page.current" :size.sync="page.size" @getList="getTableData">
|
|
<el-table-column slot="integral" label="信用积分" width="100" align="center">
|
|
<div class="table-options" slot-scope="{row}">{{ row.integral > 0 ? '+' + row.integral : row.integral }}</div>
|
|
</el-table-column>
|
|
<el-table-column slot="options" label="操作" fixed="right" width="140" align="center">
|
|
<div class="table-options" slot-scope="{row}">
|
|
<el-button
|
|
type="text"
|
|
v-if="!permissions('app_appreportatwillinfo_edit') && row.publicityStatus == 0"
|
|
:disabled="row.status !== '1'"
|
|
title="公示"
|
|
@click="handlePublic(row)">
|
|
公示
|
|
</el-button>
|
|
<el-button
|
|
type="text"
|
|
:disabled="row.status !== '1'"
|
|
v-if="!permissions('app_appreportatwillinfo_edit') && row.publicityStatus == 1"
|
|
title="取消公示"
|
|
@click="handlePublic(row)">
|
|
取消公示
|
|
</el-button>
|
|
<el-button type="text" title="详情" @click="showDetail(row)">详情</el-button>
|
|
<ai-wechat-selecter ref="selecter" :isMultiple="false" :instance="instance" v-model="userList" @change="v => handleAppoint(v, row)">
|
|
<el-button type="text" title="指派" :disabled="!permissions('app_appreportatwillinfo_edit') && row.status==0">指派</el-button>
|
|
</ai-wechat-selecter>
|
|
</div>
|
|
</el-table-column>
|
|
</ai-table>
|
|
</template>
|
|
</ai-list>
|
|
<report-at-will-detail :dict="dict" :id="id" :instance="instance" :permissions="permissions" v-else :is="detail" @back="goBack"/>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import ReportAtWillDetail from './reportAtWillDetail'
|
|
import { mapState } from 'vuex'
|
|
|
|
export default {
|
|
name: 'AppReportAtWill',
|
|
label: "随手拍",
|
|
components: {
|
|
ReportAtWillDetail
|
|
},
|
|
provide() {
|
|
return {
|
|
report: this
|
|
}
|
|
},
|
|
props: {
|
|
instance: { type: Function, default: null, required: true},
|
|
dict: { type: Object, default: null, required: false},
|
|
permissions: Function
|
|
},
|
|
data() {
|
|
return {
|
|
userList: [],
|
|
search: {},
|
|
tableData: [],
|
|
page: {current: 1, size: 10, total: 0},
|
|
dialog: false,
|
|
content: "",
|
|
detail: "",
|
|
areaId: "",
|
|
id: ''
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['user']),
|
|
colConfigs() {
|
|
let _ = this
|
|
return [
|
|
{prop: 'areaName', label: '区域'},
|
|
{
|
|
prop: 'reportType', label: '类型', render(h, {row}) {
|
|
return h('span', null, _.dict.getLabel("atWillReportType", row.reportType))
|
|
}
|
|
},
|
|
{prop: 'nickName', label: '上报人'},
|
|
{prop: 'explain', label: '事件描述'},
|
|
{prop: 'phone', label: '联系方式'},
|
|
{prop: 'createTime', label: '上报时间'},
|
|
{prop: 'handleUserName', label: '处理人'},
|
|
{
|
|
prop: 'status', label: '处理状态', render(h, {row}) {
|
|
return h('span', null, _.dict.getLabel("reportAtWillHandleStatus", row.status))
|
|
}
|
|
},
|
|
{prop: 'handleTime', label: '处理时间'},
|
|
{
|
|
prop: 'publicityStatus',
|
|
label: '公示状态',
|
|
fixed: 'right',
|
|
align: 'center',
|
|
render: (h, { row }) => h('span',
|
|
{
|
|
style: {color: this.dict.getColor("reportAtWillPublicityStatus", row.publicityStatus)
|
|
}
|
|
}, this.dict.getLabel("reportAtWillPublicityStatus", row.publicityStatus))
|
|
},
|
|
{slot: 'integral'},
|
|
{slot: 'options'}
|
|
]
|
|
},
|
|
publicityStatusOps() {
|
|
return this.dict.getDict("reportAtWillPublicityStatus").map(e => ({label: e.dictName, value: e.dictValue}))
|
|
},
|
|
reportTypeOps() {
|
|
return this.dict.getDict("atWillReportType").map(e => ({label: e.dictName, value: e.dictValue}))
|
|
},
|
|
handleStatusOps() {
|
|
return this.dict.getDict("reportAtWillHandleStatus").map(e => ({label: e.dictName, value: e.dictValue}))
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.areaId = this.user.info.areaId
|
|
this.dict.load("reportAtWillPublicityStatus", "reportAtWillHandleStatus", "atWillReportType")
|
|
this.getTableData()
|
|
// this.$route.query.id && this.showDetail(this.$route.query)
|
|
},
|
|
|
|
methods: {
|
|
getTableData() {
|
|
let params = {...this.search, dateRange: this.search.dateRange?.join(','), areaId: this.areaId}
|
|
this.instance.post("/app/appreportatwillinfo/list", null, {
|
|
params: {...params, ...this.page}
|
|
}).then(res => {
|
|
if (res?.data) {
|
|
this.tableData = res.data.records
|
|
this.page.total = res.data.total
|
|
}
|
|
})
|
|
},
|
|
submitUserNotice() {
|
|
this.instance.post("/app/appreportatwillconfig/addOrUpdate", {content: this.content}).then(res => {
|
|
if (res?.code == 0) {
|
|
this.$message.success("保存成功!")
|
|
this.dialog = false
|
|
}
|
|
})
|
|
},
|
|
getUserNotice() {
|
|
this.instance.post("/app/appreportatwillconfig/query-new").then(res => {
|
|
if (res?.data) this.content = res.data.content
|
|
})
|
|
},
|
|
handlePublic(ev) {
|
|
this.$confirm(`是否对该事件${ev.publicityStatus == 0 ? '进行公示' : '取消公示'}`).then(() => {
|
|
this.instance.post("/app/appreportatwillinfo/publicity", null, {params: {id: ev.id}}).then(res => {
|
|
if (res?.code == 0) {
|
|
this.$message.success("操作成功!")
|
|
this.getTableData()
|
|
}
|
|
})
|
|
}).catch(() => 0)
|
|
},
|
|
showDetail(row) {
|
|
this.detail = 'ReportAtWillDetail'
|
|
this.id = row.id
|
|
// this.$router.push({query: {id: row.id}})
|
|
},
|
|
goBack() {
|
|
this.detail = ''
|
|
// this.$route.query.id && this.$router.push({query: {}})
|
|
this.getTableData()
|
|
},
|
|
handleAppoint(person, row) {
|
|
this.instance.post("/app/appreportatwillinfo/assign", {
|
|
handleUserId: person?.[0].id,
|
|
handleUserName: person?.[0].name,
|
|
infoId: row.id
|
|
}).then(res => {
|
|
this.userList = []
|
|
if (res?.code == 0) {
|
|
this.$message.success("指派成功!")
|
|
this.getTableData()
|
|
}
|
|
}).catch(() => {
|
|
this.userList = []
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AppReportAtWill {
|
|
height: 100%;
|
|
|
|
.table-options {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
::v-deep .AiPeople {
|
|
line-height: 1;
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
|
|
::v-deep .tableOptions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
|
|
.el-button--text {
|
|
padding: 0;
|
|
|
|
i {
|
|
color: #89b;
|
|
font-size: 16px;
|
|
}
|
|
|
|
& + .el-button {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep .ai-list__content--right-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
::v-deep .aititle-right__btns {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
|
|
.el-button + .el-button {
|
|
margin-left: 0 !important;
|
|
}
|
|
}
|
|
|
|
.table-options {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style>
|