d-render/esm/cip-search-form/use-expand.js

基于 Element Plus 二次封装的数据驱动渲染组件库 - 表单、搜索表单、表格配置化渲染

import { ref, computed, watch } from 'vue';

const DEFAULT_SPAN = 1;
const useExpand = (props, gridCount, searchFormProps, operationSpan) => {
  const isExpand = ref(false);
  const toggleExpand = () => {
    isExpand.value = !isExpand.value;
  };
  const getFieldSpan = (fieldConfig) => {
    const { config = {} } = fieldConfig;
    const span = Math.floor(config.span) || DEFAULT_SPAN;
    if (span > gridCount.value)
      return gridCount.value;
    return span;
  };
  const spanSum = computed(() => {
    return props.fieldList.reduce((acc, v) => {
      acc += getFieldSpan(v);
      return acc;
    }, 0);
  });
  const haveExpand = computed(() => {
    if (searchFormProps.value.collapse) {
      const threshold = gridCount.value - operationSpan.value + 1;
      if (props.completeRow)
        return spanSum.value > threshold;
      return spanSum.value >= threshold;
    }
    return false;
  });
  const rowMaxIndex = computed(() => {
    const list = props.fieldList;
    const len = list.length;
    let sum = 0;
    const threshold = gridCount.value - operationSpan.value + 1;
    for (let i = 0; i < len; i++) {
      sum += getFieldSpan(list[i]);
      if (sum === threshold) {
        return props.completeRow ? i : i - 1;
      }
      if (sum > threshold) {
        return i - 1;
      }
    }
    return len;
  });
  const lastRowSpan = computed(() => {
    const list = props.fieldList;
    return list.reduce((acc, v) => {
      const span = getFieldSpan(v);
      acc += span;
      if (acc > gridCount.value)
        return span;
      if (acc === gridCount.value)
        return 0;
      return acc;
    }, 0);
  });
  const showFieldList = computed(() => {
    if (!searchFormProps.value.collapse) {
      return props.fieldList;
    } else {
      return isExpand.value ? props.fieldList : props.fieldList.filter((item, index) => index <= rowMaxIndex.value);
    }
  });
  watch(() => props.hideSearch, () => {
    if (props.hideSearch)
      isExpand.value = true;
  }, { immediate: true });
  return {
    isExpand,
    toggleExpand,
    spanSum,
    haveExpand,
    showFieldList,
    lastRowSpan
  };
};

export { useExpand };