本文主要介紹了中繼資料中表關系管理功能,支援常見一對多,一對一,多對多等關系,并且通過G6圖表庫顯示所有表的關系的圖!
基于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功能。
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即可,代碼同步更新。