朱兆平 / vue_cli · 提交

转到一个项目

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

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

内嵌 并排对比
正在显示 11 个修改的文件 包含 2906 行增加 和 282 行删除
@@ -25,7 +25,6 @@ import ExitLoading from './views/nmms/ExitLoading.vue' @@ -25,7 +25,6 @@ import ExitLoading from './views/nmms/ExitLoading.vue'
25 import ExitFlightDesc from './views/nmms/ExitFlightDesc.vue' 25 import ExitFlightDesc from './views/nmms/ExitFlightDesc.vue'
26 import LostLoad from './views/lostLoadChange/lostLoading.vue' 26 import LostLoad from './views/lostLoadChange/lostLoading.vue'
27 import LostLoadChange from './views/lostLoadChange/lostLoadChange.vue' 27 import LostLoadChange from './views/lostLoadChange/lostLoadChange.vue'
28 -  
29 import OrigFlightList from './views/nmms_import/OrigFlightList.vue' 28 import OrigFlightList from './views/nmms_import/OrigFlightList.vue'
30 import EnterFlightInfo from './views/nmms_import/EnterFlightInfo.vue' 29 import EnterFlightInfo from './views/nmms_import/EnterFlightInfo.vue'
31 import OrigMaster from './views/nmms_import/OrigMaster.vue' 30 import OrigMaster from './views/nmms_import/OrigMaster.vue'
@@ -36,9 +35,18 @@ import AllocateSearch from './views/nmms_import/AllocateSearch.vue' @@ -36,9 +35,18 @@ import AllocateSearch from './views/nmms_import/AllocateSearch.vue'
36 import Importallocation from './views/nmms_import/Importallocation.vue' 35 import Importallocation from './views/nmms_import/Importallocation.vue'
37 import Allocatearrive from './views/nmms_import/Allocatearrive.vue' 36 import Allocatearrive from './views/nmms_import/Allocatearrive.vue'
38 import User from './views/nav1/user.vue' 37 import User from './views/nav1/user.vue'
39 -import Page4 from './views/nav2/Page4.vue'  
40 -import Page5 from './views/nav2/Page5.vue'  
41 -import Page6 from './views/nav3/Page6.vue' 38 +import preConfiguration from './views/nav2/preConfiguration.vue'
  39 +import allocate from './views/nav2/allocate.vue'
  40 +import charge from './views/nav2/charge.vue'
  41 +import documents from './views/nav2/documents.vue'
  42 +import booking from './views/nav4/booking.vue'
  43 +import order from './views/nav4/order.vue'
  44 +import airlift from './views/nav4/airlift.vue'
  45 +import inquiry from './views/nav4/inquiry.vue'
  46 +
  47 +
  48 +
  49 +
