From 5c7728e3db80af9705ea81aa465ceef7f4338699 Mon Sep 17 00:00:00 2001
From: chiguyong <chiguyong@beyondsoft.com>
Date: Tue, 24 Mar 2026 00:48:16 +0800
Subject: [PATCH] feat: add spare part management frontend pages

---
 src/api/sparepart.ts                    | 148 ++++++++
 src/router/index.ts                     |  24 ++
 src/views/Layout.vue                    |  53 +--
 src/views/sparepart/SparePartDetail.vue | 206 +++++++++++
 src/views/sparepart/SparePartList.vue   | 445 ++++++++++++++++++++++++
 src/views/sparepart/StockOperation.vue  | 226 ++++++++++++
 6 files changed, 1078 insertions(+), 24 deletions(-)
 create mode 100644 src/api/sparepart.ts
 create mode 100644 src/views/sparepart/SparePartDetail.vue
 create mode 100644 src/views/sparepart/SparePartList.vue
 create mode 100644 src/views/sparepart/StockOperation.vue

diff --git a/src/api/sparepart.ts b/src/api/sparepart.ts
new file mode 100644
index 00000000..34bdaabe
--- /dev/null
+++ b/src/api/sparepart.ts
@@ -0,0 +1,148 @@
+import request from '@/utils/request'
+
+// ==================== 备件相关类型 ====================
+
+// 备件分类
+export interface SparePartCategory {
+  id: string
+  name: string
+  description?: string
+  createdAt?: string
+  updatedAt?: string
+}
+
+// 备件
+export interface SparePart {
+  id: string
+  name: string
+  code: string
+  categoryId?: string
+  categoryName?: string
+  projectId: string
+  projectName?: string
+  unit?: string
+  currentStock?: number
+  safeStock?: number
+  lowStockWarning?: boolean
+  description?: string
+  createdAt?: string
+  updatedAt?: string
+}
+
+// 备件表单
+export interface SparePartForm {
+  id?: string
+  name: string
+  code: string
+  categoryId?: string
+  projectId: string
+  unit?: string
+  currentStock?: number
+  safeStock?: number
+  description?: string
+}
+
+// 库存记录
+export interface StockRecord {
+  id: string
+  sparePartId: string
+  sparePartName?: string
+  operationType: 'IN' | 'OUT'
+  quantity: number
+  beforeStock?: number
+  afterStock?: number
+  relatedOrderId?: string
+  relatedOrderNo?: string
+  operatorId?: string
+  operatorName?: string
+  remark?: string
+  createdAt?: string
+}
+
+// 入库请求
+export interface InStockRequest {
+  sparePartId: string
+  quantity: number
+  remark?: string
+}
+
+// 出库请求
+export interface OutStockRequest {
+  sparePartId: string
+  quantity: number
+  relatedOrderId?: string
+  relatedOrderNo?: string
+  remark?: string
+}
+
+// 分页响应
+export interface PageResponse<T> {
+  content: T[]
+  totalElements: number
+  totalPages: number
+  size: number
+  number: number
+}
+
+// ==================== 备件分类 API ====================
+
+// 获取分类列表
+export function getSparePartCategories() {
+  return request.get<SparePartCategory[]>('/api/v1/ops/spare-parts/categories')
+}
+
+// 创建分类
+export function createSparePartCategory(data: { name: string; description?: string }) {
+  return request.post('/api/v1/ops/spare-parts/categories', data)
+}
+
+// ==================== 备件 API ====================
+
+// 获取备件列表
+export function getSparePartList(projectId: string, categoryId?: string) {
+  return request.get<PageResponse<SparePart>>('/api/v1/ops/spare-parts', {
+    params: { projectId, categoryId }
+  })
+}
+
+// 获取备件详情
+export function getSparePartDetail(id: string) {
+  return request.get<SparePart>(`/api/v1/ops/spare-parts/${id}`)
+}
+
+// 创建备件
+export function createSparePart(data: SparePartForm) {
+  return request.post('/api/v1/ops/spare-parts', data)
+}
+
+// 更新备件
+export function updateSparePart(id: string, data: SparePartForm) {
+  return request.put(`/api/v1/ops/spare-parts/${id}`, data)
+}
+
+// 删除备件
+export function deleteSparePart(id: string) {
+  return request.delete(`/api/v1/ops/spare-parts/${id}`)
+}
+
+// 获取低库存备件
+export function getLowStockSpareParts(projectId: string) {
+  return request.get<SparePart[]>('/api/v1/ops/spare-parts/low-stock', {
+    params: { projectId }
+  })
+}
+
+// 入库
+export function inStock(data: InStockRequest) {
+  return request.post('/api/v1/ops/spare-parts/in-stock', data)
+}
+
+// 出库
+export function outStock(data: OutStockRequest) {
+  return request.post('/api/v1/ops/spare-parts/out-stock', data)
+}
+
+// 获取备件记录
+export function getSparePartRecords(id: string) {
+  return request.get<StockRecord[]>(`/api/v1/ops/spare-parts/${id}/records`)
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index c1545a89..1e456a03 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -110,6 +110,30 @@ const router = createRouter({
           name: 'EnergyStatistics',
           component: () => import('@/views/energy/EnergyStatistics.vue'),
           meta: { title: '能耗统计' }
+        },
+        {
+          path: 'sparepart/list',
+          name: 'SparePartList',
+          component: () => import('@/views/sparepart/SparePartList.vue'),
+          meta: { title: '备件管理' }
+        },
+        {
+          path: 'sparepart/detail/:id',
+          name: 'SparePartDetail',
+          component: () => import('@/views/sparepart/SparePartDetail.vue'),
+          meta: { title: '备件详情' }
+        },
+        {
+          path: 'sparepart/stock/in',
+          name: 'SparePartInStock',
+          component: () => import('@/views/sparepart/StockOperation.vue'),
+          meta: { title: '备件入库' }
+        },
+        {
+          path: 'sparepart/stock/out',
+          name: 'SparePartOutStock',
+          component: () => import('@/views/sparepart/StockOperation.vue'),
+          meta: { title: '备件出库' }
         }
       ]
     }
