routeInfo.vue
10.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
<template>
<div ref="barEcharts" class="route-info-container">
<!-- 航线设置规则信息查询条件 -->
<el-row style="padding: 0 50px">
<el-col>
<yl-form ref="ruleForm" :formConfig="formConfig" :queryForm="queryForm" :inline="false" formWidth="auto"
@blur="blurEvent">
<yl-draggable :routeList="routeList" :dragOptions="dragOptions"></yl-draggable>
</yl-form>
</el-col>
</el-row>
<!-- 航线设置规则信息 -->
<el-row>
<el-col :span="24">
<el-divider content-position="left">航线维度设置</el-divider>
</el-col>
<el-col>
<route-info :routesInfo="routesInfo" :cargoType="cargoType" :cargoStatus="cargoStatus" :puporpux="puporpux"
:serviceCode="serviceCode" :handlingCode="handlingCode" :subCategory="subCategory" @collapse="collapseChange"
@location="changeLocation" @destinationSite="changeDestinationSite" @cargoType="changeCargoType"
@cargoStatus="changeCargoStatus" @puporpux="changePuporpux" @serviceCode="changeServiceCode"
@handlingCode="changeHandlingCode" @subCategory="changeSubCategory" @addRlue="addRlue">
</route-info>
</el-col>
</el-row>
</div>
</template>
<script>
import YlForm from "@/components/YlForm";
import RouteInfo from "./components/routeInfo";
import YlDraggable from "@/components/YlDraggable";
import { formConfig, routeRuleForm } from "./formConfig";
import { removeDuplicates, filterRepeat } from "@/utils";
import {
allDictData, // 获取全部字典
findDestinationFltRuleByFlightNo, // 航线维度设置详情
findByFlightId, // 通过id查询目的航班维度配置详情
updateOrAddFlight, // 修改
delFlightId, // 删除航线规则配置
enableOrDisable, // 是否停用/开启航线规则配置
batchUpdateOrAddFlight, // 更新航线优先级
queryRouteByFltNo, // 通过航班号查询航线
} from "@/api/destinationFlight";
import { routeData, routeInfo } from "./routeData";
export default {
components: {
YlForm,
RouteInfo,
YlDraggable,
},
data() {
return {
dragOptions: { // 航线优先级拖拽配置
animation: 200,
group: "description",
disabled: false, // 是否禁止拖拽
ghostClass: "ghost"
},
formConfig: formConfig, // 表单配置项
queryForm: {
// 表单参数
},
routeList: [], // 航线
routesInfo: [], // 航线规则信息
cargoType: [], // 申报类别
cargoStatus: [], // 货物类型
puporpux: [], // 取件扫描号
serviceCode: [], // Service Code
handlingCode: [], // Handling Code
subCategory: [], // Sub Category
};
},
computed: {},
created() {
this.getAllDictData(); // 获取全部字典
// 查询 & 修改时
if (this.$route.query.name == "view" || this.$route.query.name == "edit") {
this.queryForm = this.$route.query;
let parmas = {
flightDate: this.$route.query.flightDate, // 航班日期
flightRoute: "", // 航线
flightRouteListStr: "", //
purposeOfFlightNo: this.$route.query.purposeOfFlightNo, // 原航班号
status: "", //
};
// 日期级别
if (this.$route.query.flightDate) {
// delete parmas.flightRouteListStr;
this.getFlightRouteConfigInfoDetail(parmas);
} else {
// 普通级别
this.getFlightRouteConfigInfoDetail(parmas);
}
}
},
mounted() { },
methods: {
// 获取所有数据字典
getAllDictData() {
allDictData()
.then((res) => {
if (res.code != 200) {
this.msgError(res.msg);
return;
}
// 给checkBox表单赋值做展示信息
const { data } = res;
this.cargoType = data.cargoType; // 申报类别
this.cargoStatus = data.cargoStatus; // 货物类型
this.puporpux = data.puporpux; // 取件扫描号
this.serviceCode = data.serviceCode; // Service Code
this.handlingCode = data.handlingCode; // Handling Code
this.subCategory = data.subCategory; // Sub Category
})
.catch(() => { });
},
// 航线维度设置详情
getFlightRouteConfigInfoDetail(parmas) {
findDestinationFltRuleByFlightNo(parmas)
.then((res) => {
const { code, data, msg } = res;
if (code != 200) {
this.msgError(msg);
return;
}
let routeList1 = data.routeList; // 航班航线基本信息
this.routeList = data.routeList;
let { flightDate } = parmas;
/*
如果是日期级别的再做一次没有日期的查询
日期级别规则:航线取自己的,但是航线数据如果有取自己的,没有则去拿普通规则的;
*/
if (flightDate) {
parmas.flightDate = "";
findDestinationFltRuleByFlightNo(parmas)
.then((response) => {
if (response.code != 200) {
this.msgError(response.msg);
return;
}
let routeList2 = response.data.routeList; // 航班航线基本信息
// 日期级别航班航线维度规则详情
const dataList1 = removeDuplicates(data.list, {
duplicate: "flightRoute", // 去重字段
sort: false, // 是否要排序
sortType: "Number", // 排序类型
sortAttr: "routePriority", // 排序字段
});
// 普通级别航班航线维度规则详情
const dataList2 = removeDuplicates(response.data.list, {
duplicate: "flightRoute", // 去重字段
sort: false, // 是否要排序
sortType: "Number", // 排序类型
sortAttr: "routePriority", // 排序字段
});
// 【日期规则】
const dateFlightRoute = routeList1.map((item1) => {
const item2 = dataList1.unique.find((item2) => {
if (item2.flightRoute === item1.route) {
item2.config = true;
return item2;
}
}); // 返回当前相等的一条数据
if (item2) {
// 有数据的合并对象,
return { ...item1, ...item2 };
} else {
// 没有数据的去普通航线里查找
const item = dataList2.unique.find((item) => {
if (item.flightRoute === item1.route) {
item.config = true;
return item;
}
});
if (item) {
return { ...item1, ...item }; // 有数据的合并对象,
} else {
item1.config = false;
return item1; // 没有的返回当前的
}
}
});
// 处理属性
dateFlightRoute.map((item) => {
if (item.config) {
this.hasOwnProperty(item, "typeOfGoods");
this.hasOwnProperty(item, "puporpuxCode");
this.hasOwnProperty(item, "serviceCode");
this.hasOwnProperty(item, "handlingCode");
this.hasOwnProperty(item, "subCategory");
this.setattrVal(item) // 设置属性值
}
});
this.routesInfo = dateFlightRoute;
})
.catch(() => { });
}
})
.catch(() => { });
},
// 判断对象是否存在某个属性,并且把这个属性值使用分号分隔
hasOwnProperty(item, key) {
if (item.hasOwnProperty(key)) {
item[key] = item[key].split(";");
}
},
// 设置属性值
setattrVal(item) {
if (item.location) {
// 始发站
item.isLocation = "1";
}
if (item.notLocation) {
item.isLocation = "2";
}
if (item.location == null && item.notLocation == null) {
item.isLocation = "1";
}
if (item.destinationSite) {
// 目的站
item.isDestinationSite = "1";
}
if (item.notDestinationSite) {
item.isDestinationSite = "2";
}
if (
item.destinationSite == null &&
item.notDestinationSite == null
) {
item.isDestinationSite = "1";
}
},
// 失焦事件
blurEvent({ originOfFlightNo }) {
this.queryForm.originOfFlightNo = this.upCase(originOfFlightNo);
},
// 当前激活面板改变时触发
collapseChange(name) {
// console.log(name);
},
// 始发站
changeLocation(val) {
console.log("始发站:", val);
},
// 目的站
changeDestinationSite(val) {
console.log("目的站:", val);
},
// 申报类别
changeCargoType(arr) {
console.log("申报类别:", arr);
},
// 货物类型
changeCargoStatus(arr) {
console.log("货物类型:", arr);
},
// 取件扫描号
changePuporpux(arr) {
console.log("取件扫描号:", arr);
},
// Service Code
changeServiceCode(arr) {
console.log("Service Code:", arr);
},
// Handling Code
changeHandlingCode(arr) {
console.log("Handling Code:", arr);
},
// Sub Category
changeSubCategory(arr) {
console.log("Sub Category:", arr);
},
// 新增规则
addRlue(index) {
// 如果当前航班号的航线下没有数据给
this.setattrVal(routeRuleForm)
const mergeObj = {
...this.routesInfo[index],
...routeRuleForm
};
this.$set(this.routesInfo, index, mergeObj) // 给新增规则赋上默认数据
console.log("新增规则:", this.routesInfo);
},
},
};
</script>
<style lang="scss" scoped>
.route-info-container {
padding: 20px;
}
</style>