feat: 更新物料管理模块功能

1. 新增采购计划草稿存储功能
2. 优化出入库单和备件管理界面
3. 完善表单验证和交互逻辑
4. 调整表格列对齐方式
5. 移除冗余的审批备注字段
ps:出入口页面未完成

src/api/renyuan/paiban/index.ts

@@ -61,12 +61,12 @@ export function  updatePaiban(data:any): AxiosPromise<any> {
 /**
  * 运维-人员排班-批量修改排班
  */
-export function updateAllPaiban(): AxiosPromise<any> {
+// export function updateAllPaiban(): AxiosPromise<any> {
-  return request({
+//   return request({
-    url: `/ops/personnel/scheduling/all`,
+//     url: `/ops/personnel/scheduling/all`,
-    method: 'put',
+//     method: 'put',
-  });
+//   });
-}
+// }
 
 /**
  * 运维-人员排班-删除排班

src/store/modules/procurementDraft.ts

@@ -0,0 +1,80 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import $cache from '@/plugins/cache';
+
+// 草稿数据类型
+export interface ProcurementDraft {
+  id: string;
+  draftNumber: string;
+  planName: string;
+  saveTime: string;
+  content: any;
+}
+
+// 保存草稿到本地存储
+const saveDraftsToStorage = (drafts: ProcurementDraft[]) => {
+  $cache.local.setJSON('procurementDrafts', drafts);
+};
+
+// 从本地存储获取草稿
+const getDraftsFromStorage = (): ProcurementDraft[] => {
+  const stored = $cache.local.getJSON('procurementDrafts');
+  return stored && Array.isArray(stored) ? stored : [];
+};
+
+export const useProcurementDraftStore = defineStore('procurementDraft', () => {
+  const draftList = ref<ProcurementDraft[]>(getDraftsFromStorage());
+
+  // 保存草稿
+  const saveDraft = (planName: string, content: any): ProcurementDraft => {
+    const today = new Date();
+    const dateStr = today.getFullYear() + '-' + 
+                   String(today.getMonth() + 1).padStart(2, '0') + '-' + 
+                   String(today.getDate()).padStart(2, '0');
+    const randomNum = Math.floor(100 + Math.random() * 900);
+    const draftNumber = `DRAFT-${dateStr}-${randomNum}`;
+    
+    const newDraft: ProcurementDraft = {
+      id: `draft_${Date.now()}_${randomNum}`,
+      draftNumber,
+      planName,
+      saveTime: new Date().toLocaleString(),
+      content: JSON.parse(JSON.stringify(content)) // 深拷贝内容
+    };
+    
+    // 添加到草稿列表并保存到本地存储
+    draftList.value.unshift(newDraft);
+    saveDraftsToStorage(draftList.value);
+    
+    return newDraft;
+  };
+
+  // 获取草稿列表
+  const getDraftList = (): ProcurementDraft[] => {
+    return draftList.value;
+  };
+
+  // 获取单个草稿
+  const getDraft = (draftId: string): ProcurementDraft | undefined => {
+    return draftList.value.find(draft => draft.id === draftId);
+  };
+
+  // 删除草稿
+  const deleteDraft = (draftId: string): boolean => {
+    const index = draftList.value.findIndex(draft => draft.id === draftId);
+    if (index !== -1) {
+      draftList.value.splice(index, 1);
+      saveDraftsToStorage(draftList.value);
+      return true;
+    }
+    return false;
+  };
+
+  return {
+    draftList,
+    saveDraft,
+    getDraftList,
+    getDraft,
+    deleteDraft
+  };
+});

src/views/materialManagement/components/detailInfo.vue

@@ -67,15 +67,6 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
-                <el-row :gutter="20">
-                    <el-col :span="24">
-                        <el-form-item label="审批备注" prop="remark">
-                            <el-input v-model="supplierInfo.remark" :rows="1" placeholder="请输入审批备注"
-                                style="border: 1px solid red;color: red;" readonly value="1. 出货时间较长" />
-                            <!-- <div class="error-tip">1. 出货时间较长</div> -->
-                        </el-form-item>
-                    </el-col>
-                </el-row>
             </el-form>
         </el-card>
 
@@ -92,11 +83,6 @@
                 <el-table-column prop="usage" label="用途" />
                 <el-table-column prop="total" label="合计" />
             </el-table>
-            <el-form-item label="审批备注" style="margin-top: 10px">
-                <el-input v-model="productInfo.remark" :rows="1" placeholder="请输入审批备注"
-                    style="border: 1px solid red;color: red;" readonly value="2. 单价高于市场价3.采购数量需重新评估" />
-                <!-- <div class="error-tip">2. 单价高于市场价3.采购数量需重新评估</div> -->
-            </el-form-item>
         </el-card>
 
         <!-- 合同条款 -->
@@ -121,15 +107,6 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
-                <el-row :gutter="20">
-                    <el-col :span="24">
-                        <el-form-item label="审批备注" prop="remark">
-                            <el-input v-model="contractInfo.remark" placeholder="请输入审批备注"
-                                style="border: 1px solid red;color: red;" readonly value="4. 付款方式未标明5.发票开具方式未标明" />
-                            <!-- <div class="error-tip">4. 付款方式未标明5.发票开具方式未标明</div> -->
-                        </el-form-item>
-                    </el-col>
-                </el-row>
             </el-form>
         </el-card>
 

src/views/materialManagement/inventoryManagement.vue

@@ -15,7 +15,6 @@
                         <div class="content" style="height: 100%;flex: 1;">
                             <div class="menu">
                                 <el-input placeholder="请输入单据编号"></el-input>
-                                <el-select placeholder="请选择单据类型"></el-select>
                                 <el-select placeholder="请选择设备类型"></el-select>
                                 <el-select placeholder="请选择状态"></el-select>
                                 <el-select placeholder="请选择日期范围"></el-select>
@@ -27,19 +26,19 @@
                                     : '添加入库单' }}</el-button>
                             </div>
                             <el-table :data="tableData" border style="width: 100%;margin-top: 15px;height: 1000px;">
-                                <el-table-column prop="formNumber" label="单据编号" />
+                                <el-table-column prop="formNumber" label="单据编号" align="center" />
-                                <el-table-column prop="equipmentType" label="设备类型" />
+                                <el-table-column prop="equipmentType" label="设备类型" align="center" />
-                                <el-table-column prop="handler" label="经手人" />
+                                <el-table-column prop="handler" label="经手人" align="center" />
-                                <el-table-column prop="operationTime" label="操作时间" />
+                                <el-table-column prop="operationTime" label="操作时间" align="center" />
-                                <el-table-column prop="totalQuantity" label="总数量" />
+                                <el-table-column prop="totalQuantity" label="总数量" align="center" />
-                                <el-table-column label="状态">
+                                <el-table-column label="状态" align="center">
                                     <template #default="scope">
                                         <el-tag :type="getStatusTagType(scope.row.status)">
                                             {{ scope.row.status }}
                                         </el-tag>
                                     </template>
                                 </el-table-column>
-                                <el-table-column label="操作">
+                                <el-table-column label="操作" align="center">
                                     <template #default="scope">
                                         <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                                         <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
@@ -108,6 +107,71 @@
                 </div>
             </template>
         </el-dialog>
+
+        <!-- 编辑弹窗 -->
+        <el-dialog v-model="editDialogVisible" title="编辑出入库单" width="500" @close="handleEditClose">
+            <el-form :rules="rules" ref="editFormRef" :model="editForm" label-width="100">
+                <el-form-item label="单据编号" prop="formNumber">
+                    <el-input v-model="editForm.formNumber" placeholder="请输入单据编号" />
+                </el-form-item>
+                <el-form-item label="设备类型" prop="equipmentType">
+                    <el-select v-model="editForm.equipmentType" placeholder="请选择设备类型">
+                        <el-option label="设备类型1" value="1" />
+                        <el-option label="设备类型2" value="2" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="总数量" prop="totalQuantity">
+                    <el-input-number v-model="editForm.totalQuantity" placeholder="请输入总数量" :min="0" :step="1" />
+                </el-form-item>
+                <el-form-item label="经手人" prop="handler">
+                    <el-input v-model="editForm.handler" placeholder="请输入经手人" />
+                </el-form-item>
+                <el-form-item label="联系电话" prop="contactPhone">
+                    <el-input v-model="editForm.contactPhone" placeholder="请输入联系电话" />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="editDialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="saveEdit">保存</el-button>
+                </div>
+            </template>
+        </el-dialog>
+
+        <!-- 详情弹窗 -->
+        <el-dialog v-model="detailDialogVisible" title="出入库单详情" width="600" @close="handleDetailClose">
+            <div class="detail-container">
+                <div class="detail-item">
+                    <span class="detail-label">单据编号：</span>
+                    <span class="detail-value">{{ currentRow.formNumber }}</span>
+                </div>
+                <div class="detail-item">
+                    <span class="detail-label">设备类型：</span>
+                    <span class="detail-value">{{ currentRow.equipmentType }}</span>
+                </div>
+                <div class="detail-item">
+                    <span class="detail-label">操作时间：</span>
+                    <span class="detail-value">{{ currentRow.operationTime }}</span>
+                </div>
+                <div class="detail-item">
+                    <span class="detail-label">总数量：</span>
+                    <span class="detail-value">{{ currentRow.totalQuantity }}</span>
+                </div>
+                <div class="detail-item">
+                    <span class="detail-label">经手人：</span>
+                    <span class="detail-value">{{ currentRow.handler }}</span>
+                </div>
+                <div class="detail-item">
+                    <span class="detail-label">状态：</span>
+                    <el-tag :type="getStatusTagType(currentRow.status)">{{ currentRow.status }}</el-tag>
+                </div>
+            </div>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="detailDialogVisible = false">关闭</el-button>
+                </div>
+            </template>
+        </el-dialog>
     </div>
 </template>
 <style scoped>
@@ -212,6 +276,35 @@
     }
 }
 
+/* 详情弹窗样式 */
+.detail-container {
+    padding: 10px 0;
+}
+
+.detail-item {
+    display: flex;
+    align-items: center;
+    padding: 12px 0;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.detail-label {
+    font-weight: 500;
+    color: #606266;
+    width: 120px;
+}
+
+.detail-value {
+    color: #303133;
+    flex: 1;
+}
+
+.dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: 12px 0;
+}
+
 ::v-deep(.el-card__body) {
     height: 100%;
 }
@@ -219,6 +312,8 @@
 <script setup>
 import SystemInfo from './components/SystemInfo.vue';
 import DataAnalysis from './components/DataAnalysis.vue';
+import { ref, computed } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
 const type = ref('chuku');
 const form = ref({
     formNumber: '',
@@ -267,6 +362,34 @@ const formRef = ref(null);
 const handleCurrentChange = (val) => {
     currentPage.value = val;
 };
+
+// 每页条数改变
+const handleSizeChange = (val) => {
+    pageSize.value = val;
+    currentPage.value = 1;
+};
+
+// 模拟API调用函数
+const mockApiCall = (success = true) => {
+    return new Promise((resolve, reject) => {
+        setTimeout(() => {
+            if (success) {
+                resolve({ success: true });
+            } else {
+                reject({ success: false, message: '操作失败，请稍后重试' });
+            }
+        }, 500);
+    });
+}
+
+// 编辑弹窗相关状态
+const editDialogVisible = ref(false);
+const editForm = ref({});
+const editFormRef = ref(null);
+
+// 详情弹窗相关状态
+const detailDialogVisible = ref(false);
+const currentRow = ref({});
 const getStatusTagType = (status) => {
     if (status === '已完成') {
         return 'success'
@@ -277,4 +400,67 @@ const getStatusTagType = (status) => {
     }
     return ''
 }
+
+// 处理编辑
+const handleEdit = (row) => {
+    // 深拷贝当前行数据到编辑表单
+    editForm.value = JSON.parse(JSON.stringify(row));
+    editDialogVisible.value = true;
+};
+
+// 保存编辑
+const saveEdit = async () => {
+    try {
+        // 模拟API调用
+        await mockApiCall();
+        editDialogVisible.value = false;
+        ElMessage.success('编辑成功');
+        // 这里应该刷新数据，但由于是模拟数据，暂时不处理
+    } catch (error) {
+        ElMessage.error(error.message || '编辑失败');
+    }
+};
+
+// 关闭编辑弹窗
+const handleEditClose = () => {
+    // 重置表单
+    editForm.value = {};
+    if (editFormRef.value) {
+        editFormRef.value.resetFields();
+    }
+};
+
+// 处理详情
+const handleDetail = (row) => {
+    currentRow.value = row;
+    detailDialogVisible.value = true;
+};
+
+// 关闭详情弹窗
+const handleDetailClose = () => {
+    currentRow.value = {};
+};
+
+// 处理删除
+const handleDelete = async (row) => {
+    try {
+        await ElMessageBox.confirm(
+            `确定要删除单据 ${row.formNumber} 吗？`,
+            '确认删除',
+            {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            }
+        );
+        // 模拟API调用
+        await mockApiCall();
+        ElMessage.success('删除成功');
+        // 这里应该刷新数据，但由于是模拟数据，暂时不处理
+    } catch (error) {
+        if (error !== 'cancel') {
+            ElMessage.error(error.message || '删除失败');
+        }
+    }
+};
 </script>

src/views/materialManagement/procurementPlan.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="procurementPlan">
-        <el-row gutter="20">
+        <el-row :gutter="20">
             <el-col :span="13">
                 <el-card>
                     <div style="display: flex;align-items: center;height: 120px;justify-content: space-around;">
@@ -79,37 +79,45 @@
 
                         <!-- 标签页导航 -->
                         <div class="tabs">
-                            <el-button :type="activeTab === 'pending' ? 'primary' : ''"
+                            <el-badge :value="pendingCount" type="warning">
-                                @click="changeTab('pending')">待审批</el-button>
+                                <el-button :type="activeTab === 'pending' ? 'primary' : ''"
-                            <el-button :type="activeTab === 'procuring' ? 'primary' : ''"
+                                    @click="changeTab('pending')">待审批</el-button>
-                                @click="changeTab('procuring')">采购中</el-button>
+                            </el-badge>
-                            <el-badge :value="5" type="danger">
+                            <el-badge :value="purchasingCount" type="info">
+                                <el-button :type="activeTab === 'purchasing' ? 'primary' : ''"
+                                    @click="changeTab('purchasing')">采购中</el-button>
+                            </el-badge>
+                            <el-badge :value="rejectedCount" type="danger">
                                 <el-button :type="activeTab === 'rejected' ? 'primary' : ''"
                                     @click="changeTab('rejected')">
                                     未通过
                                 </el-button>
                             </el-badge>
-                            <el-button :type="activeTab === 'approved' ? 'primary' : ''"
+                            <el-badge :value="approvedCount" type="primary">
-                                @click="changeTab('approved')">已通过</el-button>
+                                <el-button :type="activeTab === 'approved' ? 'primary' : ''"
-                            <el-button :type="activeTab === 'completed' ? 'primary' : ''"
+                                    @click="changeTab('approved')">已通过</el-button>
-                                @click="changeTab('completed')">已完成</el-button>
+                            </el-badge>
+                            <el-badge :value="completedCount" type="success">
+                                <el-button :type="activeTab === 'completed' ? 'primary' : ''"
+                                    @click="changeTab('completed')">已完成</el-button>
+                            </el-badge>
                         </div>
                         <!-- 表格 -->
-                        <el-table :data="tableData" border style="width: 100%;margin-top: 15px;">
+                         <el-table :data="filteredTableData" border style="width: 100%;margin-top: 15px;">
-                            <el-table-column type="selection" width="55" />
+                            <el-table-column type="selection" width="55" align="center" />
-                            <el-table-column prop="planNumber" label="计划编号" />
+                            <el-table-column prop="planNumber" label="计划编号" align="center" />
-                            <el-table-column prop="planName" label="计划名称" />
+                            <el-table-column prop="planName" label="计划名称" align="center" />
-                            <el-table-column prop="equipmentType" label="设备类型" />
+                            <el-table-column prop="equipmentType" label="设备类型" align="center" />
-                            <el-table-column prop="requestDept" label="申请部门" />
+                            <el-table-column prop="requestDept" label="申请部门" align="center" />
-                            <el-table-column prop="applicant" label="申请人" />
+                            <el-table-column prop="applicant" label="申请人" align="center" />
-                            <el-table-column prop="requestDate" label="申请日期" />
+                            <el-table-column prop="requestDate" label="申请日期" align="center" />
-                            <el-table-column prop="estimatedAmount" label="预计金额" />
+                            <el-table-column prop="estimatedAmount" label="预计金额" align="center" />
-                            <el-table-column label="状态">
+                            <el-table-column label="状态" align="center">
                                 <template #default="scope">
                                     <el-tag :type="getStatusTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
                                 </template>
                             </el-table-column>
-                            <el-table-column label="操作" fixed="right" width="80">
+                            <el-table-column label="操作" fixed="right" width="80" align="center">
                                 <template #default="scope">
                                     <el-button type="text" @click="handleView(scope.row)">查看</el-button>
                                 </template>
@@ -131,56 +139,43 @@
                 <!-- 基础信息 -->
                 <div class="form-section">
                     <h3>基础信息</h3>
+                    <!-- 输入框行 -->
                     <el-row :gutter="20">
-                        <el-col :span="6">
+                        <el-col :span="12">
-                            <el-form-item label="订单编号">
+                            <el-form-item label="计划名称">
-                                <el-input v-model="newProcurementForm.planNumber" disabled value="PLAN-2023-0615-003" />
+                                <el-input v-model="newProcurementForm.planName" placeholder="请填写" />
                             </el-form-item>
                         </el-col>
-                        <el-col :span="6">
+                        <el-col :span="12">
-                            <el-form-item label="创建时间">
-                                <el-input v-model="newProcurementForm.createTime" disabled value="2023-11-02-16:32" />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="6">
-                            <el-form-item label="采购单位">
-                                <el-input v-model="newProcurementForm.procurementUnit" disabled value="大连好果汁有限公司" />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="6">
-                            <el-form-item label="经办人">
-                                <el-input v-model="newProcurementForm.handler" disabled value="李四" />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="6">
-                            <el-form-item label="合同类型">
-                                <el-select v-model="newProcurementForm.contractType" placeholder="请选择">
-                                    <el-option label="请选择" value="" />
-                                    <!-- 可以添加更多选项 -->
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="6">
-                            <el-form-item label="采购类型">
-                                <el-select v-model="newProcurementForm.procurementType" placeholder="请选择">
-                                    <el-option label="请选择" value="" />
-                                    <!-- 可以添加更多选项 -->
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="6">
-                            <el-form-item label="仓库地址">
-                                <el-select v-model="newProcurementForm.contractAddress" placeholder="请选择">
-                                    <el-option label="请选择" value="" />
-                                </el-select>
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="6">
                             <el-form-item label="合同名称">
                                 <el-input v-model="newProcurementForm.contractName" placeholder="请填写" />
                             </el-form-item>
                         </el-col>
                     </el-row>
+                    <!-- 下拉框行 -->
+                    <el-row :gutter="20">
+                        <el-col :span="8">
+                            <el-form-item label="合同类型">
+                                <el-select v-model="newProcurementForm.contractType" placeholder="请选择">
+                                    <el-option v-for="option in wz_contract_type" :key="option.value" :label="option.label" :value="option.value" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form-item label="采购类型">
+                                <el-select v-model="newProcurementForm.procurementType" placeholder="请选择">
+                                    <el-option v-for="option in wz_purchase_type" :key="option.value" :label="option.label" :value="option.value" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="8">
+                            <el-form-item label="仓库地址">
+                                <el-select v-model="newProcurementForm.contractAddress" placeholder="请选择">
+                                    <el-option v-for="option in contractAddressOptions" :key="option.value" :label="option.label" :value="option.value" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
                 </div>
 
                 <!-- 供应商信息 -->
@@ -190,17 +185,19 @@
                         <el-col :span="6">
                             <el-form-item label="供应商单位">
                                 <el-select v-model="newProcurementForm.supplierUnit" placeholder="请选择">
-                                    <el-option label="请选择" value="" />
+                                    <el-option v-for="option in supplierUnitOptions" :key="option.value" :label="option.label" :value="option.value" />
-                                    <!-- 可以添加更多选项 -->
                                 </el-select>
                             </el-form-item>
                         </el-col>
                         <el-col :span="6">
                             <el-form-item label="送货时间">
-                                <el-select v-model="newProcurementForm.deliveryTime" placeholder="请选择">
+                                <el-date-picker
-                                    <el-option label="请选择" value="" />
+                                    v-model="newProcurementForm.deliveryTime"
-                                    <!-- 可以添加更多选项 -->
+                                    type="date"
-                                </el-select>
+                                    placeholder="请选择送货日期"
+                                    value-format="YYYY-MM-DD"
+                                    style="width: 100%"
+                                />
                             </el-form-item>
                         </el-col>
                     </el-row>
@@ -222,12 +219,12 @@
                         </el-table-column>
                         <el-table-column prop="productPrice" label="产品单价">
                             <template #default="scope">
-                                <el-input v-model="scope.row.productPrice" placeholder="请填写" type="number" />
+                                <el-input v-model="scope.row.productPrice" placeholder="请填写" type="number" @change="calculateTotalPrice(scope.row)" />
                             </template>
                         </el-table-column>
                         <el-table-column prop="purchaseQuantity" label="购买数量">
                             <template #default="scope">
-                                <el-input v-model="scope.row.purchaseQuantity" placeholder="请填写" type="number" />
+                                <el-input v-model="scope.row.purchaseQuantity" placeholder="请填写" type="number" @change="calculateTotalPrice(scope.row)" />
                             </template>
                         </el-table-column>
                         <el-table-column prop="unit" label="单位">
@@ -258,15 +255,15 @@
                             <el-form-item label="付款条件">
                                 <el-select v-model="newProcurementForm.paymentTerms" placeholder="请选择">
                                     <el-option label="请选择" value="" />
-                                    <!-- 可以添加更多选项 -->
+                                    <el-option v-for="option in wz_payment_terms" :key="option.value" :label="option.label" :value="option.value" />
                                 </el-select>
                             </el-form-item>
                         </el-col>
                         <el-col :span="6">
-                            <el-form-item label="结算方式">
+                            <el-form-item label="发票开具方式">
                                 <el-select v-model="newProcurementForm.settlementMethod" placeholder="请选择">
                                     <el-option label="请选择" value="" />
-                                    <!-- 可以添加更多选项 -->
+                                    <el-option v-for="option in wz_invoicing_way" :key="option.value" :label="option.label" :value="option.value" />
                                 </el-select>
                             </el-form-item>
                         </el-col>
@@ -374,26 +371,89 @@
     color: #fff;
 }
 </style>
-<script setup>
+<script setup lang="ts">
 import { ref, reactive, computed } from 'vue';
+import { useRouter } from 'vue-router';
 import { Upload } from '@element-plus/icons-vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
+import { useProcurementDraftStore } from '@/store/modules/procurementDraft';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { wz_invoicing_way,wz_payment_terms,wz_purchase_type,wz_contract_type} = toRefs<any>(proxy?.useDict('wz_invoicing_way','wz_payment_terms','wz_purchase_type','wz_contract_type'));
+
 const router = useRouter();
 // 新建采购申请单对话框是否可见
 const isNewProcurementDialogVisible = ref(false);
 
 // 当前激活的标签页
 const activeTab = ref('pending');
+
+// 计算各状态的数量
+const pendingCount = computed(() => {
+    return tableData.value.filter(item => item.status === '待审批').length;
+});
+
+const purchasingCount = computed(() => {
+    return tableData.value.filter(item => item.status === '采购中').length;
+});
+
+const rejectedCount = computed(() => {
+    return tableData.value.filter(item => item.status === '未通过').length;
+});
+
+const approvedCount = computed(() => {
+    return tableData.value.filter(item => item.status === '已通过').length;
+});
+
+const completedCount = computed(() => {
+    return tableData.value.filter(item => item.status === '已完成').length;
+});
+// 下拉框选项数据
+const contractAddressOptions = [
+    { label: '主仓库', value: 'main' },
+    { label: '一号仓库', value: 'warehouse1' },
+    { label: '二号仓库', value: 'warehouse2' },
+    { label: '三号仓库', value: 'warehouse3' },
+    { label: '车间仓库', value: 'workshop' }
+];
+
+const supplierUnitOptions = [
+    { label: '供应商A', value: 'supplierA' },
+    { label: '供应商B', value: 'supplierB' },
+    { label: '供应商C', value: 'supplierC' },
+    { label: '供应商D', value: 'supplierD' },
+    { label: '供应商E', value: 'supplierE' }
+];
+
+
+
+
+
+
+
 // 新建采购申请单表单数据
 const newProcurementForm = reactive({
+    planName: '',
+    contractName: '',
+    contractType: '',
+    procurementType: '',
+    contractAddress: '',
+    supplierUnit: '',
+    deliveryTime: '',
     paymentTerms: '',
     settlementMethod: '',
+    products: [{
+        productName: '',
+        productModel: '',
+        productPrice: '',
+        purchaseQuantity: '',
+        unit: ''
+    }],
     fileList: []
 });
 // 表格数据
 const tableData = ref([
     {
-        planNumber: 'PLAN-2023-0615-003',
+        planNumber: 'PLAN-2023-0615-001',
         planName: 'Q2风电轴承采购计划',
         equipmentType: '风电设备',
         requestDept: '运维部',
@@ -403,126 +463,142 @@ const tableData = ref([
         status: '待审批'
     },
     {
-        planNumber: 'PLAN-2023-0615-003',
+        planNumber: 'PLAN-2023-0615-002',
-        planName: 'Q2风电轴承采购计划',
+        planName: '发电机维修备件采购',
-        equipmentType: '风电设备',
+        equipmentType: '发电设备',
-        requestDept: '运维部',
+        requestDept: '维修部',
-        applicant: '王主管',
+        applicant: '李工程师',
-        requestDate: '2023-06-15 10:30',
+        requestDate: '2023-06-16 09:15',
-        estimatedAmount: '300,000.00',
+        estimatedAmount: '150,000.00',
         status: '待审批'
     },
     {
         planNumber: 'PLAN-2023-0615-003',
-        planName: 'Q2风电轴承采购计划',
+        planName: 'Q2润滑油采购计划',
-        equipmentType: '风电设备',
+        equipmentType: '通用设备',
         requestDept: '运维部',
-        applicant: '王主管',
+        applicant: '张助理',
-        requestDate: '2023-06-15 10:30',
+        requestDate: '2023-06-17 14:20',
-        estimatedAmount: '300,000.00',
+        estimatedAmount: '50,000.00',
         status: '待审批'
     },
     {
-        planNumber: 'PLAN-2023-0615-003',
+        planNumber: 'PLAN-2023-0614-004',
-        planName: 'Q2风电轴承采购计划',
+        planName: '液压系统配件采购',
-        equipmentType: '风电设备',
+        equipmentType: '液压设备',
-        requestDept: '运维部',
+        requestDept: '工程部',
-        applicant: '王主管',
+        applicant: '赵经理',
-        requestDate: '2023-06-15 10:30',
+        requestDate: '2023-06-14 11:45',
-        estimatedAmount: '300,000.00',
+        estimatedAmount: '220,000.00',
-        status: '待审批'
+        status: '采购中'
     },
     {
-        planNumber: 'PLAN-2023-0615-003',
+        planNumber: 'PLAN-2023-0613-005',
-        planName: 'Q2风电轴承采购计划',
+        planName: '控制面板更新采购',
-        equipmentType: '风电设备',
+        equipmentType: '电气设备',
-        requestDept: '运维部',
+        requestDept: '电气部',
-        applicant: '王主管',
+        applicant: '陈工程师',
-        requestDate: '2023-06-15 10:30',
+        requestDate: '2023-06-13 16:10',
-        estimatedAmount: '300,000.00',
+        estimatedAmount: '180,000.00',
-        status: '待审批'
+        status: '采购中'
     },
     {
-        planNumber: 'PLAN-2023-0615-003',
+        planNumber: 'PLAN-2023-0612-006',
-        planName: 'Q2风电轴承采购计划',
+        planName: '安全防护装备采购',
-        equipmentType: '风电设备',
+        equipmentType: '安全设备',
-        requestDept: '运维部',
+        requestDept: '安全部',
-        applicant: '王主管',
+        applicant: '孙主管',
-        requestDate: '2023-06-15 10:30',
+        requestDate: '2023-06-12 08:50',
-        estimatedAmount: '300,000.00',
+        estimatedAmount: '80,000.00',
-        status: '待审批'
+        status: '未通过'
     },
     {
-        planNumber: 'PLAN-2023-0615-003',
+        planNumber: 'PLAN-2023-0611-007',
-        planName: 'Q2风电轴承采购计划',
+        planName: '水泵维修配件采购',
-        equipmentType: '风电设备',
+        equipmentType: '水处理设备',
-        requestDept: '运维部',
+        requestDept: '水处理部',
-        applicant: '王主管',
+        applicant: '周工程师',
-        requestDate: '2023-06-15 10:30',
+        requestDate: '2023-06-11 13:30',
-        estimatedAmount: '300,000.00',
+        estimatedAmount: '60,000.00',
-        status: '待审批'
+        status: '已通过'
     },
     {
-        planNumber: 'PLAN-2023-0615-003',
+        planNumber: 'PLAN-2023-0610-008',
-        planName: 'Q2风电轴承采购计划',
+        planName: '风机叶片检测设备采购',
-        equipmentType: '风电设备',
+        equipmentType: '检测设备',
-        requestDept: '运维部',
+        requestDept: '质检部',
-        applicant: '王主管',
+        applicant: '吴经理',
-        requestDate: '2023-06-15 10:30',
+        requestDate: '2023-06-10 10:20',
-        estimatedAmount: '300,000.00',
+        estimatedAmount: '450,000.00',
-        status: '待审批'
+        status: '已通过'
     },
     {
-        planNumber: 'PLAN-2023-0615-003',
+        planNumber: 'PLAN-2023-0609-009',
-        planName: 'Q2风电轴承采购计划',
+        planName: '仓库货架更新采购',
-        equipmentType: '风电设备',
+        equipmentType: '仓储设备',
-        requestDept: '运维部',
+        requestDept: '仓储部',
-        applicant: '王主管',
+        applicant: '郑主管',
-        requestDate: '2023-06-15 10:30',
+        requestDate: '2023-06-09 15:40',
-        estimatedAmount: '300,000.00',
+        estimatedAmount: '90,000.00',
-        status: '待审批'
+        status: '已完成'
     },
     {
-        planNumber: 'PLAN-2023-0615-003',
+        planNumber: 'PLAN-2023-0608-010',
-        planName: 'Q2风电轴承采购计划',
+        planName: '办公设备更新采购',
-        equipmentType: '风电设备',
+        equipmentType: '办公设备',
-        requestDept: '运维部',
+        requestDept: '行政部',
-        applicant: '王主管',
+        applicant: '冯助理',
-        requestDate: '2023-06-15 10:30',
+        requestDate: '2023-06-08 11:10',
-        estimatedAmount: '300,000.00',
+        estimatedAmount: '120,000.00',
-        status: '待审批'
+        status: '已完成'
     },
     {
-        planNumber: 'PLAN-2023-0615-003',
+        planNumber: 'PLAN-2023-0607-011',
-        planName: 'Q2风电轴承采购计划',
+        planName: '消防设备年检采购',
-        equipmentType: '风电设备',
+        equipmentType: '消防设备',
-        requestDept: '运维部',
+        requestDept: '安全部',
-        applicant: '王主管',
+        applicant: '蒋经理',
-        requestDate: '2023-06-15 10:30',
+        requestDate: '2023-06-07 09:30',
-        estimatedAmount: '300,000.00',
+        estimatedAmount: '40,000.00',
-        status: '待审批'
+        status: '已完成'
     },
     {
-        planNumber: 'PLAN-2023-0615-003',
+        planNumber: 'PLAN-2023-0606-012',
-        planName: 'Q2风电轴承采购计划',
+        planName: '网络设备升级采购',
-        equipmentType: '风电设备',
+        equipmentType: 'IT设备',
-        requestDept: '运维部',
+        requestDept: 'IT部',
-        applicant: '王主管',
+        applicant: '沈工程师',
-        requestDate: '2023-06-15 10:30',
+        requestDate: '2023-06-06 14:50',
-        estimatedAmount: '300,000.00',
+        estimatedAmount: '160,000.00',
-        status: '待审批'
+        status: '已完成'
     }
 ]);
 
 // 分页相关
 const currentPage = ref(1);
 const pageSize = ref(10);
-const total = ref(12);
+const total = computed(() => filteredTableData.value.length);
+
+// 状态映射关系
+const statusMap = {
+    pending: '待审批',
+    purchasing: '采购中',
+    rejected: '未通过',
+    approved: '已通过',
+    completed: '已完成'
+};
+
+// 根据activeTab筛选后的数据
+const filteredTableData = computed(() => {
+    if (activeTab.value === 'all') {
+        return tableData.value;
+    }
+    return tableData.value.filter(item => item.status === statusMap[activeTab.value]);
+});
 
 // 切换标签页
 const changeTab = (tab) => {
     activeTab.value = tab;
-    // 这里可以根据标签页筛选数据
     currentPage.value = 1; // 切换标签页时重置到第一页
 };
 
@@ -566,4 +642,298 @@ const handleSizeChange = (size) => {
 const handleCurrentChange = (current) => {
     currentPage.value = current;
 };
+
+// 计算产品总价
+const calculateTotalPrice = (row) => {
+    if (!row.productPrice || !row.purchaseQuantity) {
+        return '0.00';
+    }
+    const price = parseFloat(row.productPrice);
+    const quantity = parseInt(row.purchaseQuantity);
+    if (isNaN(price) || isNaN(quantity)) {
+        return '0.00';
+    }
+    return (price * quantity).toFixed(2);
+};
+
+// 添加产品
+const addProduct = () => {
+    newProcurementForm.products.push({
+        productName: '',
+        productModel: '',
+        productPrice: '',
+        purchaseQuantity: '',
+        unit: ''
+    });
+};
+
+// 删除产品
+const removeProduct = (index) => {
+    if (newProcurementForm.products.length <= 1) {
+        ElMessage({ message: '至少保留一个产品信息', type: 'warning' });
+        return;
+    }
+    newProcurementForm.products.splice(index, 1);
+};
+
+// 重置新建采购申请表单
+const resetNewProcurementForm = () => {
+    newProcurementForm.planName = '';
+    newProcurementForm.contractName = '';
+    newProcurementForm.contractType = '';
+    newProcurementForm.procurementType = '';
+    newProcurementForm.contractAddress = '';
+    newProcurementForm.supplierUnit = '';
+    newProcurementForm.deliveryTime = '';
+    newProcurementForm.paymentTerms = '';
+    newProcurementForm.settlementMethod = '';
+    newProcurementForm.products = [{
+        productName: '',
+        productModel: '',
+        productPrice: '',
+        purchaseQuantity: '',
+        unit: ''
+    }];
+    newProcurementForm.fileList = [];
+};
+
+// 取消新建采购申请
+const cancelNewProcurement = () => {
+    // 检查是否有未保存的内容
+    const hasContent = Object.values(newProcurementForm).some(value => {
+        if (Array.isArray(value)) {
+            return value.length > 0 && 
+                   value.some(item => 
+                       typeof item === 'object' && 
+                       Object.values(item).some(v => v)
+                   );
+        }
+        return !!value;
+    });
+    
+    if (hasContent) {
+        ElMessageBox.confirm('表单内容尚未保存，确定要关闭吗？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+        }).then(() => {
+            resetNewProcurementForm();
+            isNewProcurementDialogVisible.value = false;
+        });
+    } else {
+        resetNewProcurementForm();
+        isNewProcurementDialogVisible.value = false;
+    }
+};
+
+// 草稿校验函数
+const validateDraft = () => {
+    // 草稿只需要计划名称作为必填项
+    if (!newProcurementForm.planName.trim()) {
+        ElMessage({ message: '请填写计划名称', type: 'error' });
+        return false;
+    }
+    
+    // 检查已填写的产品信息的有效性
+    for (let i = 0; i < newProcurementForm.products.length; i++) {
+        const product = newProcurementForm.products[i];
+        if (product.productName && !product.productModel) {
+            ElMessage({ message: `第${i + 1}行产品：填写了产品名称，请也填写产品型号`, type: 'warning' });
+        }
+        if (product.productPrice && parseFloat(product.productPrice) <= 0) {
+            ElMessage({ message: `第${i + 1}行产品：产品单价应大于0`, type: 'warning' });
+        }
+        if (product.purchaseQuantity && parseInt(product.purchaseQuantity) <= 0) {
+            ElMessage({ message: `第${i + 1}行产品：购买数量应大于0`, type: 'warning' });
+        }
+    }
+    
+    return true;
+};
+
+// 保存草稿
+const saveDraft = () => {
+    // 验证草稿
+    if (!validateDraft()) {
+        return;
+    }
+    
+    // 使用pinia store保存草稿
+    const draftStore = useProcurementDraftStore();
+    const savedDraft = draftStore.saveDraft(newProcurementForm.planName, newProcurementForm);
+    
+    console.log('保存草稿:', {
+        draftNumber: savedDraft.draftNumber,
+        saveTime: savedDraft.saveTime,
+        content: savedDraft.content
+    });
+    
+    ElMessage({ message: `草稿已成功保存（编号：${savedDraft.draftNumber}），您可以在草稿箱中查看`, type: 'success' });
+};
+
+// 表单校验函数
+const validateForm = () => {
+    // 基础信息校验
+    if (!newProcurementForm.planName.trim()) {
+        ElMessage({ message: '请填写计划名称', type: 'error' });
+        return false;
+    }
+    
+    if (!newProcurementForm.contractName.trim()) {
+        ElMessage({ message: '请填写合同名称', type: 'error' });
+        return false;
+    }
+    
+    if (!newProcurementForm.contractType) {
+        ElMessage({ message: '请选择合同类型', type: 'error' });
+        return false;
+    }
+    
+    if (!newProcurementForm.procurementType) {
+        ElMessage({ message: '请选择采购类型', type: 'error' });
+        return false;
+    }
+    
+    if (!newProcurementForm.contractAddress) {
+        ElMessage({ message: '请选择仓库地址', type: 'error' });
+        return false;
+    }
+    
+    if (!newProcurementForm.supplierUnit) {
+        ElMessage({ message: '请选择供应商单位', type: 'error' });
+        return false;
+    }
+    
+    // 产品信息校验
+    const hasValidProduct = newProcurementForm.products.some(product => {
+        return product.productName && 
+               product.productModel && 
+               product.productPrice && parseFloat(product.productPrice) > 0 && 
+               product.purchaseQuantity && parseInt(product.purchaseQuantity) > 0 && 
+               product.unit;
+    });
+    
+    if (!hasValidProduct) {
+        ElMessage({ message: '请至少填写一个有效的产品信息', type: 'error' });
+        return false;
+    }
+    
+    // 检查每个产品的有效性
+    for (let i = 0; i < newProcurementForm.products.length; i++) {
+        const product = newProcurementForm.products[i];
+        if (product.productName || product.productModel || product.productPrice || product.purchaseQuantity || product.unit) {
+            if (!product.productName) {
+                ElMessage({ message: `第${i + 1}行产品：请填写产品名称`, type: 'error' });
+                return false;
+            }
+            if (!product.productModel) {
+                ElMessage({ message: `第${i + 1}行产品：请填写产品型号`, type: 'error' });
+                return false;
+            }
+            if (!product.productPrice) {
+                ElMessage({ message: `第${i + 1}行产品：请填写产品单价`, type: 'error' });
+                return false;
+            }
+            if (parseFloat(product.productPrice) <= 0) {
+                ElMessage({ message: `第${i + 1}行产品：产品单价必须大于0`, type: 'error' });
+                return false;
+            }
+            if (!product.purchaseQuantity) {
+                ElMessage({ message: `第${i + 1}行产品：请填写购买数量`, type: 'error' });
+                return false;
+            }
+            if (parseInt(product.purchaseQuantity) <= 0) {
+                ElMessage({ message: `第${i + 1}行产品：购买数量必须大于0`, type: 'error' });
+                return false;
+            }
+            if (!product.unit) {
+                ElMessage({ message: `第${i + 1}行产品：请填写单位`, type: 'error' });
+                return false;
+            }
+        }
+    }
+    
+    return true;
+};
+
+// 提交申请
+const submitProcurement = () => {
+    // 表单验证
+    if (!validateForm()) {
+        return;
+    }
+    
+    // 确认提交
+    ElMessageBox.confirm('确定要提交采购申请单吗？提交后将进入审批流程，不可撤销。', '确认提交', {
+        confirmButtonText: '确认提交',
+        cancelButtonText: '取消',
+        type: 'warning'
+    }).then(() => {
+        // 计算总金额
+        const totalAmount = newProcurementForm.products.reduce((sum, product) => {
+            const price = parseFloat(product.productPrice) || 0;
+            const quantity = parseInt(product.purchaseQuantity) || 0;
+            return sum + (price * quantity);
+        }, 0);
+        
+        // 生成计划编号
+        const today = new Date();
+        const dateStr = today.getFullYear() + '-' + 
+                       String(today.getMonth() + 1).padStart(2, '0') + '-' + 
+                       String(today.getDate()).padStart(2, '0');
+        const randomNum = Math.floor(100 + Math.random() * 900);
+        const planNumber = `PLAN-${dateStr}-${randomNum}`;
+        
+        // 模拟提交数据
+        const newPlan = {
+            planNumber: planNumber,
+            planName: newProcurementForm.planName,
+            equipmentType: newProcurementForm.procurementType,
+            requestDept: '当前部门',
+            applicant: '当前用户',
+            requestDate: new Date().toLocaleString(),
+            estimatedAmount: totalAmount.toFixed(2),
+            status: '待审批'
+        };
+        
+        // 添加到表格数据中
+        tableData.value.unshift(newPlan);
+        
+        ElMessage({ message: '采购申请单已成功提交，等待审批！', type: 'success' });
+        
+        // 关闭对话框并重置表单
+        resetNewProcurementForm();
+        isNewProcurementDialogVisible.value = false;
+    }).catch(() => {
+        // 用户取消了提交
+    });
+};
+
+// 文件上传相关方法
+const handlePreview = (uploadFile) => {
+    console.log('预览文件:', uploadFile);
+    ElMessage({ message: '文件预览功能待实现', type: 'info' });
+};
+
+const handleRemove = (uploadFile, uploadFiles) => {
+    console.log('删除文件:', uploadFile);
+    // 从fileList中移除文件
+    const index = newProcurementForm.fileList.findIndex(file => file.uid === uploadFile.uid);
+    if (index !== -1) {
+        newProcurementForm.fileList.splice(index, 1);
+        ElMessage({ message: `文件 "${uploadFile.name}" 已移除`, type: 'success' });
+    }
+};
+
+const beforeRemove = (uploadFile, uploadFiles) => {
+    return ElMessageBox.confirm(`确定要删除文件 "${uploadFile.name}" 吗？`, '确认删除', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning'
+    });
+};
+
+const handleExceed = (files, uploadFiles) => {
+    ElMessage({ message: '最多只能上传5个文件，已自动过滤多余文件', type: 'warning' });
+};
 </script>

src/views/materialManagement/spareParts.vue

@@ -157,20 +157,18 @@
             </div>
             <div style="margin-top: 30px;">
                 <div class="menu" style="background-color: #F2F2F2; padding: 20px;">
-                    <el-row gutter="30">
+                    <el-row :gutter="30">
                         <el-col :span="3">
                             <el-input placeholder="请输入备件名称"></el-input>
                         </el-col>
-                        <el-col :span="3">
-                            <el-select placeholder="设备类型">
-                            </el-select>
-                        </el-col>
                         <el-col :span="3">
                             <el-select placeholder="备件类别">
+                                <el-option v-for="option in wz_spareparts_type" :key="option.value" :label="option.label" :value="option.value" />
                             </el-select>
                         </el-col>
                         <el-col :span="3">
-                            <el-select placeholder="全部状态">
+                            <el-select placeholder="库存状态">
+                                <el-option v-for="option in wz_inventory_type" :key="option.value" :label="option.label" :value="option.value" />
                             </el-select>
                         </el-col>
                         <el-col :span="8">
@@ -180,20 +178,20 @@
                     </el-row>
                 </div>
                 <el-table :data="pagedTableData" border style="width: 100%;margin-top: 10px;">
-                    <el-table-column prop="backupNumber" label="备件编号" />
+                    <el-table-column prop="backupNumber" label="备件编号" align="center" />
-                    <el-table-column prop="backupName" label="备件名称" />
+                    <el-table-column prop="backupName" label="备件名称" align="center" />
-                    <el-table-column prop="equipmentType" label="设备类型" />
+                    <el-table-column prop="backType" label="备件类型" align="center" />
-                    <el-table-column prop="specificationModel" label="规格型号" />
+                    <el-table-column prop="specificationModel" label="规格型号" align="center" />
-                    <el-table-column prop="inventoryStatus" label="库存状态" />
+                    <el-table-column prop="safetyStockStatus" label="安全库存数量" align="center" />
-                    <el-table-column prop="inventoryQuantity" label="库存数量" />
+                    <el-table-column prop="inventoryQuantity" label="库存数量" align="center" />
-                    <el-table-column label="安全库存">
+                    <el-table-column label="库存状态" align="center">
                         <template #default="scope">
-                            <el-tag :type="getTagType(scope.row.safetyStockStatus)">
+                            <el-tag :type="getTagType(scope.row.inventoryStatus)">
-                                {{ scope.row.safetyStockStatus }}
+                                {{ scope.row.inventoryStatus }}
                             </el-tag>
                         </template>
                     </el-table-column>
-                    <el-table-column label="操作">
+                    <el-table-column label="操作" align="center">
                         <template #default="scope">
                             <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                             <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
@@ -215,6 +213,99 @@
                 </div>
             </div>
         </el-card>
+
+        <!-- 编辑弹窗 -->
+        <el-dialog
+            v-model="editDialogVisible"
+            title="编辑备件信息"
+            width="50%"
+            @close="handleEditClose"
+        >
+            <el-form
+                ref="editFormRef"
+                :model="editForm"
+                label-width="120px"
+                style="max-width: 600px;"
+            >
+                <el-form-item label="备件编号" prop="backupNumber">
+                    <el-input v-model="editForm.backupNumber" disabled />
+                </el-form-item>
+                <el-form-item label="备件名称" prop="backupName">
+                    <el-input v-model="editForm.backupName" />
+                </el-form-item>
+                <el-form-item label="备件类型" prop="backType">
+                    <el-input v-model="editForm.backType" />
+                </el-form-item>
+                <el-form-item label="规格型号" prop="specificationModel">
+                    <el-input v-model="editForm.specificationModel" />
+                </el-form-item>
+                <el-form-item label="库存状态" prop="inventoryStatus">
+                    <el-select v-model="editForm.inventoryStatus">
+                         <el-option v-for="option in wz_inventory_type" :key="option.value" :label="option.label" :value="option.value" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="库存数量" prop="inventoryQuantity">
+                    <el-input v-model="editForm.inventoryQuantity" />
+                </el-form-item>
+                <el-form-item label="安全库存数量" prop="safetyStockStatus">
+                    <el-input v-model="editForm.safetyStockStatus" />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="editDialogVisible = false">取消</el-button>
+                    <el-button type="primary" @click="saveEdit">保存</el-button>
+                </span>
+            </template>
+        </el-dialog>
+
+        <!-- 详情弹窗 -->
+        <el-dialog
+            v-model="detailDialogVisible"
+            title="备件详情"
+            width="50%"
+            @close="handleDetailClose"
+        >
+            <div class="detail-container">
+                <div class="detail-item">
+                    <div class="detail-label">备件编号：</div>
+                    <div class="detail-value">{{ currentRow.backupNumber }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="detail-label">备件名称：</div>
+                    <div class="detail-value">{{ currentRow.backupName }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="detail-label">备件类型：</div>
+                    <div class="detail-value">{{ currentRow.backType }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="detail-label">规格型号：</div>
+                    <div class="detail-value">{{ currentRow.specificationModel }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="detail-label">库存状态：</div>
+                    <div class="detail-value">
+                        <el-tag :type="getTagType(currentRow.inventoryStatus)">
+                            {{ currentRow.inventoryStatus }}
+                        </el-tag>
+                    </div>
+                </div>
+                <div class="detail-item">
+                    <div class="detail-label">库存数量：</div>
+                    <div class="detail-value">{{ currentRow.inventoryQuantity }}</div>
+                </div>
+                <div class="detail-item">
+                    <div class="detail-label">安全库存数量：</div>
+                    <div class="detail-value">{{ currentRow.safetyStockStatus }}</div>
+                </div>
+            </div>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="detailDialogVisible = false">关闭</el-button>
+                </span>
+            </template>
+        </el-dialog>
     </div>
 </template>
 <style scoped lang="scss">
@@ -284,9 +375,44 @@
     background-color: #409eff;
     color: #fff;
 }
+
+/* 详情弹窗样式 */
+.detail-container {
+    padding: 20px 0;
+}
+
+.detail-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+    padding: 8px 0;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.detail-label {
+    width: 120px;
+    font-weight: 500;
+    color: #303133;
+    margin-right: 20px;
+}
+
+.detail-value {
+    flex: 1;
+    color: #606266;
+}
+
+.dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: 20px;
+}
 </style>
-<script setup>
+<script setup lang="ts">
+import { ref, computed } from 'vue';
 import TitleComponent from '@/components/TitleComponent';
+import { ElMessage, ElMessageBox } from 'element-plus';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { wz_inventory_type,wz_spareparts_type} = toRefs<any>(proxy?.useDict('wz_inventory_type','wz_spareparts_type'));
 
 
 // 计算属性：根据当前页码和每页条数获取分页后的数据
@@ -294,97 +420,97 @@ const tableData = ref([
     {
         backupNumber: 'SOL-2023-001',
         backupName: '光伏逆变器模块',
-        equipmentType: '光伏设备',
+        backType: '光伏设备',
         specificationModel: 'SGGKTL-M',
-        inventoryStatus: '12个',
+        inventoryStatus: '正常',
         inventoryQuantity: '5个',
-        safetyStockStatus: '正常'
+        safetyStockStatus: '12个'
     },
     {
         backupNumber: 'SOL-2023-001',
         backupName: '光伏逆变器模块',
-        equipmentType: '光伏设备',
+        backType: '光伏设备',
         specificationModel: 'SGGKTL-M',
-        inventoryStatus: '12个',
+        inventoryStatus: '正常',
         inventoryQuantity: '5个',
-        safetyStockStatus: '正常'
+        safetyStockStatus: '12个'
     },
     {
         backupNumber: 'SOL-2023-001',
         backupName: '光伏逆变器模块',
-        equipmentType: '光伏设备',
+        backType: '光伏设备',
         specificationModel: 'SGGKTL-M',
-        inventoryStatus: '12个',
+        inventoryStatus: '正常',
         inventoryQuantity: '5个',
-        safetyStockStatus: '正常'
+        safetyStockStatus: '12个'
     },
     {
         backupNumber: 'SOL-2023-001',
         backupName: '光伏逆变器模块',
-        equipmentType: '光伏设备',
+        backType: '光伏设备',
         specificationModel: 'SGGKTL-M',
-        inventoryStatus: '12个',
+        inventoryStatus: '正常',
         inventoryQuantity: '5个',
-        safetyStockStatus: '正常'
+        safetyStockStatus: '12个'
     },
     {
         backupNumber: 'WIN-2023-045',
         backupName: '风力发电机轴承',
-        equipmentType: '风电设备',
+        backType: '风电设备',
         specificationModel: '6318-2RS1/C3',
-        inventoryStatus: '3套',
+        inventoryStatus: '低库存',
         inventoryQuantity: '5套',
-        safetyStockStatus: '低库存'
+        safetyStockStatus: '3套'
     },
     {
         backupNumber: 'SOL-2023-001',
         backupName: '光伏逆变器模块',
-        equipmentType: '光伏设备',
+        backType: '光伏设备',
         specificationModel: 'SGGKTL-M',
-        inventoryStatus: '12个',
+        inventoryStatus: '正常',
         inventoryQuantity: '5个',
-        safetyStockStatus: '正常'
+        safetyStockStatus: '12个'
     },
     {
         backupNumber: 'WIN-2023-045',
         backupName: '风力发电机轴承',
-        equipmentType: '风电设备',
+        backType: '风电设备',
         specificationModel: '6318-2RS1/C3',
-        inventoryStatus: '3套',
+        inventoryStatus: '低库存',
         inventoryQuantity: '5套',
-        safetyStockStatus: '低库存'
+        safetyStockStatus: '3套'
     },
     {
         backupNumber: 'WIN-2023-045',
         backupName: '风力发电机轴承',
-        equipmentType: '风电设备',
+        backType: '风电设备',
         specificationModel: '6318-2RS1/C3',
-        inventoryStatus: '0套',
+        inventoryStatus: '缺货',
         inventoryQuantity: '2套',
-        safetyStockStatus: '缺货'
+        safetyStockStatus: '0套'
     },
     {
         backupNumber: 'WIN-2023-045',
         backupName: '风力发电机轴承',
-        equipmentType: '风电设备',
+        backType: '风电设备',
         specificationModel: '6318-2RS1/C3',
-        inventoryStatus: '3套',
+        inventoryStatus: '低库存',
         inventoryQuantity: '5套',
-        safetyStockStatus: '低库存'
+        safetyStockStatus: '3套'
     },
     {
         backupNumber: 'WIN-2023-045',
         backupName: '风力发电机轴承',
-        equipmentType: '风电设备',
+        backType: '风电设备',
         specificationModel: '6318-2RS1/C3',
-        inventoryStatus: '3套',
+        inventoryStatus: '低库存',
         inventoryQuantity: '5套',
-        safetyStockStatus: '低库存'
+        safetyStockStatus: '3套'
     },
     {
         backupNumber: 'WIN-2023-045',
         backupName: '风力发电机轴承',
-        equipmentType: '风电设备',
+        backType: '风电设备',
         specificationModel: '6318-2RS1/C3',
         inventoryStatus: '3套',
         inventoryQuantity: '5套',
@@ -419,21 +545,109 @@ const getTagType = (status) => {
     return ''
 }
 
+// 编辑相关状态
+const editDialogVisible = ref(false);
+const editForm = ref({
+    backupNumber: '',
+    backupName: '',
+    backType: '',
+    specificationModel: '',
+    inventoryStatus: '',
+    inventoryQuantity: '',
+    safetyStockStatus: ''
+});
+const editFormRef = ref(null);
+
+// 详情相关状态
+const detailDialogVisible = ref(false);
+const currentRow = ref({
+    backupNumber: '',
+    backupName: '',
+    backType: '',
+    specificationModel: '',
+    inventoryStatus: '',
+    inventoryQuantity: '',
+    safetyStockStatus: ''
+});
+
+// 模拟API调用函数
+const mockApiCall = (success = true) => {
+    return new Promise((resolve, reject) => {
+        setTimeout(() => {
+            if (success) {
+                resolve({ success: true });
+            } else {
+                reject({ success: false, message: '操作失败，请稍后重试' });
+            }
+        }, 500);
+    });
+};
+
 // 编辑操作方法
 const handleEdit = (row) => {
-    console.log('编辑', row)
+    // 深拷贝当前行数据到编辑表单
-    // 这里可以编写编辑的逻辑，比如跳转到编辑页面等
+    editForm.value = JSON.parse(JSON.stringify(row));
-}
+    editDialogVisible.value = true;
+};
+
+// 保存编辑
+const saveEdit = async () => {
+    try {
+        // 模拟API调用
+        await mockApiCall();
+        editDialogVisible.value = false;
+        ElMessage.success('编辑成功');
+        // 这里应该刷新数据，但由于是模拟数据，暂时不处理
+    } catch (error) {
+        ElMessage.error(error.message || '编辑失败');
+    }
+};
+
+// 关闭编辑弹窗
+const handleEditClose = () => {
+    editForm.value = {};
+};
 
 // 详情操作方法
 const handleDetail = (row) => {
-    console.log('详情', row)
+    currentRow.value = row;
-    // 这里可以编写查看详情的逻辑
+    detailDialogVisible.value = true;
-}
+};
+
+// 关闭详情弹窗
+const handleDetailClose = () => {
+    currentRow.value = {};
+};
 
 // 删除操作方法
-const handleDelete = (row) => {
+const handleDelete = async (row) => {
-    console.log('删除', row)
+    try {
-    // 这里可以编写删除的逻辑，比如提示确认删除，然后从表格数据中移除等
+        await ElMessageBox.confirm(
-}
+            `确定要删除备件 ${row.backupName} 吗？`,
+            '确认删除',
+            {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            }
+        );
+        // 模拟API调用
+        await mockApiCall();
+        ElMessage.success('删除成功');
+        // 从表格数据中移除该记录
+        const index = tableData.value.findIndex(item => item.backupNumber === row.backupNumber);
+        if (index !== -1) {
+            tableData.value.splice(index, 1);
+            total.value = tableData.value.length;
+            // 如果删除的是当前页的最后一条数据，且当前页不是第一页，则切换到上一页
+            if (pagedTableData.value.length === 0 && currentPage.value > 1) {
+                currentPage.value--;
+            }
+        }
+    } catch (error) {
+        if (error !== 'cancel') {
+            ElMessage.error(error.message || '删除失败');
+        }
+    }
+};
 </script>