digital_park_static/digital-park-web/digital-park/src/views/my-related/mseeage/Message.vue

<template>
    <div class="my-message" data-1664346848130>
        <div class="message-header">
            <Nav />
        </div>
        <div class="message-content-container">
            <div class="title">
                <img @click="goBack" src="~@assets/image/myRelated/titleIcon.png" class="title-icon fl" alt="icon" />
                <span class="title-span fl">我的消息</span>
            </div>
            <div class="table-box" v-loading="pageLoading" element-loading-text="数据加载中...">
                <div class="table-title">
                    <span class="title-span fl">我的消息</span>
                    <span class="unread-span" v-if="notRead > 0">
                        （您有
                        <span class="unread-num">{{ notRead }}</span>条未读通知）
                    </span>
                    <span class="mark-read fr" @click="markRead('all')">全部标记已读</span>
                    <span class="mark-read fr" @click="markRead('check')">勾选标记已读</span>
                </div>
                <div class="table-container">
                    <el-table class="block-table" :data="tableData" @row-click="openDetail">
                        <el-table-column width="34" :align="'center'" class-name="checked-column">
                            <template slot-scope="scope">
                                <span
                                    class="check-span"
                                    :class="{'is-read' : scope.row.isRead}"
                                    @click.stop="changeCheck(scope.row)"
                                >
                                    <img
                                        v-if="scope.row.isSelected"
                                        src="~@assets/image/myRelated/checked.png"
                                        alt="checkOk"
                                    />
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            :label="item.label"
                            v-for="(item,inx) of tableColumn"
                            :key="inx"
                            :width="item.width"
                            :show-overflow-tooltip="true"
                        >
                            <template slot-scope="scope">
                                <div
                                    v-if="item.prop == 'modifiedOn'"
                                >{{ scope.row[item.prop] | formatDate("YYYY-MM-DD HH:mm") }}</div>
                                <div v-else-if="item.prop == 'type'">{{ scope.row[item.prop].text }}</div>
                                <div v-else-if="item.prop == 'isRead'">
                                    <span v-if="scope.row.isRead">已读</span>
                                    <img
                                        v-else
                                        src="~@assets/image/myRelated/notRead.png"
                                        alt="notRead"
                                    />
                                </div>
                                <div v-else>{{ scope.row[item.prop] }}</div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination_box">
                    <Pagination
                        :currentPage="queryParams.page"
                        :total="queryParams.total"
                        @change-page-size="changePageSize"
                        @change-page="changePage"
                    />
                </div>
            </div>
        </div>
        <!-- 消息详情 -->
        <MessageDetailDialog ref="MessageDetailDialog" @close="getMessageNoticeList"/>
        <Footer />
    </div>
</template>

<script>
import "./Message.scss";
import Nav from "@components/Header.vue";
import Footer from "@components/Footer.vue";
import Pagination from "@components/Pagination.vue";
import { getMessageNoticeList, markReadMessage } from "@api/my-related";
import MessageDetailDialog from "./components/MessageDetailDialog/index.vue";

export default {
    components: { Nav, Footer, Pagination, MessageDetailDialog },
    data() {
        return {
            pageLoading: false,
            tableColumn: [
                {
                    label: "通知时间",
                    prop: "modifiedOn",
                    width: 160,
                },
                {
                    label: "标题",
                    prop: "title",
                },
                {
                    label: "类型",
                    prop: "type",
                    width: 120,
                },
                {
                    label: "是否已读",
                    prop: "isRead",
                    width: 100,
                },
            ],
            tableData: [],
            queryParams: {
                page: 1,
                pageSize: 10,
                total: 0,
            },
            // 选中list
            checkedList: [],
            // 未读数
            notRead: 0,
        };
    },
    mounted() {
        this.getMessageNoticeList();
    },
    methods: {
        // 分页切换
        changePageSize(v){
            this.queryParams.pageSize = v;
            this.getMessageNoticeList();
        },
        changePage(v){
            this.queryParams.page = v;
            this.getMessageNoticeList();
        },
        // 获取列表数据
        getMessageNoticeList() {
            this.pageLoading = true;
            getMessageNoticeList(this.queryParams)
                .then((res) => {
                    // console.log(res);
                    if (res.data.status == 0) {
                        const data = res.data.data;
                        let { resultData } = data;
                        this.tableData = resultData.list.map((el) => {
                            el.isSelected = false;
                            return el;
                        });
                        console.log(
                            this.$cloneDeep(this.tableData),
                            "this.tableData"
                        );
                        this.queryParams.total = resultData.total;
                        this.notRead = resultData.total - data.readCount;
                        this.notRead = this.notRead < 0 ? 0 : this.notRead;
                    } else if (res.data.status == 102) {
                        this.$router.push("/login");
                    } else {
                        this.$message.error(res.data.msg);
                    }
                    this.pageLoading = false;
                })
                .catch((err) => {
                    console.log(err);
                    this.pageLoading = false;
                    this.$message.error(
                        `获取数据失败,失败原因${err},请刷新重试！`
                    );
                });
        },
        /**
         * 标记已读
         * @param {*} target all 全部 check 勾选已读
         */
        markRead(target) {
            let param = [];
            if (target == "check") {
                if (this.checkedList.length < 1) {
                    return this.$message.error("请至少勾选一条数据");
                } else {
                    param = this.checkedList;
                }
            }
            // 设置已读
            console.log(this.$cloneDeep(param), "已读传参");
            this.markReadMessage(param, true);
        },
        // 设置已读Api
        markReadMessage(list, needRefresh) {
            markReadMessage(list)
                .then((res) => {
                    if (res.data.status == 0 && needRefresh) {
                        this.getMessageNoticeList();
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 单元格点击
        changeCheck(row) {
            if (row.isRead) {
                return;
            }
            row.isSelected = !row.isSelected;
            // 如果已勾选的list里有这个ID，并且此数据为false 需要删除
            if (
                this.checkedList.includes(row.messageNoticeId) &&
                !row.isSelected
            ) {
                this.checkedList.splice(
                    this.checkedList.indexOf(row.messageNoticeId),
                    1
                );
            }
            // 直接push
            else {
                this.checkedList.push(row.messageNoticeId);
            }
        },
        // 打开详情弹框
        openDetail(row) {
            this.$refs.MessageDetailDialog.openDialog(row);
            if(!row.isRead){
                row.isRead = true;
                this.markReadMessage([row.messageNoticeId]);
            }
        },
        // 返回上一页
        goBack(){
            this.$router.push('/my-business');
        },
    },
};
</script>