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 178 additions and 108 deletions
......@@ -2,13 +2,12 @@
<el-card>
<div class="row">
<div class="col-6">
<draggable class="list-group" tag="ul" v-model="list" v-bind="dragOptions" @start="drag = true"
@end="drag = false">
<draggable class="list-group" tag="ul" v-model="routeList" v-bind="dragOptions" @start="dragStart" @end="dragEnd">
<transition-group type="transition" :name="!drag ? 'flip-list' : null">
<li class="list-group-item" v-for="element in list" :key="element.order">
<i :class="element.fixed ? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'
" @click="element.fixed = !element.fixed" aria-hidden="true"></i>
{{ element.name }}
<li class="list-group-item" v-for="item in routeList" :key="item.routePriority">
<i :class="item.fixed ? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'
" @click="item.fixed = !item.fixed" aria-hidden="true"></i>
{{ item.route }}
</li>
</transition-group>
</draggable>
......@@ -19,53 +18,56 @@
<script>
import draggable from "vuedraggable";
const message = [
"vue.draggable",
"draggable",
"component",
"for",
"vue.js 2.0",
"based",
"on",
"Sortablejs"
];
export default {
name: "transition-example-2",
display: "Transitions",
order: 7,
name: "YlDraggable",
props: {
routeList: {
// 航线
type: Array,
default: () => [],
},
dragOptions: {
// 拖拽配置
type: Object,
default: () => {
return {
animation: 200,
group: "description",
disabled: false,
ghostClass: "ghost"
}
},
},
},
components: {
draggable
},
data() {
return {
list: message.map((name, index) => {
return { name, order: index + 1 };
}),
drag: false
};
return {};
},
created() {},
methods: {
// 排序
sort() {
this.list = this.list.sort((a, b) => a.order - b.order);
}
this.routeList = this.routeList.sort((a, b) => a.routePriority - b.routePriority);
},
// 开始拖拽
dragStart() {
},
// 结束拖拽
dragEnd() {
this.$emit("dragEnd", this.routeList);
},
},
computed: {
dragOptions() {
return {
animation: 200,
group: "description",
disabled: false,
ghostClass: "ghost"
};
}
}
};
</script>
<style lang="scss">
.el-card__body {
padding: 15px 10px 0px 10px !important;
padding: 15px 10px 0px 10px !important;
}
.list-group {
min-height: 20px;
max-height: 150px;
......
......@@ -2,8 +2,8 @@ export const formConfig = [
{
label: "航班号",
type: "Input",
name: "fltNo",
prop: "fltNo",
name: "purposeOfFlightNo",
prop: "purposeOfFlightNo",
placeholder: "请输入航班号",
span: 5,
trigger: "blur",
......@@ -12,8 +12,8 @@ export const formConfig = [
{
label: "航班日期",
type: "Date",
name: "startTime",
prop: "startTime",
name: "flightDate",
prop: "flightDate",
placeholder: "请选择航班日期",
format: "yyyy-MM-dd",
colWidth: "23%",
......@@ -22,8 +22,8 @@ export const formConfig = [
{
label: "航线",
type: "Input",
name: "route",
prop: "route",
name: "flightRoute",
prop: "flightRoute",
placeholder: "",
span: 5,
labelWidth: "40px",
......@@ -42,21 +42,22 @@ export const formConfig = [
];
// 航线规则表单
export const routeRuleForm = {
config: true,
flightRoute: "", // 飞行航线
location: "", // 包含始发站
notLocation: "", // 不包含始发站
destinationSite: "", // 包含目的站
notDestinationSite: "", // 不包含目的站
location: null, // 包含始发站
notLocation: null, // 不包含始发站
destinationSite: null, // 包含目的站
notDestinationSite: null, // 不包含目的站
includeUrsa: "", // URSA包含
notIncludeUrsa: "", // URSA不包含
minNumOfPieces: "", // 最小件数
maxNumOfPieces: "", // 最大件数
minWeight: "", // 最小重量
maxWeight: "", // 最大重量
typeOfGoods: "", // 申报类别
cargoType: "", // 货物类型
puporpuxCode: "", // 取件扫描号
serviceCode: "", // Service Code
handlingCode: "", // Handling Code
subCategory: "", // Sub Category
}
typeOfGoods: [], // 申报类别
cargoType: [], // 货物类型
puporpuxCode: [], // 取件扫描号
serviceCode: [], // Service Code
handlingCode: [], // Handling Code
subCategory: [], // Sub Category
};
......
......@@ -5,7 +5,7 @@
<el-col>
<yl-form ref="ruleForm" :formConfig="formConfig" :queryForm="queryForm" :inline="false" formWidth="auto"
@blur="blurEvent">
<yl-draggable></yl-draggable>
<yl-draggable :routeList="routeList" :dragOptions="dragOptions"></yl-draggable>
</yl-form>
</el-col>
</el-row>
......@@ -30,7 +30,7 @@ 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 { removeDuplicates, filterRepeat } from "@/utils";
import {
allDictData, // 获取全部字典
findDestinationFltRuleByFlightNo, // 航线维度设置详情
......@@ -50,10 +50,17 @@ export default {
},
data() {
return {
dragOptions: { // 航线优先级拖拽配置
animation: 200,
group: "description",
disabled: false, // 是否禁止拖拽
ghostClass: "ghost"
},
formConfig: formConfig, // 表单配置项
queryForm: {
// 表单参数
},
routeList: [], // 航线
routesInfo: [], // 航线规则信息
cargoType: [], // 申报类别
cargoStatus: [], // 货物类型
......@@ -66,7 +73,9 @@ export default {
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: "", // 航线
......@@ -76,13 +85,12 @@ export default {
};
// 日期级别
if (this.$route.query.flightDate) {
delete parmas.flightRouteListStr
this.getFlightRouteConfigInfoDetail(parmas)
// delete parmas.flightRouteListStr;
this.getFlightRouteConfigInfoDetail(parmas);
} else {
// 普通级别
this.getFlightRouteConfigInfoDetail(parmas)
this.getFlightRouteConfigInfoDetail(parmas);
}
console.log(this.$route.query);
}
},
mounted() { },
......@@ -116,65 +124,119 @@ export default {
return;
}
let routeList1 = data.routeList; // 航班航线基本信息
this.routeList = data.routeList;
let { flightDate } = parmas;
// 如果是日期级别的再做一次没有日期的查询
/*
如果是日期级别的再做一次没有日期的查询
日期级别规则：航线取自己的，但是航线数据如果有取自己的，没有则去拿普通规则的；
*/
if (flightDate) {
parmas.flightDate = "";
parmas.flightRouteListStr = "",
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", // 排序字段
});
// 先把日期级别的数据合并，然后再对遍历普通级别的dataList2；
// 看看
// console.log(dataList1)
// console.log(dataList2)
const newRouteList1 = routeList1.filter((item, index, array) => {
if(item.route == dataList1.unique[index].flightRoute){
console.log(array)
findDestinationFltRuleByFlightNo(parmas)
.then((response) => {
if (response.code != 200) {
this.msgError(response.msg);
return;
}
});
console.log(newRouteList1)
}).catch(() => { });
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(() => { });
}
// console.log(routeList2);
// 如果当前航班号的航线下没有数据给这个航线在list里面追加一个data属性，值设置为false
// 当点击新增规则按钮往这个routesInfo push数据并且把data属性值设置为true
})
.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);
// console.log(name);
},
// 始发站
changeLocation(val) {
......@@ -211,8 +273,13 @@ export default {
// 新增规则
addRlue(index) {
// 如果当前航班号的航线下没有数据给
this.routesInfo.push(routeRuleForm); // 给新增规则赋上默认数据
console.log("新增规则：", index);
this.setattrVal(routeRuleForm)
const mergeObj = {
...this.routesInfo[index],
...routeRuleForm
};
this.$set(this.routesInfo, index, mergeObj) // 给新增规则赋上默认数据
console.log("新增规则：", this.routesInfo);
},
},
};
......