From 5106cfcdaae5c43b50f19b447ca8c53957f667d2 Mon Sep 17 00:00:00 2001
From: lewis_yan <lewis_yan@avc.co>
Date: Wed, 1 Apr 2026 19:10:31 +0800
Subject: [PATCH] feat(dashboard): add buyer/supplier dashboard pages

---
 .../pisadmin/dashboard/BuyerDashboard.vue     | 121 ++++++++++++++++++
 .../pisadmin/dashboard/SupplierDashboard.vue  | 121 ++++++++++++++++++
 web/src/views/pisadmin/dashboard/index.vue    |  45 +++++++
 3 files changed, 287 insertions(+)
 create mode 100644 web/src/views/pisadmin/dashboard/BuyerDashboard.vue
 create mode 100644 web/src/views/pisadmin/dashboard/SupplierDashboard.vue
 create mode 100644 web/src/views/pisadmin/dashboard/index.vue

diff --git a/web/src/views/pisadmin/dashboard/BuyerDashboard.vue b/web/src/views/pisadmin/dashboard/BuyerDashboard.vue
new file mode 100644
index 0000000..4888d69
--- /dev/null
+++ b/web/src/views/pisadmin/dashboard/BuyerDashboard.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="buyer-dashboard">
+    <div class="header">
+      <h2>采购方看板</h2>
+      <span class="date">{{ currentDate }}</span>
+    </div>
+
+    <!-- KPI Cards -->
+    <el-row :gutter="16" class="kpi-row">
+      <el-col :span="6">
+        <KpiCard
+          :value="kpi.total_inquiries"
+          label="询价单总数"
+          icon="fa fa-file-text-o"
+          icon-bg="#e6f7ff"
+          icon-color="#1890ff"
+        />
+      </el-col>
+      <el-col :span="6">
+        <KpiCard
+          :value="kpi.pending_inquiries"
+          label="待报价询价单"
+          icon="fa fa-clock-o"
+          icon-bg="#fff7e6"
+          icon-color="#fa8c16"
+        />
+      </el-col>
+      <el-col :span="6">
+        <KpiCard
+          :value="kpi.completed_quotes"
+          label="已完成报价"
+          icon="fa fa-check-circle-o"
+          icon-bg="#f6ffed"
+          icon-color="#52c41a"
+        />
+      </el-col>
+      <el-col :span="6">
+        <KpiCard
+          :value="kpi.total_suppliers"
+          label="供应商总数"
+          icon="fa fa-building-o"
+          icon-bg="#f9f0ff"
+          icon-color="#722ed1"
+        />
+      </el-col>
+    </el-row>
+
+    <!-- Main Content -->
+    <el-row :gutter="16" class="main-row">
+      <el-col :span="12">
+        <el-card title="待办任务">
+          <template #header>
+            <span>待办任务</span>
+          </template>
+          <BuyerTaskList :tasks="tasks" />
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card>
+          <template #header>
+            <span>业务趋势</span>
+          </template>
+          <TrendChart :data="trend" type="buyer" />
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- Messages -->
+    <el-card class="message-card">
+      <template #header>
+        <span>消息通知</span>
+      </template>
+      <MessageList :messages="messages" />
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useDashboardStore } from '/@/stores/modules/dashboard';
+import KpiCard from '/@/components/pisadmin/dashboard/KpiCard.vue';
+import TrendChart from '/@/components/pisadmin/dashboard/TrendChart.vue';
+import MessageList from '/@/components/pisadmin/dashboard/MessageList.vue';
+import BuyerTaskList from '/@/components/pisadmin/dashboard/BuyerTaskList.vue';
+
+const store = useDashboardStore();
+const { buyer } = storeToRefs(store);
+
+const kpi = computed(() => buyer.value?.kpi || {
+  total_inquiries: 0,
+  pending_inquiries: 0,
+  completed_quotes: 0,
+  total_suppliers: 0,
+});
+const tasks = computed(() => buyer.value?.tasks || []);
+const trend = computed(() => buyer.value?.trend || []);
+const messages = computed(() => buyer.value?.messages || []);
+
+const currentDate = new Date().toLocaleDateString('zh-CN', {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+});
+</script>
+
+<style scoped lang="scss">
+.buyer-dashboard {
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+    h2 { margin: 0; }
+    .date { color: var(--el-text-color-secondary); }
+  }
+  .kpi-row { margin-bottom: 16px; }
+  .main-row { margin-bottom: 16px; }
+  .message-card { margin-top: 16px; }
+}
+</style>
diff --git a/web/src/views/pisadmin/dashboard/SupplierDashboard.vue b/web/src/views/pisadmin/dashboard/SupplierDashboard.vue
new file mode 100644
index 0000000..abbc0fd
--- /dev/null
+++ b/web/src/views/pisadmin/dashboard/SupplierDashboard.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="supplier-dashboard">
+    <div class="header">
+      <h2>供应商看板</h2>
+      <span class="date">{{ currentDate }}</span>
+    </div>
+
+    <!-- KPI Cards -->
+    <el-row :gutter="16" class="kpi-row">
+      <el-col :span="6">
+        <KpiCard
+          :value="kpi.total_quotes"
+          label="报价单总数"
+          icon="fa fa-file-text-o"
+          icon-bg="#e6f7ff"
+          icon-color="#1890ff"
+        />
+      </el-col>
+      <el-col :span="6">
+        <KpiCard
+          :value="kpi.pending_quotes"
+          label="待报价"
+          icon="fa fa-clock-o"
+          icon-bg="#fff7e6"
+          icon-color="#fa8c16"
+        />
+      </el-col>
+      <el-col :span="6">
+        <KpiCard
+          :value="kpi.won_quotes"
+          label="已中标"
+          icon="fa fa-trophy"
+          icon-bg="#f6ffed"
+          icon-color="#52c41a"
+        />
+      </el-col>
+      <el-col :span="6">
+        <KpiCard
+          :value="kpi.conversion_rate + '%'"
+          label="中标率"
+          icon="fa fa-percent"
+          icon-bg="#f9f0ff"
+          icon-color="#722ed1"
+        />
+      </el-col>
+    </el-row>
+
+    <!-- Main Content -->
+    <el-row :gutter="16" class="main-row">
+      <el-col :span="12">
+        <el-card>
+          <template #header>
+            <span>待报价清单</span>
+          </template>
+          <SupplierQuoteList :quotes="pendingQuotes" />
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card>
+          <template #header>
+            <span>报价与中标趋势</span>
+          </template>
+          <TrendChart :data="trend" type="supplier" />
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- Messages -->
+    <el-card class="message-card">
+      <template #header>
+        <span>消息通知</span>
+      </template>
+      <MessageList :messages="messages" />
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useDashboardStore } from '/@/stores/modules/dashboard';
+import KpiCard from '/@/components/pisadmin/dashboard/KpiCard.vue';
+import TrendChart from '/@/components/pisadmin/dashboard/TrendChart.vue';
+import MessageList from '/@/components/pisadmin/dashboard/MessageList.vue';
+import SupplierQuoteList from '/@/components/pisadmin/dashboard/SupplierQuoteList.vue';
+
+const store = useDashboardStore();
+const { supplier } = storeToRefs(store);
+
+const kpi = computed(() => supplier.value?.kpi || {
+  total_quotes: 0,
+  pending_quotes: 0,
+  won_quotes: 0,
+  conversion_rate: 0,
+});
+const pendingQuotes = computed(() => supplier.value?.pending_quotes || []);
+const trend = computed(() => supplier.value?.trend || []);
+const messages = computed(() => supplier.value?.messages || []);
+
+const currentDate = new Date().toLocaleDateString('zh-CN', {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+});
+</script>
+
+<style scoped lang="scss">
+.supplier-dashboard {
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+    h2 { margin: 0; }
+    .date { color: var(--el-text-color-secondary); }
+  }
+  .kpi-row { margin-bottom: 16px; }
+  .main-row { margin-bottom: 16px; }
+  .message-card { margin-top: 16px; }
+}
+</style>
diff --git a/web/src/views/pisadmin/dashboard/index.vue b/web/src/views/pisadmin/dashboard/index.vue
new file mode 100644
index 0000000..f9f183e
--- /dev/null
+++ b/web/src/views/pisadmin/dashboard/index.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="dashboard-index">
+    <BuyerDashboard v-if="hasBuyerRole && !hasSupplierRole" />
+    <SupplierDashboard v-else-if="hasSupplierRole && !hasBuyerRole" />
+    <div v-else-if="hasBothRoles" class="role-select">
+      <el-radio-group v-model="currentRole">
+        <el-radio-button label="buyer">采购方看板</el-radio-button>
+        <el-radio-button label="supplier">供应商看板</el-radio-button>
+      </el-radio-group>
+      <BuyerDashboard v-if="currentRole === 'buyer'" />
+      <SupplierDashboard v-else />
+    </div>
+    <el-empty v-else description="您暂无看板权限" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useDashboardStore } from '/@/stores/modules/dashboard';
+import BuyerDashboard from './BuyerDashboard.vue';
+import SupplierDashboard from './SupplierDashboard.vue';
+
+const store = useDashboardStore();
+const { buyer, supplier } = storeToRefs(store);
+
+const currentRole = ref('buyer');
+
+const hasBuyerRole = computed(() => !!buyer.value);
+const hasSupplierRole = computed(() => !!supplier.value);
+const hasBothRoles = computed(() => hasBuyerRole.value && hasSupplierRole.value);
+
+store.fetchDashboard();
+</script>
+
+<style scoped lang="scss">
+.dashboard-index {
+  padding: 20px;
+  .role-select {
+    .el-radio-group {
+      margin-bottom: 20px;
+    }
+  }
+}
+</style>