FinancialStatement.vue 16 KB

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