42 import echarts from './views/charts/echarts.vue' 50 import echarts from './views/charts/echarts.vue'
43 import SecrityInspection from './views/staff/security_inspection.vue' 51 import SecrityInspection from './views/staff/security_inspection.vue'
44 import Key from './views/staff/key.vue' 52 import Key from './views/staff/key.vue'
@@ -107,11 +115,30 @@ let routes = [ @@ -107,11 +115,30 @@ let routes = [
107 { 115 {
108 path: '/domdep', 116 path: '/domdep',
109 component: Home, 117 component: Home,
  118 + name: 'KT际通',
  119 + iconCls: 'el-icon-delete-location',
  120 + children: [
  121 + { path: '/booking', component: booking, name: '在线订舱' },
  122 + { path: '/order', component: order, name: '订舱信息' },
  123 + { path: '/airlift', component: airlift, name: '空运专线' },
  124 + { path: '/inquiry', component: inquiry, name: '航班号查询' },
  125 +
  126 +
  127 + ]
  128 + },
  129 +
  130 + // 货运系统--航班预配
  131 + {
  132 + path: '/domdep',
  133 + component: Home,
110 name: '国内出港', 134 name: '国内出港',
111 - iconCls: 'el-icon-setting', 135 + iconCls: 'el-icon-position',
112 children: [ 136 children: [
113 - { path: '/Page4', component: Page4, name: '航班预配' },  
114 - // { path: '/role', component: Role, name: '组织机构' }, 137 + { path: '/preConfiguration', component: preConfiguration, name: '航班预配' },
  138 + { path: '/allocate', component: allocate, name: '航班配载' },
  139 + { path: '/documents', component: documents, name: '航班文件' },
  140 + { path: '/charge', component: charge, name: '付费处理' },
  141 +
115 // { path: '/perm', component: Perm, name: '权限管理' }, 142 // { path: '/perm', component: Perm, name: '权限管理' },
116 // { path: '/log', component: LOG, name: '系统日志' }, 143 // { path: '/log', component: LOG, name: '系统日志' },
117 // { path: '/department', component: Department, name: '部门管理' }, 144 // { path: '/department', component: Department, name: '部门管理' },
1 -<template>  
2 - <el-container>  
3 - <el-main>  
4 - <el-row>  
5 - <el-col :span="24">  
6 - <div class="grid-content content">航班预配</div>  
7 - </el-col>  
8 - </el-row>  
9 -<!-- 搜索区域-->  
10 - <el-row>  
11 - <el-form :inline="true" :model="formInline" class="demo-form-inline">  
12 - <el-col :span="5">  
13 - <el-form-item label="航班号">  
14 - <el-input v-model="formInline.user" placeholder="请输入航班号"></el-input>  
15 - </el-form-item>  
16 - </el-col>  
17 - <el-col :span="4">  
18 - <el-form-item>  
19 - <el-button type="primary" @click="onSubmit">查询</el-button>  
20 - </el-form-item>  
21 - </el-col>  
22 - <el-col :span="4">  
23 - <el-form-item>  
24 - <el-select v-model="formInline.value" placeholder="航班操作" style="margin-left: 50px">  
25 - <el-option  
26 - v-for="item in options"  
27 - :key="item.value"  
28 - :label="item.label"  
29 - :value="item.value">  
30 - </el-option>  
31 - </el-select>  
32 - </el-form-item>  
33 - </el-col>  
34 - </el-form>  
35 - </el-row>  
36 -<!-- 表单区域①-->  
37 - <el-row>  
38 - <el-table  
39 - ref="multipleTable"  
40 - :data="tableData"  
41 - tooltip-effect="dark"  
42 - style="width: 100%"  
43 - @selection-change="handleSelectionChange">  
44 - <el-table-column  
45 - type="selection"  
46 - width="55">  
47 - </el-table-column>  
48 - <el-table-column  
49 - label="运单号">  
50 - <template slot-scope="scope">{{ scope.row.date }}</template>  
51 - </el-table-column>  
52 - <el-table-column  
53 - prop="name"  
54 - label="件数">  
55 - </el-table-column>  
56 - <el-table-column  
57 - prop="address"  
58 - label="重量">  
59 - </el-table-column>  
60 - <el-table-column  
61 - prop="name"  
62 - label="体积">  
63 - </el-table-column>  
64 - <el-table-column  
65 - prop="address"  
66 - label="品名">  
67 - </el-table-column>  
68 - </el-table>  
69 - <div style="margin-top:5px;margin-left: 1000px">  
70 - <el-button type="primary" >配上</el-button>  
71 - <el-button type="success" @click="dialogFormVisible = true">新增</el-button>  
72 - <el-button type="warning" @click="dialogFormsVisible = true">导入</el-button>  
73 - </div>  
74 - </el-row>  
75 -<!-- 表单①新增按钮弹框-->  
76 - <el-row>  
77 - <el-dialog title="新增页面" :visible.sync="dialogFormVisible">  
78 - <el-form :model="form">  
79 - <el-row>  
80 - <el-col :span="10">  
81 - <el-form-item label="运单号" :label-width="formLabelWidth">  
82 - <el-input v-model="form.name" autocomplete="off"></el-input>  
83 - </el-form-item>  
84 - </el-col>  
85 - <el-col :span="10">  
86 - <el-form-item label="目的站" :label-width="formLabelWidth">  
87 - <el-input v-model="form.name" autocomplete="off"></el-input>  
88 - </el-form-item>  
89 - </el-col>  
90 - <el-col :span="10">  
91 - <el-form-item label="件数" :label-width="formLabelWidth">  
92 - <el-input v-model="form.name" autocomplete="off"></el-input>  
93 - </el-form-item>  
94 - </el-col>  
95 - <el-col :span="10">  
96 - <el-form-item label="重量" :label-width="formLabelWidth">  
97 - <el-input v-model="form.name" autocomplete="off" placeholder="单位：KG"></el-input>  
98 - </el-form-item>  
99 - </el-col>  
100 - <el-col :span="10">  
101 - <el-form-item label="体积" :label-width="formLabelWidth">  
102 - <el-input v-model="form.name" autocomplete="off"></el-input>  
103 - </el-form-item>  
104 - </el-col>  
105 - <el-col :span="10">  
106 - <el-form-item label="品名" :label-width="formLabelWidth">  
107 - <el-select v-model="form.region" placeholder="请选择品名">  
108 - <el-option label="品名一" value="品名一"></el-option>  
109 - <el-option label="品名二" value="品名二"></el-option>  
110 - </el-select>  
111 - </el-form-item>  
112 - </el-col>  
113 - <el-col :span="10">  
114 - <el-form-item label="特货代码" :label-width="formLabelWidth">  
115 - <el-input v-model="form.name" autocomplete="off"></el-input>  
116 - </el-form-item>  
117 - </el-col>  
118 - <el-col :span="10">  
119 - <el-form-item label="代理人" :label-width="formLabelWidth">  
120 - <el-input v-model="form.name" autocomplete="off"></el-input>  
121 - </el-form-item>  
122 - </el-col>  
123 - <el-col :span="10">  
124 - <el-form-item label="优先级" :label-width="formLabelWidth">  
125 - <el-input v-model="form.name" autocomplete="off"></el-input>  
126 - </el-form-item>  
127 - </el-col>  
128 - <el-col :span="10">  
129 - <el-form-item label="备注" :label-width="formLabelWidth">  
130 - <el-input v-model="form.name" autocomplete="off"></el-input>  
131 - </el-form-item>  
132 - </el-col>  
133 - </el-row>  
134 - </el-form>  
135 - <div slot="footer" class="dialog-footer">  
136 - <el-button @click="dialogFormVisible = false">取 消</el-button>  
137 - <el-button type="primary" @click="dialogFormVisible = false">保 存</el-button>  
138 - </div>  
139 - </el-dialog>  
140 - </el-row>  
141 -<!-- 表单①导入按钮弹框-->  
142 - <el-row>  
143 - <el-dialog title="批量导入" :visible.sync="dialogFormsVisible">  
144 - <el-form :model="form1" >  
145 - <el-row>  
146 - <el-col :span="5">  
147 - <el-form-item>  
148 - <el-form-item label="ULD" :label-width="formsLabelWidths">  
149 - <el-input v-model="form1.name" autocomplete="off"></el-input>  
150 - </el-form-item>  
151 - </el-form-item>  
152 - </el-col>  
153 - </el-row>  
154 - </el-form>  
155 - </el-dialog>  
156 - </el-row>  
157 -<!-- 表单区域②-->  
158 - <el-row>  
159 - <el-table  
160 - ref="multipleTable"  
161 - :data="tableData"  
162 - tooltip-effect="dark"  
163 - style="width: 100%"  
164 - @selection-change="handleSelectionChange">  
165 - <el-table-column  
166 - label="ULD类型">  
167 - <template slot-scope="scope">{{ scope.row.date }}</template>  
168 - </el-table-column>  
169 - <el-table-column  
170 - prop="name"  
171 - label="件数">  
172 - </el-table-column>  
173 - <el-table-column  
174 - prop="address"  
175 - label="机仓位">  
176 - </el-table-column>  
177 - </el-table>  
178 - <div style="margin-top:5px;margin-left: 1000px">  
179 - <el-button type="primary" >拉下</el-button>  
180 - <el-button type="success" @click="dialogFormVisibles = true">新增</el-button>  
181 - <el-button type="danger" >删除</el-button>  
182 - </div>  
183 - </el-row>  
184 -<!-- 表单②新增按钮弹框-->  
185 - <el-row>  
186 - <el-dialog title="新增页面" :visible.sync="dialogFormVisibles">  
187 - <el-form :model="forms">  
188 - <el-row>  
189 - <el-col :span="10">  
190 - <el-form-item label="ULD" :label-width="formLabelWidths">  
191 - <el-input v-model="forms.name" autocomplete="off"></el-input>  
192 - </el-form-item>  
193 - </el-col>  
194 - <el-col :span="10">  
195 - <el-form-item label="件数" :label-width="formLabelWidths">  
196 - <el-input v-model="forms.name" autocomplete="off"></el-input>  
197 - </el-form-item>  
198 - </el-col>  
199 - <el-col :span="10">  
200 - <el-form-item label="机仓位" :label-width="formLabelWidths">  
201 - <el-select v-model="forms.region" placeholder="请选择机仓位">  
202 - <el-option label="仓位一" value="仓位一"></el-option>  
203 - <el-option label="仓位二" value="仓位二"></el-option>  
204 - </el-select>  
205 - </el-form-item>  
206 - </el-col>  
207 - <el-col :span="10">  
208 - <el-form-item label="板位" :label-width="formLabelWidths">  
209 - <el-select v-model="forms.region" placeholder="请选择板位">  
210 - <el-option label="板位一" value="板位一"></el-option>  
211 - <el-option label="板位二" value="板位二"></el-option>  
212 - </el-select>  
213 - </el-form-item>  
214 - </el-col>  
215 - <el-col :span="10">  
216 - <el-form-item label="板型" :label-width="formLabelWidths">  
217 - <el-select v-model="forms.region" placeholder="请选择板型">  
218 - <el-option label="板型一" value="板型一"></el-option>  
219 - <el-option label="板型二" value="板型二"></el-option>  
220 - </el-select>  
221 - </el-form-item>  
222 - </el-col>  
223 - </el-row>  
224 - </el-form>  
225 - <div slot="footer" class="dialog-footer">  
226 - <el-button @click="dialogFormVisibles = false">取 消</el-button>  
227 - <el-button type="primary" @click="dialogFormVisibles = false">保 存</el-button>  
228 - </div>  
229 -  
230 - </el-dialog>  
231 - </el-row>  
232 - </el-main>  
233 - </el-container>  
234 -</template>  
235 -<script>  
236 - export default {  
237 - data() {  
238 - return {  
239 - formInline: {  
240 - user: '',  
241 - value: ''  
242 - },  
243 - tableData:[],  
244 - multipleSelection: [],  
245 - options: [{  
246 - value: '操作1',  
247 - label: '操作1'  
248 - }, {  
249 - value: '操作2',  
250 - label: '操作2'  
251 - }],  
252 - dialogFormVisible: false,  
253 - dialogFormVisibles: false,  
254 - dialogFormsVisible: false,  
255 - form: {},  
256 - form1: {},  
257 - forms: {},  
258 - formLabelWidth: '120px',  
259 - formLabelWidths: '120px',  
260 - }  
261 - },  
262 - methods: {  
263 - onSubmit() {  
264 - console.log('submit!');  
265 - },  
266 - handleSelectionChange(val) {  
267 - this.multipleSelection = val;  
268 - }  
269 - }  
270 - }  
271 -</script>  
1 -<template>  
2 - <section>page5...  
3 - </section>  
4 -</template>  
  1 +<template>
  2 + <el-container>
  3 + <el-main>
  4 + <el-row>
  5 + <el-col :span="24">
  6 + <div class="grid-content content">航班配载</div>
  7 + </el-col>
  8 + </el-row>
  9 + <!-- 搜索区域-->
  10 + <el-row>
  11 + <el-form :inline="true" :model="formInline" class="demo-form-inline">
  12 + <el-col :span="5">
  13 + <el-form-item label="航班号">
  14 + <el-input v-model="formInline.flightNo" placeholder="请输入航班号"></el-input>
  15 + </el-form-item>
  16 + </el-col>
  17 + <el-col :span="4">
  18 + <el-form-item>
  19 + <el-button type="primary" @click="onSubmit">查询</el-button>
  20 + </el-form-item>
  21 + </el-col>
  22 + <el-col :span="4">
  23 + <el-form-item>
  24 + <el-select v-model="formInline.operation" placeholder="航班操作" style="margin-left: 50px">
  25 + <el-option
  26 + v-for="item in operation"
  27 + :key="item.value"
  28 + :label="item.label"
  29 + :value="item.value">
  30 + </el-option>
  31 + </el-select>
  32 + </el-form-item>
  33 + </el-col>
  34 + </el-form>
  35 + </el-row>
  36 +<!-- 表单区域①-->
  37 + <el-row>
  38 + <el-table
  39 + ref="multipleTable"
  40 + :data="tableData"
  41 + tooltip-effect="dark"
  42 + style="width: 100%"
  43 + @selection-change="handleSelectionChange">
  44 + <el-table-column
  45 + type="selection"
  46 + width="55">
  47 + </el-table-column>
  48 + <el-table-column
  49 + prop="uld"
  50 + label="ULD">
  51 + </el-table-column>
  52 + <el-table-column
  53 + prop="stowage"
  54 + label="配载重量">
  55 + </el-table-column>
  56 + <el-table-column
  57 + prop="ground"
  58 + label="是否地勤交接">
  59 + </el-table-column>
  60 + <el-table-column
  61 + prop="warehouse"
  62 + label="仓库">
  63 + </el-table-column>
  64 + <el-table-column
  65 + prop="bup"
  66 + label="BUP">
  67 + </el-table-column>
  68 + </el-table>
  69 + <el-table
  70 + ref="multipleTable"
  71 + :data="tableData1"
  72 + tooltip-effect="dark"
  73 + style="width: 100%"
  74 + @selection-change="handleSelectionChange">
  75 + <el-table-column
  76 + type="selection"
  77 + width="55">
  78 + </el-table-column>
  79 + <el-table-column
  80 + prop="box"
  81 + label="板箱号">
  82 + </el-table-column>
  83 + <el-table-column
  84 + prop="assembling"
  85 + label="装配件数">
  86 + </el-table-column>
  87 + <el-table-column
  88 + prop="stowage"
  89 + label="配载重量">
  90 + </el-table-column>
  91 + </el-table>
  92 + <div style="margin-top:5px;margin-left: 20px">
  93 + <el-button @click="dialogFormVisible = true">待运导入</el-button>
  94 + <el-button>装箱</el-button>
  95 + <el-button>部分装箱</el-button>
  96 + <el-button>放散舱</el-button>
  97 + <el-button>部分放散舱</el-button>
  98 + <el-button @click="dialogTableVisible = true">正式舱单</el-button>
  99 + <el-button>地勤交接</el-button>
  100 + <el-button @click="dialogFormVisible3 = true">转配</el-button>
  101 + <el-button>航班文件</el-button>
  102 + <el-button type="primary" >散货配上</el-button>
  103 + <el-button type="success">卸下</el-button>
  104 + <el-button type="warning">运单保存</el-button>
  105 + </div>
  106 + </el-row>
  107 + <!-- 表单①待运导入按钮弹框-->
  108 + <el-row>
  109 + <el-dialog title="待运导入" :visible.sync="dialogFormVisible">
  110 + <el-form :model="form">
  111 + <el-row>
  112 + <el-col :span="10">
  113 + <el-form-item>
  114 + <el-form-item label="航班号" :label-width="formLabelWidth">
  115 + <el-input v-model="form.flightNo" ></el-input>
  116 + </el-form-item>
  117 + </el-form-item>
  118 + </el-col>
  119 + <el-col :span="10">
  120 + <el-form-item>
  121 + <el-form-item label="运单号" :label-width="formLabelWidth">
  122 + <el-input v-model="form.waybillNo"></el-input>
  123 + </el-form-item>
  124 + </el-form-item>
  125 + </el-col>
  126 + </el-row>
  127 + <el-row>
  128 + <el-col :span="7">
  129 + <el-form-item>
  130 + <el-form-item label="代理人" :label-width="formLabelWidth">
  131 + <el-input v-model="form.agent" ></el-input>
  132 + </el-form-item>
  133 + </el-form-item>
  134 + </el-col>
  135 + <el-col :span="7">
  136 + <el-form-item>
  137 + <el-form-item label="承运人" :label-width="formLabelWidth">
  138 + <el-input v-model="form.carrier"></el-input>
  139 + </el-form-item>
  140 + </el-form-item>
  141 + </el-col>
  142 + <el-col :span="7">
  143 + <el-form-item>
  144 + <el-form-item label="起始站" :label-width="formLabelWidth">
  145 + <el-input v-model="form.departure"></el-input>
  146 + </el-form-item>
  147 + </el-form-item>
  148 + </el-col>
  149 + </el-row>
  150 + <el-row>
  151 + <el-col :span="7">
  152 + <el-form-item>
  153 + <el-form-item label="中转/目的站" :label-width="formLabelWidth">
  154 + <el-input v-model="form.destination" ></el-input>
  155 + </el-form-item>
  156 + </el-form-item>
  157 + </el-col>
  158 + <el-col :span="7">
  159 + <el-form-item>
  160 + <el-form-item label="特货代码" :label-width="formLabelWidth">
  161 + <el-input v-model="form.code"></el-input>
  162 + </el-form-item>
  163 + </el-form-item>
  164 + </el-col>
  165 + <el-col :span="8">
  166 + <el-form-item>
  167 + <el-form-item label="CBA" :label-width="formLabelWidth">
  168 + <el-radio v-model="form.radio" label="1">是</el-radio>
  169 + <el-radio v-model="form.radio" label="2">否</el-radio>
  170 + </el-form-item>
  171 + </el-form-item>
  172 + </el-col>
  173 + </el-row>
  174 + <el-row>
  175 + <el-col :span="19">
  176 + <el-form-item>
  177 + <el-form-item label="制单时间" :label-width="formLabelWidth">
  178 + <el-date-picker
  179 + v-model="form.value1"
  180 + type="datetimerange"
  181 + start-placeholder="开始日期"
  182 + end-placeholder="结束日期"
  183 + :default-time="['12:00:00']">
  184 + </el-date-picker>
  185 + </el-form-item>
  186 + </el-form-item>
  187 + </el-col>
  188 + <el-col :span="2" >
  189 + <el-form-item >
  190 + <el-button type="primary">查 询</el-button>
  191 + </el-form-item>
  192 + </el-col>
  193 + </el-row>
  194 + <el-table
  195 + ref="multipleTable"
  196 + :data="tableData3"
  197 + tooltip-effect="dark"
  198 + style="width: 100%"
  199 + @selection-change="handleSelectionChange">
  200 + <el-table-column
  201 + type="selection"
  202 + width="55">
  203 + </el-table-column>
  204 + <el-table-column
  205 + prop="productName"
  206 + label="品名">
  207 + </el-table-column>
  208 + <el-table-column
  209 + prop="waybillNo"
  210 + label="运单号">
  211 + </el-table-column>
  212 + <el-table-column
  213 + prop="departure"
  214 + label="始发站">
  215 + </el-table-column>
  216 + <el-table-column
  217 + prop="destination"
  218 + label="目的站">
  219 + </el-table-column>
  220 + <el-table-column
  221 + prop="number"
  222 + label="仓库件数">
  223 + </el-table-column>
  224 + <el-table-column
  225 + prop="weight"
  226 + label="仓库重量">
  227 + </el-table-column>
  228 + </el-table>
  229 + <div style="margin-top: 20px;margin-left: 585px">
  230 + <el-button @click="dialogFormVisible1=true">散货装配</el-button>
  231 + </div>
  232 + <el-table
  233 + ref="multipleTable"
  234 + :data="tableData4"
  235 + tooltip-effect="dark"
  236 + style="width: 100%"
  237 + @selection-change="handleSelectionChange">
  238 + <el-table-column
  239 + type="selection"
  240 + width="55">
  241 + </el-table-column>
  242 + <el-table-column
  243 + prop="box"
  244 + label="板箱号">
  245 + </el-table-column>
  246 + <el-table-column
  247 + prop="total"
  248 + label="总件数">
  249 + </el-table-column>
  250 + <el-table-column
  251 + prop="totalWeight"
  252 + label="总重量"
  253 + show-overflow-tooltip>
  254 + </el-table-column>
  255 + </el-table>
  256 + <div style="margin-top: 20px;margin-left: 585px">
  257 + <el-button @click="dialogFormVisible2=true">ULD装配</el-button>
  258 + </div>
  259 + </el-form>
  260 + </el-dialog>
  261 + </el-row>
  262 + <!-- 表单①正式舱单按钮弹框-->
  263 + <el-row>
  264 + <el-dialog title="打印" :visible.sync="dialogTableVisible">
  265 + <el-tabs v-model="activeName" @tab-click="handleClick">
  266 + <el-tab-pane label="舱单打印" name="first">
  267 + <el-table
  268 + :data="tableData1"
  269 + style="width: 100%"
  270 + row-key="id"
  271 + border
  272 + lazy
  273 + :load="load"
  274 + :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
  275 + <el-table-column
  276 + type="selection"
  277 + width="55">
  278 + </el-table-column>
  279 + <el-table-column
  280 + prop="date"
  281 + label="板箱号">
  282 + </el-table-column>
  283 + <el-table-column
  284 + prop="name"
  285 + label="配载件数">
  286 + </el-table-column>
  287 + <el-table-column
  288 + prop="address"
  289 + label="配载重量">
  290 + </el-table-column>
  291 + <el-table-column
  292 + prop="date"
  293 + label="配载体积">
  294 + </el-table-column>
  295 + <el-table-column
  296 + prop="name"
  297 + label="特殊处理代码"
  298 + width="120px">
  299 + </el-table-column>
  300 + <el-table-column
  301 + prop="address"
  302 + label="品名">
  303 + </el-table-column>
  304 + <el-table-column
  305 + prop="date"
  306 + label="始发站">
  307 + </el-table-column>
  308 + <el-table-column
  309 + prop="name"
  310 + label="目的站">
  311 + </el-table-column>
  312 + <el-table-column
  313 + prop="address"
  314 + label="优先级">
  315 + </el-table-column>
  316 + <el-table-column
  317 + prop="name"
  318 + label="备注">
  319 + </el-table-column>
  320 + <el-table-column
  321 + prop="address"
  322 + label="舱单打印">
  323 + </el-table-column>
  324 + </el-table>
  325 + </el-tab-pane>
  326 + <el-tab-pane label="分批单打印" name="second">分批单打印</el-tab-pane>
  327 + <el-tab-pane label="分批单打印" name="third">分批单打印</el-tab-pane>
  328 + </el-tabs>
  329 + <div style="margin-top: 10px;margin-left: 250px">
  330 + <el-button @click="">无ULD打印</el-button>
  331 + <el-button @click="">有ULD打印</el-button>
  332 + <el-button @click="">装载舱单打印</el-button>
  333 + </div>
  334 + </el-dialog>
  335 + </el-row>
  336 + <!-- 表单①转配按钮弹框-->
  337 + <el-row>
  338 + <el-dialog title="转配航班" :visible.sync="dialogFormVisible3" width="30%">
  339 + <el-form :model="form3">
  340 + <el-row>
  341 + <el-col :span="20">
  342 + <el-form-item label="航班号" :label-width="formLabelWidth">
  343 + <el-input v-model="form3.flightNo" autocomplete="off"></el-input>
  344 + </el-form-item>
  345 + </el-col>
  346 + </el-row>
  347 + <el-row>
  348 + <el-col :span="20">
  349 + <el-form-item label="航班日期" :label-width="formLabelWidth">
  350 + <el-input v-model="form3.flightDate" autocomplete="off"></el-input>
  351 + </el-form-item>
  352 + </el-col>
  353 + </el-row>
  354 + <el-row>
  355 + <el-col :span="20">
  356 + <el-form-item label="航段" :label-width="formLabelWidth">
  357 + <el-input v-model="form3.segment" autocomplete="off"></el-input>
  358 + </el-form-item>
  359 + </el-col>
  360 + </el-row>
  361 + </el-form>
  362 + <div style="text-align: center">
  363 + <el-button type="primary" @click="dialogFormVisible3 = false">转 配</el-button>
  364 + <el-button @click="dialogFormVisible3 = false">取 消</el-button>
  365 + </div>
  366 + </el-dialog>
  367 + </el-row>
  368 + <!-- 航班配载 待运导入 散货装配按钮-->
  369 + <el-row>
  370 + <el-dialog title="操作区" :visible.sync="dialogFormVisible1">
  371 + <el-form :model="form1">
  372 + <el-row>
  373 + <el-col :span="21">
  374 + <el-form-item label="小计：" :label-width="formLabelWidth">
  375 + <el-input
  376 + placeholder="货物信息"
  377 + v-model="form1.subtotal"
  378 + :disabled="true">
  379 + </el-input>
  380 + </el-form-item>
  381 + </el-col>
  382 + </el-row>
  383 + <el-row>
  384 + <el-col :span="7">
  385 + <el-form-item label="运单号" :label-width="formLabelWidth">
  386 + <el-select v-model="form1.waybillNo" placeholder="请选择">
  387 + <el-option label="货单一" value="yi"></el-option>
  388 + <el-option label="货单二" value="er"></el-option>
  389 + </el-select>
  390 + </el-form-item>
  391 + </el-col>
  392 + <el-col :span="5">
  393 + <el-input v-model="form1.waybill" placeholder="单号"></el-input>
  394 + </el-col>
  395 + <el-col :span="8">
  396 + <el-input v-model="form1.location" placeholder="库位"></el-input>
  397 + </el-col>
  398 + </el-row>
  399 + <el-row>
  400 + <el-col :span="8">
  401 + <el-form-item label="件数" :label-width="formLabelWidth">
  402 + <el-input v-model="form1.number"></el-input>
  403 + </el-form-item>
  404 + </el-col>
  405 + <el-col :span="8">
  406 + <el-form-item label="重量" :label-width="formLabelWidth">
  407 + <el-input v-model="form1.weight" placeholder="KG"></el-input>
  408 + </el-form-item>
  409 + </el-col>
  410 + </el-row>
  411 + <el-row >
  412 + <el-col :span="21">
  413 + <el-form-item label="储运备注" :label-width="formLabelWidth">
  414 + <el-input v-model="form1.remarks"></el-input>
  415 + </el-form-item>
  416 + </el-col>
  417 + </el-row>
  418 + </el-form>
  419 + <div slot="footer" class="dialog-footer">
  420 + <el-button @click="dialogFormVisible1 = false">散货配上</el-button>
  421 + <el-button @click="dialogFormVisible1 = false">卸下</el-button>
  422 + <el-button type="primary" @click="dialogFormVisible1 = false">运单保存</el-button>
  423 + </div>
  424 + </el-dialog>
  425 + </el-row>
  426 + <!-- 航班配载 待运导入 ULD装配按钮-->
  427 + <el-row>
  428 + <el-dialog title="操作区" :visible.sync="dialogFormVisible2">
  429 + <el-form :model="form2">
  430 + <el-row>
  431 + <el-col :span="21">
  432 + <el-form-item label="小计：" :label-width="formLabelWidth">
  433 + <el-input
  434 + placeholder="货物信息"
  435 + v-model="form2.subtotal"
  436 + :disabled="true">
  437 + </el-input>
  438 + </el-form-item>
  439 + </el-col>
  440 + </el-row>
  441 + <el-row>
  442 + <el-col :span="8">
  443 + <el-form-item label="仓库" :label-width="formLabelWidth">
  444 + <el-input v-model="form2.warehouse"></el-input>
  445 + </el-form-item>
  446 + </el-col>
  447 + <el-col :span="8">
  448 + <el-form-item label="库位" :label-width="formLabelWidth">
  449 + <el-input v-model="form2.location"></el-input>
  450 + </el-form-item>
  451 + </el-col>
  452 + </el-row>
  453 + <el-row >
  454 + <el-col :span="6">
  455 + <el-form-item label="ULD号" :label-width="formLabelWidth">
  456 + <el-input v-model="form2.uldNo"></el-input>
  457 + </el-form-item>
  458 + </el-col>
  459 + <el-col :span="5">
  460 + <el-input v-model="form2.uldNo" placeholder=""></el-input>
  461 + </el-col>
  462 + <el-col :span="3">
  463 + <el-input v-model="form2.uldNo" placeholder=""></el-input>
  464 + </el-col>
  465 + </el-row>
  466 + </el-form>
  467 + <div slot="footer" class="dialog-footer">
  468 + <el-button @click="dialogFormVisible2 = false">板箱配上</el-button>
  469 + <el-button @click="dialogFormVisible2 = false">卸下</el-button>
  470 + </div>
  471 + </el-dialog>
  472 + </el-row>
  473 + <!-- 表单区域②-->
  474 + <el-row style="margin-top:20px">
  475 + <el-table
  476 + ref="multipleTable"
  477 + :data="tableData2"
  478 + tooltip-effect="dark"
  479 + style="width: 100%"
  480 + @selection-change="handleSelectionChange">
  481 + <el-table-column
  482 + type="selection"
  483 + width="55">
  484 + </el-table-column>
  485 + <el-table-column
  486 + prop="box"
  487 + label="板箱号">
  488 + </el-table-column>
  489 + <el-table-column
  490 + prop="assembling"
  491 + label="装配件数">
  492 + </el-table-column>
  493 + <el-table-column
  494 + prop="stowage"
  495 + label="配载重量">
  496 + </el-table-column>
  497 + </el-table>
  498 + </el-row>
  499 + <div style="margin-left: 970px">
  500 + <el-button type="primary">板箱配上</el-button>
  501 + <el-button type="success">卸下</el-button>
  502 + </div>
  503 + </el-main>
  504 + </el-container>
  505 +</template>
  506 +
  507 +<script>
  508 + export default {
  509 + data() {
  510 + return {
  511 + formInline: {
  512 + flightNo: undefined,
  513 + operation: undefined
  514 + },
  515 + operation: [{
  516 + value: '操作1',
  517 + label: '操作1'
  518 + }, {
  519 + value: '操作2',
  520 + label: '操作2'
  521 + }],
  522 + tableData:[],
  523 + tableData1:[],
  524 + tableData2:[],
  525 + form: {
  526 + flightNo:undefined,
  527 + waybillNo:undefined,
  528 + agent:undefined,
  529 + carrier:undefined,
  530 + departure:undefined,
  531 + destination:undefined,
  532 + code:undefined,
  533 + value1: '',
  534 + radio: '1'
  535 + },
  536 + tableData3:[],
  537 + tableData4:[],
  538 + dialogFormVisible: false,
  539 + form1: {
  540 + subtotal: undefined,
  541 + waybillNo: undefined,
  542 + waybill: undefined,
  543 + location: undefined,
  544 + number: undefined,
  545 + weight: undefined,
  546 + remarks: undefined,
  547 + },
  548 + form2: {
  549 + subtotal: undefined,
  550 + warehouse: undefined,
  551 + location: undefined,
  552 + uldNo: undefined,
  553 + },
  554 + form3: {
  555 + flightNo:undefined,
  556 + flightDate:undefined,
  557 + segment:undefined,
  558 + },
  559 + dialogFormVisible1: false,
  560 + dialogFormVisible2: false,
  561 + dialogFormVisible3: false,
  562 + dialogTableVisible: false,
  563 + innerVisible: false,
  564 + innerVisible1: false,
  565 + formLabelWidth: '120px',
  566 + }
  567 + }
  568 + }
  569 +</script>
  1 +<template>
  2 + <el-container>
  3 + <el-main>
  4 + <el-row>
  5 + <el-col :span="24">
  6 + <div class="grid-content content">收费处理</div>
  7 + </el-col>
  8 + </el-row>
  9 + <!-- 两个表单区域-->
  10 + <el-row>
  11 + <el-tabs v-model="activeName" @tab-click="handleClick">
  12 + <el-tab-pane label="计费" name="first">
  13 + <el-form ref="form" :model="form" label-width="80px">
  14 + <el-row>
  15 + <el-col :span="6">
  16 + <el-form-item label="运单号">
  17 + <el-input v-model="form.name"></el-input>
  18 + </el-form-item>
  19 + </el-col>
  20 + <el-col :span="6">
  21 + <el-form-item label="">
  22 + <el-button @click="">挑单</el-button>
  23 + <el-button @click="">批量挑单</el-button>
  24 + </el-form-item>
  25 + </el-col>
  26 + </el-row>
  27 + <el-row>
  28 + <el-col :span="6">
  29 + <el-form-item label="结算客户">
  30 + <el-input v-model="form.name"></el-input>
  31 + </el-form-item>
  32 + </el-col>
  33 + <el-col :span="6">
  34 + <el-form-item label="付款方式" :label-width="formLabelWidth">
  35 + <el-select v-model="form.waybillNo" placeholder="请选择">
  36 + <el-option label="方式一" value="yi"></el-option>
  37 + <el-option label="方式二" value="er"></el-option>
  38 + </el-select>
  39 + </el-form-item>
  40 + </el-col>
  41 + </el-row>
  42 + <el-row>
  43 + <el-table
  44 + :data="tableData"
  45 + style="width: 100%"
  46 + row-key="id"
  47 + border
  48 + lazy
  49 + :load="load"
  50 + :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
  51 + <el-table-column
  52 + prop="date"
  53 + label="状态">
  54 + </el-table-column>
  55 + <el-table-column
  56 + prop="name"
  57 + label="运单号">
  58 + </el-table-column>
  59 + <el-table-column
  60 + prop="address"
  61 + label="计费重量">
  62 + </el-table-column>
  63 + <el-table-column
  64 + prop="date"
  65 + label="处置费">
  66 + </el-table-column>
  67 + <el-table-column
  68 + prop="name"
  69 + label="超重费">
  70 + </el-table-column>
  71 + <el-table-column
  72 + prop="address"
  73 + label="仓储费">
  74 + </el-table-column>
  75 + <el-table-column
  76 + prop="date"
  77 + label="总费用">
  78 + </el-table-column>
  79 + <el-table-column
  80 + prop="name"
  81 + label="航班">
  82 + </el-table-column>
  83 + <el-table-column
  84 + prop="address"
  85 + label="特货代码">
  86 + </el-table-column>
  87 + <el-table-column
  88 + prop="date"
  89 + label="品名">
  90 + </el-table-column>
  91 + <el-table-column
  92 + prop="name"
  93 + label="方式">
  94 + </el-table-column>
  95 + <el-table-column
  96 + prop="address"
  97 + label="客户">
  98 + </el-table-column>
  99 + <el-table-column
  100 + prop="address"
  101 + label="收/发货人">
  102 + </el-table-column>
  103 + </el-table>
  104 + </el-row>
  105 + <div>
  106 + <el-button @click="">清除</el-button>
  107 + <el-button @click="">核对并现结结算</el-button>
  108 + <el-button @click="">导出</el-button>
  109 + <el-button @click="">打印</el-button>
  110 + </div>
  111 + </el-form>
  112 + </el-tab-pane>
  113 + <el-tab-pane label="已结算" name="second">已结算</el-tab-pane>
  114 + </el-tabs>
  115 + </el-row>
  116 + </el-main>
  117 + </el-container>
  118 +</template>
  119 +
  120 +<script>
  121 + export default {
  122 + data() {
  123 + return {
  124 + form: {
  125 +
  126 + },
  127 + activeName: 'first',
  128 + tableData:[],
  129 + }
  130 + }
  131 + }
  132 +</script>
  133 +
  134 +<style scoped>
  135 +
  136 +</style>
  1 +<template>
  2 + <el-container>
  3 + <el-main>
  4 + <el-row>
  5 + <el-col :span="24">
  6 + <div class="grid-content content">航班文件</div>
  7 + </el-col>
  8 + </el-row>
  9 + <!-- 搜索区域-->
  10 + <el-row>
  11 + <el-form :inline="true" :model="formInline" class="demo-form-inline">
  12 + <el-col :span="5">
  13 + <el-form-item label="航班号">
  14 + <el-input v-model="formInline.flightNo" placeholder="请输入航班号"></el-input>
  15 + </el-form-item>
  16 + </el-col>
  17 + <el-col :span="4">
  18 + <el-form-item>
  19 + <el-button type="primary" @click="onSubmit">查询</el-button>
  20 + </el-form-item>
  21 + </el-col>
  22 + <el-col :span="4">
  23 + <el-form-item>
  24 + <el-select v-model="formInline.operation" placeholder="航班操作" style="margin-left: 50px">
  25 + <el-option
  26 + v-for="item in operation"
  27 + :key="item.value"
  28 + :label="item.label"
  29 + :value="item.value">
  30 + </el-option>
  31 + </el-select>
  32 + </el-form-item>
  33 + </el-col>
  34 + </el-form>
  35 + </el-row>
  36 + <!-- 三个表单区域-->
  37 + <el-row>
  38 + <el-tabs v-model="activeName" @tab-click="handleClick">
  39 + <el-tab-pane label="舱单" name="first">
  40 + <el-table
  41 + :data="tableData"
  42 + style="width: 100%"
  43 + row-key="id"
  44 + border
  45 + lazy
  46 + :load="load"
  47 + :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
  48 + <el-table-column
  49 + prop="box"
  50 + label="板箱号">
  51 + </el-table-column>
  52 + <el-table-column
  53 + prop="assembling"
  54 + label="配载件数">
  55 + </el-table-column>
  56 + <el-table-column
  57 + prop="stowage"
  58 + label="配载重量">
  59 + </el-table-column>
  60 + <el-table-column
  61 + prop="stowageVol"
  62 + label="配载体积">
  63 + </el-table-column>
  64 + <el-table-column
  65 + prop="code"
  66 + label="特殊处理代码">
  67 + </el-table-column>
  68 + <el-table-column
  69 + prop="productName"
  70 + label="品名">
  71 + </el-table-column>
  72 + <el-table-column
  73 + prop="departure"
  74 + label="始发站">
  75 + </el-table-column>
  76 + <el-table-column
  77 + prop="destination"
  78 + label="目的站">
  79 + </el-table-column>
  80 + <el-table-column
  81 + prop="priority"
  82 + label="优先级">
  83 + </el-table-column>
  84 + <el-table-column
  85 + prop="remarks"
  86 + label="备注">
  87 + </el-table-column>
  88 + </el-table>
  89 + </el-tab-pane>
  90 + <el-tab-pane label="机长通知单" name="second">
  91 +
  92 + </el-tab-pane>
  93 + <el-tab-pane label="舱单编辑区" name="third">
  94 + <el-form ref="form" :model="form" label-width="80px">
  95 + <el-row>
  96 + <el-col :span="6">
  97 + <el-form-item label="ULD类别">
  98 + <el-select v-model="form.type" placeholder="请选择">
  99 + <el-option label="ULD" value="ULD"></el-option>
  100 + <el-option label="其他" value="其他"></el-option>
  101 + </el-select>
  102 + </el-form-item>
  103 + </el-col>
  104 + <el-col :span="6">
  105 + <el-form-item label="ULD号">
  106 + <el-input v-model="form.uldNo"></el-input>
  107 + </el-form-item>
  108 + </el-col>
  109 + <el-col :span="6">
  110 + <el-form-item label="">
  111 + <el-button>添加ULD</el-button>
  112 + <el-button>清空ULD</el-button>
  113 + </el-form-item>
  114 + </el-col>
  115 + </el-row>
  116 + <el-row>
  117 + <el-col :span="6">
  118 + <el-form-item label="运单号">
  119 + <el-input v-model="form.waybillNo"></el-input>
  120 + </el-form-item>
  121 + </el-col>
  122 + <el-col :span="6">
  123 + <el-form-item label="件数">
  124 + <el-input v-model="form.number"></el-input>
  125 + </el-form-item>
  126 + </el-col>
  127 + <el-col :span="6">
  128 + <el-form-item label="重量">
  129 + <el-input v-model="form.weight"></el-input>
  130 + </el-form-item>
  131 + </el-col>
  132 + </el-row>
  133 + <el-row>
  134 + <el-col :span="6">
  135 + <el-form-item label="配载件数">
  136 + <el-input v-model="form.assembling"></el-input>
  137 + </el-form-item>
  138 + </el-col>
  139 + <el-col :span="6">
  140 + <el-form-item label="配载重量">
  141 + <el-input v-model="form.stowage"></el-input>
  142 + </el-form-item>
  143 + </el-col>
  144 + <el-col :span="6">
  145 + <el-form-item label="配载体积">
  146 + <el-input v-model="form.stowageVol"></el-input>
  147 + </el-form-item>
  148 + </el-col>
  149 + </el-row>
  150 + <el-row>
  151 + <el-col :span="6">
  152 + <el-form-item label="特货代码">
  153 + <el-input v-model="form.code"></el-input>
  154 + </el-form-item>
  155 + </el-col>
  156 + <el-col :span="6">
  157 + <el-form-item label="品名">
  158 + <el-input v-model="form.productName"></el-input>
  159 + </el-form-item>
  160 + </el-col>
  161 + <el-col :span="6">
  162 + <el-form-item label="始发站">
  163 + <el-input v-model="form.departure"></el-input>
  164 + </el-form-item>
  165 + </el-col>
  166 + </el-row>
  167 + <el-row>
  168 + <el-col :span="6">
  169 + <el-form-item label="目的站">
  170 + <el-input v-model="form.destination"></el-input>
  171 + </el-form-item>
  172 + </el-col>
  173 + <el-col :span="6">
  174 + <el-form-item label="优先级">
  175 + <el-select v-model="form.priority" placeholder="请选择">
  176 + <el-option label="一" value="一"></el-option>
  177 + <el-option label="二" value="二"></el-option>
  178 + </el-select>
  179 + </el-form-item>
  180 + </el-col>
  181 + <el-col :span="6">
  182 + <el-form-item label="备注">
  183 + <el-input v-model="form.remarks"></el-input>
  184 + </el-form-item>
  185 + </el-col>
  186 + </el-row>
  187 + </el-form>
  188 + </el-tab-pane>
  189 + </el-tabs>
  190 + <div>
  191 + <el-button>导入舱单</el-button>
  192 + <el-button>舱单保存</el-button>
  193 + <el-button>发送FFM</el-button>
  194 + <el-button>发送H2000舱单报</el-button>
  195 + <el-button>不正常检查</el-button>
  196 + <el-button @click="dialogTableVisible = true">打印</el-button>
  197 + <el-button>打印标签</el-button>
  198 + </div>
  199 + </el-row>
  200 + <!-- 航班文件 打印按钮-->
  201 + <el-row>
  202 + <el-dialog title="打印" :visible.sync="dialogTableVisible">
  203 + <el-tabs v-model="activeName1" @tab-click="handleClick">
  204 + <el-tab-pane label="舱单打印" name="first">
  205 + <el-table
  206 + :data="tableData1"
  207 + style="width: 100%"
  208 + row-key="id"
  209 + border
  210 + lazy
  211 + :load="load"
  212 + :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
  213 + <el-table-column
  214 + type="selection"
  215 + width="55">
  216 + </el-table-column>
  217 + <el-table-column
  218 + prop="date"
  219 + label="板箱号">
  220 + </el-table-column>
  221 + <el-table-column
  222 + prop="name"
  223 + label="配载件数">
  224 + </el-table-column>
  225 + <el-table-column
  226 + prop="address"
  227 + label="配载重量">
  228 + </el-table-column>
  229 + <el-table-column
  230 + prop="date"
  231 + label="配载体积">
  232 + </el-table-column>
  233 + <el-table-column
  234 + prop="name"
  235 + label="特殊处理代码"
  236 + width="120px">
  237 + </el-table-column>
  238 + <el-table-column
  239 + prop="address"
  240 + label="品名">
  241 + </el-table-column>
  242 + <el-table-column
  243 + prop="date"
  244 + label="始发站">
  245 + </el-table-column>
  246 + <el-table-column
  247 + prop="name"
  248 + label="目的站">
  249 + </el-table-column>
  250 + <el-table-column
  251 + prop="address"
  252 + label="优先级">
  253 + </el-table-column>
  254 + <el-table-column
  255 + prop="name"
  256 + label="备注">
  257 + </el-table-column>
  258 + <el-table-column
  259 + prop="address"
  260 + label="舱单打印">
  261 + </el-table-column>
  262 + </el-table>
  263 + </el-tab-pane>
  264 + <el-tab-pane label="分批单打印" name="second">分批单打印</el-tab-pane>
  265 + <el-tab-pane label="分批单打印" name="third">分批单打印</el-tab-pane>
  266 + </el-tabs>
  267 + <div style="margin-top: 10px;margin-left: 250px">
  268 + <el-button @click="">无ULD打印</el-button>
  269 + <el-button @click="">有ULD打印</el-button>
  270 + <el-button @click="">装载舱单打印</el-button>
  271 + </div>
  272 + </el-dialog>
  273 + </el-row>
  274 + </el-main>
  275 + </el-container>
  276 +</template>
  277 +
  278 +<script>
  279 + export default {
  280 + data() {
  281 + return {
  282 + formInline: {
  283 + flightNo: undefined,
  284 + operation: undefined
  285 + },
  286 + form: {
  287 + type:undefined,
  288 + uldNo:undefined,
  289 + waybillNo:undefined,
  290 + number:undefined,
  291 + weight:undefined,
  292 + assembling:undefined,
  293 + stowage:undefined,
  294 + stowageVol:undefined,
  295 + code:undefined,
  296 + productName:undefined,
  297 + departure:undefined,
  298 + destination:undefined,
  299 + priority:undefined,
  300 + remarks:undefined,
  301 + },
  302 + tableData:[],
  303 + tableData1:[],
  304 + dialogTableVisible: false,
  305 + dialogTableVisible1: false,
  306 + activeName: 'first',
  307 + activeName1: 'first',
  308 +
  309 + };
  310 +
  311 + }
  312 + }
  313 +</script>
  314 +
  315 +<style scoped>
  316 +
  317 +</style>
  1 +<template>
  2 + <el-container>
  3 + <el-main>
  4 + <el-row>
  5 + <el-col :span="24">
  6 + <div class="grid-content content">航班预配</div>
  7 + </el-col>
  8 + </el-row>
  9 +<!-- 搜索区域-->
  10 + <el-row>
  11 + <el-form :inline="true" :model="formInline" class="demo-form-inline">
  12 + <el-col :span="5">
  13 + <el-form-item label="航班号">
  14 + <el-input v-model="formInline.flightNo" placeholder="请输入航班号"></el-input>
  15 + </el-form-item>
  16 + </el-col>
  17 + <el-col :span="4">
  18 + <el-form-item>
  19 + <el-button type="primary" @click="onSubmit">查询</el-button>
  20 + </el-form-item>
  21 + </el-col>
  22 + <el-col :span="4">
  23 + <el-form-item>
  24 + <el-select v-model="formInline.operation" placeholder="航班操作" style="margin-left: 50px">
  25 + <el-option
  26 + v-for="item in operation"
  27 + :key="item.value"
  28 + :label="item.label"
  29 + :value="item.value">
  30 + </el-option>
  31 + </el-select>
  32 + </el-form-item>
  33 + </el-col>
  34 + </el-form>
  35 + </el-row>
  36 +<!-- 表单区域①-->
  37 + <el-row>
  38 + <el-table
  39 + ref="multipleTable"
  40 + :data="tableData"
  41 + tooltip-effect="dark"
  42 + style="width: 100%"
  43 + @selection-change="handleSelectionChange">
  44 + <el-table-column
  45 + type="selection"
  46 + width="55">
  47 + </el-table-column>
  48 + <el-table-column
  49 + prop="waybillNo"
  50 + label="运单号">
  51 + </el-table-column>
  52 + <el-table-column
  53 + prop="number"
  54 + label="件数">
  55 + </el-table-column>
  56 + <el-table-column
  57 + prop="weight"
  58 + label="重量">
  59 + </el-table-column>
  60 + <el-table-column
  61 + prop="volume"
  62 + label="体积">
  63 + </el-table-column>
  64 + <el-table-column
  65 + prop="product"
  66 + label="品名">
  67 + </el-table-column>
  68 + </el-table>
  69 + <div style="margin-top:5px;margin-left: 1000px">
  70 + <el-button type="primary" >配上</el-button>
  71 + <el-button type="success" @click="dialogFormVisible = true">新增</el-button>
  72 + <el-button type="warning" @click="dialogForm1Visible = true">导入</el-button>
  73 + </div>
  74 + </el-row>
  75 +<!-- 表单①新增按钮弹框-->
  76 + <el-row >
  77 + <el-dialog title="新增页面" :visible.sync="dialogFormVisible">
  78 + <el-form :model="form">
  79 + <el-row>
  80 + <el-col :span="10">
  81 + <el-form-item label="运单号" :label-width="formLabelWidth">
  82 + <el-input v-model="form.waybillNo" autocomplete="off"></el-input>
  83 + </el-form-item>
  84 + </el-col>
  85 + <el-col :span="10">
  86 + <el-form-item label="目的站" :label-width="formLabelWidth">
  87 + <el-input v-model="form.destination" autocomplete="off"></el-input>
  88 + </el-form-item>
  89 + </el-col>
  90 + <el-col :span="10">
  91 + <el-form-item label="件数" :label-width="formLabelWidth">
  92 + <el-input v-model="form.number" autocomplete="off"></el-input>
  93 + </el-form-item>
  94 + </el-col>
  95 + <el-col :span="10">
  96 + <el-form-item label="重量" :label-width="formLabelWidth">
  97 + <el-input v-model="form.weight" autocomplete="off" placeholder="单位：KG"></el-input>
  98 + </el-form-item>
  99 + </el-col>
  100 + <el-col :span="10">
  101 + <el-form-item label="体积" :label-width="formLabelWidth">
  102 + <el-input v-model="form.volume" autocomplete="off"></el-input>
  103 + </el-form-item>
  104 + </el-col>
  105 + <el-col :span="10">
  106 + <el-form-item label="品名" :label-width="formLabelWidth">
  107 + <el-select v-model="form.product" placeholder="请选择品名">
  108 + <el-option label="品名一" value="品名一"></el-option>
  109 + <el-option label="品名二" value="品名二"></el-option>
  110 + </el-select>
  111 + </el-form-item>
  112 + </el-col>
  113 + <el-col :span="10">
  114 + <el-form-item label="特货代码" :label-width="formLabelWidth">
  115 + <el-input v-model="form.code" autocomplete="off"></el-input>
  116 + </el-form-item>
  117 + </el-col>
  118 + <el-col :span="10">
  119 + <el-form-item label="代理人" :label-width="formLabelWidth">
  120 + <el-input v-model="form.agent" autocomplete="off"></el-input>
  121 + </el-form-item>
  122 + </el-col>
  123 + <el-col :span="10">
  124 + <el-form-item label="优先级" :label-width="formLabelWidth">
  125 + <el-input v-model="form.priority" autocomplete="off"></el-input>
  126 + </el-form-item>
  127 + </el-col>
  128 + <el-col :span="10">
  129 + <el-form-item label="备注" :label-width="formLabelWidth">
  130 + <el-input v-model="form.remarks" autocomplete="off"></el-input>
  131 + </el-form-item>
  132 + </el-col>
  133 + </el-row>
  134 + </el-form>
  135 + <div slot="footer" class="dialog-footer">
  136 + <el-button @click="dialogFormVisible = false">取 消</el-button>
  137 + <el-button type="primary" @click="dialogFormVisible = false">保 存</el-button>
  138 + </div>
  139 + </el-dialog>
  140 + </el-row>
  141 +<!-- 表单①导入按钮弹框-->
  142 + <el-row align="center">
  143 + <el-dialog title="批量导入" :visible.sync="dialogForm1Visible" style="width: 100%">
  144 + <el-form :model="form1" >
  145 + <el-row>
  146 + <el-col :span="7">
  147 + <el-form-item>
  148 + <el-form-item label="航班号" :label-width="formLabelWidthd">
  149 + <el-input v-model="form1.flightNo"></el-input>
  150 + </el-form-item>
  151 + </el-form-item>
  152 + </el-col>
  153 + <el-col :span="7">
  154 + <el-form-item>
  155 + <el-form-item label="始发站" :label-width="formLabelWidthd">
  156 + <el-input v-model="form1.departure"></el-input>
  157 + </el-form-item>
  158 + </el-form-item>
  159 + </el-col>
  160 + <el-col :span="7">
  161 + <el-form-item>
  162 + <el-form-item label="中转站" :label-width="formLabelWidthd">
  163 + <el-input v-model="form1.transfer"></el-input>
  164 + </el-form-item>
  165 + </el-form-item>
  166 + </el-col>
  167 + <el-col :span="7">
  168 + <el-form-item>
  169 + <el-form-item label="目的站" :label-width="formLabelWidthd">
  170 + <el-input v-model="form1.destination"></el-input>
  171 + </el-form-item>
  172 + </el-form-item>
  173 + </el-col>
  174 + <el-col :span="7">
  175 + <el-form-item>
  176 + <el-form-item label="代理人" :label-width="formLabelWidthd">
  177 + <el-input v-model="form1.agent"></el-input>
  178 + </el-form-item>
  179 + </el-form-item>
  180 + </el-col>
  181 + <el-col :span="7">
  182 + <el-form-item>
  183 + <el-form-item label="特货代码" :label-width="formLabelWidthd">
  184 + <el-input v-model="form1.code"></el-input>
  185 + </el-form-item>
  186 + </el-form-item>
  187 + </el-col>
  188 + <el-col :span="10">
  189 + <el-form-item label="是否拉货" :label-width="formLabelWidthd">
  190 + <el-select v-model="form1.goods" placeholder="是否拉货" style="width: 160px">
  191 + <el-option
  192 + v-for="item in goods"
  193 + :key="item.value"
  194 + :label="item.label"
  195 + :value="item.value">
  196 + </el-option>
  197 + </el-select>
  198 + </el-form-item>
  199 + </el-col>
  200 + <el-col :span="10">
  201 + <el-form-item>
  202 + <el-form-item label="制单时间" :label-width="formLabelWidthd">
  203 + <el-date-picker
  204 + v-model="form1.voucher"
  205 + type="date"
  206 + placeholder="选择日期"
  207 + style="width: 160px">
  208 + </el-date-picker>
  209 + </el-form-item>
  210 + </el-form-item>
  211 + </el-col>
  212 + <el-col :span="8">
  213 + <el-form-item>
  214 + <el-form-item label="入仓时间" :label-width="formLabelWidthd">
  215 + <el-date-picker
  216 + v-model="form1.warehousing"
  217 + type="date"
  218 + placeholder="选择日期"
  219 + style="width: 160px">
  220 + </el-date-picker>
  221 + </el-form-item>
  222 + </el-form-item>
  223 + </el-col>
  224 + <el-col :span="13" style="margin-left: 70px">
  225 + <el-form-item>
  226 + <el-radio-group v-model="form1.radio">
  227 + <el-radio :label="3">邮件单</el-radio>
  228 + <el-radio :label="6">有库存</el-radio>
  229 + <el-radio :label="9">已审核</el-radio>
  230 + <el-radio :label="12">已放行</el-radio>
  231 + </el-radio-group>
  232 + </el-form-item>
  233 + </el-col>
  234 + <el-col>
  235 + <div style="margin-top: 20px;margin-left: 580px">
  236 + <el-button type="primary">查询</el-button>
  237 + </div>
  238 + </el-col>
  239 + <el-col>
  240 + <el-table
  241 + ref="multipleTable"
  242 + :data="tableData1"
  243 + tooltip-effect="dark"
  244 + style="width: 100%"
  245 + @selection-change="handleSelectionChange">
  246 + <el-table-column
  247 + type="selection"
  248 + width="55">
  249 + </el-table-column>
  250 + <el-table-column
  251 + prop="waybillNo"
  252 + label="运单号"
  253 + width="120">
  254 + </el-table-column>
  255 + <el-table-column
  256 + prop="number"
  257 + label="件数"
  258 + width="120">
  259 + </el-table-column>
  260 + <el-table-column
  261 + prop="volume"
  262 + label="体积"
  263 + width="120">
  264 + </el-table-column>
  265 + <el-table-column
  266 + prop="weight"
  267 + label="重量"
  268 + show-overflow-tooltip>
  269 + </el-table-column>
  270 + </el-table>
  271 + <div style="margin-top: 20px;margin-left: 580px">
  272 + <el-button type="success">导入</el-button>
  273 + <el-button type="info">取消</el-button>
  274 + </div>
  275 + </el-col>
  276 + </el-row>
  277 + </el-form>
  278 + </el-dialog>
  279 + </el-row>
  280 +<!-- 表单区域②-->
  281 + <el-row>
  282 + <el-table
  283 + ref="multipleTable"
  284 + :data="tableData2"
  285 + tooltip-effect="dark"
  286 + style="width: 100%"
  287 + @selection-change="handleSelectionChange">
  288 + <el-table-column
  289 + prop="type"
  290 + label="ULD类型">
  291 + </el-table-column>
  292 + <el-table-column
  293 + prop="number"
  294 + label="件数">
  295 + </el-table-column>
  296 + <el-table-column
  297 + prop="machine"
  298 + label="机仓位">
  299 + </el-table-column>
  300 + </el-table>
  301 + <div style="margin-top:5px;margin-left: 1000px">
  302 + <el-button type="primary" >拉下</el-button>
  303 + <el-button type="success" @click="dialogFormVisibles = true">新增</el-button>
  304 + <el-button type="danger" >删除</el-button>
  305 + </div>
  306 + </el-row>
  307 +<!-- 表单②新增按钮弹框-->
  308 + <el-row>
  309 + <el-dialog title="新增页面" :visible.sync="dialogFormVisibles">
  310 + <el-form :model="forms">
  311 + <el-row>
  312 + <el-col :span="10">
  313 + <el-form-item label="ULD" :label-width="formLabelWidths">
  314 + <el-input v-model="forms.uld" autocomplete="off"></el-input>
  315 + </el-form-item>
  316 + </el-col>
  317 + <el-col :span="10">
  318 + <el-form-item label="件数" :label-width="formLabelWidths">
  319 + <el-input v-model="forms.number" autocomplete="off"></el-input>
  320 + </el-form-item>
  321 + </el-col>
  322 + <el-col :span="10">
  323 + <el-form-item label="机仓位" :label-width="formLabelWidths">
  324 + <el-select v-model="forms.machine" placeholder="请选择机仓位">
  325 + <el-option label="仓位一" value="仓位一"></el-option>
  326 + <el-option label="仓位二" value="仓位二"></el-option>
  327 + </el-select>
  328 + </el-form-item>
  329 + </el-col>
  330 + <el-col :span="10">
  331 + <el-form-item label="板位" :label-width="formLabelWidths">
  332 + <el-select v-model="forms.position" placeholder="请选择板位">
  333 + <el-option label="板位一" value="板位一"></el-option>
  334 + <el-option label="板位二" value="板位二"></el-option>
  335 + </el-select>
  336 + </el-form-item>
  337 + </el-col>
  338 + <el-col :span="10">
  339 + <el-form-item label="板型" :label-width="formLabelWidths">
  340 + <el-select v-model="forms.plate" placeholder="请选择板型">
  341 + <el-option label="板型一" value="板型一"></el-option>
  342 + <el-option label="板型二" value="板型二"></el-option>
  343 + </el-select>
  344 + </el-form-item>
  345 + </el-col>
  346 + </el-row>
  347 + </el-form>
  348 + <div slot="footer" class="dialog-footer">
  349 + <el-button @click="dialogFormVisibles = false">取 消</el-button>
  350 + <el-button type="primary" @click="dialogFormVisibles = false">保 存</el-button>
  351 + </div>
  352 + </el-dialog>
  353 + </el-row>
  354 + </el-main>
  355 + </el-container>
  356 +</template>
  357 +<script>
  358 + export default {
  359 + data() {
  360 + return {
  361 + formInline: {
  362 + flightNo: undefined,
  363 + operation: undefined,
  364 + },
  365 + tableData:[],
  366 + form: {
  367 + waybillNo:undefined,
  368 + destination:undefined,
  369 + number:undefined,
  370 + weight:undefined,
  371 + volume:undefined,
  372 + product:undefined,
  373 + code:undefined,
  374 + agent:undefined,
  375 + priority:undefined,
  376 + remarks:undefined,
  377 + },
  378 + form1: {
  379 + flightNo:undefined,
  380 + departure:undefined,
  381 + transfer:undefined,
  382 + destination:undefined,
  383 + agent:undefined,
  384 + code:undefined,
  385 + goods:undefined,
  386 + voucher:undefined,
  387 + warehousing:undefined,
  388 + radio:undefined,
  389 + },
  390 + tableData1:[],
  391 + tableData2:[],
  392 + forms: {
  393 + uld:undefined,
  394 + number:undefined,
  395 + machine:undefined,
  396 + position:undefined,
  397 + plate:undefined,
  398 + },
  399 + dialogFormVisible: false,
  400 + dialogForm1Visible: false,
  401 + dialogFormVisibles: false,
  402 + radio: 3,
  403 + formLabelWidth: '120px',
  404 + formLabelWidths: '120px',
  405 + formLabelWidthd: '120px',
  406 + operation: [{
  407 + value: '操作1',
  408 + label: '操作1'
  409 + }, {
  410 + value: '操作2',
  411 + label: '操作2'
  412 + }],
  413 + goods: [{
  414 + value: '是',
  415 + label: '是'
  416 + }, {
  417 + value: '否',
  418 + label: '否'
  419 + }],
  420 + }
  421 + },
  422 + methods: {
  423 + onSubmit() {
  424 + console.log('submit!');
  425 + },
  426 + handleSelectionChange(val) {
  427 + this.multipleSelection = val;
  428 + }
  429 + }
  430 + }
  431 +</script>
  1 +<template>
  2 + <div class="bg order">
  3 + <span class="air">空运服务-订舱确认</span>
  4 + <div class="px">
  5 +<!-- 发件人信息-->
  6 + <h4 class="title">发件人信息</h4>
  7 + <div class="r-table">
  8 + <table class="tb" width="100%">
  9 + <tbody>
  10 + <tr>
  11 + <th width="15%">姓名</th>
  12 + <td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
  13 + <th width="15%">联系电话</th>
  14 + <td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
  15 + <th width="15%">公司</th>
  16 + <td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
  17 + </tr>
  18 + <tr>
  19 + <th width="15%">税号</th>
  20 + <td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
  21 + <th width="15%">邮编</th>
  22 + <td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
  23 + <th width="15%">省市区</th>
  24 + <td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
  25 + </tr>
  26 + <tr>
  27 + <th colspan="1">详细地址</th>
  28 + <td colspan="5"><el-input v-model="input" placeholder="" ></el-input></td>
  29 + </tr>
  30 + </tbody>
  31 + </table>
  32 + </div>
  33 +<!-- 收件人信息-->
  34 + <h4 class="title">收件人信息</h4>
  35 + <div class="r-table">
  36 + <table class="tb" width="100%">
  37 + <tbody>
  38 + <tr>
  39 + <th width="15%">姓名</th>
  40 + <td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
  41 + <th width="15%">联系电话</th>
  42 + <td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
  43 + <th width="15%">公司</th>
  44 + <td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
  45 + </tr>
  46 + <tr>
  47 + <th width="15%">邮箱</th>
  48 + <td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
  49 + <th width="15%">身份证/护照</th>
  50 + <td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
  51 + <th width="15%">税号</th>
  52 + <td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
  53 + </tr>
  54 + <tr>
  55 + <th width="15%">国家</th>
  56 + <td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
  57 + <th width="15%">省/州</th>
  58 + <td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
  59 + <th width="15%">城市</th>
  60 + <td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
  61 + </tr>
  62 + <tr>
  63 + <th colspan="1">详细地址</th>
  64 + <td colspan="5"><el-input v-model="input" placeholder="" ></el-input></td>
  65 + </tr>
  66 + <tr>
  67 + <th colspan="1">邮编</th>
  68 + <td colspan="5"><el-input v-model="input" placeholder="" ></el-input></td>
  69 + </tr>
  70 + </tbody>
  71 + </table>
  72 + </div>
  73 +<!-- 货件信息-->
  74 + <h4 class="title">货件信息</h4>
  75 + <div class="r-table">
  76 + <table class="tb" width="100%">
  77 + <tbody>
  78 + <tr>
  79 + <th width="15%">客户单号</th>
  80 + <td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
  81 + <th width="15%">总件数</th>
  82 + <td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
  83 + <th width="15%">总重量(kg)</th>
  84 + <td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
  85 + </tr>
  86 + <tr>
  87 + <th width="15%">总体积(m³)</th>
  88 + <td width="18%"><el-input v-model="input" placeholder="" ></el-input></td>
  89 + <th width="15%">包裹</th>
  90 + <td width="18%">
  91 + <el-input v-model="input" placeholder="长" style="width: 60px" ></el-input>×
  92 + <el-input v-model="input" placeholder="宽" style="width: 60px" ></el-input>×
  93 + <el-input v-model="input" placeholder="高" style="width: 60px" ></el-input>
  94 +
  95 + </td>
  96 + <th width="15%">是否退件</th>
  97 + <td width="18%">
  98 + <el-select v-model="value" placeholder="请选择">
  99 + <el-option
  100 + v-for="item in options"
  101 + :key="item.value"
  102 + :label="item.label"
  103 + :value="item.value">
  104 + </el-option>
  105 + </el-select>
  106 + </td>
  107 + </tr>
  108 + <tr>
  109 + <th width="15%">运输方式</th>
  110 + <td width="18%">
  111 + <el-select v-model="value" placeholder="请选择">
  112 + <el-option
  113 + v-for="item in options"
  114 + :key="item.value"
  115 + :label="item.label"
  116 + :value="item.value">
  117 + </el-option>
  118 + </el-select>
  119 + </td>
  120 + <th width="15%">是否带电</th>
  121 + <td width="18%">
  122 + <el-select v-model="value" placeholder="请选择">
  123 + <el-option
  124 + v-for="item in options"
  125 + :key="item.value"
  126 + :label="item.label"
  127 + :value="item.value">
  128 + </el-option>
  129 + </el-select>
  130 + </td>
  131 + <th width="15%">运费付款方式</th>
  132 + <td width="18%">
  133 + <el-select v-model="value" placeholder="请选择">
  134 + <el-option
  135 + v-for="item in options"
  136 + :key="item.value"
  137 + :label="item.label"
  138 + :value="item.value">
  139 + </el-option>
  140 + </el-select>
  141 + </td>
  142 + </tr>
  143 + <tr>
  144 + <th width="15%">税金支付方式</th>
  145 + <td width="18%">
  146 + <el-select v-model="value" placeholder="请选择">
  147 + <el-option
  148 + v-for="item in options"
  149 + :key="item.value"
  150 + :label="item.label"
  151 + :value="item.value">
  152 + </el-option>
  153 + </el-select>
  154 + </td>
  155 + <th width="15%">一般贸易报关出口</th>
  156 + <td width="18%">
  157 + <el-select v-model="value" placeholder="请选择">
  158 + <el-option
  159 + v-for="item in options"
  160 + :key="item.value"
  161 + :label="item.label"
  162 + :value="item.value">
  163 + </el-option>
  164 + </el-select>
  165 + </td>
  166 + <th width="15%">一般贸易报关进口</th>
  167 + <td width="18%">
  168 + <el-select v-model="value" placeholder="请选择">
  169 + <el-option
  170 + v-for="item in options"
  171 + :key="item.value"
  172 + :label="item.label"
  173 + :value="item.value">
  174 + </el-option>
  175 + </el-select>
  176 + </td>
  177 + </tr>
  178 + <tr>
  179 + <th colspan="1">贸易条款</th>
  180 + <td colspan="1"><el-input v-model="input" placeholder="" ></el-input></td>
  181 + <th colspan="1">出口原因</th>
  182 + <td colspan="6">
  183 + <el-select v-model="value" placeholder="请选择" style="width: 100%">
  184 + <el-option
  185 + v-for="item in options"
  186 + :key="item.value"
  187 + :label="item.label"
  188 + :value="item.value">
  189 + </el-option>
  190 + </el-select>
  191 + </td>
  192 +
  193 + </tr>
  194 + <tr>
  195 + <th colspan="1">商业发票备注</th>
  196 + <td colspan="5"><el-input v-model="input" placeholder="" ></el-input></td>
  197 + </tr>
  198 + </tbody>
  199 + </table>
  200 + </div>
  201 +<!-- 货物信息-->
  202 + <h4 class="title">货物信息</h4>
  203 + <div class="r-table order">
  204 + <table class="tb" width="100%">
  205 + <tbody>
  206 + <tr>
  207 + <th width="9%">中文名</th>
  208 + <th width="13%">英文名</th>
  209 + <th width="9%">材质</th>
  210 + <th width="9%">申报价值(单价)</th>
  211 + <th width="5%">数量</th>
  212 + <th width="9%">申报价值(总价)</th>
  213 + <th width="9%">原产地</th>
  214 + <th width="9%">海关货物编号</th>
  215 + <th width="9%">配货名称</th>
  216 + <th width="12%">配货备注</th>
  217 + <th width="7%">操作</th>
  218 + </tr>
  219 + <tr>
  220 + <td width="9%"><el-input v-model="input" placeholder="" ></el-input></td>
  221 + <td width="13%"><el-input v-model="input" placeholder="" ></el-input></td>
  222 + <td width="9%"><el-input v-model="input" placeholder="" ></el-input></td>
  223 + <td width="9%"><el-input v-model="input" placeholder="" ></el-input></td>
  224 + <td width="5%"><el-input v-model="input" placeholder="" ></el-input></td>
  225 + <td width="9%"><el-input v-model="input" placeholder="" ></el-input></td>
  226 + <td width="9%"><el-input v-model="input" placeholder="" ></el-input></td>
  227 + <td width="9%"><el-input v-model="input" placeholder="" ></el-input></td>
  228 + <td width="9%"><el-input v-model="input" placeholder="" ></el-input></td>
  229 + <td width="12%"><el-input v-model="input" placeholder="" ></el-input></td>
  230 + <td width="7%" style="text-align: center">
  231 + <el-button icon="el-icon-plus" size="mini" circle></el-button>
  232 + <el-button icon="el-icon-minus" size="mini" circle></el-button>
  233 + </td>
  234 + </tr>
  235 + </tbody>
  236 + </table>
  237 + </div>
  238 + <div style="text-align: center;margin-top: 30px">
  239 + <el-button type="danger" style="width: 180px;height: 50px">确认下单</el-button>
  240 + </div>
  241 + <div style="margin-top: 50px;height: 80px"> </div>
  242 + </div>
  243 + </div>
  244 +</template>
  245 +
  246 +<script>
  247 + export default {
  248 + name: "airlift"
  249 + }
  250 +</script>
  251 +
  252 +<style scoped>
  253 + .bg{
  254 + background-color: #F2F2F2;
  255 + }
  256 + .air{
  257 + font-size: 20px;
  258 + color: #308aee;
  259 + margin-top: 20px;
  260 + display: block;
  261 + }
  262 + .px{
  263 + background-color: #FFFFFF;
  264 + width: 100%;
  265 + height: 500px;
  266 + }
  267 + .title{
  268 + color: #127ef2;
  269 + font-size: 16px;
  270 + font-weight: bold;
  271 + margin: 20px 30px;
  272 + text-align: left;
  273 + }
  274 + .r-table .tb > tbody > tr > th {
  275 + background-color: #d8ecff;
  276 + text-align: center;
  277 + }
  278 + .r-table .tb > tbody > tr > td {
  279 + /*padding: 4px; （间接决定了行高）*/
  280 + /*display: table-cell;*/
  281 + }
  282 +
  283 +</style>
  1 +<template>
  2 + <div class="bg">
  3 + <el-container>
  4 +<!-- 顶栏区域-->
  5 + <el-header style="height: 120px">
  6 + <el-row class="header">
  7 + <el-col :span="9">
  8 + <span style="font-size: 50px">KT际通</span>
  9 + <span>在线订舱平台</span>
  10 + </el-col>
  11 + <el-col :span="13" style="margin-left: 30px;margin-top: 30px;width: 300px ">
  12 + <el-menu :default-active="activeIndex"
  13 + class="el-menu-demo"
  14 + mode="horizontal"
  15 + @select="handleSelect"
  16 + style="text-color:#303133;active-text-color:#FFF">
  17 + <el-menu-item index="1">首 页</el-menu-item>
  18 + <el-menu-item index="2">行业方案</el-menu-item>
  19 + <el-menu-item index="3">关于我们</el-menu-item>
  20 + </el-menu>
  21 + </el-col>
  22 + </el-row>
  23 + </el-header>
  24 +<!-- 主要区域-->
  25 + <el-main>
  26 +<!-- 空运查询内容-->
  27 + <el-row style="margin-top: 30px">
  28 + <el-col :span="10" style="margin-right: 10px;background-color: #FFF;">
  29 + <div style="height: 600px;">
  30 + <div style="width: 100%;height: 80px;border-bottom: solid 2px #29A1F7;">
  31 + <el-col :span="15" style="margin-left: 0px;margin-top: 20px;">
  32 + <span style="font-size: 25px;margin-left: 50px">空运查询</span>
  33 + </el-col>
  34 + <el-col :span="8" style="margin-top: 23px;">
  35 + <span style="font-size: 17px">约计3000条航线数据</span>
  36 + </el-col>
  37 + </div>
  38 + <el-row>
  39 + <el-form ref="form" :model="form" label-width="80px" style="font-size: 50px;" >
  40 + <el-form-item label="航程方向" >
  41 + <el-radio-group v-model="form.resource">
  42 + <el-radio style="padding-left: 20px" label="出口"></el-radio>
  43 + <el-radio label="进口"></el-radio>
  44 + </el-radio-group>
  45 + </el-form-item>
  46 + <el-form-item label="起运地">
  47 + <el-select style="width: 320px" v-model="form.region" placeholder="起运地">
  48 + <el-option label="上海" value="shanghai"></el-option>
  49 + <el-option label="北京" value="beijing"></el-option>
  50 + </el-select>
  51 + </el-form-item>
  52 + <el-form-item label="目的地">
  53 + <el-select style="width: 320px" v-model="form.region" placeholder="目的地">
  54 + <el-option label="上海" value="shanghai"></el-option>
  55 + <el-option label="北京" value="beijing"></el-option>
  56 + </el-select>
  57 + </el-form-item>
  58 + <el-form-item label="货物重量">
  59 + <el-input style="width: 320px" v-model="form.name" placeholder="单位：KG"></el-input>
  60 + </el-form-item>
  61 + <div style="padding-left: 150px">
  62 + <el-button style="background-color: #F18F4C;color: #FFF">查价下单</el-button>
  63 + </div>
  64 +
  65 + </el-form>
  66 + <div style="width: 100%;height: 200px;margin-top: 30px;padding-left: 50px;border-top: dashed 2px #D5D5D5;">
  67 + <p>
  68 + <span><i class="el-icon-phone" style="color: #29A1F7;padding-right: 5px"></i>一键订舱，方便快捷</span>
  69 + </p>
  70 + <p>
  71 + <span><i class="el-icon-edit-outline" style="color: #29A1F7;padding-right: 5px"></i>数据准确，专有团队维护</span>
  72 + </p>
  73 + <span><i class="el-icon-location-information" style="color: #29A1F7;padding-right: 5px"></i>货物在线跟踪</span>
  74 + </div>
  75 + </el-row>
  76 + </div>
  77 + </el-col>
  78 +<!-- 广告位-->
  79 + <el-col :span="13" style="margin-right: 0px;background-color: rgba(41,161,247,0.1);float: right;">
  80 + <div style="height: 600px;">
  81 + </div>
  82 + </el-col>
  83 + </el-row>
  84 +<!-- 优价航线标题栏-->
  85 + <el-row style="margin-top: 30px">
  86 + <span style="font-size: 25px">优价航线</span>
  87 + </el-row>
  88 +<!-- 优价航线内容-->
  89 + <el-row style="background-color: #FFF;height: 300px;">
  90 + <el-table
  91 + :data="tableData"
  92 + style="width: 100%">
  93 + <el-table-column
  94 + prop="a"
  95 + label="航行路线">
  96 + </el-table-column>
  97 + <el-table-column
  98 + prop="b"
  99 + label="运输时效">
  100 + </el-table-column>
  101 + <el-table-column
  102 + prop="c"
  103 + label="交货地">
  104 + </el-table-column>
  105 + <el-table-column
  106 + prop="d"
  107 + label="航班周期">
  108 + </el-table-column>
  109 + <el-table-column
  110 + prop="e"
  111 + label="最低价格">
  112 + </el-table-column>
  113 + <el-table-column
  114 + fixed="right"
  115 + label=""
  116 + width="120">
  117 + <template slot-scope="scope">
  118 + <el-button
  119 + size="small" plain
  120 + type="warning"
  121 + @click="">订舱</el-button>
  122 + </template>
  123 + </el-table-column>
  124 + </el-table>
  125 + </el-row>
  126 +<!-- 热门航线标题栏-->
  127 + <el-row style="margin-top: 30px">
  128 + <span style="font-size: 25px">热门航线</span>
  129 + </el-row>
  130 +<!-- 热门航线内容-->
  131 + <el-row style="background-color: #FFF;height: 680px;">
  132 + <el-col :span="24">
  133 + <el-tabs type="border-card" style="width: 100%;height: 680px" stretch="true">
  134 + <el-tab-pane>
  135 + <span slot="label"><i class="el-icon-right"></i>出口航线</span>
  136 + <el-row style="height: 300px;margin-top: 0px">
  137 + <el-col :span="8"
  138 + style="border-right:solid 1px #F5F5F5;border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">
  139 + <h2>CZ</h2>
  140 + <el-table
  141 + :data="tableData1"
  142 + :header-cell-style="headClass"
  143 + :cell-style="rowClass"
  144 + style="width: 100%;background-color: #F5F5F5">
  145 + <el-table-column
  146 + prop="a"
  147 + label="航段">
  148 + </el-table-column>
  149 + <el-table-column
  150 + prop="b"
  151 + label="时效">
  152 + </el-table-column>
  153 + <el-table-column
  154 + prop="c"
  155 + label="周期">
  156 + </el-table-column>
  157 + <el-table-column
  158 + prop="d"
  159 + label="航运价">
  160 + </el-table-column>
  161 + </el-table>
  162 + <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
  163 + <div style="text-align: center;margin-top: 6px">
  164 + <el-button type="warning" plain style="width: 120px" >订舱</el-button>
  165 + </div>
  166 + </el-col>
  167 + <el-col :span="8"
  168 + style="border-right:solid 1px #F5F5F5;border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">
  169 + <h2>CZ</h2>
  170 + <el-table
  171 + :data="tableData1"
  172 + :header-cell-style="headClass"
  173 + :cell-style="rowClass"
  174 + style="width: 100%;background-color: #F5F5F5">
  175 + <el-table-column
  176 + prop="a"
  177 + label="航段">
  178 + </el-table-column>
  179 + <el-table-column
  180 + prop="b"
  181 + label="时效">
  182 + </el-table-column>
  183 + <el-table-column
  184 + prop="c"
  185 + label="周期">
  186 + </el-table-column>
  187 + <el-table-column
  188 + prop="d"
  189 + label="航运价">
  190 + </el-table-column>
  191 + </el-table>
  192 + <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
  193 + <div style="text-align: center;margin-top: 6px">
  194 + <el-button type="warning" plain style="width: 120px" >订舱</el-button>
  195 + </div>
  196 + </el-col>
  197 + <el-col :span="8"
  198 + style="border-bottom:solid 1px #F5F5F5;height: 300px;width: 32%">
  199 + <h2>CZ</h2>
  200 + <el-table
  201 + :data="tableData1"
  202 + :header-cell-style="headClass"
  203 + :cell-style="rowClass"
  204 + style="width: 100%;background-color: #F5F5F5">
  205 + <el-table-column
  206 + prop="a"
  207 + label="航段">
  208 + </el-table-column>
  209 + <el-table-column
  210 + prop="b"
  211 + label="时效">
  212 + </el-table-column>
  213 + <el-table-column
  214 + prop="c"
  215 + label="周期">
  216 + </el-table-column>
  217 + <el-table-column
  218 + prop="d"
  219 + label="航运价">
  220 + </el-table-column>
  221 + </el-table>
  222 + <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
  223 + <div style="text-align: center;margin-top: 6px">
  224 + <el-button type="warning" plain style="width: 120px" >订舱</el-button>
  225 + </div>
  226 + </el-col>
  227 + </el-row>
  228 + <el-row style="height: 300px;margin-top: 0px">
  229 + <el-col :span="8"
  230 + style="border-right:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">
  231 + <h2>CZ</h2>
  232 + <el-table
  233 + :data="tableData1"
  234 + :header-cell-style="headClass"
  235 + :cell-style="rowClass"
  236 + style="width: 100%;background-color: #F5F5F5">
  237 + <el-table-column
  238 + prop="a"
  239 + label="航段">
  240 + </el-table-column>
  241 + <el-table-column
  242 + prop="b"
  243 + label="时效">
  244 + </el-table-column>
  245 + <el-table-column
  246 + prop="c"
  247 + label="周期">
  248 + </el-table-column>
  249 + <el-table-column
  250 + prop="d"
  251 + label="航运价">
  252 + </el-table-column>
  253 + </el-table>
  254 + <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
  255 + <div style="text-align: center;margin-top: 6px">
  256 + <el-button type="warning" plain style="width: 120px" >订舱</el-button>
  257 + </div>
  258 + </el-col>
  259 + <el-col :span="8"
  260 + style="border-right:solid 1px #F5F5F5;height: 300px;width: 32%;margin-right: 15px">
  261 + <h2>CZ</h2>
  262 + <el-table
  263 + :data="tableData1"
  264 + :header-cell-style="headClass"
  265 + :cell-style="rowClass"
  266 + style="width: 100%;background-color: #F5F5F5">
  267 + <el-table-column
  268 + prop="a"
  269 + label="航段">
  270 + </el-table-column>
  271 + <el-table-column
  272 + prop="b"
  273 + label="时效">
  274 + </el-table-column>
  275 + <el-table-column
  276 + prop="c"
  277 + label="周期">
  278 + </el-table-column>
  279 + <el-table-column
  280 + prop="d"
  281 + label="航运价">
  282 + </el-table-column>
  283 + </el-table>
  284 + <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
  285 + <div style="text-align: center;margin-top: 6px">
  286 + <el-button type="warning" plain style="width: 120px" >订舱</el-button>
  287 + </div>
  288 + </el-col>
  289 + <el-col :span="8"
  290 + style="height: 300px;width: 32%">
  291 + <h2>CZ</h2>
  292 + <el-table
  293 + :data="tableData1"
  294 + :header-cell-style="headClass"
  295 + :cell-style="rowClass"
  296 + style="width: 100%;background-color: #F5F5F5">
  297 + <el-table-column
  298 + prop="a"
  299 + label="航段">
  300 + </el-table-column>
  301 + <el-table-column
  302 + prop="b"
  303 + label="时效">
  304 + </el-table-column>
  305 + <el-table-column
  306 + prop="c"
  307 + label="周期">
  308 + </el-table-column>
  309 + <el-table-column
  310 + prop="d"
  311 + label="航运价">
  312 + </el-table-column>
  313 + </el-table>
  314 + <div style="text-align: center;margin-top: 6px">交货地:GUANGZHOU AIRPORT 广州</div>
  315 + <div style="text-align: center;margin-top: 6px">
  316 + <el-button type="warning" plain style="width: 120px" >订舱</el-button>
  317 + </div>
  318 + </el-col>
  319 + </el-row>
  320 + </el-tab-pane>
  321 + <el-tab-pane label="进口航线">
  322 + <span slot="label"><i class="el-icon-back"></i>进口航线</span>
  323 + </el-tab-pane>
  324 + <el-tab-pane label="空运专线">
  325 + <span slot="label"><i class="el-icon-star-off"></i>空运专线</span>
  326 + </el-tab-pane>
  327 + </el-tabs>
  328 + </el-col>
  329 + </el-row>
  330 +<!-- 热门港口标题栏-->
  331 + <el-row style="margin-top: 30px">
  332 + <span style="font-size: 25px">热门港口</span>
  333 + </el-row>
  334 +<!-- 热门港口内容-->
  335 + <el-row style="background-color: #FFF;height: 300px;padding: 25px">
  336 + <el-col :span="24">
  337 + <el-tabs :tab-position="tabPosition" style="width: 100%;height: 280px;">
  338 + <el-tab-pane label="北京">
  339 + <el-table
  340 + :data="tableData"
  341 + style="width: 100%">
  342 + <el-table-column
  343 + prop="a"
  344 + label="航行路线">
  345 + </el-table-column>
  346 + <el-table-column
  347 + prop="b"
  348 + label="运输时效">
  349 + </el-table-column>
  350 + <el-table-column
  351 + prop="c"
  352 + label="交货地">
  353 + </el-table-column>
  354 + <el-table-column
  355 + prop="d"
  356 + label="航班周期">
  357 + </el-table-column>
  358 + <el-table-column
  359 + fixed="right"
  360 + label=""
  361 + width="120">
  362 + <template slot-scope="scope">
  363 + <el-button
  364 + size="small" plain
  365 + type="warning"
  366 + @click="">订舱</el-button>
  367 + </template>
  368 + </el-table-column>
  369 + </el-table>
  370 + </el-tab-pane>
  371 + <el-tab-pane label="上海">上海</el-tab-pane>
  372 + <el-tab-pane label="深圳">深圳</el-tab-pane>
  373 + <el-tab-pane label="广州">广州</el-tab-pane>
  374 + <el-tab-pane label="宁波">宁波</el-tab-pane>
  375 + </el-tabs>
  376 + </el-col>
  377 + </el-row>
  378 +<!-- 查询工具-->
  379 + <el-row style="background-color: #FFF;height: 180px;margin-top: 60px">
  380 + <el-col :span="24">
  381 + <el-tabs :tab-position="tabPositions" style="width: 80%;height: 280px;margin: 20px">
  382 + <el-tab-pane label="机场代码查询">
  383 + <span style="font-size: 25px">机场代码查询</span>
  384 + <span style="font-size: 15px">（收录2016年IATA最新机场三字代码、城市三字代码。）</span>
  385 + <el-input v-model="input" placeholder="请输入内容"></el-input>
  386 + </el-tab-pane>
  387 + <el-tab-pane label="商品编码查询">
  388 + <span style="font-size: 25px">商品编码查询</span>
  389 + <span style="font-size: 15px">（提供海关HScode编码、对应税率、申报要素查询服务，根据海关最新政策实时更新。）</span>
  390 + <el-input v-model="input" placeholder="请输入内容"></el-input>
  391 + </el-tab-pane>
  392 + <el-tab-pane label="全球港口查询">
  393 + <span style="font-size: 25px">全球港口查询</span>
  394 + <span style="font-size: 15px">（收录2016年IATA最新机场三字代码、城市三字代码。）</span>
  395 + <el-input v-model="input" placeholder="请输入内容"></el-input>
  396 + </el-tab-pane>
  397 + <el-tab-pane label="空运货物查询">
  398 + <span style="font-size: 25px">空运货物查询</span>
  399 + <span style="font-size: 15px">（提供世界各国航空公司货物追踪、货物查询服务，实时追踪最新货况。）</span>
  400 + <el-input v-model="input" placeholder="请输入内容"></el-input>
  401 + </el-tab-pane>
  402 + <el-tab-pane label="快件跟踪查询">
  403 + <span style="font-size: 25px">快件跟踪查询</span>
  404 + <span style="font-size: 15px"></span>
  405 + <el-input v-model="input" placeholder="请输入内容"></el-input>
  406 + </el-tab-pane>
  407 + </el-tabs>
  408 + </el-col>
  409 + </el-row>
  410 + </el-main>
  411 + </el-container>
  412 + </div>
  413 +</template>
  414 +
  415 +<script>
  416 + export default {
  417 + data() {
  418 + return {
  419 + form: {},
  420 + tableData:[
  421 + {
  422 + a: 'PEK- FRA',
  423 + b: '2-3 天',
  424 + c: 'BEIJING AIRPORT',
  425 + d: '1234567',
  426 + e: '￥ 23.50/kg 起',
  427 + },
  428 + {
  429 + a: 'PEK- FRA',
  430 + b: '2-3 天',
  431 + c: 'BEIJING AIRPORT',
  432 + d: '1234567',
  433 + e: '￥ 23.50/kg 起',
  434 + },
  435 + {
  436 + a: 'PEK- FRA',
  437 + b: '2-3 天',
  438 + c: 'BEIJING AIRPORT',
  439 + d: '1234567',
  440 + e: '￥ 23.50/kg 起',
  441 + },
  442 + ],
  443 + tableData1:[
  444 + {
  445 + a: 'PEK- FRA',
  446 + b: '2-3 天',
  447 + c: '1234567',
  448 + d: '$34.00/kg起',
  449 + },
  450 + ],
  451 + tabPosition: 'left',
  452 + tabPositions: 'bottom',
  453 + }
  454 + },
  455 + methods: {
  456 + headClass () {
  457 + return 'text-align: center;background:#F5F5F5;'
  458 + },
  459 + rowClass () {
  460 + return 'text-align: center;background:#F5F5F5;'
  461 + }
  462 + },
  463 + }
  464 +</script>
  465 +
  466 +<style scoped>
  467 + .bg{
  468 + background-color: #F2F2F2;
  469 + }
  470 + .header{
  471 + font-size: 20px;
  472 + line-height: 120px;
  473 + color:#FFF;
  474 + }
  475 + .el-header{
  476 + background-color: #29A1F7;
  477 + }
  478 + .el-tabs{
  479 + width: 250px;
  480 + }
  481 + .el-menu{
  482 + background-color: #29A1F7;
  483 + font-size: 20px;
  484 + border-bottom-color: #29A1F7;
  485 + }
  486 +</style>
  1 +<template>
  2 + <el-container>
  3 + <el-main style="background-color: #EAEAEA">
  4 +<!-- 航班号查询-->
  5 + <el-row style="height: 180px">
  6 + <el-col :span="24">
  7 + <el-row>
  8 + <p style="font-size: 28px">航班号查询</p>
  9 + </el-row>
  10 + <el-row>
  11 + <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
  12 + <el-button slot="append" icon="el-icon-search"></el-button>
  13 + </el-input>
  14 + </el-row>
  15 + </el-col>
  16 + </el-row>
  17 +<!-- 条件查询-->
  18 + <el-row style="">
  19 + <el-col :span="24">
  20 + <el-row>
  21 + <p style="font-size: 28px">条件查询</p>
  22 + </el-row>
  23 + <el-row>
  24 + <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 100%">
  25 + <el-tab-pane label="国内出港" name="first">
  26 + <div style=";margin-top: 15px">
  27 + <el-time-picker
  28 + v-model="value1"
  29 + :picker-options="{selectableRange: '18:30:00 - 20:30:00' }"
  30 + placeholder="任意时间点"
  31 + style="width: 140px">
  32 + </el-time-picker>
  33 + <el-time-picker
  34 + arrow-control
  35 + v-model="value2"
  36 + :picker-options="{selectableRange: '18:30:00 - 20:30:00' }"
  37 + placeholder="任意时间点"
  38 + style="width: 140px">
  39 + </el-time-picker>
  40 + <el-select v-model="value" placeholder="目的地" style="width: 140px">
  41 + <el-option
  42 + v-for="item in options"
  43 + :key="item.value"
  44 + :label="item.label"
  45 + :value="item.value">
  46 + </el-option>
  47 + </el-select>
  48 + <el-select v-model="value" placeholder="航空公司" style="width: 140px">
  49 + <el-option
  50 + v-for="item in options"
  51 + :key="item.value"
  52 + :label="item.label"
  53 + :value="item.value">
  54 + </el-option>
  55 + </el-select>
  56 + <el-button type="primary">点击查询</el-button>
  57 + </div>
  58 + <el-row style="margin-top: 15px">
  59 + <el-col :span="23">
  60 + <el-table
  61 + :data="tableData"
  62 + style="width: 100%">
  63 + <el-table-column
  64 + prop=""
  65 + label="计划离港">
  66 + </el-table-column>
  67 + <el-table-column
  68 + prop=""
  69 + label="航班号">
  70 + </el-table-column>
  71 + <el-table-column
  72 + prop=""
  73 + label="航空公司">
  74 + </el-table-column>
  75 + <el-table-column
  76 + prop=""
  77 + label="目的地">
  78 + </el-table-column>
  79 + <el-table-column
  80 + prop=""
  81 + label="预计/实际离港">
  82 + </el-table-column>
  83 + <el-table-column
  84 + prop=""
  85 + label="状态">
  86 + </el-table-column>
  87 + <el-table-column
  88 + prop=""
  89 + label="航站楼">
  90 + </el-table-column>
  91 + </el-table>
  92 + </el-col>
  93 + </el-row>
  94 + </el-tab-pane>
  95 + <el-tab-pane label="国际/地区出港" name="second">
  96 + <div style=";margin-top: 15px">
  97 + <el-time-picker
  98 + v-model="value1"
  99 + :picker-options="{selectableRange: '18:30:00 - 20:30:00' }"
  100 + placeholder="任意时间点"
  101 + style="width: 140px">
  102 + </el-time-picker>
  103 + <el-time-picker
  104 + arrow-control
  105 + v-model="value2"
  106 + :picker-options="{selectableRange: '18:30:00 - 20:30:00' }"
  107 + placeholder="任意时间点"
  108 + style="width: 140px">
  109 + </el-time-picker>
  110 + <el-select v-model="value" placeholder="目的地" style="width: 140px">
  111 + <el-option
  112 + v-for="item in options"
  113 + :key="item.value"
  114 + :label="item.label"
  115 + :value="item.value">
  116 + </el-option>
  117 + </el-select>
  118 + <el-select v-model="value" placeholder="航空公司" style="width: 140px">
  119 + <el-option
  120 + v-for="item in options"
  121 + :key="item.value"
  122 + :label="item.label"
  123 + :value="item.value">
  124 + </el-option>
  125 + </el-select>
  126 + <el-button type="primary">点击查询</el-button>
  127 + </div>
  128 + <el-row style="margin-top: 15px">
  129 + <el-col :span="23">
  130 + <el-table
  131 + :data="tableData"
  132 + style="width: 100%">
  133 + <el-table-column
  134 + prop=""
  135 + label="计划离港">
  136 + </el-table-column>
  137 + <el-table-column
  138 + prop=""
  139 + label="航班号">
  140 + </el-table-column>
  141 + <el-table-column
  142 + prop=""
  143 + label="航空公司">
  144 + </el-table-column>
  145 + <el-table-column
  146 + prop=""
  147 + label="目的地">
  148 + </el-table-column>
  149 + <el-table-column
  150 + prop=""
  151 + label="预计/实际离港">
  152 + </el-table-column>
  153 + <el-table-column
  154 + prop=""
  155 + label="状态">
  156 + </el-table-column>
  157 + <el-table-column
  158 + prop=""
  159 + label="航站楼">
  160 + </el-table-column>
  161 + </el-table>
  162 + </el-col>
  163 + </el-row>
  164 + </el-tab-pane>
  165 + <el-tab-pane label="国内到港" name="third">
  166 + <div style=";margin-top: 15px">
  167 + <el-time-picker
  168 + v-model="value1"
  169 + :picker-options="{selectableRange: '18:30:00 - 20:30:00' }"
  170 + placeholder="任意时间点"
  171 + style="width: 140px">
  172 + </el-time-picker>
  173 + <el-time-picker
  174 + arrow-control
  175 + v-model="value2"
  176 + :picker-options="{selectableRange: '18:30:00 - 20:30:00' }"
  177 + placeholder="任意时间点"
  178 + style="width: 140px">
  179 + </el-time-picker>
  180 + <el-select v-model="value" placeholder="目的地" style="width: 140px">
  181 + <el-option
  182 + v-for="item in options"
  183 + :key="item.value"
  184 + :label="item.label"
  185 + :value="item.value">
  186 + </el-option>
  187 + </el-select>
  188 + <el-select v-model="value" placeholder="航空公司" style="width: 140px">
  189 + <el-option
  190 + v-for="item in options"
  191 + :key="item.value"
  192 + :label="item.label"
  193 + :value="item.value">
  194 + </el-option>
  195 + </el-select>
  196 + <el-button type="primary">点击查询</el-button>
  197 + </div>
  198 + <el-row style="margin-top: 15px">
  199 + <el-col :span="23">
  200 + <el-table
  201 + :data="tableData"
  202 + style="width: 100%">
  203 + <el-table-column
  204 + prop=""
  205 + label="计划离港">
  206 + </el-table-column>
  207 + <el-table-column
  208 + prop=""
  209 + label="航班号">
  210 + </el-table-column>
  211 + <el-table-column
  212 + prop=""
  213 + label="航空公司">
  214 + </el-table-column>
  215 + <el-table-column
  216 + prop=""
  217 + label="目的地">
  218 + </el-table-column>
  219 + <el-table-column
  220 + prop=""
  221 + label="预计/实际离港">
  222 + </el-table-column>
  223 + <el-table-column
  224 + prop=""
  225 + label="状态">
  226 + </el-table-column>
  227 + <el-table-column
  228 + prop=""
  229 + label="航站楼">
  230 + </el-table-column>
  231 + </el-table>
  232 + </el-col>
  233 + </el-row>
  234 + </el-tab-pane>
  235 + <el-tab-pane label="国际/地区到港" name="fourth">
  236 + <div style=";margin-top: 15px">
  237 + <el-time-picker
  238 + v-model="value1"
  239 + :picker-options="{selectableRange: '18:30:00 - 20:30:00' }"
  240 + placeholder="任意时间点"
  241 + style="width: 140px">
  242 + </el-time-picker>
  243 + <el-time-picker
  244 + arrow-control
  245 + v-model="value2"
  246 + :picker-options="{selectableRange: '18:30:00 - 20:30:00' }"
  247 + placeholder="任意时间点"
  248 + style="width: 140px">
  249 + </el-time-picker>
  250 + <el-select v-model="value" placeholder="目的地" style="width: 140px">
  251 + <el-option
  252 + v-for="item in options"
  253 + :key="item.value"
  254 + :label="item.label"
  255 + :value="item.value">
  256 + </el-option>
  257 + </el-select>
  258 + <el-select v-model="value" placeholder="航空公司" style="width: 140px">
  259 + <el-option
  260 + v-for="item in options"
  261 + :key="item.value"
  262 + :label="item.label"
  263 + :value="item.value">
  264 + </el-option>
  265 + </el-select>
  266 + <el-button type="primary">点击查询</el-button>
  267 + </div>
  268 + <el-row style="margin-top: 15px">
  269 + <el-col :span="23">
  270 + <el-table
  271 + :data="tableData"
  272 + style="width: 100%">
  273 + <el-table-column
  274 + prop=""
  275 + label="计划离港">
  276 + </el-table-column>
  277 + <el-table-column
  278 + prop=""
  279 + label="航班号">
  280 + </el-table-column>
  281 + <el-table-column
  282 + prop=""
  283 + label="航空公司">
  284 + </el-table-column>
  285 + <el-table-column
  286 + prop=""
  287 + label="目的地">
  288 + </el-table-column>
  289 + <el-table-column
  290 + prop=""
  291 + label="预计/实际离港">
  292 + </el-table-column>
  293 + <el-table-column
  294 + prop=""
  295 + label="状态">
  296 + </el-table-column>
  297 + <el-table-column
  298 + prop=""
  299 + label="航站楼">
  300 + </el-table-column>
  301 + </el-table>
  302 + </el-col>
  303 + </el-row>
  304 + </el-tab-pane>
  305 + </el-tabs>
  306 + </el-row>
  307 + <el-row>
  308 + <div>
  309 + <el-pagination
  310 + @size-change="handleSizeChange"
  311 + @current-change="handleCurrentChange"
  312 + :current-page="currentPage4"
  313 + :page-sizes="[100, 200, 300, 400]"
  314 + :page-size="100"
  315 + layout="total, sizes, prev, pager, next, jumper"
  316 + :total="400">
  317 + </el-pagination>
  318 + </div>
  319 +
  320 + </el-row>
  321 + </el-col>
  322 + </el-row>
  323 + </el-main>
  324 + </el-container>
  325 +</template>
  326 +
  327 +<script>
  328 + export default {
  329 + data() {
  330 + return {
  331 + currentPage4: 4,
  332 + activeName: 'first'
  333 + };
  334 + },
  335 + methods: {
  336 + handleSizeChange(val) {
  337 + console.log(`每页 ${val} 条`);
  338 + },
  339 + handleCurrentChange(val) {
  340 + console.log(`当前页: ${val}`);
  341 + }
  342 + },
  343 +
  344 + }
  345 +</script>
  346 +
  347 +<style scoped>
  348 +.input-with-select{
  349 + width: 450px;
  350 +}
  351 +.el-row{
  352 + margin-left: 10px;
  353 + width: 98%;
  354 + background-color: #FFFFFF;
  355 +}
  356 +</style>
  1 +<template>
  2 + <div class="bg order">
  3 + <span class="air">空运服务-订舱确认</span>
  4 + <div class="px">
  5 +<!-- 下单信息-->
  6 + <h4 class="title">下单信息</h4>
  7 + <div class="r-table">
  8 + <table class="tb">
  9 + <tbody>
  10 + <tr>
  11 + <th width="10%">航空公司</th>
  12 + <td width="10%">LH</td>
  13 + <th width="10%">起运机场</th>
  14 + <td width="10%">北京</td>
  15 + <th width="10%">目的机场</th>
  16 + <td width="10%">法兰克福</td>
  17 + <th width="10%">下单重量(KG)</th>
  18 + <td width="10%"><el-input v-model="input" placeholder="" size="mini"></el-input></td>
  19 + <th width="10%">运价单价</th>
  20 + <td width="10%">CNY 23.50/KG</td>
  21 + </tr>
  22 + <tr>
  23 + <th>报关方式</th>
  24 + <td colspan="4">
  25 + <el-radio v-model="radio" label="1">自理报关</el-radio>
  26 + <el-radio v-model="radio" label="2">委托报关</el-radio>
  27 + </td>
  28 + <th rowspan="4">附加费</th>
  29 + <td colspan="3">操作费： CNY 0.00/票</td>
  30 + <td><el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="">
  31 + </el-input-number></td>
  32 + </tr>
  33 + <tr>
  34 + <th rowspan="3">门到门服务</th>
  35 + <td colspan="4"><el-checkbox v-model="checked">上门提货</el-checkbox></td>
  36 + <td colspan="3">制单费： CNY 50.00/票</td>
  37 + <td><el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="">
  38 + </el-input-number></td>
  39 + </tr>
  40 + <tr>
  41 + <td colspan="4" rowspan="2"><el-checkbox v-model="checked">清关派送</el-checkbox></td>
  42 + <td colspan="3">订舱预录费： CNY 30.00 /票</td>
  43 + <td><el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="">
  44 + </el-input-number></td>
  45 + </tr>
  46 + <tr>
  47 + <td colspan="4">地面操作费： CNY 0/KG</td>
  48 + </tr>
  49 + <tr>
  50 + <th>预估费用</th>
  51 + <td colspan="3">运费：CNY 23500.00 (最低100.00KG 起运)</td>
  52 + <td colspan="3">附加费：CNY 230.00</td>
  53 + <td colspan="3"> 共计：CNY 23730.00</td>
  54 + </tr>
  55 + </tbody>
  56 + </table>
  57 + </div>
  58 +<!-- 货物信息-->
  59 + <h4 class="title">货物信息</h4>
  60 + <div class="r-table">
  61 + <table class="tb" width="100%">
  62 + <tbody>
  63 + <tr>
  64 + <th width="35%">*是否有电池、液体、粉末、磁性及其它违禁物品</th>
  65 + <td width="15%">
  66 + <el-radio v-model="radio1" label="1">是</el-radio>
  67 + <el-radio v-model="radio1" label="2">否</el-radio></td>
  68 + <th width="35%">*是否购买保险</th>
  69 + <td width="15%">
  70 + <el-radio v-model="radio4" label="1">是</el-radio>
  71 + <el-radio v-model="radio4" label="2">否</el-radio></td>
  72 + </tr>
  73 + <tr>
  74 + <th width="35%">*是否超长托盘</th>
  75 + <td width="15%">
  76 + <el-radio v-model="radio1" label="1">是</el-radio>
  77 + <el-radio v-model="radio1" label="2">否</el-radio></td>
  78 + <th width="35%">*是否名牌</th>
  79 + <td width="15%">
  80 + <el-radio v-model="radio4" label="1">是</el-radio>
  81 + <el-radio v-model="radio4" label="2">否</el-radio></td>
  82 + </tr>
  83 + </tbody>
  84 + </table>
  85 + <table class="tb" style="margin-top: 10px;width: 100%">
  86 + <tbody>
  87 + <tr>
  88 + <th width="20%">中文品名</th>
  89 + <th width="20%">英文品名</th>
  90 + <th width="10%">*数量(件)</th>
  91 + <th width="10%">*实重（KG）</th>
  92 + <th width="10%">*总体积（CBM）</th>
  93 + <th width="20%">最大尺寸(长x宽x高)</th>
  94 + <th width="10%">操作</th>
  95 + </tr>
  96 + <tr>
  97 + <td><el-input v-model="input" placeholder="" size="mini"></el-input></td>
  98 + <td><el-input v-model="input" placeholder="" size="mini"></el-input></td>
  99 + <td><el-input v-model="input" placeholder="" size="mini"></el-input></td>
  100 + <td><el-input v-model="input" placeholder="" size="mini"></el-input></td>
  101 + <td><el-input v-model="input" placeholder="" size="mini"></el-input></td>
  102 + <td><el-input v-model="input" placeholder="" size="mini"></el-input></td>
  103 + <td><el-button icon="el-icon-plus" size="mini" circle></el-button>
  104 + <el-button icon="el-icon-minus" size="mini" circle></el-button></td>
  105 + </tr>
  106 + </tbody>
  107 + </table>
  108 + </div>
  109 +<!-- 收发件通知人信息-->
  110 + <div class="r-table" style="margin-top: 35px">
  111 + <el-collapse v-model="activeNames" @change="handleChange" class="col">
  112 + <el-collapse-item title="发件人信息" name="1">
  113 + <table class="tb" width="100%">
  114 + <tbody>
  115 + <tr>
  116 + <th width="15%">姓名</th>
  117 + <td width="35%"><el-input v-model="input" placeholder="" ></el-input></td>
  118 + <th width="15%">联系电话</th>
  119 + <td width="35%"><el-input v-model="input" placeholder="" ></el-input></td>
  120 + </tr>
  121 + <tr>
  122 + <th colspan="1">公司</th>
  123 + <td colspan="3"><el-input v-model="input" placeholder="" ></el-input></td>
  124 + </tr>
  125 + <tr>
  126 + <th colspan="1">详细地址 </th>
  127 + <td colspan="3"><el-input v-model="input" placeholder="" ></el-input></td>
  128 + </tr>
  129 + </tbody>
  130 + </table>
  131 + </el-collapse-item>
  132 + <el-collapse-item title="收件人信息" name="2" class="father">
  133 + <div class="relative">
  134 + <el-button type="text" @click="dialogTableVisible = true">收件地址库</el-button>
  135 + <el-checkbox v-model="checked1" style="margin-left: 20px">加入地址库</el-checkbox>
  136 + </div>
  137 + <table class="tb" width="100%">
  138 + <tbody>
  139 + <tr>
  140 + <th width="15%">姓名</th>
  141 + <td width="35"><el-input v-model="input" placeholder="" ></el-input></td>
  142 + <th width="15%">联系电话</th>
  143 + <td width="35%"><el-input v-model="input" placeholder="" ></el-input></td>
  144 + </tr>
  145 + <tr>
  146 + <th colspan="1">公司</th>
  147 + <td colspan="3"><el-input v-model="input" placeholder="" ></el-input></td>
  148 + </tr>
  149 + <tr>
  150 + <th colspan="1">详细地址</th>
  151 + <td colspan="3"><el-input v-model="input" placeholder="" ></el-input></td>
  152 + </tr>
  153 + <tr>
  154 + <th colspan="1">特殊信息</th>
  155 + <td colspan="3"><el-input v-model="input" placeholder="" ></el-input></td>
  156 + </tr>
  157 + </tbody>
  158 + </table>
  159 + </el-collapse-item>
  160 + <el-collapse-item title="通知人信息" name="3" class="father">
  161 + <div class="relative"><el-checkbox v-model="checked">同收件人</el-checkbox></div>
  162 + <table class="tb" width="100%">
  163 + <tbody>
  164 + <tr>
  165 + <th width="15%">姓名</th>
  166 + <td width="35%"><el-input v-model="input" placeholder="" ></el-input></td>
  167 + <th width="15%">联系电话</th>
  168 + <td width="35%"><el-input v-model="input" placeholder="" ></el-input></td>
  169 + </tr>
  170 + <tr>
  171 + <th colspan="1">公司</th>
  172 + <td colspan="3"><el-input v-model="input" placeholder="" ></el-input></td>
  173 + </tr>
  174 + <tr>
  175 + <th colspan="1">详细地址</th>
  176 + <td colspan="3"><el-input v-model="input" placeholder="" ></el-input></td>
  177 + </tr>
  178 + <tr>
  179 + <th colspan="1">特殊信息</th>
  180 + <td colspan="3"><el-input v-model="input" placeholder="" ></el-input></td>
  181 + </tr>
  182 + </tbody>
  183 + </table>
  184 + </el-collapse-item>
  185 + </el-collapse>
  186 + </div>
  187 + <div style="text-align: center;margin-top: 30px">
  188 + <el-button type="danger" style="width: 180px;height: 50px">确认下单</el-button>
  189 + </div>
  190 + <div style="margin-top: 50px;height: 80px"> </div>
  191 + </div>
  192 +<!-- 收件地址库弹框-->
  193 + <div>
  194 + <el-dialog title="请选择收件人" :visible.sync="dialogTableVisible">
  195 + <el-table :data="gridData">
  196 + <el-table-column property="date" label="姓名" width="150"></el-table-column>
  197 + <el-table-column property="name" label="电话" width="200"></el-table-column>
  198 + <el-table-column property="address" label="地址"></el-table-column>
  199 + </el-table>
  200 + <div style="margin-top: 10px;text-align: right">
  201 + <el-button>取消</el-button>
  202 + <el-button type="primary">请选择收件人</el-button>
  203 + </div>
  204 + </el-dialog>
  205 + </div>
  206 + </div>
  207 +</template>
  208 +
  209 +<script>
  210 + export default {
  211 + data() {
  212 + return{
  213 + num: 1,
  214 + radio: '',
  215 + radio1: '',
  216 + radio2: '',
  217 + radio3: '',
  218 + radio4: '',
  219 + dialogTableVisible:false,
  220 +
  221 + }
  222 + }
  223 + }
  224 +</script>
  225 +
  226 +<style scoped>
  227 + .bg{
  228 + background-color: #F2F2F2;
  229 + }
  230 + .air{
  231 + font-size: 20px;
  232 + color: #308aee;
  233 + margin-top: 20px;
  234 + display: block;
  235 + }
  236 + .r-table{
  237 + text-align: center;
  238 + }
  239 +
  240 + /*line-height: 100px;*/
  241 + .tb{
  242 + font-size: 14px;
  243 + box-sizing: border-box;
  244 + display: table;
  245 + border-spacing: 0;
  246 + border-collapse: collapse;
  247 + }
  248 + .px{
  249 + background-color: #FFFFFF;
  250 + width: 100%;
  251 + height: 500px;
  252 + }
  253 + .title{
  254 + color: #127ef2;
  255 + font-size: 16px;
  256 + font-weight: bold;
  257 + margin: 20px 30px;
  258 + text-align: left;
  259 + }
  260 + .r-table .tb > tbody > tr > th {
  261 + background-color: #d8ecff;
  262 + padding: 10px 5px;
  263 + text-align: center;
  264 + border: 1px solid #ddd;
  265 + }
  266 + .r-table .tb > tbody > tr > td {
  267 + padding: 8px;
  268 + border: 1px solid #ddd;
  269 + display: table-cell;
  270 + }
  271 + .col .tb > tbody > tr > th {
  272 + border: 0px;
  273 + }
  274 + .col .tb > tbody > tr > td {
  275 + border: 0px;
  276 + }
  277 + .father{
  278 + position: relative;
  279 + }
  280 + .relative{
  281 + position: absolute;
  282 + top:11px;
  283 + right: 100px;
  284 + }
  285 +</style>
  286 +<style>
  287 + .order .el-collapse-item__header{
  288 + color: #127ef2;
  289 + font-size: 16px;
  290 + font-weight: bold;
  291 + margin: 20px 30px;
  292 + text-align: left;
  293 + }
  294 +</style>