dev/dcp-web-gate/src_old/views/electionBallot/MatterVote.vue

<template>
    <!--事项选票-->

    <div class="matterVote">
        <div class="voteTable">
<!--            表决Title-->
            <div class="matterTitle">
                <span>{{$t('common.Avote')}}</span>
                <button class="refreshBtn" @click="refreshMatter" v-if="showLink == true">{{$t('common.Refresh')}}</button>
            </div>

            <div class="matterContent">
                <el-row :gutter="20">
                    <el-col :span="4"><div class="grid-content bg-purple">{{$t('common.serialNumber')}}</div></el-col>
                    <el-col :span="16"><div class="grid-content bg-purple">{{$t('common.Content')}}</div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple">{{$t('common.opinion')}}</div></el-col>
                </el-row>
                <div class="voteMessage" v-for="(item,index) in meetingContent" :key="index">
                    <div @click="dialogVisibleChange(item)">
                        <div class="message" v-if="$i18n.locale == 'zh'" >{{index+1}}、{{item.title}}</div>
                        <div class="message" v-if="$i18n.locale == 'en'">{{index+1}}、{{item.titleEn}}</div>

                    </div>
<!--                    投票按钮-->
                    <div class="voteBtn" v-if="item.voted === false">
                        <el-button size="small" type="info" @click="statistical(item,'0')" :class="activeIndex.a0.indexOf(item.id) != -1 ?'active':''">{{$t('common.Approve')}}</el-button>
                        <el-button size="small" type="info" @click="statistical(item,'1')" :class="activeIndex.a1.indexOf(item.id) != -1 ?'active':''">{{$t('common.Oppose')}}</el-button>
                        <el-button size="small" type="info" @click="statistical(item,'2')" :class="activeIndex.a2.indexOf(item.id) != -1 ?'active':''">{{$t('common.waiver')}}</el-button>
                    </div>
                    <div class="voteBtn" v-if="item.voted === true">
                        {{$t('common.AreadyVote')}}
                    </div>
                    <div style="clear: both"></div>

                </div>
                <!-- 事项投票内容展示-->
                <el-dialog
                        :title="$t('common.VoteContent')"
                        :visible.sync="dialogVisible"
                        width="50%">
                    <div v-html="showIntroduction"></div>
                </el-dialog>
            </div>
        </div>
        <div class="submitVote" v-if="flalseLength > 0">
            <el-button class="voteSty" type="danger" @click="statistical('','4')">{{$t('common.ApproveAll')}}</el-button>
            <el-button type="primary" @click="submitVote">{{$t('common.SubmitToVote')}}</el-button>
        </div>

    </div>
