From 60deb39de83ad8d334c85d8cbc80e142c5a1ad5f Mon Sep 17 00:00:00 2001
From: "Mr.j" <2221464500@qq.com>
Date: Tue, 5 Aug 2025 21:41:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=AE=BE=E5=A4=87=E9=87=87?=
 =?UTF-8?q?=E8=B4=AD=E7=95=8C=E9=9D=A2=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/equipment/type.ts                    |    6 +
 src/stores/modules/route.ts                   |    6 +-
 .../device-management/procurement/README.md   |  210 ++
 .../components/ProcurementModal.vue           |  865 +++++++
 .../components/ProcurementSearch.vue          | 1016 ++++-----
 .../device-management/procurement/index.vue   | 2001 ++++++-----------
 .../device-management/procurement/test.vue    |  136 ++
 7 files changed, 2294 insertions(+), 1946 deletions(-)
 create mode 100644 src/views/system-resource/device-management/procurement/README.md
 create mode 100644 src/views/system-resource/device-management/procurement/components/ProcurementModal.vue
 create mode 100644 src/views/system-resource/device-management/procurement/test.vue

diff --git a/src/apis/equipment/type.ts b/src/apis/equipment/type.ts
index 6dbd51c..e267931 100644
--- a/src/apis/equipment/type.ts
+++ b/src/apis/equipment/type.ts
@@ -2,6 +2,10 @@
  * 设备列表查询请求
  */
 export interface EquipmentListReq {
+  /** 最低价格 */
+  minPrice?: number
+  /** 最高价格 */
+  maxPrice?: number
   /** 设备名称 */
   equipmentName?: string
   /** 设备类型 */
@@ -74,6 +78,8 @@ export interface EquipmentListReq {
   orderDirection?: string
   /** 页码 */
   page?: number
+  /** 库存条码 */
+  inventoryBarcode?: string
 }
 
 /**
diff --git a/src/stores/modules/route.ts b/src/stores/modules/route.ts
index 673763e..9534f69 100644
--- a/src/stores/modules/route.ts
+++ b/src/stores/modules/route.ts
@@ -83,7 +83,7 @@ const storeSetup = () => {
   // 合并路由
   const setRoutes = (data: RouteRecordRaw[]) => {
     // 合并路由并排序
-    routes.value = [...constantRoutes, ...systemRoutes].concat(data)
+    routes.value = [...constantRoutes, ...systemRoutes, ...data]
       .sort((a, b) => (a.meta?.sort ?? 0) - (b.meta?.sort ?? 0))
     asyncRoutes.value = data
   }
@@ -181,8 +181,8 @@ const storeSetup = () => {
     }]
     // 使用已转换的数据生成路由
     const asyncRoutes = formatAsyncRoutes(data as unknown as RouteItem[])
-    // 合并systemRoutes中的路由
-    const allRoutes = [...asyncRoutes, ...systemRoutes]
+    // 合并路由，避免重复
+    const allRoutes = [...asyncRoutes]
     const flatRoutes = flatMultiLevelRoutes(cloneDeep(allRoutes))
     setRoutes(allRoutes)
     return flatRoutes
diff --git a/src/views/system-resource/device-management/procurement/README.md b/src/views/system-resource/device-management/procurement/README.md
new file mode 100644
index 0000000..0b1e5b1
--- /dev/null
+++ b/src/views/system-resource/device-management/procurement/README.md
@@ -0,0 +1,210 @@
+# 设备采购模块
+
+## 功能概述
+
+设备采购模块是一个完整的企业设备采购管理系统，提供设备采购的全生命周期管理，包括采购申请、订单管理、供应商管理、设备入库等功能。
+
+## 主要功能
+
+### 1. 采购记录管理
+- **新增采购记录**：支持完整的设备采购信息录入
+- **编辑采购记录**：修改已存在的采购记录信息
+- **查看采购记录**：查看采购记录的详细信息
+- **删除采购记录**：删除不需要的采购记录
+
+### 2. 搜索功能
+- **多条件搜索**：支持按设备名称、型号、供应商、状态等条件搜索
+- **时间范围搜索**：支持按采购时间、入库时间、启用时间范围搜索
+- **价格范围搜索**：支持按价格范围搜索
+- **状态搜索**：支持按设备状态、位置状态、健康状态搜索
+
+### 3. 数据展示
+- **统计卡片**：显示采购总数、待处理、已完成、采购总额等统计信息
+- **表格展示**：分页展示采购记录列表
+- **状态标签**：使用不同颜色的标签显示设备状态
+- **价格格式化**：自动格式化价格显示
+
+### 4. 数据导出
+- **Excel导出**：支持将采购记录导出为Excel文件
+- **筛选导出**：支持按搜索条件导出数据
+
+## 技术架构
+
+### 前端技术栈
+- **Vue 3**：使用Composition API
+- **TypeScript**：提供类型安全
+- **Arco Design Vue**：UI组件库
+- **Vite**：构建工具
+
+### 后端技术栈
+- **Spring Boot**：后端框架
+- **MyBatis Plus**：ORM框架
+- **MySQL**：数据库
+- **Swagger**：API文档
+
+### 数据模型
+- **EquipmentEntity**：设备实体类
+- **EquipmentReq**：设备请求类
+- **EquipmentResp**：设备响应类
+- **EquipmentListReq**：设备列表查询请求类
+
+## 文件结构
+
+```
+procurement/
+├── index.vue                    # 主页面
+├── components/
+│   ├── ProcurementSearch.vue    # 搜索组件
+│   └── ProcurementModal.vue     # 弹窗组件
+├── test.vue                     # 测试页面
+└── README.md                    # 说明文档
+```
+
+## API接口
+
+### 1. 分页查询
+- **接口**：`GET /equipment/procurement/page`
+- **参数**：EquipmentListReq
+- **返回**：PageResult<EquipmentResp>
+
+### 2. 新增采购
+- **接口**：`POST /equipment/procurement`
+- **参数**：EquipmentReq
+- **返回**：Result<null>
+
+### 3. 更新采购
+- **接口**：`PUT /equipment/procurement/{equipmentId}`
+- **参数**：EquipmentReq
+- **返回**：Result<null>
+
+### 4. 删除采购
+- **接口**：`DELETE /equipment/procurement/{equipmentId}`
+- **参数**：equipmentId
+- **返回**：Result<null>
+
+### 5. 获取详情
+- **接口**：`GET /equipment/procurement/detail/{equipmentId}`
+- **参数**：equipmentId
+- **返回**：Result<EquipmentResp>
+
+### 6. 导出数据
+- **接口**：`GET /equipment/procurement/export`
+- **参数**：EquipmentListReq
+- **返回**：Blob
+
+## 使用说明
+
+### 1. 访问页面
+在浏览器中访问设备采购模块页面。
+
+### 2. 查看数据
+页面会自动加载采购记录列表，显示统计信息和数据表格。
+
+### 3. 搜索数据
+点击"搜索采购"按钮，在弹出的搜索弹窗中输入搜索条件，点击"搜索"按钮。
+
+### 4. 新增记录
+点击"新增采购"按钮，在弹出的表单中填写设备采购信息，点击"确定"按钮。
+
+### 5. 编辑记录
+在表格中点击"编辑"按钮，在弹出的表单中修改信息，点击"确定"按钮。
+
+### 6. 删除记录
+在表格中点击"删除"按钮，确认删除操作。
+
+### 7. 导出数据
+点击"导出"按钮，选择保存位置下载Excel文件。
+
+## 字段说明
+
+### 基本信息
+- **设备名称**：设备的名称
+- **设备类型**：设备的分类（检测设备、安防设备、办公设备、车辆等）
+- **设备型号**：设备的具体型号
+- **序列号**：设备的唯一序列号
+- **品牌**：设备的品牌
+- **资产编号**：设备的资产编号
+- **配置规格**：设备的配置规格和参数
+
+### 采购信息
+- **采购订单**：采购订单号
+- **供应商**：供应商名称
+- **数量**：采购数量
+- **单价**：设备单价
+- **总价**：设备总价
+- **采购价格**：采购价格
+- **当前净值**：设备的当前净值
+- **采购时间**：采购时间
+- **入库时间**：入库时间
+- **启用时间**：启用时间
+- **预计报废时间**：预计报废时间
+- **折旧方法**：折旧方法（直线折旧、余额递减、年数总和）
+- **折旧年限**：折旧年限
+- **残值**：设备残值
+- **保修截止日期**：保修截止日期
+
+### 状态信息
+- **设备状态**：设备状态（正常、维修中、已报废、闲置、丢失）
+- **使用状态**：使用状态（空闲中、使用中）
+- **位置状态**：位置状态（库存中、使用中、维修中、已报废、外借中、丢失、闲置）
+- **健康状态**：健康状态（优秀、良好、一般、较差、危险）
+- **负责人**：设备负责人
+- **维护人员**：维护人员
+- **物理位置**：设备的物理位置
+- **库存条码**：库存条码
+- **上次维护日期**：上次维护日期
+- **下次维护日期**：下次维护日期
+
+### 其他信息
+- **次户号**：次户号
+- **盘点依据**：盘点依据
+- **动态记录**：动态记录信息
+- **资产备注**：资产备注信息
+
+## 注意事项
+
+1. **数据验证**：所有必填字段都需要填写，系统会进行数据验证
+2. **权限控制**：不同用户可能有不同的操作权限
+3. **数据安全**：敏感数据会进行加密处理
+4. **性能优化**：大量数据时会进行分页处理
+5. **错误处理**：系统会显示友好的错误提示
+
+## 开发说明
+
+### 1. 开发环境
+- Node.js 16+
+- Vue 3.3+
+- TypeScript 5.0+
+
+### 2. 安装依赖
+```bash
+npm install
+```
+
+### 3. 启动开发服务器
+```bash
+npm run dev
+```
+
+### 4. 构建生产版本
+```bash
+npm run build
+```
+
+### 5. 代码规范
+- 使用ESLint进行代码检查
+- 使用Prettier进行代码格式化
+- 遵循Vue 3 Composition API最佳实践
+
+## 更新日志
+
+### v1.0.0 (2025-01-XX)
+- 初始版本发布
+- 实现基本的CRUD功能
+- 实现搜索和导出功能
+- 实现统计信息展示
+- 实现响应式设计
+
+## 联系方式
+
+如有问题或建议，请联系开发团队。 
\ No newline at end of file
diff --git a/src/views/system-resource/device-management/procurement/components/ProcurementModal.vue b/src/views/system-resource/device-management/procurement/components/ProcurementModal.vue
new file mode 100644
index 0000000..89a88bb
--- /dev/null
+++ b/src/views/system-resource/device-management/procurement/components/ProcurementModal.vue
@@ -0,0 +1,865 @@
+<template>
+  <a-modal
+    :visible="visible"
+    :title="getModalTitle()"
+    width="1200px"
+    :confirm-loading="loading"
+    :ok-button-props="{ disabled: !isFormValid || isView }"
+    @cancel="handleCancel"
+    @ok="handleSubmit"
+  >
+    <a-form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 16 }"
+      auto-label-width
+    >
+      <!-- 标签页导航 -->
+      <div class="tab-navigation">
+        <div
+          v-for="tab in tabs"
+          :key="tab.key"
+          class="tab-item" :class="[{ active: activeTab === tab.key }]"
+          @click="activeTab = tab.key"
+        >
+          {{ tab.label }}
+        </div>
+      </div>
+
+      <!-- 标签页内容 -->
+      <div class="tab-content">
+        <!-- 基本信息 -->
+        <div v-show="activeTab === 'basic'">
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="设备名称" field="equipmentName">
+                <a-input
+                  v-model="formData.equipmentName"
+                  placeholder="请输入设备名称"
+                  :disabled="isView"
+                  show-word-limit
+                  :max-length="200"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="设备类型" field="equipmentType">
+                <a-select
+                  v-model="formData.equipmentType"
+                  :options="equipmentTypeOptions"
+                  placeholder="请选择设备类型"
+                  :disabled="isView"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="设备型号" field="equipmentModel">
+                <a-input
+                  v-model="formData.equipmentModel"
+                  placeholder="请输入设备型号"
+                  :disabled="isView"
+                  show-word-limit
+                  :max-length="200"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="序列号" field="equipmentSn">
+                <a-input
+                  v-model="formData.equipmentSn"
+                  placeholder="请输入序列号"
+                  :disabled="isView"
+                  show-word-limit
+                  :max-length="100"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="品牌" field="brand">
+                <a-input
+                  v-model="formData.brand"
+                  placeholder="请输入品牌"
+                  :disabled="isView"
+                  show-word-limit
+                  :max-length="100"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="资产编号" field="assetCode">
+                <a-input
+                  v-model="formData.assetCode"
+                  placeholder="请输入资产编号"
+                  :disabled="isView"
+                  show-word-limit
+                  :max-length="50"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-form-item label="配置规格" field="specification">
+            <a-textarea
+              v-model="formData.specification"
+              placeholder="请输入配置规格参数"
+              :disabled="isView"
+              :rows="3"
+              show-word-limit
+              :max-length="500"
+            />
+          </a-form-item>
+        </div>
+
+        <!-- 采购信息 -->
+        <div v-show="activeTab === 'procurement'">
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="采购订单" field="purchaseOrder">
+                <a-input
+                  v-model="formData.purchaseOrder"
+                  placeholder="请输入采购订单号"
+                  :disabled="isView"
+                  show-word-limit
+                  :max-length="100"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="供应商" field="supplierName">
+                <a-input
+                  v-model="formData.supplierName"
+                  placeholder="请输入供应商名称"
+                  :disabled="isView"
+                  show-word-limit
+                  :max-length="200"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="8">
+              <a-form-item label="数量" field="quantity">
+                <a-input-number
+                  v-model="formData.quantity"
+                  placeholder="请输入数量"
+                  :min="1"
+                  :disabled="isView"
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="单价" field="unitPrice">
+                <a-input-number
+                  v-model="formData.unitPrice"
+                  placeholder="请输入单价"
+                  :precision="2"
+                  :min="0"
+                  :disabled="isView"
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="总价" field="totalPrice">
+                <a-input-number
+                  v-model="formData.totalPrice"
+                  placeholder="请输入总价"
+                  :precision="2"
+                  :min="0"
+                  :disabled="isView"
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="采购价格" field="purchasePrice">
+                <a-input-number
+                  v-model="formData.purchasePrice"
+                  placeholder="请输入采购价格"
+                  :precision="2"
+                  :min="0"
+                  :disabled="isView"
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="当前净值" field="currentNetValue">
+                <a-input-number
+                  v-model="formData.currentNetValue"
+                  placeholder="请输入当前净值"
+                  :precision="2"
+                  :min="0"
+                  :disabled="isView"
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="采购时间" field="purchaseTime">
+                <a-date-picker
+                  v-model="formData.purchaseTime"
+                  placeholder="请选择采购时间"
+                  :disabled="isView"
+                  show-time
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="入库时间" field="inStockTime">
+                <a-date-picker
+                  v-model="formData.inStockTime"
+                  placeholder="请选择入库时间"
+                  :disabled="isView"
+                  show-time
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="启用时间" field="activationTime">
+                <a-date-picker
+                  v-model="formData.activationTime"
+                  placeholder="请选择启用时间"
+                  :disabled="isView"
+                  show-time
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="预计报废时间" field="expectedScrapTime">
+                <a-date-picker
+                  v-model="formData.expectedScrapTime"
+                  placeholder="请选择预计报废时间"
+                  :disabled="isView"
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="折旧方法" field="depreciationMethod">
+                <a-select
+                  v-model="formData.depreciationMethod"
+                  placeholder="请选择折旧方法"
+                  :disabled="isView"
+                >
+                  <a-option value="straight_line">直线折旧</a-option>
+                  <a-option value="declining_balance">余额递减</a-option>
+                  <a-option value="sum_of_years">年数总和</a-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="折旧年限" field="depreciationYears">
+                <a-input-number
+                  v-model="formData.depreciationYears"
+                  placeholder="请输入折旧年限"
+                  :min="1"
+                  :max="50"
+                  :disabled="isView"
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="残值" field="salvageValue">
+                <a-input-number
+                  v-model="formData.salvageValue"
+                  placeholder="请输入残值"
+                  :precision="2"
+                  :min="0"
+                  :disabled="isView"
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="保修截止日期" field="warrantyExpireDate">
+                <a-date-picker
+                  v-model="formData.warrantyExpireDate"
+                  placeholder="请选择保修截止日期"
+                  :disabled="isView"
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </div>
+
+        <!-- 状态信息 -->
+        <div v-show="activeTab === 'status'">
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="设备状态" field="equipmentStatus">
+                <a-select
+                  v-model="formData.equipmentStatus"
+                  :options="equipmentStatusOptions"
+                  placeholder="请选择设备状态"
+                  :disabled="isView"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="使用状态" field="useStatus">
+                <a-select
+                  v-model="formData.useStatus"
+                  :options="useStatusOptions"
+                  placeholder="请选择使用状态"
+                  :disabled="isView"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="位置状态" field="locationStatus">
+                <a-select
+                  v-model="formData.locationStatus"
+                  :options="locationStatusOptions"
+                  placeholder="请选择位置状态"
+                  :disabled="isView"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="健康状态" field="healthStatus">
+                <a-select
+                  v-model="formData.healthStatus"
+                  :options="healthStatusOptions"
+                  placeholder="请选择健康状态"
+                  :disabled="isView"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="负责人" field="responsiblePerson">
+                <a-input
+                  v-model="formData.responsiblePerson"
+                  placeholder="请输入负责人"
+                  :disabled="isView"
+                  show-word-limit
+                  :max-length="100"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="维护人员" field="maintenancePerson">
+                <a-input
+                  v-model="formData.maintenancePerson"
+                  placeholder="请输入维护人员"
+                  :disabled="isView"
+                  show-word-limit
+                  :max-length="100"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="物理位置" field="physicalLocation">
+                <a-input
+                  v-model="formData.physicalLocation"
+                  placeholder="请输入物理位置"
+                  :disabled="isView"
+                  show-word-limit
+                  :max-length="200"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="库存条码" field="inventoryBarcode">
+                <a-input
+                  v-model="formData.inventoryBarcode"
+                  placeholder="请输入库存条码"
+                  :disabled="isView"
+                  show-word-limit
+                  :max-length="100"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="上次维护日期" field="lastMaintenanceDate">
+                <a-date-picker
+                  v-model="formData.lastMaintenanceDate"
+                  placeholder="请选择上次维护日期"
+                  :disabled="isView"
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="下次维护日期" field="nextMaintenanceDate">
+                <a-date-picker
+                  v-model="formData.nextMaintenanceDate"
+                  placeholder="请选择下次维护日期"
+                  :disabled="isView"
+                  style="width: 100%"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </div>
+
+        <!-- 其他信息 -->
+        <div v-show="activeTab === 'other'">
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-item label="次户号" field="accountNumber">
+                <a-input
+                  v-model="formData.accountNumber"
+                  placeholder="请输入次户号"
+                  :disabled="isView"
+                  show-word-limit
+                  :max-length="100"
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item label="盘点依据" field="inventoryBasis">
+                <a-input
+                  v-model="formData.inventoryBasis"
+                  placeholder="请输入盘点依据"
+                  :disabled="isView"
+                  show-word-limit
+                  :max-length="200"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+
+          <a-form-item label="动态记录" field="dynamicRecord">
+            <a-textarea
+              v-model="formData.dynamicRecord"
+              placeholder="请输入动态记录"
+              :disabled="isView"
+              :rows="4"
+              show-word-limit
+              :max-length="1000"
+            />
+          </a-form-item>
+
+          <a-form-item label="资产备注" field="assetRemark">
+            <a-textarea
+              v-model="formData.assetRemark"
+              placeholder="请输入资产备注"
+              :disabled="isView"
+              :rows="3"
+              show-word-limit
+              :max-length="500"
+            />
+          </a-form-item>
+        </div>
+      </div>
+    </a-form>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import type { FormInstance } from '@arco-design/web-vue'
+import { equipmentProcurementApi } from '@/apis/equipment/procurement'
+import type { EquipmentResp, EquipmentReq } from '@/apis/equipment/type'
+
+interface Props {
+  visible: boolean
+  procurementData?: EquipmentResp | null
+  mode: 'add' | 'edit' | 'view'
+}
+
+interface Emits {
+  (e: 'update:visible', value: boolean): void
+  (e: 'success'): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  procurementData: null,
+  mode: 'add',
+})
+
+const emit = defineEmits<Emits>()
+
+const formRef = ref<FormInstance>()
+const loading = ref(false)
+const activeTab = ref('basic')
+
+// 标签页配置
+const tabs = [
+  { key: 'basic', label: '基本信息' },
+  { key: 'procurement', label: '采购信息' },
+  { key: 'status', label: '状态信息' },
+  { key: 'other', label: '其他信息' },
+]
+
+// 表单数据
+const formData = reactive<EquipmentReq>({
+  equipmentName: '',
+  equipmentModel: '',
+  equipmentType: '',
+  equipmentStatus: '',
+  useStatus: '',
+  equipmentSn: '',
+  assetCode: '',
+  brand: '',
+  specification: '',
+  locationStatus: '',
+  physicalLocation: '',
+  responsiblePerson: '',
+  healthStatus: '',
+  purchaseTime: '',
+  inStockTime: '',
+  activationTime: '',
+  expectedScrapTime: '',
+  actualScrapTime: '',
+  purchaseOrder: '',
+  supplierName: '',
+  purchasePrice: undefined,
+  currentNetValue: undefined,
+  depreciationMethod: '',
+  depreciationYears: undefined,
+  salvageValue: undefined,
+  warrantyExpireDate: '',
+  lastMaintenanceDate: '',
+  nextMaintenanceDate: '',
+  maintenancePerson: '',
+  inventoryBarcode: '',
+  assetRemark: '',
+  accountNumber: '',
+  quantity: 1,
+  unitPrice: undefined,
+  totalPrice: undefined,
+  inventoryBasis: '',
+  dynamicRecord: '',
+})
+
+// 表单验证规则
+const rules = {
+  equipmentName: [{ required: true, message: '请输入设备名称' }],
+  equipmentModel: [{ required: true, message: '请输入设备型号' }],
+  equipmentType: [{ required: true, message: '请选择设备类型' }],
+  equipmentSn: [{ required: true, message: '请输入设备序列号' }],
+  equipmentStatus: [{ required: true, message: '请选择设备状态' }],
+  useStatus: [{ required: true, message: '请选择使用状态' }],
+  purchaseOrder: [{ required: true, message: '请输入采购订单号' }],
+  supplierName: [{ required: true, message: '请输入供应商名称' }],
+  purchasePrice: [{ required: true, message: '请输入采购价格' }],
+  quantity: [{ required: true, message: '请输入数量' }],
+  unitPrice: [{ required: true, message: '请输入单价' }],
+  totalPrice: [{ required: true, message: '请输入总价' }],
+}
+
+// 选项配置
+const equipmentTypeOptions = [
+  { label: '检测设备', value: 'detection' },
+  { label: '安防设备', value: 'security' },
+  { label: '办公设备', value: 'office' },
+  { label: '车辆', value: 'car' },
+  { label: '其他设备', value: 'other' },
+]
+
+const equipmentStatusOptions = [
+  { label: '正常', value: 'normal' },
+  { label: '维修中', value: 'repair' },
+  { label: '已报废', value: 'scrap' },
+  { label: '闲置', value: 'idle' },
+  { label: '丢失', value: 'lost' },
+]
+
+const useStatusOptions = [
+  { label: '空闲中', value: '0' },
+  { label: '使用中', value: '1' },
+]
+
+const locationStatusOptions = [
+  { label: '库存中', value: 'in_stock' },
+  { label: '使用中', value: 'in_use' },
+  { label: '维修中', value: 'repair' },
+  { label: '已报废', value: 'scrapped' },
+  { label: '外借中', value: 'on_loan' },
+  { label: '丢失', value: 'lost' },
+  { label: '闲置', value: 'idle' },
+]
+
+const healthStatusOptions = [
+  { label: '优秀', value: 'excellent' },
+  { label: '良好', value: 'good' },
+  { label: '一般', value: 'normal' },
+  { label: '较差', value: 'poor' },
+  { label: '危险', value: 'critical' },
+]
+
+// 计算属性
+const isView = computed(() => props.mode === 'view')
+const isFormValid = computed(() => {
+  return formData.equipmentName && 
+         formData.equipmentModel && 
+         formData.equipmentType && 
+         formData.equipmentSn
+})
+
+// 获取弹窗标题
+const getModalTitle = () => {
+  const titles = {
+    add: '新增采购记录',
+    edit: '编辑采购记录',
+    view: '查看采购记录',
+  }
+  return titles[props.mode]
+}
+
+// 监听弹窗显示状态
+watch(() => props.visible, (newVal) => {
+  if (newVal && props.procurementData) {
+    initFormData()
+  }
+})
+
+// 初始化表单数据
+const initFormData = () => {
+  if (props.procurementData) {
+    Object.assign(formData, {
+      equipmentName: props.procurementData.equipmentName || '',
+      equipmentModel: props.procurementData.equipmentModel || '',
+      equipmentType: props.procurementData.equipmentType || '',
+      equipmentStatus: props.procurementData.equipmentStatus || '',
+      useStatus: props.procurementData.useStatus || '',
+      equipmentSn: props.procurementData.equipmentSn || '',
+      assetCode: props.procurementData.assetCode || '',
+      brand: props.procurementData.brand || '',
+      specification: props.procurementData.specification || '',
+      locationStatus: props.procurementData.locationStatus || '',
+      physicalLocation: props.procurementData.physicalLocation || '',
+      responsiblePerson: props.procurementData.responsiblePerson || '',
+      healthStatus: props.procurementData.healthStatus || '',
+      purchaseTime: props.procurementData.purchaseTime || '',
+      inStockTime: props.procurementData.inStockTime || '',
+      activationTime: props.procurementData.activationTime || '',
+      expectedScrapTime: props.procurementData.expectedScrapTime || '',
+      actualScrapTime: props.procurementData.actualScrapTime || '',
+      purchaseOrder: props.procurementData.purchaseOrder || '',
+      supplierName: props.procurementData.supplierName || '',
+      purchasePrice: props.procurementData.purchasePrice,
+      currentNetValue: props.procurementData.currentNetValue,
+      depreciationMethod: props.procurementData.depreciationMethod || '',
+      depreciationYears: props.procurementData.depreciationYears,
+      salvageValue: props.procurementData.salvageValue,
+      warrantyExpireDate: props.procurementData.warrantyExpireDate || '',
+      lastMaintenanceDate: props.procurementData.lastMaintenanceDate || '',
+      nextMaintenanceDate: props.procurementData.nextMaintenanceDate || '',
+      maintenancePerson: props.procurementData.maintenancePerson || '',
+      inventoryBarcode: props.procurementData.inventoryBarcode || '',
+      assetRemark: props.procurementData.assetRemark || '',
+      accountNumber: props.procurementData.accountNumber || '',
+      quantity: props.procurementData.quantity || 1,
+      unitPrice: props.procurementData.unitPrice,
+      totalPrice: props.procurementData.totalPrice,
+      inventoryBasis: props.procurementData.inventoryBasis || '',
+      dynamicRecord: props.procurementData.dynamicRecord || '',
+    })
+  } else {
+    resetForm()
+  }
+}
+
+// 重置表单
+const resetForm = () => {
+  Object.assign(formData, {
+    equipmentName: '',
+    equipmentModel: '',
+    equipmentType: '',
+    equipmentStatus: '',
+    useStatus: '',
+    equipmentSn: '',
+    assetCode: '',
+    brand: '',
+    specification: '',
+    locationStatus: '',
+    physicalLocation: '',
+    responsiblePerson: '',
+    healthStatus: '',
+    purchaseTime: '',
+    inStockTime: '',
+    activationTime: '',
+    expectedScrapTime: '',
+    actualScrapTime: '',
+    purchaseOrder: '',
+    supplierName: '',
+    purchasePrice: undefined,
+    currentNetValue: undefined,
+    depreciationMethod: '',
+    depreciationYears: undefined,
+    salvageValue: undefined,
+    warrantyExpireDate: '',
+    lastMaintenanceDate: '',
+    nextMaintenanceDate: '',
+    maintenancePerson: '',
+    inventoryBarcode: '',
+    assetRemark: '',
+    accountNumber: '',
+    quantity: 1,
+    unitPrice: undefined,
+    totalPrice: undefined,
+    inventoryBasis: '',
+    dynamicRecord: '',
+  })
+  formRef.value?.resetFields()
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  try {
+    await formRef.value?.validate()
+    
+    loading.value = true
+    
+    if (props.mode === 'edit' && props.procurementData) {
+      await equipmentProcurementApi.update(props.procurementData.equipmentId, formData)
+      Message.success('更新成功')
+    } else {
+      await equipmentProcurementApi.add(formData)
+      Message.success('新增成功')
+    }
+    
+    emit('success')
+  } catch (error: any) {
+    console.error('操作失败:', error)
+    Message.error(error?.message || '操作失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 取消
+const handleCancel = () => {
+  emit('update:visible', false)
+  resetForm()
+}
+</script>
+
+<style scoped lang="scss">
+.tab-navigation {
+  display: flex;
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: 24px;
+  
+  .tab-item {
+    padding: 12px 24px;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: all 0.3s ease;
+    font-weight: 500;
+    color: var(--color-text-2);
+    
+    &:hover {
+      color: var(--color-primary);
+    }
+    
+    &.active {
+      color: var(--color-primary);
+      border-bottom-color: var(--color-primary);
+    }
+  }
+}
+
+.tab-content {
+  .arco-form-item {
+    margin-bottom: 24px;
+    
+    .arco-form-item-label {
+      font-weight: 500;
+      color: var(--color-text-1);
+      margin-bottom: 8px;
+    }
+  }
+  
+  .arco-input,
+  .arco-select,
+  .arco-input-number,
+  .arco-date-picker {
+    border-radius: 6px;
+    border: 1px solid var(--color-border);
+    transition: all 0.2s ease;
+    
+    &:hover {
+      border-color: var(--color-primary-light-3);
+    }
+    
+    &:focus,
+    &.arco-input-focus,
+    &.arco-select-focus {
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 2px rgba(var(--primary-6), 0.1);
+    }
+  }
+  
+  .arco-textarea {
+    border-radius: 6px;
+    border: 1px solid var(--color-border);
+    transition: all 0.2s ease;
+    
+    &:hover {
+      border-color: var(--color-primary-light-3);
+    }
+    
+    &:focus,
+    &.arco-textarea-focus {
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 2px rgba(var(--primary-6), 0.1);
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .tab-navigation {
+    .tab-item {
+      padding: 8px 16px;
+      font-size: 14px;
+    }
+  }
+  
+  .tab-content {
+    .arco-row {
+      .arco-col {
+        margin-bottom: 16px;
+      }
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/system-resource/device-management/procurement/components/ProcurementSearch.vue b/src/views/system-resource/device-management/procurement/components/ProcurementSearch.vue
index 4052c7c..6ffbbbf 100644
--- a/src/views/system-resource/device-management/procurement/components/ProcurementSearch.vue
+++ b/src/views/system-resource/device-management/procurement/components/ProcurementSearch.vue
@@ -1,661 +1,491 @@
 <template>
-  <div class="procurement-search-container">
-    <!-- 搜索按钮 -->
-    <div class="search-trigger">
-      <a-button type="primary" @click="showSearchModal = true">
-        <template #icon>
-          <IconSearch />
-        </template>
-        搜索采购记录
-      </a-button>
-    </div>
+  <a-button type="primary" @click="showSearchModal = true">
+    <template #icon>
+      <IconSearch />
+    </template>
+    搜索采购
+  </a-button>
 
-    <!-- 搜索弹窗 -->
-    <a-modal
-      v-model:visible="showSearchModal"
-      class="search-modal"
-      title="采购记录搜索"
-      width="1200px"
-      :footer="false"
-      @cancel="handleCancel"
+  <!-- 搜索弹窗 -->
+  <a-modal
+    v-model:visible="showSearchModal"
+    title="采购记录搜索"
+    width="1000px"
+  >
+    <a-form
+      ref="formRef"
+      :model="searchForm"
+      layout="vertical"
+      class="search-form"
     >
-      <div class="search-content">
-        <a-form layout="vertical" :model="searchForm" class="search-form">
-          <a-row :gutter="24">
-            <a-col :span="8">
-              <a-form-item label="设备名称">
-                <a-input
-                  v-model="searchForm.equipmentName"
-                  placeholder="请输入设备名称"
-                  allow-clear
-                  @input="debouncedSearch"
-                />
-              </a-form-item>
-            </a-col>
-            <a-col :span="8">
-              <a-form-item label="设备类型">
-                <a-select
-                  v-model="searchForm.equipmentType"
-                  :options="equipmentTypeOptions"
-                  placeholder="请选择设备类型"
-                  allow-clear
-                  @change="debouncedSearch"
-                />
-              </a-form-item>
-            </a-col>
-            <a-col :span="8">
-              <a-form-item label="设备状态">
-                <a-select
-                  v-model="searchForm.equipmentStatus"
-                  :options="equipmentStatusOptions"
-                  placeholder="请选择设备状态"
-                  allow-clear
-                  @change="debouncedSearch"
-                />
-              </a-form-item>
-            </a-col>
-          </a-row>
+      <a-row :gutter="24">
+        <a-col :span="8">
+          <a-form-item label="设备名称">
+            <a-input
+              v-model="searchForm.equipmentName"
+              placeholder="请输入设备名称"
+              allow-clear
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item label="设备型号">
+            <a-input
+              v-model="searchForm.equipmentModel"
+              placeholder="请输入设备型号"
+              allow-clear
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item label="设备类型">
+            <a-select
+              v-model="searchForm.equipmentType"
+              placeholder="请选择设备类型"
+              allow-clear
+            >
+              <a-option value="detection">检测设备</a-option>
+              <a-option value="security">安防设备</a-option>
+              <a-option value="office">办公设备</a-option>
+              <a-option value="car">车辆</a-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
 
-          <a-row :gutter="24">
-            <a-col :span="8">
-              <a-form-item label="位置状态">
-                <a-select
-                  v-model="searchForm.locationStatus"
-                  :options="locationStatusOptions"
-                  placeholder="请选择位置状态"
-                  allow-clear
-                  @change="debouncedSearch"
-                />
-              </a-form-item>
-            </a-col>
-            <a-col :span="8">
-              <a-form-item label="健康状态">
-                <a-select
-                  v-model="searchForm.healthStatus"
-                  :options="healthStatusOptions"
-                  placeholder="请选择健康状态"
-                  allow-clear
-                  @change="debouncedSearch"
-                />
-              </a-form-item>
-            </a-col>
-            <a-col :span="8">
-              <a-form-item label="使用状态">
-                <a-select
-                  v-model="searchForm.useStatus"
-                  :options="useStatusOptions"
-                  placeholder="请选择使用状态"
-                  allow-clear
-                  @change="debouncedSearch"
-                />
-              </a-form-item>
-            </a-col>
-          </a-row>
+      <a-row :gutter="24">
+        <a-col :span="8">
+          <a-form-item label="品牌">
+            <a-input
+              v-model="searchForm.brand"
+              placeholder="请输入品牌"
+              allow-clear
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item label="供应商">
+            <a-input
+              v-model="searchForm.supplierName"
+              placeholder="请输入供应商名称"
+              allow-clear
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item label="采购订单">
+            <a-input
+              v-model="searchForm.purchaseOrder"
+              placeholder="请输入采购订单号"
+              allow-clear
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
 
-          <a-row :gutter="24">
-            <a-col :span="8">
-              <a-form-item label="次户号">
-                <a-input
-                  v-model="searchForm.accountNumber"
-                  placeholder="请输入次户号"
-                  allow-clear
-                  @input="debouncedSearch"
-                />
-              </a-form-item>
-            </a-col>
-            <a-col :span="8">
-              <a-form-item label="设备序列号">
-                <a-input
-                  v-model="searchForm.equipmentSn"
-                  placeholder="请输入设备序列号"
-                  allow-clear
-                  @input="debouncedSearch"
-                />
-              </a-form-item>
-            </a-col>
-            <a-col :span="8">
-              <a-form-item label="资产编号">
-                <a-input
-                  v-model="searchForm.assetCode"
-                  placeholder="请输入资产编号"
-                  allow-clear
-                  @input="debouncedSearch"
-                />
-              </a-form-item>
-            </a-col>
-          </a-row>
+      <a-row :gutter="24">
+        <a-col :span="8">
+          <a-form-item label="设备状态">
+            <a-select
+              v-model="searchForm.equipmentStatus"
+              placeholder="请选择设备状态"
+              allow-clear
+            >
+              <a-option value="normal">正常</a-option>
+              <a-option value="repair">维修中</a-option>
+              <a-option value="scrap">已报废</a-option>
+              <a-option value="idle">闲置</a-option>
+              <a-option value="lost">丢失</a-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item label="位置状态">
+            <a-select
+              v-model="searchForm.locationStatus"
+              placeholder="请选择位置状态"
+              allow-clear
+            >
+              <a-option value="in_stock">库存中</a-option>
+              <a-option value="in_use">使用中</a-option>
+              <a-option value="repair">维修中</a-option>
+              <a-option value="scrapped">已报废</a-option>
+              <a-option value="on_loan">外借中</a-option>
+              <a-option value="lost">丢失</a-option>
+              <a-option value="idle">闲置</a-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item label="健康状态">
+            <a-select
+              v-model="searchForm.healthStatus"
+              placeholder="请选择健康状态"
+              allow-clear
+            >
+              <a-option value="excellent">优秀</a-option>
+              <a-option value="good">良好</a-option>
+              <a-option value="normal">一般</a-option>
+              <a-option value="poor">较差</a-option>
+              <a-option value="critical">危险</a-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
 
-          <a-row :gutter="24">
-            <a-col :span="8">
-              <a-form-item label="品牌">
-                <a-input
-                  v-model="searchForm.brand"
-                  placeholder="请输入品牌"
-                  allow-clear
-                  @input="debouncedSearch"
-                />
-              </a-form-item>
-            </a-col>
-            <a-col :span="8">
-              <a-form-item label="设备型号">
-                <a-input
-                  v-model="searchForm.equipmentModel"
-                  placeholder="请输入设备型号"
-                  allow-clear
-                  @input="debouncedSearch"
-                />
-              </a-form-item>
-            </a-col>
-            <a-col :span="8">
-              <a-form-item label="规格型号">
-                <a-input
-                  v-model="searchForm.specification"
-                  placeholder="请输入规格型号"
-                  allow-clear
-                  @input="debouncedSearch"
-                />
-              </a-form-item>
-            </a-col>
-          </a-row>
+      <a-row :gutter="24">
+        <a-col :span="8">
+          <a-form-item label="负责人">
+            <a-input
+              v-model="searchForm.responsiblePerson"
+              placeholder="请输入负责人"
+              allow-clear
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item label="维护人员">
+            <a-input
+              v-model="searchForm.maintenancePerson"
+              placeholder="请输入维护人员"
+              allow-clear
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item label="物理位置">
+            <a-input
+              v-model="searchForm.physicalLocation"
+              placeholder="请输入物理位置"
+              allow-clear
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
 
-          <a-row :gutter="24">
-            <a-col :span="8">
-              <a-form-item label="物理位置">
-                <a-input
-                  v-model="searchForm.physicalLocation"
-                  placeholder="请输入物理位置"
-                  allow-clear
-                  @input="debouncedSearch"
-                />
-              </a-form-item>
-            </a-col>
-            <a-col :span="8">
-              <a-form-item label="负责人">
-                <a-input
-                  v-model="searchForm.responsiblePerson"
-                  placeholder="请输入负责人"
-                  allow-clear
-                  @input="debouncedSearch"
-                />
-              </a-form-item>
-            </a-col>
-            <a-col :span="8">
-              <a-form-item label="维护人员">
-                <a-input
-                  v-model="searchForm.maintenancePerson"
-                  placeholder="请输入维护人员"
-                  allow-clear
-                  @input="debouncedSearch"
-                />
-              </a-form-item>
-            </a-col>
-          </a-row>
+      <a-row :gutter="24">
+        <a-col :span="8">
+          <a-form-item label="资产编号">
+            <a-input
+              v-model="searchForm.assetCode"
+              placeholder="请输入资产编号"
+              allow-clear
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item label="设备序列号">
+            <a-input
+              v-model="searchForm.equipmentSn"
+              placeholder="请输入设备序列号"
+              allow-clear
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item label="库存条码">
+            <a-input
+              v-model="searchForm.inventoryBarcode"
+              placeholder="请输入库存条码"
+              allow-clear
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
 
-          <a-row :gutter="24">
-            <a-col :span="8">
-              <a-form-item label="采购订单">
-                <a-input
-                  v-model="searchForm.purchaseOrder"
-                  placeholder="请输入采购订单号"
-                  allow-clear
-                  @input="debouncedSearch"
-                />
-              </a-form-item>
-            </a-col>
-            <a-col :span="8">
-              <a-form-item label="供应商">
-                <a-input
-                  v-model="searchForm.supplierName"
-                  placeholder="请输入供应商名称"
-                  allow-clear
-                  @input="debouncedSearch"
-                />
-              </a-form-item>
-            </a-col>
-            <a-col :span="8">
-              <a-form-item label="数量">
-                <a-input-number
-                  v-model="searchForm.quantity"
-                  placeholder="请输入数量"
-                  :min="1"
-                  style="width: 100%"
-                  @change="debouncedSearch"
-                />
-              </a-form-item>
-            </a-col>
-          </a-row>
+      <a-row :gutter="24">
+        <a-col :span="8">
+          <a-form-item label="采购时间范围">
+            <a-range-picker
+              v-model="searchForm.purchaseTimeRange"
+              show-time
+              placeholder="['开始时间', '结束时间']"
+              style="width: 100%"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item label="入库时间范围">
+            <a-range-picker
+              v-model="searchForm.inStockTimeRange"
+              show-time
+              placeholder="['开始时间', '结束时间']"
+              style="width: 100%"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item label="启用时间范围">
+            <a-range-picker
+              v-model="searchForm.activationTimeRange"
+              show-time
+              placeholder="['开始时间', '结束时间']"
+              style="width: 100%"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
 
-          <a-row :gutter="24">
-            <a-col :span="8">
-              <a-form-item label="单价">
-                <a-input-number
-                  v-model="searchForm.unitPrice"
-                  placeholder="请输入单价"
-                  :precision="2"
-                  :min="0"
-                  style="width: 100%"
-                  @change="debouncedSearch"
-                />
-              </a-form-item>
-            </a-col>
-            <a-col :span="8">
-              <a-form-item label="总价">
-                <a-input-number
-                  v-model="searchForm.totalPrice"
-                  placeholder="请输入总价"
-                  :precision="2"
-                  :min="0"
-                  style="width: 100%"
-                  @change="debouncedSearch"
-                />
-              </a-form-item>
-            </a-col>
-            <a-col :span="8">
-              <a-form-item label="盘点依据">
-                <a-input
-                  v-model="searchForm.inventoryBasis"
-                  placeholder="请输入盘点依据"
-                  allow-clear
-                  @input="debouncedSearch"
-                />
-              </a-form-item>
-            </a-col>
-          </a-row>
+      <a-row :gutter="24">
+        <a-col :span="8">
+          <a-form-item label="价格范围">
+            <a-input-number
+              v-model="searchForm.minPrice"
+              placeholder="最低价格"
+              :min="0"
+              style="width: 100%"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item label="至">
+            <a-input-number
+              v-model="searchForm.maxPrice"
+              placeholder="最高价格"
+              :min="0"
+              style="width: 100%"
+            />
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item label="配置规格">
+            <a-input
+              v-model="searchForm.specification"
+              placeholder="请输入配置规格关键词"
+              allow-clear
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
 
-          <a-row :gutter="24">
-            <a-col :span="12">
-              <a-form-item label="动态记录">
-                <a-input
-                  v-model="searchForm.dynamicRecord"
-                  placeholder="请输入动态记录"
-                  allow-clear
-                  @input="debouncedSearch"
-                />
-              </a-form-item>
-            </a-col>
-            <a-col :span="12">
-              <a-form-item label="资产备注">
-                <a-input
-                  v-model="searchForm.assetRemark"
-                  placeholder="请输入资产备注"
-                  allow-clear
-                  @input="debouncedSearch"
-                />
-              </a-form-item>
-            </a-col>
-          </a-row>
+      <a-row :gutter="24">
+        <a-col :span="24">
+          <a-form-item label="备注">
+            <a-input
+              v-model="searchForm.assetRemark"
+              placeholder="请输入备注关键词"
+              allow-clear
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
 
-          <!-- 时间范围搜索 -->
-          <a-row :gutter="24">
-            <a-col :span="8">
-              <a-form-item label="采购时间范围">
-                <a-range-picker
-                  v-model="purchaseTimeRange"
-                  placeholder="['开始时间', '结束时间']"
-                  style="width: 100%"
-                  @change="handleTimeRangeChange"
-                />
-              </a-form-item>
-            </a-col>
-            <a-col :span="8">
-              <a-form-item label="入库时间范围">
-                <a-range-picker
-                  v-model="inStockTimeRange"
-                  placeholder="['开始时间', '结束时间']"
-                  style="width: 100%"
-                  @change="handleTimeRangeChange"
-                />
-              </a-form-item>
-            </a-col>
-            <a-col :span="8">
-              <a-form-item label="启用时间范围">
-                <a-range-picker
-                  v-model="activationTimeRange"
-                  placeholder="['开始时间', '结束时间']"
-                  style="width: 100%"
-                  @change="handleTimeRangeChange"
-                />
-              </a-form-item>
-            </a-col>
-          </a-row>
-
-          <!-- 搜索操作按钮 -->
-          <div class="search-actions">
-            <a-space>
-              <a-button :loading="loading" type="primary" @click="handleSearch">
-                <template #icon>
-                  <IconSearch />
-                </template>
-                搜索
-              </a-button>
-              <a-button @click="handleReset">
-                <template #icon>
-                  <IconRefresh />
-                </template>
-                重置
-              </a-button>
-              <a-button type="dashed" @click="handleTestSearch">
-                测试搜索
-              </a-button>
-              <a-button @click="handleCancel">
-                取消
-              </a-button>
-            </a-space>
-          </div>
-        </a-form>
+    <template #footer>
+      <div class="search-actions">
+        <a-space>
+          <a-button type="primary" @click="handleSearch" :loading="loading">
+            <template #icon>
+              <IconSearch />
+            </template>
+            搜索
+          </a-button>
+          <a-button @click="handleReset">
+            <template #icon>
+              <IconRefresh />
+            </template>
+            重置
+          </a-button>
+          <a-button @click="showSearchModal = false">
+            取消
+          </a-button>
+        </a-space>
       </div>
-    </a-modal>
-  </div>
+    </template>
+  </a-modal>
 </template>
 
-<script lang="ts" setup>
-import { reactive, ref } from 'vue'
-import { IconRefresh, IconSearch } from '@arco-design/web-vue/es/icon'
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { IconSearch, IconRefresh } from '@arco-design/web-vue/es/icon'
 import type { EquipmentListReq } from '@/apis/equipment/type'
 
 interface Props {
   loading?: boolean
 }
 
-// eslint-disable-next-line unused-imports/no-unused-vars
+interface Emits {
+  (e: 'search', params: EquipmentListReq): void
+  (e: 'reset'): void
+}
+
 const props = withDefaults(defineProps<Props>(), {
   loading: false,
 })
 
-const emit = defineEmits<{
-  search: [params: EquipmentListReq]
-  reset: []
-}>()
+const emit = defineEmits<Emits>()
 
-// 弹窗控制
 const showSearchModal = ref(false)
+const formRef = ref()
 
-// 防抖函数
-// eslint-disable-next-line ts/no-unsafe-function-type
-const debounce = (func: Function, delay: number) => {
-  let timeoutId: NodeJS.Timeout
-  return (...args: any[]) => {
-    clearTimeout(timeoutId)
-    // eslint-disable-next-line prefer-spread
-    timeoutId = setTimeout(() => func.apply(null, args), delay)
-  }
-}
-
-const searchForm = reactive<EquipmentListReq>({
+// 搜索表单
+const searchForm = reactive({
   equipmentName: '',
+  equipmentModel: '',
   equipmentType: '',
-  equipmentStatus: '',
-  equipmentSn: '',
-  assetCode: '',
   brand: '',
+  supplierName: '',
+  purchaseOrder: '',
+  equipmentStatus: '',
   locationStatus: '',
   healthStatus: '',
   responsiblePerson: '',
-  useStatus: '',
-  equipmentModel: '',
-  specification: '',
-  physicalLocation: '',
-  supplierName: '',
-  purchaseOrder: '',
   maintenancePerson: '',
-  accountNumber: '',
-  quantity: undefined,
-  unitPrice: undefined,
-  totalPrice: undefined,
-  inventoryBasis: '',
-  dynamicRecord: '',
+  physicalLocation: '',
+  assetCode: '',
+  equipmentSn: '',
+  inventoryBarcode: '',
+  purchaseTimeRange: [],
+  inStockTimeRange: [],
+  activationTimeRange: [],
+  minPrice: undefined,
+  maxPrice: undefined,
+  specification: '',
   assetRemark: '',
-  // 时间范围
-  purchaseTimeStart: '',
-  purchaseTimeEnd: '',
-  inStockTimeStart: '',
-  inStockTimeEnd: '',
-  activationTimeStart: '',
-  activationTimeEnd: '',
 })
 
-// 时间范围字段
-const purchaseTimeRange = ref<[string, string] | null>(null)
-const inStockTimeRange = ref<[string, string] | null>(null)
-const activationTimeRange = ref<[string, string] | null>(null)
-
-const equipmentTypeOptions = [
-  { label: '检测设备', value: 'detection' },
-  { label: '安防设备', value: 'security' },
-  { label: '办公设备', value: 'office' },
-  { label: '车辆', value: 'car' },
-  { label: '其他设备', value: 'other' },
-]
-
-const equipmentStatusOptions = [
-  { label: '正常', value: 'normal' },
-  { label: '维修中', value: 'repair' },
-  { label: '保养中', value: 'maintain' },
-  { label: '报废', value: 'scrap' },
-]
-
-const locationStatusOptions = [
-  { label: '正常', value: 'normal' },
-  { label: '备用', value: 'spare' },
-  { label: '使用中', value: 'in_use' },
-  { label: '维护中', value: 'maintenance' },
-  { label: '维修中', value: 'repair' },
-]
-
-const healthStatusOptions = [
-  { label: '待认证', value: 'pending' },
-  { label: '已认证', value: 'certified' },
-  { label: '已过期', value: 'expired' },
-  { label: '正常', value: 'normal' },
-  { label: '警告', value: 'warning' },
-  { label: '严重', value: 'critical' },
-]
-
-const useStatusOptions = [
-  { label: '空闲中', value: '0' },
-  { label: '使用中', value: '1' },
-]
-
-// 防抖搜索函数
-const debouncedSearch = debounce(() => {
-  console.log('🔍 ProcurementSearch - 防抖搜索触发')
-  console.log('🔍 ProcurementSearch - 搜索表单数据:', searchForm)
-  emit('search', { ...searchForm })
-}, 300)
-
+// 搜索
 const handleSearch = () => {
-  console.log('🔍 ProcurementSearch - 搜索按钮被点击')
-  console.log('🔍 ProcurementSearch - 原始搜索表单数据:', searchForm)
-
-  // 处理参数类型转换，确保与后端期望的类型匹配
-  const processedParams = {
-    ...searchForm,
-    // 确保数字字段为正确的类型
-    quantity: searchForm.quantity ? Number(searchForm.quantity) : undefined,
-    unitPrice: searchForm.unitPrice ? Number(searchForm.unitPrice) : undefined,
-    totalPrice: searchForm.totalPrice ? Number(searchForm.totalPrice) : undefined,
-    // 确保字符串字段不为空字符串
-    equipmentName: searchForm.equipmentName?.trim() || undefined,
-    equipmentType: searchForm.equipmentType?.trim() || undefined,
-    supplierName: searchForm.supplierName?.trim() || undefined,
-    purchaseOrder: searchForm.purchaseOrder?.trim() || undefined,
-    accountNumber: searchForm.accountNumber?.trim() || undefined,
-    inventoryBasis: searchForm.inventoryBasis?.trim() || undefined,
-    dynamicRecord: searchForm.dynamicRecord?.trim() || undefined,
+  const params: EquipmentListReq = {
+    equipmentName: searchForm.equipmentName || undefined,
+    equipmentModel: searchForm.equipmentModel || undefined,
+    equipmentType: searchForm.equipmentType || undefined,
+    brand: searchForm.brand || undefined,
+    supplierName: searchForm.supplierName || undefined,
+    purchaseOrder: searchForm.purchaseOrder || undefined,
+    equipmentStatus: searchForm.equipmentStatus || undefined,
+    locationStatus: searchForm.locationStatus || undefined,
+    healthStatus: searchForm.healthStatus || undefined,
+    responsiblePerson: searchForm.responsiblePerson || undefined,
+    maintenancePerson: searchForm.maintenancePerson || undefined,
+    physicalLocation: searchForm.physicalLocation || undefined,
+    assetCode: searchForm.assetCode || undefined,
+    equipmentSn: searchForm.equipmentSn || undefined,
+    inventoryBarcode: searchForm.inventoryBarcode || undefined,
+    specification: searchForm.specification || undefined,
+    assetRemark: searchForm.assetRemark || undefined,
   }
 
-  // 过滤掉undefined和null值
-  const filteredParams = Object.fromEntries(
-    Object.entries(processedParams).filter(([_, value]) => value !== undefined && value !== null && value !== ''),
-  )
+  // 处理时间范围
+  if (searchForm.purchaseTimeRange && searchForm.purchaseTimeRange.length === 2) {
+    params.purchaseTimeStart = searchForm.purchaseTimeRange[0]
+    params.purchaseTimeEnd = searchForm.purchaseTimeRange[1]
+  }
 
-  console.log('🔍 ProcurementSearch - 处理后的参数:', filteredParams)
-  console.log('🔍 ProcurementSearch - 参数类型检查:')
-  Object.entries(filteredParams).forEach(([key, value]) => {
-    console.log(`  ${key}: ${value} (${typeof value})`)
-  })
+  if (searchForm.inStockTimeRange && searchForm.inStockTimeRange.length === 2) {
+    params.inStockTimeStart = searchForm.inStockTimeRange[0]
+    params.inStockTimeEnd = searchForm.inStockTimeRange[1]
+  }
 
-  emit('search', filteredParams)
+  if (searchForm.activationTimeRange && searchForm.activationTimeRange.length === 2) {
+    params.activationTimeStart = searchForm.activationTimeRange[0]
+    params.activationTimeEnd = searchForm.activationTimeRange[1]
+  }
+
+  // 处理价格范围
+  if (searchForm.minPrice !== undefined) {
+    params.minPrice = searchForm.minPrice
+  }
+
+  if (searchForm.maxPrice !== undefined) {
+    params.maxPrice = searchForm.maxPrice
+  }
+
+  emit('search', params)
   showSearchModal.value = false
 }
 
+// 重置
 const handleReset = () => {
-  console.log('🔄 ProcurementSearch - 重置按钮被点击')
-  console.log('🔄 ProcurementSearch - 重置前的表单数据:', { ...searchForm })
-  Object.keys(searchForm).forEach((key) => {
-    searchForm[key as keyof EquipmentListReq] = '' as any
+  Object.keys(searchForm).forEach(key => {
+    if (Array.isArray(searchForm[key])) {
+      searchForm[key] = []
+    } else {
+      searchForm[key] = ''
+    }
   })
-  // 重置时间范围
-  purchaseTimeRange.value = null
-  inStockTimeRange.value = null
-  activationTimeRange.value = null
-  console.log('🔄 ProcurementSearch - 重置后的表单数据:', { ...searchForm })
+  formRef.value?.resetFields()
   emit('reset')
-}
-
-const handleCancel = () => {
   showSearchModal.value = false
 }
-
-// 处理时间范围变化
-const handleTimeRangeChange = () => {
-  // 更新搜索表单中的时间字段
-  if (purchaseTimeRange.value) {
-    searchForm.purchaseTimeStart = purchaseTimeRange.value[0]
-    searchForm.purchaseTimeEnd = purchaseTimeRange.value[1]
-  } else {
-    searchForm.purchaseTimeStart = ''
-    searchForm.purchaseTimeEnd = ''
-  }
-
-  if (inStockTimeRange.value) {
-    searchForm.inStockTimeStart = inStockTimeRange.value[0]
-    searchForm.inStockTimeEnd = inStockTimeRange.value[1]
-  } else {
-    searchForm.inStockTimeStart = ''
-    searchForm.inStockTimeEnd = ''
-  }
-
-  if (activationTimeRange.value) {
-    searchForm.activationTimeStart = activationTimeRange.value[0]
-    searchForm.activationTimeEnd = activationTimeRange.value[1]
-  } else {
-    searchForm.activationTimeStart = ''
-    searchForm.activationTimeEnd = ''
-  }
-
-  debouncedSearch()
-}
-
-const handleTestSearch = () => {
-  console.log('🔍 ProcurementSearch - 测试搜索按钮被点击')
-  console.log('🔍 ProcurementSearch - 当前搜索表单数据:', searchForm)
-  console.log('🔍 ProcurementSearch - 当前搜索表单数据类型:', typeof searchForm)
-  console.log('🔍 ProcurementSearch - 当前搜索表单的键值对:')
-  Object.entries(searchForm).forEach(([key, value]) => {
-    console.log(`  ${key}: ${value} (${typeof value})`)
-  })
-  emit('search', { ...searchForm })
-  showSearchModal.value = false
-}
-
-defineExpose({
-  reset: handleReset,
-  getSearchForm: () => ({ ...searchForm }),
-  showModal: () => { showSearchModal.value = true },
-})
 </script>
 
-<style lang="scss" scoped>
-.procurement-search-container {
-  .search-trigger {
+<style scoped lang="scss">
+.search-form {
+  .arco-form-item {
     margin-bottom: 16px;
-  }
-}
-
-.search-modal {
-  .arco-modal-header {
-    padding: 20px 24px 16px;
-    border-bottom: 1px solid var(--color-border);
-
-    .arco-modal-title {
-      font-size: 18px;
-      font-weight: 600;
+    
+    .arco-form-item-label {
+      font-weight: 500;
       color: var(--color-text-1);
+      margin-bottom: 8px;
     }
   }
-
-  .arco-modal-body {
-    padding: 24px;
+  
+  .arco-input,
+  .arco-select,
+  .arco-input-number {
+    border-radius: 6px;
+    border: 1px solid var(--color-border);
+    transition: all 0.2s ease;
+    
+    &:hover {
+      border-color: var(--color-primary-light-3);
+    }
+    
+    &:focus,
+    &.arco-input-focus,
+    &.arco-select-focus {
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 2px rgba(var(--primary-6), 0.1);
+    }
+  }
+  
+  .arco-range-picker {
+    border-radius: 6px;
+    border: 1px solid var(--color-border);
+    transition: all 0.2s ease;
+    
+    &:hover {
+      border-color: var(--color-primary-light-3);
+    }
+    
+    &:focus,
+    &.arco-range-picker-focus {
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 2px rgba(var(--primary-6), 0.1);
+    }
   }
 }
 
-.search-content {
+.search-actions {
+  display: flex;
+  justify-content: center;
+  padding-top: 16px;
+  border-top: 1px solid var(--color-border);
+  
+  .arco-btn {
+    border-radius: 6px;
+    font-weight: 500;
+    min-width: 80px;
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
   .search-form {
-    .arco-form-item {
-      margin-bottom: 20px;
-
-      .arco-form-item-label {
-        font-weight: 500;
-        color: var(--color-text-1);
+    .arco-row {
+      .arco-col {
         margin-bottom: 8px;
-        font-size: 14px;
-      }
-    }
-
-    .arco-input,
-    .arco-select,
-    .arco-input-number {
-      border-radius: 6px;
-      border: 1px solid var(--color-border);
-      transition: all 0.2s ease;
-
-      &:hover {
-        border-color: var(--color-primary-light-3);
-      }
-
-      &:focus,
-      &.arco-input-focus,
-      &.arco-select-focus {
-        border-color: var(--color-primary);
-        box-shadow: 0 0 0 2px rgba(var(--primary-6), 0.1);
-      }
-    }
-
-    .arco-input-inner {
-      padding: 8px 12px;
-      font-size: 14px;
-    }
-
-    .arco-select-view {
-      padding: 8px 12px;
-      font-size: 14px;
-    }
-
-    .arco-select-arrow {
-      color: var(--color-text-3);
-    }
-
-    .arco-input-inner::placeholder {
-      color: var(--color-text-3);
-      font-size: 14px;
-    }
-
-    .arco-input-clear-btn {
-      color: var(--color-text-3);
-
-      &:hover {
-        color: var(--color-text-2);
       }
     }
   }
-
+  
   .search-actions {
-    display: flex;
-    justify-content: center;
-    margin-top: 32px;
-    padding-top: 24px;
-    border-top: 1px solid var(--color-border);
+    .arco-space {
+      width: 100%;
+      justify-content: space-between;
+    }
   }
 }
 </style>
diff --git a/src/views/system-resource/device-management/procurement/index.vue b/src/views/system-resource/device-management/procurement/index.vue
index 1bb8cc5..8bc491b 100644
--- a/src/views/system-resource/device-management/procurement/index.vue
+++ b/src/views/system-resource/device-management/procurement/index.vue
@@ -1,168 +1,176 @@
 <template>
-  <div class="procurement-management">
-    <a-card title="设备采购管理" :bordered="false" class="main-card">
-      <template #extra>
-        <a-space>
-          <a-button type="primary" @click="handleAdd" class="add-btn">
-            <template #icon>
-              <GiSvgIcon name="plus" />
-            </template>
-            新增采购记录
-          </a-button>
-          <a-button type="dashed" @click="handleTestApi" class="test-btn">
-            测试API参数
-          </a-button>
-        </a-space>
-      </template>
-
-      <!-- 统计卡片 -->
-      <div class="stats-container">
-        <a-row :gutter="16">
-          <a-col :span="6">
-            <a-card class="stat-card stat-card-success">
-              <a-statistic
-                title="采购总金额"
-                :value="stats.totalAmount || 0"
-                :precision="2"
-                suffix="元"
-                :value-style="{ color: '#3f8600' }"
-              />
-            </a-card>
-          </a-col>
-          <a-col :span="6">
-            <a-card class="stat-card stat-card-primary">
-              <a-statistic
-                title="供应商数量"
-                :value="stats.supplierCount || 0"
-                suffix="家"
-                :value-style="{ color: '#1890ff' }"
-              />
-            </a-card>
-          </a-col>
-          <a-col :span="6">
-            <a-card class="stat-card stat-card-purple">
-              <a-statistic
-                title="设备数量"
-                :value="stats.equipmentCount || 0"
-                suffix="台"
-                :value-style="{ color: '#722ed1' }"
-              />
-            </a-card>
-          </a-col>
-          <a-col :span="6">
-            <a-card class="stat-card stat-card-warning">
-              <a-statistic
-                title="平均单价"
-                :value="stats.averageAmount || 0"
-                :precision="2"
-                suffix="元"
-                :value-style="{ color: '#fa8c16' }"
-              />
-            </a-card>
-          </a-col>
-        </a-row>
+  <div class="equipment-procurement-container">
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <div class="header-content">
+        <div class="header-left">
+          <div class="page-title">
+            <IconDesktop style="font-size: 24px; margin-right: 12px; color: var(--color-primary);" />
+            <h1>设备采购管理</h1>
+          </div>
+          <div class="page-description">
+            管理企业设备采购流程，包括采购申请、订单管理、供应商管理等
+          </div>
+        </div>
+        <div class="header-right">
+          <a-space>
+            <ProcurementSearch
+              :loading="loading"
+              @search="handleSearch"
+              @reset="handleReset"
+            />
+            <a-button type="primary" @click="handleAdd" size="large">
+              <template #icon>
+                <IconPlus />
+              </template>
+              新增采购
+            </a-button>
+          </a-space>
+        </div>
       </div>
+    </div>
 
-      <!-- 搜索组件 -->
-      <ProcurementSearch 
-        :loading="loading"
-        @search="handleSearch"
-        @reset="handleReset"
-      />
+    <!-- 统计卡片 -->
+    <div class="stats-container">
+      <a-row :gutter="16">
+        <a-col :span="6">
+          <a-card class="stat-card" :bordered="false">
+            <div class="stat-content">
+              <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
+                <IconDesktop />
+              </div>
+              <div class="stat-info">
+                <div class="stat-number">{{ pagination.total }}</div>
+                <div class="stat-label">采购总数</div>
+              </div>
+            </div>
+          </a-card>
+        </a-col>
+        <a-col :span="6">
+          <a-card class="stat-card" :bordered="false">
+            <div class="stat-content">
+              <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
+                <IconClockCircle />
+              </div>
+              <div class="stat-info">
+                <div class="stat-number">{{ getPendingCount() }}</div>
+                <div class="stat-label">待处理</div>
+              </div>
+            </div>
+          </a-card>
+        </a-col>
+        <a-col :span="6">
+          <a-card class="stat-card" :bordered="false">
+            <div class="stat-content">
+              <div class="stat-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
+                <IconCheckCircle />
+              </div>
+              <div class="stat-info">
+                <div class="stat-number">{{ getCompletedCount() }}</div>
+                <div class="stat-label">已完成</div>
+              </div>
+            </div>
+          </a-card>
+        </a-col>
+        <a-col :span="6">
+          <a-card class="stat-card" :bordered="false">
+            <div class="stat-content">
+              <div class="stat-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
+                <IconApps />
+              </div>
+              <div class="stat-info">
+                <div class="stat-number">¥{{ getTotalAmount() }}</div>
+                <div class="stat-label">采购总额</div>
+              </div>
+            </div>
+          </a-card>
+        </a-col>
+      </a-row>
+    </div>
+
+    <!-- 数据表格 -->
+    <a-card class="table-card" :bordered="false">
+      <template #title>
+        <div class="card-title">
+          <span>采购记录</span>
+          <div class="table-actions">
+            <a-space>
+              <a-button type="text" @click="refreshData">
+                <template #icon>
+                  <IconRefresh />
+                </template>
+                刷新
+              </a-button>
+              <a-button type="text" @click="handleExport">
+                <template #icon>
+                  <IconDownload />
+                </template>
+                导出
+              </a-button>
+            </a-space>
+          </div>
+        </div>
+      </template>
 
       <a-table
         :columns="columns"
         :data="tableData"
         :loading="loading"
         :pagination="pagination"
-        @page-change="handlePageChange"
-        @page-size-change="handlePageSizeChange"
+        :row-selection="rowSelection"
+        row-key="equipmentId"
+        @change="handleTableChange"
       >
-        <template #toolbar-left>
-          <span class="search-result-info">
-            共找到 <strong>{{ pagination.total }}</strong> 条记录
-          </span>
-        </template>
-        
-        <template #equipmentType="{ record }">
-          <a-tag :color="getEquipmentTypeColor(record.equipmentType)">
-            {{ getEquipmentTypeText(record.equipmentType) }}
+        <!-- 设备状态 -->
+        <template #equipmentStatus="{ record }">
+          <a-tag :color="getEquipmentStatusColor(record.equipmentStatus)">
+            {{ getEquipmentStatusText(record.equipmentStatus) }}
           </a-tag>
         </template>
-        
-        <template #equipmentStatus="{ record }">
-          <a-space>
-            <div
-              :class="getStatusDotClass(record.equipmentStatus)"
-              class="status-dot"
-            />
-            <a-tag :color="getEquipmentStatusColor(record.equipmentStatus)">
-              {{ getEquipmentStatusText(record.equipmentStatus) }}
-            </a-tag>
-          </a-space>
-        </template>
-        
+
+        <!-- 位置状态 -->
         <template #locationStatus="{ record }">
           <a-tag :color="getLocationStatusColor(record.locationStatus)">
             {{ getLocationStatusText(record.locationStatus) }}
           </a-tag>
         </template>
-        
+
+        <!-- 健康状态 -->
         <template #healthStatus="{ record }">
           <a-tag :color="getHealthStatusColor(record.healthStatus)">
             {{ getHealthStatusText(record.healthStatus) }}
           </a-tag>
         </template>
-        
+
+        <!-- 采购价格 -->
         <template #purchasePrice="{ record }">
-          <span v-if="record.purchasePrice" class="price">
+          <span v-if="record.purchasePrice" class="price-text">
             ¥{{ formatPrice(record.purchasePrice) }}
           </span>
-          <span v-else>-</span>
-        </template>
-        
-        <template #purchaseTime="{ record }">
-          {{ formatDateTime(record.purchaseTime) }}
-        </template>
-        
-        <template #inStockTime="{ record }">
-          {{ formatDateTime(record.inStockTime) }}
-        </template>
-        
-        <template #activationTime="{ record }">
-          {{ formatDateTime(record.activationTime) }}
-        </template>
-        
-        <template #warrantyExpireDate="{ record }">
-          {{ formatDate(record.warrantyExpireDate) }}
-        </template>
-        
-        <template #unitPrice="{ record }">
-          <span v-if="record.unitPrice" class="price">
-            ¥{{ formatPrice(record.unitPrice) }}
-          </span>
-          <span v-else>-</span>
-        </template>
-        
-        <template #totalPrice="{ record }">
-          <span v-if="record.totalPrice" class="price">
-            ¥{{ formatPrice(record.totalPrice) }}
-          </span>
-          <span v-else>-</span>
-        </template>
-        
-        <template #inventoryBasis="{ record }">
-          <span>{{ record.inventoryBasis || '-' }}</span>
+          <span v-else class="no-data">-</span>
         </template>
 
-        <template #dynamicRecord="{ record }">
-          <span>{{ record.dynamicRecord || '-' }}</span>
+        <!-- 当前净值 -->
+        <template #currentNetValue="{ record }">
+          <span v-if="record.currentNetValue" class="price-text">
+            ¥{{ formatPrice(record.currentNetValue) }}
+          </span>
+          <span v-else class="no-data">-</span>
         </template>
-        
-        <template #operations="{ record }">
+
+        <!-- 创建时间 -->
+        <template #createTime="{ record }">
+          <span v-if="record.createTime" class="time-text">
+            {{ formatDateTime(record.createTime) }}
+          </span>
+          <span v-else class="no-data">-</span>
+        </template>
+
+        <!-- 操作 -->
+        <template #action="{ record }">
           <a-space>
             <a-button type="text" size="small" @click="handleView(record)">
-              查看详情
+              查看
             </a-button>
             <a-button type="text" size="small" @click="handleEdit(record)">
               编辑
@@ -180,1376 +188,669 @@
       </a-table>
     </a-card>
 
-    <!-- 采购记录表单弹窗 -->
-    <a-modal
+    <!-- 新增/编辑弹窗 -->
+    <ProcurementModal
       v-model:visible="modalVisible"
-      :title="modalTitle"
-      width="900px"
-      @ok="handleSubmit"
-      @cancel="handleCancel"
-      class="procurement-form-modal"
-    >
-      <a-form
-        ref="formRef"
-        :model="formData"
-        :rules="rules"
-        layout="vertical"
-        class="procurement-form"
-      >
-        <a-row :gutter="24">
-          <a-col :span="12">
-            <a-form-item label="设备名称" field="equipmentName" class="form-item">
-              <a-input 
-                v-model="formData.equipmentName" 
-                placeholder="请输入设备名称" 
-                class="form-input"
-                allow-clear
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="次户号" field="accountNumber" class="form-item">
-              <a-input 
-                v-model="formData.accountNumber" 
-                placeholder="请输入次户号" 
-                class="form-input"
-                allow-clear
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-        
-        <a-row :gutter="24">
-          <a-col :span="12">
-            <a-form-item label="设备型号" field="equipmentModel" class="form-item">
-              <a-input 
-                v-model="formData.equipmentModel" 
-                placeholder="请输入设备型号" 
-                class="form-input"
-                allow-clear
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="品牌" field="brand" class="form-item">
-              <a-input 
-                v-model="formData.brand"
-                placeholder="请输入品牌"
-                class="form-input"
-                allow-clear
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-        
-        <a-row :gutter="24">
-          <a-col :span="8">
-            <a-form-item label="数量" field="quantity" class="form-item">
-              <a-input-number
-                v-model="formData.quantity"
-                placeholder="请输入数量"
-                :min="1"
-                style="width: 100%"
-                class="form-input"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :span="8">
-            <a-form-item label="单价" field="unitPrice" class="form-item">
-              <a-input-number
-                v-model="formData.unitPrice"
-                placeholder="请输入单价"
-                :precision="2"
-                :min="0"
-                style="width: 100%"
-                class="form-input"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :span="8">
-            <a-form-item label="总价" field="totalPrice" class="form-item">
-              <a-input-number
-                v-model="formData.totalPrice"
-                placeholder="请输入总价"
-                :precision="2"
-                :min="0"
-                style="width: 100%"
-                class="form-input"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-        
-        <a-row :gutter="24">
-          <a-col :span="12">
-            <a-form-item label="设备类型" field="equipmentType" class="form-item">
-              <a-select 
-                v-model="formData.equipmentType" 
-                placeholder="请选择设备类型"
-                class="form-select"
-                allow-clear
-              >
-                <a-option value="detection">检测设备</a-option>
-                <a-option value="security">安防设备</a-option>
-                <a-option value="office">办公设备</a-option>
-                <a-option value="car">车辆</a-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="设备序列号" field="equipmentSn" class="form-item">
-              <a-input 
-                v-model="formData.equipmentSn" 
-                placeholder="请输入设备序列号" 
-                class="form-input"
-                allow-clear
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-        
-        <a-row :gutter="24">
-          <a-col :span="12">
-            <a-form-item label="位置状态" field="locationStatus" class="form-item">
-              <a-select 
-                v-model="formData.locationStatus" 
-                placeholder="请选择位置状态"
-                class="form-select"
-                allow-clear
-              >
-                <a-option value="normal">正常</a-option>
-                <a-option value="spare">备用</a-option>
-                <a-option value="in_use">使用中</a-option>
-                <a-option value="maintenance">维护中</a-option>
-                <a-option value="repair">维修中</a-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="健康状态" field="healthStatus" class="form-item">
-              <a-select 
-                v-model="formData.healthStatus" 
-                placeholder="请选择健康状态"
-                class="form-select"
-                allow-clear
-              >
-                <a-option value="pending">待认证</a-option>
-                <a-option value="certified">已认证</a-option>
-                <a-option value="expired">已过期</a-option>
-                <a-option value="normal">正常</a-option>
-                <a-option value="warning">警告</a-option>
-                <a-option value="critical">严重</a-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        
-        <a-row :gutter="24">
-          <a-col :span="12">
-            <a-form-item label="采购订单" field="purchaseOrder" class="form-item">
-              <a-input 
-                v-model="formData.purchaseOrder" 
-                placeholder="请输入采购订单号" 
-                class="form-input"
-                allow-clear
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="供应商名称" field="supplierName" class="form-item">
-              <a-input 
-                v-model="formData.supplierName" 
-                placeholder="请输入供应商名称" 
-                class="form-input"
-                allow-clear
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-        
-        <a-row :gutter="24">
-          <a-col :span="12">
-            <a-form-item label="采购价格" field="purchasePrice" class="form-item">
-              <a-input-number
-                v-model="formData.purchasePrice"
-                placeholder="请输入采购价格"
-                :precision="2"
-                :min="0"
-                style="width: 100%"
-                class="form-input"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="负责人" field="responsiblePerson" class="form-item">
-              <a-input 
-                v-model="formData.responsiblePerson" 
-                placeholder="请输入负责人" 
-                class="form-input"
-                allow-clear
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-        
-        <a-row :gutter="24">
-          <a-col :span="12">
-            <a-form-item label="采购时间" field="purchaseTime" class="form-item">
-              <a-date-picker
-                v-model="formData.purchaseTime"
-                placeholder="请选择采购时间"
-                style="width: 100%"
-                show-time
-                class="form-input"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="入库时间" field="inStockTime" class="form-item">
-              <a-date-picker
-                v-model="formData.inStockTime"
-                placeholder="请选择入库时间"
-                style="width: 100%"
-                show-time
-                class="form-input"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-        
-        <a-row :gutter="24">
-          <a-col :span="12">
-            <a-form-item label="启用时间" field="activationTime" class="form-item">
-              <a-date-picker
-                v-model="formData.activationTime"
-                placeholder="请选择启用时间"
-                style="width: 100%"
-                show-time
-                class="form-input"
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="保修截止日期" field="warrantyExpireDate" class="form-item">
-              <a-date-picker
-                v-model="formData.warrantyExpireDate"
-                placeholder="请选择保修截止日期"
-                style="width: 100%"
-                class="form-input"
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-        
-        <a-row :gutter="24">
-          <a-col :span="12">
-            <a-form-item label="维护人员" field="maintenancePerson" class="form-item">
-              <a-input 
-                v-model="formData.maintenancePerson" 
-                placeholder="请输入维护人员" 
-                class="form-input"
-                allow-clear
-              />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item label="盘点依据" field="inventoryBasis" class="form-item">
-              <a-input 
-                v-model="formData.inventoryBasis" 
-                placeholder="请输入盘点依据" 
-                class="form-input"
-                allow-clear
-              />
-            </a-form-item>
-          </a-col>
-        </a-row>
-        
-        <a-form-item label="动态记录" field="dynamicRecord" class="form-item">
-          <a-textarea
-            v-model="formData.dynamicRecord"
-            placeholder="请输入动态记录信息"
-            :rows="3"
-            class="form-textarea"
-            allow-clear
-          />
-        </a-form-item>
-        
-        <a-form-item label="配置规格" field="specification" class="form-item">
-          <a-textarea
-            v-model="formData.specification"
-            placeholder="请输入配置规格/参数"
-            :rows="4"
-            class="form-textarea"
-            allow-clear
-          />
-        </a-form-item>
-        
-        <a-form-item label="备注" field="assetRemark" class="form-item">
-          <a-textarea
-            v-model="formData.assetRemark"
-            placeholder="请输入备注信息（可选）"
-            :rows="3"
-            class="form-textarea"
-            allow-clear
-          />
-        </a-form-item>
-      </a-form>
-    </a-modal>
-
-    <!-- 采购记录详情弹窗 -->
-    <a-modal
-      v-model:visible="detailModalVisible"
-      title="采购记录详情"
-      width="800px"
-      :footer="false"
-    >
-      <div class="procurement-detail" v-if="currentRecord">
-        <div class="detail-header">
-          <h3>{{ currentRecord.equipmentName }}</h3>
-          <div class="detail-meta">
-            <span>次户号: {{ currentRecord.accountNumber || '-' }}</span>
-            <span>设备型号: {{ currentRecord.equipmentModel }}</span>
-            <span>品牌: {{ currentRecord.brand || '-' }}</span>
-            <span>数量: {{ currentRecord.quantity || 1 }}</span>
-            <span>单价: <span class="price">¥{{ formatPrice(currentRecord.unitPrice) }}</span></span>
-            <span>总价: <span class="price">¥{{ formatPrice(currentRecord.totalPrice) }}</span></span>
-            <span>设备类型: <a-tag :color="getEquipmentTypeColor(currentRecord.equipmentType)">{{ getEquipmentTypeText(currentRecord.equipmentType) }}</a-tag></span>
-            <span>备用状态: <a-tag :color="getLocationStatusColor(currentRecord.locationStatus)">{{ getLocationStatusText(currentRecord.locationStatus) }}</a-tag></span>
-            <span>认证状态: <a-tag :color="getHealthStatusColor(currentRecord.healthStatus)">{{ getHealthStatusText(currentRecord.healthStatus) }}</a-tag></span>
-            <span>采购订单: {{ currentRecord.purchaseOrder }}</span>
-            <span>供应商: {{ currentRecord.supplierName }}</span>
-            <span>采购价格: <span class="price">¥{{ formatPrice(currentRecord.purchasePrice) }}</span></span>
-            <span>采购时间: {{ formatDateTime(currentRecord.purchaseTime) }}</span>
-          </div>
-        </div>
-        
-        <a-divider />
-        
-        <div class="detail-content">
-          <h4>设备信息</h4>
-          <div class="content-text">
-            <p><strong>设备序列号:</strong> {{ currentRecord.equipmentSn }}</p>
-            <p><strong>负责人:</strong> {{ currentRecord.responsiblePerson || '-' }}</p>
-            <p><strong>维护人员:</strong> {{ currentRecord.maintenancePerson || '-' }}</p>
-            <p><strong>入库时间:</strong> {{ formatDateTime(currentRecord.inStockTime) }}</p>
-            <p><strong>启用时间:</strong> {{ formatDateTime(currentRecord.activationTime) }}</p>
-            <p><strong>保修截止:</strong> {{ formatDate(currentRecord.warrantyExpireDate) }}</p>
-          </div>
-          
-          <h4>盘点信息</h4>
-          <div class="content-text">
-            <p><strong>盘点依据:</strong> {{ currentRecord.inventoryBasis || '暂无盘点依据' }}</p>
-          </div>
-          
-          <h4>动态记录</h4>
-          <div class="content-text">{{ currentRecord.dynamicRecord || '暂无动态记录' }}</div>
-          
-          <h4>配置规格</h4>
-          <div class="content-text">{{ currentRecord.specification || '暂无配置规格' }}</div>
-          
-          <h4>备注</h4>
-          <div class="content-text">{{ currentRecord.assetRemark || '暂无备注' }}</div>
-        </div>
-        
-        <a-divider />
-        
-        <div class="detail-footer">
-          <a-button @click="detailModalVisible = false">
-            关闭
-          </a-button>
-        </div>
-      </div>
-    </a-modal>
+      :procurement-data="currentProcurement"
+      :mode="modalMode"
+      @success="handleModalSuccess"
+    />
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
-import { Message } from '@arco-design/web-vue'
-import { IconSearch, IconRefresh } from '@arco-design/web-vue/es/icon'
+<script lang="ts" setup>
+import { onMounted, reactive, ref, watch } from 'vue'
+import { Modal } from '@arco-design/web-vue'
+import {
+  IconCheckCircle,
+  IconClockCircle,
+  IconDownload,
+  IconPlus, 
+  IconRefresh,
+  IconDesktop,
+  IconApps
+} from '@arco-design/web-vue/es/icon'
+import message from '@arco-design/web-vue/es/message'
+import ProcurementModal from './components/ProcurementModal.vue'
+import ProcurementSearch from './components/ProcurementSearch.vue'
 import { equipmentProcurementApi } from '@/apis/equipment/procurement'
 import type { EquipmentListReq, EquipmentResp } from '@/apis/equipment/type'
-import ProcurementSearch from './components/ProcurementSearch.vue'
 
-// 防抖函数
-const debounce = (func: Function, delay: number) => {
-  let timeoutId: NodeJS.Timeout
-  return (...args: any[]) => {
-    clearTimeout(timeoutId)
-    timeoutId = setTimeout(() => func.apply(null, args), delay)
-  }
-}
+defineOptions({ name: 'EquipmentProcurement' })
 
-defineOptions({ name: 'ProcurementManagement' })
-
-// 表格列定义
-const columns = [
-  { title: '次户号', dataIndex: 'accountNumber', key: 'accountNumber', width: 120 },
-  { title: '设备名称', dataIndex: 'equipmentName', key: 'equipmentName', width: 200 },
-  { title: '设备型号', dataIndex: 'equipmentModel', key: 'equipmentModel', width: 150 },
-  { title: '品牌', dataIndex: 'brand', key: 'brand', width: 120 },
-  { title: '数量', dataIndex: 'quantity', key: 'quantity', width: 80 },
-  { title: '单价', dataIndex: 'unitPrice', key: 'unitPrice', slotName: 'unitPrice', width: 120 },
-  { title: '总价', dataIndex: 'totalPrice', key: 'totalPrice', slotName: 'totalPrice', width: 120 },
-  { title: '设备类型', dataIndex: 'equipmentType', key: 'equipmentType', slotName: 'equipmentType', width: 120 },
-  { title: '设备状态', dataIndex: 'equipmentStatus', key: 'equipmentStatus', slotName: 'equipmentStatus', width: 120 },
-  { title: '位置状态', dataIndex: 'locationStatus', key: 'locationStatus', slotName: 'locationStatus', width: 120 },
-  { title: '采购订单', dataIndex: 'purchaseOrder', key: 'purchaseOrder', width: 150 },
-  { title: '供应商', dataIndex: 'supplierName', key: 'supplierName', width: 150 },
-  { title: '采购价格', dataIndex: 'purchasePrice', key: 'purchasePrice', slotName: 'purchasePrice', width: 120 },
-  { title: '采购时间', dataIndex: 'purchaseTime', key: 'purchaseTime', slotName: 'purchaseTime', width: 150 },
-  { title: '入库时间', dataIndex: 'inStockTime', key: 'inStockTime', slotName: 'inStockTime', width: 150 },
-  { title: '启用时间', dataIndex: 'activationTime', key: 'activationTime', slotName: 'activationTime', width: 150 },
-  { title: '保修到期', dataIndex: 'warrantyExpireDate', key: 'warrantyExpireDate', slotName: 'warrantyExpireDate', width: 120 },
-  { title: '健康状态', dataIndex: 'healthStatus', key: 'healthStatus', slotName: 'healthStatus', width: 120 },
-  { title: '盘点依据', dataIndex: 'inventoryBasis', key: 'inventoryBasis', width: 150 },
-  { title: '动态记录', dataIndex: 'dynamicRecord', key: 'dynamicRecord', width: 200 },
-  { title: '操作', key: 'operations', slotName: 'operations', width: 200 }
-]
-
-// 搜索表单已移至组件中
+// 当前搜索参数
+const currentSearchParams = ref<EquipmentListReq>({
+  minPrice: undefined,
+  maxPrice: undefined
+})
 
 // 表格数据
 const tableData = ref<EquipmentResp[]>([])
 const loading = ref(false)
-const pagination = reactive({
+
+// 分页配置
+const pagination = reactive<any>({
   current: 1,
   pageSize: 10,
   total: 0,
-  showTotal: true,
+  showPageSize: true,
   showJumper: true,
-  showPageSize: true
+  showTotal: (total: number) => `共 ${total} 条记录`,
 })
 
-// 当前搜索参数
-const currentSearchParams = ref<EquipmentListReq>({})
-
-// 弹窗相关
+// 弹窗控制
 const modalVisible = ref(false)
-const modalTitle = ref('新增采购记录')
-const detailModalVisible = ref(false)
-const currentRecord = ref<EquipmentResp | null>(null)
-const formRef = ref()
-const formData = reactive({
-  equipmentId: '',
-  equipmentName: '',
-  equipmentModel: '',
-  equipmentType: '',
-  equipmentStatus: '',
-  useStatus: 'normal',
-  equipmentSn: '',
-  assetCode: '',
-  brand: '',
-  specification: '',
-  locationStatus: '',
-  physicalLocation: '',
-  responsiblePerson: '',
-  healthStatus: '',
-  purchaseTime: '',
-  inStockTime: '',
-  activationTime: '',
-  expectedScrapTime: '',
-  actualScrapTime: '',
-  purchaseOrder: '',
-  supplierName: '',
-  purchasePrice: undefined,
-  currentNetValue: undefined,
-  depreciationMethod: '',
-  depreciationYears: undefined,
-  salvageValue: undefined,
-  warrantyExpireDate: '',
-  lastMaintenanceDate: '',
-  nextMaintenanceDate: '',
-  maintenancePerson: '',
-  inventoryBarcode: '',
-  assetRemark: '',
-  quantity: 1,
-  unitPrice: undefined,
-  totalPrice: undefined,
-  accountNumber: '',
-  dynamicRecord: '',
-  inventoryBasis: ''
+const currentProcurement = ref<EquipmentResp | null>(null)
+const modalMode = ref<'add' | 'edit' | 'view'>('add')
+
+// 表格选择
+const selectedRowKeys = ref<string[]>([])
+const rowSelection = reactive({
+  type: 'checkbox' as const,
+  showCheckedAll: true,
+  selectedRowKeys,
+  onChange: (keys: string[]) => {
+    selectedRowKeys.value = keys
+  },
 })
 
-// 统计数据
-const stats = ref({
-  totalAmount: 0,
-  supplierCount: 0,
-  equipmentCount: 0,
-  averageAmount: 0
-})
-
-// 表单验证规则
-const rules = {
-  equipmentName: [{ required: true, message: '请输入设备名称' }],
-  equipmentModel: [{ required: true, message: '请输入设备型号' }],
-  equipmentType: [{ required: true, message: '请选择设备类型' }],
-  equipmentSn: [{ required: true, message: '请输入设备序列号' }],
-  purchaseOrder: [{ required: true, message: '请输入采购订单号' }],
-  supplierName: [{ required: true, message: '请输入供应商名称' }],
-  purchasePrice: [{ required: true, message: '请输入采购价格' }],
-  quantity: [{ required: true, message: '请输入数量' }],
-  unitPrice: [{ required: true, message: '请输入单价' }],
-  totalPrice: [{ required: true, message: '请输入总价' }],
-  spareStatus: [{ required: true, message: '请选择备用状态' }],
-  certificationStatus: [{ required: true, message: '请选择认证状态' }]
-}
-
-// 获取设备类型文本
-const getEquipmentTypeText = (type: string | undefined) => {
-  if (!type) return '-'
-  const typeMap: Record<string, string> = {
-    detection: '检测设备',
-    maintain: '维修设备',
-    security: '安全设备',
-    office: '办公设备',
-    car: '车辆'
-  }
-  return typeMap[type] || type
-}
-
-// 获取设备类型颜色
-const getEquipmentTypeColor = (type: string | undefined) => {
-  if (!type) return 'default'
-  const colorMap: Record<string, string> = {
-    detection: 'blue',
-    maintain: 'green',
-    security: 'orange',
-    office: 'purple',
-    car: 'red'
-  }
-  return colorMap[type] || 'default'
-}
-
-// 获取设备状态文本
-const getEquipmentStatusText = (status: string | undefined) => {
-  if (!status) return '-'
-  const statusMap: Record<string, string> = {
-    normal: '正常',
-    repair: '维修中',
-    maintain: '保养中',
-    scrap: '报废'
-  }
-  return statusMap[status] || status
-}
+// 表格列配置
+const columns = [
+  {
+    title: '资产编号',
+    dataIndex: 'assetCode',
+    key: 'assetCode',
+    width: 120,
+  },
+  {
+    title: '设备名称',
+    dataIndex: 'equipmentName',
+    key: 'equipmentName',
+    width: 150,
+  },
+  {
+    title: '设备类型',
+    dataIndex: 'equipmentType',
+    key: 'equipmentType',
+    width: 120,
+  },
+  {
+    title: '设备型号',
+    dataIndex: 'equipmentModel',
+    key: 'equipmentModel',
+    width: 120,
+  },
+  {
+    title: '品牌',
+    dataIndex: 'brand',
+    key: 'brand',
+    width: 100,
+  },
+  {
+    title: '供应商',
+    dataIndex: 'supplierName',
+    key: 'supplierName',
+    width: 150,
+  },
+  {
+    title: '采购订单',
+    dataIndex: 'purchaseOrder',
+    key: 'purchaseOrder',
+    width: 120,
+  },
+  {
+    title: '采购价格',
+    dataIndex: 'purchasePrice',
+    key: 'purchasePrice',
+    slotName: 'purchasePrice',
+    width: 120,
+  },
+  {
+    title: '当前净值',
+    dataIndex: 'currentNetValue',
+    key: 'currentNetValue',
+    slotName: 'currentNetValue',
+    width: 120,
+  },
+  {
+    title: '设备状态',
+    dataIndex: 'equipmentStatus',
+    key: 'equipmentStatus',
+    slotName: 'equipmentStatus',
+    width: 120,
+  },
+  {
+    title: '位置状态',
+    dataIndex: 'locationStatus',
+    key: 'locationStatus',
+    slotName: 'locationStatus',
+    width: 120,
+  },
+  {
+    title: '健康状态',
+    dataIndex: 'healthStatus',
+    key: 'healthStatus',
+    slotName: 'healthStatus',
+    width: 100,
+  },
+  {
+    title: '负责人',
+    dataIndex: 'responsiblePerson',
+    key: 'responsiblePerson',
+    width: 100,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    key: 'createTime',
+    slotName: 'createTime',
+    width: 160,
+  },
+  {
+    title: '操作',
+    key: 'action',
+    slotName: 'action',
+    width: 200,
+    fixed: 'right',
+  },
+]
 
 // 获取设备状态颜色
-const getEquipmentStatusColor = (status: string | undefined) => {
-  if (!status) return 'default'
+const getEquipmentStatusColor = (status: string) => {
   const colorMap: Record<string, string> = {
     normal: 'green',
     repair: 'orange',
-    maintain: 'blue',
-    scrap: 'red'
+    scrap: 'red',
+    idle: 'blue',
+    lost: 'gray',
   }
-  return colorMap[status] || 'default'
+  return colorMap[status] || 'blue'
 }
 
-// 获取备用状态文本
-const getSpareStatusText = (status: string | undefined) => {
-  if (!status) return '-'
-  const statusMap: Record<string, string> = {
+// 获取设备状态文本
+const getEquipmentStatusText = (status: string) => {
+  const textMap: Record<string, string> = {
     normal: '正常',
-    spare: '备用',
-    in_use: '使用中',
-    maintenance: '维护中'
+    repair: '维修中',
+    scrap: '已报废',
+    idle: '闲置',
+    lost: '丢失',
   }
-  return statusMap[status] || status
-}
-
-// 获取备用状态颜色
-const getSpareStatusColor = (status: string | undefined) => {
-  if (!status) return 'default'
-  const colorMap: Record<string, string> = {
-    normal: 'green',
-    spare: 'blue',
-    in_use: 'orange',
-    maintenance: 'purple'
-  }
-  return colorMap[status] || 'default'
-}
-
-// 获取认证状态文本
-const getCertificationStatusText = (status: string | undefined) => {
-  if (!status) return '-'
-  const statusMap: Record<string, string> = {
-    pending: '待认证',
-    certified: '已认证',
-    expired: '已过期'
-  }
-  return statusMap[status] || status
-}
-
-// 获取认证状态颜色
-const getCertificationStatusColor = (status: string | undefined) => {
-  if (!status) return 'default'
-  const colorMap: Record<string, string> = {
-    pending: 'orange',
-    certified: 'green',
-    expired: 'red'
-  }
-  return colorMap[status] || 'default'
-}
-
-// 获取位置状态文本
-const getLocationStatusText = (status: string | undefined) => {
-  if (!status) return '-'
-  const statusMap: Record<string, string> = {
-    normal: '正常',
-    spare: '备用',
-    in_use: '使用中',
-    maintenance: '维护中',
-    repair: '维修中'
-  }
-  return statusMap[status] || status
+  return textMap[status] || '未知'
 }
 
 // 获取位置状态颜色
-const getLocationStatusColor = (status: string | undefined) => {
-  if (!status) return 'default'
+const getLocationStatusColor = (status: string) => {
   const colorMap: Record<string, string> = {
-    normal: 'green',
-    spare: 'blue',
-    in_use: 'orange',
-    maintenance: 'purple',
-    repair: 'red'
+    in_stock: 'blue',
+    in_use: 'green',
+    repair: 'orange',
+    scrapped: 'red',
+    on_loan: 'purple',
+    lost: 'gray',
+    idle: 'cyan',
   }
-  return colorMap[status] || 'default'
+  return colorMap[status] || 'blue'
 }
 
-// 获取健康状态文本
-const getHealthStatusText = (status: string | undefined) => {
-  if (!status) return '-'
-  const statusMap: Record<string, string> = {
-    pending: '待认证',
-    certified: '已认证',
-    expired: '已过期',
-    normal: '正常',
-    warning: '警告',
-    critical: '严重'
+// 获取位置状态文本
+const getLocationStatusText = (status: string) => {
+  const textMap: Record<string, string> = {
+    in_stock: '库存中',
+    in_use: '使用中',
+    repair: '维修中',
+    scrapped: '已报废',
+    on_loan: '外借中',
+    lost: '丢失',
+    idle: '闲置',
   }
-  return statusMap[status] || status
+  return textMap[status] || '未知'
 }
 
 // 获取健康状态颜色
-const getHealthStatusColor = (status: string | undefined) => {
-  if (!status) return 'default'
+const getHealthStatusColor = (status: string) => {
   const colorMap: Record<string, string> = {
-    pending: 'orange',
-    certified: 'green',
-    expired: 'red',
-    normal: 'green',
-    warning: 'orange',
-    critical: 'red'
+    excellent: 'green',
+    good: 'blue',
+    normal: 'orange',
+    poor: 'red',
+    critical: 'red',
   }
-  return colorMap[status] || 'default'
+  return colorMap[status] || 'blue'
 }
 
-// 获取状态点样式
-const getStatusDotClass = (status: string | undefined) => {
-  if (!status) return 'status-dot-default'
-  const classMap: Record<string, string> = {
-    normal: 'status-dot-normal',
-    repair: 'status-dot-repair',
-    maintain: 'status-dot-maintain',
-    scrap: 'status-dot-scrap'
+// 获取健康状态文本
+const getHealthStatusText = (status: string) => {
+  const textMap: Record<string, string> = {
+    excellent: '优秀',
+    good: '良好',
+    normal: '一般',
+    poor: '较差',
+    critical: '危险',
   }
-  return classMap[status] || 'status-dot-default'
+  return textMap[status] || '未知'
 }
 
 // 格式化价格
-const formatPrice = (price: number | undefined) => {
-  return price?.toLocaleString() || '0'
+const formatPrice = (price: number) => {
+  return price.toLocaleString('zh-CN', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })
 }
 
 // 格式化日期时间
-const formatDateTime = (dateTime: string | undefined) => {
+const formatDateTime = (dateTime: string) => {
   if (!dateTime) return '-'
-  return new Date(dateTime).toLocaleString('zh-CN', {
+  const date = new Date(dateTime)
+  return date.toLocaleString('zh-CN', {
     year: 'numeric',
     month: '2-digit',
     day: '2-digit',
     hour: '2-digit',
     minute: '2-digit',
-    second: '2-digit'
   })
 }
 
-// 格式化日期
-const formatDate = (date: string | undefined) => {
-  if (!date) return '-'
-  return new Date(date).toLocaleDateString('zh-CN')
-}
-
-// 获取统计数据
-const getStats = async () => {
-  try {
-    console.log('开始获取统计数据...')
-    const res = await equipmentProcurementApi.getStats()
-    console.log('统计数据API响应:', res)
-    
-    if (res.success || res.status === 200 || res.code === 200) {
-      const statsData = res.data || res || {}
-      stats.value = statsData as any
-      console.log('统计数据已更新:', stats.value)
-    } else {
-      console.error('获取统计数据失败:', res)
-    }
-  } catch (error) {
-    console.error('获取统计数据失败:', error)
-  }
+// 转换后端数据
+const transformBackendData = (data: any[]): EquipmentResp[] => {
+  return data.map((item: any) => ({
+    equipmentId: item.equipmentId || item.id,
+    assetCode: item.assetCode,
+    equipmentName: item.equipmentName,
+    equipmentType: item.equipmentType,
+    equipmentTypeLabel: item.equipmentTypeLabel,
+    equipmentModel: item.equipmentModel,
+    equipmentSn: item.equipmentSn,
+    brand: item.brand,
+    specification: item.specification,
+    equipmentStatus: item.equipmentStatus,
+    equipmentStatusLabel: item.equipmentStatusLabel,
+    useStatus: item.useStatus,
+    locationStatus: item.locationStatus,
+    locationStatusLabel: item.locationStatusLabel,
+    physicalLocation: item.physicalLocation,
+    responsiblePerson: item.responsiblePerson,
+    healthStatus: item.healthStatus,
+    healthStatusLabel: item.healthStatusLabel,
+    purchaseTime: item.purchaseTime,
+    inStockTime: item.inStockTime,
+    activationTime: item.activationTime,
+    expectedScrapTime: item.expectedScrapTime,
+    actualScrapTime: item.actualScrapTime,
+    statusChangeTime: item.statusChangeTime,
+    purchaseOrder: item.purchaseOrder,
+    supplierName: item.supplierName,
+    purchasePrice: item.purchasePrice,
+    currentNetValue: item.currentNetValue,
+    depreciationMethod: item.depreciationMethod,
+    depreciationYears: item.depreciationYears,
+    salvageValue: item.salvageValue,
+    warrantyExpireDate: item.warrantyExpireDate,
+    lastMaintenanceDate: item.lastMaintenanceDate,
+    nextMaintenanceDate: item.nextMaintenanceDate,
+    maintenancePerson: item.maintenancePerson,
+    inventoryBarcode: item.inventoryBarcode,
+    assetRemark: item.assetRemark,
+    projectId: item.projectId,
+    projectName: item.projectName,
+    userId: item.userId,
+    name: item.name,
+    createTime: item.createTime,
+    updateTime: item.updateTime,
+    accountNumber: item.accountNumber,
+    quantity: item.quantity,
+    unitPrice: item.unitPrice,
+    totalPrice: item.totalPrice,
+    inventoryBasis: item.inventoryBasis,
+    dynamicRecord: item.dynamicRecord,
+  }))
 }
 
 // 加载数据
 const loadData = async (searchParams?: EquipmentListReq) => {
+  console.log('📊 loadData - 开始加载数据')
+  console.log('📊 loadData - 接收到的搜索参数:', searchParams)
+
   loading.value = true
   try {
-    console.log('开始获取采购记录数据...')
-    console.log('🔍 loadData - 接收到的搜索参数:', searchParams)
-    console.log('🔍 loadData - 搜索参数类型:', typeof searchParams)
-    
-    const params = {
-      page: pagination.current,
+    const params: EquipmentListReq = {
       pageSize: pagination.pageSize,
-      ...(searchParams || {})
+      page: pagination.current,
+      minPrice: undefined,
+      maxPrice: undefined,
+      ...(searchParams || {}),
     }
-    console.log('🔍 loadData - 构建的请求参数:', params)
-    console.log('🔍 loadData - 请求参数类型:', typeof params)
-    console.log('🔍 loadData - 请求参数的键值对:')
-    Object.entries(params).forEach(([key, value]) => {
-      console.log(`  ${key}: ${value} (${typeof value})`)
-    })
-    
-    console.log('🔍 loadData - 准备调用API，URL: /equipment/procurement/page')
-    console.log('🔍 loadData - 准备调用API，参数:', params)
-    
-    const response = await equipmentProcurementApi.page(params)
-    
-    console.log('🔍 loadData - API响应原始数据:', response)
-    console.log('🔍 loadData - API响应类型:', typeof response)
-    
-    // 兼容不同的响应格式
-    if (response.success || response.status === 200 || response.code === 200) {
-      // 处理数据，确保数据格式正确
+
+    console.log('📊 loadData - 构建的完整请求参数:', params)
+
+    const res = await equipmentProcurementApi.page(params)
+
+    console.log('API响应:', res)
+
+    if (res.success || res.status === 200 || res.code === 200) {
       let dataList: any[] = []
 
-      // 检查不同的数据字段
-      if (Array.isArray(response.data)) {
-        dataList = response.data
-      } else if (response.data && Array.isArray((response.data as any).records)) {
-        dataList = (response.data as any).records
-      } else if (response.data && Array.isArray((response.data as any).list)) {
-        dataList = (response.data as any).list
-      } else if (response.data && Array.isArray((response.data as any).rows)) {
-        dataList = (response.data as any).rows
-      } else if (Array.isArray((response as any).rows)) {
-        dataList = (response as any).rows
+      if (Array.isArray(res.data)) {
+        dataList = res.data
+      } else if (res.data && Array.isArray((res.data as any).records)) {
+        dataList = (res.data as any).records
+      } else if (res.data && Array.isArray((res.data as any).list)) {
+        dataList = (res.data as any).list
+      } else if (res.data && Array.isArray((res.data as any).rows)) {
+        dataList = (res.data as any).rows
       }
 
       console.log('处理后的数据列表:', dataList)
-      console.log('数据列表长度:', dataList.length)
 
       if (dataList.length > 0) {
-        tableData.value = dataList
-        console.log('表格数据已更新:', tableData.value)
+        const transformedData = transformBackendData(dataList)
+        console.log('转换后的数据:', transformedData)
+        tableData.value = transformedData
       } else {
         tableData.value = []
-        console.log('表格数据为空')
       }
 
-      // 设置总数和当前页
-      pagination.total = (response.data as any)?.total || (response as any).total || dataList.length || 0
-      pagination.current = (response.data as any)?.current || (response as any).current || 1
-      
-      console.log('分页信息已更新:', {
-        total: pagination.total,
-        current: pagination.current,
-        pageSize: pagination.pageSize
-      })
+      pagination.total = (res.data as any)?.total || (res as any).total || dataList.length || 0
+      console.log('总数:', pagination.total)
     } else {
-      console.error('API返回错误:', response)
-      Message.error('获取数据失败')
+      message.error(res.msg || '加载数据失败')
     }
-  } catch (error) {
-    console.error('获取采购记录失败:', error)
-    Message.error('获取数据失败')
+  } catch (error: any) {
+    console.error('加载数据失败:', error)
+    message.error(error?.message || '加载数据失败')
   } finally {
     loading.value = false
   }
 }
 
-// 防抖搜索函数
-const debouncedSearch = debounce(() => {
-  pagination.current = 1
-  loadData(currentSearchParams.value)
-}, 300)
-
 // 搜索
 const handleSearch = (searchParams: EquipmentListReq) => {
   console.log('🔍 主组件 - 接收到的搜索参数:', searchParams)
-  console.log('🔍 主组件 - 搜索参数类型:', typeof searchParams)
-  console.log('🔍 主组件 - 搜索参数是否为对象:', searchParams && typeof searchParams === 'object')
-  console.log('🔍 主组件 - 搜索参数的键值对:')
-  Object.entries(searchParams).forEach(([key, value]) => {
-    console.log(`  ${key}: ${value} (${typeof value})`)
-  })
-  
   pagination.current = 1
   currentSearchParams.value = { ...searchParams }
-  
-  console.log('🔍 主组件 - 保存的当前搜索参数:', currentSearchParams.value)
-  console.log('🔍 主组件 - 准备调用 loadData，传递参数:', searchParams)
-  
   loadData(searchParams)
 }
 
 // 重置
 const handleReset = () => {
   console.log('🔄 主组件 - 重置操作')
-  console.log('🔄 主组件 - 重置前的当前搜索参数:', currentSearchParams.value)
-  
   pagination.current = 1
-  currentSearchParams.value = {}
-  
-  console.log('🔄 主组件 - 重置后的当前搜索参数:', currentSearchParams.value)
-  console.log('🔄 主组件 - 准备调用 loadData，不传递参数')
-  
+  currentSearchParams.value = {
+    minPrice: undefined,
+    maxPrice: undefined
+  }
   loadData()
 }
 
+// 表格变化
+const handleTableChange = (pag: any) => {
+  pagination.current = pag.current || 1
+  pagination.pageSize = pag.pageSize || 10
+  loadData(currentSearchParams.value)
+}
+
 // 新增
 const handleAdd = () => {
-  modalTitle.value = '新增采购记录'
+  modalMode.value = 'add'
+  currentProcurement.value = null
   modalVisible.value = true
-  resetForm()
-}
-
-// 编辑
-const handleEdit = (record: EquipmentResp) => {
-  modalTitle.value = '编辑采购记录'
-  modalVisible.value = true
-  Object.assign(formData, {
-    equipmentId: record.equipmentId,
-    equipmentName: record.equipmentName || '',
-    equipmentModel: record.equipmentModel || '',
-    equipmentType: record.equipmentType || '',
-    equipmentStatus: record.equipmentStatus || '',
-    useStatus: record.useStatus || 'normal',
-    equipmentSn: record.equipmentSn || '',
-    assetCode: record.assetCode || '',
-    brand: record.brand || '',
-    specification: record.specification || '',
-    locationStatus: record.locationStatus || '',
-    physicalLocation: record.physicalLocation || '',
-    responsiblePerson: record.responsiblePerson || '',
-    healthStatus: record.healthStatus || '',
-    purchaseTime: record.purchaseTime || '',
-    inStockTime: record.inStockTime || '',
-    activationTime: record.activationTime || '',
-    expectedScrapTime: record.expectedScrapTime || '',
-    actualScrapTime: record.actualScrapTime || '',
-    purchaseOrder: record.purchaseOrder || '',
-    supplierName: record.supplierName || '',
-    purchasePrice: record.purchasePrice,
-    currentNetValue: record.currentNetValue,
-    depreciationMethod: record.depreciationMethod || '',
-    depreciationYears: record.depreciationYears,
-    salvageValue: record.salvageValue,
-    warrantyExpireDate: record.warrantyExpireDate || '',
-    lastMaintenanceDate: record.lastMaintenanceDate || '',
-    nextMaintenanceDate: record.nextMaintenanceDate || '',
-    maintenancePerson: record.maintenancePerson || '',
-    inventoryBarcode: record.inventoryBarcode || '',
-    assetRemark: record.assetRemark || '',
-    quantity: record.quantity || 1,
-    unitPrice: record.unitPrice,
-    totalPrice: record.totalPrice,
-    accountNumber: record.accountNumber || '',
-    dynamicRecord: record.dynamicRecord || '',
-    inventoryBasis: record.inventoryBasis || ''
-  })
 }
 
 // 查看
 const handleView = (record: EquipmentResp) => {
-  currentRecord.value = record
-  detailModalVisible.value = true
+  modalMode.value = 'view'
+  currentProcurement.value = { ...record }
+  modalVisible.value = true
+}
+
+// 编辑
+const handleEdit = (record: EquipmentResp) => {
+  modalMode.value = 'edit'
+  currentProcurement.value = { ...record }
+  modalVisible.value = true
 }
 
 // 删除
 const handleDelete = async (record: EquipmentResp) => {
   try {
-    // 这里应该调用删除API
-    Message.success('删除成功')
+    await equipmentProcurementApi.delete(record.equipmentId)
+    message.success('删除成功')
     loadData(currentSearchParams.value)
-  } catch (error) {
+  } catch (error: any) {
     console.error('删除失败:', error)
-    Message.error('删除失败')
+    message.error(error?.message || '删除失败')
   }
 }
 
-// 提交表单
-const handleSubmit = async () => {
-  try {
-    await formRef.value.validate()
-    
-    if (formData.equipmentId) {
-      // 更新
-      await equipmentProcurementApi.update(formData.equipmentId, formData)
-      Message.success('更新成功')
-    } else {
-      // 新增
-      await equipmentProcurementApi.add(formData)
-      Message.success('新增成功')
-    }
-    
-    modalVisible.value = false
-    loadData(currentSearchParams.value)
-    getStats()
-  } catch (error) {
-    console.error('操作失败:', error)
-    Message.error('操作失败')
-  }
-}
-
-// 取消
-const handleCancel = () => {
+// 弹窗成功回调
+const handleModalSuccess = () => {
   modalVisible.value = false
-  resetForm()
-}
-
-// 重置表单
-const resetForm = () => {
-  Object.assign(formData, {
-    equipmentId: '',
-    equipmentName: '',
-    equipmentModel: '',
-    equipmentType: '',
-    equipmentStatus: '',
-    useStatus: 'normal',
-    equipmentSn: '',
-    assetCode: '',
-    brand: '',
-    specification: '',
-    locationStatus: '',
-    physicalLocation: '',
-    responsiblePerson: '',
-    healthStatus: '',
-    purchaseTime: '',
-    inStockTime: '',
-    activationTime: '',
-    expectedScrapTime: '',
-    actualScrapTime: '',
-    purchaseOrder: '',
-    supplierName: '',
-    purchasePrice: undefined,
-    currentNetValue: undefined,
-    depreciationMethod: '',
-    depreciationYears: undefined,
-    salvageValue: undefined,
-    warrantyExpireDate: '',
-    lastMaintenanceDate: '',
-    nextMaintenanceDate: '',
-    maintenancePerson: '',
-    inventoryBarcode: '',
-    assetRemark: '',
-    quantity: 1,
-    unitPrice: undefined,
-    totalPrice: undefined,
-    accountNumber: '',
-    dynamicRecord: '',
-    inventoryBasis: ''
-  })
-  formRef.value?.resetFields()
-}
-
-// 分页事件
-const handlePageChange = (page: number) => {
-  pagination.current = page
   loadData(currentSearchParams.value)
 }
 
-const handlePageSizeChange = (pageSize: number) => {
-  pagination.pageSize = pageSize
-  pagination.current = 1
+// 刷新数据
+const refreshData = () => {
   loadData(currentSearchParams.value)
 }
 
-// 测试API参数
-const handleTestApi = () => {
-  const testParams: EquipmentListReq = {
-    equipmentName: '测试设备',
-    equipmentModel: '测试型号',
-    equipmentType: 'detection',
-    equipmentStatus: 'normal',
-    useStatus: 'normal',
-    equipmentSn: 'TEST-SN-001',
-    assetCode: 'TEST-CODE-001',
-    brand: '测试品牌',
-    locationStatus: 'normal',
-    healthStatus: 'certified',
-    purchaseOrder: 'TEST-PO-001',
-    supplierName: '测试供应商',
-    quantity: 1,
-    unitPrice: 1000,
-    totalPrice: 1000,
-    purchaseTimeStart: '2023-01-01T10:00:00',
-    purchaseTimeEnd: '2023-12-31T23:59:59',
-    inStockTimeStart: '2023-01-02T11:00:00',
-    inStockTimeEnd: '2023-12-31T23:59:59',
-    activationTimeStart: '2023-01-03T12:00:00',
-    activationTimeEnd: '2023-12-31T23:59:59',
-    maintenancePerson: '测试维护人',
-    inventoryBasis: '测试盘点依据',
-    dynamicRecord: '这是一条测试动态记录',
-    specification: '这是一条测试配置规格',
-    assetRemark: '这是一条测试备注',
-    accountNumber: 'TEST-ACCOUNT-001',
-    physicalLocation: '测试物理位置',
-    responsiblePerson: '测试负责人'
+// 导出数据
+const handleExport = async () => {
+  try {
+    const response = await equipmentProcurementApi.export(currentSearchParams.value)
+    const blob = response.data || response
+    const url = window.URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `设备采购记录_${new Date().toISOString().split('T')[0]}.xlsx`
+    link.click()
+    window.URL.revokeObjectURL(url)
+    message.success('导出成功')
+  } catch (error: any) {
+    console.error('导出失败:', error)
+    message.error(error?.message || '导出失败')
   }
-  console.log('测试API参数:', testParams)
-  Message.info('测试API参数已打印到控制台')
-  
-  // 调用测试API
-  equipmentProcurementApi.testPage().then(res => {
-    console.log('测试API响应:', res)
-    Message.success('测试API调用成功')
-  }).catch(error => {
-    console.error('测试API调用失败:', error)
-    Message.error('测试API调用失败')
-  })
+}
+
+// 统计函数
+const getPendingCount = () => {
+  return tableData.value.filter(item => 
+    item.equipmentStatus === 'pending' || 
+    item.locationStatus === 'pending'
+  ).length
+}
+
+const getCompletedCount = () => {
+  return tableData.value.filter(item => 
+    item.equipmentStatus === 'completed' || 
+    item.locationStatus === 'completed'
+  ).length
+}
+
+const getTotalAmount = () => {
+  const total = tableData.value.reduce((sum, item) => {
+    return sum + (item.purchasePrice || 0)
+  }, 0)
+  return formatPrice(total)
 }
 
 onMounted(() => {
   loadData()
-  getStats()
 })
 </script>
 
 <style scoped lang="scss">
-.procurement-management {
-  .main-card {
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+.equipment-procurement-container {
+  .page-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 12px;
+    padding: 24px;
+    margin-bottom: 24px;
     
-    .arco-card-header {
-      border-bottom: 1px solid var(--color-border);
-      padding: 20px 24px 16px;
+    .header-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
       
-      .arco-card-header-title {
+      .header-left {
+        .page-title {
+          display: flex;
+          align-items: center;
+          margin-bottom: 8px;
+          
+          h1 {
+            margin: 0;
+            color: white;
+            font-size: 28px;
+            font-weight: 600;
+            background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+          }
+        }
+        
+        .page-description {
+          color: rgba(255, 255, 255, 0.8);
+          font-size: 14px;
+        }
+      }
+      
+      .header-right {
+        .arco-btn {
+          border-radius: 8px;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  .stats-container {
+    margin-bottom: 24px;
+    
+    .stat-card {
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      transition: all 0.3s ease;
+      
+      &:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+      }
+      
+      .stat-content {
+        display: flex;
+        align-items: center;
+        
+        .stat-icon {
+          width: 60px;
+          height: 60px;
+          border-radius: 12px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 16px;
+          
+          .arco-icon {
+            font-size: 24px;
+            color: white;
+          }
+        }
+        
+        .stat-info {
+          flex: 1;
+          
+          .stat-number {
+            font-size: 24px;
+            font-weight: 600;
+            color: var(--color-text-1);
+            margin-bottom: 4px;
+          }
+          
+          .stat-label {
+            font-size: 14px;
+            color: var(--color-text-3);
+          }
+        }
+      }
+    }
+  }
+
+  .table-card {
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    
+    .card-title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      
+      span {
         font-size: 18px;
         font-weight: 600;
         color: var(--color-text-1);
       }
-    }
-    
-    .arco-card-body {
-      padding: 24px;
-    }
-  }
-  
-  .add-btn {
-    border-radius: 6px;
-    font-weight: 500;
-    box-shadow: 0 2px 4px rgba(24, 144, 255, 0.2);
-    
-    &:hover {
-      transform: translateY(-1px);
-      box-shadow: 0 4px 8px rgba(24, 144, 255, 0.3);
-    }
-  }
-}
-
-.stats-container {
-  margin-bottom: 24px;
-  
-  .stat-card {
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-    transition: all 0.3s ease;
-    
-    &:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-    }
-    
-    .arco-card-body {
-      padding: 20px;
-    }
-    
-    .arco-statistic {
-      .arco-statistic-title {
-        font-size: 14px;
-        color: var(--color-text-2);
-        margin-bottom: 8px;
-      }
       
-      .arco-statistic-content {
-        font-size: 24px;
+      .table-actions {
+        .arco-btn {
+          border-radius: 6px;
+        }
+      }
+    }
+    
+    .arco-table {
+      .arco-table-th {
+        background-color: var(--color-fill-2);
         font-weight: 600;
       }
-    }
-  }
-  
-  .stat-card-success {
-    border-left: 4px solid #52c41a;
-  }
-  
-  .stat-card-primary {
-    border-left: 4px solid #1890ff;
-  }
-  
-  .stat-card-purple {
-    border-left: 4px solid #722ed1;
-  }
-  
-  .stat-card-warning {
-    border-left: 4px solid #fa8c16;
-  }
-}
-
-.search-result-info {
-  color: var(--color-text-2);
-  font-size: 14px;
-  padding: 8px 12px;
-  background: var(--color-fill-1);
-  border-radius: 4px;
-  
-  strong {
-    color: var(--color-text-1);
-    font-weight: 600;
-  }
-}
-
-.price {
-  color: #f5222d;
-  font-weight: 500;
-  font-size: 14px;
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  display: inline-block;
-  margin-right: 8px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-
-.status-dot-normal {
-  background-color: #52c41a;
-}
-
-.status-dot-repair {
-  background-color: #fa8c16;
-}
-
-.status-dot-maintain {
-  background-color: #1890ff;
-}
-
-.status-dot-scrap {
-  background-color: #f5222d;
-}
-
-.status-dot-default {
-  background-color: #d9d9d9;
-}
-
-// 表格美化
-.arco-table {
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  
-  .arco-table-header {
-    background: var(--color-fill-1);
-    
-    .arco-table-th {
-      background: var(--color-fill-1);
-      font-weight: 600;
-      color: var(--color-text-1);
-      border-bottom: 1px solid var(--color-border);
-    }
-  }
-  
-  .arco-table-body {
-    .arco-table-tr {
-      transition: background-color 0.2s ease;
       
-      &:hover {
+      .arco-table-tr:hover {
         background-color: var(--color-fill-1);
       }
     }
-    
-    .arco-table-td {
-      border-bottom: 1px solid var(--color-border);
-      padding: 12px 16px;
-    }
+  }
+
+  .price-text {
+    color: #f56c6c;
+    font-weight: 500;
+  }
+
+  .time-text {
+    color: var(--color-text-2);
+    font-size: 12px;
+  }
+
+  .no-data {
+    color: var(--color-text-4);
+    font-style: italic;
   }
 }
 
-// 采购表单美化样式
-.procurement-form-modal {
-  .arco-modal-body {
-    padding: 24px 32px;
-  }
-  
-  .arco-modal-header {
-    padding: 20px 32px 16px;
-    border-bottom: 1px solid var(--color-border);
-    
-    .arco-modal-title {
-      font-size: 18px;
-      font-weight: 600;
-      color: var(--color-text-1);
-    }
-  }
-  
-  .arco-modal-footer {
-    padding: 16px 32px 24px;
-    border-top: 1px solid var(--color-border);
-  }
-}
-
-.procurement-form {
-  .form-item {
-    margin-bottom: 24px;
-    
-    .arco-form-item-label {
-      font-weight: 500;
-      color: var(--color-text-1);
-      margin-bottom: 8px;
-      font-size: 14px;
-      
-      &::before {
-        color: #ff4d4f;
-        margin-right: 4px;
+// 响应式设计
+@media (max-width: 768px) {
+  .equipment-procurement-container {
+    .page-header {
+      .header-content {
+        flex-direction: column;
+        align-items: flex-start;
+        
+        .header-right {
+          margin-top: 16px;
+          width: 100%;
+          
+          .arco-space {
+            width: 100%;
+            justify-content: space-between;
+          }
+        }
       }
     }
     
-    .arco-form-item-error {
-      margin-top: 6px;
-      font-size: 12px;
+    .stats-container {
+      .arco-col {
+        margin-bottom: 16px;
+      }
     }
   }
-  
-  .form-input,
-  .form-select {
-    border-radius: 6px;
-    border: 1px solid var(--color-border);
-    transition: all 0.2s ease;
-    
-    &:hover {
-      border-color: var(--color-primary-light-3);
-    }
-    
-    &:focus,
-    &.arco-input-focus,
-    &.arco-select-focus {
-      border-color: var(--color-primary);
-      box-shadow: 0 0 0 2px rgba(var(--primary-6), 0.1);
-    }
-    
-    .arco-input-inner {
-      padding: 8px 12px;
-      font-size: 14px;
-    }
-  }
-  
-  .form-textarea {
-    border-radius: 6px;
-    border: 1px solid var(--color-border);
-    transition: all 0.2s ease;
-    
-    &:hover {
-      border-color: var(--color-primary-light-3);
-    }
-    
-    &:focus,
-    &.arco-textarea-focus {
-      border-color: var(--color-primary);
-      box-shadow: 0 0 0 2px rgba(var(--primary-6), 0.1);
-    }
-    
-    .arco-textarea-inner {
-      padding: 12px;
-      font-size: 14px;
-      line-height: 1.6;
-    }
-  }
-  
-  // 选择框样式优化
-  .arco-select {
-    .arco-select-view {
-      padding: 8px 12px;
-      font-size: 14px;
-    }
-    
-    .arco-select-arrow {
-      color: var(--color-text-3);
-    }
-  }
-  
-  // 占位符样式
-  .arco-input-inner::placeholder,
-  .arco-textarea-inner::placeholder {
-    color: var(--color-text-3);
-    font-size: 14px;
-  }
-  
-  // 清空按钮样式
-  .arco-input-clear-btn,
-  .arco-textarea-clear-btn {
-    color: var(--color-text-3);
-    
-    &:hover {
-      color: var(--color-text-2);
-    }
-  }
-}
-
-.procurement-detail {
-  .detail-header {
-    margin-bottom: 16px;
-    
-    h3 {
-      margin-bottom: 12px;
-      color: var(--color-text-1);
-    }
-    
-    .detail-meta {
-      display: flex;
-      gap: 16px;
-      color: var(--color-text-3);
-      font-size: 14px;
-      flex-wrap: wrap;
-    }
-  }
-  
-  .detail-content {
-    h4 {
-      margin: 16px 0 8px 0;
-      color: var(--color-text-1);
-      font-weight: 500;
-    }
-    
-    .content-text {
-      color: var(--color-text-2);
-      line-height: 1.6;
-      margin-bottom: 16px;
-      padding: 12px;
-      background: var(--color-fill-1);
-      border-radius: 6px;
-    }
-  }
-  
-  .detail-footer {
-    display: flex;
-    gap: 12px;
-    justify-content: center;
-    margin-top: 20px;
-  }
-}
+} 
 </style> 
\ No newline at end of file
diff --git a/src/views/system-resource/device-management/procurement/test.vue b/src/views/system-resource/device-management/procurement/test.vue
new file mode 100644
index 0000000..888a618
--- /dev/null
+++ b/src/views/system-resource/device-management/procurement/test.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="procurement-test">
+    <a-card title="设备采购模块测试" :bordered="false">
+      <template #extra>
+        <a-space>
+          <a-button type="primary" @click="testApi">
+            测试API
+          </a-button>
+          <a-button @click="testSearch">
+            测试搜索
+          </a-button>
+          <a-button @click="testAdd">
+            测试新增
+          </a-button>
+        </a-space>
+      </template>
+
+      <a-divider />
+
+      <div class="test-results">
+        <h3>测试结果</h3>
+        <a-textarea
+          v-model="testResults"
+          :rows="10"
+          placeholder="测试结果将显示在这里..."
+          readonly
+        />
+      </div>
+
+      <a-divider />
+
+      <div class="test-params">
+        <h3>测试参数</h3>
+        <a-form layout="vertical">
+          <a-row :gutter="16">
+            <a-col :span="8">
+              <a-form-item label="设备名称">
+                <a-input v-model="testParams.equipmentName" placeholder="测试设备" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="设备型号">
+                <a-input v-model="testParams.equipmentModel" placeholder="测试型号" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="供应商">
+                <a-input v-model="testParams.supplierName" placeholder="测试供应商" />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import { Message } from '@arco-design/web-vue'
+import { equipmentProcurementApi } from '@/apis/equipment/procurement'
+
+defineOptions({ name: 'ProcurementTest' })
+
+const testResults = ref('')
+const testParams = reactive({
+  equipmentName: '测试设备',
+  equipmentModel: '测试型号',
+  supplierName: '测试供应商',
+})
+
+// 添加测试结果
+const addTestResult = (message: string) => {
+  const timestamp = new Date().toLocaleString()
+  testResults.value += `[${timestamp}] ${message}\n`
+}
+
+// 测试API
+const testApi = async () => {
+  try {
+    addTestResult('开始测试API...')
+    
+    const params = {
+      page: 1,
+      pageSize: 10,
+      equipmentName: testParams.equipmentName,
+      equipmentModel: testParams.equipmentModel,
+      supplierName: testParams.supplierName,
+    }
+    
+    addTestResult(`请求参数: ${JSON.stringify(params, null, 2)}`)
+    
+    const response = await equipmentProcurementApi.page(params)
+    
+    addTestResult(`API响应: ${JSON.stringify(response, null, 2)}`)
+    Message.success('API测试成功')
+  } catch (error: any) {
+    addTestResult(`API测试失败: ${error.message}`)
+    Message.error('API测试失败')
+  }
+}
+
+// 测试搜索
+const testSearch = () => {
+  addTestResult('测试搜索功能...')
+  addTestResult(`搜索参数: ${JSON.stringify(testParams, null, 2)}`)
+  Message.info('搜索测试完成')
+}
+
+// 测试新增
+const testAdd = () => {
+  addTestResult('测试新增功能...')
+  addTestResult(`新增参数: ${JSON.stringify(testParams, null, 2)}`)
+  Message.info('新增测试完成')
+}
+</script>
+
+<style scoped lang="scss">
+.procurement-test {
+  .test-results {
+    margin-bottom: 24px;
+    
+    h3 {
+      margin-bottom: 16px;
+      color: var(--color-text-1);
+    }
+  }
+  
+  .test-params {
+    h3 {
+      margin-bottom: 16px;
+      color: var(--color-text-1);
+    }
+  }
+}
+</style> 
\ No newline at end of file