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

//用于查询
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>
               {/*
                <Input />
                <Select />
                    ... 
                    其它输入选择项
                */
               } 
            </Form>
        </Modal>
    </div>)

const components = [
    { 
        title: 'Row',
        type: 'row',
        //是不是容器、即可不可以在里面再放其它组件
        isContainer: true,
        //哪些组件可以放入其中，如 FormItem 应该只可以放在 Form 中
        canPutGroup: ["element", "container"],
        //配置的初始数据
        data: {},
        props: {
            //必填项目提示
            mustProps: ['prop'],
            /** 将配置分为基本常用配置、不常用配置、样式配置 **/
            //基本配置 
            base: [],
            more: [],
            style,
            /**-----------------------------------------**/
            //基本常用配置中可被继承的属性，即当某组件放入其中会附带这里的属性
            baseInheritable: [],
            //不常用配置中可被继承的属性，即当某组件放入其中会附带这里的属性
            moreInheritable: [],
            inheritableRules: (children, parent) => {
                //处理不同组件组合时可能应该会有不同的属性
            }
        }
    }
]

const designList = [
    { 
        title: 'Form',
        type: 'Form',
        //... 如上的其它配置
        children: [
            {
                title: 'Input',
                type: 'input'
                //...其它配置
            },
            {
                title: 'Input',
                type: 'button'
            }
        ]
    }
]

const designList = [
    { 
        title: 'Form',
        type: 'Form', 
        children: [
            {
                uuid: '--- uuid ---',
                title: 'Input',
                type: 'input'
                /************ 配置的数据会在此 ************/
                data: { 
                    //将label配置为 姓名 
                    label: '姓名',
                    //值为 abc时组件消失不显示
                    load: '({value}) => value !== "abc"',
                    config: { maxLength: 12 }
                } 
            } 
        ]
    }
]

//创建一个 useState，保存到服务端则可以是name = 'loading'，content = 'true', type = enum.state 
const loading = useState(true) 
//创建一个 useCallback，保存到服务端则可以是name = 'loadData'，content = 'console.log(loading)', dependence = ['loading'], type = enum.callback 
const loadData = useCallback(() => {
    //使用变量$var.loading用于预览，直接loading是生成的代码  
    console.log(loading)
}, [loading])
//创建一个 useEffect, 保存到服务端则可以是content = 'loadData()', dependence = ['loadData'], type = enum.effect 
useEffect(() => {
    //使用函数$fn.loadData()用于预览，直接loadData()是生成的代码  
    loadData();
}, [loadData])

class UserService {
    search(params) {
        return Http.post('/user/search', params)
    }
}
export default new UserService()

//接口
const services = [
    { name: 'search', method='post', url='/user/search' }
]
//变量、函数、effect 定义
const preCodes = [
    {type: enum.state, name: 'loading', content='true'},
    {
        type: enum.effect, 
        content: '$api.search().then(res => $set("loading", false))'
    }
]
//设计
const designList = [
    { 
        title: 'Form',
        type: 'Form', 
        children: [
            {
                type: 'input' 
                data: { 
                    prop: 'name'
                    label: '姓名' 
                } 
            },
            {
                type: 'button'
                data: {
                    value: '提交'
                    prop: '$submit'
                    config: {
                        //变量
                        loading: '$var.loading'
                    }
                }
            } 
        ]
    }
]

//定义代码数据类
class Icode {
    states = [],
    effects = [],
    callbacks = []
    renders = ''
    ...
}
...
//解析
designList.forEach(list => {
    parser(list)
})  
return icode.toString()

//安装依赖
npm i qrcode.react
//编写组件
import React from 'react'
import { QRCodeSVG } from 'qrcode.react'

export default function IQrcode({ value, ...config }) {
    return <QRCodeSVG
        value={value} 
        {...config}
    />
}

const packages = {
    'react': React,
    'react-dom': ReactDOM,
    ...
}
//核心解析方法，如果有更好的方法，还请不吝赐教，谢谢
const getParsedModule = (code) => {
    const module = { exports: {} }
    const require = (name) => {
        return packages[name]
    }
    Function('require, exports, module, React', code)(require, module.exports, module, React)

    return module.exports
}