</template>
<script>
    import {getMeetingGeidcoMatters,saveOrUpdateMatter,getCouncilVoteSituation} from "@/api/vote/council";
    import Base from "@/views/base/Base";
    import vote from "../AddFeatures/vote/vote";
    export default {
        name:'MatterVote',
        extends: Base,
        props:[
          'vote',
            'showLink'
        ],
        data () {
            return {
                num:0,
                meetingContent:[],
                allVoteList:new Map(),
                endVote:[],
                mattersList:[],
                activeIndex:{
                    a0:[],
                    a1:[],
                    a2:[]
                },
                votedLeader:'',
                votedMatter:'',
                dialogVisible:false,
                showIntroduction:'',
                // showLink:'',
                isRefresh:'',
                trueVote:[],
                falseVote:[],
                flalseLength:'',
            }
        },
        mounted() {
            this.getVoteState();
            this.refreshMatter();
            // this.getMatters()


        },
        destroyed(){
            clearInterval(this.isRefresh)
        },
        methods:{

            //将投票结果统计到数组
            statistical(item,sta){
                let matterId = item.id;
                let arr0 = this.activeIndex.a0
                let arr1 = this.activeIndex.a1
                let arr2 = this.activeIndex.a2
                if(sta=='0'){
                    if(arr0.indexOf(item.id)==-1) arr0.push(item.id)
                    if(arr1.indexOf(item.id)!=-1) arr1 = arr1.filter(ele=>{return ele!=item.id})
                    if(arr2.indexOf(item.id)!=-1) arr2 = arr2.filter(ele=>{return ele!=item.id})
                    this.activeIndex.a0 = arr0
                    this.activeIndex.a1 = arr1
                    this.activeIndex.a2 = arr2

                }
                if(sta=='1'){
                    if(arr0.indexOf(item.id)!=-1) arr0 = arr0.filter(ele=>{return ele!=item.id})
                    if(arr1.indexOf(item .id)==-1) arr1.push(item.id)
                    if(arr2.indexOf(item.id)!=-1) arr2 = arr2.filter(ele=>{return ele!=item.id})
                    this.activeIndex.a0 = arr0
                    this.activeIndex.a1 = arr1
                    this.activeIndex.a2 = arr2
                }
                if(sta=='2'){
                    if(arr0.indexOf(item.id)!=-1) arr0 = arr0.filter(ele=>{return ele!=item.id})
                    if(arr1.indexOf(item.id)!=-1) arr1 = arr1.filter(ele=>{return ele!=item.id})
                    if(arr2.indexOf(item.id)==-1) arr2.push(item.id)
                    this.activeIndex.a0 = arr0
                    this.activeIndex.a1 = arr1
                    this.activeIndex.a2 = arr2
                }
                if(sta=='4'){

                }
                if(sta=='4'){
                    //添加全选样式
                    this.activeIndex.a1 = []
                    this.activeIndex.a2 = []
                    this.mattersList.forEach((item)=>{
                        arr0.push(item.id)
                    })
                    this.activeIndex.a0 = arr0
                    //统计全选数据
                    this.endVote=[];
                    this.falseVote.forEach((item)=>{
                        this.allVoteList.set(item.id,'0')
                    })
                    this.endVote = [...this.allVoteList].map(ele=>{
                        return {
                            matterId:ele[0],
                            type:ele[1]
                        }
                    })
                }else{
                    this.activeIndex.a0 = arr0
                    this.allVoteList.set(matterId,sta)
                    this.endVote = [...this.allVoteList].map(ele=>{
                        return {
                            matterId:ele[0],
                            type:ele[1]
                        }
                    })
                }

            },
            // 获取事项列表信息
           getMatters(){
                this.meetingContent = [];
                this.trueVote = [];
                this.falseVote = [];
                let params = {
                    language: this.$i18n.locale
                }
                getMeetingGeidcoMatters(params).then((res)=>{
                    this.mattersList = res.data.meetingGeidcoMatters;
                    this.mattersList.forEach((position)=>{
                        if( this.$i18n.locale =='en'){
                            position.title = position.titleEn
                            position.introduction = position.introductionEn;
                        }
                        if(position.voted == true){
                            this.trueVote.push(position)
                        }else {
                            this.falseVote.push(position)
                        }
                        this.meetingContent.push(position)
                    });
                    this.flalseLength =  this.falseVote.length;

                })

            },
            //提交投票结果
            submitVote(){
                if(this.endVote.length == this.falseVote.length){
                        this.submitHandler((token)=>{
                            saveOrUpdateMatter(JSON.stringify(this.endVote),token).then((res)=>{
                                if(res.status=="200") {
                                    let msgTxt =this.$i18n.locale == 'en' ? 'Submitted successfully. Thank you for your feedback' : '投票成功';
                                    this.$message({
                                        message: msgTxt,
                                        type: 'success'
                                    });
                                    this.activeIndex.a0 = [];
                                    this.activeIndex.a1 = [];
                                    this.activeIndex.a2 = [];
                                    this.trueVote = [];
                                    this.falseVote = [];
                                    this.endVote=[];
                                    this.resetToken();
                                }
                                //重新查询
                                this.refreshMatter()
                            }).catch((error) => {
                                this.endVote=[];
                                this.resetToken();
                            });
                            this.getVoteState();

                        })
                    }else{
                        let msgTxt = this.$i18n.locale == 'en' ? 'Please vote on all the items' : '请为全部事项投票';
                        this.$message({
                            message: msgTxt,
                            type: 'warning'
                        });

                    }
            },
            // 查询投票状态
            getVoteState(){
                const that = this;
                getCouncilVoteSituation().then((res)=>{
                    let sta = res.data.councilVoteSituation;
                    this.votedLeader=sta.votedLeader;
                    this.votedMatter=sta.votedMatter
                    // this.showLink = sta.showCouncilLiveingLink;
                    this.refreshPage()

                })

            },
            // //10s定时刷新
            // refreshPage(){
            //     const that = this;
            //     if(this.showLink){
            //         console.log('可以刷新')
            //         console.log(this.showLink)
            //         this.isRefresh = setInterval(()=>{
            //             if(this.showLink == true){
            //                 this.getMatters()
            //             }else{
            //                 clearInterval(that.isRefresh)
            //             }
            //         },10000)
            //     }else {
            //         console.log('不刷新')
            //         return
            //     }

            // },
            // 事项详情弹窗
            dialogVisibleChange(item){
                this.dialogVisible = true;
                this.showIntroduction = item.introduction
            },
            // 刷新按钮事件
            refreshMatter(){
                this.getMatters()
            }

        }
    }
</script>
<style scoped>
    .matterVote{
        margin: 20px 0 0 0;
        padding: 0;
        width: 100%;
        background: #fff;
    }
    .voteTable{
        width: 100%;
        padding: 42px 0 20px 0;
        background:#F0F3F7 url("../../assets/img/electionBallot/DirectorVotes/1.png") repeat;
    }
    .matterTitle{
        width: 1200px;
        margin: auto;
        height: 45px;
        text-align: center;
        font-size: 28px;
        font-weight: 600;
        color: #666666;
    }
    .el-row {
        margin-bottom: 20px;
        text-align: center;
        line-height: 42px;
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        height: 42px;
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
    .matterContent{
        width: 1200px;
        margin:20px auto;
    }
    .voteMessage{
        /*width: 100%;*/
        height:80px;
        line-height: 80px;
        padding: 0 20px;
        border-radius: 8px;
        background: #ffffff;
        margin-bottom: 20px;
        position: relative;
        cursor: pointer;
    }
    /*.moreMessage{*/
    /*    display: none;*/
    /*}*/

    /*.voteMessage:hover .moreMessage{*/
    /*    display: block;*/
    /*    padding: 30px;*/
    /*    background: #ffffff;*/
    /*    box-shadow: 0px 2px 10px 0px rgba(167, 167, 167, 0.5);*/
    /*    width:60%;*/
    /*    line-height: 40px;*/
    /*    position: absolute;*/
    /*    border-radius: 6px;*/
    /*    left:-10%;*/
    /*    top: 60px;*/
    /*    z-index: 999;*/
    /*    overflow: scroll;*/
    /*    max-height:300px;*/
    /*}*/
    .message{
        width: 75%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        float: left;
    }
    .voteBtn{
        float: right;
       display: inline-block;
    }
    .submitVote{
        height: 146px;
        line-height: 150px;
        text-align: center;
    }
    .el-button{
        border: none;
    }
    .active{
        background: #66B1FF;
        border: none;
    }
    .refreshBtn{
        float: right;

        height: 30px;
        margin-top: 10px;
        padding: 5px 5px;
        border-radius: 5px;
        background: #409EFF;
        border: none;
        color: #ffffff;
        cursor: pointer;
    }
    .notActive{
        background: #A6A9AD;
    }

</style>