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

<template>
  <div class="exception-container" v-loading="abnormalLoading">
    <div class="exception-section">
      <h4 class="section-title">异常记录</h4>
      <el-table :data="abnormalList" style="width: 100%">
        <el-table-column label="开始位置" prop="startPosition"></el-table-column>
        <el-table-column label="结束位置" prop="endPosition"></el-table-column>
        <el-table-column label="长度" prop="length"></el-table-column>
        <el-table-column label="缺陷位置" prop="position"></el-table-column>
        <el-table-column label="缺陷代码" prop="defectCode">
          <template slot-scope="scope">
            <dict-tag :dict-type="dict.type.defectCode" :dict-value="scope.row.defectCode" />
          </template>
        </el-table-column>
        <el-table-column label="程度" prop="degree"></el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="danger" plain size="mini" :loading="buttonLoading" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="exception-section">
      <h4 class="section-title">新增异常</h4>
      <div class="form-container">
        <abnormal-form ref="abnormalForm" v-model="exceptionForm" :show-coil-selector="false"></abnormal-form>
        <div class="form-actions">
          <el-button type="primary" @click="confirmException" :loading="buttonLoading">确认新增</el-button>
          <el-button @click="resetExceptionForm" :loading="buttonLoading">重置表单</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { addCoilAbnormal, listCoilAbnormal, delCoilAbnormal } from '@/api/wms/coilAbnormal'
import AbnormalForm from './AbnormalForm'

export default {
  name: 'ExceptionManager',
  components: {
    AbnormalForm
  },
  dicts: ['coil_abnormal_code'],
  props: {
    coilId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      exceptionForm: {
        coilId: this.coilId,
        position: null,
        lengthCoord: 0,
        startPosition: 0,
        endPosition: 0,
        defectCode: null,
        degree: null,
        remark: null
      },
      abnormalList: [],
      abnormalLoading: false,
      buttonLoading: false,
    }
  },
  watch: {
    coilId: {
      handler(newVal) {
        this.exceptionForm.coilId = newVal
        this.loadAbnormalList()
      },
      immediate: true
    }
  },
  methods: {
    confirmException() {
      this.$refs.abnormalForm.validate(valid => {
        if (valid) {
          this.buttonLoading = true
          addCoilAbnormal({
            ...this.exceptionForm,
            length: this.exceptionForm.endPosition - this.exceptionForm.startPosition
          }).then(response => {
            this.$message.success('异常记录添加成功')
            this.resetExceptionForm()
            this.loadAbnormalList()
          }).catch(error => {
            console.error('异常记录添加失败:', error)
            this.$message.error('异常记录添加失败: ' + (error.message || error))
          }).finally(() => {
            this.buttonLoading = false
          })
        }
      })
    },
    resetExceptionForm() {
      this.exceptionForm = {
        coilId: this.coilId,
        position: null,
        lengthCoord: 0,
        startPosition: 0,
        endPosition: 0,
        defectCode: null,
        degree: null,
        remark: null
      }
      this.$refs.abnormalForm.resetFields()
    },
    loadAbnormalList() {
      if (!this.coilId) {
        return
      }
      this.abnormalLoading = true
      listCoilAbnormal({
        coilId: this.coilId
      }).then(response => {
        this.abnormalList = response.rows || []
      }).catch(error => {
        console.error('查询异常记录失败:', error)
        this.$message.error('查询异常记录失败: ' + (error.message || error))
      }).finally(() => {
        this.abnormalLoading = false
      })
    },
    handleDelete(row) {
      this.$modal.confirm('确认删除异常记录吗？', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.buttonLoading = true
        delCoilAbnormal(row.abnormalId).then(response => {
          this.$message.success('异常记录删除成功')
          this.loadAbnormalList()
        }).catch(error => {
          console.error('异常记录删除失败:', error)
          this.$message.error('异常记录删除失败: ' + (error.message || error))
        }).finally(() => {
          this.buttonLoading = false
        })
      })
    }
  }
}
</script>

<style scoped>
.exception-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

.exception-section {
  background-color: #fafafa;
  border-radius: 4px;
  padding: 16px;
  border: 1px solid #e4e7ed;
}

.section-title {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4e7ed;
}

.exception-section:first-child {
  flex: 1;
  min-height: 200px;
}

.exception-section:last-child {
  flex-shrink: 0;
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  background-color: #fafafa;
  border-top: 1px solid #e4e7ed;
  border-radius: 0 0 4px 4px;
  margin-top: -16px;
  margin-left: -16px;
  margin-right: -16px;
  margin-bottom: -16px;
}
</style>