使用文档 - 星睿智能科技

快速开始

星睿智能科技是一款基于Vue 2.x和Element UI的可视化表单设计工具。

在线演示

访问在线演示快速体验星睿智能科技的功能。

环境要求

Vue 2.6+
Element UI 2.8+
现代浏览器（Chrome、Firefox、Safari、Edge）

安装引入

方式一：CDN引入

可视化拖拽端（后台设计器）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单设计器</title>
    
    <!-- 引入样式 -->
    
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css">
    
    <!-- 引入脚本 -->
    <script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
    <script src="http://flycore.cn/form-generater/lib/FormMaking.umd.min.js"></script>
</head>
<body>
    <div id="app">
        <fm-making-form :widget-form.sync='widgetForm'></fm-making-form>
    </div>
    
    <script>
        // 配置全局路径
        window.baseURL = 'http://flycore.cn/form-generater/';
        window.form_set_api = window.baseURL + "form_set.json";
        window.callback_default_api = window.baseURL + 'api/oa/tablefun/callback';
        
        new Vue({
            el: '#app',
            data: function () {
                return {
                    widgetForm: {
                        list: [],
                        remove_list: [],
                        config: {
                            labelWidth: 180,
                            labelPosition: 'top',
                            xs_config: {
                                labelWidth: 180,
                                labelPosition: 'top',
                                size: "medium",
                                rowMax: 1
                            },
                            sm_config: {
                                labelWidth: 180,
                                labelPosition: 'top',
                                size: "small",
                                rowMax: 2
                            }
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

前端显示（表单展示）：

<!-- 表单展示组件 -->
<fm-generate-form 
    status="read" 
    ref="generateForm" 
    :data="widgetForm" 
    :remote="remoteFuncs" 
    v-model="widgetModels">
</fm-generate-form>

<script>
new Vue({
    el: '#app',
    data: function () {
        return {
            widgetForm: {
                list: [...] // 表单结构
            },
            widgetModels: {
                // 表单数据
                "input_1686125232000_48849": "示例值"
            },
            remoteFuncs: {
                // 远程函数
            }
        }
    }
});
</script>

方式二：npm安装

# 安装
npm i @ziqiflow/ziqi-form-generater

# 在项目中引入
import FormMaking from '@ziqiflow/ziqi-form-generater'
import '@ziqiflow/ziqi-form-generater/dist/FormMaking.css'

// 全局注册
Vue.use(FormMaking)

// 配置全局路径
window.baseURL = '';
window.form_set_api = window.baseURL + "/api/oa/form/set";
window.callback_default_api = window.baseURL + '/api/oa/tablefun/callback';

获取表单数据

// 获取显示的项目数据（带验证）
this.$refs.generateForm.getData()

// 获取所有数据（包括隐藏字段，带验证）
this.$refs.generateForm.getData(true)

// 获取数据但不验证
this.$refs.generateForm.getDataWithOutValid()

// 获取所有数据但不验证
this.$refs.generateForm.getDataWithOutValid(true)

// 只获取显示的models
this.$refs.generateForm.getModelsWithOutHide()

// 返回格式
{
    models: {...},      // 表单数据
    showInfos: {...}    // 显示信息
}

组件介绍

组件公共字段

每个组件都支持以下公共配置：

参数	字段	描述
内部编码	model	返回对象的键值
数据库内码	keyindex	存储在数据库中的内码
是否隐藏	hide	控制组件显示/隐藏
标题	name	组件的标题
宽度	width	组件的宽度
占位内容	placeholder	提示内容
计算公式	formula	关联计算使用
默认值	defaultValue	组件的默认值
校验	pattern	数据校验规则
样式	style	个性化样式，如：font-weight:bold;
内置参数	inner_set_json	高级配置参数

组件类型

静态文本 - 显示静态内容
分隔符 - 分隔表单区域
单行文本 - 输入短文本
单行数字 - 输入数字
多行文本 - 输入长文本
计数器 - 数字增减器
单选框组 - 单选选项
多选框组 - 多选选项
时间选择器 - 选择时间
日期选择器 - 选择日期
评分 - 星级评分
颜色选择器 - 选择颜色
下拉选择框 - 单选/多选下拉
开关 - 开关切换
滑块 - 数值滑块
按键 - 按钮组件
插槽 - 自定义插槽
表格 - 动态表格
自动完成 - 自动完成输入
文件上传 - 上传文件
图片上传 - 上传图片
富文本 - 富文本编辑器
级联选择 - 级联选择器
栅格布局 - 栅格布局容器

计算公式

星睿智能科技支持强大的计算公式功能，可以实现组件之间的数据联动和自动计算。

公式语法

使用 @[组件名称] 引用其他组件的值，支持数学运算和函数调用。

// 简单计算
@[单价] * @[数量]

// 使用函数
#[四舍五入保留小数](@[单价] * @[数量], 2)

// 条件判断
@[数量] > 10 ? @[单价] * 0.9 : @[单价]

// 远程函数
#[转为商品字段](@[商品ID], 商品名)

内置函数

百分比转数字 - 将12.12%转换为0.1212
四舍五入保留小数 - 保留指定位数的小数

远程函数

支持调用后端API获取数据，配置在form_set.json中：

{
    "remotefun": [{
        "usedscope": ["EleAutoCompleteSample"],
        "n": "商品信息",
        "v": "product_info",
        "props": {
            "method": "post",
            "value": "value",
            "label": "label"
        }
    }]
}

高级功能

1. 全局表单变更触发器

在表单配置中可以设置全局变更触发器，当任何组件值变化时自动执行：

({
    "default": function ({
        nowFormItemSet,  // 当前表单设置
        nowValue,        // 当前值
        Models,          // 表单全部值
        FormConfig,      // 表单设置
        RecursiveFormList, // 转换工具
        HttpRequest      // http访问函数
    }) {
        // 初始化时 nowFormItemSet 为 null
        if(nowFormItemSet == null){
            console.log('表单初始化')
            return;
        }
        
        // 根据条件隐藏/显示组件
        RecursiveFormList(FormConfig.list, (ele) => {
            if (ele.key == '1651127760000_58621') {
                ele.hide = nowValue === 'hide';
            }
        });
        
        // 调用后端接口填充数据
        if (nowFormItemSet.key == '1605333874000_56140') {
            HttpRequest({
                url: 'http://localhost:8098/api/sap/get_userinfo',
                data: { id: nowValue },
                method: 'post'
            }).then(({ data: req }) => {
                Models['input_1605333871000_63739'] = req.name;
            }).catch(err => {
                console.log(err);
            });
        }
    }
})

2. Button组件点击事件

Button组件支持自定义点击事件：

({
    "default": function ({
        buttonset,       // 当前button设置
        Models,          // 表单全部值
        FormConfig,      // 表单设置
        RecursiveFormList, // 转换工具
        HttpRequest      // http访问函数
    }) {
        // 隐藏某个元素
        RecursiveFormList(FormConfig.list, (ele) => {
            if (ele.key == '1651127760000_58621') {
                ele.hide = true;
            }
        });
        
        // 通过接口填充数据
        HttpRequest({
            url: 'http://localhost:8098/api/sap/get_order_detail',
            data: { code: Models.input_1605333871000_63739 },
            method: 'post'
        }).then(({ data: req }) => {
            Models['table_1605333871000_63739'] = req.data;
        });
    }
})

3. 内置参数高级配置

通过inner_set_json可以配置组件的高级参数：

// 为input组件添加长度限制和字数显示
{
    "maxlength": "10",
    "show-word-limit": true
}

// 为表格中的日期组件支持范围选择
{
    "type": "datetimerange"
}

// 为表格中的选择组件支持其他选项
{
    "showOtherOption": true
}

// 为button添加loading和click事件
{
    "loading": false,
    "click": "function:($event,value)=> {alert('Button clicked!');}"
}

4. 插槽组件

插槽组件允许引入自定义Vue组件：

<fm-generate-form ref="generateForm" :data="widgetForm" v-model="widgetModels">
    <template slot="blank" slot-scope="scope">
        <!-- 自定义组件内容 -->
        <my-custom-component :data="scope.model"></my-custom-component>
    </template>
</fm-generate-form>

5. 默认值函数

支持通过函数动态生成默认值：

// 在组件中配置
<fm-generate-form :default-funs="defaultFuns" ...>

// 定义默认值函数
data() {
    return {
        defaultFuns: {
            random: (params) => {
                return new Date().getTime() + 
                       ((Math.random() * 1000).toFixed(0));
            },
            randomString: (params) => {
                const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
                let result = '';
                for (let i = 0; i < 12; i++) {
                    result += chars.charAt(Math.floor(Math.random() * chars.length));
                }
                return result;
            }
        }
    }
}

// 在默认值中使用
${random}
${randomString}

如何制作自定义组件

组件状态

组件可以指定不同的status：

design.preview - 设计表单时的预览模式
design.show - 设计表单时的显示模式
input - 填写模式（默认）
read - 查看模式
自定义状态 - 如 read.search

组件开发步骤

1. 编写组件

组件需要引入cmixins，可以访问以下数据：

$attrs - 来自v-bind传递的数据（bindParams）
$listeners - 来自v-on传递的函数（onEvents）
globalSet - 全局设置
globalValue - 全局值
dataOptions - 数据源（已转换）
disabled - 是否禁用
placeholder - 占位符
options - 组件选项
status_arr - 状态数组
status - 当前状态
models - 表单数据（表格中为row数据）

2. 组件打包

// 注册组件
import FEleCascader from './FEleCascader.vue';
Vue.component('fm-ele-cascader', FEleCascader);

// 注册配置组件
import FEleCascaderSet from './FEleCascaderSet.vue';
Vue.component('fm-ele-cascader-set', FEleCascaderSet);

3. 添加到配置

在form_set.json中添加组件配置：

{
    "advanceComponents": [{
        "componentName": "fm-ele-cascader",
        "componentSet": "fm-ele-cascader-set",
        "type": "custom",
        "name": "级联",
        "icon": "chalkboard",
        "options": {
            "placeholder": "",
            "defaultValue": [],
            "componentName": "fm-ele-cascader",
            "cascader_set": {
                "show-all-levels": true,
                "filterable": true,
                "multiple": false
            },
            "clearable": true,
            "disabled": false,
            "options": [],
            "sourceType": "json",
            "jsonOptions": [],
            "remoteOptions": [],
            "props": {
                "value": "value",
                "label": "label",
                "children": "children"
            },
            "remoteFunc": ""
        },
        "blacklist": ["componentName", "showLabel"]
    }],
    "form": {
        "customlist": [{
            "usedplaces": ["form", "table"],
            "n": "级联",
            "v": "fm-ele-cascader",
            "set": {
                // 同上，但blacklist中不包含componentName
                "blacklist": ["showLabel"]
            }
        }]
    }
}

4. 组件加载

页面直接引入：<script src="components/dist/js/FmEleCascader.js"></script>
自动加载：放入form_set.json配置的components_url目录下

API文档

设计器组件 (fm-making-form)

Props:

widget-form - 表单配置对象（支持.sync修饰符）

生成器组件 (fm-generate-form)

Props:

data - 表单结构数据
value / v-model - 表单数据（models）
status - 表单状态：input/read/design.preview等
remote - 远程函数对象
default-funs - 默认值函数对象

Methods:

// 获取数据（带验证）
this.$refs.generateForm.getData(withHide = false)
// 返回: { models: {...}, showInfos: {...} }

// 获取数据（不验证）
this.$refs.generateForm.getDataWithOutValid(withHide = false)

// 只获取显示的models
this.$refs.generateForm.getModelsWithOutHide()

// 设置表单数据
this.$refs.generateForm.setFormData(data)

// 重置表单
this.$refs.generateForm.reset()

全局配置

// 设置全局路径
window.baseURL = 'https://your-domain.com/form-generater/';
window.form_set_api = window.baseURL + "form_set.json";
window.callback_default_api = window.baseURL + 'api/callback';

form_set.json配置

完整的配置文件示例请查看：form_set.json

常见问题

Q: 如何引入星睿智能科技？

A: 支持CDN引入和npm安装两种方式。CDN方式适合快速体验，npm方式适合项目集成。详见安装引入章节。

Q: 如何添加自定义组件？

A: 可以通过开发自定义Vue组件并注册到form_set.json配置中。详见自定义组件章节。

Q: 如何实现组件之间的数据联动？

A: 可以通过计算公式、全局触发器或远程函数实现。详见计算公式和高级功能章节。

Q: 表格组件如何使用？

A: 表格组件支持动态行、多种列类型、公式计算等功能。可以在设计器中拖入表格组件，然后配置列信息。

Q: 如何获取表单数据？

A: 使用ref引用组件，然后调用getData()或getDataWithOutValid()方法。详见安装引入章节的获取数据部分。

Q: 支持哪些浏览器？

A: 支持所有现代浏览器，包括Chrome、Firefox、Safari和Edge。推荐使用Chrome浏览器。

Q: 如何配置远程数据源？

A: 在form_set.json中配置remotefun，指定API地址和参数映射。详见计算公式章节的远程函数部分。

Q: 内置参数如何使用？

A: 在组件的inner_set_json字段中配置JSON对象，可以设置Element UI组件的任何原生属性。详见高级功能章节。