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

308
klp-ui/src/views/erp/purchase/index.vue
View File

@@ -1,52 +1,46 @@
<template>
<div class="erp-purchase-page">
<el-row :gutter="16" class="summary-row">
<el-col :span="6">
<div class="summary-card">
<section class="surface-panel metrics-panel">
<div class="metrics-grid">
<div class="metric">
<p class="label">采购总金额</p>
<p class="value">￥{{ summary.totalAmount | formatAmount }}</p>
</div>
</el-col>
<el-col :span="6">
<div class="summary-card">
<div class="metric">
<p class="label">计划采购量</p>
<p class="value">{{ summary.suggestionTotal }} 吨</p>
</div>
</el-col>
<el-col :span="6">
<div class="summary-card">
<div class="metric">
<p class="label">待处理订单</p>
<p class="value">{{ summary.pendingOrder }}</p>
</div>
</el-col>
<el-col :span="6">
<div class="summary-card">
<div class="metric">
<p class="label">供应商数量</p>
<p class="value">{{ summary.supplierBrief.length }}</p>
</div>
</el-col>
</el-row>
<el-card class="panel-card" shadow="never">
<div slot="header" class="panel-header">
<span>采购需求分析</span>
<div class="panel-actions">
<el-switch v-model="persistResult" active-text="写入建议表" inactive-text="仅计算" />
<el-button type="primary" size="mini" @click="handleAnalyze" :loading="analysisLoading">执行分析</el-button>
</div>
</div>
</section>
<section class="surface-panel">
<header class="surface-header">
<span>采购需求分析</span>
<div class="surface-actions">
<el-switch v-model="persistResult" active-text="写入建议表" inactive-text="仅计算" />
<el-button type="primary" size="small" @click="handleAnalyze" :loading="analysisLoading">执行分析</el-button>
</div>
</header>
<el-table :data="mappingRows" border size="small" class="mapping-table">
<el-table-column label="产品ID" width="160">
<el-table-column label="产品ID">
<template slot-scope="scope">
<el-input v-model="scope.row.productId" placeholder="产品ID" />
</template>
</el-table-column>
<el-table-column label="原料ID" width="160">
<el-table-column label="原料ID">
<template slot-scope="scope">
<el-input v-model="scope.row.rawMaterialId" placeholder="原料ID" />
</template>
</el-table-column>
<el-table-column label="转换率" width="140">
<el-table-column label="转换率">
<template slot-scope="scope">
<el-input-number v-model="scope.row.conversionRate" :min="0" :max="1" :step="0.01" />
</template>
@@ -69,54 +63,55 @@
show-summary
:summary-method="analysisSummary"
>
<el-table-column label="产品" prop="productName" min-width="180">
<el-table-column label="产品" prop="productName">
<template slot-scope="scope">
<div class="cell-title">{{ scope.row.productName || '-' }}</div>
<div class="cell-sub">ID: {{ scope.row.productId || '-' }}</div>
</template>
</el-table-column>
<el-table-column label="规格" prop="specification" min-width="140" />
<el-table-column label="销售需求(吨)" prop="salesDemand" min-width="120" />
<el-table-column label="成品库存/卷" min-width="140">
<el-table-column label="规格" prop="specification" />
<el-table-column label="销售需求(吨)" prop="salesDemand" />
<el-table-column label="成品库存/卷">
<template slot-scope="scope">
<div>{{ scope.row.productStockWeight }}</div>
<div class="cell-sub">{{ scope.row.productStockCoilCount }} 卷</div>
</template>
</el-table-column>
<el-table-column label="原料折算(吨)" prop="rawStockConverted" min-width="120" />
<el-table-column label="在途折算(吨)" prop="inTransitConverted" min-width="120" />
<el-table-column label="待下达折算(吨)" prop="pendingConverted" min-width="120" />
<el-table-column label="建议采购(吨)" prop="suggestedPurchase" min-width="120" />
<el-table-column label="原料折算(吨)" prop="rawStockConverted" />
<el-table-column label="在途折算(吨)" prop="inTransitConverted" />
<el-table-column label="待下达折算(吨)" prop="pendingConverted" />
<el-table-column label="建议采购(吨)" prop="suggestedPurchase" />
</el-table>
</el-card>
</section>
<el-card class="panel-card" shadow="never">
<div slot="header" class="panel-header">
<section class="surface-panel">
<header class="surface-header">
<span>执行控制</span>
</div>
<el-tabs v-model="activeTab" type="border-card">
</header>
<el-tabs v-model="activeTab" class="plain-tabs">
<el-tab-pane label="收货记录" name="receipt">
<div class="toolbar">
<el-input v-model="receiptQuery.orderId" placeholder="订单ID" size="small" clearable class="toolbar-input" />
<el-input v-model="receiptQuery.itemId" placeholder="明细ID" size="small" clearable class="toolbar-input" />
<el-button size="small" type="primary" @click="loadReceipts">查询</el-button>
<el-button size="small" @click="resetReceiptQuery">重置</el-button>
<div class="toolbar-spacer"></div>
<el-button type="primary" size="small" @click="openReceiptDialog()">新增收货</el-button>
<div class="inline-filter">
<el-input v-model="receiptQuery.orderId" placeholder="订单ID" size="small" clearable />
<el-input v-model="receiptQuery.itemId" placeholder="明细ID" size="small" clearable />
<div class="filter-actions">
<el-button size="small" type="primary" @click="loadReceipts">查询</el-button>
<el-button size="small" @click="resetReceiptQuery">重置</el-button>
<el-button type="primary" size="small" @click="openReceiptDialog()">新增收货</el-button>
</div>
</div>
<el-table :data="receiptList" v-loading="receiptLoading" border size="small">
<el-table-column prop="receiptId" label="ID" width="80" />
<el-table-column prop="orderId" label="订单ID" width="100" />
<el-table-column prop="itemId" label="明细ID" width="100" />
<el-table-column prop="receivedQty" label="收货数量" width="100" />
<el-table-column prop="qualityResult" label="质检结果" width="120">
<el-table-column prop="orderId" label="订单ID" />
<el-table-column prop="itemId" label="明细ID" />
<el-table-column prop="receivedQty" label="收货数量" />
<el-table-column prop="qualityResult" label="质检结果">
<template slot-scope="scope">
<el-tag :type="scope.row.qualityResult === 'NG' ? 'danger' : 'success'" size="mini">
{{ scope.row.qualityResult || '合格' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="receiptTime" label="收货时间" width="160" />
<el-table-column prop="receiptTime" label="收货时间" />
<el-table-column label="操作" width="160">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="openReceiptDialog(scope.row)">编辑</el-button>
@@ -134,24 +129,25 @@
</el-tab-pane>
<el-tab-pane label="退货管理" name="return">
<div class="toolbar">
<el-input v-model="returnQuery.orderId" placeholder="订单ID" size="small" clearable class="toolbar-input" />
<el-select v-model="returnQuery.status" placeholder="状态" size="small" clearable class="toolbar-input">
<div class="inline-filter">
<el-input v-model="returnQuery.orderId" placeholder="订单ID" size="small" clearable />
<el-select v-model="returnQuery.status" placeholder="状态" size="small" clearable>
<el-option label="草稿" :value="0" />
<el-option label="完成" :value="1" />
</el-select>
<el-button size="small" type="primary" @click="loadReturns">查询</el-button>
<el-button size="small" @click="resetReturnQuery">重置</el-button>
<div class="toolbar-spacer"></div>
<el-button type="primary" size="small" @click="openReturnDialog()">新增退货</el-button>
<el-button size="small" @click="openReturnItemDialog()">退货明细</el-button>
<div class="filter-actions">
<el-button size="small" type="primary" @click="loadReturns">查询</el-button>
<el-button size="small" @click="resetReturnQuery">重置</el-button>
<el-button type="primary" size="small" @click="openReturnDialog()">新增退货</el-button>
<el-button size="small" @click="openReturnItemDialog()">退货明细</el-button>
</div>
</div>
<el-table :data="returnList" v-loading="returnLoading" border size="small">
<el-table-column prop="returnId" label="退货单ID" width="120" />
<el-table-column prop="orderId" label="订单ID" width="120" />
<el-table-column prop="returnType" label="类型" width="120" />
<el-table-column prop="reason" label="原因" min-width="150" />
<el-table-column prop="status" label="状态" width="120">
<el-table-column prop="orderId" label="订单ID" />
<el-table-column prop="returnType" label="类型" />
<el-table-column prop="reason" label="原因" />
<el-table-column prop="status" label="状态" width="140">
<template slot-scope="scope">
<el-tag :type="scope.row.status === 1 ? 'success' : 'info'" size="mini">
{{ scope.row.status === 1 ? '完成' : '草稿' }}
@@ -174,12 +170,12 @@
/>
</el-tab-pane>
</el-tabs>
</el-card>
</section>
<el-card class="panel-card" shadow="never">
<div slot="header" class="panel-header">
<section class="surface-panel">
<header class="surface-header">
<span>采购报表</span>
<div class="panel-actions">
<div class="surface-actions">
<el-date-picker
v-model="reportRange"
type="monthrange"
@@ -192,45 +188,39 @@
size="small"
/>
</div>
</header>
<div class="report-grid">
<div class="report-card">
<h4>供应商采购额TOP</h4>
<el-table :data="summary.supplierBrief" size="mini" height="220" border>
<el-table-column prop="supplierId" label="供应商ID" />
<el-table-column prop="totalAmount" label="金额" />
<el-table-column prop="orderCount" label="订单" width="90" />
</el-table>
</div>
<div class="report-card">
<h4>价格趋势</h4>
<el-table :data="priceTrend" size="mini" height="220" border>
<el-table-column prop="period" label="月份" />
<el-table-column prop="materialCode" label="物料编码" />
<el-table-column prop="avgPrice" label="平均含税单价" />
</el-table>
</div>
<div class="report-card">
<h4>供应商退货率</h4>
<el-table :data="supplierQuality" size="mini" height="220" border>
<el-table-column prop="supplierId" label="供应商ID" />
<el-table-column prop="receivedQty" label="收货量" />
<el-table-column prop="returnQty" label="退货量" />
<el-table-column label="退货率">
<template slot-scope="scope">
{{ formatPercent(scope.row.returnRate) }}
</template>
</el-table-column>
</el-table>
</div>
</div>
<el-row :gutter="16">
<el-col :span="8">
<div class="report-block">
<h4>供应商采购额TOP</h4>
<el-table :data="summary.supplierBrief" size="mini" height="220" border>
<el-table-column prop="supplierId" label="供应商ID" width="120" />
<el-table-column prop="totalAmount" label="金额" />
<el-table-column prop="orderCount" label="订单" width="80" />
</el-table>
</div>
</el-col>
<el-col :span="8">
<div class="report-block">
<h4>价格趋势</h4>
<el-table :data="priceTrend" size="mini" height="220" border>
<el-table-column prop="period" label="月份" width="120" />
<el-table-column prop="materialCode" label="物料编码" width="150" />
<el-table-column prop="avgPrice" label="平均含税单价" />
</el-table>
</div>
</el-col>
<el-col :span="8">
<div class="report-block">
<h4>供应商退货率</h4>
<el-table :data="supplierQuality" size="mini" height="220" border>
<el-table-column prop="supplierId" label="供应商ID" width="120" />
<el-table-column prop="receivedQty" label="收货量" />
<el-table-column prop="returnQty" label="退货量" />
<el-table-column label="退货率">
<template slot-scope="scope">
{{ formatPercent(scope.row.returnRate) }}
</template>
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
</el-card>
</section>
<!-- 收货弹窗 -->
<el-dialog :title="receiptDialog.title" :visible.sync="receiptDialog.visible" width="480px">
@@ -649,48 +639,54 @@ export default {
<style lang="scss" scoped>
.erp-purchase-page {
padding: 16px;
background: #eef1f3;
min-height: 100%;
.summary-row {
margin-bottom: 16px;
}
}
.summary-card {
background: #fdfdfd;
border: 1px solid #d9dee4;
padding: 16px;
height: 90px;
display: flex;
flex-direction: column;
justify-content: center;
.label {
color: #5c6b77;
font-size: 14px;
margin-bottom: 6px;
}
.value {
color: #1f2d3d;
font-size: 20px;
font-weight: 600;
}
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;
color: #1c2b36;
margin-bottom: 12px;
}
.panel-actions {
.surface-actions {
display: flex;
align-items: center;
gap: 12px;
}
.metrics-panel {
padding: 0;
}
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
padding: 16px;
}
.metric {
border: 1px solid #d6dce1;
padding: 12px;
background: #f9fafb;
.label {
font-size: 13px;
color: #6b7785;
margin-bottom: 4px;
}
.value {
font-size: 20px;
font-weight: 600;
color: #16212b;
}
}
.mapping-table {
margin-bottom: 8px;
}
@@ -708,27 +704,41 @@ export default {
color: #7c8792;
font-size: 12px;
}
.toolbar {
.inline-filter {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
> *:not(.filter-actions) {
flex: 1 1 160px;
}
.filter-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
}
.report-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 12px;
}
.report-card {
border: 1px solid #d6dce1;
padding: 12px;
background: #fdfdfd;
h4 {
margin: 0 0 8px;
font-size: 14px;
color: #2a313c;
}
}
.plain-tabs ::v-deep .el-tabs__header {
border-bottom: 1px solid #d6dce1;
margin-bottom: 12px;
}
.toolbar-input {
width: 160px;
margin-right: 8px;
}
.toolbar-spacer {
flex: 1;
}
.report-block {
border: 1px solid #d9dee4;
padding: 12px;
background: #fafbfc;
h4 {
font-weight: 600;
margin: 0 0 8px;
color: #2f3c4c;
}
.plain-tabs ::v-deep .el-tabs__content {
padding: 0;
}
</style>