dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterNotificationNews.vue

<template>
    <div style="width: 100%;background: #fff;min-height: 700px;color: #666;" class="userCenterMyProject">
        <div style="height: 60px;line-height: 60px;padding-top: 10px;margin-left: 30px;margin-right: 30px; border-bottom: 1px solid rgba(228, 228, 228, 1);">
            <el-button @click="deleteItems()">{{$t('common.Delete')}}</el-button>
            <el-button type="warning" @click="changeReadStatus()">{{$t('common.MarkRead')}}</el-button>
            <el-button type="primary" @click="msgTypeChange(0)">{{$t('common.AllNews')}}</el-button>
            <!-- <el-button @click="msgTypeChange(1)">服务消息</el-button>
            <el-button @click="msgTypeChange(2)">活动消息</el-button>
            <el-button @click="msgTypeChange(3)">审核消息</el-button> -->
            <el-button type="info" @click="unReadMsg">{{$t('common.UnreadNews')}}</el-button>
            <el-select v-model="msgType" :placeholder="$t('common.MessageType')" style="margin-left:20px;">
                <el-option :label="$t('common.ServiceMessage')" value="dict_msg_fw"></el-option>
                <el-option :label="$t('common.ActiveMessage')" value="dict_msg_hd"></el-option>
                <el-option :label="$t('common.ReviewMessage')" value="dict_msg_sh"></el-option>
              </el-select>
                <el-input :placeholder="$t('common.keywordSearch')" v-model="keyWord" style="float: right;margin-top: 10px;" maxlength="10" show-word-limit>
                  <template slot="append"><i class="el-icon-search" @click="keyWordSearch()"></i></template>
                </el-input>
        </div>
        <div style="margin-left: 30px;">
            <el-table
                :data="tableData"
                stripe
                highlight-current-row
                @selection-change="handleSelectionChange"
                :row-class-name="tableRowClassName"
                style="width: 100%" >
                <template slot="empty">
                    {{$t('common.UserNoData')}}
                </template>
                <el-table-column type="selection" width="50"> </el-table-column>
                <el-table-column prop="title" :label="$t('common.Title')" width='200'> </el-table-column>
                <el-table-column prop="content" :label="$t('common.Content')" width='300'> </el-table-column>
                <el-table-column prop="createDate" :label="$t('common.ReceivingTime')" width="250"></el-table-column>
                <el-table-column prop="pushMessageType" :label="$t('common.Type')" width="150"></el-table-column>
               
            </el-table>
        </div>
        <div style="width: 100%;text-align: center;">
            <el-pagination
                style="margin-top: 50px;height: 80px;"
                background
                layout="prev, pager, next"
                :total="totalCount"  @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
                </el-pagination>
        </div>
    </div>
