From 4b3f8e5bcb537b8fd53695046da56efa44e98c85 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 17 九月 2025 15:24:00 +0800
Subject: [PATCH] 采购报表前端页面
---
src/views/procurementManagement/procurementReport/index.vue | 847 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 847 insertions(+), 0 deletions(-)
diff --git a/src/views/procurementManagement/procurementReport/index.vue b/src/views/procurementManagement/procurementReport/index.vue
new file mode 100644
index 0000000..a12b4ba
--- /dev/null
+++ b/src/views/procurementManagement/procurementReport/index.vue
@@ -0,0 +1,847 @@
+<template>
+ <div class="app-container">
+ <!-- 鎶ヨ〃閫夋嫨鍣� -->
+ <el-card class="report-selector" shadow="never">
+ <el-tabs v-model="activeReport" @tab-change="handleReportChange">
+ <el-tab-pane label="閲囪喘璁㈠崟鎵ц姹囨�昏〃" name="orderSummary">
+ <template #label>
+ <span class="tab-label">
+ <el-icon><Document /></el-icon>
+ 閲囪喘璁㈠崟鎵ц姹囨�昏〃
+ </span>
+ </template>
+ </el-tab-pane>
+ <el-tab-pane label="閲囪喘璁㈠崟鎵ц鏄庣粏琛�" name="orderDetail">
+ <template #label>
+ <span class="tab-label">
+ <el-icon><List /></el-icon>
+ 閲囪喘璁㈠崟鎵ц鏄庣粏琛�
+ </span>
+ </template>
+ </el-tab-pane>
+ <el-tab-pane label="閲囪喘涓氬姟姹囨�昏〃" name="businessSummary">
+ <template #label>
+ <span class="tab-label">
+ <el-icon><TrendCharts /></el-icon>
+ 閲囪喘涓氬姟姹囨�昏〃
+ </span>
+ </template>
+ </el-tab-pane>
+ <el-tab-pane label="渚涘簲鍟嗕緵璐ф眹鎬昏〃" name="supplierSummary">
+ <template #label>
+ <span class="tab-label">
+ <el-icon><Shop /></el-icon>
+ 渚涘簲鍟嗕緵璐ф眹鎬昏〃
+ </span>
+ </template>
+ </el-tab-pane>
+ </el-tabs>
+ </el-card>
+
+ <!-- 鏌ヨ鏉′欢 -->
+ <el-card class="search-card" shadow="never">
+ <el-form :model="searchForm" :inline="true" class="search-form">
+ <el-form-item label="鏃堕棿鑼冨洿锛�">
+ <el-date-picker
+ v-model="searchForm.dateRange"
+ type="daterange"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ format="YYYY-MM-DD"
+ value-format="YYYY-MM-DD"
+ style="width: 240px"
+ />
+ </el-form-item>
+ <el-form-item label="渚涘簲鍟嗭細" v-if="activeReport === 'supplierSummary'">
+ <el-select v-model="searchForm.supplierId" placeholder="璇烽�夋嫨渚涘簲鍟�" clearable style="width: 200px">
+ <el-option
+ v-for="supplier in supplierList"
+ :key="supplier.id"
+ :label="supplier.name"
+ :value="supplier.id"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鍟嗗搧绫诲埆锛�" v-if="activeReport === 'businessSummary'">
+ <el-select v-model="searchForm.categoryId" placeholder="璇烽�夋嫨鍟嗗搧绫诲埆" clearable style="width: 200px">
+ <el-option
+ v-for="category in categoryList"
+ :key="category.id"
+ :label="category.name"
+ :value="category.id"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="handleSearch" :loading="loading">
+ <el-icon><Search /></el-icon>
+ 鏌ヨ
+ </el-button>
+ <el-button @click="resetSearch">
+ <el-icon><Refresh /></el-icon>
+ 閲嶇疆
+ </el-button>
+ <el-button type="success" @click="exportReport">
+ <el-icon><Download /></el-icon>
+ 瀵煎嚭
+ </el-button>
+ </el-form-item>
+ </el-form>
+ </el-card>
+
+ <!-- 鎶ヨ〃鍐呭 -->
+ <el-card class="report-content" shadow="never">
+ <!-- 閲囪喘璁㈠崟鎵ц姹囨�昏〃 -->
+ <div v-if="activeReport === 'orderSummary'" class="report-section">
+ <div class="section-header">
+ <h3>閲囪喘璁㈠崟鎵ц姹囨�昏〃</h3>
+ <div class="summary-stats">
+ <div class="stat-item">
+ <span class="stat-label">鎬昏鍗曟暟锛�</span>
+ <span class="stat-value">{{ orderSummaryStats.totalOrders }}</span>
+ </div>
+ <div class="stat-item">
+ <span class="stat-label">鎬婚噾棰濓細</span>
+ <span class="stat-value">楼{{ orderSummaryStats.totalAmount.toLocaleString() }}</span>
+ </div>
+ <div class="stat-item">
+ <span class="stat-label">瀹屾垚鐜囷細</span>
+ <span class="stat-value">{{ orderSummaryStats.completionRate }}%</span>
+ </div>
+ </div>
+ </div>
+
+ <el-table :data="orderSummaryData" border v-loading="loading" stripe>
+ <el-table-column label="璁㈠崟缂栧彿" prop="orderNo" width="180" fixed="left" />
+ <el-table-column label="渚涘簲鍟嗗悕绉�" prop="supplierName" width="150" />
+ <el-table-column label="璁㈠崟鏃ユ湡" prop="orderDate" width="120" />
+ <el-table-column label="璁″垝浜ゆ湡" prop="plannedDelivery" width="120" />
+ <el-table-column label="瀹為檯浜ゆ湡" prop="actualDelivery" width="120" />
+ <el-table-column label="璁㈠崟閲戦" prop="orderAmount" width="120">
+ <template #default="{ row }">楼{{ row.orderAmount.toLocaleString() }}</template>
+ </el-table-column>
+ <el-table-column label="宸蹭粯閲戦" prop="paidAmount" width="120">
+ <template #default="{ row }">楼{{ row.paidAmount.toLocaleString() }}</template>
+ </el-table-column>
+ <el-table-column label="瀹屾垚鐘舵��" prop="status" width="100">
+ <template #default="{ row }">
+ <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="瀹屾垚鐜�" prop="completionRate" width="100">
+ <template #default="{ row }">{{ row.completionRate }}%</template>
+ </el-table-column>
+ <el-table-column label="寤惰繜澶╂暟" prop="delayDays" width="100">
+ <template #default="{ row }">
+ <span :class="{ 'delay-text': row.delayDays > 0 }">{{ row.delayDays }}</span>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+
+ <!-- 閲囪喘璁㈠崟鎵ц鏄庣粏琛� -->
+ <div v-if="activeReport === 'orderDetail'" class="report-section">
+ <div class="section-header">
+ <h3>閲囪喘璁㈠崟鎵ц鏄庣粏琛�</h3>
+ <div class="summary-stats">
+ <div class="stat-item">
+ <span class="stat-label">鏄庣粏鏉℃暟锛�</span>
+ <span class="stat-value">{{ orderDetailStats.totalItems }}</span>
+ </div>
+ <div class="stat-item">
+ <span class="stat-label">宸叉敹璐э細</span>
+ <span class="stat-value">{{ orderDetailStats.receivedItems }}</span>
+ </div>
+ <div class="stat-item">
+ <span class="stat-label">寰呮敹璐э細</span>
+ <span class="stat-value">{{ orderDetailStats.pendingItems }}</span>
+ </div>
+ </div>
+ </div>
+
+ <el-table :data="orderDetailData" border v-loading="loading" stripe>
+ <el-table-column label="璁㈠崟缂栧彿" prop="orderNo" width="150" fixed="left" />
+ <el-table-column label="鍟嗗搧缂栫爜" prop="productCode" width="120" />
+ <el-table-column label="鍟嗗搧鍚嶇О" prop="productName" width="200" />
+ <el-table-column label="瑙勬牸鍨嬪彿" prop="specification" width="150" />
+ <el-table-column label="鍗曚綅" prop="unit" width="80" />
+ <el-table-column label="璁″垝鏁伴噺" prop="plannedQuantity" width="100" />
+ <el-table-column label="宸叉敹璐ф暟閲�" prop="receivedQuantity" width="120" />
+ <el-table-column label="寰呮敹璐ф暟閲�" prop="pendingQuantity" width="120" />
+ <el-table-column label="鍗曚环" prop="unitPrice" width="100">
+ <template #default="{ row }">楼{{ row.unitPrice.toFixed(2) }}</template>
+ </el-table-column>
+ <el-table-column label="灏忚" prop="subtotal" width="120">
+ <template #default="{ row }">楼{{ row.subtotal.toLocaleString() }}</template>
+ </el-table-column>
+ <el-table-column label="鏀惰揣鐘舵��" prop="status" width="100">
+ <template #default="{ row }">
+ <el-tag :type="getReceiptStatusType(row.status)">{{ getReceiptStatusText(row.status) }}</el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="鏈�鍚庢敹璐ф棩鏈�" prop="lastReceiptDate" width="120" />
+ </el-table>
+ </div>
+
+ <!-- 閲囪喘涓氬姟姹囨�昏〃 -->
+ <div v-if="activeReport === 'businessSummary'" class="report-section">
+ <div class="section-header">
+ <h3>閲囪喘涓氬姟姹囨�昏〃</h3>
+ <div class="summary-stats">
+ <div class="stat-item">
+ <span class="stat-label">閲囪喘鎬婚锛�</span>
+ <span class="stat-value">楼{{ businessSummaryStats.totalAmount.toLocaleString() }}</span>
+ </div>
+ <div class="stat-item">
+ <span class="stat-label">鍟嗗搧绉嶇被锛�</span>
+ <span class="stat-value">{{ businessSummaryStats.productTypes }}</span>
+ </div>
+ <div class="stat-item">
+ <span class="stat-label">渚涘簲鍟嗘暟锛�</span>
+ <span class="stat-value">{{ businessSummaryStats.supplierCount }}</span>
+ </div>
+ </div>
+ </div>
+
+ <el-table :data="businessSummaryData" border v-loading="loading" stripe>
+ <el-table-column label="鍟嗗搧绫诲埆" prop="category" width="150" fixed="left" />
+ <el-table-column label="鍟嗗搧缂栫爜" prop="productCode" width="120" />
+ <el-table-column label="鍟嗗搧鍚嶇О" prop="productName" width="200" />
+ <el-table-column label="瑙勬牸鍨嬪彿" prop="specification" width="150" />
+ <el-table-column label="閲囪喘鏁伴噺" prop="purchaseQuantity" width="120" />
+ <el-table-column label="閲囪喘閲戦" prop="purchaseAmount" width="120">
+ <template #default="{ row }">楼{{ row.purchaseAmount.toLocaleString() }}</template>
+ </el-table-column>
+ <el-table-column label="骞冲潎鍗曚环" prop="avgPrice" width="100">
+ <template #default="{ row }">楼{{ row.avgPrice.toFixed(2) }}</template>
+ </el-table-column>
+ <el-table-column label="閲囪喘娆℃暟" prop="purchaseCount" width="100" />
+ <el-table-column label="涓昏渚涘簲鍟�" prop="mainSupplier" width="150" />
+ <el-table-column label="鏈�鍚庨噰璐棩鏈�" prop="lastPurchaseDate" width="120" />
+ </el-table>
+ </div>
+
+ <!-- 渚涘簲鍟嗕緵璐ф眹鎬昏〃 -->
+ <div v-if="activeReport === 'supplierSummary'" class="report-section">
+ <div class="section-header">
+ <h3>渚涘簲鍟嗕緵璐ф眹鎬昏〃</h3>
+ <div class="summary-stats">
+ <div class="stat-item">
+ <span class="stat-label">渚涘簲鍟嗘�绘暟锛�</span>
+ <span class="stat-value">{{ supplierSummaryStats.totalSuppliers }}</span>
+ </div>
+ <div class="stat-item">
+ <span class="stat-label">渚涜揣鎬婚锛�</span>
+ <span class="stat-value">楼{{ supplierSummaryStats.totalAmount.toLocaleString() }}</span>
+ </div>
+ <div class="stat-item">
+ <span class="stat-label">骞冲潎璇勫垎锛�</span>
+ <span class="stat-value">{{ supplierSummaryStats.avgRating.toFixed(1) }}</span>
+ </div>
+ </div>
+ </div>
+
+ <el-table :data="supplierSummaryData" border v-loading="loading" stripe>
+ <el-table-column label="渚涘簲鍟嗙紪鐮�" prop="supplierCode" width="120" fixed="left" />
+ <el-table-column label="渚涘簲鍟嗗悕绉�" prop="supplierName" width="200" />
+ <el-table-column label="鑱旂郴浜�" prop="contactPerson" width="120" />
+ <el-table-column label="鑱旂郴鐢佃瘽" prop="phone" width="130" />
+ <el-table-column label="渚涜揣璁㈠崟鏁�" prop="orderCount" width="120" />
+ <el-table-column label="渚涜揣閲戦" prop="supplyAmount" width="120">
+ <template #default="{ row }">楼{{ row.supplyAmount.toLocaleString() }}</template>
+ </el-table-column>
+ <el-table-column label="宸蹭粯閲戦" prop="paidAmount" width="120">
+ <template #default="{ row }">楼{{ row.paidAmount.toLocaleString() }}</template>
+ </el-table-column>
+ <el-table-column label="鏈粯閲戦" prop="unpaidAmount" width="120">
+ <template #default="{ row }">楼{{ row.unpaidAmount.toLocaleString() }}</template>
+ </el-table-column>
+ <el-table-column label="鎸夋椂浜よ揣鐜�" prop="onTimeRate" width="120">
+ <template #default="{ row }">{{ row.onTimeRate }}%</template>
+ </el-table-column>
+ <el-table-column label="璐ㄩ噺璇勫垎" prop="qualityRating" width="100">
+ <template #default="{ row }">
+ <el-rate v-model="row.qualityRating" disabled show-score text-color="#ff9900" />
+ </template>
+ </el-table-column>
+ <el-table-column label="鍚堜綔鐘舵��" prop="status" width="100">
+ <template #default="{ row }">
+ <el-tag :type="getSupplierStatusType(row.status)">{{ getSupplierStatusText(row.status) }}</el-tag>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </el-card>
+ </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Document, List, TrendCharts, Shop, Search, Refresh, Download } from '@element-plus/icons-vue'
+
+// 鍝嶅簲寮忔暟鎹�
+const loading = ref(false)
+const activeReport = ref('orderSummary')
+
+// 鎼滅储琛ㄥ崟
+const searchForm = reactive({
+ dateRange: [],
+ supplierId: '',
+ categoryId: ''
+})
+
+// 渚涘簲鍟嗗垪琛�
+const supplierList = ref([
+ { id: 1, name: '姹熻嫃鍗庤仈鐢靛瓙绉戞妧鏈夐檺鍏徃' },
+ { id: 2, name: '涓婃捣绮惧瘑鏈烘鍒堕�犳湁闄愬叕鍙�' },
+ { id: 3, name: '娣卞湷鏅鸿兘璁惧鏈夐檺鍏徃' },
+ { id: 4, name: '鍖椾含鏂版潗鏂欑鎶�鏈夐檺鍏徃' },
+ { id: 5, name: '骞垮窞鐢靛瓙鍏冨櫒浠舵湁闄愬叕鍙�' }
+])
+
+// 鍟嗗搧绫诲埆鍒楄〃
+const categoryList = ref([
+ { id: 1, name: '鐢靛瓙鍏冨櫒浠�' },
+ { id: 2, name: '鏈烘璁惧' },
+ { id: 3, name: '鍘熸潗鏂�' },
+ { id: 4, name: '鍔炲叕鐢ㄥ搧' },
+ { id: 5, name: '鍖呰鏉愭枡' }
+])
+
+// 缁熻鏁版嵁
+const orderSummaryStats = ref({
+ totalOrders: 156,
+ totalAmount: 2580000,
+ completionRate: 87.5
+})
+
+const orderDetailStats = ref({
+ totalItems: 1248,
+ receivedItems: 1089,
+ pendingItems: 159
+})
+
+const businessSummaryStats = ref({
+ totalAmount: 2580000,
+ productTypes: 89,
+ supplierCount: 25
+})
+
+const supplierSummaryStats = ref({
+ totalSuppliers: 25,
+ totalAmount: 2580000,
+ avgRating: 4.2
+})
+
+// 閲囪喘璁㈠崟鎵ц姹囨�昏〃鏁版嵁
+const orderSummaryData = ref([
+ {
+ orderNo: 'PO20241201001',
+ supplierName: '姹熻嫃鍗庤仈鐢靛瓙绉戞妧鏈夐檺鍏徃',
+ orderDate: '2024-12-01',
+ plannedDelivery: '2024-12-15',
+ actualDelivery: '2024-12-14',
+ orderAmount: 125000,
+ paidAmount: 100000,
+ status: 'completed',
+ completionRate: 100,
+ delayDays: -1
+ },
+ {
+ orderNo: 'PO20241201002',
+ supplierName: '涓婃捣绮惧瘑鏈烘鍒堕�犳湁闄愬叕鍙�',
+ orderDate: '2024-12-02',
+ plannedDelivery: '2024-12-20',
+ actualDelivery: '2024-12-22',
+ orderAmount: 280000,
+ paidAmount: 140000,
+ status: 'partial',
+ completionRate: 75,
+ delayDays: 2
+ },
+ {
+ orderNo: 'PO20241201003',
+ supplierName: '娣卞湷鏅鸿兘璁惧鏈夐檺鍏徃',
+ orderDate: '2024-12-03',
+ plannedDelivery: '2024-12-25',
+ actualDelivery: '',
+ orderAmount: 180000,
+ paidAmount: 0,
+ status: 'pending',
+ completionRate: 0,
+ delayDays: 0
+ },
+ {
+ orderNo: 'PO20241201004',
+ supplierName: '鍖椾含鏂版潗鏂欑鎶�鏈夐檺鍏徃',
+ orderDate: '2024-12-04',
+ plannedDelivery: '2024-12-18',
+ actualDelivery: '2024-12-18',
+ orderAmount: 95000,
+ paidAmount: 95000,
+ status: 'completed',
+ completionRate: 100,
+ delayDays: 0
+ },
+ {
+ orderNo: 'PO20241201005',
+ supplierName: '骞垮窞鐢靛瓙鍏冨櫒浠舵湁闄愬叕鍙�',
+ orderDate: '2024-12-05',
+ plannedDelivery: '2024-12-28',
+ actualDelivery: '',
+ orderAmount: 220000,
+ paidAmount: 0,
+ status: 'pending',
+ completionRate: 0,
+ delayDays: 0
+ }
+])
+
+// 閲囪喘璁㈠崟鎵ц鏄庣粏琛ㄦ暟鎹�
+const orderDetailData = ref([
+ {
+ orderNo: 'PO20241201001',
+ productCode: 'EL001',
+ productName: '鐢甸樆鍣� 1K惟 卤5%',
+ specification: '1/4W 纰宠啘鐢甸樆',
+ unit: '涓�',
+ plannedQuantity: 1000,
+ receivedQuantity: 1000,
+ pendingQuantity: 0,
+ unitPrice: 0.15,
+ subtotal: 150,
+ status: 'completed',
+ lastReceiptDate: '2024-12-14'
+ },
+ {
+ orderNo: 'PO20241201001',
+ productCode: 'EL002',
+ productName: '鐢靛鍣� 100渭F',
+ specification: '25V 閾濈數瑙ｇ數瀹�',
+ unit: '涓�',
+ plannedQuantity: 500,
+ receivedQuantity: 500,
+ pendingQuantity: 0,
+ unitPrice: 0.85,
+ subtotal: 425,
+ status: 'completed',
+ lastReceiptDate: '2024-12-14'
+ },
+ {
+ orderNo: 'PO20241201002',
+ productCode: 'ME001',
+ productName: '绮惧瘑杞存壙',
+ specification: '6205-2RS 娣辨矡鐞冭酱鎵�',
+ unit: '涓�',
+ plannedQuantity: 200,
+ receivedQuantity: 150,
+ pendingQuantity: 50,
+ unitPrice: 25.5,
+ subtotal: 5100,
+ status: 'partial',
+ lastReceiptDate: '2024-12-20'
+ },
+ {
+ orderNo: 'PO20241201002',
+ productCode: 'ME002',
+ productName: '涓嶉攬閽㈣灪涓�',
+ specification: 'M8脳20 304涓嶉攬閽�',
+ unit: '涓�',
+ plannedQuantity: 1000,
+ receivedQuantity: 1000,
+ pendingQuantity: 0,
+ unitPrice: 0.8,
+ subtotal: 800,
+ status: 'completed',
+ lastReceiptDate: '2024-12-20'
+ },
+ {
+ orderNo: 'PO20241201003',
+ productCode: 'SM001',
+ productName: '鏅鸿兘浼犳劅鍣�',
+ specification: '娓╁害浼犳劅鍣� DS18B20',
+ unit: '涓�',
+ plannedQuantity: 300,
+ receivedQuantity: 0,
+ pendingQuantity: 300,
+ unitPrice: 12.5,
+ subtotal: 3750,
+ status: 'pending',
+ lastReceiptDate: ''
+ }
+])
+
+// 閲囪喘涓氬姟姹囨�昏〃鏁版嵁
+const businessSummaryData = ref([
+ {
+ category: '鐢靛瓙鍏冨櫒浠�',
+ productCode: 'EL001',
+ productName: '鐢甸樆鍣� 1K惟 卤5%',
+ specification: '1/4W 纰宠啘鐢甸樆',
+ purchaseQuantity: 5000,
+ purchaseAmount: 750,
+ avgPrice: 0.15,
+ purchaseCount: 8,
+ mainSupplier: '姹熻嫃鍗庤仈鐢靛瓙绉戞妧鏈夐檺鍏徃',
+ lastPurchaseDate: '2024-12-01'
+ },
+ {
+ category: '鐢靛瓙鍏冨櫒浠�',
+ productCode: 'EL002',
+ productName: '鐢靛鍣� 100渭F',
+ specification: '25V 閾濈數瑙ｇ數瀹�',
+ purchaseQuantity: 2500,
+ purchaseAmount: 2125,
+ avgPrice: 0.85,
+ purchaseCount: 6,
+ mainSupplier: '姹熻嫃鍗庤仈鐢靛瓙绉戞妧鏈夐檺鍏徃',
+ lastPurchaseDate: '2024-12-01'
+ },
+ {
+ category: '鏈烘璁惧',
+ productCode: 'ME001',
+ productName: '绮惧瘑杞存壙',
+ specification: '6205-2RS 娣辨矡鐞冭酱鎵�',
+ purchaseQuantity: 800,
+ purchaseAmount: 20400,
+ avgPrice: 25.5,
+ purchaseCount: 4,
+ mainSupplier: '涓婃捣绮惧瘑鏈烘鍒堕�犳湁闄愬叕鍙�',
+ lastPurchaseDate: '2024-12-02'
+ },
+ {
+ category: '鏈烘璁惧',
+ productCode: 'ME002',
+ productName: '涓嶉攬閽㈣灪涓�',
+ specification: 'M8脳20 304涓嶉攬閽�',
+ purchaseQuantity: 5000,
+ purchaseAmount: 4000,
+ avgPrice: 0.8,
+ purchaseCount: 12,
+ mainSupplier: '涓婃捣绮惧瘑鏈烘鍒堕�犳湁闄愬叕鍙�',
+ lastPurchaseDate: '2024-12-02'
+ },
+ {
+ category: '鏅鸿兘璁惧',
+ productCode: 'SM001',
+ productName: '鏅鸿兘浼犳劅鍣�',
+ specification: '娓╁害浼犳劅鍣� DS18B20',
+ purchaseQuantity: 1200,
+ purchaseAmount: 15000,
+ avgPrice: 12.5,
+ purchaseCount: 5,
+ mainSupplier: '娣卞湷鏅鸿兘璁惧鏈夐檺鍏徃',
+ lastPurchaseDate: '2024-12-03'
+ }
+])
+
+// 渚涘簲鍟嗕緵璐ф眹鎬昏〃鏁版嵁
+const supplierSummaryData = ref([
+ {
+ supplierCode: 'SUP001',
+ supplierName: '姹熻嫃鍗庤仈鐢靛瓙绉戞妧鏈夐檺鍏徃',
+ contactPerson: '寮犵粡鐞�',
+ phone: '0512-88888888',
+ orderCount: 45,
+ supplyAmount: 850000,
+ paidAmount: 680000,
+ unpaidAmount: 170000,
+ onTimeRate: 95,
+ qualityRating: 4.5,
+ status: 'active'
+ },
+ {
+ supplierCode: 'SUP002',
+ supplierName: '涓婃捣绮惧瘑鏈烘鍒堕�犳湁闄愬叕鍙�',
+ contactPerson: '鏉庢��',
+ phone: '021-66666666',
+ orderCount: 32,
+ supplyAmount: 1200000,
+ paidAmount: 900000,
+ unpaidAmount: 300000,
+ onTimeRate: 88,
+ qualityRating: 4.2,
+ status: 'active'
+ },
+ {
+ supplierCode: 'SUP003',
+ supplierName: '娣卞湷鏅鸿兘璁惧鏈夐檺鍏徃',
+ contactPerson: '鐜嬪伐绋嬪笀',
+ phone: '0755-77777777',
+ orderCount: 28,
+ supplyAmount: 680000,
+ paidAmount: 400000,
+ unpaidAmount: 280000,
+ onTimeRate: 92,
+ qualityRating: 4.3,
+ status: 'active'
+ },
+ {
+ supplierCode: 'SUP004',
+ supplierName: '鍖椾含鏂版潗鏂欑鎶�鏈夐檺鍏徃',
+ contactPerson: '闄堝崥澹�',
+ phone: '010-55555555',
+ orderCount: 18,
+ supplyAmount: 320000,
+ paidAmount: 250000,
+ unpaidAmount: 70000,
+ onTimeRate: 85,
+ qualityRating: 4.0,
+ status: 'active'
+ },
+ {
+ supplierCode: 'SUP005',
+ supplierName: '骞垮窞鐢靛瓙鍏冨櫒浠舵湁闄愬叕鍙�',
+ contactPerson: '鍒樼粡鐞�',
+ phone: '020-44444444',
+ orderCount: 22,
+ supplyAmount: 480000,
+ paidAmount: 200000,
+ unpaidAmount: 280000,
+ onTimeRate: 78,
+ qualityRating: 3.8,
+ status: 'warning'
+ }
+])
+
+// 鏂规硶
+const handleReportChange = (tabName) => {
+ activeReport.value = tabName
+ handleSearch()
+}
+
+const handleSearch = () => {
+ loading.value = true
+ // 妯℃嫙API璋冪敤
+ setTimeout(() => {
+ loading.value = false
+ ElMessage.success('鏌ヨ瀹屾垚')
+ }, 1000)
+}
+
+const resetSearch = () => {
+ Object.assign(searchForm, {
+ dateRange: [],
+ supplierId: '',
+ categoryId: ''
+ })
+ handleSearch()
+}
+
+const exportReport = () => {
+ ElMessage.success('瀵煎嚭鍔熻兘寮�鍙戜腑...')
+}
+
+// 鐘舵�佺浉鍏虫柟娉�
+const getStatusType = (status) => {
+ const statusMap = {
+ completed: 'success',
+ partial: 'warning',
+ pending: 'info'
+ }
+ return statusMap[status] || 'info'
+}
+
+const getStatusText = (status) => {
+ const statusMap = {
+ completed: '宸插畬鎴�',
+ partial: '閮ㄥ垎瀹屾垚',
+ pending: '寰呮墽琛�'
+ }
+ return statusMap[status] || '鏈煡'
+}
+
+const getReceiptStatusType = (status) => {
+ const statusMap = {
+ completed: 'success',
+ partial: 'warning',
+ pending: 'info'
+ }
+ return statusMap[status] || 'info'
+}
+
+const getReceiptStatusText = (status) => {
+ const statusMap = {
+ completed: '宸叉敹璐�',
+ partial: '閮ㄥ垎鏀惰揣',
+ pending: '寰呮敹璐�'
+ }
+ return statusMap[status] || '鏈煡'
+}
+
+const getSupplierStatusType = (status) => {
+ const statusMap = {
+ active: 'success',
+ warning: 'warning',
+ inactive: 'info'
+ }
+ return statusMap[status] || 'info'
+}
+
+const getSupplierStatusText = (status) => {
+ const statusMap = {
+ active: '姝ｅ父鍚堜綔',
+ warning: '闇�鍏虫敞',
+ inactive: '鏆傚仠鍚堜綔'
+ }
+ return statusMap[status] || '鏈煡'
+}
+
+onMounted(() => {
+ // 璁剧疆榛樿鏃堕棿鑼冨洿涓烘渶杩�30澶�
+ const endDate = new Date()
+ const startDate = new Date()
+ startDate.setDate(startDate.getDate() - 30)
+
+ searchForm.dateRange = [
+ startDate.toISOString().split('T')[0],
+ endDate.toISOString().split('T')[0]
+ ]
+})
+</script>
+
+<style scoped>
+.app-container {
+ padding: 20px;
+ background-color: #f5f7fa;
+ min-height: 100vh;
+}
+
+.page-header {
+ text-align: center;
+ margin-bottom: 20px;
+ padding: 20px;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ border-radius: 10px;
+ color: white;
+}
+
+.page-header h2 {
+ margin: 0 0 10px 0;
+ font-size: 28px;
+ font-weight: 600;
+}
+
+.page-header p {
+ margin: 0;
+ font-size: 16px;
+ opacity: 0.9;
+}
+
+.report-selector {
+ margin-bottom: 20px;
+ border-radius: 8px;
+}
+
+.tab-label {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.search-card {
+ margin-bottom: 20px;
+ border-radius: 8px;
+}
+
+.search-form {
+ margin-bottom: 0;
+}
+
+.report-content {
+ border-radius: 8px;
+}
+
+.report-section {
+ min-height: 400px;
+}
+
+.section-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+ padding-bottom: 15px;
+ border-bottom: 2px solid #e4e7ed;
+}
+
+.section-header h3 {
+ margin: 0;
+ font-size: 20px;
+ font-weight: 600;
+ color: #303133;
+}
+
+.summary-stats {
+ display: flex;
+ gap: 30px;
+}
+
+.stat-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.stat-label {
+ font-size: 14px;
+ color: #606266;
+ margin-bottom: 5px;
+}
+
+.stat-value {
+ font-size: 18px;
+ font-weight: 600;
+ color: #409EFF;
+}
+
+.delay-text {
+ color: #F56C6C;
+ font-weight: 600;
+}
+
+:deep(.el-table) {
+ border-radius: 8px;
+ overflow: hidden;
+}
+
+:deep(.el-table th) {
+ background-color: #f8f9fa;
+ color: #606266;
+ font-weight: 600;
+}
+
+:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
+ background-color: #fafafa;
+}
+
+:deep(.el-tabs__header) {
+ margin-bottom: 0;
+}
+
+:deep(.el-tabs__nav-wrap) {
+ padding: 0 20px;
+}
+
+:deep(.el-tabs__item) {
+ font-size: 16px;
+ font-weight: 500;
+}
+
+:deep(.el-tabs__item.is-active) {
+ color: #409EFF;
+}
+
+:deep(.el-rate) {
+ display: flex;
+ align-items: center;
+}
+
+:deep(.el-rate__text) {
+ margin-left: 8px;
+ font-size: 14px;
+ color: #606266;
+}
+</style>
--
Gitblit v1.9.3