Fedex / imac-vue

Go to a project
Toggle navigation Toggle navigation pinning
Elements-SY
701b7d09 1 parent 288907d3

modify

Inline Side-by-side
Showing 6 changed files with 1525 additions and 0 deletions
1 +<template>
2 + <div class="form-header">
3 + <el-row style="padding-bottom: 20px">
4 + <el-col>
5 + <el-divider content-position="left">ET86配舱航班顺位</el-divider>
6 + </el-col>
7 + </el-row>
8 + <!-- ET86配舱航班顺位 -->
9 + <el-row :gutter="24" justify="center">
10 + <el-col :span="18">
11 + <el-row style="margin-bottom: 15px" v-show="getRouter">
12 + <el-col>
13 + <el-button
14 + type="primary"
15 + icon="el-icon-plus"
16 + size="mini"
17 + @click="addBtn"
18 + >添加</el-button
19 + >
20 + <span class="ml20" style="color: #ffba00"
21 + >拖动航班号可调整优先级</span
22 + >
23 + </el-col>
24 + </el-row>
25 + <yl-table
26 + ref="ylTable"
27 + emptyText="请添加配舱航班"
28 + :attrs="tableAttr"
29 + :loadingTable="tableAttr.loadingTable"
30 + :tableData="tableData"
31 + :pageConfig="{
32 + isPagination: false,
33 + }"
34 + >
35 + <template #column>
36 + <el-table-column
37 + type="index"
38 + label="序号"
39 + width="50"
40 + align="center"
41 + ></el-table-column>
42 + <el-table-column
43 + label="航班号"
44 + prop="flightNo"
45 + min-width="100"
46 + align="center"
47 + >
48 + <template slot-scope="scope">
49 + <el-input
50 + v-model="scope.row.flightNo"
51 + clearable
52 + :disabled="scope.row.edit"
53 + @focus="inputFlightNoFocus(scope)"
54 + @blur="blurSearch"
55 + placeholder="请输入航班号"
56 + size="small"
57 + />
58 + </template>
59 + </el-table-column>
60 + <el-table-column
61 + label="加减天数"
62 + prop="calculateDay"
63 + width="140"
64 + align="center"
65 + >
66 + <template slot-scope="scope">
67 + <yl-el-input-number
68 + v-model="scope.row.calculateDay"
69 + :disabled="scope.row.edit"
70 + :precision="0"
71 + :controls="true"
72 + v-input-filter
73 + clearable
74 + placeholder=""
75 + size="small"
76 + style="width: 100%"
77 + />
78 + </template>
79 + </el-table-column>
80 + <el-table-column
81 + label="航线"
82 + prop="flightRoute"
83 + min-width="100"
84 + align="center"
85 + >
86 + <template slot-scope="scope">
87 + <el-select
88 + v-model="scope.row.flightRoute"
89 + size="small"
90 + :disabled="scope.row.edit"
91 + @visible-change="visibleChangeRoute($event, scope)"
92 + >
93 + <el-option
94 + v-for="item in scope.row.routeList"
95 + :key="item.id"
96 + :label="item.route"
97 + :value="item.route"
98 + >
99 + </el-option>
100 + </el-select>
101 + </template>
102 + </el-table-column>
103 + <el-table-column
104 + label="爆仓是否继续配舱"
105 + prop="permitOverweight"
106 + min-width="100"
107 + align="center"
108 + >
109 + <template slot-scope="scope">
110 + <el-checkbox
111 + v-model="scope.row.permitOverweight"
112 + :disabled="scope.row.edit"
113 + @change="changeCheck(scope)"
114 + ></el-checkbox>
115 + </template>
116 + </el-table-column>
117 + <el-table-column label="操作" min-width="100" align="center">
118 + <template slot-scope="scope">
119 + <el-button
120 + size="mini"
121 + type="danger"
122 + :disabled="scope.row.edit"
123 + @click="deleBtn(scope.row, scope.$index)"
124 + >删除</el-button
125 + >
126 + </template>
127 + </el-table-column>
128 + </template>
129 + </yl-table>
130 + </el-col>
131 + </el-row>
132 + <!-- ET86配舱航班顺位维度 -->
133 + <el-row style="padding: 20px 0">
134 + <el-col>
135 + <el-divider content-position="left">航线维度设置</el-divider>
136 + </el-col>
137 + </el-row>
138 + <el-card shadow="always" class="box-card">
139 + <el-form
140 + :model="queryForm"
141 + label-position="right"
142 + label-width="120px"
143 + ref="ruleForm"
144 + class="config-form"
145 + >
146 + <el-row class="rowPadding">
147 + <el-col :span="24">
148 + <el-col :span="10">
149 + <el-form-item label="原航班号">
150 + <el-input
151 + type="textarea"
152 + v-model="queryForm.originOfFlightNo"
153 + size="medium"
154 + maxlength="1000"
155 + show-word-limit
156 + :rows="4"
157 + placeholder="原航班号之间用分号分隔，例：LP001;LP002"
158 + @blur="blurEvent"
159 + :disabled="!getRouter"
160 + ></el-input>
161 + </el-form-item>
162 + </el-col>
163 + <el-col :span="14">
164 + <el-form-item label="">
165 + <el-col :span="4" style="text-align: end; width: 9%">
166 + <span
167 + style="
168 + width: 10%;
169 + margin-right: 10px;
170 + font-size: 14px;
171 + color: #606266;
172 + font-weight: 700;
173 + "
174 + >服务种类</span
175 + >
176 + </el-col>
177 + <el-col :span="4" style="text-align: end; width: 19%">
178 + <el-radio-group
179 + v-model="isServiceCode"
180 + @change="changeIsServiceCode"
181 + :disabled="!getRouter"
182 + style="text-align: left"
183 + >
184 + <el-radio label="1">包含ServiceCode</el-radio>
185 + <el-radio label="2">不包含ServiceCode</el-radio>
186 + </el-radio-group>
187 + </el-col>
188 + <el-col :span="16" v-if="isServiceCode == '1'">
189 + <el-input
190 + type="textarea"
191 + v-model="queryForm.includeServiceType"
192 + size="medium"
193 + maxlength="1000"
194 + show-word-limit
195 + :rows="4"
196 + placeholder="请输入ServiceCode"
197 + @blur="serviceCodeBlur"
198 + :disabled="!getRouter"
199 + ></el-input>
200 + </el-col>
201 + <el-col :span="16" v-else>
202 + <el-input
203 + type="textarea"
204 + v-model="queryForm.notIncludeServiceType"
205 + size="medium"
206 + maxlength="1000"
207 + show-word-limit
208 + :rows="4"
209 + placeholder="请输入ServiceCode"
210 + @blur="serviceCodeBlur"
211 + :disabled="!getRouter"
212 + ></el-input>
213 + </el-col>
214 + </el-form-item>
215 + </el-col>
216 + </el-col>
217 +
218 + <el-col :span="24">
219 + <el-col :span="10">
220 + <el-form-item label="URSA包含">
221 + <el-input
222 + type="textarea"
223 + v-model="queryForm.includeUrsa"
224 + size="medium"
225 + maxlength="1000"
226 + show-word-limit
227 + :rows="4"
228 + placeholder="URSA之间用分号分隔，例：F1_;F2_;F3_;P_"
229 + :disabled="!getRouter"
230 + @blur="includeUrsa"
231 + ></el-input>
232 + <span v-text="ursaError" class="el-form-item__error"></span>
233 + </el-form-item>
234 + </el-col>
235 + <el-col :span="14">
236 + <el-form-item label="">
237 + <el-col :span="8" style="text-align: end; width: 28%"
238 + ><span
239 + class="ursa-label"
240 + style="
241 + margin-right: 10px;
242 + font-size: 14px;
243 + color: #606266;
244 + font-weight: 700;
245 + "
246 + >URSA不包含</span
247 + ></el-col
248 + >
249 + <el-col :span="16">
250 + <el-input
251 + type="textarea"
252 + v-model="queryForm.notIncludeUrsa"
253 + size="medium"
254 + maxlength="1000"
255 + show-word-limit
256 + :rows="4"
257 + placeholder="URSA之间用分号分隔，例：F1;F2;F3;P"
258 + :disabled="!getRouter"
259 + @blur="notIncludeUrsa"
260 + ></el-input>
261 + <span
262 + class="el-form-item__error"
263 + v-text="notUrsaError"
264 + style="width: 50%; margin-left: 28%"
265 + ></span>
266 + </el-col>
267 + </el-form-item>
268 + </el-col>
269 + </el-col>
270 +
271 + <el-col :span="10">
272 + <el-form-item label="申报类别">
273 + <el-card shadow="never">
274 + <el-checkbox-group
275 + v-model="checkboxClassType"
276 + @change="changeCheckboxCargoType"
277 + style="display: flex"
278 + v-if="cargoType.length"
279 + :disabled="!getRouter"
280 + >
281 + <el-checkbox
282 + v-for="item in cargoType"
283 + :label="item.chineseName"
284 + :name="item.chineseName"
285 + :key="item.code"
286 + >
287 + <Tooltips :content="item.chineseName" :refName="item.code">
288 + </Tooltips>
289 + </el-checkbox>
290 + </el-checkbox-group>
291 + </el-card>
292 + </el-form-item>
293 + </el-col>
294 +
295 + <el-col :span="24">
296 + <el-col :span="2">
297 + <el-form-item label="单品名">
298 + <el-checkbox
299 + v-model="queryForm.multiHs"
300 + :disabled="!getRouter"
301 + ></el-checkbox>
302 + </el-form-item>
303 + </el-col>
304 + <el-col :span="8">
305 + <el-form-item label="" class="custom-label">
306 + <span class="custom-label-title">件数</span>
307 + <el-col :span="10">
308 + <el-input
309 + v-model.trim="queryForm.minNumOfPieces"
310 + placeholder="最少件数"
311 + @blur="inputBlurMinPieces($event)"
312 + :disabled="!getRouter"
313 + ></el-input>
314 + <span ref="minNumOfPieces" class="el-form-item__error"></span>
315 + </el-col>
316 + <el-col style="text-align: center" :span="1">-</el-col>
317 + <el-col :span="10">
318 + <el-input
319 + v-model.trim="queryForm.maxNumOfPieces"
320 + placeholder="最多件数"
321 + @blur="inputBlurMaxPieces($event)"
322 + :disabled="!getRouter"
323 + ></el-input>
324 + </el-col>
325 + </el-form-item>
326 + </el-col>
327 + <el-col :span="8">
328 + <el-form-item label="" class="custom-label">
329 + <span class="custom-label-title">重量(KG)</span>
330 + <el-col :span="10">
331 + <el-input
332 + v-model.trim="queryForm.minWeight"
333 + placeholder="最小重量"
334 + @blur="inputBlurMinWeight($event)"
335 + :disabled="!getRouter"
336 + ></el-input>
337 + <span ref="minWeight" class="el-form-item__error"></span>
338 + </el-col>
339 + <el-col style="text-align: center" :span="1">-</el-col>
340 + <el-col :span="10">
341 + <el-input
342 + v-model.trim="queryForm.maxWeight"
343 + placeholder="最大重量"
344 + @blur="inputBlurMaxWeight($event)"
345 + :disabled="!getRouter"
346 + ></el-input>
347 + </el-col>
348 + </el-form-item>
349 + </el-col>
350 + </el-col>
351 +
352 + <el-col :span="24">
353 + <el-col :span="2">
354 + <el-form-item label="申报价值"></el-form-item>
355 + </el-col>
356 + <el-col :span="8">
357 + <el-form-item label="" class="custom-label">
358 + <span class="custom-label-title">人民币</span>
359 + <el-col :span="10">
360 + <el-input
361 + v-model.trim="queryForm.minCustomVal"
362 + placeholder="最小申报价值"
363 + @blur="inputCNYBlurMin($event, 'minCNYCustomVal')"
364 + :disabled="!getRouter"
365 + ></el-input>
366 + <span
367 + ref="minCNYCustomVal"
368 + class="el-form-item__error"
369 + ></span>
370 + </el-col>
371 + <el-col style="text-align: center" :span="1">-</el-col>
372 + <el-col :span="10">
373 + <el-input
374 + v-model.trim="queryForm.maxCustomVal"
375 + placeholder="最大申报价值"
376 + @blur="inputCNYBlurMax($event, 'maxCNYCustomVal')"
377 + :disabled="!getRouter"
378 + ></el-input>
379 + </el-col>
380 + </el-form-item>
381 + </el-col>
382 + <el-col :span="8">
383 + <el-form-item label="" class="custom-label">
384 + <span class="custom-label-title">美元</span>
385 + <el-col :span="10">
386 + <el-input
387 + v-model.trim="queryForm.minUsdCustomVal"
388 + placeholder="最小申报价值"
389 + @blur="inputSUDBlurMin($event, 'minSUDCustomVal')"
390 + :disabled="!getRouter"
391 + ></el-input>
392 + <span
393 + ref="minSUDCustomVal"
394 + class="el-form-item__error"
395 + ></span>
396 + </el-col>
397 + <el-col style="text-align: center" :span="1">-</el-col>
398 + <el-col :span="10">
399 + <el-input
400 + v-model.trim="queryForm.maxUsdCustomVal"
401 + placeholder="最大申报价值"
402 + @blur="inputSUDBlurMax($event, 'maxSUDCustomVal')"
403 + :disabled="!getRouter"
404 + ></el-input>
405 + </el-col>
406 + </el-form-item>
407 + </el-col>
408 + </el-col>
409 + <el-col :span="24" v-show="getRouter">
410 + <el-form-item label="">
411 + <el-button type="primary" @click="submitForm('ruleForm')">{{
412 + getRouter
413 + }}</el-button>
414 + </el-form-item>
415 + </el-col>
416 + </el-row>
417 + </el-form>
418 + </el-card>
419 + </div>
420 +</template>
421 +
422 +<script>
423 +import YlForm from "@/components/YlForm";
424 +import YlTable from "@/components/YlTable";
425 +import YlElInputNumber from "../components/input-number"
426 +import { inputBlurValidate } from "@/utils/mixins";
427 +import { tableAttr } from "./tableConfig";
428 +import {
429 + allDictData, // 获取全部字典
430 + queryRouteByFltNo, // 航线查询
431 +} from "@/api/destinationFlight";
432 +import {
433 + add, // ET86新增
434 + findEtesRuleById, // ET86详情
435 + update, // ET86编辑
436 +} from "@/api/et86";
437 +import indexMixins from "./mixins";
438 +export default {
439 + name: "edit",
440 + components: {
441 + YlForm,
442 + YlTable,
443 + YlElInputNumber
444 + },
445 + mixins: [indexMixins, inputBlurValidate],
446 + data() {
447 + return {
448 + queryForm: {
449 + // ET86配舱航班顺位维度
450 + // 表单参数
451 + id: "", // 维度ID
452 + originOfFlightNo: "", // 原航班号
453 + includeServiceType: "", // 服务种类包含
454 + notIncludeServiceType: "", // 服务种类不包含
455 + includeUrsa: "", // URSA包含
456 + notIncludeUrsa: "", // URSA不包含
457 + declarationCategory: "", // 已勾选申报类别的数据
458 + multiHs: false, // 单品名
459 + minWeight: "", // 最小重量
460 + maxWeight: "",
461 + minNumOfPieces: "", // 最小件数
462 + maxNumOfPieces: "",
463 + currencyCd: "CNY", // 人民币种
464 + currencyCdUsd: "SUD", // 美元币种
465 + minCustomVal: "", // 人民币最小申报值
466 + maxCustomVal: "", // 人民币最大申报值
467 + minUsdCustomVal: "", // 美元最小申报值
468 + maxUsdCustomVal: "", // 美元最大申报值
469 + },
470 + tableAttr: tableAttr, // table配置项
471 + tableData: [], // ET86配舱航班顺位
472 + currentIndex: 0, // 记录当前table 列的索引位置
473 + id: 1, // ET86配舱航班顺位ID
474 + isServiceCode: "1", // 服务种类
475 + serviceCode: "", // 服务种类内容
476 + cargoType: [], // 申报类别调用接口获取所有的申报类别
477 + checkboxCargoType: [], // 已勾选申报类别的数据
478 + checkboxClassType: [], // 申报类别
479 + serviceCodeData: [], // 【服务种类】调用接口获取服务种类所有的serviceCode
480 + minCNYCustomVal: "", // 人民币最小申报值
481 + maxCNYCustomVal: "", //
482 + minSUDCustomVal: "", // 美元最小申报值
483 + maxSUDCustomVal: "", //
484 + };
485 + },
486 + computed: {
487 + // 获取路由参数
488 + getRouter() {
489 + if (this.$route.query.name == "add") {
490 + return "保存";
491 + } else if (this.$route.query.name == "edit") {
492 + return "修改";
493 + } else {
494 + return false;
495 + }
496 + },
497 + },
498 + created() {
499 + this.getAllDictData(); // 获取全部字典
500 + if (this.$route.query.name == "view") {
501 + tableAttr.isDragSort = false;
502 + } else {
503 + tableAttr.isDragSort = true;
504 + }
505 + if (this.$route.query.name == "view" || this.$route.query.name == "edit") {
506 + this.queryFindEtesRuleById(this.$route.query); // ET86详情
507 + } else {
508 + // 新增时默认一条数据
509 + this.tableData = [
510 + {
511 + id: this.id,
512 + flightNo: "", // 航班号
513 + calculateDay: "", // 航班日期//+1 -1
514 + flightRoute: "", // 航线
515 + routeList: [], // 航线列表
516 + permitOverweight: "N" ? false : true, // 爆仓是否继续配舱 Y-是，N-否
517 + priority: this.id, // 优先等级
518 + ruleId: "", // 维度ID
519 + },
520 + ];
521 + }
522 + },
523 + methods: {
524 + // ET86新增
525 + postAdd(params) {
526 + add(params)
527 + .then((res) => {
528 + const { code, msg } = res;
529 + if (code == 200) {
530 + this.msgSuccess(msg || "创建成功!");
531 + this.closeTagMenu(this.$route);
532 + } else {
533 + this.msgError(msg || "创建失败!");
534 + }
535 + })
536 + .catch(() => {});
537 + },
538 + // ET86详情
539 + queryFindEtesRuleById({ id, status, name }) {
540 + findEtesRuleById({ id: id, status: status })
541 + .then((res) => {
542 + const { code, data, msg } = res;
543 + if (code == 200) {
544 + data.list.flightRankDtoList.map((item) => {
545 + if (name == "view") {
546 + // 跳转页面传过来的字段值等于view展示查看
547 + item.edit = true;
548 + } else {
549 + item.edit = false;
550 + }
551 + // 爆仓是否继续配舱
552 + if (item.permitOverweight == "N") {
553 + item.permitOverweight = false;
554 + } else {
555 + item.permitOverweight = true;
556 + }
557 + });
558 + // ET86配舱航班顺位列表
559 + this.tableData = data.list.flightRankDtoList;
560 + Object.keys(data.list.fltRuleDto).map((key) => {
561 + if (key == "multiHs") {
562 + // N为单品名，Y为多品名
563 + if (data.list.fltRuleDto[key] == "N") {
564 + data.list.fltRuleDto[key] = true;
565 + } else {
566 + data.list.fltRuleDto[key] = false;
567 + }
568 + }
569 + // 将详情获取为null的字段设置为空字符串，目的是为了判断的时候少些为null的判断,保持空数据同一的判断条件;
570 + if (data.list.fltRuleDto[key] == null) {
571 + data.list.fltRuleDto[key] = "";
572 + }
573 + });
574 + // 申报类别详情转化成数组赋值给申报类别勾选框作为回显展示数据
575 + if (data.list.fltRuleDto.declarationCategory) {
576 + this.checkboxClassType =
577 + data.list.fltRuleDto.declarationCategory.split(";");
578 + } else {
579 + this.checkboxClassType = [];
580 + }
581 + // 服务种类
582 + if (data.list.fltRuleDto.includeServiceType) {
583 + this.isServiceCode = "1";
584 + } else if (data.list.fltRuleDto.notIncludeServiceType) {
585 + this.isServiceCode = "2";
586 + } else {
587 + this.isServiceCode = "1";
588 + }
589 + this.queryForm = data.list.fltRuleDto; // ET86配舱航班顺位维度
590 + } else {
591 + this.msgError(msg || "获取查看失败");
592 + }
593 + })
594 + .catch(() => {});
595 + },
596 + // ET86编辑
597 + postUpdate(parmas) {
598 + update(parmas)
599 + .then((res) => {
600 + const { code, msg } = res;
601 + if (code == 200) {
602 + this.msgSuccess(msg || "修改成功!");
603 + this.closeTagMenu(this.$route);
604 + } else {
605 + this.msgError(msg || "修改失败!");
606 + }
607 + })
608 + .catch(() => {});
609 + },
610 + // 获取所有数据字典
611 + getAllDictData() {
612 + allDictData()
613 + .then((res) => {
614 + if (res.code != 200) {
615 + this.msgError(res.msg);
616 + return;
617 + }
618 + this.cargoType = res.data.cargoType; // 申报类别
619 + if (res.data.serviceCode.length) {
620 + this.getObj(res.data);
621 + }
622 + })
623 + .catch(() => {});
624 + },
625 + // 航线查询
626 + getQueryRouteByFltNo(item) {
627 + this.tableAttr.loadingTable = true;
628 + this.tableData[this.currentIndex].flightRoute;
629 + queryRouteByFltNo(item)
630 + .then((res) => {
631 + this.tableAttr.loadingTable = false;
632 + if (res.code == 200) {
633 + const list = res.data.list;
634 + if (list.length) {
635 + let isEtesRoute = list.filter((item) => item.isEtesRoute == "Y"); // 过滤普通航线
636 + if (isEtesRoute.length == 0) {
637 + this.msgError("该航班下的航线均为普通航线");
638 + }
639 + this.tableData[this.currentIndex].routeList = isEtesRoute;
640 + this.$set(this.tableData, this.currentIndex, {
641 + ...this.tableData[this.currentIndex],
642 + });
643 + } else {
644 + this.msgError("暂无航线");
645 + this.tableData[this.currentIndex].routeList = [];
646 + this.tableData[this.currentIndex].flightRoute = "";
647 + }
648 + }
649 + })
650 + .catch(() => {});
651 + },
652 + // 航班号input 聚焦事件
653 + inputFlightNoFocus({ $index }) {
654 + this.currentIndex = $index;
655 + },
656 + // 失焦查询
657 + blurSearch() {
658 + // 转大写字母
659 + this.tableData[this.currentIndex].flightNo = this.upCase(
660 + this.tableData[this.currentIndex].flightNo
661 + );
662 + // 筛选重复的航班：【重复规则】航班号 + 加减天数 + 航线有同样的就认为是重复
663 + let repeat = this.tableData.filter(
664 + (item) =>
665 + item.flightNo == this.tableData[this.currentIndex].flightNo &&
666 + item.calculateDay == this.tableData[this.currentIndex].calculateDay &&
667 + item.flightRoute == this.tableData[this.currentIndex].flightRoute
668 + );
669 + let flightNo = repeat.every((item) => item.flightNo.length == 0);
670 + // 出现重复的是不是有航班号
671 + if (flightNo) {
672 + this.msgError("请输入航班号");
673 + return;
674 + }
675 + // 出现重复的返回
676 + if (repeat.length > 1) {
677 + this.msgError("航班顺位已重复");
678 + return;
679 + }
680 + let params = {
681 + fltNo: this.tableData[this.currentIndex].flightNo,
682 + };
683 + // 航班号输入框失焦时判断有没有航班号，有航班号调用航线查询
684 + if (params.fltNo) {
685 + this.getQueryRouteByFltNo(params); // 航线查询
686 + } else {
687 + this.tableData[this.currentIndex].flightRoute = "";
688 + this.tableData[this.currentIndex].routeList = [];
689 + this.msgError("请输入航班号");
690 + }
691 + },
692 + // 航线Select下拉框出现/隐藏时触发事件
693 + visibleChangeRoute(e, { $index, row }) {
694 + this.currentIndex = $index;
695 + let params = {
696 + fltNo: row.flightNo,
697 + };
698 + // 出现下拉框时触发
699 + if (e) {
700 + // 航线查询
701 + this.getQueryRouteByFltNo(params);
702 + }
703 + },
704 + // 添加ET86配舱航班顺位
705 + addBtn(item) {
706 + this.id++;
707 + this.tableData.unshift({
708 + id: this.id,
709 + flightNo: "", // 航班号
710 + calculateDay: "", // 航班日期//+1 -1
711 + flightRoute: "", // 航线
712 + routeList: [], // 航线列表
713 + permitOverweight: "N" ? false : true, // 爆仓是否继续配舱 Y-是，N-否
714 + priority: this.id, // 优先等级
715 + ruleId: "", // 维度ID
716 + });
717 + },
718 + // 是否爆仓
719 + changeCheck({ $index, row }) {
720 + this.tableData.map((item, i) => {
721 + if ($index !== i) {
722 + item.permitOverweight = false;
723 + }
724 + });
725 + },
726 + // 删除
727 + deleBtn(item, $index) {
728 + console.log("删除：", item, $index);
729 + this.tableData.splice($index, 1);
730 + },
731 + // 类别
732 + changeCheckboxCargoType(arr) {
733 + let include = this.cargoType.filter((item) =>
734 + arr.some((val) => val == item.chineseName)
735 + ); // 查询已被勾选的类别
736 + this.checkboxCargoType = include; // 已勾选申报类别的数据
737 + this.queryForm.declarationCategory = arr.join(";");
738 + },
739 + // 失焦事件
740 + blurEvent() {
741 + this.queryForm.originOfFlightNo = this.upCase(
742 + this.queryForm.originOfFlightNo
743 + );
744 + },
745 + // 表单提交
746 + submitForm(formName) {
747 + this.$refs[formName].validate((valid) => {
748 + if (valid && this.validateForm) {
749 + this.tableData.map((item, i) => {
750 + item.priority = ++i;
751 + });
752 + // 爆仓是否继续配舱
753 + const newtTableData = JSON.parse(JSON.stringify(this.tableData));
754 + const tableData = newtTableData;
755 + tableData.filter((item) => {
756 + if (item.permitOverweight == false) {
757 + item.permitOverweight = "N";
758 + } else {
759 + item.permitOverweight = "Y";
760 + }
761 + });
762 + // 校验ET86配舱航班顺位维度
763 + let fltNo = this.tableData.some((item) => item.flightNo == ""); // 通过遍历判断航班顺位列表有没有填写的航班号
764 + let fltNoRoute = this.tableData.some(
765 + (item) => item.flightRoute == ""
766 + ); // 通过遍历判断航班顺位列表有没有填写的航线
767 + if (fltNo) {
768 + this.msgError("航班号不可为空");
769 + return;
770 + }
771 + if (fltNoRoute) {
772 + this.msgError("航线不可为空");
773 + return;
774 + }
775 + if (this.queryForm.originOfFlightNo.length == 0) {
776 + this.msgError("原航班号不可为空");
777 + return;
778 + }
779 + // 服务种类包含不包含二选一
780 + if (this.isServiceCode == "1") {
781 + this.queryForm.notIncludeServiceType = "";
782 + } else {
783 + this.queryForm.includeServiceType = "";
784 + }
785 + let parmas = {
786 + flightRankDtoList: tableData, // ET86配舱航班顺位
787 + fltRuleDto: this.queryForm,
788 + };
789 + let queryParmas = JSON.parse(JSON.stringify(parmas));
790 + // 筛选重复的航班
791 + let repeat = tableData.filter(
792 + (item) =>
793 + item.flightNo == tableData[this.currentIndex].flightNo &&
794 + item.calculateDay == tableData[this.currentIndex].calculateDay &&
795 + item.flightRoute == tableData[this.currentIndex].flightRoute
796 + );
797 + if (tableData.length > 100) {
798 + this.msgError("最多添加100条，请删除后再添加");
799 + return;
800 + }
801 + if (repeat.length > 1) {
802 + this.msgError("ET86配舱航班顺位中存在重复设置");
803 + return;
804 + }
805 + queryParmas.fltRuleDto.multiHs = this.queryForm.multiHs ? "N" : "Y"; // N为单品名，Y为多品名
806 + if (this.validateForm && this.$route.query.name == "add") {
807 + this.postAdd(queryParmas); // 新增
808 + } else {
809 + if (this.validateForm) {
810 + queryParmas.flightRankDtoList.map((item) => {
811 + if (item.hasOwnProperty("routeList")) {
812 + delete item.routeList;
813 + }
814 + });
815 + this.postUpdate(queryParmas); // 修改
816 + }
817 + }
818 + } else {
819 + console.log("error submit!!");
820 + return false;
821 + }
822 + });
823 + this.$emit("handleSearch");
824 + },
825 + isActive(route) {
826 + return route.path === this.$route.path;
827 + },
828 + toLastView(visitedViews, view) {
829 + const latestView = visitedViews.slice(-1)[0];
830 + if (latestView) {
831 + this.$router.replace(latestView.fullPath);
832 + } else {
833 + if (view.name === "Dashboard") {
834 + this.$router.replace({ path: "/redirect" + view.fullPath });
835 + } else {
836 + this.$router.push("/");
837 + }
838 + }
839 + },
840 + // 关闭当前标签菜单
841 + closeTagMenu(view) {
842 + this.$store
843 + .dispatch("tagsView/delView", view)
844 + .then(({ visitedViews }) => {
845 + if (this.isActive(view)) {
846 + this.toLastView(visitedViews, view);
847 + }
848 + });
849 + },
850 + },
851 +};
852 +</script>
853 +<style lang="scss" scoped>
854 +.rowPadding {
855 + padding: 10px 0;
856 + font-size: 12px;
857 +}
858 +::v-deep .custom-label {
859 + .el-form-item__content {
860 + display: flex;
861 + margin-left: 0 !important;
862 + span {
863 + font-size: 14px;
864 + color: #606266;
865 + font-weight: 700;
866 + float: right;
867 + margin-right: 10px;
868 + text-align: end;
869 + }
870 + .custom-label-title {
871 + width: 120px;
872 + }
873 + .el-input__suffix {
874 + right: -15px !important;
875 + }
876 + .el-form-item__error {
877 + color: #ff4949;
878 + font-size: 12px;
879 + line-height: 1;
880 + padding-top: 4px;
881 + position: absolute;
882 + top: 100%;
883 + left: 0;
884 + font-weight: 500;
885 + width: 100% !important;
886 + }
887 + }
888 +}
889 +</style>
1 +import { debounce } from "@/utils";
2 +export default {
3 + data() {
4 + return {
5 + ursaError: "", // URSA包含校验提示语
6 + notUrsaError: "", // URSA不包含校验提示语
7 + validateForm: true, // form表单节流阀
8 + };
9 + },
10 + directives: {
11 + // 处理加减天数
12 + "input-filter": {
13 + bind: function (el, binding, { context }) {
14 + el.handler = function (event) {
15 + context.calculateDay(event);
16 + };
17 + el.addEventListener("input", el.handler);
18 + },
19 + unbind: function (el) {
20 + el.removeEventListener("input", el.handler);
21 + },
22 + },
23 + },
24 + methods: {
25 + // 防抖函数处理加减天数校验
26 + calculateDay: debounce(function (...args) {
27 + // 判断有没有值
28 + if (args.length) {
29 + // 判断传过来的是不是一个对象
30 + const { target } = args[0];
31 + // 是不是一个数字
32 + if (isNaN(Number(target.value))) {
33 + this.msgError("请输入有效数字");
34 + target.value = "";
35 + } else {
36 + // // 非数字时
37 + // if (Number(target.value) < -7) {
38 + // this.msgError("加减天数最小不能大于7天");
39 + // target.value = "";
40 + // } else if (Number(target.value) > 7) {
41 + // this.msgError("加减天数最大不能大于7天");
42 + // target.value = "";
43 + // }
44 + if (/[\.]/.test(Number(target.value))) {
45 + // 浮点数时
46 + this.msgError("加减天数只能为整数");
47 + target.value = "";
48 + }
49 + }
50 + target.dispatchEvent(new Event("input"));
51 + }
52 + }, 800),
53 + // 获取字典
54 + getObj({ serviceCode }) {
55 + let service_Code = [];
56 + serviceCode.map((item) => {
57 + service_Code.push(item.chineseName);
58 + });
59 + this.serviceCodeData = service_Code;
60 + },
61 + // 处理serviceCode包不包含
62 + serviceCodeCofig() {
63 + let str = "";
64 + if (this.isServiceCode == "1") {
65 + str = this.queryForm.includeServiceType.replace(/;|；/g, ",");
66 + } else {
67 + str = this.queryForm.notIncludeServiceType.replace(/;|；/g, ",");
68 + }
69 + let arr = str.split(",");
70 + if (arr[arr.length - 1] == "") {
71 + arr.splice(arr.length - 1, 1);
72 + }
73 + let noHasCode = this.serviceCodeData.filter(
74 + (v) => !arr.some((val) => val == v)
75 + );
76 + let hasCode = this.serviceCodeData.filter((v) =>
77 + arr.some((val) => val == v)
78 + );
79 + let includeCode = arr.filter((v) => !hasCode.some((val) => val == v));
80 + return {
81 + include: hasCode,
82 + noInclude: includeCode,
83 + };
84 + },
85 + // radio包含不包含serviceCode
86 + changeIsServiceCode(val) {
87 + // 勾选的时候去校验 || 输入的时候去校验
88 + if (val == 1) {
89 + if (this.serviceCodeCofig().noInclude.length) {
90 + let tip = this.serviceCodeCofig().noInclude.toString();
91 + // this.msgError(`${tip} 不包含`);
92 + }
93 + } else {
94 + if (this.serviceCodeCofig().include.length) {
95 + let tip = this.serviceCodeCofig().include.toString();
96 + // this.msgError(`${tip} 已包含`);
97 + }
98 + }
99 + },
100 + // serviceCode失焦事件
101 + serviceCodeBlur() {
102 + if (this.isServiceCode == "1") {
103 + if (this.serviceCodeCofig().noInclude.length) {
104 + let tip = this.serviceCodeCofig().noInclude.toString();
105 + // this.msgError(`${tip} 不包含`);
106 + }
107 + } else {
108 + if (this.serviceCodeCofig().include.length) {
109 + let tip = this.serviceCodeCofig().include.toString();
110 + // this.msgError(`${tip} 已包含`);
111 + }
112 + }
113 + },
114 + // Ursa校验 使用JavaScript写一个匹配字母的表达式
115 + validateUrsa(ursaMark, ursa) {
116 + // 分隔字符串并且转数组&去除数组空字符串
117 + let ursaList = ursa.split(";").filter((str) => str !== "");
118 + // 是否有重复的
119 + let repeat = new Set(ursaList).size !== ursaList.length;
120 + // 校验开头以字母或者数字开头下划线结尾的/^[a-zA-Z0-9]*_$/ 和 校验校验开头以字母或者数字开头的/^[a-zA-Z0-9]*$/
121 + let inUrsa = ursaList.every((item) =>
122 + ursaMark ? /^[a-zA-Z0-9]*_$/.test(item) : /^[a-zA-Z0-9]*$/.test(item)
123 + );
124 + const ursaInfo = {
125 + ursaMark: ursaMark, // Boolean ursa包含/不包含
126 + ursa: ursaList, // ursa
127 + repeat: repeat, // Boolean 是否有重复的
128 + inUrsa: inUrsa, // Boolean ursa校验
129 + };
130 + // ursa包含
131 + if (ursaMark && ursaInfo.repeat) {
132 + this.ursaError = "填写的URSA已重复";
133 + }
134 + if (ursaMark && !ursaInfo.inUrsa) {
135 + this.ursaError = "URSA包含之间用分号分隔，例：P2_;P3_;P_";
136 + }
137 + if (ursaMark && !ursaInfo.repeat && ursaInfo.inUrsa) {
138 + this.ursaError = "";
139 + }
140 + // ursa不包含;
141 + if (!ursaMark && ursaInfo.repeat) {
142 + this.notUrsaError = "填写的URSA已重复";
143 + }
144 + if (!ursaMark && !ursaInfo.inUrsa) {
145 + this.notUrsaError = "URSA不包含之间用分号分隔，例：P2;P3;P";
146 + }
147 + if (!ursaMark && !ursaInfo.repeat && ursaInfo.inUrsa) {
148 + this.notUrsaError = "";
149 + }
150 + // 两则都为空时则校验通过
151 + if (
152 + (this.ursaError && this.notUrsaError) ||
153 + this.ursaError ||
154 + this.notUrsaError
155 + ) {
156 + this.validateForm = false;
157 + } else {
158 + this.validateForm = true;
159 + }
160 + },
161 + // 包含
162 + includeUrsa() {
163 + let { includeUrsa } = this.queryForm;
164 + this.validateUrsa(true, includeUrsa);
165 + },
166 + // 不包含
167 + notIncludeUrsa() {
168 + let { notIncludeUrsa } = this.queryForm;
169 + this.validateUrsa(false, notIncludeUrsa);
170 + },
171 + },
172 +};
1 +export const tableAttr = {
2 + border: true,
3 + loadingTable: false,
4 + isDragSort: true, // 拖拽tableData数据一定要加id字段
5 + maxHeight: 300,
6 + btnCofig: {
7 + isBtn: false,
8 + btnGroup: [
9 + {
10 + type: "primary",
11 + icon: "el-icon-plus",
12 + btnName: "添加",
13 + size: "mini",
14 + round: false,
15 + loading: false,
16 + event: "add",
17 + },
18 + ],
19 + },
20 +};
1 +export const formConfig = [
2 + {
3 + label: "原航班",
4 + type: "Input",
5 + name: "originOfFlightNo",
6 + prop: "originOfFlightNo",
7 + placeholder: "请输入原航班号",
8 + span: 5,
9 + trigger: "blur",
10 + labelWidth: "55px",
11 + },
12 + {
13 + label: "修改时间 从",
14 + type: "Date",
15 + name: "startTime",
16 + prop: "startTime",
17 + placeholder: "请选择开始时间",
18 + // rules: { required: true, message: "请选择开始时间", trigger: "blur" },
19 + format: "yyyy-MM-dd",
20 + colWidth: "23%",
21 + inputWidth: "100%",
22 + },
23 + {
24 + label: "到",
25 + type: "Date",
26 + name: "endTime",
27 + prop: "endTime",
28 + placeholder: "请选择结束时间",
29 + // rules: { required: true, message: "请选择结束时间", trigger: "blur" },
30 + format: "yyyy-MM-dd",
31 + colWidth: "20%",
32 + labelWidth: "20px",
33 + inputWidth: "100%",
34 + },
35 + {
36 + label: "规则状态",
37 + type: "Select",
38 + name: "status",
39 + prop: "status",
40 + placeholder: "请选择状态",
41 + options: {
42 + data: [
43 + {
44 + value: "1",
45 + label: "有效",
46 + },
47 + {
48 + value: "0",
49 + label: "无效",
50 + },
51 + ],
52 + },
53 + colWidth: "18%",
54 + labelWidth: "70px",
55 + inputWidth: "100%",
56 + },
57 +];
1 +<template>
2 + <div ref="formHeaderRef" class="form-header container">
3 + <el-row>
4 + <el-col>
5 + <yl-form
6 + ref="ruleForm"
7 + :formConfig="formConfig"
8 + :queryForm="queryForm"
9 + :inline="false"
10 + formWidth="auto"
11 + @blur="blurEvent"
12 + />
13 + </el-col>
14 + </el-row>
15 + <yl-table
16 + ref="ylTable"
17 + :attrs="tableAttr"
18 + :loadingTable="tableAttr.loadingTable"
19 + :columns="columns"
20 + :tableData="tableData"
21 + :pageConfig="pageConfig"
22 + @sizeChange="handleSizeChange"
23 + @currentChange="handleCurrentChange"
24 + @search="searchBtn"
25 + @add="addBtn"
26 + >
27 + </yl-table>
28 + </div>
29 +</template>
30 +<script>
31 +import YlForm from "@/components/YlForm";
32 +import YlTable from "@/components/YlTable";
33 +import { formConfig } from "./formConfig";
34 +import { tableAttr, columnHeader } from "./tableConfig";
35 +import { restTableHeight } from "@/utils";
36 +import {
37 + findAllEtesRules, // ET86查询
38 + deleteEtesRuleById, // 删除
39 +} from "@/api/et86";
40 +import store from "@/store";
41 +export default {
42 + name: "Et86RuleConfig",
43 + components: {
44 + YlForm,
45 + YlTable,
46 + },
47 + data() {
48 + return {
49 + formConfig: formConfig, // 表单配置项
50 + queryForm: {
51 + // 表单参数
52 + status: "有效",
53 + },
54 + pageConfig: {
55 + // 分页配置项
56 + isPagination: true,
57 + total: 0,
58 + pageData: {
59 + page: 1,
60 + size: 10,
61 + },
62 + },
63 + tableAttr: tableAttr, // table配置项
64 + columns: columnHeader(
65 + this.indexAdd,
66 + this.viewRow,
67 + this.editRow,
68 + this.deleteRow
69 + ), // 表头
70 + tableData: [], // 表格数据
71 + };
72 + },
73 + watch: {
74 + $route(to, from) {
75 + // 如果是从edit页面进入的Et86RuleConfig页面，那么删除Et86RuleConfig页面缓存
76 + // store.dispatch("tagsView/delCachedView", to); // 删除当前路由组件Et86RuleConfig缓存
77 + if (to.name == this.$options.name) {
78 + this.searchBtn();
79 + }
80 + },
81 + },
82 + created() {
83 + // ET86查询
84 + this.$nextTick(() => {
85 + this.searchBtn();
86 + });
87 + },
88 + mounted() {
89 + this.$nextTick(() => {
90 + // window视口的高减去除了Table表格的高；将这个差的结果值作为设置Table的高;
91 + this.tableAttr.maxHeight =
92 + window.innerHeight - restTableHeight(this.$refs);
93 + });
94 + },
95 + computed: {},
96 + methods: {
97 + // ET86查询
98 + queryFindAllEtesRules() {
99 + const { page, size } = this.pageConfig.pageData;
100 + let params = {
101 + originOfFlightNo: this.queryForm.originOfFlightNo,
102 + updateTimeStart: this.queryForm.startTime
103 + ? this.queryForm.startTime
104 + : "",
105 + updateTimeEnd: this.queryForm.endTime ? this.queryForm.endTime : "",
106 + limitStart: (page - 1) * size,
107 + limitSize: size,
108 + status: this.queryForm.status,
109 + };
110 + if (this.queryForm.status == "有效") {
111 + params.status = "1";
112 + }
113 + this.tableAttr.loadingTable = true;
114 + findAllEtesRules(params)
115 + .then((res) => {
116 + this.tableAttr.loadingTable = false;
117 + const { code, data } = res;
118 + if (code == 200) {
119 + const valid = data.list.filter((item) => item.status == "1"); // 有效
120 + const invalid = data.list.filter((item) => item.status == "0"); // 无效
121 + this.tableData = valid.concat(invalid);
122 + this.pageConfig.total = data.total;
123 + }
124 + })
125 + .catch(() => {});
126 + },
127 + // 失焦事件
128 + blurEvent({ originOfFlightNo }) {
129 + this.queryForm.originOfFlightNo = this.upCase(originOfFlightNo);
130 + },
131 + // 搜索
132 + searchBtn() {
133 + this.pageConfig.pageData.page = 1;
134 + this.pageConfig.pageData.size = 10;
135 + this.$refs.ruleForm.handleSearch("ruleForm", (val) => {
136 + this.queryFindAllEtesRules();
137 + });
138 + },
139 + // 翻页序号递增
140 + indexAdd(index) {
141 + const page = this.pageConfig.pageData.page; // 当前页码
142 + const pagesize = this.pageConfig.pageData.size; // 每页条数
143 + return index + 1 + (page - 1) * pagesize;
144 + },
145 + //条数变化
146 + handleSizeChange(e) {
147 + this.pageConfig.pageData.size = e;
148 + this.pageConfig.pageData.page = 1;
149 + this.queryFindAllEtesRules();
150 + },
151 + //页码变化
152 + handleCurrentChange(e) {
153 + this.pageConfig.pageData.page = e;
154 + this.queryFindAllEtesRules();
155 + },
156 + // 添加
157 + addBtn(item) {
158 + this.$router.push({
159 + path: "/edit",
160 + query: {
161 + name: "add",
162 + },
163 + });
164 + },
165 + // 重置表单
166 + restForm() {
167 + this.$refs.ruleForm.resetFields("ruleForm");
168 + },
169 + // 查看
170 + viewRow({ row }) {
171 + this.$router.push({
172 + path: "/edit",
173 + query: {
174 + name: "view",
175 + id: row.id,
176 + status: row.status,
177 + },
178 + });
179 + },
180 + // 编辑
181 + editRow({ row }) {
182 + this.$router.push({
183 + path: "/edit",
184 + query: {
185 + name: "edit",
186 + id: row.id,
187 + status: row.status,
188 + },
189 + });
190 + },
191 + // 删除
192 + deleteRow({ row }) {
193 + this.$confirm("是否确认删除? 删除后该规则设置为无效，不可恢复", "提示", {
194 + confirmButtonText: "确定",
195 + cancelButtonText: "取消",
196 + type: "warning",
197 + center: true,
198 + })
199 + .then(() => {
200 + delete row.status;
201 + deleteEtesRuleById(row).then((res) => {
202 + const { code, msg } = res;
203 + if (code == 200) {
204 + this.searchBtn();
205 + this.msgSuccess("删除成功!");
206 + } else {
207 + this.msgError(msg || "删除失败");
208 + }
209 + });
210 + })
211 + .catch(() => {});
212 + },
213 + },
214 +};
215 +</script>
216 +<style lang="scss" scoped></style>
1 +const state = {
2 + 1: "有效",
3 + 0: "无效",
4 +};
5 +export const tableAttr = {
6 + border: true,
7 + loadingTable: false,
8 + isDragSort: false, // 拖拽tableData数据一定要加id字段
9 + maxHeight: 0,
10 + // defaultSort: { prop: "updateTime", order: "descending" },
11 + btnCofig: {
12 + isBtn: true,
13 + btnGroup: [
14 + {
15 + type: "primary", // text、primary、danger
16 + icon: "el-icon-search", // el-icon-edit 、el-icon-delete、el-icon-plus、el-icon-download、el-icon-upload el-icon--right
17 + btnName: "搜索",
18 + size: "mini", // medium / small / mini
19 + round: false,
20 + loading: false,
21 + event: "search",
22 + },
23 + {
24 + type: "primary",
25 + icon: "el-icon-plus",
26 + btnName: "添加",
27 + size: "mini",
28 + round: false,
29 + loading: false,
30 + event: "add",
31 + },
32 + ],
33 + },
34 +};
35 +export const columnHeader = (indexAdd, viewRow, editRow, deleteRow) => [
36 + {
37 + type: "index",
38 + label: "序号",
39 + prop: "id",
40 + align: "center",
41 + width: "50",
42 + index: indexAdd,
43 + },
44 + {
45 + label: "原航班",
46 + prop: "originOfFlightNo",
47 + align: "center",
48 + minWidth: 80,
49 + },
50 + {
51 + label: "配载航班",
52 + prop: "rankFltNoStr",
53 + align: "center",
54 + minWidth: 120,
55 + },
56 + {
57 + label: "航线",
58 + prop: "rankFltRouteStr",
59 + align: "center",
60 + minWidth: 140,
61 + },
62 + {
63 + label: "状态",
64 + prop: "status",
65 + align: "center",
66 + minWidth: 50,
67 + render: (h, params) => {
68 + const { row } = params;
69 + return h("div", `${state[row.status]}`);
70 + },
71 + },
72 + {
73 + label: "修改时间",
74 + prop: "updateTime",
75 + align: "center",
76 + minWidth: 80,
77 + // sortable: true,
78 + // "sort-method": (a, b) => a.createTime - b.createTime,
79 + },
80 + {
81 + label: "修改人",
82 + prop: "updateUserName",
83 + align: "center",
84 + minWidth: 60,
85 + },
86 + {
87 + label: "操作",
88 + prop: "operate",
89 + align: "center",
90 + minWidth: 90,
91 + fixed: "right",
92 + render: (h, params) => {
93 + let operateData = [];
94 + if (params.row.status == "1") {
95 + operateData = [
96 + h(
97 + "el-button",
98 + {
99 + props: {
100 + type: "text",
101 + size: "mini",
102 + icon: "el-icon-view",
103 + },
104 + on: {
105 + click() {
106 + viewRow(params);
107 + },
108 + },
109 + },
110 + "查看"
111 + ),
112 + h(
113 + "el-button",
114 + {
115 + props: {
116 + type: "text",
117 + size: "mini",
118 + icon: "el-icon-edit",
119 + },
120 + on: {
121 + click() {
122 + editRow(params);
123 + },
124 + },
125 + },
126 + "修改"
127 + ),
128 + h(
129 + "el-button",
130 + {
131 + style: {
132 + color: "#ff4949",
133 + },
134 + props: {
135 + type: "text",
136 + size: "mini",
137 + icon: "el-icon-delete",
138 + },
139 + on: {
140 + click() {
141 + deleteRow(params);
142 + },
143 + },
144 + },
145 + "删除"
146 + ),
147 + ];
148 + } else {
149 + operateData = [
150 + h(
151 + "el-button",
152 + {
153 + props: {
154 + type: "text",
155 + size: "mini",
156 + icon: "el-icon-view",
157 + },
158 + on: {
159 + click() {
160 + viewRow(params);
161 + },
162 + },
163 + },
164 + "查看"
165 + ),
166 + ];
167 + }
168 + return h("div", operateData);
169 + },
170 + },
171 +];