8. 库房管理系统,优化库存操作界面查询列表sql,改正接口sql查询映射不到实体类具体字段问题

9.	库房管理系统,库存操作页面新增导出记录功能
10.	库房管理系统,库存操作页面,新增取消入库功能
11.	库房管理系统,优化库存操作界面上方搜索栏样式
15.	库房管理系统.修改新增分区接口,根据belongId区分企业
16.	库房管理系统.修改查询分区接口,新增获取belongId,根据belongId区分企业功能
17.	库房管理系统.新增垛位布局管理页面,实现可视化垛位布局,垛位区域块大小调整,位置调整,垛位名称更改,新增垛位等功能
18.	库房管理系统,新增保存或修改垛位接口,控制垛位区域布局的统一接口
19.	库房管理系统,调试保存或修改垛位接口,修复bug
20.	库房管理系统,新增批量新增垛位功能,根据起始数量,其实编号,新增垛位前缀来进行编排的批量操作

package-lock.json

 				"dayjs": "^1.11.10",
 				"echarts": "^5.5.1",
 				"element-plus": "^2.5.1",
+				"grid-layout-plus": "^1.1.1",
 				"js-base64": "^3.7.7",
 				"js-sha256": "^0.11.0",
 				"jsencrypt": "^3.3.2",
 			}
 		},
 		"node_modules/@floating-ui/core": {
-			"version": "1.6.0",
-			"resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.6.0.tgz",
-			"integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
+			"version": "1.7.3",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+			"integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+			"license": "MIT",
 			"dependencies": {
-				"@floating-ui/utils": "^0.2.1"
+				"@floating-ui/utils": "^0.2.10"
 			}
 		},
 		"node_modules/@floating-ui/dom": {
-			"version": "1.5.4",
-			"resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.5.4.tgz",
-			"integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==",
+			"version": "1.7.4",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
+			"integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+			"license": "MIT",
 			"dependencies": {
-				"@floating-ui/core": "^1.5.3",
-				"@floating-ui/utils": "^0.2.0"
+				"@floating-ui/core": "^1.7.3",
+				"@floating-ui/utils": "^0.2.10"
 			}
 		},
 		"node_modules/@floating-ui/utils": {
-			"version": "0.2.1",
-			"resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.1.tgz",
-			"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
+			"version": "0.2.10",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+			"integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+			"license": "MIT"
+		},
+		"node_modules/@interactjs/types": {
+			"version": "1.10.27",
+			"resolved": "https://registry.npmjs.org/@interactjs/types/-/types-1.10.27.tgz",
+			"integrity": "sha512-BUdv0cvs4H5ODuwft2Xp4eL8Vmi3LcihK42z0Ft/FbVJZoRioBsxH+LlsBdK4tAie7PqlKGy+1oyOncu1nQ6eA==",
+			"license": "MIT"
 		},
 		"node_modules/@jridgewell/sourcemap-codec": {
 			"version": "1.4.15",
 			"resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
 			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
 		},
+		"node_modules/@juggle/resize-observer": {
+			"version": "3.4.0",
+			"resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+			"integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==",
+			"license": "Apache-2.0"
+		},
 		"node_modules/@nodelib/fs.scandir": {
 			"version": "2.1.5",
 			"resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
 			"version": "4.17.12",
 			"resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz",
 			"integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+			"peer": true,
 			"dependencies": {
 				"@types/lodash": "*"
 			}
 			"version": "2.3.4",
 			"resolved": "https://registry.npmmirror.com/@uppy/core/-/core-2.3.4.tgz",
 			"integrity": "sha512-iWAqppC8FD8mMVqewavCz+TNaet6HPXitmGXpGGREGrakZ4FeuWytVdrelydzTdXx6vVKkOmI2FLztGg73sENQ==",
+			"peer": true,
 			"dependencies": {
 				"@transloadit/prettier-bytes": "0.0.7",
 				"@uppy/store-default": "^2.1.1",
 			"version": "2.1.3",
 			"resolved": "https://registry.npmmirror.com/@uppy/xhr-upload/-/xhr-upload-2.1.3.tgz",
 			"integrity": "sha512-YWOQ6myBVPs+mhNjfdWsQyMRWUlrDLMoaG7nvf/G6Y3GKZf8AyjFDjvvJ49XWQ+DaZOftGkHmF1uh/DBeGivJQ==",
+			"peer": true,
 			"dependencies": {
 				"@uppy/companion-client": "^2.2.2",
 				"@uppy/utils": "^4.1.2",
 				"@uppy/core": "^2.3.3"
 			}
 		},
+		"node_modules/@vexip-ui/hooks": {
+			"version": "2.9.3",
+			"resolved": "https://registry.npmjs.org/@vexip-ui/hooks/-/hooks-2.9.3.tgz",
+			"integrity": "sha512-DrGlwSa0P0KQ98RU0MrQ4+KcItZDaejAJISv3iT6T6/E2ly4z7c2dzuNzn5Wk7y4FYnkXDfrf2UFNv7EDw8GJg==",
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/dom": "^1.7.0",
+				"@juggle/resize-observer": "^3.4.0",
+				"@vexip-ui/utils": "2.16.4"
+			},
+			"peerDependencies": {
+				"vue": "^3.2.25"
+			}
+		},
+		"node_modules/@vexip-ui/utils": {
+			"version": "2.16.4",
+			"resolved": "https://registry.npmjs.org/@vexip-ui/utils/-/utils-2.16.4.tgz",
+			"integrity": "sha512-KX+Q4EsuwDp6ZlRJ7OAkiYxu52D5CVM8zpqQz/FXYV+JUtzl9T3dvxgtA8gQ0wm5Sh/xT6jp8Wo4X7tLAzRh/A==",
+			"license": "MIT"
+		},
 		"node_modules/@vitejs/plugin-vue": {
 			"version": "4.6.2",
 			"resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-4.6.2.tgz",
 			"version": "1.1.7",
 			"resolved": "https://registry.npmmirror.com/@wangeditor/basic-modules/-/basic-modules-1.1.7.tgz",
 			"integrity": "sha512-cY9CPkLJaqF05STqfpZKWG4LpxTMeGSIIF1fHvfm/mz+JXatCagjdkbxdikOuKYlxDdeqvOeBmsUBItufDLXZg==",
+			"peer": true,
 			"dependencies": {
 				"is-url": "^1.2.4"
 			},
 			"version": "1.1.19",
 			"resolved": "https://registry.npmmirror.com/@wangeditor/core/-/core-1.1.19.tgz",
 			"integrity": "sha512-KevkB47+7GhVszyYF2pKGKtCSj/YzmClsD03C3zTt+9SR2XWT5T0e3yQqg8baZpcMvkjs1D8Dv4fk8ok/UaS2Q==",
+			"peer": true,
 			"dependencies": {
 				"@types/event-emitter": "^0.3.3",
 				"event-emitter": "^0.3.5",
 		"node_modules/@wangeditor/editor": {
 			"version": "5.1.23",
 			"integrity": "sha512-0RxfeVTuK1tktUaPROnCoFfaHVJpRAIE2zdS0mpP+vq1axVQpLjM8+fCvKzqYIkH0Pg+C+44hJpe3VVroSkEuQ==",
+			"peer": true,
 			"dependencies": {
 				"@uppy/core": "^2.1.1",
 				"@uppy/xhr-upload": "^2.0.3",
 			"version": "3.0.0",
 			"resolved": "https://registry.npmmirror.com/dom7/-/dom7-3.0.0.tgz",
 			"integrity": "sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==",
+			"peer": true,
 			"dependencies": {
 				"ssr-window": "^3.0.0-alpha.1"
 			}
 			"resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
 			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
 		},
+		"node_modules/grid-layout-plus": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/grid-layout-plus/-/grid-layout-plus-1.1.1.tgz",
+			"integrity": "sha512-7CWehJubrVC8Ps5QFUlnDsp0kiREvKfi3Pdjp21EyY8BNzSusqI3Utcxvu1Y9UUKe3YExvbhJzIxHK6rorbRaQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@vexip-ui/hooks": "^2.8.0",
+				"@vexip-ui/utils": "^2.16.1",
+				"interactjs": "^1.10.27"
+			},
+			"peerDependencies": {
+				"vue": "^3.0.0"
+			}
+		},
 		"node_modules/has-ansi": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmmirror.com/has-ansi/-/has-ansi-2.0.0.tgz",
 			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
 			"license": "ISC"
 		},
