Bot.js LogoBot.js 云控系统

表单页设计

云控专属可视化开发工具

  • 全网独家定制
  • 数据私有化部署
  • 支持多级菜单管理
  • 多用户分级管理
  • 二次开发成本直降80%

全局方法

提供两个用于获取表单数据的全局方法：

方法名说明
get[formName]ControlByName(name)根据字段 name 获取表单项（完整数据对象）
get[formName]ValueByName(name)根据字段 name 获取表单项的值

说明

  • formName：表单名称（动态拼接）
  • name：表单字段唯一标识
  • Control：返回完整字段对象（包含 label、type、value 等）
  • Value：仅返回字段值，多用于跨字段取值、表单联动及复杂校验场景（如确认密码校验）

表单 opt 配置

opt = {
  list: [...],     // 字段配置
  form: {...},     // 表单配置
  events: {...},    // 事件
  config: {...}    // 表单接口行为配置
}

字段列表 (list)

每个字段对象包含以下属性：

属性名说明类型是否必填默认值
type组件类型string是—
name字段名（唯一标识）string是—
control组件属性配置object是{}
formItem表单项配置（标签、校验规则）object否{}
customRules自定义校验规则array否[]
config扩展配置（远程数据、联动等）object否{}
{
  type: "input",                          // 组件类型，固定为 input
  name: "username",                       // 字段名，绑定数据用的 key
  control: {
    modelValue: "",                       // 绑定的输入值，双向绑定
    type: "text",                        // 输入框类型，如 text、password 等
    placeholder: "请输入用户名",            // 输入框占位提示文字
    maxlength: 20,                       // 最大输入长度
    minlength: 3,                        // 最小输入长度
    showWordLimit: true,                 // 是否显示字数统计
    clearable: true,                     // 是否显示清除按钮
    disabled: false,                     // 是否禁用输入框
    readonly: false,                     // 是否只读
    autocomplete: "off",                 // 浏览器自动完成功能，off 禁用
    autofocus: false,                    // 是否自动聚焦
    tabindex: "1",                      // tab 键顺序
    validateEvent: true,                 // 是否触发表单验证事件
    inputStyle: {                        // 输入框自定义样式
      color: "#333",                    // 字体颜色
      fontSize: "14px"                  // 字体大小
    },
    size: "default",                    // 输入框尺寸，可选 small、default、large
    options: [                         // 选项数组，常用于 select、radio、checkbox 等
      { label: "选项1", value: "1" }, // 选项 label 和 value
      { label: "选项2", value: "2" }
    ],
    multiple: false,                   // 是否多选，select 组件常用
    filterable: true,                  // 是否支持搜索筛选，select 组件常用
    rows: 4,                          // 多行文本框行数，textarea 专用
    resize: "vertical",               // textarea 是否允许调整大小及方向
    autosize: {                       // textarea 自动高度配置
      minRows: 2,                    // 最小行数
      maxRows: 6                     // 最大行数
    },
    buttonStyle: "outline",           // radio 按钮样式
    min: 0,                          // 输入数字类组件最小值，如 inputNumber、slider
    max: 100,                        // 最大值
    step: 1,                         // 步长
    format: "yyyy-MM-dd",             // 日期格式，datePicker 专用
    placeholderTime: "选择时间",       // 时间选择器占位提示
    disabledDate: (date) => date < new Date(),  // 禁用日期函数，禁止选择今天之前日期
    showAlpha: false,                 // 颜色选择器是否显示透明度
    activeColor: "#409EFF",           // 颜色选择器主题色
    checked: false,                   // 开关状态，switch 组件专用
    icon: "Check",                   // 按钮图标名
    loading: false,                  // 按钮加载状态
    text: "提交",                    // 按钮文本
    columns: [                       // 表格列配置
      { label: "姓名", prop: "name" },
      { label: "年龄", prop: "age" }
    ],
    data: [],                        // 表格数据
    style: {                        // 容器样式
      padding: "10px",              // 内边距
      backgroundColor: "#f5f5f5"   // 背景颜色
    },
    height: 300,                    // 富文本编辑器高度
    action: "/upload",              // 上传接口地址
    multipleUpload: false,          // 是否支持多文件上传
    showFileList: true              // 是否显示文件列表
  },
  formItem: {
    label: "确认密码",                // 表单标签
    rules: [
      {
        validator: (rule, value, callback) => {  // 自定义验证函数
          if (value === "") {
            callback(new Error("请输入确认密码"));  // 不符合规则时传入错误信息
          } else {
            const password = getform1ValueByName("password");  // 获取其他字段值进行校验
            if (password === value) {
              callback();                            // 校验通过
            } else {
              callback(new Error("两次密码输入不一致"));  // 校验失败错误提示
            }
          }
        },
        trigger: "blur"                      // 触发校验的时机
      }
    ]
  },
  customRules: [
    {
      type: "required",                   // 必填规则类型
      message: "必填项",                   // 提示信息
      trigger: "blur"                     // 触发校验时机
    }
  ],
  config: {
    optionsType: 1,                      // 自定义配置项类型
    optionsFun: "demo/options",          // 远程接口或本地方法名
    method: "get",                      // 请求方法
    linkage: "name1",                   // 关联的其他组件字段名
    before: (params, { type, route, model }) => {  // 请求前钩子，修改参数
      console.log(type);
      return params;
    },
    after: (res, success, type) => {    // 请求后钩子，处理结果
      console.log(type, res);
      return res;
    }
  }
}

type 组件类型

  • {string} 组件类型标识（必填）

组件类型用于标识当前表单项的类型，固定字符串，不可为空。

