feat: 更新物料管理模块功能
1. 新增采购计划草稿存储功能 2. 优化出入库单和备件管理界面 3. 完善表单验证和交互逻辑 4. 调整表格列对齐方式 5. 移除冗余的审批备注字段 ps:出入口页面未完成
This commit is contained in:
re-JZzzz
@ -157,20 +157,18 @@
|
||||
</div>
|
||||
<div style="margin-top: 30px;">
|
||||
<div class="menu" style="background-color: #F2F2F2; padding: 20px;">
|
||||
<el-row gutter="30">
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="3">
|
||||
<el-input placeholder="请输入备件名称"></el-input>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<el-select placeholder="设备类型">
|
||||
</el-select>
|
||||
</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-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">
|
||||
@ -180,20 +178,20 @@
|
||||
</el-row>
|
||||
</div>
|
||||
<el-table :data="pagedTableData" border style="width: 100%;margin-top: 10px;">
|
||||
<el-table-column prop="backupNumber" label="备件编号" />
|
||||
<el-table-column prop="backupName" label="备件名称" />
|
||||
<el-table-column prop="equipmentType" label="设备类型" />
|
||||
<el-table-column prop="specificationModel" label="规格型号" />
|
||||
<el-table-column prop="inventoryStatus" label="库存状态" />
|
||||
<el-table-column prop="inventoryQuantity" label="库存数量" />
|
||||
<el-table-column label="安全库存">
|
||||
<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">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getTagType(scope.row.safetyStockStatus)">
|
||||
{{ scope.row.safetyStockStatus }}
|
||||
<el-tag :type="getTagType(scope.row.inventoryStatus)">
|
||||
{{ scope.row.inventoryStatus }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
|
||||
@ -215,6 +213,99 @@
|
||||
</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-form-item>
|
||||
<el-form-item label="备件名称" prop="backupName">
|
||||
<el-input v-model="editForm.backupName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备件类型" prop="backType">
|
||||
<el-input v-model="editForm.backType" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格型号" prop="specificationModel">
|
||||
<el-input v-model="editForm.specificationModel" />
|
||||
</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-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>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveEdit">保存</el-button>
|
||||
</span>
|
||||
</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>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="detailDialogVisible = false">关闭</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
@ -284,9 +375,44 @@
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 详情弹窗样式 */
|
||||
.detail-container {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
width: 120px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
flex: 1;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import TitleComponent from '@/components/TitleComponent';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { wz_inventory_type,wz_spareparts_type} = toRefs<any>(proxy?.useDict('wz_inventory_type','wz_spareparts_type'));
|
||||
|
||||
|
||||
// 计算属性：根据当前页码和每页条数获取分页后的数据
|
||||
@ -294,97 +420,97 @@ const tableData = ref([
|
||||
{
|
||||
backupNumber: 'SOL-2023-001',
|
||||
backupName: '光伏逆变器模块',
|
||||
equipmentType: '光伏设备',
|
||||
backType: '光伏设备',
|
||||
specificationModel: 'SGGKTL-M',
|
||||
inventoryStatus: '12个',
|
||||
inventoryStatus: '正常',
|
||||
inventoryQuantity: '5个',
|
||||
safetyStockStatus: '正常'
|
||||
safetyStockStatus: '12个'
|
||||
},
|
||||
{
|
||||
backupNumber: 'SOL-2023-001',
|
||||
backupName: '光伏逆变器模块',
|
||||
equipmentType: '光伏设备',
|
||||
backType: '光伏设备',
|
||||
specificationModel: 'SGGKTL-M',
|
||||
inventoryStatus: '12个',
|
||||
inventoryStatus: '正常',
|
||||
inventoryQuantity: '5个',
|
||||
safetyStockStatus: '正常'
|
||||
safetyStockStatus: '12个'
|
||||
},
|
||||
{
|
||||
backupNumber: 'SOL-2023-001',
|
||||
backupName: '光伏逆变器模块',
|
||||
equipmentType: '光伏设备',
|
||||
backType: '光伏设备',
|
||||
specificationModel: 'SGGKTL-M',
|
||||
inventoryStatus: '12个',
|
||||
inventoryStatus: '正常',
|
||||
inventoryQuantity: '5个',
|
||||
safetyStockStatus: '正常'
|
||||
safetyStockStatus: '12个'
|
||||
},
|
||||
{
|
||||
backupNumber: 'SOL-2023-001',
|
||||
backupName: '光伏逆变器模块',
|
||||
equipmentType: '光伏设备',
|
||||
backType: '光伏设备',
|
||||
specificationModel: 'SGGKTL-M',
|
||||
inventoryStatus: '12个',
|
||||
inventoryStatus: '正常',
|
||||
inventoryQuantity: '5个',
|
||||
safetyStockStatus: '正常'
|
||||
safetyStockStatus: '12个'
|
||||
},
|
||||
{
|
||||
backupNumber: 'WIN-2023-045',
|
||||
backupName: '风力发电机轴承',
|
||||
equipmentType: '风电设备',
|
||||
backType: '风电设备',
|
||||
specificationModel: '6318-2RS1/C3',
|
||||
inventoryStatus: '3套',
|
||||
inventoryStatus: '低库存',
|
||||
inventoryQuantity: '5套',
|
||||
safetyStockStatus: '低库存'
|
||||
safetyStockStatus: '3套'
|
||||
},
|
||||
{
|
||||
backupNumber: 'SOL-2023-001',
|
||||
backupName: '光伏逆变器模块',
|
||||
equipmentType: '光伏设备',
|
||||
backType: '光伏设备',
|
||||
specificationModel: 'SGGKTL-M',
|
||||
inventoryStatus: '12个',
|
||||
inventoryStatus: '正常',
|
||||
inventoryQuantity: '5个',
|
||||
safetyStockStatus: '正常'
|
||||
safetyStockStatus: '12个'
|
||||
},
|
||||
{
|
||||
backupNumber: 'WIN-2023-045',
|
||||
backupName: '风力发电机轴承',
|
||||
equipmentType: '风电设备',
|
||||
backType: '风电设备',
|
||||
specificationModel: '6318-2RS1/C3',
|
||||
inventoryStatus: '3套',
|
||||
inventoryStatus: '低库存',
|
||||
inventoryQuantity: '5套',
|
||||
safetyStockStatus: '低库存'
|
||||
safetyStockStatus: '3套'
|
||||
},
|
||||
{
|
||||
backupNumber: 'WIN-2023-045',
|
||||
backupName: '风力发电机轴承',
|
||||
equipmentType: '风电设备',
|
||||
backType: '风电设备',
|
||||
specificationModel: '6318-2RS1/C3',
|
||||
inventoryStatus: '0套',
|
||||
inventoryStatus: '缺货',
|
||||
inventoryQuantity: '2套',
|
||||
safetyStockStatus: '缺货'
|
||||
safetyStockStatus: '0套'
|
||||
},
|
||||
{
|
||||
backupNumber: 'WIN-2023-045',
|
||||
backupName: '风力发电机轴承',
|
||||
equipmentType: '风电设备',
|
||||
backType: '风电设备',
|
||||
specificationModel: '6318-2RS1/C3',
|
||||
inventoryStatus: '3套',
|
||||
inventoryStatus: '低库存',
|
||||
inventoryQuantity: '5套',
|
||||
safetyStockStatus: '低库存'
|
||||
safetyStockStatus: '3套'
|
||||
},
|
||||
{
|
||||
backupNumber: 'WIN-2023-045',
|
||||
backupName: '风力发电机轴承',
|
||||
equipmentType: '风电设备',
|
||||
backType: '风电设备',
|
||||
specificationModel: '6318-2RS1/C3',
|
||||
inventoryStatus: '3套',
|
||||
inventoryStatus: '低库存',
|
||||
inventoryQuantity: '5套',
|
||||
safetyStockStatus: '低库存'
|
||||
safetyStockStatus: '3套'
|
||||
},
|
||||
{
|
||||
backupNumber: 'WIN-2023-045',
|
||||
backupName: '风力发电机轴承',
|
||||
equipmentType: '风电设备',
|
||||
backType: '风电设备',
|
||||
specificationModel: '6318-2RS1/C3',
|
||||
inventoryStatus: '3套',
|
||||
inventoryQuantity: '5套',
|
||||
@ -419,21 +545,109 @@ const getTagType = (status) => {
|
||||
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: ''
|
||||
});
|
||||
|
||||
// 模拟API调用函数
|
||||
const mockApiCall = (success = true) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
if (success) {
|
||||
resolve({ success: true });
|
||||
} else {
|
||||
reject({ success: false, message: '操作失败，请稍后重试' });
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
};
|
||||
|
||||
// 编辑操作方法
|
||||
const handleEdit = (row) => {
|
||||
console.log('编辑', 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 = {};
|
||||
};
|
||||
|
||||
// 详情操作方法
|
||||
const handleDetail = (row) => {
|
||||
console.log('详情', row)
|
||||
// 这里可以编写查看详情的逻辑
|
||||
}
|
||||
currentRow.value = row;
|
||||
detailDialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 关闭详情弹窗
|
||||
const handleDetailClose = () => {
|
||||
currentRow.value = {};
|
||||
};
|
||||
|
||||
// 删除操作方法
|
||||
const handleDelete = (row) => {
|
||||
console.log('删除', row)
|
||||
// 这里可以编写删除的逻辑，比如提示确认删除，然后从表格数据中移除等
|
||||
}
|
||||
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) {
|
||||
if (error !== 'cancel') {
|
||||
ElMessage.error(error.message || '删除失败');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user