userCenterConferenceRegistration.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333
  1. <template>
  2. <div class="container-box">
  3. <div class="filter-box">
  4. <el-button-group>
  5. <el-button size="medium" plain @click="filteredByState('')">{{$i18n.locale=='en'? 'All': '全部'}}</el-button>
  6. <el-button size="medium" plain @click="filteredByState('2')">{{$i18n.locale=='en'? 'UnderApproval': '审批中'}}</el-button>
  7. <el-button size="medium" plain @click="filteredByState('4')">{{$i18n.locale=='en'? 'Registration Successful': '审批通过'}}</el-button>
  8. <el-button size="medium" plain @click="filteredByState('3')">{{$i18n.locale=='en'? 'Registration Failed': '审批不通过'}}</el-button>
  9. </el-button-group>
  10. <!-- <el-input
  11. style="width: 300px"
  12. size="medium"
  13. placeholder="请输入内容"
  14. suffix-icon="el-icon-search"
  15. v-model="input2">
  16. </el-input> -->
  17. </div>
  18. <el-table
  19. v-loading="loading"
  20. element-loading-text=""
  21. element-loading-spinner="el-icon-loading"
  22. element-loading-background="rgba(255, 255, 255, 0.6)"
  23. :data="tableData"
  24. tooltip-effect="dark"
  25. :border="true"
  26. size="small"
  27. :lazy="true"
  28. height="570"
  29. :empty-text="$i18n.locale=='en'? 'Sorry no data!':'暂无数据'"
  30. @selection-change="handleSelectionChange">
  31. <el-table-column prop="meetingId" :label="$i18n.locale=='en'? 'Events':'会议名称'" header-align="center">
  32. <template slot-scope="scope">{{ meetingNameMap[scope.row.meetingId] }}</template>
  33. </el-table-column>
  34. <el-table-column :label="$i18n.locale=='en'? 'Date':'会议时间'" width="90" header-align="center">
  35. <template slot-scope="scope">{{ formatDate(meetingStartDateMap[scope.row.meetingId]) }}</template>
  36. </el-table-column>
  37. <el-table-column prop="name" label="CH Name" width="100" v-if="$i18n.locale=='en'" header-align="center"></el-table-column>
  38. <el-table-column prop="name" label="中文姓名" width="100" v-else header-align="center"></el-table-column>
  39. <el-table-column prop="nameEn" label="EN Name" width="100" v-if="$i18n.locale=='en'" header-align="center"></el-table-column>
  40. <el-table-column prop="nameEn" label="英文姓名" width="100" v-else header-align="center"></el-table-column>
  41. <el-table-column prop="auditStatusDict" :label="$i18n.locale=='en'? 'Status':'状态'" width="84" header-align="center">
  42. <template slot-scope="scope">{{ approvalStatus[scope.row.auditStatusDict] }}</template>
  43. </el-table-column>
  44. <el-table-column prop="comments" :label="$i18n.locale=='en'? 'Opinions':'审批意见'" width="120" header-align="center">
  45. <template slot-scope="scope">
  46. <span v-if="scope.row.auditStatusDict=='4'" style="display: block; text-align: center">/</span>
  47. <div v-else>
  48. <el-tooltip v-for="(com,c) in scope.row.comments" :key="c" class="item" effect="dark" :content="com" placement="top">
  49. <i class="icon el-icon-tickets"></i>
  50. </el-tooltip>
  51. <!-- <span v-for="(com,c) in scope.row.comments" :key="c" style="display: block">{{ com }}</span> -->
  52. </div>
  53. </template>
  54. </el-table-column>
  55. <el-table-column prop="auditStatusDict" :label="$i18n.locale=='en'? 'Operation': '操作'" width="90" header-align="center">
  56. <template slot-scope="scope">
  57. <el-tooltip v-if="scope.row.auditStatusDict=='4' && !scope.row.travelArrivalTime" class="item" effect="dark" :content="$i18n.locale=='en'? 'Supplement': '补录信息'" placement="top">
  58. <i class="icon el-icon-edit" @click="toView('TravelInformation', scope.row)"></i>
  59. </el-tooltip>
  60. <el-tooltip v-if="scope.row.auditStatusDict=='2' && scope.row.comments.length" class="item" effect="dark" :content="$i18n.locale=='en'? 'ReApply': '重新报名'" placement="top">
  61. <i class="icon el-icon-refresh-right" @click="toView('MeetingApplyForm', scope.row)"></i>
  62. </el-tooltip>
  63. <el-tooltip v-if="scope.row.isSpeak=='Yes'" class="item" effect="dark" :content="$i18n.locale=='en'? 'Upload presentation materials': '上传发言材料'" placement="top">
  64. <i class="icon el-icon-upload" @click="toView('SpeechMaterial', scope.row)"></i>
  65. </el-tooltip>
  66. <el-tooltip v-if="scope.row.auditStatusDict=='4' && scope.row.isSendAttend=='Yes'" class="item" effect="dark" :content="$i18n.locale=='en'? 'Intention to attend': '参会意向'" placement="top">
  67. <i class="icon el-icon-finished" @click="getIntentionAttend(scope.row.id, scope.row)"></i>
  68. </el-tooltip>
  69. </template>
  70. </el-table-column>
  71. </el-table>
  72. <div style="width: 100%;text-align: center;">
  73. <el-pagination
  74. style="margin-top: 20px"
  75. layout="prev, pager, next"
  76. @current-change="currentChange"
  77. :total="totalNum">
  78. </el-pagination>
  79. </div>
  80. <el-dialog title="感兴趣的会场和活动(多选)Intersted forums and events(Multiple choice)" :visible.sync="dialogTableVisible">
  81. <el-table :data="gridData" max-height="400" :border="false" :show-header="false" size="small" @selection-change="checkRow" @row-click="setSelect" ref="multipleTable" class="active-grid">
  82. <el-table-column type="selection" width="50"></el-table-column>
  83. <el-table-column property="activityName">
  84. <template slot-scope="scope">
  85. <p style="font-weight: bold">{{ momentDate(scope.row.activityStartTime) }} ~ {{ momentDate(scope.row.activityEndTime) }}</p>
  86. <p>{{ scope.row.activityName }}</p>
  87. <p>{{ scope.row.activityNameEn }}</p>
  88. </template>
  89. </el-table-column>
  90. </el-table>
  91. <div slot="footer" class="dialog-footer" style="text-align: center">
  92. <el-button @click="dialogTableVisible = false" size="small">{{$i18n.locale=='en'? 'Cancel': '取 消'}}</el-button>
  93. <el-button type="primary" :disabled='unBtn' @click="submitActivityInfo" size="small">{{$i18n.locale=='en'? 'Submit': '确 定'}}</el-button>
  94. </div>
  95. </el-dialog>
  96. </div>
  97. </template>
  98. <script>
  99. import {getApplyHistory, getMeetingInfo,getMeetingApproveHistory, getActivityInfo, updateActivityInfo} from '@/api/meeting/meetingApply'
  100. import { getDicts } from "@/api/dict";
  101. import Base from "@/views/base/Base";
  102. import moment from 'moment-timezone';
  103. export default {
  104. extends: Base,
  105. data(){
  106. return {
  107. input2: '',
  108. tableData: [],
  109. multipleSelection: [],
  110. meetingInfoArray: [],
  111. statusArray: [],
  112. statusEnArray:[],
  113. cureentPage: 1,
  114. auditStatusDict: '', // 全部:"" 审批中:2 审批不通过:3 审批通过:4
  115. userId: JSON.parse(localStorage.getItem('user')).userId,
  116. totalNum: 0,
  117. loading: true,
  118. dialogTableVisible: false,
  119. gridData: [],
  120. meetingApplyId: '',
  121. checkedIds: [],
  122. unBtn:false,
  123. newChecked:[]
  124. }
  125. },
  126. mounted(){
  127. this.getApplyHistory();
  128. getMeetingInfo().then(res =>{
  129. this.meetingInfoArray = res.data.meetingBasicInfos
  130. //debugger
  131. });
  132. getDicts('APPROVAL_STATUS').then(res=>{
  133. this.statusArray = res.data[0];
  134. this.statusEnArray = [{"label":"UnderApproval","value":"2"},
  135. {"label":"Registration Failed","value":"3"},
  136. {"label":"Registration Successful","value":"4"}];
  137. })
  138. },
  139. computed: {
  140. meetingNameMap: function() {
  141. if(this.$i18n.locale == "en"){
  142. return this.meetingInfoArray.array2Obj('id', 'meetingNameEn');
  143. }else{
  144. return this.meetingInfoArray.array2Obj('id', 'meetingName');
  145. }
  146. },
  147. meetingStartDateMap: function() {
  148. return this.meetingInfoArray.array2Obj('id', 'meetingStartDate');
  149. },
  150. approvalStatus: function() {
  151. if(this.$i18n.locale == "en"){
  152. return this.statusEnArray.array2Obj('value', 'label');
  153. }else{
  154. return this.statusArray.array2Obj('value', 'label');
  155. }
  156. }
  157. },
  158. methods: {
  159. momentDate(date){
  160. if(this.$i18n.locale == 'zh'){
  161. return moment(date).format('YYYY MM DD, H:mm')
  162. }else{
  163. moment.locale('en')
  164. return moment(date).format('lll')
  165. }
  166. },
  167. checkRow(checkedData){
  168. this.checkedIds = [];
  169. this.newChecked = [];
  170. const date = []
  171. checkedData.forEach(item=>{
  172. date.find(i=>{
  173. if(i===this.momentDate(item.activityStartTime)){
  174. let msgTxt = this.$i18n.locale=='en'? 'Kind Reminder: participants can only register for one parallel session. Hope you enjoy the conference.': '温馨提示:同一时段平行召开的会议仅限选择一场参加,祝您参会愉快!';
  175. this.$message({
  176. message: msgTxt,
  177. type:'error'
  178. })
  179. }
  180. })
  181. date.push(this.momentDate(item.activityStartTime))
  182. this.checkedIds.push(item.id)
  183. this.newChecked.push(item.activityStartTime)
  184. })
  185. },
  186. setSelect(row){
  187. this.$refs.multipleTable.toggleRowSelection(row);
  188. },
  189. submitActivityInfo(){
  190. var arr1=this.newChecked
  191. var arr2=arr1.sort()
  192. for(var i=0;i<arr2.length-1;i++){
  193. if(arr2[i]==arr2[i+1]){
  194. let msgTxt = this.$i18n.locale=='en'? 'Kind Reminder: participants can only register for one parallel session. Hope you enjoy the conference.': '温馨提示:同一时段平行召开的会议仅限选择一场参加,祝您参会愉快!';
  195. this.$message.error(msgTxt)
  196. return false
  197. }else{
  198. console.log('hello');
  199. }
  200. }
  201. this.submitHandler((token) => {
  202. var meetingApplyId = this.meetingApplyId;
  203. var travelPointIds = this.checkedIds.join(",");
  204. updateActivityInfo(this.meetingApplyId,travelPointIds,token).then(res =>{
  205. if(res.status=='200'){
  206. let msgTxt = this.$i18n.locale=='en'? 'Submitted successfully.': '提交成功';
  207. this.$message({
  208. message: msgTxt,
  209. type: 'success'
  210. });
  211. this.dialogTableVisible = false;
  212. this.resetToken();
  213. }
  214. }).catch(err=>{
  215. this.resetToken();
  216. });
  217. });
  218. },
  219. getIntentionAttend(id){
  220. getActivityInfo(id).then((res)=>{
  221. console.log(res)
  222. this.gridData = res.data.activityInfos || [];
  223. this.dialogTableVisible = true;
  224. if(res.data.activityInfos.length && res.data.curActivityInfos.length){
  225. res.data.activityInfos.forEach((item, i)=>{
  226. if(res.data.curActivityInfos.includes(item.id)){
  227. setTimeout(()=>{
  228. this.$refs.multipleTable.toggleRowSelection(item);
  229. })
  230. }
  231. })
  232. }
  233. }).catch(err=>{
  234. this.gridData = []
  235. })
  236. this.meetingApplyId = id;
  237. },
  238. currentChange(p){
  239. this.cureentPage = p;
  240. this.getApplyHistory();
  241. },
  242. getApplyHistory(){
  243. getApplyHistory({pageNo: this.cureentPage, auditStatusDict: this.auditStatusDict, createBy:this.userId}).then(res=>{
  244. let that = this;
  245. if(res.data){
  246. if(res.data.page){
  247. this.totalNum = Number(res.data.page.totalCount);
  248. }
  249. if(res.data.meetingApplys){
  250. res.data.meetingApplys.forEach(item => {
  251. item.comments = []
  252. getMeetingApproveHistory(item.id).then(res=>{
  253. if(res.data){
  254. if(res.data.tasks){
  255. res.data.tasks.forEach(com => {
  256. if(com.comment){
  257. item.comments.push(com.comment)
  258. }
  259. })
  260. }
  261. }
  262. }).then(function(){
  263. that.tableData = res.data.meetingApplys;
  264. console.log('that.tableData', that.tableData)
  265. }).catch(()=>{
  266. this.loading = false
  267. })
  268. })
  269. }else{
  270. that.tableData = []
  271. }
  272. }else{
  273. that.tableData = []
  274. }
  275. this.loading = false
  276. })
  277. },
  278. filteredByState(state){
  279. this.auditStatusDict = state;
  280. this.getApplyHistory();
  281. },
  282. handleSelectionChange(val) {
  283. this.multipleSelection = val;
  284. },
  285. formatDate(t) {
  286. if(!t){
  287. return ''
  288. }else{
  289. var original = new Date(t);
  290. var year=original.getFullYear();
  291. var month=original.getMonth()+1;
  292. var date=original.getDate();
  293. var hour=original.getHours();
  294. var minute=original.getMinutes();
  295. var second=original.getSeconds();
  296. // return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
  297. return year+"/"+month+"/"+date;
  298. }
  299. },
  300. toView(router, json) {
  301. this.$router.push({ name: router, params: { key: json } });
  302. },
  303. }
  304. }
  305. </script>
  306. <style scoped>
  307. .container-box{
  308. padding: 20px;
  309. }
  310. .filter-box{
  311. display: flex;
  312. justify-content: space-between;
  313. padding: 20px 0;
  314. }
  315. .icon{
  316. font-size: 18px;
  317. margin: 0 6px;
  318. cursor: pointer;
  319. }
  320. .icon:hover{
  321. color: #1f98d0;
  322. }
  323. .active-grid p{
  324. margin: 0;
  325. }
  326. /deep/ .el-dialog__title{
  327. font-size: 16px;
  328. }
  329. </style>