支持类型：

  • input：单行文本
  • textarea：多行文本
  • radio：单选框
  • checkbox：多选框
  • select：下拉选择
  • datePicker：日期选择器
  • timePicker：时间选择器
  • colorPicker：颜色选择器
  • switch：开关
  • inputNumber：数字输入框
  • cascader：级联选择器
  • rate：评分
  • slider：滑块
  • treeSelect：树选择
  • txt：文本展示
  • title：标题
  • tabs：标签页
  • flex：布局容器
  • card：卡片
  • divider：分割线
  • button：按钮
  • table：表格
  • component：自定义组件
  • upload：上传
  • tinymce：富文本编辑器
  • grid：栅格布局
  • div：普通容器

input（单行文本）

用于输入标题、名称、链接、UID 等简单字符串信息。

🔸type 固定值："input"（单行文本输入组件）

🔸control 对象属性说明

属性名说明类型默认值
modelValue绑定的输入值string | number""
type输入框类型（text 等）string"text"
placeholder输入框占位提示文字string""
maxlength最大输入长度number—
minlength最小输入长度number—
showWordLimit是否显示字数统计booleanfalse
clearable是否显示清除按钮booleanfalse
disabled是否禁用输入框booleanfalse
readonly是否只读booleanfalse
autocomplete浏览器自动完成功能string"off"
autofocus是否自动聚焦booleanfalse
tabindextab 键顺序string | number—
validateEvent是否触发表单验证事件booleantrue
inputStyle输入框自定义样式object{}
size输入框尺寸（small等）string"default"
示例
{
  "type": "input",
  "name": "username",
  "control": {
    "modelValue": "",
    "type": "text",
    "placeholder": "请输入用户名",
    "maxlength": 20,
    "minlength": 3,
    "showWordLimit": true,
    "clearable": true,
    "disabled": false,
    "readonly": false,
    "autocomplete": "off",
    "autofocus": false,
    "tabindex": "1",
    "validateEvent": true,
    "inputStyle": {},
    "size": "default"
  },
  "formItem": {
    "label": "用户名",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (!/^[a-zA-Z]/.test(value)) {
            callback(new Error("必须以字母开头"));
          } else {
            callback();
          }
        },
        "trigger": "blur"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请输入用户名",
      "trigger": "blur"
    },
    {
      "min": 3,
      "max": 20,
      "message": "长度在 3 到 20 个字符",
      "trigger": "blur"
    }
  ],
  "config": {}
}

textarea（多行文本）

用于输入多行文本信息，如备注、评论、详细描述等。

🔸type 固定值："textarea"（多行文本输入组件）

🔸control 对象属性说明

属性名说明类型默认值
modelValue绑定的输入值string""
placeholder输入框占位提示文字string""
maxlength最大输入长度number—
minlength最小输入长度number—
rows显示行数number2
showWordLimit是否显示字数统计booleanfalse
clearable是否显示清除按钮booleanfalse
disabled是否禁用输入框booleanfalse
readonly是否只读booleanfalse
resize是否允许调整大小string"none"
autofocus是否自动聚焦booleanfalse
validateEvent是否触发表单验证事件booleantrue
inputStyle输入框自定义样式object{}
size输入框尺寸string"default"
示例
{
  "type": "textarea",
  "name": "description",
  "control": {
    "modelValue": "",
    "placeholder": "请输入内容",
    "maxlength": 500,
    "minlength": 5,
    "rows": 4,
    "showWordLimit": true,
    "clearable": true,
    "disabled": false,
    "readonly": false,
    "resize": "vertical",
    "autofocus": false,
    "validateEvent": true,
    "inputStyle": {},
    "size": "default"
  },
  "formItem": {
    "label": "描述",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (!value || value.trim() === "") {
            callback(new Error("请输入描述"));
          } else {
            callback();
          }
        },
        "trigger": "blur"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请输入描述",
      "trigger": "blur"
    }
  ],
  "config": {}
}

radio（单选框）

用于在多个选项中选择一个。

🔸type 固定值："radio"（单选框组件）

🔸control 对象属性说明

属性名说明类型默认值
modelValue绑定的选中值string | number—
options选项数组Array<{label, value}>[]
disabled是否禁用booleanfalse
size单选框组尺寸string"default"
border是否显示边框booleanfalse
示例
{
  "type": "radio",
  "name": "gender",
  "control": {
    "modelValue": "male",
    "options": [
      { "label": "男", "value": "male" },
      { "label": "女", "value": "female" }
    ],
    "disabled": false,
    "size": "default",
    "border": false
  },
  "formItem": {
    "label": "性别",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (!value) {
            callback(new Error("请选择性别"));
          } else {
            callback();
          }
        },
        "trigger": "change"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请选择性别",
      "trigger": "change"
    }
  ],
  "config": {}
}

checkbox（多选框）

用于多选操作，用户可选择多个选项。

🔸type 固定值："checkbox"（多选框组件）

🔸control 对象属性说明

属性名说明类型默认值
modelValue绑定的选中值数组array[]
options选项数组Array<{label, value}>[]
disabled是否禁用booleanfalse
size多选框组尺寸string"default"
min最小选中数量number—
max最大选中数量number—
示例
{
  "type": "checkbox",
  "name": "hobbies",
  "control": {
    "modelValue": ["reading", "traveling"],
    "options": [
      { "label": "阅读", "value": "reading" },
      { "label": "旅行", "value": "traveling" },
      { "label": "运动", "value": "sports" }
    ],
    "disabled": false,
    "size": "default",
    "min": 1,
    "max": 3
  },
  "formItem": {
    "label": "兴趣爱好",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (!value || value.length === 0) {
            callback(new Error("请选择至少一个爱好"));
          } else {
            callback();
          }
        },
        "trigger": "change"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请选择至少一个爱好",
      "trigger": "change"
    },
    {
      "type": "array",
      "min": 1,
      "message": "请选择至少一个爱好",
      "trigger": "change"
    }
  ],
  "config": {}
}

select（下拉选择）

用于从下拉列表中选择一个或多个值。

🔸type 固定值："select"（下拉选择组件）

🔸control 对象属性说明

