MatterVote.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393
  1. <template>
  2. <!--事项选票-->
  3. <div class="matterVote">
  4. <div class="voteTable">
  5. <!-- 表决Title-->
  6. <div class="matterTitle">
  7. <span>{{$t('common.Avote')}}</span>
  8. <button class="refreshBtn" @click="refreshMatter" v-if="showLink == true">{{$t('common.Refresh')}}</button>
  9. </div>
  10. <div class="matterContent">
  11. <el-row :gutter="20">
  12. <el-col :span="4"><div class="grid-content bg-purple">{{$t('common.serialNumber')}}</div></el-col>
  13. <el-col :span="16"><div class="grid-content bg-purple">{{$t('common.Content')}}</div></el-col>
  14. <el-col :span="4"><div class="grid-content bg-purple">{{$t('common.opinion')}}</div></el-col>
  15. </el-row>
  16. <div class="voteMessage" v-for="(item,index) in meetingContent" :key="index">
  17. <div @click="dialogVisibleChange(item)">
  18. <div class="message" v-if="$i18n.locale == 'zh'" >{{index+1}}、{{item.title}}</div>
  19. <div class="message" v-if="$i18n.locale == 'en'">{{index+1}}、{{item.titleEn}}</div>
  20. </div>
  21. <!-- 投票按钮-->
  22. <div class="voteBtn" v-if="item.voted === false">
  23. <el-button size="small" type="info" @click="statistical(item,'0')" :class="activeIndex.a0.indexOf(item.id) != -1 ?'active':''">{{$t('common.Approve')}}</el-button>
  24. <el-button size="small" type="info" @click="statistical(item,'1')" :class="activeIndex.a1.indexOf(item.id) != -1 ?'active':''">{{$t('common.Oppose')}}</el-button>
  25. <el-button size="small" type="info" @click="statistical(item,'2')" :class="activeIndex.a2.indexOf(item.id) != -1 ?'active':''">{{$t('common.waiver')}}</el-button>
  26. </div>
  27. <div class="voteBtn" v-if="item.voted === true">
  28. {{$t('common.AreadyVote')}}
  29. </div>
  30. <div style="clear: both"></div>
  31. </div>
  32. <!-- 事项投票内容展示-->
  33. <el-dialog
  34. :title="$t('common.VoteContent')"
  35. :visible.sync="dialogVisible"
  36. width="50%">
  37. <div v-html="showIntroduction"></div>
  38. </el-dialog>
  39. </div>
  40. </div>
  41. <div class="submitVote" v-if="flalseLength > 0">
  42. <el-button class="voteSty" type="danger" @click="statistical('','4')">{{$t('common.ApproveAll')}}</el-button>
  43. <el-button type="primary" @click="submitVote">{{$t('common.SubmitToVote')}}</el-button>
  44. </div>
  45. </div>
  46. </template>
  47. <script>
  48. import {getMeetingGeidcoMatters,saveOrUpdateMatter,getCouncilVoteSituation} from "@/api/vote/council";
  49. import Base from "@/views/base/Base";
  50. import vote from "../AddFeatures/vote/vote";
  51. export default {
  52. name:'MatterVote',
  53. extends: Base,
  54. props:[
  55. 'vote',
  56. 'showLink'
  57. ],
  58. data () {
  59. return {
  60. num:0,
  61. meetingContent:[],
  62. allVoteList:new Map(),
  63. endVote:[],
  64. mattersList:[],
  65. activeIndex:{
  66. a0:[],
  67. a1:[],
  68. a2:[]
  69. },
  70. votedLeader:'',
  71. votedMatter:'',
  72. dialogVisible:false,
  73. showIntroduction:'',
  74. // showLink:'',
  75. isRefresh:'',
  76. trueVote:[],
  77. falseVote:[],
  78. flalseLength:'',
  79. }
  80. },
  81. mounted() {
  82. this.getVoteState();
  83. this.refreshMatter();
  84. // this.getMatters()
  85. },
  86. destroyed(){
  87. clearInterval(this.isRefresh)
  88. },
  89. methods:{
  90. //将投票结果统计到数组
  91. statistical(item,sta){
  92. let matterId = item.id;
  93. let arr0 = this.activeIndex.a0
  94. let arr1 = this.activeIndex.a1
  95. let arr2 = this.activeIndex.a2
  96. if(sta=='0'){
  97. if(arr0.indexOf(item.id)==-1) arr0.push(item.id)
  98. if(arr1.indexOf(item.id)!=-1) arr1 = arr1.filter(ele=>{return ele!=item.id})
  99. if(arr2.indexOf(item.id)!=-1) arr2 = arr2.filter(ele=>{return ele!=item.id})
  100. this.activeIndex.a0 = arr0
  101. this.activeIndex.a1 = arr1
  102. this.activeIndex.a2 = arr2
  103. }
  104. if(sta=='1'){
  105. if(arr0.indexOf(item.id)!=-1) arr0 = arr0.filter(ele=>{return ele!=item.id})
  106. if(arr1.indexOf(item .id)==-1) arr1.push(item.id)
  107. if(arr2.indexOf(item.id)!=-1) arr2 = arr2.filter(ele=>{return ele!=item.id})
  108. this.activeIndex.a0 = arr0
  109. this.activeIndex.a1 = arr1
  110. this.activeIndex.a2 = arr2
  111. }
  112. if(sta=='2'){
  113. if(arr0.indexOf(item.id)!=-1) arr0 = arr0.filter(ele=>{return ele!=item.id})
  114. if(arr1.indexOf(item.id)!=-1) arr1 = arr1.filter(ele=>{return ele!=item.id})
  115. if(arr2.indexOf(item.id)==-1) arr2.push(item.id)
  116. this.activeIndex.a0 = arr0
  117. this.activeIndex.a1 = arr1
  118. this.activeIndex.a2 = arr2
  119. }
  120. if(sta=='4'){
  121. }
  122. if(sta=='4'){
  123. //添加全选样式
  124. this.activeIndex.a1 = []
  125. this.activeIndex.a2 = []
  126. this.mattersList.forEach((item)=>{
  127. arr0.push(item.id)
  128. })
  129. this.activeIndex.a0 = arr0
  130. //统计全选数据
  131. this.endVote=[];
  132. this.falseVote.forEach((item)=>{
  133. this.allVoteList.set(item.id,'0')
  134. })
  135. this.endVote = [...this.allVoteList].map(ele=>{
  136. return {
  137. matterId:ele[0],
  138. type:ele[1]
  139. }
  140. })
  141. }else{
  142. this.activeIndex.a0 = arr0
  143. this.allVoteList.set(matterId,sta)
  144. this.endVote = [...this.allVoteList].map(ele=>{
  145. return {
  146. matterId:ele[0],
  147. type:ele[1]
  148. }
  149. })
  150. }
  151. },
  152. // 获取事项列表信息
  153. getMatters(){
  154. this.meetingContent = [];
  155. this.trueVote = [];
  156. this.falseVote = [];
  157. let params = {
  158. language: this.$i18n.locale
  159. }
  160. getMeetingGeidcoMatters(params).then((res)=>{
  161. this.mattersList = res.data.meetingGeidcoMatters;
  162. this.mattersList.forEach((position)=>{
  163. if( this.$i18n.locale =='en'){
  164. position.title = position.titleEn
  165. position.introduction = position.introductionEn;
  166. }
  167. if(position.voted == true){
  168. this.trueVote.push(position)
  169. }else {
  170. this.falseVote.push(position)
  171. }
  172. this.meetingContent.push(position)
  173. });
  174. this.flalseLength = this.falseVote.length;
  175. })
  176. },
  177. //提交投票结果
  178. submitVote(){
  179. if(this.endVote.length == this.falseVote.length){
  180. this.submitHandler((token)=>{
  181. saveOrUpdateMatter(JSON.stringify(this.endVote),token).then((res)=>{
  182. if(res.status=="200") {
  183. let msgTxt =this.$i18n.locale == 'en' ? 'Submitted successfully. Thank you for your feedback' : '投票成功';
  184. this.$message({
  185. message: msgTxt,
  186. type: 'success'
  187. });
  188. this.activeIndex.a0 = [];
  189. this.activeIndex.a1 = [];
  190. this.activeIndex.a2 = [];
  191. this.trueVote = [];
  192. this.falseVote = [];
  193. this.endVote=[];
  194. this.resetToken();
  195. }
  196. //重新查询
  197. this.refreshMatter()
  198. }).catch((error) => {
  199. this.endVote=[];
  200. this.resetToken();
  201. });
  202. this.getVoteState();
  203. })
  204. }else{
  205. let msgTxt = this.$i18n.locale == 'en' ? 'Please vote on all the items' : '请为全部事项投票';
  206. this.$message({
  207. message: msgTxt,
  208. type: 'warning'
  209. });
  210. }
  211. },
  212. // 查询投票状态
  213. getVoteState(){
  214. const that = this;
  215. getCouncilVoteSituation().then((res)=>{
  216. let sta = res.data.councilVoteSituation;
  217. this.votedLeader=sta.votedLeader;
  218. this.votedMatter=sta.votedMatter
  219. // this.showLink = sta.showCouncilLiveingLink;
  220. this.refreshPage()
  221. })
  222. },
  223. // //10s定时刷新
  224. // refreshPage(){
  225. // const that = this;
  226. // if(this.showLink){
  227. // console.log('可以刷新')
  228. // console.log(this.showLink)
  229. // this.isRefresh = setInterval(()=>{
  230. // if(this.showLink == true){
  231. // this.getMatters()
  232. // }else{
  233. // clearInterval(that.isRefresh)
  234. // }
  235. // },10000)
  236. // }else {
  237. // console.log('不刷新')
  238. // return
  239. // }
  240. // },
  241. // 事项详情弹窗
  242. dialogVisibleChange(item){
  243. this.dialogVisible = true;
  244. this.showIntroduction = item.introduction
  245. },
  246. // 刷新按钮事件
  247. refreshMatter(){
  248. this.getMatters()
  249. }
  250. }
  251. }
  252. </script>
  253. <style scoped>
  254. .matterVote{
  255. margin: 20px 0 0 0;
  256. padding: 0;
  257. width: 100%;
  258. background: #fff;
  259. }
  260. .voteTable{
  261. width: 100%;
  262. padding: 42px 0 20px 0;
  263. background:#F0F3F7 url("../../assets/img/electionBallot/DirectorVotes/1.png") repeat;
  264. }
  265. .matterTitle{
  266. width: 1200px;
  267. margin: auto;
  268. height: 45px;
  269. text-align: center;
  270. font-size: 28px;
  271. font-weight: 600;
  272. color: #666666;
  273. }
  274. .el-row {
  275. margin-bottom: 20px;
  276. text-align: center;
  277. line-height: 42px;
  278. }
  279. .el-col {
  280. border-radius: 4px;
  281. }
  282. .bg-purple-dark {
  283. background: #99a9bf;
  284. }
  285. .bg-purple {
  286. background: #d3dce6;
  287. }
  288. .bg-purple-light {
  289. background: #e5e9f2;
  290. }
  291. .grid-content {
  292. height: 42px;
  293. border-radius: 4px;
  294. min-height: 36px;
  295. }
  296. .row-bg {
  297. padding: 10px 0;
  298. background-color: #f9fafc;
  299. }
  300. .matterContent{
  301. width: 1200px;
  302. margin:20px auto;
  303. }
  304. .voteMessage{
  305. /*width: 100%;*/
  306. height:80px;
  307. line-height: 80px;
  308. padding: 0 20px;
  309. border-radius: 8px;
  310. background: #ffffff;
  311. margin-bottom: 20px;
  312. position: relative;
  313. cursor: pointer;
  314. }
  315. /*.moreMessage{*/
  316. /* display: none;*/
  317. /*}*/
  318. /*.voteMessage:hover .moreMessage{*/
  319. /* display: block;*/
  320. /* padding: 30px;*/
  321. /* background: #ffffff;*/
  322. /* box-shadow: 0px 2px 10px 0px rgba(167, 167, 167, 0.5);*/
  323. /* width:60%;*/
  324. /* line-height: 40px;*/
  325. /* position: absolute;*/
  326. /* border-radius: 6px;*/
  327. /* left:-10%;*/
  328. /* top: 60px;*/
  329. /* z-index: 999;*/
  330. /* overflow: scroll;*/
  331. /* max-height:300px;*/
  332. /*}*/
  333. .message{
  334. width: 75%;
  335. overflow: hidden;
  336. text-overflow: ellipsis;
  337. white-space: nowrap;
  338. display: inline-block;
  339. float: left;
  340. }
  341. .voteBtn{
  342. float: right;
  343. display: inline-block;
  344. }
  345. .submitVote{
  346. height: 146px;
  347. line-height: 150px;
  348. text-align: center;
  349. }
  350. .el-button{
  351. border: none;
  352. }
  353. .active{
  354. background: #66B1FF;
  355. border: none;
  356. }
  357. .refreshBtn{
  358. float: right;
  359. height: 30px;
  360. margin-top: 10px;
  361. padding: 5px 5px;
  362. border-radius: 5px;
  363. background: #409EFF;
  364. border: none;
  365. color: #ffffff;
  366. cursor: pointer;
  367. }
  368. .notActive{
  369. background: #A6A9AD;
  370. }
  371. </style>