FcDesigner Pro

Appearance

扩展动作操作 ​

在 FcDesigner 中，您可以通过 setBehavior 方法来扩展可用的动作。下面是如何增加一个新的动作的详细步骤和示例。

扩展动作操作

重要说明

  • 动作分类：动作按菜单分类，包括 page、model、form、other 四个类别
  • 唯一性：每个动作的 name 必须唯一，重复名称会覆盖之前的定义
  • 配置规则：rule 函数用于生成动作配置表单，返回表单规则数组
  • 执行函数：handle 函数是动作的核心执行逻辑

内置动作列表 ​

FormCreate 设计器内置了多种常用动作，按分类如下：

页面操作动作 (page) ​

动作名称功能描述
redirectPage页面跳转
reloadPage页面刷新

模型操作动作 (model) ​

动作名称功能描述
openModel打开弹窗
closeModel关闭弹窗
message显示消息

表单操作动作 (form) ​

动作名称功能描述
hidden隐藏/显示字段
disabled禁用/启用字段
resetFields重置表单
clearFields清空表单
validate验证表单
validateFields验证指定字段
submit提交表单
setValue设置字段值

其他动作 (other) ​

动作名称功能描述
fetch发送请求
copy复制文本
callback自定义回调,抛出异常时阻止后续动作

内置动作使用注意事项

  • 路由依赖：redirectPage 动作在使用 router 类型时需要注入 $router 实例
  • 字段引用：表单操作动作需要确保字段ID正确且字段存在

数据结构 ​

ts
//行为
type Behavior = {
    //菜单
    menu: 'page' | 'model' | 'form' | 'other';
    //行为方法ID
    name: string;
    //行为名称
    label: string;
    //行为说明
    info: string;
    //配置参数生成规则
    rule?: (designer: Object) => Rule[];
    //行为函数
    handle: Function;
};

//增加行为
type SetBehavior = (behavior: Behavior | Behavior[]) => void;

示例 ​

基础示例 ​

下面的示例演示了如何将"隐藏表单"动作添加到动作列表中：

js
import FcDesigner from 'path/to/fcDesignerPro';

FcDesigner.setBehavior([
    {
        menu: 'other',
        name: 'test',
        label: '隐藏表单',
        info: '隐藏整个表单',
        rule() {
            //根据配置规则渲染表单，并自动收集函数所需的 config 参数。
            return [
                {
                    type: 'switch',
                    field: 'is_top',
                    title: '是否关闭最外层表单'
                }
            ]
        },
        handle(config, api) {
            config.is_top ? api.top.hideForm() : api.hideForm();
        }
    }
])

页面操作动作 ​

js
// 页面跳转动作
FcDesigner.setBehavior([
    {
        menu: 'page',
        name: 'navigate',
        label: '页面跳转',
        info: '跳转到指定页面',
        rule() {
            return [
                {
                    type: 'input',
                    field: 'url',
                    title: '跳转地址',
                    props: {
                        placeholder: '请输入完整的URL地址'
                    },
                    validate: [
                        {
                            required: true,
                            message: '请输入跳转地址'
                        }
                    ]
                },
                {
                    type: 'radio',
                    field: 'target',
                    title: '打开方式',
                    options: [
                        { value: '_self', label: '当前窗口' },
                        { value: '_blank', label: '新窗口' }
                    ],
                    value: '_self'
                }
            ]
        },
        handle(config, api) {
            try {
                if (!config.url) {
                    throw new Error('跳转地址不能为空');
                }
                // 验证URL格式
                const url = new URL(config.url);
                if (config.target === '_blank') {
                    window.open(url.href, '_blank');
                } else {
                    window.location.href = url.href;
                }
            } catch (error) {
                console.error('页面跳转失败:', error);
                // 可以显示错误提示
                api.message?.error('页面跳转失败: ' + error.message);
            }
        }
    }
])

表单操作动作 ​

