dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterNotificationNotice.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-input :placeholder="$t('common.keywordSearch')" v-model="query" 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="pushNoticeTypeDict" :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 {changeNoticeReadStatus,selectPlatFormNotifyNotice,deleteNoticeItems} from '@/api/userCenter'
    export default {
        name: 'userCenterNotificationNotice',
        data () {
            return {
                formInline: {
                    user: '',
                    region: ''
                },
                query:'',
                tableData:'',
                pageSize:10,
                currentPage:1,
                totalCount:0,
                pushNoticeType:'',     //消息类型
                ids:'',         //选择的多个id串
                array : [],     //选择的多个id数组
                array2: [],     //选择的多个读取状态数组
                readStatus:'',  //读取状态
                multipleSelection:[],
                statusDict: {'read': '已读','unread': '未读'},
                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()
            },
        },
        methods:{
            tableRowClassName({ row }) {
                if (row.readStatus =='unread') {
                    return 'not-finish';
                }
                return '';
            },
            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 =='read') {
            //         return '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) {
                this.array = [];
                this.array2 = [];
                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++){
                    this.array.push(list[i].id);
                    this.array2.push(list[i].params);
                }
            },
            //初始化表格数据
            initTableData(){
                this.changeType();
                selectPlatFormNotifyNotice(this.query, this.pageSize,this.currentPage).then(res=>{
                    console.log(res.data);
                    if(res.data.total>0){
                        var list = res.data.list;
                        for(var i=0;i<list.length;i++) {
                            list[i].readingTime = this.YymmddFormat(new Date(list[i].readingTime));
                            list[i].createDate = this.formatDateAndHouse(parseInt(list[i].createDate));
                            list[i].pushNoticeTypeDict=this.messageType[list[i].pushNoticeTypeDict];
                        }
                        this.tableData = list;
                    }else{
                        this.tableData = '';
                    }
                    this.totalCount  =Number(res.data.total);
                })

            },
            //中国标准时间 转 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(() => {
                        deleteNoticeItems(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(() => {
                        console.log(this.array);
                        changeNoticeReadStatus(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>