seaStepDetail.vue

<template>
  <div class="app-seaStepDetail">
    <el-scrollbar :vertical="true">
      <div class="shipping-step">
        <template v-for="(step, index) in flatSeaStep">
          <div :key="index" v-if="shipmentObj[step.voName] && columnsMapping[step.voName]" class="step-table">
            <div class="step-title">{{step.title}}</div>
            <div v-for="(data, index) in columnsMapping[step.voName]" :key="index" class="step-content">
              <p>{{data.title}}</p>
              <p>{{getObjInfo(step.voName, data)}}</p>
            </div>
          </div>
        </template>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import dayjs from "dayjs";
import * as _C from "./utils";

export default {
  name: "seaStepDetail",
  inheritAttrs: false,
  props: {
    shipmentObj: Object,
    seaBaseData: Array,
  },
  data() {
    return {
      flatSeaStep: this.seaBaseData.flat(),
      columnsMapping: {
        bookSeaInfo: [
          {
            title: "SO NO",
            key: "sono",
          },
          {
            title: "船公司类型",
            key: "shipCompanyType",
            type: "supplier",
          },
          {
            title: "驳船港",
            key: "bargePortId",
            type: "dock",
          },
          {
            title: "大船港",
            key: "bigPortId",
            type: "dock",
          },
          {
            title: "目的港",
            key: "destPortId",
            type: "dock",
          },
          {
            title: "订舱公司",
            key: "spaceCompanyId",
            type: "supplier",
          },
          {
            title: "预计驳船时间",
            key: "bargeTime",
            type: "date",
          },
          {
            title: "预计开船时间",
            key: "sailTime",
            type: "date",
          },
          {
            title: "业务员",
            key: "operator",
          },
        ],
        preInstallInfo: [
          {
            title: "预装时间",
            key: "createTime",
            type: "date",
          },
          {
            title: "业务员",
            key: "operator",
          },
        ],
        trailerInfo: [
          {
            title: "货柜号",
            key: "tlContainerNo",
          },
          {
            title: "封条",
            key: "tlStripSeal",
          },
          {
            title: "拖车公司",
            key: "tlCompanyId",
            type: "supplier",
          },
          {
            title: "拖车时间",
            key: "tlTime",
            type: "date",
          },
          {
            title: "车牌",
            key: "tlLicensePlate",
          },
          {
            title: "司机",
            key: "tlDriver",
          },
          {
            title: "联系方式",
            key: "tlDriverContact",
          },
          {
            title: "业务员",
            key: "operator",
          },
        ],
        agentInfo: [
          {
            title: "代理商",
            key: "agentId",
            type: "supplier",
          },
          {
            title: "业务员",
            key: "operator",
          },
        ],
        cabinetInfo: [
          {
            title: "到仓时间",
            key: "ldInWarehouseTime",
            type: "date",
          },
          {
            title: "仓库类型",
            key: "ldWarehouseType",
            type: "warehouse",
          },
          {
            title: "装柜时间",
            key: "ldBoxTime",
            type: "date",
          },
          {
            title: "出仓时间",
            key: "ldOutWarehouseTime",
            type: "date",
          },
          {
            title: "业务员",
            key: "operator",
          },
        ],
        customsInfo: [
          {
            title: "报关方式",
            key: "dcCustomsType",
            type: "shipping_customs_type",
          },
          {
            title: "报关行公司",
            key: "dcCompanyId",
            type: "supplier",
          },
          {
            title: "截关时间",
            key: "dcCutOffTime",
            type: "date",
          },
          {
            title: "状态",
            key: "dcCustomsStatus",
            type: "shipping_dcCustoms_status",
          },
          {
            title: "放行时间",
            key: "dcPassTime",
            type: "date",
          },
          {
            title: "新封条",
            key: "dcStripSeal",
          },
          {
            title: "柜重",
            key: "dcBoxWgt",
          },
          {
            title: "货重",
            key: "dcGoodsWgt",
          },
          {
            title: "VGM重量",
            key: "dcVgmWgt",
          },
          {
            title: "业务员",
            key: "operator",
          },
        ],
        shipConfigInfo: [
          {
            title: "已配/免配",
            key: "saExmtStatus",
            type: "saExmtStatus",
          },
          {
            title: "业务员",
            key: "operator",
          },
        ],
        ladingBillInfo: [
          {
            title: "清关代理",
            key: "agentId",
            type: "supplier",
          },
          {
            title: "提单品名",
            key: "blMblNo",
          },
          {
            title: "通知方",
            key: "notifyingId",
          },
          {
            title: "提单备注",
            key: "remarks",
          },
          {
            title: "数量",
            key: "packageNum",
          },
          {
            title: "体积",
            key: "cbm",
          },
          {
            title: "业务员",
            key: "operator",
          },
        ],
        bargeInfo: [
          {
            title: "驳船",
            key: "bgExmtStatus",
            type: "bgExmtStatus",
          },
          {
            title: "业务员",
            key: "operator",
          },
        ],
        shippingInfo: [
          {
            title: "实际开船时间",
            key: "dtRealShipTime",
            type: "datetime",
          },
          {
            title: "预计到港时间",
            key: "dtEstArrivalTime",
            type: "date",
          },
          {
            title: "业务员",
            key: "operator",
          },
        ],
        clearanceDocInfo: [
          {
            title: "agent list",
            key: "cdAgentlistType",
            type: "isFile",
          },
          {
            title: "soncap",
            key: "cdSoncapType",
            type: "isFile",
          },
          {
            title: "出单方式",
            key: "cdOutBillType",
            type: "billingMethod",
          },
          {
            title: "寄送时间",
            key: "cdSendTime",
            type: "date",
          },
          {
            title: "业务员",
            key: "operator",
          },
        ],
        arrivalInfo: [
          {
            title: "实际到港时间",
            key: "apRealTime",
            type: "datetime",
          },
          {
            title: "确认到港",
            key: "apConfirmTime",
            type: "datetime",
          },
          {
            title: "卸港时间",
            key: "apUnloadPortTime",
            type: "date",
          },
          {
            title: "业务员",
            key: "operator",
          },
        ],
        clearanceInfo: [
          {
            title: "预计清关时间",
            key: "clEstTime",
            type: "date",
          },
          {
            title: "清关时间",
            key: "clClearTime",
            type: "datetime",
          },
          {
            title: "业务员",
            key: "operator",
          },
        ],
        cabinetUnloadInfo: [
          {
            title: "到仓时间",
            key: "ulWarehouseTime",
            type: "date",
          },
          {
            title: "卸货时间",
            key: "ulBoxTime",
            type: "date",
          },
          {
            title: "业务员",
            key: "operator",
          },
        ],
        settlementInfo: [
          {
            title: "可结算",
            key: "slSettlementTime",
            type: "date",
          },
          {
            title: "已结算",
            key: "slSettledTime",
            type: "date",
          },
          {
            title: "业务员",
            key: "operator",
          },
        ],
      },
    };
  },
  methods: {
    getObjInfo(voName, data) {
      const { key, type } = data;
      let val = this.shipmentObj[voName]?.[key] ?? "";
      if (val) {
        switch (type) {
          case "date":
            val = dayjs(val).format("YYYY-MM-DD");
            break;
          case "datetime":
            val = dayjs(val).format("YYYY-MM-DD HH:mm:ss");
            break;
          case "supplier":
            val = this.getSupplier(Number(val));
            break;
          case "dock":
            val = this.getDock(Number(val));
            break;
          case "warehouse":
            val = this.getWarehouse(Number(val));
            break;
          case "shipping_dcCustoms_status":
          case "shipping_customs_type":
            val = this.getDict(type, String(val));
            break;
          case "saExmtStatus":
          case "bgExmtStatus":
          case "isFile":
          case "billingMethod":
            val = this.getConstant(type, String(val));
            break;
        }
      }
      return val;
    },
    getSupplier(id) {
      return (
        this.$attrs.allSupplier.find((item) => item.id === id)?.companyZh ?? id
      );
    },
    getDock(id) {
      return this.$attrs.allDocks.find((item) => item.id === id)?.titleZh ?? id;
    },
    getWarehouse(id) {
      return (
        this.$attrs.warehouseList.find((item) => item.id === id)?.titleZh ?? id
      );
    },
    getDict(code, id) {
      return (
        this.getDictDatas(code).find((item) => item.value === id)?.label ?? id
      );
    },
    getConstant(code, id) {
      return (
        _C.constantDict[code].find((item) => item.value === id)?.label ?? id
      );
    },
  },
};
</script>

<style lang="scss">
.app-seaStepDetail {
  .shipping-step {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    height: 550px;

    p {
      margin: 0;
    }
    .step-table {
      width: 200px;
      border: 1px solid gray;
      margin-bottom: 15px;
      margin-right: 15px;

      .step-title {
        font-size: 16px;
        font-weight: bolder;
        background-color: #c6c8ce;
        line-height: 30px;
        text-align: center;
      }
      .step-content {
        display: grid;
        border-top: 1px solid gray;
        font-size: 14px;
        line-height: 25px;
        grid-template-columns: repeat(2, 1fr);
        > p:first-child {
          border-right: 1px solid gray;
        }
        > p {
          padding: 0 5px;
        }
      }
    }
  }
}
</style>