属性名说明类型默认值
modelValue绑定的值（多选时为数组）string | array""
options选项数组Array<{label, value}>[]
multiple是否多选booleanfalse
disabled是否禁用booleanfalse
clearable是否显示清除按钮booleanfalse
placeholder占位提示文字string""
filterable是否支持搜索过滤booleanfalse
size组件尺寸string"default"
示例
{
  "type": "select",
  "name": "country",
  "control": {
    "modelValue": "",
    "options": [
      { "label": "中国", "value": "cn" },
      { "label": "美国", "value": "us" },
      { "label": "英国", "value": "uk" }
    ],
    "multiple": false,
    "disabled": false,
    "clearable": true,
    "placeholder": "请选择国家",
    "filterable": true,
    "size": "default"
  },
  "formItem": {
    "label": "国家",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (!value) {
            callback(new Error("请选择国家"));
          } else {
            callback();
          }
        },
        "trigger": "change"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请选择国家",
      "trigger": "change"
    }
  ],
  "config": {}
}

datePicker（日期选择器）

用于选择日期或日期范围。

🔸type 固定值："datePicker"（日期选择器组件）

🔸control 对象属性说明

属性名说明类型默认值
modelValue绑定的值（范围模式为数组）string | array | nullnull
type选择器类型string"date"
format展示格式string—
valueFormat绑定值格式string—
placeholder占位提示文字string""
disabled是否禁用booleanfalse
clearable是否显示清除按钮booleanfalse
editable输入框是否可编辑booleantrue
range是否为范围选择booleanfalse
size组件尺寸string"default"
示例
{
  "type": "datePicker",
  "name": "birthday",
  "control": {
    "modelValue": null,
    "type": "date",
    "format": "yyyy-MM-dd",
    "valueFormat": "yyyy-MM-dd",
    "placeholder": "选择日期",
    "disabled": false,
    "clearable": true,
    "editable": true,
    "range": false,
    "size": "default"
  },
  "formItem": {
    "label": "生日",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (!value) {
            callback(new Error("请选择日期"));
          } else {
            callback();
          }
        },
        "trigger": "change"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请选择日期",
      "trigger": "change"
    }
  ],
  "config": {}
}

timePicker（时间选择器）

用于选择时间或时间范围。

🔸type 固定值："timePicker"（时间选择器组件）

🔸control 对象属性说明

属性名说明类型默认值
modelValue绑定的值（范围模式为数组）string | array | nullnull
isRange是否为时间范围选择booleanfalse
format显示格式string"HH:mm:ss"
valueFormat绑定值格式string"HH:mm:ss"
placeholder占位提示文字string""
disabled是否禁用booleanfalse
clearable是否显示清除按钮booleanfalse
size组件尺寸string"default"
示例
{
  "type": "timePicker",
  "name": "meetingTime",
  "control": {
    "modelValue": null,
    "isRange": false,
    "format": "HH:mm:ss",
    "valueFormat": "HH:mm:ss",
    "placeholder": "选择时间",
    "disabled": false,
    "clearable": true,
    "size": "default"
  },
  "formItem": {
    "label": "会议时间",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (!value) {
            callback(new Error("请选择时间"));
          } else {
            callback();
          }
        },
        "trigger": "change"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请选择时间",
      "trigger": "change"
    }
  ],
  "config": {}
}

colorPicker（颜色选择器）

用于选择颜色值。

🔸type 固定值："colorPicker"（颜色选择器组件）

🔸control 对象属性说明

属性名说明类型默认值
modelValue绑定的颜色值string""
disabled是否禁用booleanfalse
showAlpha是否显示透明度选择booleanfalse
size组件尺寸string"default"
示例
{
  "type": "colorPicker",
  "name": "themeColor",
  "control": {
    "modelValue": "#409EFF",
    "disabled": false,
    "showAlpha": false,
    "size": "default"
  },
  "formItem": {
    "label": "主题颜色",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (!value) {
            callback(new Error("请选择颜色"));
          } else {
            callback();
          }
        },
        "trigger": "change"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请选择颜色",
      "trigger": "change"
    }
  ],
  "config": {}
}

switch（开关）

用于切换开/关状态。

🔸type 固定值："switch"（开关组件）

🔸control 对象属性说明

属性名说明类型默认值
modelValue绑定的开关状态booleanfalse
disabled是否禁用booleanfalse
activeText开启时显示文字string""
inactiveText关闭时显示文字string""
activeColor开启时颜色string"#409EFF"
inactiveColor关闭时颜色string"#C0CCDA"
示例
{
  "type": "switch",
  "name": "isActive",
  "control": {
    "modelValue": true,
    "disabled": false,
    "activeText": "开",
    "inactiveText": "关",
    "activeColor": "#409EFF",
    "inactiveColor": "#C0CCDA"
  },
  "formItem": {
    "label": "是否激活",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          callback();
        },
        "trigger": "change"
      }
    ]
  },
  "customRules": [],
  "config": {}
}

inputNumber（数字输入框）

用于输入数字，可以设置范围、步进等。

🔸type 固定值："inputNumber"（数字输入框组件）

🔸control 对象属性说明

属性名说明类型默认值
modelValue绑定的数值number0
min最小值number—
max最大值number—
step步进值number1
disabled是否禁用booleanfalse
size组件尺寸string"default"
示例
{
  "type": "inputNumber",
  "name": "age",
  "control": {
    "modelValue": 18,
    "min": 0,
    "max": 120,
    "step": 1,
    "disabled": false,
    "size": "default"
  },
  "formItem": {
    "label": "年龄",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (value === null || value === undefined) {
            callback(new Error("请输入年龄"));
          } else if (value < 0 || value > 120) {
            callback(new Error("年龄范围为 0-120"));
          } else {
            callback();
          }
        },
        "trigger": "blur"
      }
    ]
  },
  "customRules": [
    {
      "type": "number",
      "min": 0,
      "max": 120,
      "message": "年龄范围为 0-120",
      "trigger": "blur"
    }
  ],
  "config": {}
}