+		"node_modules/interactjs": {
+			"version": "1.10.27",
+			"resolved": "https://registry.npmjs.org/interactjs/-/interactjs-1.10.27.tgz",
+			"integrity": "sha512-y/8RcCftGAF24gSp76X2JS3XpHiUvDQyhF8i7ujemBz77hwiHDuJzftHx7thY8cxGogwGiPJ+o97kWB6eAXnsA==",
+			"license": "MIT",
+			"dependencies": {
+				"@interactjs/types": "1.10.27"
+			}
+		},
 		"node_modules/internal-slot": {
 			"version": "1.0.7",
 			"resolved": "https://registry.npmmirror.com/internal-slot/-/internal-slot-1.0.7.tgz",
 		"node_modules/is-hotkey": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmmirror.com/is-hotkey/-/is-hotkey-0.2.0.tgz",
-			"integrity": "sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw=="
+			"integrity": "sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw==",
+			"peer": true
 		},
 		"node_modules/is-map": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmmirror.com/less/-/less-4.2.0.tgz",
 			"integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==",
 			"devOptional": true,
+			"peer": true,
 			"dependencies": {
 				"copy-anything": "^2.0.1",
 				"parse-node-version": "^1.0.1",
 		"node_modules/lodash": {
 			"version": "4.17.21",
 			"resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
-			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+			"peer": true
 		},
 		"node_modules/lodash-es": {
 			"version": "4.17.21",
 			"resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
-			"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+			"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+			"peer": true
 		},
 		"node_modules/lodash-unified": {
 			"version": "1.0.3",
 		"node_modules/lodash.camelcase": {
 			"version": "4.3.0",
 			"resolved": "https://registry.npmmirror.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
-			"integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA=="
+			"integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
+			"peer": true
 		},
 		"node_modules/lodash.clonedeep": {
 			"version": "4.5.0",
 			"resolved": "https://registry.npmmirror.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
-			"integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ=="
+			"integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
+			"peer": true
 		},
 		"node_modules/lodash.debounce": {
 			"version": "4.0.8",
 			"resolved": "https://registry.npmmirror.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-			"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+			"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+			"peer": true
 		},
 		"node_modules/lodash.foreach": {
 			"version": "4.5.0",
 			"resolved": "https://registry.npmmirror.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
-			"integrity": "sha512-aEXTF4d+m05rVOAUG3z4vZZ4xVexLKZGF0lIxuHZ1Hplpk/3B6Z1+/ICICYRLm7c41Z2xiejbkCkJoTlypoXhQ=="
+			"integrity": "sha512-aEXTF4d+m05rVOAUG3z4vZZ4xVexLKZGF0lIxuHZ1Hplpk/3B6Z1+/ICICYRLm7c41Z2xiejbkCkJoTlypoXhQ==",
+			"peer": true
 		},
 		"node_modules/lodash.isequal": {
 			"version": "4.5.0",
 			"resolved": "https://registry.npmmirror.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
-			"integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
+			"integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+			"peer": true
 		},
 		"node_modules/lodash.throttle": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmmirror.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
-			"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+			"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
+			"peer": true
 		},
 		"node_modules/lodash.toarray": {
 			"version": "4.4.0",
 			"resolved": "https://registry.npmmirror.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
-			"integrity": "sha512-QyffEA3i5dma5q2490+SgCvDN0pXLmRGSyAANuVi0HQ01Pkfr9fuoKQW8wm1wGBnJITs/mS7wQvS6VshUEBFCw=="
+			"integrity": "sha512-QyffEA3i5dma5q2490+SgCvDN0pXLmRGSyAANuVi0HQ01Pkfr9fuoKQW8wm1wGBnJITs/mS7wQvS6VshUEBFCw==",
+			"peer": true
 		},
 		"node_modules/magic-string": {
 			"version": "0.30.5",
 					"url": "https://github.com/sponsors/ai"
 				}
 			],
