supply-front/src/components/LogisticsTabs/index.vue

<template>
  <div class="logistics">
    <div style="margin: 20px 0">
      <el-radio-group v-model="curTarget" size="small">
        <template v-for="(item, index) in tabsList">
          <el-radio-button v-if="item.show" :key="index" :label="item.value">{{ item.label }}</el-radio-button>
        </template>
      </el-radio-group>
    </div>
    <el-card v-if="curTarget === 1 && tabsList[curTarget-1].show">
      <div slot="header">
        <span>物流信息</span>
      </div>
      <slot name="header" />
      <div>
        <el-timeline v-if="logisticsDetail.length" :reverse="false">
          <el-timeline-item
            v-for="(item, index) in logisticsDetail"
            :key="index"
            placement="top"
            type="success"
            :timestamp="item.time"
          >
            <el-row :gutter="20">
              <el-col class="logistics-title"> {{ item.status }} </el-col>
              <el-col>
                <div class="flex">
                  <div>{{ item.context }}</div>
                  <!-- <div>{{ item.createTime }}</div> -->
                </div>
              </el-col>
            </el-row>
          </el-timeline-item>
        </el-timeline>
        <div v-else class="tip">暂无物流信息</div>
      </div>
    </el-card>
    <el-card v-if="curTarget === 2 && tabsList[curTarget-1].show">
      <div slot="header">
        <span>物流费用</span>
      </div>
      <div>
        <zj-table
          :table-attributes="defaultTableAttributes"
          :is-drop="true"
          :columns="formLogistics"
          :table-data="logisticsData"
        />
      </div>
    </el-card>
    <el-card v-if="curTarget === 3 && tabsList[curTarget-1].show">
      <div slot="header">
        <span>出库条码</span>
      </div>
      <div>
        <zj-table
          :table-attributes="defaultTableAttributes"
          :is-drop="true"
          :columns="formOutbound"
          :table-data="outboundData"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { getListCostBillV2 } from '@/api/logisticsBill'
import { getListOrderTrack } from '@/api/supply/pickup'
import { getListCodeV2 } from '@/api/barcode'

export default {
  props: {
    invoiceId: {
      type: String,
      default: null
    },
    detailsId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      tabsList: [
        {
          label: '物流状态',
          value: 1,
          show: true
        },
        {
          label: '物流费用',
          value: 2,
          show: true
        },
        {
          label: '出库条码',
          value: 3,
          show: true
        }
      ],
      curTarget: 1,
      defaultTableAttributes: {
        border: true,
        headerCellClassName: 'headerRowColor',
        size: 'mini',
        'summary-method': this.$getSummaries,
        'show-summary': true
      },
      logisticsData: [],
      outboundData: [],
      logisticsDetail: []
    }
  },
  computed: {
    formLogistics() {
      return [
        {
          columnAttributes: {
            label: '序号',
            type: 'index'
          }
        },
        {
          columnAttributes: {
            label: '结算状态',
            prop: 'materialName'
          }
        },
        {
          columnAttributes: {
            label: '调拨单号',
            prop: 'orderCode'
          }
        },
        {
          columnAttributes: {
            label: '嘉贤单据号',
            prop: 'materialName'
          }
        },
        {
          columnAttributes: {
            label: '存货编码',
            prop: 'materialName'
          }
        },
        {
          columnAttributes: {
            label: '物料代码',
            prop: 'materialName'
          }
        },
        {
          columnAttributes: {
            label: '产品名称',
            prop: 'materialName'
          }
        },
        {
          columnAttributes: {
            label: '规格型号',
            prop: 'materialSpecification'
          }
        },
        {
          columnAttributes: {
            label: '单价',
            prop: 'price'
          }
        },
        {
          columnAttributes: {
            label: '数量',
            prop: 'qty'
          }
        },
        {
          columnAttributes: {
            label: '物流费用',
            prop: 'totalCost'
          }
        },
        {
          columnAttributes: {
            label: '仓储费用',
            prop: 'materialName'
          }
        },
        {
          columnAttributes: {
            label: '合计费用',
            prop: 'materialName'
          }
        },
        {
          columnAttributes: {
            label: '对账人',
            prop: 'materialName'
          }
        },
        {
          columnAttributes: {
            label: '对账日期',
            prop: 'materialName'
          }
        },
        {
          columnAttributes: {
            label: '结算人',
            prop: 'materialName'
          }
        },
        {
          columnAttributes: {
            label: '结算日期',
            prop: 'materialName'
          }
        }
      ]
    },
    formOutbound() {
      return [
        {
          columnAttributes: {
            label: '序号',
            type: 'index'
          }
        },
        {
          columnAttributes: {
            label: '条码状态',
            prop: 'materialName'
          }
        },
        {
          columnAttributes: {
            label: '签收状态',
            prop: 'materialName'
          }
        },
        {
          columnAttributes: {
            label: '上墙状态',
            prop: 'materialName'
          }
        },
        {
          columnAttributes: {
            label: '物料代码',
            prop: 'materialName'
          }
        },
        {
          columnAttributes: {
            label: '产品名称',
            prop: 'materialName'
          }
        },
        {
          columnAttributes: {
            label: '规格型号',
            prop: 'materialName'
          }
        },
        {
          columnAttributes: {
            label: '内外机',
            prop: 'materialName'
          }
        },
        {
          columnAttributes: {
            label: '物料条码',
            prop: 'materialName'
          }
        },
        {
          columnAttributes: {
            label: '出库条形码',
            prop: 'materialName'
          }
        },
        {
          columnAttributes: {
            label: '签收日期',
            prop: 'materialName'
          }
        },
        {
          columnAttributes: {
            label: '上增日期',
            prop: 'materialName'
          }
        }
      ]
    }
  },
  mounted() {
    this.getListCodeV2()
    this.getListCostBillV2()
  },
  methods: {
    getListOrderTrack() {
      getListOrderTrack({ orderId: this.invoiceId }).then(res => {
        this.logisticsDetail = res.data
      })
    },
    getListCostBillV2() {
      getListCostBillV2({
        pageNum: 1,
        pageSize: -1,
        params: [
          {
            param: 'order_code',
            compare: '=',
            value: this.invoiceId
          }
        ]
      }).then(res => {
        res.data.records.forEach(item => {
          item.sums1 = ['orderHasSendQty', 'subsidyCoefficient', 'unloadUpstairsCoefficient', 'coefficient']
          item.sums2 = ['cost', 'unitPrice', 'totalCost', 'allowanceCost']
        })
        this.logisticsData = res.data.records
      })
    },
    getListCodeV2() {
      getListCodeV2({
        pageNum: 1,
        pageSize: -1,
        params: [
          {
            param: 'order_number',
            compare: '=',
            value: this.invoiceId
          }
        ]
      }).then(res => {
        this.outboundData = res.data.records
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-timeline-item__tail {
  border-left: 2px solid #67c23a;
}
::v-deep .el-form-item__content {
  line-height: 33px;
}
.logistics-title {
  padding: 10px;
}
.logistics {
  margin: 20px 0;
}
</style>