<template>
<el-container style="height: 550px;overflow:auto;">
<el-main>
<el-row>
<el-col :span="24">
<div class="grid-content content">航班预配</div>
</el-col>
</el-row>
<!-- 搜索区域-->
<el-row>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-col :span="8">
<el-form-item label="航班号">
<el-input size="small" v-model="formInline.flightNo" placeholder="请输入航班号"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item>
<el-button size="small" type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item>
<el-select size="small" v-model="formInline.operation" placeholder="航班操作" style="margin-left: 50px">
<el-option
v-for="item in operation"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-form>
</el-row>
<!-- 表单区域①-->
<el-row>
<el-table
ref="multipleTable"
:data="tableData"
style="border-radius: 10px 10px 0px 0px;line-height: 25px;"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
tooltip-effect="dark"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="waybillNo"
label="运单号">
</el-table-column>
<el-table-column
prop="number"
label="件数">
</el-table-column>
<el-table-column
prop="weight"
label="重量">
</el-table-column>
<el-table-column
prop="volume"
label="体积">`
</el-table-column>
<el-table-column
prop="product"
label="品名">
</el-table-column>
</el-table>
<div style="margin-top:15px;margin-left: 20px">
<el-button size="small" type="primary" >配上</el-button>
<el-button size="small" type="success" @click="dialogFormVisible = true">新增</el-button>
<el-button size="small" type="warning" @click="dialogForm1Visible = true">导入</el-button>
</div>
<div style="margin-left: 1190px"></div>
</el-row>
<!-- 表单①新增按钮弹框-->
<el-row >
<el-dialog title="新增页面" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-row>
<el-col :span="10">
<el-form-item label="运单号" :label-width="formLabelWidth">
<el-input v-model="form.waybillNo" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="目的站" :label-width="formLabelWidth">
<el-input v-model="form.destination" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="件数" :label-width="formLabelWidth">
<el-input v-model="form.number" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="重量" :label-width="formLabelWidth">
<el-input v-model="form.weight" autocomplete="off" placeholder="单位：KG"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="体积" :label-width="formLabelWidth">
<el-input v-model="form.volume" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="品名" :label-width="formLabelWidth">
<el-select v-model="form.product" placeholder="请选择品名">
<el-option label="品名一" value="品名一"></el-option>
<el-option label="品名二" value="品名二"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="特货代码" :label-width="formLabelWidth">
<el-input v-model="form.code" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="代理人" :label-width="formLabelWidth">
<el-input v-model="form.agent" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="优先级" :label-width="formLabelWidth">
<el-input v-model="form.priority" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="备注" :label-width="formLabelWidth">
<el-input v-model="form.remarks" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">保 存</el-button>
</div>
</el-dialog>
</el-row>
<!-- 表单①导入按钮弹框-->
<el-row align="center">
<el-dialog title="批量导入" :visible.sync="dialogForm1Visible" style="width: 100%">
<el-form :model="form1" >
<el-row>
<el-col :span="7">
<el-form-item>
<el-form-item label="航班号" :label-width="formLabelWidthd">
<el-input v-model="form1.flightNo"></el-input>
</el-form-item>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item>
<el-form-item label="始发站" :label-width="formLabelWidthd">
<el-input v-model="form1.departure"></el-input>
</el-form-item>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item>
<el-form-item label="中转站" :label-width="formLabelWidthd">
<el-input v-model="form1.transfer"></el-input>
</el-form-item>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item>
<el-form-item label="目的站" :label-width="formLabelWidthd">
<el-input v-model="form1.destination"></el-input>
</el-form-item>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item>
<el-form-item label="代理人" :label-width="formLabelWidthd">
<el-input v-model="form1.agent"></el-input>
</el-form-item>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item>
<el-form-item label="特货代码" :label-width="formLabelWidthd">
<el-input v-model="form1.code"></el-input>
</el-form-item>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="是否拉货" :label-width="formLabelWidthd">
<el-select v-model="form1.goods" placeholder="是否拉货" style="width: 160px">
<el-option
v-for="item in goods"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item>
<el-form-item label="制单时间" :label-width="formLabelWidthd">
<el-date-picker
v-model="form1.voucher"
type="date"
placeholder="选择日期"
style="width: 160px">
</el-date-picker>
</el-form-item>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item>
<el-form-item label="入仓时间" :label-width="formLabelWidthd">
<el-date-picker
v-model="form1.warehousing"
type="date"
placeholder="选择日期"
style="width: 160px">
</el-date-picker>
</el-form-item>
</el-form-item>
</el-col>
<el-col :span="13" style="margin-left: 70px">
<el-form-item>
<el-radio-group v-model="form1.radio">
<el-radio :label="3">邮件单</el-radio>
<el-radio :label="6">有库存</el-radio>
<el-radio :label="9">已审核</el-radio>
<el-radio :label="12">已放行</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col>
<div style="margin-top: 20px;margin-left: 580px">
<el-button type="primary">查询</el-button>
</div>
</el-col>
<el-col>
<el-table
ref="multipleTable"
:data="tableData1"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="waybillNo"
label="运单号"
width="120">
</el-table-column>
<el-table-column
prop="number"
label="件数"
width="120">
</el-table-column>
<el-table-column
prop="volume"
label="体积"
width="120">
</el-table-column>
<el-table-column
prop="weight"
label="重量"
show-overflow-tooltip>
</el-table-column>
</el-table>
<div style="margin-top: 20px;margin-left: 580px">
<el-button type="success">导入</el-button>
<el-button type="info">取消</el-button>
</div>
</el-col>
</el-row>
</el-form>
</el-dialog>
</el-row>
<!-- 表单区域②-->
<el-row>
<el-table
ref="multipleTable"
:data="tableData2"
tooltip-effect="dark"
style="border-radius: 10px 10px 0px 0px;line-height: 25px;"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
@selection-change="handleSelectionChange">
<el-table-column
prop="type"
label="ULD类型">
</el-table-column>
<el-table-column
prop="number"
label="件数">
</el-table-column>
<el-table-column
prop="machine"
label="机仓位">
</el-table-column>
</el-table>
<div style="margin-top:15px;margin-left: 20px">
<el-button size="small" type="primary" >拉下</el-button>
<el-button size="small" type="success" @click="dialogFormVisibles = true">新增</el-button>
<el-button size="small" type="danger" >删除</el-button>
</div>
<div style="margin-left: 1190px"></div>
</el-row>
<!-- 表单②新增按钮弹框-->
<el-row>
<el-dialog title="新增页面" :visible.sync="dialogFormVisibles">
<el-form :model="forms">
<el-row>
<el-col :span="10">
<el-form-item label="ULD" :label-width="formLabelWidths">
<el-input v-model="forms.uld" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="件数" :label-width="formLabelWidths">
<el-input v-model="forms.number" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="机仓位" :label-width="formLabelWidths">
<el-select v-model="forms.machine" placeholder="请选择机仓位">
<el-option label="仓位一" value="仓位一"></el-option>
<el-option label="仓位二" value="仓位二"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="板位" :label-width="formLabelWidths">
<el-select v-model="forms.position" placeholder="请选择板位">
<el-option label="板位一" value="板位一"></el-option>
<el-option label="板位二" value="板位二"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="板型" :label-width="formLabelWidths">
<el-select v-model="forms.plate" placeholder="请选择板型">
<el-option label="板型一" value="板型一"></el-option>
<el-option label="板型二" value="板型二"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisibles = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisibles = false">保 存</el-button>
</div>
</el-dialog>
</el-row>
</el-main>
</el-container>
</template>
<script>
export default {
data() {
return {
formInline: {
flightNo: undefined,
operation: undefined,
},
tableData:[],
form: {
waybillNo:undefined,
destination:undefined,
number:undefined,
weight:undefined,
volume:undefined,
product:undefined,
code:undefined,
agent:undefined,
priority:undefined,
remarks:undefined,
},
form1: {
flightNo:undefined,
departure:undefined,
transfer:undefined,
destination:undefined,
agent:undefined,
code:undefined,
goods:undefined,
voucher:undefined,
warehousing:undefined,
radio:undefined,
},
tableData1:[],
tableData2:[],
forms: {
uld:undefined,
number:undefined,
machine:undefined,
position:undefined,
plate:undefined,
},
dialogFormVisible: false,
dialogForm1Visible: false,
dialogFormVisibles: false,
radio: 3,
formLabelWidth: '120px',
formLabelWidths: '120px',
formLabelWidthd: '120px',
operation: [{
value: '操作1',
label: '操作1'
}, {
value: '操作2',
label: '操作2'
}],
goods: [{
value: '是',
label: '是'
}, {
value: '否',
label: '否'
}],
}
},
methods: {
onSubmit() {
console.log('submit!');
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
}
</script>