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

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

    <div class="matterVote">
        <div class="voteTable">
<!--            表决Title-->
            <div class="matterTitle">
               <span>{{ mylocale=='zh'?'理事单位投票':'DirectorUnit Vote' }}</span>
            </div>

            <div class="matterContent">
                <el-row :gutter="20">
                    <el-col :span="2"><div class="grid-content bg-purple">{{ mylocale=='zh'?'序号':'No. ' }}</div></el-col>
                    <el-col :span="17"><div class="grid-content bg-purple">{{ mylocale=='zh'?'标题':'Content' }}</div></el-col>
                    <el-col :span="5"><div class="grid-content bg-purple">{{ mylocale=='zh'?'意见':'opinion' }}</div></el-col>
                </el-row>
                <div class="voteMessage" v-for="(item,index) in leaderlist" :key="index">
                    <el-row :gutter="20">
                        <el-col :span="2"><div class="grid-content bg-purples">{{index+1}}</div></el-col>
                        <el-col :span="17"><div class="grid-content bg-purples bg-title">{{item.name}}</div></el-col>
                        <el-col :span="5">
                            <div class="grid-content bg-purples">
                                <!-- 投票按钮 -->
                                <div class="voteBtn" v-if="votedLeader === false">
                                    <el-button size="small" type="info" @click="statistical(item,'0')" :class="activeIndex.a0.indexOf(item.id) != -1 ?'active':''">{{ mylocale=='zh'?'赞成':'Approve'}}</el-button>
                                    <el-button size="small" type="info" @click="statistical(item,'1')" :class="activeIndex.a1.indexOf(item.id) != -1 ?'active':''">{{ mylocale=='zh'?'反对':'Oppose' }}</el-button>
                                    <el-button size="small" type="info" @click="statistical(item,'2')" :class="activeIndex.a2.indexOf(item.id) != -1 ?'active':''">{{ mylocale=='zh'?'弃权':'waiver' }}</el-button>
                                </div>
                                <div class="voteBtn" v-if="votedLeader === true">
                                    {{$t('common.AreadyVote')}}
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <!-- 事项投票内容展示-->
                <el-dialog
                        :title="'投票内容'"
                        :visible.sync="dialogVisible"
                        width="50%">
                    <div v-html="showIntroduction"></div>
                </el-dialog>
            </div>

            <!-- ==================== -->
            <div class="submitVote" v-if="votedLeader == false">
               <el-button class="voteSty" type="danger"  @click="statistical('','4')">{{ mylocale=='zh'?'全部赞成':'Approve All'}}</el-button>
               <el-button type="primary" @click="submitVote" style="padding:0">{{ mylocale=='zh'?'提交投票':'Submit to vote'}}</el-button>
            </div>
        </div>

    </div>
