index.vue

<template>
  <div>
    <el-descriptions border v-if="order.orderId">
      <el-descriptions-item :label="$t('唛头')">{{ order.marks }}</el-descriptions-item>
      <el-descriptions-item :label="$t('已到箱数/总箱数')">{{ order.sumNum }}/{{ order.costVO.totalNum }}</el-descriptions-item>
      <el-descriptions-item :label="$t('订单状态')"><dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="order.status" :class="{red: order.status === 1, green: order.status === 5 || order.status === 2}" /></el-descriptions-item>
      <el-descriptions-item :label="$t('运输方式') + '(' + $t('渠道') + ')'">
        <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="order.logisticsInfoDto.transportId"></dict-tag> ({{ order.channelName }})
      </el-descriptions-item>
      <el-descriptions-item :label="$t('始发地')">{{ order.logisticsInfoDto.startTitleZh || '' }}<span v-if="order.isExternalWarehouse" style="color: red">{{ $t('（外部仓）') }}</span></el-descriptions-item>
      <el-descriptions-item :label="$t('目的地')">{{ order.logisticsInfoDto.destTitleZh || '' }}</el-descriptions-item>
      <el-descriptions-item :label="$t('发货人姓名')">{{ order.consignorVO && order.consignorVO.name || ''}}</el-descriptions-item>
      <el-descriptions-item :label="$t('发货人公司')">{{ order.consignorVO && order.consignorVO.company || '' }}</el-descriptions-item>
      <el-descriptions-item :label="$t('发货人电话')">{{ order.consignorVO && ('+' + order.consignorVO.countryCode + order.consignorVO.phone) || '' }}</el-descriptions-item>
      <el-descriptions-item :label="$t('收货人姓名')">{{ order.consigneeVO && order.consigneeVO.name || ''}}</el-descriptions-item>
      <el-descriptions-item :label="$t('收货人公司')">{{ order.consigneeVO && order.consigneeVO.company || '' }}</el-descriptions-item>
      <el-descriptions-item :label="$t('收货人电话')">{{ order.consigneeVO &&('+' + order.consigneeVO.countryCode + order.consigneeVO.phone) || '' }}</el-descriptions-item>
      <el-descriptions-item :label="$t('送货时间')">{{ order.deliveryDate || '' }}</el-descriptions-item>
      <el-descriptions-item :label="$t('入仓类型')">{{ getDictDataLabel(DICT_TYPE.ECW_WAREHOUSING_TYPE, order.warehouseType) }}</el-descriptions-item>
      <el-descriptions-item :label="$t('订单号')">{{ order.orderNo }}</el-descriptions-item>

      <el-descriptions-item v-if="stocking" :label="$t('出货渠道')">{{ order.channelName }}</el-descriptions-item>
      <el-descriptions-item v-if="stocking" :label="$t('可出特性')">{{ order.channelAttrName }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import {DICT_TYPE, getDictDataLabel} from "@/utils/dict"
import DictTag from "@/components/DictTag/index.vue";

export default {
  name: "orderBaseInfo",
  components: {DictTag},

  props: {
    order: Object,
    // 是否备货，如果页面引用需要显示可出特性和渠道
    stocking: Boolean
  },

  data () {
    return {
      DICT_TYPE,
      getDictDataLabel
    }
  }
}
</script>

<style scoped lang="scss">
@import "src/assets/styles/element-variables";
.red{
  color: $--color-danger;
}
.green{
  color: $--color-success;
}
</style>