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

<template>
  <div class="coil-table">
    <div class="table-controls">
    <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="paginationTotal" :page-size="effectivePageSize"
      :current-page="pageNum" :page-sizes="[10, 20, 50, 100, 200, 500, 1000]" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
      <slot name="settings"></slot>
    </div>

    <el-table :data="tableData" style="width: 100%" height="calc(100vh - 320px)" border row-key="coilId" :row-class-name="getRowClassName">
      <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" />
            <RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :material="scope.row" />
          </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-if="column.prop === 'lengthDiff'">
            <span :style="{ color: isLengthAbnormal(scope.row) ? 'red' : '' }">
              {{ scope.row.lengthDiff != null ? scope.row.lengthDiff.toFixed(3) : '' }}
              <template v-if="scope.row.lengthDiff != null && scope.row.theoreticalLength">
                ({{ (Math.abs(scope.row.lengthDiff) / scope.row.theoreticalLength).toFixed(3) }})
              </template>
            </span>
          </template>
          <template v-else-if="column.prop === 'thicknessDiff'">
            <span :style="{ color: isThicknessAbnormal(scope.row) ? 'red' : '' }">
              {{ scope.row.thicknessDiff != null ? scope.row.thicknessDiff.toFixed(3) : '' }}
            </span>
          </template>
          <template v-else-if="column.prop === 'qualityStatus'">
            <div @click="handleQualityStatusClick(scope.row)" style="cursor: pointer; background-color: #f5f7fa;">
              <dict-tag v-if="scope.row.qualityStatus" :options="dict.type.coil_quality_status" :value="scope.row.qualityStatus"></dict-tag>
              <span v-else>暂未判级</span>
            </div>
          </template>
          <!-- 默认渲染 -->
          <template v-else>
            {{ scope.row[column.prop] }}
          </template>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="钢卷异常信息" :visible.sync="abmornal.visible" width="60%">
      <abnormal-table ref="abnormalTable" :list="abmornal.data" 
        :editable="false" :show-coil="false" :coil-info="abmornal.currentCoil" v-loading="abmornal.loading">
      </abnormal-table>
    </el-dialog>
  </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";

import { listCoilAbnormal } from '@/api/wms/coilAbnormal'
import AbnormalTable from '@/views/wms/coil/components/AbnormalTable.vue'
import { getConfigKey } from '@/api/system/config'

