feat(物资管理): 新增备品配件和出入库单管理功能
实现备品配件管理模块，包括列表展示、搜索、新增、编辑、删除功能 完成出入库单管理功能，支持单据类型切换、搜索筛选和增删改查操作 添加数据统计图表展示出入库情况 优化表单验证和错误处理逻辑
This commit is contained in:
re-JZzzz
@ -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>
|
||||
</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">
|
||||
<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>
|
||||
<!-- 第二排：下拉框和按钮 -->
|
||||
<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 detailDialogVisible = ref(false);
|
||||
|
||||
// 根据安全库存状态获取标签类型
|
||||
const getTagType = (status) => {
|
||||
if (status === '正常') {
|
||||
return 'success'
|
||||
} else if (status === '低库存') {
|
||||
return 'warning'
|
||||
} else if (status === '缺货') {
|
||||
return 'danger'
|
||||
}
|
||||
return ''
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const beipinBeijianFormRef = ref<ElFormInstance>();
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
|
||||
const initFormData: BeipinBeijianForm = {
|
||||
id: undefined,
|
||||
projectId: undefined,
|
||||
beijianNumber: undefined,
|
||||
beijianName: undefined,
|
||||
shebeiType: undefined,
|
||||
guigexinghao: undefined,
|
||||
kucunStatus: undefined,
|
||||
kucunCount: undefined,
|
||||
}
|
||||
|
||||
// 编辑相关状态
|
||||
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 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" }
|
||||
],
|
||||
}
|
||||
});
|
||||
|
||||
// 模拟API调用函数
|
||||
const mockApiCall = (success = true) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
if (success) {
|
||||
resolve({ success: true });
|
||||
} else {
|
||||
reject({ success: false, message: '操作失败，请稍后重试' });
|
||||
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 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) => {
|
||||
// 深拷贝当前行数据到编辑表单
|
||||
editForm.value = JSON.parse(JSON.stringify(row));
|
||||
editDialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 保存编辑
|
||||
const saveEdit = async () => {
|
||||
try {
|
||||
// 模拟API调用
|
||||
await mockApiCall();
|
||||
editDialogVisible.value = false;
|
||||
ElMessage.success('编辑成功');
|
||||
// 这里应该刷新数据，但由于是模拟数据，暂时不处理
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '编辑失败');
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: BeipinBeijianVO) => {
|
||||
const _ids = row?.id || ids.value;
|
||||
if (!_ids || (_ids instanceof Array && _ids.length === 0)) {
|
||||
proxy?.$modal.msgWarning('请选择需要删除的数据');
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
// 关闭编辑弹窗
|
||||
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(
|
||||
`确定要删除备件 ${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--;
|
||||
}
|
||||
}
|
||||
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