cascader（级联选择器）

用于选择多级分类数据。

🔸type 固定值："cascader"（级联选择器组件）

🔸control 对象属性说明

属性名说明类型默认值
modelValue绑定的选中值数组array[]
options级联选项数据Array<{label, value, children}>[]
disabled是否禁用booleanfalse
clearable是否显示清除按钮booleanfalse
placeholder占位提示文字string""
size组件尺寸string"default"
示例
{
  "type": "cascader",
  "name": "address",
  "control": {
    "modelValue": [],
    "options": [
      {
        "label": "浙江",
        "value": "zj",
        "children": [
          { "label": "杭州", "value": "hz" },
          { "label": "宁波", "value": "nb" }
        ]
      },
      {
        "label": "江苏",
        "value": "js",
        "children": [
          { "label": "南京", "value": "nj" },
          { "label": "苏州", "value": "sz" }
        ]
      }
    ],
    "disabled": false,
    "clearable": true,
    "placeholder": "请选择地址",
    "size": "default"
  },
  "formItem": {
    "label": "地址",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (!value || value.length === 0) {
            callback(new Error("请选择地址"));
          } else {
            callback();
          }
        },
        "trigger": "change"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请选择地址",
      "trigger": "change"
    }
  ],
  "config": {}
}

rate（评分）

用于评分选择，通常显示星星。

🔸type 固定值："rate"（评分组件）

🔸control 对象属性说明

属性名说明类型默认值
modelValue当前评分number0
max最大分数number5
disabled是否禁用booleanfalse
allowHalf是否允许半星评分booleanfalse
showText是否显示文本说明booleanfalse
showScore是否显示数字评分booleanfalse
size组件尺寸string"default"
示例
{
  "type": "rate",
  "name": "score",
  "control": {
    "modelValue": 3,
    "max": 5,
    "disabled": false,
    "allowHalf": true,
    "showText": false,
    "showScore": false,
    "size": "default"
  },
  "formItem": {
    "label": "评分",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (value === null || value === undefined || value === 0) {
            callback(new Error("请评分"));
          } else {
            callback();
          }
        },
        "trigger": "change"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请评分",
      "trigger": "change"
    }
  ],
  "config": {}
}

slider（滑动条）

用于选择数值范围或单个数值。

🔸type 固定值："slider"（滑动条组件）

🔸control 对象属性说明

属性名说明类型默认值
modelValue当前数值（范围模式为数组）number | array0
min最小值number0
max最大值number100
step步长number1
disabled是否禁用booleanfalse
range是否范围选择booleanfalse
showTooltip是否显示提示booleantrue
size组件尺寸string"default"
示例
{
  "type": "slider",
  "name": "volume",
  "control": {
    "modelValue": 50,
    "min": 0,
    "max": 100,
    "step": 1,
    "disabled": false,
    "range": false,
    "showTooltip": true,
    "size": "default"
  },
  "formItem": {
    "label": "音量",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (value === null || value === undefined) {
            callback(new Error("请选择音量"));
          } else {
            callback();
          }
        },
        "trigger": "change"
      }
    ]
  },
  "customRules": [],
  "config": {}
}

treeSelect（树形选择器）

用于选择树形结构中的某个或多个节点。

🔸type 固定值："treeSelect"（树形选择器组件）

🔸control 对象属性说明

属性名说明类型默认值
modelValue绑定的值（多选时为数组）array | string[]
treeData树形数据Array<{label, id, children}>[]
multiple是否多选booleanfalse
disabled是否禁用booleanfalse
clearable是否显示清除按钮booleanfalse
placeholder占位提示文字string""
size组件尺寸string"default"
示例
{
  "type": "treeSelect",
  "name": "category",
  "control": {
    "modelValue": [],
    "treeData": [
      {
        "label": "电子产品",
        "id": 1,
        "children": [
          { "label": "手机", "id": 2 },
          { "label": "电脑", "id": 3 }
        ]
      }
    ],
    "multiple": true,
    "disabled": false,
    "clearable": true,
    "placeholder": "请选择类别",
    "size": "default"
  },
  "formItem": {
    "label": "类别",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (!value || (Array.isArray(value) && value.length === 0)) {
            callback(new Error("请选择类别"));
          } else {
            callback();
          }
        },
        "trigger": "change"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请选择类别",
      "trigger": "change"
    }
  ],
  "config": {}
}

txt（文本显示）

用于显示只读文本。

🔸type 固定值："txt"（文本显示组件）

🔸control 对象属性说明

属性名说明类型默认值
modelValue显示的文本内容string""
示例
{
  "type": "txt",
  "name": "descriptionText",
  "control": {
    "modelValue": "这是只读文本"
  },
  "formItem": {
    "label": "说明",
    "rules": []
  },
  "customRules": [],
  "config": {}
}

title（标题）

用于显示标题文本。

🔸type 固定值："title"（标题组件）

🔸control 对象属性说明

属性名说明类型默认值
modelValue标题文本内容string""
示例
{
  "type": "title",
  "name": "pageTitle",
  "control": {
    "modelValue": "用户管理"
  },
  "formItem": {},
  "customRules": [],
  "config": {}
}

tabs（标签页）

用于创建标签页切换。

🔸type 固定值："tabs"（标签页组件）

🔸control 对象属性说明

属性名说明类型默认值
modelValue当前激活的标签名string""
tabs标签数组Array<{label, name}>[]
示例
{
  "type": "tabs",
  "name": "mainTabs",
  "control": {
    "modelValue": "tab1",
    "tabs": [
      { "label": "标签1", "name": "tab1" },
      { "label": "标签2", "name": "tab2" }
    ]
  },
  "formItem": {},
  "customRules": [],
  "config": {}
}

flex（弹性布局）

用于布局弹性容器。