export default {
  name: 'CoilTable',
  components: {
    ProductInfo,
    RawMaterialInfo,
    CoilNo,
    AbnormalTable,
  },
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
    // 高亮配置
    highlightConfig: {
      type: Object,
      default: () => ({
        // 需要高亮的行的条件函数或行ID数组
        rows: [],
        // 高亮样式类名
        className: 'highlight-row',
        // 自定义高亮样式
        style: {}
      })
    },
    // 服务端分页总数（>0 时开启服务端分页模式）
    total: {
      type: Number,
      default: 0
    },
    // 服务端分页每页条数
    pageSize: {
      type: Number,
      default: 0
    }
  },
  dicts: ['coil_quality_status', 'coil_abnormal_code', 'coil_abnormal_degree'],
  data() {
    return {
      pageNum: 1,
      innerPageSize: 1000,
      // 排序相关
      sortField: '',
      sortDirection: 'asc',
      // 筛选相关
      filterKeyword: '',
      filterColumn: [],
      abmornal: {
        visible: false,
        data: {},
        loading: false,
        currentCoil: {},
      },
      lengthThreshold: 0,
      thicknessThreshold: 0,
      thicknessMaxThreshold: 0,
      thicknessMinThreshold: 0,
    }
  },
  mounted() {
    // 默认选中所有列
    this.filterColumn = this.columns.map(column => column.prop)
    this.getAlarmThreshold()
  },
  computed: {
    isServerPagination() {
      return this.total > 0
    },
    effectivePageSize() {
      return this.pageSize > 0 ? this.pageSize : this.innerPageSize
    },
    enrichedData() {
      return this.data.map(row => ({
        ...row,
        lengthDiff: (row.actualLength || 0) - (row.theoreticalLength || 0),
        thicknessDiff: (row.theoreticalThickness || 0) - (row.computedThickness || 0)
      }))
    },
    // 处理排序和筛选后的数据（服务端分页模式下跳过筛选排序）
    processedData() {
      if (this.isServerPagination) {
        return this.enrichedData
      }
      let result = [...this.enrichedData]

      // 筛选逻辑
      if (this.filterColumn.length > 0 && this.filterKeyword) {
        const keyword = this.filterKeyword.toLowerCase()
        result = result.filter(item => {
          // 只要有一个字段匹配，就保留该记录
          return this.filterColumn.some(column => {
            const value = item[column]
            if (value === null || value === undefined) return false
            return String(value).toLowerCase().includes(keyword)
          })
        })
      }

      // 排序逻辑
      if (this.sortField) {
        result.sort((a, b) => {
          const aValue = a[this.sortField]
          const bValue = b[this.sortField]

          // 处理null和undefined
          if (aValue === null || aValue === undefined) return 1
          if (bValue === null || bValue === undefined) return -1

          // 字符串比较
          if (typeof aValue === 'string' && typeof bValue === 'string') {
            return this.sortDirection === 'asc'
              ? aValue.localeCompare(bValue)
              : bValue.localeCompare(aValue)
          }

          // 数字比较
          if (typeof aValue === 'number' && typeof bValue === 'number') {
            return this.sortDirection === 'asc'
              ? aValue - bValue
              : bValue - aValue
          }

          // 其他类型比较
          return this.sortDirection === 'asc'
            ? String(aValue).localeCompare(String(bValue))
            : String(bValue).localeCompare(String(aValue))
        })
      }

      return result
    },
    // 内部实现前端分页逻辑（服务端分页模式下直接返回数据）
    tableData() {
      if (this.isServerPagination) {
        return this.enrichedData
      }
      return this.processedData.slice((this.pageNum - 1) * this.effectivePageSize, this.pageNum * this.effectivePageSize)
    },
    // 计算总页数
    totalPage() {
      const total = this.isServerPagination ? this.total : this.processedData.length
      return Math.ceil(total / this.effectivePageSize)
    },
    // 计算总条数
    pageTotal() {
      return this.processedData.length
    },
    // 分页总条数（服务端优先）
    paginationTotal() {
      return this.isServerPagination ? this.total : this.pageTotal
    },
    // 是否展示分页组件
    showPagination() {
      if (this.isServerPagination) return true
      return this.totalPage > 1
    }
  },
  methods: {
    // 分页大小改变时触发
    handleSizeChange(val) {
      if (this.isServerPagination) {
        this.$emit('size-change', val)
      } else {
        this.innerPageSize = val
      }
      this.pageNum = 1
    },
    // 分页当前页改变时触发
    handleCurrentChange(val) {
      this.pageNum = val
      if (this.isServerPagination) {
        this.$emit('current-change', 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
    },
    // 处理筛选条件变化
    handleFilterChange() {
      this.pageNum = 1
    },
    // 处理排序规则变化
    handleSortChange() {
      this.pageNum = 1
    },
    handleQualityStatusClick(row) {
      this.abmornal.visible = true
      this.abmornal.loading = true
      this.abmornal.currentCoil = row
      listCoilAbnormal({
        coilId: row.coilId
      }).then(response => {
        this.abmornal.data = response.rows || []
      }).catch(error => {
        console.error('查询异常记录失败:', error)
        this.$message.error('查询异常记录失败: ' + (error.message || error))
      }).finally(() => {
        this.abmornal.loading = false
      })
    },
    // 获取行类名
    getRowClassName({ row, rowIndex }) {
      const { rows } = this.highlightConfig

      // if (this.isLengthAbnormal(row) || this.isThicknessAbnormal(row)) {
      //   return 'warning-row'
      // }

      if (!rows || (Array.isArray(rows) && rows.length === 0)) {
        return ''
      }
      
      // 检查是否需要高亮
      let shouldHighlight = false
      if (typeof rows === 'function') {
        // 如果是函数，调用函数判断
        shouldHighlight = rows(row, rowIndex)
      } else if (Array.isArray(rows)) {
        // 如果是数组，检查row.coilId是否在数组中
        shouldHighlight = rows.includes(row.coilId)
        console.log('判断是否应该高亮', shouldHighlight, rows, row.coilId)
      }
      
      return shouldHighlight ? 'warning-row' : ''
    },
    // 获取行样式
    getRowStyle({ row, rowIndex }) {
      const { rows, style } = this.highlightConfig
      if (!rows || (Array.isArray(rows) && rows.length === 0)) {
        return {}
      }
      
      // 检查是否需要高亮
      let shouldHighlight = false
      if (typeof rows === 'function') {
        shouldHighlight = rows(row, rowIndex)
      } else if (Array.isArray(rows)) {
        shouldHighlight = rows.includes(row.coilId)
      }
      
      return shouldHighlight ? style : {}
    },
    isLengthAbnormal(row) {
      const theoreticalLength = row.theoreticalLength || 1
      return Math.abs(row.lengthDiff) / theoreticalLength > this.lengthThreshold
    },
    isThicknessAbnormal(row) {
      return row.thicknessDiff > this.thicknessThreshold
    },
    // 获取报警阈值参数
    getAlarmThreshold() {
      getConfigKey('material.warning.length').then(response => { this.lengthThreshold = response.msg || 0 })
      getConfigKey('material.warning.thickness').then(response => { this.thicknessThreshold = response.msg || 0 })
      // getConfigKey('material.warning.Maxthickness').then(response => { this.thicknessMaxThreshold = response.msg || 0 })
      // getConfigKey('material.warning.Minthickness').then(response => { this.thicknessMinThreshold = response.msg || 0 })
    }
  }
}
</script>

<style scoped>
.coil-table {
  padding: 10px;
}

.table-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-section,
.sort-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.el-pagination {
  margin-top: 0px !important;
}

@media screen and (max-width: 768px) {
  .table-controls {
    flex-direction: column;
    align-items: flex-end;
  }

  .filter-section,
  .sort-section {
    width: 100%;
  }
}

/* 行高亮样式 */
::v-deep .el-table__row.warning-row {
  background: oldlace !important;
}
</style>