LSE 表单引擎 Demo （LSE FORM）

功能设计

表单列表（系统已创建的表单）

表单内

1. 表单内字段显示控制

2. 表单内根据显示字段存储json

表单组件

表单字段（有绑定的字段项）

1. input - 输入框

   "input": {
       // 绑定的字段（v-model）
       field: "",
       // 描述配置 用于表格
       tableLabel: '',
       // 文本类型
       type: "text",
       // 默认值
       default: "",
       // label描述
       label: "input",
       // 组件属性
       attr: {
           // 占位文本
           placeholder: "",
           // 大小 - 选择
           size: "default",
           // 是否清空
           clearable: false,
           // 是否只读
           readonly: false,
           // 最大长度
           maxlength: "-",
           // 文本域行数 需要判断type是否是textarea
           rows: 3,
           // 文本域自适应
           autosize: false
       },
       // 是否隐藏
       hide: false
   }

2. textarea - 文本域

   同 input

3. inputNumber - 数字输入框

   "number": {
       // 绑定的字段（v-model）
       field: "",
       // 描述配置 用于表格
       tableLabel: '',
       // 默认值
       default: "",
       // 是否隐藏
       hide: false,
       // label描述
       label: "number",
       // 属性
       attr: {
           // 最大值
           max: 99999,
           // 最小值
           min: 0,
           // 按钮方向 false.上下 true.左右
           controlsOutside: false,
           // 步伐 每次点击的+-
           step: 1,
           // 大小 - 选择
           size: "default",
           // 占位文本
           placeholder: "",
           // 是否只读
           readonly: false,
           // 小数点精度
           precision: 0,
           // 是否可以用户自定义输入
           editable: true
       }
   }

4. select - 下拉选择

   select: {
       // 绑定的字段（v-model）
       field: "",
       // 描述配置 用于表格
       tableLabel: '',
       // 默认值
       default: "",
       // 是否隐藏
       hide: false,
       // label描述
       label: "select",
       // 组件属性
       attr: {
           // 大小 - 选择
           size: "default",
           // 是否只读（禁用）
           disabled: false,
           // 是否多选
           multiple: false,
           // 是否可清空
           clearable: false,
           // 占位文本
           placeholder: "",
           // 支持输入搜索
           filterable: false,
           // 允许创建新选项
           allowCreate: false
       },
       // 选项列表
       option: []
   }
   option: {
       value: "",
       label: ""
   }

5. 时间 - HH:mm:ss

   "time": {
       // 绑定的字段（v-model）
       field: "",
       // 描述配置 用于表格
       tableLabel: '',
       // 默认值
       default: "",
       // 是否隐藏
       hide: false,
       // label描述
       label: "time",
       // 类型 time.时间 timerange.时间范围
       type: 'time',
       // 组件属性
       attr: {
           // 大小 - 选择
           size: "default",
           // 是否可清空
           clearable: false,
           // 占位文本
           placeholder: "",
           // 是否只读
           readonly: false,
           // 格式化
           format: "HH:mm:ss",
           // 是否允许输入
           editable: true
       }
   }
   formatSelect: [
       "HH:mm:ss",
       "HH时mm分ss秒",
       "HH小时mm分ss秒",
       "HH-mm-ss",
       "HH点mm分ss秒",
       "HH’mm’ss’"
   ]

6. 日期 - yyyy-MM-dd

   date: {
       // 绑定的字段（v-model）
       field: "",
       // 描述配置 用于表格
       tableLabel: '',
       // 默认值
       default: "",
       // 是否隐藏
       hide: false,
       // label描述
       label: "date",
       // 类型 date.日期 daterange.范围日期
       type: 'date',
       // 组件属性
       attr: {
           // 格式化
           format: "yyyy/MM/dd",
           // 大小 - 选择
           size: "default",
           // 是否可清空
           clearable: false,
           // 占位文本
           placeholder: "",
           // 是否只读
           readonly: false,
           // 是否允许输入
           editable: true
       }
   }
   formatSelect: [
       "yyyy/MM/dd",
       "yyyy-MM-dd",
       "yyyy年MM月dd日",
       "yyyy’MM’ss’"
   ]

