dev/dcp-web-gate/src_old/views/conferenceServices/TravelInformation.vue

<template>
  <div class="container-box">
      <div class="bread-crumb">
        <el-breadcrumb separator="/" style="float: left;margin:15px ">
            <el-breadcrumb-item :to="{ path: 'home' }">{{$i18n.locale=='en'? 'Home': '首页'}}</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: 'ApplicationHistory'}">{{$i18n.locale=='en'? 'userCenter': '用户中心'}}</el-breadcrumb-item>
            <el-breadcrumb-item>{{$i18n.locale=='en'? 'Supplement': '信息补录'}}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
      <div class="content-box">
        <div class="content-item">
            <div class="category-body" v-if="$i18n.locale=='en'">
                <!-- <div class="category-reminder">
                    <p>Dear guest: </p>
                    <p>In order to further improve the service for you, you are required to fill in the itinerary truthfully so as to allocate volunteers for you. I wish you a happy meeting!</p>
                </div>
                <div class="conference-info">
                    <p>{{formatDate(meetingStartDateMap[meetingData.meetingId])}} 9 a.m</p>
                    <p>{{meetingPlaceMap[meetingData.meetingId]}}</p>
                </div> -->
                <el-form :model="meetingApply" :rules="rulesEn" ref="meetingApplyFormEn" label-width="150px" key="1">
                    <el-form-item label="The time of arrival" prop="travelArrivalTime">
                        <el-date-picker
                            v-model="meetingApply.travelArrivalTime"
                            type="date"
                            placeholder="YYYY-MM-DD"
                            style="width: 100%"
                            ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="Leave time" prop="travelLeaveTime">
                        <el-date-picker
                        v-model="meetingApply.travelLeaveTime"
                        type="date"
                        placeholder="YYYY-MM-DD"
                        style="width: 100%"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="Travel Info" prop="travelInfo">
                        <el-input v-model="meetingApply.travelInfo" placeholder="Please enter transportation information (e.g. round-trip train number , flight number)"></el-input>
                    </el-form-item>
                    <el-form-item label="Hotel">
                        <el-input v-model="meetingApply.hotelName" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="Dietary taboos">
                        <el-input v-model="meetingApply.dietaryTaboos" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item style="text-align: center">
                        <el-button type="primary" @click="submitForm('meetingApplyFormEn')">Submit</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="category-body" v-else>
                <!-- <div class="category-reminder">
                    <p>亲爱的嘉宾：</p>
                    <p>您好！为了进一步为您提升服务，需要您如实填报行程，方便为您分配志愿者，祝您本次会议愉快！</p>
                </div>
                <div class="conference-info">
                    <p>{{formatDate(meetingStartDateMap[meetingData.meetingId])}} 上午9点</p>
                    <p>{{meetingPlaceMap[meetingData.meetingId]}}</p>
                </div> -->
                <el-form :model="meetingApply" :rules="rulesZh" ref="meetingApplyFormZh" label-width="150px" key="2">
                    <el-form-item label="抵达时间" prop="travelArrivalTime">
                    <el-date-picker
                        v-model="meetingApply.travelArrivalTime"
                        type="date"
                        placeholder="YYYY-MM-DD"
                        style="width: 100%"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="离开时间" prop="travelLeaveTime">
                        <el-date-picker
                        v-model="meetingApply.travelLeaveTime"
                        type="date"
                        placeholder="YYYY-MM-DD"
                        style="width: 100%"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="交通信息" prop="travelInfo">
                        <el-input v-model="meetingApply.travelInfo" placeholder="请输入交通信息(如:往返车次 , 航班号)"></el-input>
                    </el-form-item>
                    <el-form-item label="入住酒店">
                        <el-input v-model="meetingApply.hotelName" placeholder="请输入入住酒店"></el-input>
                    </el-form-item>
                    <el-form-item label="饮食禁忌">
                        <el-input v-model="meetingApply.dietaryTaboos" placeholder="请输入饮食禁忌"></el-input>
                    </el-form-item>
                    <el-form-item style="text-align: center">
                        <el-button type="primary" @click="submitForm('meetingApplyFormZh')">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import Base from "@/views/base/Base";
