DirectorVote.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366
  1. <template>
  2. <div class="directorVote">
  3. <!-- 主席候选人-->
  4. <div class="Chairman" v-for="(item,index) in positionDic">
  5. <div style="width: 1200px;margin: auto">
  6. <div class="chairTitle" v-show="candidateList[index].length>0">
  7. {{item.label}} {{$t('common.Candidate')}}
  8. </div>
  9. <div :class="candidateList[index].length>1?'chairBox1':'chairBox2'">
  10. <div class="tempspace" v-for="(canItem,index1) in candidateList[index]">
  11. <div class="votePhoto">
  12. <img :src="'api/file/pub/'+canItem.photoUrl" alt="" style="height: 100%">
  13. </div>
  14. <div class="candidate">
  15. {{canItem.name}}
  16. </div>
  17. <div class="voteBtn" v-if="votedLeader == false">
  18. <el-button size="small" type="info" @click="statistical(canItem,'0')" :class="activeIndex.a0.indexOf(canItem.id) != -1 ?'active':''">{{$t('common.Approve')}}</el-button>
  19. <el-button size="small" type="info" @click="statistical(canItem,'1')" :class="activeIndex.a1.indexOf(canItem.id) != -1 ?'active':''">{{$t('common.Oppose')}}</el-button>
  20. <el-button size="small" type="info" @click="statistical(canItem,'2')" :class="activeIndex.a2.indexOf(canItem.id) != -1 ?'active':''">{{$t('common.waiver')}}</el-button>
  21. </div>
  22. <div class="voteBtn2" v-if="votedLeader == true">
  23. {{$t('common.AreadyVote')}}
  24. </div>
  25. <div class="moreMessage">
  26. <div>{{canItem.name}}</div>
  27. <div v-html="canItem.introduction"></div>
  28. </div>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. <div class="submitVote" v-if="votedLeader == false">
  34. <el-button class="voteSty" type="danger" @click="statistical('','4')">{{$t('common.ApproveAll')}}</el-button>
  35. <el-button type="primary" @click="submitVote()">{{$t('common.SubmitToVote')}}</el-button>
  36. </div>
  37. </div>
  38. </template>
  39. <script>
  40. import {getMeetingGeidcoLeaders,saveOrUpdateLeader,getCouncilVoteSituation} from "@/api/vote/council";
  41. import Base from "@/views/base/Base";
  42. import { getDicts } from "@/api/dict";
  43. import vote from "../AddFeatures/vote/vote";
  44. export default {
  45. name:'DirectorVote',
  46. extends: Base,
  47. props:[
  48. 'vote'
  49. ],
  50. data () {
  51. return {
  52. candidateList:[],
  53. //职位字典
  54. positionDic:[],
  55. endVote:[],
  56. allVoteList:new Map(),
  57. meetingGeidcoLeaderNumDetail:[],
  58. leaderState:[],
  59. //所有的候选人
  60. leaderlist:[],
  61. isShow:false,
  62. votedLeader:'',
  63. showVote:[],
  64. isShow:false,
  65. VoteState:'',
  66. clickId:'',
  67. activeIndex:{
  68. a0:[],
  69. a1:[],
  70. a2:[]
  71. },
  72. isVote:false,
  73. }
  74. },
  75. mounted() {
  76. this.getDictsList();
  77. // this.getVoteState()
  78. },
  79. methods:{
  80. //获取字典
  81. async getDictsList(){
  82. let dicts = this.$i18n.locale=='zh'?'GEIDCO_LEADER_DICT':'GEIDCO_LEADER_DICT_EN';
  83. getDicts(dicts).then((result)=>{
  84. this.positionDic = result.data[0];
  85. result.data[0].forEach((item,index)=>{
  86. index = new Array();
  87. this.candidateList.push(index)
  88. })
  89. this. getLeaders()
  90. })
  91. },
  92. //将投票结果统计到数组
  93. statistical(item,sta){
  94. this.VoteState = sta;
  95. this.clickId = item;
  96. let arr0 = this.activeIndex.a0
  97. let arr1 = this.activeIndex.a1
  98. let arr2 = this.activeIndex.a2
  99. let leaderId = item.id;
  100. if(sta=='0'){
  101. if(arr0.indexOf(item.id)==-1) arr0.push(item.id)
  102. if(arr1.indexOf(item.id)!=-1) arr1 = arr1.filter(ele=>{return ele!=item.id})
  103. if(arr2.indexOf(item.id)!=-1) arr2 = arr2.filter(ele=>{return ele!=item.id})
  104. this.activeIndex.a0 = arr0
  105. this.activeIndex.a1 = arr1
  106. this.activeIndex.a2 = arr2
  107. }
  108. if(sta=='1'){
  109. if(arr0.indexOf(item.id)!=-1) arr0 = arr0.filter(ele=>{return ele!=item.id})
  110. if(arr1.indexOf(item .id)==-1) arr1.push(item.id)
  111. if(arr2.indexOf(item.id)!=-1) arr2 = arr2.filter(ele=>{return ele!=item.id})
  112. this.activeIndex.a0 = arr0
  113. this.activeIndex.a1 = arr1
  114. this.activeIndex.a2 = arr2
  115. }
  116. if(sta=='2'){
  117. if(arr0.indexOf(item.id)!=-1) arr0 = arr0.filter(ele=>{return ele!=item.id})
  118. if(arr1.indexOf(item.id)!=-1) arr1 = arr1.filter(ele=>{return ele!=item.id})
  119. if(arr2.indexOf(item.id)==-1) arr2.push(item.id)
  120. this.activeIndex.a0 = arr0
  121. this.activeIndex.a1 = arr1
  122. this.activeIndex.a2 = arr2
  123. }
  124. // if(sta=='4'){
  125. // this.activeIndex.a1 = []
  126. // this.activeIndex.a2 = []
  127. // this.leaderlist.forEach((item)=>{
  128. //
  129. // arr0.push(item.id)
  130. // })
  131. // this.activeIndex.a0 = arr0
  132. // }
  133. if(sta=='4'){
  134. //加全选样式
  135. this.activeIndex.a1 = []
  136. this.activeIndex.a2 = []
  137. this.leaderlist.forEach((item)=>{
  138. arr0.push(item.id)
  139. })
  140. this.activeIndex.a0 = arr0
  141. //添加全选数据
  142. this.endVote=[];
  143. this.leaderlist.forEach((item)=>{
  144. this.allVoteList.set(item.id,'0')
  145. })
  146. this.endVote = [...this.allVoteList].map(ele=>{
  147. return {
  148. leaderId:ele[0],
  149. type:ele[1]
  150. }
  151. })
  152. }else{
  153. this.allVoteList.set(leaderId,sta)
  154. this.endVote = [...this.allVoteList].map(ele=>{
  155. return {
  156. leaderId:ele[0],
  157. type:ele[1]
  158. }
  159. })
  160. }
  161. },
  162. //查询数据
  163. getLeaders(){
  164. let params = {
  165. language: this.$i18n.locale
  166. }
  167. getMeetingGeidcoLeaders(params).then((res)=>{
  168. this.leaderlist = res.data.meetingGeidcoLeaders;
  169. this.leaderlist.forEach((item)=>{
  170. if(this.$i18n.locale == 'en'){
  171. item.name = item.nameEn;
  172. item.positionName = item.positionNameEn;
  173. item.introduction = item.introductionEn;
  174. }
  175. if(item.voted == true){
  176. this.votedLeader = true;
  177. }else{
  178. this.votedLeader = false;
  179. }
  180. for (let i=0;i<this.candidateList.length;i++){
  181. if(item.positionName == this.positionDic[i].value){
  182. this.candidateList[i].push(item)
  183. }
  184. }
  185. })
  186. })
  187. },
  188. //提交投票结果
  189. submitVote(){
  190. if(this.votedLeader == false ){
  191. // if( this.isVote == false){
  192. if(this.endVote.length == this.leaderlist.length){
  193. this.submitHandler((token)=>{
  194. saveOrUpdateLeader(JSON.stringify(this.endVote),token).then((res)=>{
  195. if(res.status==200) {
  196. let msgTxt = this.$i18n.locale == 'en' ? 'Submitted successfully. Thank you for your feedback' : '投票成功';
  197. this.$message({
  198. message: msgTxt,
  199. type: 'success'
  200. });
  201. this.isVote = true;
  202. this.endVote=[];
  203. this.activeIndex.a0 = [];
  204. this.activeIndex.a1 = [];
  205. this.activeIndex.a2 = [];
  206. for(let i = 0;i<this.candidateList.length ;i++){
  207. this.candidateList[i] = [];
  208. // console.log(this.candidateList[i])
  209. }
  210. this.resetToken();
  211. this.getLeaders()
  212. }
  213. }).catch((error) => {
  214. this.endVote=[];
  215. this.activeIndex.a0 = [];
  216. this.resetToken();
  217. this.getLeaders()
  218. console.log(this.votedLeader)
  219. });
  220. })
  221. }else {
  222. let msgTxt =this.$i18n.locale == 'en' ? 'Please vote for all candidates' : '请为全部候选人投票';
  223. this.$message({
  224. message: msgTxt,
  225. type: 'warning'
  226. });
  227. // }
  228. }
  229. }else{
  230. let msgTxt = this.$i18n.locale == 'en' ? 'You have voted for the current page, please do not submit twice' : '您已为当前点击模块投过票,请勿重复提交';
  231. this.$message({
  232. message: msgTxt,
  233. type: 'warning'
  234. });
  235. }
  236. },
  237. }
  238. }
  239. </script>
  240. <style scoped>
  241. .directorVote{
  242. margin: 0;
  243. padding: 0;
  244. width: 100%;
  245. background: #fff;
  246. }
  247. .Chairman{
  248. padding: 20px 0;
  249. /*height: 380px;*/
  250. background:#F0F3F7 url("../../assets/img/electionBallot/DirectorVotes/1.png") repeat;
  251. }
  252. .chairTitle{
  253. height: 45px;
  254. text-align: center;
  255. font-size: 28px;
  256. font-weight: 600;
  257. color: #666666;
  258. }
  259. .tempspace{
  260. /*width: 198px;*/
  261. width:20%;
  262. height: 215px;
  263. background: #ffffff;
  264. padding: 30px 20px;
  265. margin:20px 60px;
  266. position: relative;
  267. }
  268. .chairBox2{
  269. width: 100%;
  270. display: flex;
  271. justify-content:center;
  272. flex-wrap: wrap;
  273. }
  274. .chairBox1{
  275. width: 100%;
  276. display: flex;
  277. justify-content:center;
  278. flex-wrap: wrap;
  279. }
  280. .votePhoto{
  281. width: 118px;
  282. height: 145px;
  283. border-radius: 5px;
  284. margin: auto;
  285. text-align: center;
  286. }
  287. .moreMessage{
  288. display: none;
  289. }
  290. .tempspace:hover .moreMessage{
  291. display: block;
  292. padding: 30px;
  293. background: #ffffff;
  294. box-shadow: 0px 2px 10px 0px rgba(167, 167, 167, 0.5);
  295. width: 100%;
  296. position: absolute;
  297. border-radius: 6px;
  298. left:105%;
  299. top: 10px;
  300. z-index: 999;
  301. font-size:22px;
  302. font-weight: 600;
  303. }
  304. .candidate{
  305. text-align: center;
  306. margin-top: 10px;
  307. font-weight: 600;
  308. }
  309. .voteBtn{
  310. margin: 10px auto 0;
  311. display: flex;
  312. justify-content: space-between;
  313. }
  314. .voteBtn2{
  315. text-align: center;
  316. margin: 10px;
  317. }
  318. .Secretarygeneral{
  319. padding: 20px 0;
  320. /*height: 380px;*/
  321. background:#F0F3F7 url("../../assets/img/electionBallot/DirectorVotes/1.png") repeat;
  322. }
  323. .submitVote{
  324. height: 150px;
  325. line-height: 150px;
  326. background: #F0F3F7;
  327. text-align: center;
  328. }
  329. .el-button{
  330. border: none;
  331. }
  332. .active{
  333. background: #66B1FF;
  334. border: none;
  335. }
  336. .notActive{
  337. background: none;
  338. }
  339. </style>