基于VUE3+element的表单可视化配置平台开发学习过程心得

是什么？

是一个基于VUE和java的表格表单可视化开发平台，希望能够通过对组件化开发的理解，提供足够多的可延展性，是一个私人学习作品。

为什么：

基于笔者的工作经历，有较多的对表单表格的前端组件化开发，设计经验。私以为组件化开发的尽头是低代码可视化平台开发，于是基于个人经验和学习，希望能按照自己的想法设计出一套可视化低代码表格表单开发平台，用于个人成长提升。
本低代码平台只用于统一样式的表单表格页面的开发，设置初衷为辅助开发人员进行代码组件化封装，减少冗余代码，提升开发效率

怎么做？

前端技术选型：

笔者暂定的项目开发技术栈为VUE3+Element 实现前端表单表格开发

VUE3 表单组件设计：

<script setup lang="ts">
import { defineComponent } from '@vue/runtime-core'
import FormItemComp from './FormItemComp/index.vue'
export default defineComponent ({
    name: 'FormBasic',
    components: { FormItemComp },
    props: {
        form: { type: Object, default: () => { return {} } },
        rules: { type: Object, default: () => { return {} } },
        formConfig: { type: Array, default: () => { return [] } },
        labelWidth: { type: String, default: '120px' },
        labelPosition: { type: String, default: "top" },
    },
    setup(props, { emit }) {

    }
})
</script>

<template>
    <el-form :model="form" v-bind="$props">
        <el-row style="flex-wrap: wrap; flex-direction: row" :gutter ="24">
            <el-col v-for="item in formConfig" :key="item.name" :col="item.col ? item.col : 8">
                <el-form-item  :label="item.label" :prop="item.name">
                <form-item-comp v-model="form[item.name]" v-bind="item"></form-item-comp>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>

表单控件组件代码：// 待延申

<script lang="ts" setup>
import { defineComponent } from 'vue'

export default defineComponent({
    const compObj:Object = {
        text:'el-input',
        select:'el-select',
        data:'el-date-picker'
    }
})
</script>

<template>
  <component :is="compObj[type]" v-bind="$attrs"> </component>
</template>

formConfig 和 rules 统一计算属性规则：

<script setup lang="ts">
import { defineComponent } from '@vue/runtime-core'
import FormBasic from './FormBasic.vue'
export default defineComponent ({
    name: 'FormComputed',
    components: { FormBasic },
    const props = defineProps({
        form: { type: Object, default: () => { return {} } },
        rules: { type: Object, default: () => { return {} } },
        formConfig: { type: Array, default: () => { return [] } }
    }),
    computed:{
        computedFormConf() {// 只需要改变表单Conf
            return this.formConfig.filter(ele=>{
                return ele.filter? ele.filter.entries(k, v) => {
                    return v.includes(form[k])
                } : ele
            })
        },
        computedRules() { // 需延申自定义校验方法的传入生效
            return this.formConfig.filter(ele=>{
                return ele.requireFilter? ele.requireFilter.entries(k, v) => {
                    return v.includes(form[k])
                } : ele
            })

        }
    },
    setup(props, { emit }) {

    }
})
</script>

<template>
    <form-basic
    v-bind="$attrs"
    :formConfig="computedFormConf"
    :rules="computedRules"
    >
    </form-basic>
</template>

后端技术选型：

后端为java 通过Nginx 反向代理完成接口转发

可视化配置生成文件，代码模块解决方案：

前端拖拉拽暂定通过vuedraggable实现
VUE文件生成暂定通过Express.js 调用写好的Linux脚本和模板代码，统一生成。

引入权限功能：

菜单权限暂分为管理员和用户两种，管理员才有通过可视化页面改变页面元素的功能，其他人员只有普通页面的操作权限，具体权限由一个管理员管控。