smart-Coder
一款高效的 Vue 低代码表单，可视化设计，一键生成业务页面。
功能一览
> 拖拽式可视化表单设计；
> 支持运行时动态加载表单；
> 支持自定义校验逻辑；
> 支持国际化多语言；
> 支持发布菜单生成页面；
> 兼容IE 11浏览器；
> 支持开发自定义组件；
> 支持响应式自适应布局；
安装依赖
npm install --registry=https://registry.npm.taobao.org
开发调试
npm run serve
生产打包
npm run build
表单设计器 + 表单渲染器打包 + 页面渲染器打包
npm run lib
浏览器兼容性
Chrome（及同内核的浏览器如QQ浏览器、360浏览器等等），Edge, Firefox，Safari，IE 11
2. 引入并全局注册 VForm 组件
import Vue from "vue";
import App from "./App.vue";
import ElementUI from "element-ui"; //引入element-ui库
import VForm from "vform-builds"; //引入VForm库
import "element-ui/lib/theme-chalk/index.css"; //引入element-ui样式
import "vform-builds/dist/SmartDesigner.css"; //引入VForm样式
Vue.config.productionTip = false;
Vue.use(ElementUI); //全局注册element-ui
Vue.use(VForm); //全局注册VForm(同时注册了v-form-designer和v-form-render组件)
new Vue({
render: (h) => h(App),
}).$mount("#app");3. 在 Vue 模板中使用组件
<template>
<v-form-designer></v-form-designer>
<v-form-render></v-form-render>
<v-page-render></v-page-render>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<style lang="scss">
body {
margin: 0; /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
}
</style>4. 在 Vue 模板中使用页面渲染器组件
<template>
<div>
<v-page-render ref="PageRenderRef" :global-dsv="globalDsv" :form-json="formJson" :function-id="functionId"> </v-page-render>
<el-button type="primary" @click="submitForm">Submit</el-button>
</div>
</template>
<script>
export default {
data() {
return {
// JSON 数据
formJson: {
// 设计组件列表数据
widgetList: [],
// 表单配置
formConfig: {
labelWidth: 80,
labelPosition: "left",
size: "",
labelAlign: "label-left-align",
layoutType: "PC",
// 暂不支持
},
},
functionId: "e3e5fddde9dc4677aeb551b84079864d",
//全局数据源变量 调试使用
globalDsv: "http://10.108.2.227:8184",
};
},
created() {
// 页面创建时
this.getFormJson(this.functionId);
},
methods: {
getFormJson(functionId) {
axios.get(`http://10.108.2.227:8184/api/v1/func/one/${functionId}`).then((res) => {
console.log("res", res);
if (res.data.code === "2000") {
this.formJson = JSON.parse(res.data.data);
console.log("formJson", this.formJson);
}
});
},
},
};
</script>5. 在业务系统中如何使用
5.1 添加渲染动态页面
-
需要在 view/目录下创建渲染页面，如 view/dynamic-page/index.vue， 代码使用参照第 4 点
-
store/modules/permisson.js ，方法中添加 autoMenuId，此处 autoMenuId 就是 functionId
export function changeAsyncRoutes(routes) {
const res = [];
routes.forEach((route) => {
const tmp = { ...route };
if (tmp.children && tmp.children.length !== 0) {
tmp.component = {
render: (c) => c("router-view"),
};
tmp.children = changeAsyncRoutes(tmp.children);
} else {
tmp.component = importMethod(tmp.component);
// +++++添加autoMenuId到route.meta 中++++++
tmp.meta.autoMenuId = tmp.autoMenuId;
}
res.push(tmp);
});
return res;
}5.2 添加动态页管理 页面
需要新增，查询，列表展示
新增编辑页面
保存
保存后的 json 数据格式为
formJson = {
formConfig: {
modelName: "formData",
refName: "vForm",
rulesName: "rules",
labelWidth: "80",
labelPosition: "left",
size: "",
labelAlign: "label-left-align",
cssCode: "",
customClass: [],
functions: "",
layoutType: "PC",
onFormCreated: "",
onFormMounted: "",
onFormDataChange: "",
},
widgetList: [
{
type: "radio",
icon: "radio-field",
formItemFlag: true,
options: {
name: "radio81280",
label: "radio",
labelAlign: "",
defaultValue: null,
columnWidth: "200px",
size: "",
displayStyle: "inline",
buttonStyle: false,
border: false,
labelWidth: null,
labelHidden: false,
disabled: false,
hidden: false,
optionItems: [
{
label: "radio 1",
value: 1,
},
{
label: "radio 2",
value: 2,
},
{
label: "radio 3",
value: 3,
},
],
required: false,
requiredHint: "",
validation: "",
validationHint: "",
conQuery: true,
colDisplay: true,
colSort: true,
dataDictUrl: "111",
useDataDict: false,
customClass: "",
labelIconClass: null,
labelIconPosition: "rear",
labelTooltip: null,
onCreated: "",
onMounted: "",
onChange: "",
onValidate: "",
},
id: "radio81280",
},
],
};发布
发布--添加到菜单，菜单就会生成配置的页面
菜单数据格式需要根据业务,菜单创建成功也是根据实际业务方式决定。如 qabo 菜单更新为定时 job
// qabo业务菜单格式为
{
component: 'dynamic-page/index',
title: title, // 菜单名称
name: name, // route name值，如果有keep-live，可配合使用
parentMenuId: menuId, // 路由节点的menuId
path: path, // 路由path
funcId: this.publicFuncId, // 保存后会生成funcId，先保存页面，后发布
}
// 功能API;
// 新增
export function addFuncMeta(data) {
return request({
url: `/api/v1/func/meta`,
method: "post",
data,
});
}
// 编辑
export function editFuncMeta(data, funcId) {
return request({
url: `/api/v1/func/${funcId}/meta`,
method: "put",
data,
});
}
// 查询
export function fetchFuncMetaPage(data) {
return request({
url: `/api/v1/func/meta/page`,
method: "post",
data,
});
}
// 根据id查询data
export function fetchFuncMeta(funcId) {
return request({
url: `/api/v1/func/one/${funcId}`,
method: "get",
});
}
// 根据id删除
export function deleteFuncMeta(funcId) {
return request({
url: `/api/v1/func/${funcId}/meta`,
method: "delete",
});
}
// 根据id发布至菜单
export function releaseFuncMeta(data, funcId) {
return request({
url: `/api/v1/func/${funcId}/meta/release/`,
method: "POST",
data,
});
}菜单发布成功后，根据 autoMenuId，请求 json 数据
通过 v-page-render 页面渲染器，加载 json，渲染最终业务页面。包括查询、列表展示，分页，重置，新增、编辑、删除。
// 业务API
// 分页查询
`/api/v1/func/${functionId}/data/page` // 新增
`/api/v1/func/${functionId}/data/` // 编辑
`/api/v1/func/${functionId}/data/${pkId}` // 删除
`/api/v1/func/${functionId}/data/${pkId}`;