seaStepDetail.vue

<template>
  <div class="app-seaStepDetail">
    <el-scrollbar :vertical="true" viewClass="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>
    </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: _C.getColmnMapping(),
    };
  },
  methods: {
    getObjInfo(voName, data) {
      const { key, type } = data;
      let val = this.shipmentObj[voName]?.[key] ?? "";
      if (val) {
        switch (type) {
          case "date":
          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;
          case "user":
            val = this.getUser(val);
            break;
        }
      }

      return val === 0 ? "" : val;
    },
    getSupplier(id) {
      return (
        this.$l(this.$attrs.allSupplier.find((item) => item.id === id), 'company') // ?? id
      );
    },
    getDock(id) {
      return this.$l(this.$attrs.allDocks.find((item) => item.id === id), 'title') ?? id;
    },
    getWarehouse(id) {
      return (
        this.$l(this.$attrs.warehouseList.find((item) => item.id === id), 'title') ?? id
      );
    },
    getUser(id) {
      return (
        this.$attrs.allUsers.find((item) => item.id === id)?.nickname ?? id
      );
    },
    getDict(code, id) {
      return (
        this.$l(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;
    min-width: 1300px;
    padding: 10px 10px;

    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>