Просмотр исходного кода

简化船公司下拉框实现,使用Element Plus的本地过滤功能

- 移除remote和remote-method配置,使用filterable实现本地搜索
- 移除自定义的searchShipCompany、filterShipCompanyList等方法
- 移除allShipCompanyList、shipCompanyQuery等不需要的属性
- 简化getShipCompanyList方法,直接从后端获取数据
- 使用Element Plus内置的filterable功能实现搜索
heyiwen 12 часов назад
Родитель
Сommit
026c5ebe8c
1 измененных файлов с 3 добавлено и 42 удалено
  1. 3 42
      vue-frontend/src/components/PilotPlan.vue

+ 3 - 42
vue-frontend/src/components/PilotPlan.vue

@@ -84,11 +84,8 @@
               style="width: 180px"
               clearable
               filterable
-              remote
-              :remote-method="searchShipCompany"
               :loading="shipCompanyLoading"
               @visible-change="handleShipCompanyVisibleChange"
-              @scroll="handleShipCompanyScroll"
             >
               <el-option
                 v-for="company in shipCompanyList"
@@ -302,12 +299,7 @@ export default {
       pilotPlans: [],
       portList: [],
       shipCompanyList: [],
-      allShipCompanyList: [],
-      shipCompanyQuery: '',
-      shipCompanyPage: 1,
-      shipCompanyPageSize: 10,
       shipCompanyLoading: false,
-      shipCompanyHasMore: true,
       currentPage: 1,
       pageSize: 20,
       total: 0,
@@ -411,14 +403,10 @@ export default {
         });
     },
     getShipCompanyList() {
-      this.getShipCompanyListByPage('', 1);
-    },
-    getShipCompanyListByPage(query, page) {
       this.shipCompanyLoading = true;
       this.$axios.get('/api/ship-company/list')
         .then(response => {
-          this.allShipCompanyList = response.data || [];
-          this.filterShipCompanyList(query, page);
+          this.shipCompanyList = response.data || [];
         })
         .catch(error => {
           console.error('获取船公司列表失败:', error);
@@ -428,36 +416,9 @@ export default {
           this.shipCompanyLoading = false;
         });
     },
-    filterShipCompanyList(query, page) {
-      let filteredList = this.allShipCompanyList;
-      
-      if (query && query.trim()) {
-        const queryLower = query.toLowerCase();
-        filteredList = filteredList.filter(company => 
-          company.companyName && company.companyName.toLowerCase().includes(queryLower)
-        );
-      }
-      
-      const startIndex = (page - 1) * this.shipCompanyPageSize;
-      const endIndex = startIndex + this.shipCompanyPageSize;
-      this.shipCompanyList = filteredList.slice(startIndex, endIndex);
-      this.shipCompanyHasMore = endIndex < filteredList.length;
-    },
-    searchShipCompany(query) {
-      this.shipCompanyQuery = query || '';
-      this.shipCompanyPage = 1;
-      this.filterShipCompanyList(this.shipCompanyQuery, this.shipCompanyPage);
-    },
     handleShipCompanyVisibleChange(visible) {
-      if (visible && !this.shipCompanyQuery && this.allShipCompanyList.length === 0) {
-        this.shipCompanyPage = 1;
-        this.getShipCompanyListByPage('', this.shipCompanyPage);
-      }
-    },
-    handleShipCompanyScroll() {
-      if (this.shipCompanyHasMore && !this.shipCompanyLoading) {
-        this.shipCompanyPage++;
-        this.filterShipCompanyList(this.shipCompanyQuery, this.shipCompanyPage);
+      if (visible && this.shipCompanyList.length === 0) {
+        this.getShipCompanyList();
       }
     },
     getPilotPlans() {