基于Vue和Quasar的前端SPA项目实战之表关系（六）

回顾

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

简介

在crudapi系统中，通过表关系(relation)管理将多个表连接起来，支持一对多，多对一，一对一，多对多等关系，
有关表关系基本概念参考之前文章表关系，通过UI配置好表关系后，可以支持主子表的级联操作。

UI界面

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

「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之动态表关系管理（六）
编辑表关系

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

API

「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之动态表关系管理（六）
表关系API包括基本的CRUD操作，具体的通过swagger文档可以查看。通过axios封装api，名称为metadataRelation

import { axiosInstance } from "boot/axios";  const metadataRelation = {   create: function(data) {     return axiosInstance.post("/api/metadata/tablerelations",        data     );   },   update: function(id, data) {     return axiosInstance.patch("/api/metadata/tablerelations/" + id,        data     );   },   list: function(page, rowsPerPage, search, query) {     return axiosInstance.get("/api/metadata/tablerelations",       {         params: {           offset: (page - 1) * rowsPerPage,           limit: rowsPerPage,           search: search,           ...query         }       }     );   },   count: function(search, query) {     return axiosInstance.get("/api/metadata/tablerelations/count",       {         params: {           search: search,           ...query         }       }     );   },   get: function(id) {     return axiosInstance.get("/api/metadata/tablerelations/" + id,       {         params: {         }       }     );   },   delete: function(id) {     return axiosInstance.delete("/api/metadata/tablerelations/" + id);   },   batchDelete: function(ids) {     return axiosInstance.delete("/api/metadata/tablerelations",       {data: ids}     );   } };  export { metadataRelation };

核心代码

q-select控件

表关系设计页面用到了q-select控件，支持选择4种基本类型：包括一对多OneToMany，多对一ManyToOne，一对一(主子)OneToOneMainToSub，一对一(子主)OneToOneSubToMain，通过多次组合实现了所有类型的表关系。

<q-select   class="col-7"   outlined   v-model="metadataRelation.relationType"   :options="relationTypeOptions"   emit-value   map-options />  relationTypeOptions: [     {       value: "OneToMany",       label: "一对多"     },     {       value: "ManyToOne",       label: "多对一"     },     {       value: "OneToOneMainToSub",       label: "一对一(主子)"     },     {       value: "OneToOneSubToMain",       label: "一对一(子主)"     }   ]

表关系图

G6

采用蚂蚁集团的G6图可视化引擎，G6是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图，图分析应用或是图编辑器应用。

package.json

添加@antv/g6依赖

"dependencies": {   "@quasar/extras": "^1.0.0",   "@antv/g6": "^3.3.6",   "axios": "^0.18.1",   "core-js": "^3.6.5",   "quasar": "^1.0.0",   "vue-i18n": "^8.0.0" }