Dynamic Form of Front End SPA Project Based on Vue and Quasar

review

Through the introduction of the actual serial number (4) of the front-end SPA project based on Vue and Quasar in the last article, we have completed the addition, deletion, modification and check of the serial number in the metadata. This paper mainly introduces the implementation of the dynamic form design function.

Introduction to the

In the CrudAPI system, all business forms are generated dynamically by configuration, and the code does not need to be written dead. For basic concepts, refer to the previous article metadata Management – Dynamic form designer is fully implemented in the CrUDAPI system, and once the form is configured, the corresponding CRUD interface is automatically generated.

UI

The form list

Create a form

The index management

API

The form API includes basic CRUD operations, which can be viewed in the Swagger documentation. The API is encapsulated through Axios with the name 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 };
Copy the code

The core code

Q – table controls

The form design page uses the Q-Table control, where each field corresponds to a row,

 <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>
Copy the code

The columns defined

Columns Defines the column properties of q-table, covering all properties of the form, such as name, whether it is one, data type, length, etc.

columns: [
  {
    name: "dataClickAction".align: "center".label: "Operation".field: "dataClickAction".sortable: false
  },
  {
    name: "displayOrder".align: "left".label: "Order".field: "displayOrder".sortable: false
  }, {
    name: "caption".align: "left".label: "Chinese Name".field: "caption".sortable: false
  }, {
    name: "name".align: "left".label: "English field".field: "name".sortable: false
  }, {
    name: "description".align: "left".label: "Description".field: "description".sortable: false
  }, {
    name: "unsigned".align: "left".label: "Unsigned".field: "unsigned".sortable: false
  }, {
    name: "dataType".align: "left".label: "Data type".field: "dataType".sortable: false
  }, {
    name: "indexType".align: "left".label: "Index type".field: "indexType".sortable: false
  }, {
    name: "indexStorage".align: "left".label: "Index store".field: "indexStorage".sortable: false
  }, {
    name: "indexName".align: "left".label: "Index name".field: "indexName".sortable: false
  }, {
    name: "length".align: "left".label: "Length".field: "length".sortable: false
  }, {
    name: "precision".align: "left".label: "Accuracy".field: "precision".sortable: false
  }, {
    name: "scale".align: "left".label: "Decimal".field: "scale".sortable: false
  }, {
    name: "autoIncrement".align: "left".label: Self increasing.field: "autoIncrement".sortable: false
  }, {
    name: "nullable".align: "left".label: "Empty".field: "nullable".sortable: false
  }, {
    name: "defaultValue".align: "left".label: "Default".field: "defaultValue".sortable: false}, {name: "seqId".align: "left".label: "Serial number".field: "seqId".sortable: false
  }, {
    name: "insertable".align: "left".label: "Insert".field: "insertable".sortable: false
  }, {
    name: "updatable".align: "left".label: "Edit".field: "updatable".sortable: false
  }, {
    name: "queryable".align: "left".label: "Query".field: "queryable".sortable: false}]Copy the code

Field order adjustment

Support up, down, top, bottom four operations.

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]); }}Copy the code

Add and delete

Through the list page, new page and edit page to achieve the basic CRUD operation of dynamic form, which is similar to editing and new page, editing page in addition to set a single field index, can also set a joint index of multiple fields, more content reference source code can be.

summary

This article focuses on dynamic form design in metadata, supporting common data types and indexes, and then implements CRUD for adding, deleting, modifying and querying dynamic forms. The next article will introduce table relationship in metadata.

The demo presentation

Website address: crudapi. Cn test address: demo. Crudapi. Cn/crudapi/log…

Attached source address

Making the address

Github.com/crudapi/cru…

Gitee address

Gitee.com/crudapi/cru…

GitHub may be slow due to network reasons. Instead, access Gitee and the code will be updated synchronously.