feat(物资管理): 新增备品配件和出入库单管理功能

实现备品配件管理模块，包括列表展示、搜索、新增、编辑、删除功能
完成出入库单管理功能，支持单据类型切换、搜索筛选和增删改查操作
添加数据统计图表展示出入库情况
优化表单验证和错误处理逻辑

src/views/materialManagement/inventoryManagement.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="inventoryManagement">
         <!-- <TitleComponent title="出入库单管理" subtitle="管理光伏和风电设备备品备件的出入库记录" /> -->
-        <el-row gutter="20">
+        <el-row :gutter="20">
             <el-col :span="16" class="list" style="flex-grow: 1;display: flex;">
                 <el-card style="border-radius: 10px;height: 100%;display: flex;flex-direction: column;flex: 1;">
                     <div style="height: 100%;flex: 1;">
@@ -13,45 +13,93 @@
                             </div>
                         </div>
                         <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-button icon="search" type="primary">搜索</el-button>
-                                <el-button icon="refresh">重置</el-button>
-                            </div>
-                            <div style="margin-top: 10px;">
-                                <el-button type="primary" @click="dialogVisible = true;">+{{ type === 'chuku' ? '添加出库单'
+                            <!-- 第一排：四个输入项 -->
+                            <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+                                :leave-active-class="proxy?.animate.searchAnimate.leave">
+                                <div v-show="showSearch" class="mb-[10px]">
+                                    <el-card shadow="hover">
+                                        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+                                            <el-form-item label="单据编号" prop="danjvNumber">
+                                                <el-input v-model="queryParams.danjvNumber" placeholder="请输入单据编号"
+                                                    clearable @keyup.enter="handleQuery" />
+                                            </el-form-item>
+                                            <el-form-item label="设备类型" prop="shebeiType">
+                                                <el-select v-model="queryParams.shebeiType" placeholder="请选择设备类型"
+                                                    clearable>
+                                                    <el-option v-for="dict in wz_device_type" :key="dict.value"
+                                                        :label="dict.label" :value="dict.value" />
+                                                </el-select>
+                                            </el-form-item>
+                                            <el-form-item label="审核状态" prop="auditStatus">
+                                                <el-select v-model="queryParams.auditStatus" placeholder="请选择审核状态"
+                                                    clearable>
+                                                    <el-option v-for="dict in shenheStatus" :key="dict.value"
+                                                        :label="dict.label" :value="dict.value" />
+                                                </el-select>
+                                            </el-form-item>
+                                            <el-form-item label="开始日期" prop="startDate">
+                                                <el-date-picker v-model="queryParams.startDate" type="date"
+                                                    placeholder="请选择开始日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
+                                                    style="width: 100%" />
+                                            </el-form-item>
+                                            <el-form-item label="结束日期" prop="endDate">
+                                                <el-date-picker v-model="queryParams.endDate" type="date"
+                                                    placeholder="请选择结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
+                                                    style="width: 100%" />
+                                            </el-form-item>
+                                            <el-form-item>
+                                                <el-button type="primary" icon="Search"
+                                                    @click="handleQuery">搜索</el-button>
+                                                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+                                            </el-form-item>
+                                        </el-form>
+                                    </el-card>
+                                </div>
+                            </transition>
+                            <div style="margin-top: 10px; display: flex; justify-content: flex-end;">
+                                <el-button type="primary" @click="handleAdd">+{{ type === 'chuku' ? '添加出库单'
                                     : '添加入库单' }}</el-button>
                             </div>
-                            <el-table :data="tableData" border style="width: 100%;margin-top: 15px;height: 1000px;">
-                                <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">
+                            <el-table v-loading="loading" border :data="churukudanList"
+                                style="width: 100%;margin-top: 15px;height: 1000px;">
+                                <el-table-column label="单据编号" align="center" prop="danjvNumber" />
+                                <el-table-column label="设备类型" align="center" prop="shebeiType">
                                     <template #default="scope">
-                                        <el-tag :type="getStatusTagType(scope.row.status)">
-                                            {{ scope.row.status }}
+                                        <span>{{ getTagLabel(wz_device_type, scope.row.shebeiType) }}</span>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column label="经手人" align="center" prop="jingshourenName" />
+                                <el-table-column label="操作时间" align="center" prop="updateTime" />
+                                <el-table-column label="总数量" align="center" prop="zonNumber" width="80px" />
+                                <el-table-column label="审核状态" align="center" prop="shenheStatus">
+                                    <template #default="scope">
+                                        <el-tag :type="getTagType(shenheStatus, scope.row.shenheStatus)" as="span">
+                                            {{ getTagLabel(shenheStatus, scope.row.shenheStatus) }}
                                         </el-tag>
                                     </template>
                                 </el-table-column>
-                                <el-table-column label="操作" align="center">
+                                <el-table-column label="单据类型" align="center" prop="danjvType">
                                     <template #default="scope">
-                                        <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
-                                        <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
-                                        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
+                                        <el-tag :type="getTagType(danjvType, scope.row.danjvType)">
+                                            {{ getTagLabel(danjvType, scope.row.danjvType) }}
+                                        </el-tag>
+                                    </template>
+                                </el-table-column>
+                                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                                    <template #default="scope">
+                                        <el-button link type="primary" @click="handleUpdate(scope.row)"
+                                            v-hasPermi="['personnel:churukudan:edit']">修改</el-button>
+                                        <el-button link type="primary" @click="handleDetail(scope.row)"
+                                            v-hasPermi="['personnel:churukudan:query']">详情</el-button>
+                                        <el-button link type="primary" @click="handleDelete(scope.row)"
+                                            v-hasPermi="['personnel:churukudan:remove']">删除</el-button>
                                     </template>
                                 </el-table-column>
                             </el-table>
                             <div class="tool">
                                 <div class="pagination-section">
-                                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
-                                        :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
-                                        layout="total, sizes, prev, pager, next, jumper" :total="total" background>
-                                    </el-pagination>
+                                    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+                                        v-model:limit="queryParams.pageSize" @pagination="getList" />
                                 </div>
                             </div>
                         </div>
@@ -76,102 +124,67 @@
                 </el-card>
             </el-col>
         </el-row>
-        <el-dialog v-model="dialogVisible" :title="type === 'chuku' ? '添加出库单' : '添加入库单'" width="500">
-            <el-form :rules="rules" ref="formRef" label-width="100">
-                <el-form-item label="单据编号" prop="formNumber">
-                    <el-input v-model="form.formNumber" placeholder="请输入单据编号" />
-                </el-form-item>
-                <el-form-item label="设备类型" prop="equipmentType">
-                    <el-select v-model="form.equipmentType" placeholder="请选择设备类型">
-                        <el-option label="设备类型1" value="1" />
-                        <el-option label="设备类型2" value="2" />
+        <!-- 添加或修改运维-物资-出入库单管理对话框 -->
+        <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+            <el-form ref="churukudanFormRef" :model="form" :rules="rules" label-width="80px">
+                <el-form-item label="单据类型" prop="danjvType">
+                    <el-select v-model="form.danjvType" placeholder="请选择单据类型">
+                        <el-option v-for="dict in danjvType" :key="dict.value" :label="dict.label"
+                            :value="dict.value"></el-option>
                     </el-select>
                 </el-form-item>
-                <el-form-item label="入库数量" prop="totalQuantity">
-                    <el-input v-model="form.totalQuantity" placeholder="请输入总数量" />
+                <el-form-item label="单据编号" prop="danjvNumber">
+                    <el-input v-model="form.danjvNumber" placeholder="请输入单据编号" />
                 </el-form-item>
-                <el-form-item label="经手人" prop="handler">
-                    <el-input v-model="form.handler" placeholder="请输入经手人" />
+                <el-form-item label="设备类型" prop="shebeiType">
+                    <el-select v-model="form.shebeiType" placeholder="请选择设备类型">
+                        <el-option v-for="dict in wz_device_type" :key="dict.value" :label="dict.label"
+                            :value="dict.value"></el-option>
+                    </el-select>
                 </el-form-item>
-                <!-- 联系电话 -->
-                <el-form-item label="联系电话" prop="contactPhone">
-                    <el-input v-model="form.contactPhone" placeholder="请输入联系电话" />
+                <el-form-item label="经手人id" prop="jingshourenId">
+                    <el-input v-model="form.jingshourenId" placeholder="请输入经手人id" />
+                </el-form-item>
+                <el-form-item label="经手人" prop="jingshourenName">
+                    <el-input v-model="form.jingshourenName" placeholder="请输入经手人" />
+                </el-form-item>
+                <el-form-item label="联系电话" prop="contactNumber">
+                    <el-input v-model="form.contactNumber" placeholder="请输入联系电话" />
+                </el-form-item>
+                <el-form-item label="总数量" prop="zonNumber">
+                    <el-input v-model="form.zonNumber" placeholder="请输入总数量" />
                 </el-form-item>
             </el-form>
             <template #footer>
                 <div class="dialog-footer">
-                    <el-button @click="dialogVisible = false">取消</el-button>
-                    <el-button type="primary" @click="dialogVisible = false">
-                        保存
-                    </el-button>
+                    <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+                    <el-button @click="cancel">取 消</el-button>
                 </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>
+        <!-- 详情对话框 -->
+        <el-dialog title="出入库单详情" v-model="detailVisible" width="500px" append-to-body>
+            <el-descriptions :column="1" border>
+                <el-descriptions-item label="单据类型">{{ getTagLabel(danjvType, detailData.danjvType)
+                }}</el-descriptions-item>
+                <el-descriptions-item label="单据编号">{{ detailData.danjvNumber }}</el-descriptions-item>
+                <el-descriptions-item label="设备类型">{{ getTagLabel(wz_device_type, detailData.shebeiType)
+                }}</el-descriptions-item>
+                <el-descriptions-item label="经手人">{{ detailData.jingshourenName }}</el-descriptions-item>
+                <el-descriptions-item label="联系电话">{{ detailData.contactNumber }}</el-descriptions-item>
+                <el-descriptions-item label="总数量">{{ detailData.zonNumber }}</el-descriptions-item>
+                <el-descriptions-item label="审核状态">
+                    <dict-tag :options="shenheStatus" :value="detailData.shenheStatus"></dict-tag>
+                </el-descriptions-item>
+            </el-descriptions>
             <template #footer>
                 <div class="dialog-footer">
-                    <el-button @click="editDialogVisible = false">取消</el-button>
-                    <el-button type="primary" @click="saveEdit">保存</el-button>
+                    <el-button @click="detailVisible = false">关闭</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>
@@ -213,8 +226,6 @@
 }
 
 .menu {
-    display: flex;
-    gap: 20px;
     background-color: #F2F2F2;
     padding: 20px;
 }
@@ -309,158 +320,335 @@
     height: 100%;
 }
 </style>