js
// 表单数据验证动作
FcDesigner.setBehavior([
    {
        menu: 'form',
        name: 'validateForm',
        label: '表单验证',
        info: '验证表单数据并显示结果',
        rule() {
            return [
                {
                    type: 'select',
                    field: 'validationType',
                    title: '验证类型',
                    options: [
                        { value: 'all', label: '全部字段' },
                        { value: 'required', label: '必填字段' },
                        { value: 'custom', label: '自定义字段' }
                    ],
                    value: 'all'
                },
                {
                    type: 'input',
                    field: 'customFields',
                    title: '自定义字段',
                    props: {
                        placeholder: '请输入字段名，多个用逗号分隔'
                    },
                    show: (formData) => formData.validationType === 'custom'
                },
                {
                    type: 'switch',
                    field: 'showDetails',
                    title: '显示详细信息',
                    value: false
                }
            ]
        },
        handle(config, api) {
            try {
                let fieldsToValidate = [];
                switch (config.validationType) {
                    case 'all':
                        fieldsToValidate = api.getFields();
                        break;
                    case 'required':
                        fieldsToValidate = api.getFields().filter(field => {
                            const rule = api.getRule(field);
                            return rule && rule.validate && rule.validate.some(v => v.required);
                        });
                        break;
                    case 'custom':
                        fieldsToValidate = config.customFields ? 
                            config.customFields.split(',').map(f => f.trim()) : [];
                        break;
                }
                const results = [];
                fieldsToValidate.forEach(field => {
                    const value = api.getValue(field);
                    const rule = api.getRule(field);
                    const isValid = api.validateField(field);
                    results.push({
                        field,
                        value,
                        isValid,
                        message: isValid ? '验证通过' : '验证失败'
                    });
                });
                const allValid = results.every(r => r.isValid);
                const message = allValid ? '所有字段验证通过' : `有 ${results.filter(r => !r.isValid).length} 个字段验证失败`;
                if (config.showDetails) {
                    console.log('验证详情:', results);
                }
                api.message?.[allValid ? 'success' : 'error'](message);
            } catch (error) {
                console.error('表单验证失败:', error);
                api.message?.error('表单验证失败: ' + error.message);
            }
        }
    }
])

模型操作动作 ​

js
// 数据导出动作
FcDesigner.setBehavior([
    {
        menu: 'model',
        name: 'exportData',
        label: '导出数据',
        info: '将表单数据导出为指定格式',
        rule() {
            return [
                {
                    type: 'select',
                    field: 'format',
                    title: '导出格式',
                    options: [
                        { value: 'json', label: 'JSON格式' },
                        { value: 'csv', label: 'CSV格式' },
                        { value: 'excel', label: 'Excel格式' }
                    ],
                    value: 'json'
                },
                {
                    type: 'input',
                    field: 'filename',
                    title: '文件名',
                    props: {
                        placeholder: '请输入文件名（不含扩展名）'
                    },
                    value: 'form-data'
                },
                {
                    type: 'switch',
                    field: 'includeEmpty',
                    title: '包含空值',
                    value: false
                }
            ]
        },
        handle(config, api) {
            // CSV转换辅助函数
            function convertToCSV(data) {
                const headers = Object.keys(data);
                const values = Object.values(data);
                return [headers.join(','), values.join(',')].join('\n');
            }
            try {
                const formData = api.formData();
                let processedData = formData;
                // 根据配置处理数据
                if (!config.includeEmpty) {
                    processedData = Object.fromEntries(
                        Object.entries(formData).filter(([key, value]) => 
                            value !== null && value !== undefined && value !== ''
                        )
                    );
                }
                let content, mimeType, extension;
                switch (config.format) {
                    case 'json':
                        content = JSON.stringify(processedData, null, 2);
                        mimeType = 'application/json';
                        extension = 'json';
                        break;
                    case 'csv':
                        content = convertToCSV(processedData);
                        mimeType = 'text/csv';
                        extension = 'csv';
                        break;
                    case 'excel':
                        // 这里需要引入相应的Excel处理库
                        content = convertToExcel(processedData);
                        mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                        extension = 'xlsx';
                        break;
                }
                // 创建下载链接
                const blob = new Blob([content], { type: mimeType });
                const url = URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = url;
                link.download = `${config.filename}.${extension}`;
                link.click();
                URL.revokeObjectURL(url);
                api.message?.success('数据导出成功');
            } catch (error) {
                console.error('数据导出失败:', error);
                api.message?.error('数据导出失败: ' + error.message);
            }
        }
    }
])

批量注册动作 ​

js
// ✅ 推荐：批量注册多个动作
const behaviors = [
    {
        menu: 'form',
        name: 'clearForm',
        label: '清空表单',
        info: '清空所有表单数据',
        handle(config, api) {
            api.resetFields();
            api.message?.success('表单已清空');
        }
    },
    {
        menu: 'form',
        name: 'copyFormData',
        label: '复制表单数据',
        info: '将表单数据复制到剪贴板',
        rule() {
            return [
                {
                    type: 'select',
                    field: 'format',
                    title: '复制格式',
                    options: [
                        { value: 'json', label: 'JSON格式' },
                        { value: 'text', label: '文本格式' }
                    ],
                    value: 'json'
                }
            ]
        },
        handle(config, api) {
            const formData = api.formData();
            let text;
            if (config.format === 'json') {
                text = JSON.stringify(formData, null, 2);
            } else {
                text = Object.entries(formData)
                    .map(([key, value]) => `${key}: ${value}`)
                    .join('\n');
            }
            navigator.clipboard.writeText(text).then(() => {
                api.message?.success('数据已复制到剪贴板');
            }).catch(() => {
                api.message?.error('复制失败，请手动复制');
            });
        }
    }
];

// 注册动作
FcDesigner.setBehavior(behaviors);

在渲染器文档中可以查看内置表单组件及其所有可配置参数。