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

<template>
  <div class="customer-css">
    <!-- 查询条件 -->
    <el-form :inline="true" label-position="top" class="search-form-inline">
      <div class="search-row">
        <el-form-item class="search-item">
          <span slot="label" class="choose-label" @click="getBaseList(520)">供应商编码</span>
          <el-input v-model="searchData.supplierNo" style="width: 120px" @keyup.enter.native="getMainData"/>
        </el-form-item>
        <el-form-item label="供应商名称" class="search-item">
          <el-input v-model="searchData.supplierName" style="width: 180px" @keyup.enter.native="getMainData"/>
        </el-form-item>
        <el-form-item label="反馈单号" class="search-item">
          <el-input v-model="searchData.issueNo" style="width: 120px" @keyup.enter.native="getMainData"/>
        </el-form-item>
        <el-form-item label="问题日期" class="search-item">
          <el-date-picker
            v-model="searchData.issueDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            style="width: 150px"
            clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="状态" class="search-item">
          <el-select v-model="searchData.status" clearable placeholder="全部" style="width: 70%">
            <el-option label="全部" value="" />
            <el-option label="已确认" value="已确认" />
            <el-option label="已分析" value="已分析" />
            <el-option label="已关闭" value="已关闭" />
            <el-option label="已取消" value="已取消" />
          </el-select>
        </el-form-item>
      </div>
      <div class="search-row">
        <el-form-item label="Claim No" class="search-item">
          <el-input v-model="searchData.claimNo" style="width: 120px" @keyup.enter.native="getMainData"/>
        </el-form-item>
        <el-form-item label="Plant" class="search-item">
          <el-select v-model="searchData.plant" clearable placeholder="全部" style="width: 180px">
            <el-option label="Mx : Mexico" value="Mx"></el-option>
            <el-option label="IR : Ireland" value="IR"></el-option>
            <el-option label="TN : Tennessee" value="TN"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Product Category" class="search-item">
          <el-select v-model="searchData.productCategory" clearable placeholder="全部" style="width: 120px">
            <el-option label="Metal Pen" value="Metal Pen"></el-option>
            <el-option label="CUP" value="CUP"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="PO No" class="search-item">
          <el-input v-model="searchData.poNo" style="width: 150px" @keyup.enter.native="getMainData"/>
        </el-form-item>
        <el-form-item class="search-item">
          <span slot="label" class="choose-label" @click="getBaseList(2017)">Part No</span>
          <el-input v-model="searchData.partNo" style="width: 120px" @keyup.enter.native="getMainData"/>
        </el-form-item>
      </div>

      <div class="search-row">
        <el-form-item label=" " class="search-item search-btn-item">
          <el-button type="primary" @click="getMainData" class="customer-bun-min">查询</el-button>
          <el-button type="primary" @click="addQualityIssue" class="customer-bun-min">新增</el-button>
          <el-button type="primary" @click="exportExcel" class="customer-bun-min">导出</el-button>
        </el-form-item>
      </div>
    </el-form>

    <el-table
      :height="height"
      :data="mainDataList"
      border
      ref="mainTable"
      highlight-current-row
      @row-click="changeData"
      v-loading="dataListLoading"
      style="margin-top: 0px; width: 100%;">
      <el-table-column
        v-for="(item,index) in columnArray1" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed==''?false:item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                             style="width: 100px; height: 100px"/></span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="240" label="操作">
        <template slot-scope="scope">
          <!-- 编辑：已确认 或 已赔偿 -->
          <a v-if="scope.row.status === '已确认' || scope.row.status === '已赔偿'"
             class="customer-a"
             @click="editQualityIssue(scope.row)">编辑 </a>
          <!-- 删除：已确认 或 已赔偿 -->
          <a v-if="scope.row.status === '已确认' || scope.row.status === '已赔偿'"
             class="customer-a"
             @click="deleteQualityIssue(scope.row)">删除 </a>
          <!-- 回复：已确认 或 已赔偿 -->
          <a v-if="scope.row.status === '已确认' || scope.row.status === '已赔偿'"
             class="customer-a"
             @click="replyQualityIssue(scope.row)">回复 </a>
          <!-- 赔偿：已确认 或 已分析，但不能是已赔偿（已赔偿状态不显示赔偿按钮）-->
          <a v-if="(scope.row.status === '已确认' || scope.row.status === '已分析') && scope.row.status !== '已赔偿'"
             class="customer-a"
             @click="compensationQualityIssue(scope.row)">赔偿 </a>
          <!-- 关闭：仅已分析 -->
          <a v-if="scope.row.status === '已分析'"
             class="customer-a"
             @click="closeQualityIssueAction(scope.row)">关闭</a>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页插件 -->
    <el-pagination style="margin-top: 0px"
                   @size-change="sizeChangeHandle"
                   @current-change="currentChangeHandle"
                   :current-page="pageIndex"
                   :page-sizes="[20, 50, 100, 200, 500]"
                   :page-size="pageSize"
                   :total="totalPage"
                   layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!-- 详情页签 -->
    <el-tabs v-model="activeTab" :style="{marginTop: '10px', width: '100%'}" @tab-click="handleTabClick" class="customer-tab" type="border-card">
      <!-- 详情 -->
      <el-tab-pane label="详情" name="detail">
        <quality-issue-detail :detail-data="currentRow" />
      </el-tab-pane>
