「免費開源」基於Vue和Quasar的前端SPA項目crudapi後臺管理系統實戰之動態表關係管理（六）

基於Vue和Quasar的前端SPA項目實戰之表關係（六）

回顧

經過上一篇文章 基於Vue和Quasar的前端SPA項目實戰之動態表單（五）的介紹，咱們已經完成了元數據中動態表單設計功能，本文主要表關係功能的實現。

簡介

在crudapi系統中，經過表關係(relation)管理將多個錶鏈接起來，支持一對多，多對一，一對一，多對多等關係，
有關表關係基本概念參考以前文章 表關係 ，經過UI配置好表關係後，能夠支持主子表的級聯操做。

UI界面

表關係列表

編輯表關係

表關係圖

API

表關係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"}

增刪改查

經過列表頁面，新建頁面和編輯頁面實現了表關係基本的crud操做，其中編輯和新建頁面相似，表關係圖能夠看到全部表之間的關係，這樣能夠一目瞭然，更多內容參考源碼便可。

小結

本文主要介紹了元數據中表關係管理功能，支持常見一對多，一對一，多對多等關係，而且經過G6圖表庫顯示全部表的關係的圖，到目前爲止，元數據設計功能所有實現了，下一篇文章開始會介紹業務數據的crud功能。