<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 :label-position="labelPosition" :model="queryFlightConfigure" :rules="rules" ref="queryFlight"
                         label-width="130px" class="demo-ruleForm">

                    <el-col :span="6" >
                        <el-form-item label="航班号：" prop="flightNo" label-width="80px">
                            <el-input v-model="queryFlightConfigure.flightNo" style="width:190px"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" >
                        <el-button type="primary" @click="submitForm('queryFlightConfigure')">查询</el-button>
                    </el-col>
                </el-form>
            </el-row>
            <!--            表单区域-->
            <el-row>
                <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="username"
                            label="用户名"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            fixed
                            prop="flightno"
                            label="航班号"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            fixed
                            prop="ietype"
                            label="进出港"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            fixed
                            prop="createby"
                            label="创建人"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            fixed
                            prop="createtime"
                            label="创建时间"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            fixed
                            prop="updateby"
                            label="更新人"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            fixed
                            prop="updatetime"
                            label="更新时间"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            fixed
                            prop=""
                            label="报文操作"
                            width="150">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="success"
                                    @click="handleEdit(scope.$index, scope.row)">查看</el-button>
                        </template>
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDel(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <el-row>
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[100, 200, 300, 400]"
                            :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="400">
                    </el-pagination>
                </div>
            </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;
    }

</style>
<script>
    export default {
        data(){
            return{
                queryFlightConfigure:{
                    flightNo:undefined,
                },
                rules:{
                    flightNo: [
                        {required: true, message: '请输入', trigger: 'blur'}
                    ],
                },
                labelPosition:'left',
                currentPage: 4,
                tableData:[]
            }
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        },
    }
</script>