@cainiaofe/cn-ui-m-lowcode/src/common/manager/filter-item.js

## 在线文档

import uniq from 'lodash/uniq';
import { DisplayPosition } from '@/type/display-position';
import { ValidatorPosition } from '@/type/validator-position';

import {
  executeObjectExpr,
  generateIndex,
  getBizComponent,
  getBizComponentNameList,
  handlePrototypeCondition,
  getItem as getCommonItem,
  getRunTimeBizComponent,
  getRealizeValue,
} from '../util/util';
import { componentMap as formComponentMap } from '@cainiaofe/cn-ui-m';
import Input from './filter-item-prototype/input';
import Select from './filter-item-prototype/select';
import CascaderSelect from './filter-item-prototype/cascader-select';
import EmployeeSelect from './filter-item-prototype/employee-select';
import DepartmentSelect from './filter-item-prototype/department-select';
import OSSUpload from './filter-item-prototype/oss-upload';
import RadioGroup from './filter-item-prototype/radio-group';
import CnCheckboxGroup from './filter-item-prototype/checkbox';
import Rating from './filter-item-prototype/rating';
import Selector from './filter-item-prototype/selector';
import CnCard from './filter-item-prototype/cn-card';
import CnDatePickerPro from './filter-item-prototype/datepicker';
import CnDateRangePickerPro from './filter-item-prototype/rangepicker';
import CnTimePickerPro from './filter-item-prototype/timepicker';
import CnInputTextArea from './filter-item-prototype/textarea';
import CnNumberPicker from './filter-item-prototype/numberpicker';
import CnAddressM from './filter-item-prototype/address-select';
import CnImageViewer from './filter-item-prototype/cn-image-viewer';
import CnFormArrayCard from './filter-item-prototype/cn-form-array-card';
import CnAgreement from './filter-item-prototype/cn-agreement';
import CnStep from './filter-item-prototype/cn-step';
import CnSearch from './filter-item-prototype/cn-search';
import {
  __dataSource__,
  __filterValue__,
  __formValue__,
} from '../util/expr-const';
import { componentMap as validatorComponentMap } from './validator';
import CnOSSImageUpload from './filter-item-prototype/image-upload';
import { getStyleListByPosition } from './common-style';

export const componentMap = {
  CnInput: Input,
  CnAsyncSelect: Select,
  CnInputTextArea,
  CnNumberPicker,
  CnCard,
  CnCascaderSelect: CascaderSelect,
  CnEmployeeSelect: EmployeeSelect,
  CnDepartmentSelect: DepartmentSelect,
  CnOSSUpload: OSSUpload,
  CnOSSImageUpload,
  CnRadioGroup: RadioGroup,
  CnCheckboxGroup,
  CnRating: Rating,
  CnSelector: Selector,
  CnDatePickerPro,
  CnDateRangePickerPro,
  CnTimePickerPro,
  CnAddressM,
  CnImageViewer,
  CnFormArrayCard,
  CnAgreement,
  CnStep,
  CnSearch,
};

const formItemComponentMap = {};
Object.keys(componentMap).forEach((name) => {
  const item = componentMap[name];
  if (item && item.formComponent) {
    formItemComponentMap[name] = item.formComponent;
  }
});

export function getItem(position, componentName, propKey) {
  let result;
  if (componentName) {
    let item = componentMap[componentName];
    if (!item) {
      item = getBizComponent(componentName, position);
    }
    if (item && item.position && item.position.includes(position)) {
      if (!item.label) {
        item.label = item.title;
      }
      if (!item.value) {
        item.value = item.componentName;
      }
      if (propKey) {
        result = item[propKey];
      } else {
        result = item;
      }
    }
  }
  return result;
}

export function getItemListByPosition(config) {
  const { position } = config;
  const result = [];
  const defaultList = Object.keys(componentMap);
  const bizComponentNameList = getBizComponentNameList();
  const allComponentList = uniq([...defaultList, ...bizComponentNameList]);
  allComponentList.forEach((name) => {
    const component = getItem(position, name);
    if (component) {
      const { bizInfo = [] } = component;
      if (bizInfo.length > 0) {
        bizInfo.forEach((item) => {
          const { label, value } = item;
          const existGroup = result.find((item2) => item2.value === value);
          if (existGroup) {
            existGroup?.children.push(component);
          } else {
            result.push({
              title: label,
              value,
              children: [component],
            });
          }
        });
        return;
      }
      result.push(component);
    }
  });
  return result;
}

