表单页设计

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

{
  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;
    }
  }
}

{
  validator: (rule, value, callback) => {
    if (value === "") {
      callback(new Error("请输入确认密码"));
    } else {
      const password = getform1ValueByName("password");
      if (password === value) {
        callback();
      } else {
        callback(new Error("两次密码输入不一致"));
      }
    }
  },
  trigger: "blur"
}

{
  "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": {}
}

{
  "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": []
  },
  "customRules": [
    {
      "required": true,
      "message": "请输入描述",
      "trigger": "blur"
    }
  ],
  "config": {}
}

{
  "type": "radio",
  "name": "gender",
  "control": {
    "modelValue": "male",
    "options": [
      { "label": "男", "value": "male" },
      { "label": "女", "value": "female" }
    ],
    "disabled": false,
    "size": "default",
    "border": false
  },
  "formItem": {
    "label": "性别",
    "rules": [{ "required": true, "message": "请选择性别", "trigger": "change" }]
  },
  "config": {}
}

{
  "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": [{ "required": true, "type": "array", "min": 1, "message": "请选择至少一个爱好", "trigger": "change" }]
  },
  "config": {}
}

{
  "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": [{ "required": true, "message": "请选择国家", "trigger": "change" }]
  },
  "config": {}
}

{
  "type": "inputSlot",
  "name": "customInput",
  "control": {
    "modelValue": "",
    "placeholder": "请输入",
    "clearable": true,
    "disabled": false,
    "readonly": false,
    "size": "default"
  },
  "formItem": {
    "label": "自定义输入框"
  },
  "config": {
    "prefixSlot": "<template>...</template>",
    "suffixSlot": "<template>...</template>"
  }
}

{
  "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": [{ "required": true, "message": "请选择日期", "trigger": "change" }]
  },
  "config": {}
}

{
  "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": [{ "required": true, "message": "请选择时间", "trigger": "change" }]
  },
  "config": {}
}

{
  "type": "colorPicker",
  "name": "themeColor",
  "control": {
    "modelValue": "#409EFF",
    "disabled": false,
    "showAlpha": false,
    "size": "default"
  },
  "formItem": {
    "label": "主题颜色"
  },
  "config": {}
}

{
  "type": "switch",
  "name": "isActive",
  "control": {
    "modelValue": true,
    "disabled": false,
    "activeText": "开",
    "inactiveText": "关",
    "activeColor": "#409EFF",
    "inactiveColor": "#C0CCDA"
  },
  "formItem": {
    "label": "是否激活"
  },
  "config": {}
}

{
  "type": "inputNumber",
  "name": "age",
  "control": {
    "modelValue": 18,
    "min": 0,
    "max": 120,
    "step": 1,
    "disabled": false,
    "size": "default"
  },
  "formItem": {
    "label": "年龄",
    "rules": [{ "type": "number", "min": 0, "max": 120, "message": "年龄范围为0-120", "trigger": "blur" }]
  },
  "config": {}
}

{
  "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": [{ "required": true, "message": "请选择地址", "trigger": "change" }]
  },
  "config": {}
}

{
  "type": "rate",
  "name": "score",
  "control": {
    "modelValue": 3,
    "max": 5,
    "disabled": false,
    "allowHalf": true,
    "showText": false,
    "showScore": false,
    "size": "default"
  },
  "formItem": {
    "label": "评分",
    "rules": [{ "required": true, "message": "请评分", "trigger": "change" }]
  },
  "config": {}
}

{
  "type": "slider",
  "name": "volume",
  "control": {
    "modelValue": 50,
    "min": 0,
    "max": 100,
    "step": 1,
    "disabled": false,
    "range": false,
    "showTooltip": true,
    "size": "default"
  },
  "formItem": {
    "label": "音量"
  },
  "config": {}
}

{
  "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": "类别"
  },
  "config": {}
}

{
  "type": "txt",
  "name": "descriptionText",
  "control": {
    "modelValue": "这是只读文本"
  },
  "formItem": {
    "label": "说明"
  }
}

{
  "type": "title",
  "name": "pageTitle",
  "control": {
    "modelValue": "用户管理"
  }
}

{
  "type": "tabs",
  "name": "mainTabs",
  "control": {
    "modelValue": "tab1",
    "tabs": [
      { "label": "标签1", "name": "tab1" },
      { "label": "标签2", "name": "tab2" }
    ]
  }
}

{
  "type": "flex",
  "name": "flexContainer",
  "control": {
    "justify": "start",
    "align": "center",
    "direction": "row",
    "wrap": "nowrap"
  }
}

{
  "type": "card",
  "name": "userCard",
  "control": {
    "header": "用户信息",
    "bordered": true,
    "shadow": true
  }
}

{
  "type": "divider",
  "name": "lineDivider",
  "control": {
    "direction": "horizontal",
    "contentPosition": "center"
  }
}

{
  "type": "button",
  "name": "submitBtn",
  "control": {
    "text": "提交",
    "type": "primary",
    "size": "default",
    "disabled": false,
    "loading": false,
    "icon": "Check"
  }
}

{
  "type": "table",
  "name": "userTable",
  "control": {
    "columns": [
      { "label": "姓名", "prop": "name" },
      { "label": "年龄", "prop": "age" }
    ],
    "data": []
  }
}

{
  "type": "component",
  "name": "customComp",
  "control": {
    "componentName": "MyComponent",
    "props": {}
  }
}

{
  "type": "upload",
  "name": "avatar",
  "control": {
    "action": "/upload",
    "multiple": false,
    "accept": "image/*",
    "fileList": [],
    "disabled": false,
    "showFileList": true
  },
  "formItem": {
    "label": "头像上传"
  }
}

{
  "type": "tinymce",
  "name": "content",
  "control": {
    "modelValue": "",
    "disabled": false,
    "height": 300
  },
  "formItem": {
    "label": "内容"
  }
}

{
  "type": "grid",
  "name": "gridLayout",
  "control": {
    "cols": 4,
    "gutter": 10,
    "justify": "start",
    "align": "top"
  }
}

{
  "type": "div",
  "name": "contentWrapper",
  "control": {
    "style": {
      "padding": "10px",
      "backgroundColor": "#f5f5f5"
    }
  }
}

form: {
  size: "default" | "small" | "large",
  labelWidth: string // e.g. "100px"
}

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

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

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"
  }
}