Fedex / imac-vue

Go to a project
Toggle navigation Toggle navigation pinning
Elements-SY
ea2b0d3f 1 parent f28a9b72

modify

Inline Side-by-side
Showing 1 changed file with 662 additions and 0 deletions
1 +<template>
2 + <div ref="routeInfo" class="route-container">
3 + <el-collapse
4 + value="1"
5 + accordion
6 + v-model="activeNames"
7 + @change="collapseChange"
8 + v-loading="loading"
9 + >
10 + <div
11 + class="collapse-item-header"
12 + v-for="(item, index) in routesInfo"
13 + :key="item.route || item.flightRoute"
14 + >
15 + <el-collapse-item :name="index" v-if="showFlightRoute(item)">
16 + <!-- 航线名 -->
17 + <template slot="title">
18 + <strong>{{ item.route || item.flightRoute }}</strong>
19 + </template>
20 + <!-- 航线设置信息 -->
21 + <div class="route-info info-item">
22 + <el-card class="route-info-card">
23 + <!-- 有数据时 -->
24 + <section v-if="item.config || item.flightRoute">
25 + <div slot="header" class="route-config-header">
26 + <el-button
27 + type="primary"
28 + size="mini"
29 + :disabled="pageName || item.status == '3' || status"
30 + :loading="item.loading"
31 + @click="saveSubmit(item, index)"
32 + >保 存</el-button
33 + >
34 + <el-button
35 + v-if="showBtnRule(item)"
36 + type="primary"
37 + size="mini"
38 + icon="el-icon-video-pause"
39 + :loading="item.loading"
40 + :disabled="pageName || status"
41 + @click="onOffSubmit(item, index)"
42 + >{{ item.status | statusBtn }}</el-button
43 + >
44 + <el-button
45 + v-if="showBtnRule(item)"
46 + type="danger"
47 + size="mini"
48 + icon="el-icon-delete"
49 + :disabled="pageName || item.status !== '3' || status"
50 + :loading="item.loading"
51 + @click="deleteSubmit(item, index)"
52 + >删 除</el-button
53 + >
54 + <span class="flight-route-title">
55 + {{ item.ruleDate ? "日期级别规则" : "普通规则" }}</span
56 + >
57 + </div>
58 + <el-divider></el-divider>
59 + <div class="route-config-info">
60 + <el-form label-position="right" label-width="120px">
61 + <el-row>
62 + <el-col :span="24">
63 + <el-form-item label="始发站">
64 + <el-col :span="2">
65 + <el-radio-group
66 + v-model="item.isLocation"
67 + @change="changeLocation"
68 + :disabled="pageName || status"
69 + >
70 + <el-radio label="1">包含始发站</el-radio>
71 + <el-radio label="2">不包含始发站</el-radio>
72 + </el-radio-group>
73 + </el-col>
74 + <el-col :span="10">
75 + <el-input
76 + v-if="item.isLocation == '1'"
77 + :disabled="pageName || status"
78 + type="textarea"
79 + v-model="item.location"
80 + :rows="4"
81 + placeholder="始发站之间用回车符分隔"
82 + style="width: 500px"
83 + >
84 + </el-input>
85 + <el-input
86 + v-else
87 + :disabled="pageName || status"
88 + type="textarea"
89 + v-model="item.notLocation"
90 + :rows="4"
91 + placeholder="始发站之间用回车符分隔"
92 + style="width: 500px"
93 + >
94 + </el-input>
95 + </el-col>
96 + </el-form-item>
97 + </el-col>
98 + <el-col :span="24">
99 + <el-form-item label="目的站">
100 + <el-col :span="2">
101 + <el-radio-group
102 + :disabled="pageName || status"
103 + v-model="item.isDestinationSite"
104 + @change="changeDestinationSite"
105 + >
106 + <el-radio label="1">包含目的站</el-radio>
107 + <el-radio label="2">不包含目的站</el-radio>
108 + </el-radio-group>
109 + </el-col>
110 + <el-col :span="10">
111 + <el-input
112 + v-if="item.isDestinationSite == '1'"
113 + :disabled="pageName || status"
114 + type="textarea"
115 + v-model="item.destinationSite"
116 + :rows="4"
117 + placeholder="目的站之间用回车符分隔"
118 + style="width: 500px"
119 + >
120 + </el-input>
121 + <el-input
122 + v-else
123 + :disabled="pageName || status"
124 + type="textarea"
125 + v-model="item.notDestinationSite"
126 + :rows="4"
127 + placeholder="目的站之间用回车符分隔"
128 + style="width: 500px"
129 + >
130 + </el-input>
131 + </el-col>
132 + </el-form-item>
133 + </el-col>
134 + <el-col :span="24">
135 + <el-col :span="10">
136 + <el-form-item label="URSA包含">
137 + <el-input
138 + :disabled="pageName || status"
139 + type="textarea"
140 + v-model="item.includeUrsa"
141 + :rows="4"
142 + placeholder="URSA之间用分号分隔，例：F1_;F2_;F3_;P_"
143 + >
144 + </el-input>
145 + </el-form-item>
146 + </el-col>
147 + <el-col :span="10">
148 + <el-form-item label="URSA不包含">
149 + <el-input
150 + :disabled="pageName || status"
151 + type="textarea"
152 + v-model="item.notIncludeUrsa"
153 + :rows="4"
154 + placeholder="URSA之间用分号分隔，例：F1;F2;F3;P"
155 + >
156 + </el-input>
157 + </el-form-item>
158 + </el-col>
159 + </el-col>
160 + <el-col :span="24">
161 + <el-col :span="9">
162 + <el-form-item label="件数">
163 + <el-col :span="10">
164 + <el-input
165 + :disabled="pageName || status"
166 + class="numberInput"
167 + v-model.trim="item.minNumOfPieces"
168 + placeholder="最少件数"
169 + >
170 + </el-input>
171 + <span
172 + ref="minNumOfPieces"
173 + class="el-form-item__error"
174 + ></span>
175 + </el-col>
176 + <el-col style="text-align: center" :span="1"
177 + >-</el-col
178 + >
179 + <el-col :span="10">
180 + <el-input
181 + :disabled="pageName || status"
182 + class="numberInput"
183 + v-model.trim="item.maxNumOfPieces"
184 + placeholder="最多件数"
185 + >
186 + </el-input>
187 + </el-col>
188 + </el-form-item>
189 + </el-col>
190 + <el-col :span="9">
191 + <el-form-item label="重量(KG)">
192 + <el-col :span="10">
193 + <el-input
194 + :disabled="pageName || status"
195 + class="numberInput"
196 + v-model.trim="item.minWeight"
197 + placeholder="最小重量"
198 + >
199 + </el-input>
200 + <span
201 + ref="minWeight"
202 + class="el-form-item__error"
203 + ></span>
204 + </el-col>
205 + <el-col style="text-align: center" :span="1"
206 + >-</el-col
207 + >
208 + <el-col :span="10">
209 + <el-input
210 + :disabled="pageName || status"
211 + class="numberInput"
212 + v-model.trim="item.maxWeight"
213 + placeholder="最大重量"
214 + >
215 + </el-input>
216 + </el-col>
217 + </el-form-item>
218 + </el-col>
219 + </el-col>
220 + <el-col :span="24">
221 + <el-form-item label="申报类别">
222 + <el-card shadow="never" style="width: 95%">
223 + <el-checkbox-group
224 + :disabled="pageName || status"
225 + v-model="item.typeOfGoods"
226 + @change="changeCargoType"
227 + >
228 + <el-row>
229 + <el-col
230 + v-for="item in cargoType"
231 + :span="2"
232 + :key="item.id"
233 + >
234 + <el-checkbox
235 + v-if="item.status === 1"
236 + :label="item.chineseName"
237 + :name="item.chineseName"
238 + :key="item.code"
239 + >
240 + <Tooltips
241 + :content="item.chineseName"
242 + :refName="item.code"
243 + >
244 + </Tooltips>
245 + </el-checkbox>
246 + </el-col>
247 + </el-row>
248 + </el-checkbox-group>
249 + </el-card>
250 + </el-form-item>
251 + </el-col>
252 + <el-col :span="24">
253 + <el-form-item label="货物类型">
254 + <el-card shadow="never" style="width: 95%">
255 + <el-checkbox-group
256 + :disabled="pageName || status"
257 + v-model="item.cargoType"
258 + @change="changeCargoStatus"
259 + >
260 + <el-row>
261 + <el-col
262 + :span="3"
263 + v-for="item in cargoStatus"
264 + :key="item.id"
265 + >
266 + <el-checkbox
267 + v-if="item.status === 1"
268 + :label="item.chineseName"
269 + :name="item.chineseName"
270 + :key="item.code"
271 + disabled
272 + >
273 + <Tooltips
274 + :content="item.chineseName"
275 + :refName="item.code"
276 + >
277 + </Tooltips>
278 + </el-checkbox>
279 + </el-col>
280 + </el-row>
281 + </el-checkbox-group>
282 + </el-card>
283 + </el-form-item>
284 + </el-col>
285 + <el-col :span="24">
286 + <el-form-item label="取件扫描号">
287 + <el-card shadow="never" style="width: 95%">
288 + <el-checkbox-group
289 + :disabled="pageName || status"
290 + v-model="item.puporpuxCode"
291 + @change="changePuporpux"
292 + >
293 + <el-row>
294 + <el-col
295 + :span="2"
296 + v-for="item in puporpux"
297 + :key="item.id"
298 + >
299 + <el-checkbox
300 + v-if="item.status === 1"
301 + :label="item.chineseName"
302 + :name="item.chineseName"
303 + :key="item.code"
304 + >
305 + <Tooltips
306 + :content="item.chineseName"
307 + :refName="item.code"
308 + >
309 + </Tooltips>
310 + </el-checkbox>
311 + </el-col>
312 + </el-row>
313 + </el-checkbox-group>
314 + </el-card>
315 + </el-form-item>
316 + </el-col>
317 + <el-col :span="24">
318 + <el-form-item label="Service Code">
319 + <el-card shadow="never" style="width: 95%">
320 + <el-checkbox-group
321 + :disabled="pageName || status"
322 + v-model="item.serviceCode"
323 + @change="changeServiceCode"
324 + >
325 + <el-row>
326 + <el-col
327 + :span="2"
328 + v-for="item in serviceCode"
329 + :key="item.id"
330 + >
331 + <el-checkbox
332 + v-if="item.status === 1"
333 + :label="item.chineseName"
334 + :name="item.chineseName"
335 + :key="item.code"
336 + >
337 + <Tooltips
338 + :content="item.chineseName"
339 + :refName="item.code"
340 + >
341 + </Tooltips>
342 + </el-checkbox>
343 + </el-col>
344 + </el-row>
345 + </el-checkbox-group>
346 + </el-card>
347 + </el-form-item>
348 + </el-col>
349 + <el-col :span="24">
350 + <el-form-item label="Handling Code">
351 + <el-card shadow="never" style="width: 95%">
352 + <el-checkbox-group
353 + :disabled="pageName || status"
354 + v-model="item.handlingCode"
355 + @change="changeHandlingCode"
356 + >
357 + <el-row>
358 + <el-col
359 + :span="2"
360 + v-for="item in handlingCode"
361 + :key="item.id"
362 + >
363 + <el-checkbox
364 + v-if="item.status === 1"
365 + :label="item.chineseName"
366 + :name="item.chineseName"
367 + :key="item.code"
368 + >
369 + <Tooltips
370 + :content="item.chineseName"
371 + :refName="item.code"
372 + >
373 + </Tooltips>
374 + </el-checkbox>
375 + </el-col>
376 + </el-row>
377 + </el-checkbox-group>
378 + </el-card>
379 + </el-form-item>
380 + </el-col>
381 + <el-col :span="24">
382 + <el-form-item label="Sub Category">
383 + <el-card shadow="never" style="width: 95%">
384 + <el-checkbox-group
385 + :disabled="pageName || status"
386 + v-model="item.subCategory"
387 + @change="changeSubCategory"
388 + >
389 + <el-row>
390 + <el-col
391 + :span="2"
392 + v-for="item in subCategory"
393 + :key="item.id"
394 + >
395 + <el-checkbox
396 + v-if="item.status === 1"
397 + :label="item.chineseName"
398 + :name="item.chineseName"
399 + :key="item.code"
400 + >
401 + <Tooltips
402 + :content="item.chineseName"
403 + :refName="item.code"
404 + >
405 + </Tooltips>
406 + </el-checkbox>
407 + </el-col>
408 + </el-row>
409 + </el-checkbox-group>
410 + </el-card>
411 + </el-form-item>
412 + </el-col>
413 + </el-row>
414 + </el-form>
415 + </div>
416 + </section>
417 + <!-- 没有数据时 -->
418 + <div class="no-data" v-else>
419 + <el-empty description="未设置规则！">
420 + <el-button
421 + type="primary"
422 + size="small"
423 + :disabled="pageName"
424 + @click="addRouteRule(index)"
425 + >新增规则</el-button
426 + >
427 + </el-empty>
428 + </div>
429 + </el-card>
430 + </div>
431 + </el-collapse-item>
432 + </div>
433 + </el-collapse>
434 + </div>
435 +</template>
436 +<script>
437 +// import { inputBlurValidate } from "@/utils/mixins";
438 +export default {
439 + name: "routeInfo",
440 + props: {
441 + routesInfo: {
442 + // 航线规则信息
443 + type: Array,
444 + default: () => [],
445 + },
446 + cargoType: {
447 + // 申报类别
448 + type: Array,
449 + default: () => [],
450 + },
451 + cargoStatus: {
452 + // 货物类型
453 + type: Array,
454 + default: () => [],
455 + },
456 + puporpux: {
457 + // 取件扫描号
458 + type: Array,
459 + default: () => [],
460 + },
461 + serviceCode: {
462 + // Service Code
463 + type: Array,
464 + default: () => [],
465 + },
466 + handlingCode: {
467 + // Handling Code
468 + type: Array,
469 + default: () => [],
470 + },
471 + subCategory: {
472 + // Sub Category
473 + type: Array,
474 + default: () => [],
475 + },
476 + status: {
477 + // 标识是详情还是编辑
478 + type: Boolean,
479 + default: false,
480 + },
481 + loading: {
482 + // 折叠面板
483 + type: Boolean,
484 + default: false,
485 + },
486 + },
487 + // mixins: [inputBlurValidate],
488 + data() {
489 + return {
490 + activeNames: [0], // 展开指定项
491 + };
492 + },
493 + computed: {
494 + pageName() {
495 + if (
496 + this.$route.query.pageName == "dmLog" ||
497 + this.$route.query.pageName == "flightRandConfig" ||
498 + this.$route.query.dataStatus == "view"
499 + ) {
500 + return true;
501 + }
502 + },
503 + },
504 + filters: {
505 + // 状态：0 无效，1 有效 2 配置中 3 停用
506 + statusBtn(status) {
507 + if (status == "0") {
508 + return "无 效";
509 + } else if (status == "1") {
510 + return "停 用";
511 + } else if (status == "3") {
512 + return "开 启";
513 + } else {
514 + return "保 存";
515 + }
516 + },
517 + },
518 + methods: {
519 + // 航线回显逻辑：如果航线无效并且没有数据，则不展示该航线
520 + showFlightRoute(item) {
521 + if (this.$route.query.status == "3" && item.config == false) {
522 + return false;
523 + } else {
524 + return true;
525 + }
526 + },
527 + // 航线操作按钮回显逻辑
528 + showBtnRule(item) {
529 + /*
530 + 展示保存按钮、开启按钮/停用按钮、删除按钮逻辑如下：
531 + 1：当status状态等于3的时候展示：保存按钮、开启按钮/停用按钮、删除按钮；
532 + 2：当status状态等于1并且ruleDate字段有值的时候展示：保存按钮、开启按钮/停用按钮、删除按钮；
533 + 3：当从航班配置设置不查询日期的时候“查看&修改”的时候，
534 + 有效的航线也就是status状态等于1的时候也要展示：保存按钮、开启按钮/停用按钮、删除按钮；
535 + 4：那么问题来了当从航班配置设置不查询日期的时候状态为1的时候也要展示：保存按钮、开启按钮/停用按钮、删除按钮；
536 + 那么要么跳转的时候传过来一个参数；
537 + 5：如果是从【航班顺位】和【DM数据处理】跳转过来，那么航班航线设置维度只作为详情查看，禁用所有的操作。
538 + 所以展示不展示保存按钮、开启按钮/停用按钮、删除按钮毫无意义
539 + */
540 + if (item.status == "3" || (item.status == "1" && item.ruleDate)) {
541 + return true;
542 + } else if (
543 + item.status == "1" &&
544 + this.$route.query.querySpecifyData == "2"
545 + ) {
546 + // 航班配舱设置非日期级别情况下
547 + return true;
548 + } else if (item.status == "1" && this.$route.query.dataStatus == "add") {
549 + // 添加航班配舱设置非日期级别情况下
550 + return true;
551 + } else if (item.status == "2") {
552 + return true;
553 + } else {
554 + return false;
555 + }
556 + },
557 + // 当前激活面板改变时触发
558 + collapseChange(name) {
559 + this.$emit("collapse", name);
560 + },
561 + // 始发站
562 + changeLocation(val) {
563 + this.$emit("location", val);
564 + },
565 + // 目的站
566 + changeDestinationSite(val) {
567 + this.$emit("destinationSite", val);
568 + },
569 + // 申报类别
570 + changeCargoType(arr) {
571 + this.$emit("cargoType", arr);
572 + },
573 + // 货物类型
574 + changeCargoStatus(arr) {
575 + this.$emit("cargoStatus", arr);
576 + },
577 + // 取件扫描号
578 + changePuporpux(arr) {
579 + this.$emit("puporpux", arr);
580 + },
581 + // Service Code
582 + changeServiceCode(arr) {
583 + this.$emit("serviceCode", arr);
584 + },
585 + // Handling Code
586 + changeHandlingCode(arr) {
587 + this.$emit("handlingCode", arr);
588 + },
589 + // Sub Category
590 + changeSubCategory(arr) {
591 + this.$emit("subCategory", arr);
592 + },
593 + // 新增规则
594 + addRouteRule(index) {
595 + this.$emit("addRlue", index);
596 + },
597 + // 保存
598 + saveSubmit(item, index) {
599 + this.$emit("save", item, index);
600 + },
601 + // 开启/暂停
602 + onOffSubmit(item, index) {
603 + this.$emit("onOff", item, index);
604 + },
605 + // 删除
606 + deleteSubmit(item, index) {
607 + this.$emit("delete", item, index);
608 + },
609 + },
610 +};
611 +</script>
612 +<style lang="scss">
613 +.collapse-item-header {
614 + padding-left: 40px;
615 +}
616 +.el-collapse {
617 + border: 0 !important;
618 +}
619 +.el-collapse-item__header {
620 + background-color: #d9ecff !important;
621 + border-bottom: 1px solid #ccc;
622 + padding: 0 10px 0 30px;
623 +}
624 +.el-collapse-item__wrap {
625 + border-bottom: 0 !important;
626 +}
627 +.el-collapse-item {
628 + border-bottom: 1px solid #ccc;
629 +}
630 +.el-collapse-item:last-child {
631 +}
632 +.route-container {
633 + strong {
634 + font-size: 14px;
635 + }
636 + .route-info {
637 + .route-info-card {
638 + section {
639 + padding: 12px 70px;
640 + .route-config-header {
641 + .flight-route-title {
642 + margin-left: 8px;
643 + }
644 + }
645 + }
646 + .route-config-info {
647 + }
648 + }
649 + }
650 +}
651 +.el-form-item__error {
652 + color: #ff4949;
653 + font-size: 12px;
654 + line-height: 1;
655 + padding-top: 4px;
656 + position: absolute;
657 + top: 100%;
658 + left: 0;
659 + font-weight: 500;
660 + width: 100% !important;
661 +}
662 +</style>