eta_front/src/components/notificationMsg.vue

<template>
    <!-- 消息通知 -->
    <div>
        <el-popover
            placement="bottom"
            width="443"
            trigger="click" v-model="visible">
            <div class="notifation-wrap">
                <!-- 防止tabs在popover前渲染,会导致tab选中状态不正确 -->
                <el-tabs v-model="activeName" v-if="visible" @tab-click="getMsgList">
                    <!-- 研报审批 -->
                    <el-tab-pane v-if="tabsShow.first" :label="`${$t('AprrovalPage.research_approval_btn')}${activeName==='first'?'('+UnreadTotal+')':''}`" name="first"></el-tab-pane>
                    <!-- bi看板审批 -->
                    <el-tab-pane v-if="tabsShow.second" :label="`${$t('SystemManage.BaseConfig.bIDashboard_approval')}${activeName==='second'?'('+UnreadTotal+')':''}`" name="second"></el-tab-pane>
                    <!-- 资产数据 -->
                    <el-tab-pane v-if="tabsShow.third" :label="`${$t('SystemManage.OperateAuth.label_notice_title')}${activeName==='third'?'('+UnreadTotal+')':''}`" name="third"></el-tab-pane>
                </el-tabs>
                <div class="massage-list" v-if="visible">
                    <div class="message-item" :class="{'IsRead':item.IsRead}" v-for="item in msgList" :key="item.Id" @click="readMsg(item)">
                        <span class="icon">
                            <img :src="require(`@/assets/img/approve_m/${approveState[item.ApproveState]||'process'}-msg.svg`)" alt="">
                        </span>
                        <div class="info">
                            <div class="head">
                                <span class="title">{{item.Content}}</span>
                                <span class="time">{{item.CreateTime}}</span>
                            </div>
                            <!-- 审批内容 -->
                            <div class="content" v-if="activeName==='first'">{{item.Remark||''}}&nbsp;</div>
                            <!-- 看板审批 内容部分-->
                            <div class="content" v-else-if="activeName==='second'">{{item.Remark||''}}&nbsp;</div>
                            <!-- 权限内容 -->
                            <div class="content" v-else>
                                {{item.Remark||''}}
                                <span>，点击<el-button type="text" @click="openAuthDetail(item)">查看详情</el-button>!</span>
                            </div>
                        </div>
                    </div>
                    <tableNoData v-if="!msgList.length" :text="$t('AprrovalPage.no_news_yet')"></tableNoData>
                </div>
                <el-button type="text" class="close-btn" @click="visible=false">{{$t('AprrovalPage.close_btn')}}</el-button>
            </div>
            <span slot="reference" @click="visible = !visible" class="msg-btn">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16.7344 15.4904L15.2941 12.9564V7.84847C15.2941 5.89142 13.8231 3.77337 11.6786 2.99732C11.5741 1.96012 10.8811 1.20374 9.97287 1.20374C9.06595 1.20374 8.37036 1.96014 8.26717 2.99732C6.12392 3.77337 4.65292 5.8914 4.65292 7.84847V12.9564L3.14258 15.6146C3.04183 15.7903 3.04429 16.0054 3.14504 16.1799C3.24581 16.3544 3.43263 16.4601 3.63415 16.4601H7.22871C7.49293 17.7357 8.62233 18.6967 9.97289 18.6967C11.3247 18.6967 12.4541 17.7357 12.7171 16.4601H16.3116C16.3215 16.4601 16.3288 16.4601 16.3374 16.4601C16.6508 16.4601 16.904 16.2082 16.904 15.8948C16.904 15.7362 16.8401 15.5925 16.7344 15.4904ZM9.97287 2.33803C10.1769 2.33803 10.3415 2.49286 10.4472 2.7239C10.2899 2.70792 10.1375 2.67106 9.97287 2.67106C9.8082 2.67106 9.65583 2.70792 9.49851 2.7239C9.60422 2.49284 9.76889 2.33803 9.97287 2.33803ZM9.97287 17.5636C9.25396 17.5636 8.65303 17.1016 8.41951 16.4601H11.5262C11.2927 17.1015 10.693 17.5636 9.97287 17.5636ZM4.60745 15.3282L5.71102 13.3853C5.76015 13.3017 5.78719 13.2034 5.78719 13.1051V7.84847C5.78719 5.93934 7.57648 3.80413 9.97287 3.80413C12.3692 3.80413 14.161 5.93934 14.161 7.84847V13.1051C14.161 13.2034 14.1868 13.3017 14.2347 13.3853L15.3395 15.3282H4.60745Z" fill="currentColor"/>
                </svg>
                <div class="unread" v-if="allUnreadTotal">{{allUnreadTotal>99?'99+':allUnreadTotal}}</div>
            </span>
        </el-popover>
        
        <m-dialog
            :show.sync="isOpenAuthDia"
            width="800px"
            title="权限变更详情"
            @close="isOpenAuthDia = false"
        >
            <div class="notice-auth-box">
                <div class="main">

                    <div class="left" v-if="!detailInfo.isAuthSet">

                        <el-radio-group v-model="detailInfo.Source" @input="changeSource" style="margin-bottom:10px;">
                            <el-radio-button
                                v-for="item in tabs" 
                                :key="item.key"
                                :label="item.key"
                            >{{item.label}}</el-radio-button>
                        </el-radio-group>

                        <ul class="data-types" v-if="detailInfo.Source===6">
                            <li 
                                v-for="item in subTabs" 
                                :key="item.key" 
                                :class="item.key===detailInfo.SubSource&&'act'"
                                @click="changeSubSource(item)"
                            >{{item.label}}</li>
                        </ul>
                    </div>

                    <div class="right">
                        <label v-if="detailInfo.isAuthSet">{{tabs.find(_ => _.key===detailInfo.Source).label}}</label>

                        <el-table
                            :data="tableData"
                            ref="table"
                            element-loading-text="加载中..."
                            v-loading="tableLoading"
                            border
                            style="margin:20px 0"
                            max-height="400"
                        >
                            <el-table-column
                                v-for="item in tableColums"
                                :key="item.label"
                                :label="item.label"
                                :prop="item.key"
                                :width="item.widthsty"
                                :min-width="item.minwidthsty"
                                align="center"
                            >
                                <template slot-scope="{row}">

                                    <span>{{ row[item.key] }}</span>
                                </template>
                            </el-table-column>
                            
                            <div slot="empty" style="padding: 20px 0">
                                <tableNoData :text="$t('Table.prompt_slogan')" size="mini"/>
                            </div>
                        </el-table>
                    </div>
                </div>
                
                <div class="dia-bot">
                    <el-button type="primary" plain @click="isOpenAuthDia = false"
                    >{{$t('Dialog.known')}}</el-button
                    >
                </div>
            </div>
        </m-dialog>
    </div>