+			"peer": true,
 			"bin": {
 				"nanoid": "bin/nanoid.cjs"
 			},
 					"url": "https://github.com/sponsors/ai"
 				}
 			],
+			"peer": true,
 			"dependencies": {
 				"nanoid": "^3.3.7",
 				"picocolors": "^1.0.0",
 			"version": "4.9.5",
 			"resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.9.5.tgz",
 			"integrity": "sha512-E4vQW0H/mbNMw2yLSqJyjtkHY9dslf/p0zuT1xehNRqUTBOFMqEjguDvqhXr7N7r/4ttb2jr4T41d3dncmIgbQ==",
+			"peer": true,
 			"dependencies": {
 				"@types/estree": "1.0.5"
 			},
 			"resolved": "https://registry.npmmirror.com/sass/-/sass-1.77.8.tgz",
 			"integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
 			"devOptional": true,
+			"peer": true,
 			"dependencies": {
 				"chokidar": ">=3.0.0 <4.0.0",
 				"immutable": "^4.0.0",
 			"version": "0.72.8",
 			"resolved": "https://registry.npmmirror.com/slate/-/slate-0.72.8.tgz",
 			"integrity": "sha512-/nJwTswQgnRurpK+bGJFH1oM7naD5qDmHd89JyiKNT2oOKD8marW0QSBtuFnwEbL5aGCS8AmrhXQgNOsn4osAw==",
+			"peer": true,
 			"dependencies": {
 				"immer": "^9.0.6",
 				"is-plain-object": "^5.0.0",
 			"version": "3.6.2",
 			"resolved": "https://registry.npmmirror.com/snabbdom/-/snabbdom-3.6.2.tgz",
 			"integrity": "sha512-ig5qOnCDbugFntKi6c7Xlib8bA6xiJVk8O+WdFrV3wxbMqeHO0hXFQC4nAhPVWfZfi8255lcZkNhtIBINCc4+Q==",
+			"peer": true,
 			"engines": {
 				"node": ">=12.17.0"
 			}
 			"version": "5.0.11",
 			"resolved": "https://registry.npmmirror.com/vite/-/vite-5.0.11.tgz",
 			"integrity": "sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==",
+			"peer": true,
 			"dependencies": {
 				"esbuild": "^0.19.3",
 				"postcss": "^8.4.32",
 			"version": "3.4.13",
 			"resolved": "https://registry.npmmirror.com/vue/-/vue-3.4.13.tgz",
 			"integrity": "sha512-FE3UZ0p+oUZTwz+SzlH/hDFg+XsVRFvwmx0LXjdD1pRK/cO4fu5v6ltAZji4za4IBih3dV78elUK3di8v3pWIg==",
+			"peer": true,
 			"dependencies": {
 				"@vue/compiler-dom": "3.4.13",
 				"@vue/compiler-sfc": "3.4.13",

package.json

 		"dayjs": "^1.11.10",
 		"echarts": "^5.5.1",
 		"element-plus": "^2.5.1",
+		"grid-layout-plus": "^1.1.1",
 		"js-base64": "^3.7.7",
 		"js-sha256": "^0.11.0",
 		"jsencrypt": "^3.3.2",

src/main.js

 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 //引入element-plus库
+// 引入Grid Layout Plus库
+import { GridLayout, GridItem } from 'grid-layout-plus'
 
 import ElementPlus from 'element-plus'  
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 pinia.use(piniaPluginPersistedstate)
 const app = createApp(App)
 
- 
+
+app.component('GridLayout', GridLayout).component('GridItem', GridItem)
 
 app.use(pinia) 
 app.use(routers) 

src/views/sto/record/inRecord.vue

             {{ formatDateTime(row.inDtm) ?? '-' }}
           </template>
         </el-table-column>
-        <el-table-column prop="ownerCompany" label="货权公司" min-width="160" header-align="center" align="center" show-overflow-tooltip />
-        <el-table-column prop="receivingCompany" label="收货公司" min-width="160" header-align="center" align="center" show-overflow-tooltip />
+        <el-table-column prop="ownerCompanyName" label="货权公司" min-width="160" header-align="center" align="center" show-overflow-tooltip />
+        <el-table-column prop="receivingCompanyName" label="收货公司" min-width="160" header-align="center" align="center" show-overflow-tooltip />
         <el-table-column label="最终客户公司" min-width="180" header-align="center" align="center" show-overflow-tooltip>
           <template #default="{ row }">
-            {{ row.customerCompany ?? row.CustomerCompany ?? '-' }}
+            {{ row.customerCompanyName ?? row.CustomerCompanyName ?? '-' }}
           </template>
         </el-table-column>
         <el-table-column prop="prodNo" label="材料号" min-width="140" header-align="center" align="center" show-overflow-tooltip />

src/views/sto/ware/InStore.vue

         :data="tableData"
         border
         highlight-current-row
+        @selection-change="handleSelectionChange"
     >
+      <el-table-column type="selection" :selectable="selectable" width="55" />
       <el-table-column type="index" label="序号" align="center" width="60">
         <template #default="scope">
           <span>{{ scope.$index + 1}}</span>
           {{ formatDateTime(row.inDtm) ?? '-' }}
         </template>
       </el-table-column>
-      <el-table-column prop="ownerCompany" label="货权公司" min-width="160" header-align="center" align="center" show-overflow-tooltip />
-      <el-table-column prop="receivingCompany" label="收货公司" min-width="160" header-align="center" align="center" show-overflow-tooltip />
+      <el-table-column prop="ownerCompanyName" label="货权公司" min-width="160" header-align="center" align="center" show-overflow-tooltip />
+      <el-table-column prop="receivingCompanyName" label="收货公司" min-width="160" header-align="center" align="center" show-overflow-tooltip />
       <el-table-column label="最终客户公司" min-width="180" header-align="center" align="center" show-overflow-tooltip>
         <template #default="{ row }">
-          {{ row.customerCompany ?? row.CustomerCompany ?? '-' }}
+          {{ row.customerCompanyName ?? row.customerCompanyName ?? '-' }}
         </template>
       </el-table-column>
       <el-table-column prop="prodNo" label="材料号" min-width="140" header-align="center" align="center" show-overflow-tooltip />
 <script setup>
 import {getCurrentInstance, onMounted, reactive, ref} from 'vue'
 import tools from '@/tools'
-import {ElMessage, ElUpload} from 'element-plus';
+import {ElMessage, ElMessageBox, ElUpload} from 'element-plus';
 import axios from "axios";
 
 const {proxy} = getCurrentInstance()
       handleClose()
     } else {
       ElMessage.error('入库失败！' + response.data.msg)
+      fileUpload.value = []
       loading.value = false
     }
   })
   fileUpload.value = []
   progress.value = 0
   prog.value = false
+  singLoading.value = false
+  getTableData()
+  getStatistics()
 }
 // ========================================取消入库=====================================
 const cancelInStore = () => {
+  if(multipleSelection.value.length>1){
+    ElMessage.warning('一次只能取消一个入库单')
+    return;
+  }
+  if(multipleSelection.value.length==0){
+    return ElMessage.warning("请选择一个入库记录")
+  }
+  ElMessageBox.confirm(
+      '确认取消入库吗?',
+      '提示',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }
+  ).then(() => {
+        const params = {
+          id: multipleSelection.value[0].id,
+          prodId:multipleSelection.value[0].prodId
+        };
+
+        handleCancelInStore(params)
+  })
+      .catch(() => {
+
+      })
+}
+const handleCancelInStore = (params) => {
+  proxy.$axios.post('/sto/InRecord/cancelInStore',
+      { params: JSON.stringify(params) }
+  ).then((response) => {
+    console.log('完整响应对象:', response);
+    console.log('响应数据:', response.data);
 
+    // 首先检查 response 是否存在以及是否包含 data 属性
+    if (!response || !response.data) {
+      ElMessage.error('服务器未返回有效数据');
+      return;
+    }
+    if (response.data.code == '0') {
+      ElMessage.success('取消入库成功');
+      getTableData();
+      getStatistics()
+    } else {
+      ElMessage.error(response.data.msg || response.data.message || '操作失败');
+    }
+  }).catch((error) => {
+    console.error('取消入库失败:', error);
+    ElMessage.error('请求失败，请重试');
+  });
+}
+// ========================================列表多选框===================================
+let multipleSelection = ref([])
+const handleSelectionChange = (val) => {
+  multipleSelection.value = val
 }
 // ========================================生命周期=====================================
 onMounted(() => {

src/views/sto/ware/storeChange.vue

 <template>
   <div>
     <el-card :body-style="cardBodyStyle">
-      <el-form :model="query" label-width="90px" label-position="right">
-        <el-row :gutter="10">
+      <el-form :model="query" label-width="90" label-position="right">
+        <el-row :gutter="24">
           <el-col :span="6">
             <el-form-item label="库房名称">
               <el-select
           </el-col>
         </el-row>
 
-        <el-row :gutter="10">
+        <el-row :gutter="24">
           <el-col :span="6">
             <el-form-item label="规格型号">
               <el-input v-model="query.attrib_03" clearable placeholder="请输入规格型号" />
           </el-col>
         </el-row>
 
-        <el-row :gutter="10">
+        <el-row :gutter="24">
           <el-col :span="6">
             <el-form-item label="合约号">
               <el-input v-model="query.attrib_02" clearable placeholder="请输入合约号" />
               <el-input v-model="query.attrib_04" clearable placeholder="请输入捆绑号" />
             </el-form-item>
           </el-col>
-        </el-row>
-
-        <el-row :gutter="10">
           <el-col :span="6">
             <el-form-item label="货权单位">
               <el-select
-                v-model="query.ownerCompany"
-                clearable
-                filterable
-                placeholder="请选择货权单位"
-                style="width: 100%;"
-                @visible-change="handleOwnerVisible"
+                  v-model="query.ownerCompany"
+                  clearable
+                  filterable
+                  placeholder="请选择货权单位"
+                  style="width: 100%;"
+                  @visible-change="handleOwnerVisible"
               >
                 <el-option
-                  v-for="item in ownerCompanyOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
+                    v-for="item in ownerCompanyOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
                 />
               </el-select>
             </el-form-item>
           <el-col :span="6">
             <el-form-item label="客户名称">
               <el-select
-                v-model="query.customerCompany"
-                clearable
-                filterable
-                placeholder="请选择客户名称"
-                style="width: 100%;"
-                @visible-change="handleCustomerVisible"
+                  v-model="query.customerCompany"
+                  clearable
+                  filterable
+                  placeholder="请选择客户名称"
+                  style="width: 100%;"
+                  @visible-change="handleCustomerVisible"
               >
                 <el-option
-                  v-for="item in customerCompanyOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
+                    v-for="item in customerCompanyOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
                 />
               </el-select>
             </el-form-item>
           </el-col>
-<!--          <el-col :span="6">-->
-<!--            <el-form-item label="出库车号">-->
-<!--              <el-input v-model="query.outTruckNo" clearable placeholder="请输入出库车号" />-->
-<!--            </el-form-item>-->
-<!--          </el-col>-->
         </el-row>
 
-        <el-row :gutter="10">
+<!--        <el-row :gutter="10">-->
+
+<!--&lt;!&ndash;          <el-col :span="6">&ndash;&gt;-->
+<!--&lt;!&ndash;            <el-form-item label="出库车号">&ndash;&gt;-->
+<!--&lt;!&ndash;              <el-input v-model="query.outTruckNo" clearable placeholder="请输入出库车号" />&ndash;&gt;-->
+<!--&lt;!&ndash;            </el-form-item>&ndash;&gt;-->
+<!--&lt;!&ndash;          </el-col>&ndash;&gt;-->
+<!--        </el-row>-->
+
+        <el-row :gutter="24">
           <el-col :span="8">
             <el-form-item label="入库时间">
               <el-date-picker
               />
             </el-form-item>
           </el-col>
-          <el-col :span="16">
-            <el-form-item label=" ">
-              <el-button type="primary" @click="handleSearch">查询</el-button>
-              <el-button @click="handleReset">重置</el-button>
-              <el-button type="primary" @click="handleTransferOwnership">货权转移</el-button>
-              <el-button type="primary" @click="handleAllocate">配货</el-button>
-              <el-button type="primary" @click="handleOutStock">出库</el-button>
-              <el-button @click="handleExport">导出记录</el-button>
-
-              <el-dropdown @command="handleOtherCommand">
-                <el-button>
-                  其他操作
-                  <i class="el-icon-arrow-down el-icon--right" />
-                </el-button>
-                <template #dropdown>
-                  <el-dropdown-menu>
-                    <el-dropdown-item command="cancelIn">取消入库</el-dropdown-item>
-                    <el-dropdown-item command="batchEdit">批量修改</el-dropdown-item>
-                    <el-dropdown-item command="batchMove">批量倒垛</el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-
-              <el-dropdown @command="handleLockCommand">
-                <el-button type="danger">
-                  封锁出仓
-                  <i class="el-icon-arrow-down el-icon--right" />
-                </el-button>
-                <template #dropdown>
-                  <el-dropdown-menu>
-                    <el-dropdown-item command="lock">封锁</el-dropdown-item>
-                    <el-dropdown-item command="unlock">取消封锁</el-dropdown-item>
-                    <el-dropdown-item command="inStock">入仓</el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-            </el-form-item>
-          </el-col>
         </el-row>
       </el-form>
+      <el-row :gutter="24">
+        <el-col >
+            <el-button type="primary" @click="handleSearch">查询</el-button>
+            <el-button @click="handleReset">重置</el-button>
+            <el-button type="primary" @click="handleTransferOwnership">货权转移</el-button>
+            <el-button type="primary" @click="handleAllocate">配货</el-button>
+            <el-button type="primary" @click="handleOutStock">出库</el-button>
+            <el-button type="success" @click="handleExport">导出</el-button>
+
+            <el-dropdown style="margin-left: 1%" @command="handleOtherCommand">
+              <el-button>
+                其他操作
+                <i class="el-icon-arrow-down el-icon--right" />
+              </el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="cancelIn">取消入库</el-dropdown-item>
+                  <!--                    <el-dropdown-item command="batchEdit">批量修改</el-dropdown-item>-->
+                  <el-dropdown-item command="batchMove">批量倒垛</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+
+            <el-dropdown style="margin-left: 1%" @command="handleLockCommand">
+              <el-button type="danger">
+                封锁出仓
+                <i class="el-icon-arrow-down el-icon--right" />
+              </el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="lock">封锁</el-dropdown-item>
+                  <el-dropdown-item command="unlock">取消封锁</el-dropdown-item>
+                  <el-dropdown-item command="inStock">入仓</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+        </el-col>
+      </el-row>
     </el-card>
 
     <el-card :body-style="cardBodyStyle" class="summary-card">
         </el-table-column>
         <el-table-column label="规格型号" min-width="160" header-align="center" align="center" show-overflow-tooltip>
           <template #default="{ row }">
-            {{ row.attrib_03 ?? row.materialStandard ?? '-' }}
+            {{ row.attrib03 ?? row.materialStandard ?? '-' }}
           </template>
         </el-table-column>
         <el-table-column prop="inDtm" label="入库时间" min-width="180" header-align="center" align="center" show-overflow-tooltip />
             {{ row.inTruckNo ?? row.carNo ?? '-' }}
           </template>
         </el-table-column>
-        <el-table-column prop="attrib_01" label="订单号" min-width="160" header-align="center" align="center" show-overflow-tooltip />
-        <el-table-column prop="attrib_02" label="合约号" min-width="160" header-align="center" align="center" show-overflow-tooltip />
-        <el-table-column prop="attrib_04" label="捆包号" min-width="160" header-align="center" align="center" show-overflow-tooltip />
-        <el-table-column prop="attrib_05" label="产地" min-width="160" header-align="center" align="center" show-overflow-tooltip />
+        <el-table-column prop="attrib01" label="订单号" min-width="160" header-align="center" align="center" show-overflow-tooltip />
+        <el-table-column prop="attrib02" label="合约号" min-width="160" header-align="center" align="center" show-overflow-tooltip />
+        <el-table-column prop="attrib04" label="捆包号" min-width="160" header-align="center" align="center" show-overflow-tooltip />
+        <el-table-column prop="attrib05" label="产地" min-width="160" header-align="center" align="center" show-overflow-tooltip />
         <el-table-column label="重量" min-width="140" header-align="center" align="right" show-overflow-tooltip>
           <template #default="{ row }">
             {{ row.weight ?? row.WEIGHT ?? '-' }}
 <!--        </el-table-column>-->
         <el-table-column prop="deliveryAddress" label="收货地址" min-width="200" header-align="center" align="center" show-overflow-tooltip />
 <!--        <el-table-column prop="outDtm" label="出库时间" min-width="180" header-align="center" align="center" show-overflow-tooltip />-->
-        <el-table-column prop="remark_1" label="备注" min-width="160" header-align="center" align="center" show-overflow-tooltip />
+        <el-table-column prop="remark1" label="备注" min-width="160" header-align="center" align="center" show-overflow-tooltip />
       </el-table>
     </el-card>
 
 import PopupBatchMove from '../components/PopupBatchMove.vue'
 import PopupTransferOwnership from '../components/PopupTransferOwnership.vue'
 import PopupEdit from '../components/PopupEdit.vue'
+import axios from "axios";
 
 const {proxy} = getCurrentInstance()
 
       if (response.data.code === '0' || response.data.code === 0) {
         const data = response.data.data || {}
         statistics.totalQuantity =
-          data.totalQuantity ??
+          data.TOTALQUANTITY ??
           data.outQuantity ??
           data.OUT_QUANTITY ??
           data.totalQty ??
           0
         statistics.totalWeight =
-          data.totalWeight ??
+          data.TOTALWEIGHT ??
           data.outWeight ??
           data.OUT_WEIGHT ??
           data.totalWgt ??
 }
 
 const handleExport = () => {
-  // TODO 导出记录逻辑
-  console.log('导出记录', buildQueryParams())
+  if (multipleSelection.value.length === 0) {
+    ElMessage.warning('请选择要导出的数据');
+    return;
+  }
+  const exportData = mapTableData(multipleSelection.value)
+  axios({
+    method: 'POST',
+    url: '/sto/InRecord/exportInRecode',
+    data: exportData,  // 使用转换后的数据
+    responseType: 'blob',
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  }).then((response) => {
+    // 创建下载链接
+    const url = window.URL.createObjectURL(new Blob([response.data]));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', `入库记录_${new Date().getTime()}.xlsx`);
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    window.URL.revokeObjectURL(url);
+
+    ElMessage.success('导出成功');
+  }).catch((error) => {
+    console.error('导出失败:', error);
+    ElMessage.error('导出失败，请重试');
+  });
 }
+const mapTableData = (backendData) => {
+  if (!backendData || !Array.isArray(backendData)) {
+    return [];
+  }
+
+  return backendData.map(item => {
+    return {
+      // 表格选择框需要的字段
+      id: item.id,
+      wareId: item.wareId,
+      stackId: item.stackId,
+      storeId: item.storeId,
+
+      // 仓库信息（前端使用 outWareName/wareName 逻辑）
+      wareName: item.wareName,
+      outWareName: item.outWareName || item.wareName,
+
+      // 垛位信息（前端使用 outStackName/stackName 逻辑）
+      stackName: item.stackName,
+      outStackName: item.outStackName || item.stackName,
+
+      // 层号（前端使用 outLayerNo/layerNo 逻辑）
+      layerNo: item.layerNo,
+      outLayerNo: item.outLayerNo || item.layerNo,
+
+      // 物料信息
+      materialName: item.materialName,
+
+      // 钢种（统一使用 stGrade）
+      stGrade: item.stGrade,
+      ST_GRADE: item.stGrade, // 兼容原有大写字段
+
+      // 规格型号（将 attrib03 映射到 materialStandard）
+      attrib03: item.attrib_03, // 注意：后端返回的是 attrib_03
+      materialStandard: item.attrib_03, // 前端表格需要的字段
+
+      // 入库时间
+      inDtm: item.inDtm,
+
+      // 公司信息
+      ownerCompany: item.ownerCompany,
+      receivingCompany: item.receivingCompany,
+      customerCompany: item.customerCompany,
+      CustomerCompany: item.customerCompany, // 兼容大写
+
+      // 编号信息
+      prodNo: item.prodNo,
+      inTruckNo: item.inTruckNo,
+      carNo: item.inTruckNo, // 兼容 carNo 字段
+
+      // 属性字段（后端返回的是 attrib_01, attrib_02 等）
+      attrib01: item.attrib01,
+      attrib02: item.attrib02,
+      attrib04: item.attrib04,
+      attrib05: item.attrib05,
+
+      // 重量和数量
+      weight: item.weight,
+      WEIGHT: item.weight, // 兼容大写
+      quantity: item.quantity,
+      QUANTITY: item.quantity, // 兼容大写
+
+      // 其他字段
+      outFlag: item.outFlag,
+      deliveryAddress: item.deliveryAddress,
+      remark1: item.remark1,
+
+      // 如果需要保留原始数据
+      _rawData: item
+    };
+  });
+};
 
 const handleOtherCommand = (command) => {
   // 其他操作下拉：取消入库、批量修改、批量倒垛
     ElMessage.warning('请先选择要取消入库的数据')
     return
   }
+  if(multipleSelection.value.length>1){
+    ElMessage.warning('一次只能取消一个入库单')
+    return;
+  }
   
   ElMessageBox.confirm(
     '确认取消入库吗?',
       type: 'warning'
     }
   ).then(() => {
-    // 确认后执行取消入库
-    executeCancelInbound()
+    const params = {
+      id: multipleSelection.value[0].id,
+      prodId:multipleSelection.value[0].storeId
+    };
+    handleCancelInStore(params)
   }).catch(() => {
     // 取消操作
     ElMessage.info('已取消操作')
   })
 }