🔸type 固定值："flex"（弹性布局组件）

🔸control 对象属性说明

属性名说明类型默认值
justify主轴对齐方式string"start"
align侧轴对齐方式string"stretch"
direction主轴方向string"row"
wrap是否换行string"nowrap"
示例
{
  "type": "flex",
  "name": "flexContainer",
  "control": {
    "justify": "start",
    "align": "center",
    "direction": "row",
    "wrap": "nowrap"
  },
  "formItem": {},
  "customRules": [],
  "config": {}
}

card（卡片）

用于显示卡片容器。

🔸type 固定值："card"（卡片组件）

🔸control 对象属性说明

属性名说明类型默认值
header卡片头部标题string""
bordered是否有边框booleanfalse
shadow是否有阴影booleanfalse
示例
{
  "type": "card",
  "name": "userCard",
  "control": {
    "header": "用户信息",
    "bordered": true,
    "shadow": true
  },
  "formItem": {},
  "customRules": [],
  "config": {}
}

divider（分割线）

用于分隔内容。

🔸type 固定值："divider"（分割线组件）

🔸control 对象属性说明

属性名说明类型默认值
direction分割线方向string"horizontal"
contentPosition内容位置string"center"
示例
{
  "type": "divider",
  "name": "lineDivider",
  "control": {
    "direction": "horizontal",
    "contentPosition": "center"
  },
  "formItem": {},
  "customRules": [],
  "config": {}
}

button（按钮）

用于触发操作。

🔸type 固定值："button"（按钮组件）

🔸control 对象属性说明

属性名说明类型默认值
text按钮显示文本string""
type按钮类型string"default"
size按钮尺寸string"default"
disabled是否禁用booleanfalse
loading是否加载中booleanfalse
icon按钮图标名称string""
示例
{
  "type": "button",
  "name": "submitBtn",
  "control": {
    "text": "提交",
    "type": "primary",
    "size": "default",
    "disabled": false,
    "loading": false,
    "icon": "Check"
  },
  "formItem": {},
  "customRules": [],
  "config": {}
}

table（表格）

用于显示表格数据。

🔸type 固定值："table"（表格组件）

🔸control 对象属性说明

属性名说明类型默认值
columns表格列配置Array<{label, prop}>[]
data表格数据Array<object>[]
示例
{
  "type": "table",
  "name": "userTable",
  "control": {
    "columns": [
      { "label": "姓名", "prop": "name" },
      { "label": "年龄", "prop": "age" }
    ],
    "data": []
  },
  "formItem": {},
  "customRules": [],
  "config": {}
}

component（自定义组件）

用于嵌入自定义组件。

🔸type 固定值："component"（自定义组件）

🔸control 对象属性说明

属性名说明类型默认值
componentName自定义组件名称string""
props传递给自定义组件的属性object{}
示例
{
  "type": "component",
  "name": "customComp",
  "control": {
    "componentName": "MyComponent",
    "props": {}
  },
  "formItem": {},
  "customRules": [],
  "config": {}
}

upload（上传）

用于文件上传。

🔸type 固定值："upload"（上传组件）

🔸control 对象属性说明

属性名说明类型默认值
action上传接口地址string""
multiple是否支持多文件上传booleanfalse
accept接受的文件类型string""
fileList已上传文件列表array[]
disabled是否禁用booleanfalse
showFileList是否显示文件列表booleantrue
示例
{
  "type": "upload",
  "name": "avatar",
  "control": {
    "action": "/upload",
    "multiple": false,
    "accept": "image/*",
    "fileList": [],
    "disabled": false,
    "showFileList": true
  },
  "formItem": {
    "label": "头像上传",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (!value || (Array.isArray(value) && value.length === 0)) {
            callback(new Error("请上传文件"));
          } else {
            callback();
          }
        },
        "trigger": "change"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请上传文件",
      "trigger": "change"
    }
  ],
  "config": {}
}

tinymce（富文本编辑器）

用于编辑富文本内容。

🔸type 固定值："tinymce"（富文本编辑器组件）

🔸control 对象属性说明

属性名说明类型默认值
modelValue富文本内容string""
disabled是否禁用编辑booleanfalse
height编辑器高度（像素）number300
示例
{
  "type": "tinymce",
  "name": "content",
  "control": {
    "modelValue": "",
    "disabled": false,
    "height": 300
  },
  "formItem": {
    "label": "内容",
    "rules": [
      {
        "validator": (rule, value, callback) => {
          if (!value) {
            callback(new Error("请输入内容"));
          } else {
            callback();
          }
        },
        "trigger": "blur"
      }
    ]
  },
  "customRules": [
    {
      "required": true,
      "message": "请输入内容",
      "trigger": "blur"
    }
  ],
  "config": {}
}

grid（网格布局）

用于布局网格容器。

🔸type 固定值："grid"（网格布局组件）

🔸control 对象属性说明

属性名说明类型默认值
cols列数number24
gutter栅格间距number0
justify主轴对齐方式string"start"
align侧轴对齐方式string"top"
示例
{
  "type": "grid",
  "name": "gridLayout",
  "control": {
    "cols": 4,
    "gutter": 10,
    "justify": "start",
    "align": "top"
  },
  "formItem": {},
  "customRules": [],
  "config": {}
}

div（容器）

用于包裹内容的容器。

🔸type 固定值："div"（容器组件）

🔸control 对象属性说明

属性名说明类型默认值
style容器自定义样式object{}
示例
{
  "type": "div",
  "name": "contentWrapper",
  "control": {
    "style": {
      "padding": "10px",
      "backgroundColor": "#f5f5f5"
    }
  },
  "formItem": {},
  "customRules": [],
  "config": {}
}

name 字段名

说明：绑定数据的字段名，在同一表单中必须唯一

项目内容
类型string
必填是
默认值—
示例"username"

control 组件属性配置

