shippingSeaAir.vue

<template>
  <div>
    <el-row type="flex" style="margin-top: 15px; margin-bottom: 15px" justify="center">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="19">
        <div style="display: flex; justify-content: space-between;align-items: flex-end;">
          <h2>{{$t('海空联运出货操作')}}</h2>
        </div>

        <!-- 信息 -->
        <el-card style="margin-top: 15px">
          <el-descriptions :column="5" border>
            <el-descriptions-item :label="$t('自编号')">{{shipmentObj.selfNo}}</el-descriptions-item>
            <el-descriptions-item :label="$t('出货渠道')">
              {{ channelName(shipmentObj.shippingChannelId) }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('始发地')">
              {{importCityName(shipmentObj.startWarehouseId)}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('目的地')">
              {{importCityName(shipmentObj.destWarehouseId)}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('状态')">
              {{shipmentObj.shipmentStatusText}}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 海运流程图 -->
        <seaProcess :seaBaseData="seaAirBaseData" :shipmentObj="shipmentObj" width="50px" height="50px" :allSupplier="allSupplier" :allDocks="allDocks" :allUsers="allUsers" :warehouseList="warehouseList" :params="{transportType:4}" @getBoxInfo="getBoxInfo" />

        <!-- 海运步骤图 -->
        <seaStepDetail :seaBaseData="seaAirBaseData" :shipmentObj="shipmentObj" :allSupplier="allSupplier" :allDocks="allDocks" :allUsers="allUsers" :warehouseList="warehouseList" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import seaProcess from "../shippingSea/seaProcess.vue";
import seaStepDetail from "../shippingSea/seaStepDetail.vue";
import { getbox } from "@/api/ecw/box";
import { getWarehouseList } from "@/api/ecw/warehouse";
import { getSupplierPage } from "@/api/ecw/supplier";
import { getChannelList } from '@/api/ecw/channel';
import { getDockPage } from "@/api/ecw/dock";
import { listUser } from "@/api/system/user";
import { seaAirBaseData } from "../shippingSea/utils";
import {arrryToKeyedObjectBy} from '@/utils/index'

/**
 * 海运操作主页面
 */
export default {
  name: "shippingSea",
  components: {
    seaProcess,
    seaStepDetail,
  },
  props: {
    shipmentId: String,
  },
  data() {
    return {
      shipmentObj: {},
      warehouseList: [],
      // 供应商
      allSupplier: [],
      // 码头
      allDocks: [],
      // 用户
      allUsers: [],
      // 流程图节点
      seaAirBaseData: seaAirBaseData(),
      // 状态
      statusLabel: "",
      channelList:[] , // 渠道
    };
  },
  computed: {
    // 渠道用id做键值
    keyedChannel(){
      return arrryToKeyedObjectBy(this.channelList, 'channelId')
    },
    // 根据渠道id获取渠道名
    channelName(){
      return id => {
        return this.keyedChannel[id] ? this.$l(this.keyedChannel[id], 'name') : null
      }
    },
  },
  created() {
    this.getBoxInfo();
    // 仓库
    getWarehouseList().then((r) => {
      this.warehouseList = r.data;
    });
    // 供应商
    getSupplierPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
      const { data } = res;
      this.allSupplier = data.list.map((item) => {
        if (item.companyType) {
          item.companyTypes = item.companyType.split(",");
        }
        return item;
      });
    });
    // 码头
    getDockPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
      const { data } = res;
      this.allDocks = data.list;
    });
    // 用户
    listUser({ pageNo: "1", pageSize: "10000" }).then((res) => {
      const { data } = res;
      this.allUsers = data.list ?? [];
    });
    getChannelList().then(res => this.channelList = res.data)
  },
  methods: {
    /* 获取仓库 */
    importCityName(id) {
      var arr = this.warehouseList.filter((item) => item.id == id);
      return arr.length > 0 ? this.$l(arr[0], 'title') : this.$t("无");
    },
    // 出货
    getBoxInfo() {
      getbox(this.shipmentId).then((res) => {
        const { data } = res;
        this.shipmentObj = data ?? {};
      });
    },
  },
};
</script>

<style lang="scss">
// 海运操作统一弹窗样式
.shipping-dialog {
  .el-dialog__body {
    height: calc(100% - 54px);
    > :first-child {
      height: 100%;
    }
  }
  // 页面内元素弹窗form控件宽度设置
  .el-form-item__content {
    > div:not(.el-input-number) {
      width: 100%;
    }
  }
  .operate-button {
    padding-top: 10px;
    text-align: center;
  }
  .two-element {
    .el-form-item__content {
      display: flex;
      > :last-child {
        margin-left: 10px;
      }
    }
  }
}
</style>