dev/dcp-app-gate/pages/service/others/myOfflineSignup.vue

<template>
	<view class="">
		<view class="offline-signup-list" v-if="tableData.length">
			<view class="offline-signup-list-item" v-for="(item, index) in tableData" :key="index">
				<view class="conference-title">{{ array2Obj(item.meetingId, $i18n.locale=='en'?'meetingNameEn':'meetingName') }}</view>
				<view class="signup-info">
					<view>
						<text class="signup-info-label">{{$i18n.locale=='en'?'ApplyName':'报名人员：'}}</text>
						<text class="signup-info-value">{{item.applyWay=='zh'? item.name: item.nameEn}}</text></view>
					<view>
						<text class="signup-info-label">{{$i18n.locale=='en'?'ApplyDate':'报名时间：'}}</text>
						<text class="signup-info-value">{{moment(item.createDate).format('YYYY-MM-DD HH:mm')}}</text>
					</view>
					<view>
						<text class="signup-info-label">{{$i18n.locale=='en'?'MeetingDate':'会议时间：'}}</text>
						<text class="signup-info-value">
							{{moment(array2Obj(item.meetingId, 'meetingStartDate')).format('YYYY-MM-DD')}} ~ {{moment(array2Obj(item.meetingId, 'meetingEndDate')).format('YYYY-MM-DD')}}
						</text>
					</view>
					<!-- <view><text class="signup-info-label">会议地点：</text><text class="signup-info-value">北京，中国</text></view> -->
					<text v-if="item.auditStatusDict != '4'" class="approval-com" v-for="(com,c) in item.comments" :key="c">{{com}}</text>
					<view class="operation-btn-group">
						<button @click="resubmit(item)" v-if="item.auditStatusDict=='2' && item.comments.length" type="resubmit" hover-class="button-hover" class="operation-btn" plain="true">{{$i18n.locale=='en'?'ReApply':'重新提交'}}</button>
					</view>
				</view>
				<!-- 审批中:2 审批不通过:3 审批通过:4 -->
				<view 
					class="approval-state" 
					:style="{background: getStateColor(item.auditStatusDict).c, 'box-shadow': '0 4px 4px '+getStateColor(item.auditStatusDict).sc}">
					{{ approvalStatus(item.auditStatusDict) }}</view>
			</view>
		</view>
		<view class="nodata-box" v-else>
			<image src="@/static/img/public/7.png" mode=""></image>
			<text>{{$i18n.locale=='en'? 'No Data': '暂无数据'}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				meetingInfoArray: [],
				statusArray: [],
				userId: JSON.parse(uni.getStorageSync('user')).id,
			}
		},
		mounted() {
			// console.log(JSON.parse(uni.getStorageSync('user')))
			this.getMeetingInfo();
			this.getDicts();
			this.getApplyHistory();
		},
		methods: {
			resubmit(data){
				let path;
				if(this.$i18n.locale=='en'){
					path = "/pages/conference/conferenceOfflineEn/conference-offline-en"
				}else{
					path = "/pages/conference/conferenceOfflineZh/conference-offline-zh"
				}
				uni.navigateTo({
					url: path,
					success: function(res) {
						res.eventChannel.emit('reapply', { data: data })
					}
				})
			},
			approvalStatus(val){
				let arr = this.$i18n.locale=='en'? this.statusEnArray: this.statusArray;
				let targeTapproval = arr.filter(item=>{
					return val==item.value;
				})
				return targeTapproval[0]['label'];
			},
			array2Obj(id, attr){
				let targetConference = this.meetingInfoArray.filter(item=>{
					return id==item.id;
				})
				// console.log('targetConference',targetConference)
				return targetConference[0][attr];
			},
			getStateColor(s){
				let color;
				let sColor;
				switch(s){
					case '2':
						color = '#f59a23';
						sColor = '#fad1c5';
					break;
					case '3':
						color = '#fd5c5c';
						sColor = '#f99b9b';
					break;
					case '4':
						color = '#03b6b3';
						sColor = '#5ddedd';
					break;
				}
				return {
					c: color,
					sc: sColor
				};
			},
			async getDicts() {
				const res = await this.$myRequest({
					url: '/sys/sysDicts',
					data: {
						type: 'APPROVAL_STATUS'
					}
				})
				this.statusArray = res.data[0];
				this.statusEnArray = [{"label":"Approvaling","value":"2"},
				            {"label":"Failed","value":"3"},
				            {"label":"Successful","value":"4"}];
				// console.log(this.statusArray)
			},
			async getMeetingInfo() {
			    const res = await this.$myRequest({
			        url: '/meeting/meetingBasicInfos'
			    });
				console.log('this.meetingInfoArray', res)
				this.meetingInfoArray = res.data.meetingBasicInfos;
			},
			async getApplyHistory(){
				await this.$myRequest({
					url: '/meeting/meetingApplys/meetingApplyHistory',
					data: {
						pageNo: '', 
						auditStatusDict: '', 
						createBy: this.userId
					}
				}).then(res => {
					if(res.data && res.data.meetingApplys){
						res.data.meetingApplys.forEach(item => {
							item.comments = [];
							this.$myRequest({
								url: '/workflow/approval/history',
								data: {
									processKey: 'MEETING_APPROVE',
									businessKey: item.id
								}
							}).then(taskRes =>{
								if(taskRes.data && taskRes.data.tasks){
									taskRes.data.tasks.forEach(com => {
										if(com.comment){
											item.comments.push(com.comment)
										}
									})
								}
								this.tableData = res.data.meetingApplys || [];
								// console.log('lllllllllll',this.tableData)
							})
						})
					}
				})
				// console.log('lllllllllll',this.tableData)
			}
		}
	}
</script>

<style scoped>
.offline-signup-list{
	padding-top: 10px;
}
.offline-signup-list-item{
	background: #FFFFFF;
	color: #666;
	padding: 10px;
	position: relative;
	overflow: hidden;
	margin-top: 10px;
}
.conference-title{
	width: 80%;
	font-size: 18px;
	font-weight: bold;
	padding: 16px 0;
}
.signup-info{
	padding: 0 10px;
}
.signup-info-label{
	color: #999;
	padding-right: 10px;
	line-height: 30px;
}
.approval-state{
	position: absolute;
	top: 0;
	right: -100px;
	font-size: 14px;
	color: #FFFFFF;
	line-height: 28px;
	width: 200px;
	text-align: center;
	font-weight: bold;
	transform: rotate(45deg) translate(-10px, 30px);
	transform-origin: 50% 50%;
}
.approval-com{
	color: #f8c897;
	line-height: 30px;
}
.operation-btn-group{
	display: flex;
}
.operation-btn{
	height: 28px;
	line-height: 28px;
	font-size: 14px;
	width: 100px;
	border-color: #6ec8c8;
	color: #6ec8c8;
	margin-left: 0;
	margin-right: 10px;
}
.button-hover[type = resubmit]{
	background: #6ec8c8;
	color: #FFFFFF;
}
.nodata-box{
	text-align: center;
	padding-top: 50px;
}
.nodata-box image{
	width: 60%;
	/* height: 200px; */
}
.nodata-box text{
	display: block;
	font-size: 20px;
	color: #CCE6FF;
	line-height: 40px;
}
</style>