diff --git a/src/views/Layout.vue b/src/views/Layout.vue
index b3e84a78..6926b25a 100644
--- a/src/views/Layout.vue
+++ b/src/views/Layout.vue
@@ -43,32 +43,37 @@ const menuItems: MenuProps['items'] = [
     ]
   },
   {
-    key: 'operation',
-    label: '运营管理',
-    type: 'group',
-    children: [
-      {
-        key: '/maintenance/plans',
-        icon: () => h(ToolOutlined),
-        label: '维保计划'
-      },
-      {
-        key: '/maintenance/tasks',
-        icon: () => h(ToolOutlined),
-        label: '维保任务'
-      },
-      {
-        key: 'energy',
-        icon: () => h(HeatMapOutlined),
-        label: '能耗管理',
+        key: 'operation',
+        label: '运营管理',
+        type: 'group',
         children: [
-          { key: '/energy/meters', label: '计量点管理' },
-          { key: '/energy/consumption', label: '能耗录入' },
-          { key: '/energy/statistics', label: '能耗统计' }
+          {
+            key: '/sparepart/list',
+            icon: () => h(ToolOutlined),
+            label: '备件管理'
+          },
+          {
+            key: '/maintenance/plans',
+            icon: () => h(ToolOutlined),
+            label: '维保计划'
+          },
+          {
+            key: '/maintenance/tasks',
+            icon: () => h(ToolOutlined),
+            label: '维保任务'
+          },
+          {
+            key: 'energy',
+            icon: () => h(HeatMapOutlined),
+            label: '能耗管理',
+            children: [
+              { key: '/energy/meters', label: '计量点管理' },
+              { key: '/energy/consumption', label: '能耗录入' },
+              { key: '/energy/statistics', label: '能耗统计' }
+            ]
+          }
         ]
-      }
-    ]
-  },
+      },
   {
     key: 'system',
     label: '系统管理',
diff --git a/src/views/sparepart/SparePartDetail.vue b/src/views/sparepart/SparePartDetail.vue
new file mode 100644
index 00000000..656839d7
--- /dev/null
+++ b/src/views/sparepart/SparePartDetail.vue
@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { Descriptions, Button, Space, Card, Statistic, Row, Col, message } from 'ant-design-vue'
+import type { ColumnsType } from 'ant-design-vue/es/table'
+import {
+  ArrowLeftOutlined,
+  InboxOutlined,
+  ExportOutlined,
+  ReloadOutlined
+} from '@ant-design/icons-vue'
+import {
+  getSparePartDetail,
+  getSparePartRecords,
+  type SparePart,
+  type StockRecord
+} from '@/api/sparepart'
+
+const route = useRoute()
+const router = useRouter()
+
+const loading = ref(false)
+const recordLoading = ref(false)
+const sparePart = ref<SparePart | null>(null)
+const records = ref<StockRecord[]>([])
+
+const id = route.params.id as string
+
+// 表格列定义
+const recordColumns: ColumnsType = [
+  { title: '操作类型', dataIndex: 'operationType', key: 'operationType', width: 100 },
+  { title: '数量', dataIndex: 'quantity', key: 'quantity', width: 80 },
+  { title: '操作前库存', dataIndex: 'beforeStock', key: 'beforeStock', width: 100 },
+  { title: '操作后库存', dataIndex: 'afterStock', key: 'afterStock', width: 100 },
+  { title: '关联工单', dataIndex: 'relatedOrderNo', key: 'relatedOrderNo', width: 140 },
+  { title: '操作人', dataIndex: 'operatorName', key: 'operatorName', width: 100 },
+  { title: '备注', dataIndex: 'remark', key: 'remark' },
+  { title: '操作时间', dataIndex: 'createdAt', key: 'createdAt', width: 180 }
+]
+
+// 获取备件详情
+const fetchDetail = async () => {
+  loading.value = true
+  try {
+    const res = await getSparePartDetail(id)
+    sparePart.value = res.data.data
+  } catch {
+    message.error('获取备件详情失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 获取记录
+const fetchRecords = async () => {
+  recordLoading.value = true
+  try {
+    const res = await getSparePartRecords(id)
+    records.value = res.data.data || []
+  } catch {
+    message.error('获取库存记录失败')
+  } finally {
+    recordLoading.value = false
+  }
+}
+
+// 返回列表
+const handleBack = () => {
+  router.push('/sparepart/list')
+}
+
+// 入库
+const handleInStock = () => {
+  router.push(`/sparepart/stock/in?sparePartId=${id}`)
+}
+
+// 出库
+const handleOutStock = () => {
+  router.push(`/sparepart/stock/out?sparePartId=${id}`)
+}
+
+// 操作类型显示
+const getOperationType = (type: string) => {
+  return type === 'IN' ? '入库' : '出库'
+}
+
+onMounted(() => {
+  fetchDetail()
+  fetchRecords()
+})
+</script>
+
+<template>
+  <div class="page-container">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <Space>
+        <Button @click="handleBack">
+          <ArrowLeftOutlined /> 返回
+        </Button>
+        <h2 class="page-title">备件详情</h2>
+      </Space>
+    </div>
+
+    <!-- 备件基本信息 -->
+    <Card title="基本信息" style="margin-bottom: 16px">
+      <Descriptions :column="3" bordered>
+        <Descriptions.Item label="备件编码">{{ sparePart?.code || '-' }}</Descriptions.Item>
+        <Descriptions.Item label="备件名称">{{ sparePart?.name || '-' }}</Descriptions.Item>
+        <Descriptions.Item label="分类">{{ sparePart?.categoryName || '-' }}</Descriptions.Item>
+        <Descriptions.Item label="单位">{{ sparePart?.unit || '-' }}</Descriptions.Item>
+        <Descriptions.Item label="所属项目">{{ sparePart?.projectName || '-' }}</Descriptions.Item>
+        <Descriptions.Item label="描述">{{ sparePart?.description || '-' }}</Descriptions.Item>
+      </Descriptions>
+    </Card>
+
+    <!-- 库存信息 -->
+    <Card title="库存信息" style="margin-bottom: 16px">
+      <Row :gutter="24">
+        <Col :span="6">
+          <Statistic
+            title="当前库存"
+            :value="sparePart?.currentStock || 0"
+            :suffix="sparePart?.unit || '个'"
+          />
+        </Col>
+        <Col :span="6">
+          <Statistic
+            title="安全库存"
+            :value="sparePart?.safeStock || 0"
+            :suffix="sparePart?.unit || '个'"
+          />
+        </Col>
+        <Col :span="6">
+          <Statistic
+            title="库存状态"
+            :value="sparePart?.lowStockWarning ? '低库存' : '正常'"
+            :value-style="sparePart?.lowStockWarning ? { color: '#cf1322' } : { color: '#3f8600' }"
+          />
+        </Col>
+        <Col :span="6">
+          <Space direction="vertical">
+            <Button type="primary" @click="handleInStock">
+              <InboxOutlined /> 入库
+            </Button>
+            <Button @click="handleOutStock">
+              <ExportOutlined /> 出库
+            </Button>
+          </Space>
+        </Col>
+      </Row>
+    </Card>
+
+    <!-- 库存记录 -->
+    <Card title="库存记录">
+      <template #extra>
+        <Button @click="fetchRecords" :loading="recordLoading">
+          <ReloadOutlined /> 刷新
+        </Button>
+      </template>
+      <a-table
+        :columns="recordColumns"
+        :data-source="records"
+        :loading="recordLoading"
+        :row-key="(record: StockRecord) => record.id"
+        :pagination="{
+          pageSize: 10,
+          showSizeChanger: true,
+          showTotal: (total: number) => `共 ${total} 条`
+        }"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'operationType'">
+            <a-tag :color="record.operationType === 'IN' ? 'green' : 'blue'">
+              {{ getOperationType(record.operationType) }}
+            </a-tag>
+          </template>
+          <template v-else-if="column.key === 'quantity'">
+            <span :style="{ color: record.operationType === 'IN' ? '#3f8600' : '#cf1322' }">
+              {{ record.operationType === 'IN' ? '+' : '-' }}{{ record.quantity }}
+            </span>
+          </template>
+          <template v-else-if="column.key === 'createdAt'">
+            {{ record.createdAt ? new Date(record.createdAt).toLocaleString() : '-' }}
+          </template>
+        </template>
+      </a-table>
+    </Card>
+  </div>
+</template>
+
+<style scoped>
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+  color: #262626;
+}
+</style>
diff --git a/src/views/sparepart/SparePartList.vue b/src/views/sparepart/SparePartList.vue
new file mode 100644
index 00000000..859ad715
--- /dev/null
+++ b/src/views/sparepart/SparePartList.vue
@@ -0,0 +1,445 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { Button, Select, Space, message, Tag, Modal, Form, Input, InputNumber, Popconfirm } from 'ant-design-vue'
+import type { ColumnsType } from 'ant-design-vue/es/table'
+import {
+  SearchOutlined,
+  ReloadOutlined,
+  PlusOutlined,
+  ExclamationCircleOutlined
+} from '@ant-design/icons-vue'
+import {
+  getSparePartList,
+  getSparePartCategories,
+  createSparePart,
+  updateSparePart,
+  deleteSparePart,
+  getLowStockSpareParts,
+  type SparePart,
+  type SparePartCategory,
+  type SparePartForm
+} from '@/api/sparepart'
+import { getProjectSelectorList } from '@/api/project'
+import { TableActions } from '@/components'
+
+const router = useRouter()
+
+// 表格列定义
+const columns: ColumnsType = [
+  { title: '备件编码', dataIndex: 'code', key: 'code', width: 140 },
+  { title: '备件名称', dataIndex: 'name', key: 'name', width: 180 },
+  { title: '分类', dataIndex: 'categoryName', key: 'categoryName', width: 120 },
+  { title: '单位', dataIndex: 'unit', key: 'unit', width: 80 },
+  { title: '当前库存', dataIndex: 'currentStock', key: 'currentStock', width: 100 },
+  { title: '安全库存', dataIndex: 'safeStock', key: 'safeStock', width: 100 },
+  {
+    title: '库存状态',
+    dataIndex: 'lowStockWarning',
+    key: 'lowStockWarning',
+    width: 100
+  },
+  { title: '操作', key: 'action', width: 180, fixed: 'right' as const }
+]
+
+// 项目选择选项
+const projectOptions = ref<{ value: string; label: string }[]>([])
+
+// 分类选项
+const categoryOptions = ref<{ value: string; label: string }[]>([])
+
+// 查询参数
+const queryParams = reactive({
+  projectId: '',
+  categoryId: undefined as string | undefined
+})
+
+// 数据状态
+const loading = ref(false)
+const tableData = ref<SparePart[]>([])
+const lowStockData = ref<SparePart[]>([])
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  total: 0
+})
+
+// 模态框状态
+const modalVisible = ref(false)
+const modalTitle = ref('新建备件')
+const modalLoading = ref(false)
+const editingSparePart = ref<SparePart | null>(null)
+
+// 表单
+const formRef = ref()
+const formState = reactive<SparePartForm>({
+  name: '',
+  code: '',
+  categoryId: undefined,
+  projectId: '',
+  unit: '',
+  currentStock: 0,
+  safeStock: 0,
+  description: ''
+})
+
+// 表单验证
+const rules = {
+  name: [{ required: true, message: '请输入备件名称' }],
+  code: [{ required: true, message: '请输入备件编码' }],
+  projectId: [{ required: true, message: '请选择项目' }]
+}
+
+// 获取项目列表
+const fetchProjects = async () => {
+  try {
+    const res = await getProjectSelectorList()
+    projectOptions.value = (res.data.data || []).map((item: any) => ({
+      value: item.id,
+      label: item.name
+    }))
+  } catch {
+    message.error('获取项目列表失败')
+  }
+}
+
+// 获取分类列表
+const fetchCategories = async () => {
+  try {
+    const res = await getSparePartCategories()
+    categoryOptions.value = (res.data.data || []).map((item: SparePartCategory) => ({
+      value: item.id,
+      label: item.name
+    }))
+  } catch {
+    message.error('获取分类列表失败')
+  }
+}
+
+// 获取备件列表
+const fetchSparePartList = async () => {
+  if (!queryParams.projectId) {
+    message.warning('请先选择项目')
+    return
+  }
+  loading.value = true
+  try {
+    const res = await getSparePartList(queryParams.projectId, queryParams.categoryId)
+    const data = res.data.data
+    tableData.value = data.content || []
+    pagination.total = data.totalElements || 0
+  } catch {
+    message.error('获取备件列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 获取低库存备件
+const fetchLowStockSpareParts = async () => {
+  if (!queryParams.projectId) return
+  loading.value = true
+  try {
+    const res = await getLowStockSpareParts(queryParams.projectId)
+    lowStockData.value = res.data.data || []
+  } catch {
+    message.error('获取低库存备件失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 搜索
+const handleSearch = () => {
+  pagination.current = 1
+  fetchSparePartList()
+}
+
+// 重置
+const handleReset = () => {
+  queryParams.projectId = ''
+  queryParams.categoryId = undefined
+  pagination.current = 1
+  tableData.value = []
+}
+
+// 分页变化
+const handlePageChange = (page: number, pageSize: number) => {
+  pagination.current = page
+  pagination.pageSize = pageSize
+  fetchSparePartList()
+}
+
+// 打开新建模态框
+const handleAdd = () => {
+  editingSparePart.value = null
+  modalTitle.value = '新建备件'
+  Object.assign(formState, {
+    id: undefined,
+    name: '',
+    code: '',
+    categoryId: undefined,
+    projectId: queryParams.projectId,
+    unit: '',
+    currentStock: 0,
+    safeStock: 0,
+    description: ''
+  })
+  modalVisible.value = true
+}
+
+// 打开编辑模态框
+const handleEdit = (record: SparePart) => {
+  editingSparePart.value = record
+  modalTitle.value = '编辑备件'
+  Object.assign(formState, {
+    id: record.id,
+    name: record.name,
+    code: record.code,
+    categoryId: record.categoryId,
+    projectId: record.projectId,
+    unit: record.unit || '',
+    currentStock: record.currentStock || 0,
+    safeStock: record.safeStock || 0,
+    description: record.description || ''
+  })
+  modalVisible.value = true
+}
+
+// 查看详情
+const handleView = (record: SparePart) => {
+  router.push(`/sparepart/detail/${record.id}`)
+}
+
+// 删除备件
+const handleDelete = (record: SparePart) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: `确定要删除备件 "${record.name}" 吗？`,
+    okText: '确认',
+    cancelText: '取消',
+    onOk: async () => {
+      try {
+        await deleteSparePart(record.id)
+        message.success('删除成功')
+        fetchSparePartList()
+      } catch {
+        message.error('删除失败')
+      }
+    }
+  })
+}
+
+// 提交表单
+const handleSubmit = async () => {
+  try {
+    await formRef.value.validate()
+    modalLoading.value = true
+    if (editingSparePart.value) {
+      await updateSparePart(editingSparePart.value.id, formState)
+      message.success('更新成功')
+    } else {
+      await createSparePart(formState)
+      message.success('创建成功')
+    }
+    modalVisible.value = false
+    fetchSparePartList()
+  } catch (error) {
+    console.error('表单验证失败', error)
+  } finally {
+    modalLoading.value = false
+  }
+}
+
+// 入库
+const handleInStock = (record: SparePart) => {
+  router.push(`/sparepart/stock/in?sparePartId=${record.id}`)
+}
+
+// 出库
+const handleOutStock = (record: SparePart) => {
+  router.push(`/sparepart/stock/out?sparePartId=${record.id}`)
+}
+
+// 库存状态显示
+const getStockStatus = (record: SparePart) => {
+  if (record.lowStockWarning) {
+    return { color: 'error', text: '低库存' }
+  }
+  return { color: 'success', text: '正常' }
+}
+
+onMounted(() => {
+  fetchProjects()
+  fetchCategories()
+})
+</script>
+
+<template>
+  <div class="page-container">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h2 class="page-title">备件管理</h2>
+    </div>
+
+    <!-- 筛选区 -->
+    <div class="filter-bar">
+      <Space>
+        <Select
+          v-model:value="queryParams.projectId"
+          placeholder="请选择项目"
+          style="width: 240px"
+          allow-clear
+          :options="projectOptions"
+          @change="handleSearch"
+        />
+        <Select
+          v-model:value="queryParams.categoryId"
+          placeholder="请选择分类"
+          style="width: 160px"
+          allow-clear
+          :options="categoryOptions"
+          @change="handleSearch"
+        />
+        <Button type="primary" @click="handleSearch">
+          <SearchOutlined /> 查询
+        </Button>
+        <Button @click="handleReset">
+          <ReloadOutlined /> 重置
+        </Button>
+      </Space>
+    </div>
+
+    <!-- 表格 -->
+    <div class="table-card">
+      <div style="margin-bottom: 16px">
+        <Space>
+          <Button type="primary" @click="handleAdd" :disabled="!queryParams.projectId">
+            <PlusOutlined /> 新建备件
+          </Button>
+          <Button @click="fetchLowStockSpareParts" :disabled="!queryParams.projectId">
+            <ExclamationCircleOutlined /> 低库存备件
+          </Button>
+        </Space>
+      </div>
+
+      <a-table
+        :columns="columns"
+        :data-source="tableData"
+        :loading="loading"
+        :row-key="(record: SparePart) => record.id"
+        :pagination="{
+          current: pagination.current,
+          pageSize: pagination.pageSize,
+          total: pagination.total,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          showTotal: (total: number) => `共 ${total} 条`
+        }"
+        @change="(pag: any) => handlePageChange(pag.current, pag.pageSize)"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'lowStockWarning'">
+            <Tag v-if="record.lowStockWarning" color="red">
+              {{ record.lowStockWarning ? '低库存' : '正常' }}
+            </Tag>
+            <Tag v-else color="green">正常</Tag>
+          </template>
+          <template v-else-if="column.key === 'action'">
+            <Space>
+              <Button type="link" size="small" @click="handleView(record)">查看</Button>
+              <Button type="link" size="small" @click="handleEdit(record)">编辑</Button>
+              <Button type="link" size="small" @click="handleInStock(record)">入库</Button>
+              <Button type="link" size="small" @click="handleOutStock(record)">出库</Button>
+              <Button type="link" size="small" danger @click="handleDelete(record)">删除</Button>
+            </Space>
+          </template>
+        </template>
+      </a-table>
+
+      <!-- 未选择项目提示 -->
+      <a-empty v-if="!queryParams.projectId && tableData.length === 0" description="请先选择项目" />
+    </div>
+
+    <!-- 新建/编辑模态框 -->
+    <a-modal
+      v-model:open="modalVisible"
+      :title="modalTitle"
+      :confirm-loading="modalLoading"
+      @ok="handleSubmit"
+      width="600px"
+    >
+      <a-form
+        ref="formRef"
+        :model="formState"
+        :rules="rules"
+        :label-col="{ span: 6 }"
+        :wrapper-col="{ span: 16 }"
+      >
+        <a-form-item label="备件编码" name="code">
+          <a-input v-model:value="formState.code" placeholder="请输入备件编码" />
+        </a-form-item>
+        <a-form-item label="备件名称" name="name">
+          <a-input v-model:value="formState.name" placeholder="请输入备件名称" />
+        </a-form-item>
+        <a-form-item label="分类" name="categoryId">
+          <a-select
+            v-model:value="formState.categoryId"
+            placeholder="请选择分类"
+            :options="categoryOptions"
+            allow-clear
+          />
+        </a-form-item>
+        <a-form-item label="单位" name="unit">
+          <a-input v-model:value="formState.unit" placeholder="如：个、件、套" />
+        </a-form-item>
+        <a-form-item label="当前库存" name="currentStock">
+          <a-input-number
+            v-model:value="formState.currentStock"
+            :min="0"
+            style="width: 100%"
+          />
+        </a-form-item>
+        <a-form-item label="安全库存" name="safeStock">
+          <a-input-number
+            v-model:value="formState.safeStock"
+            :min="0"
+            style="width: 100%"
+          />
+        </a-form-item>
+        <a-form-item label="备注" name="description">
+          <a-textarea v-model:value="formState.description" placeholder="请输入备注" :rows="3" />
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<style scoped>
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+  color: #262626;
+}
+
+.filter-bar {
+  margin-bottom: 24px;
+  padding: 16px;
+  background: #fafafa;
+  border-radius: 8px;
+}
+
+.table-card {
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px;
+}
+</style>
diff --git a/src/views/sparepart/StockOperation.vue b/src/views/sparepart/StockOperation.vue
new file mode 100644
index 00000000..e189b0da
--- /dev/null
+++ b/src/views/sparepart/StockOperation.vue
@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { Card, Form, InputNumber, Input, Button, Space, message, Result } from 'ant-design-vue'
+import {
+  ArrowLeftOutlined,
+  InboxOutlined,
+  ExportOutlined
+} from '@ant-design/icons-vue'
+import {
+  getSparePartDetail,
+  inStock,
+  outStock,
+  type SparePart,
+  type InStockRequest,
+  type OutStockRequest
+} from '@/api/sparepart'
+
+const route = useRoute()
+const router = useRouter()
+
+const loading = ref(false)
+const submitLoading = ref(false)
+const sparePart = ref<SparePart | null>(null)
+
+const formRef = ref()
+const formState = reactive({
+  quantity: 0,
+  relatedOrderNo: '',
+  remark: ''
+})
+
+const rules = {
+  quantity: [{ required: true, message: '请输入数量', type: 'number' }]
+}
+
+const isInStock = computed(() => route.path.includes('/stock/in'))
+const operationType = computed(() => isInStock.value ? '入库' : '出库')
+const operationIcon = computed(() => isInStock.value ? InboxOutlined : ExportOutlined)
+
+const sparePartId = route.query.sparePartId as string
+
+// 获取备件信息
+const fetchSparePart = async () => {
+  if (!sparePartId) {
+    message.error('缺少备件ID')
+    return
+  }
+  loading.value = true
+  try {
+    const res = await getSparePartDetail(sparePartId)
+    sparePart.value = res.data.data
+  } catch {
+    message.error('获取备件信息失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 返回
+const handleBack = () => {
+  router.back()
+}
+
+// 提交
+const handleSubmit = async () => {
+  try {
+    await formRef.value.validate()
+    submitLoading.value = true
+
+    if (isInStock.value) {
+      const data: InStockRequest = {
+        sparePartId,
+        quantity: formState.quantity,
+        remark: formState.remark
+      }
+      await inStock(data)
+      message.success('入库成功')
+    } else {
+      const data: OutStockRequest = {
+        sparePartId,
+        quantity: formState.quantity,
+        relatedOrderNo: formState.relatedOrderNo,
+        remark: formState.remark
+      }
+      await outStock(data)
+      message.success('出库成功')
+    }
+
+    router.back()
+  } catch (error) {
+    console.error('操作失败', error)
+  } finally {
+    submitLoading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchSparePart()
+})
+</script>
+
+<template>
+  <div class="page-container">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <Space>
+        <Button @click="handleBack">
+          <ArrowLeftOutlined /> 返回
+        </Button>
+        <h2 class="page-title">{{ operationType }}</h2>
+      </Space>
+    </div>
+
+    <Card v-if="sparePart">
+      <!-- 备件信息 -->
+      <div class="sparepart-info">
+        <span class="info-label">备件信息：</span>
+        <span class="info-value">
+          {{ sparePart.name }} ({{ sparePart.code }})
+        </span>
+        <span class="info-label" style="margin-left: 24px">当前库存：</span>
+        <span class="info-value">
+          {{ sparePart.currentStock || 0 }} {{ sparePart.unit || '个' }}
+        </span>
+      </div>
+    </Card>
+
+    <!-- 操作表单 -->
+    <Card :title="operationType" style="margin-top: 16px">
+      <Form
+        ref="formRef"
+        :model="formState"
+        :rules="rules"
+        :label-col="{ span: 6 }"
+        :wrapper-col="{ span: 16 }"
+      >
+        <Form.Item :label="operationType + '数量'" name="quantity">
+          <InputNumber
+            v-model:value="formState.quantity"
+            :min="1"
+            style="width: 200px"
+            :placeholder="'请输入' + operationType + '数量'"
+          />
+        </Form.Item>
+
+        <Form.Item v-if="!isInStock" label="关联工单号" name="relatedOrderNo">
+          <Input
+            v-model:value="formState.relatedOrderNo"
+            placeholder="请输入关联工单号（可选）"
+            style="width: 300px"
+          />
+        </Form.Item>
+
+        <Form.Item label="备注" name="remark">
+          <Input.TextArea
+            v-model:value="formState.remark"
+            placeholder="请输入备注（可选）"
+            :rows="3"
+            style="width: 400px"
+          />
+        </Form.Item>
+
+        <Form.Item :wrapper-col="{ offset: 6, span: 16 }">
+          <Space>
+            <Button type="primary" :loading="submitLoading" @click="handleSubmit">
+              <component :is="operationIcon" /> {{ operationType }}
+            </Button>
+            <Button @click="handleBack">取消</Button>
+          </Space>
+        </Form.Item>
+      </Form>
+    </Card>
+
+    <!-- 加载状态 -->
+    <Card v-if="loading" style="margin-top: 16px">
+      <Result title="加载中..." />
+    </Card>
+
+    <!-- 缺少参数 -->
+    <Card v-if="!sparePartId && !loading" style="margin-top: 16px">
+      <Result
+        status="warning"
+        title="缺少参数"
+        sub-title="未指定备件ID，无法进行库存操作"
+      >
+        <template #extra>
+          <Button type="primary" @click="handleBack">返回</Button>
+        </template>
+      </Result>
+    </Card>
+  </div>
+</template>
+
+<style scoped>
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 500;
+  color: #262626;
+}
+
+.sparepart-info {
+  padding: 16px;
+  background: #fafafa;
+  border-radius: 4px;
+}
+
+.info-label {
+  color: #8c8c8c;
+  font-size: 14px;
+}
+
+.info-value {
+  color: #262626;
+  font-size: 14px;
+  font-weight: 500;
+}
+</style>