|
|
<template>
|
|
|
<div class="inventory-table-container">
|
|
|
<div class="table-header">
|
|
|
<h3>实时库存表</h3>
|
|
|
<div class="table-actions">
|
|
|
<el-switch
|
|
|
v-model="showDifference"
|
|
|
active-text="显示库存变化"
|
|
|
inactive-text="显示实际库存"
|
|
|
style="margin-right: 15px;"
|
|
|
@change="handleToggleChange"
|
|
|
/>
|
|
|
<el-button @click="refreshData" type="primary" size="small">刷新数据</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 调试信息 -->
|
|
|
<div v-if="!loading" style="margin-bottom: 10px; font-size: 12px; color: #666;">
|
|
|
调试信息: 获取到 {{ records.length }} 条记录，表格共 {{ tableData.length }} 行
|
|
|
</div>
|
|
|
|
|
|
<div v-loading="loading" class="table-wrapper">
|
|
|
<el-table
|
|
|
:data="tableData"
|
|
|
style="width: 100%; min-width: max-content;"
|
|
|
border
|
|
|
:header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }"
|
|
|
empty-text="暂无数据"
|
|
|
:scrollbar-always-on="true"
|
|
|
@cell-dblclick="handleCellDblClick"
|
|
|
>
|
|
|
<!-- 规格列 -->
|
|
|
<el-table-column
|
|
|
prop="specification"
|
|
|
label="规格"
|
|
|
width="80"
|
|
|
fixed="left"
|
|
|
/>
|
|
|
|
|
|
<!-- 动态列：model-wire_disc 组合 -->
|
|
|
<el-table-column
|
|
|
v-for="column in dynamicColumns"
|
|
|
:key="column.key"
|
|
|
:label="column.label"
|
|
|
:prop="column.prop"
|
|
|
min-width="120"
|
|
|
>
|
|
|
<template #default="scope">
|
|
|
<div class="cell-content">
|
|
|
<span v-if="!showDifference">
|
|
|
{{ scope.row[column.prop] || '-' }}
|
|
|
</span>
|
|
|
<span v-else>
|
|
|
{{ scope.row[column.prop] || '-' }}
|
|
|
<span
|
|
|
v-if="scope.row[column.prop + '_difference'] !== undefined && scope.row[column.prop + '_difference'] !== null"
|
|
|
:class="getDifferenceClass(scope.row[column.prop + '_difference'])"
|
|
|
style="margin-left: 5px; font-size: 12px;"
|
|
|
>
|
|
|
({{ formatDifference(scope.row[column.prop + '_difference']) }})
|
|
|
</span>
|
|
|
<span v-else class="no-data" style="margin-left: 5px; font-size: 12px;">
|
|
|
(-)
|
|
|
</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template #header>
|
|
|
<div v-html="column.label"></div> <!-- 使用 v-html 渲染 HTML 标签，确保 <br> 生效 -->
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
<!-- 总计列 -->
|
|
|
<el-table-column
|
|
|
label="总计"
|
|
|
width="100"
|
|
|
fixed="right"
|
|
|
>
|
|
|
<template #default="scope">
|
|
|
{{ scope.row.total }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
|
|
|
<!-- WmsTable 详情对话框 -->
|
|
|
<el-dialog
|
|
|
v-model="wmsDialogVisible"
|
|
|
title="库存详情"
|
|
|
width="80%"
|
|
|
destroy-on-close
|
|
|
>
|
|
|
<WmsTable
|
|
|
v-if="wmsDialogVisible"
|
|
|
ref="wmsTableRef"
|
|
|
:model="currentWmsModel"
|
|
|
:specification="currentWmsSpecification"
|
|
|
:loading-height="200"
|
|
|
:show-action="true"
|
|
|
/>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { ref, onMounted, computed } from 'vue'
|
|
|
import { API_CONFIG } from "@/config/api"
|
|
|
import { ElMessage } from 'element-plus'
|
|
|
import WmsTable from '@/components/WmsTable/index.vue'
|
|
|
|
|
|
// 响应式数据
|
|
|
const loading = ref(false)
|
|
|
const records = ref([])
|
|
|
const differenceRecords = ref([])
|
|
|
|
|
|
// WMS对话框相关状态
|
|
|
const wmsDialogVisible = ref(false)
|
|
|
const currentWmsModel = ref('')
|
|
|
const currentWmsSpecification = ref('')
|
|
|
const wmsTableRef = ref(null)
|
|
|
|
|
|
// 显示控制
|
|
|
const showDifference = ref(true)
|
|
|
|
|
|
// 计算属性：动态列
|
|
|
const dynamicColumns = computed(() => {
|
|
|
if (!records.value.length) return [];
|
|
|
|
|
|
// 使用 '::' 作为分隔符
|
|
|
const combinations = [...new Set(records.value.map(item => {
|
|
|
if (item.wire_disc && item.wire_disc.trim() !== '') {
|
|
|
return `${item.model}::${item.wire_disc}`;
|
|
|
} else {
|
|
|
return item.model;
|
|
|
}
|
|
|
}))].sort(); // 可选：若需自定义排序，调整这里
|
|
|
|
|
|
return combinations.map(comb => {
|
|
|
// 将组合拆分为 model 和 wire_disc
|
|
|
const hasWireDisc = comb.includes('::');
|
|
|
const [model, wire_disc] = hasWireDisc ? comb.split('::') : [comb, ''];
|
|
|
|
|
|
return {
|
|
|
key: comb,
|
|
|
prop: comb,
|
|
|
label: `${model}<br>${wire_disc}` // 使用HTML换行符，实现两行显示
|
|
|
};
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 计算属性：表格数据
|
|
|
const tableData = computed(() => {
|
|
|
console.log('计算表格数据, records.value:', records.value);
|
|
|
|
|
|
if (!records.value.length) {
|
|
|
console.log('records为空，返回空数组');
|
|
|
return [];
|
|
|
}
|
|
|
|
|
|
// 获取所有唯一的规格并从小到大排序（可选数值排序）
|
|
|
const specifications = [...new Set(records.value.map(item => item.specification))]
|
|
|
.sort((a, b) => parseFloat(a) - parseFloat(b)); // 改为数值排序，避免 "0.800" 在前
|
|
|
|
|
|
console.log('获取到的规格列表:', specifications);
|
|
|
|
|
|
// 获取所有唯一的 model::wire_disc 组合
|
|
|
const combinations = [...new Set(records.value.map(item => {
|
|
|
if (item.wire_disc && item.wire_disc.trim() !== '') {
|
|
|
return `${item.model}::${item.wire_disc}`;
|
|
|
} else {
|
|
|
return item.model;
|
|
|
}
|
|
|
}))];
|
|
|
console.log('获取到的model::wire_disc组合:', combinations);
|
|
|
|
|
|
// 构建表格数据
|
|
|
const tableDataResult = specifications.map(specification => {
|
|
|
const row = { specification };
|
|
|
let total = 0;
|
|
|
|
|
|
combinations.forEach(comb => {
|
|
|
// 判断是否包含 wire_disc（检查 '::'）
|
|
|
const hasWireDisc = comb.includes('::');
|
|
|
let model, wire_disc;
|
|
|
|
|
|
if (hasWireDisc) {
|
|
|
[model, wire_disc] = comb.split('::'); // 使用 '::' 分割
|
|
|
} else {
|
|
|
model = comb;
|
|
|
wire_disc = null;
|
|
|
}
|
|
|
|
|
|
// 查找对应的记录
|
|
|
const record = records.value.find(r => {
|
|
|
const specMatch = r.specification === specification;
|
|
|
const modelMatch = r.model === model;
|
|
|
const wireDiscMatch = hasWireDisc
|
|
|
? (r.wire_disc === wire_disc)
|
|
|
: (!r.wire_disc || r.wire_disc.trim() === '');
|
|
|
return specMatch && modelMatch && wireDiscMatch;
|
|
|
});
|
|
|
|
|
|
// 设置实际库存数量
|
|
|
row[comb] = record ? record.total_number : null;
|
|
|
if (record) total += record.total_number;
|
|
|
|
|
|
// 如果启用了差值显示，查找差值记录
|
|
|
if (showDifference.value && differenceRecords.value.length > 0) {
|
|
|
const differenceRecord = differenceRecords.value.find(r => {
|
|
|
const specMatch = r.specification === specification;
|
|
|
const modelMatch = r.model === model;
|
|
|
const wireDiscMatch = hasWireDisc
|
|
|
? (r.wire_disc === wire_disc)
|
|
|
: (!r.wire_disc || r.wire_disc.trim() === '');
|
|
|
return specMatch && modelMatch && wireDiscMatch;
|
|
|
});
|
|
|
|
|
|
// 设置差值
|
|
|
row[comb + '_difference'] = differenceRecord ? differenceRecord.difference : null;
|
|
|
}
|
|
|
});
|
|
|
|
|
|
row.total = total;
|
|
|
return row;
|
|
|
});
|
|
|
|
|
|
console.log('生成的表格数据:', tableDataResult);
|
|
|
return tableDataResult;
|
|
|
});
|
|
|
|
|
|
// 方法：获取数据
|
|
|
const fetchData = async () => {
|
|
|
loading.value = true;
|
|
|
try {
|
|
|
console.log('正在请求API:', `${API_CONFIG.BASE_URL}${API_CONFIG.ENDPOINTS.WMS_TYPE_1_RECORDS}`);
|
|
|
const response = await fetch(`${API_CONFIG.BASE_URL}${API_CONFIG.ENDPOINTS.WMS_TYPE_1_RECORDS}`);
|
|
|
const result = await response.json();
|
|
|
|
|
|
console.log('API返回结果:', result);
|
|
|
|
|
|
if (result.code === 200 && result.data && result.data.records) {
|
|
|
records.value = result.data.records;
|
|
|
console.log('设置records值:', records.value);
|
|
|
} else {
|
|
|
console.error('获取实时库存数据失败:', result.message);
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('API调用失败:', error);
|
|
|
} finally {
|
|
|
loading.value = false;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 方法：获取差值数据
|
|
|
const fetchDifferenceData = async () => {
|
|
|
const today = new Date().toISOString().split('T')[0]; // 获取今天的日期 YYYY-MM-DD
|
|
|
const targetDate = today;
|
|
|
|
|
|
try {
|
|
|
console.log('正在请求差值API:', `/api/wms/difference/type1-records?target_date=${targetDate}`);
|
|
|
const response = await fetch(`${API_CONFIG.BASE_URL}/api/wms/difference/type1-records?target_date=${targetDate}`);
|
|
|
const result = await response.json();
|
|
|
|
|
|
console.log('差值API返回结果:', result);
|
|
|
|
|
|
if (result.code === 200 && result.data && result.data.records) {
|
|
|
differenceRecords.value = result.data.records;
|
|
|
console.log('设置差值records:', differenceRecords.value);
|
|
|
} else {
|
|
|
console.error('获取差值数据失败:', result.message);
|
|
|
differenceRecords.value = [];
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.error('差值API调用失败:', error);
|
|
|
differenceRecords.value = [];
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 方法：刷新数据
|
|
|
const refreshData = () => {
|
|
|
fetchData();
|
|
|
if (showDifference.value) {
|
|
|
fetchDifferenceData();
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 方法：处理toggle变化
|
|
|
const handleToggleChange = (value) => {
|
|
|
if (value) {
|
|
|
// 启用差值显示时获取差值数据
|
|
|
fetchDifferenceData();
|
|
|
} else {
|
|
|
// 禁用差值显示时清空差值数据
|
|
|
differenceRecords.value = [];
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 方法：格式化差值显示
|
|
|
const formatDifference = (difference) => {
|
|
|
if (difference === 0) return '0';
|
|
|
if (difference > 0) return `+${difference}`;
|
|
|
return `${difference}`;
|
|
|
};
|
|
|
|
|
|
// 方法：获取差值样式类
|
|
|
const getDifferenceClass = (difference) => {
|
|
|
if (difference > 0) return 'difference-positive'; // 绿色，增加
|
|
|
if (difference < 0) return 'difference-negative'; // 红色，减少
|
|
|
return 'difference-zero'; // 黑色，无变化
|
|
|
};
|
|
|
|
|
|
// 方法：处理单元格双击事件
|
|
|
const handleCellDblClick = (row, column, cell, event) => {
|
|
|
const cellValue = row[column.property];
|
|
|
|
|
|
// 检查单元格是否有值
|
|
|
if (!cellValue || cellValue === '-' || cellValue === null || cellValue === undefined) {
|
|
|
ElMessage.warning('该单元格暂无数据');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 检查是否是规格列或总计列，这些列不需要显示WMS详情
|
|
|
if (column.property === 'specification' || column.property === 'total') {
|
|
|
ElMessage.info('该列不支持查看详情');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 从列属性中提取model和wire_disc
|
|
|
const columnKey = column.property;
|
|
|
const hasWireDisc = columnKey.includes('::');
|
|
|
let model, wire_disc;
|
|
|
|
|
|
if (hasWireDisc) {
|
|
|
[model, wire_disc] = columnKey.split('::');
|
|
|
} else {
|
|
|
model = columnKey;
|
|
|
wire_disc = null;
|
|
|
}
|
|
|
|
|
|
// 设置当前WMS数据的参数
|
|
|
currentWmsModel.value = model;
|
|
|
currentWmsSpecification.value = row.specification;
|
|
|
|
|
|
// 显示WMS详情对话框
|
|
|
wmsDialogVisible.value = true;
|
|
|
};
|
|
|
|
|
|
// 组件挂载时获取数据
|
|
|
onMounted(() => {
|
|
|
fetchData();
|
|
|
// 如果默认显示库存变化，则同时获取差值数据
|
|
|
if (showDifference.value) {
|
|
|
fetchDifferenceData();
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.inventory-table-container {
|
|
|
padding: 20px;
|
|
|
background-color: #fff;
|
|
|
border-radius: 4px;
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
.table-header {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
.table-header h3 {
|
|
|
margin: 0;
|
|
|
font-size: 18px;
|
|
|
color: #303133;
|
|
|
}
|
|
|
|
|
|
.table-actions {
|
|
|
display: flex;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
.table-wrapper {
|
|
|
width: 100%;
|
|
|
overflow-x: auto;
|
|
|
/* 确保滚动条始终可见 */
|
|
|
scrollbar-width: thin; /* Firefox */
|
|
|
}
|
|
|
|
|
|
:deep(.el-table) {
|
|
|
font-size: 14px;
|
|
|
/* 确保表格最小宽度正确计算 */
|
|
|
width: max-content !important;
|
|
|
min-width: 100% !important;
|
|
|
}
|
|
|
|
|
|
:deep(.el-table th) {
|
|
|
background-color: #f5f7fa !important;
|
|
|
color: #606266;
|
|
|
font-weight: 600;
|
|
|
white-space: nowrap;
|
|
|
text-align: center; /* 可选：居中对齐列头 */
|
|
|
padding: 8px 0; /* 调整列头内间距，以适应两行显示 */
|
|
|
}
|
|
|
|
|
|
:deep(.el-table td) {
|
|
|
padding: 8px 0;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
/* 库存变化样式 */
|
|
|
.cell-content {
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.difference-positive {
|
|
|
color: #67c23a;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.difference-negative {
|
|
|
color: #f56c6c;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.difference-zero {
|
|
|
color: #606266;
|
|
|
font-weight: normal;
|
|
|
}
|
|
|
|
|
|
.no-data {
|
|
|
color: #c0c4cc;
|
|
|
}
|
|
|
|
|
|
/* Webkit 浏览器的滚动条样式 */
|
|
|
.table-wrapper::-webkit-scrollbar {
|
|
|
height: 10px;
|
|
|
}
|
|
|
|
|
|
.table-wrapper::-webkit-scrollbar-track {
|
|
|
background: #f1f1f1;
|
|
|
}
|
|
|
|
|
|
.table-wrapper::-webkit-scrollbar-thumb {
|
|
|
background: #c1c1c1;
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
|
|
|
.table-wrapper::-webkit-scrollbar-thumb:hover {
|
|
|
background: #a8a8a8;
|
|
|
}
|
|
|
</style> |