</template>
<script>
    import {saveOrUpdateLeader,getCouncilVoteSituation,getMeetingGeidcoLeaders} from "@/api/vote/council";
    import { getDicts } from "@/api/dict";
    import Base from "@/views/base/Base";
    // import vote from "../AddFeatures/vote/vote";
    export default {
        name:'MatterVote',
        extends: Base,
        props:[
        //   'vote',
        //   'showLink'
        ],
        data () {
            return {
                mylocale:this.$i18n.locale,
                // positionDic:'',
                candidateList:[],
                num:0,
                meetingContent:'',
                allVoteList:new Map(),
                endVote:[],
                mattersList:[],
                activeIndex:{
                    a0:[],
                    a1:[],
                    a2:[]
                },
                votedLeader:'',
                votedMatter:'',
                dialogVisible:false,
                showIntroduction:'',
                // showLink:'',
                isRefresh:'',
                trueVote:[],
                falseVote:[],
                flalseLength:'',
                meetingGeidcoMatterNumDetail:[],
                leaderlist:[],
                OverFlag:true
            }
        },
        mounted() {
            // this.getDictsList();
            this.getLeaders();
            localStorage.removeItem('Votepage')
            console.log('啪啪啪啪啪啪铺铺铺铺铺',this.mylocale)
        },
        destroyed(){
            clearInterval(this.isRefresh)
        },
        methods:{
            //获取字典
            async getDictsList(){
                let dicts = this.$i18n.locale=='zh'?'GEIDCO_LEADER_DICT':'GEIDCO_LEADER_DICT_EN';
                getDicts(dicts).then((result)=>{
                    result.data[0].forEach((item,index)=>{
                        if(item.value=='governing-unit'){
                            this.positionDic.push(item);
                            index = new Array();
                            this.candidateList.push(index);
                        }
                    });
                    this. getLeaders()
                })
            },
            //将投票结果统计到数组
            statistical(item,sta){
                this.VoteState = sta;
                this.clickId = item;
                let arr0 = this.activeIndex.a0
                let arr1 = this.activeIndex.a1
                let arr2 = this.activeIndex.a2
                let leaderId = item.id;
                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'){
                    //加全选样式
                    this.activeIndex.a1 = []
                    this.activeIndex.a2 = []
                    this.leaderlist.forEach((item)=>{
                        arr0.push(item.id)
                    })
                    this.activeIndex.a0 = arr0

                    //添加全选数据
                    this.endVote=[];
                    this.leaderlist.forEach((item)=>{
                        this.allVoteList.set(item.id,'0')
                    })

                    this.endVote = [...this.allVoteList].map(ele=>{
                        return {
                            leaderId:ele[0],
                            type:ele[1]
                        }
                    })
                }else{
                    this.allVoteList.set(leaderId,sta)
                    this.endVote = [...this.allVoteList].map(ele=>{
                        return {
                            leaderId:ele[0],
                            type:ele[1]
                        }
                    })
                }
            },
             //查询数据
            getLeaders(){
                let params = {
                    language: this.$i18n.locale
                }
                getMeetingGeidcoLeaders(params).then((res)=>{
                    this.leaderlist = [];
                    res.data.meetingGeidcoLeaders.forEach((item)=>{
                        if(item.positionName=='governing-unit'){
                            this.leaderlist.push(item)
                        }
                    })
                    this.leaderlist.forEach((item)=>{
                        if(this.$i18n.locale == 'en'){
                            item.name = item.nameEn;
                            item.positionName = item.positionNameEn;
                            item.introduction = item.introductionEn;
                        }
                        if(item.voted == true){
                            this.votedLeader = true;
                        }else{
                            this.votedLeader = false;
                        }
                        for (let i=0;i<this.candidateList.length;i++){
                            if(item.positionName == this.positionDic[i].value){
                                this.candidateList[i].push(item)
                            }
                        }
                    });
                    this.$emit('pushFlag',this.votedLeader);
                    this.statistical('','4');
                    console.log('xxxxxxxxxxxx',this.leaderlist)
                })

            },
            //提交投票结果
            submitVote(){
                if(this.votedLeader == false ){
                    // if( this.isVote == false){
                    if(this.endVote.length == this.leaderlist.length){
                        this.submitHandler((token)=>{
                            saveOrUpdateLeader(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.isVote = true;
                                    this.endVote=[];
                                    this.activeIndex.a0 = [];
                                    this.activeIndex.a1 = [];
                                    this.activeIndex.a2 = [];
                                    for(let i = 0;i<this.candidateList.length ;i++){
                                        this.candidateList[i] = [];
                                      //  console.log(this.candidateList[i])
                                    }
                                    this.resetToken();
                                    this.getLeaders();
                                }

                            }).catch((error) => {
                                this.endVote=[];
                                this.activeIndex.a0 = [];
                                this.resetToken();
                                 this.getLeaders()
                                console.log(this.votedLeader)
                            });
                        })
                    }else {
                        let msgTxt =this.$i18n.locale == 'en' ? 'Please vote for all candidates' : '请为全部候选人投票';
                        this.$message({
                            message: msgTxt,
                            type: 'warning'
                        });

                        // }
                    }

                }else{
                    let msgTxt = this.$i18n.locale == 'en' ? 'You have voted for the current page, please do not submit twice' : '您已为当前点击模块投过票,请勿重复提交';
                    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()

                })

            },
            // 事项详情弹窗
            dialogVisibleChange(item){
                this.dialogVisible = true;
                this.showIntroduction = item.introduction
                console.log('1234321232123')
            },
            // 刷新按钮事件
            refreshMatter(){
                this.getMatters()
            },
            open() {
              this.$alert('这是一段内容', '标题名称', {
                confirmButtonText: '确定',
                callback: action => {
                  this.$message({
                    type: 'info',
                    message: `action: ${ action }`
                  });
                }
              });
            }

        }
    }
</script>
<style scoped>
    .matterVote{
        margin: auto;
        padding: 0;
        width: 90%;
        background: #fff;
    }
    .voteTable{
        width: 100%;
        padding: 42px 0 0px 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;
        font-size: 18px;
    }
    .bg-purples {
        background: #fff;
        font-size: 16px;
    }
    .bg-title{
        text-align: left;
        padding-left:10px
    }
    .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: 50px;
        line-height: 50px;
        /* padding: 0 20px; */
        border-radius: 8px;
        background: #fff;
        /* margin-bottom: 15px; */
        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;
        text-align: center;
        height: 100%;
        width: 100%;
    }
    .voteBtn > .el-button{
        border-radius: 6px;
    }
    .submitVote{
        height: 100px;
        line-height: 100px;
        text-align: center;
    }
    .submitVote > .el-button{
        width: 150px;
        height: 50px;
        border-radius: 5px;
        font-size: 20px;
    }
    .submitVote .el-button:nth-child(1){
        background-color: #6dd400;
    }
    .submitVote .el-button:nth-child(2){
        background-color: #6f9fe8;
    }
    .el-button{
        border: none;
        /* padding: 0; */
    }
    .active{
        background: #6dd400;
        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>