shippingSea.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('运输方式')">
              <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="shipmentObj.transportType" />
            </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="seaBaseData" :shipmentObj="shipmentObj" :allSupplier="allSupplier" :allDocks="allDocks" :allUsers="allUsers" :warehouseList="warehouseList" @getBoxInfo="getBoxInfo" />

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

<script>
import seaProcess from "./seaProcess.vue";
import seaStepDetail from "./seaStepDetail.vue";
import { getbox } from "@/api/ecw/box";
import { getWarehouseList } from "@/api/ecw/warehouse";
import { getSupplierPage } from "@/api/ecw/supplier";
import { getDockPage } from "@/api/ecw/dock";
import { listUser } from "@/api/system/user";

// 这里引入的数据切换语言后要刷新才生效，优化办法是label同时配备labelEn字段，然后再页面上用$l函数调用
import { seaBaseData } from "./utils";
/**
 * 海运操作主页面
 */
export default {
  name: "shippingSea",
  components: {
    seaProcess,
    seaStepDetail,
  },
  props: {
    shipmentId: String,
  },
  data() {
    return {
      shipmentObj: {},
      warehouseList: [],
      // 供应商
      allSupplier: [],
      // 码头
      allDocks: [],
      // 用户
      allUsers: [],
      // 流程图节点
      seaBaseData: seaBaseData(),
      // 状态
      statusLabel: "",
    };
  },
  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 ?? [];
    });
  },
  methods: {
    /* 获取仓库 */
    importCityName(id) {
      var arr = this.warehouseList.filter((item) => item.id == id);
      return arr.length > 0 ?  this.$l(arr[0], 'title') : "/";
    },
    // 出货
    getBoxInfo() {
      getbox(this.shipmentId).then((res) => {
        const { data } = res;
        this.shipmentObj = data ?? {};
      });
    },
  },
};
</script>

<style lang="scss">
// 海运操作统一弹窗样式
.shipping-dialog {
  .custom_type_red {
    color: red;
  }
  .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>