城阳pc工作端前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

153 lines
3.9 KiB

<template>
<div class="table">
<el-table v-if="list.length > 0" :data="list" max-height="363px" height="363px">
<el-table-column label="序号" type="index" width="80" />
<el-table-column label="事件类型" prop="categorycode" width="" />
<el-table-column label="事件描述" prop="eventcontent" width="" />
<el-table-column label="办理状态" prop="status" width="" />
<el-table-column label="接收时间" prop="happentime" width="180" />
<el-table-column label="标记" prop="marktype" width="" />
<el-table-column label="操作" width="90" align="center">
<template slot-scope="data">
<el-button type="text" @click="handleView(data.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
<div v-else style="width: 100%; height: 100%; text-align: center; padding-top: 120px">
<img width="268px" height="128px" src="~@/assets/images/overview/zanwu.png" />
<div style="color: #fff">暂无数据</div>
</div>
<eventDetails :showDialog="showDialog" :id="this.rowId" @close="close" />
<Pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
import eventDetails from "../../../event-details.vue";
export default {
name: "complaint",
components: {
eventDetails,
},
data() {
return {
queryParams: {
pageNo: 1,
pageSize: 10,
eventType: "3",
residList: [],
},
list: [],
rowId: null,
showDialog: false,
total: 0,
};
},
created() {},
activated() {
this.getList();
},
watch: {
"$route.query"(newVal, oldVal) {
this.getList();
},
},
methods: {
handleView(row) {
this.rowId = row.id;
this.showDialog = true;
},
close() {
this.showDialog = false;
},
getList() {
const query = this.$route.query;
this.queryParams.residList[0] = query.user_id;
this.list = [];
this.total = 0;
this.$emit("changeTotal", { name: 0, total: 0 });
// 事件分页查询
const statusArr = {
processing: "处理中",
closed_case: "已办结",
};
const marktypes = ["普通事件", "难点读点", "矛盾纠纷", "自身问题"];
this.$http
.post("/actual/base/peopleRoomOverview/eventPageList", this.queryParams)
.then(({ data: res }) => {
this.list = res.data.list.map((item) => {
return {
...item,
status: item.status ? statusArr[item.status] : null,
marktype: marktypes[item.marktype],
};
});
this.total = res.data.total;
this.$emit("changeTotal", { name: 0, total: this.total });
});
},
},
};
</script>
<style scoped lang="scss">
.business-records {
margin-bottom: 25px;
}
.table {
/deep/ .el-table td,
/deep/ .el-table th,
/deep/ .el-table tr {
padding: 14px !important;
border: none !important;
min-height: 52px;
}
/deep/ .el-table td,
/deep/ .el-table th {
background: none !important;
}
/deep/ .el-table td {
font-size: 14px;
font-weight: 400;
color: #ffffff;
text-shadow: 1px 2px 4px rgba(10, 32, 60, 0.51);
}
/deep/ .el-table tr {
background: none;
&:hover {
background-color: rgba(26, 149, 255, 0.3) !important;
}
}
/deep/ .el-table__body-wrapper tr:nth-of-type(odd) {
background: rgba(14, 56, 115, 0.4);
}
/deep/ .el-table {
background: none !important;
&:before {
background: none;
}
}
/deep/ .el-table__header-wrapper tr {
color: #a3b9da !important;
font-size: 14px;
font-weight: 400;
opacity: 0.76;
background: none;
&:hover {
background: none !important;
}
}
/deep/ .el-table__header-wrapper {
background: none !important;
}
}
</style>