当前位置：首页 > article >正文

开源项目低代码表单设计器FcDesigner扩展右侧组件的配置规则

article 2024/11/15 18:29:53

在开源项目低代码表单设计器 FcDesigner 中，您可以通过定制化的配置规则来扩展组件的功能，从而满足特定的业务需求。这些配置规则如 baseRule、formRule、componentRule 和 appendConfigData 提供了一种灵活的方法来控制组件、表单的行为和外观。以下是对这些参数的详细解释和一些示例应用，以帮助您更好地理解和使用这些功能。

源码地址: Github | Gitee | 文档

在这里插入图片描述

数据结构

每个配置规则可以定义为一个函数或一个对象，它们返回一个或一组规则。这些规则可以在生成时进行追加、覆盖或前置处理。

type extendRule = ((arg: { t: t }) => Rule[]) | {
  rule: (arg: { t: t }) => Rule[];
  append?: boolean; // 决定是否将规则追加到现有规则后
  prepend?: boolean; // 决定是否将规则添加到现有规则的前面
};

type Config = {
  baseRule?: extendRule;
  formRule?: extendRule;
  componentRule?: {
    default: (rule: Rule, arg: { t: t }) => Rule[] | {
      rule: (rule: Rule, arg: { t: t }) => Rule[];
      append?: boolean;
      prepend?: boolean;
    };
    [id: string]: (rule: Rule, arg: { t: t }) => Rule[] | {
      rule: (rule: Rule, arg: { t: t }) => Rule[];
      append?: boolean;
      prepend?: boolean;
    };
  };
}

扩展表单配置

增加一个备注输入框在表单配置的顶部，用于在创建表单时留出额外的信息输入空间。

<template>
  <fc-designer ref="designer" :config="config"/>
</template>

<script setup>
const config = {
  appendConfigData: ['mark'],
  formRule: {
    prepend: true,
    rule() {
      return [
        { type: 'input', field: 'mark', title: '表单备注' }
      ];
    }
  }
}
</script>

扩展表单组件配置

在表单组件配置的末尾增加一个字段映射输入框，方便进行字段与数据表的映射。

<template>
  <fc-designer ref="designer" :config="config"/>
</template>

<script setup>
const config = {
  appendConfigData(rule) {
    return {
      formCreateDb_field: rule.db_field // 将db_field映射至formCreateDb_field
    };
  },
  formRule: {
    prepend: true,
    rule() {
      return [
        { type: 'input', field: 'mark', title: '表单备注' }
      ];
    }
  }
}
</script>

扩展指定组件配置

为输入框组件增加一个开关，该开关用于设置字段是否必填，并位于配置项的顶部。

<template>
  <fc-designer ref="designer" :config="config"/>
</template>

<script setup>
const config = {
  appendConfigData: ['mark'],
  componentRule: {
    default: {
      prepend: true,
      rule() {
        return [
          { type: 'input', field: 'mark', title: '备注' }
        ];
      }
    },
    input: {
      prepend: true,
      rule() {
        return [
          { type: 'switch', field: '$required', title: '是否必填' }
        ];
      }
    }
  }
}
</script>