444 lines
12 KiB
Vue
444 lines
12 KiB
Vue
<template>
|
||
<div>
|
||
<div class="fullHeight" v-if="!infoDetailShow">
|
||
<div class="searchBtn">
|
||
<div
|
||
class="search-btn-item"
|
||
:class="checkIndex == index ? 'item-active' : ''"
|
||
v-for="(item, index) in searchBtnList"
|
||
:key="index"
|
||
@click="searchSelect(item, index)"
|
||
>
|
||
{{ item.name }}
|
||
</div>
|
||
</div>
|
||
<div class="searchBox whiteBlock">
|
||
<el-form
|
||
:inline="true"
|
||
ref="searchForm"
|
||
:model="searchForm"
|
||
size="medium"
|
||
style="width: 100%;display: flex;align-items: center;"
|
||
>
|
||
<el-form-item label="标题内容" prop="title">
|
||
<el-input
|
||
placeholder="请输入"
|
||
clearable
|
||
v-model="searchForm.title"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="应用" prop="app">
|
||
<!-- suffix-icon="el-icon-search" -->
|
||
<el-input
|
||
placeholder="请输入"
|
||
clearable
|
||
v-model="searchForm.app"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="标签" prop="tag">
|
||
<el-input
|
||
placeholder="请输入"
|
||
clearable
|
||
v-model="searchForm.tag"
|
||
/>
|
||
</el-form-item>
|
||
<!-- 时间 -->
|
||
<el-form-item label="接收时间" style="margin-right: auto;">
|
||
<el-date-picker
|
||
size="medium"
|
||
v-model="timeRange"
|
||
type="daterange"
|
||
range-separator="至"
|
||
value-format="yyyy-MM-dd"
|
||
:start-placeholder="'开始日期'"
|
||
:end-placeholder="'结束日期'"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<!-- 条件查询按钮 -->
|
||
<el-form-item style="margin-right: 0px;">
|
||
<el-button type="primary" plain @click="searchList">查询</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="info-operate">
|
||
<span>消息列表</span>
|
||
<el-button type="primary" size="medium" @click="markReadFn">标为已读</el-button>
|
||
<el-button type="danger" plain size="medium" @click="deleteInfoFn">删除</el-button>
|
||
</div>
|
||
<div class="table_wrap whiteBlock">
|
||
<el-table class="tables" v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
|
||
<el-table-column type="selection" align="center" width="60" />
|
||
<el-table-column label="标题内容" align="center" prop="title">
|
||
<template slot-scope="scope">
|
||
<span :style="{color: scope.row.isRead == 1?'#BFBFBF':'#5181F7'}" style="cursor: pointer;" @click="infoDetailOpen">{{
|
||
scope.row.title
|
||
}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="类别" align="center" prop="type">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.type | typeText(searchBtnList) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="应用"
|
||
align="center"
|
||
prop="app"
|
||
/>
|
||
<el-table-column label="标签" align="center" prop="tag" />
|
||
<el-table-column label="操作时间" align="center" prop="operateTime" />
|
||
</el-table>
|
||
<el-pagination
|
||
class="pagerBox"
|
||
@size-change="SizeChange"
|
||
@current-change="CurrentChange"
|
||
:current-page="pageInfo.pageNo"
|
||
:page-sizes="$store.state.PAGESIZRS"
|
||
:page-size="pageInfo.pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="Number(pageInfo.total)"
|
||
background
|
||
></el-pagination>
|
||
</div>
|
||
</div>
|
||
<div class="info-content" v-else>
|
||
<div class="back-operate" @click="infoDetailShow = false">
|
||
<i class="el-icon-arrow-left"></i>
|
||
<span>返回</span>
|
||
</div>
|
||
<div class="info-content-detail">
|
||
<div class="detail-title">{{rowObj.title}}</div>
|
||
<div class="detail-sub-title">
|
||
<span>应用：{{rowObj.app}}</span>
|
||
<span>标签：{{rowObj.tag}}</span>
|
||
<span>接收时间：{{rowObj.operateTime}}</span>
|
||
</div>
|
||
<div class="detail-content">{{rowObj.content}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { getInfoListApi, markInfoReadApi, batchDeleteInfoApi } from "@/assets/js/api/loginSign.js";
|
||
import { getNoticeListApi } from "@/assets/js/api/company/project";
|
||
export default {
|
||
data() {
|
||
return {
|
||
infoDetailShow: false,
|
||
checkIndex: 0,
|
||
// searchBtnList: [
|
||
// { name: "全部类别", value: "" },
|
||
// { name: "通知公告", value: 1 },
|
||
// { name: "审批流程", value: 3 },
|
||
// { name: "风险预警", value: 2 },
|
||
// { name: "任务待办", value: 4 },
|
||
// { name: "其他", value: 5 },
|
||
// ],
|
||
searchBtnList: [
|
||
{ name: "全部类别", value: "" },
|
||
{ name: "质量", value: 11 },
|
||
{ name: "安全", value: 10 },
|
||
{ name: "AI", value: 8 }
|
||
],
|
||
devSn: "",
|
||
// 遮罩层
|
||
loading: false,
|
||
daterange: [],
|
||
pageInfo: {
|
||
pageNo: 1, //页数
|
||
pageSize: 10, //条数
|
||
total: 1, //总条数
|
||
},
|
||
searchForm: {
|
||
title: "",
|
||
app: "",
|
||
tag: "",
|
||
},
|
||
timeRange: [],
|
||
tableData: [],
|
||
multipleSelection: [],
|
||
rowObj: {}
|
||
};
|
||
},
|
||
filters: {
|
||
typeText(val, list) {
|
||
let findItem = list.find((item) => val === item.value);
|
||
return findItem ? findItem.name : "";
|
||
},
|
||
},
|
||
mounted() {},
|
||
created() {
|
||
this.getList();
|
||
},
|
||
methods: {
|
||
// 删除
|
||
deleteInfoFn(){
|
||
let selectedIds = [];
|
||
if(this.multipleSelection.length == 0){
|
||
this.$message({
|
||
type: "error",
|
||
message: "请勾选表格项",
|
||
});
|
||
return;
|
||
} else {
|
||
this.multipleSelection.map(item => {
|
||
selectedIds.push(item.id)
|
||
})
|
||
}
|
||
this.$confirm("此操作将删除信息, 是否继续?", "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
})
|
||
.then(() => {
|
||
batchDeleteInfoApi({ accountId: this.$store.state.userInfo.userId, ids: selectedIds.join(',') }).then((res) => {
|
||
if (res.success) {
|
||
this.getList()
|
||
this.$message({
|
||
type: "success",
|
||
message: "操作成功!",
|
||
});
|
||
} else {
|
||
this.$message({
|
||
type: "error",
|
||
message: res.message,
|
||
});
|
||
}
|
||
});
|
||
})
|
||
.catch(() => {
|
||
this.$message({
|
||
type: "info",
|
||
message: "已取消操作",
|
||
});
|
||
});
|
||
},
|
||
// 标为已读
|
||
markReadFn(){
|
||
let selectedIds = [];
|
||
if(this.multipleSelection.length == 0){
|
||
this.$message({
|
||
type: "error",
|
||
message: "请勾选表格项",
|
||
});
|
||
return;
|
||
} else {
|
||
this.multipleSelection.map(item => {
|
||
selectedIds.push(item.id)
|
||
})
|
||
}
|
||
this.$confirm("此操作将标记已读, 是否继续?", "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
})
|
||
.then(() => {
|
||
markInfoReadApi({ accountId: this.$store.state.userInfo.userId, ids: selectedIds.join(',') }).then((res) => {
|
||
if (res.success) {
|
||
this.getList()
|
||
this.$message({
|
||
type: "success",
|
||
message: "操作成功!",
|
||
});
|
||
} else {
|
||
this.$message({
|
||
type: "error",
|
||
message: res.message,
|
||
});
|
||
}
|
||
});
|
||
})
|
||
.catch(() => {
|
||
this.$message({
|
||
type: "info",
|
||
message: "已取消操作",
|
||
});
|
||
});
|
||
},
|
||
handleSelectionChange(val) {
|
||
this.multipleSelection = val;
|
||
console.log(val,'测试测试')
|
||
},
|
||
infoDetailOpen(item) {
|
||
this.rowObj = item;
|
||
this.infoDetailShow = true;
|
||
},
|
||
searchSelect(obj, index) {
|
||
this.checkIndex = index;
|
||
this.pageInfo.pageNo = 1;
|
||
this.getList();
|
||
},
|
||
//查询列表
|
||
getList() {
|
||
let requestData = {
|
||
accountId: this.$store.state.userInfo.userId,
|
||
pageNo: this.pageInfo.pageNo,
|
||
pageSize: this.pageInfo.pageSize,
|
||
type: this.searchBtnList[this.checkIndex].value,
|
||
isRead: 0,
|
||
...this.searchForm,
|
||
};
|
||
if (this.timeRange && this.timeRange.length > 0) {
|
||
requestData.operateTime_begin = this.timeRange[0];
|
||
requestData.operateTime_end = this.timeRange[1];
|
||
}
|
||
getNoticeListApi(requestData).then((res) => {
|
||
if (res.success) {
|
||
this.tableData = res.result.records;
|
||
this.pageInfo.total = res.result.total;
|
||
}
|
||
});
|
||
},
|
||
//查询列表
|
||
// getList() {
|
||
// let requestData = {
|
||
// accountId: this.$store.state.userInfo.userId,
|
||
// pageNo: this.pageInfo.pageNo,
|
||
// pageSize: this.pageInfo.pageSize,
|
||
// type: this.searchBtnList[this.checkIndex].value,
|
||
// isRead: 0,
|
||
// ...this.searchForm
|
||
// }
|
||
// if(this.timeRange && this.timeRange.length > 0){
|
||
// requestData.operateTime_begin = this.timeRange[0]
|
||
// requestData.operateTime_end = this.timeRange[1]
|
||
// }
|
||
// getInfoListApi(requestData).then((result) => {
|
||
// if (result.success) {
|
||
// this.tableData = result.result.records;
|
||
// this.pageInfo.total = result.result.total;
|
||
// }
|
||
// });
|
||
// },
|
||
SizeChange(val) {
|
||
this.pageInfo.pageSize = val;
|
||
this.getList();
|
||
},
|
||
CurrentChange(val) {
|
||
this.pageInfo.pageNo = val;
|
||
this.getList();
|
||
},
|
||
searchList() {
|
||
this.pageInfo.pageNo = 1; //页数
|
||
this.getList();
|
||
},
|
||
refresh() {
|
||
this.searchForm = {
|
||
title: "",
|
||
app: "",
|
||
tag: "",
|
||
};
|
||
this.pageInfo.pageNo = 1; //页数
|
||
this.pageInfo.pageSize = 10; //条数
|
||
this.getList();
|
||
},
|
||
//选择条数
|
||
handleSizeChange(val) {
|
||
this.pageSize2 = val;
|
||
this.getPageList();
|
||
},
|
||
//选择分页
|
||
handleCurrentChange(val) {
|
||
this.pageNo2 = val;
|
||
this.getPageList();
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.tables {
|
||
min-height: 0;
|
||
}
|
||
.searchBox {
|
||
height: 50px;
|
||
margin-bottom: 0px;
|
||
margin-top: 10px;
|
||
}
|
||
.searchBtn {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 15px;
|
||
margin-left: 25px;
|
||
.search-btn-item {
|
||
width: 65px;
|
||
padding: 5px 1px;
|
||
text-align: center;
|
||
border: 1px solid #638ef7;
|
||
border-radius: 3px;
|
||
font-size: 14px;
|
||
color: #638ef7;
|
||
cursor: pointer;
|
||
}
|
||
.item-active {
|
||
background-color: #5181f6;
|
||
color: white;
|
||
}
|
||
.search-btn-item:not(:last-child) {
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
.info-operate {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 0px 25px 10px 25px;
|
||
> span:nth-child(1) {
|
||
margin-right: auto;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
color: #000000;
|
||
}
|
||
}
|
||
.info-content {
|
||
.back-operate {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #5282f6;
|
||
height: 40px;
|
||
border-bottom: 2px solid #c8c8c8;
|
||
padding-bottom: 5px;
|
||
cursor: pointer;
|
||
.el-icon-arrow-left {
|
||
color: #5282f6;
|
||
margin-left: 15px;
|
||
}
|
||
> span {
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
.info-content-detail {
|
||
margin-top: 80px;
|
||
.detail-title {
|
||
font-family: PingFang SC, PingFang SC;
|
||
color: #000000;
|
||
font-size: 18px;
|
||
text-align: center;
|
||
}
|
||
.detail-sub-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: PingFang SC, PingFang SC;
|
||
color: #000000;
|
||
font-size: 16px;
|
||
margin-top: 30px;
|
||
margin-bottom: 30px;
|
||
span:not(:last-child) {
|
||
margin-right: 25px;
|
||
}
|
||
}
|
||
.detail-content {
|
||
font-family: PingFang SC, PingFang SC;
|
||
color: #000000;
|
||
font-size: 14px;
|
||
margin: 0 25px 15px 25px;
|
||
}
|
||
}
|
||
}
|
||
.table_wrap{
|
||
.pagerBox{
|
||
margin-top: 30px;
|
||
}
|
||
}
|
||
</style>
|