</template>

<script>
import {approveInterence} from '@/api/modules/approve.js';
import { operateAuthInterface } from '@/api/modules/setApi';
import {etaBaseConfigInterence} from '@/api/modules/etaBaseConfigApi.js';
import mDialog from './mDialog.vue';
const tabNames = ['first','second','third'];
export default {
    components: { mDialog },
    data() {
        this.approveState=['','process','passed','reject','return',]
        return {
            activeName:'',
            visible:false,
            msgList:[],
            UnreadTotal:0,

            allUnreadTotal: 0,

            //详情弹窗
            isOpenAuthDia: false,
            tableData: [],
            page_no: 1,
            haveMore: false,
            detailInfo: {
                MessageId: 0,
                isAuthSet: false,//true权限设置 false资产转移
                Source: 1,
                SubSource: 0,
            },
            tabsShow:{
              first:false, //研报
              second:false, //BI
              third:true, //资产
            },
        };
    },
    computed: {
        tabs(){
            const tabs = [
                { label: this.$t('SystemManage.OperateAuth.tab01'), key: 1 },
                { label: this.$t('SystemManage.OperateAuth.tab02'), key: 2 },
                { label: this.$t('SystemManage.OperateAuth.tab03'), key: 3 },
                { label: this.$t('SystemManage.OperateAuth.tab04'), key: 4 },
                { label: this.$t('SystemManage.OperateAuth.tab05'), key: 5 },
                { label: this.$t('SystemManage.OperateAuth.tab06'), key: 6 },
            ]
            return tabs
        },
        subTabs() {
            const subTabs = [
                { label: /* '自定义分析' */this.$t('SystemManage.OperateAuth.tab_sub_sheet1'), key: 4 },
                { label:/*  '时间序列表格' */this.$t('SystemManage.OperateAuth.tab_sub_sheet2'), key: 2 },
                { label: /* '混合表格' */this.$t('SystemManage.OperateAuth.tab_sub_sheet3'), key: 3 },
            ]

            return subTabs
        },
        tableColums() {
            const clomusMap = {
                5: [
                    { label: this.$t('SystemManage.OperateAuth.table_col_name01'),key: 'DataName' },
                    { label: '操作时间',key: 'CreateTime' },
                ],
                6: [
                    { label: this.$t('SystemManage.OperateAuth.table_col_sheet_name'),key: 'DataName' },
                    { label: '操作时间',key: 'CreateTime' },
                ],
            }
            return clomusMap[this.detailInfo.Source] ? clomusMap[this.detailInfo.Source] 
                : [
                    { label: this.$t('SystemManage.OperateAuth.table_col_name05'),key: 'DataName' },
                    { label: '操作时间',key: 'CreateTime' },
                ]
        },
    },
    watch:{
        async visible(val){
            if(val){
               await this.handleTabs()
                this.getMsgList()
            }
        },
        isOpenAuthDia(nval) {
            if(!nval){
                this.$refs.table.bodyWrapper.removeEventListener('scroll',this.handleScroll)
                return
            } 

            this.getAuthMsgDetail()
            this.$nextTick(() => {
                this.$refs.table.bodyWrapper.addEventListener('scroll',this.handleScroll)
            })
        }
    },
    methods:{
        async handleTabs(){
            return new Promise(async resolve=>{
                const res = await etaBaseConfigInterence.getBaseConfig()
                if(res.Ret != 200) return;
                const {IsReportApprove='',ReportApproveType='',IsBIApprove=''} = res.Data
                let isETAApprove = (IsReportApprove==='true'?true:false) && ReportApproveType==='eta'
                let IsBIApprove_v = IsBIApprove==='true'?true:false
                
                if(isETAApprove) this.tabsShow.first = true;
                if(IsBIApprove_v) this.tabsShow.second = true;
                if(!tabNames.includes(this.activeName)){//默认选中第一个显示的tab   
                    this.activeName = Object.entries(this.tabsShow).filter(_=>_[1])[0][0] || 'third'; 
                }
                resolve()
            })
        },
        async readMsg(msg){
            const res = this.activeName === 'first'    
                ? await approveInterence.readApproveMsg({MessageId:msg.Id})
                : this.activeName === 'second' ? await approveInterence.readBiApproveMsg({MessageId:msg.Id})
                  : await operateAuthInterface.redMessage({ MessageId: msg.DataPermissionMessageId })

            if(res.Ret!==200) return 
            this.getMsgList()
            this.getUnreadNum()

            if(this.activeName === 'first' || this.activeName === 'second'){
                const type = msg.ApproveState===1?'approve':msg.ApproveState===4?'detail':'myself' 
                this.$router.push({
                    path:'/approveDetail',
                    query:{
                        mainType:this.activeName === 'first' ? 'report' :'bi',
                        type,
                        approveId:this.activeName === 'first' ? msg.ReportApproveId :msg.BiApproveId, 
                    }
                })
            }
            
        },
        async getMsgList(){
            const res = this.activeName === 'first' 
                ? await approveInterence.getApproveMsgList({
                    CurrentIndex:1,
                    PageSize:1000
                })
                :  (
                this.activeName === 'second' ?
                await approveInterence.getBiApproveMsgList({ 
                    CurrentIndex:1,
                    PageSize:1000
                }) 
                : await operateAuthInterface.getNoticeList({
                    CurrentIndex:1,
                    PageSize:1000
                }) 
                )

            if(res.Ret!==200) return 
            this.msgList = res.Data.List||[]
            this.UnreadTotal = res.Data.UnreadTotal||0
        },

        async getUnreadNum() {
            const res = await operateAuthInterface.getAllUnread()

            if(res.Ret !== 200) return
            
            this.allUnreadTotal = res.Data
        },

        openAuthDetail(item) {
            this.detailInfo.MessageId = item.DataPermissionMessageId;
            this.detailInfo.isAuthSet = [3,4].includes(item.OpType);
            this.detailInfo.Source = item.Source;
            this.detailInfo.SubSource = item.SubSource;
            this.isOpenAuthDia = true
        },

        changeSource() {
            this.page_no = 1;
            this.detailInfo.SubSource = this.detailInfo.Source===6?4:0;
            this.getAuthMsgDetail()
        },

        changeSubSource({key}) {
            this.page_no = 1;
            this.detailInfo.SubSource = key;
            this.getAuthMsgDetail()
        },

        async getAuthMsgDetail() {
            const { MessageId,Source,SubSource } = this.detailInfo;
            const res = await operateAuthInterface.getNoticeDetail({
                MessageId,
                Source,
                SubSource,
                CurrentIndex: this.page_no
            })

            if(res.Ret !== 200) return 

            let arr = res.Data.List||[]
            
            this.haveMore = res.Data.Paging.Pages > this.page_no
            this.tableData = this.page_no ===1 ? arr : [...this.tableData,...arr];
        },

        /* 滚动事件 */
        handleScroll:_.throttle(function(){
            const {scrollTop,clientHeight,scrollHeight} = this.$refs.table.bodyWrapper
            if(scrollTop + clientHeight >= scrollHeight-10 && this.haveMore){
                this.page_no++;
                this.getAuthMsgDetail();
            }
        },300),
    },

    mounted() {
        this.getUnreadNum()
    }
};
</script>

