klp-oa/klp-ui/src/views/crm/components/DeliveryTable.vue

<template>
  <div>
    <div class="coil-stats" style="margin-bottom: 10px; padding: 10px; background-color: #f5f7fa; border-radius: 4px;">
      <span style="margin-right: 20px;"><strong>已发货：{{ deliveryCountFinished }}</strong></span>
      <span><strong>总单据数：{{ deliveryCountTotal }}</strong></span>
    </div>
    <el-table border :data="data" highlight-current-row :height="tableHeight">
      <el-table-column label="发货单唯一ID" align="center" prop="waybillId" v-if="false" />
      <el-table-column label="发货单名称" align="center" prop="waybillName" />
      <el-table-column label="车牌" align="center" prop="licensePlate" width="100" />
      <el-table-column label="收货单位" align="center" prop="consigneeUnit" />
      <el-table-column label="发货单位" align="center" prop="senderUnit" />
      <el-table-column label="订单编号" align="center" prop="orderNo">
        <template slot-scope="scope">
          <span v-if="scope.row.orderId">{{ scope.row.orderCode }}</span>
          <span v-else>{{ scope.row.principalPhone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发货时间" align="center" prop="deliveryTime" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.deliveryTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="负责人" align="center" prop="principal" width="60" />
      <el-table-column label="状态" align="center" prop="status" width="80">
        <template slot-scope="scope">
          <div v-if="scope.row.status === 1">已发货</div>
          <div v-else-if="scope.row.status === 0">未发货</div>
          <div v-else-if="scope.row.status === 2">已打印</div>
          <div v-else>未打印</div>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" width="100" show-overflow-tooltip />
    </el-table>
  </div>

</template>

<script>
export default {
  name: "DeliveryWaybill",
  props: {
    data: {
      type: Array,
      default: () => []
    },
    tableHeight: {
      type: [String, Number],
      default: ''
    }
  },

  computed: {
    /** 计算已发货数量 */
    deliveryCountFinished() {
      return this.data.filter(row => row.status === 1 || row.status === 2).length;
    },
    /** 计算总数量 */
    deliveryCountTotal() {
      return this.data.length;
    }
  },
};
</script>