5 changed files with 516 additions and 23 deletions
-
28src/api/initialImport.js
-
14src/api/supplier/priceSheetReport.js
-
62src/views/modules/srmSupplier/supplierList.vue
-
364src/views/modules/supplier/priceSheetReport.vue
-
71src/views/modules/sys/initialImport.vue
@ -0,0 +1,14 @@ |
|||
import { createAPI } from '@/utils/httpRequest.js' |
|||
|
|||
export const getPriceListPage = data => createAPI('/supplier/priceSheetReport/priceListPage', 'post', data) |
|||
|
|||
export const getHandlingChargePage = data => createAPI('/supplier/priceSheetReport/handlingChargePage', 'post', data) |
|||
|
|||
export const getPaymentTermsPage = data => createAPI('/supplier/priceSheetReport/paymentTermsPage', 'post', data) |
|||
|
|||
export const exportPriceSheetReport = data => createAPI( |
|||
'/supplier/priceSheetReport/export', |
|||
'post', |
|||
data, |
|||
{ responseType: 'blob', timeout: 600000 } |
|||
) |
|||
@ -0,0 +1,364 @@ |
|||
<template> |
|||
<div ref="pageRoot" class="customer-css price-sheet-report"> |
|||
<el-form :inline="true" label-position="top" class="pi-search-form"> |
|||
<el-form-item label="ITEM"> |
|||
<el-input |
|||
v-model="searchData.item" |
|||
clearable |
|||
style="width: 160px" |
|||
@keyup.enter.native="handleSearch" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="ShortNPC"> |
|||
<el-input |
|||
v-model="searchData.shortNpc" |
|||
clearable |
|||
style="width: 160px" |
|||
@keyup.enter.native="handleSearch" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="SKU"> |
|||
<el-input |
|||
v-model="searchData.sku" |
|||
clearable |
|||
style="width: 160px" |
|||
@keyup.enter.native="handleSearch" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="物料一级分类"> |
|||
<el-input |
|||
v-model="searchData.category" |
|||
clearable |
|||
style="width: 180px" |
|||
@keyup.enter.native="handleSearch" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label=" "> |
|||
<el-button |
|||
type="primary" |
|||
icon="el-icon-search" |
|||
class="customer-bun-min" |
|||
:loading="activeLoading" |
|||
@click="handleSearch"> |
|||
查询 |
|||
</el-button> |
|||
<el-button |
|||
icon="el-icon-refresh-left" |
|||
class="customer-bun-min" |
|||
:disabled="activeLoading" |
|||
@click="handleReset"> |
|||
重置 |
|||
</el-button> |
|||
<el-button |
|||
type="success" |
|||
icon="el-icon-download" |
|||
class="customer-bun-min" |
|||
:loading="exportLoading" |
|||
@click="handleExport"> |
|||
导出 |
|||
</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<el-tabs v-model="activeTab" type="border-card" @tab-click="handleTabClick"> |
|||
<el-tab-pane label="price list" name="priceList"> |
|||
<el-table |
|||
ref="priceListTable" |
|||
v-loading="tabState.priceList.loading" |
|||
:data="tabState.priceList.rows" |
|||
:height="tableHeight" |
|||
border |
|||
stripe |
|||
style="width: 100%"> |
|||
<el-table-column prop="rawCode" label="RAW CODE" min-width="140" header-align="center" align="left" show-overflow-tooltip /> |
|||
<el-table-column prop="sku" label="SKU" min-width="120" header-align="center" align="left" show-overflow-tooltip /> |
|||
<el-table-column prop="supplier" label="SUPPLIER" min-width="130" header-align="center" align="left" show-overflow-tooltip /> |
|||
<el-table-column prop="moqColor" label="MOQ/COLOR" min-width="120" header-align="center" align="right" :formatter="formatNumberCell" /> |
|||
<el-table-column prop="qtyPo" label="QTY/PO" min-width="110" header-align="center" align="right" :formatter="formatNumberCell" /> |
|||
<el-table-column prop="startDate" label="START DATE" min-width="120" header-align="center" align="center" /> |
|||
<el-table-column prop="tierQty1" label="Tier_QTY_1" min-width="120" header-align="center" align="right" :formatter="formatNumberCell" /> |
|||
<el-table-column prop="tierQty2" label="Tier_QTY_2" min-width="120" header-align="center" align="right" :formatter="formatNumberCell" /> |
|||
<el-table-column prop="tierQty3" label="Tier_QTY_3" min-width="120" header-align="center" align="right" :formatter="formatNumberCell" /> |
|||
<el-table-column prop="tierQty4" label="Tier_QTY_4" min-width="120" header-align="center" align="right" :formatter="formatNumberCell" /> |
|||
<el-table-column prop="tierQty5" label="Tier_QTY_5" min-width="120" header-align="center" align="right" :formatter="formatNumberCell" /> |
|||
<el-table-column prop="tierQty6" label="Tier_QTY_6" min-width="120" header-align="center" align="right" :formatter="formatNumberCell" /> |
|||
<el-table-column prop="tierQty7" label="Tier_QTY_7" min-width="120" header-align="center" align="right" :formatter="formatNumberCell" /> |
|||
<el-table-column prop="tierQty8" label="Tier_QTY_8" min-width="120" header-align="center" align="right" :formatter="formatNumberCell" /> |
|||
<el-table-column prop="priceTier1" label="Price_Tier_1" min-width="125" header-align="center" align="right" :formatter="formatDollarCell" /> |
|||
<el-table-column prop="priceTier2" label="Price_Tier_2" min-width="125" header-align="center" align="right" :formatter="formatDollarCell" /> |
|||
<el-table-column prop="priceTier3" label="Price_Tier_3" min-width="125" header-align="center" align="right" :formatter="formatDollarCell" /> |
|||
<el-table-column prop="priceTier4" label="Price_Tier_4" min-width="125" header-align="center" align="right" :formatter="formatDollarCell" /> |
|||
<el-table-column prop="priceTier5" label="Price_Tier_5" min-width="125" header-align="center" align="right" :formatter="formatDollarCell" /> |
|||
<el-table-column prop="priceTier6" label="Price_Tier_6" min-width="125" header-align="center" align="right" :formatter="formatDollarCell" /> |
|||
<el-table-column prop="priceTier7" label="Price_Tier_7" min-width="125" header-align="center" align="right" :formatter="formatDollarCell" /> |
|||
<el-table-column prop="priceTier8" label="Price_Tier_8" min-width="125" header-align="center" align="right" :formatter="formatDollarCell" /> |
|||
<el-table-column prop="fsc" label="FSC" min-width="120" header-align="center" align="left" show-overflow-tooltip /> |
|||
<el-table-column prop="fscClaim" label="FSC claim" min-width="150" header-align="center" align="left" show-overflow-tooltip /> |
|||
<el-table-column prop="leadFreePellet" label="Lead free Pellet" min-width="160" header-align="center" align="left" show-overflow-tooltip /> |
|||
<el-table-column prop="awareDpp" label="AWARE DPP" min-width="140" header-align="center" align="left" show-overflow-tooltip /> |
|||
<el-table-column prop="coo" label="COO" min-width="120" header-align="center" align="left" show-overflow-tooltip /> |
|||
</el-table> |
|||
<report-pagination ref="priceListPagination" tab-name="priceList" :state="tabState.priceList" @size-change="handleSizeChange" @page-change="handlePageChange" /> |
|||
</el-tab-pane> |
|||
|
|||
<el-tab-pane label="handling charge" name="handlingCharge"> |
|||
<el-table |
|||
ref="handlingChargeTable" |
|||
v-loading="tabState.handlingCharge.loading" |
|||
:data="tabState.handlingCharge.rows" |
|||
:height="tableHeight" |
|||
border |
|||
stripe |
|||
style="width: 100%"> |
|||
<el-table-column prop="supplier" label="" min-width="180" header-align="center" align="left" show-overflow-tooltip /> |
|||
<el-table-column prop="comments" label="COMMENTS" min-width="300" header-align="center" align="left" show-overflow-tooltip /> |
|||
<el-table-column prop="handlingCharge" label="HANDLING CHARGE" min-width="180" header-align="center" align="right" /> |
|||
</el-table> |
|||
<report-pagination ref="handlingChargePagination" tab-name="handlingCharge" :state="tabState.handlingCharge" @size-change="handleSizeChange" @page-change="handlePageChange" /> |
|||
</el-tab-pane> |
|||
|
|||
<el-tab-pane label="active payment terms" name="paymentTerms"> |
|||
<el-table |
|||
ref="paymentTermsTable" |
|||
v-loading="tabState.paymentTerms.loading" |
|||
:data="tabState.paymentTerms.rows" |
|||
:height="tableHeight" |
|||
border |
|||
stripe |
|||
style="width: 100%"> |
|||
<el-table-column prop="rowNo" label="No" width="90" header-align="center" align="center" /> |
|||
<el-table-column prop="supplier" label="Supplier" min-width="180" header-align="center" align="left" show-overflow-tooltip /> |
|||
<el-table-column prop="paymentTerms" label="Payment Terms" min-width="320" header-align="center" align="left" show-overflow-tooltip /> |
|||
<el-table-column prop="telexReleaseStatus" label="Telex Release status" min-width="200" header-align="center" align="left" /> |
|||
</el-table> |
|||
<report-pagination ref="paymentTermsPagination" tab-name="paymentTerms" :state="tabState.paymentTerms" @size-change="handleSizeChange" @page-change="handlePageChange" /> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
exportPriceSheetReport, |
|||
getHandlingChargePage, |
|||
getPaymentTermsPage, |
|||
getPriceListPage |
|||
} from '@/api/supplier/priceSheetReport' |
|||
|
|||
const ReportPagination = { |
|||
name: 'ReportPagination', |
|||
props: { |
|||
tabName: { type: String, required: true }, |
|||
state: { type: Object, required: true } |
|||
}, |
|||
render (h) { |
|||
return h('el-pagination', { |
|||
class: 'report-pagination', |
|||
props: { |
|||
currentPage: this.state.page, |
|||
pageSizes: [20, 50, 100, 200, 500], |
|||
pageSize: this.state.limit, |
|||
total: this.state.total, |
|||
layout: 'total, sizes, prev, pager, next, jumper' |
|||
}, |
|||
on: { |
|||
'size-change': value => this.$emit('size-change', this.tabName, value), |
|||
'current-change': value => this.$emit('page-change', this.tabName, value) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
|
|||
const createTabState = () => ({ |
|||
rows: [], |
|||
page: 1, |
|||
limit: 50, |
|||
total: 0, |
|||
loading: false, |
|||
loaded: false |
|||
}) |
|||
|
|||
export default { |
|||
name: 'PriceSheetReport', |
|||
components: { ReportPagination }, |
|||
data () { |
|||
return { |
|||
searchData: { |
|||
item: '', |
|||
shortNpc: '', |
|||
sku: '', |
|||
category: '' |
|||
}, |
|||
activeTab: 'priceList', |
|||
exportLoading: false, |
|||
tableHeight: 520, |
|||
tabState: { |
|||
priceList: createTabState(), |
|||
handlingCharge: createTabState(), |
|||
paymentTerms: createTabState() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
activeLoading () { |
|||
return this.tabState[this.activeTab].loading |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.$nextTick(this.updateTableHeight) |
|||
window.addEventListener('resize', this.updateTableHeight) |
|||
this.loadTab('priceList') |
|||
}, |
|||
activated () { |
|||
this.$nextTick(this.updateTableHeight) |
|||
}, |
|||
beforeDestroy () { |
|||
window.removeEventListener('resize', this.updateTableHeight) |
|||
}, |
|||
methods: { |
|||
updateTableHeight () { |
|||
this.$nextTick(() => { |
|||
const table = this.$refs[`${this.activeTab}Table`] |
|||
const pagination = this.$refs[`${this.activeTab}Pagination`] |
|||
if (!table || !table.$el || !pagination || !pagination.$el) return |
|||
|
|||
const pageRoot = this.$refs.pageRoot |
|||
const container = pageRoot.parentElement |
|||
const paginationStyle = window.getComputedStyle(pagination.$el) |
|||
const pageStyle = window.getComputedStyle(pageRoot) |
|||
const tabsContent = pagination.$el.closest('.el-tabs__content') |
|||
const tabsContentStyle = tabsContent ? window.getComputedStyle(tabsContent) : null |
|||
const containerBottom = Math.min( |
|||
document.documentElement.clientHeight, |
|||
container.getBoundingClientRect().bottom |
|||
) |
|||
const reservedHeight = pagination.$el.getBoundingClientRect().height + |
|||
parseFloat(paginationStyle.marginTop || 0) + |
|||
parseFloat(paginationStyle.marginBottom || 0) + |
|||
parseFloat(pageStyle.paddingBottom || 0) + |
|||
(tabsContentStyle ? parseFloat(tabsContentStyle.paddingBottom || 0) : 0) + 2 |
|||
|
|||
this.tableHeight = Math.max( |
|||
280, |
|||
Math.floor(containerBottom - table.$el.getBoundingClientRect().top - reservedHeight) |
|||
) |
|||
this.$nextTick(() => table.doLayout()) |
|||
}) |
|||
}, |
|||
buildQuery (tabName) { |
|||
const state = tabName ? this.tabState[tabName] : null |
|||
return { |
|||
site: this.$store.state.user.site, |
|||
item: (this.searchData.item || '').trim(), |
|||
shortNpc: (this.searchData.shortNpc || '').trim(), |
|||
sku: (this.searchData.sku || '').trim(), |
|||
category: (this.searchData.category || '').trim(), |
|||
page: state ? state.page : 1, |
|||
limit: state ? state.limit : 50 |
|||
} |
|||
}, |
|||
requestForTab (tabName) { |
|||
if (tabName === 'handlingCharge') return getHandlingChargePage |
|||
if (tabName === 'paymentTerms') return getPaymentTermsPage |
|||
return getPriceListPage |
|||
}, |
|||
loadTab (tabName) { |
|||
const state = this.tabState[tabName] |
|||
state.loading = true |
|||
this.requestForTab(tabName)(this.buildQuery(tabName)).then(({ data }) => { |
|||
if (data && data.code === 0) { |
|||
const page = data.page || {} |
|||
state.rows = Array.isArray(page.list) ? page.list : [] |
|||
state.page = Number(page.currPage || state.page) |
|||
state.limit = Number(page.pageSize || state.limit) |
|||
state.total = Number(page.totalCount || 0) |
|||
state.loaded = true |
|||
} else { |
|||
state.rows = [] |
|||
state.total = 0 |
|||
this.$message.error((data && data.msg) || '查询失败') |
|||
} |
|||
}).catch(() => { |
|||
state.rows = [] |
|||
state.total = 0 |
|||
this.$message.error('查询失败') |
|||
}).finally(() => { |
|||
state.loading = false |
|||
}) |
|||
}, |
|||
handleSearch () { |
|||
Object.keys(this.tabState).forEach(tabName => { |
|||
this.tabState[tabName].page = 1 |
|||
this.tabState[tabName].loaded = false |
|||
}) |
|||
this.loadTab(this.activeTab) |
|||
}, |
|||
handleReset () { |
|||
this.searchData = { |
|||
item: '', |
|||
shortNpc: '', |
|||
sku: '', |
|||
category: '' |
|||
} |
|||
this.handleSearch() |
|||
}, |
|||
handleTabClick () { |
|||
this.updateTableHeight() |
|||
if (!this.tabState[this.activeTab].loaded) { |
|||
this.loadTab(this.activeTab) |
|||
} |
|||
}, |
|||
handleSizeChange (tabName, value) { |
|||
const state = this.tabState[tabName] |
|||
state.limit = value |
|||
state.page = 1 |
|||
this.loadTab(tabName) |
|||
}, |
|||
handlePageChange (tabName, value) { |
|||
this.tabState[tabName].page = value |
|||
this.loadTab(tabName) |
|||
}, |
|||
handleExport () { |
|||
this.exportLoading = true |
|||
exportPriceSheetReport(this.buildQuery()).then(response => { |
|||
const blob = new Blob([response.data], { |
|||
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' |
|||
}) |
|||
const url = window.URL.createObjectURL(blob) |
|||
const link = document.createElement('a') |
|||
link.href = url |
|||
link.download = '价格单报表.xlsx' |
|||
document.body.appendChild(link) |
|||
link.click() |
|||
document.body.removeChild(link) |
|||
window.URL.revokeObjectURL(url) |
|||
}).catch(() => { |
|||
this.$message.error('导出失败') |
|||
}).finally(() => { |
|||
this.exportLoading = false |
|||
}) |
|||
}, |
|||
formatNumberCell (row, column, value) { |
|||
return value === null || value === undefined || value === '' ? '' : value |
|||
}, |
|||
formatDollarCell (row, column, value) { |
|||
return value === null || value === undefined || value === '' ? '' : `$${value}` |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.price-sheet-report { |
|||
padding: 12px 16px; |
|||
} |
|||
|
|||
.price-sheet-report /deep/ .el-tabs__content { |
|||
padding: 10px 12px 8px; |
|||
} |
|||
|
|||
.report-pagination { |
|||
margin-top: 8px; |
|||
text-align: right; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue