朱兆平 / vue_cli · 提交

转到一个项目

作者 小范
提交 c7d30d553ef8cc72c4f1822816681654836a610c 1 个父辈 42d88262

下单信息完善 在线订舱平台完善

内嵌 并排对比
正在显示 11 个修改的文件 包含 2906 行增加 和 282 行删除
... ... @@ -25,7 +25,6 @@ import ExitLoading from './views/nmms/ExitLoading.vue'
import ExitFlightDesc from './views/nmms/ExitFlightDesc.vue'
import LostLoad from './views/lostLoadChange/lostLoading.vue'
import LostLoadChange from './views/lostLoadChange/lostLoadChange.vue'
import OrigFlightList from './views/nmms_import/OrigFlightList.vue'
import EnterFlightInfo from './views/nmms_import/EnterFlightInfo.vue'
import OrigMaster from './views/nmms_import/OrigMaster.vue'
... ... @@ -36,9 +35,18 @@ import AllocateSearch from './views/nmms_import/AllocateSearch.vue'
import Importallocation from './views/nmms_import/Importallocation.vue'
import Allocatearrive from './views/nmms_import/Allocatearrive.vue'
import User from './views/nav1/user.vue'
import Page4 from './views/nav2/Page4.vue'
import Page5 from './views/nav2/Page5.vue'
import Page6 from './views/nav3/Page6.vue'
import preConfiguration from './views/nav2/preConfiguration.vue'
import allocate from './views/nav2/allocate.vue'
import charge from './views/nav2/charge.vue'
import documents from './views/nav2/documents.vue'
import booking from './views/nav4/booking.vue'
import order from './views/nav4/order.vue'
import airlift from './views/nav4/airlift.vue'
import inquiry from './views/nav4/inquiry.vue'
import echarts from './views/charts/echarts.vue'
import SecrityInspection from './views/staff/security_inspection.vue'
import Key from './views/staff/key.vue'
... ... @@ -107,11 +115,30 @@ let routes = [
{
path: '/domdep',
component: Home,
name: 'KT际通',
iconCls: 'el-icon-delete-location',
children: [
{ path: '/booking', component: booking, name: '在线订舱' },
{ path: '/order', component: order, name: '订舱信息' },
{ path: '/airlift', component: airlift, name: '空运专线' },
{ path: '/inquiry', component: inquiry, name: '航班号查询' },
]
},
// 货运系统--航班预配
{
path: '/domdep',
component: Home,
name: '国内出港',
iconCls: 'el-icon-setting',
iconCls: 'el-icon-position',
children: [
{ path: '/Page4', component: Page4, name: '航班预配' },
// { path: '/role', component: Role, name: '组织机构' },
{ path: '/preConfiguration', component: preConfiguration, name: '航班预配' },
{ path: '/allocate', component: allocate, name: '航班配载' },
{ path: '/documents', component: documents, name: '航班文件' },
{ path: '/charge', component: charge, name: '付费处理' },
// { path: '/perm', component: Perm, name: '权限管理' },
// { path: '/log', component: LOG, name: '系统日志' },
// { path: '/department', component: Department, name: '部门管理' },
... ...
<template>
<el-container>
<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="5">
<el-form-item label="航班号">
<el-input v-model="formInline.user" placeholder="请输入航班号"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item>
<el-select v-model="formInline.value" placeholder="航班操作" style="margin-left: 50px">
<el-option
v-for="item in options"
: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="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="运单号">
<template slot-scope="scope">{{ scope.row.date }}</template>
</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>
<div style="margin-top:5px;margin-left: 1000px">
<el-button type="primary" >配上</el-button>
<el-button type="success" @click="dialogFormVisible = true">新增</el-button>
<el-button type="warning" @click="dialogFormsVisible = true">导入</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 label="运单号" :label-width="formLabelWidth">
<el-input v-model="form.name" 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.name" 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.name" 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.name" 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.name" 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.region" 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.name" 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.name" 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.name" 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.name" 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>
<el-dialog title="批量导入" :visible.sync="dialogFormsVisible">
<el-form :model="form1" >
<el-row>
<el-col :span="5">
<el-form-item>
<el-form-item label="ULD" :label-width="formsLabelWidths">
<el-input v-model="form1.name" autocomplete="off"></el-input>
</el-form-item>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-dialog>
</el-row>
<!-- 表单区域②-->
<el-row>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
label="ULD类型">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="件数">
</el-table-column>
<el-table-column
prop="address"
label="机仓位">
</el-table-column>
</el-table>
<div style="margin-top:5px;margin-left: 1000px">
<el-button type="primary" >拉下</el-button>
<el-button type="success" @click="dialogFormVisibles = true">新增</el-button>
<el-button type="danger" >删除</el-button>
</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.name" 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.name" 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.region" 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.region" 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.region" 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: {
user: '',
value: ''
},
tableData:[],
multipleSelection: [],
options: [{
value: '操作1',
label: '操作1'
}, {
value: '操作2',
label: '操作2'
}],
dialogFormVisible: false,
dialogFormVisibles: false,
dialogFormsVisible: false,
form: {},
form1: {},
forms: {},
formLabelWidth: '120px',
formLabelWidths: '120px',
}
},
methods: {
onSubmit() {
console.log('submit!');
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
}
</script>
\ No newline at end of file
<template>
<section>page5...
</section>
</template>
\ No newline at end of file
<template>
<el-container>
<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="5">
<el-form-item label="航班号">
<el-input v-model="formInline.flightNo" placeholder="请输入航班号"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item>
<el-button 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">
<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="width: 100%"
@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="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="assembling"
label="装配件数">
</el-table-column>
<el-table-column
prop="stowage"
label="配载重量">
</el-table-column>
</el-table>
<div style="margin-top:5px;margin-left: 20px">
<el-button @click="dialogFormVisible = true">待运导入</el-button>
<el-button>装箱</el-button>
<el-button>部分装箱</el-button>
<el-button>放散舱</el-button>
<el-button>部分放散舱</el-button>
<el-button @click="dialogTableVisible = true">正式舱单</el-button>
<el-button>地勤交接</el-button>
<el-button @click="dialogFormVisible3 = true">转配</el-button>
<el-button>航班文件</el-button>
<el-button type="primary" >散货配上</el-button>
<el-button type="success">卸下</el-button>
<el-button 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="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="assembling"
label="装配件数">
</el-table-column>
<el-table-column
prop="stowage"
label="配载重量">
</el-table-column>
</el-table>
</el-row>
<div style="margin-left: 970px">
<el-button type="primary">板箱配上</el-button>
<el-button type="success">卸下</el-button>
</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>
\ No newline at end of file
... ...
<template>
<el-container>
<el-main>
<el-row>
<el-col :span="24">
<div class="grid-content content">收费处理</div>
</el-col>
</el-row>
<!-- 两个表单区域-->
<el-row>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="计费" name="first">
<el-form ref="form" :model="form" label-width="80px">
<el-row>
<el-col :span="6">
<el-form-item label="运单号">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="">
<el-button @click="">挑单</el-button>
<el-button @click="">批量挑单</el-button>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="结算客户">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="付款方式" :label-width="formLabelWidth">
<el-select v-model="form.waybillNo" placeholder="请选择">
<el-option label="方式一" value="yi"></el-option>
<el-option label="方式二" value="er"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-table
:data="tableData"
style="width: 100%"
row-key="id"
border
lazy
:load="load"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<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="超重费">
</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="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="address"
label="收/发货人">
</el-table-column>
</el-table>
</el-row>
<div>
<el-button @click="">清除</el-button>
<el-button @click="">核对并现结结算</el-button>
<el-button @click="">导出</el-button>
<el-button @click="">打印</el-button>
</div>
</el-form>
</el-tab-pane>
<el-tab-pane label="已结算" name="second">已结算</el-tab-pane>
</el-tabs>
</el-row>
</el-main>
</el-container>
</template>
<script>
export default {
data() {
return {
form: {
},
activeName: 'first',
tableData:[],
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
... ...
<template>
<el-container>
<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="5">
<el-form-item label="航班号">
<el-input v-model="formInline.flightNo" placeholder="请输入航班号"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item>
<el-button 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">
<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-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="舱单" name="first">
<el-table
:data="tableData"
style="width: 100%"
row-key="id"
border
lazy
:load="load"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<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-column
prop="stowageVol"
label="配载体积">
</el-table-column>
<el-table-column
prop="code"
label="特殊处理代码">
</el-table-column>
<el-table-column
prop="productName"
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="priority"
label="优先级">
</el-table-column>
<el-table-column
prop="remarks"
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-form ref="form" :model="form" label-width="80px">
<el-row>
<el-col :span="6">
<el-form-item label="ULD类别">
<el-select v-model="form.type" placeholder="请选择">
<el-option label="ULD" value="ULD"></el-option>
<el-option label="其他" value="其他"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="ULD号">
<el-input v-model="form.uldNo"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="">
<el-button>添加ULD</el-button>
<el-button>清空ULD</el-button>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="运单号">
<el-input v-model="form.waybillNo"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="件数">
<el-input v-model="form.number"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="重量">
<el-input v-model="form.weight"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="配载件数">
<el-input v-model="form.assembling"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="配载重量">
<el-input v-model="form.stowage"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="配载体积">
<el-input v-model="form.stowageVol"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="特货代码">
<el-input v-model="form.code"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="品名">
<el-input v-model="form.productName"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="始发站">
<el-input v-model="form.departure"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="目的站">
<el-input v-model="form.destination"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="优先级">
<el-select v-model="form.priority" placeholder="请选择">
<el-option label="一" value="一"></el-option>
<el-option label="二" value="二"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="备注">
<el-input v-model="form.remarks"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
</el-tabs>
<div>
<el-button>导入舱单</el-button>
<el-button>舱单保存</el-button>
<el-button>发送FFM</el-button>
<el-button>发送H2000舱单报</el-button>
<el-button>不正常检查</el-button>
<el-button @click="dialogTableVisible = true">打印</el-button>
<el-button>打印标签</el-button>
</div>
</el-row>
<!-- 航班文件 打印按钮-->
<el-row>
<el-dialog title="打印" :visible.sync="dialogTableVisible">
<el-tabs v-model="activeName1" @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-main>
</el-container>
</template>
<script>
export default {
data() {
return {
formInline: {
flightNo: undefined,
operation: undefined
},
form: {
type:undefined,
uldNo:undefined,
waybillNo:undefined,
number:undefined,
weight:undefined,
assembling:undefined,
stowage:undefined,
stowageVol:undefined,
code:undefined,
productName:undefined,
departure:undefined,
destination:undefined,
priority:undefined,
remarks:undefined,
},
tableData:[],
tableData1:[],
dialogTableVisible: false,
dialogTableVisible1: false,
activeName: 'first',
activeName1: 'first',
};
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
... ...
<template>
<el-container>
<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="5">
<el-form-item label="航班号">
<el-input v-model="formInline.flightNo" placeholder="请输入航班号"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item>
<el-button 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">
<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="width: 100%"
@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:5px;margin-left: 1000px">
<el-button type="primary" >配上</el-button>
<el-button type="success" @click="dialogFormVisible = true">新增</el-button>
<el-button type="warning" @click="dialogForm1Visible = true">导入</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 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="width: 100%"
@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:5px;margin-left: 1000px">
<el-button type="primary" >拉下</el-button>
<el-button type="success" @click="dialogFormVisibles = true">新增</el-button>
<el-button type="danger" >删除</el-button>
</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>
\ No newline at end of file
... ...
<template>
<div class="bg order">
<span class="air">空运服务-订舱确认</span>
<div class="px">
<!-- 发件人信息-->
<h4 class="title">发件人信息</h4>
<div class="r-table">
<table class="tb" width="100%">
<tbody>
<tr>
<th width="15%">姓名</th>
<td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
<th width="15%">联系电话</th>
<td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
<th width="15%">公司</th>
<td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
</tr>
<tr>
<th width="15%">税号</th>
<td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
<th width="15%">邮编</th>
<td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
<th width="15%">省市区</th>
<td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
</tr>
<tr>
<th colspan="1">详细地址</th>
<td colspan="5"><el-input v-model="input" placeholder="" ></el-input></td>
</tr>
</tbody>
</table>
</div>
<!-- 收件人信息-->
<h4 class="title">收件人信息</h4>
<div class="r-table">
<table class="tb" width="100%">
<tbody>
<tr>
<th width="15%">姓名</th>
<td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
<th width="15%">联系电话</th>
<td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
<th width="15%">公司</th>
<td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
</tr>
<tr>
<th width="15%">邮箱</th>
<td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
<th width="15%">身份证/护照</th>
<td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
<th width="15%">税号</th>
<td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
</tr>
<tr>
<th width="15%">国家</th>
<td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
<th width="15%">省/州</th>
<td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
<th width="15%">城市</th>
<td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
</tr>
<tr>
<th colspan="1">详细地址</th>
<td colspan="5"><el-input v-model="input" placeholder="" ></el-input></td>
</tr>
<tr>
<th colspan="1">邮编</th>
<td colspan="5"><el-input v-model="input" placeholder="" ></el-input></td>
</tr>
</tbody>
</table>
</div>
<!-- 货件信息-->
<h4 class="title">货件信息</h4>
<div class="r-table">
<table class="tb" width="100%">
<tbody>
<tr>
<th width="15%">客户单号</th>
<td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
<th width="15%">总件数</th>
<td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
<th width="15%">总重量(kg)</th>
<td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
</tr>
<tr>
<th width="15%">总体积(m³)</th>
<td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
<th width="15%">包裹</th>
<td width="18%">
<el-input v-model="input" placeholder="长" style="width: 60px" ></el-input>×
<el-input v-model="input" placeholder="宽" style="width: 60px" ></el-input>×
<el-input v-model="input" placeholder="高" style="width: 60px" ></el-input>
</td>
<th width="15%">是否退件</th>
<td width="18%">
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</td>
</tr>
<tr>
<th width="15%">运输方式</th>
<td width="18%">
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</td>
<th width="15%">是否带电</th>
<td width="18%">
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</td>
<th width="15%">运费付款方式</th>
<td width="18%">
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</td>
</tr>
<tr>
<th width="15%">税金支付方式</th>
<td width="18%">
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</td>
<th width="15%">一般贸易报关出口</th>
<td width="18%">
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</td>
<th width="15%">一般贸易报关进口</th>
<td width="18%">
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</td>
</tr>
<tr>
<th colspan="1">贸易条款</th>
<td colspan="1"><el-input v-model="input" placeholder="" ></el-input></td>
<th colspan="1">出口原因</th>
<td colspan="6">
<el-select v-model="value" placeholder="请选择" style="width: 100%">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</td>
</tr>
<tr>
<th colspan="1">商业发票备注</th>
<td colspan="5"><el-input v-model="input" placeholder="" ></el-input></td>
</tr>
</tbody>
</table>
</div>
<!-- 货物信息-->
<h4 class="title">货物信息</h4>
<div class="r-table order">
<table class="tb" width="100%">
<tbody>
<tr>
<th width="9%">中文名</th>
<th width="13%">英文名</th>
<th width="9%">材质</th>
<th width="9%">申报价值(单价)</th>
<th width="5%">数量</th>
<th width="9%">申报价值(总价)</th>
<th width="9%">原产地</th>
<th width="9%">海关货物编号</th>
<th width="9%">配货名称</th>
<th width="12%">配货备注</th>
<th width="7%">操作</th>
</tr>
<tr>
<td width="9%"><el-input v-model="input" placeholder="" ></el-input></td>
<td width="13%"><el-input v-model="input" placeholder="" ></el-input></td>
<td width="9%"><el-input v-model="input" placeholder="" ></el-input></td>
<td width="9%"><el-input v-model="input" placeholder="" ></el-input></td>
<td width="5%"><el-input v-model="input" placeholder="" ></el-input></td>
<td width="9%"><el-input v-model="input" placeholder="" ></el-input></td>
<td width="9%"><el-input v-model="input" placeholder="" ></el-input></td>
<td width="9%"><el-input v-model="input" placeholder="" ></el-input></td>
<td width="9%"><el-input v-model="input" placeholder="" ></el-input></td>
<td width="12%"><el-input v-model="input" placeholder="" ></el-input></td>
<td width="7%" style="text-align: center">
<el-button icon="el-icon-plus" size="mini" circle></el-button>
<el-button icon="el-icon-minus" size="mini" circle></el-button>
</td>
</tr>
</tbody>
</table>
</div>
<div style="text-align: center;margin-top: 30px">
<el-button type="danger" style="width: 180px;height: 50px">确认下单</el-button>
</div>
<div style="margin-top: 50px;height: 80px"> </div>
</div>
</div>
</template>
<script>
export default {
name: "airlift"
}
</script>
<style scoped>
.bg{
background-color: #F2F2F2;
}
.air{
font-size: 20px;
color: #308aee;
margin-top: 20px;
display: block;
}
.px{
background-color: #FFFFFF;
width: 100%;
height: 500px;
}
.title{
color: #127ef2;
font-size: 16px;
font-weight: bold;
margin: 20px 30px;
text-align: left;
}
.r-table .tb > tbody > tr > th {
background-color: #d8ecff;
text-align: center;
}
.r-table .tb > tbody > tr > td {
/*padding: 4px; （间接决定了行高）*/
/*display: table-cell;*/
}
</style>
... ...
<template>
<div class="bg">
<el-container>
<!-- 顶栏区域-->
<el-header style="height: 120px">
<el-row class="header">
<el-col :span="9">
<span style="font-size: 50px">KT际通</span>
<span>在线订舱平台</span>
</el-col>
<el-col :span="13" style="margin-left: 30px;margin-top: 30px;width: 300px ">
<el-menu :default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
style="text-color:#303133;active-text-color:#FFF">
<el-menu-item index="1">首 页</el-menu-item>
<el-menu-item index="2">行业方案</el-menu-item>
<el-menu-item index="3">关于我们</el-menu-item>
</el-menu>
</el-col>
</el-row>
</el-header>
<!-- 主要区域-->
<el-main>
<!-- 空运查询内容-->
<el-row style="margin-top: 30px">
<el-col :span="10" style="margin-right: 10px;background-color: #FFF;">
<div style="height: 600px;">
<div style="width: 100%;height: 80px;border-bottom: solid 2px #29A1F7;">
<el-col :span="15" style="margin-left: 0px;margin-top: 20px;">
<span style="font-size: 25px;margin-left: 50px">空运查询</span>
</el-col>
<el-col :span="8" style="margin-top: 23px;">
<span style="font-size: 17px">约计3000条航线数据</span>
</el-col>
</div>
<el-row>
<el-form ref="form" :model="form" label-width="80px" style="font-size: 50px;" >
<el-form-item label="航程方向" >
<el-radio-group v-model="form.resource">
<el-radio style="padding-left: 20px" label="出口"></el-radio>
<el-radio label="进口"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="起运地">
<el-select style="width: 320px" v-model="form.region" placeholder="起运地">
<el-option label="上海" value="shanghai"></el-option>
<el-option label="北京" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="目的地">
<el-select style="width: 320px" v-model="form.region" placeholder="目的地">
<el-option label="上海" value="shanghai"></el-option>
<el-option label="北京" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="货物重量">
<el-input style="width: 320px" v-model="form.name" placeholder="单位：KG"></el-input>
</el-form-item>
<div style="padding-left: 150px">
<el-button style="background-color: #F18F4C;color: #FFF">查价下单</el-button>
</div>
</el-form>
<div style="width: 100%;height: 200px;margin-top: 30px;padding-left: 50px;border-top: dashed 2px #D5D5D5;">
<p>
<span><i class="el-icon-phone" style="color: #29A1F7;padding-right: 5px"></i>一键订舱，方便快捷</span>
</p>
<p>
<span><i class="el-icon-edit-outline" style="color: #29A1F7;padding-right: 5px"></i>数据准确，专有团队维护</span>
</p>
<span><i class="el-icon-location-information" style="color: #29A1F7;padding-right: 5px"></i>货物在线跟踪</span>
</div>
</el-row>
</div>
</el-col>
<!-- 广告位-->
<el-col :span="13" style="margin-right: 0px;background-color: rgba(41,161,247,0.1);float: right;">
<div style="height: 600px;">
</div>
</el-col>
</el-row>
<!-- 优价航线标题栏-->
<el-row style="margin-top: 30px">
<span style="font-size: 25px">优价航线</span>
</el-row>
<!-- 优价航线内容-->
<el-row style="background-color: #FFF;height: 300px;">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="a"
label="航行路线">
</el-table-column>
<el-table-column
prop="b"
label="运输时效">
</el-table-column>
<el-table-column
prop="c"
label="交货地">
</el-table-column>
<el-table-column
prop="d"
label="航班周期">
</el-table-column>
<el-table-column
prop="e"
label="最低价格">
</el-table-column>
<el-table-column
fixed="right"
label=""
width="120">
<template slot-scope="scope">
<el-button
size="small" plain
type="warning"
@click="">订舱</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
<!-- 热门航线标题栏-->
<el-row style="margin-top: 30px">
<span style="font-size: 25px">热门航线</span>
</el-row>
<!-- 热门航线内容-->
<el-row style="background-color: #FFF;height: 680px;">
<el-col :span="24">
<el-tabs type="border-card" style="width: 100%;height: 680px" stretch="true">
<el-tab-pane>
<span slot="label"><i class="el-icon-right"></i>出口航线</span>
<el-row style="height: 300px;margin-top: 0px">
<el-col :span="8"
style="border-right:solid 1px #F5F5F5;border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">
<h2>CZ</h2>
<el-table
:data="tableData1"
:header-cell-style="headClass"
:cell-style="rowClass"
style="width: 100%;background-color: #F5F5F5">
<el-table-column
prop="a"
label="航段">
</el-table-column>
<el-table-column
prop="b"
label="时效">
</el-table-column>
<el-table-column
prop="c"
label="周期">
</el-table-column>
<el-table-column
prop="d"
label="航运价">
</el-table-column>
</el-table>
<div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
<div style="text-align: center;margin-top: 6px">
<el-button type="warning" plain style="width: 120px" >订舱</el-button>
</div>
</el-col>
<el-col :span="8"
style="border-right:solid 1px #F5F5F5;border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">
<h2>CZ</h2>
<el-table
:data="tableData1"
:header-cell-style="headClass"
:cell-style="rowClass"
style="width: 100%;background-color: #F5F5F5">
<el-table-column
prop="a"
label="航段">
</el-table-column>
<el-table-column
prop="b"
label="时效">
</el-table-column>
<el-table-column
prop="c"
label="周期">
</el-table-column>
<el-table-column
prop="d"
label="航运价">
</el-table-column>
</el-table>
<div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
<div style="text-align: center;margin-top: 6px">
<el-button type="warning" plain style="width: 120px" >订舱</el-button>
</div>
</el-col>
<el-col :span="8"
style="border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%">
<h2>CZ</h2>
<el-table
:data="tableData1"
:header-cell-style="headClass"
:cell-style="rowClass"
style="width: 100%;background-color: #F5F5F5">
<el-table-column
prop="a"
label="航段">
</el-table-column>
<el-table-column
prop="b"
label="时效">
</el-table-column>
<el-table-column
prop="c"
label="周期">
</el-table-column>
<el-table-column
prop="d"
label="航运价">
</el-table-column>
</el-table>
<div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
<div style="text-align: center;margin-top: 6px">
<el-button type="warning" plain style="width: 120px" >订舱</el-button>
</div>
</el-col>
</el-row>
<el-row style="height: 300px;margin-top: 0px">
<el-col :span="8"
style="border-right:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">
<h2>CZ</h2>
<el-table
:data="tableData1"
:header-cell-style="headClass"
:cell-style="rowClass"
style="width: 100%;background-color: #F5F5F5">
<el-table-column
prop="a"
label="航段">
</el-table-column>
<el-table-column
prop="b"
label="时效">
</el-table-column>
<el-table-column
prop="c"
label="周期">
</el-table-column>
<el-table-column
prop="d"
label="航运价">
</el-table-column>
</el-table>
<div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
<div style="text-align: center;margin-top: 6px">
<el-button type="warning" plain style="width: 120px" >订舱</el-button>
</div>
</el-col>
<el-col :span="8"
style="border-right:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">
<h2>CZ</h2>
<el-table
:data="tableData1"
:header-cell-style="headClass"
:cell-style="rowClass"
style="width: 100%;background-color: #F5F5F5">
<el-table-column
prop="a"
label="航段">
</el-table-column>
<el-table-column
prop="b"
label="时效">
</el-table-column>
<el-table-column
prop="c"
label="周期">
</el-table-column>
<el-table-column
prop="d"
label="航运价">
</el-table-column>
</el-table>
<div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
<div style="text-align: center;margin-top: 6px">
<el-button type="warning" plain style="width: 120px" >订舱</el-button>
</div>
</el-col>
<el-col :span="8"
style="height: 300px;width: 32%">
<h2>CZ</h2>
<el-table
:data="tableData1"
:header-cell-style="headClass"
:cell-style="rowClass"
style="width: 100%;background-color: #F5F5F5">
<el-table-column
prop="a"
label="航段">
</el-table-column>
<el-table-column
prop="b"
label="时效">
</el-table-column>
<el-table-column
prop="c"
label="周期">
</el-table-column>
<el-table-column
prop="d"
label="航运价">
</el-table-column>
</el-table>
<div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
<div style="text-align: center;margin-top: 6px">
<el-button type="warning" plain style="width: 120px" >订舱</el-button>
</div>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="进口航线">
<span slot="label"><i class="el-icon-back"></i>进口航线</span>
</el-tab-pane>
<el-tab-pane label="空运专线">
<span slot="label"><i class="el-icon-star-off"></i>空运专线</span>
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
<!-- 热门港口标题栏-->
<el-row style="margin-top: 30px">
<span style="font-size: 25px">热门港口</span>
</el-row>
<!-- 热门港口内容-->
<el-row style="background-color: #FFF;height: 300px;padding: 25px">
<el-col :span="24">
<el-tabs :tab-position="tabPosition" style="width: 100%;height: 280px;">
<el-tab-pane label="北京">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="a"
label="航行路线">
</el-table-column>
<el-table-column
prop="b"
label="运输时效">
</el-table-column>
<el-table-column
prop="c"
label="交货地">
</el-table-column>
<el-table-column
prop="d"
label="航班周期">
</el-table-column>
<el-table-column
fixed="right"
label=""
width="120">
<template slot-scope="scope">
<el-button
size="small" plain
type="warning"
@click="">订舱</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="上海">上海</el-tab-pane>
<el-tab-pane label="深圳">深圳</el-tab-pane>
<el-tab-pane label="广州">广州</el-tab-pane>
<el-tab-pane label="宁波">宁波</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
<!-- 查询工具-->
<el-row style="background-color: #FFF;height: 180px;margin-top: 60px">
<el-col :span="24">
<el-tabs :tab-position="tabPositions" style="width: 80%;height: 280px;margin: 20px">
<el-tab-pane label="机场代码查询">
<span style="font-size: 25px">机场代码查询</span>
<span style="font-size: 15px">（收录2016年IATA最新机场三字代码、城市三字代码。）</span>
<el-input v-model="input" placeholder="请输入内容"></el-input>
</el-tab-pane>
<el-tab-pane label="商品编码查询">
<span style="font-size: 25px">商品编码查询</span>
<span style="font-size: 15px">（提供海关HScode编码、对应税率、申报要素查询服务，根据海关最新政策实时更新。）</span>
<el-input v-model="input" placeholder="请输入内容"></el-input>
</el-tab-pane>
<el-tab-pane label="全球港口查询">
<span style="font-size: 25px">全球港口查询</span>
<span style="font-size: 15px">（收录2016年IATA最新机场三字代码、城市三字代码。）</span>
<el-input v-model="input" placeholder="请输入内容"></el-input>
</el-tab-pane>
<el-tab-pane label="空运货物查询">
<span style="font-size: 25px">空运货物查询</span>
<span style="font-size: 15px">（提供世界各国航空公司货物追踪、货物查询服务，实时追踪最新货况。）</span>
<el-input v-model="input" placeholder="请输入内容"></el-input>
</el-tab-pane>
<el-tab-pane label="快件跟踪查询">
<span style="font-size: 25px">快件跟踪查询</span>
<span style="font-size: 15px"></span>
<el-input v-model="input" placeholder="请输入内容"></el-input>
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
</el-main>
</el-container>
</div>
</template>
<script>
export default {
data() {
return {
form: {},
tableData:[
{
a: 'PEK- FRA',
b: '2-3 天',
c: 'BEIJING AIRPORT',
d: '1234567',
e: '￥ 23.50/kg 起',
},
{
a: 'PEK- FRA',
b: '2-3 天',
c: 'BEIJING AIRPORT',
d: '1234567',
e: '￥ 23.50/kg 起',
},
{
a: 'PEK- FRA',
b: '2-3 天',
c: 'BEIJING AIRPORT',
d: '1234567',
e: '￥ 23.50/kg 起',
},
],
tableData1:[
{
a: 'PEK- FRA',
b: '2-3 天',
c: '1234567',
d: '$34.00/kg起',
},
],
tabPosition: 'left',
tabPositions: 'bottom',
}
},
methods: {
headClass () {
return 'text-align: center;background:#F5F5F5;'
},
rowClass () {
return 'text-align: center;background:#F5F5F5;'
}
},
}
</script>
<style scoped>
.bg{
background-color: #F2F2F2;
}
.header{
font-size: 20px;
line-height: 120px;
color:#FFF;
}
.el-header{
background-color: #29A1F7;
}
.el-tabs{
width: 250px;
}
.el-menu{
background-color: #29A1F7;
font-size: 20px;
border-bottom-color: #29A1F7;
}
</style>
\ No newline at end of file
... ...
<template>
<el-container>
<el-main style="background-color: #EAEAEA">
<!-- 航班号查询-->
<el-row style="height: 180px">
<el-col :span="24">
<el-row>
<p style="font-size: 28px">航班号查询</p>
</el-row>
<el-row>
<el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-row>
</el-col>
</el-row>
<!-- 条件查询-->
<el-row style="">
<el-col :span="24">
<el-row>
<p style="font-size: 28px">条件查询</p>
</el-row>
<el-row>
<el-tabs v-model="activeName" @tab-click="handleClick" style="width: 100%">
<el-tab-pane label="国内出港" name="first">
<div style=";margin-top: 15px">
<el-time-picker
v-model="value1"
:picker-options="{selectableRange: '18:30:00 - 20:30:00' }"
placeholder="任意时间点"
style="width: 140px">
</el-time-picker>
<el-time-picker
arrow-control
v-model="value2"
:picker-options="{selectableRange: '18:30:00 - 20:30:00' }"
placeholder="任意时间点"
style="width: 140px">
</el-time-picker>
<el-select v-model="value" placeholder="目的地" style="width: 140px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="value" placeholder="航空公司" style="width: 140px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button type="primary">点击查询</el-button>
</div>
<el-row style="margin-top: 15px">
<el-col :span="23">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop=""
label="计划离港">
</el-table-column>
<el-table-column
prop=""
label="航班号">
</el-table-column>
<el-table-column
prop=""
label="航空公司">
</el-table-column>
<el-table-column
prop=""
label="目的地">
</el-table-column>
<el-table-column
prop=""
label="预计/实际离港">
</el-table-column>
<el-table-column
prop=""
label="状态">
</el-table-column>
<el-table-column
prop=""
label="航站楼">
</el-table-column>
</el-table>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="国际/地区出港" name="second">
<div style=";margin-top: 15px">
<el-time-picker
v-model="value1"
:picker-options="{selectableRange: '18:30:00 - 20:30:00' }"
placeholder="任意时间点"
style="width: 140px">
</el-time-picker>
<el-time-picker
arrow-control
v-model="value2"
:picker-options="{selectableRange: '18:30:00 - 20:30:00' }"
placeholder="任意时间点"
style="width: 140px">
</el-time-picker>
<el-select v-model="value" placeholder="目的地" style="width: 140px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="value" placeholder="航空公司" style="width: 140px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button type="primary">点击查询</el-button>
</div>
<el-row style="margin-top: 15px">
<el-col :span="23">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop=""
label="计划离港">
</el-table-column>
<el-table-column
prop=""
label="航班号">
</el-table-column>
<el-table-column
prop=""
label="航空公司">
</el-table-column>
<el-table-column
prop=""
label="目的地">
</el-table-column>
<el-table-column
prop=""
label="预计/实际离港">
</el-table-column>
<el-table-column
prop=""
label="状态">
</el-table-column>
<el-table-column
prop=""
label="航站楼">
</el-table-column>
</el-table>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="国内到港" name="third">
<div style=";margin-top: 15px">
<el-time-picker
v-model="value1"
:picker-options="{selectableRange: '18:30:00 - 20:30:00' }"
placeholder="任意时间点"
style="width: 140px">
</el-time-picker>
<el-time-picker
arrow-control
v-model="value2"
:picker-options="{selectableRange: '18:30:00 - 20:30:00' }"
placeholder="任意时间点"
style="width: 140px">
</el-time-picker>
<el-select v-model="value" placeholder="目的地" style="width: 140px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="value" placeholder="航空公司" style="width: 140px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button type="primary">点击查询</el-button>
</div>
<el-row style="margin-top: 15px">
<el-col :span="23">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop=""
label="计划离港">
</el-table-column>
<el-table-column
prop=""
label="航班号">
</el-table-column>
<el-table-column
prop=""
label="航空公司">
</el-table-column>
<el-table-column
prop=""
label="目的地">
</el-table-column>
<el-table-column
prop=""
label="预计/实际离港">
</el-table-column>
<el-table-column
prop=""
label="状态">
</el-table-column>
<el-table-column
prop=""
label="航站楼">
</el-table-column>
</el-table>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="国际/地区到港" name="fourth">
<div style=";margin-top: 15px">
<el-time-picker
v-model="value1"
:picker-options="{selectableRange: '18:30:00 - 20:30:00' }"
placeholder="任意时间点"
style="width: 140px">
</el-time-picker>
<el-time-picker
arrow-control
v-model="value2"
:picker-options="{selectableRange: '18:30:00 - 20:30:00' }"
placeholder="任意时间点"
style="width: 140px">
</el-time-picker>
<el-select v-model="value" placeholder="目的地" style="width: 140px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="value" placeholder="航空公司" style="width: 140px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button type="primary">点击查询</el-button>
</div>
<el-row style="margin-top: 15px">
<el-col :span="23">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop=""
label="计划离港">
</el-table-column>
<el-table-column
prop=""
label="航班号">
</el-table-column>
<el-table-column
prop=""
label="航空公司">
</el-table-column>
<el-table-column
prop=""
label="目的地">
</el-table-column>
<el-table-column
prop=""
label="预计/实际离港">
</el-table-column>
<el-table-column
prop=""
label="状态">
</el-table-column>
<el-table-column
prop=""
label="航站楼">
</el-table-column>
</el-table>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
</el-row>
<el-row>
<div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</el-row>
</el-col>
</el-row>
</el-main>
</el-container>
</template>
<script>
export default {
data() {
return {
currentPage4: 4,
activeName: 'first'
};
},
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
}
</script>
<style scoped>
.input-with-select{
width: 450px;
}
.el-row{
margin-left: 10px;
width: 98%;
background-color: #FFFFFF;
}
</style>
\ No newline at end of file
... ...
<template>
<div class="bg order">
<span class="air">空运服务-订舱确认</span>
<div class="px">
<!-- 下单信息-->
<h4 class="title">下单信息</h4>
<div class="r-table">
<table class="tb">
<tbody>
<tr>
<th width="10%">航空公司</th>
<td width="10%">LH</td>
<th width="10%">起运机场</th>
<td width="10%">北京</td>
<th width="10%">目的机场</th>
<td width="10%">法兰克福</td>
<th width="10%">下单重量(KG)</th>
<td width="10%"><el-input v-model="input" placeholder="" size="mini"></el-input></td>
<th width="10%">运价单价</th>
<td width="10%">CNY 23.50/KG</td>
</tr>
<tr>
<th>报关方式</th>
<td colspan="4">
<el-radio v-model="radio" label="1">自理报关</el-radio>
<el-radio v-model="radio" label="2">委托报关</el-radio>
</td>
<th rowspan="4">附加费</th>
<td colspan="3">操作费： CNY 0.00/票</td>
<td><el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="">
</el-input-number></td>
</tr>
<tr>
<th rowspan="3">门到门服务</th>
<td colspan="4"><el-checkbox v-model="checked">上门提货</el-checkbox></td>
<td colspan="3">制单费： CNY 50.00/票</td>
<td><el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="">
</el-input-number></td>
</tr>
<tr>
<td colspan="4" rowspan="2"><el-checkbox v-model="checked">清关派送</el-checkbox></td>
<td colspan="3">订舱预录费： CNY 30.00 /票</td>
<td><el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="">
</el-input-number></td>
</tr>
<tr>
<td colspan="4">地面操作费： CNY 0/KG</td>
</tr>
<tr>
<th>预估费用</th>
<td colspan="3">运费：CNY 23500.00 (最低100.00KG 起运)</td>
<td colspan="3">附加费：CNY 230.00</td>
<td colspan="3"> 共计：CNY 23730.00</td>
</tr>
</tbody>
</table>
</div>
<!-- 货物信息-->
<h4 class="title">货物信息</h4>
<div class="r-table">
<table class="tb" width="100%">
<tbody>
<tr>
<th width="35%">*是否有电池、液体、粉末、磁性及其它违禁物品</th>
<td width="15%">
<el-radio v-model="radio1" label="1">是</el-radio>
<el-radio v-model="radio1" label="2">否</el-radio></td>
<th width="35%">*是否购买保险</th>
<td width="15%">
<el-radio v-model="radio4" label="1">是</el-radio>
<el-radio v-model="radio4" label="2">否</el-radio></td>
</tr>
<tr>
<th width="35%">*是否超长托盘</th>
<td width="15%">
<el-radio v-model="radio1" label="1">是</el-radio>
<el-radio v-model="radio1" label="2">否</el-radio></td>
<th width="35%">*是否名牌</th>
<td width="15%">
<el-radio v-model="radio4" label="1">是</el-radio>
<el-radio v-model="radio4" label="2">否</el-radio></td>
</tr>
</tbody>
</table>
<table class="tb" style="margin-top: 10px;width: 100%">
<tbody>
<tr>
<th width="20%">中文品名</th>
<th width="20%">英文品名</th>
<th width="10%">*数量(件)</th>
<th width="10%">*实重（KG）</th>
<th width="10%">*总体积（CBM）</th>
<th width="20%">最大尺寸(长x宽x高)</th>
<th width="10%">操作</th>
</tr>
<tr>
<td><el-input v-model="input" placeholder="" size="mini"></el-input></td>
<td><el-input v-model="input" placeholder="" size="mini"></el-input></td>
<td><el-input v-model="input" placeholder="" size="mini"></el-input></td>
<td><el-input v-model="input" placeholder="" size="mini"></el-input></td>
<td><el-input v-model="input" placeholder="" size="mini"></el-input></td>
<td><el-input v-model="input" placeholder="" size="mini"></el-input></td>
<td><el-button icon="el-icon-plus" size="mini" circle></el-button>
<el-button icon="el-icon-minus" size="mini" circle></el-button></td>
</tr>
</tbody>
</table>
</div>
<!-- 收发件通知人信息-->
<div class="r-table" style="margin-top: 35px">
<el-collapse v-model="activeNames" @change="handleChange" class="col">
<el-collapse-item title="发件人信息" name="1">
<table class="tb" width="100%">
<tbody>
<tr>
<th width="15%">姓名</th>
<td width="35%"><el-input v-model="input" placeholder="" ></el-input></td>
<th width="15%">联系电话</th>
<td width="35%"><el-input v-model="input" placeholder="" ></el-input></td>
</tr>
<tr>
<th colspan="1">公司</th>
<td colspan="3"><el-input v-model="input" placeholder="" ></el-input></td>
</tr>
<tr>
<th colspan="1">详细地址 </th>
<td colspan="3"><el-input v-model="input" placeholder="" ></el-input></td>
</tr>
</tbody>
</table>
</el-collapse-item>
<el-collapse-item title="收件人信息" name="2" class="father">
<div class="relative">
<el-button type="text" @click="dialogTableVisible = true">收件地址库</el-button>
<el-checkbox v-model="checked1" style="margin-left: 20px">加入地址库</el-checkbox>
</div>
<table class="tb" width="100%">
<tbody>
<tr>
<th width="15%">姓名</th>
<td width="35"><el-input v-model="input" placeholder="" ></el-input></td>
<th width="15%">联系电话</th>
<td width="35%"><el-input v-model="input" placeholder="" ></el-input></td>
</tr>
<tr>
<th colspan="1">公司</th>
<td colspan="3"><el-input v-model="input" placeholder="" ></el-input></td>
</tr>
<tr>
<th colspan="1">详细地址</th>
<td colspan="3"><el-input v-model="input" placeholder="" ></el-input></td>
</tr>
<tr>
<th colspan="1">特殊信息</th>
<td colspan="3"><el-input v-model="input" placeholder="" ></el-input></td>
</tr>
</tbody>
</table>
</el-collapse-item>
<el-collapse-item title="通知人信息" name="3" class="father">
<div class="relative"><el-checkbox v-model="checked">同收件人</el-checkbox></div>
<table class="tb" width="100%">
<tbody>
<tr>
<th width="15%">姓名</th>
<td width="35%"><el-input v-model="input" placeholder="" ></el-input></td>
<th width="15%">联系电话</th>
<td width="35%"><el-input v-model="input" placeholder="" ></el-input></td>
</tr>
<tr>
<th colspan="1">公司</th>
<td colspan="3"><el-input v-model="input" placeholder="" ></el-input></td>
</tr>
<tr>
<th colspan="1">详细地址</th>
<td colspan="3"><el-input v-model="input" placeholder="" ></el-input></td>
</tr>
<tr>
<th colspan="1">特殊信息</th>
<td colspan="3"><el-input v-model="input" placeholder="" ></el-input></td>
</tr>
</tbody>
</table>
</el-collapse-item>
</el-collapse>
</div>
<div style="text-align: center;margin-top: 30px">
<el-button type="danger" style="width: 180px;height: 50px">确认下单</el-button>
</div>
<div style="margin-top: 50px;height: 80px"> </div>
</div>
<!-- 收件地址库弹框-->
<div>
<el-dialog title="请选择收件人" :visible.sync="dialogTableVisible">
<el-table :data="gridData">
<el-table-column property="date" label="姓名" width="150"></el-table-column>
<el-table-column property="name" label="电话" width="200"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
</el-table>
<div style="margin-top: 10px;text-align: right">
<el-button>取消</el-button>
<el-button type="primary">请选择收件人</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
export default {
data() {
return{
num: 1,
radio: '',
radio1: '',
radio2: '',
radio3: '',
radio4: '',
dialogTableVisible:false,
}
}
}
</script>
<style scoped>
.bg{
background-color: #F2F2F2;
}
.air{
font-size: 20px;
color: #308aee;
margin-top: 20px;
display: block;
}
.r-table{
text-align: center;
}
/*line-height: 100px;*/
.tb{
font-size: 14px;
box-sizing: border-box;
display: table;
border-spacing: 0;
border-collapse: collapse;
}
.px{
background-color: #FFFFFF;
width: 100%;
height: 500px;
}
.title{
color: #127ef2;
font-size: 16px;
font-weight: bold;
margin: 20px 30px;
text-align: left;
}
.r-table .tb > tbody > tr > th {
background-color: #d8ecff;
padding: 10px 5px;
text-align: center;
border: 1px solid #ddd;
}
.r-table .tb > tbody > tr > td {
padding: 8px;
border: 1px solid #ddd;
display: table-cell;
}
.col .tb > tbody > tr > th {
border: 0px;
}
.col .tb > tbody > tr > td {
border: 0px;
}
.father{
position: relative;
}
.relative{
position: absolute;
top:11px;
right: 100px;
}
</style>
<style>
.order .el-collapse-item__header{
color: #127ef2;
font-size: 16px;
font-weight: bold;
margin: 20px 30px;
text-align: left;
}
</style>
\ No newline at end of file
... ...