+const handleCancelInStore = (params) => {
+  proxy.$axios.post('/sto/InRecord/cancelInStore',
+      { params: JSON.stringify(params) }
+  ).then((response) => {
+    console.log('完整响应对象:', response);
+    console.log('响应数据:', response.data);
+
+    // 首先检查 response 是否存在以及是否包含 data 属性
+    if (!response || !response.data) {
+      ElMessage.error('服务器未返回有效数据');
+      return;
+    }
+    if (response.data.code == '0') {
+      ElMessage.success('取消入库成功');
+      getTableData();
+      getStatistics()
+    } else {
+      ElMessage.error(response.data.msg || response.data.message || '操作失败');
+    }
+  }).catch((error) => {
+    console.error('取消入库失败:', error);
+    ElMessage.error('请求失败，请重试');
+  });
+}
 
 // 批量修改
 const handleBatchEdit = () => {

src/views/sto/ware/testStack.vue

+<template>
+  <el-card>
+    <el-form :inline="true">
+      <el-form-item label="库房名称" style="width: 200px">
+        <el-select
+            v-model="query.wareId"
+            clearable
+            filterable
+            placeholder="请选择库房"
+            @visible-change="handleWareVisible"
+            @change="getAreaData"
+        >
+          <el-option
+              v-for="item in wareOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="垛位分区" style="width: 200px">
+        <el-select  placeholder="请选择区域" v-model="query.areaId">
+                    <el-option
+                        v-for="item in areaList"
+                        :key="item.id"
+                        :label="item.areaName"
+                        :value="item.id"
+                    />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getLayoutData">查询</el-button>
+        <el-button type="info" @click="reset">重置</el-button>
+<!--        <el-button type="success" @click="insertPartition">新增分区</el-button>-->
+      </el-form-item>
+    </el-form>
+  </el-card>
+  <el-card>
+    <div style="display: flex;justify-content: space-between">
+      <div class="switchB">
+        <el-button @click="openBatchAddDialog" type="success">新增区块</el-button>
+        <el-switch v-model="draggable" active-text="可拖动" inactive-text="" />
+        <el-switch v-model="resizable" active-text="可调整大小" inactive-text="" />
+      </div>
+      <div>
+        <el-button type="warning" @click="saveOrUpload">保存</el-button>
+      </div>
+    </div>
+<!--    {{layout}}-->
+    <GridLayout
+        v-model:layout="layout"
+        :col-num="colNum"
+        :row-height="30"
+        :is-draggable="draggable"
+        :is-resizable="resizable"
+    >
+      <template #item="{ item }">
+        <div class="item-container" @dblclick="startEditing(item)">
+        <span
+            v-if="!item.isEditing"
+            class="text"
+        >
+          {{ item.name || item.i }}
+        </span>
+          <el-input
+              v-else
+              v-model="item.tempName"
+              class="edit-input"
+              size="small"
+              @blur="finishEditing(item)"
+              @keyup.enter="finishEditing(item)"
+              @click.stop
+          />
+        </div>
+        <span
+            class="remove"
+            @click.stop="removeItem(item.i)"
+        >
+        x
+      </span>
+      </template>
+    </GridLayout>
+  </el-card>
+  <el-dialog
+      v-model="batchAddDialogVisible"
+      title="批量新增垛位"
+      width="500px"
+  >
+    <el-form :model="batchAddForm" label-width="100px">
+      <el-form-item label="新增数量">
+        <el-input-number
+            v-model="batchAddForm.count"
+            :min="1"
+            :max="100"
+            controls-position="right"
+        />
+      </el-form-item>
+      <el-form-item label="起始编号">
+        <el-input-number
+            v-model="batchAddForm.startFrom"
+            :min="0"
+            controls-position="right"
+        />
+      </el-form-item>
+      <el-form-item label="前缀">
+        <el-input
+            v-model="batchAddForm.prefix"
+            placeholder="请输入垛位前缀"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="batchAddDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="batchAddItems">确定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+
+<!--  新增分区弹窗-->
+<!--  <el-dialog-->
+<!--      class="diaClass"-->
+<!--      :close-on-click-modal="false"-->
+<!--      draggable-->
+<!--      title="新增"-->
+<!--      v-model="partition"-->
+<!--      width="40%"-->
+<!--      top="5vh"-->
+<!--  >-->
+<!--      <el-form :model="partitionForm" label-width="120px" label-position="right" inline ref="ruleFormRef" :rules="partitionRules">-->
+<!--        <el-row>-->
+<!--          <el-col :span="12">-->
+<!--            <el-form-item label="所属库房" prop="wareId">-->
+<!--              <el-select v-model="partitionForm.wareId" placeholder="请选择库房" style="width: 100%;">-->
+<!--                <el-option-->
+<!--                    v-for="item in wareOptions"-->
+<!--                    :key="item.value"-->
+<!--                    :label="item.label"-->
+<!--                    :value="item.value"-->
+<!--                />-->
+<!--              </el-select>-->
+<!--            </el-form-item>-->
+<!--          </el-col>-->
+<!--          <el-col :span="12">-->
+<!--            <el-form-item label="分区名称" prop="areaName">-->
+<!--              <el-input v-model="partitionForm.areaName" maxlength="100" placeholder="请输入分区名称"></el-input>-->
+<!--            </el-form-item>-->
+<!--          </el-col>-->
+<!--          <el-col :span="12">-->
+<!--            <el-form-item label="分区编码" prop="areaCode">-->
+<!--              <el-input v-model="partitionForm.areaCode" maxlength="50" placeholder="请输入分区编码"></el-input>-->
+<!--            </el-form-item>-->
+<!--          </el-col>-->
+<!--        </el-row>-->
+<!--      </el-form>-->
+<!--    <template #footer>-->
+<!--      <div class="dialog-footer">-->
+<!--        <el-button type="success" plain @click="handleInsert(ruleFormRef)">保存</el-button>-->
+<!--        <el-button type="danger" plain @click="handleCancelSave">取消</el-button>-->
+<!--      </div>-->
+<!--    </template>-->
+<!--  </el-dialog>-->
+
+</template>
+
+<script setup lang="ts">
+import {getCurrentInstance, reactive, ref} from 'vue'
+import {ElMessage} from "element-plus";
+import axios from "axios";
+
+const {proxy} = getCurrentInstance()
+// ==========================================垛位操控======================================
+let index = 0
+
+const draggable = ref(true)
+const resizable = ref(true)
+const colNum = ref(12)
+
+let layout = ref([
+])
+
+// 在 script setup 中添加批量新增相关变量
+const batchAddDialogVisible = ref(false)
+const batchAddForm = reactive({
+  count: 1,
+  startFrom: 0,
+  prefix: '垛位'
+})
+
+// 批量新增方法
+function batchAddItems() {
+  if(query.value.wareId==''||query.value.areaId==''){
+    return ElMessage.error('请选择库房和分区！')
+  }
+
+  if(batchAddForm.count <= 0) {
+    return ElMessage.error('新增数量必须大于0')
+  }
+
+  for(let i = 0; i < batchAddForm.count; i++) {
+    const newIndex = batchAddForm.startFrom + i
+    layout.value.push({
+      x: (newIndex * 2) % (colNum.value || 12),
+      y: newIndex + (colNum.value || 12),
+      w: 2,
+      h: 2,
+      i: `${batchAddForm.prefix}${newIndex}`,
+      name: `${batchAddForm.prefix}${newIndex}`
+    })
+  }
+
+  batchAddDialogVisible.value = false
+  ElMessage.success(`成功新增 ${batchAddForm.count} 个垛位`)
+}
+
+// 打开批量新增对话框
+function openBatchAddDialog() {
+  if(query.value.wareId==''||query.value.areaId==''){
+    return ElMessage.error('请选择库房和分区！')
+  }
+  batchAddDialogVisible.value = true
+  batchAddForm.count = 1
+  batchAddForm.startFrom = layout.value.length
+  batchAddForm.prefix = '垛位'
+}
+
+
+// function addItem() {
+//   if(query.value.wareId==''||query.value.areaId==''){
+//     return ElMessage.error('请选择库房和分区！')
+//   }
+//   layout.value.push({
+//     x: (layout.value.length * 2) % (colNum.value || 12),
+//     y: layout.value.length + (colNum.value || 12), // puts it at the bottom
+//     w: 2,
+//     h: 2,
+//     i: `${index++}`,
+//   })
+// }
+
+function removeItem(id: string) {
+  const index = layout.value.findIndex(item => item.i === id)
+
+  if (index > -1) {
+    layout.value.splice(index, 1)
+  }
+}
+// ========================================查询=============================================
+let query = ref({
+  wareId: '',
+  areaId:''
+})
+const reset = () => {
+  query.value = {
+    wareId: '',
+    areaId:''
+  }
+  layout.value = []
+  areaList.value = []
+}
+// ----------------------------查询库房列表------------------------------
+const wareOptions = ref([])
+const handleWareVisible = (visible) => {
+  if (visible && wareOptions.value.length === 0) {
+    fetchWareOptions()
+  }
+}
+const fetchWareOptions = () => {
+  proxy.$axios.get('sto/Ware/options', {}).then((response) => {
+    if (response.data.code === 0 || response.data.code === '0') {
+      wareOptions.value = toOptions(response.data.data, 'label', 'value')
+    }
+  })
+}
+const toOptions = (list, labelKey, valueKey) => (list || []).map((item) => {
+      if (typeof item === 'string') {
+        return {
+          label: item,
+          value: item
+        }
+      }
+      return {
+        label: item?.[labelKey] ?? item?.label ?? item?.name ?? item?.value ?? '',
+        value: item?.[valueKey] ?? item?.value ?? item?.id ?? item?.code ?? item?.label ?? ''
+      }
+    }).filter((item) => item.label !== '' && item.value !== '')
+// ----------------------------查询分区列表------------------------------
+const areaList = ref([])
+const getAreaData = () => {
+  if(query.value.wareId==null || query.value.wareId==''){
+    query.value.areaId = ''
+  }
+  const params = {
+    page: 1,
+    rows:99999,
+    wareId: query.value.wareId,
+    json: JSON.stringify(query.value)
+  }
+  proxy.$axios.get('sto/Area/query', params).then((response) => {
+    if (response.data.code === 0) {
+      areaList.value = response.data.data.records
+      if(areaList.value.length==0){
+        query.value.areaId = ''
+      }
+    } else {
+      ElMessage.error('操作失败！' + response.data.msg)
+    }
+  })
+}
+// ----------------------------查询垛位布局------------------------------
+const getLayoutData = () => {
+  if(query.value.wareId==''||query.value.areaId==''){
+    return ElMessage.error('请选择库房和分区！')
+  }
+  proxy.$axios.get('sto/MaintStack/queryByWareIdAndAreaId', {
+    wareId: query.value.wareId,
+    areaId: query.value.areaId
+  }).then((response) => {
+    if (response.data.code === '0') {
+      layout.value = response.data.data
+    } else {
+      ElMessage.error('操作失败！' + response.data.msg)
+    }
+  })
+}
+// =========================================新增分区============================================
+// let partition = ref(false)
+// let partitionForm = ref({
+//   wareId: '',
+//   areaName: '',
+//   areaCode: ''
+// })
+// const partitionRules = reactive({
+//   wareId: [{ required: true, message: '请选择所属库房', trigger: 'change' }],
+//   areaName: [{ required: true, message: '请输入分区名称', trigger: 'blur' }],
+//   areaCode: [{ required: true, message: '请输入分区编码', trigger: 'blur' }]
+// })
+// const insertPartition = () => {
+//   partition.value = true
+// }
+// ===========================================修改垛位名称=======================================
+// 在 script setup 中添加编辑功能
+function startEditing(item: any) {
+  // 保存原始名称
+  item.tempName = item.name || item.i
+  item.isEditing = true
+}
+
+function finishEditing(item: any) {
+  // 如果输入不为空，则更新名称
+  if (item.tempName && item.tempName.trim()) {
+    item.i = item.tempName.trim()
+  }
+  item.isEditing = false
+}
+// ==========================================保存=============================================
+const saveOrUpload = () => {
+  if(query.value.wareId==''||query.value.areaId==''){
+    return ElMessage.error('请选择库房和分区！')
+  }
+
+  const requestData = {
+    wareId: query.value.wareId,
+    areaId: query.value.areaId,
+    layoutStacks: layout.value
+  }
+
+  axios.post('sto/MaintStack/saveOrUpdateStack', requestData, {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+      .then((response) => {
+        if (response && response.data && response.data.code === '0') {
+          ElMessage.success('操作成功！')
+        } else {
+          ElMessage.error('操作失败！' + (response?.data?.msg || '未知错误'))
+        }
+      })
+      .catch((error) => {
+        console.error('保存失败:', error);
+        ElMessage.error('保存失败：' + (error.message || '网络错误'));
+      })
+}
+
+
+</script>
+
+<style scoped>
+.vgl-layout {
+  background-color: #eee;
+  --vgl-resizer-border-color: #f15642;
+}
+
+:deep(.vgl-item:not(.vgl-item--placeholder)) {
+  background-color: #ccc;
+  border: 1px solid black;
+}
+
+:deep(.vgl-item--resizing) {
+  opacity: 90%;
+}
+
+:deep(.vgl-item--static) {
+  background-color: #cce;
+}
+
+.text {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  font-size: 24px;
+  text-align: center;
+}
+
+
+
+.remove {
+  position: absolute;
+  top: 0;
+  right: 2px;
+  cursor: pointer;
+}
+.action-btn {
+  position: absolute;
+  cursor: pointer;
+}
+.switchB {
+  margin: 15px;
+  display: flex;
+  justify-content: space-between;
+  width: 26%;
+}
+
+.item-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.text {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  font-size: 24px;
+  text-align: center;
+  line-height: 100%; /* 让文字垂直居中 */
+  cursor: pointer;
+  user-select: none; /* 防止双击选中文本 */
+}
+
+.edit-input {
+  position: absolute;
+  width: 80%;
+  height: 80%;
+  z-index: 10;
+  cursor: text;
+}
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+
+</style>