「免費開源」基于Vue和Quasar的前端SPA項目crudapi后臺管理系統(tǒng)實戰(zhàn)之動態(tài)表單（五）
基于Vue和Quasar的前端SPA項目實戰(zhàn)之動態(tài)表單（五）
回顧
通過上一篇文章 基于Vue和Quasar的前端SPA項目實戰(zhàn)之序列號（四） 的介紹，我們已經(jīng)完成了元數(shù)據(jù)中序列號的增刪改查，本文主要介紹動態(tài)表單設計功能的實現(xiàn)。
簡介
在crudapi系統(tǒng)中，所有的業(yè)務表單都是通過配置動態(tài)生成的，代碼無需寫死，有關基本概念參考之前文章?元數(shù)據(jù)管理—動態(tài)表單設計器在crudapi系統(tǒng)中完整實現(xiàn)?，表單配置好之后，對應的crud接口就自動生成了。
UI界面
?表單列表
?創(chuàng)建表單
?索引管理
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的列屬性，涵蓋表單的全部屬性，比如名稱，是否為一，數(shù)據(jù)類型，長度等。
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: "數(shù)據(jù)類型",
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: "小數(shù)",
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
}
]
字段順序調(diào)整
支持上移，下移，置頂，置底四種操作。
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]);
}
}
#
增刪改查
通過列表頁面，新建頁面和編輯頁面實現(xiàn)了動態(tài)表單基本的crud操作，其中編輯和新建頁面類似，編輯頁面除了可以設置單個字段的索引，還可以設置多個字段的聯(lián)合索引，更多內(nèi)容參考源碼即可。
小結(jié)
本文主要介紹了元數(shù)據(jù)中動態(tài)表單設計功能，支持常見的數(shù)據(jù)類型和索引，然后實現(xiàn)了動態(tài)表單的crud增刪改查功能，下一篇文章會介紹元數(shù)據(jù)中表關系功能。
demo演示
官網(wǎng)地址：https://crudapi.cn(opens new window)
測試地址：https://demo.crudapi.cn/crudapi/login(opens new window)
附源碼地址
GitHub地址
https://github.com/crudapi/crudapi-admin-web(opens new window)
Gitee地址
https://gitee.com/crudapi/crudapi-admin-web(opens new window)
由于網(wǎng)絡原因，GitHub可能速度慢，改成訪問Gitee即可，代碼同步更新。
評論
圖片
表情