krd-srm-vue/src/views/modules/quality/com_qualityIssueDetail.vue

<template>
  <div class="quality-issue-detail">
    <!-- 查看模式 -->
    <div>
      <el-form label-position="top" class="detail-form">
        <!-- 基础信息区 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="反馈单号">
              <el-input v-model="detailData.issueNo" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="问题日期">
              <el-input :value="formatDate(detailData.issueDate)" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="供应商编码">
              <el-input v-model="detailData.supplierNo" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="供应商名称">
              <el-input v-model="detailData.supplierName" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="供应商负责人">
              <el-input v-model="detailData.supplierResponsible" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="Plant">
              <el-input v-model="detailData.plant" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="Claim No">
              <el-input v-model="detailData.claimNo" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="Product Category">
              <el-input v-model="detailData.productCategory" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="Part No">
              <el-input v-model="detailData.partNo" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="批次数量">
              <el-input v-model="detailData.batchQty" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="拒收批次数量">
              <el-input v-model="detailData.rejectBatchQty" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="投诉接收日期">
              <el-input :value="formatDate(detailData.receiveComplaintDate)" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="样品接收日期">
              <el-input :value="formatDate(detailData.receiveSampleDate)" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="问题简述">
              <el-input v-model="detailData.issueSummary" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="问题详细描述">
              <el-input
                v-model="detailData.issueDescription"
                type="textarea"
                :rows="2"
                resize="none"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="Level">
              <el-input v-model="detailData.levelNo" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="Mode 1">
              <el-input v-model="detailData.mode1" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="Mode 2">
              <el-input v-model="detailData.mode2" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="Mode 3">
              <el-input v-model="detailData.mode3" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="Inspector">
              <el-input v-model="detailData.inspector" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-input v-model="detailData.createBy" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入时间">
              <el-input v-model="detailData.createDate" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="要求回复日期">
              <el-input :value="formatDate(detailData.requireReplyDate)" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-input v-model="detailData.status" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="Why Escape">
              <el-input
                v-model="detailData.whyEscape"
                type="textarea"
                :rows="2"
                resize="none"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="原因分析">
              <el-input
                v-model="detailData.analysis"
                type="textarea"
                :rows="3"
                resize="none"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="后续措施">
              <el-input
                v-model="detailData.correctiveAction"
                type="textarea"
                :rows="3"
                resize="none"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="6">
            <el-form-item label="回复人">
              <el-input v-model="detailData.replyBy" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="回复时间">
              <el-input v-model="detailData.replyTime" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人(回复)">
              <el-input v-model="detailData.entryBy" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入时间(回复)">
              <el-input v-model="detailData.entryDate" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 索赔信息区块 -->
        <div class="claim-section">
          <div class="claim-title">索赔信息</div>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="是否被索赔">
                <el-input :value="detailData.claimFlag === 'Y' ? '是' : (detailData.claimFlag === 'N' ? '否' : '')" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="被索赔金额">
                <el-input v-model="detailData.claimAmount" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="处置备注">
                <el-input v-model="detailData.disposalRemark" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="录入人(索赔)">
                <el-input v-model="detailData.entryBy" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入时间(索赔)">
                <el-input v-model="detailData.entryDate" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <el-row :gutter="20" class="reduce-margin-top">
          <el-col :span="6">
            <el-form-item label="关闭人">
              <el-input v-model="detailData.closeBy" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关闭时间">
              <el-input v-model="detailData.closeTime" disabled />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QualityIssueDetail',
  props: {
    detailData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {}
  },
  methods: {
    formatDate(dateStr) {
      if (!dateStr) return ''
      return dateStr.length > 10 ? dateStr.substring(0, 10) : dateStr
    }
  }
}
</script>
<style scoped lang="scss">
.quality-issue-detail {
  width: 100%;
  padding: 0 10px;
}

.detail-form {
  width: 100%;
}

/* =======================
   表单整体间距
======================= */
.el-form-item {
  margin-bottom: 8px;
}

/deep/ .el-form-item__label {
  display: block;
  font-size: 14px;
  color: #606266;
  line-height: 20px;
  height: 20px;
  padding-bottom: 8px;
  margin-bottom: 6px;
  font-weight: 500;
}

.el-row {
  margin-bottom: 8px;
}

.el-row:last-child {
  margin-bottom: 0;
}

/* =======================
   Input
======================= */
::v-deep .el-input__inner {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  border-radius: 4px;
}

/* =======================
   Textarea
======================= */
::v-deep .el-textarea__inner {
  font-size: 14px;
  line-height: 22px;
  padding: 10px 14px;
  min-height: 70px;
}

/* textarea表单项额外间距 */
.el-form-item:has(.el-textarea) {
  margin-bottom: 36px;
}

/* =======================
   Disabled
======================= */
::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #f5f7fa;
  color: #909399;
  border-color: #e4e7ed;
}

/* =======================
   DatePicker
======================= */
::v-deep .el-date-editor.el-input {
  width: 100%;
}

/* =======================
   Number
======================= */
::v-deep .el-input-number {
  width: 100%;
}

::v-deep .el-input-number .el-input__inner {
  text-align: left;
}

/* =======================
   索赔信息区块
======================= */
.claim-section {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: #fafafa;
  padding: 20px;
  margin: 16px 0 28px;
}

.claim-title {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  padding-left: 10px;
  margin-bottom: 20px;
  border-left: 3px solid #409eff;
}

.claim-section .el-form-item {
  margin-bottom: 4px;
}

.claim-section .el-row:last-child .el-form-item {
  margin-bottom: 0;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
  background-color: #f5f7fa;
  color: #606266;
}
/deep/ .el-textarea {
  display: block;
  margin-top: 4px;
}

@media screen and (max-width: 1600px) {
  .el-form-item {
    margin-bottom: 10px;
  }

  .claim-section {
    margin: 10px 0 20px;
  }
}
.reduce-margin-top {
  margin-top: -16px;
}


.reduce-margin-top .el-form-item {
  margin-bottom: 10px;
}
</style>