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

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

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="equipmentType" label="设备类型" />
-                                <el-table-column prop="handler" label="经手人" />
-                                <el-table-column prop="operationTime" label="操作时间" />
-                                <el-table-column prop="totalQuantity" label="总数量" />
-                                <el-table-column label="状态">
+                                <el-table-column prop="formNumber" label="单据编号" align="center" />
+                                <el-table-column prop="equipmentType" label="设备类型" align="center" />
+                                <el-table-column prop="handler" label="经手人" align="center" />
+                                <el-table-column prop="operationTime" label="操作时间" align="center" />
+                                <el-table-column prop="totalQuantity" label="总数量" align="center" />
+                                <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>