feat(物资管理): 新增备品配件和出入库单管理功能
实现备品配件管理模块，包括列表展示、搜索、新增、编辑、删除功能 完成出入库单管理功能，支持单据类型切换、搜索筛选和增删改查操作 添加数据统计图表展示出入库情况 优化表单验证和错误处理逻辑
This commit is contained in:
re-JZzzz
@ -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 = '/'
|
||||
|
||||
63
src/api/wuziguanli/beijian/index.ts
Normal file
63
src/api/wuziguanli/beijian/index.ts
Normal file
@ -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'
|
||||
});
|
||||
};
|
||||
131
src/api/wuziguanli/beijian/types.ts
Normal file
131
src/api/wuziguanli/beijian/types.ts
Normal file
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
76
src/api/wuziguanli/churuku/index.ts
Normal file
76
src/api/wuziguanli/churuku/index.ts
Normal file
@ -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
|
||||
});
|
||||
};
|
||||
154
src/api/wuziguanli/churuku/types.ts
Normal file
154
src/api/wuziguanli/churuku/types.ts
Normal file
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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>
|
||||
<!-- 第一排：四个输入项 -->
|
||||
<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>
|
||||
<div style="margin-top: 10px;">
|
||||
<el-button type="primary" @click="dialogVisible = true;">+{{ type === 'chuku' ? '添加出库单'
|
||||
</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;
|
||||
};
|
||||
|
||||
// 每页条数改变
|
||||
const handleSizeChange = (val) => {
|
||||
pageSize.value = val;
|
||||
currentPage.value = 1;
|
||||
};
|
||||
|
||||
// 模拟API调用函数
|
||||
const mockApiCall = (success = true) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
if (success) {
|
||||
resolve({ success: true });
|
||||
} else {
|
||||
reject({ success: false, message: '操作失败，请稍后重试' });
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
// 更新查询参数
|
||||
queryParams.value.pageNum = 1;
|
||||
queryParams.value.danjvType = newType === 'chuku' ? '1' : '2';
|
||||
// 重新加载数据
|
||||
getList();
|
||||
}
|
||||
|
||||
// 编辑弹窗相关状态
|
||||
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'
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
// 处理编辑
|
||||
const handleEdit = (row) => {
|
||||
// 深拷贝当前行数据到编辑表单
|
||||
editForm.value = JSON.parse(JSON.stringify(row));
|
||||
editDialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 保存编辑
|
||||
const saveEdit = async () => {
|
||||
try {
|
||||
// 模拟API调用
|
||||
await mockApiCall();
|
||||
editDialogVisible.value = false;
|
||||
ElMessage.success('编辑成功');
|
||||
// 这里应该刷新数据，但由于是模拟数据，暂时不处理
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '编辑失败');
|
||||
}
|
||||
};
|
||||
|
||||
// 关闭编辑弹窗
|
||||
const handleEditClose = () => {
|
||||
// 重置表单
|
||||
editForm.value = {};
|
||||
if (editFormRef.value) {
|
||||
editFormRef.value.resetFields();
|
||||
}
|
||||
};
|
||||
|
||||
// 处理详情
|
||||
const handleDetail = (row) => {
|
||||
currentRow.value = row;
|
||||
detailDialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 关闭详情弹窗
|
||||
const handleDetailClose = () => {
|
||||
currentRow.value = {};
|
||||
};
|
||||
|
||||
// 处理删除
|
||||
const handleDelete = async (row) => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除单据 ${row.formNumber} 吗？`,
|
||||
'确认删除',
|
||||
// 单据类型
|
||||
const danjvType = ref([
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
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'
|
||||
}
|
||||
);
|
||||
// 模拟API调用
|
||||
await mockApiCall();
|
||||
ElMessage.success('删除成功');
|
||||
// 这里应该刷新数据，但由于是模拟数据，暂时不处理
|
||||
])
|
||||
// 根据字典数组和值获取标签类型
|
||||
const getTagType = (dictArray: any[], value: any): string => {
|
||||
if (!dictArray || !value) return '';
|
||||
const item = dictArray.find(item => item.value === value);
|
||||
return item?.type || '';
|
||||
}
|
||||
|
||||
// 根据字典数组和值获取标签文本
|
||||
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) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error(error.message || '删除失败');
|
||||
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;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 详情按钮操作 */
|
||||
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("获取详情失败，请稍后重试");
|
||||
}
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: ChurukudanVO) => {
|
||||
const _ids = row?.id || ids.value;
|
||||
if (!_ids || (_ids instanceof Array && _ids.length === 0)) {
|
||||
proxy?.$modal.msgWarning("请选择要删除的数据");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const confirmed = await proxy?.$modal.confirm('是否确认删除运维-物资-出入库单管理编号为"' + _ids + '"的数据项？');
|
||||
if (!confirmed) return;
|
||||
loading.value = true;
|
||||
await delChurukudan(_ids);
|
||||
proxy?.$modal.msgSuccess("删除成功");
|
||||
await getList();
|
||||
} catch (error) {
|
||||
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>
|
||||
@ -156,156 +156,145 @@
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<div class="menu" style="background-color: #F2F2F2; padding: 20px;">
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="3">
|
||||
<el-input placeholder="请输入备件名称"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-select placeholder="备件类别">
|
||||
<el-option v-for="option in wz_spareparts_type" :key="option.value" :label="option.label" :value="option.value" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-select placeholder="库存状态">
|
||||
<el-option v-for="option in wz_inventory_type" :key="option.value" :label="option.label" :value="option.value" />
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-button icon="search" type="primary">搜索</el-button>
|
||||
<el-button icon="refresh">重置</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<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">
|
||||
<!-- 第一排：输入框 -->
|
||||
<div style="width: 100%; margin-bottom: 10px;">
|
||||
<el-form-item label="备件编号" prop="beijianNumber" style="margin-right: 20px;">
|
||||
<el-input v-model="queryParams.beijianNumber" placeholder="请输入备件编号" clearable
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备件名称" prop="beijianName" style="margin-right: 20px;">
|
||||
<el-input v-model="queryParams.beijianName" placeholder="请输入备件名称" clearable
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格型号" prop="guigexinghao">
|
||||
<el-input v-model="queryParams.guigexinghao" placeholder="请输入规格型号" clearable
|
||||
@keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-table :data="pagedTableData" border style="width: 100%;margin-top: 10px;">
|
||||
<el-table-column prop="backupNumber" label="备件编号" align="center" />
|
||||
<el-table-column prop="backupName" label="备件名称" align="center" />
|
||||
<el-table-column prop="backType" label="备件类型" align="center" />
|
||||
<el-table-column prop="specificationModel" label="规格型号" align="center" />
|
||||
<el-table-column prop="safetyStockStatus" label="安全库存数量" align="center" />
|
||||
<el-table-column prop="inventoryQuantity" label="库存数量" align="center" />
|
||||
<el-table-column label="库存状态" align="center">
|
||||
<!-- 第二排：下拉框和按钮 -->
|
||||
<div style="width: 100%;">
|
||||
<el-form-item label="设备类型" prop="shebeiType" style="margin-right: 20px;">
|
||||
<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="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)">
|
||||
{{ scope.row.inventoryStatus }}
|
||||
</el-tag>
|
||||
{{ getDictLabel(wz_device_type, scope.row.shebeiType) }}
|
||||
</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>
|
||||
<el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
|
||||
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
|
||||
<dict-tag :options="wz_inventory_type" :value="scope.row.kucunStatus"></dict-tag>
|
||||
</template>
|
||||
</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"
|
||||
: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="data.queryParams.pageNum"
|
||||
v-model:limit="data.queryParams.pageSize" @pagination="getList" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 编辑弹窗 -->
|
||||
<el-dialog
|
||||
v-model="editDialogVisible"
|
||||
title="编辑备件信息"
|
||||
width="50%"
|
||||
@close="handleEditClose"
|
||||
>
|
||||
<el-form
|
||||
ref="editFormRef"
|
||||
:model="editForm"
|
||||
label-width="120px"
|
||||
style="max-width: 600px;"
|
||||
>
|
||||
<el-form-item label="备件编号" prop="backupNumber">
|
||||
<el-input v-model="editForm.backupNumber" disabled />
|
||||
<el-dialog title="编辑备件信息" v-model="dialog.visible" width="50%" append-to-body>
|
||||
<el-form ref="beipinBeijianFormRef" :model="form" :rules="rules" label-width="120px"
|
||||
style="max-width: 600px;">
|
||||
<el-form-item label="备件编号" prop="beijianNumber">
|
||||
<el-input v-model="form.beijianNumber" placeholder="请输入备件编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备件名称" prop="backupName">
|
||||
<el-input v-model="editForm.backupName" />
|
||||
<el-form-item label="备件名称" prop="beijianName">
|
||||
<el-input v-model="form.beijianName" placeholder="请输入备件名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备件类型" prop="backType">
|
||||
<el-input v-model="editForm.backType" />
|
||||
<el-form-item label="规格型号" prop="guigexinghao">
|
||||
<el-input v-model="form.guigexinghao" placeholder="请输入规格型号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格型号" prop="specificationModel">
|
||||
<el-input v-model="editForm.specificationModel" />
|
||||
<el-form-item label="库存数量" prop="kucunCount">
|
||||
<el-input v-model="form.kucunCount" placeholder="请输入库存数量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库存状态" prop="inventoryStatus">
|
||||
<el-select v-model="editForm.inventoryStatus">
|
||||
<el-option v-for="option in wz_inventory_type" :key="option.value" :label="option.label" :value="option.value" />
|
||||
<el-form-item label="库存状态" prop="kucunStatus">
|
||||
<el-select v-model="form.kucunStatus" placeholder="请选择库存状态">
|
||||
<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-input v-model="editForm.inventoryQuantity" />
|
||||
</el-form-item>
|
||||
<el-form-item label="安全库存数量" prop="safetyStockStatus">
|
||||
<el-input v-model="editForm.safetyStockStatus" />
|
||||
<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>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEdit">保存</el-button>
|
||||
</span>
|
||||
<div class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<el-dialog
|
||||
v-model="detailDialogVisible"
|
||||
title="备件详情"
|
||||
width="50%"
|
||||
@close="handleDetailClose"
|
||||
>
|
||||
<div class="detail-container">
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">备件编号：</div>
|
||||
<div class="detail-value">{{ currentRow.backupNumber }}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">备件名称：</div>
|
||||
<div class="detail-value">{{ currentRow.backupName }}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">备件类型：</div>
|
||||
<div class="detail-value">{{ currentRow.backType }}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">规格型号：</div>
|
||||
<div class="detail-value">{{ currentRow.specificationModel }}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">库存状态：</div>
|
||||
<div class="detail-value">
|
||||
<el-tag :type="getTagType(currentRow.inventoryStatus)">
|
||||
{{ currentRow.inventoryStatus }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">库存数量：</div>
|
||||
<div class="detail-value">{{ currentRow.inventoryQuantity }}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="detail-label">安全库存数量：</div>
|
||||
<div class="detail-value">{{ currentRow.safetyStockStatus }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog title="备件详情" v-model="detailDialogVisible" width="50%" append-to-body>
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="备件编号">{{ detailData.beijianNumber }}</el-descriptions-item>
|
||||
<el-descriptions-item label="备件名称">{{ detailData.beijianName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="规格型号">{{ detailData.guigexinghao }}</el-descriptions-item>
|
||||
<el-descriptions-item label="设备类型">{{ getDictLabel(wz_device_type, detailData.shebeiType)
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="库存数量">{{ detailData.kucunCount }}</el-descriptions-item>
|
||||
<el-descriptions-item label="库存状态">
|
||||
<dict-tag :options="wz_inventory_type" :value="detailData.kucunStatus"></dict-tag>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="detailDialogVisible = false">关闭</el-button>
|
||||
</span>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closeDetailDialog">关 闭</el-button>
|
||||
</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 { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import TitleComponent from '@/components/TitleComponent/index.vue';
|
||||
|
||||
|
||||
// 导入用户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 tableData = ref([
|
||||
{
|
||||
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: '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 { wz_inventory_type, wz_device_type } = toRefs<any>(proxy?.useDict('wz_inventory_type', 'wz_spareparts_type', 'wz_device_type'));
|
||||
|
||||
const beipinBeijianList = ref<BeipinBeijianVO[]>([]);
|
||||
const buttonLoading = ref(false);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref<Array<string | number>>([]);
|
||||
const total = ref(0);
|
||||
// 详情相关数据
|
||||
const detailData = ref<BeipinBeijianVO>({
|
||||
id: undefined,
|
||||
projectId: undefined,
|
||||
beijianNumber: undefined,
|
||||
beijianName: undefined,
|
||||
shebeiType: undefined,
|
||||
guigexinghao: undefined,
|
||||
kucunStatus: undefined,
|
||||
kucunCount: undefined,
|
||||
});
|
||||
// 当前页码改变
|
||||
const handleCurrentChange = (val) => {
|
||||
currentPage.value = val;
|
||||
};
|
||||
|
||||
// 根据安全库存状态获取标签类型
|
||||
const getTagType = (status) => {
|
||||
if (status === '正常') {
|
||||
return 'success'
|
||||
} else if (status === '低库存') {
|
||||
return 'warning'
|
||||
} else if (status === '缺货') {
|
||||
return 'danger'
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
// 编辑相关状态
|
||||
const editDialogVisible = ref(false);
|
||||
const editForm = ref({
|
||||
backupNumber: '',
|
||||
backupName: '',
|
||||
backType: '',
|
||||
specificationModel: '',
|
||||
inventoryStatus: '',
|
||||
inventoryQuantity: '',
|
||||
safetyStockStatus: ''
|
||||
});
|
||||
const editFormRef = ref(null);
|
||||
|
||||
// 详情相关状态
|
||||
const detailDialogVisible = ref(false);
|
||||
const currentRow = ref({
|
||||
backupNumber: '',
|
||||
backupName: '',
|
||||
backType: '',
|
||||
specificationModel: '',
|
||||
inventoryStatus: '',
|
||||
inventoryQuantity: '',
|
||||
safetyStockStatus: ''
|
||||
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const beipinBeijianFormRef = ref<ElFormInstance>();
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
|
||||
// 模拟API调用函数
|
||||
const mockApiCall = (success = true) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
if (success) {
|
||||
resolve({ success: true });
|
||||
} else {
|
||||
reject({ success: false, message: '操作失败，请稍后重试' });
|
||||
const initFormData: BeipinBeijianForm = {
|
||||
id: undefined,
|
||||
projectId: undefined,
|
||||
beijianNumber: undefined,
|
||||
beijianName: undefined,
|
||||
shebeiType: undefined,
|
||||
guigexinghao: undefined,
|
||||
kucunStatus: undefined,
|
||||
kucunCount: undefined,
|
||||
}
|
||||
|
||||
const data = reactive<PageData<BeipinBeijianForm, BeipinBeijianQuery>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
projectId: undefined,
|
||||
beijianNumber: undefined,
|
||||
beijianName: undefined,
|
||||
shebeiType: undefined,
|
||||
guigexinghao: undefined,
|
||||
kucunStatus: undefined,
|
||||
kucunCount: undefined,
|
||||
params: {
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
beijianName: [
|
||||
{ required: true, message: "备件名称不能为空", trigger: "blur" }
|
||||
],
|
||||
shebeiType: [
|
||||
{ required: true, message: "设备类型不能为空", trigger: "change" }
|
||||
],
|
||||
guigexinghao: [
|
||||
{ required: true, message: "规格型号不能为空", trigger: "blur" }
|
||||
],
|
||||
kucunStatus: [
|
||||
{ required: true, message: "库存状态不能为空", trigger: "change" }
|
||||
],
|
||||
kucunCount: [
|
||||
{ required: true, message: "库存数量不能为空", trigger: "blur" }
|
||||
],
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
// 根据字典值获取标签信息的辅助函数
|
||||
const getDictLabel = (dictType, value) => {
|
||||
// 健壮性检查
|
||||
if (!value || !dictType || !Array.isArray(dictType)) {
|
||||
return value;
|
||||
}
|
||||
|
||||
// 使用find方法更高效地查找匹配项
|
||||
const option = dictType.find(item => item?.value === value);
|
||||
|
||||
// 如果找到匹配项，返回标签，否则返回原始值
|
||||
return option?.label || value;
|
||||
};
|
||||
|
||||
// 编辑操作方法
|
||||
const handleEdit = (row) => {
|
||||
// 深拷贝当前行数据到编辑表单
|
||||
editForm.value = JSON.parse(JSON.stringify(row));
|
||||
editDialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 保存编辑
|
||||
const saveEdit = async () => {
|
||||
/** 查询运维-物资-备品配件列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
// 模拟API调用
|
||||
await mockApiCall();
|
||||
editDialogVisible.value = false;
|
||||
ElMessage.success('编辑成功');
|
||||
// 这里应该刷新数据，但由于是模拟数据，暂时不处理
|
||||
const res = await listBeipinBeijian(queryParams.value);
|
||||
beipinBeijianList.value = res.rows;
|
||||
total.value = res.total;
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '编辑失败');
|
||||
proxy?.$modal.msgError('获取数据失败，请重试');
|
||||
console.error('获取备品配件列表失败:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 关闭编辑弹窗
|
||||
const handleEditClose = () => {
|
||||
editForm.value = {};
|
||||
};
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
}
|
||||
|
||||
// 详情操作方法
|
||||
const handleDetail = (row) => {
|
||||
currentRow.value = row;
|
||||
/** 表单重置 */
|
||||
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;
|
||||
};
|
||||
|
||||
// 关闭详情弹窗
|
||||
const handleDetailClose = () => {
|
||||
currentRow.value = {};
|
||||
};
|
||||
|
||||
// 删除操作方法
|
||||
const handleDelete = async (row) => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除备件 ${row.backupName} 吗？`,
|
||||
'确认删除',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
);
|
||||
// 模拟API调用
|
||||
await mockApiCall();
|
||||
ElMessage.success('删除成功');
|
||||
// 从表格数据中移除该记录
|
||||
const index = tableData.value.findIndex(item => item.backupNumber === row.backupNumber);
|
||||
if (index !== -1) {
|
||||
tableData.value.splice(index, 1);
|
||||
total.value = tableData.value.length;
|
||||
// 如果删除的是当前页的最后一条数据，且当前页不是第一页，则切换到上一页
|
||||
if (pagedTableData.value.length === 0 && currentPage.value > 1) {
|
||||
currentPage.value--;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: BeipinBeijianVO) => {
|
||||
const _ids = row?.id || ids.value;
|
||||
if (!_ids || (_ids instanceof Array && _ids.length === 0)) {
|
||||
proxy?.$modal.msgWarning('请选择需要删除的数据');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await proxy?.$modal.confirm('是否确认删除运维-物资-备品配件编号为"' + _ids + '"的数据项？');
|
||||
loading.value = true;
|
||||
await delBeipinBeijian(_ids);
|
||||
proxy?.$modal.msgSuccess("删除成功");
|
||||
await getList();
|
||||
} 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>
|
||||
Reference in New Issue
Block a user