260 lines
		
	
	
		
			8.1 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			260 lines
		
	
	
		
			8.1 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>
 | |
|           </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="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() {
 | |
|         return [
 | |
|           {prop: 'areaName', label: '上报时间'},
 | |
|           {prop: 'reportType', label: '内容描述' },
 | |
|           {prop: 'nickName', label: '事件类型'},
 | |
|           {prop: 'explain', label: '所属网格'},
 | |
|           {prop: 'phone', label: '上报居民'},
 | |
|           {prop: 'createTime', label: '联系方式'},
 | |
|           {prop: 'handleUserName', label: '处理时长'},
 | |
|           {prop: 'handleTime', label: '处理时间'},
 | |
|           {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()
 | |
|     },
 | |
| 
 | |
|     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>
 |