@cmstops/pro-compo/es/hooks/useSelection.js

[物料平台文档中心](https://arco.design/docs/material/guide)

import { ref, computed } from "vue";
function getLabelValue(list, options) {
  const { labelStr, valueStr } = options;
  return list.map((item) => {
    return {
      label: item[labelStr],
      value: item[valueStr]
    };
  });
}
function useSelection(params) {
  const { func, labelStr, valueStr } = params;
  const lVParams = { labelStr, valueStr };
  const limit = ref(30);
  const offset = ref(0);
  const keyword = ref("");
  const options = ref([]);
  const loading = ref(false);
  const queryParams = computed(() => {
    return {
      limit: limit.value,
      offset: offset.value,
      keyword: keyword.value
    };
  });
  async function load(more) {
    loading.value = !more;
    try {
      const list = await func(queryParams.value);
      if (more) {
        options.value = options.value.concat(getLabelValue(list, lVParams));
      } else {
        options.value = getLabelValue(list, lVParams);
      }
    } catch (e) {
      console.log(e);
    } finally {
      loading.value = false;
    }
  }
  function loadMore() {
    offset.value += limit.value;
    load(true);
  }
  function handleSearch(kw) {
    keyword.value = kw;
    offset.value = 0;
    load();
  }
  return {
    options,
    loading,
    keyword,
    load,
    handleSearch,
    loadMore
  };
}
export { useSelection as default };