Parcourir la source

1、优化商品管理配置小程序的调整为分页处理优化

yys il y a 1 semaine
Parent
commit
5b94285d39
1 fichiers modifiés avec 58 ajouts et 7 suppressions
  1. 58 7
      src/views/hisStore/storeProduct/index.vue

+ 58 - 7
src/views/hisStore/storeProduct/index.vue

@@ -881,13 +881,34 @@
           </el-select>
         </el-form-item>
         <el-form-item label="所属小程序" prop="appIds">
-          <el-select style="width: 240px" v-model="appIds" placeholder="请选择所属小程序" clearable size="small" multiple>
+          <el-select
+            style="width: 240px"
+            v-model="appIds"
+            placeholder="请选择所属小程序"
+            clearable
+            size="small"
+            multiple
+            filterable
+            @visible-change="handleAppMallVisibleChange"
+          >
             <el-option
               v-for="dict in appMallOptions"
               :key="dict.appid"
               :label="dict.name + '(' + dict.appid + ')'"
               :value="dict.appid"
             />
+            <div style="padding: 10px; text-align: center;">
+              <el-button
+                v-if="appMallOptions.length < appMallTotal"
+                type="text"
+                size="small"
+                :loading="appMallLoading"
+                @click="loadMoreAppMall"
+              >
+                加载更多
+              </el-button>
+              <span v-else style="color: #999; font-size: 12px;">已加载全部</span>
+            </div>
           </el-select>
         </el-form-item>
         <el-form-item label="退货地址" prop="returnAddress">
@@ -1086,6 +1107,12 @@ export default {
       // 小程序列表
       appMallOptions:[],
       appIds:[], // 选择的小程序
+      appMallQueryParams: {
+        pageNum: 1,
+        pageSize: 30
+      },
+      appMallTotal: 0,
+      appMallLoading: false,
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -1238,8 +1265,8 @@ export default {
     getCompanyList().then(response => {
       this.companyOptions = response.data;
     });
-    // 查询小程序
-    this.getAppMallOptions();
+    // 查询小程序(首次加载30条)
+    this.getAppMallOptions(true);
 
     listStore(this.storeForm).then(response => {
       this.storeOptions = response.rows;
@@ -1248,10 +1275,34 @@ export default {
     this.getList();
   },
   methods: {
-    getAppMallOptions() {
-      getAppMallOptions({pageNum:1,pageSize:100}).then(response => {
-        this.appMallOptions = response.rows;
-      })
+    getAppMallOptions(reset = false) {
+      if (reset) {
+        this.appMallQueryParams.pageNum = 1;
+        this.appMallOptions = [];
+      }
+      this.appMallLoading = true;
+      getAppMallOptions(this.appMallQueryParams).then(response => {
+        const newRows = response.rows || [];
+        this.appMallTotal = response.total || 0;
+        if (reset) {
+          this.appMallOptions = newRows;
+        } else {
+          this.appMallOptions = [...this.appMallOptions, ...newRows];
+        }
+        this.appMallLoading = false;
+      }).catch(() => {
+        this.appMallLoading = false;
+      });
+    },
+    loadMoreAppMall() {
+      this.appMallQueryParams.pageNum++;
+      this.getAppMallOptions(false);
+    },
+    handleAppMallVisibleChange(visible) {
+      // 下拉框打开时,如果没有数据则重新加载
+      if (visible && this.appMallOptions.length === 0) {
+        this.getAppMallOptions(true);
+      }
     },
     getStatusText(row) {
       console.log()