属性名说明类型是否必填默认值示例值
modelValue绑定的输入值，通常双向绑定string | number否""""
type输入框类型，如 text、passwordstring否"text""text"
placeholder输入框占位提示文字string否"""请输入用户名"
maxlength最大输入长度number否—20
minlength最小输入长度number否—3
showWordLimit是否显示字数统计boolean否falsetrue
clearable是否显示清除按钮boolean否falsetrue
disabled是否禁用输入框boolean否falsefalse
readonly是否只读boolean否falsefalse
autocomplete浏览器自动完成功能string否"off""off"
autofocus是否自动聚焦boolean否falsefalse
tabindextab 键顺序string | number否—"1"
validateEvent是否触发表单验证事件boolean否truetrue
inputStyle输入框自定义样式对象object否{}{ color: "#333", fontSize: "14px" }
size输入框尺寸，支持 small/default/largestring否"default""default"
options选项数组（常用于 select、radio 等）Array<{ label: string; value: any }>否[][ { label: "选项1", value: "1" }, { label: "选项2", value: "2" } ]
multiple是否多选boolean否falsefalse
filterable是否支持搜索筛选boolean否falsetrue
rows多行文本框行数，textarea 专用number否24
resizetextarea 是否允许调整大小及方向string否"none""vertical"
autosizetextarea 自动高度配置object否null{ minRows: 2, maxRows: 6 }
buttonStyleradio 按钮样式string否"outline""outline"
min数字类组件最小值number否00
max数字类组件最大值number否100100
step数字类组件步长number否11
format日期格式，datePicker 专用string否"""yyyy-MM-dd"
placeholderTime时间选择器占位提示string否"""选择时间"
disabledDate禁用日期函数function否null(date) => date < new Date()
showAlpha颜色选择器是否显示透明度boolean否falsefalse
activeColor颜色选择器主题色string否"#409EFF""#409EFF"
checked开关状态，switch 组件专用boolean否falsefalse
icon按钮图标名string否"""Check"
loading按钮加载状态boolean否falsefalse
text按钮文本string否"""提交"
columns表格列配置Array<{ label: string; prop: string }>否[][ { label: "姓名", prop: "name" }, { label: "年龄", prop: "age" } ]
data表格数据Array否[][]
style容器样式object否{}{ padding: "10px", backgroundColor: "#f5f5f5" }
height富文本编辑器高度number否300300
action上传接口地址string否"""/upload"
multipleUpload是否支持多文件上传boolean否falsefalse
showFileList是否显示文件列表boolean否truetrue

formItem 表单项配置

属性名说明类型是否必填默认值示例值
label表单标签文字string否"""确认密码"
rules校验规则数组Array否见自定义验证函数示例

校验示例

opt = {
  list: [
  {
    type: "password",
    name: "userPassword",
    control:
    {
      modelValue: ""
    },
    config:
    {},
    formItem:
    {
      label: "密码",
      rules: [
      {
        required: true,
        message: "请输入密码",
        trigger: "blur"
      },
      {
        min: 6,
        message: "密码长度不能少于6位",
        trigger: "blur"
      }]
    }
  },
  {
    type: "password",
    name: "confirmPassword",
    control:
    {
      modelValue: ""
    },
    config:
    {},
    formItem:
    {
      label: "确认密码",
      rules: [
      {
        required: true,
        message: "请再次输入密码",
        trigger: "blur"
      },
      {
        validator: (rule, value, callback) =>
        {

          // 👉 注意这里也要改
          const password = getTestDemoValueByName("userPassword");

          if (!value)
          {
            callback(new Error("请再次输入密码"));
          }
          else if (value !== password)
          {
            callback(new Error("两次密码输入不一致"));
          }
          else
          {
            callback();
          }
        },
        trigger: "blur"
      }]
    }
  }],
  form:
  {
    size: "default",
    labelWidth: "100px",
    name: "TestDemo"
  },
  config:
  {
    submitCancel: true
  }
}

customRules 自定义校验规则

属性名说明类型是否必填默认值示例值
type规则类型string是—"required"
message规则提示信息string是—"必填项"
trigger触发校验时机string是—"blur"
opt = {
  list: [

  {
    type: "input",
    control:
    {
      modelValue: "2@qq.com"
    },
    config:
    {},
    name: "inputEmail",
    formItem:
    {
      label: "邮箱地址"
    },
    customRules: [
    {
      type: "required",
      message: "必填项",
      trigger: "blur"
    },
    {
      type: "email",
      message: "请输入邮箱地址",
      trigger: "blur"
    }]
  },

 ],
  form:
  {
    size: "default"
  },
  config:
  {
    submitCancel: true
  },
  events:
  {
  }
}

config 扩展配置

属性名说明类型是否必填默认值示例值
optionsType自定义配置项类型number否—1
optionsFun远程接口或本地方法名string否—"demo/options"
method请求方法string否—"get"
linkage关联其他组件字段名string否—"name1"
before请求前钩子函数，修改请求参数function否—(params, { type, route, model }) => { return params; }
after请求后钩子函数，处理响应数据function否—(res, success, type) => { return res; }

表单配置 (form)

属性名说明类型默认值
name表单标识，可根据此标识使用 get[formName]ControlByName 获取其他选项数据string—
labelWidth表单标签宽度，如 "100px"string—
class表单样式名称，可快速选择内置好的表单布局类名，或自定义类名string—
showColon统一设置表单 label 是否添加冒号booleanfalse
size组件尺寸"default" | "small" | "large""default"
form: {
  name: "testForm",           // 表单标识
  labelWidth: "100px",        // 表单标签宽度
  class: "custom-form",       // 表单样式名称
  showColon: true,            // 字段名后添加冒号
  size: "default"             // 组件尺寸
}

