routeInfo.vue 10.1 KB
<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>