-<script setup>
+<script setup lang="ts">
 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: '',
-    equipmentType: '',
-    handler: '',
-    totalQuantity: ''
-});
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+import { listChurukudan, getChurukudan, delChurukudan, addChurukudan, updateChurukudan, getChuRuKuCountBar } from '@/api/wuziguanli/churuku/index';
+import { ChurukudanVO, ChurukudanQuery, ChurukudanForm } from '@/api/wuziguanli/churuku/types';
+const { wz_device_type } = toRefs<any>(proxy?.useDict('wz_device_type'));
 
-const changeType = (newType) => {
+import { getCurrentMonthDates } from '@/utils/getDate';
+const currentMonthDates = getCurrentMonthDates();
+// 导入用户store
+import { useUserStore } from '@/store/modules/user';
+// 获取用户store
+const userStore = useUserStore();
+
+const churukudanList = ref<ChurukudanVO[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const total = ref(0);
+// 单据类型切换变量 - 默认出库单
+const type = ref<string>('chuku');
+
+/** 切换单据类型 */
+const changeType = (newType: string) => {
     type.value = newType;
-};
-const dialogVisible = ref(false);
-const tableData = computed(() => {
-    return Array.from({ length: 50 }, (_, index) => ({
-        formNumber: 'IN-2023-0615-001',
-        equipmentType: '光伏设备',
-        handler: '李仓库',
-        operationTime: '2023-06-15 09:23',
-        totalQuantity: 120,
-        // 待审核，已完成，已取消 随机生成
-        status: Math.random() > 0.5 ? '待审核' : Math.random() > 0.5 ? '已完成' : '已取消'
-    }))
-})
-// 当前页码
-const currentPage = ref(1);
-// 每页条数 - 与分页控件默认值保持一致
-const pageSize = ref(10);
-// 总条数 - 从原始数据计算得出
-const total = ref(tableData.value.length);
-const pagedTableData = computed(() => {
-    const startIndex = (currentPage.value - 1) * pageSize.value;
-    const endIndex = startIndex + pageSize.value;
-    return tableData.value.slice(startIndex, endIndex);
-});
-// 表单校验规则
-const rules = ref({
-    formNumber: [{ required: true, message: '请输入表单编号', trigger: 'blur' }],
-    equipmentType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
-    handler: [{ required: true, message: '请输入经手人', trigger: 'blur' }],
-    totalQuantity: [{ required: true, message: '请输入入库数量', trigger: 'blur' }],
-    contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
-});
-// 表单引用
-const formRef = ref(null);
-// 当前页码改变
-const handleCurrentChange = (val) => {
-    currentPage.value = val;
-};
+    // 更新查询参数
+    queryParams.value.pageNum = 1;
+    queryParams.value.danjvType = newType === 'chuku' ? '1' : '2';
+    // 重新加载数据
+    getList();
+}
 
-// 每页条数改变
-const handleSizeChange = (val) => {
-    pageSize.value = val;
-    currentPage.value = 1;
-};
+// 单据类型
+const danjvType = ref([
+    {
+        value: '1',
+        label: '出库单',
+        type: 'primary'
+    },
+    {
+        value: '2',
+        label: '入库单',
+        type: 'success'
+    }
+]);
+// 审核类型
+const shenheStatus = ref([
+    {
+        value: 'draft',
+        label: '草稿',
+        type: 'primary'
+    },
+    {
+        value: 'waiting',
+        label: '待审核',
+        type: 'warning',
+    },
+    {
+        value: 'finish',
+        label: '已完成',
+        type: 'success'
+    }
+])
+// 根据字典数组和值获取标签类型
+const getTagType = (dictArray: any[], value: any): string => {
+    if (!dictArray || !value) return '';
+    const item = dictArray.find(item => item.value === value);
+    return item?.type || '';
+}
 
-// 模拟API调用函数
-const mockApiCall = (success = true) => {
-    return new Promise((resolve, reject) => {
-        setTimeout(() => {
-            if (success) {
-                resolve({ success: true });
-            } else {
-                reject({ success: false, message: '操作失败，请稍后重试' });
+// 根据字典数组和值获取标签文本
+const getTagLabel = (dictArray: any[], value: any): string => {
+    if (!dictArray || !value) return '';
+    const item = dictArray.find(item => item.value === value);
+    return item?.label || value;
+}
+
+const queryFormRef = ref<ElFormInstance>();
+const churukudanFormRef = ref<ElFormInstance>();
+
+const dialog = reactive<DialogOption>({
+    visible: false,
+    title: ''
+});
+
+// 详情弹窗显示状态
+const detailVisible = ref(false);
+
+// 详情数据
+const detailData = ref<ChurukudanVO>({} as ChurukudanVO);
+
+const initFormData: ChurukudanForm = {
+    id: undefined,
+    projectId: undefined,
+    danjvNumber: undefined,
+    shebeiType: undefined,
+    jingshourenId: undefined,
+    jingshourenName: undefined,
+    contactNumber: undefined,
+    zonNumber: undefined,
+    shenheStatus: undefined,
+    danjvType: undefined,
+    updateTime: undefined,
+    auditStatus: undefined,
+}
+const data = reactive<PageData<ChurukudanForm, ChurukudanQuery>>({
+    form: { ...initFormData },
+    queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        projectId: undefined,
+        danjvNumber: undefined,
+        shebeiType: undefined,
+        shenheStatus: undefined,
+        startDate: undefined,
+        endDate: undefined,
+        auditStatus: undefined,
+        danjvType: '1', // 默认显示出库单
+        params: {
+        }
+    },
+    rules: {
+        shebeiType: [
+            { required: true, message: "设备类型不能为空", trigger: "change" }
+        ],
+        jingshourenId: [
+            { required: true, message: "经手人id不能为空", trigger: "blur" }
+        ],
+        jingshourenName: [
+            { required: true, message: "经手人不能为空", trigger: "blur" }
+        ],
+        zonNumber: [
+            { required: true, message: "总数量不能为空", trigger: "blur" }
+        ],
+        danjvType: [
+            { required: true, message: "单据状态不能为空", trigger: "change" }
+        ],
+    }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询运维-物资-出入库单管理列表 */
+const getList = async () => {
+    loading.value = true;
+    try {
+        const res = await listChurukudan(queryParams.value);
+        churukudanList.value = res.rows || [];
+        total.value = res.total || 0;
+    } catch (error) {
+        console.error('获取出入库单列表失败:', error);
+        proxy?.$modal.msgError("获取数据失败，请稍后重试");
+        churukudanList.value = [];
+        total.value = 0;
+    } finally {
+        loading.value = false;
+    }
+}
+
+/** 取消按钮 */
+const cancel = () => {
+    reset();
+    dialog.visible = false;
+}
+
+/** 表单重置 */
+const reset = () => {
+    form.value = { ...initFormData };
+    churukudanFormRef.value?.resetFields();
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+    // 检查日期范围筛选条件
+    if ((queryParams.value.startDate && !queryParams.value.endDate) ||
+        (!queryParams.value.startDate && queryParams.value.endDate)) {
+        proxy?.$modal.msgWarning("时间范围筛选必须同时选择开始日期和结束日期");
+        return;
+    }
+    queryParams.value.pageNum = 1;
+    getList();
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+    queryFormRef.value?.resetFields();
+    handleQuery();
+}
+
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+    reset();
+    if (userStore.selectedProject && userStore.selectedProject.id) {
+        form.value.projectId = userStore.selectedProject.id;
+    }
+    // 根据当前选择的类型自动设置单据类型
+    form.value.danjvType = type.value === 'chuku' ? '1' : '2';
+    dialog.visible = true;
+    dialog.title = type.value === 'chuku' ? "添加出库单" : "添加入库单";
+}
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: ChurukudanVO) => {
+    reset();
+    const _id = row?.id || ids.value[0];
+    if (!_id) {
+        proxy?.$modal.msgWarning("请选择要修改的数据");
+        return;
+    }
+    try {
+        const res = await getChurukudan(_id);
+        Object.assign(form.value, res.data);
+        dialog.visible = true;
+        dialog.title = "修改运维-物资-出入库单管理";
+    } catch (error) {
+        console.error('获取出入库单详情失败:', error);
+        proxy?.$modal.msgError("获取数据失败，请稍后重试");
+    }
+}
+
+/** 提交按钮 */
+const submitForm = () => {
+    churukudanFormRef.value?.validate(async (valid: boolean) => {
+        if (valid) {
+            buttonLoading.value = true;
+            try {
+                if (form.value.id) {
+                    await updateChurukudan(form.value);
+                    proxy?.$modal.msgSuccess("修改成功");
+                } else {
+                    await addChurukudan(form.value);
+                    proxy?.$modal.msgSuccess("添加成功");
+                }
+                dialog.visible = false;
+                await getList();
+            } catch (error) {
+                console.error('保存出入库单失败:', error);
+                proxy?.$modal.msgError("操作失败，请稍后重试");
+            } finally {
+                buttonLoading.value = false;
             }
-        }, 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'
-    } else if (status === '待审核') {
-        return 'warning'
-    } else if (status === '已取消') {
-        return 'danger'
+/** 详情按钮操作 */
+const handleDetail = async (row?: ChurukudanVO) => {
+    if (!row?.id) {
+        proxy?.$modal.msgWarning("请选择要查看详情的数据");
+        return;
+    }
+    try {
+        const res = await getChurukudan(row.id);
+        detailData.value = res.data || {} as ChurukudanVO;
+        detailVisible.value = true;
+    } catch (error) {
+        console.error('获取出入库单详情失败:', error);
+        proxy?.$modal.msgError("获取详情失败，请稍后重试");
     }
-    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 handleDelete = async (row?: ChurukudanVO) => {
+    const _ids = row?.id || ids.value;
+    if (!_ids || (_ids instanceof Array && _ids.length === 0)) {
+        proxy?.$modal.msgWarning("请选择要删除的数据");
+        return;
     }
-};
-
-// 关闭编辑弹窗
-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('删除成功');
-        // 这里应该刷新数据，但由于是模拟数据，暂时不处理
+        const confirmed = await proxy?.$modal.confirm('是否确认删除运维-物资-出入库单管理编号为"' + _ids + '"的数据项？');
+        if (!confirmed) return;
+        loading.value = true;
+        await delChurukudan(_ids);
+        proxy?.$modal.msgSuccess("删除成功");
+        await getList();
     } catch (error) {
-        if (error !== 'cancel') {
-            ElMessage.error(error.message || '删除失败');
+        console.error('删除出入库单失败:', error);
+        proxy?.$modal.msgError("删除失败，请稍后重试");
+    } finally {
+        loading.value = false;
+    }
+}
+
+// 柱状图数据获取
+const fetchChuRuKuCountBarData = async () => {
+    if (!queryParams.value.projectId) {
+        return;
+    }
+    let data = {
+        projectId: queryParams.value.projectId,
+        startDate: currentMonthDates[0].fullDate,
+        endDate: currentMonthDates[currentMonthDates.length - 1].fullDate,
+    }
+    try {
+        const res = await getChuRuKuCountBar(data);
+        console.log(res);
+        // 这里可以添加数据处理和图表更新的逻辑
+    } catch (error) {
+        console.error('获取柱状图数据失败:', error);
+        // 可以选择是否显示错误提示，根据UI需求决定
+        // proxy?.$modal.msgError("获取统计数据失败");
+    }
+}
+
+// 监听用户选择的项目变化
+watch(() => userStore.selectedProject, (newProject) => {
+    if (newProject && newProject.id) {
+        queryParams.value.projectId = newProject.id;
+        // 只在新增表单时设置projectId，编辑表单保留原有值
+        if (!form.value.id) {
+            form.value.projectId = newProject.id;
         }
+        // 调用getList刷新数据
+        getList();
+        fetchChuRuKuCountBarData();
     }
-};
+}, { immediate: true, deep: true });
+onMounted(() => {
+    getList();
+    fetchChuRuKuCountBarData();
+});
+
+// 组件卸载时清空projectId
+onUnmounted(() => {
+    queryParams.value.projectId = undefined;
+    form.value.projectId = undefined;
+});
 </script>