ApiSelect组件支持分页下拉方案 #7883

jeecgboot-vue3/src/components/Form/src/components/ApiSelect.vue

@@ -1,5 +1,12 @@
 <template>
-  <Select @dropdownVisibleChange="handleFetch" v-bind="attrs_" @change="handleChange" :options="getOptions" v-model:value="state">
+  <Select
+    v-bind="attrs_"
+    v-model:value="state"
+    :options="getOptions"
+    @change="handleChange"
+    @dropdownVisibleChange="handleFetch"
+    @popupScroll="handlePopupScroll"
+  >
     <template #[item]="data" v-for="item in Object.keys($slots)">
       <slot :name="item" v-bind="data || {}"></slot>
     </template>
@@ -24,9 +31,10 @@
   import { LoadingOutlined } from '@ant-design/icons-vue';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { propTypes } from '/@/utils/propTypes';
+  import { isNumber } from '/@/utils/is';
 
   type OptionsItem = { label: string; value: string; disabled?: boolean };
-
+  //文档 https://help.jeecg.com/ui/apiSelect#pageconfig%E5%8F%82%E6%95%B0%E9%85%8D%E7%BD%AE
   export default defineComponent({
     name: 'ApiSelect',
     components: {
@@ -35,7 +43,7 @@
     },
     inheritAttrs: false,
     props: {
-      value: [Array, Object, String, Number],
+      value: [Array, String, Number],
       numberToString: propTypes.bool,
       api: {
         type: Function as PropType<(arg?: Recordable) => Promise<OptionsItem[]>>,
@@ -46,6 +54,11 @@
         type: Object as PropType<Recordable>,
         default: () => ({}),
       },
+      //分页配置
+      pageConfig: {
+        type: Object as PropType<Recordable>,
+        default: () => ({ isPage: false }),
+      },
       // support xxx.xxx.xx
       resultField: propTypes.string.def(''),
       labelField: propTypes.string.def('label'),
@@ -60,7 +73,15 @@
       const emitData = ref<any[]>([]);
       const attrs = useAttrs();
       const { t } = useI18n();
-
+      // update-begin--author:liusq---date:20250407---for：【QQYUN-11831】ApiSelect 分页下拉方案 #7883
+      const hasMore = ref(true);
+      const pagination = ref({
+        pageNo: 1,
+        pageSize: 10,
+        total: 0,
+      });
+      const defPageConfig = { isPage: false, pageField: 'pageNo', pageSizeField: 'pageSize', totalField: 'total', listField: 'records' };
+      // update-end--author:liusq---date:20250407---for：【QQYUN-11831】ApiSelect 分页下拉方案 #7883
       // Embedded in the form, just use the hook binding to perform form verification
       const [state, setState] = useRuleFormItem(props, 'value', 'change', emitData);
       // update-begin--author:liaozhiyang---date:20230830---for：【QQYUN-6308】解决警告
@@ -114,7 +135,7 @@
         },
         { deep: true }
       );
-     //监听数值修改，查询数据
+      //监听数值修改，查询数据
       watchEffect(() => {
         props.value && handleFetch();
       });
@@ -122,17 +143,33 @@
       async function fetch() {
         const api = props.api;
         if (!api || !isFunction(api)) return;
-        options.value = [];
+        // update-begin--author:liusq---date:20250407---for：【QQYUN-11831】ApiSelect 分页下拉方案 #7883
+        if (!props.pageConfig.isPage || pagination.value.pageNo == 1) {
+          options.value = [];
+        }
         try {
           loading.value = true;
-          const res = await api(props.params);
+          let { isPage, pageField, pageSizeField, totalField, listField } = { ...defPageConfig, ...props.pageConfig };
-          if (Array.isArray(res)) {
+          let params = isPage
-            options.value = res;
+            ? { ...props.params, [pageField]: pagination.value.pageNo, [pageSizeField]: pagination.value.pageSize }
-            emitChange();
+            : { ...props.params };
-            return;
+          // update-end--author:liusq---date:20250407---for：【QQYUN-11831】ApiSelect 分页下拉方案 #7883
-          }
+          const res = await api(params);
-          if (props.resultField) {
+          if (isPage) {
-            options.value = get(res, props.resultField) || [];
+            // update-begin--author:liusq---date:20250407---for：【QQYUN-11831】ApiSelect 分页下拉方案 #7883
+            options.value = [...options.value, ...res[listField]];
+            pagination.value.total = res[totalField] || 0;
+            hasMore.value = res[totalField] ? options.value.length < res[totalField] : res[listField] < pagination.value.pageSize;
+            // update-end--author:liusq---date:20250407---for：【QQYUN-11831】ApiSelect 分页下拉方案 #7883
+          } else {
+            if (Array.isArray(res)) {
+              options.value = res;
+              emitChange();
+              return;
+            }
+            if (props.resultField) {
+              options.value = get(res, props.resultField) || [];
+            }
           }
           emitChange();
         } catch (error) {
@@ -151,9 +188,17 @@
 
       function initValue() {
         let value = props.value;
-        if (value && typeof value === 'string' && value != 'null' && value != 'undefined') {
+        // update-begin--author:liaozhiyang---date:20250407---for：【issues/8037】初始化值单选的值被错误地写入数组值
-          state.value = value.split(',');
+        if (unref(attrs).mode == 'multiple') {
+          if (value && typeof value === 'string' && value != 'null' && value != 'undefined') {
+            state.value = value.split(',');
+          } else if (isNumber(value)) {
+            state.value = [value];
+          }
+        } else {
+          state.value = value;
         }
+        // update-end--author:liaozhiyang---date:20250407---for：【issues/8037】初始化值单选的值被错误地写入数组值
       }
 
       async function handleFetch() {
@@ -171,8 +216,18 @@
         vModalValue && vModalValue(_);
         emitData.value = args;
       }
-
+      // update-begin--author:liusq---date:20250407---for：【QQYUN-11831】ApiSelect 分页下拉方案 #7883
-      return { state, attrs_, attrs, getOptions, loading, t, handleFetch, handleChange };
+      // 滚动加载更多
+      function handlePopupScroll(e) {
+        const { scrollTop, scrollHeight, clientHeight } = e.target;
+        const isNearBottom = scrollHeight - scrollTop <= clientHeight + 20;
+        if (props.pageConfig.isPage && isNearBottom && hasMore.value && !loading.value) {
+          pagination.value.pageNo += 1;
+          fetch();
+        }
+      }
+      // update-end--author:liusq---date:20250407---for：【QQYUN-11831】ApiSelect 分页下拉方案 #7883
+      return { state, attrs_, attrs, getOptions, loading, t, handleFetch, handleChange, handlePopupScroll };
     },
   });
 </script>