Browse Source

```
feat(ApiSelect): 添加分页功能支持

新增 `pagination`、`pageNumFeild` 和 `pageSizeFeild` 属性以支持接口分页加载。
在滚动到底部时自动触发下一页数据请求,并合并至选项列表中。
同时增加 `total` 和 `page` 响应式变量用于分页控制。

修复(ZTable): 调整分页查询方法调用逻辑

将搜索表单提交后的数据获取方式从 `getData()` 改为 `getDataByPage(1)`,确保分页参数正确传递并重置页码。

chore(goods/desk-category): 注释替换及样式清理

临时注释切换 ApiSelect 组件使用的接口地址;
为数字输入框添加最小值限制;
移除无用的 scoped 样式代码。
```

zhangtao 3 days ago
parent
commit
09107b640b

+ 24 - 4
src/components/zt/ApiSelect/api-select.vue

@@ -13,7 +13,10 @@ const debouncedFn = useDebounceFn(() => {
 const props = withDefaults(defineProps<ApiSelectProps>(), {
   immediate: true,
   resultFeild: 'data',
-  clearable: true
+  clearable: true,
+  pagination: false,
+  pageNumFeild: 'current',
+  pageSizeFeild: 'size'
 });
 
 const fetchLoading = ref(false);
@@ -22,6 +25,8 @@ const options = ref<Recordable[]>([]);
 const modelVlaue = defineModel<Array<string | number> | string | number | null>();
 const isFirstReq = ref(false);
 const searchText = ref('');
+const total = ref(0);
+const page = ref(1);
 const bindValue = computed(() => {
   return {
     ...props,
@@ -37,17 +42,26 @@ async function fetchApi() {
   };
   if (unref(bindValue).filterFeild && unref(searchText)) {
     params[String(unref(bindValue).filterFeild)] = unref(searchText);
-    console.log(params, 'apiselect请求参数');
+    // console.log(params, 'apiselect请求参数');
+  }
+  if (unref(bindValue).pagination) {
+    params[unref(bindValue).pageNumFeild] = unref(page);
+    params[unref(bindValue).pageSizeFeild] = 10;
   }
   const res = await api(params);
-  options.value = get(res, props.resultFeild);
+
+  options.value = unref(bindValue).pagination ? [...options.value, ...res.data.records] : get(res, props.resultFeild);
   fetchLoading.value = false;
+  if (unref(bindValue).pagination) {
+    total.value = res.data.total;
+  }
 }
 onMounted(() => {
   if (unref(bindValue).immediate) {
     fetchApi();
   }
 });
+
 function handleFocus() {
   if (!unref(bindValue).immediate && !unref(isFirstReq)) {
     fetchApi();
@@ -60,7 +74,13 @@ function handleFocus() {
 function handleScroll(e: Event) {
   const currentTarget = e.currentTarget as HTMLElement;
   if (currentTarget.scrollTop + currentTarget.offsetHeight >= currentTarget.scrollHeight) {
-    // console.log('到底了');
+    console.log('到底了');
+    if (options.value.length < total.value && !fetchLoading.value) {
+      console.log('请求数据');
+      fetchLoading.value = true;
+      page.value += 1;
+      fetchApi();
+    }
   }
 }
 function handleSearch(value: string) {

+ 12 - 0
src/components/zt/ApiSelect/type/index.ts

@@ -30,4 +30,16 @@ export interface ApiSelectProps extends /* @vue-ignore */ SelectProps {
    * 过滤字段(请求筛选字段)
    */
   filterFeild?: string;
+  /**
+   * 是否分页查询
+   */
+  pagination?: boolean;
+  /**
+   * 分页页数字段(对标后端需要字段)
+   */
+  pageNumFeild?: string;
+  /**
+   * 分页条数字段(对标后端需要字段)
+   */
+  pageSizeFeild?: string;
 }

+ 3 - 3
src/components/zt/Table/z-table.vue

@@ -49,7 +49,7 @@ export default defineComponent({
       size: 10
     });
     const getForm = ref();
-    const { columns, columnChecks, data, getData, loading, mobilePagination } = useNaivePaginatedTable({
+    const { columns, columnChecks, data, getData, loading, mobilePagination, getDataByPage } = useNaivePaginatedTable({
       api: () => propsData.api({ ...searchPage, ...getForm.value }),
       transform: response => defaultTransform(response),
       onPaginationParamsChange: params => {
@@ -118,10 +118,10 @@ export default defineComponent({
         form[endTimeKey] = form.Time[1];
         delete form.Time;
       }
-      console.log(form, '请求参数');
+      console.log(form, '查询请求参数');
 
       getForm.value = form;
-      getData();
+      getDataByPage(1);
     }
     return {
       registerSearchForm,

+ 6 - 6
src/views/goods/desk-category/index.vue

@@ -123,6 +123,7 @@ const [
         component: 'ApiSelect',
         componentProps: {
           api: fetchGetAllTagList,
+          // api: fetchGetTagList,
           labelFeild: 'name',
           valueFeild: 'id'
         }
@@ -133,7 +134,10 @@ const [
         field: 'num',
         labelMessage: '数字越小越靠前',
         required: true,
-        defaultValue: 1
+        defaultValue: 1,
+        componentProps: {
+          min: 1
+        }
       }
     ],
     labelWidth: 120,
@@ -263,8 +267,4 @@ function buildTree<T>(items: T[], options: BuildTreeOptions = {}): T[] {
   </LayoutTable>
 </template>
 
-<style scoped>
-:deep(.n-upload-trigger) {
-  width: 100% !important;
-}
-</style>
+<style scoped></style>