duxingchen/KCGL
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: implement unified batch selection mode for clean table UI

Browse Source
This commit is contained in:
DXC
2026-03-17 13:13:28 +08:00
parent c1c494893f
commit 4857581963
1 changed files with 63 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
inventory-web/src/views/material/list.vue
View File

@ -118,44 +118,31 @@
<el-icon style="margin-right: 5px"><Download /></el-icon>导出库存统计
</el-button>
<!-- 批量设置预警按钮 (需要 edit_warning 权限) -->
<template v-if="userStore.hasPermission('material_list:edit_warning')">
<!-- 常规状态 -->
<!-- 批量操作按钮 (需要相应权限) -->
<template v-if="!isBatchMode">
<el-button
v-if="!isBatchMode"
v-if="userStore.hasPermission('material_list:edit_warning')"
type="warning"
plain
@click="enterBatchMode"
@click="enterBatchMode('warning')"
style="margin-right: 10px"
>
<el-icon style="margin-right: 5px"><Bell /></el-icon>批量设置预警
</el-button>
<!-- 批量模式 -->
<template v-if="isBatchMode">
<el-button
type="warning"
:disabled="selectedItems.length === 0"
@click="handleBatchSetWarning"
style="margin-right: 10px"
>
确认批量设置 (已选 {{ selectedItems.length }} 项)
</el-button>
<el-button plain @click="exitBatchMode" style="margin-right: 10px">
退出批量操作
</el-button>
</template>
<el-button
v-if="userStore.hasPermission('material_list:operation')"
type="danger"
plain
@click="enterBatchMode('inspection')"
style="margin-right: 10px"
>
<el-icon style="margin-right: 5px"><CircleCheck /></el-icon>批量质检设置
</el-button>
</template>
<template v-else>
<el-button @click="cancelBatchMode">取消选择</el-button>
<el-button type="primary" @click="confirmBatchSelection">确认勾选</el-button>
</template>
<!-- 批量质检设置按钮 (需要 operation 权限) -->
<el-button
v-if="userStore.hasPermission('material_list:operation')"
type="danger"
plain
@click="openBatchInspectionDialog"
style="margin-right: 10px"
>
<el-icon style="margin-right: 5px"><CircleCheck /></el-icon>批量质检设置
</el-button>
<el-button v-if="userStore.hasPermission('material_list:operation')" type="primary" @click="handleAdd" style="margin-right: 10px">
<el-icon style="margin-right: 5px"><Plus /></el-icon>新增
@ -695,14 +682,53 @@ const handleSelectionChange = (selection: MaterialBaseVO[]) => {
// 批量操作模式
const isBatchMode = ref(false);
const enterBatchMode = () => {
const batchActionType = ref(''); // 'warning' | 'inspection'
const enterBatchMode = (actionType: string) => {
batchActionType.value = actionType;
selectedItems.value = [];
isBatchMode.value = true;
tableRef.value?.clearSelection();
};
const exitBatchMode = () => {
selectedItems.value = [];
tableRef.value?.clearSelection(); // 清除表格勾选状态
const cancelBatchMode = () => {
isBatchMode.value = false;
batchActionType.value = '';
tableRef.value?.clearSelection();
selectedItems.value = [];
};
const confirmBatchSelection = () => {
const selected = tableRef.value?.getSelectionRows() || [];
if (selected.length === 0) {
return ElMessage.warning('请先勾选需要操作的物料');
}
// 根据操作类型路由到对应的业务弹窗
if (batchActionType.value === 'inspection') {
inspectionDialog.selectedIds = selected.map((row: any) => row.id);
inspectionDialog.selectedCount = selected.length;
inspectionForm.isInspectionRequired = false;
inspectionDialog.visible = true;
} else if (batchActionType.value === 'warning') {
// 打开预警设置弹窗
warningDialog.selectedIds = selected.map((row: any) => row.id);
warningDialog.selectedCount = selected.length;
warningForm.isEnabled = false;
warningForm.redThreshold = undefined;
warningForm.yellowThreshold = undefined;
warningDialog.title = '批量设置预警';
warningDialog.visible = true;
}
// 关闭批量模式
isBatchMode.value = false;
batchActionType.value = '';
};
// 兼容旧的 exitBatchMode
const exitBatchMode = () => {
cancelBatchMode();
};
// 预警设置相关
@ -1234,26 +1260,6 @@ const handleDelete = (row: MaterialBaseVO) => {
// --- 预警设置函数 ---
// 批量设置预警
const handleBatchSetWarning = () => {
if (selectedItems.value.length === 0) {
ElMessage.warning('请先勾选需要设置预警的物料');
return;
}
// 使用已选中的行
warningDialog.selectedIds = selectedItems.value.map((row: MaterialBaseVO) => row.id);
warningDialog.selectedCount = selectedItems.value.length;
// 重置表单
warningForm.isEnabled = false;
warningForm.redThreshold = undefined;
warningForm.yellowThreshold = undefined;
warningDialog.title = '批量设置预警';
warningDialog.visible = true;
};
// 单条设置预警
const handleSetSingleWarning = (row: MaterialBaseVO) => {
warningDialog.selectedIds = [row.id];
@ -1307,21 +1313,6 @@ const submitWarning = async () => {
}
};
// 打开批量质检设置对话框
const openBatchInspectionDialog = () => {
// 获取当前勾选的物料
const selected = tableRef.value?.getSelectionRows() || [];
if (selected.length === 0) {
ElMessage.warning('请先勾选需要设置质检的物料');
return;
}
inspectionDialog.selectedIds = selected.map((row: MaterialBaseVO) => row.id);
inspectionDialog.selectedCount = selected.length;
inspectionForm.isInspectionRequired = false; // 默认重置为否
inspectionDialog.visible = true;
};
// 提交批量质检设置
const submitBatchInspection = async () => {
if (inspectionDialog.selectedIds.length === 0) {
@ -1338,6 +1329,9 @@ const submitBatchInspection = async () => {
ElMessage.success('批量质检设置成功');
inspectionDialog.visible = false;
// 清理批量模式状态
isBatchMode.value = false;
batchActionType.value = '';
selectedItems.value = [];
tableRef.value?.clearSelection();
getList();