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.
1228 lines
38 KiB
1228 lines
38 KiB
<template>
|
|
<div class="customer-css">
|
|
<!-- 查询条件 -->
|
|
<el-form :inline="true" label-position="top" class="search-form-inline">
|
|
<div class="search-row">
|
|
<el-form-item label="供应商编码" class="search-item">
|
|
<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: 200px" @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.statusDb" clearable placeholder="全部" style="width: 100%">
|
|
<el-option label="全部" value="" />
|
|
<el-option label="已确认" value="Confirmed" />
|
|
<el-option label="已分析" value="Analyzed" />
|
|
<el-option label="已关闭" value="Closed" />
|
|
<el-option label="已取消" value="Cancelled" />
|
|
</el-select>
|
|
</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="180" label="操作">
|
|
<template slot-scope="scope">
|
|
<template v-if="scope.row.status !== '已回复'">
|
|
<a class="customer-a" @click="editQualityIssue(scope.row)">编辑 |</a>
|
|
<a class="customer-a" @click="deleteQualityIssue(scope.row)">删除 </a>
|
|
<a class="customer-a" @click="replyQualityIssue(scope.row)">| 回复</a>
|
|
</template>
|
|
</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="margin-top: 0px; width: 99%;" @tab-click="handleTabClick" class="customer-tab" type="border-card">
|
|
<!-- 详情 -->
|
|
<el-tab-pane label="详情" name="detail">
|
|
<quality-issue-detail :detail-data="currentRow" />
|
|
</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="45%"
|
|
top="10vh"
|
|
: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="8">
|
|
<el-form-item label="反馈单号">
|
|
<el-input v-model="addFormData.issueNo" placeholder="自动生成" disabled size="mini"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<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="8">
|
|
<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-row>
|
|
|
|
<!-- 第二行 -->
|
|
<el-row :gutter="10">
|
|
<el-col :span="8">
|
|
<el-form-item label="供应商编码" prop="supplierNo">
|
|
<el-input v-model="addFormData.supplierNo" placeholder="请选择" readonly @click.native="selectSupplier" size="mini">
|
|
<i slot="suffix" class="el-icon-search" style="cursor: pointer;"></i>
|
|
</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-row>
|
|
|
|
<!-- 第三行 -->
|
|
<el-row :gutter="10">
|
|
<el-col :span="8">
|
|
<el-form-item label="问题分类" prop="issueCategory">
|
|
<el-select v-model="addFormData.issueCategory" placeholder="请选择" size="mini" style="width: 100%">
|
|
<el-option label="产品外观" value="产品外观"></el-option>
|
|
<el-option label="产品性能" value="产品性能"></el-option>
|
|
<el-option label="尺寸不符" value="尺寸不符"></el-option>
|
|
<el-option label="材质问题" value="材质问题"></el-option>
|
|
<el-option label="包装破损" value="包装破损"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 第四行 -->
|
|
<el-row :gutter="10">
|
|
<el-col :span="24">
|
|
<el-form-item label="问题简述" prop="issueSummary">
|
|
<el-input v-model="addFormData.issueSummary" placeholder="请输入问题简述" size="mini"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 第五行 -->
|
|
<el-row :gutter="10">
|
|
<el-col :span="24">
|
|
<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-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="45%"
|
|
top="10vh"
|
|
: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="8">
|
|
<el-form-item label="反馈单号">
|
|
<el-input v-model="editFormData.issueNo" placeholder="自动生成" disabled size="mini"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<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="8">
|
|
<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-row>
|
|
|
|
<!-- 第二行 -->
|
|
<el-row :gutter="10">
|
|
<el-col :span="8">
|
|
<el-form-item label="供应商编码">
|
|
<el-input v-model="editFormData.supplierNo" disabled 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-row>
|
|
|
|
<!-- 第三行 -->
|
|
<el-row :gutter="10">
|
|
<el-col :span="8">
|
|
<el-form-item label="问题分类" prop="issueCategory">
|
|
<el-select v-model="editFormData.issueCategory" placeholder="请选择" size="mini" style="width: 100%">
|
|
<el-option label="产品外观" value="产品外观"></el-option>
|
|
<el-option label="产品性能" value="产品性能"></el-option>
|
|
<el-option label="尺寸不符" value="尺寸不符"></el-option>
|
|
<el-option label="材质问题" value="材质问题"></el-option>
|
|
<el-option label="包装破损" value="包装破损"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 第四行 -->
|
|
<el-row :gutter="10">
|
|
<el-col :span="24">
|
|
<el-form-item label="问题简述" prop="issueSummary">
|
|
<el-input v-model="editFormData.issueSummary" placeholder="请输入问题简述" size="mini"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 第五行 -->
|
|
<el-row :gutter="10">
|
|
<el-col :span="24">
|
|
<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>
|
|
</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">
|
|
<!-- 原因分析 -->
|
|
<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>
|
|
|
|
<Chooselist ref="baseList" @getBaseData="getBaseData"></Chooselist>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { queryQualityIssuePage, saveQualityIssue,deleteQualityIssue,updateQualityIssue, saveReply } 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 excel from '@/utils/excel-util.js'
|
|
|
|
export default {
|
|
components: {
|
|
Chooselist,
|
|
QualityIssueDetail: ComQualityIssueDetail,
|
|
QualityIssueAttachment: ComQualityIssueAttachment
|
|
},
|
|
data () {
|
|
return {
|
|
functionId: this.$route.meta.menuId,
|
|
height: 400,
|
|
detailHeight: 400,
|
|
currentRow: {},
|
|
activeTab: 'detail',
|
|
// 新增弹窗相关数据
|
|
addDialogVisible: false,
|
|
addFormData: {
|
|
issueNo: '',
|
|
issueDate: '',
|
|
requireReplyDate: '',
|
|
supplierNo: '',
|
|
supplierName: '',
|
|
issueCategory: '',
|
|
issueSummary: '',
|
|
issueDescription: ''
|
|
},
|
|
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: '',
|
|
issueCategory: '',
|
|
issueSummary: '',
|
|
issueDescription: '',
|
|
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: '',
|
|
replyBy: '',
|
|
replyTime: ''
|
|
},
|
|
replyRules: {
|
|
analysis: [
|
|
{ required: true, message: '请输入原因分析', trigger: 'blur' }
|
|
],
|
|
correctiveAction: [
|
|
{ required: true, message: '请输入后续措施', trigger: 'blur' }
|
|
]
|
|
},
|
|
tagNo: '',
|
|
searchData: {
|
|
issueNo: '',
|
|
supplierNo: '',
|
|
supplierName: '',
|
|
issueCategory: '',
|
|
statusDb: '',
|
|
issueDate: '',
|
|
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(() => {
|
|
this.height = (window.innerHeight - 220) / 2
|
|
this.detailHeight = (window.innerHeight - 220) / 2
|
|
this.getMainData()
|
|
})
|
|
},
|
|
methods: {
|
|
// 获取基础数据列表
|
|
getBaseList (val, type) {
|
|
this.tagNo = val
|
|
this.searchType = type || ''
|
|
this.$nextTick(() => {
|
|
let strVal = ''
|
|
let conSql = ''
|
|
if (val === 1100) {
|
|
strVal = this.addFormData.supplierNo || ''
|
|
conSql = " and site = '" + this.$store.state.user.site + "'"
|
|
}
|
|
this.$refs.baseList.init(val, strVal, conSql)
|
|
})
|
|
},
|
|
|
|
/* 列表方法的回调 */
|
|
getBaseData (val) {
|
|
if (this.tagNo === 1100) {
|
|
// 新增弹窗：使用下划线命名的字段，使用$set确保响应式
|
|
this.$set(this.addFormData, 'supplierNo', val.supplier_no || '')
|
|
this.$set(this.addFormData, 'supplierName', val.supplier_name || '')
|
|
}
|
|
},
|
|
// 查询数据
|
|
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()
|
|
}
|
|
})
|
|
}
|
|
},
|
|
|
|
// 行点击事件
|
|
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: '',
|
|
issueCategory: '',
|
|
issueSummary: '',
|
|
issueDescription: ''
|
|
}
|
|
if (this.$refs.addFormData) {
|
|
this.$refs.addFormData.clearValidate()
|
|
}
|
|
},
|
|
|
|
// 重置编辑表单
|
|
resetEditForm () {
|
|
this.editFormData = {
|
|
issueNo: '',
|
|
issueDate: '',
|
|
requireReplyDate: '',
|
|
supplierNo: '',
|
|
supplierName: '',
|
|
issueCategory: '',
|
|
issueSummary: '',
|
|
issueDescription: '',
|
|
site: ''
|
|
}
|
|
if (this.$refs.currentFormData) {
|
|
this.$refs.currentFormData.clearValidate()
|
|
}
|
|
},
|
|
|
|
// 选择供应商（仅新增模式）
|
|
selectSupplier () {
|
|
this.tagNo = 1100
|
|
this.$nextTick(() => {
|
|
const conSql = " and site = '" + this.$store.state.user.site + "'"
|
|
this.$refs.baseList.init(1100, this.addFormData.supplierNo || '', conSql)
|
|
})
|
|
},
|
|
|
|
// 保存新增
|
|
handleSaveAdd () {
|
|
this.$refs.addFormData.validate((valid) => {
|
|
if (valid) {
|
|
// 构建提交数据
|
|
const submitData = {
|
|
issueDate: this.addFormData.issueDate,
|
|
requireReplyDate: this.addFormData.requireReplyDate,
|
|
supplierNo: this.addFormData.supplierNo,
|
|
supplierName: this.addFormData.supplierName,
|
|
issueCategory: this.addFormData.issueCategory,
|
|
issueSummary: this.addFormData.issueSummary,
|
|
issueDescription: this.addFormData.issueDescription,
|
|
site: this.$store.state.user.site
|
|
}
|
|
|
|
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) {
|
|
// 构建提交数据
|
|
const submitData = {
|
|
site: this.editFormData.site,
|
|
issueNo: this.editFormData.issueNo,
|
|
issueDate: this.editFormData.issueDate,
|
|
requireReplyDate: this.editFormData.requireReplyDate,
|
|
issueCategory: this.editFormData.issueCategory,
|
|
issueSummary: this.editFormData.issueSummary,
|
|
issueDescription: this.editFormData.issueDescription
|
|
}
|
|
|
|
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 = {
|
|
issueNo: row.issueNo || '',
|
|
issueDate: row.issueDate || '',
|
|
requireReplyDate: row.requireReplyDate || '',
|
|
supplierNo: row.supplierNo || '',
|
|
supplierName: row.supplierName || '',
|
|
issueCategory: row.issueCategory || '',
|
|
issueSummary: row.issueSummary || '',
|
|
issueDescription: row.issueDescription || '',
|
|
site: row.site || this.$store.state.user.site
|
|
}
|
|
// 清除验证状态
|
|
this.$nextTick(() => {
|
|
if (this.$refs.editFormData) {
|
|
this.$refs.editFormData.clearValidate()
|
|
}
|
|
})
|
|
},
|
|
|
|
// 删除质量问题
|
|
deleteQualityIssue(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 deleteParams = {
|
|
site: row.site || this.$store.state.user.site,
|
|
issueNo: row.issueNo
|
|
};
|
|
console.log('删除参数：', deleteParams);
|
|
// 调用删除接口
|
|
deleteQualityIssue(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: '',
|
|
correctiveAction: '',
|
|
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) {
|
|
// 构建提交数据
|
|
const submitData = {
|
|
site: this.replyFormData.site,
|
|
issueNo: this.replyFormData.issueNo,
|
|
analysis: this.replyFormData.analysis,
|
|
correctiveAction: this.replyFormData.correctiveAction
|
|
}
|
|
|
|
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('请填写完整的回复信息')
|
|
}
|
|
})
|
|
},
|
|
|
|
// 导出
|
|
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;
|
|
}
|
|
|
|
.search-row {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
flex-wrap: nowrap;
|
|
gap: 15px;
|
|
}
|
|
|
|
.search-row:last-child {
|
|
margin-top: -10px;
|
|
}
|
|
|
|
.search-item {
|
|
flex: none;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.search-btn-item {
|
|
flex: none;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.search-btn-item /deep/ .el-form-item__content {
|
|
line-height: normal;
|
|
}
|
|
|
|
.search-item /deep/ .el-form-item__label {
|
|
font-size: 13px;
|
|
color: #606266;
|
|
padding-bottom: 5px;
|
|
line-height: 1;
|
|
height: auto;
|
|
}
|
|
|
|
.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 .el-tabs__content {
|
|
padding: 5px !important;
|
|
}
|
|
|
|
.add-dialog-form /deep/ .el-form-item {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.add-dialog-form /deep/ .el-form-item__label {
|
|
text-align: left;
|
|
float: none;
|
|
display: block;
|
|
padding: 0 0 5px 0;
|
|
line-height: 1;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.add-dialog-form /deep/ .el-form-item__content {
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
.dialog-footer {
|
|
text-align: center;
|
|
}
|
|
|
|
/* 回复弹窗样式 */
|
|
.reply-dialog-info {
|
|
margin-bottom: 20px;
|
|
padding: 15px;
|
|
background-color: #f5f7fa;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.reply-dialog-form /deep/ .el-form-item {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.reply-dialog-form /deep/ .el-form-item__label {
|
|
font-size: 13px;
|
|
color: #606266;
|
|
font-weight: 500;
|
|
padding-bottom: 5px;
|
|
line-height: 1;
|
|
height: auto;
|
|
}
|
|
|
|
.reply-dialog-form /deep/ .el-form-item__content {
|
|
line-height: normal;
|
|
}
|
|
|
|
</style>
|