补充说明：

  • form.name：表单的唯一标识，可用于通过 get[formName]ControlByName 方法获取表单中其他控件的值
  • form.labelWidth：统一设置所有表单项标签的宽度，支持 px、% 等单位
  • form.class：支持传入内置类名或自定义 CSS 类名，用于快速调整表单布局样式
  • form.showColon：全局控制表单标签后是否显示冒号，优先级低于 formItem 级别的配置
  • form.size：统一设置表单内所有组件的尺寸，可被单个组件的 size 属性覆盖

事件说明 (events)

用于控制表单在请求前后、提交前后、表单联动等生命周期行为。

事件作用
before请求前处理
after请求后处理
beforeFetch获取数据前
afterFetch获取数据后
beforeSubmit提交前
afterSubmit提交后
change表单联动

events: {
  before: (params,type,obj) =>
  {
    // params请求的参数，可根据type作判断，对params作修改后return回去
    // 需要将params参数return
    return params;
  },
  after: (res, type, success) =>
  {
    // res接口返回结果，type当前事件类型，success是否成功；对结果修改后返回
    console.log(type, res);
    return res;
  },

  beforeFetch: (data, route) =>
  {
    // data请求参数，route当前路由信息
    console.log("beforeFetch");
    console.log(data);
    console.log(route);
    return data;
  },
  afterFetch: (type, res) =>
  {
    // 请求响应结果
    console.log("afterFetch");
    console.log(type);
    console.log(res);
    return res;
  },
  beforeSubmit: (data, route, model) =>
  {
    // data提交的参数，route当前路由信息，当前表单值
    console.log("beforeSubmit");
    console.log(data);
    console.log(route);
    console.log(model);
    return data;
  },
  afterSubmit: (type, data, res) =>
  {
    // type(success,fail,validate),data响应数据,res响应结果
    console.log("afterSubmit");
    console.log(type);
    console.log(data);
    console.log(res);
    // drawerVisible.value = false;//关闭
  },
  change: (name, model) =>
  {
    console.log("change");
    console.log(name);
    console.log(model);
    // name当前组件的name,model当前表单的值
    return model;
  }
}

before（请求前）

before?: string | ((params: any, obj: any) => any)

说明： 所有接口请求前触发（增删改查 / 远程数据等）

参数：

  • params：请求参数（可修改）
  • obj.type：请求类型
    • get / add / edit
    • linkage / remote / default
  • obj.route：当前路由
  • obj.model：当前表单数据

返回： 必须 return params

示例：

before: (params, obj) => {
  // 加公共参数
  params.token = "xxx"

  // 新增时追加字段
  if (obj.type === "add") {
    params.createTime = Date.now()
  }

  return params
}

after（请求后）

after?: string | ((res: any, success: boolean, type?: string) => any)

说明： 接口返回后统一处理

参数：

  • res：响应数据
  • success：是否成功
  • type：请求类型

返回： 必须 return res

示例：

after: (res, success, type) => {
  // 统一返回结构
  if (success && res.code === 0) {
    return res.data
  }
  return res
}

beforeFetch（获取数据前）

(data, route) => any

说明： 获取表单/列表数据前触发

参数：

  • data：请求参数
  • route：当前路由

返回： 必须 return data

示例：

beforeFetch: (data, route) => {
  data.page = 1
  data.pageSize = 10
  return data
}

afterFetch（获取数据后）

(type, res) => any

说明： 获取数据后处理

参数：

  • type：请求类型
  • res：响应数据

返回： 必须 return res

示例：

afterFetch: (type, res) => {
  if (type === "get") {
    res.data = res.data || {}
  }
  return res
}

beforeSubmit（提交前）

(data, route, model) => any

说明： 提交表单前触发

参数：

  • data：提交参数
  • route：当前路由
  • model：表单数据

返回： 必须 return data

示例：

beforeSubmit: (data, route, model) => {
  // 合并表单数据
  data.formData = model
  return data
}

afterSubmit（提交后）

(type, data, res) => void

说明： 提交完成后触发

参数：

  • type：success / fail / validate
  • data：响应数据
  • res：原始响应

示例：

afterSubmit: (type, data, res) => {
  if (type === "success") {
    console.log("提交成功")
  }
}

change（表单联动）

change?: string | (({ name, value, prop, options, model }) => any)

说明： 表单字段值变化时触发，用于联动

参数：

  • name：字段名
  • value：当前值
  • prop：字段配置
  • options：选项数据
  • model：当前表单数据

返回： 必须 return model

示例：

change: ({ name, value, model }) => {
  // 年龄联动
  if (name === "age") {
    model.isAdult = value >= 18 ? 1 : 0
  }

  // 邮箱生成用户名
  if (name === "email") {
    model.username = value.split("@")[0]
  }

  return model
}

string 写法（高级）

events: {
  before: "customBefore"
}

说明：

  • 事件可写为字符串
  • 对应逻辑写在本地（如 /src/utils/beforeAfter.ts）
  • 适合复杂逻辑复用

⚠️ 注意事项

  • 以下必须 return：
    • before
    • after
    • beforeFetch
    • afterFetch
    • beforeSubmit
    • change
  • afterSubmit 不需要返回值

接口行为配置 (config)

config: {
  submitCancel: boolean, // 是否显示提交/取消
  submitUrl: string,     // 新增接口
  editUrl: string,       // 编辑接口
  requestUrl: string     // 查看详情接口
}

⚠️ 注意： 接口请求可能会涉及跨域问题。例如：当前页面运行在云控官网后台域名（如 http://cloud.jsdevhub.com），而接口地址是 http://47.94.105.29:66，会因浏览器同源策略被拦截。解决方式建议：后端开启 CORS 并允许跨域

选项数据格式要求

适用于 select / selectPlus 等组件：

[
  { "id": 1, "label": "选项 A" },
  { "id": 2, "label": "选项 B" }
]

需要配合：optionsType: 1、optionsFun、value、label 等字段使用。

完整配置示例

