From 755836d52073f31670ccfa7fb5ad3d999e037184 Mon Sep 17 00:00:00 2001
From: mayiming <1627832236@qq.com>
Date: Wed, 10 Dec 2025 18:34:41 +0800
Subject: [PATCH] Implement ISRM and SRM management views, including internal
 demand, purchase, inventory, supplier, contract, evaluation, and report
 functionalities. Update router configuration to support new views and enhance
 layout with appropriate icons and styles.

---
 src/layouts/Layout.vue                   |  68 +++++++
 src/router/index.ts                      |  87 ++++++++-
 src/views/isrm/InternalContractView.vue  | 177 +++++++++++++++++++
 src/views/isrm/InternalDemandView.vue    | 214 +++++++++++++++++++++++
 src/views/isrm/InternalInventoryView.vue | 208 ++++++++++++++++++++++
 src/views/isrm/InternalPurchaseView.vue  | 186 ++++++++++++++++++++
 src/views/isrm/InternalReportView.vue    | 201 +++++++++++++++++++++
 src/views/isrm/InternalSupplierView.vue  | 183 +++++++++++++++++++
 src/views/srm/ContractView.vue           | 173 ++++++++++++++++++
 src/views/srm/EvaluationView.vue         | 210 ++++++++++++++++++++++
 src/views/srm/InquiryView.vue            | 178 +++++++++++++++++++
 src/views/srm/PerformanceView.vue        | 165 +++++++++++++++++
 src/views/srm/PurchaseView.vue           | 182 +++++++++++++++++++
 src/views/srm/ReportView.vue             | 200 +++++++++++++++++++++
 src/views/srm/SupplierView.vue           | 197 +++++++++++++++++++++
 15 files changed, 2627 insertions(+), 2 deletions(-)
 create mode 100644 src/views/isrm/InternalContractView.vue
 create mode 100644 src/views/isrm/InternalDemandView.vue
 create mode 100644 src/views/isrm/InternalInventoryView.vue
 create mode 100644 src/views/isrm/InternalPurchaseView.vue
 create mode 100644 src/views/isrm/InternalReportView.vue
 create mode 100644 src/views/isrm/InternalSupplierView.vue
 create mode 100644 src/views/srm/ContractView.vue
 create mode 100644 src/views/srm/EvaluationView.vue
 create mode 100644 src/views/srm/InquiryView.vue
 create mode 100644 src/views/srm/PerformanceView.vue
 create mode 100644 src/views/srm/PurchaseView.vue
 create mode 100644 src/views/srm/ReportView.vue
 create mode 100644 src/views/srm/SupplierView.vue

diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue
index c0f2735..a5ee180 100644
--- a/src/layouts/Layout.vue
+++ b/src/layouts/Layout.vue
@@ -20,6 +20,10 @@ import {
   List,
   ChatLineRound,
   DataAnalysis,
+  Box,
+  Connection,
+  Star,
+  Search,
 } from '@element-plus/icons-vue'
 
 const router = useRouter()
