Elements-SY

modify

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 - mounted() {},
519 - methods: {
520 - // 航线回显逻辑:如果航线无效并且没有数据,则不展示该航线
521 - showFlightRoute(item) {
522 - if (this.$route.query.status == "3" && item.config == false) {
523 - return false;
524 - } else {
525 - return true;
526 - }
527 - },
528 - // 航线操作按钮回显逻辑
529 - showBtnRule(item) {
530 - /*
531 - 展示保存按钮、开启按钮/停用按钮、删除按钮逻辑如下:
532 - 1:当status状态等于3的时候展示:保存按钮、开启按钮/停用按钮、删除按钮;
533 - 2:当status状态等于1并且ruleDate字段有值的时候展示:保存按钮、开启按钮/停用按钮、删除按钮;
534 - 3:当从航班配置设置不查询日期的时候“查看&修改”的时候,
535 - 有效的航线也就是status状态等于1的时候也要展示:保存按钮、开启按钮/停用按钮、删除按钮;
536 - 4:那么问题来了当从航班配置设置不查询日期的时候状态为1的时候也要展示:保存按钮、开启按钮/停用按钮、删除按钮;
537 - 那么要么跳转的时候传过来一个参数;
538 - 5:如果是从【航班顺位】和【DM数据处理】跳转过来,那么航班航线设置维度只作为详情查看,禁用所有的操作。
539 - 所以展示不展示保存按钮、开启按钮/停用按钮、删除按钮毫无意义
540 - */
541 - if (item.status == "3" || (item.status == "1" && item.ruleDate)) {
542 - return true;
543 - } else if (
544 - item.status == "1" &&
545 - this.$route.query.querySpecifyData == "2"
546 - ) {
547 - // 航班配舱设置非日期级别情况下
548 - return true;
549 - } else if (item.status == "1" && this.$route.query.dataStatus == "add") {
550 - // 添加航班配舱设置非日期级别情况下
551 - return true;
552 - } else if (item.status == "2") {
553 - return true;
554 - } else {
555 - return false;
556 - }
557 - },
558 - // 当前激活面板改变时触发
559 - collapseChange(name) {
560 - this.$emit("collapse", name);
561 - },
562 - // 始发站
563 - changeLocation(val) {
564 - this.$emit("location", val);
565 - },
566 - // 目的站
567 - changeDestinationSite(val) {
568 - this.$emit("destinationSite", val);
569 - },
570 - // 申报类别
571 - changeCargoType(arr) {
572 - this.$emit("cargoType", arr);
573 - },
574 - // 货物类型
575 - changeCargoStatus(arr) {
576 - this.$emit("cargoStatus", arr);
577 - },
578 - // 取件扫描号
579 - changePuporpux(arr) {
580 - this.$emit("puporpux", arr);
581 - },
582 - // Service Code
583 - changeServiceCode(arr) {
584 - this.$emit("serviceCode", arr);
585 - },
586 - // Handling Code
587 - changeHandlingCode(arr) {
588 - this.$emit("handlingCode", arr);
589 - },
590 - // Sub Category
591 - changeSubCategory(arr) {
592 - this.$emit("subCategory", arr);
593 - },
594 - // 新增规则
595 - addRouteRule(index) {
596 - this.$emit("addRlue", index);
597 - },
598 - // 保存
599 - saveSubmit(item, index) {
600 - this.$emit("save", item, index);
601 - },
602 - // 开启/暂停
603 - onOffSubmit(item, index) {
604 - this.$emit("onOff", item, index);
605 - },
606 - // 删除
607 - deleteSubmit(item, index) {
608 - this.$emit("delete", item, index);
609 - },
610 - },
611 -};
612 -</script>
613 -<style lang="scss">
614 -.collapse-item-header {
615 - padding-left: 40px;
616 -}
617 -.el-collapse {
618 - border: 0 !important;
619 -}
620 -.el-collapse-item__header {
621 - background-color: #d9ecff !important;
622 - border-bottom: 1px solid #ccc;
623 - padding: 0 10px 0 30px;
624 -}
625 -.el-collapse-item__wrap {
626 - border-bottom: 0 !important;
627 -}
628 -.el-collapse-item {
629 - border-bottom: 1px solid #ccc;
630 -}
631 -.el-collapse-item:last-child {
632 -}
633 -.route-container {
634 - strong {
635 - font-size: 14px;
636 - }
637 - .route-info {
638 - .route-info-card {
639 - section {
640 - padding: 12px 70px;
641 - .route-config-header {
642 - .flight-route-title {
643 - margin-left: 8px;
644 - }
645 - }
646 - }
647 - .route-config-info {
648 - }
649 - }
650 - }
651 -}
652 -.el-form-item__error {
653 - color: #ff4949;
654 - font-size: 12px;
655 - line-height: 1;
656 - padding-top: 4px;
657 - position: absolute;
658 - top: 100%;
659 - left: 0;
660 - font-weight: 500;
661 - width: 100% !important;
662 -}
663 -</style>