Fedex / imac-vue

Go to a project
Toggle navigation Toggle navigation pinning
Elements-SY
2d69a11c 1 parent e656ba18

modify

Expand all
Inline Side-by-side
Showing 5 changed files with 158 additions and 88 deletions
...@@ -2,13 +2,12 @@ ...@@ -2,13 +2,12 @@
2 <el-card> 2 <el-card>
3 <div class="row"> 3 <div class="row">
4 <div class="col-6"> 4 <div class="col-6">
5 - <draggable class="list-group" tag="ul" v-model="list" v-bind="dragOptions" @start="drag = true" 5 + <draggable class="list-group" tag="ul" v-model="routeList" v-bind="dragOptions" @start="dragStart" @end="dragEnd">
6 - @end="drag = false">
7 <transition-group type="transition" :name="!drag ? 'flip-list' : null"> 6 <transition-group type="transition" :name="!drag ? 'flip-list' : null">
8 - <li class="list-group-item" v-for="element in list" :key="element.order"> 7 + <li class="list-group-item" v-for="item in routeList" :key="item.routePriority">
9 - <i :class="element.fixed ? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin' 8 + <i :class="item.fixed ? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'
10 - " @click="element.fixed = !element.fixed" aria-hidden="true"></i> 9 + " @click="item.fixed = !item.fixed" aria-hidden="true"></i>
11 - {{ element.name }} 10 + {{ item.route }}
12 </li> 11 </li>
13 </transition-group> 12 </transition-group>
14 </draggable> 13 </draggable>
...@@ -19,46 +18,48 @@ ...@@ -19,46 +18,48 @@
19 18
20 <script> 19 <script>
21 import draggable from "vuedraggable"; 20 import draggable from "vuedraggable";
22 -const message = [
23 - "vue.draggable",
24 - "draggable",
25 - "component",
26 - "for",
27 - "vue.js 2.0",
28 - "based",
29 - "on",
30 - "Sortablejs"
31 -];
32 export default { 21 export default {
33 - name: "transition-example-2", 22 + name: "YlDraggable",
34 - display: "Transitions", 23 + props: {
35 - order: 7, 24 + routeList: {
25 + // 航线
26 + type: Array,
27 + default: () => [],
28 + },
29 + dragOptions: {
30 + // 拖拽配置
31 + type: Object,
32 + default: () => {
33 + return {
34 + animation: 200,
35 + group: "description",
36 + disabled: false,
37 + ghostClass: "ghost"
38 + }
39 + },
40 + },
41 + },
36 components: { 42 components: {
37 draggable 43 draggable
38 }, 44 },
39 data() { 45 data() {
40 - return { 46 + return {};
41 - list: message.map((name, index) => {
42 - return { name, order: index + 1 };
43 - }),
44 - drag: false
45 - };
46 }, 47 },
48 + created() {},
47 methods: { 49 methods: {
50 + // 排序
48 sort() { 51 sort() {
49 - this.list = this.list.sort((a, b) => a.order - b.order); 52 + this.routeList = this.routeList.sort((a, b) => a.routePriority - b.routePriority);
50 - } 53 + },
54 + // 开始拖拽
55 + dragStart() {
56 +
57 + },
58 + // 结束拖拽
59 + dragEnd() {
60 + this.$emit("dragEnd", this.routeList);
61 + },
51 }, 62 },
52 - computed: {
53 - dragOptions() {
54 - return {
55 - animation: 200,
56 - group: "description",
57 - disabled: false,
58 - ghostClass: "ghost"
59 - };
60 - }
61 - }
62 }; 63 };
63 </script> 64 </script>
64 65
...@@ -66,6 +67,7 @@ export default { ...@@ -66,6 +67,7 @@ export default {
66 .el-card__body { 67 .el-card__body {
67 padding: 15px 10px 0px 10px !important; 68 padding: 15px 10px 0px 10px !important;
68 } 69 }
70 +
69 .list-group { 71 .list-group {
70 min-height: 20px; 72 min-height: 20px;
71 max-height: 150px; 73 max-height: 150px;
......
...@@ -2,8 +2,8 @@ export const formConfig = [ ...@@ -2,8 +2,8 @@ export const formConfig = [
2 { 2 {
3 label: "航班号", 3 label: "航班号",
4 type: "Input", 4 type: "Input",
5 - name: "fltNo", 5 + name: "purposeOfFlightNo",
6 - prop: "fltNo", 6 + prop: "purposeOfFlightNo",
7 placeholder: "请输入航班号", 7 placeholder: "请输入航班号",
8 span: 5, 8 span: 5,
9 trigger: "blur", 9 trigger: "blur",
...@@ -12,8 +12,8 @@ export const formConfig = [ ...@@ -12,8 +12,8 @@ export const formConfig = [
12 { 12 {
13 label: "航班日期", 13 label: "航班日期",
14 type: "Date", 14 type: "Date",
15 - name: "startTime", 15 + name: "flightDate",
16 - prop: "startTime", 16 + prop: "flightDate",
17 placeholder: "请选择航班日期", 17 placeholder: "请选择航班日期",
18 format: "yyyy-MM-dd", 18 format: "yyyy-MM-dd",
19 colWidth: "23%", 19 colWidth: "23%",
...@@ -22,8 +22,8 @@ export const formConfig = [ ...@@ -22,8 +22,8 @@ export const formConfig = [
22 { 22 {
23 label: "航线", 23 label: "航线",
24 type: "Input", 24 type: "Input",
25 - name: "route", 25 + name: "flightRoute",
26 - prop: "route", 26 + prop: "flightRoute",
27 placeholder: "", 27 placeholder: "",
28 span: 5, 28 span: 5,
29 labelWidth: "40px", 29 labelWidth: "40px",
...@@ -42,21 +42,22 @@ export const formConfig = [ ...@@ -42,21 +42,22 @@ export const formConfig = [
42 ]; 42 ];
43 // 航线规则表单 43 // 航线规则表单
44 export const routeRuleForm = { 44 export const routeRuleForm = {
45 + config: true,
45 flightRoute: "", // 飞行航线 46 flightRoute: "", // 飞行航线
46 - location: "", // 包含始发站 47 + location: null, // 包含始发站
47 - notLocation: "", // 不包含始发站 48 + notLocation: null, // 不包含始发站
48 - destinationSite: "", // 包含目的站 49 + destinationSite: null, // 包含目的站
49 - notDestinationSite: "", // 不包含目的站 50 + notDestinationSite: null, // 不包含目的站
50 includeUrsa: "", // URSA包含 51 includeUrsa: "", // URSA包含
51 notIncludeUrsa: "", // URSA不包含 52 notIncludeUrsa: "", // URSA不包含
52 minNumOfPieces: "", // 最小件数 53 minNumOfPieces: "", // 最小件数
53 maxNumOfPieces: "", // 最大件数 54 maxNumOfPieces: "", // 最大件数
54 minWeight: "", // 最小重量 55 minWeight: "", // 最小重量
55 maxWeight: "", // 最大重量 56 maxWeight: "", // 最大重量
56 - typeOfGoods: "", // 申报类别 57 + typeOfGoods: [], // 申报类别
57 - cargoType: "", // 货物类型 58 + cargoType: [], // 货物类型
58 - puporpuxCode: "", // 取件扫描号 59 + puporpuxCode: [], // 取件扫描号
59 - serviceCode: "", // Service Code 60 + serviceCode: [], // Service Code
60 - handlingCode: "", // Handling Code 61 + handlingCode: [], // Handling Code
61 - subCategory: "", // Sub Category 62 + subCategory: [], // Sub Category
62 -} 63 +};
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
5 <el-col> 5 <el-col>
6 <yl-form ref="ruleForm" :formConfig="formConfig" :queryForm="queryForm" :inline="false" formWidth="auto" 6 <yl-form ref="ruleForm" :formConfig="formConfig" :queryForm="queryForm" :inline="false" formWidth="auto"
7 @blur="blurEvent"> 7 @blur="blurEvent">
8 - <yl-draggable></yl-draggable> 8 + <yl-draggable :routeList="routeList" :dragOptions="dragOptions"></yl-draggable>
9 </yl-form> 9 </yl-form>
10 </el-col> 10 </el-col>
11 </el-row> 11 </el-row>
...@@ -30,7 +30,7 @@ import YlForm from "@/components/YlForm"; ...@@ -30,7 +30,7 @@ import YlForm from "@/components/YlForm";
30 import RouteInfo from "./components/routeInfo"; 30 import RouteInfo from "./components/routeInfo";
31 import YlDraggable from "@/components/YlDraggable"; 31 import YlDraggable from "@/components/YlDraggable";
32 import { formConfig, routeRuleForm } from "./formConfig"; 32 import { formConfig, routeRuleForm } from "./formConfig";
33 -import { removeDuplicates, filterRepeat } from "@/utils" 33 +import { removeDuplicates, filterRepeat } from "@/utils";
34 import { 34 import {
35 allDictData, // 获取全部字典 35 allDictData, // 获取全部字典
36 findDestinationFltRuleByFlightNo, // 航线维度设置详情 36 findDestinationFltRuleByFlightNo, // 航线维度设置详情
...@@ -50,10 +50,17 @@ export default { ...@@ -50,10 +50,17 @@ export default {
50 }, 50 },
51 data() { 51 data() {
52 return { 52 return {
53 + dragOptions: { // 航线优先级拖拽配置
54 + animation: 200,
55 + group: "description",
56 + disabled: false, // 是否禁止拖拽
57 + ghostClass: "ghost"
58 + },
53 formConfig: formConfig, // 表单配置项 59 formConfig: formConfig, // 表单配置项
54 queryForm: { 60 queryForm: {
55 // 表单参数 61 // 表单参数
56 }, 62 },
63 + routeList: [], // 航线
57 routesInfo: [], // 航线规则信息 64 routesInfo: [], // 航线规则信息
58 cargoType: [], // 申报类别 65 cargoType: [], // 申报类别
59 cargoStatus: [], // 货物类型 66 cargoStatus: [], // 货物类型
...@@ -66,7 +73,9 @@ export default { ...@@ -66,7 +73,9 @@ export default {
66 computed: {}, 73 computed: {},
67 created() { 74 created() {
68 this.getAllDictData(); // 获取全部字典 75 this.getAllDictData(); // 获取全部字典
76 + // 查询 & 修改时
69 if (this.$route.query.name == "view" || this.$route.query.name == "edit") { 77 if (this.$route.query.name == "view" || this.$route.query.name == "edit") {
78 + this.queryForm = this.$route.query;
70 let parmas = { 79 let parmas = {
71 flightDate: this.$route.query.flightDate, // 航班日期 80 flightDate: this.$route.query.flightDate, // 航班日期
72 flightRoute: "", // 航线 81 flightRoute: "", // 航线
...@@ -76,13 +85,12 @@ export default { ...@@ -76,13 +85,12 @@ export default {
76 }; 85 };
77 // 日期级别 86 // 日期级别
78 if (this.$route.query.flightDate) { 87 if (this.$route.query.flightDate) {
79 - delete parmas.flightRouteListStr 88 + // delete parmas.flightRouteListStr;
80 - this.getFlightRouteConfigInfoDetail(parmas) 89 + this.getFlightRouteConfigInfoDetail(parmas);
81 } else { 90 } else {
82 // 普通级别 91 // 普通级别
83 - this.getFlightRouteConfigInfoDetail(parmas) 92 + this.getFlightRouteConfigInfoDetail(parmas);
84 } 93 }
85 - console.log(this.$route.query);
86 } 94 }
87 }, 95 },
88 mounted() { }, 96 mounted() { },
...@@ -116,24 +124,21 @@ export default { ...@@ -116,24 +124,21 @@ export default {
116 return; 124 return;
117 } 125 }
118 let routeList1 = data.routeList; // 航班航线基本信息 126 let routeList1 = data.routeList; // 航班航线基本信息
127 + this.routeList = data.routeList;
119 let { flightDate } = parmas; 128 let { flightDate } = parmas;
120 - // 如果是日期级别的再做一次没有日期的查询 129 + /*
130 + 如果是日期级别的再做一次没有日期的查询
131 + 日期级别规则：航线取自己的，但是航线数据如果有取自己的，没有则去拿普通规则的；
132 + */
121 if (flightDate) { 133 if (flightDate) {
122 parmas.flightDate = ""; 134 parmas.flightDate = "";
123 - parmas.flightRouteListStr = "", 135 + findDestinationFltRuleByFlightNo(parmas)
124 - findDestinationFltRuleByFlightNo(parmas).then(response => { 136 + .then((response) => {
125 if (response.code != 200) { 137 if (response.code != 200) {
126 this.msgError(response.msg); 138 this.msgError(response.msg);
127 return; 139 return;
128 } 140 }
129 let routeList2 = response.data.routeList; // 航班航线基本信息 141 let routeList2 = response.data.routeList; // 航班航线基本信息
130 -
131 - /*
132 - 日期级别；
133 - 日期级别只拿日期级别的航线，但是日期级别的航线没有数据则去查询没有日期的航班信息，
134 - 然后拿没有日期的航班维度信息；
135 -
136 - */
137 // 日期级别航班航线维度规则详情 142 // 日期级别航班航线维度规则详情
138 const dataList1 = removeDuplicates(data.list, { 143 const dataList1 = removeDuplicates(data.list, {
139 duplicate: "flightRoute", // 去重字段 144 duplicate: "flightRoute", // 去重字段
...@@ -148,25 +153,82 @@ export default { ...@@ -148,25 +153,82 @@ export default {
148 sortType: "Number", // 排序类型 153 sortType: "Number", // 排序类型
149 sortAttr: "routePriority", // 排序字段 154 sortAttr: "routePriority", // 排序字段
150 }); 155 });
151 - // 先把日期级别的数据合并，然后再对遍历普通级别的dataList2； 156 + // 【日期规则】
152 - // 看看 157 + const dateFlightRoute = routeList1.map((item1) => {
153 - // console.log(dataList1) 158 + const item2 = dataList1.unique.find((item2) => {
154 - // console.log(dataList2) 159 + if (item2.flightRoute === item1.route) {
155 - const newRouteList1 = routeList1.filter((item, index, array) => { 160 + item2.config = true;
156 - if(item.route == dataList1.unique[index].flightRoute){ 161 + return item2;
157 - console.log(array) 162 + }
163 + }); // 返回当前相等的一条数据
164 + if (item2) {
165 + // 有数据的合并对象，
166 + return { ...item1, ...item2 };
167 + } else {
168 + // 没有数据的去普通航线里查找
169 + const item = dataList2.unique.find((item) => {
170 + if (item.flightRoute === item1.route) {
171 + item.config = true;
172 + return item;
158 } 173 }
159 }); 174 });
160 - console.log(newRouteList1) 175 + if (item) {
161 - 176 + return { ...item1, ...item }; // 有数据的合并对象，
162 - }).catch(() => { }); 177 + } else {
163 - } 178 + item1.config = false;
164 - 179 + return item1; // 没有的返回当前的
165 - // console.log(routeList2); 180 + }
166 - // 如果当前航班号的航线下没有数据给这个航线在list里面追加一个data属性，值设置为false 181 + }
167 - // 当点击新增规则按钮往这个routesInfo push数据并且把data属性值设置为true 182 + });
183 + // 处理属性
184 + dateFlightRoute.map((item) => {
185 + if (item.config) {
186 + this.hasOwnProperty(item, "typeOfGoods");
187 + this.hasOwnProperty(item, "puporpuxCode");
188 + this.hasOwnProperty(item, "serviceCode");
189 + this.hasOwnProperty(item, "handlingCode");
190 + this.hasOwnProperty(item, "subCategory");
191 + this.setattrVal(item) // 设置属性值
192 + }
193 + });
194 + this.routesInfo = dateFlightRoute;
168 }) 195 })
169 .catch(() => { }); 196 .catch(() => { });
197 + }
198 + })
199 + .catch(() => { });
200 + },
201 + // 判断对象是否存在某个属性，并且把这个属性值使用分号分隔
202 + hasOwnProperty(item, key) {
203 + if (item.hasOwnProperty(key)) {
204 + item[key] = item[key].split(";");
205 + }
206 + },
207 + // 设置属性值
208 + setattrVal(item) {
209 + if (item.location) {
210 + // 始发站
211 + item.isLocation = "1";
212 + }
213 + if (item.notLocation) {
214 + item.isLocation = "2";
215 + }
216 + if (item.location == null && item.notLocation == null) {
217 + item.isLocation = "1";
218 + }
219 + if (item.destinationSite) {
220 + // 目的站
221 + item.isDestinationSite = "1";
222 + }
223 + if (item.notDestinationSite) {
224 + item.isDestinationSite = "2";
225 + }
226 + if (
227 + item.destinationSite == null &&
228 + item.notDestinationSite == null
229 + ) {
230 + item.isDestinationSite = "1";
231 + }
170 }, 232 },
171 // 失焦事件 233 // 失焦事件
172 blurEvent({ originOfFlightNo }) { 234 blurEvent({ originOfFlightNo }) {
...@@ -174,7 +236,7 @@ export default { ...@@ -174,7 +236,7 @@ export default {
174 }, 236 },
175 // 当前激活面板改变时触发 237 // 当前激活面板改变时触发
176 collapseChange(name) { 238 collapseChange(name) {
177 - console.log(name); 239 + // console.log(name);
178 }, 240 },
179 // 始发站 241 // 始发站
180 changeLocation(val) { 242 changeLocation(val) {
...@@ -211,8 +273,13 @@ export default { ...@@ -211,8 +273,13 @@ export default {
211 // 新增规则 273 // 新增规则
212 addRlue(index) { 274 addRlue(index) {
213 // 如果当前航班号的航线下没有数据给 275 // 如果当前航班号的航线下没有数据给
214 - this.routesInfo.push(routeRuleForm); // 给新增规则赋上默认数据 276 + this.setattrVal(routeRuleForm)
215 - console.log("新增规则：", index); 277 + const mergeObj = {
278 + ...this.routesInfo[index],
279 + ...routeRuleForm
280 + };
281 + this.$set(this.routesInfo, index, mergeObj) // 给新增规则赋上默认数据
282 + console.log("新增规则：", this.routesInfo);
216 }, 283 },
217 }, 284 },
218 }; 285 };
......