smart-frontcode

v1.1.2

Published

5 months ago

#### 一款高效的 Vue 低代码表单，可视化设计，一键生成业务页面。

Downloads

0High
0Medium
0Low

xieboqiang

form element-ui code-designer

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 添加动态页管理页面

需要新增，查询，列表展示 Alt text

新增编辑页面 Alt text 保存

保存后的 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",
    },
  ],
};

发布 Alt text 发布--添加到菜单，菜单就会生成配置的页面

菜单数据格式需要根据业务,菜单创建成功也是根据实际业务方式决定。如 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，先保存页面，后发布
  }

Alt text

// 功能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，渲染最终业务页面。包括查询、列表展示，分页，重置，新增、编辑、删除。 Alt text

// 业务API
// 分页查询
`/api/v1/func/${functionId}/data/page` // 新增
`/api/v1/func/${functionId}/data/` // 编辑
`/api/v1/func/${functionId}/data/${pkId}` // 删除
`/api/v1/func/${functionId}/data/${pkId}`;