@@ -163,6 +167,70 @@ const handleCommand = (command: string) => {
               <template #title>报表统计</template>
             </el-menu-item>
           </el-sub-menu>
+          <el-sub-menu index="isrm">
+            <template #title>
+              <el-icon><Connection /></el-icon>
+              <span>ISRM管理</span>
+            </template>
+            <el-menu-item index="/isrm/demand">
+              <el-icon><Document /></el-icon>
+              <template #title>内部需求</template>
+            </el-menu-item>
+            <el-menu-item index="/isrm/purchase">
+              <el-icon><ShoppingCart /></el-icon>
+              <template #title>内部采购</template>
+            </el-menu-item>
+            <el-menu-item index="/isrm/inventory">
+              <el-icon><Box /></el-icon>
+              <template #title>内部库存</template>
+            </el-menu-item>
+            <el-menu-item index="/isrm/supplier">
+              <el-icon><User /></el-icon>
+              <template #title>内部供应商</template>
+            </el-menu-item>
+            <el-menu-item index="/isrm/contract">
+              <el-icon><Files /></el-icon>
+              <template #title>内部合同</template>
+            </el-menu-item>
+            <el-menu-item index="/isrm/report">
+              <el-icon><DataAnalysis /></el-icon>
+              <template #title>ISRM报表</template>
+            </el-menu-item>
+          </el-sub-menu>
+          <el-sub-menu index="srm">
+            <template #title>
+              <el-icon><ShoppingCart /></el-icon>
+              <span>SRM管理</span>
+            </template>
+            <el-menu-item index="/srm/supplier">
+              <el-icon><User /></el-icon>
+              <template #title>供应商管理</template>
+            </el-menu-item>
+            <el-menu-item index="/srm/purchase">
+              <el-icon><ShoppingCart /></el-icon>
+              <template #title>采购管理</template>
+            </el-menu-item>
+            <el-menu-item index="/srm/inquiry">
+              <el-icon><Search /></el-icon>
+              <template #title>询价管理</template>
+            </el-menu-item>
+            <el-menu-item index="/srm/contract">
+              <el-icon><Files /></el-icon>
+              <template #title>合同管理</template>
+            </el-menu-item>
+            <el-menu-item index="/srm/evaluation">
+              <el-icon><Star /></el-icon>
+              <template #title>供应商评估</template>
+            </el-menu-item>
+            <el-menu-item index="/srm/performance">
+              <el-icon><TrendCharts /></el-icon>
+              <template #title>供应商绩效</template>
+            </el-menu-item>
+            <el-menu-item index="/srm/report">
+              <el-icon><DataAnalysis /></el-icon>
+              <template #title>SRM报表</template>
+            </el-menu-item>
+          </el-sub-menu>
           <el-menu-item index="/users">
             <el-icon><User /></el-icon>
             <template #title>用户管理</template>
diff --git a/src/router/index.ts b/src/router/index.ts
index 33eb124..8c091bd 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,6 +3,7 @@ import Layout from '@/layouts/Layout.vue'
 import DashboardView from '@/views/DashboardView.vue'
 import UserManagementView from '@/views/UserManagementView.vue'
 import SettingsView from '@/views/SettingsView.vue'
+// CRM
 import CustomerListView from '@/views/crm/CustomerListView.vue'
 import OpportunityView from '@/views/crm/OpportunityView.vue'
 import FunnelView from '@/views/crm/FunnelView.vue'
@@ -12,7 +13,22 @@ import ProductView from '@/views/crm/ProductView.vue'
 import ContractView from '@/views/crm/ContractView.vue'
 import TaskView from '@/views/crm/TaskView.vue'
 import CommunicationView from '@/views/crm/CommunicationView.vue'
-import ReportView from '@/views/crm/ReportView.vue'
+import ReportView as CrmReportView from '@/views/crm/ReportView.vue'
+// ISRM
+import InternalDemandView from '@/views/isrm/InternalDemandView.vue'
+import InternalPurchaseView from '@/views/isrm/InternalPurchaseView.vue'
+import InternalInventoryView from '@/views/isrm/InternalInventoryView.vue'
+import InternalSupplierView from '@/views/isrm/InternalSupplierView.vue'
+import InternalContractView from '@/views/isrm/InternalContractView.vue'
+import InternalReportView from '@/views/isrm/InternalReportView.vue'
+// SRM
+import SupplierView from '@/views/srm/SupplierView.vue'
+import PurchaseView from '@/views/srm/PurchaseView.vue'
+import InquiryView from '@/views/srm/InquiryView.vue'
+import ContractView as SrmContractView from '@/views/srm/ContractView.vue'
+import EvaluationView from '@/views/srm/EvaluationView.vue'
+import PerformanceView from '@/views/srm/PerformanceView.vue'
+import ReportView as SrmReportView from '@/views/srm/ReportView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -75,7 +91,74 @@ const router = createRouter({
         {
           path: 'reports',
           name: 'reports',
-          component: ReportView,
+          component: CrmReportView,
+        },
+        // ISRM
+        {
+          path: 'isrm/demand',
+          name: 'isrm-demand',
+          component: InternalDemandView,
+        },
+        {
+          path: 'isrm/purchase',
+          name: 'isrm-purchase',
+          component: InternalPurchaseView,
+        },
+        {
+          path: 'isrm/inventory',
+          name: 'isrm-inventory',
+          component: InternalInventoryView,
+        },
+        {
+          path: 'isrm/supplier',
+          name: 'isrm-supplier',
+          component: InternalSupplierView,
+        },
+        {
+          path: 'isrm/contract',
+          name: 'isrm-contract',
+          component: InternalContractView,
+        },
+        {
+          path: 'isrm/report',
+          name: 'isrm-report',
+          component: InternalReportView,
+        },
+        // SRM
+        {
+          path: 'srm/supplier',
+          name: 'srm-supplier',
+          component: SupplierView,
+        },
+        {
+          path: 'srm/purchase',
+          name: 'srm-purchase',
+          component: PurchaseView,
+        },
+        {
+          path: 'srm/inquiry',
+          name: 'srm-inquiry',
+          component: InquiryView,
+        },
+        {
+          path: 'srm/contract',
+          name: 'srm-contract',
+          component: SrmContractView,
+        },
+        {
+          path: 'srm/evaluation',
+          name: 'srm-evaluation',
+          component: EvaluationView,
+        },
+        {
+          path: 'srm/performance',
+          name: 'srm-performance',
+          component: PerformanceView,
+        },
+        {
+          path: 'srm/report',
+          name: 'srm-report',
+          component: SrmReportView,
         },
         {
           path: 'users',
diff --git a/src/views/isrm/InternalContractView.vue b/src/views/isrm/InternalContractView.vue
new file mode 100644
index 0000000..f398817
--- /dev/null
+++ b/src/views/isrm/InternalContractView.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Plus, Edit, Delete, Search, Document } from '@element-plus/icons-vue'
+
+interface Contract {
+  id: number
+  contractNo: string
+  supplier: string
+  department: string
+  amount: number
+  startDate: string
+  endDate: string
+  status: string
+  createTime: string
+}
+
+const tableData = ref<Contract[]>([
+  {
+    id: 1,
+    contractNo: 'ICT202401001',
+    supplier: '内部供应商A',
+    department: '技术部',
+    amount: 500000,
+    startDate: '2024-01-01',
+    endDate: '2024-12-31',
+    status: '执行中',
+    createTime: '2024-01-01',
+  },
+  {
+    id: 2,
+    contractNo: 'ICT202401002',
+    supplier: '内部供应商B',
+    department: '行政部',
+    amount: 100000,
+    startDate: '2024-01-15',
+    endDate: '2024-12-31',
+    status: '执行中',
+    createTime: '2024-01-15',
+  },
+])
+
+const searchForm = reactive({
+  keyword: '',
+  status: '',
+})
+
+const pagination = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 20,
+})
+
+const getStatusType = (status: string) => {
+  const map: Record<string, string> = {
+    待签署: 'warning',
+    执行中: 'primary',
+    已到期: 'info',
+    已终止: 'danger',
+  }
+  return map[status] || 'info'
+}
+</script>
+
+<template>
+  <div class="contract-view">
+    <el-page-header>
+      <template #content>
+        <span class="page-title">内部合同管理</span>
+      </template>
+    </el-page-header>
+
+    <el-card class="content-card" shadow="hover">
+      <div class="toolbar">
+        <el-form :inline="true" :model="searchForm" class="search-form">
+          <el-form-item label="关键词">
+            <el-input
+              v-model="searchForm.keyword"
+              placeholder="合同编号/供应商名称"
+              clearable
+              style="width: 200px"
+            >
+              <template #prefix>
+                <el-icon><Search /></el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select v-model="searchForm.status" placeholder="全部" clearable style="width: 120px">
+              <el-option label="待签署" value="待签署" />
+              <el-option label="执行中" value="执行中" />
+              <el-option label="已到期" value="已到期" />
+              <el-option label="已终止" value="已终止" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="ElMessage.info('搜索功能')">搜索</el-button>
+            <el-button @click="Object.assign(searchForm, { keyword: '', status: '' })">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <el-button type="primary" :icon="Plus" @click="ElMessage.info('创建合同')">创建合同</el-button>
+      </div>
+
+      <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column prop="contractNo" label="合同编号" width="150" />
+        <el-table-column prop="supplier" label="内部供应商" width="150" />
+        <el-table-column prop="department" label="需求部门" width="120" />
+        <el-table-column prop="amount" label="合同金额" width="120">
+          <template #default="scope">
+            <span style="color: #f56c6c; font-weight: 600">¥{{ scope.row.amount.toLocaleString() }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="startDate" label="开始日期" width="120" />
+        <el-table-column prop="endDate" label="结束日期" width="120" />
+        <el-table-column prop="status" label="状态" width="120">
+          <template #default="scope">
+            <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="120" />
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="scope">
+            <el-button type="primary" link :icon="Document" @click="ElMessage.info('查看合同')">查看</el-button>
+            <el-button type="primary" link :icon="Edit" @click="ElMessage.info('编辑合同')">编辑</el-button>
+            <el-button type="danger" link :icon="Delete" @click="ElMessage.info('删除合同')">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.currentPage"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="pagination.total"
+          layout="total, sizes, prev, pager, next, jumper"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.contract-view {
+  height: 100%;
+}
+
+.page-title {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.content-card {
+  margin-top: 20px;
+  border-radius: 8px;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.search-form {
+  margin: 0;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
+
diff --git a/src/views/isrm/InternalDemandView.vue b/src/views/isrm/InternalDemandView.vue
new file mode 100644
index 0000000..6d2ac45
--- /dev/null
+++ b/src/views/isrm/InternalDemandView.vue
@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Plus, Edit, Delete, Search } from '@element-plus/icons-vue'
+
+interface Demand {
+  id: number
+  demandNo: string
+  department: string
+  item: string
+  quantity: number
+  unit: string
+  priority: string
+  status: string
+  createTime: string
+  expectedDate: string
+}
+
+const tableData = ref<Demand[]>([
+  {
+    id: 1,
+    demandNo: 'DEM202401001',
+    department: '技术部',
+    item: '服务器设备',
+    quantity: 10,
+    unit: '台',
+    priority: '高',
+    status: '待审批',
+    createTime: '2024-01-15',
+    expectedDate: '2024-02-15',
+  },
+  {
+    id: 2,
+    demandNo: 'DEM202401002',
+    department: '行政部',
+    item: '办公用品',
+    quantity: 100,
+    unit: '套',
+    priority: '中',
+    status: '已审批',
+    createTime: '2024-01-14',
+    expectedDate: '2024-01-30',
+  },
+  {
+    id: 3,
+    demandNo: 'DEM202401003',
+    department: '市场部',
+    item: '宣传物料',
+    quantity: 500,
+    unit: '份',
+    priority: '高',
+    status: '采购中',
+    createTime: '2024-01-13',
+    expectedDate: '2024-02-01',
+  },
+])
+
+const searchForm = reactive({
+  keyword: '',
+  department: '',
+  status: '',
+})
+
+const pagination = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 50,
+})
+
+const getPriorityType = (priority: string) => {
+  const map: Record<string, string> = {
+    高: 'danger',
+    中: 'warning',
+    低: 'info',
+  }
+  return map[priority] || 'info'
+}
+
+const getStatusType = (status: string) => {
+  const map: Record<string, string> = {
+    待审批: 'warning',
+    已审批: 'primary',
+    采购中: 'info',
+    已完成: 'success',
+    已取消: 'danger',
+  }
+  return map[status] || 'info'
+}
+</script>
+
+<template>
+  <div class="demand-view">
+    <el-page-header>
+      <template #content>
+        <span class="page-title">内部需求管理</span>
+      </template>
+    </el-page-header>
+
+    <el-card class="content-card" shadow="hover">
+      <div class="toolbar">
+        <el-form :inline="true" :model="searchForm" class="search-form">
+          <el-form-item label="关键词">
+            <el-input
+              v-model="searchForm.keyword"
+              placeholder="需求编号/物品名称"
+              clearable
+              style="width: 200px"
+            >
+              <template #prefix>
+                <el-icon><Search /></el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="部门">
+            <el-select v-model="searchForm.department" placeholder="全部" clearable style="width: 120px">
+              <el-option label="技术部" value="技术部" />
+              <el-option label="行政部" value="行政部" />
+              <el-option label="市场部" value="市场部" />
+              <el-option label="财务部" value="财务部" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select v-model="searchForm.status" placeholder="全部" clearable style="width: 120px">
+              <el-option label="待审批" value="待审批" />
+              <el-option label="已审批" value="已审批" />
+              <el-option label="采购中" value="采购中" />
+              <el-option label="已完成" value="已完成" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="ElMessage.info('搜索功能')">搜索</el-button>
+            <el-button @click="Object.assign(searchForm, { keyword: '', department: '', status: '' })">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <el-button type="primary" :icon="Plus" @click="ElMessage.info('创建需求')">创建需求</el-button>
+      </div>
+
+      <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column prop="demandNo" label="需求编号" width="150" />
+        <el-table-column prop="department" label="申请部门" width="120" />
+        <el-table-column prop="item" label="物品名称" width="150" />
+        <el-table-column prop="quantity" label="数量" width="100">
+          <template #default="scope">
+            <span>{{ scope.row.quantity }} {{ scope.row.unit }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="priority" label="优先级" width="100">
+          <template #default="scope">
+            <el-tag :type="getPriorityType(scope.row.priority)">{{ scope.row.priority }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="100">
+          <template #default="scope">
+            <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="expectedDate" label="期望日期" width="120" />
+        <el-table-column prop="createTime" label="创建时间" width="120" />
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="scope">
+            <el-button type="primary" link :icon="Edit" @click="ElMessage.info('编辑需求')">编辑</el-button>
+            <el-button type="danger" link :icon="Delete" @click="ElMessage.info('删除需求')">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.currentPage"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="pagination.total"
+          layout="total, sizes, prev, pager, next, jumper"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.demand-view {
+  height: 100%;
+}
+
+.page-title {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.content-card {
+  margin-top: 20px;
+  border-radius: 8px;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.search-form {
+  margin: 0;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
+
diff --git a/src/views/isrm/InternalInventoryView.vue b/src/views/isrm/InternalInventoryView.vue
new file mode 100644
index 0000000..37e20be
--- /dev/null
+++ b/src/views/isrm/InternalInventoryView.vue
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Plus, Edit, Delete, Search, Warning } from '@element-plus/icons-vue'
+
+interface Inventory {
+  id: number
+  itemCode: string
+  itemName: string
+  category: string
+  quantity: number
+  unit: string
+  minStock: number
+  maxStock: number
+  location: string
+  status: string
+}
+
+const tableData = ref<Inventory[]>([
+  {
+    id: 1,
+    itemCode: 'ITM001',
+    itemName: '服务器设备',
+    category: 'IT设备',
+    quantity: 50,
+    unit: '台',
+    minStock: 20,
+    maxStock: 100,
+    location: '仓库A-01',
+    status: '正常',
+  },
+  {
+    id: 2,
+    itemCode: 'ITM002',
+    itemName: '办公用品',
+    category: '办公用品',
+    quantity: 200,
+    unit: '套',
+    minStock: 100,
+    maxStock: 500,
+    location: '仓库B-02',
+    status: '正常',
+  },
+  {
+    id: 3,
+    itemCode: 'ITM003',
+    itemName: '宣传物料',
+    category: '市场物料',
+    quantity: 15,
+    unit: '份',
+    minStock: 50,
+    maxStock: 200,
+    location: '仓库C-03',
+    status: '库存不足',
+  },
+])
+
+const searchForm = reactive({
+  keyword: '',
+  category: '',
+  status: '',
+})
+
+const pagination = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 50,
+})
+
+const getStockStatus = (row: Inventory) => {
+  if (row.quantity < row.minStock) return 'danger'
+  if (row.quantity > row.maxStock * 0.9) return 'warning'
+  return 'success'
+}
+
+const getStockStatusText = (row: Inventory) => {
+  if (row.quantity < row.minStock) return '库存不足'
+  if (row.quantity > row.maxStock * 0.9) return '库存过高'
+  return '正常'
+}
+</script>
+
+<template>
+  <div class="inventory-view">
+    <el-page-header>
+      <template #content>
+        <span class="page-title">内部库存管理</span>
+      </template>
+    </el-page-header>
+
+    <el-card class="content-card" shadow="hover">
+      <div class="toolbar">
+        <el-form :inline="true" :model="searchForm" class="search-form">
+          <el-form-item label="关键词">
+            <el-input
+              v-model="searchForm.keyword"
+              placeholder="物品编码/名称"
+              clearable
+              style="width: 200px"
+            >
+              <template #prefix>
+                <el-icon><Search /></el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="分类">
+            <el-select v-model="searchForm.category" placeholder="全部" clearable style="width: 120px">
+              <el-option label="IT设备" value="IT设备" />
+              <el-option label="办公用品" value="办公用品" />
+              <el-option label="市场物料" value="市场物料" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select v-model="searchForm.status" placeholder="全部" clearable style="width: 120px">
+              <el-option label="正常" value="正常" />
+              <el-option label="库存不足" value="库存不足" />
+              <el-option label="库存过高" value="库存过高" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="ElMessage.info('搜索功能')">搜索</el-button>
+            <el-button @click="Object.assign(searchForm, { keyword: '', category: '', status: '' })">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <el-button type="primary" :icon="Plus" @click="ElMessage.info('添加库存')">添加库存</el-button>
+      </div>
+
+      <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column prop="itemCode" label="物品编码" width="120" />
+        <el-table-column prop="itemName" label="物品名称" width="150" />
+        <el-table-column prop="category" label="分类" width="120" />
+        <el-table-column prop="quantity" label="当前库存" width="120">
+          <template #default="scope">
+            <span>{{ scope.row.quantity }} {{ scope.row.unit }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="库存范围" width="150">
+          <template #default="scope">
+            <span style="color: #909399; font-size: 12px">
+              {{ scope.row.minStock }}-{{ scope.row.maxStock }} {{ scope.row.unit }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="location" label="存放位置" width="120" />
+        <el-table-column label="库存状态" width="120">
+          <template #default="scope">
+            <el-tag :type="getStockStatus(scope.row)">
+              <el-icon v-if="getStockStatus(scope.row) === 'danger'" style="margin-right: 5px"><Warning /></el-icon>
+              {{ getStockStatusText(scope.row) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="scope">
+            <el-button type="primary" link :icon="Edit" @click="ElMessage.info('编辑库存')">编辑</el-button>
+            <el-button type="danger" link :icon="Delete" @click="ElMessage.info('删除库存')">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.currentPage"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="pagination.total"
+          layout="total, sizes, prev, pager, next, jumper"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.inventory-view {
+  height: 100%;
+}
+
+.page-title {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.content-card {
+  margin-top: 20px;
+  border-radius: 8px;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.search-form {
+  margin: 0;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
+
diff --git a/src/views/isrm/InternalPurchaseView.vue b/src/views/isrm/InternalPurchaseView.vue
new file mode 100644
index 0000000..9422daf
--- /dev/null
+++ b/src/views/isrm/InternalPurchaseView.vue
@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Plus, Edit, Delete, Search, Document } from '@element-plus/icons-vue'
+
+interface Purchase {
+  id: number
+  purchaseNo: string
+  demandNo: string
+  supplier: string
+  item: string
+  quantity: number
+  unitPrice: number
+  totalAmount: number
+  status: string
+  createTime: string
+}
+
+const tableData = ref<Purchase[]>([
+  {
+    id: 1,
+    purchaseNo: 'PUR202401001',
+    demandNo: 'DEM202401001',
+    supplier: '内部供应商A',
+    item: '服务器设备',
+    quantity: 10,
+    unitPrice: 5000,
+    totalAmount: 50000,
+    status: '待确认',
+    createTime: '2024-01-15',
+  },
+  {
+    id: 2,
+    purchaseNo: 'PUR202401002',
+    demandNo: 'DEM202401002',
+    supplier: '内部供应商B',
+    item: '办公用品',
+    quantity: 100,
+    unitPrice: 50,
+    totalAmount: 5000,
+    status: '已确认',
+    createTime: '2024-01-14',
+  },
+])
+
+const searchForm = reactive({
+  keyword: '',
+  status: '',
+})
+
+const pagination = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 30,
+})
+
+const getStatusType = (status: string) => {
+  const map: Record<string, string> = {
+    待确认: 'warning',
+    已确认: 'primary',
+    已发货: 'info',
+    已完成: 'success',
+    已取消: 'danger',
+  }
+  return map[status] || 'info'
+}
+</script>
+
+<template>
+  <div class="purchase-view">
+    <el-page-header>
+      <template #content>
+        <span class="page-title">内部采购管理</span>
+      </template>
+    </el-page-header>
+
+    <el-card class="content-card" shadow="hover">
+      <div class="toolbar">
+        <el-form :inline="true" :model="searchForm" class="search-form">
+          <el-form-item label="关键词">
+            <el-input
+              v-model="searchForm.keyword"
+              placeholder="采购单号/需求编号"
+              clearable
+              style="width: 200px"
+            >
+              <template #prefix>
+                <el-icon><Search /></el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select v-model="searchForm.status" placeholder="全部" clearable style="width: 120px">
+              <el-option label="待确认" value="待确认" />
+              <el-option label="已确认" value="已确认" />
+              <el-option label="已发货" value="已发货" />
+              <el-option label="已完成" value="已完成" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="ElMessage.info('搜索功能')">搜索</el-button>
+            <el-button @click="Object.assign(searchForm, { keyword: '', status: '' })">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <el-button type="primary" :icon="Plus" @click="ElMessage.info('创建采购单')">创建采购单</el-button>
+      </div>
+
+      <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column prop="purchaseNo" label="采购单号" width="150" />
+        <el-table-column prop="demandNo" label="需求编号" width="150" />
+        <el-table-column prop="supplier" label="内部供应商" width="150" />
+        <el-table-column prop="item" label="物品名称" width="150" />
+        <el-table-column prop="quantity" label="数量" width="100" />
+        <el-table-column prop="unitPrice" label="单价" width="100">
+          <template #default="scope">
+            <span>¥{{ scope.row.unitPrice }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="totalAmount" label="总金额" width="120">
+          <template #default="scope">
+            <span style="color: #f56c6c; font-weight: 600">¥{{ scope.row.totalAmount.toLocaleString() }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="100">
+          <template #default="scope">
+            <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="120" />
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="scope">
+            <el-button type="primary" link :icon="Document" @click="ElMessage.info('查看详情')">查看</el-button>
+            <el-button type="primary" link :icon="Edit" @click="ElMessage.info('编辑采购单')">编辑</el-button>
+            <el-button type="danger" link :icon="Delete" @click="ElMessage.info('删除采购单')">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.currentPage"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="pagination.total"
+          layout="total, sizes, prev, pager, next, jumper"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.purchase-view {
+  height: 100%;
+}
+
+.page-title {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.content-card {
+  margin-top: 20px;
+  border-radius: 8px;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.search-form {
+  margin: 0;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
+
diff --git a/src/views/isrm/InternalReportView.vue b/src/views/isrm/InternalReportView.vue
new file mode 100644
index 0000000..5864fc3
--- /dev/null
+++ b/src/views/isrm/InternalReportView.vue
@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Document, ShoppingCart, Box, Money } from '@element-plus/icons-vue'
+
+const reportData = {
+  demands: {
+    total: 45,
+    pending: 8,
+    approved: 25,
+    completed: 12,
+  },
+  purchases: {
+    total: 32,
+    amount: 1200000,
+    monthly: 500000,
+  },
+  inventory: {
+    total: 156,
+    lowStock: 12,
+    normal: 130,
+    highStock: 14,
+  },
+  suppliers: {
+    total: 20,
+    active: 18,
+    inactive: 2,
+  },
+}
+
+const monthlyData = [
+  { month: '1月', demands: 8, purchases: 6, amount: 400000 },
+  { month: '2月', demands: 10, purchases: 8, amount: 450000 },
+  { month: '3月', demands: 12, purchases: 10, amount: 500000 },
+  { month: '4月', demands: 11, purchases: 9, amount: 480000 },
+  { month: '5月', demands: 13, purchases: 11, amount: 520000 },
+  { month: '6月', demands: 14, purchases: 12, amount: 550000 },
+]
+</script>
+
+<template>
+  <div class="report-view">
+    <el-page-header>
+      <template #content>
+        <span class="page-title">ISRM 报表统计</span>
+      </template>
+    </el-page-header>
+
+    <el-row :gutter="20" class="stats-row">
+      <el-col :span="6">
+        <el-card shadow="hover" class="stat-card">
+          <div class="stat-content">
+            <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)">
+              <el-icon :size="32"><Document /></el-icon>
+            </div>
+            <div class="stat-info">
+              <div class="stat-label">需求总数</div>
+              <div class="stat-value">{{ reportData.demands.total }}</div>
+              <div class="stat-growth">待审批 {{ reportData.demands.pending }}</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover" class="stat-card">
+          <div class="stat-content">
+            <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)">
+              <el-icon :size="32"><ShoppingCart /></el-icon>
+            </div>
+            <div class="stat-info">
+              <div class="stat-label">采购总额</div>
+              <div class="stat-value">¥{{ (reportData.purchases.amount / 10000).toFixed(0) }}万</div>
+              <div class="stat-growth">本月 ¥{{ (reportData.purchases.monthly / 10000).toFixed(0) }}万</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover" class="stat-card">
+          <div class="stat-content">
+            <div class="stat-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)">
+              <el-icon :size="32"><Box /></el-icon>
+            </div>
+            <div class="stat-info">
+              <div class="stat-label">库存物品</div>
+              <div class="stat-value">{{ reportData.inventory.total }}</div>
+              <div class="stat-growth" style="color: #f56c6c">库存不足 {{ reportData.inventory.lowStock }}</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover" class="stat-card">
+          <div class="stat-content">
+            <div class="stat-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)">
+              <el-icon :size="32"><Money /></el-icon>
+            </div>
+            <div class="stat-info">
+              <div class="stat-label">内部供应商</div>
+              <div class="stat-value">{{ reportData.suppliers.total }}</div>
+              <div class="stat-growth">启用 {{ reportData.suppliers.active }}</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" class="charts-row">
+      <el-col :span="24">
+        <el-card shadow="hover">
+          <template #header>
+            <div class="card-header">
+              <span>月度统计</span>
+            </div>
+          </template>
+          <el-table :data="monthlyData" stripe>
+            <el-table-column prop="month" label="月份" width="100" />
+            <el-table-column prop="demands" label="需求数量" width="120" />
+            <el-table-column prop="purchases" label="采购单数" width="120" />
+            <el-table-column prop="amount" label="采购金额">
+              <template #default="scope">
+                <span style="color: #409eff; font-weight: 600">¥{{ (scope.row.amount / 10000).toFixed(0) }}万</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<style scoped>
+.report-view {
+  height: 100%;
+}
+
+.page-title {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.stats-row {
+  margin-top: 20px;
+}
+
+.stat-card {
+  border-radius: 8px;
+  transition: transform 0.3s;
+}
+
+.stat-card:hover {
+  transform: translateY(-5px);
+}
+
+.stat-content {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.stat-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+
+.stat-info {
+  flex: 1;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: #909399;
+  margin-bottom: 8px;
+}
+
+.stat-value {
+  font-size: 24px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 5px;
+}
+
+.stat-growth {
+  font-size: 12px;
+  color: #67c23a;
+}
+
+.charts-row {
+  margin-top: 20px;
+}
+
+.card-header {
+  font-weight: 600;
+  font-size: 16px;
+}
+</style>
+
diff --git a/src/views/isrm/InternalSupplierView.vue b/src/views/isrm/InternalSupplierView.vue
new file mode 100644
index 0000000..e6223ac
--- /dev/null
+++ b/src/views/isrm/InternalSupplierView.vue
@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Plus, Edit, Delete, Search, Phone } from '@element-plus/icons-vue'
+
+interface Supplier {
+  id: number
+  code: string
+  name: string
+  department: string
+  contact: string
+  phone: string
+  email: string
+  category: string
+  status: string
+  createTime: string
+}
+
+const tableData = ref<Supplier[]>([
+  {
+    id: 1,
+    code: 'SUP001',
+    name: '内部供应商A',
+    department: '技术部',
+    contact: '张经理',
+    phone: '13800138001',
+    email: 'zhang@example.com',
+    category: 'IT设备',
+    status: '启用',
+    createTime: '2024-01-01',
+  },
+  {
+    id: 2,
+    code: 'SUP002',
+    name: '内部供应商B',
+    department: '行政部',
+    contact: '李主管',
+    phone: '13800138002',
+    email: 'li@example.com',
+    category: '办公用品',
+    status: '启用',
+    createTime: '2024-01-05',
+  },
+])
+
+const searchForm = reactive({
+  keyword: '',
+  category: '',
+  status: '',
+})
+
+const pagination = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 20,
+})
+
+const getStatusType = (status: string) => {
+  return status === '启用' ? 'success' : 'danger'
+}
+</script>
+
+<template>
+  <div class="supplier-view">
+    <el-page-header>
+      <template #content>
+        <span class="page-title">内部供应商管理</span>
+      </template>
+    </el-page-header>
+
+    <el-card class="content-card" shadow="hover">
+      <div class="toolbar">
+        <el-form :inline="true" :model="searchForm" class="search-form">
+          <el-form-item label="关键词">
+            <el-input
+              v-model="searchForm.keyword"
+              placeholder="供应商编码/名称"
+              clearable
+              style="width: 200px"
+            >
+              <template #prefix>
+                <el-icon><Search /></el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="分类">
+            <el-select v-model="searchForm.category" placeholder="全部" clearable style="width: 120px">
+              <el-option label="IT设备" value="IT设备" />
+              <el-option label="办公用品" value="办公用品" />
+              <el-option label="市场物料" value="市场物料" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select v-model="searchForm.status" placeholder="全部" clearable style="width: 100px">
+              <el-option label="启用" value="启用" />
+              <el-option label="停用" value="停用" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="ElMessage.info('搜索功能')">搜索</el-button>
+            <el-button @click="Object.assign(searchForm, { keyword: '', category: '', status: '' })">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <el-button type="primary" :icon="Plus" @click="ElMessage.info('添加供应商')">添加供应商</el-button>
+      </div>
+
+      <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column prop="code" label="供应商编码" width="120" />
+        <el-table-column prop="name" label="供应商名称" width="150" />
+        <el-table-column prop="department" label="所属部门" width="120" />
+        <el-table-column prop="contact" label="联系人" width="100" />
+        <el-table-column prop="phone" label="联系电话" width="130">
+          <template #default="scope">
+            <div style="display: flex; align-items: center; gap: 5px">
+              <el-icon><Phone /></el-icon>
+              <span>{{ scope.row.phone }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="email" label="邮箱" width="180" />
+        <el-table-column prop="category" label="供应类别" width="120" />
+        <el-table-column prop="status" label="状态" width="100">
+          <template #default="scope">
+            <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="120" />
+        <el-table-column label="操作" width="180" fixed="right">
+          <template #default="scope">
+            <el-button type="primary" link :icon="Edit" @click="ElMessage.info('编辑供应商')">编辑</el-button>
+            <el-button type="danger" link :icon="Delete" @click="ElMessage.info('删除供应商')">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.currentPage"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="pagination.total"
+          layout="total, sizes, prev, pager, next, jumper"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.supplier-view {
+  height: 100%;
+}
+
+.page-title {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.content-card {
+  margin-top: 20px;
+  border-radius: 8px;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.search-form {
+  margin: 0;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
+
diff --git a/src/views/srm/ContractView.vue b/src/views/srm/ContractView.vue
new file mode 100644
index 0000000..837bb00
--- /dev/null
+++ b/src/views/srm/ContractView.vue
@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Plus, Edit, Delete, Search, Document } from '@element-plus/icons-vue'
+
+interface Contract {
+  id: number
+  contractNo: string
+  supplier: string
+  amount: number
+  startDate: string
+  endDate: string
+  status: string
+  createTime: string
+}
+
+const tableData = ref<Contract[]>([
+  {
+    id: 1,
+    contractNo: 'CT202401001',
+    supplier: 'ABC科技有限公司',
+    amount: 500000,
+    startDate: '2024-01-01',
+    endDate: '2024-12-31',
+    status: '执行中',
+    createTime: '2024-01-01',
+  },
+  {
+    id: 2,
+    contractNo: 'CT202401002',
+    supplier: 'XYZ办公用品公司',
+    amount: 100000,
+    startDate: '2024-01-15',
+    endDate: '2024-12-31',
+    status: '执行中',
+    createTime: '2024-01-15',
+  },
+])
+
+const searchForm = reactive({
+  keyword: '',
+  status: '',
+})
+
+const pagination = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 30,
+})
+
+const getStatusType = (status: string) => {
+  const map: Record<string, string> = {
+    待签署: 'warning',
+    执行中: 'primary',
+    已到期: 'info',
+    已终止: 'danger',
+  }
+  return map[status] || 'info'
+}
+</script>
+
+<template>
+  <div class="contract-view">
+    <el-page-header>
+      <template #content>
+        <span class="page-title">合同管理</span>
+      </template>
+    </el-page-header>
+
+    <el-card class="content-card" shadow="hover">
+      <div class="toolbar">
+        <el-form :inline="true" :model="searchForm" class="search-form">
+          <el-form-item label="关键词">
+            <el-input
+              v-model="searchForm.keyword"
+              placeholder="合同编号/供应商名称"
+              clearable
+              style="width: 200px"
+            >
+              <template #prefix>
+                <el-icon><Search /></el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select v-model="searchForm.status" placeholder="全部" clearable style="width: 120px">
+              <el-option label="待签署" value="待签署" />
+              <el-option label="执行中" value="执行中" />
+              <el-option label="已到期" value="已到期" />
+              <el-option label="已终止" value="已终止" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="ElMessage.info('搜索功能')">搜索</el-button>
+            <el-button @click="Object.assign(searchForm, { keyword: '', status: '' })">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <el-button type="primary" :icon="Plus" @click="ElMessage.info('创建合同')">创建合同</el-button>
+      </div>
+
+      <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column prop="contractNo" label="合同编号" width="150" />
+        <el-table-column prop="supplier" label="供应商" width="180" />
+        <el-table-column prop="amount" label="合同金额" width="120">
+          <template #default="scope">
+            <span style="color: #f56c6c; font-weight: 600">¥{{ scope.row.amount.toLocaleString() }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="startDate" label="开始日期" width="120" />
+        <el-table-column prop="endDate" label="结束日期" width="120" />
+        <el-table-column prop="status" label="状态" width="120">
+          <template #default="scope">
+            <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="120" />
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="scope">
+            <el-button type="primary" link :icon="Document" @click="ElMessage.info('查看合同')">查看</el-button>
+            <el-button type="primary" link :icon="Edit" @click="ElMessage.info('编辑合同')">编辑</el-button>
+            <el-button type="danger" link :icon="Delete" @click="ElMessage.info('删除合同')">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.currentPage"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="pagination.total"
+          layout="total, sizes, prev, pager, next, jumper"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.contract-view {
+  height: 100%;
+}
+
+.page-title {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.content-card {
+  margin-top: 20px;
+  border-radius: 8px;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.search-form {
+  margin: 0;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
+
diff --git a/src/views/srm/EvaluationView.vue b/src/views/srm/EvaluationView.vue
new file mode 100644
index 0000000..1a5de02
--- /dev/null
+++ b/src/views/srm/EvaluationView.vue
@@ -0,0 +1,210 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Search, Star, Edit } from '@element-plus/icons-vue'
+
+interface Evaluation {
+  id: number
+  supplier: string
+  period: string
+  quality: number
+  delivery: number
+  service: number
+  price: number
+  total: number
+  level: string
+  evaluator: string
+  createTime: string
+}
+
+const tableData = ref<Evaluation[]>([
+  {
+    id: 1,
+    supplier: 'ABC科技有限公司',
+    period: '2024年Q1',
+    quality: 95,
+    delivery: 90,
+    service: 92,
+    price: 88,
+    total: 91.25,
+    level: '优秀',
+    evaluator: '采购部',
+    createTime: '2024-01-15',
+  },
+  {
+    id: 2,
+    supplier: 'XYZ办公用品公司',
+    period: '2024年Q1',
+    quality: 85,
+    delivery: 88,
+    service: 90,
+    price: 92,
+    total: 88.75,
+    level: '良好',
+    evaluator: '采购部',
+    createTime: '2024-01-14',
+  },
+])
+
+const searchForm = reactive({
+  keyword: '',
+  period: '',
+  level: '',
+})
+
+const pagination = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 20,
+})
+
+const getLevelType = (level: string) => {
+  const map: Record<string, string> = {
+    优秀: 'success',
+    良好: 'primary',
+    一般: 'warning',
+    差: 'danger',
+  }
+  return map[level] || 'info'
+}
+</script>
+
+<template>
+  <div class="evaluation-view">
+    <el-page-header>
+      <template #content>
+        <span class="page-title">供应商评估</span>
+      </template>
+    </el-page-header>
+
+    <el-card class="content-card" shadow="hover">
+      <div class="toolbar">
+        <el-form :inline="true" :model="searchForm" class="search-form">
+          <el-form-item label="关键词">
+            <el-input
+              v-model="searchForm.keyword"
+              placeholder="供应商名称"
+              clearable
+              style="width: 200px"
+            >
+              <template #prefix>
+                <el-icon><Search /></el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="评估周期">
+            <el-select v-model="searchForm.period" placeholder="全部" clearable style="width: 150px">
+              <el-option label="2024年Q1" value="2024年Q1" />
+              <el-option label="2024年Q2" value="2024年Q2" />
+              <el-option label="2024年Q3" value="2024年Q3" />
+              <el-option label="2024年Q4" value="2024年Q4" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="等级">
+            <el-select v-model="searchForm.level" placeholder="全部" clearable style="width: 100px">
+              <el-option label="优秀" value="优秀" />
+              <el-option label="良好" value="良好" />
+              <el-option label="一般" value="一般" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="ElMessage.info('搜索功能')">搜索</el-button>
+            <el-button @click="Object.assign(searchForm, { keyword: '', period: '', level: '' })">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <el-button type="primary" :icon="Edit" @click="ElMessage.info('创建评估')">创建评估</el-button>
+      </div>
+
+      <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column prop="supplier" label="供应商" width="180" />
+        <el-table-column prop="period" label="评估周期" width="120" />
+        <el-table-column prop="quality" label="质量" width="100">
+          <template #default="scope">
+            <el-progress :percentage="scope.row.quality" :color="scope.row.quality >= 90 ? '#67c23a' : scope.row.quality >= 80 ? '#e6a23c' : '#f56c6c'" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="delivery" label="交付" width="100">
+          <template #default="scope">
+            <el-progress :percentage="scope.row.delivery" :color="scope.row.delivery >= 90 ? '#67c23a' : scope.row.delivery >= 80 ? '#e6a23c' : '#f56c6c'" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="service" label="服务" width="100">
+          <template #default="scope">
+            <el-progress :percentage="scope.row.service" :color="scope.row.service >= 90 ? '#67c23a' : scope.row.service >= 80 ? '#e6a23c' : '#f56c6c'" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="price" label="价格" width="100">
+          <template #default="scope">
+            <el-progress :percentage="scope.row.price" :color="scope.row.price >= 90 ? '#67c23a' : scope.row.price >= 80 ? '#e6a23c' : '#f56c6c'" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="total" label="综合得分" width="120">
+          <template #default="scope">
+            <span style="font-weight: 600; font-size: 16px">{{ scope.row.total.toFixed(2) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="level" label="等级" width="100">
+          <template #default="scope">
+            <el-tag :type="getLevelType(scope.row.level)">
+              <el-icon style="margin-right: 5px"><Star /></el-icon>
+              {{ scope.row.level }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="evaluator" label="评估人" width="100" />
+        <el-table-column prop="createTime" label="评估时间" width="120" />
+        <el-table-column label="操作" width="100" fixed="right">
+          <template #default="scope">
+            <el-button type="primary" link :icon="Edit" @click="ElMessage.info('编辑评估')">编辑</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.currentPage"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="pagination.total"
+          layout="total, sizes, prev, pager, next, jumper"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.evaluation-view {
+  height: 100%;
+}
+
+.page-title {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.content-card {
+  margin-top: 20px;
+  border-radius: 8px;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.search-form {
+  margin: 0;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
+
diff --git a/src/views/srm/InquiryView.vue b/src/views/srm/InquiryView.vue
new file mode 100644
index 0000000..08be4a5
--- /dev/null
+++ b/src/views/srm/InquiryView.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Plus, Edit, Delete, Search, Document } from '@element-plus/icons-vue'
+
+interface Inquiry {
+  id: number
+  inquiryNo: string
+  item: string
+  quantity: number
+  suppliers: string[]
+  status: string
+  createTime: string
+  deadline: string
+}
+
+const tableData = ref<Inquiry[]>([
+  {
+    id: 1,
+    inquiryNo: 'INQ202401001',
+    item: '服务器设备',
+    quantity: 20,
+    suppliers: ['ABC科技有限公司', 'DEF科技公司'],
+    status: '报价中',
+    createTime: '2024-01-15',
+    deadline: '2024-01-25',
+  },
+  {
+    id: 2,
+    inquiryNo: 'INQ202401002',
+    item: '办公桌椅',
+    quantity: 50,
+    suppliers: ['XYZ办公用品公司'],
+    status: '已报价',
+    createTime: '2024-01-14',
+    deadline: '2024-01-24',
+  },
+])
+
+const searchForm = reactive({
+  keyword: '',
+  status: '',
+})
+
+const pagination = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 30,
+})
+
+const getStatusType = (status: string) => {
+  const map: Record<string, string> = {
+    报价中: 'warning',
+    已报价: 'primary',
+    已选择: 'success',
+    已取消: 'danger',
+  }
+  return map[status] || 'info'
+}
+</script>
+
+<template>
+  <div class="inquiry-view">
+    <el-page-header>
+      <template #content>
+        <span class="page-title">询价管理</span>
+      </template>
+    </el-page-header>
+
+    <el-card class="content-card" shadow="hover">
+      <div class="toolbar">
+        <el-form :inline="true" :model="searchForm" class="search-form">
+          <el-form-item label="关键词">
+            <el-input
+              v-model="searchForm.keyword"
+              placeholder="询价单号/物品名称"
+              clearable
+              style="width: 200px"
+            >
+              <template #prefix>
+                <el-icon><Search /></el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select v-model="searchForm.status" placeholder="全部" clearable style="width: 120px">
+              <el-option label="报价中" value="报价中" />
+              <el-option label="已报价" value="已报价" />
+              <el-option label="已选择" value="已选择" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="ElMessage.info('搜索功能')">搜索</el-button>
+            <el-button @click="Object.assign(searchForm, { keyword: '', status: '' })">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <el-button type="primary" :icon="Plus" @click="ElMessage.info('创建询价单')">创建询价单</el-button>
+      </div>
+
+      <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column prop="inquiryNo" label="询价单号" width="150" />
+        <el-table-column prop="item" label="物品名称" width="150" />
+        <el-table-column prop="quantity" label="数量" width="100" />
+        <el-table-column prop="suppliers" label="询价供应商" width="250">
+          <template #default="scope">
+            <el-tag
+              v-for="(supplier, index) in scope.row.suppliers"
+              :key="index"
+              style="margin-right: 5px; margin-bottom: 5px"
+            >
+              {{ supplier }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="100">
+          <template #default="scope">
+            <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="deadline" label="截止日期" width="120" />
+        <el-table-column prop="createTime" label="创建时间" width="120" />
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="scope">
+            <el-button type="primary" link :icon="Document" @click="ElMessage.info('查看报价')">查看报价</el-button>
+            <el-button type="primary" link :icon="Edit" @click="ElMessage.info('编辑询价')">编辑</el-button>
+            <el-button type="danger" link :icon="Delete" @click="ElMessage.info('删除询价')">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.currentPage"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="pagination.total"
+          layout="total, sizes, prev, pager, next, jumper"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.inquiry-view {
+  height: 100%;
+}
+
+.page-title {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.content-card {
+  margin-top: 20px;
+  border-radius: 8px;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.search-form {
+  margin: 0;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
+
diff --git a/src/views/srm/PerformanceView.vue b/src/views/srm/PerformanceView.vue
new file mode 100644
index 0000000..54590f2
--- /dev/null
+++ b/src/views/srm/PerformanceView.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Search, TrendCharts } from '@element-plus/icons-vue'
+
+interface Performance {
+  id: number
+  supplier: string
+  totalOrders: number
+  totalAmount: number
+  onTimeRate: number
+  qualityRate: number
+  satisfaction: number
+  ranking: number
+}
+
+const tableData = ref<Performance[]>([
+  {
+    id: 1,
+    supplier: 'ABC科技有限公司',
+    totalOrders: 25,
+    totalAmount: 500000,
+    onTimeRate: 98,
+    qualityRate: 95,
+    satisfaction: 92,
+    ranking: 1,
+  },
+  {
+    id: 2,
+    supplier: 'XYZ办公用品公司',
+    totalOrders: 18,
+    totalAmount: 200000,
+    onTimeRate: 95,
+    qualityRate: 88,
+    satisfaction: 90,
+    ranking: 2,
+  },
+])
+
+const searchForm = reactive({
+  keyword: '',
+})
+
+const pagination = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 20,
+})
+</script>
+
+<template>
+  <div class="performance-view">
+    <el-page-header>
+      <template #content>
+        <span class="page-title">供应商绩效</span>
+      </template>
+    </el-page-header>
+
+    <el-card class="content-card" shadow="hover">
+      <div class="toolbar">
+        <el-form :inline="true" :model="searchForm" class="search-form">
+          <el-form-item label="关键词">
+            <el-input
+              v-model="searchForm.keyword"
+              placeholder="供应商名称"
+              clearable
+              style="width: 200px"
+            >
+              <template #prefix>
+                <el-icon><Search /></el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="ElMessage.info('搜索功能')">搜索</el-button>
+            <el-button @click="searchForm.keyword = ''">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column label="排名" width="80">
+          <template #default="scope">
+            <el-tag :type="scope.row.ranking === 1 ? 'success' : scope.row.ranking === 2 ? 'primary' : 'info'">
+              {{ scope.row.ranking }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="supplier" label="供应商" width="200" />
+        <el-table-column prop="totalOrders" label="订单总数" width="120" />
+        <el-table-column prop="totalAmount" label="交易总额" width="120">
+          <template #default="scope">
+            <span style="color: #f56c6c; font-weight: 600">¥{{ (scope.row.totalAmount / 10000).toFixed(0) }}万</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="onTimeRate" label="准时交付率" width="140">
+          <template #default="scope">
+            <el-progress :percentage="scope.row.onTimeRate" :color="scope.row.onTimeRate >= 95 ? '#67c23a' : '#e6a23c'" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="qualityRate" label="质量合格率" width="140">
+          <template #default="scope">
+            <el-progress :percentage="scope.row.qualityRate" :color="scope.row.qualityRate >= 90 ? '#67c23a' : '#e6a23c'" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="satisfaction" label="满意度" width="140">
+          <template #default="scope">
+            <el-progress :percentage="scope.row.satisfaction" :color="scope.row.satisfaction >= 90 ? '#67c23a' : '#e6a23c'" />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="120" fixed="right">
+          <template #default="scope">
+            <el-button type="primary" link :icon="TrendCharts" @click="ElMessage.info('查看详情')">详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.currentPage"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="pagination.total"
+          layout="total, sizes, prev, pager, next, jumper"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.performance-view {
+  height: 100%;
+}
+
+.page-title {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.content-card {
+  margin-top: 20px;
+  border-radius: 8px;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.search-form {
+  margin: 0;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
+
diff --git a/src/views/srm/PurchaseView.vue b/src/views/srm/PurchaseView.vue
new file mode 100644
index 0000000..cc6f44d
--- /dev/null
+++ b/src/views/srm/PurchaseView.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Plus, Edit, Delete, Search, Document } from '@element-plus/icons-vue'
+
+interface Purchase {
+  id: number
+  purchaseNo: string
+  supplier: string
+  item: string
+  quantity: number
+  unitPrice: number
+  totalAmount: number
+  status: string
+  createTime: string
+}
+
+const tableData = ref<Purchase[]>([
+  {
+    id: 1,
+    purchaseNo: 'PUR202401001',
+    supplier: 'ABC科技有限公司',
+    item: '服务器设备',
+    quantity: 20,
+    unitPrice: 8000,
+    totalAmount: 160000,
+    status: '待确认',
+    createTime: '2024-01-15',
+  },
+  {
+    id: 2,
+    purchaseNo: 'PUR202401002',
+    supplier: 'XYZ办公用品公司',
+    item: '办公桌椅',
+    quantity: 50,
+    unitPrice: 500,
+    totalAmount: 25000,
+    status: '已确认',
+    createTime: '2024-01-14',
+  },
+])
+
+const searchForm = reactive({
+  keyword: '',
+  status: '',
+})
+
+const pagination = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 50,
+})
+
+const getStatusType = (status: string) => {
+  const map: Record<string, string> = {
+    待确认: 'warning',
+    已确认: 'primary',
+    已发货: 'info',
+    已完成: 'success',
+    已取消: 'danger',
+  }
+  return map[status] || 'info'
+}
+</script>
+
+<template>
+  <div class="purchase-view">
+    <el-page-header>
+      <template #content>
+        <span class="page-title">采购管理</span>
+      </template>
+    </el-page-header>
+
+    <el-card class="content-card" shadow="hover">
+      <div class="toolbar">
+        <el-form :inline="true" :model="searchForm" class="search-form">
+          <el-form-item label="关键词">
+            <el-input
+              v-model="searchForm.keyword"
+              placeholder="采购单号/供应商名称"
+              clearable
+              style="width: 200px"
+            >
+              <template #prefix>
+                <el-icon><Search /></el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select v-model="searchForm.status" placeholder="全部" clearable style="width: 120px">
+              <el-option label="待确认" value="待确认" />
+              <el-option label="已确认" value="已确认" />
+              <el-option label="已发货" value="已发货" />
+              <el-option label="已完成" value="已完成" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="ElMessage.info('搜索功能')">搜索</el-button>
+            <el-button @click="Object.assign(searchForm, { keyword: '', status: '' })">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <el-button type="primary" :icon="Plus" @click="ElMessage.info('创建采购单')">创建采购单</el-button>
+      </div>
+
+      <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column prop="purchaseNo" label="采购单号" width="150" />
+        <el-table-column prop="supplier" label="供应商" width="180" />
+        <el-table-column prop="item" label="物品名称" width="150" />
+        <el-table-column prop="quantity" label="数量" width="100" />
+        <el-table-column prop="unitPrice" label="单价" width="100">
+          <template #default="scope">
+            <span>¥{{ scope.row.unitPrice }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="totalAmount" label="总金额" width="120">
+          <template #default="scope">
+            <span style="color: #f56c6c; font-weight: 600">¥{{ scope.row.totalAmount.toLocaleString() }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="100">
+          <template #default="scope">
+            <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="120" />
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="scope">
+            <el-button type="primary" link :icon="Document" @click="ElMessage.info('查看详情')">查看</el-button>
+            <el-button type="primary" link :icon="Edit" @click="ElMessage.info('编辑采购单')">编辑</el-button>
+            <el-button type="danger" link :icon="Delete" @click="ElMessage.info('删除采购单')">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.currentPage"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="pagination.total"
+          layout="total, sizes, prev, pager, next, jumper"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.purchase-view {
+  height: 100%;
+}
+
+.page-title {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.content-card {
+  margin-top: 20px;
+  border-radius: 8px;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.search-form {
+  margin: 0;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
+
diff --git a/src/views/srm/ReportView.vue b/src/views/srm/ReportView.vue
new file mode 100644
index 0000000..becdfab
--- /dev/null
+++ b/src/views/srm/ReportView.vue
@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ShoppingCart, Money, User, Document } from '@element-plus/icons-vue'
+
+const reportData = {
+  suppliers: {
+    total: 45,
+    active: 38,
+    inactive: 7,
+  },
+  purchases: {
+    total: 120,
+    amount: 5000000,
+    monthly: 800000,
+  },
+  contracts: {
+    total: 25,
+    active: 20,
+    expired: 5,
+  },
+  evaluations: {
+    total: 30,
+    excellent: 8,
+    good: 15,
+    average: 7,
+  },
+}
+
+const monthlyData = [
+  { month: '1月', purchases: 18, amount: 700000, contracts: 3 },
+  { month: '2月', purchases: 20, amount: 750000, contracts: 4 },
+  { month: '3月', purchases: 22, amount: 800000, contracts: 5 },
+  { month: '4月', purchases: 21, amount: 780000, contracts: 4 },
+  { month: '5月', purchases: 23, amount: 850000, contracts: 5 },
+  { month: '6月', purchases: 24, amount: 900000, contracts: 6 },
+]
+</script>
+
+<template>
+  <div class="report-view">
+    <el-page-header>
+      <template #content>
+        <span class="page-title">SRM 报表统计</span>
+      </template>
+    </el-page-header>
+
+    <el-row :gutter="20" class="stats-row">
+      <el-col :span="6">
+        <el-card shadow="hover" class="stat-card">
+          <div class="stat-content">
+            <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)">
+              <el-icon :size="32"><User /></el-icon>
+            </div>
+            <div class="stat-info">
+              <div class="stat-label">供应商总数</div>
+              <div class="stat-value">{{ reportData.suppliers.total }}</div>
+              <div class="stat-growth">合作中 {{ reportData.suppliers.active }}</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover" class="stat-card">
+          <div class="stat-content">
+            <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)">
+              <el-icon :size="32"><ShoppingCart /></el-icon>
+            </div>
+            <div class="stat-info">
+              <div class="stat-label">采购总额</div>
+              <div class="stat-value">¥{{ (reportData.purchases.amount / 10000).toFixed(0) }}万</div>
+              <div class="stat-growth">本月 ¥{{ (reportData.purchases.monthly / 10000).toFixed(0) }}万</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover" class="stat-card">
+          <div class="stat-content">
+            <div class="stat-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)">
+              <el-icon :size="32"><Document /></el-icon>
+            </div>
+            <div class="stat-info">
+              <div class="stat-label">合同总数</div>
+              <div class="stat-value">{{ reportData.contracts.total }}</div>
+              <div class="stat-growth">执行中 {{ reportData.contracts.active }}</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="hover" class="stat-card">
+          <div class="stat-content">
+            <div class="stat-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)">
+              <el-icon :size="32"><Money /></el-icon>
+            </div>
+            <div class="stat-info">
+              <div class="stat-label">评估总数</div>
+              <div class="stat-value">{{ reportData.evaluations.total }}</div>
+              <div class="stat-growth">优秀 {{ reportData.evaluations.excellent }}</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" class="charts-row">
+      <el-col :span="24">
+        <el-card shadow="hover">
+          <template #header>
+            <div class="card-header">
+              <span>月度统计</span>
+            </div>
+          </template>
+          <el-table :data="monthlyData" stripe>
+            <el-table-column prop="month" label="月份" width="100" />
+            <el-table-column prop="purchases" label="采购单数" width="120" />
+            <el-table-column prop="amount" label="采购金额">
+              <template #default="scope">
+                <span style="color: #409eff; font-weight: 600">¥{{ (scope.row.amount / 10000).toFixed(0) }}万</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="contracts" label="合同数量" width="120" />
+          </el-table>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<style scoped>
+.report-view {
+  height: 100%;
+}
+
+.page-title {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.stats-row {
+  margin-top: 20px;
+}
+
+.stat-card {
+  border-radius: 8px;
+  transition: transform 0.3s;
+}
+
+.stat-card:hover {
+  transform: translateY(-5px);
+}
+
+.stat-content {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.stat-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+
+.stat-info {
+  flex: 1;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: #909399;
+  margin-bottom: 8px;
+}
+
+.stat-value {
+  font-size: 24px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 5px;
+}
+
+.stat-growth {
+  font-size: 12px;
+  color: #67c23a;
+}
+
+.charts-row {
+  margin-top: 20px;
+}
+
+.card-header {
+  font-weight: 600;
+  font-size: 16px;
+}
+</style>
+
diff --git a/src/views/srm/SupplierView.vue b/src/views/srm/SupplierView.vue
new file mode 100644
index 0000000..891022d
--- /dev/null
+++ b/src/views/srm/SupplierView.vue
@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Plus, Edit, Delete, Search, Phone, Star } from '@element-plus/icons-vue'
+
+interface Supplier {
+  id: number
+  code: string
+  name: string
+  category: string
+  contact: string
+  phone: string
+  email: string
+  address: string
+  rating: number
+  status: string
+  createTime: string
+}
+
+const tableData = ref<Supplier[]>([
+  {
+    id: 1,
+    code: 'SUP001',
+    name: 'ABC科技有限公司',
+    category: 'IT设备',
+    contact: '张经理',
+    phone: '13800138001',
+    email: 'zhang@abc.com',
+    address: '北京市朝阳区',
+    rating: 5,
+    status: '合作中',
+    createTime: '2024-01-01',
+  },
+  {
+    id: 2,
+    code: 'SUP002',
+    name: 'XYZ办公用品公司',
+    category: '办公用品',
+    contact: '李主管',
+    phone: '13800138002',
+    email: 'li@xyz.com',
+    address: '上海市浦东新区',
+    rating: 4,
+    status: '合作中',
+    createTime: '2024-01-05',
+  },
+])
+
+const searchForm = reactive({
+  keyword: '',
+  category: '',
+  status: '',
+})
+
+const pagination = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 50,
+})
+
+const getStatusType = (status: string) => {
+  const map: Record<string, string> = {
+    合作中: 'success',
+    待审核: 'warning',
+    已停用: 'danger',
+  }
+  return map[status] || 'info'
+}
+</script>
+
+<template>
+  <div class="supplier-view">
+    <el-page-header>
+      <template #content>
+        <span class="page-title">供应商管理</span>
+      </template>
+    </el-page-header>
+
+    <el-card class="content-card" shadow="hover">
+      <div class="toolbar">
+        <el-form :inline="true" :model="searchForm" class="search-form">
+          <el-form-item label="关键词">
+            <el-input
+              v-model="searchForm.keyword"
+              placeholder="供应商编码/名称"
+              clearable
+              style="width: 200px"
+            >
+              <template #prefix>
+                <el-icon><Search /></el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="分类">
+            <el-select v-model="searchForm.category" placeholder="全部" clearable style="width: 120px">
+              <el-option label="IT设备" value="IT设备" />
+              <el-option label="办公用品" value="办公用品" />
+              <el-option label="原材料" value="原材料" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select v-model="searchForm.status" placeholder="全部" clearable style="width: 120px">
+              <el-option label="合作中" value="合作中" />
+              <el-option label="待审核" value="待审核" />
+              <el-option label="已停用" value="已停用" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="ElMessage.info('搜索功能')">搜索</el-button>
+            <el-button @click="Object.assign(searchForm, { keyword: '', category: '', status: '' })">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <el-button type="primary" :icon="Plus" @click="ElMessage.info('添加供应商')">添加供应商</el-button>
+      </div>
+
+      <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column prop="code" label="供应商编码" width="120" />
+        <el-table-column prop="name" label="供应商名称" width="200" />
+        <el-table-column prop="category" label="供应类别" width="120" />
+        <el-table-column prop="contact" label="联系人" width="100" />
+        <el-table-column prop="phone" label="联系电话" width="130">
+          <template #default="scope">
+            <div style="display: flex; align-items: center; gap: 5px">
+              <el-icon><Phone /></el-icon>
+              <span>{{ scope.row.phone }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="email" label="邮箱" width="180" />
+        <el-table-column prop="address" label="地址" width="200" />
+        <el-table-column prop="rating" label="评级" width="100">
+          <template #default="scope">
+            <el-rate v-model="scope.row.rating" disabled show-score text-color="#ff9900" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="状态" width="100">
+          <template #default="scope">
+            <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="120" />
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="scope">
+            <el-button type="primary" link :icon="Edit" @click="ElMessage.info('编辑供应商')">编辑</el-button>
+            <el-button type="danger" link :icon="Delete" @click="ElMessage.info('删除供应商')">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pagination">
+        <el-pagination
+          v-model:current-page="pagination.currentPage"
+          v-model:page-size="pagination.pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="pagination.total"
+          layout="total, sizes, prev, pager, next, jumper"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.supplier-view {
+  height: 100%;
+}
+
+.page-title {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.content-card {
+  margin-top: 20px;
+  border-radius: 8px;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.search-form {
+  margin: 0;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
+