vue-rise-design/packages/utils/widgetUtils.d.js

一款服务于 Rise 前端低代码平台的表单设计器

// 基础工具
import { DEEP_CLONE, dataTypeOf, isEmptyObject } from './utils.d';

// 默认配置
import { BASE_FORM_ATTRIBUTES, BASE_WIDGET, BASE_FROM_ITEM } from '../const';

// 当前环境
import { ENV } from './index';

// 安装默认表格属性
export const MOUNT_DEFAULT_FORM = (params) => {
  const config = MOUNT(DEEP_CLONE(params), {
    formAttributes: BASE_FORM_ATTRIBUTES,
  });
  return config;
};

// 卸载默认表格属性
export const UNMOUNT_DEFAULT_FORM = (params) => {
  const config = UNMOUNT(DEEP_CLONE(params), BASE_FORM_ATTRIBUTES);
  return config;
};

/**
 * 获取默认值
 * 【type】组件名
 * 【grade】组件分类
 */
const GET_DEFAULT = (type, grade) => {
  let defaultWidget = {};
  if (type !== 'self') {
    defaultWidget = DEEP_CLONE(BASE_WIDGET[type]);
  }

  if (grade === 'lego') {
    defaultWidget.formItem = Object.assign(
      {},
      BASE_FROM_ITEM,
      defaultWidget.formItem,
    );
  }

  return defaultWidget;
};

// 添加默认值方法
const MOUNT = (data = {}, defaultData = {}) => {
  for (const key in defaultData) {
    if (Object.hasOwnProperty.call(defaultData, key)) {
      const item = data[key];
      const defaultItem = defaultData[key];
      if (item === undefined) {
        data[key] = defaultItem;
      } else {
        const t = dataTypeOf(defaultItem);
        if (t === 'array' || t === 'object') {
          MOUNT(item, defaultItem);
        }
      }
    }
  }
  return data;
};

// 删除值
const UNMOUNT = (data = {}, defaultData = {}) => {
  for (const key in data) {
    if (Object.hasOwnProperty.call(data, key)) {
      const item = data[key];
      const defaultItem = defaultData[key];
      //过滤掉组件名与边界值
      if (
        key !== 'type' &&
        key !== 'grade' &&
        key !== 'formEvent' &&
        key !== 'buttonList' &&
        key !== 'optionList' &&
        defaultItem !== undefined
      ) {
        const t = dataTypeOf(item);
        if (t === 'array' || t === 'object') {
          UNMOUNT(item, defaultItem);
          if (isEmptyObject(item)) {
            delete data[key];
          }
        } else {
          if (item === defaultItem) {
            delete data[key];
          }
        }
      }
    }
  }
  return data;
};

// 装配默认值
export const MOUNT_DEFAULT = (params) => {
  const defaultWidget = GET_DEFAULT(params.type, params.grade),
    data = DEEP_CLONE(params);

  return MOUNT(data, defaultWidget);
};

// 卸载默认值
export const UNMOUNT_DEFAULT = (params) => {
  const defaultWidget = GET_DEFAULT(params.type, params.grade),
    data = DEEP_CLONE(params);
  return UNMOUNT(data, defaultWidget);
};

//获取组件属性绑定
export const GET_BIND_DATA = (item, formInstance) => {
  //删除不必要的v-bind数据
  let option = DEEP_CLONE(item);
  const deleteList = [
    'type',
    'grade',
    'name',
    'icon',
    'events',
    'placeholder',
    'formItem',
    ...(option.events ? option.events : []),
  ];

  if (option.formItem) {
    option.neverDisabled = option.formItem.neverDisabled || false;
  }

  deleteList.forEach((val) => {
    delete option[val];
  });

  //函数处理
  if (option.fetchSuggestions) {
    const Fn = new Function(
      'queryString',
      'callback',
      option.fetchSuggestions,
    ).bind(formInstance);
    option.fetchSuggestions = Fn;
  }

  if (option.filterMethod) {
    const Fn = new Function('node', 'keyword', option.filterMethod).bind(
      formInstance,
    );
    option.filterMethod = Fn;
  }

  if (option.beforeFilter) {
    const Fn = new Function('value', option.beforeFilter).bind(formInstance);
    option.beforeFilter = Fn;
  }

  // 关键字被占用特殊处理
  if (option.attrType) {
    option.type = option.attrType.toString();
    delete option.attrType;
  }

  if (option.attrSize) {
    option.size = option.attrSize.toString();
    delete option.attrSize;
  }

  if (option.defaultTime) {
    option.defaultTime = option.defaultTime.split(',');
  }

  if (option.attrIcon) {
    option.icon = option.attrIcon.toString();
  }

  if (option.pickerOptions) {
    const Fn = new Function(option.pickerOptions).bind(formInstance);
    option.pickerOptions = Fn();
  }

  //数组转换
  if (option.predefine) {
    option.predefine = option.predefine.split(',');
  }

  //嵌入 body 弹窗框 class 标识
  const appendBodyWidget = [
    'date-picker',
    'autocomplete',
    'form-select',
    'cascader',
    'time-select',
    'time-picker',
  ];
  if (appendBodyWidget.includes(item.type) && formInstance.client == 'mobile') {
    option.popperClass = `mobile_client ${
      option.popperClass ? option.popperClass : ''
    }`;
  }

  //el组件默认值为true属性处理
  const defaultTrue = [
    'underline',
    'triggerOnFocus',
    'showAllLevels',
    'editable',
    'showFileList',
    'modal',
    'closable',
    'triggerOnFocus',
    'showClose',
  ];
  defaultTrue.forEach((key) => {
    if (option[key]) {
      option[key] = false;
    }
  });

  return option;
};

// 获取组件名称
export const GET_COMPONENT = (type, component) => {
  let result = '';
  if (component) return component;

  //设计器与渲染器同type不同组件处理
  const environment = ['wang-editor', 'form-dialog'];
  if (environment.includes(type)) {
    if (ENV === 'RISE_DESIGN') {
      result = `bm-design-${type}`;
    } else {
      result = `bm-realize-${type}`;
    }
    return result;
  }

  //自封装组件
  const self = [
    'autocomplete',
    'annex-list',
    'alert',
    'button-group',
    'checkbox-group',
    'communication',
    'iframe',
    'cascader',
    'descriptions',
    'dependenceModule',
    'display-info',
    'display-table',
    'form-address',
    'form-download',
    'form-upload',
    'form-table',
    'form-select',
    'form-title',
    'group-container',
    'group-title',
    'history-change',
    'picture-frame',
    'radio-group',
    'tips',
  ];
  if (self.includes(type)) {
    result = `bm-${type}`;
  } else {
    result = `el-${type}`;
  }

  return result;
};

// 获取组件水印
export const GET_PLACE_HOLDER = (item, formDisabled) => {
  if (formDisabled || item.disabled) return '';
  if (item.placeholder) return item.placeholder.replace(/\\n/g, '\n');
  const label = item.label || '';
  return item.type.includes('input') ? `请输入${label}` : `请选择${label}`;
};

/**widget增删改查 - Strat */
export const ADD_WIDGET = (item) => {
  //添加组件
  let data = UNMOUNT_DEFAULT(item);
  const props = `prop_${Date.now()}`;
  data.id = props;
  data.prop = data.prop || props;
  return data;
};

export const DEL_WIDGET = (id, array) => {
  //删除目标组件
  for (let index = 0; index < array.length; index++) {
    const element = array[index];
    if (element.id == id) {
      array.splice(index, 1);
      return;
    } else if (element.column) {
      DEL_WIDGET(id, element.column);
    }
  }
};
/**widget增删改查 - end */