Fedex / EcomWeb

Go to a project
Toggle navigation Toggle navigation pinning
zhengquan.bai
017d827e 1 parent 9c4fa3de

出口订单和运单详情页页面开发，列表跳转和返回逻辑

Inline Side-by-side
Showing 8 changed files with 1548 additions and 10 deletions
...@@ -28,3 +28,11 @@ export function getAllExportingBills(data) { ...@@ -28,3 +28,11 @@ export function getAllExportingBills(data) {
28 data 28 data
29 }) 29 })
30 } 30 }
31 +
32 +export function getAllTransportBills(data) {
33 + return request({
34 + url: '/bus-customer/exportWaybill/search',
35 + method: 'post',
36 + data
37 + })
38 +}
......
1 +<template>
2 +<div>
3 + <el-table :data="tableData" style="width: 100%" border height="220px">
4 + <el-table-column prop="index" label="序号" width="80"></el-table-column>
5 + <el-table-column prop="productNumber" label="企业商品编号" width="150"></el-table-column>
6 + <el-table-column prop="productName" label="商品企业商品名称" width="180"></el-table-column>
7 + <el-table-column prop="description" label="企业商品描述" width="150"></el-table-column>
8 + <el-table-column prop="code" label="条码" width="150"></el-table-column>
9 + <el-table-column prop="unit" label="计量单位" width="100">
10 + <template slot-scope="scope">
11 + <span>{{ scope.row.unit }}</span>
12 + <i class="el-icon-top" style="margin-left: 5px;"></i>
13 + </template>
14 + </el-table-column>
15 + <el-table-column prop="currency" label="币制" width="80"></el-table-column>
16 + <el-table-column prop="quantity" label="数量" width="80"></el-table-column>
17 + <el-table-column prop="unitPrice" label="单价" width="100"></el-table-column>
18 + <el-table-column prop="totalPrice" label="总价" width="100"></el-table-column>
19 + <el-table-column prop="notes" label="备注" width="300"></el-table-column>
20 + <el-table-column label="操作" width="100" fixed="right">
21 + <template slot-scope="scope">
22 + <el-link type="primary" @click="handleExpand(scope.$index)">展开</el-link>
23 + </template>
24 + </el-table-column>
25 + </el-table>
26 +</div>
27 +</template>
28 +
29 +<script>
30 +export default {
31 + name: "ProductDetailTable",
32 + data() {
33 + return {
34 + tableData: [
35 + {
36 + index: 1,
37 + productNumber: "6704200000",
38 + productName: "真人发发夹",
39 + description: "测试内容",
40 + code: "485607096",
41 + unit: "↑",
42 + currency: "美元",
43 + quantity: 1,
44 + unitPrice: "645.78",
45 + totalPrice: "645.78",
46 + notes: "山东电子口岸已写，加签后上传"
47 + },
48 + {
49 + index: 2,
50 + productNumber: "6704200000",
51 + productName: "真人发发夹",
52 + description: "测试内容",
53 + code: "2145860720",
54 + unit: "↑",
55 + currency: "美元",
56 + quantity: 2,
57 + unitPrice: "645.78",
58 + totalPrice: "645.78",
59 + notes: "山东电子口岸已写，加签后上传"
60 + },
61 + {
62 + index: 3,
63 + productNumber: "6704200000",
64 + productName: "真人发发夹",
65 + description: "测试内容",
66 + code: "2145860720",
67 + unit: "↑",
68 + currency: "美元",
69 + quantity: 3,
70 + unitPrice: "645.78",
71 + totalPrice: "645.78",
72 + notes: "山东电子口岸已写，加签后上传"
73 + },
74 + {
75 + index: 4,
76 + productNumber: "6704200000",
77 + productName: "真人发发夹",
78 + description: "测试内容",
79 + code: "2145860720",
80 + unit: "↑",
81 + currency: "美元",
82 + quantity: 1,
83 + unitPrice: "635.78",
84 + totalPrice: "635.78",
85 + notes: "山东电子口岸已写，加签后上传"
86 + }
87 + // 更多数据项...
88 + ]
89 + };
90 + },
91 + methods: {
92 + handleExpand(index) {
93 + console.log(`展开第 ${index + 1} 行数据`);
94 + }
95 + }
96 +}
97 +</script>
98 +
99 +<style scoped lang="scss">
100 +.el-table {
101 + font-size: 14px;
102 + //border: 1px solid red;
103 + //height: 180px;
104 + overflow: auto;
105 +}
106 +.el-icon-top {
107 + color: #409eff;
108 + font-size: 12px;
109 +}
110 +</style>
1 +<template>
2 + <div>
3 + <table class="custom-table">
4 + <thead>
5 + <tr>
6 + <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
7 + </tr>
8 + </thead>
9 + <tbody>
10 + <tr v-for="(row, index) in tableData" :key="index">
11 + <td>{{ row.status }}</td>
12 + <td>{{ row.time }}</td>
13 + <td>{{ row.description }}</td>
14 + </tr>
15 + </tbody>
16 + </table>
17 + </div>
18 +</template>
19 +
20 +<script>
21 +export default {
22 + name: "ReceiptInfoTable",
23 + data() {
24 + return {
25 + headers: ["回执状态", "状态时间", "回执描述"],
26 + tableData: [
27 + {
28 + status: "山东电子口岸已上传",
29 + time: "2024-11-08 15:31:58",
30 + description: "订单变更申请报关单【f291cda6-f664-4bf5-8edc-bcc012f8775】单证不存在，不可报单申报，报文业务主键【24HX-11-40-3722960DYB】"
31 + },
32 + {
33 + status: "山东电子口岸已上传",
34 + time: "2024-11-08 15:31:58",
35 + description: "山东电子口岸已上传"
36 + },
37 + {
38 + status: "山东电子口岸已保存",
39 + time: "2024-11-08 15:30:45",
40 + description: "山东电子口岸已保存，加签后上传"
41 + }
42 + ]
43 + };
44 + }
45 +};
46 +</script>
47 +
48 +<style scoped lang="scss">
49 +.custom-table {
50 + width: 100%;
51 + border-collapse: collapse;
52 + font-size: 14px;
53 + table-layout: fixed;
54 + background-color: white;
55 +}
56 +
57 +.custom-table th, .custom-table td {
58 + border: 1px solid #ccc;
59 + padding: 8px 12px;
60 + text-align: left;
61 + word-wrap: break-word;
62 +}
63 +
64 +.custom-table thead {
65 + background-color: #f5f5f5;
66 +}
67 +
68 +.custom-table th {
69 + font-weight: bold;
70 +}
71 +
72 +.custom-table tr:nth-child(odd) {
73 + //background-color: #fafafa;
74 +}
75 +</style>
...@@ -105,10 +105,22 @@ export const constantRoutes = [ ...@@ -105,10 +105,22 @@ export const constantRoutes = [
105 { 105 {
106 path: '/exportBillDetail', 106 path: '/exportBillDetail',
107 component: (resolve) => require(['@/views/exportBillDetail/index'], resolve), 107 component: (resolve) => require(['@/views/exportBillDetail/index'], resolve),
108 - hidden: false, 108 + hidden: true,
109 meta: { title: '出口订单详情', icon: 'api' }, 109 meta: { title: '出口订单详情', icon: 'api' },
110 }, 110 },
111 { 111 {
112 + path: '/exportTransportDetail',
113 + component: (resolve) => require(['@/views/exportTransportDetail/index'], resolve),
114 + hidden: true,
115 + meta: { title: '出口运单详情', icon: 'api' },
116 + },
117 + {
118 + path: '/exportTransportBillQuery',
119 + component: (resolve) => require(['@/views/exportTransportBillQuery/index'], resolve),
120 + hidden: false,
121 + meta: { title: '出口运单查询', icon: 'api' },
122 + },
123 + {
112 path: 'index', 124 path: 'index',
113 component: (resolve) => require(['@/views/index'], resolve), 125 component: (resolve) => require(['@/views/index'], resolve),
114 name: '首页', 126 name: '首页',
......
1 <template> 1 <template>
2 - <h3> 2 + <div class="export-bill-detail">
3 + <h5 class="first-header">
3 出口订单详情 4 出口订单详情
4 - </h3> 5 + <div class="returnButton" @click="$router.back()">返回</div>
6 + </h5>
5 <el-form 7 <el-form
6 class="fedexFormStyle fedexformSreach fedexformSreachBottomBorder" 8 class="fedexFormStyle fedexformSreach fedexformSreachBottomBorder"
7 ref="sreachForm" 9 ref="sreachForm"
8 :model="searchForm" 10 :model="searchForm"
9 label-position="top" 11 label-position="top"
12 + disabled
10 size="small" 13 size="small"
11 > 14 >
12 <el-row class="row-border"> 15 <el-row class="row-border">
...@@ -30,7 +33,6 @@ ...@@ -30,7 +33,6 @@
30 maxlength="13000" 33 maxlength="13000"
31 placeholder="" 34 placeholder=""
32 @blur="textareaBlur" 35 @blur="textareaBlur"
33 - @input="input"
34 ></el-input> 36 ></el-input>
35 <el-input 37 <el-input
36 slot="reference" 38 slot="reference"
...@@ -43,7 +45,6 @@ ...@@ -43,7 +45,6 @@
43 resize="none" 45 resize="none"
44 placeholder="" 46 placeholder=""
45 @focus="textareaFocus" 47 @focus="textareaFocus"
46 - @input="input"
47 ></el-input> 48 ></el-input>
48 </el-popover> 49 </el-popover>
49 </Formitem> 50 </Formitem>
...@@ -56,7 +57,6 @@ ...@@ -56,7 +57,6 @@
56 v-model="searchForm.declaredPort" 57 v-model="searchForm.declaredPort"
57 clearable 58 clearable
58 placeholder="" 59 placeholder=""
59 - @change="portChange"
60 > 60 >
61 <el-option 61 <el-option
62 v-for="(item, index) in dictData.userport" 62 v-for="(item, index) in dictData.userport"
...@@ -67,21 +67,478 @@ ...@@ -67,21 +67,478 @@
67 </el-select> 67 </el-select>
68 </Formitem> 68 </Formitem>
69 </el-col> 69 </el-col>
70 + <el-col :span="5">
71 + <Formitem label="电商平台代码" prop="consignmentCode">
72 + <el-popover
73 + placement="bottom"
74 + width="320"
75 + trigger="manual"
76 + popper-class="popoverconsignmentCode"
77 + v-model="textareaVisible.formItemconsignmentCode"
78 + >
79 + <el-input
80 + name="consignmentCode-textarea"
81 + type="textarea"
82 + :rows="5"
83 + id="popoverInputconsignmentCode"
84 + class="inputShadow textareaPopover"
85 + v-model="searchForm.consignmentCode"
86 + resize="none"
87 + maxlength="13000"
88 + placeholder=""
89 + @blur="textareaBlur"
90 + ></el-input>
91 + <el-input
92 + slot="reference"
93 + name="consignmentCode"
94 + type="textarea"
95 + :rows="1"
96 + class="inputShadow"
97 + id="inputInner--consignmentCode"
98 + v-model="searchForm.consignmentCode"
99 + resize="none"
100 + placeholder=""
101 + @focus="textareaFocus"
102 + ></el-input>
103 + </el-popover>
104 + </Formitem>
105 + </el-col>
106 + <el-col :span="5">
107 + <Formitem label="电商平台名称" prop="consignmentCode">
108 + <el-popover
109 + placement="bottom"
110 + width="320"
111 + trigger="manual"
112 + popper-class="popoverconsignmentCode"
113 + v-model="textareaVisible.formItemconsignmentCode"
114 + >
115 + <el-input
116 + name="consignmentCode-textarea"
117 + type="textarea"
118 + :rows="5"
119 + id="popoverInputconsignmentCode"
120 + class="inputShadow textareaPopover"
121 + v-model="searchForm.consignmentCode"
122 + resize="none"
123 + maxlength="13000"
124 + placeholder=""
125 + @blur="textareaBlur"
126 + ></el-input>
127 + <el-input
128 + slot="reference"
129 + name="consignmentCode"
130 + type="textarea"
131 + :rows="1"
132 + class="inputShadow"
133 + id="inputInner--consignmentCode"
134 + v-model="searchForm.consignmentCode"
135 + resize="none"
136 + placeholder=""
137 + @focus="textareaFocus"
138 + ></el-input>
139 + </el-popover>
140 + </Formitem>
141 + </el-col>
142 + <el-col :span="5">
143 + <Formitem label="电商企业代码" prop="consignmentCode">
144 + <el-popover
145 + placement="bottom"
146 + width="320"
147 + trigger="manual"
148 + popper-class="popoverconsignmentCode"
149 + v-model="textareaVisible.formItemconsignmentCode"
150 + >
151 + <el-input
152 + name="consignmentCode-textarea"
153 + type="textarea"
154 + :rows="5"
155 + id="popoverInputconsignmentCode"
156 + class="inputShadow textareaPopover"
157 + v-model="searchForm.consignmentCode"
158 + resize="none"
159 + maxlength="13000"
160 + placeholder=""
161 + @blur="textareaBlur"
162 + ></el-input>
163 + <el-input
164 + slot="reference"
165 + name="consignmentCode"
166 + type="textarea"
167 + :rows="1"
168 + class="inputShadow"
169 + id="inputInner--consignmentCode"
170 + v-model="searchForm.consignmentCode"
171 + resize="none"
172 + placeholder=""
173 + @focus="textareaFocus"
174 + ></el-input>
175 + </el-popover>
176 + </Formitem>
177 + </el-col>
70 </el-row> 178 </el-row>
71 - </el-form>> 179 + <el-row>
180 + <el-col :span="5">
181 + <Formitem label="电商企业" prop="consignmentCode">
182 + <el-popover
183 + placement="bottom"
184 + width="320"
185 + trigger="manual"
186 + popper-class="popoverconsignmentCode"
187 + v-model="textareaVisible.formItemconsignmentCode"
188 + >
189 + <el-input
190 + name="consignmentCode-textarea"
191 + type="textarea"
192 + :rows="5"
193 + id="popoverInputconsignmentCode"
194 + class="inputShadow textareaPopover"
195 + v-model="searchForm.consignmentCode"
196 + resize="none"
197 + maxlength="13000"
198 + placeholder=""
199 + @blur="textareaBlur"
200 + ></el-input>
201 + <el-input
202 + slot="reference"
203 + name="consignmentCode"
204 + type="textarea"
205 + :rows="1"
206 + class="inputShadow"
207 + id="inputInner--consignmentCode"
208 + v-model="searchForm.consignmentCode"
209 + resize="none"
210 + placeholder=""
211 + @focus="textareaFocus"
212 + ></el-input>
213 + </el-popover>
214 + </Formitem>
215 + </el-col>
216 +
217 + <el-col :span="5">
218 + <Formitem label="贷款金额" prop="consignmentCode">
219 + <el-popover
220 + placement="bottom"
221 + width="320"
222 + trigger="manual"
223 + popper-class="popoverconsignmentCode"
224 + v-model="textareaVisible.formItemconsignmentCode"
225 + >
226 + <el-input
227 + name="consignmentCode-textarea"
228 + type="textarea"
229 + :rows="5"
230 + id="popoverInputconsignmentCode"
231 + class="inputShadow textareaPopover"
232 + v-model="searchForm.consignmentCode"
233 + resize="none"
234 + maxlength="13000"
235 + placeholder=""
236 + @blur="textareaBlur"
237 + ></el-input>
238 + <el-input
239 + slot="reference"
240 + name="consignmentCode"
241 + type="textarea"
242 + :rows="1"
243 + class="inputShadow"
244 + id="inputInner--consignmentCode"
245 + v-model="searchForm.consignmentCode"
246 + resize="none"
247 + placeholder=""
248 + @focus="textareaFocus"
249 + ></el-input>
250 + </el-popover>
251 + </Formitem>
252 + </el-col>
253 +
254 + <el-col :span="5">
255 + <Formitem label="运杂费" prop="consignmentCode">
256 + <el-popover
257 + placement="bottom"
258 + width="320"
259 + trigger="manual"
260 + popper-class="popoverconsignmentCode"
261 + v-model="textareaVisible.formItemconsignmentCode"
262 + >
263 + <el-input
264 + name="consignmentCode-textarea"
265 + type="textarea"
266 + :rows="5"
267 + id="popoverInputconsignmentCode"
268 + class="inputShadow textareaPopover"
269 + v-model="searchForm.consignmentCode"
270 + resize="none"
271 + maxlength="13000"
272 + placeholder=""
273 + @blur="textareaBlur"
274 + ></el-input>
275 + <el-input
276 + slot="reference"
277 + name="consignmentCode"
278 + type="textarea"
279 + :rows="1"
280 + class="inputShadow"
281 + id="inputInner--consignmentCode"
282 + v-model="searchForm.consignmentCode"
283 + resize="none"
284 + placeholder=""
285 + @focus="textareaFocus"
286 + ></el-input>
287 + </el-popover>
288 + </Formitem>
289 + </el-col>
290 +
291 + <el-col :span="4">
292 + <Formitem label="币别" prop="factoryCode">
293 + <el-select
294 + type="text"
295 + id="inputInner--declaredPort"
296 + v-model="searchForm.declaredPort"
297 + clearable
298 + placeholder=""
299 + >
300 + <el-option
301 + v-for="(item, index) in dictData.userport"
302 + :key="index"
303 + :label="item.name"
304 + :value="item.name"
305 + ></el-option>
306 + </el-select>
307 + </Formitem>
308 + </el-col>
309 +
310 + <el-col :span="5">
311 + <Formitem label="业务状态" prop="consignmentCode">
312 + <el-popover
313 + placement="bottom"
314 + width="320"
315 + trigger="manual"
316 + popper-class="popoverconsignmentCode"
317 + v-model="textareaVisible.formItemconsignmentCode"
318 + >
319 + <el-input
320 + name="consignmentCode-textarea"
321 + type="textarea"
322 + :rows="5"
323 + id="popoverInputconsignmentCode"
324 + class="inputShadow textareaPopover"
325 + v-model="searchForm.consignmentCode"
326 + resize="none"
327 + maxlength="13000"
328 + placeholder=""
329 + @blur="textareaBlur"
330 + ></el-input>
331 + <el-input
332 + slot="reference"
333 + name="consignmentCode"
334 + type="textarea"
335 + :rows="1"
336 + class="inputShadow"
337 + id="inputInner--consignmentCode"
338 + v-model="searchForm.consignmentCode"
339 + resize="none"
340 + placeholder=""
341 + @focus="textareaFocus"
342 + ></el-input>
343 + </el-popover>
344 + </Formitem>
345 + </el-col>
346 + </el-row>
347 + <el-row>
348 + <el-col :span="4">
349 + <Formitem label="申报类型" prop="factoryCode">
350 + <el-select
351 + type="text"
352 + id="inputInner--declaredPort"
353 + v-model="searchForm.declaredPort"
354 + clearable
355 + placeholder=""
356 + >
357 + <el-option
358 + v-for="(item, index) in dictData.userport"
359 + :key="index"
360 + :label="item.name"
361 + :value="item.name"
362 + ></el-option>
363 + </el-select>
364 + </Formitem>
365 + </el-col>
366 + <el-col :span="4">
367 + <Formitem label="申报日期" prop="declareDate">
368 + <el-date-picker
369 + v-model="value1"
370 + type="date"
371 + placeholder="选择日期">
372 + </el-date-picker>
373 + </Formitem>
374 + </el-col>
375 + <el-col :span="5">
376 + <Formitem label="备注" prop="consignmentCode">
377 + <el-popover
378 + placement="bottom"
379 + width="320"
380 + trigger="manual"
381 + popper-class="popoverconsignmentCode"
382 + v-model="textareaVisible.formItemconsignmentCode"
383 + >
384 + <el-input
385 + name="consignmentCode-textarea"
386 + type="textarea"
387 + :rows="5"
388 + id="popoverInputconsignmentCode"
389 + class="inputShadow textareaPopover"
390 + v-model="searchForm.consignmentCode"
391 + resize="none"
392 + maxlength="13000"
393 + placeholder=""
394 + @blur="textareaBlur"
395 + ></el-input>
396 + <el-input
397 + slot="reference"
398 + name="consignmentCode"
399 + type="textarea"
400 + :rows="1"
401 + class="inputShadow"
402 + id="inputInner--consignmentCode"
403 + v-model="searchForm.consignmentCode"
404 + resize="none"
405 + placeholder=""
406 + @focus="textareaFocus"
407 + ></el-input>
408 + </el-popover>
409 + </Formitem>
410 + </el-col>
411 + </el-row>
412 + </el-form>
413 +
414 + <h5>回执信息</h5>
415 + <ReceiptInfoTable />
416 +
417 + <h5>商品明细</h5>
418 + <ProductDetailTable />
419 + </div>
72 </template> 420 </template>
73 421
74 <script> 422 <script>
423 +import ReceiptInfoTable from "@/components/ReceiptInfoTable/index.vue";
424 +import ProductDetailTable from "@/components/ProductDetailTable/index.vue";
425 +
75 export default { 426 export default {
76 name: "index.vue", 427 name: "index.vue",
428 + components: {ProductDetailTable, ReceiptInfoTable},
77 data() { 429 data() {
78 return { 430 return {
79 - 431 + searchForm: {
432 + declaredPort: "",
433 + consStatus: "",
434 + consignmentCode: "",
435 + accsDataImportTime: [],
436 + ownerName: "",
437 + consignmentHeadCode: "",
438 + isPushCustomsSys: "",
439 + waitOperStatus: "",
440 + declTime: [],
441 + },
442 + textareaVisible: {
443 + formItemconsignmentCode: false,
444 + formItemconsignmentHeadCode: false,
445 + },
446 + dictData: {
447 + userport: [
448 + {name: "Shanghai Port", code: "SH"},
449 + {name: "Beijing Port", code: "BJ"},
450 + {name: "Guangzhou Port", code: "GZ"},
451 + {name: "Shenzhen Port", code: "SZ"},
452 + {name: "Tianjin Port", code: "TJ"},
453 + ],
454 + },
455 + }
456 + },
457 + methods: {
458 + textareaBlur(val) {
459 + let inputInner = document.querySelector(
460 + "#inputInner--" + val.target.name.split("-")[0]
461 + );
462 + this.textareaVisible["formItem" + val.target.name.split("-")[0]] = false;
463 + inputInner.style.display = "block";
464 + this.$nextTick(() => {
465 + inputInner.blur();
466 + if (
467 + inputInner.value != undefined &&
468 + inputInner.value != "" &&
469 + inputInner.value != null
470 + ) {
471 + inputInner.classList.add("inputFocus");
472 + } else {
473 + inputInner.classList.remove("inputFocus");
80 } 474 }
475 + });
476 + let arr = [];
477 + this.searchForm[val.target.name.split("-")[0]]
478 + .replace(/[\n\，\；\;]/g, ",")
479 + .replace(/[\t]/g, "")
480 + .split(",")
481 + .forEach((str, index) => {
482 + if (str != null && str != "" && index <= 1000) {
483 + arr.push(str.trim());
484 + }
485 + });
486 + this.searchForm[val.target.name.split("-")[0]] = arr.join("\n");
487 + this.$forceUpdate();
488 + },
489 + //文本域展示状态切换
490 + textareaFocus(val) {
491 + this.textareaVisible["formItem" + val.target.name.split("-")[0]] = true;
492 + this.$nextTick(() => {
493 + document
494 + .querySelector("#popoverInput" + val.target.name.split("-")[0])
495 + .focus();
496 + document.querySelector(
497 + "#inputInner--" + val.target.name.split("-")[0]
498 + ).style.display = "none";
499 + });
500 + },
81 } 501 }
82 } 502 }
83 </script> 503 </script>
84 504
85 <style scoped lang="scss"> 505 <style scoped lang="scss">
86 - 506 +.export-bill-detail {
507 + background-color: white;
508 + padding-left: 20px;
509 + //border: 1px solid black;
510 + height: 100%;
511 + .fedexFormItem {
512 + background-color: #f5f5f5;
513 + margin-right: 5px;
514 + margin-bottom: 5px;
515 + }
516 + .fedexformSreach {
517 + border-bottom: none;
518 + }
519 + .first-header {
520 + margin-top: 0;
521 + padding-top: 20px;
522 + display: flex;
523 + justify-content: space-between;
524 + position: relative;
525 + .returnButton {
526 + font-size: 14px;
527 + color: red;
528 + position: absolute;
529 + right: 0;
530 + top: 0px;
531 + width: 80px;
532 + height: 30px;
533 + line-height: 30px;
534 + text-align: center;
535 + background-color: white;
536 + border-radius: 5px;
537 + margin-right: 20px;
538 + margin-top: 20px;
539 + cursor: pointer;
540 + border: 1px solid red;
541 + }
542 + }
543 +}
87 </style> 544 </style>
......
...@@ -166,6 +166,7 @@ ...@@ -166,6 +166,7 @@
166 :totalCount="total" 166 :totalCount="total"
167 @sizeChange="sizeChange" 167 @sizeChange="sizeChange"
168 @currentChange="currentChange" 168 @currentChange="currentChange"
169 + @rowClick="handleRowClick"
169 :selection="true" 170 :selection="true"
170 :selectFixed="false" 171 :selectFixed="false"
171 @tableSelect="tableSelect" 172 @tableSelect="tableSelect"
...@@ -177,7 +178,6 @@ ...@@ -177,7 +178,6 @@
177 <span>{{ `${scope.row.waveName}(${scope.row.waveExt2})` }}</span> 178 <span>{{ `${scope.row.waveName}(${scope.row.waveExt2})` }}</span>
178 </template> 179 </template>
179 </Table> 180 </Table>
180 -
181 </div> 181 </div>
182 </template> 182 </template>
183 183
...@@ -311,6 +311,15 @@ export default { ...@@ -311,6 +311,15 @@ export default {
311 input() { 311 input() {
312 this.$forceUpdate(); 312 this.$forceUpdate();
313 }, 313 },
314 + handleRowClick(row) {
315 + const declareId = row.declareId;
316 + this.$router.push({
317 + path: '/exportBillDetail',
318 + query: {
319 + declareId
320 + }
321 + });
322 + },
314 async search(val) { 323 async search(val) {
315 try { 324 try {
316 325
......
1 +<template>
2 + <div>
3 + <el-form
4 + class="fedexFormStyle fedexformSreach fedexformSreachBottomBorder"
5 + ref="sreachForm"
6 + :model="searchForm"
7 + label-position="top"
8 + size="small"
9 + >
10 + <el-row class="row-border">
11 + <el-col :span="5">
12 + <Formitem label="运单编号" prop="consignmentCode">
13 + <el-popover
14 + placement="bottom"
15 + width="320"
16 + trigger="manual"
17 + popper-class="popoverconsignmentCode"
18 + v-model="textareaVisible.formItemconsignmentCode"
19 + >
20 + <el-input
21 + name="consignmentCode-textarea"
22 + type="textarea"
23 + :rows="5"
24 + id="popoverInputconsignmentCode"
25 + class="inputShadow textareaPopover"
26 + v-model="searchForm.consignmentCode"
27 + resize="none"
28 + maxlength="13000"
29 + placeholder=""
30 + @blur="textareaBlur"
31 + @input="input"
32 + ></el-input>
33 + <el-input
34 + slot="reference"
35 + name="consignmentCode"
36 + type="textarea"
37 + :rows="1"
38 + class="inputShadow"
39 + id="inputInner--consignmentCode"
40 + v-model="searchForm.consignmentCode"
41 + resize="none"
42 + placeholder=""
43 + @focus="textareaFocus"
44 + @input="input"
45 + ></el-input>
46 + </el-popover>
47 + </Formitem>
48 + </el-col>
49 + <el-col :span="4">
50 + <Formitem label="物流企业代码" prop="factoryCode">
51 + <el-select
52 + type="text"
53 + id="inputInner--declaredPort"
54 + v-model="searchForm.declaredPort"
55 + clearable
56 + placeholder=""
57 + @change="portChange"
58 + >
59 + <el-option
60 + v-for="(item, index) in dictData.userport"
61 + :key="index"
62 + :label="item.name"
63 + :value="item.name"
64 + ></el-option>
65 + </el-select>
66 + </Formitem>
67 + </el-col>
68 + <el-col :span="5">
69 + <Formitem label="回执状态" prop="declaredPort">
70 + <el-select
71 + type="text"
72 + id="inputInner--receiptStatus"
73 + v-model="searchForm.receiptStatus"
74 + clearable
75 + placeholder=""
76 + >
77 + <el-option
78 + v-for="(item, index) in dictData.userport"
79 + :key="index"
80 + :label="item.name"
81 + :value="item.name"
82 + ></el-option>
83 + </el-select>
84 + </Formitem>
85 + </el-col>
86 + <el-col :span="4">
87 + <Formitem label="创建时间" prop="receiptTime">
88 + <el-date-picker
89 + class="inputInner--accsDataImportTime"
90 + id="inputInner--accsDataImportTime"
91 + v-model="searchForm.accsDataImportTime"
92 + type="daterange"
93 + format="yyyy-MM-dd"
94 + prefix-icon="none"
95 + value-format="yyyyMMdd"
96 + range-separator="至"
97 + start-placeholder=""
98 + clearable
99 + end-placeholder=""
100 + :picker-options="importTimePickerOptions"
101 + @blur="datePickerBlur"
102 + @change="accsDataImportTimeChange"
103 + >
104 + </el-date-picker>
105 + </Formitem>
106 + </el-col>
107 +
108 + <el-col :span="2">
109 + <el-form-item class="textCenter">
110 + <el-button
111 + class="entrySreachButton"
112 + type="text"
113 + icon="el-icon-search"
114 + :loading="loadings.searchLoading"
115 + @click="search(0)"
116 + ></el-button>
117 + </el-form-item>
118 + </el-col>
119 +
120 + <el-col :span="4">
121 + <el-form-item class="textCenter">
122 + <el-button
123 + icon="el-icon-refresh"
124 + size="small"
125 + :loading="loadings.searchLoading"
126 + @click="search(0)"
127 + >重置
128 + </el-button>
129 + </el-form-item>
130 + </el-col>
131 + </el-row>
132 + </el-form>
133 +
134 + <div style="text-align: right; margin: 10px">
135 + <el-button
136 + size="small"
137 + :loading="loadings.downloadLoading2"
138 + @click="downloadBpiData('log')"
139 + >
140 + <svg-icon class="el-icon-user-solid" icon-class="fedexUpBlue"></svg-icon>
141 + 导出
142 + </el-button>
143 + </div>
144 +
145 + <Table
146 + class="fedexDetialTable fedexSreachTable"
147 + ref="entryTable"
148 + :data="tableData"
149 + :headerData="headerData"
150 + :maxHeight="tableMaxheight"
151 + :border="true"
152 + :pagination="true"
153 + :order="false"
154 + :loading="loadings.sreachLoading"
155 + :page="page.pageIndex"
156 + :pageSizes="[20, 30, 50, 100]"
157 + :totalCount="total"
158 + @sizeChange="sizeChange"
159 + @currentChange="currentChange"
160 + :selection="true"
161 + :selectFixed="false"
162 + @rowClick="handleRowClick"
163 + @tableSelect="tableSelect"
164 + @tableSelectAll="tableSelectAll"
165 + :rowSelectDataType="false"
166 + :selected="selected"
167 + >
168 + <template v-slot:waveName="scope">
169 + <span>{{ `${scope.row.waveName}(${scope.row.waveExt2})` }}</span>
170 + </template>
171 + </Table>
172 + </div>
173 +</template>
174 +
175 +<script>
176 +import {getAllExportingBills, getAllTransportBills} from "@/api/query/query";
177 +
178 +export default {
179 + name: "index",
180 + data() {
181 + return {
182 + searchForm: {
183 + declaredPort: "",
184 + consStatus: "",
185 + consignmentCode: "",
186 + accsDataImportTime: [],
187 + ownerName: "",
188 + consignmentHeadCode: "",
189 + isPushCustomsSys: "",
190 + waitOperStatus: "",
191 + declTime: [],
192 + },
193 + loadings: {
194 + searchLoading: false,
195 + },
196 + page: {
197 + pageIndex: 1,
198 + pageSize: 20,
199 + },
200 + textareaVisible: {
201 + formItemconsignmentCode: false,
202 + formItemconsignmentHeadCode: false,
203 + },
204 + sizeChange(val) {
205 + this.page.pageSize = val;
206 + this.sreach(1);
207 + },
208 + //分页
209 + currentChange(val) {
210 + this.page.pageIndex = val.page;
211 + this.search(1);
212 + },
213 + tableData: [],
214 + total: 0,
215 + tableMaxheight: null,
216 + headerData: [
217 + {
218 + name: "回执状态",
219 + value: "returnStatus",
220 + width: "150",
221 + align: "left",
222 + },
223 + {
224 + name: "运单编号",
225 + value: "orderNo",
226 + width: '150',
227 + align: 'left'
228 + },
229 + {
230 + name: '物流企业代码',
231 + value: 'orderType',
232 + width: '150',
233 + align: 'left'
234 + },
235 + {
236 + name: '物流企业名称',
237 + value: 'ebccode',
238 + width: '200',
239 + align: 'left'
240 + },
241 + {
242 + name: '主要货物信息',
243 + value: 'ebcname',
244 + width: '200',
245 + align: 'left'
246 + },
247 + {
248 + name: '创建时间',
249 + value: 'createTime',
250 + width: '150',
251 + align: 'left'
252 + },
253 + {
254 + name: '申报企业',
255 + value: 'declaringEnterprise',
256 + width: '200',
257 + align: 'left'
258 + },
259 + {
260 + name: '申报类型',
261 + value: 'declaringType',
262 + width: '100',
263 + align: 'left'
264 + }
265 + ],
266 + dictData: {
267 + userport: [
268 + {name: "Shanghai Port", code: "SH"},
269 + {name: "Beijing Port", code: "BJ"},
270 + {name: "Guangzhou Port", code: "GZ"},
271 + {name: "Shenzhen Port", code: "SZ"},
272 + {name: "Tianjin Port", code: "TJ"},
273 + ],
274 + },
275 + }
276 + },
277 + created() {
278 + getAllTransportBills({
279 + pageIndex: 1,
280 + pageSize: 20
281 + }).then((res) => {
282 + console.log('res', res)
283 + this.tableData = res.data.value;
284 + this.total = res.data.totalItems;
285 + debugger;
286 + })
287 + },
288 + methods: {
289 + tableSelect(val) {
290 + this.selected = val.selection;
291 + },
292 + tableSelectAll(val) {
293 + this.selected = val;
294 + },
295 + handleRowClick(row) {
296 + const declareId = row.declareId;
297 + this.$router.push({
298 + path: '/exportTransportDetail',
299 + query: {
300 + declareId
301 + }
302 + });
303 + },
304 + async search(val) {
305 + try {
306 +
307 + } catch (error) {
308 + console.error("搜索出错：", error);
309 + } finally {
310 + // 无论成功还是失败，关闭加载状态
311 + this.loadings.sreachLoading = false;
312 + }
313 + },
314 + }
315 +}
316 +</script>
317 +
318 +<style scoped lang="scss">
319 +@import "@/assets/styles/variables.scss";
320 +
321 +.entrySreachButton {
322 + display: inline-block;
323 + font-size: 20px;
324 + color: $fedexButton !important;
325 +}
326 +</style>
1 +<template>
2 + <div class="export-bill-detail">
3 + <h5 class="first-header">
4 + 出口运单详情
5 + <div class="returnButton" @click="$router.back()">返回</div>
6 + </h5>
7 + <el-form
8 + class="fedexFormStyle fedexformSreach fedexformSreachBottomBorder"
9 + ref="sreachForm"
10 + :model="searchForm"
11 + label-position="top"
12 + disabled
13 + size="small"
14 + >
15 + <el-row class="row-border">
16 + <el-col :span="5">
17 + <Formitem label="订单编号" prop="consignmentCode">
18 + <el-popover
19 + placement="bottom"
20 + width="320"
21 + trigger="manual"
22 + popper-class="popoverconsignmentCode"
23 + v-model="textareaVisible.formItemconsignmentCode"
24 + >
25 + <el-input
26 + name="consignmentCode-textarea"
27 + type="textarea"
28 + :rows="5"
29 + id="popoverInputconsignmentCode"
30 + class="inputShadow textareaPopover"
31 + v-model="searchForm.consignmentCode"
32 + resize="none"
33 + maxlength="13000"
34 + placeholder=""
35 + @blur="textareaBlur"
36 + ></el-input>
37 + <el-input
38 + slot="reference"
39 + name="consignmentCode"
40 + type="textarea"
41 + :rows="1"
42 + class="inputShadow"
43 + id="inputInner--consignmentCode"
44 + v-model="searchForm.consignmentCode"
45 + resize="none"
46 + placeholder=""
47 + @focus="textareaFocus"
48 + ></el-input>
49 + </el-popover>
50 + </Formitem>
51 + </el-col>
52 + <el-col :span="4">
53 + <Formitem label="订单类型" prop="factoryCode">
54 + <el-select
55 + type="text"
56 + id="inputInner--declaredPort"
57 + v-model="searchForm.declaredPort"
58 + clearable
59 + placeholder=""
60 + >
61 + <el-option
62 + v-for="(item, index) in dictData.userport"
63 + :key="index"
64 + :label="item.name"
65 + :value="item.name"
66 + ></el-option>
67 + </el-select>
68 + </Formitem>
69 + </el-col>
70 + <el-col :span="5">
71 + <Formitem label="电商平台代码" prop="consignmentCode">
72 + <el-popover
73 + placement="bottom"
74 + width="320"
75 + trigger="manual"
76 + popper-class="popoverconsignmentCode"
77 + v-model="textareaVisible.formItemconsignmentCode"
78 + >
79 + <el-input
80 + name="consignmentCode-textarea"
81 + type="textarea"
82 + :rows="5"
83 + id="popoverInputconsignmentCode"
84 + class="inputShadow textareaPopover"
85 + v-model="searchForm.consignmentCode"
86 + resize="none"
87 + maxlength="13000"
88 + placeholder=""
89 + @blur="textareaBlur"
90 + ></el-input>
91 + <el-input
92 + slot="reference"
93 + name="consignmentCode"
94 + type="textarea"
95 + :rows="1"
96 + class="inputShadow"
97 + id="inputInner--consignmentCode"
98 + v-model="searchForm.consignmentCode"
99 + resize="none"
100 + placeholder=""
101 + @focus="textareaFocus"
102 + ></el-input>
103 + </el-popover>
104 + </Formitem>
105 + </el-col>
106 + <el-col :span="5">
107 + <Formitem label="电商平台名称" prop="consignmentCode">
108 + <el-popover
109 + placement="bottom"
110 + width="320"
111 + trigger="manual"
112 + popper-class="popoverconsignmentCode"
113 + v-model="textareaVisible.formItemconsignmentCode"
114 + >
115 + <el-input
116 + name="consignmentCode-textarea"
117 + type="textarea"
118 + :rows="5"
119 + id="popoverInputconsignmentCode"
120 + class="inputShadow textareaPopover"
121 + v-model="searchForm.consignmentCode"
122 + resize="none"
123 + maxlength="13000"
124 + placeholder=""
125 + @blur="textareaBlur"
126 + ></el-input>
127 + <el-input
128 + slot="reference"
129 + name="consignmentCode"
130 + type="textarea"
131 + :rows="1"
132 + class="inputShadow"
133 + id="inputInner--consignmentCode"
134 + v-model="searchForm.consignmentCode"
135 + resize="none"
136 + placeholder=""
137 + @focus="textareaFocus"
138 + ></el-input>
139 + </el-popover>
140 + </Formitem>
141 + </el-col>
142 + <el-col :span="5">
143 + <Formitem label="电商企业代码" prop="consignmentCode">
144 + <el-popover
145 + placement="bottom"
146 + width="320"
147 + trigger="manual"
148 + popper-class="popoverconsignmentCode"
149 + v-model="textareaVisible.formItemconsignmentCode"
150 + >
151 + <el-input
152 + name="consignmentCode-textarea"
153 + type="textarea"
154 + :rows="5"
155 + id="popoverInputconsignmentCode"
156 + class="inputShadow textareaPopover"
157 + v-model="searchForm.consignmentCode"
158 + resize="none"
159 + maxlength="13000"
160 + placeholder=""
161 + @blur="textareaBlur"
162 + ></el-input>
163 + <el-input
164 + slot="reference"
165 + name="consignmentCode"
166 + type="textarea"
167 + :rows="1"
168 + class="inputShadow"
169 + id="inputInner--consignmentCode"
170 + v-model="searchForm.consignmentCode"
171 + resize="none"
172 + placeholder=""
173 + @focus="textareaFocus"
174 + ></el-input>
175 + </el-popover>
176 + </Formitem>
177 + </el-col>
178 + </el-row>
179 + <el-row>
180 + <el-col :span="5">
181 + <Formitem label="电商企业" prop="consignmentCode">
182 + <el-popover
183 + placement="bottom"
184 + width="320"
185 + trigger="manual"
186 + popper-class="popoverconsignmentCode"
187 + v-model="textareaVisible.formItemconsignmentCode"
188 + >
189 + <el-input
190 + name="consignmentCode-textarea"
191 + type="textarea"
192 + :rows="5"
193 + id="popoverInputconsignmentCode"
194 + class="inputShadow textareaPopover"
195 + v-model="searchForm.consignmentCode"
196 + resize="none"
197 + maxlength="13000"
198 + placeholder=""
199 + @blur="textareaBlur"
200 + ></el-input>
201 + <el-input
202 + slot="reference"
203 + name="consignmentCode"
204 + type="textarea"
205 + :rows="1"
206 + class="inputShadow"
207 + id="inputInner--consignmentCode"
208 + v-model="searchForm.consignmentCode"
209 + resize="none"
210 + placeholder=""
211 + @focus="textareaFocus"
212 + ></el-input>
213 + </el-popover>
214 + </Formitem>
215 + </el-col>
216 +
217 + <el-col :span="5">
218 + <Formitem label="贷款金额" prop="consignmentCode">
219 + <el-popover
220 + placement="bottom"
221 + width="320"
222 + trigger="manual"
223 + popper-class="popoverconsignmentCode"
224 + v-model="textareaVisible.formItemconsignmentCode"
225 + >
226 + <el-input
227 + name="consignmentCode-textarea"
228 + type="textarea"
229 + :rows="5"
230 + id="popoverInputconsignmentCode"
231 + class="inputShadow textareaPopover"
232 + v-model="searchForm.consignmentCode"
233 + resize="none"
234 + maxlength="13000"
235 + placeholder=""
236 + @blur="textareaBlur"
237 + ></el-input>
238 + <el-input
239 + slot="reference"
240 + name="consignmentCode"
241 + type="textarea"
242 + :rows="1"
243 + class="inputShadow"
244 + id="inputInner--consignmentCode"
245 + v-model="searchForm.consignmentCode"
246 + resize="none"
247 + placeholder=""
248 + @focus="textareaFocus"
249 + ></el-input>
250 + </el-popover>
251 + </Formitem>
252 + </el-col>
253 +
254 + <el-col :span="5">
255 + <Formitem label="运杂费" prop="consignmentCode">
256 + <el-popover
257 + placement="bottom"
258 + width="320"
259 + trigger="manual"
260 + popper-class="popoverconsignmentCode"
261 + v-model="textareaVisible.formItemconsignmentCode"
262 + >
263 + <el-input
264 + name="consignmentCode-textarea"
265 + type="textarea"
266 + :rows="5"
267 + id="popoverInputconsignmentCode"
268 + class="inputShadow textareaPopover"
269 + v-model="searchForm.consignmentCode"
270 + resize="none"
271 + maxlength="13000"
272 + placeholder=""
273 + @blur="textareaBlur"
274 + ></el-input>
275 + <el-input
276 + slot="reference"
277 + name="consignmentCode"
278 + type="textarea"
279 + :rows="1"
280 + class="inputShadow"
281 + id="inputInner--consignmentCode"
282 + v-model="searchForm.consignmentCode"
283 + resize="none"
284 + placeholder=""
285 + @focus="textareaFocus"
286 + ></el-input>
287 + </el-popover>
288 + </Formitem>
289 + </el-col>
290 +
291 + <el-col :span="4">
292 + <Formitem label="币别" prop="factoryCode">
293 + <el-select
294 + type="text"
295 + id="inputInner--declaredPort"
296 + v-model="searchForm.declaredPort"
297 + clearable
298 + placeholder=""
299 + >
300 + <el-option
301 + v-for="(item, index) in dictData.userport"
302 + :key="index"
303 + :label="item.name"
304 + :value="item.name"
305 + ></el-option>
306 + </el-select>
307 + </Formitem>
308 + </el-col>
309 +
310 + <el-col :span="5">
311 + <Formitem label="业务状态" prop="consignmentCode">
312 + <el-popover
313 + placement="bottom"
314 + width="320"
315 + trigger="manual"
316 + popper-class="popoverconsignmentCode"
317 + v-model="textareaVisible.formItemconsignmentCode"
318 + >
319 + <el-input
320 + name="consignmentCode-textarea"
321 + type="textarea"
322 + :rows="5"
323 + id="popoverInputconsignmentCode"
324 + class="inputShadow textareaPopover"
325 + v-model="searchForm.consignmentCode"
326 + resize="none"
327 + maxlength="13000"
328 + placeholder=""
329 + @blur="textareaBlur"
330 + ></el-input>
331 + <el-input
332 + slot="reference"
333 + name="consignmentCode"
334 + type="textarea"
335 + :rows="1"
336 + class="inputShadow"
337 + id="inputInner--consignmentCode"
338 + v-model="searchForm.consignmentCode"
339 + resize="none"
340 + placeholder=""
341 + @focus="textareaFocus"
342 + ></el-input>
343 + </el-popover>
344 + </Formitem>
345 + </el-col>
346 + </el-row>
347 + <el-row>
348 + <el-col :span="4">
349 + <Formitem label="申报类型" prop="factoryCode">
350 + <el-select
351 + type="text"
352 + id="inputInner--declaredPort"
353 + v-model="searchForm.declaredPort"
354 + clearable
355 + placeholder=""
356 + >
357 + <el-option
358 + v-for="(item, index) in dictData.userport"
359 + :key="index"
360 + :label="item.name"
361 + :value="item.name"
362 + ></el-option>
363 + </el-select>
364 + </Formitem>
365 + </el-col>
366 + <el-col :span="4">
367 + <Formitem label="申报日期" prop="declareDate">
368 + <el-date-picker
369 + v-model="value1"
370 + type="date"
371 + placeholder="选择日期">
372 + </el-date-picker>
373 + </Formitem>
374 + </el-col>
375 + <el-col :span="5">
376 + <Formitem label="备注" prop="consignmentCode">
377 + <el-popover
378 + placement="bottom"
379 + width="320"
380 + trigger="manual"
381 + popper-class="popoverconsignmentCode"
382 + v-model="textareaVisible.formItemconsignmentCode"
383 + >
384 + <el-input
385 + name="consignmentCode-textarea"
386 + type="textarea"
387 + :rows="5"
388 + id="popoverInputconsignmentCode"
389 + class="inputShadow textareaPopover"
390 + v-model="searchForm.consignmentCode"
391 + resize="none"
392 + maxlength="13000"
393 + placeholder=""
394 + @blur="textareaBlur"
395 + ></el-input>
396 + <el-input
397 + slot="reference"
398 + name="consignmentCode"
399 + type="textarea"
400 + :rows="1"
401 + class="inputShadow"
402 + id="inputInner--consignmentCode"
403 + v-model="searchForm.consignmentCode"
404 + resize="none"
405 + placeholder=""
406 + @focus="textareaFocus"
407 + ></el-input>
408 + </el-popover>
409 + </Formitem>
410 + </el-col>
411 + </el-row>
412 + </el-form>
413 +
414 + <h5>回执信息</h5>
415 + <ReceiptInfoTable />
416 + </div>
417 +</template>
418 +
419 +<script>
420 +import ReceiptInfoTable from "@/components/ReceiptInfoTable/index.vue";
421 +import ProductDetailTable from "@/components/ProductDetailTable/index.vue";
422 +
423 +export default {
424 + name: "exportTransportDetail.vue",
425 + components: {ProductDetailTable, ReceiptInfoTable},
426 + data() {
427 + return {
428 + searchForm: {
429 + declaredPort: "",
430 + consStatus: "",
431 + consignmentCode: "",
432 + accsDataImportTime: [],
433 + ownerName: "",
434 + consignmentHeadCode: "",
435 + isPushCustomsSys: "",
436 + waitOperStatus: "",
437 + declTime: [],
438 + },
439 + textareaVisible: {
440 + formItemconsignmentCode: false,
441 + formItemconsignmentHeadCode: false,
442 + },
443 + dictData: {
444 + userport: [
445 + {name: "Shanghai Port", code: "SH"},
446 + {name: "Beijing Port", code: "BJ"},
447 + {name: "Guangzhou Port", code: "GZ"},
448 + {name: "Shenzhen Port", code: "SZ"},
449 + {name: "Tianjin Port", code: "TJ"},
450 + ],
451 + },
452 + }
453 + },
454 + methods: {
455 + textareaBlur(val) {
456 + let inputInner = document.querySelector(
457 + "#inputInner--" + val.target.name.split("-")[0]
458 + );
459 + this.textareaVisible["formItem" + val.target.name.split("-")[0]] = false;
460 + inputInner.style.display = "block";
461 + this.$nextTick(() => {
462 + inputInner.blur();
463 + if (
464 + inputInner.value != undefined &&
465 + inputInner.value != "" &&
466 + inputInner.value != null
467 + ) {
468 + inputInner.classList.add("inputFocus");
469 + } else {
470 + inputInner.classList.remove("inputFocus");
471 + }
472 + });
473 + let arr = [];
474 + this.searchForm[val.target.name.split("-")[0]]
475 + .replace(/[\n\，\；\;]/g, ",")
476 + .replace(/[\t]/g, "")
477 + .split(",")
478 + .forEach((str, index) => {
479 + if (str != null && str != "" && index <= 1000) {
480 + arr.push(str.trim());
481 + }
482 + });
483 + this.searchForm[val.target.name.split("-")[0]] = arr.join("\n");
484 + this.$forceUpdate();
485 + },
486 + //文本域展示状态切换
487 + textareaFocus(val) {
488 + this.textareaVisible["formItem" + val.target.name.split("-")[0]] = true;
489 + this.$nextTick(() => {
490 + document
491 + .querySelector("#popoverInput" + val.target.name.split("-")[0])
492 + .focus();
493 + document.querySelector(
494 + "#inputInner--" + val.target.name.split("-")[0]
495 + ).style.display = "none";
496 + });
497 + },
498 + }
499 +}
500 +</script>
501 +
502 +<style scoped lang="scss">
503 +.export-bill-detail {
504 + background-color: white;
505 + padding-left: 20px;
506 + //border: 1px solid black;
507 + height: 100%;
508 + .fedexFormItem {
509 + background-color: #f5f5f5;
510 + margin-right: 5px;
511 + margin-bottom: 5px;
512 + }
513 + .fedexformSreach {
514 + border-bottom: none;
515 + }
516 + .first-header {
517 + margin-top: 0;
518 + padding-top: 20px;
519 + display: flex;
520 + justify-content: space-between;
521 + position: relative;
522 + .returnButton {
523 + font-size: 14px;
524 + color: red;
525 + position: absolute;
526 + right: 0;
527 + top: 0px;
528 + width: 80px;
529 + height: 30px;
530 + line-height: 30px;
531 + text-align: center;
532 + background-color: white;
533 + border-radius: 5px;
534 + margin-right: 20px;
535 + margin-top: 20px;
536 + cursor: pointer;
537 + border: 1px solid red;
538 + }
539 + }
540 +}
541 +</style>