You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

2014 lines
67 KiB

<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>