344 lines
9.8 KiB
Vue
344 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="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>
|