314 lines
7.5 KiB
Vue
314 lines
7.5 KiB
Vue
<template>
|
||
<el-dialog
|
||
v-model="visible"
|
||
:title="dialogTitle"
|
||
width="800px"
|
||
:close-on-click-modal="false"
|
||
@close="handleClose"
|
||
>
|
||
<!-- 搜索栏 -->
|
||
<div class="search-bar">
|
||
<el-input
|
||
v-model="searchKeyword"
|
||
placeholder="请输入关键词搜索"
|
||
clearable
|
||
style="width: 300px"
|
||
@keyup.enter="handleSearch"
|
||
>
|
||
<template #append>
|
||
<el-button @click="handleSearch">
|
||
<el-icon><ele-Search /></el-icon>
|
||
</el-button>
|
||
</template>
|
||
</el-input>
|
||
</div>
|
||
|
||
<!-- 数据表格 -->
|
||
<el-table
|
||
ref="tableRef"
|
||
:data="tableData"
|
||
v-loading="loading"
|
||
border
|
||
style="width: 100%; margin-top: 15px"
|
||
@selection-change="handleSelectionChange"
|
||
>
|
||
<el-table-column type="selection" width="55" align="center" />
|
||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||
<el-table-column prop="name" :label="getColumnLabel()" min-width="200" show-overflow-tooltip />
|
||
<el-table-column prop="code" label="编码" width="150" show-overflow-tooltip v-if="scope <= 2" />
|
||
</el-table>
|
||
|
||
<!-- 分页 -->
|
||
<div class="pagination-box">
|
||
<el-pagination
|
||
v-model:current-page="pageNum"
|
||
v-model:page-size="pageSize"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
:total="total"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 已选项展示 -->
|
||
<div class="selected-box" v-if="selectedItems.length > 0">
|
||
<span class="selected-label">已选择 {{ selectedItems.length }} 项：</span>
|
||
<el-tag
|
||
v-for="item in selectedItems"
|
||
:key="item.id"
|
||
size="small"
|
||
closable
|
||
style="margin-right: 4px; margin-bottom: 4px"
|
||
@close="removeSelected(item)"
|
||
>
|
||
{{ item.name }}
|
||
</el-tag>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<el-button @click="handleClose">取消</el-button>
|
||
<el-button type="primary" @click="handleConfirm">确定</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed } from 'vue';
|
||
import { listWarehouses } from '/@/api/assets/warehouse';
|
||
import { listZones } from '/@/api/assets/zone';
|
||
import { listLocations } from '/@/api/assets/location';
|
||
|
||
const emit = defineEmits(['confirm']);
|
||
|
||
const visible = ref(false);
|
||
const loading = ref(false);
|
||
const scope = ref(1); // 1-仓库 2-库区 3-库位
|
||
const searchKeyword = ref('');
|
||
const tableData = ref<any[]>([]);
|
||
const total = ref(0);
|
||
const pageNum = ref(1);
|
||
const pageSize = ref(10);
|
||
const tableRef = ref();
|
||
|
||
// 已选项
|
||
const selectedItems = ref<any[]>([]);
|
||
|
||
// 父级ID（库区需要仓库ID，库位需要库区ID）
|
||
const parentWarehouseIds = ref<string[]>([]);
|
||
const parentZoneIds = ref<string[]>([]);
|
||
|
||
// 弹窗标题
|
||
const dialogTitle = computed(() => {
|
||
const titles: Record<number, string> = {
|
||
1: '选择仓库',
|
||
2: '选择库区',
|
||
3: '选择库位',
|
||
};
|
||
return titles[scope.value] || '选择';
|
||
});
|
||
|
||
// 获取列标题
|
||
const getColumnLabel = () => {
|
||
const labels: Record<number, string> = {
|
||
1: '仓库名称',
|
||
2: '库区名称',
|
||
3: '库位名称',
|
||
};
|
||
return labels[scope.value] || '名称';
|
||
};
|
||
|
||
// 打开弹窗
|
||
const open = async (data: {
|
||
scope: number;
|
||
selectedIds: string[];
|
||
selectedNames: string[];
|
||
warehouseIds?: string[];
|
||
zoneIds?: string[];
|
||
}) => {
|
||
scope.value = data.scope;
|
||
parentWarehouseIds.value = data.warehouseIds || [];
|
||
parentZoneIds.value = data.zoneIds || [];
|
||
|
||
// 恢复已选项
|
||
selectedItems.value = data.selectedIds.map((id, idx) => ({
|
||
id,
|
||
name: data.selectedNames[idx] || id,
|
||
}));
|
||
|
||
searchKeyword.value = '';
|
||
pageNum.value = 1;
|
||
visible.value = true;
|
||
|
||
await loadData();
|
||
};
|
||
|
||
// 加载数据
|
||
const loadData = async () => {
|
||
loading.value = true;
|
||
try {
|
||
let res: any;
|
||
const params = {
|
||
keyword: searchKeyword.value,
|
||
pageNum: pageNum.value,
|
||
pageSize: pageSize.value,
|
||
};
|
||
|
||
if (scope.value === 1) {
|
||
// 加载仓库
|
||
res = await listWarehouses(params);
|
||
const list = res.data?.list || [];
|
||
tableData.value = list.map((item: any) => ({
|
||
id: item.id,
|
||
name: item.warehouseName || item.name,
|
||
code: item.warehouseCode || item.code,
|
||
}));
|
||
total.value = res.data?.total || 0;
|
||
} else if (scope.value === 2) {
|
||
// 加载库区
|
||
if (parentWarehouseIds.value.length === 0) {
|
||
tableData.value = [];
|
||
total.value = 0;
|
||
return;
|
||
}
|
||
const allZones: any[] = [];
|
||
let totalCount = 0;
|
||
for (const warehouseId of parentWarehouseIds.value) {
|
||
res = await listZones({ ...params, warehouseId });
|
||
const list = res.data?.list || res.data?.items || res.data || [];
|
||
const zones = (Array.isArray(list) ? list : []).map((item: any) => ({
|
||
id: item.id || item._id,
|
||
name: item.zoneName || item.name,
|
||
code: item.zoneCode || item.code,
|
||
}));
|
||
allZones.push(...zones);
|
||
totalCount += res.data?.total || zones.length;
|
||
}
|
||
tableData.value = allZones;
|
||
total.value = totalCount;
|
||
} else if (scope.value === 3) {
|
||
// 加载库位
|
||
if (parentZoneIds.value.length === 0) {
|
||
tableData.value = [];
|
||
total.value = 0;
|
||
return;
|
||
}
|
||
const allLocations: any[] = [];
|
||
let totalCount = 0;
|
||
for (const zoneId of parentZoneIds.value) {
|
||
res = await listLocations({ ...params, zoneId });
|
||
const list = res.data?.list || res.data?.items || res.data || [];
|
||
const locations = (Array.isArray(list) ? list : []).map((item: any) => ({
|
||
id: item.id || item._id,
|
||
name: item.locationName || item.name,
|
||
code: item.locationCode || item.code,
|
||
}));
|
||
allLocations.push(...locations);
|
||
totalCount += res.data?.total || locations.length;
|
||
}
|
||
tableData.value = allLocations;
|
||
total.value = totalCount;
|
||
}
|
||
|
||
// 恢复选中状态
|
||
setTimeout(() => {
|
||
tableData.value.forEach((row: any) => {
|
||
if (selectedItems.value.some(item => item.id === row.id)) {
|
||
tableRef.value?.toggleRowSelection(row, true);
|
||
}
|
||
});
|
||
}, 0);
|
||
} catch (error) {
|
||
console.error('加载数据失败:', error);
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
|
||
// 搜索
|
||
const handleSearch = () => {
|
||
pageNum.value = 1;
|
||
loadData();
|
||
};
|
||
|
||
// 分页大小变化
|
||
const handleSizeChange = () => {
|
||
pageNum.value = 1;
|
||
loadData();
|
||
};
|
||
|
||
// 页码变化
|
||
const handleCurrentChange = () => {
|
||
loadData();
|
||
};
|
||
|
||
// 选择变化
|
||
const handleSelectionChange = (selection: any[]) => {
|
||
// 合并当前页选中和之前选中的（去除当前页取消选中的）
|
||
const currentPageIds = tableData.value.map(item => item.id);
|
||
|
||
// 移除当前页的旧选中
|
||
const otherSelected = selectedItems.value.filter(item => !currentPageIds.includes(item.id));
|
||
|
||
// 添加当前页新选中
|
||
selectedItems.value = [...otherSelected, ...selection];
|
||
};
|
||
|
||
// 移除已选
|
||
const removeSelected = (item: any) => {
|
||
const idx = selectedItems.value.findIndex(i => i.id === item.id);
|
||
if (idx > -1) {
|
||
selectedItems.value.splice(idx, 1);
|
||
// 取消表格选中
|
||
const row = tableData.value.find(r => r.id === item.id);
|
||
if (row) {
|
||
tableRef.value?.toggleRowSelection(row, false);
|
||
}
|
||
}
|
||
};
|
||
|
||
// 关闭弹窗
|
||
const handleClose = () => {
|
||
visible.value = false;
|
||
};
|
||
|
||
// 确认选择
|
||
const handleConfirm = () => {
|
||
emit('confirm', {
|
||
selectedIds: selectedItems.value.map(item => item.id),
|
||
selectedNames: selectedItems.value.map(item => item.name),
|
||
});
|
||
handleClose();
|
||
};
|
||
|
||
defineExpose({
|
||
open,
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.search-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.pagination-box {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.selected-box {
|
||
margin-top: 15px;
|
||
padding: 10px;
|
||
background: #f5f7fa;
|
||
border-radius: 4px;
|
||
|
||
.selected-label {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
</style>
|