DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改采购ui

Browse Source
This commit is contained in:
86156
2025-11-19 12:54:44 +08:00
parent ecea954d52
commit 7d0492a545
9 changed files with 1169 additions and 566 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
klp-ui/src/views/erp/report/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="erp-report-page">
<el-card shadow="never" class="panel-card">
<div slot="header" class="panel-header">
<section class="surface-panel">
<header class="surface-header">
<span>采购汇总</span>
<el-date-picker
v-model="range"
@@ -13,67 +13,49 @@
end-placeholder="结束时间"
@change="loadSummary"
/>
</header>
<div class="metrics-grid">
<div class="metric-card">
<p class="label">采购总金额</p>
<p class="value">￥{{ summary.totalAmount | formatMoney }}</p>
</div>
<div class="metric-card">
<p class="label">供应商数量</p>
<p class="value">{{ supplierBrief.length }}</p>
</div>
<div class="metric-card">
<p class="label">最大供应商金额</p>
<p class="value">￥{{ topSupplierAmount | formatMoney }}</p>
</div>
<div class="metric-card">
<p class="label">平均订单金额</p>
<p class="value">￥{{ avgSupplierAmount | formatMoney }}</p>
</div>
</div>
<el-row :gutter="16">
<el-col :span="6">
<div class="metric-card">
<p class="label">采购总金额</p>
<p class="value">￥{{ summary.totalAmount | formatMoney }}</p>
</div>
</el-col>
<el-col :span="6">
<div class="metric-card">
<p class="label">供应商数量</p>
<p class="value">{{ supplierBrief.length }}</p>
</div>
</el-col>
<el-col :span="6">
<div class="metric-card">
<p class="label">最大供应商金额</p>
<p class="value">￥{{ topSupplierAmount | formatMoney }}</p>
</div>
</el-col>
<el-col :span="6">
<div class="metric-card">
<p class="label">平均订单金额</p>
<p class="value">￥{{ avgSupplierAmount | formatMoney }}</p>
</div>
</el-col>
</el-row>
</el-card>
</section>
<el-row :gutter="16">
<el-col :span="8">
<el-card shadow="never" class="panel-card">
<div slot="header" class="panel-header">
<span>供应商汇总</span>
</div>
<section class="surface-panel">
<div class="report-grid">
<div class="report-card">
<h4>供应商汇总</h4>
<el-table :data="supplierBrief" border size="small" height="320">
<el-table-column prop="supplierId" label="供应商ID" width="140" />
<el-table-column prop="orderCount" label="订单数" width="100" />
<el-table-column prop="supplierId" label="供应商ID" />
<el-table-column prop="orderCount" label="订单数" />
<el-table-column prop="totalAmount" label="总金额" />
</el-table>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="never" class="panel-card">
<div slot="header" class="panel-header">
<span>价格趋势</span>
</div>
</div>
<div class="report-card">
<h4>价格趋势</h4>
<el-table :data="priceTrend" border size="small" height="320">
<el-table-column prop="period" label="月份" width="120" />
<el-table-column prop="materialCode" label="物料编码" width="140" />
<el-table-column prop="period" label="月份" />
<el-table-column prop="materialCode" label="物料编码" />
<el-table-column prop="avgPrice" label="平均含税价" />
</el-table>
</el-card>
</el-col>
<el-col :span="8">
<el-card shadow="never" class="panel-card">
<div slot="header" class="panel-header">
<span>供应商退货率</span>
</div>
</div>
<div class="report-card">
<h4>供应商退货率</h4>
<el-table :data="supplierQuality" border size="small" height="320">
<el-table-column prop="supplierId" label="供应商ID" width="140" />
<el-table-column prop="supplierId" label="供应商ID" />
<el-table-column prop="receivedQty" label="收货量" />
<el-table-column prop="returnQty" label="退货量" />
<el-table-column label="退货率">
@@ -82,9 +64,9 @@
</template>
</el-table-column>
</el-table>
</el-card>
</el-col>
</el-row>
</div>
</div>
</section>
</div>
</template>
@@ -154,24 +136,35 @@ export default {
<style lang="scss" scoped>
.erp-report-page {
padding: 16px;
background: #eef1f3;
min-height: 100%;
display: flex;
flex-direction: column;
gap: 16px;
}
.panel-card {
margin-bottom: 18px;
border: 1px solid #d0d5d8;
.surface-panel {
background: #fff;
border: 1px solid #d6dce1;
border-radius: 4px;
padding: 16px;
}
.panel-header {
.surface-header {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
color: #1f2d3d;
margin-bottom: 12px;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.metric-card {
border: 1px solid #d9dee4;
padding: 16px;
background: #fff;
background: #f9fafb;
border-radius: 4px;
.label {
color: #5b6875;
margin-bottom: 6px;
@@ -182,5 +175,22 @@ export default {
color: #1f2d3d;
}
}
.report-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 12px;
}
.report-card {
border: 1px solid #d9dee4;
border-radius: 4px;
padding: 12px;
background: #fbfbfc;
h4 {
margin: 0 0 8px;
font-size: 14px;
font-weight: 600;
color: #2b3440;
}
}
</style>