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

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

.env.development

@@ -5,7 +5,7 @@ VITE_APP_TITLE = 新能源场站智慧运维平台
 VITE_APP_ENV = 'development'
 
 # 开发环境
-VITE_APP_BASE_API = 'http://192.168.110.194:18899'
+VITE_APP_BASE_API = 'http://192.168.110.149:18899'
 
 # 应用访问路径 例如使用前缀 /admin/
 VITE_APP_CONTEXT_PATH = '/'

src/api/wuziguanli/beijian/index.ts

@@ -0,0 +1,63 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { BeipinBeijianVO, BeipinBeijianForm, BeipinBeijianQuery } from '@/api/wuziguanli/beijian/types';
+
+/**
+ * 查询运维-物资-备品配件列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listBeipinBeijian = (query?: BeipinBeijianQuery): AxiosPromise<BeipinBeijianVO[]> => {
+  return request({
+    url: '/ops/beipinBeijian/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询运维-物资-备品配件详细
+ * @param id
+ */
+export const getBeipinBeijian = (id: string | number): AxiosPromise<BeipinBeijianVO> => {
+  return request({
+    url: '/ops/beipinBeijian/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增运维-物资-备品配件
+ * @param data
+ */
+export const addBeipinBeijian = (data: BeipinBeijianForm) => {
+  return request({
+    url: '/ops/beipinBeijian',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改运维-物资-备品配件
+ * @param data
+ */
+export const updateBeipinBeijian = (data: BeipinBeijianForm) => {
+  return request({
+    url: '/ops/beipinBeijian',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除运维-物资-备品配件
+ * @param id
+ */
+export const delBeipinBeijian = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/ops/beipinBeijian/' + id,
+    method: 'delete'
+  });
+};

src/api/wuziguanli/beijian/types.ts

@@ -0,0 +1,131 @@
+export interface BeipinBeijianVO {
+  /**
+   * id
+   */
+  id: string | number;
+
+  /**
+   * 项目id
+   */
+  projectId: string | number;
+
+  /**
+   * 备件编号
+   */
+  beijianNumber: string;
+
+  /**
+   * 备件名称
+   */
+  beijianName: string;
+
+  /**
+   * 设备类型
+   */
+  shebeiType: string;
+
+  /**
+   * 规格型号
+   */
+  guigexinghao: string;
+
+  /**
+   * 库存状态（待定）
+   */
+  kucunStatus: string;
+
+  /**
+   * 库存数量
+   */
+  kucunCount: number;
+
+}
+
+export interface BeipinBeijianForm extends BaseEntity {
+  /**
+   * id
+   */
+  id?: string | number;
+
+  /**
+   * 项目id
+   */
+  projectId?: string | number;
+
+  /**
+   * 备件编号
+   */
+  beijianNumber?: string;
+
+  /**
+   * 备件名称
+   */
+  beijianName?: string;
+
+  /**
+   * 设备类型
+   */
+  shebeiType?: string;
+
+  /**
+   * 规格型号
+   */
+  guigexinghao?: string;
+
+  /**
+   * 库存状态（待定）
+   */
+  kucunStatus?: string;
+
+  /**
+   * 库存数量
+   */
+  kucunCount?: number;
+
+}
+
+export interface BeipinBeijianQuery extends PageQuery {
+
+  /**
+   * 项目id
+   */
+  projectId?: string | number;
+
+  /**
+   * 备件编号
+   */
+  beijianNumber?: string;
+
+  /**
+   * 备件名称
+   */
+  beijianName?: string;
+
+  /**
+   * 设备类型
+   */
+  shebeiType?: string;
+
+  /**
+   * 规格型号
+   */
+  guigexinghao?: string;
+
+  /**
+   * 库存状态（待定）
+   */
+  kucunStatus?: string;
+
+  /**
+   * 库存数量
+   */
+  kucunCount?: number;
+
+    /**
+     * 日期范围参数
+     */
+    params?: any;
+}
+
+
+

src/api/wuziguanli/churuku/index.ts

@@ -0,0 +1,76 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { ChurukudanVO, ChurukudanForm, ChurukudanQuery } from '@/api/wuziguanli/churuku/types';
+
+/**
+ * 查询运维-物资-出入库单管理列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listChurukudan = (query?: ChurukudanQuery): AxiosPromise<ChurukudanVO[]> => {
+  return request({
+    url: '/ops/churukudan/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询运维-物资-出入库单管理详细
+ * @param id
+ */
+export const getChurukudan = (id: string | number): AxiosPromise<ChurukudanVO> => {
+  return request({
+    url: '/ops/churukudan/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增运维-物资-出入库单管理
+ * @param data
+ */
+export const addChurukudan = (data: ChurukudanForm) => {
+  return request({
+    url: '/ops/churukudan',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改运维-物资-出入库单管理
+ * @param data
+ */
+export const updateChurukudan = (data: ChurukudanForm) => {
+  return request({
+    url: '/ops/churukudan',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除运维-物资-出入库单管理
+ * @param id
+ */
+export const delChurukudan = (id: string | number | Array<string | number>) => {
+  return request({
+    url: '/ops/churukudan/' + id,
+    method: 'delete'
+  });
+};
+
+/**
+ * 运维-物资-出入库单柱状图
+ * @param query
+ * @returns {*}
+ */
+export const getChuRuKuCountBar = (data:any): AxiosPromise<any> => {
+  return request({
+    url: '/ops/churukudan/getChuRuKuCount',
+    method: 'get',
+    params: data
+  });
+};

src/api/wuziguanli/churuku/types.ts

@@ -0,0 +1,154 @@
+export interface ChurukudanVO {
+  /**
+   * id
+   */
+  id: string | number;
+  /**
+   * 项目id
+   */
+  projectId: string | number;
+  /**
+   * 单据编号
+   */
+  danjvNumber: string;
+
+  /**
+   * 设备类型
+   */
+  shebeiType: string;
+
+  /**
+   * 经手人id
+   */
+  jingshourenId: string | number;
+
+  /**
+   * 经手人
+   */
+  jingshourenName: string;
+
+  /**
+   * 联系电话
+   */
+  contactNumber: string;
+
+  /**
+   * 总数量
+   */
+  zonNumber: number;
+
+  /**
+   * 审核状态
+   */
+  shenheStatus: string;
+
+  /**
+   * 单据状态（1、出库单，2入库单）
+   */
+  danjvType: string;
+
+}
+
+export interface ChurukudanForm extends BaseEntity {
+  /**
+   * id
+   */
+  id?: string | number;
+  /**
+   * 项目id
+   */
+  projectId: string | number;
+  /**
+   * 单据编号
+   */
+  danjvNumber?: string;
+
+  /**
+   * 设备类型
+   */
+  shebeiType?: string;
+
+  /**
+   * 经手人id
+   */
+  jingshourenId?: string | number;
+
+  /**
+   * 经手人
+   */
+  jingshourenName?: string;
+
+  /**
+   * 联系电话
+   */
+  contactNumber?: string;
+
+  /**
+   * 总数量
+   */
+  zonNumber?: number;
+
+  /**
+   * 审核状态
+   */
+  shenheStatus?: string;
+
+  /**
+   * 单据状态（1、出库单，2入库单）
+   */
+  danjvType?: string;
+
+  /**
+   * 审核状态
+   */
+  auditStatus?: string;
+
+}
+
+export interface ChurukudanQuery extends PageQuery {
+  /**
+   * 项目id
+   */
+  projectId?: string | number;
+  /**
+   * 单据编号
+   */
+  danjvNumber?: string;
+
+  /**
+   * 设备类型
+   */
+  shebeiType?: string;
+
+  /**
+   * 审核状态
+   */
+  shenheStatus?: string;
+
+  /**
+   * 单据状态（1、出库单，2入库单）
+   */
+  danjvType?: string;
+
+  /**
+   * 审核状态
+   */
+  auditStatus?: string;
+
+  /**
+   * 开始日期
+   */
+  startDate?: string;
+  
+  /**
+   * 结束日期
+   */
+  endDate?: string;
+    /**
+     * 日期范围参数
+     */
+    params?: any;
+}
+
+
+

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>
+                            <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
-                                <el-select placeholder="请选择设备类型"></el-select>
+                                :leave-active-class="proxy?.animate.searchAnimate.leave">
-                                <el-select placeholder="请选择状态"></el-select>
+                                <div v-show="showSearch" class="mb-[10px]">
-                                <el-select placeholder="请选择日期范围"></el-select>
+                                    <el-card shadow="hover">
-                                <el-button icon="search" type="primary">搜索</el-button>
+                                        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-                                <el-button icon="refresh">重置</el-button>
+                                            <el-form-item label="单据编号" prop="danjvNumber">
-                            </div>
+                                                <el-input v-model="queryParams.danjvNumber" placeholder="请输入单据编号"
-                            <div style="margin-top: 10px;">
+                                                    clearable @keyup.enter="handleQuery" />
-                                <el-button type="primary" @click="dialogVisible = true;">+{{ type === 'chuku' ? '添加出库单'
+                                            </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 v-loading="loading" border :data="churukudanList"
-                                <el-table-column prop="formNumber" label="单据编号" align="center" />
+                                style="width: 100%;margin-top: 15px;height: 1000px;">
-                                <el-table-column prop="equipmentType" label="设备类型" align="center" />
+                                <el-table-column label="单据编号" align="center" prop="danjvNumber" />
-                                <el-table-column prop="handler" label="经手人" align="center" />
+                                <el-table-column label="设备类型" align="center" prop="shebeiType">
-                                <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)">
+                                        <span>{{ getTagLabel(wz_device_type, scope.row.shebeiType) }}</span>
-                                            {{ scope.row.status }}
+                                    </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-tag :type="getTagType(danjvType, scope.row.danjvType)">
-                                        <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
+                                            {{ getTagLabel(danjvType, scope.row.danjvType) }}
-                                        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
+                                        </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"
+                                    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-                                        :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
+                                        v-model:limit="queryParams.pageSize" @pagination="getList" />
-                                        layout="total, sizes, prev, pager, next, jumper" :total="total" background>
-                                    </el-pagination>
                                 </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-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
-                <el-form-item label="单据编号" prop="formNumber">
+            <el-form ref="churukudanFormRef" :model="form" :rules="rules" label-width="80px">
-                    <el-input v-model="form.formNumber" placeholder="请输入单据编号" />
+                <el-form-item label="单据类型" prop="danjvType">
-                </el-form-item>
+                    <el-select v-model="form.danjvType" placeholder="请选择单据类型">
-                <el-form-item label="设备类型" prop="equipmentType">
+                        <el-option v-for="dict in danjvType" :key="dict.value" :label="dict.label"
-                    <el-select v-model="form.equipmentType" placeholder="请选择设备类型">
+                            :value="dict.value"></el-option>
-                        <el-option label="设备类型1" value="1" />
-                        <el-option label="设备类型2" value="2" />
                     </el-select>
                 </el-form-item>
-                <el-form-item label="入库数量" prop="totalQuantity">
+                <el-form-item label="单据编号" prop="danjvNumber">
-                    <el-input v-model="form.totalQuantity" placeholder="请输入总数量" />
+                    <el-input v-model="form.danjvNumber" placeholder="请输入单据编号" />
                 </el-form-item>
-                <el-form-item label="经手人" prop="handler">
+                <el-form-item label="设备类型" prop="shebeiType">
-                    <el-input v-model="form.handler" placeholder="请输入经手人" />
+                    <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="经手人id" prop="jingshourenId">
-                <el-form-item label="联系电话" prop="contactPhone">
+                    <el-input v-model="form.jingshourenId" placeholder="请输入经手人id" />
-                    <el-input v-model="form.contactPhone" placeholder="请输入联系电话" />
+                </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 :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
-                    <el-button type="primary" @click="dialogVisible = false">
+                    <el-button @click="cancel">取 消</el-button>
-                        保存
-                    </el-button>
                 </div>
             </template>
         </el-dialog>
 
-        <!-- 编辑弹窗 -->
+        <!-- 详情对话框 -->
-        <el-dialog v-model="editDialogVisible" title="编辑出入库单" width="500" @close="handleEditClose">
+        <el-dialog title="出入库单详情" v-model="detailVisible" width="500px" append-to-body>
-            <el-form :rules="rules" ref="editFormRef" :model="editForm" label-width="100">
+            <el-descriptions :column="1" border>
-                <el-form-item label="单据编号" prop="formNumber">
+                <el-descriptions-item label="单据类型">{{ getTagLabel(danjvType, detailData.danjvType)
-                    <el-input v-model="editForm.formNumber" placeholder="请输入单据编号" />
+                }}</el-descriptions-item>
-                </el-form-item>
+                <el-descriptions-item label="单据编号">{{ detailData.danjvNumber }}</el-descriptions-item>
-                <el-form-item label="设备类型" prop="equipmentType">
+                <el-descriptions-item label="设备类型">{{ getTagLabel(wz_device_type, detailData.shebeiType)
-                    <el-select v-model="editForm.equipmentType" placeholder="请选择设备类型">
+                }}</el-descriptions-item>
-                        <el-option label="设备类型1" value="1" />
+                <el-descriptions-item label="经手人">{{ detailData.jingshourenName }}</el-descriptions-item>
-                        <el-option label="设备类型2" value="2" />
+                <el-descriptions-item label="联系电话">{{ detailData.contactNumber }}</el-descriptions-item>
-                    </el-select>
+                <el-descriptions-item label="总数量">{{ detailData.zonNumber }}</el-descriptions-item>
-                </el-form-item>
+                <el-descriptions-item label="审核状态">
-                <el-form-item label="总数量" prop="totalQuantity">
+                    <dict-tag :options="shenheStatus" :value="detailData.shenheStatus"></dict-tag>
-                    <el-input-number v-model="editForm.totalQuantity" placeholder="请输入总数量" :min="0" :step="1" />
+                </el-descriptions-item>
-                </el-form-item>
+            </el-descriptions>
-                <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 @click="detailVisible = 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>
@@ -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 { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const type = ref('chuku');
+import { listChurukudan, getChurukudan, delChurukudan, addChurukudan, updateChurukudan, getChuRuKuCountBar } from '@/api/wuziguanli/churuku/index';
-const form = ref({
+import { ChurukudanVO, ChurukudanQuery, ChurukudanForm } from '@/api/wuziguanli/churuku/types';
-    formNumber: '',
+const { wz_device_type } = toRefs<any>(proxy?.useDict('wz_device_type'));
-    equipmentType: '',
-    handler: '',
-    totalQuantity: ''
-});
 
-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);
+    queryParams.value.pageNum = 1;
-const tableData = computed(() => {
+    queryParams.value.danjvType = newType === 'chuku' ? '1' : '2';
-    return Array.from({ length: 50 }, (_, index) => ({
+    // 重新加载数据
-        formNumber: 'IN-2023-0615-001',
+    getList();
-        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;
-};
 
-// 每页条数改变
+// 单据类型
-const handleSizeChange = (val) => {
+const danjvType = ref([
-    pageSize.value = val;
+    {
-    currentPage.value = 1;
+        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) => {
+const getTagLabel = (dictArray: any[], value: any): string => {
-    return new Promise((resolve, reject) => {
+    if (!dictArray || !value) return '';
-        setTimeout(() => {
+    const item = dictArray.find(item => item.value === value);
-            if (success) {
+    return item?.label || value;
-                resolve({ success: true });
+}
-            } else {
+
-                reject({ success: false, message: '操作失败，请稍后重试' });
+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 handleDetail = async (row?: ChurukudanVO) => {
-const editForm = ref({});
+    if (!row?.id) {
-const editFormRef = ref(null);
+        proxy?.$modal.msgWarning("请选择要查看详情的数据");
-
+        return;
-// 详情弹窗相关状态
+    }
-const detailDialogVisible = ref(false);
+    try {
-const currentRow = ref({});
+        const res = await getChurukudan(row.id);
-const getStatusTagType = (status) => {
+        detailData.value = res.data || {} as ChurukudanVO;
-    if (status === '已完成') {
+        detailVisible.value = true;
-        return 'success'
+    } catch (error) {
-    } else if (status === '待审核') {
+        console.error('获取出入库单详情失败:', error);
-        return 'warning'
+        proxy?.$modal.msgError("获取详情失败，请稍后重试");
-    } else if (status === '已取消') {
-        return 'danger'
     }
-    return ''
 }
 
-// 处理编辑
+/** 删除按钮操作 */
-const handleEdit = (row) => {
+const handleDelete = async (row?: ChurukudanVO) => {
-    // 深拷贝当前行数据到编辑表单
+    const _ids = row?.id || ids.value;
-    editForm.value = JSON.parse(JSON.stringify(row));
+    if (!_ids || (_ids instanceof Array && _ids.length === 0)) {
-    editDialogVisible.value = true;
+        proxy?.$modal.msgWarning("请选择要删除的数据");
-};
+        return;
-
-// 保存编辑
-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(
+        const confirmed = await proxy?.$modal.confirm('是否确认删除运维-物资-出入库单管理编号为"' + _ids + '"的数据项？');
-            `确定要删除单据 ${row.formNumber} 吗？`,
+        if (!confirmed) return;
-            '确认删除',
+        loading.value = true;
-            {
+        await delChurukudan(_ids);
-                confirmButtonText: '确定',
+        proxy?.$modal.msgSuccess("删除成功");
-                cancelButtonText: '取消',
+        await getList();
-                type: 'warning',
-            }
-        );
-        // 模拟API调用
-        await mockApiCall();
-        ElMessage.success('删除成功');
-        // 这里应该刷新数据，但由于是模拟数据，暂时不处理
     } catch (error) {
-        if (error !== 'cancel') {
+        console.error('删除出入库单失败:', error);
-            ElMessage.error(error.message || '删除失败');
+        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>

src/views/materialManagement/spareParts.vue

@@ -156,156 +156,145 @@
                 </div>
             </div>
             <div style="margin-top: 30px;">
-                <div class="menu" style="background-color: #F2F2F2; padding: 20px;">
+                <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
-                    <el-row :gutter="30">
+                    :leave-active-class="proxy?.animate.searchAnimate.leave">
-                        <el-col :span="3">
+                    <div v-show="showSearch" class="mb-[10px]">
-                            <el-input placeholder="请输入备件名称"></el-input>
+                        <el-card shadow="hover">
-                        </el-col>
+                            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-                        <el-col :span="3">
+                                <!-- 第一排：输入框 -->
-                            <el-select placeholder="备件类别">
+                                <div style="width: 100%; margin-bottom: 10px;">
-                                <el-option v-for="option in wz_spareparts_type" :key="option.value" :label="option.label" :value="option.value" />
+                                    <el-form-item label="备件编号" prop="beijianNumber" style="margin-right: 20px;">
-                            </el-select>
+                                        <el-input v-model="queryParams.beijianNumber" placeholder="请输入备件编号" clearable
-                        </el-col>
+                                            @keyup.enter="handleQuery" />
-                        <el-col :span="3">
+                                    </el-form-item>
-                            <el-select placeholder="库存状态">
+                                    <el-form-item label="备件名称" prop="beijianName" style="margin-right: 20px;">
-                                <el-option v-for="option in wz_inventory_type" :key="option.value" :label="option.label" :value="option.value" />
+                                        <el-input v-model="queryParams.beijianName" placeholder="请输入备件名称" clearable
-                            </el-select>
+                                            @keyup.enter="handleQuery" />
-                        </el-col>
+                                    </el-form-item>
-                        <el-col :span="8">
+                                    <el-form-item label="规格型号" prop="guigexinghao">
-                            <el-button icon="search" type="primary">搜索</el-button>
+                                        <el-input v-model="queryParams.guigexinghao" placeholder="请输入规格型号" clearable
-                            <el-button icon="refresh">重置</el-button>
+                                            @keyup.enter="handleQuery" />
-                        </el-col>
+                                    </el-form-item>
-                    </el-row>
+                                </div>
-                </div>
+                                <!-- 第二排：下拉框和按钮 -->
-                <el-table :data="pagedTableData" border style="width: 100%;margin-top: 10px;">
+                                <div style="width: 100%;">
-                    <el-table-column prop="backupNumber" label="备件编号" align="center" />
+                                    <el-form-item label="设备类型" prop="shebeiType" style="margin-right: 20px;">
-                    <el-table-column prop="backupName" label="备件名称" align="center" />
+                                        <el-select v-model="queryParams.shebeiType" placeholder="请选择设备类型" clearable>
-                    <el-table-column prop="backType" label="备件类型" align="center" />
+                                            <el-option v-for="dict in wz_device_type" :key="dict.value"
-                    <el-table-column prop="specificationModel" label="规格型号" align="center" />
+                                                :label="dict.label" :value="dict.value" />
-                    <el-table-column prop="safetyStockStatus" label="安全库存数量" align="center" />
+                                        </el-select>
-                    <el-table-column prop="inventoryQuantity" label="库存数量" align="center" />
+                                    </el-form-item>
-                    <el-table-column label="库存状态" align="center">
+                                    <el-form-item label="库存状态" prop="kucunStatus" style="margin-right: 20px;">
+                                        <el-select v-model="queryParams.kucunStatus" placeholder="请选择库存状态" clearable>
+                                            <el-option v-for="dict in wz_inventory_type" :key="dict.value"
+                                                :label="dict.label" :value="dict.value" />
+                                        </el-select>
+                                    </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>
+                                </div>
+                            </el-form>
+                        </el-card>
+                    </div>
+                </transition>
+                <el-table v-loading="loading" border :data="beipinBeijianList" style="width: 100%;margin-top: 10px;">
+                    <el-table-column label="备件编号" align="center" prop="beijianNumber" />
+                    <el-table-column label="备件名称" align="center" prop="beijianName" />
+                    <el-table-column label="设备类型" align="center" prop="shebeiType">
                         <template #default="scope">
-                            <el-tag :type="getTagType(scope.row.inventoryStatus)">
+                            {{ getDictLabel(wz_device_type, scope.row.shebeiType) }}
-                                {{ scope.row.inventoryStatus }}
-                            </el-tag>
                         </template>
                     </el-table-column>
-                    <el-table-column label="操作" align="center">
+                    <el-table-column label="规格型号" align="center" prop="guigexinghao" />
+                    <el-table-column label="库存数量" align="center" prop="kucunCount" />
+                    <el-table-column label="库存状态" align="center" prop="kucunStatus">
                         <template #default="scope">
-                            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
+                            <dict-tag :options="wz_inventory_type" :value="scope.row.kucunStatus"></dict-tag>
-                            <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
+                        </template>
-                            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
+                    </el-table-column>
+                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                        <template #default="scope">
+                            <el-button type="text" @click="handleUpdate(scope.row)"
+                                v-hasPermi="['personnel:beipinBeijian:edit']">编辑</el-button>
+                            <el-button type="text" @click="handleDetail(scope.row)"
+                                v-hasPermi="['personnel:beipinBeijian:query']">详情</el-button>
+                            <el-button type="text" @click="handleDelete(scope.row)"
+                                v-hasPermi="['personnel:beipinBeijian:remove']">删除</el-button>
                         </template>
                     </el-table-column>
                 </el-table>
                 <div class="pagination-section">
                     <div class="pagination-info">
-                        显示第{{ (currentPage - 1) * pageSize + 1 }}到{{ Math.min(currentPage * pageSize, total) }}条，共有{{
+                        显示第{{ (data.queryParams.pageNum - 1) * data.queryParams.pageSize + 1 }}到{{ Math.min(data.queryParams.pageNum * data.queryParams.pageSize, total) }}条，共有{{
                             total }}条记录
                     </div>
                     <div class="pagination-controls">
-                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                          <pagination v-show="total > 0" :total="total" v-model:page="data.queryParams.pageNum"
-                            :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
+                              v-model:limit="data.queryParams.pageSize" @pagination="getList" />
-                            layout="total, sizes, prev, pager, next, jumper" :total="total" background>
-                        </el-pagination>
                     </div>
                 </div>
             </div>
         </el-card>
 
         <!-- 编辑弹窗 -->
-        <el-dialog
+        <el-dialog title="编辑备件信息" v-model="dialog.visible" width="50%" append-to-body>
-            v-model="editDialogVisible"
+            <el-form ref="beipinBeijianFormRef" :model="form" :rules="rules" label-width="120px"
-            title="编辑备件信息"
+                style="max-width: 600px;">
-            width="50%"
+                <el-form-item label="备件编号" prop="beijianNumber">
-            @close="handleEditClose"
+                    <el-input v-model="form.beijianNumber" placeholder="请输入备件编号" />
-        >
-            <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-form-item label="备件名称" prop="beijianName">
-                    <el-input v-model="editForm.backupName" />
+                    <el-input v-model="form.beijianName" placeholder="请输入备件名称" />
                 </el-form-item>
-                <el-form-item label="备件类型" prop="backType">
+                <el-form-item label="规格型号" prop="guigexinghao">
-                    <el-input v-model="editForm.backType" />
+                    <el-input v-model="form.guigexinghao" placeholder="请输入规格型号" />
                 </el-form-item>
-                <el-form-item label="规格型号" prop="specificationModel">
+                <el-form-item label="库存数量" prop="kucunCount">
-                    <el-input v-model="editForm.specificationModel" />
+                    <el-input v-model="form.kucunCount" placeholder="请输入库存数量" />
                 </el-form-item>
-                <el-form-item label="库存状态" prop="inventoryStatus">
+                <el-form-item label="库存状态" prop="kucunStatus">
-                    <el-select v-model="editForm.inventoryStatus">
+                    <el-select v-model="form.kucunStatus" placeholder="请选择库存状态">
-                         <el-option v-for="option in wz_inventory_type" :key="option.value" :label="option.label" :value="option.value" />
+                        <el-option v-for="dict in wz_inventory_type" :key="dict.value" :label="dict.label"
+                            :value="dict.value"></el-option>
                     </el-select>
                 </el-form-item>
-                <el-form-item label="库存数量" prop="inventoryQuantity">
+                <el-form-item label="设备类型" prop="shebeiType">
-                    <el-input v-model="editForm.inventoryQuantity" />
+                    <el-select v-model="form.shebeiType" placeholder="请选择设备类型">
-                </el-form-item>
+                        <el-option v-for="dict in wz_device_type" :key="dict.value" :label="dict.label"
-                <el-form-item label="安全库存数量" prop="safetyStockStatus">
+                            :value="dict.value"></el-option>
-                    <el-input v-model="editForm.safetyStockStatus" />
+                    </el-select>
                 </el-form-item>
             </el-form>
             <template #footer>
-                <span class="dialog-footer">
+                <div class="dialog-footer">
-                    <el-button @click="editDialogVisible = false">取消</el-button>
+                    <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
-                    <el-button type="primary" @click="saveEdit">保存</el-button>
+                    <el-button @click="cancel">取 消</el-button>
-                </span>
+                </div>
             </template>
         </el-dialog>
 
         <!-- 详情弹窗 -->
-        <el-dialog
+        <el-dialog title="备件详情" v-model="detailDialogVisible" width="50%" append-to-body>
-            v-model="detailDialogVisible"
+            <el-descriptions :column="2" border>
-            title="备件详情"
+                <el-descriptions-item label="备件编号">{{ detailData.beijianNumber }}</el-descriptions-item>
-            width="50%"
+                <el-descriptions-item label="备件名称">{{ detailData.beijianName }}</el-descriptions-item>
-            @close="handleDetailClose"
+                <el-descriptions-item label="规格型号">{{ detailData.guigexinghao }}</el-descriptions-item>
-        >
+                <el-descriptions-item label="设备类型">{{ getDictLabel(wz_device_type, detailData.shebeiType)
-            <div class="detail-container">
+                    }}</el-descriptions-item>
-                <div class="detail-item">
+                <el-descriptions-item label="库存数量">{{ detailData.kucunCount }}</el-descriptions-item>
-                    <div class="detail-label">备件编号：</div>
+                <el-descriptions-item label="库存状态">
-                    <div class="detail-value">{{ currentRow.backupNumber }}</div>
+                    <dict-tag :options="wz_inventory_type" :value="detailData.kucunStatus"></dict-tag>
-                </div>
+                </el-descriptions-item>
-                <div class="detail-item">
+            </el-descriptions>
-                    <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">
+                <div class="dialog-footer">
-                    <el-button @click="detailDialogVisible = false">关闭</el-button>
+                    <el-button @click="closeDetailDialog">关 闭</el-button>
-                </span>
+                </div>
             </template>
         </el-dialog>
+
     </div>
 </template>
 <style scoped lang="scss">
@@ -409,245 +398,257 @@
 </style>
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import TitleComponent from '@/components/TitleComponent';
+import TitleComponent from '@/components/TitleComponent/index.vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
+
+
+// 导入用户store
+import { useUserStore } from '@/store/modules/user';
+// 获取用户store
+const userStore = useUserStore();
+
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { wz_inventory_type,wz_spareparts_type} = toRefs<any>(proxy?.useDict('wz_inventory_type','wz_spareparts_type'));
+
+import { listBeipinBeijian, getBeipinBeijian, delBeipinBeijian, updateBeipinBeijian } from '@/api/wuziguanli/beijian';
+import { BeipinBeijianVO, BeipinBeijianQuery, BeipinBeijianForm } from '@/api/wuziguanli/beijian/types';
 
 
-// 计算属性：根据当前页码和每页条数获取分页后的数据
+const { wz_inventory_type, wz_device_type } = toRefs<any>(proxy?.useDict('wz_inventory_type', 'wz_spareparts_type', 'wz_device_type'));
-const tableData = ref([
+
-    {
+const beipinBeijianList = ref<BeipinBeijianVO[]>([]);
-        backupNumber: 'SOL-2023-001',
+const buttonLoading = ref(false);
-        backupName: '光伏逆变器模块',
+const loading = ref(true);
-        backType: '光伏设备',
+const showSearch = ref(true);
-        specificationModel: 'SGGKTL-M',
+const ids = ref<Array<string | number>>([]);
-        inventoryStatus: '正常',
+const total = ref(0);
-        inventoryQuantity: '5个',
+// 详情相关数据
-        safetyStockStatus: '12个'
+const detailData = ref<BeipinBeijianVO>({
-    },
+    id: undefined,
-    {
+    projectId: undefined,
-        backupNumber: 'SOL-2023-001',
+    beijianNumber: undefined,
-        backupName: '光伏逆变器模块',
+    beijianName: undefined,
-        backType: '光伏设备',
+    shebeiType: undefined,
-        specificationModel: 'SGGKTL-M',
+    guigexinghao: undefined,
-        inventoryStatus: '正常',
+    kucunStatus: undefined,
-        inventoryQuantity: '5个',
+    kucunCount: undefined,
-        safetyStockStatus: '12个'
-    },
-    {
-        backupNumber: 'SOL-2023-001',
-        backupName: '光伏逆变器模块',
-        backType: '光伏设备',
-        specificationModel: 'SGGKTL-M',
-        inventoryStatus: '正常',
-        inventoryQuantity: '5个',
-        safetyStockStatus: '12个'
-    },
-    {
-        backupNumber: 'SOL-2023-001',
-        backupName: '光伏逆变器模块',
-        backType: '光伏设备',
-        specificationModel: 'SGGKTL-M',
-        inventoryStatus: '正常',
-        inventoryQuantity: '5个',
-        safetyStockStatus: '12个'
-    },
-    {
-        backupNumber: 'WIN-2023-045',
-        backupName: '风力发电机轴承',
-        backType: '风电设备',
-        specificationModel: '6318-2RS1/C3',
-        inventoryStatus: '低库存',
-        inventoryQuantity: '5套',
-        safetyStockStatus: '3套'
-    },
-    {
-        backupNumber: 'SOL-2023-001',
-        backupName: '光伏逆变器模块',
-        backType: '光伏设备',
-        specificationModel: 'SGGKTL-M',
-        inventoryStatus: '正常',
-        inventoryQuantity: '5个',
-        safetyStockStatus: '12个'
-    },
-    {
-        backupNumber: 'WIN-2023-045',
-        backupName: '风力发电机轴承',
-        backType: '风电设备',
-        specificationModel: '6318-2RS1/C3',
-        inventoryStatus: '低库存',
-        inventoryQuantity: '5套',
-        safetyStockStatus: '3套'
-    },
-    {
-        backupNumber: 'WIN-2023-045',
-        backupName: '风力发电机轴承',
-        backType: '风电设备',
-        specificationModel: '6318-2RS1/C3',
-        inventoryStatus: '缺货',
-        inventoryQuantity: '2套',
-        safetyStockStatus: '0套'
-    },
-    {
-        backupNumber: 'WIN-2023-045',
-        backupName: '风力发电机轴承',
-        backType: '风电设备',
-        specificationModel: '6318-2RS1/C3',
-        inventoryStatus: '低库存',
-        inventoryQuantity: '5套',
-        safetyStockStatus: '3套'
-    },
-    {
-        backupNumber: 'WIN-2023-045',
-        backupName: '风力发电机轴承',
-        backType: '风电设备',
-        specificationModel: '6318-2RS1/C3',
-        inventoryStatus: '低库存',
-        inventoryQuantity: '5套',
-        safetyStockStatus: '3套'
-    },
-    {
-        backupNumber: 'WIN-2023-045',
-        backupName: '风力发电机轴承',
-        backType: '风电设备',
-        specificationModel: '6318-2RS1/C3',
-        inventoryStatus: '3套',
-        inventoryQuantity: '5套',
-        safetyStockStatus: '低库存'
-    }
-])
-// 当前页码
-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 detailDialogVisible = ref(false);
-const handleCurrentChange = (val) => {
-    currentPage.value = val;
-};
 
-// 根据安全库存状态获取标签类型
+const queryFormRef = ref<ElFormInstance>();
-const getTagType = (status) => {
+const beipinBeijianFormRef = ref<ElFormInstance>();
-    if (status === '正常') {
+
-        return 'success'
+const dialog = reactive<DialogOption>({
-    } else if (status === '低库存') {
+    visible: false,
-        return 'warning'
+    title: ''
-    } else if (status === '缺货') {
+});
-        return 'danger'
+
-    }
+const initFormData: BeipinBeijianForm = {
-    return ''
+    id: undefined,
+    projectId: undefined,
+    beijianNumber: undefined,
+    beijianName: undefined,
+    shebeiType: undefined,
+    guigexinghao: undefined,
+    kucunStatus: undefined,
+    kucunCount: undefined,
 }
 
-// 编辑相关状态
+const data = reactive<PageData<BeipinBeijianForm, BeipinBeijianQuery>>({
-const editDialogVisible = ref(false);
+    form: { ...initFormData },
-const editForm = ref({
+    queryParams: {
-    backupNumber: '',
+        pageNum: 1,
-    backupName: '',
+        pageSize: 10,
-    backType: '',
+        projectId: undefined,
-    specificationModel: '',
+        beijianNumber: undefined,
-    inventoryStatus: '',
+        beijianName: undefined,
-    inventoryQuantity: '',
+        shebeiType: undefined,
-    safetyStockStatus: ''
+        guigexinghao: undefined,
-});
+        kucunStatus: undefined,
-const editFormRef = ref(null);
+        kucunCount: undefined,
-
+        params: {
-// 详情相关状态
+        }
-const detailDialogVisible = ref(false);
+    },
-const currentRow = ref({
+    rules: {
-    backupNumber: '',
+        beijianName: [
-    backupName: '',
+            { required: true, message: "备件名称不能为空", trigger: "blur" }
-    backType: '',
+        ],
-    specificationModel: '',
+        shebeiType: [
-    inventoryStatus: '',
+            { required: true, message: "设备类型不能为空", trigger: "change" }
-    inventoryQuantity: '',
+        ],
-    safetyStockStatus: ''
+        guigexinghao: [
+            { required: true, message: "规格型号不能为空", trigger: "blur" }
+        ],
+        kucunStatus: [
+            { required: true, message: "库存状态不能为空", trigger: "change" }
+        ],
+        kucunCount: [
+            { required: true, message: "库存数量不能为空", trigger: "blur" }
+        ],
+    }
 });
 
-// 模拟API调用函数
+const { queryParams, form, rules } = toRefs(data);
-const mockApiCall = (success = true) => {
+
-    return new Promise((resolve, reject) => {
+// 根据字典值获取标签信息的辅助函数
-        setTimeout(() => {
+const getDictLabel = (dictType, value) => {
-            if (success) {
+    // 健壮性检查
-                resolve({ success: true });
+    if (!value || !dictType || !Array.isArray(dictType)) {
-            } else {
+        return value;
-                reject({ success: false, message: '操作失败，请稍后重试' });
+    }
+
+    // 使用find方法更高效地查找匹配项
+    const option = dictType.find(item => item?.value === value);
+
+    // 如果找到匹配项，返回标签，否则返回原始值
+    return option?.label || value;
+};
+
+/** 查询运维-物资-备品配件列表 */
+const getList = async () => {
+    loading.value = true;
+    try {
+        const res = await listBeipinBeijian(queryParams.value);
+        beipinBeijianList.value = res.rows;
+        total.value = res.total;
+    } catch (error) {
+        proxy?.$modal.msgError('获取数据失败，请重试');
+        console.error('获取备品配件列表失败:', error);
+    } finally {
+        loading.value = false;
+    }
+}
+
+/** 取消按钮 */
+const cancel = () => {
+    reset();
+    dialog.visible = false;
+}
+
+/** 表单重置 */
+const reset = () => {
+    form.value = { ...initFormData };
+    beipinBeijianFormRef.value?.resetFields();
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+    queryParams.value.pageNum = 1;
+    getList();
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+    queryFormRef.value?.resetFields();
+    handleQuery();
+}
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: BeipinBeijianVO) => {
+    reset();
+    const _id = row?.id || ids.value[0];
+    if (!_id) {
+        proxy?.$modal.msgWarning('请选择需要编辑的数据');
+        return;
+    }
+    try {
+        const res = await getBeipinBeijian(_id);
+        Object.assign(form.value, res.data);
+        dialog.visible = true;
+    } catch (error) {
+        proxy?.$modal.msgError('获取数据失败，请重试');
+        console.error('获取备品配件详情失败:', error);
+    }
+}
+
+/** 详情按钮操作 */
+const handleDetail = async (row?: BeipinBeijianVO) => {
+    const _id = row?.id || ids.value[0];
+    if (!_id) {
+        proxy?.$modal.msgWarning('请选择需要查看的数据');
+        return;
+    }
+    try {
+        const res = await getBeipinBeijian(_id);
+        detailData.value = res.data;
+        detailDialogVisible.value = true;
+    } catch (error) {
+        proxy?.$modal.msgError('获取数据失败，请重试');
+        console.error('获取备品配件详情失败:', error);
+    }
+}
+
+/** 关闭详情弹窗 */
+const closeDetailDialog = () => {
+    detailDialogVisible.value = false;
+}
+
+/** 提交按钮 */
+const submitForm = () => {
+    beipinBeijianFormRef.value?.validate(async (valid: boolean) => {
+        if (valid) {
+            buttonLoading.value = true;
+            try {
+                if (form.value.id) {
+                    await updateBeipinBeijian(form.value);
+                }
+                proxy?.$modal.msgSuccess("操作成功");
+                dialog.visible = false;
+                await getList();
+            } catch (error) {
+                proxy?.$modal.msgError('操作失败，请重试');
+                console.error('提交表单失败:', error);
+            } finally {
+                buttonLoading.value = false;
             }
-        }, 500);
+        }
     });
-};
+}
 
-// 编辑操作方法
+/** 删除按钮操作 */
-const handleEdit = (row) => {
+const handleDelete = async (row?: BeipinBeijianVO) => {
-    // 深拷贝当前行数据到编辑表单
+    const _ids = row?.id || ids.value;
-    editForm.value = JSON.parse(JSON.stringify(row));
+    if (!_ids || (_ids instanceof Array && _ids.length === 0)) {
-    editDialogVisible.value = true;
+        proxy?.$modal.msgWarning('请选择需要删除的数据');
-};
+        return;
-
-// 保存编辑
-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) => {
-    currentRow.value = row;
-    detailDialogVisible.value = true;
-};
-
-// 关闭详情弹窗
-const handleDetailClose = () => {
-    currentRow.value = {};
-};
-
-// 删除操作方法
-const handleDelete = async (row) => {
     try {
-        await ElMessageBox.confirm(
+        await proxy?.$modal.confirm('是否确认删除运维-物资-备品配件编号为"' + _ids + '"的数据项？');
-            `确定要删除备件 ${row.backupName} 吗？`,
+        loading.value = true;
-            '确认删除',
+        await delBeipinBeijian(_ids);
-            {
+        proxy?.$modal.msgSuccess("删除成功");
-                confirmButtonText: '确定',
+        await getList();
-                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 || '删除失败');
+            proxy?.$modal.msgError('删除失败，请重试');
+            console.error('删除数据失败:', error);
         }
+    } finally {
+        loading.value = false;
     }
-};
+}
+
+
+// 监听用户选择的项目变化
+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();
+    }
+}, { immediate: true, deep: true });
+
+
+onMounted(() => {
+    getList();
+});
+
+// 组件卸载时清空projectId
+onUnmounted(() => {
+    queryParams.value.projectId = undefined;
+    form.value.projectId = undefined;
+});
 </script>