扩展计算函数

在 FcDesigner 中，你可以通过 setFormula 方法扩展计算函数。以下是如何增加一个布尔类型转换函数的详细步骤和示例：

公式名称应采用全大写字母命名（如：SUMPRICE）。

重要说明

• 命名规范：公式名称必须使用全大写字母，建议使用描述性的名称
• 唯一性：每个公式的 name 必须唯一，重复名称会覆盖之前的定义
• 性能考虑：公式函数会被频繁调用，建议避免复杂的计算逻辑
• 错误处理：公式函数中应包含适当的错误处理，避免影响表单计算

示例

下面的示例演示了如何将一个布尔类型转换函数添加到 FcDesigner 中。这个函数会将传入的值转换为布尔值。

import FcDesigner from 'path/to/fcDesignerPro';

FcDesigner.setFormula([{
  	//放到math目录下
    menu: 'math',
    //id,唯一!
    name:'TOBOOL',
    //函数说明
    info:'返回true或者false',
    //函数示例
    example: 'bool(0) = false, bool(1) = true',
    //执行函数
    handle(val){
        return !!val // 使用双重否定运算符将值转换为布尔值
    }
}])

导入到不同渲染器

Element Plus 渲染器

import formCreate from '@form-create/element-ui';

formCreate.setFormula('TOBOOL', function(val){
    return !!val // 使用双重否定运算符将值转换为布尔值
})

Ant Design Vue 渲染器

import formCreate from '@form-create/ant-design-vue';

formCreate.setFormula('TOBOOL', function(val){
    return !!val // 使用双重否定运算符将值转换为布尔值
})

移动端渲染器

import formCreateMobile from '@form-create/vant';

formCreateMobile.setFormula('TOBOOL', function(val){
    return !!val // 使用双重否定运算符将值转换为布尔值
})

多端适配

为了确保公式在不同端（PC端和移动端）都能正常工作，建议同时在所有渲染器中注册相同的公式函数。

高级用法示例

数学计算函数

// 计算折扣价格
FcDesigner.setFormula([{
    menu: 'math',
    name: 'DISCOUNT',
    info: '计算折扣价格',
    example: 'DISCOUNT(100, 0.8) = 80',
    handle(price, rate) {
        if (typeof price !== 'number' || typeof rate !== 'number') {
            return 0;
        }
        return price * rate;
    }
}])

// 计算税费
FcDesigner.setFormula([{
    menu: 'math',
    name: 'TAX',
    info: '计算税费',
    example: 'TAX(100, 0.1) = 10',
    handle(amount, taxRate) {
        if (typeof amount !== 'number' || typeof taxRate !== 'number') {
            return 0;
        }
        return amount * taxRate;
    }
}])

字符串处理函数

// 格式化手机号
FcDesigner.setFormula([{
    menu: 'string',
    name: 'FORMATPHONE',
    info: '格式化手机号',
    example: 'FORMATPHONE("13800138000") = "138-0013-8000"',
    handle(phone) {
        if (typeof phone !== 'string') return '';
        return phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
    }
}])

// 首字母大写
FcDesigner.setFormula([{
    menu: 'string',
    name: 'CAPITALIZE',
    info: '首字母大写',
    example: 'CAPITALIZE("hello") = "Hello"',
    handle(str) {
        if (typeof str !== 'string' || str.length === 0) return '';
        return str.charAt(0).toUpperCase() + str.slice(1);
    }
}])

日期处理函数

// 计算年龄
FcDesigner.setFormula([{
    menu: 'date',
    name: 'AGE',
    info: '计算年龄',
    example: 'AGE("1990-01-01") = 33',
    handle(birthDate) {
        if (!birthDate) return 0;
        const birth = new Date(birthDate);
        const today = new Date();
        if (isNaN(birth.getTime())) return 0;
        return today.getFullYear() - birth.getFullYear();
    }
}])

// 格式化日期
FcDesigner.setFormula([{
    menu: 'date',
    name: 'FORMATDATE',
    info: '格式化日期',
    example: 'FORMATDATE("2023-01-01") = "2023年01月01日"',
    handle(dateStr) {
        if (!dateStr) return '';
        const date = new Date(dateStr);
        if (isNaN(date.getTime())) return '';
        return `${date.getFullYear()}年${String(date.getMonth() + 1).padStart(2, '0')}月${String(date.getDate()).padStart(2, '0')}日`;
    }
}])

条件判断函数

// 等级判断
FcDesigner.setFormula([{
    menu: 'logic',
    name: 'GRADE',
    info: '根据分数判断等级',
    example: 'GRADE(85) = "良好"',
    handle(score) {
        if (typeof score !== 'number') return '无效';
        if (score >= 90) return '优秀';
        if (score >= 80) return '良好';
        if (score >= 70) return '中等';
        if (score >= 60) return '及格';
        return '不及格';
    }
}])

// 范围判断
FcDesigner.setFormula([{
    menu: 'logic',
    name: 'INRANGE',
    info: '判断数值是否在范围内',
    example: 'INRANGE(5, 1, 10) = true',
    handle(value, min, max) {
        if (typeof value !== 'number' || typeof min !== 'number' || typeof max !== 'number') {
            return false;
        }
        return value >= min && value <= max;
    }
}])

高级函数注意事项

• 参数类型检查：始终验证参数类型，避免运行时错误
• 边界条件处理：考虑各种边界情况和异常输入
• 性能优化：避免在函数中执行复杂计算或异步操作
• 返回值一致性：确保返回值类型与预期一致

批量注册公式

// ✅ 推荐：批量注册多个公式
const formulas = [
    {
        menu: 'math',
        name: 'SUM',
        info: '求和',
        example: 'SUM(1,2,3) = 6',
        handle(...args) {
            return args.reduce((sum, val) => {
                const num = parseFloat(val);
                return sum + (isNaN(num) ? 0 : num);
            }, 0);
        }
    },
    {
        menu: 'math',
        name: 'AVERAGE',
        info: '平均值',
        example: 'AVERAGE(1,2,3) = 2',
        handle(...args) {
            const sum = args.reduce((sum, val) => {
                const num = parseFloat(val);
                return sum + (isNaN(num) ? 0 : num);
            }, 0);
            return args.length > 0 ? sum / args.length : 0;
        }
    },
    {
        menu: 'string',
        name: 'CONCAT',
        info: '字符串连接',
        example: 'CONCAT("Hello", "World") = "HelloWorld"',
        handle(...args) {
            return args.map(String).join('');
        }
    }
];

// 注册到设计器
FcDesigner.setFormula(formulas);

// 同时注册到所有渲染器
formCreate.setFormula(formulas);
formCreateMobile.setFormula(formulas);

使用场景

• 计算公式

在复杂的计算场景中，将布尔逻辑应用于公式中。例如，可以根据某个字段的值是否为 true 来决定计算结果。

• 动态表单逻辑

在动态表单中，可能需要根据用户输入动态控制表单的行为。布尔函数可以帮助你实现动态的显示和隐藏逻辑。

• 数据格式化

使用公式函数对用户输入的数据进行格式化处理，如手机号格式化、日期格式化等。

• 业务逻辑判断

根据业务需求创建自定义的判断函数，如等级评定、范围检查等。