Browse Source
feat(inspection): 添加可点击查询标签并新增PO订单查询功能
feat(inspection): 添加可点击查询标签并新增PO订单查询功能
- 在检验模块多个页面添加供应商编码和申请人员的可点击标签功能 - 实现点击标签调用getBaseList方法进行基础数据查询 - 新增PO订单查询页面(poOrder_search.vue),包含完整的查询、分页和导出功能 - 优化检验计划列表中的QC人员和申请单号查询组件 - 添加申请单号选择弹窗功能,支持双击选择和搜索过滤 - 完善费用列表中的申请人选择逻辑,支持不同字段的目标赋值master
6 changed files with 661 additions and 27 deletions
-
6src/views/modules/inspection/inspectionPendingList.vue
-
6src/views/modules/inspection/inspectionRequestAudit.vue
-
25src/views/modules/inspection/inspectionRequestList.vue
-
77src/views/modules/inspection/inspectionScheduleList.vue
-
27src/views/modules/inspection/srmFeeList.vue
-
543src/views/modules/order/poOrder_search.vue
@ -0,0 +1,543 @@ |
|||||
|
<template> |
||||
|
<div class="mod-config"> |
||||
|
<!-- 查询条件 --> |
||||
|
<el-form :inline="true" label-position="top" :model="searchData"> |
||||
|
<el-form-item label="Customer"> |
||||
|
<el-input v-model="searchData.customer" clearable style="width: 120px" @keyup.enter.native="getDataList"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="供应商名称"> |
||||
|
<el-input v-model="searchData.supplierName" clearable style="width: 140px" @keyup.enter.native="getDataList"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="物料编号"> |
||||
|
<el-input v-model="searchData.partNo" clearable style="width: 120px" @keyup.enter.native="getDataList"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="Buyer"> |
||||
|
<el-input v-model="searchData.buyer" clearable style="width: 120px" @keyup.enter.native="getDataList"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="PO No"> |
||||
|
<el-input v-model="searchData.poNo" clearable style="width: 140px" @keyup.enter.native="getDataList"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="SKU"> |
||||
|
<el-input v-model="searchData.sku" clearable style="width: 120px" @keyup.enter.native="getDataList"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="Status"> |
||||
|
<el-select v-model="searchData.status" placeholder="请选择" style="width:100px" clearable> |
||||
|
<el-option label="全部" value=""></el-option> |
||||
|
<el-option label="已下达" value="已下达"></el-option> |
||||
|
<el-option label="已取消" value="已取消"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<el-form :inline="true" label-position="top" style="margin-top:10px"> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="getDataList">查询</el-button> |
||||
|
<el-button type="primary" @click="exportExcel" style="margin-left: 2px">导出</el-button> |
||||
|
<el-button @click="resetSearch">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<!-- 数据表格 --> |
||||
|
<el-table |
||||
|
ref="poTable" |
||||
|
:height="height" |
||||
|
:data="dataList" |
||||
|
border |
||||
|
v-loading="loading" |
||||
|
style="width: 100%;"> |
||||
|
<el-table-column |
||||
|
v-for="(item, index) in visibleColumns" |
||||
|
:key="item.serialNumber || 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>{{ scope.row[item.columnProp] }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<!-- 分页 --> |
||||
|
<el-pagination |
||||
|
@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> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { searchPoDetailPage } from '@/api/order/poOrder.js' |
||||
|
import excel from '@/utils/excel-util.js' |
||||
|
|
||||
|
export default { |
||||
|
name: 'PoOrderQuery', |
||||
|
data() { |
||||
|
return { |
||||
|
loading: false, |
||||
|
exportLoading: false, |
||||
|
height: 400, |
||||
|
pageIndex: 1, |
||||
|
pageSize: 20, |
||||
|
totalPage: 0, |
||||
|
dataList: [], |
||||
|
searchData: { |
||||
|
site: this.$store.state.user.site, |
||||
|
customer: '', |
||||
|
buyer: '', |
||||
|
poNo: '', |
||||
|
sku: '', |
||||
|
status: '', |
||||
|
supplierName: '', |
||||
|
partNo: '', |
||||
|
feeDateStart: '', |
||||
|
feeDateEnd: '' |
||||
|
}, |
||||
|
// 列配置(与原始页面保持一致,但隐藏编辑相关列) |
||||
|
columnList: [ |
||||
|
{ |
||||
|
columnProp: 'customer', |
||||
|
columnLabel: 'Customer', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'buyer', |
||||
|
columnLabel: 'Buyer', |
||||
|
align: 'center', |
||||
|
columnWidth: 90, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'supplierName', |
||||
|
columnLabel: 'Vendor Name', |
||||
|
align: 'center', |
||||
|
columnWidth: 120, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'shortOffice', |
||||
|
columnLabel: 'V_Short_Office', |
||||
|
align: 'center', |
||||
|
columnWidth: 110, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'shortNpc', |
||||
|
columnLabel: 'V_Short_NPC', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'poNo', |
||||
|
columnLabel: 'PO_No', |
||||
|
align: 'center', |
||||
|
columnWidth: 120, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'partNo', |
||||
|
columnLabel: 'Item', |
||||
|
align: 'center', |
||||
|
columnWidth: 90, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'category', |
||||
|
columnLabel: 'Category', |
||||
|
align: 'center', |
||||
|
columnWidth: 90, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'sku', |
||||
|
columnLabel: 'SKU', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'price', |
||||
|
columnLabel: 'Unit Price', |
||||
|
align: 'center', |
||||
|
columnWidth: 90, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'qty', |
||||
|
columnLabel: 'PO Qty', |
||||
|
align: 'center', |
||||
|
columnWidth: 80, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'value', |
||||
|
columnLabel: 'PO Value', |
||||
|
align: 'center', |
||||
|
columnWidth: 90, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'shipQty', |
||||
|
columnLabel: 'A-Qty', |
||||
|
align: 'center', |
||||
|
columnWidth: 80, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'sumPrice', |
||||
|
columnLabel: 'A-Value', |
||||
|
align: 'center', |
||||
|
columnWidth: 90, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'departure', |
||||
|
columnLabel: 'Departure Port', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'destination', |
||||
|
columnLabel: 'Destination Port', |
||||
|
align: 'center', |
||||
|
columnWidth: 110, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'shipVia', |
||||
|
columnLabel: 'Method', |
||||
|
align: 'center', |
||||
|
columnWidth: 90, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'orderDate', |
||||
|
columnLabel: 'Buyer Release Date', |
||||
|
align: 'center', |
||||
|
columnWidth: 130, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'enquiry', |
||||
|
columnLabel: 'Planner Release Date', |
||||
|
align: 'center', |
||||
|
columnWidth: 140, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'status', |
||||
|
columnLabel: 'Status', |
||||
|
align: 'center', |
||||
|
columnWidth: 80, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'confirmed', |
||||
|
columnLabel: 'PI Confirmed Date', |
||||
|
align: 'center', |
||||
|
columnWidth: 120, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'wantReceiveDate', |
||||
|
columnLabel: 'Original Arrival Date', |
||||
|
align: 'center', |
||||
|
columnWidth: 130, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'narrival', |
||||
|
columnLabel: 'Final Confirmed Arrival Date', |
||||
|
align: 'center', |
||||
|
columnWidth: 110, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'crd', |
||||
|
columnLabel: 'PI Confirmed CRD', |
||||
|
align: 'center', |
||||
|
columnWidth: 120, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'inspection', |
||||
|
columnLabel: 'Inspection Date', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'realCrd', |
||||
|
columnLabel: 'Actual Completion Date', |
||||
|
align: 'center', |
||||
|
columnWidth: 150, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'eta', |
||||
|
columnLabel: 'ETA', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'flexid', |
||||
|
columnLabel: 'Flexport Id', |
||||
|
align: 'center', |
||||
|
columnWidth: 90, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'obd', |
||||
|
columnLabel: 'On Board Date', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'docSent', |
||||
|
columnLabel: 'Doc Sent', |
||||
|
align: 'center', |
||||
|
columnWidth: 90, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'telexRelease', |
||||
|
columnLabel: 'Telex Release', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'advancePayment', |
||||
|
columnLabel: 'Advance Payment', |
||||
|
align: 'center', |
||||
|
columnWidth: 120, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'advancePaid', |
||||
|
columnLabel: 'Advanc Paid', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'createTime', |
||||
|
columnLabel: 'Create Date', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'planner', |
||||
|
columnLabel: 'M-Planner', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'edit', |
||||
|
columnLabel: 'Edit Date', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'endPlanner', |
||||
|
columnLabel: 'Last Editor', |
||||
|
align: 'center', |
||||
|
columnWidth: 100, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'remarkDelay', |
||||
|
columnLabel: 'Remark Delay', |
||||
|
align: 'center', |
||||
|
columnWidth: 110, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
}, |
||||
|
{ |
||||
|
columnProp: 'remark', |
||||
|
columnLabel: 'Comments', |
||||
|
align: 'center', |
||||
|
columnWidth: 140, |
||||
|
showOverflowTooltip: true, |
||||
|
headerAlign: 'center' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
visibleColumns() { |
||||
|
return this.columnList.filter(c => !c.columnHidden) |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getDataList() |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.height = window.innerHeight - 220 |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
// 查询数据 |
||||
|
getDataList() { |
||||
|
this.loading = true |
||||
|
const params = { |
||||
|
...this.searchData, |
||||
|
page: this.pageIndex, |
||||
|
limit: this.pageSize |
||||
|
} |
||||
|
searchPoDetailPage(params).then(({ data }) => { |
||||
|
if (data.code === 0) { |
||||
|
this.dataList = data.page.list || [] |
||||
|
this.pageIndex = data.page.currPage |
||||
|
this.pageSize = data.page.pageSize |
||||
|
this.totalPage = data.page.totalCount |
||||
|
} else { |
||||
|
this.$message.error((data && data.msg) || '获取列表失败') |
||||
|
} |
||||
|
this.loading = false |
||||
|
}).catch(() => { |
||||
|
this.loading = false |
||||
|
this.$message.error('请求失败') |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
// 重置查询条件 |
||||
|
resetSearch() { |
||||
|
this.searchData = { |
||||
|
site: this.$store.state.user.site, |
||||
|
customer: '', |
||||
|
buyer: '', |
||||
|
poNo: '', |
||||
|
sku: '', |
||||
|
status: '', |
||||
|
supplierName: '', |
||||
|
partNo: '', |
||||
|
feeDateStart: '', |
||||
|
feeDateEnd: '' |
||||
|
} |
||||
|
this.pageIndex = 1 |
||||
|
this.getDataList() |
||||
|
}, |
||||
|
// 导出 |
||||
|
exportExcel () { |
||||
|
console.log('开始导出...') |
||||
|
|
||||
|
// 生成文件名 |
||||
|
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 = `PO订单列表${year}${month}${day}${hour}${minute}${second}` |
||||
|
|
||||
|
// 获取当前查询条件 |
||||
|
const exportParams = { |
||||
|
...this.searchData, |
||||
|
limit: 99999, |
||||
|
page: 1 |
||||
|
} |
||||
|
|
||||
|
console.log('导出参数:', exportParams) |
||||
|
|
||||
|
try { |
||||
|
excel.exportTable({ |
||||
|
url: 'pODetail/page', |
||||
|
columnMapping: this.visibleColumns, |
||||
|
mergeSetting: [], |
||||
|
params: exportParams, |
||||
|
fileName: exportName + '.xlsx', |
||||
|
rowFetcher: res => { |
||||
|
console.log('导出接口响应:', res) |
||||
|
// 接口返回 {code, msg, rows} 结构 |
||||
|
return { rows: (res.data && res.data.rows) || [] } |
||||
|
}, |
||||
|
columnFormatter: [], |
||||
|
dropColumns: [] |
||||
|
}) |
||||
|
console.log('导出请求已发送') |
||||
|
} catch (error) { |
||||
|
console.error('导出失败:', error) |
||||
|
this.$message.error('导出失败: ' + error.message) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 每页数 |
||||
|
sizeChangeHandle(val) { |
||||
|
this.pageSize = val |
||||
|
this.pageIndex = 1 |
||||
|
this.getDataList() |
||||
|
}, |
||||
|
|
||||
|
// 当前页 |
||||
|
currentChangeHandle(val) { |
||||
|
this.pageIndex = val |
||||
|
this.getDataList() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.el-table /deep/ .cell { |
||||
|
height: auto; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue