<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 v-model="formInline.operation" placeholder="航班操作" style="margin-left: 50px" size="small">
<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"
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
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="uld"
label="ULD">
</el-table-column>
<el-table-column
prop="stowage"
label="配载重量">
</el-table-column>
<el-table-column
prop="ground"
label="是否地勤交接">
</el-table-column>
<el-table-column
prop="warehouse"
label="仓库">
</el-table-column>
<el-table-column
prop="bup"
label="BUP">
</el-table-column>
</el-table>
<el-table
ref="multipleTable"
:data="tableData1"
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
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="box"
label="板箱号">
</el-table-column>
<el-table-column
prop="assembling"
label="装配件数">
</el-table-column>
<el-table-column
prop="stowage"
label="配载重量">
</el-table-column>
</el-table>
<div style="margin-top:15px;margin-left: 20px">
<el-button size="small" @click="dialogFormVisible = true">待运导入</el-button>
<el-button size="small">装箱</el-button>
<el-button size="small">部分装箱</el-button>
<el-button size="small">放散舱</el-button>
<el-button size="small">部分放散舱</el-button>
<el-button size="small" @click="dialogTableVisible = true">正式舱单</el-button>
<el-button size="small">地勤交接</el-button>
<el-button size="small" @click="dialogFormVisible3 = true">转配</el-button>
<el-button size="small">航班文件</el-button>
</div>
<div style="margin-top:15px;margin-left: 20px">
<el-button size="small" type="primary" >散货配上</el-button>
<el-button size="small" type="success">卸下</el-button>
<el-button size="small" type="warning">运单保存</el-button>
</div>
</el-row>
<!-- 表单①待运导入按钮弹框-->
<el-row>
<el-dialog title="待运导入" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-row>
<el-col :span="10">
<el-form-item>
<el-form-item label="航班号" :label-width="formLabelWidth">
<el-input v-model="form.flightNo" ></el-input>
</el-form-item>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item>
<el-form-item label="运单号" :label-width="formLabelWidth">
<el-input v-model="form.waybillNo"></el-input>
</el-form-item>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7">
<el-form-item>
<el-form-item label="代理人" :label-width="formLabelWidth">
<el-input v-model="form.agent" ></el-input>
</el-form-item>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item>
<el-form-item label="承运人" :label-width="formLabelWidth">
<el-input v-model="form.carrier"></el-input>
</el-form-item>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item>
<el-form-item label="起始站" :label-width="formLabelWidth">
<el-input v-model="form.departure"></el-input>
</el-form-item>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7">
<el-form-item>
<el-form-item label="中转/目的站" :label-width="formLabelWidth">
<el-input v-model="form.destination" ></el-input>
</el-form-item>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item>
<el-form-item label="特货代码" :label-width="formLabelWidth">
<el-input v-model="form.code"></el-input>
</el-form-item>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item>
<el-form-item label="CBA" :label-width="formLabelWidth">
<el-radio v-model="form.radio" label="1">是</el-radio>
<el-radio v-model="form.radio" label="2">否</el-radio>
</el-form-item>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="19">
<el-form-item>
<el-form-item label="制单时间" :label-width="formLabelWidth">
<el-date-picker
v-model="form.value1"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['12:00:00']">
</el-date-picker>
</el-form-item>
</el-form-item>
</el-col>
<el-col :span="2" >
<el-form-item >
<el-button type="primary">查 询</el-button>
</el-form-item>
</el-col>
</el-row>
<el-table
ref="multipleTable"
:data="tableData3"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="productName"
label="品名">
</el-table-column>
<el-table-column
prop="waybillNo"
label="运单号">
</el-table-column>
<el-table-column
prop="departure"
label="始发站">
</el-table-column>
<el-table-column
prop="destination"
label="目的站">
</el-table-column>
<el-table-column
prop="number"
label="仓库件数">
</el-table-column>
<el-table-column
prop="weight"
label="仓库重量">
</el-table-column>
</el-table>
<div style="margin-top: 20px;margin-left: 585px">
<el-button @click="dialogFormVisible1=true">散货装配</el-button>
</div>
<el-table
ref="multipleTable"
:data="tableData4"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="box"
label="板箱号">
</el-table-column>
<el-table-column
prop="total"
label="总件数">
</el-table-column>
<el-table-column
prop="totalWeight"
label="总重量"
show-overflow-tooltip>
</el-table-column>
</el-table>
<div style="margin-top: 20px;margin-left: 585px">
<el-button @click="dialogFormVisible2=true">ULD装配</el-button>
</div>
</el-form>
</el-dialog>
</el-row>
<!-- 表单①正式舱单按钮弹框-->
<el-row>
<el-dialog title="打印" :visible.sync="dialogTableVisible">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="舱单打印" name="first">
<el-table
:data="tableData1"
style="width: 100%"
row-key="id"
border
lazy
:load="load"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="date"
label="板箱号">
</el-table-column>
<el-table-column
prop="name"
label="配载件数">
</el-table-column>
<el-table-column
prop="address"
label="配载重量">
</el-table-column>
<el-table-column
prop="date"
label="配载体积">
</el-table-column>
<el-table-column
prop="name"
label="特殊处理代码"
width="120px">
</el-table-column>
<el-table-column
prop="address"
label="品名">
</el-table-column>
<el-table-column
prop="date"
label="始发站">
</el-table-column>
<el-table-column
prop="name"
label="目的站">
</el-table-column>
<el-table-column
prop="address"
label="优先级">
</el-table-column>
<el-table-column
prop="name"
label="备注">
</el-table-column>
<el-table-column
prop="address"
label="舱单打印">
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="分批单打印" name="second">分批单打印</el-tab-pane>
<el-tab-pane label="分批单打印" name="third">分批单打印</el-tab-pane>
</el-tabs>
<div style="margin-top: 10px;margin-left: 250px">
<el-button @click="">无ULD打印</el-button>
<el-button @click="">有ULD打印</el-button>
<el-button @click="">装载舱单打印</el-button>
</div>
</el-dialog>
</el-row>
<!-- 表单①转配按钮弹框-->
<el-row>
<el-dialog title="转配航班" :visible.sync="dialogFormVisible3" width="30%">
<el-form :model="form3">
<el-row>
<el-col :span="20">
<el-form-item label="航班号" :label-width="formLabelWidth">
<el-input v-model="form3.flightNo" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="20">
<el-form-item label="航班日期" :label-width="formLabelWidth">
<el-input v-model="form3.flightDate" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="20">
<el-form-item label="航段" :label-width="formLabelWidth">
<el-input v-model="form3.segment" autocomplete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div style="text-align: center">
<el-button type="primary" @click="dialogFormVisible3 = false">转 配</el-button>
<el-button @click="dialogFormVisible3 = false">取 消</el-button>
</div>
</el-dialog>
</el-row>
<!-- 航班配载 待运导入 散货装配按钮-->
<el-row>
<el-dialog title="操作区" :visible.sync="dialogFormVisible1">
<el-form :model="form1">
<el-row>
<el-col :span="21">
<el-form-item label="小计：" :label-width="formLabelWidth">
<el-input
placeholder="货物信息"
v-model="form1.subtotal"
:disabled="true">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="7">
<el-form-item label="运单号" :label-width="formLabelWidth">
<el-select v-model="form1.waybillNo" placeholder="请选择">
<el-option label="货单一" value="yi"></el-option>
<el-option label="货单二" value="er"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-input v-model="form1.waybill" placeholder="单号"></el-input>
</el-col>
<el-col :span="8">
<el-input v-model="form1.location" placeholder="库位"></el-input>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="件数" :label-width="formLabelWidth">
<el-input v-model="form1.number"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="重量" :label-width="formLabelWidth">
<el-input v-model="form1.weight" placeholder="KG"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row >
<el-col :span="21">
<el-form-item label="储运备注" :label-width="formLabelWidth">
<el-input v-model="form1.remarks"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible1 = false">散货配上</el-button>
<el-button @click="dialogFormVisible1 = false">卸下</el-button>
<el-button type="primary" @click="dialogFormVisible1 = false">运单保存</el-button>
</div>
</el-dialog>
</el-row>
<!-- 航班配载 待运导入 ULD装配按钮-->
<el-row>
<el-dialog title="操作区" :visible.sync="dialogFormVisible2">
<el-form :model="form2">
<el-row>
<el-col :span="21">
<el-form-item label="小计：" :label-width="formLabelWidth">
<el-input
placeholder="货物信息"
v-model="form2.subtotal"
:disabled="true">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="仓库" :label-width="formLabelWidth">
<el-input v-model="form2.warehouse"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="库位" :label-width="formLabelWidth">
<el-input v-model="form2.location"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row >
<el-col :span="6">
<el-form-item label="ULD号" :label-width="formLabelWidth">
<el-input v-model="form2.uldNo"></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-input v-model="form2.uldNo" placeholder=""></el-input>
</el-col>
<el-col :span="3">
<el-input v-model="form2.uldNo" placeholder=""></el-input>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible2 = false">板箱配上</el-button>
<el-button @click="dialogFormVisible2 = false">卸下</el-button>
</div>
</el-dialog>
</el-row>
<!-- 表单区域②-->
<el-row style="margin-top:20px">
<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
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="box"
label="板箱号">
</el-table-column>
<el-table-column
prop="assembling"
label="装配件数">
</el-table-column>
<el-table-column
prop="stowage"
label="配载重量">
</el-table-column>
</el-table>
</el-row>
<div style="margin-top: 15px;margin-left: 20px">
<el-button size="small" type="primary">板箱配上</el-button>
<el-button size="small" type="success">卸下</el-button>
</div>
<div style="margin-left: 1190px"></div>
</el-main>
</el-container>
</template>
<script>
export default {
data() {
return {
formInline: {
flightNo: undefined,
operation: undefined
},
operation: [{
value: '操作1',
label: '操作1'
}, {
value: '操作2',
label: '操作2'
}],
tableData:[],
tableData1:[],
tableData2:[],
form: {
flightNo:undefined,
waybillNo:undefined,
agent:undefined,
carrier:undefined,
departure:undefined,
destination:undefined,
code:undefined,
value1: '',
radio: '1'
},
tableData3:[],
tableData4:[],
dialogFormVisible: false,
form1: {
subtotal: undefined,
waybillNo: undefined,
waybill: undefined,
location: undefined,
number: undefined,
weight: undefined,
remarks: undefined,
},
form2: {
subtotal: undefined,
warehouse: undefined,
location: undefined,
uldNo: undefined,
},
form3: {
flightNo:undefined,
flightDate:undefined,
segment:undefined,
},
dialogFormVisible1: false,
dialogFormVisible2: false,
dialogFormVisible3: false,
dialogTableVisible: false,
innerVisible: false,
innerVisible1: false,
formLabelWidth: '120px',
}
}
}
</script>