opt = { 
  list: [
  {
    type: "input",
    control:
    {
      modelValue: "",
      placeholder: "请输入标题"
    },
    config:
    {},
    name: "label",
    formItem:
    {
      label: "标题"
    }
  },
  
  {
    type: "textarea",
    control:
    {
      modelValue: ""
    },
    config:
    {},
    name: "textarea",
    formItem:
    {
      label: "多行文本"
    }
  },
    {
    type: "inputNumber",
    control:
    {
      modelValue: 0
    },
    config:
    {},
    name: "inputNumber",
    formItem:
    {
      label: "计数器"
    }
  },
    {
    type: "rate",
    control:
    {
      modelValue: 0
    },
    config:
    {},
    name: "rate",
    formItem:
    {
      label: "评分"
    }
  },
  {
    type: "slider",
    control:
    {
      modelValue: 0
    },
    config:
    {},
    name: "slider",
    formItem:
    {
      label: "滑块"
    }
  },

  {
    type: "switch",
    control:
    {
      modelValue: false,
      activeValue: 1,
      inactiveValue: 0
    },
    config:
    {},
    name: "switch",
    formItem:
    {
      label: "开关"
    }
  },
   {
    type: "datePicker",
    control:
    {
      modelValue: "",
      type: "datetime"
    },
    config:
    {},
    name: "datePicker",
    formItem:
    {
      label: "日期选择器"
    }
  },
  {
    type: "timePicker",
    control:
    {
      modelValue: ""
    },
    config:
    {},
    name: "timePicker",
    formItem:
    {
      label: "时间选择器"
    }
  },
    {
    type: "colorPicker",
    control:
    {
      modelValue: ""
    },
    config:
    {},
    name: "colorPicker",
    formItem:
    {
      label: "取色器"
    }
  },
    {
    type: "upload",
    control:
    {
      modelValue: "",
      action: "http://47.94.105.29:66/api/upload",
      multiple: true,
      limit: 2,
      listType: "picture-card"
    },
    config:
    {
      tip: "",
      btnText: ""
    },
    name: "upload",
    formItem:
    {
      label: "图片文件上传"
    }
  },
    {
    type: "select",
    control:
    {
      modelValue: "",
      appendToBody: true,
      placeholder: "请选择任务类型"
    },
    options: [],
    config:
    {
      optionsType: 2,
      optionsFun: ""
    },
    name: "task_type_id",
    formItem:
    {
      label: "任务类型"
    }
  },
  {
    type: "select",
    control:
    {
      modelValue: "",
      appendToBody: true
    },
    options: [],
    config:
    {
      optionsType: 1,
      optionsFun: "http://180.76.145.80/api/getDeviceList",
      method: "post",
      value: "id"
    },
    name: "device_id",
    formItem:
    {
      label: "设备"
    }
  },
  {
    type: "select",
    control:
    {
      modelValue: "",
      appendToBody: true
    },
    options: [],
    config:
    {
      optionsType: 1,
      optionsFun: "http://180.76.145.80/api/getUserList",
      method: "post",
      value: "id"
    },
    name: "user_id",
    formItem:
    {
      label: "用户"
    }
  },
  {
    type: "selectPlus",
    control:
    {
      modelValue: "",
      appendToBody: true,
      valueKey: "id",
      filterable: true,
      props:
      {
        label: "label",
        value: "id"
      }
    },
    options: [],
    config:
    {
      optionsType: 1,
      optionsFun: "http://47.94.105.29:66/api/DataListCaseCategoryList",
      method: "post",
      addUrl: "http://47.94.105.29:66/api/addDataListCaseCategory",
      editUrl: "http://47.94.105.29:66/api/editDataListCaseCategory",
      deleteUrl: "http://47.94.105.29:66/api/deleteDataListCaseCategory"
    },
    name: "category_id",
    formItem:
    {
      label: "分类"
    }
  },
  {
    type: "input",
    control:
    {
      modelValue: "",
      placeholder: "请输入链接"
    },
    config:
    {},
    name: "link",
    formItem:
    {
      label: "链接"
    }
  },
  {
    type: "input",
    control:
    {
      modelValue: "",
      placeholder: "请输入uid"
    },
    config:
    {},
    name: "uid",
    formItem:
    {
      label: "UID"
    }
  },
  {
    type: "upload",
    control:
    {
      modelValue: "",
      action: "http://47.94.105.29:66/api/upload"
    },
    config:
    {},
    name: "play",
    formItem:
    {
      label: "播放"
    }
  },
  {
    type: "upload",
    control:
    {
      modelValue: "",
      action: "http://47.94.105.29:66/api/upload"
    },
    config:
    {},
    name: "download",
    formItem:
    {
      label: "下载链接"
    }
  },
  {
    type: "upload",
    control:
    {
      modelValue: "",
      action: "http://47.94.105.29:66/api/upload",
      multiple: true,
      limit: 2,
      listType: "picture-card"
    },
    config:
    {},
    name: "image",
    formItem:
    {
      label: "图片/文件"
    }
  },
  {
    type: "upload",
    control:
    {
      modelValue: "",
      action: "http://47.94.105.29:66/api/upload",
      limit: 1,
      drag: true
    },
    config:
    {},
    name: "video",
    formItem:
    {
      label: "视频文件"
    }
  },
  {
    type: "input",
    control:
    {
      modelValue: ""
    },
    config:
    {},
    name: "copy",
    formItem:
    {
      label: "复制文本"
    }
  }],
  form:
  {
    size: "default",
    labelWidth: "100px"
  },
  config:
  {
    submitCancel: true,
    submitUrl: "http://47.94.105.29:66/api/addDataListCase",
    editUrl: "http://47.94.105.29:66/api/editDataListCase",
    requestUrl: "http://47.94.105.29:66/api/getDataListCase"
  }
}

二次开发指南

介绍云控后台二次开发能力及目录功能，帮助快速搭建私有化管理系统。

列表页设计

配置数据列表展示方式，支持筛选、搜索及数据管理操作。