import { updateItineraryInfo, getMeetingInfo} from "@/api/meeting/meetingApply";
import { getToken } from "@/utils/auth";

export default {
    extends: Base,
    data(){
        return {
            meetingApply: {
                id: this.$route.params.key.id,
                travelLeaveTime: '',
                travelArrivalTime: '',
                travelInfo: '',
                hotelName: '',
                dietaryTaboos: ''
            },
            meetingData: {},
            meetingInfoArray: [],
            rulesEn: {
                travelArrivalTime: [
                    { required: true, message: 'Please enter the time of arrival.', trigger: 'change' },
                ],
                travelLeaveTime: [
                    { required: true, message: 'Please enter Leave time.', trigger: 'change' },
                ],
                travelInfo: [
                    { required: true, message: 'Please enter Flight number.', trigger: 'blur' },
                ],
            },
            rulesZh: {
                travelArrivalTime: [
                    { required: true, message: '请输入抵达时间', trigger: 'change' },
                ],
                travelLeaveTime: [
                    { required: true, message: '请输入离开时间', trigger: 'change' },
                ],
                travelInfo: [
                    { required: true, message: '请输入交通信息', trigger: 'blur' },
                ],
            },
        }
    },
    mounted(){
        this.meetingData = this.$route.params.key;
        getMeetingInfo().then(res =>{
            this.meetingInfoArray = res.data.meetingBasicInfos
        }); 
    },
    computed: {
        // meetingNameMap: function() {
        //     if(this.lang == "en"){
        //         return this.meetingInfoArray.array2Obj('id', 'meetingNameEn');
        //     }else{
        //         return this.meetingInfoArray.array2Obj('id', 'meetingName');
        //     }
        // },
        meetingStartDateMap: function() {
           return this.meetingInfoArray.array2Obj('id', 'meetingStartDate');
        },
        meetingPlaceMap: function() {
           if(this.$i18n.locale == "en"){
                return this.meetingInfoArray.array2Obj('id', 'meetingPlaceEn');
            }else{
                return this.meetingInfoArray.array2Obj('id', 'meetingPlace');
            }
        },
    },
    methods:{
        formatDate(t) {
            if(!t){
                return ''
            }else{
                var original = new Date(t);
                var year=original.getFullYear(); 
                var month=original.getMonth()+1;  
                var date=original.getDate();      
                // var hour=original.getHours();     
                // var minute=original.getMinutes(); 
                // var second=original.getSeconds(); 
                return year+"/"+month+"/"+date; 
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (!valid) {
                    return false;
                }
                this.save();
            });
        },
        save: function(){
            this.submitHandler((token) => {    		
	            updateItineraryInfo(JSON.stringify(this.meetingApply), token).then(result => {
                    if(result.status == "200"){
                        this.$message({
                            message: this.$i18n.locale == "en"? 'Successfully' :'提交成功',
                            type: 'success'
                        });
                        this.$router.go(-1);
                    }
                    // console.log('result',result)
	            }).catch((error) => {
	                this.resetToken();
	            });
    		});
        }
    }
}
</script>

<style scoped>
.container-box {
  width: 1200px;
  margin: 10px auto;
  min-height: calc( 100vh - 420px )
}
.bread-crumb{
    height: 40px;
    background: #fff;
    margin: 10px 0;
}
.content-box {
  width: 100%;
}
.content-box .content-item {
  padding-bottom: 20px;
  overflow: hidden;
  background: #fff;
}
.content-box .category-body {
  padding: 100px 150px 22px 150px;
  position: relative;
}
.category-reminder{
    font-size: 18px;
    font-weight: bold;
    padding: 30px 0;
}
.category-reminder p:last-child{
    text-indent: 2em;
}
.conference-info{
    position: absolute;
    top: 50px;
    right: 50px;
    text-align: right;
}
.content-box /deep/ .el-input__inner {
  height: 48px;
  line-height: 48px;
}
.submit-success{
    text-align: center; 
    font-size: 22px; 
    color: #999
}
.submit-success p{
    margin: 40px 0;
}
.submit-success span{
    margin: 0 20px;
}
</style>