337 lines
8.8 KiB
Vue
337 lines
8.8 KiB
Vue
<template>
|
||
<div class="fullHeight pages">
|
||
<!-- :showR="true" -->
|
||
<vhead :titleName="'消息中心'"></vhead>
|
||
<div class="pageContainer">
|
||
<div class="pageDataContainer">
|
||
<div class="searchBox whiteBlock">
|
||
<el-form
|
||
:inline="true"
|
||
size="medium"
|
||
:model="searchForm"
|
||
ref="searchForm"
|
||
>
|
||
<el-form-item :label="'标题'" prop="title" class="last">
|
||
<el-input
|
||
v-model="searchForm.title"
|
||
:placeholder="
|
||
$t('message.docManage.dialog_file_renaming.placeholder')
|
||
"
|
||
clearable
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item :label="'消息类型'" prop="title" class="last">
|
||
<el-select v-model="searchForm.type" placeholder="请选择">
|
||
<el-option label="全部" value=""> </el-option>
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-date-picker
|
||
v-model="timeData"
|
||
type="daterange"
|
||
value-format="yyyy-MM-dd"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" plain @click="getListData">{{
|
||
$t('message.docManage.query')
|
||
}}</el-button>
|
||
<el-button type="warning" plain @click="resetForm">{{
|
||
$t('message.docManage.refresh')
|
||
}}</el-button>
|
||
<el-button type="danger" plain @click="clearAllFn"
|
||
>一键清空消息</el-button
|
||
>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<el-row :gutter="25">
|
||
<el-col :span="6" v-for="(item, index) in tableData" :key="index">
|
||
<div class="whiteBlock fileContent">
|
||
<img
|
||
class="imgs"
|
||
v-if="item.imageUrl"
|
||
:src="item.imageUrl"
|
||
:preview="item.imageUrl"
|
||
/>
|
||
<div class="msgBox">
|
||
<p class="title">标题：{{ item.title }}</p>
|
||
<p class="content">内容：{{ item.msg }}</p>
|
||
<p class="time">发送时间：{{ item.sendTime }}</p>
|
||
</div>
|
||
<!-- <div class="right">
|
||
<img src="@/assets/images/eye.png" @click="viewFn(item)" />
|
||
<img src="@/assets/images/download.png" @click="downFn(item)" />
|
||
</div> -->
|
||
<i class="el-icon-close" @click="deleteNotice(item)"></i>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="placeholderBox" v-show="tableData.length == 0">
|
||
<img src="@/assets/images/noData.png" />
|
||
<p>暂无消息</p>
|
||
</div>
|
||
<el-pagination
|
||
v-show="tableData.length > 0"
|
||
class="pagerBox"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="pageNo"
|
||
:page-sizes="[20, 30, 50]"
|
||
:page-size="pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="Number(total)"
|
||
background
|
||
></el-pagination>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
getNoticeListApi,
|
||
cleanAllNoticeApi,
|
||
deleteNoticeApi
|
||
} from '@/assets/js/api/company/project'
|
||
import vhead from '@/components/header'
|
||
export default {
|
||
components: { vhead },
|
||
data() {
|
||
return {
|
||
searchForm: {
|
||
title: '',
|
||
type: ''
|
||
},
|
||
timeData: '',
|
||
total: 0,
|
||
pageNo: 1,
|
||
pageSize: 20,
|
||
tableData: [],
|
||
options: [
|
||
{
|
||
label: '高空火警',
|
||
value: '8'
|
||
},
|
||
{
|
||
label: '考勤提醒',
|
||
value: '1'
|
||
},
|
||
{
|
||
label: '防疫人员通知',
|
||
value: '2'
|
||
},
|
||
{
|
||
label: '防疫车辆通知',
|
||
value: '3'
|
||
},
|
||
{
|
||
label: '访客通知',
|
||
value: '16'
|
||
},
|
||
{
|
||
label: '混凝土监测',
|
||
value: '4'
|
||
},
|
||
{
|
||
label: '卸料平台',
|
||
value: '5'
|
||
},
|
||
{
|
||
label: '配电箱',
|
||
value: '6'
|
||
},
|
||
{
|
||
label: '扬尘',
|
||
value: '7'
|
||
},
|
||
{
|
||
label: '标养室',
|
||
value: '9'
|
||
},
|
||
{
|
||
label: '安全检查',
|
||
value: '10'
|
||
},
|
||
{
|
||
label: '质量检查',
|
||
value: '11'
|
||
},
|
||
{
|
||
label: '塔吊',
|
||
value: '12'
|
||
},
|
||
{
|
||
label: '升降机',
|
||
value: '13'
|
||
},
|
||
{
|
||
label: '电表',
|
||
value: '14'
|
||
},
|
||
{
|
||
label: '水表',
|
||
value: '15'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
created() {
|
||
document.title = '消息中心'
|
||
this.selectNowDate()
|
||
this.getListData()
|
||
},
|
||
methods: {
|
||
// 获取当前时间 返回YYYY-MM-DD HH:mm:ss
|
||
selectNowDate() {
|
||
var date = new Date(),
|
||
year = date.getFullYear(),
|
||
month = date.getMonth() + 1,
|
||
day = date.getDate(),
|
||
hours = date.getHours(), //获取当前小时数(0-23)
|
||
minutes = date.getMinutes(), //获取当前分钟数(0-59)
|
||
seconds = date.getSeconds()
|
||
month >= 1 && month <= 9 ? (month = '0' + month) : ''
|
||
day >= 0 && day <= 9 ? (day = '0' + day) : ''
|
||
hours >= 0 && hours <= 9 ? (hours = '0' + hours) : ''
|
||
minutes >= 0 && minutes <= 9 ? (minutes = '0' + minutes) : ''
|
||
seconds >= 0 && seconds <= 9 ? (seconds = '0' + seconds) : ''
|
||
// var timer = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes+ ':' + seconds;
|
||
var timer = year + '-' + month + '-' + day
|
||
this.timeData = [timer, timer]
|
||
console.log(timer)
|
||
// return timer;
|
||
},
|
||
deleteNotice(val) {
|
||
console.log(val)
|
||
this.$confirm('此操作将永久删除该消息, 是否继续?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
})
|
||
.then(() => {
|
||
deleteNoticeApi({ id: val.id }).then((res) => {
|
||
if (res.code == 200) {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '删除成功!'
|
||
})
|
||
this.getListData()
|
||
}
|
||
})
|
||
})
|
||
.catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消删除'
|
||
})
|
||
})
|
||
},
|
||
clearAllFn() {
|
||
cleanAllNoticeApi({ userId: this.$store.state.userInfo.userId }).then(
|
||
(res) => {
|
||
this.$message.success(res.message)
|
||
this.getListData()
|
||
}
|
||
)
|
||
},
|
||
//获取列表数据
|
||
getListData() {
|
||
let data = this.searchForm
|
||
if (this.timeData) {
|
||
data.startTime = this.timeData[0]
|
||
data.endTime = this.timeData[1]
|
||
} else {
|
||
data.startTime = ''
|
||
data.endTime = ''
|
||
}
|
||
data.pageNo = this.pageNo
|
||
data.pageSize = this.pageSize
|
||
data.accountId = this.$store.state.userInfo.userId
|
||
getNoticeListApi(data).then((res) => {
|
||
console.log(res)
|
||
this.tableData = res.result.records
|
||
this.total = res.result.total
|
||
})
|
||
},
|
||
viewFn(item) {},
|
||
resetForm() {
|
||
this.$refs['searchForm'].resetFields()
|
||
this.getListData()
|
||
},
|
||
//查看条数
|
||
handleSizeChange(val) {
|
||
this.pageSize = val
|
||
this.getListData()
|
||
},
|
||
//查看页
|
||
handleCurrentChange(val) {
|
||
this.pageNo = val
|
||
this.getListData()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.fileContent {
|
||
border-radius: 3px;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 100px;
|
||
padding: 0 20px;
|
||
margin-bottom: 20px;
|
||
position: relative;
|
||
.el-icon-close {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 6px;
|
||
color: #f56c6c;
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
}
|
||
// justify-content: space-between;
|
||
// .right {
|
||
// display: flex;
|
||
// align-items: center;
|
||
// img {
|
||
// margin-left: 18px;
|
||
// cursor: pointer;
|
||
// }
|
||
// }
|
||
.imgs {
|
||
width: 60px;
|
||
height: 60px;
|
||
margin-right: 10px;
|
||
}
|
||
.msgBox {
|
||
.title {
|
||
font-size: 15px;
|
||
}
|
||
.content {
|
||
font-size: 13px;
|
||
opacity: 0.8;
|
||
margin-top: 3px;
|
||
}
|
||
.time {
|
||
font-size: 13px;
|
||
opacity: 0.6;
|
||
margin-top: 3px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pageContainer {
|
||
height: calc(100% - 61px);
|
||
}
|
||
</style>
|