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

✨ feat: 首页增加销售看板

Browse Source
This commit is contained in:
砂糖
2025-08-22 14:28:10 +08:00
parent 76926c3a10
commit 9361f0ea8d
9 changed files with 668 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
klp-ui/src/views/wms/order/components/CurrentSituationArea.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="current-situation-area">
<el-row :gutter="20">
<el-row :gutter="20" v-if="mode === 'normal'">
<!-- 订单所需的产品统计 -->
<el-col :span="8">
<el-card shadow="hover" class="situation-card">
@@ -8,7 +8,8 @@
<span>订单所需的产品统计</span>
</div>
<div class="table-container">
<el-table :data="orderProductStatistics" size="small" height="320" v-loading="!orderProductStatistics.length">
<el-table :data="orderProductStatistics" size="small" height="320"
v-loading="!orderProductStatistics.length">
<el-table-column prop="productName" label="产品名称" width="120" />
<el-table-column prop="orderDemandQuantity" label="需求数量" width="80" />
<el-table-column prop="currentStockQuantity" label="库存数量" width="80" />
@@ -28,7 +29,7 @@
</div>
</el-card>
</el-col>
<!-- 根据BOM计算的原料需求 -->
<el-col :span="8">
<el-card shadow="hover" class="situation-card">
@@ -36,7 +37,8 @@
<span>BOM原料需求</span>
</div>
<div class="table-container">
<el-table :data="productMaterialRequirements" size="small" height="320" v-loading="!productMaterialRequirements.length">
<el-table :data="productMaterialRequirements" size="small" height="320"
v-loading="!productMaterialRequirements.length">
<el-table-column prop="productName" label="产品" width="100" />
<el-table-column prop="materialName" label="原料" width="100" />
<el-table-column prop="requiredQuantity" label="需求数量" width="80" />
@@ -57,7 +59,7 @@
</div>
</el-card>
</el-col>
<!-- 原料库存和需求情况 -->
<el-col :span="8">
<el-card shadow="hover" class="situation-card">
@@ -93,6 +95,33 @@
</el-card>
</el-col>
</el-row>
<div class="current-situation-area-mini" v-else>
<el-card shadow="hover" class="situation-card">
<div slot="header" class="card-header">
<span>订单所需的产品统计</span>
</div>
<div class="table-container">
<el-table :data="orderProductStatistics" size="small" height="320" v-loading="!orderProductStatistics.length">
<el-table-column prop="productName" label="产品名称" width="120" />
<el-table-column prop="orderDemandQuantity" label="需求数量" width="80" />
<el-table-column prop="currentStockQuantity" label="库存数量" width="80" />
<el-table-column prop="stockGap" label="库存缺口" width="80">
<template slot-scope="scope">
<span :class="getStockGapClass(scope.row.stockGap)">
{{ scope.row.stockGap }}
</span>
</template>
</el-table-column>
<el-table-column prop="relatedOrderCount" label="相关订单" width="80" />
</el-table>
<div v-if="!orderProductStatistics.length" class="empty-data">
<i class="el-icon-warning-outline"></i>
<p>暂无数据</p>
</div>
</div>
</el-card>
</div>
</div>
</template>
@@ -104,6 +133,10 @@ export default {
type: Object,
required: true,
default: () => ({})
},
mode: {
type: String,
default: 'normal'
}
},
computed: {
@@ -195,4 +228,4 @@ export default {
margin: 0;
font-size: 14px;
}
</style>
</style>

45
klp-ui/src/views/wms/order/components/PerformanceArea.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="performance-area">
<el-row :gutter="20">
<el-row :gutter="20" v-if="mode === 'normal'">
<!-- 产品销售情况 -->
<el-col :span="8">
<el-card shadow="hover" class="performance-card">
@@ -56,6 +56,45 @@
</el-card>
</el-col>
</el-row>
<div class="performance-area-mini" v-else>
<!-- <el-tabs tab-position="left"> -->
<!-- <el-tab-pane label="产品销售情况" name="productSales">
<div class="chart-container" ref="productSalesChart" style="width: 100%;"></div>
</el-tab-pane>
<el-tab-pane label="销售人员业绩" name="salesPerson">
<div class="chart-container" ref="salesPersonChart" style="width: 100%;"></div>
</el-tab-pane> -->
<!-- <el-tab-pane label="总订单数量统计" name="orderCount"> -->
<div class="stats-container">
<div class="stat-item">
<div class="stat-number">{{ orderCountStatistics.totalOrderCount || 0 }}</div>
<div class="stat-label">总订单数</div>
</div>
<div class="stat-item">
<div class="stat-number">{{ orderCountStatistics.completedOrderCount || 0 }}</div>
<div class="stat-label">已完成</div>
</div>
<div class="stat-item">
<div class="stat-number">{{ orderCountStatistics.inProgressOrderCount || 0 }}</div>
<div class="stat-label">进行中</div>
</div>
<div class="stat-item">
<div class="stat-number">{{ orderCountStatistics.pendingOrderCount || 0 }}</div>
<div class="stat-label">待处理</div>
</div>
<div class="stat-item">
<div class="stat-number">{{ orderCountStatistics.monthlyNewOrderCount || 0 }}</div>
<div class="stat-label">本月新增</div>
</div>
<div class="stat-item">
<div class="stat-number">{{ ((orderCountStatistics.completionRate || 0) * 100).toFixed(1) }}%</div>
<div class="stat-label">完成率</div>
</div>
</div>
<!-- </el-tab-pane> -->
<!-- </el-tabs> -->
</div>
</div>
</template>
@@ -69,6 +108,10 @@ export default {
type: Object,
required: true,
default: () => ({})
},
mode: {
type: String,
default: 'normal'
}
},
data() {

32
klp-ui/src/views/wms/order/components/RecommendationArea.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="recommendation-area">
<el-row :gutter="20">
<el-row :gutter="20" v-if="mode === 'normal'">
<!-- 订单维度推荐 -->
<el-col :span="12">
<el-card shadow="hover" class="recommendation-card">
@@ -61,6 +61,32 @@
</el-card>
</el-col>
</el-row>
<div class="recommendation-area-mini" v-else>
<el-card shadow="hover" class="recommendation-card">
<div class="table-container">
<el-table :data="materialRecommendations" size="small" height="320" v-loading="!materialRecommendations.length">
<el-table-column prop="materialName" label="原料名称" width="120" />
<el-table-column prop="recommendedPurchaseQuantity" label="推荐采购数量" width="120" />
<el-table-column prop="recommendedSupplier" label="推荐供应商" width="100" show-overflow-tooltip />
<el-table-column prop="urgencyLevel" label="紧急程度" width="80">
<template slot-scope="scope">
<el-tag :type="getUrgencyType(scope.row.urgencyLevel)" size="mini">
{{ scope.row.urgencyLevel }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="recommendationReason" label="推荐原因" width="150" show-overflow-tooltip />
<el-table-column prop="suggestedAction" label="建议操作" width="100" />
<el-table-column prop="estimatedArrivalTime" label="预计到货时间" width="120" />
</el-table>
<div v-if="!materialRecommendations.length" class="empty-data">
<i class="el-icon-warning-outline"></i>
<p>暂无推荐数据</p>
</div>
</div>
</el-card>
</div>
</div>
</template>
@@ -72,6 +98,10 @@ export default {
type: Object,
required: true,
default: () => ({})
},
mode: {
type: String,
default: 'normal'
}
},
computed: {

6
klp-ui/src/views/wms/work/schedule/index.vue
View File

@@ -4,7 +4,7 @@
<div style="max-height:60vh;overflow:auto;padding-right:8px;">
<el-form :model="detailForm" :rules="detailRules" ref="detailForm" label-width="80px" style="overflow:visible;">
<el-form-item label="产线" prop="lineId">
<el-select v-model="detailForm.lineId" placeholder="请选择产线" filterable @change="onLineChange">
<el-select clearable v-model="detailForm.lineId" placeholder="请选择产线" filterable @change="onLineChange">
<el-option v-for="item in productionLineList" :key="item.lineId" :label="item.lineName"
:value="item.lineId" />
</el-select>
@@ -14,7 +14,7 @@
<el-option v-for="item in productList" :key="item.productId" :label="item.productName"
:value="item.productId" />
</el-select> -->
<el-select v-model="detailForm.batchId" placeholder="请选择批次" filterable @change="onBatchChange">
<el-select clearable v-model="detailForm.batchId" placeholder="请选择批次" filterable @change="onBatchChange">
<el-option v-for="item in batchList" :key="item.batchId" :label="item.batchNo" :value="item.batchId" />
</el-select>
</el-form-item>
@@ -70,7 +70,7 @@ export default {
remark: ''
},
detailRules: {
productId: [{ required: true, message: '请选择产品', trigger: 'change' }],
batchId: [{ required: true, message: '请选择产品', trigger: 'change' }],
lineId: [{ required: true, message: '请选择产线', trigger: 'change' }],
quantity: [{ required: true, message: '请输入排产数量', trigger: 'blur' }],
dateRange: [{ required: true, type: 'array', len: 2, message: '请选择计划日期区间', trigger: 'change' }]