基于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
}
}
);
},
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="https://www.cnblogs.com/crudapi/p/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即可，代碼同步更新，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/270871.html
標籤：JavaScript