<!--PO列表-->
      <el-tab-pane label="PO列表" name="po">
        <quality-issue-po-list
          ref="qualityIssuePo"
          :issue-no="currentRow.issueNo"
          :site="currentRow.site"
          :supplier-no="currentRow.supplierNo" />
      </el-tab-pane>
      <!-- 附件 -->
      <el-tab-pane label="附件" name="attachment">
        <quality-issue-attachment :detail-data="currentRow" :table-height="detailHeight" />
      </el-tab-pane>
    </el-tabs>

    <!-- 新增弹窗 -->
    <el-dialog
      title="质量问题 - 新增"
      :visible.sync="addDialogVisible"
      width="70%"
      top="5vh"
      :close-on-click-modal="false"
      @close="handleCloseAddDialog">

      <el-form :model="addFormData" :rules="addRules" ref="addFormData" label-width="110px" size="mini" class="add-dialog-form">
        <!-- 第一行 -->
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="反馈单号">
              <el-input v-model="addFormData.issueNo" placeholder="自动生成" disabled size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="问题日期" prop="issueDate">
              <el-date-picker
                v-model="addFormData.issueDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                size="mini"
                style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="要求回复日期" prop="requireReplyDate">
              <el-date-picker
                v-model="addFormData.requireReplyDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                size="mini"
                style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-input v-model="addFormData.status" value="已确认" disabled size="mini"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 新增行：PO No、批次数量、拒收批次数量、投诉接收日期、样品接收日期 -->
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="批次数量">
              <el-input v-model="addFormData.batchQty" placeholder="请输入" size="mini" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="拒收批次数量">
              <el-input v-model="addFormData.rejectBatchQty" placeholder="请输入" size="mini" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="投诉接收日期">
              <el-date-picker
                v-model="addFormData.receiveComplaintDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                size="mini"
                style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="样品接收日期">
              <el-date-picker
                v-model="addFormData.receiveSampleDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                size="mini"
                style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item prop="supplierNo"><span slot="label" class="choose-label" @click="getBaseList(520)">供应商编码</span>
              <el-input
                v-model="addFormData.supplierNo"
                readonly
                size="mini">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商名称">
              <el-input v-model="addFormData.supplierName" disabled size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item><span slot="label" class="choose-label" @click="getBaseList(2016)">供应商负责人</span>
              <el-input
                v-model="addFormData.supplierResponsible"
                readonly
                size="mini">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第三行 -->
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="Plant">
              <el-select v-model="addFormData.plant" placeholder="请选择" size="mini" style="width: 100%">
                <el-option label="Mx : Mexico" value="Mx"></el-option>
                <el-option label="IR : Ireland" value="IR"></el-option>
                <el-option label="TN : Tennessee" value="TN"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="Claim No">
              <el-input v-model="addFormData.claimNo" placeholder="请输入" size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="Product Category">
              <el-select v-model="addFormData.productCategory" placeholder="请选择" size="mini" style="width: 100%">
                <el-option label="Metal Pen" value="Metal Pen"></el-option>
                <el-option label="CUP" value="CUP"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item><span slot="label" class="choose-label" @click="getBaseList(2017)">Part No</span>
              <el-input
                v-model="addFormData.partNo"
                readonly
                size="mini">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第四行 -->
        <el-row :gutter="10">
          <el-col :span="18">
            <el-form-item label="问题简述" prop="issueSummary">
              <el-input v-model="addFormData.issueSummary" placeholder="请输入问题简述" size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="Inspector">
              <el-input v-model="addFormData.inspector" placeholder="请输入" size="mini"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第五行 -->
        <el-row :gutter="10">
          <el-col :span="18">
            <el-form-item label="问题详细描述">
              <el-input
                v-model="addFormData.issueDescription"
                type="textarea"
                :rows="4"
                placeholder="请输入问题详细描述"
                size="mini">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第六行 -->
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="Level">
              <el-input v-model="addFormData.levelNo" placeholder="请输入" size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="Mode 1">
              <el-select v-model="addFormData.mode1" placeholder="请选择" size="mini" style="width: 100%">
                <el-option label="Appearance" value="Appearance"></el-option>
                <el-option label="Function" value="Function"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="Mode 2">
              <el-select v-model="addFormData.mode2" placeholder="请选择" size="mini" style="width: 100%">
                <el-option label="Loose part" value="Loose part"></el-option>
                <el-option label="Others" value="Others"></el-option>
                <el-option label="Contamination" value="Contamination"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="Mode 3">
              <el-select v-model="addFormData.mode3" placeholder="请选择" size="mini" style="width: 100%">
                <el-option label="Part Missing" value="Part Missing"></el-option>
                <el-option label="Glue" value="Glue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSaveAdd" class="customer-bun-min">保存</el-button>
        <el-button @click="handleCloseAddDialog" class="customer-bun-min">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 编辑弹窗 -->
    <el-dialog
      title="质量问题 - 编辑"
      :visible.sync="editDialogVisible"
      width="70%"
      top="5vh"
      :close-on-click-modal="false"
      @close="handleCloseEditDialog">

      <el-form :model="editFormData" :rules="editRules" ref="editFormData" label-width="110px" size="mini" class="add-dialog-form">
        <!-- 第一行 -->
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="反馈单号">
              <el-input v-model="editFormData.issueNo" placeholder="自动生成" disabled size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="问题日期" prop="issueDate">
              <el-date-picker
                v-model="editFormData.issueDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                size="mini"
                style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="要求回复日期" prop="requireReplyDate">
              <el-date-picker
                v-model="editFormData.requireReplyDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                size="mini"
                style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-input v-model="editFormData.status" disabled size="mini"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 批次数量、拒收批次数量、投诉接收日期、样品接收日期 -->
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="批次数量">
              <el-input v-model="editFormData.batchQty" placeholder="请输入" size="mini" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="拒收批次数量">
              <el-input v-model="editFormData.rejectBatchQty" placeholder="请输入" size="mini" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="投诉接收日期">
              <el-date-picker
                v-model="editFormData.receiveComplaintDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                size="mini"
                style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="样品接收日期">
              <el-date-picker
                v-model="editFormData.receiveSampleDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                size="mini"
                style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第二行：供应商编码、供应商名称、供应商负责人 -->
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item prop="supplierNo">
              <span slot="label" class="choose-label" @click="getBaseList(520)">供应商编码</span>
              <el-input v-model="editFormData.supplierNo" readonly size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商名称">
              <el-input v-model="editFormData.supplierName" disabled size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <span slot="label" class="choose-label" @click="getBaseList(2016)">供应商负责人</span>
              <el-input v-model="editFormData.supplierResponsible" readonly size="mini"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第三行：Plant、Claim No、Product Category、Part No -->
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="Plant">
              <el-select v-model="editFormData.plant" placeholder="请选择" size="mini" style="width: 100%">
                <el-option label="Mx : Mexico" value="Mx"></el-option>
                <el-option label="IR : Ireland" value="IR"></el-option>
                <el-option label="TN : Tennessee" value="TN"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="Claim No">
              <el-input v-model="editFormData.claimNo" placeholder="请输入" size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="Product Category">
              <el-select v-model="editFormData.productCategory" placeholder="请选择" size="mini" style="width: 100%">
                <el-option label="Metal Pen" value="Metal Pen"></el-option>
                <el-option label="CUP" value="CUP"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <span slot="label" class="choose-label" @click="getBaseList(2017)">Part No</span>
              <el-input v-model="editFormData.partNo" readonly size="mini"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第四行：问题简述、Inspector -->
        <el-row :gutter="10">
          <el-col :span="18">
            <el-form-item label="问题简述" prop="issueSummary">
              <el-input v-model="editFormData.issueSummary" placeholder="请输入问题简述" size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="Inspector">
              <el-input v-model="editFormData.inspector" placeholder="请输入" size="mini"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第五行：问题详细描述 -->
        <el-row :gutter="10">
          <el-col :span="18">
            <el-form-item label="问题详细描述">
              <el-input
                v-model="editFormData.issueDescription"
                type="textarea"
                :rows="4"
                placeholder="请输入问题详细描述"
                size="mini">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第六行：Level、Mode1-3 -->
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="Level">
              <el-input v-model="editFormData.levelNo" placeholder="请输入" size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="Mode 1">
              <el-select v-model="editFormData.mode1" placeholder="请选择" size="mini" style="width: 100%">
                <el-option label="Appearance" value="Appearance"></el-option>
                <el-option label="Function" value="Function"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="Mode 2">
              <el-select v-model="editFormData.mode2" placeholder="请选择" size="mini" style="width: 100%">
                <el-option label="Loose part" value="Loose part"></el-option>
                <el-option label="Others" value="Others"></el-option>
                <el-option label="Contamination" value="Contamination"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="Mode 3">
              <el-select v-model="editFormData.mode3" placeholder="请选择" size="mini" style="width: 100%">
                <el-option label="Part Missing" value="Part Missing"></el-option>
                <el-option label="Glue" value="Glue"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSaveEdit" class="customer-bun-min">保存</el-button>
        <el-button @click="handleCloseEditDialog" class="customer-bun-min">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 回复弹窗 -->
    <el-dialog
      title="质量问题 - 回复"
      :visible.sync="replyDialogVisible"
      width="50%"
      top="10vh"
      :close-on-click-modal="false"
      @close="handleCloseReplyDialog">

      <div class="reply-dialog-info">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <span class="info-label">反馈单号：</span>
              <span class="info-value">{{ replyFormData.issueNo }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="info-label">回复日期：</span>
              <span class="info-value">{{ replyFormData.replyTime }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="info-label">回复人：</span>
              <span class="info-value">{{ replyFormData.replyBy }}</span>
            </div>
          </el-col>
        </el-row>
      </div>

      <el-form :model="replyFormData" :rules="replyRules" ref="replyFormData" label-position="top" size="mini" class="reply-dialog-form">

        <!-- Why Escape 下拉框 -->
        <el-form-item label="Why Escape" prop="whyEscape">
          <el-select v-model="replyFormData.whyEscape" placeholder="请选择流出原因" size="mini" style="width: 30%" clearable>
            <el-option label="AQL" value="AQL"></el-option>
            <el-option label="Transportation" value="Transportation"></el-option>
          </el-select>
        </el-form-item>
        <!-- 原因分析 -->
        <el-form-item label="原因分析" prop="analysis">
          <el-input
            v-model="replyFormData.analysis"
            type="textarea"
            :rows="4"
            placeholder="请输入原因分析"
            size="mini">
          </el-input>
        </el-form-item>

        <!-- 后续措施 -->
        <el-form-item label="后续措施" prop="correctiveAction">
          <el-input
            v-model="replyFormData.correctiveAction"
            type="textarea"
            :rows="4"
            placeholder="请输入后续措施"
            size="mini">
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSaveReply" class="customer-bun-min">保存</el-button>
        <el-button @click="handleCloseReplyDialog" class="customer-bun-min">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 赔偿弹窗 -->
    <el-dialog
      title="质量问题 - 赔偿"
      :visible.sync="compensationDialogVisible"
      width="40%"
      top="10vh"
      :close-on-click-modal="false"
      @close="handleCloseCompensationDialog">

      <el-form :model="compensationFormData" :rules="compensationRules" ref="compensationFormData" label-position="top" size="mini" class="compensation-dialog-form">
        <!-- 反馈单号、索赔信息和被索赔金额 -->
        <el-row :gutter="5">
          <el-col :span="6">
            <el-form-item label="反馈单号">
              <el-input v-model="compensationFormData.issueNo" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="索赔信息">
              <el-checkbox v-model="compensationFormData.isClaimed">是否被索赔</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="被索赔金额" prop="claimAmount">
              <el-input v-model="compensationFormData.claimAmount" placeholder="请输入被索赔金额"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 处置备注 -->
        <el-form-item label="处置备注">
          <el-input
            v-model="compensationFormData.disposalRemark"
            type="textarea"
            :rows="3"
            placeholder="请输入处置备注"
            size="mini">
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSaveCompensation" class="customer-bun-min">保存</el-button>
        <el-button @click="handleCloseCompensationDialog" class="customer-bun-min">关闭</el-button>
      </div>
    </el-dialog>

    <Chooselist ref="baseList" @getBaseData="getBaseData"></Chooselist>
  </div>
</template>

<script>
import { queryQualityIssuePage, saveQualityIssue, deleteQualityIssue as deleteQualityIssueApi, updateQualityIssue, saveReply, saveClaim, closeQualityIssue } from '@/api/quality/qualityIssue.js'
import Chooselist from '@/views/modules/common/Chooselist_eam'
import ComQualityIssueDetail from './com_qualityIssueDetail.vue'
import ComQualityIssueAttachment from './com_qualityIssueAttachment.vue'
import ComQualityIssuePo from './com_qualityIssuePoList.vue'
import excel from '@/utils/excel-util.js'

export default {
  components: {
    Chooselist,
    QualityIssueDetail: ComQualityIssueDetail,
    QualityIssueAttachment: ComQualityIssueAttachment,
    QualityIssuePoList: ComQualityIssuePo
  },
  data () {
    return {
      functionId: this.$route.meta.menuId,
      height: 400,
      detailHeight: 400,
      currentRow: {},
      activeTab: 'detail',
      // 新增弹窗相关数据
      addDialogVisible: false,
      addFormData: {
        supplierResponsible: '',
        partNo: '',
        issueNo: '',
        issueDate: '',
        requireReplyDate: '',
        supplierNo: '',
        supplierName: '',
        plant: '',
        claimNo: '',
        productCategory: '',
        poNo: '',
        batchQty: '',
        rejectBatchQty: '',
        receiveComplaintDate: '',
        receiveSampleDate: '',
        issueCategory: '',
        issueSummary: '',
        issueDescription: '',
        inspector: '',
        levelNo: '',
        mode1: '',
        mode2: '',
        mode3: '',
        status: '已确认'
      },
      addRules: {
        issueDate: [
          { required: true, message: '请选择问题日期', trigger: 'change' }
        ],
        requireReplyDate: [
          { required: true, message: '请选择要求回复日期', trigger: 'change' }
        ],
        supplierNo: [
          { required: true, message: '请选择供应商', trigger: 'change' }
        ],
        issueCategory: [
          { required: true, message: '请选择问题分类', trigger: 'change' }
        ],
        issueSummary: [
          { required: true, message: '请输入问题简述', trigger: 'blur' }
        ]
      },
      // 编辑弹窗相关数据
      editDialogVisible: false,
      editFormData: {
        issueNo: '',
        issueDate: '',
        requireReplyDate: '',
        supplierNo: '',
        supplierName: '',
        plant: '',
        claimNo: '',
        productCategory: '',
        partNo: '',
        poNo: '',
        batchQty: '',
        rejectBatchQty: '',
        receiveComplaintDate: '',
        receiveSampleDate: '',
        issueCategory: '',
        issueSummary: '',
        issueDescription: '',
        inspector: '',
        levelNo: '',
        mode1: '',
        mode2: '',
        mode3: '',
        status: '',
        site: ''
      },
      editRules: {
        issueDate: [
          { required: true, message: '请选择问题日期', trigger: 'change' }
        ],
        requireReplyDate: [
          { required: true, message: '请选择要求回复日期', trigger: 'change' }
        ],
        issueCategory: [
          { required: true, message: '请选择问题分类', trigger: 'change' }
        ],
        issueSummary: [
          { required: true, message: '请输入问题简述', trigger: 'blur' }
        ]
      },
      // 回复弹窗相关数据
      replyDialogVisible: false,
      replyFormData: {
        site: '',
        issueNo: '',
        analysis: '',
        correctiveAction: '',
        whyEscape:'',
        replyBy: '',
        replyTime: ''
      },
      replyRules: {
        analysis: [
          { required: true, message: '请输入原因分析', trigger: 'blur' }
        ],
        correctiveAction: [
          { required: true, message: '请输入后续措施', trigger: 'blur' }
        ]
      },
      // 赔偿弹窗相关数据
      compensationDialogVisible: false,
      compensationFormData: {
        site: '',
        issueNo: '',
        isClaimed: false,
        claimAmount: '',
        disposalRemark: ''
      },
      compensationRules: {
        claimAmount: [
          { required: true, message: '请输入被索赔金额', trigger: 'blur' }
        ]
      },
      tagNo: '',
      searchData: {
        issueNo: '',
        supplierNo: '',
        claimNo:'',
        supplierName: '',
        issueCategory: '',
        status: '',
        issueDate: '',
        plant: '',
        productCategory: '',
        poNo: '',
        partNo: '',
        page: 1,
        limit: 50
      },
      searchType: '',
      pageIndex: 1,
      pageSize: 50,
      totalPage: 0,
      mainDataList: [],
      dataListLoading: false,
      columnArray1: [
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: 'QualityIssueTable1IssueNo',
          tableId: 'QualityIssueTable1',
          tableName: '质量问题',
          columnProp: 'issueNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '反馈单号',
          columnWidth: '120',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: 'QualityIssueTable1IssueDate',
          tableId: 'QualityIssueTable1',
          tableName: '质量问题',
          columnProp: 'issueDate',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '问题日期',
          columnWidth: '120',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: 'QualityIssueTable1SupplierNo',
          tableId: 'QualityIssueTable1',
          tableName: '质量问题',
          columnProp: 'supplierNo',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '供应商编码',
          columnWidth: '120',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: 'QualityIssueTable1SupplierName',
          tableId: 'QualityIssueTable1',
          tableName: '质量问题',
          columnProp: 'supplierName',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '供应商名称',
          columnWidth: '150',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: 'QualityIssueTable1IssueCategory',
          tableId: 'QualityIssueTable1',
          tableName: '质量问题',
          columnProp: 'issueCategory',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '问题分类',
          columnWidth: '120',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: 'QualityIssueTable1IssueSummary',
          tableId: 'QualityIssueTable1',
          tableName: '质量问题',
          columnProp: 'issueSummary',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '问题简述',
          columnWidth: '200',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: 'QualityIssueTable1Status',
          tableId: 'QualityIssueTable1',
          tableName: '质量问题',
          columnProp: 'status',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '状态',
          columnWidth: '100',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: 'QualityIssueTable1CreateBy',
          tableId: 'QualityIssueTable1',
          tableName: '质量问题',
          columnProp: 'createBy',
          headerAlign: 'center',
          align: 'left',
          columnLabel: '录入人',
          columnWidth: '100',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        },
        {
          userId: this.$store.state.user.name,
          functionId: this.functionId,
          serialNumber: 'QualityIssueTable1CreateDate',
          tableId: 'QualityIssueTable1',
          tableName: '质量问题',
          columnProp: 'createDate',
          headerAlign: 'center',
          align: 'center',
          columnLabel: '录入时间',
          columnWidth: '150',
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: false
        }
      ]
    }
  },
  mounted () {
    this.$nextTick(() => {
      // 计算查询区域和分页的高度
      const queryHeight = 220 // 查询条件大约高度
      const paginationHeight = 40 // 分页大约高度
      const availableHeight = window.innerHeight - queryHeight - paginationHeight - 40 // 40为余量

      // 主表格和页签各占一半
      this.height = availableHeight * 0.5
      this.detailHeight = availableHeight * 0.5

      this.getMainData()
    })
  },
  methods: {
    // 获取当前页面的 site 与当前登录用户名，新增/删除/修改统一由前端传给后端
    getCurrentOperator (actionText) {
      const site = this.$store.state.user.site
      const userName = this.$store.state.user.name
      if (!site || !userName) {
        this.$message.error('未获取到当前用户的站点或用户名，请重新登录后再' + actionText)
        return null
      }
      return { site: site, userName: userName }
    },

    // 获取基础数据列表
    getBaseList (val, type) {
      this.tagNo = val
      this.searchType = type || ''
      this.$nextTick(() => {
        let strVal = ''
        let conSql = ''
        if (val === 520) {
          // 供应商编码
          if (this.addDialogVisible) {
            strVal = this.addFormData.supplierNo || ''
          } else if (this.editDialogVisible) {
            strVal = this.editFormData.supplierNo || ''
          } else {
            strVal = this.searchData.supplierNo || ''
          }
          conSql = " and site = '" + this.$store.state.user.site + "'"
        } else if (val === 2016) {
          // 供应商负责人
          if (this.addDialogVisible) {
            strVal = this.addFormData.supplierResponsible || ''
          } else if (this.editDialogVisible) {
            strVal = this.editFormData.supplierResponsible || ''
          }
          conSql = " and username <> '' "
        } else if (val === 2017) {
          // Part No
          if (this.addDialogVisible) {
            strVal = this.addFormData.partNo || ''
          } else if (this.editDialogVisible) {
            strVal = this.editFormData.partNo || ''
          } else {
            strVal = this.searchData.partNo || ''
          }
          conSql = " and part_no <> '' "
        }
        this.$refs.baseList.init(val, strVal, conSql)
      })
    },

    /* 列表方法的回调 */
    getBaseData (val) {
      console.log('ChooseList 返回数据:', val)
      console.log('当前 tagNo:', this.tagNo)

      if (this.tagNo === 520) {
        // SQL返回: supplier_no, supplier_name
        const supplierNoVal = val.supplier_no || ''
        const supplierNameVal = val.supplier_name || ''
        
        if (this.addDialogVisible) {
          this.$set(this.addFormData, 'supplierNo', supplierNoVal)
          this.$set(this.addFormData, 'supplierName', supplierNameVal)
          console.log('供应商编码赋值:', supplierNoVal, '供应商名称赋值:', supplierNameVal)
        } else if (this.editDialogVisible) {
          this.$set(this.editFormData, 'supplierNo', supplierNoVal)
          this.$set(this.editFormData, 'supplierName', supplierNameVal)
          console.log('供应商编码赋值:', supplierNoVal, '供应商名称赋值:', supplierNameVal)
        } else {
          this.$set(this.searchData, 'supplierNo', supplierNoVal)
          console.log('供应商编码赋值:', supplierNoVal)
        }
      }
      // 供应商负责人
      else if (this.tagNo === 2016) {
        const userName = val.user_display || ''
        if (this.addDialogVisible) {
          this.$set(this.addFormData, 'supplierResponsible', userName)
        } else if (this.editDialogVisible) {
          this.$set(this.editFormData, 'supplierResponsible', userName)
        }
      }
      // Part No
      else if (this.tagNo === 2017) {
        const partNo = val.part_no || val.partNo || ''
        if (this.addDialogVisible) {
          this.$set(this.addFormData, 'partNo', partNo)
        } else if (this.editDialogVisible) {
          this.$set(this.editFormData, 'partNo', partNo)
        } else {
          this.$set(this.searchData, 'partNo', partNo)
        }
      }
    },
    // 选择供应商负责人
    selectSupplierResponsible () {
      this.tagNo = 2016

      this.$nextTick(() => {
        this.$refs.baseList.init(
          2016,
          this.addFormData.supplierResponsible || '',
          ''
        )
      })
    },

// 选择 Part No
    selectPartNo () {
      this.tagNo = 2017

      this.$nextTick(() => {
        this.$refs.baseList.init(
          2017,
          this.addFormData.partNo || '',
          ''
        )
      })
    },
    // 查询数据
    getMainData () {
      this.searchData.limit = this.pageSize
      this.searchData.page = this.pageIndex
      this.searchData.site = this.$store.state.user.site
      this.dataListLoading = true

      queryQualityIssuePage(this.searchData).then(({ data }) => {
        if (data.code === 0) {
          this.mainDataList = data.page.list
          this.pageIndex = data.page.currPage
          this.pageSize = data.page.pageSize
          this.totalPage = data.page.totalCount

          this.$nextTick(() => {
            if (this.$refs.mainTable) {
              this.$refs.mainTable.clearSelection()
            }
          })

          // 判断是否有数据
          if (this.mainDataList.length > 0) {
            this.$refs.mainTable.setCurrentRow(this.mainDataList[0])
            this.changeData(this.mainDataList[0])
          } else {
            this.changeData(null)
          }
        }
        this.dataListLoading = false
      }).catch(() => {
        this.dataListLoading = false
      })
    },

    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getMainData()
    },

    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getMainData()
    },

    // 页签点击事件
    handleTabClick (tab) {
      // 每次点击页签都触发对应页签的查询
      if (tab.name === 'detail') {
        // 详情页签
      } else if (tab.name === 'attachment') {
        // 附件页签
        this.$nextTick(() => {
          if (this.$refs.attachmentTab) {
            this.$refs.attachmentTab.loadAttachmentList()
          }
        })
      }else if(tab.name === 'po') {
        this.$nextTick(() => {
          if (this.$refs.qualityIssuePo) {
            this.$refs.qualityIssuePo.loadData()
          }
        })
      }
    },

    // 行点击事件
    changeData (row) {
      this.currentRow = row ? JSON.parse(JSON.stringify(row)) : {}
    },

    // 新增质量问题
    addQualityIssue () {
      this.addDialogVisible = true
      this.resetAddForm()
    },

    // 关闭新增弹窗
    handleCloseAddDialog () {
      this.addDialogVisible = false
      this.resetAddForm()
    },

    // 关闭编辑弹窗
    handleCloseEditDialog () {
      this.editDialogVisible = false
      this.resetEditForm()
    },

    // 重置表单
    resetAddForm () {
      const today = new Date()
      const year = today.getFullYear()
      const month = String(today.getMonth() + 1).padStart(2, '0')
      const day = String(today.getDate()).padStart(2, '0')
      const todayStr = `${year}-${month}-${day}`

      this.addFormData = {
        issueNo: '',
        issueDate: todayStr,
        requireReplyDate: '',
        supplierNo: '',
        supplierName: '',
        supplierResponsible: '',
        plant: '',
        claimNo: '',
        productCategory: '',
        partNo: '',
        poNo: '',
        batchQty: '',
        rejectBatchQty: '',
        receiveComplaintDate: '',
        receiveSampleDate: '',
        issueCategory: '',
        issueSummary: '',
        issueDescription: '',
        inspector: '',
        levelNo: '',
        mode1: '',
        mode2: '',
        mode3: '',
        status: '已确认'
      }
      if (this.$refs.addFormData) {
        this.$refs.addFormData.clearValidate()
      }
    },

    // 重置编辑表单
    resetEditForm () {
      this.editFormData = {
        issueNo: '',
        issueDate: '',
        requireReplyDate: '',
        supplierNo: '',
        supplierName: '',
        plant: '',
        claimNo: '',
        productCategory: '',
        partNo: '',
        poNo: '',
        batchQty: '',
        rejectBatchQty: '',
        receiveComplaintDate: '',
        receiveSampleDate: '',
        issueCategory: '',
        issueSummary: '',
        issueDescription: '',
        inspector: '',
        levelNo: '',
        mode1: '',
        mode2: '',
        mode3: '',
        status: '',
        site: ''
      }
      if (this.$refs.editFormData) {
        this.$refs.editFormData.clearValidate()
      }
    },

    // 选择供应商（仅新增模式）
    selectSupplier () {
      this.tagNo = 520
      this.$nextTick(() => {
        const conSql = " and site = '" + this.$store.state.user.site + "'"
        this.$refs.baseList.init(520, this.addFormData.supplierNo || '', conSql)
      })
    },

    // 保存新增
    handleSaveAdd () {
      this.$refs.addFormData.validate((valid) => {
        if (valid) {
          // 当前页面的 site 与当前用户名
          const operator = this.getCurrentOperator('新增')
          if (!operator) {
            return
          }

          // 构建提交数据
          const submitData = {
            issueDate: this.addFormData.issueDate,
            requireReplyDate: this.addFormData.requireReplyDate,
            supplierNo: this.addFormData.supplierNo,
            supplierName: this.addFormData.supplierName,
            plant: this.addFormData.plant,
            claimNo: this.addFormData.claimNo,
            productCategory: this.addFormData.productCategory,
            partNo: this.addFormData.partNo,
            poNo: this.addFormData.poNo,
            batchQty: this.addFormData.batchQty ? parseFloat(this.addFormData.batchQty) : null,
            rejectBatchQty: this.addFormData.rejectBatchQty ? parseFloat(this.addFormData.rejectBatchQty) : null,
            receiveComplaintDate: this.addFormData.receiveComplaintDate,
            receiveSampleDate: this.addFormData.receiveSampleDate,
            issueCategory: this.addFormData.issueCategory,
            issueSummary: this.addFormData.issueSummary,
            issueDescription: this.addFormData.issueDescription,
            supplierResponsible: this.addFormData.supplierResponsible,
            inspector: this.addFormData.inspector,
            levelNo: this.addFormData.levelNo,
            mode1: this.addFormData.mode1,
            mode2: this.addFormData.mode2,
            mode3: this.addFormData.mode3,
            status: this.addFormData.status,
            site: operator.site,
            createBy: operator.userName,
            updateBy: operator.userName
          }

          console.log('提交数据：', submitData)

          saveQualityIssue(submitData).then(({ data }) => {
            console.log('保存接口返回：', data)
            if (data.code === 0) {
              this.$message.success('保存成功')
              this.handleCloseAddDialog()
              this.getMainData()
            } else {
              this.$message.error(data.msg || '保存失败')
            }
          }).catch((error) => {
            console.error('保存接口错误：', error)
            this.$message.error('保存失败，请稍后重试')
          })
        } else {
          console.log('表单验证失败')
          this.$message.warning('请填写完整的表单信息')
        }
      })
    },

    // 保存编辑
    handleSaveEdit () {
      this.$refs.editFormData.validate((valid) => {
        if (valid) {
          // 当前页面的 site 与当前用户名
          const operator = this.getCurrentOperator('修改')
          if (!operator) {
            return
          }

          // 构建提交数据
          const submitData = {
            site: operator.site,
            updateBy: operator.userName,
            issueNo: this.editFormData.issueNo,
            issueDate: this.editFormData.issueDate,
            requireReplyDate: this.editFormData.requireReplyDate,
            plant: this.editFormData.plant,
            claimNo: this.editFormData.claimNo,
            productCategory: this.editFormData.productCategory,
            partNo: this.editFormData.partNo,
            poNo: this.editFormData.poNo,
            batchQty: this.editFormData.batchQty ? parseFloat(this.editFormData.batchQty) : null,
            rejectBatchQty: this.editFormData.rejectBatchQty ? parseFloat(this.editFormData.rejectBatchQty) : null,
            receiveComplaintDate: this.editFormData.receiveComplaintDate,
            receiveSampleDate: this.editFormData.receiveSampleDate,
            issueCategory: this.editFormData.issueCategory,
            issueSummary: this.editFormData.issueSummary,
            issueDescription: this.editFormData.issueDescription,
            inspector: this.editFormData.inspector,
            levelNo: this.editFormData.levelNo,
            mode1: this.editFormData.mode1,
            mode2: this.editFormData.mode2,
            mode3: this.editFormData.mode3,
            status: this.editFormData.status,
            supplierResponsible: this.editFormData.supplierResponsible
          }

          console.log('更新数据：', submitData)

          updateQualityIssue(submitData).then(({ data }) => {
            console.log('更新接口返回：', data)
            if (data.code === 0) {
              this.$message.success('更新成功')
              this.handleCloseEditDialog()
              this.getMainData()
            } else {
              this.$message.error(data.msg || '更新失败')
            }
          }).catch((error) => {
            console.error('更新接口错误：', error)
            this.$message.error('更新失败，请稍后重试')
          })
        } else {
          console.log('表单验证失败')
          this.$message.warning('请填写完整的表单信息')
        }
      })
    },

    // 编辑质量问题
    editQualityIssue (row) {
      this.editDialogVisible = true
      this.editFormData = {
        ...row,   // 展开所有字段，确保不缺字段
        site: row.site || this.$store.state.user.site,
        issueDate: row.issueDate || '',
        requireReplyDate: row.requireReplyDate || '',
        supplierNo: row.supplierNo || '',
        supplierName: row.supplierName || '',
        supplierResponsible: row.supplierResponsible || '', // 确保有
        plant: row.plant || '',
        claimNo: row.claimNo || '',
        productCategory: row.productCategory || '',
        partNo: row.partNo || '',
        poNo: row.poNo || '',
        batchQty: row.batchQty || '',
        rejectBatchQty: row.rejectBatchQty || '',
        receiveComplaintDate: row.receiveComplaintDate || '',
        receiveSampleDate: row.receiveSampleDate || '',
        issueCategory: row.issueCategory || '',
        issueSummary: row.issueSummary || '',
        issueDescription: row.issueDescription || '',
        inspector: row.inspector || '',
        levelNo: row.levelNo || '',
        mode1: row.mode1 || '',
        mode2: row.mode2 || '',
        mode3: row.mode3 || '',
        status: row.status || ''
      }
      this.$nextTick(() => {
        if (this.$refs.editFormData) {
          this.$refs.editFormData.clearValidate()
        }
      })
    },

    // 删除质量问题
    deleteQualityIssue(row) {
      this.$confirm('确定要删除该质量问题吗？删除后无法恢复！', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        // 当前页面的 site 与当前用户名
        const operator = this.getCurrentOperator('删除')
        if (!operator) {
          return
        }

        // 显示加载中
        const loading = this.$loading({
          lock: true,
          text: '删除中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        // 构建删除参数
        const deleteParams = {
          site: operator.site,
          issueNo: row.issueNo,
          updateBy: operator.userName
        };
        console.log('删除参数：', deleteParams);
        // 调用删除接口
        deleteQualityIssueApi(deleteParams).then(({ data }) => {
          loading.close();

          if (data.code === 0) {
            this.$message.success('删除成功');

            // 判断当前页是否还有数据
            const isLastItem = this.mainDataList.length === 1;

            // 刷新列表
            if (isLastItem && this.pageIndex > 1) {
              // 如果是最后一页的最后一条数据，跳转到上一页
              this.pageIndex--;
            }
            this.getMainData();
          } else {
            this.$message.error(data.msg || '删除失败');
          }
        }).catch((error) => {
          loading.close();
          console.error('删除接口错误：', error);
          this.$message.error('删除失败，请稍后重试');
        });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },

    // 回复质量问题
    replyQualityIssue (row) {
      this.replyDialogVisible = true
      // 自动填充表格中的数据
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const day = String(now.getDate()).padStart(2, '0')
      const currentDate = `${year}-${month}-${day}`

      this.replyFormData = {
        site: row.site || this.$store.state.user.site,
        issueNo: row.issueNo || '',
        analysis: row.analysis || '',           // 从行数据中获取已有值
        correctiveAction: row.correctiveAction || '',  // 从行数据中获取已有值
        whyEscape: row.whyEscape || '',         // 添加这行：从行数据中获取已有值
        replyBy: this.$store.state.user.name || '',
        replyTime: currentDate
      }
      // 清除验证状态
      this.$nextTick(() => {
        if (this.$refs.replyFormData) {
          this.$refs.replyFormData.clearValidate()
        }
      })
    },

    // 关闭回复弹窗
    handleCloseReplyDialog () {
      this.replyDialogVisible = false
      this.resetReplyForm()
    },

    // 重置回复表单
    resetReplyForm () {
      this.replyFormData = {
        site: '',
        issueNo: '',
        analysis: '',
        correctiveAction: '',
        replyBy: '',
        replyTime: ''
      }
      if (this.$refs.replyFormData) {
        this.$refs.replyFormData.clearValidate()
      }
    },

    // 保存回复
    handleSaveReply () {
      this.$refs.replyFormData.validate((valid) => {
        if (valid) {
          // 构建提交数据 - 添加 whyEscape
          const submitData = {
            site: this.replyFormData.site,
            issueNo: this.replyFormData.issueNo,
            analysis: this.replyFormData.analysis,
            correctiveAction: this.replyFormData.correctiveAction,
            whyEscape: this.replyFormData.whyEscape  // 添加这个字段
          }

          console.log('回复数据：', submitData)

          saveReply(submitData).then(({ data }) => {
            console.log('回复接口返回：', data)
            if (data.code === 0) {
              this.$message.success('回复成功')
              this.handleCloseReplyDialog()
              this.getMainData()
            } else {
              this.$message.error(data.msg || '回复失败')
            }
          }).catch((error) => {
            console.error('回复接口错误：', error)
            this.$message.error('回复失败，请稍后重试')
          })
        } else {
          console.log('表单验证失败')
          this.$message.warning('请填写完整的回复信息')
        }
      })
    },

    // 赔偿质量问题
    compensationQualityIssue (row) {
      this.compensationDialogVisible = true
      // 自动填充表格中的数据
      this.compensationFormData = {
        site: row.site || this.$store.state.user.site,
        issueNo: row.issueNo || '',
        isClaimed: row.claimFlag === 'Y' ? true : false,
        claimAmount: row.claimAmount || '',
        disposalRemark: row.disposalRemark || ''
      }
      // 清除验证状态
      this.$nextTick(() => {
        if (this.$refs.compensationFormData) {
          this.$refs.compensationFormData.clearValidate()
        }
      })
    },

    // 关闭赔偿弹窗
    handleCloseCompensationDialog () {
      this.compensationDialogVisible = false
      this.resetCompensationForm()
    },

    // 重置赔偿表单
    resetCompensationForm () {
      this.compensationFormData = {
        site: '',
        issueNo: '',
        isClaimed: false,
        claimAmount: '',
        disposalRemark: ''
      }
      if (this.$refs.compensationFormData) {
        this.$refs.compensationFormData.clearValidate()
      }
    },

    // 保存赔偿
    handleSaveCompensation () {
      this.$refs.compensationFormData.validate((valid) => {
        if (valid) {
          // 构建提交数据 - 将前端的isClaimed转换为后端的claimFlag（Y/N）
          const submitData = {
            site: this.compensationFormData.site,
            issueNo: this.compensationFormData.issueNo,
            claimFlag: this.compensationFormData.isClaimed ? 'Y' : 'N',
            claimAmount: this.compensationFormData.claimAmount ? parseFloat(this.compensationFormData.claimAmount) : null,
            disposalRemark: this.compensationFormData.disposalRemark
          }

          console.log('赔偿数据：', submitData)

          // 调用后端赔偿接口
          saveClaim(submitData).then(({ data }) => {
            if (data.code === 0) {
              this.$message.success('保存成功')
              this.handleCloseCompensationDialog()
              this.getMainData()
            } else {
              this.$message.error(data.msg || '保存失败')
            }
          }).catch((error) => {
            console.error('赔偿接口错误：', error)
            this.$message.error('保存失败，请稍后重试')
          })
        } else {
          console.log('表单验证失败')
          this.$message.warning('请填写完整的赔偿信息')
        }
      })
    },

    // 关闭质量问题
    closeQualityIssueAction (row) {
      this.$confirm('确定要关闭该质量问题吗？关闭后将无法修改！', '提示', {
        confirmButtonText: '确定关闭',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        // 显示加载中
        const loading = this.$loading({
          lock: true,
          text: '关闭中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        // 构建关闭参数
        const closeParams = {
          site: row.site || this.$store.state.user.site,
          issueNo: row.issueNo
        };

        console.log('关闭参数：', closeParams);

        // 调用关闭接口
        closeQualityIssue(closeParams).then(({ data }) => {
          loading.close();

          if (data.code === 0) {
            this.$message.success('关闭成功');
            this.getMainData();
          } else {
            this.$message.error(data.msg || '关闭失败');
          }
        }).catch((error) => {
          loading.close();
          console.error('关闭接口错误：', error);
          this.$message.error('关闭失败，请稍后重试');
        });
      }).catch(() => {
        this.$message.info('已取消关闭');
      });
    },

    // 导出
    exportExcel () {
      console.log('开始导出...')

      // 生成文件名（使用原生 Date）
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const day = String(now.getDate()).padStart(2, '0')
      const hour = String(now.getHours()).padStart(2, '0')
      const minute = String(now.getMinutes()).padStart(2, '0')
      const second = String(now.getSeconds()).padStart(2, '0')
      const exportName = `质量问题${year}${month}${day}${hour}${minute}${second}`

      console.log('导出参数:', this.searchData)

      // 获取当前查询条件
      const exportParams = {
        ...this.searchData,
        limit: -1,  // 导出全部数据
        page: 1
      }

      try {
        excel.exportTable({
          url: '/srm/qualityIssue/queryPage',
          columnMapping: this.columnArray1,
          mergeSetting: [],
          params: exportParams,
          fileName: exportName + '.xlsx',
          rowFetcher: res => {
            console.log('导出数据响应:', res)
            return res.data.page.list
          },
          columnFormatter: [],
          dropColumns: []
        })
        console.log('导出请求已发送')
      } catch (error) {
        console.error('导出失败:', error)
        this.$message.error('导出失败: ' + error.message)
      }
    }
  },
  created () {
    this.getMainData()
  }
}
</script>

<style scoped lang="scss">
.search-form-inline {
  background: #fff;
  padding: 0;
  margin-bottom: 0;
}

.search-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 0;
}

.search-item {
  flex: none;
  margin-bottom: 0;
  margin-right: 12px;
}

/* 统一标签样式：使用 Element UI 默认字体大小（14px），移除自定义颜色 */
.search-item /deep/ .el-form-item__label {
  padding-bottom: 5px;
  line-height: 1;
  height: auto;
}

.search-btn-item {
  flex: none;
  margin-bottom: 0;
  margin-right: 0;
}

.search-item /deep/ .el-form-item__content {
  line-height: normal;
}

.date-range {
  display: flex;
  align-items: center;
}

.split {
  padding: 0 6px;
  color: #606266;
  font-size: 13px;
}

/deep/ .customer-tab {
  overflow: hidden;
  margin-top: 10px !important;
  height: calc(60vh - 100px);
  display: flex;
  flex-direction: column;
}

/deep/ .customer-tab .el-tabs__content {
  padding: 0 !important;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/deep/ .customer-tab .el-tab-pane {
  height: 100%;
  overflow-y: auto;
}

.add-dialog-form /deep/ .el-form-item {
  margin-bottom: 8px;
}

.add-dialog-form /deep/ .el-form-item__label {
  text-align: left;
  float: none;
  display: block;
  padding: 0 0 3px 0;
  line-height: 1;
  font-size: 12px;
}

.add-dialog-form /deep/ .el-form-item__content {
  margin-left: 0 !important;
}

.dialog-footer {
  text-align: center;
}

/* 回复弹窗样式 - 取消灰色背景 */
.reply-dialog-info {
  margin-bottom: 20px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.reply-dialog-info .info-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.reply-dialog-info .info-item:last-child {
  margin-bottom: 0;
}

.reply-dialog-info .info-label {
  font-size: 13px;
  color: #606266;
  font-weight: 500;
  min-width: 80px;
}

.reply-dialog-info .info-value {
  font-size: 13px;
  color: #303133;
  flex: 1;
}

/* 赔偿弹窗样式 */
.compensation-dialog-info {
  margin-bottom: 20px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.compensation-dialog-info .info-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.compensation-dialog-info .info-item:last-child {
  margin-bottom: 0;
}

.compensation-dialog-info .info-label {
  font-size: 13px;
  color: #606266;
  font-weight: 500;
  min-width: 80px;
}

.compensation-dialog-info .info-value {
  font-size: 13px;
  color: #303133;
  flex: 1;
}

.compensation-dialog-form /deep/ .el-form-item {
  margin-bottom: 15px;
}

.compensation-dialog-form /deep/ .el-form-item__label {
  font-size: 13px;
  color: #606266;
  font-weight: 500;
  padding-bottom: 5px;
  line-height: 1;
  height: auto;
}

.compensation-dialog-form /deep/ .el-form-item__content {
  line-height: normal;
}
.click-label {
  color: #2ec7c9;
  cursor: pointer;
  font-weight: 500;
}
.click-label:hover {
  text-decoration: underline;
}

.choose-label {
  color: #2ec7c9;
  cursor: pointer;
  font-weight: 500;
}

.choose-label:hover {
  text-decoration: underline;
}

/* 新增和编辑弹窗中的日期选择器图标样式修复 */
.add-dialog-form /deep/ .el-date-editor.el-input {
  width: 100%;
}

.add-dialog-form /deep/ .el-date-editor .el-input__inner {
  padding-left: 35px !important;
}

.add-dialog-form /deep/ .el-date-editor .el-input__prefix {
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.add-dialog-form /deep/ .el-date-editor .el-input__icon {
  line-height: 28px;
  height: 28px;
  font-size: 14px;
}
</style>