|
|
@@ -86,6 +86,7 @@
|
|
|
filterable
|
|
|
:loading="shipCompanyLoading"
|
|
|
@visible-change="handleShipCompanyVisibleChange"
|
|
|
+ popper-class="ship-company-select-dropdown"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="company in shipCompanyList"
|
|
|
@@ -300,6 +301,10 @@ export default {
|
|
|
portList: [],
|
|
|
shipCompanyList: [],
|
|
|
shipCompanyLoading: false,
|
|
|
+ shipCompanyPage: 1,
|
|
|
+ shipCompanyPageSize: 10,
|
|
|
+ shipCompanyTotal: 0,
|
|
|
+ shipCompanyHasMore: true,
|
|
|
currentPage: 1,
|
|
|
pageSize: 20,
|
|
|
total: 0,
|
|
|
@@ -370,10 +375,12 @@ export default {
|
|
|
this.$nextTick(() => {
|
|
|
this.calculateTableHeight();
|
|
|
window.addEventListener('resize', this.calculateTableHeight);
|
|
|
+ this.addShipCompanyScrollListener();
|
|
|
});
|
|
|
},
|
|
|
beforeUnmount() {
|
|
|
window.removeEventListener('resize', this.calculateTableHeight);
|
|
|
+ this.removeShipCompanyScrollListener();
|
|
|
},
|
|
|
methods: {
|
|
|
calculateTableHeight() {
|
|
|
@@ -402,11 +409,23 @@ export default {
|
|
|
console.error('获取港口列表失败:', error);
|
|
|
});
|
|
|
},
|
|
|
- getShipCompanyList() {
|
|
|
+ getShipCompanyList(isLoadMore = false) {
|
|
|
this.shipCompanyLoading = true;
|
|
|
- this.$axios.get('/api/ship-company/list')
|
|
|
+ this.$axios.get('/api/ship-company/list', {
|
|
|
+ params: {
|
|
|
+ page: this.shipCompanyPage,
|
|
|
+ pageSize: this.shipCompanyPageSize
|
|
|
+ }
|
|
|
+ })
|
|
|
.then(response => {
|
|
|
- this.shipCompanyList = response.data.content || [];
|
|
|
+ const newCompanies = response.data.content || [];
|
|
|
+ if (isLoadMore) {
|
|
|
+ this.shipCompanyList = [...this.shipCompanyList, ...newCompanies];
|
|
|
+ } else {
|
|
|
+ this.shipCompanyList = newCompanies;
|
|
|
+ }
|
|
|
+ this.shipCompanyTotal = response.data.totalElements || 0;
|
|
|
+ this.shipCompanyHasMore = this.shipCompanyList.length < this.shipCompanyTotal;
|
|
|
})
|
|
|
.catch(error => {
|
|
|
console.error('获取船公司列表失败:', error);
|
|
|
@@ -418,9 +437,39 @@ export default {
|
|
|
},
|
|
|
handleShipCompanyVisibleChange(visible) {
|
|
|
if (visible && this.shipCompanyList.length === 0) {
|
|
|
+ this.shipCompanyPage = 1;
|
|
|
this.getShipCompanyList();
|
|
|
}
|
|
|
},
|
|
|
+ handleShipCompanyScroll(event) {
|
|
|
+ const { target } = event;
|
|
|
+ const scrollBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
|
|
|
+
|
|
|
+ if (scrollBottom < 10 && this.shipCompanyHasMore && !this.shipCompanyLoading) {
|
|
|
+ this.shipCompanyPage++;
|
|
|
+ this.getShipCompanyList(true);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addShipCompanyScrollListener() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const dropdown = document.querySelector('.ship-company-select-dropdown');
|
|
|
+ if (dropdown) {
|
|
|
+ const dropdownWrap = dropdown.querySelector('.el-select-dropdown__wrap');
|
|
|
+ if (dropdownWrap) {
|
|
|
+ dropdownWrap.addEventListener('scroll', this.handleShipCompanyScroll);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ removeShipCompanyScrollListener() {
|
|
|
+ const dropdown = document.querySelector('.ship-company-select-dropdown');
|
|
|
+ if (dropdown) {
|
|
|
+ const dropdownWrap = dropdown.querySelector('.el-select-dropdown__wrap');
|
|
|
+ if (dropdownWrap) {
|
|
|
+ dropdownWrap.removeEventListener('scroll', this.handleShipCompanyScroll);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
getPilotPlans() {
|
|
|
if (this.loading) return;
|
|
|
|
|
|
@@ -720,6 +769,16 @@ h3 {
|
|
|
font-size: 15px;
|
|
|
}
|
|
|
|
|
|
+.ship-company-select-dropdown {
|
|
|
+ max-height: 300px;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.ship-company-select-dropdown .el-select-dropdown__wrap {
|
|
|
+ max-height: 300px;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+</style>
|
|
|
.preview-dialog {
|
|
|
--el-dialog-margin-top: 5vh;
|
|
|
}
|