klp-oa/klp-ui/src/views/wms/coil/components/AbnormalTable.vue

<template>
  <el-table :data="list">
    <el-table-column label="异常钢卷" align="center" prop="coilId" v-if="showCoil">
      <template slot-scope="scope">
        <coil-no :coilId="scope.row.coilId">
          {{ scope.row.coilNo }}
        </coil-no>
      </template>
    </el-table-column>
    <el-table-column label="缺陷描述" align="center" prop="remark" show-overflow-tooltip />
    <el-table-column label="上下板面" align="center" prop="plateSurface"></el-table-column>
    <el-table-column label="缺陷位置" align="center" prop="position">
      <template slot-scope="scope">
        <dict-tag :options="dict.type.coil_abnormal_position" :value="scope.row.position" />
      </template>
    </el-table-column>

    <el-table-column label="开始位置" align="center" prop="startPosition" />
    <el-table-column label="结束位置" align="center" prop="endPosition" />
    <el-table-column label="缺陷长度" align="center" prop="length" />
    <el-table-column label="缺陷代码" align="center" prop="defectCode">
      <template slot-scope="scope">
        <dict-tag :options="dict.type.coil_abnormal_code" :value="scope.row.defectCode" />
      </template>
    </el-table-column>
    <el-table-column label="主缺陷" prop="mainMark">
      <template slot-scope="scope">
        <el-tag v-if="scope.row.mainMark" type="success">是</el-tag>
        <el-tag v-else type="danger">否</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="缺陷图片" align="center" prop="attachmentFiles" width="120">
      <template slot-scope="scope">
        <template v-if="scope.row.attachmentFiles">
          <div v-for="(url, idx) in scope.row.attachmentFiles.split(',')" :key="idx" style="margin-right: 4px;">
            <el-image
              style="width: 30px; height: 30px; vertical-align: middle; border-radius: 2px;"
              :src="url"
              :preview-src-list="scope.row.attachmentFiles.split(',')"
              fit="cover"
            />
          </div>
        </template>
      </template>
    </el-table-column>
    <el-table-column label="程度" align="center" prop="degree">
      <template slot-scope="scope">
        <dict-tag :options="dict.type.coil_abnormal_degree" :value="scope.row.degree" />
      </template>
    </el-table-column>
    <el-table-column label="创建人" align="center" prop="createBy" />
    <el-table-column label="创建时间" align="center" prop="createTime" />
    <el-table-column label="挂载时机" align="center" prop="abnormalTime" v-if="coilInfo.coilId">
      <template slot-scope="scope">
        {{ getAbnormalTime(scope.row) }}
      </template>
    </el-table-column>

    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" v-if="editable">
      <template slot-scope="scope">
        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import CoilNo from '@/components/KLPService/Renderer/CoilNo'

export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    editable: {
      type: Boolean,
      default: false
    },
    showCoil: {
      type: Boolean,
      default: false
    },
    coilInfo: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    CoilNo
  },
  dicts: ['coil_abnormal_position', 'coil_abnormal_code', 'coil_abnormal_degree'],
  methods: {
    handleDelete(row) {
      if (this.editable) {
        this.$emit('delete', row);
      }
    },
    handleUpdate(row) {
      if (this.editable) {
        this.$emit('update', row);
      }
    },
    // 计算目标列的异常挂载时机
    // 如果coilInfo.coilId存在，且与row.coilId相同，
    // 判断钢卷的createBy和row.createBy是否相同
    // 判断钢卷的createTime与row的createTime是否在一分钟内
    // 如果是，返回'生产时'
    // 如果否，返回'补录'
    getAbnormalTime(row) {
      if (this.coilInfo.coilId === row.coilId) {
        if (this.coilInfo.createBy === row.createBy) {
          if (Math.abs(new Date(this.coilInfo.createTime) - new Date(row.createTime)) < 60 * 1000) {
            return '生产时'
          }
        }
      }
      return '补录'
    }
  }
}
</script>