「开源免费」基于 Vue 和 Quasar 的前端 SPA 项目 crudapi 后台管理系统实战之动态表单设计器（五）

crudapi

关注

发布于: 2021 年 04 月 10 日

「开源免费」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之动态表单设计器（五）

基于 Vue 和 Quasar 的前端 SPA 项目实战之动态表单（五）

回顾

通过上一篇文章基于Vue和Quasar的前端SPA项目实战之序列号（四）的介绍，我们已经完成了元数据中序列号的增删改查，本文主要介绍动态表单设计功能的实现。

简介

在 crudapi 系统中，所有的业务表单都是通过配置动态生成的，代码无需写死，有关基本概念参考之前文章元数据管理—动态表单设计器在crudapi系统中完整实现，表单配置好之后，对应的 crud 接口就自动生成了。

UI 界面

表单列表

创建表单

索引管理

API

表单 API 包括基本的 CRUD 操作，具体的通过 swagger 文档可以查看。通过 axios 封装 api，名称为 metadataTable

import { axiosInstance } from "boot/axios";
const metadataTable = {  create: function(data) {    return axiosInstance.post("/api/metadata/tables",       data    );  },  update: function(id, data) {    return axiosInstance.patch("/api/metadata/tables/" + id,       data    );  },  list: function(page, rowsPerPage, search, query) {    if (!page) {      page = 1    }
    if (!rowsPerPage) {      rowsPerPage = 10    }
    return axiosInstance.get("/api/metadata/tables",      {        params: {          offset: (page - 1) * rowsPerPage,          limit: rowsPerPage,          search: search,          ...query        }        //permission: ["ROLE_META_TABLE_R"]      }    );  },  count: function(search, query) {    return axiosInstance.get("/api/metadata/tables/count",      {        params: {          search: search,          ...query        }      }    );  },  get: function(id) {    return axiosInstance.get("/api/metadata/tables/" + id,      {        params: {        }      }    );  },  getByName: function(name) {    return axiosInstance.get("/api/metadata/tables/name/" + name,      {        params: {        }      }    );  },  delete: function(id) {    return axiosInstance.delete("/api/metadata/tables/" + id);  },  batchDelete: function(ids) {    return axiosInstance.delete("/api/metadata/tables",      {data: ids}    );  }};
export { metadataTable };

复制代码

核心代码

q-table 控件

表单设计页面用到了 q-table 控件，每一个字段对应一个行，

 <q-table        :data="table.columns"        :columns="columns"        :visible-columns="visibleColumns"        :pagination.sync="tablePagination"        row-key="id"        selection="multiple"        :selected.sync="selected"        :loading="loading"        flat        separator="cell"        hide-bottom></q-table>

复制代码

columns 定义

columns 定义了 q-table 的列属性，涵盖表单的全部属性，比如名称，是否为一，数据类型，长度等。

columns: [  {    name: "dataClickAction",    align: "center",    label: "操作",    field: "dataClickAction",    sortable: false  },  {    name: "displayOrder",    align: "left",    label: "顺序",    field: "displayOrder",    sortable: false  }, {    name: "caption",    align: "left",    label: "中文名称",    field: "caption",    sortable: false  }, {    name: "name",    align: "left",    label: "英文字段",    field: "name",    sortable: false  }, {    name: "description",    align: "left",    label: "描述",    field: "description",    sortable: false  }, {    name: "unsigned",    align: "left",    label: "无符号",    field: "unsigned",    sortable: false  }, {    name: "dataType",    align: "left",    label: "数据类型",    field: "dataType",    sortable: false  }, {    name: "indexType",    align: "left",    label: "索引类型",    field: "indexType",    sortable: false  }, {    name: "indexStorage",    align: "left",    label: "索引存储",    field: "indexStorage",    sortable: false  }, {    name: "indexName",    align: "left",    label: "索引名称",    field: "indexName",    sortable: false  }, {    name: "length",    align: "left",    label: "长度",    field: "length",    sortable: false  }, {    name: "precision",    align: "left",    label: "精度",    field: "precision",    sortable: false  }, {    name: "scale",    align: "left",    label: "小数",    field: "scale",    sortable: false  }, {    name: "autoIncrement",    align: "left",    label: "自增长",    field: "autoIncrement",    sortable: false  }, {    name: "nullable",    align: "left",    label: "空",    field: "nullable",    sortable: false  }, {    name: "defaultValue",    align: "left",    label: "默认值",    field: "defaultValue",    sortable: false  },{    name: "seqId",    align: "left",    label: "序列号",    field: "seqId",    sortable: false  }, {    name: "insertable",    align: "left",    label: "插入",    field: "insertable",    sortable: false  }, {    name: "updatable",    align: "left",    label: "编辑",    field: "updatable",    sortable: false  }, {    name: "queryable",    align: "left",    label: "查询",    field: "queryable",    sortable: false  }]

复制代码

字段顺序调整

支持上移，下移，置顶，置底四种操作。

onTopClick: function(row) {  const columns = this.table.columns;  const index = columns.findIndex(t => t.id === row.id);  if (index != 0){    columns.unshift(columns.splice(index, 1)[0]);    }},onUpClick: function(row) {  const columns = this.table.columns;  const index = columns.findIndex(t => t.id === row.id);  if (index != 0){    columns[index] = columns.splice(index - 1, 1, columns[index])[0];    console.dir(columns);    }},onDownClick: function(row) {  const columns = this.table.columns;  const index = columns.findIndex(t => t.id === row.id);  if (index != columns.length - 1){    columns[index] = columns.splice(index + 1, 1, columns[index])[0];  }},onBottomClick: function(row) {  const columns = this.table.columns;  const index = columns.findIndex(t => t.id === row.id);  if (index != columns.length - 1){    columns.push(columns.splice(index, 1)[0]);  }}

复制代码

增删改查

通过列表页面，新建页面和编辑页面实现了动态表单基本的 crud 操作，其中编辑和新建页面类似，编辑页面除了可以设置单个字段的索引，还可以设置多个字段的联合索引，更多内容参考源码即可。

小结

本文主要介绍了元数据中动态表单设计功能，支持常见的数据类型和索引，然后实现了动态表单的 crud 增删改查功能，下一篇文章会介绍元数据中表关系功能。

demo 演示

官网地址：https://crudapi.cn

测试地址：https://demo.crudapi.cn/crudapi/login

附源码地址

GitHub 地址

https://github.com/crudapi/crudapi-admin-web

Gitee 地址

https://gitee.com/crudapi/crudapi-admin-web

由于网络原因，GitHub 可能速度慢，改成访问 Gitee 即可，代码同步更新。

发布于: 2021 年 04 月 10 日阅读数: 23

原文链接:【http://xie.infoq.cn/article/55bd372c8a9e4d7400945398d】。

crudapi

关注

crudapi是crud+api组合，表示增删改查接口 2019.06.19 加入

使用crudapi可以告别枯燥无味的增删改查代码，让您更加专注业务，节约大量成本，从而提高工作效率。crudapi的目标是让处理数据变得更简单!官网：https://crudapi.cn 演示：https://demo.crudapi.cn/crudapi/login

发布

暂无评论

创作场景

「开源免费」基于 Vue 和 Quasar 的前端 SPA 项目 crudapi 后台管理系统实战之动态表单设计器（五）

基于 Vue 和 Quasar 的前端 SPA 项目实战之动态表单（五）

回顾

简介

UI 界面

API

核心代码

q-table 控件

columns 定义

字段顺序调整

增删改查

小结

demo 演示

附源码地址

GitHub 地址

Gitee 地址

crudapi

评论