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

<template>
  <div class="quality-issue-detail">
    <!-- 编辑模式 -->
    <div v-if="isEditMode" class="edit-form">
      <!-- 基础信息区 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="form-item">
            <div class="label">反馈单号：</div>
            <div class="value disabled">{{ detailData.issueNo }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item">
            <div class="label">问题日期：</div>
            <el-date-picker
              v-model="editData.issueDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              size="small"
              class="edit-input"
              style="width: 100%">
            </el-date-picker>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item">
            <div class="label">供应商编码：</div>
            <div class="value disabled">{{ detailData.supplierNo }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item">
            <div class="label">供应商名称：</div>
            <div class="value disabled">{{ detailData.supplierName }}</div>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <div class="form-item">
            <div class="label">供应商负责人：</div>
            <el-input v-model="editData.supplierResponsible" placeholder="请输入" size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item">
            <div class="label">Plant：</div>
            <el-input v-model="editData.plant" placeholder="请输入" size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item">
            <div class="label">Claim No：</div>
            <el-input v-model="editData.claimNo" placeholder="请输入" size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item">
            <div class="label">Product Category：</div>
            <el-input v-model="editData.productCategory" placeholder="请输入" size="small"></el-input>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <div class="form-item">
            <div class="label">Part No：</div>
            <el-input v-model="editData.partNo" placeholder="请输入" size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item">
            <div class="label">批次数量：</div>
            <el-input-number v-model="editData.batchQty" :min="0" size="small" controls-position="right" style="width: 100%"></el-input-number>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item">
            <div class="label">拒收批次数量：</div>
            <el-input-number v-model="editData.rejectBatchQty" :min="0" size="small" controls-position="right" style="width: 100%"></el-input-number>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item">
            <div class="label">投诉接收日期：</div>
            <el-date-picker
              v-model="editData.receiveComplaintDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              size="small"
              style="width: 100%">
            </el-date-picker>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <div class="form-item">
            <div class="label">样品接收日期：</div>
            <el-date-picker
              v-model="editData.receiveSampleDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              size="small"
              style="width: 100%">
            </el-date-picker>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="form-item">
            <div class="label">问题简述：</div>
            <el-input v-model="editData.issueSummary" placeholder="请输入" size="small"></el-input>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <div class="form-item textarea-item">
            <div class="label">问题详细描述：</div>
            <el-input type="textarea" v-model="editData.issueDescription" :rows="3" placeholder="请输入"></el-input>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="4">
          <div class="form-item">
            <div class="label">Level：</div>
            <el-input v-model="editData.levelNo" placeholder="请输入" size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="form-item">
            <div class="label">Mode 1：</div>
            <el-input v-model="editData.mode1" placeholder="请输入" size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="form-item">
            <div class="label">Mode 2：</div>
            <el-input v-model="editData.mode2" placeholder="请输入" size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="form-item">
            <div class="label">Mode 3：</div>
            <el-input v-model="editData.mode3" placeholder="请输入" size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="form-item">
            <div class="label">Inspector：</div>
            <el-input v-model="editData.inspector" placeholder="请输入" size="small"></el-input>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <div class="form-item">
            <div class="label">录入人：</div>
            <div class="value disabled">{{ detailData.createBy }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item">
            <div class="label">录入时间：</div>
            <div class="value disabled">{{ detailData.createDate }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item">
            <div class="label">要求回复日期：</div>
            <el-date-picker
              v-model="editData.requireReplyDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              size="small"
              style="width: 100%">
            </el-date-picker>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item">
            <div class="label">状态：</div>
            <div class="value disabled">{{ detailData.status }}</div>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <div class="form-item textarea-item">
            <div class="label">Why Escape：</div>
            <el-input type="textarea" v-model="editData.whyEscape" :rows="2" placeholder="请输入"></el-input>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <div class="form-item textarea-item">
            <div class="label">原因分析：</div>
            <el-input type="textarea" v-model="editData.analysis" :rows="3" placeholder="请输入"></el-input>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <div class="form-item textarea-item">
            <div class="label">后续措施：</div>
            <el-input type="textarea" v-model="editData.correctiveAction" :rows="3" placeholder="请输入"></el-input>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="6">
          <div class="form-item">
            <div class="label">回复人：</div>
            <el-input v-model="editData.replyBy" placeholder="请输入" size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item">
            <div class="label">回复时间：</div>
            <el-date-picker
              v-model="editData.replyTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"
              size="small"
              style="width: 100%">
            </el-date-picker>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item">
            <div class="label">录入人(回复)：</div>
            <el-input v-model="editData.entryBy" placeholder="请输入" size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item">
            <div class="label">录入时间(回复)：</div>
            <el-date-picker
              v-model="editData.entryDate"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"
              size="small"
              style="width: 100%">
            </el-date-picker>
          </div>
        </el-col>
      </el-row>

      <!-- 索赔信息区块 -->
      <div class="claim-section">
        <div class="claim-title">索赔信息</div>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="form-item">
              <div class="label">是否被索赔：</div>
              <el-select v-model="editData.claimFlag" placeholder="请选择" size="small" style="width: 100%">
                <el-option label="是" value="Y"></el-option>
                <el-option label="否" value="N"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="form-item">
              <div class="label">被索赔金额：</div>
              <el-input-number v-model="editData.claimAmount" :min="0" :precision="2" size="small" controls-position="right" style="width: 100%"></el-input-number>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="form-item">
              <div class="label">处置备注：</div>
              <el-input v-model="editData.disposalRemark" placeholder="请输入" size="small"></el-input>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="form-item">
              <div class="label">录入人(索赔)：</div>
              <el-input v-model="editData.entryByClaim" placeholder="请输入" size="small"></el-input>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="form-item">
              <div class="label">录入时间(索赔)：</div>
              <el-date-picker
                v-model="editData.entryDateClaim"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
                size="small"
                style="width: 100%">
              </el-date-picker>
            </div>
          </el-col>
        </el-row>
      </div>

      <el-row :gutter="20">
        <el-col :span="6">
          <div class="form-item">
            <div class="label">关闭人：</div>
            <el-input v-model="editData.closeBy" placeholder="请输入" size="small"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item">
            <div class="label">关闭时间：</div>
            <el-date-picker
              v-model="editData.closeTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"
              size="small"
              style="width: 100%">
            </el-date-picker>
          </div>
        </el-col>
        <!-- 编辑模式按钮列 -->
        <el-col :span="12">
          <div class="form-item btn-form-item">  <!-- 新增 btn-form-item 类 -->
            <div class="label" style="opacity: 0;">占位</div>  <!-- 透明占位，保持与左侧标签高度一致 -->
            <div class="btn-area">
              <el-button type="primary" size="small" @click="handleSave">保存</el-button>
              <el-button size="small" @click="handleCancelEdit">取消</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 查看模式 -->
    <div v-else>
      <!-- 保持原有的只读展示布局，但使用相同的栅格结构更整洁 -->
      <el-row :gutter="20">
        <el-col :span="6"><div class="form-item"><div class="label">反馈单号：</div><div class="value">{{ detailData.issueNo }}</div></div></el-col>
        <el-col :span="6"><div class="form-item"><div class="label">问题日期：</div><div class="value">{{ formatDate(detailData.issueDate) }}</div></div></el-col>
        <el-col :span="6"><div class="form-item"><div class="label">供应商编码：</div><div class="value">{{ detailData.supplierNo }}</div></div></el-col>
        <el-col :span="6"><div class="form-item"><div class="label">供应商名称：</div><div class="value">{{ detailData.supplierName }}</div></div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"><div class="form-item"><div class="label">供应商负责人：</div><div class="value">{{ detailData.supplierResponsible }}</div></div></el-col>
        <el-col :span="6"><div class="form-item"><div class="label">Plant：</div><div class="value">{{ detailData.plant }}</div></div></el-col>
        <el-col :span="6"><div class="form-item"><div class="label">Claim No：</div><div class="value">{{ detailData.claimNo }}</div></div></el-col>
        <el-col :span="6"><div class="form-item"><div class="label">Product Category：</div><div class="value">{{ detailData.productCategory }}</div></div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"><div class="form-item"><div class="label">Part No：</div><div class="value">{{ detailData.partNo }}</div></div></el-col>
        <el-col :span="6"><div class="form-item"><div class="label">批次数量：</div><div class="value">{{ detailData.batchQty }}</div></div></el-col>
        <el-col :span="6"><div class="form-item"><div class="label">拒收批次数量：</div><div class="value">{{ detailData.rejectBatchQty }}</div></div></el-col>
        <el-col :span="6"><div class="form-item"><div class="label">投诉接收日期：</div><div class="value">{{ formatDate(detailData.receiveComplaintDate) }}</div></div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"><div class="form-item"><div class="label">样品接收日期：</div><div class="value">{{ formatDate(detailData.receiveSampleDate) }}</div></div></el-col>
        <el-col :span="18"><div class="form-item"><div class="label">问题简述：</div><div class="value">{{ detailData.issueSummary }}</div></div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24"><div class="form-item textarea-item"><div class="label">问题详细描述：</div><div class="value textarea-content">{{ detailData.issueDescription }}</div></div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4"><div class="form-item"><div class="label">Level：</div><div class="value">{{ detailData.levelNo }}</div></div></el-col>
        <el-col :span="5"><div class="form-item"><div class="label">Mode 1：</div><div class="value">{{ detailData.mode1 }}</div></div></el-col>
        <el-col :span="5"><div class="form-item"><div class="label">Mode 2：</div><div class="value">{{ detailData.mode2 }}</div></div></el-col>
        <el-col :span="5"><div class="form-item"><div class="label">Mode 3：</div><div class="value">{{ detailData.mode3 }}</div></div></el-col>
        <el-col :span="5"><div class="form-item"><div class="label">Inspector：</div><div class="value">{{ detailData.inspector }}</div></div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"><div class="form-item"><div class="label">录入人：</div><div class="value">{{ detailData.createBy }}</div></div></el-col>
        <el-col :span="6"><div class="form-item"><div class="label">录入时间：</div><div class="value">{{ detailData.createDate }}</div></div></el-col>
        <el-col :span="6"><div class="form-item"><div class="label">要求回复日期：</div><div class="value">{{ formatDate(detailData.requireReplyDate) }}</div></div></el-col>
        <el-col :span="6"><div class="form-item"><div class="label">状态：</div><div class="value">{{ detailData.status }}</div></div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24"><div class="form-item textarea-item"><div class="label">Why Escape：</div><div class="value textarea-content">{{ detailData.whyEscape }}</div></div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24"><div class="form-item textarea-item"><div class="label">原因分析：</div><div class="value textarea-content">{{ detailData.analysis }}</div></div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24"><div class="form-item textarea-item"><div class="label">后续措施：</div><div class="value textarea-content">{{ detailData.correctiveAction }}</div></div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"><div class="form-item"><div class="label">回复人：</div><div class="value">{{ detailData.replyBy }}</div></div></el-col>
        <el-col :span="6"><div class="form-item"><div class="label">回复时间：</div><div class="value">{{ detailData.replyTime }}</div></div></el-col>
        <el-col :span="6"><div class="form-item"><div class="label">录入人(回复)：</div><div class="value">{{ detailData.entryBy }}</div></div></el-col>
        <el-col :span="6"><div class="form-item"><div class="label">录入时间(回复)：</div><div class="value">{{ detailData.entryDate }}</div></div></el-col>
      </el-row>
      <div class="claim-section">
        <div class="claim-title">索赔信息</div>
        <el-row :gutter="20">
          <el-col :span="6"><div class="form-item"><div class="label">是否被索赔：</div><div class="value">{{ detailData.claimFlag === 'Y' ? '是' : '否' }}</div></div></el-col>
          <el-col :span="6"><div class="form-item"><div class="label">被索赔金额：</div><div class="value">{{ detailData.claimAmount }}</div></div></el-col>
          <el-col :span="12"><div class="form-item"><div class="label">处置备注：</div><div class="value">{{ detailData.disposalRemark }}</div></div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="form-item"><div class="label">录入人(索赔)：</div><div class="value">{{ detailData.entryByClaim }}</div></div></el-col>
          <el-col :span="6"><div class="form-item"><div class="label">录入时间(索赔)：</div><div class="value">{{ detailData.entryDateClaim }}</div></div></el-col>
        </el-row>
      </div>
      <el-row :gutter="20">
        <el-col :span="6"><div class="form-item"><div class="label">关闭人：</div><div class="value">{{ detailData.closeBy }}</div></div></el-col>
        <el-col :span="6"><div class="form-item"><div class="label">关闭时间：</div><div class="value">{{ detailData.closeTime }}</div></div></el-col>
        <el-col :span="12">
          <div class="form-item btn-form-item">
            <div class="label" style="opacity: 0;">占位</div>
            <div class="btn-area">
              <el-button type="primary" size="small" @click="handleEdit" v-if="canEdit">修改</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QualityIssueDetail',
  props: {
    detailData: {
      type: Object,
      default: () => ({})
    },
    canEdit: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isEditMode: false,
      editData: {},
      saveLoading: false
    }
  },
  watch: {
    detailData: {
      handler(newVal) {
        if (newVal && Object.keys(newVal).length) {
          this.initEditData()
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    formatDate(dateStr) {
      if (!dateStr) return ''
      // 如果包含时分秒，截取前10位
      return dateStr.length > 10 ? dateStr.substring(0, 10) : dateStr
    },
    initEditData() {
      this.editData = {
        issueDate: this.detailData.issueDate,
        supplierResponsible: this.detailData.supplierResponsible,
        plant: this.detailData.plant,
        claimNo: this.detailData.claimNo,
        productCategory: this.detailData.productCategory,
        partNo: this.detailData.partNo,
        batchQty: this.detailData.batchQty,
        rejectBatchQty: this.detailData.rejectBatchQty,
        receiveComplaintDate: this.detailData.receiveComplaintDate,
        receiveSampleDate: this.detailData.receiveSampleDate,
        issueSummary: this.detailData.issueSummary,
        issueDescription: this.detailData.issueDescription,
        levelNo: this.detailData.levelNo,
        mode1: this.detailData.mode1,
        mode2: this.detailData.mode2,
        mode3: this.detailData.mode3,
        inspector: this.detailData.inspector,
        requireReplyDate: this.detailData.requireReplyDate,
        whyEscape: this.detailData.whyEscape,
        analysis: this.detailData.analysis,
        correctiveAction: this.detailData.correctiveAction,
        replyBy: this.detailData.replyBy,
        replyTime: this.detailData.replyTime,
        entryBy: this.detailData.entryBy,
        entryDate: this.detailData.entryDate,
        claimFlag: this.detailData.claimFlag,
        claimAmount: this.detailData.claimAmount,
        disposalRemark: this.detailData.disposalRemark,
        entryByClaim: this.detailData.entryByClaim,
        entryDateClaim: this.detailData.entryDateClaim,
        closeBy: this.detailData.closeBy,
        closeTime: this.detailData.closeTime
      }
    },
    handleEdit() {
      this.isEditMode = true
      this.initEditData()
    },
    handleCancelEdit() {
      this.isEditMode = false
      this.initEditData()
    },
    handleSave() {
      this.saveLoading = true
      // 触发父组件的保存事件，传递修改后的数据
      this.$emit('save', this.editData, (success) => {
        this.saveLoading = false
        if (success !== false) {
          this.isEditMode = false
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.quality-issue-detail {
  padding: 10px 15px;
  background: #fff;
  border: 1px solid #dcdfe6;
}

.form-item {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

.form-item .label {
  font-size: 13px;
  font-weight: 500;
  color: #606266;
  margin-bottom: 6px;
  line-height: 1.2;
}

/* 查看模式下的只读字段 */
.form-item .value {
  min-height: 32px;
  line-height: 32px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  color: #303133;
  font-size: 13px;
  word-break: break-all;
  white-space: pre-wrap;
  box-sizing: border-box;
}

.form-item .value.disabled {
  background: #f5f7fa;
  color: #909399;
}

.form-item.textarea-item .value.textarea-content {
  min-height: 60px;
  line-height: 1.5;
  padding: 8px 10px;
}

/* 统一编辑模式输入框样式 */
/deep/ .el-input--small .el-input__inner {
  height: 32px;
  line-height: 32px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
  font-size: 13px;
}

/* 文本域样式 */
/deep/ .el-textarea__inner {
  height: auto;
  line-height: 1.5;
  padding: 8px 10px;
  min-height: 60px;
  box-sizing: border-box;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
  font-size: 13px;
}

/* 下拉选择框 */
/deep/ .el-select .el-input__inner {
  height: 32px;
  line-height: 32px;
  padding: 0 10px;
  box-sizing: border-box;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
  font-size: 13px;
}

/* 日期选择器容器 */
/deep/ .el-date-editor {
  width: 100% !important;
}

/deep/ .el-date-editor.el-input,
/deep/ .el-date-editor.el-input__inner {
  width: 100%;
}

/* 日期选择器输入框 */
/deep/ .el-date-editor .el-input__inner {
  height: 32px;
  line-height: 32px;
  padding: 0 30px 0 10px;
  box-sizing: border-box;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
  font-size: 13px;
}

/* 日期时间选择器输入框 */
/deep/ .el-date-editor--datetime .el-input__inner {
  padding: 0 40px 0 10px;
}

/* 修复图标垂直居中 - 关键 */
/deep/ .el-input {
  line-height: 32px;
}

/deep/ .el-input__prefix,
/deep/ .el-input__suffix {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  top: 0 !important;
  bottom: auto !important;
  line-height: 32px !important;
}

/deep/ .el-input__suffix {
  right: 5px;
}

/deep/ .el-input__prefix {
  left: 5px;
}

/deep/ .el-input__suffix-inner,
/deep/ .el-input__prefix-inner {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  line-height: 32px !important;
}

/deep/ .el-input__icon {
  line-height: 32px !important;
  height: 32px !important;
  width: 25px;
  text-align: center;
  font-size: 14px;
  top: 0 !important;
}

/* 带后缀的输入框右侧留空间 */
/deep/ .el-input--suffix .el-input__inner {
  padding-right: 30px;
}

/* 带前缀的输入框左侧留空间 */
/deep/ .el-input--prefix .el-input__inner {
  padding-left: 30px;
}

/* 数字输入框 */
/deep/ .el-input-number--small {
  width: 100%;
}

/deep/ .el-input-number--small .el-input__inner {
  height: 32px;
  line-height: 32px;
  padding: 0 40px 0 10px;
  box-sizing: border-box;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
  font-size: 13px;
  text-align: left;
}

/deep/ .el-input-number--small .el-input-number__increase,
/deep/ .el-input-number--small .el-input-number__decrease {
  height: 15px;
  line-height: 15px;
  width: 28px;
  font-size: 12px;
}

/* 按钮样式 */
.quality-issue-detail .el-button--small,
.quality-issue-detail .el-button--default {
  height: 32px;
  line-height: 32px;
  padding: 0 15px;
  font-size: 13px;
  border-radius: 4px;
  min-width: auto;
  width: auto;
}

.quality-issue-detail .el-button + .el-button {
  margin-left: 10px;
}

/* 索赔信息区域 */
.claim-section {
  border: 1px solid #dcdfe6;
  padding: 10px 12px;
  margin: 10px 0;
  background: #fafafa;
}

.claim-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 12px;
  padding-left: 8px;
  border-left: 3px solid #409eff;
}

.btn-area {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.btn-area .el-button {
  width: auto !important;
  min-width: 80px;
}

.claim-section /deep/ .el-select {
  width: 100%;
}

.claim-section /deep/ .el-input-number {
  width: 100%;
}

/* 日期时间选择器图标样式增强 */
/deep/ .el-date-editor--datetime {
  .el-input__prefix,
  .el-input__suffix {
    height: 32px !important;
    line-height: 32px !important;
  }

  .el-input__icon {
    line-height: 32px !important;
    height: 32px !important;
  }
}
</style>