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

feat(outbound): 优化批量操作UX，改为进入/退出批量模式设计

Browse Source
This commit is contained in:
DXC
2026-04-21 13:14:50 +08:00
parent a6409ac091
commit cd714d0c16
1 changed files with 38 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
inventory-web/src/views/outbound/Selection.vue
View File

@ -8,19 +8,31 @@
<span class="subtitle">(请添加需要出库的物品)</span> <span class="subtitle">(请添加需要出库的物品)</span>
</div> </div>
<div> <div>
<el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="danger" plain :disabled="selectedRows.length === 0" @click="batchRemove"> <!-- 批量模式 -->
批量移除 <template v-if="isBulkMode">
</el-button> <el-button @click="cancelBulkMode">
<el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="danger" :disabled="selectedItems.length === 0" @click="clearAll"> 取消
清空货车 </el-button>
</el-button> <el-button type="danger" :disabled="selectedRows.length === 0" @click="batchRemove">
<el-divider direction="vertical" /> 移除选中 ({{ selectedRows.length }})
<el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="primary" :icon="Plus" @click="openManualSelect"> </el-button>
手动添加库存 </template>
</el-button> <!-- 普通模式 -->
<el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="warning" :icon="List" @click="openBomSelect"> <template v-else>
按 BOM 套餐添加 <el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="warning" plain :disabled="selectedItems.length === 0" @click="isBulkMode = true">
</el-button> 批量操作
</el-button>
<el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="danger" :disabled="selectedItems.length === 0" @click="clearAll">
清空货车
</el-button>
<el-divider direction="vertical" />
<el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="primary" :icon="Plus" @click="openManualSelect">
手动添加库存
</el-button>
<el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="warning" :icon="List" @click="openBomSelect">
按 BOM 套餐添加
</el-button>
</template>
<el-divider direction="vertical" /> <el-divider direction="vertical" />
<el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="success" :icon="Printer" :disabled="selectedItems.length === 0" @click="handlePreview"> <el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="success" :icon="Printer" :disabled="selectedItems.length === 0" @click="handlePreview">
生成预览 & 打印 生成预览 & 打印
@ -47,7 +59,7 @@
row-key="uniqueKey" row-key="uniqueKey"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<el-table-column type="selection" width="55" align="center" /> <el-table-column v-if="isBulkMode" type="selection" width="55" align="center" />
<el-table-column type="index" label="序号" width="50" align="center" /> <el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column label="类型" width="100" align="center"> <el-table-column label="类型" width="100" align="center">
@ -88,7 +100,7 @@
<el-table-column label="操作" width="80" align="center" fixed="right"> <el-table-column label="操作" width="80" align="center" fixed="right">
<template #default="{ $index }"> <template #default="{ $index }">
<el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="danger" link @click="removeRow($index)">移除</el-button> <el-button v-if="!isBulkMode && userStore.hasPermission('outbound_selection:operation')" type="danger" link @click="removeRow($index)">移除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -349,6 +361,7 @@ const userStore = useUserStore()
// --- 状态变量 --- // --- 状态变量 ---
const selectedItems = ref<any[]>([]) const selectedItems = ref<any[]>([])
const selectedRows = ref<any[]>([]) const selectedRows = ref<any[]>([])
const isBulkMode = ref(false)
// 按库位路径自然升序排序（优化拣货路径） // 按库位路径自然升序排序（优化拣货路径）
const sortedSelectedItems = computed(() => { const sortedSelectedItems = computed(() => {
@ -707,6 +720,14 @@ const confirmBomAdd = async () => {
const handleSelectionChange = (val: any[]) => { const handleSelectionChange = (val: any[]) => {
selectedRows.value = val selectedRows.value = val
if (val.length === 0 && isBulkMode.value) {
isBulkMode.value = false
}
}
const cancelBulkMode = () => {
isBulkMode.value = false
selectedRows.value = []
} }
const clearAll = () => { const clearAll = () => {
@ -721,6 +742,7 @@ const clearAll = () => {
).then(() => { ).then(() => {
selectedItems.value = [] selectedItems.value = []
selectedRows.value = [] selectedRows.value = []
isBulkMode.value = false
ElMessage.success('已清空拣货车') ElMessage.success('已清空拣货车')
}).catch(() => {}) }).catch(() => {})
} }
@ -739,6 +761,7 @@ const batchRemove = () => {
const keysToRemove = new Set(selectedRows.value.map(row => row.uniqueKey)) const keysToRemove = new Set(selectedRows.value.map(row => row.uniqueKey))
selectedItems.value = selectedItems.value.filter(item => !keysToRemove.has(item.uniqueKey)) selectedItems.value = selectedItems.value.filter(item => !keysToRemove.has(item.uniqueKey))
selectedRows.value = [] selectedRows.value = []
isBulkMode.value = false
ElMessage.success(`已移除 ${keysToRemove.size} 项物品`) ElMessage.success(`已移除 ${keysToRemove.size} 项物品`)
}).catch(() => {}) }).catch(() => {})
} }