</template>
<script>
    import {selectPushMsg} from '@/api/userCenter'
    import {deleteMsgItems} from '@/api/userCenter'
    import {updateReadStatus} from '@/api/userCenter'
    export default {
        name: 'userCenterNotificationNews',
        data () {
            return {
                formInline: {
                    user: '',
                    region: ''
                },
                keyWord:'',
                tableData:'',
                // label:'',
                pageSize:10,
                currentPage:1,
                totalCount:0,
                msgType:'',     //消息类型
                ids:'',         //选择的多个id串  
                array : [],     //选择的多个id数组
                array2: [],     //选择的多个读取状态数组    
                readStatus:'',  //读取状态  
                multipleSelection:[],
                messageType:{
                    "dict_msg_fw":this.$t('common.ServiceMessage'),
                    "dict_msg_hd":this.$t('common.ActiveMessage'),
                    "dict_msg_sh":this.$t('common.ReviewMessage')},
            }
        },
        mounted () {
            this.initTableData();//默认消息类型为全部
        },
        watch:{
            '$i18n.locale' () {
                this.initTableData()
            },
            "msgType"(){
                this.currentPage = 1;
                this.initTableData();
            }
        },
        methods:{
            changeType(){
                this.messageType={
                    "dict_msg_fw":this.$t('common.ServiceMessage'),
                    "dict_msg_hd":this.$t('common.ActiveMessage'),
                    "dict_msg_sh":this.$t('common.ReviewMessage')
                }
            },
            tableRowClassName({ row }) {
                if (row.params =='unread') {
                    return 'not-finish';
                }
                return '';
            },
            // 发布
            release(index, rows) {
                console.log(index, rows)
            },
            // 编辑
            change(index, rows) {
                console.log(index, rows)
            },
            // 删除
            deleteRow(index, rows) {
                console.log(index, rows)
            },
            // 撤回
            withdraw(index,rows) {
                console.log(index, rows)
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);                
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.initTableData();
            },
            handleSelectionChange(val) {
                console.log(val,'this is val')
                this.multipleSelection = val;
                var list = this.multipleSelection;
               if(list.length==0){
                    this.array = [];
                    this.array2 = [];
               }
                for(var i=0;i<list.length;i++){
                   // array.push('"' + list[i].id +'"');
                   // array.push("'" + list[i].id +"'");
                    this.array.push(list[i].id);
                    this.array2.push(list[i].params);
                }
                //var str = array.toString(); notification
                //this.ids = str.substr(1,str.length-2);  //去掉2边空格
            },
            //初始化表格数据
            initTableData(){
                this.changeType();
                 selectPushMsg(this.msgType,this.keyWord, this.pageSize,this.currentPage,this.readStatus).then(res=>{
                    if(res.data.page.totalCount>0){
                         var list = res.data.page.list;
                         for(var i=0;i<list.length;i++){
                            list[i].createDate = this.formatDateAndHouse(parseInt(list[i].createDate));
                            list[i].pushMessageType=this.messageType[list[i].pushMessageTypeDict];
                         }
                        this.tableData = list;   
                    }else{
                        this.tableData = '';
                    }
                    
                    this.totalCount  =Number(res.data.page.totalCount);
                })

            },
            //消息类型切换
            msgTypeChange(index){
                if(index==0){
                    this.msgType = '';
                }
                // else if(index==1){
                //     this.msgType = "dict_msg_fw";
                // }else if(index==2){
                //     this.msgType = "dict_msg_hd";
                // }else if(index==3){
                //     this.msgType = "dict_msg_sh";
                // }
                this.currentPage = 1;
                this.initTableData();
            },
            //未读消息 按钮触发
            unReadMsg(){
                this.readStatus = 'unread';
                this.currentPage = 1;
                this.initTableData();
                this.readStatus = '';    
            },
            //中国标准时间 转 yy-MM-dd hh:mm:ss
            YymmddFormat(newDate) {
                let Month = newDate.getMonth() + 1;
                Month = Month >= 10 ? Month : '0' + Month;
                let d = newDate.getDate();
                d = d >= 10 ? d : '0' + d
                return [
                    [newDate.getFullYear(), Month, d].join('-'), [newDate.getHours(), newDate.getMinutes(), newDate.getSeconds()].join(':')
                ].join(' ');
            },
            //关键词搜索
            keyWordSearch(){
                this.currentPage = 1;
                this.initTableData();
            },
            deleteItems(){
                if(this.array.length == 0){
                   this.$message.warning(this.$i18n.locale === 'zh' ?"请先选择要删除的记录":'Please select the record to delete first');
                   return;     
                }else{
                   this.$confirm(this.$t('common.Thisoperationwillpermanently'), this.$t('common.Tips'), {
                        confirmButtonText: this.$t('common.OK'),
                        cancelButtonText: this.$t('common.cancel'),
                        type: 'warning'
                        }).then(() => {
                             deleteMsgItems(this.array).then(res=>{
                                    
                             })
                        this.$message({
                            type: 'success',
                            message: this.$i18n.locale === 'zh' ? '删除成功!' : 'Successfully deleted'
                        });
                        this.currentPage = 1;
                        this.initTableData();  
                        }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: this.$i18n.locale === 'zh' ? '已取消删除' : 'Deletion canceled',
                        });          
                        });

                }
             
            },
            changeReadStatus(){
                var status = this.array2;   
                if(status.indexOf('read')>=0 || status.length==0){
                    this.$message.warning(this.$t('common.Pleaseselectallunreadrecords'));
                }else{
                    this.$confirm(this.$t('common.Areyousureyouwanttomarkasread'),  this.$t('common.Tips'), {
                        confirmButtonText: this.$t('common.OK'),
                        cancelButtonText: this.$t('common.cancel'),
                        type: 'warning'
                        }).then(() => {
                             updateReadStatus(this.array).then(res=>{
                                    
                             })
                        this.$message({
                            type: 'success',
                            message: this.$i18n.locale === 'zh' ?'更新成功!':'Update succeeded'
                        });
                        this.currentPage = 1;
                        this.initTableData();  
                        }).catch(() => {
                        this.$message({
                            type: 'info',
                            message:  this.$i18n.locale === 'zh' ?'已取消更新':'Update canceled'
                        });          
                        });
                }
            }
        }
    }




</script>
<style scoped>

    .el-input {
        width: 200px ;
    }
    .el-form-item__content,.el-select {
        width: 200px !important;
    }
    .el-table thead {
        background: #eee;
    }
    .userCenterMyProject >>> .el-pagination .el-pager li,
    .userCenterMyProject >>> .el-pagination .btn-next,
    .userCenterMyProject >>> .el-pagination .btn-prev{
        width: 35px;
        height: 35px;
        line-height: 35px;
    }
    .userCenterMyProject >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
        background: #0050d8;
    }
    .userCenterMyProject >>> .not-finish td:nth-child(2)  .cell{
        color:#FFFFFF;
        background: #909399;
    }
</style>