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

<template>
    <div class="directorVote">
        <!--        主席候选人-->
        <div class="Chairman" v-for="(item,index) in positionDic" :key="index">
            <div style="width: 1200px;margin: auto">
                <div class="chairTitle" v-show="candidateList[index].length>0">
                    {{item.label}} {{$t('common.Candidate')}}
                </div>
                <div :class="candidateList[index].length>1?'chairBox1':'chairBox2'">
                    <div class="tempspace"  v-for="(canItem,index1) in candidateList[index]" :key="index1">
                        <div class="votePhoto">
                            <img :src="'api/file/pub/'+canItem.photoUrl" alt="" style="height: 100%">
                        </div>
                        <div class="candidate">
                            {{canItem.name}}
                        </div>
                        <div class="voteBtn" v-if="votedLeader == false">
                            <el-button size="small" type="info" @click="statistical(canItem,'0')" :class="activeIndex.a0.indexOf(canItem.id) != -1 ?'active':''">{{$t('common.Approve')}}</el-button>
                            <el-button size="small" type="info" @click="statistical(canItem,'1')" :class="activeIndex.a1.indexOf(canItem.id) != -1 ?'active':''">{{$t('common.Oppose')}}</el-button>
                            <el-button size="small" type="info" @click="statistical(canItem,'2')" :class="activeIndex.a2.indexOf(canItem.id) != -1 ?'active':''">{{$t('common.waiver')}}</el-button>
                        </div>
                        <div class="voteBtn2"  v-if="votedLeader == true">
                            {{$t('common.AreadyVote')}}
                        </div>
                        <!-- <div class="moreMessage">
                            <div>{{canItem.name}}</div>
                            <div v-html="canItem.introduction"></div>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>

        <div class="submitVote" v-if="votedLeader == false">
            <el-button class="voteSty" type="danger" @click="statistical('','4')">{{$t('common.ApproveAll')}}</el-button>
            <el-button type="primary" @click="submitVote()" style="padding:0">{{$t('common.SubmitToVote')}}</el-button>
        </div>

        <!-- 进入下一页的探窗 -->
        <el-dialog
          :show-close="false"
          :visible.sync="OverFlag"
          :close-on-click-modal="false"
          width="700px">
          <div class="category-body submit-success">
            <p style="font-size: 24px; color: #666; margin-bottom: 20px;text-align:center">{{$i18n.locale=='en'? 'The vote was successful.Click Confirm to go to the next page': '投票成功,点击确定进入下一页.'}}</p>
            <p style="text-align:center">
              <!-- <el-button style="background: #2c558a; color: #fff" @click="toView('home')">{{$i18n.locale=='en'? 'Back Home': '返回首页'}}</el-button> -->
              <el-button type="primary" @click="Iknow">{{$i18n.locale=='en'? 'Confirm': '确定'}}</el-button>
            </p>
          </div>
        </el-dialog>
    </div>
</template>
<script>

    import {getMeetingGeidcoLeaders,saveOrUpdateLeader,getCouncilVoteSituation} from "@/api/vote/council";
    import Base from "@/views/base/Base";
    import { getDicts } from "@/api/dict";
    import vote from "../AddFeatures/vote/vote";

    export default {
        name:'DirectorVote',
        extends: Base,
        props:[
            'vote'
        ],
        data () {
            return {
                candidateList:[],

                //职位字典
                positionDic:[],
                endVote:[],
                allVoteList:new Map(),
                meetingGeidcoLeaderNumDetail:[],
                leaderState:[],
                //所有的候选人
                leaderlist:[],
                isShow:false,
                votedLeader:'',
                showVote:[],
                isShow:false,
                VoteState:'',

                clickId:'',
                activeIndex:{
                    a0:[],
                    a1:[],
                    a2:[]
                },
                isVote:false,
                OverFlag:false,
            }
        },
        mounted() {
            this.getDictsList();
            // this.getVoteState()
        },
        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
                // }
                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')
                })

            },

            //提交投票结果
            submitVote(){
                // this.OverFlag = true;
                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.OverFlag = true;
                                    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'
                    });
                }
            },
            Iknow(){
                this.$emit('getVotepage',4)
                this.OverFlag = false
            }

        }
    }
</script>
<style scoped>
    .directorVote{
        margin: 0;
        padding: 0;
        width: 100%;
        background: #fff;
    }
    .Chairman{
        padding: 20px 0;
        /*height: 380px;*/
        background:#F0F3F7 url("../../assets/img/electionBallot/DirectorVotes/1.png") repeat;
    }
    .chairTitle{
        height: 45px;
        text-align: center;
        font-size: 28px;
        font-weight: 600;
        color: #666666;
    }
    .tempspace{
        /*width: 198px;*/
        width:20%;
        height: 215px;
        background: #ffffff;
        padding: 30px 20px;
        margin:20px 10px;
        position: relative;
    }
    .chairBox2{
        width: 100%;
        display: flex;
        justify-content:center;
        flex-wrap: wrap;
    }
    .chairBox1{
        width: 100%;
        display: flex;
        justify-content:center;
        flex-wrap: wrap;
    }
    .votePhoto{
        width: 118px;
        height: 145px;
        border-radius: 5px;
        margin: auto;
        text-align: center;
    }
    .moreMessage{
        display: none;
    }

    /* .tempspace:hover .moreMessage{
        display: block;
        padding: 30px;
        background: #ffffff;
        box-shadow: 0px 2px 10px 0px rgba(167, 167, 167, 0.5);
        width: 100%;
        position: absolute;
        border-radius: 6px;
        left:105%;
        top: 10px;
        z-index: 999;
        font-size:22px;
        font-weight: 600;

    } */
    .candidate{
        text-align: center;
        margin-top: 10px;
        font-weight: 600;
    }
    .voteBtn{
        margin: 10px auto 0;
        display: flex;
        justify-content: space-between;
    }
    .voteBtn2{
        text-align: center;
        margin: 10px;
    }
    .Secretarygeneral{
        padding: 20px 0;
        /*height: 380px;*/
        background:#F0F3F7 url("../../assets/img/electionBallot/DirectorVotes/1.png") repeat;
    }
    .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;
    }

    .active{
        background: #6dd400;
        border: none;
    }
    .notActive{
        background: none;
    }



</style>