337 lines
9.8 KiB
Vue
337 lines
9.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="$t('message.messageCenter.title')"
|
||
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="$t('message.messageCenter.messageType')"
|
||
prop="title"
|
||
class="last"
|
||
>
|
||
<el-select
|
||
v-model="searchForm.type"
|
||
:placeholder="$t('message.messageCenter.placeholderText')"
|
||
>
|
||
<!-- 全部 -->
|
||
<el-option :label="$t('message.messageCenter.all')" 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="$t('message.messageCenter.to')"
|
||
:start-placeholder="$t('message.messageCenter.startTime')"
|
||
:end-placeholder="$t('message.messageCenter.endTime')"
|
||
>
|
||
</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">{{
|
||
$t('message.messageCenter.allClearMsg')
|
||
}}</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">
|
||
<!-- 标题 -->
|
||
{{ $t('message.messageCenter.title') }}：{{ item.title }}
|
||
</p>
|
||
<p class="content">
|
||
<!-- 内容 -->
|
||
{{ $t('message.messageCenter.content') }}：{{ item.msg }}
|
||
</p>
|
||
<p class="time">
|
||
<!-- 发送时间 -->
|
||
{{ $t('message.messageCenter.sendTime') }}：{{
|
||
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>{{ $t('message.messageCenter.noMsg') }}</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: "17"
|
||
// },{
|
||
// label: "访客通知",
|
||
// value: "18"
|
||
// }],
|
||
// 一期
|
||
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.$t('message.messageCenter.msgCenter')
|
||
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(
|
||
this.$t('message.messageCenter.hintContent'),
|
||
this.$t('message.messageCenter.hint'),
|
||
{
|
||
confirmButtonText: this.$t('message.messageCenter.confirm'),
|
||
cancelButtonText: this.$t('message.messageCenter.cancel'),
|
||
type: 'warning'
|
||
}
|
||
)
|
||
.then(() => {
|
||
deleteNoticeApi({ id: val.id }).then((res) => {
|
||
if (res.code == 200) {
|
||
this.$message({
|
||
type: 'success',
|
||
message: this.$t('message.messageCenter.removeSuccess')
|
||
})
|
||
this.getListData()
|
||
}
|
||
})
|
||
})
|
||
.catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: this.$t('message.messageCenter.cancelRemove')
|
||
})
|
||
})
|
||
},
|
||
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: 200px;
|
||
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);
|
||
overflow: auto;
|
||
|
||
/deep/.el-input__inner {
|
||
background: #fff;
|
||
color: #000;
|
||
}
|
||
}
|
||
</style>
|