export function getItemPrototypeListByPosition(config) {
  const { position } = config;
  const defaultList = Object.keys(componentMap);
  const bizComponentNameList = getBizComponentNameList();
  let prototypeList = [];
  const allComponentList = uniq([...defaultList, ...bizComponentNameList]);
  allComponentList.forEach((name) => {
    const item = getItem(position, name) || {};
    const { getPrototypeList, configure = [] } = item;
    if (typeof getPrototypeList === 'function') {
      const temp = getPrototypeList(position);
      if (temp && temp.length > 0) {
        prototypeList = [
          ...prototypeList,
          ...handlePrototypeCondition(temp, name, 'componentName'),
        ];
      }
    } else if (configure?.length > 0) {
      prototypeList = [
        ...prototypeList,
        ...handlePrototypeCondition(configure, name, 'componentName'),
      ];
    }
  });
  return prototypeList;
}

export function getItemInitialValue({ position, prop, componentName }) {
  const initialValue = {
    label: '名称',
    name: 'field',
    componentName: 'CnInput',
    placeholder: '请输入',
    hasClear: true,
  };
  if (prop) {
    const existFields = prop.getValue() || [];
    const defaultLabel = '字段名';
    const defaultName = 'field';
    const newNameIndex = generateIndex(existFields, defaultName, 'name');

    initialValue.label = `${defaultLabel}${newNameIndex}`;
    initialValue.name = `${defaultName}${newNameIndex}`;
    if (componentName) {
      initialValue.componentName = componentName;
    }
  }
  if (position === DisplayPosition.filter) {
    initialValue.span = 1;
  } else if (
    position === DisplayPosition.form ||
    position === DisplayPosition.formDialog
  ) {
    // initialValue.rules = [
    // {
    //   name: 'required',
    //   options: {
    //     "required": true
    //   }
    // },
    // ];
  }
  return initialValue;
}

export function getItemDefaultProps(position, componentName) {
  const func = getItem(position, componentName, 'getDefaultProps');
  if (typeof func === 'function') {
    return func();
  }
}

export function getFormItemDefaultProps(position, componentName) {
  const func = getItem(position, componentName, 'getFormItemDefaultProps');
  if (typeof func === 'function') {
    return func();
  }
}

export function transRulesToValidator(rules, config) {
  const { formValue, state, position } = config || {};
  const result = [];
  if (Array.isArray(rules) && rules.length > 0) {
    rules.forEach((item) => {
      const {
        name,
        active,
        options = {},
        message,
        triggerType,
        ...rest
      } = item;
      const isActive = executeObjectExpr(
        active,
        {
          [__formValue__]: formValue || {},
          [__filterValue__]: formValue || {},
          [__dataSource__]: state,
        },
        formValue || {},
        state,
      );
      if (isActive && name) {
        const action = getCommonItem(
          validatorComponentMap,
          position,
          name,
          'action',
        );
        let temp;
        if (action) {
          temp = action({
            validateItemConfig: item,
            position,
          });
        } else {
          temp = {
            ...options,
          };
          const { pattern } = options;
          if (pattern?.length > 2) {
            if (pattern.startsWith('/') && pattern.endsWith('/')) {
              temp.pattern = new RegExp(pattern.slice(1, -1));
            }
          }
          if (message) {
            temp.message = message;
          }
        }
        if (triggerType) {
          if (ValidatorPosition.filter === position) {
            temp.trigger = triggerType;
          } else {
            temp.triggerType = triggerType;
          }
        }
        if (ValidatorPosition.form === position) {
          if (typeof temp?.validator === 'function') {
            const originalValidator = temp.validator;
            temp.validator = (value, rules, context) => {
              return originalValidator(value, rules, context, state);
            };
          }
        }

        if (temp) {
          result.push(temp);
        }
      }
    });
  }
  return result;
}

export function getItemStylePrototype(config) {
  const { position } = config;
  const styleList = getStyleListByPosition(position);
  if (styleList && styleList.length > 0) {
    return [
      {
        title: '配置字段的展示样式',
        type: 'group',
        display: 'accordion',
        extraProps: {
          defaultCollapsed: false,
        },
        items: styleList,
      },
    ];
  }
  return [];
}

export function getFormExtraComponents(usedComponentList = []) {
  const result = { ...formItemComponentMap };

  usedComponentList.forEach((name) => {
    if (!result[name] && !formComponentMap?.[name]) {
      const component = getRunTimeBizComponent(name);
      if (component && component.component) {
        result[name] = getRealizeValue(component.component);
      }
    }
  });
  return result;
}