「免費開源」基于Vue和Quasar的crudapi前端SPA項目實戰之動態表單（五）

基于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 } //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控件，每一個字段對應一個行，

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即可，代碼同步更新。

API javaScript Spring Boot Vue web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。