|
|
<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 style="cursor: pointer" slot="label" @click="getBaseList(1100)"><a href="#">供应商编码</a></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: 200px" @keyup.enter.native="getMainData"/> </el-form-item> <el-form-item label="申请日期" class="search-item"> <div class="date-range"> <el-date-picker v-model="searchData.requestDateStart" type="date" value-format="yyyy-MM-dd" placeholder="开始" style="width: 100px"/> <span class="split">-</span> <el-date-picker v-model="searchData.requestDateEnd" type="date" value-format="yyyy-MM-dd" placeholder="结束" style="width: 100px"/> </div> </el-form-item> <el-form-item label="状态" class="search-item"> <el-select v-model="searchData.status" clearable placeholder="全部" disabled style="width: 100%"> <el-option label="待审核" value="Confirmed" /> </el-select> </el-form-item> </div>
<div class="search-row"> <el-form-item label="申请单号" class="search-item"> <el-input v-model="searchData.requestNo" style="width: 120px" @keyup.enter.native="getMainData"/> </el-form-item> <el-form-item class="search-item"> <span style="cursor: pointer" slot="label" @click="getBaseList(2016, 'createBy')"><a href="#">申请人员</a></span> <el-input v-model="searchData.createBy" style="width: 120px" @keyup.enter.native="getMainData"/> </el-form-item> <el-form-item label="建议验货日期" class="search-item"> <div class="date-range"> <el-date-picker v-model="searchData.needInspectDateStart" type="date" value-format="yyyy-MM-dd" placeholder="开始" style="width: 100px"/> <span class="split">-</span> <el-date-picker v-model="searchData.needInspectDateEnd" type="date" value-format="yyyy-MM-dd" placeholder="结束" style="width: 100px"/> </div> </el-form-item> <el-form-item label=" " class="search-item search-btn-item"> <el-button type="primary" @click="getMainData" style="">查询</el-button> </el-form-item> </div> </el-form>
<Chooselist ref="baseList" @getBaseData="getBaseData"></Chooselist>
<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="150" label="操作"> <template slot-scope="scope"> <el-link v-if="scope.row.status === '已确认' || scope.row.statusDb === 'Confirmed'" style="cursor: pointer; color: #409EFF; margin-right: 10px;" @click="auditInspection(scope.row)">审核</el-link> <span v-if="scope.row.status === '已审核' || scope.row.statusDb === 'Audited'" style="color: #909399;">已审核</span> </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="base"> <inspection-request-detail :detail-data="currentRow" /> </el-tab-pane> <!-- 验货明细 --> <el-tab-pane label="验货明细" name="detail"> <inspection-request-detail-tab ref="inspectionDetailTab" :detail-data="currentRow" :table-height="detailHeight" /> </el-tab-pane> <!-- 验货关联PO明细 --> <el-tab-pane label="验货关联PO明细" name="poDetail"> <inspection-request-po-detail-tab ref="poDetailTab" :detail-data="currentRow" :table-height="detailHeight" /> </el-tab-pane> <!-- 验货结果 --> <el-tab-pane label="验货结果" name="result"> <inspection-result-tab ref="resultTab" :detail-data="currentRow" :table-height="detailHeight" /> </el-tab-pane> </el-tabs> </div></template>
<script>import { searchInspectionRequestHeaderList, auditInspectionRequest } from '@/api/inspection/inspectionRequestHeader.js'import Chooselist from '@/views/modules/common/Chooselist_eam'import ComInspectionRequestDetail from './com_inspectionRequestDetail.vue'import ComInspectionRequestDetailTab from './com_inspectionRequestDetailTab.vue'import ComInspectionRequestPoDetailTab from './com_inspectionRequestPoDetailTab.vue'import ComInspectionResultTab from './com_inspectionResultTab.vue'
export default { components: { Chooselist, InspectionRequestDetail: ComInspectionRequestDetail, InspectionRequestDetailTab: ComInspectionRequestDetailTab, InspectionRequestPoDetailTab: ComInspectionRequestPoDetailTab, InspectionResultTab: ComInspectionResultTab }, data () { return { functionId: this.$route.meta.menuId, height: 400, detailHeight: 400, currentRow: {}, tagNo: '', searchType: '', activeTab: 'base', searchData: { requestNo: '', supplierNo: '', supplierName: '', status: 'Confirmed', // 默认只查询已确认的
qcOperator: '', createBy: '', requestDateStart: '', requestDateEnd: '', needInspectDateStart: '', needInspectDateEnd: '', planStartDate: '', planEndDate: '', page: 1, limit: 50 }, pageIndex: 1, pageSize: 50, totalPage: 0, mainDataList: [], dataListLoading: false, columnArray1: [ { userId: this.$store.state.user.name, functionId: this.functionId, serialNumber: 'InspectionAuditTable1RequestNo', tableId: 'InspectionAuditTable1', tableName: '验货申请审核', columnProp: 'requestNo', 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: 'InspectionAuditTable1RequestDate', tableId: 'InspectionAuditTable1', tableName: '验货申请审核', columnProp: 'requestDate', 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: 'InspectionAuditTable1SupplierNo', tableId: 'InspectionAuditTable1', 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: 'InspectionAuditTable1SupplierName', tableId: 'InspectionAuditTable1', 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: 'InspectionAuditTable1CreateBy', tableId: 'InspectionAuditTable1', 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: 'InspectionAuditTable1NeedInspectDate', tableId: 'InspectionAuditTable1', tableName: '验货申请审核', columnProp: 'needInspectDate', 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: 'InspectionAuditTable1InspectAddress', tableId: 'InspectionAuditTable1', tableName: '验货申请审核', columnProp: 'inspectAddress', 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: 'InspectionAuditTable1Contact', tableId: 'InspectionAuditTable1', tableName: '验货申请审核', columnProp: 'inspectContract', 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: 'InspectionAuditTable1Remark', tableId: 'InspectionAuditTable1', tableName: '验货申请审核', columnProp: 'remark', 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: 'InspectionAuditTable1Status', tableId: 'InspectionAuditTable1', 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: 'InspectionAuditTable1PlanStartDate', tableId: 'InspectionAuditTable1', tableName: '验货申请审核', columnProp: 'planStartDate', 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: 'InspectionAuditTable1QcOperator', tableId: 'InspectionAuditTable1', tableName: '验货申请审核', columnProp: 'qcOperator', headerAlign: 'center', align: 'left', columnLabel: 'QC人员', columnWidth: '100', 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.searchData.supplierNo || '' conSql = " and site = '" + this.$store.state.user.site + "'" } if (val === 2016) { strVal = type === 'createBy' ? (this.searchData.createBy || '') : '' } this.$refs.baseList.init(val, strVal, conSql) }) },
/* 列表方法的回调 */ getBaseData (val) { if (this.tagNo === 1100) { this.searchData.supplierNo = val.supplier_no || '' this.searchData.supplierName = val.supplier_name || '' } if (this.tagNo === 2016) { if (this.searchType === 'createBy') { this.searchData.createBy = val.username || val.user_display || val.name } } },
// 查询数据
getMainData () { this.searchData.limit = this.pageSize this.searchData.page = this.pageIndex this.searchData.status = 'Confirmed' // 强制只查询已确认的
this.dataListLoading = true
searchInspectionRequestHeaderList(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') { this.$nextTick(() => { if (this.$refs.inspectionDetailTab) { this.$refs.inspectionDetailTab.loadDetailList() } }) } else if (tab.name === 'poDetail') { this.$nextTick(() => { if (this.$refs.poDetailTab) { this.$refs.poDetailTab.loadDetailList() } }) } else if (tab.name === 'result') { this.$nextTick(() => { if (this.$refs.resultTab) { this.$refs.resultTab.loadDetailList() } }) } },
// 行点击事件
changeData (row) { this.currentRow = row ? JSON.parse(JSON.stringify(row)) : {} },
// 审核验货申请
auditInspection (row) { this.$confirm('确定要审核该验货申请吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { auditInspectionRequest(row.requestNo).then(({ data }) => { if (data.code === 0) { this.$message.success('审核成功') this.getMainData() } else { this.$message.error(data.msg || '审核失败') } }).catch((error) => { console.error('审核接口错误：', error) this.$message.error('审核失败，请稍后重试') }) }).catch(() => { this.$message.info('已取消审核') }) } }, 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），不再覆盖为13px */.search-item /deep/ .el-form-item__label { padding-bottom: 0; line-height: 1.2; /* 删除 color 和 font-size 覆盖，保持默认 */}
.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 .el-tabs__content { padding: 5px !important;}</style>
<!-- 全局样式 - 仅对有 modified-request-row 类的行生效 --><style lang="scss">.el-table__body tr.modified-request-row > td { background-color: #ffe6e6 !important; color: #333333 !important;}</style>
|
