CRUD前端中后台项目实践 - sulajs单页面、modal弹框、抽屉表单.. 布局：单列，多列，分组，分步..

前端中后台应用的特点

交互类似： loading动画，二次确认框，气泡提示等
设计风格类似：列表页，表单页，详情页等
业务量大，还可能同时搞多个项目

列表页

高级搜索，过滤，排序，刷新
操作列权限配置
新增/编辑/查看页面入口

表单页

单页面、modal弹框、抽屉表单..
布局：单列，多列，分组，分步..
表单检验，联动关系

详情页

信息展示

sulajs 以配置化形式实现crud前端中后台

表单页

sulajs通过mode定义了表单页的三种模式：create（无初始值）edit（有初始值) view （禁止编辑值），即可通过一套代码实现新建页/编辑页/查看页。表单控件以插件的形式实现，进行了四维划分：value，source（数据源，例如下拉框选项），visible，disabled。表单控件的呈现效果，就是表单模式和控件四维配合实现的。

布局上，通过layout、labelCol、wrapperCol等配置输入控件排列，通过container配置表单项外层包裹的样式组件。

另外，表单页还需要配置操作按钮（提交返回等），也通过配置的方式实现，拿到表单的实例给按钮使用。

sulajs实现表单页面，代码配置如下：(sula-cooker中有更多常用布局方案哦)

import React from 'react';
import { CreateForm } from 'sula';

const config = {
  "mode": "view", // create edit view
  "actionsPosition": "bottom",
  "container": {
    "type": "div",
    "props": {
      "style": {
        "maxWidth": 1920,
        "margin": "0 auto 72px"
      }
    }
  },
  "itemLayout": {
    "labelCol": {
      "span": 6
    },
    "wrapperCol": {
      "span": 8
    }
  },
  "fields": [
    {
      "name": "sender",
      "container": {
        "type": "card",
        "props": {
          "title": "发送",
          "style": {
            "padding": 0,
            "marginBottom": 16
          }
        }
      },
      "fields": [
        {
          "name": "senderName",
          "label": "发送人姓名",
          "field": {
            "type": "input",
            "props": {
              "placeholder": "请输入发送人姓名"
            }
          },
          "rules": [
            {
              "required": true,
              "message": "该项为必填项"
            }
          ]
        },
        {
          "name": "secrecy",
          "label": "是否保密",
          "field": {
            "type": "switch",
            "props": {
              "checkedChildren": "on",
              "unCheckedChildren": "off"
            }
          },
          "valuePropName": "checked"
        },
        {
          "name": "senderNumber",
          "label": "发送人号码",
          "field": {
            "type": "inputnumber",
            "props": {
              "placeholder": "请输入发送人号码",
              "style": {
                "width": "80%"
              }
            }
          },
          "rules": [
            {
              "required": true,
              "message": "该项为必填项"
            }
          ]
        },
        {
          "name": "senderAddress",
          "label": "发送人地址",
          "field": {
            "type": "textarea",
            "props": {
              "placeholder": "发送人地址"
            }
          },
          "rules": [
            {
              "required": true,
              "message": "该项为必填项"
            }
          ]
        }
        // 节省空间省略配置
      ]
    },
		// 节省空间省略配置
  ],
  "submit": {
    "url": "/api/manage/add.json",
    "method": "post"
  },
  "remoteValues": {
    "url": "/api/manage/detail.json",
    "method": "post",
    "params": {
      "id": 1
    }
  }
}

export default () => {
  return <CreateForm {...config} />
}

那么，复杂的校验、级联是否可以用sula实现呢？答案是肯定的，不过这里不做介绍。

列表页

sula以配置化的方式实现了单元格内容的渲染，此外，还扩展了title部分操作按钮。sula-table和sula-form配合使用实现的sula模板QueryTable，是中后台列表页开发利器。代码可以在sula-cooker中查看。

sulajs优势在哪里？

插件化，Sula以插件为核心，构建了物料插件 + 行为编排插件 + 前后端数据管理的可配置模板引擎。
后端持久化，所有配置均可转换为JSON，实现后端持久化存储。
高效开发，提供QueryTable、CreateForm等模板组件，适用于典型前端中台应用，开发效率大大提升。
入门简单，熟悉react和antd，可以快速上手sula开发中后台应用。

在哪里可以体验sulajs？

源码地址（内附联系方式）： github ，期待star
demo和文档： sula
sula配置化体验工具： sula-cooker

欢迎试用sulajs，有不符合业务场景的地方，期待issue和pr。