<style lang="scss">
.notifation-wrap{
    position:relative;
    .massage-list{
        padding: 0 10px;
        max-height: 320px;
        overflow-y: auto;
        .message-item{
            cursor: pointer;
            display: flex;
            padding: 5px 0;
            border-bottom: 1px solid #E4E7ED;
            color:#333;
            &.IsRead{
                color:#999;
            }
            .icon{
                width:40px;
                display: flex;
                align-items: flex-start;
                justify-content: center;
            }
            .info{
                flex:1;
                .head{
                    display: flex;
                    justify-content: space-between;
                }

            }
        }
    }
    .close-btn{
        position:absolute;
        top:0;
        right:0;
        box-sizing: border-box;
    }
}
.msg-btn{
    cursor: pointer;
    display: inline-block;
    width: 50px;
    text-align: center;
    position: relative;
    .unread{
        position: absolute;
        width:23px;
        height:14px;
        color:#fff;
        background-color:#AD352F;
        border-radius: 40px;
        top:-4px;
        right:4px;
        font-size: 12px;
    }
}
.notice-auth-box {
    .main {
        //display: flex;
        .left {
            flex-shrink: 0;
            margin-right: 15px;
            .data-types {
                display: flex;
                gap: 15px;
                li {
                    padding: 5px 0;
                    border-bottom: 2px solid transparent;
                    &.act {
                        border-color: #0052D9;
                    }
                }
            }
        }
        .right {
            flex: 1;
        }
    }
    .dia-bot {
        display: flex;
        justify-content: center;
        margin-top: 30px;
    }
}
</style>