中后台管理系统前端可视化低代码方式提效设计一

前言

中后台管理类系统基本都是对数据的增删改查、上传下载等，最多也只是展示形式上的差异， 一般都是由：一块区域用来输入或选择进行调用接口进行查询，一个表格用于对查询出的数据进行展示以及每条数据的操作，一个或两个表单用于数据的添加或者修改，以及一块功能区域用于批量删除、导入、导出等等。这些功能简单且量大编写的再多也不能提升自生境界，纯粹的浪费生命，可谓是苦不堪言。一般可能想到的是cv大法，但是修改也是很痛苦的，因为经常会少改某些变量，在测试的时候又漏掉总是经常偷偷 fixed 也是一脸尴尬。所以我们决定使用可视化的方案来解决这些重复性的问题。

需求分析

如果我们简单的抽象一个CURD的代码大概主要逻辑应该如下（react hook版）：

//用于查询
const [searchParams, setSearchParams] = useState({
   })
//列表数据
const [tableList, setTableList] = useState([])
//查询函数
const loadData = useCallback(() => {
    
    service.search(searchParams).then(list => {
   
        setTableList(list)
    })
}, [searchParams])
//loadData 查询函数变化重新调用，因为依赖了 searchParams 所以查询参数变化就会重新查询
useEffect(() => {
   
    loadData()
}, [loadData]) 
//... 其它 
return (<div>
        <Search>
            {
   /*
                <Input />
                ... 
                变化的查询条件
            */} 
            {
   /* 将Search中数据set 到 searchParams 以触发查询 */}
            <Button>查询</Button>
            {
   /* setSearchParams({}) */}
            <Button>重置</Button>
        <Search>
        <div>
            {
   /* openModal() */}
            <Button>新增</Button>
            <Button>批量删除</Button>
            ... 以及其它功能
        </div>
        {
   /*
            1. 将分页数据设置到 searchParams 中以分页查询 setSearchParams({...searchParams, pageNo, pageSize })
            2. 将选择的行保存下来用于如批量删除
        */}
        <Table>
            {
   
                /*<Column lable="姓名" />
                ...
                变化的列
                */
            } 
            <Column lable="操作">
                {
   /*
                    是否确定删除？ 是:
                    service.delete(row.id).then(() => loadData())
                */}
                <Button>删除</Button>
                {
   /*
                    打开 modal 将当前行数据 row 传过去
                    openModal(row)
                */}
                <Button>编辑</Button>
                ... 以及其它功能
            </Column >
        </Table>
        <Modal>
            {
   /*
                将数据保存或更新
                service.inserOrUpdate(data).then(() => loadData())
            */}
            <Form>