mj_firm_former/src/layout/header-aside/components/header-message/index.vue

<template>
    <div class="ibps-mr-5">
        <el-tooltip
            v-if="messageCount === 0"
            :content="tooltipContent"
            effect="dark"
            placement="bottom"
        >
            <el-button class="ibps-ml-0 ibps-mr btn-text can-hover" type="text" @click="clickMore">
                <el-badge :max="9999" :value="messageCount">
                    <ibps-icon name="bell-o" size="16" />
                </el-badge>
            </el-button>
        </el-tooltip>
        <el-popover
            v-else
            v-model="popShow"
            placement="bottom-end"
            width="350"
            trigger="manual"
            popper-class="header-message-popper"
        >
            <el-button
                slot="reference"
                class="ibps-ml-0 ibps-mr btn-text can-hover"
                type="text"
                @click="openPop"
            >
                <el-badge :max="9999" :value="messageCount">
                    <ibps-icon name="bell-o" size="16" />
                </el-badge>
            </el-button>
            <el-card body-style="padding:0;">
                <div slot="header" style="font-size: 20px; font-weight: 600;">
                    {{ $t('layout.header-aside.header-message.message-count', { messageCount: messageCount }) }}
                </div>
                <div style="height: 250px;">
                    <el-scrollbar style="height: 100%; width: 100%;" wrap-class="ibps-scrollbar-wrapper ">
                        <ibps-list class="ibps-p-10">
                            <ibps-list-item
                                v-for="(message, index) in messageList"
                                :key="index"
                                @click.native="handelInteriorClick(message)"
                            >
                                <ibps-list-item-meta :title="message.subject" :description="message.ownerName">
                                    <el-avatar
                                        slot="avatar"
                                        :icon="message.messageType === 'bulletin' ? 'ibps-icon-bullhorn' : 'ibps-icon-user'"
                                        shape="circle"
                                        style="background-color: #87d068;"
                                    />
                                </ibps-list-item-meta>
                                <div slot="extra">
                                    {{ message.createTime | formatRelativeTime({ year: 'yyyy-MM-dd' }) }}
                                </div>
                            </ibps-list-item>
                        </ibps-list>
                    </el-scrollbar>
                </div>
                <div class="message-more">
                    <el-link type="primary" @click="clickMore">{{ $t('layout.header-aside.header-message.viewmore') }}</el-link>
                </div>
            </el-card>
        </el-popover>

        <!-- 消息明细 -->
        <inner-detail-dialog
            :id="editId"
            :subId="subId"
            :visible="dialogFormVisible"
            :title="$t('layout.header-aside.header-message.details')"
            inside
            readonly
            @callback="loadData"
            @close="closeDialog"
        />
    </div>
</template>

<script>
    import { getMsgList, queryReceivePageList } from '@/api/platform/message/innerMessage'
    import InnerDetailDialog from '@/views/platform/message/inner/detail/dialog'
    import Watermark from './watermark/watermark-cont.js'
    export default {
        components: {
            InnerDetailDialog
        },
        data() {
            return {
                editId: '',
                subId: '',
                dialogFormVisible: false,
                isControl: true,
                messageList: [],
                messageCount: 0,
                infoMessage: '',
                countNumber: 0,
                popShow: false
            }
        },
        computed: {
            tooltipContent() {
                return this.messageCount === 0 ? this.$t('layout.header-aside.header-message.empty') : ''
            }
        },
        mounted() {
            //轮询弹窗任务提醒
            // setTimeout(() => {
            //     this.isControl=true
            //     this.loadData()
            // }, 1000)
            // Watermark.set('线上试用版本','深圳市金源信通')
            this.loadData()
        },
        beforeDestroy() {
            Watermark.set('', '')
        },
        methods: {
            // 加载数据
            loadData() {
                getMsgList({
                    parameters: [
                        // { key: 'Q^subject^SL', value: '提醒' },
                        // { key: 'Q^messageType^SL', value: 'system' }
                    ],
                    requestPage: { limit: 5, pageNo: 1, totalCount: 0 },
                    sorts: []
                }).then((response) => {
                    const data = response.data
                    this.messageList = data.dataResult
                    this.messageCount = data.pageResult ? data.pageResult.totalCount : 0
                    this.countNumber = data.pageResult.totalCount
                    // if (this.countNumber == 0) {
                    //     // if(response.data.pageResult.totalCount>0){
                    //     //     this.$message.warning('您有'+response.data.pageResult.totalCount+'条未处理的 [ 待审批 / 被驳回任务消息 ]，请及时处理！！！')
                    //     // }
                    // } else if (this.countNumber < data.pageResult.totalCount) {
                    //     //如果上次记录数量低于本次  进行提醒，准备待办
                    //     let _this = this
                    //     let h = this.$createElement
                    //     let num = data.pageResult.totalCount - this.countNumber
                    //     this.infoMessage = this.$notify({
                    //         title: '您有新的待办任务产生！',
                    //         message: h('p', null, [
                    //             h('span', null, '任务内容: ' + data.dataResult[0].subject),
                    //             h('br'),
                    //             h('span', null, '生成时间: '),
                    //             h('span', { style: 'color: #FF8C00;font-size:12px;' }, data.dataResult[0].createTime),
                    //             h('br'),
                    //             h('el-button', {
                    //                 attrs: {
                    //                     size: 'mini',
                    //                     type: 'primary',
                    //                     plain: true
                    //                 },
                    //                 on: {
                    //                     click: () => {
                    //                         _this.cancelInfo()
                    //                     }
                    //                 }
                    //             }, '进入办理'),
                    //             h('el-button', {
                    //                 attrs: {
                    //                     size: 'mini',
                    //                     plain: true
                    //                 },
                    //                 on: {
                    //                     click: () => {
                    //                         _this.$notify.closeAll()
                    //                     } // 路由加载之后，调用关闭消息弹窗的方法
                    //                 }
                    //             }, '忽略全部')
                    //         ]),
                    //         type: 'warning',
                    //         duration: 0
                    //     })
                    // }
                    // if (this.countNumber == 0) {
                    //     this.countNumber = data.pageResult.totalCount
                    //     // setInterval(() => {
                    //     //     if(this.isControl &&  response.message == "获取收到的内部消息列表成功！"){
                    //     //         this.loadData()
                    //     //     }
                    //     // }, 60000)
                    // } else {
                    //     this.countNumber = data.pageResult.totalCount
                    // }
                }).catch(() => {
                    this.isControl = false
                })
            },
            cancelInfo() {
                this.$router.push('/officeDesk/pendingItems')
                this.$notify.closeAll()
            },
            handelInteriorClick(message) {
                this.subId = message.subId
                this.editId = message.id
                this.dialogFormVisible = true
            },
            openPop() {
                this.popShow = !this.popShow
                if (this.popShow) {
                    this.loadData()
                }
            },
            clickMore() {
                // 更多消息
                this.popShow = !this.popShow
                this.$router.push('/message')
            },
            closeDialog(visible) {
                this.dialogFormVisible = visible
                this.loadData()
            }
        },
        // 销毁事件
        beforeDestroy() {
            this.isControl = false
        }
    }
</script>
<style lang="scss">
    .header-message-popper {
        padding: 0 !important;
        .message-more {
            padding: 15px 0;
            text-align: center;
            border-top: 1px solid #ebeef5;
        }
    }
</style>