7. 范围时间

   同时间 type = timerange

8. 范围日期

   同日期 type = daterange

9. 开关

   switch: {
       // 绑定的字段（v-model）
       field: "",
       // 描述配置 用于表格
       tableLabel: '',
       // 默认值
       default: "",
       // 是否隐藏
       hide: false,
       // label描述
       label: "开关",
       // 组件属性
       attr: {
           // 大小 - 选择
           size: "default",
           // 是否禁用
           disabled: false,
           // trueVal
           trueVal: true,
           // falseVal
           falseVal: false,
           // trueColor
           trueColor: "",
           // falseColor	
           falseColor: ""
       }
   }

10. 单选

    // 组件参数
    radio: {
        // 绑定的字段（v-model）
        field: "",
        // 描述配置 用于表格
        tableLabel: '',
        // 默认值
        default: "",
        // 是否隐藏
        hide: false,
        // label描述
        label: "单选",
        // 组件属性
        attr: {
            // 是否垂直布局 button无效
            vertical: false,
            // 大小 - 选择
            size: "default",
            // 类型 button.按钮类型
            type: "",
            // 是否显示边框
            border: false
        },
        option: []
    }
    // 选项
    radios: {
        lable: "",
        value: ""
    }
    

11. 多选

    checkbox: {
            // 绑定的字段（v-model）
            field: "",
            // 描述配置 用于表格
            tableLabel: '',
            // 默认值
            default: [],
            // 是否隐藏
            hide: false,
            // label描述
            label: "多选",
            // 组件属性
            attr: {
                // 大小 - 选择
                size: "default",
                // 是否显示边框
                border: false
            },
            option: []
        }
        // 选项
        box: {
            lable: "",
            value: ""
        }

高级表单字段

1. 富文本
2. 图片上传
3. 文件上传
4. 级联选择

容器

1. tab - 标签页
2. 卡片

其他组件

1. 按钮

   button: {
       // 按钮文字
   	text: '按钮',
       // 是否隐藏
       hide: false,
       attr: {
           // 按钮大小
           size: 'default',
           // 按钮类型
           type: 'default',
           // 背景透明
           ghost: false,
           // 自适应
           long: false,
           // 禁用按钮
           disabled: false
       }
   }

2. 分割线

   divider: {
       // 分割线文字
       text: '分割线',
       // 是否隐藏
       hide: false,
       attr: {
           // 水平(horizontal)还是垂直(vertical)
           type: 'horizontal',
           // 文字位置
           orientation: 'center',
           // 是否虚线
           dashed: false,
           // 是否普通正文
           plain: false
       }
   }

3. 静态文字

   text: {
       // 文本内容
       content: '静态文字',
       // 是否隐藏
       hide: false,
       attr: {
           // 内边距
           padding: 10,
           // 是否加粗
           bold: false,
           // 文字大小
           fontSize: 16,
           // 文字方向
           align: 'left',
           // 自定义样式
           style: ''
       }
   }

4. 提示

   alert: {
       // 标题
       title: '提示',
       content: '内容',
       // 是否隐藏
       hide: false,
       attr: {
           // 类型
           type: 'info',
           // 可关闭
           closable: false,
           // 是否显示图标
           showIcon: false,
           // 关闭按钮文字
           closeText: ''
       }
   }

开发计划

1. 动态生成数据库（mysql）

2. 基于mp生成这张表的curd （java文件）

3. 模拟数据插入与读取 OK

4. 表单间关联查询（设置条件等）并生成sql

5. 各按钮添加点击事件 @click 方法内容 OK

   需解决问题
   1. 按钮点击事件需要解析为vue OK
   2. 表单代码生成如有按钮组件则生成方法

6. 表单在线编辑新增自定义表格配置 OK

   2022-02-23
   现有表格预览更新为自定义字段 自定义配置key与slot
   slot => 需要自定义html代码
   2022-02-28
   slot编辑需要html在线编辑框 OK
   表格通用显示组件 OK

7. 表单新增字段验证 OK

   后续：
   设置字段类型验证 OK