+
-
-
-
-
{{ warehouse.actualWarehouseName || '-' }}
-
{{ warehouse.currentCoilNo || '-' }}
+
+
+
+
+
+
{{ warehouse.actualWarehouseName || '-' }}
+
{{ warehouse.currentCoilNo || '-' }}
+
-
-
+
+
+
+
+
{{ warehouse.actualWarehouseName || '-' }}
+
{{ warehouse.currentCoilNo || '-' }}
+
+
+
+
+
@@ -186,9 +189,12 @@ export default {
return this.rulerMaxRow * this.rulerRowHeight;
},
cellWidth() {
- if (!this.containerWidth || this.sortedColumnKeys.length === 0) return 60;
- const availableWidth = Math.max(0, this.containerWidth - 30);
- return availableWidth / this.sortedColumnKeys.length;
+ // 2. 优化cellWidth计算:最小宽度从120调整为80,避免列数过多时宽度过大导致溢出
+ if (!this.containerWidth || this.sortedColumnKeys.length === 0) return 120;
+ const availableWidth = Math.max(0, this.containerWidth - 30); // 30是行标尺宽度
+ const calcWidth = availableWidth / this.sortedColumnKeys.length;
+ // 最小宽度80px,最大不限制(交给滚动容器处理)
+ return Math.max(120, calcWidth);
},
halfCellWidth() {
return this.cellWidth / 2;
@@ -237,6 +243,8 @@ export default {
immediate: true,
deep: true,
handler(newVal) {
+ console.log('columns 变化:', newVal);
+
if (this.isMounted) {
clearTimeout(this.resizeTimer);
this.resizeTimer = setTimeout(() => {
@@ -250,13 +258,34 @@ export default {
this.isMounted = true;
this.calcContainerWidth();
window.addEventListener('resize', this.handleResize);
+ // 3. 绑定滚动同步事件:列标尺和网格区域同步滚动
+ const scrollWrapper = this.$refs.scrollWrapper;
+ if (scrollWrapper) {
+ scrollWrapper.addEventListener('scroll', this.syncScroll);
+ }
},
beforeUnmount() {
window.removeEventListener('resize', this.handleResize);
clearTimeout(this.resizeTimer);
this.isMounted = false;
+ // 移除滚动监听
+ const scrollWrapper = this.$refs.scrollWrapper;
+ if (scrollWrapper) {
+ scrollWrapper.removeEventListener('scroll', this.syncScroll);
+ }
},
methods: {
+ // 4. 同步滚动方法(确保列标尺和网格滚动位置一致)
+ syncScroll(e) {
+ const target = e.target;
+ // 确保滚动行为同步(此处主要是统一滚动容器的滚动,无需额外处理,因为都在同一个scroll-wrapper里)
+ this.$nextTick(() => {
+ const colRuler = target.querySelector('.col-ruler');
+ if (colRuler) {
+ colRuler.scrollLeft = target.scrollLeft;
+ }
+ });
+ },
// 获取指定列的level值(3=合并,4=拆分)
getColumnLevel(column) {
const columnData = this.columns[column] || {};
@@ -391,6 +420,34 @@ export default {
box-sizing: border-box;
margin: 0;
padding: 0;
+ // 主容器隐藏横向溢出(滚动交给内部scroll-wrapper)
+ overflow: hidden;
+}
+
+// 5. 新增滚动容器样式:统一管理列标尺和网格的横向滚动
+.scroll-wrapper {
+ width: 100%;
+ height: calc(100% - 42px); // 42是alert提示框高度,可根据实际调整
+ overflow-x: auto; // 横向滚动,纵向隐藏
+ overflow-y: hidden;
+ scrollbar-width: thin; // 优化滚动条样式(Firefox)
+ scrollbar-color: #ccc #f5f7fa;
+
+ // 优化Chrome滚动条样式
+ &::-webkit-scrollbar {
+ height: 6px;
+ }
+ &::-webkit-scrollbar-track {
+ background: #f5f7fa;
+ border-radius: 3px;
+ }
+ &::-webkit-scrollbar-thumb {
+ background: #ccc;
+ border-radius: 3px;
+ &:hover {
+ background: #999;
+ }
+ }
}
.col-ruler {
@@ -399,9 +456,10 @@ export default {
line-height: 30px;
background: #f5f7fa;
border-bottom: 1px solid #e4e7ed;
- width: 100%;
+ width: fit-content; // 6. 列标尺宽度自适应内容,而非100%
box-sizing: border-box;
- overflow: hidden;
+ // 移除overflow: hidden,让滚动容器控制溢出
+ // overflow: hidden;
.ruler-empty {
width: 30px;
@@ -481,10 +539,11 @@ export default {
.row-grid-wrapper {
display: flex;
- width: 100%;
+ width: fit-content; // 7. 网格容器宽度自适应内容
height: calc(100% - 30px);
box-sizing: border-box;
- overflow: hidden;
+ // 移除overflow: hidden,交给scroll-wrapper控制
+ // overflow: hidden;
}
.row-ruler {
@@ -507,16 +566,17 @@ export default {
}
.grid-container {
- display: grid;
- width: 100%;
- grid-template-columns: repeat(var(--column-count), minmax(0, var(--half-cell-width)));
- grid-auto-rows: var(--total-height);
+ display: flex;
+ width: fit-content; // 8. 网格宽度自适应
+ // grid-template-columns: repeat(var(--column-count), minmax(0, var(--half-cell-width)));
+ // grid-auto-rows: var(--total-height);
gap: 0px;
box-sizing: border-box;
margin: 0;
padding: 0;
height: var(--total-height);
- overflow: hidden;
+ // 移除overflow: hidden,交给scroll-wrapper控制
+ // overflow: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
@@ -529,6 +589,7 @@ export default {
.column-container {
display: flex;
+ width: var(--half-cell-width);
flex-direction: column;
justify-content: flex-start;
padding: 1px;
@@ -553,6 +614,7 @@ export default {
border-radius: 4px;
display: flex;
justify-content: center;
+ min-width: var(--half-cell-width);
align-items: center;
cursor: pointer;
transition: all 0.2s;
diff --git a/klp-ui/src/views/wms/warehouse/overview.vue b/klp-ui/src/views/wms/warehouse/overview.vue
index aa9f5d29..17dd2e9c 100644
--- a/klp-ui/src/views/wms/warehouse/overview.vue
+++ b/klp-ui/src/views/wms/warehouse/overview.vue
@@ -42,7 +42,7 @@