klp-oa/klp-ui/src/views/wms/report/components/coilTable/index.vue

<template>
  <div class="coil-table">
    <!-- 其他props -->
    <el-table :data="tableData" style="width: 100%" height="calc(100vh - 320px)" border>
      <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.title" :width="column.width" :align="column.align">
        <template slot-scope="scope">
          <!-- 特殊 prop 渲染逻辑 -->
          <template v-if="column.prop === 'enterCoilNo'">
            <coil-no :coil-no="scope.row.enterCoilNo"></coil-no>
          </template>
          <template v-else-if="column.prop === 'currentCoilNo'">
            <current-coil-no :current-coil-no="scope.row.currentCoilNo"></current-coil-no>
          </template>
          <template v-else-if="column.prop === 'itemId'">
            <ProductInfo v-if="scope.row.itemType == 'product'" :product="scope.row.product" />
            <RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :material="scope.row.rawMaterial" />
          </template>
          <template v-else-if="column.prop === 'status'">
            {{ scope.row.status === 0 ? '在库' : '已出库' }}
          </template>
          <!-- 生产耗时，单位分钟，渲染为xx天xx小时xx分钟 -->
          <template v-else-if="column.prop === 'productionDuration'">
            {{ formatProductionDuration(scope.row.productionDuration) }}
          </template>
          <!-- 默认渲染 -->
          <template v-else>
            {{ scope.row[column.prop] }}
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="showPagination"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :page-size.sync="pageSize"
      :page-sizes="[10, 20, 50, 100, 200, 500, 1000]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
import CoilNo from "@/components/KLPService/Renderer/CoilNo.vue";

export default {
  name: 'CoilTable',
  components: {
    ProductInfo,
    RawMaterialInfo,
    CoilNo,
  },
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 1000,
    }
  },
  computed: {
    // 内部实现前端分页逻辑
    tableData() {
      return this.data.slice((this.pageNum - 1) * this.pageSize, this.pageNum * this.pageSize)
    },
    // 计算总页数
    totalPage() {
      return Math.ceil(this.data.length / this.pageSize)
    },
    // 计算总条数
    total() {
      return this.data.length
    },
    // 是否展示分页组件
    showPagination() {
      return this.totalPage > 1
    }
  },
  methods: {
    // 分页大小改变时触发
    handleSizeChange(val) {
      this.pageSize = val
      this.pageNum = 1
    },
    // 分页当前页改变时触发
    handleCurrentChange(val) {
      this.pageNum = val
    },
    // 生产耗时，单位分钟，渲染为xx天xx小时xx分钟
    formatProductionDuration(duration) {
      if (!duration || isNaN(duration)) {
        return '0分钟'
      }
      const days = Math.floor(duration / 1440)
      const hours = Math.floor((duration - days * 1440) / 60)
      const minutes = duration - days * 1440 - hours * 60
      let result = ''
      if (days > 0) {
        result += `${days}天`
      }
      if (hours > 0) {
        result += `${hours}小时`
      }
      if (minutes > 0 || (days === 0 && hours === 0)) {
        result += `${minutes}分钟`
      }
      return result
    }
  }
}
</script>