flight.vue 14.7 KB
<template>
    <el-container>
        <el-main>
            <el-row class="row-bg">
                <el-col :span="24">
                    <div class="grid-content content">航班备案</div>
                </el-col>
            </el-row>
            <el-row>
                <el-form :model="flight" :rules="rules" ref="flight" label-width="130px" class="demo-ruleForm">
                    <el-col :span="6">
                        <el-form-item label="航班号" prop="flightNo" label-width="120px">
                            <el-input v-model="flight.flightNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="航空公司代码" prop="airwayCode" label-width="120px">
                            <el-input v-model="flight.airwayCode"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="航空公司中文名称" prop="airwayNameCn" label-width="130px">
                            <el-input v-model="flight.airwayNameCn"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="航空公司英文名称" prop="airwayNameEn" label-width="130px">
                            <el-input v-model="flight.airwayNameEn"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="传输代理人" prop="transportAgentCode" label-width="120px">
                            <el-input v-model="flight.transportAgentCode"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="地面代理人" prop="groundAgentCode" label-width="120px">
                            <el-input v-model="flight.groundAgentCode"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="航班性质" prop="flightType" label-width="130px">
                                <el-select v-model="flight.flightType" placeholder="" style="display:inline">
                                    <el-option v-for="item in flightTypes" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="运输标识" prop="linesType" label-width="130px">
                            <el-select v-model="flight.linesType" placeholder="" style="display:inline">
                                <el-option v-for="item in linesTypes" :key="item.value" :label="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="共享航班号" prop="shareFlightNo" label-width="120px">
                            <el-input v-model="flight.shareFlightNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="18">
                        <el-form-item label="备注" prop="remark" label-width="120px">
                            <el-input v-model="flight.remark"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" style="margin-bottom: 20px">
                        <div class="grid-content content">航线信息<el-button type="primary" size="mini" @click="dialogTableVisible = true" style="margin-left:50px">航线信息查询</el-button></div>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="出发港" prop="departurePort" label-width="120px">
                            <el-input v-model="flight.departurePort"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="出发港关区代码" prop="departureCustomNo" label-width="120px">
                            <el-input v-model="flight.departureCustomNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="目的港" prop="arrivalPort" label-width="120px">
                            <el-input v-model="flight.arrivalPort"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="目的港关区代码" prop="arrivalCustomNo" label-width="120px">
                            <el-input v-model="flight.arrivalCustomNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="每周执行情况" prop="plan" label-width="120px">
                            <el-input v-model="flight.plan"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="长期离港时间" prop="std" label-width="120px">
                            <el-time-picker
                                    v-model="flight.std"
                                    :picker-options="{
                                    selectableRange: '00:00:00 - 23:59:59'
                                    }"
                                    style="width:100%"
                                    placeholder="任意时间点">
                            </el-time-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="长期抵港时间" prop="sta" label-width="120px">
                            <el-time-picker
                                    v-model="flight.sta"
                                    :picker-options="{
                                    selectableRange: '00:00:00 - 23:59:59'
                                    }"
                                    style="width:100%"
                                    placeholder="任意时间点">
                            </el-time-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12"></el-col>

                    <el-col :span="6">
                        <el-form-item label="有效期起始时间" prop="effStartdate" label-width="120px">
                            <el-date-picker
                                    v-model="flight.effStartdate"
                                    type="date"
                                    style="width:100%"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="有效期结束时间" prop="effEnddate" label-width="120px">
                            <el-date-picker
                                    v-model="flight.effEnddate"
                                    type="date"
                                    style="width:100%"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="备注" prop="remark" label-width="120px">
                            <el-input v-model="flight.remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <el-row style="margin-left: 120px">
                <el-col :span="24">   <el-button type="primary" @click="submitForm('flight')">保 存</el-button>
                    <el-button type="success">保存并发送</el-button></el-col>
            </el-row>
            <el-row>
                <el-dialog title="航线信息" :visible.sync="dialogTableVisible" width="90%">
                    <el-table
                    :data="tableData"
                    border
                    style="width: 100%;margin-bottom: 10px">
                    <el-table-column
                            fixed="left"
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="primary"
                                    @click="handleEdit(scope.$index, scope.row)">选择</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                            fixed
                            prop="serialNo"
                            label="航线序号"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            fixed
                            prop="departurePort"
                            label="出发港"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            fixed
                            prop="departureCustomNo"
                            label="出发港关区代码"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            fixed
                            prop="arrivalPort"
                            label="目的港"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            fixed
                            prop="arrivalCustomNo"
                            label="目的港关区代码"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            fixed
                            prop="std"
                            label="长期离港时间"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            fixed
                            prop="sta"
                            label="长期抵港时间"
                            width="150">
                    </el-table-column>
                        <el-table-column
                                fixed
                                prop="effStartdate"
                                label="有效期起始时间"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                fixed
                                prop="effEnddate"
                                label="有效期结束时间"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                fixed
                                prop="plan"
                                label="每周执行情况"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                fixed
                                prop="remark"
                                label="备注"
                                width="150">
                        </el-table-column>
                    </el-table>
                </el-dialog>
            </el-row>
        </el-main>
    </el-container>
</template>
<style scoped>
    .grid-content {
        height: 36px;
        line-height: 36px;
    }
    .el-dialog__body{text-align: center}
    .content {
        border-left: 4px #409EFF solid;
        padding-left: 10px;
        background-color: #f9fafc;
        margin-bottom: 2px
    }

    .row-bg{
        background-color: white;
    }
    .el-col{margin-right: 0px;}
</style>
<script>
    export default {
        data(){
            return{
                flight:{
                    uuid:undefined,
                    airwayCode:undefined,
                    airwayNameEn:undefined,
                    airwayNameCn:undefined,
                    transportAgentCode:undefined,
                    groundAgentCode:undefined,
                    flightNo:undefined,
                    shareFlightNo:undefined,
                    linesType:'2',
                    flightType:'',
                    cancelFlag:undefined,
                    departurePort:undefined,
                    arrivalPort:undefined,
                    departureCustomNo:undefined,
                    arrivalCustomNo:undefined,
                    std:undefined,
                    sta:undefined,
                    effStartdate:undefined,
                    effEnddate:undefined,
                    plan:undefined,
                    remark:undefined,
                    createTime:undefined,
                    createBy:undefined,
                    updateTime:undefined,
                    updateBy:undefined,
                    isDelete:undefined,
                    serialno:undefined,
                    status:undefined,
                    statusMsg:undefined,
                    messageid:undefined
                },
                rules:{},
                flightTypes:[
                    {value:'',label:'请选择'},
                    {value:'1',label:'来自关境外'},
                    {value:'2',label:'驶往关境外'},
                    {value:'3',label:'来自关境内'},
                    {value:'4',label:'驶往关境内'},
                    {value:'5',label:'国际转国际'}
                    ],
                linesTypes:[
                    {value:'',label:'请选择'},
                    {value:'1',label:'客运'},
                    {value:'2',label:'货运'},
                    {value:'3',label:'客货运'},
                    {value:'4',label:'公务机'},
                    {value:'5',label:'救援飞机'},
                    {value:'6',label:'专机'},
                    {value:'7',label:'客包机'},
                    {value:'8',label:'货包机'}
                ],
                dialogTableVisible:false,
                tableData:[]
            }
        },
    }
</script>