「免費開源」基於Vue和Quasar的前端SPA項目crudapi後臺管理系統實戰之動態表單（五）

時間 2021-04-04

標籤 javascript 前端 java ios git github web axios segmentfault api 欄目 HTML 简体版

原文原文鏈接

基於Vue和Quasar的前端SPA項目實戰之動態表單（五）

回顧

經過上一篇文章基於Vue和Quasar的前端SPA項目實戰之序列號（四）的介紹，咱們已經完成了元數據中序列號的增刪改查，本文主要介紹動態表單設計功能的實現。javascript

簡介

在crudapi系統中，全部的業務表單都是經過配置動態生成的，代碼無需寫死，有關基本概念參考以前文章元數據管理—動態表單設計器在crudapi系統中完整實現，表單配置好以後，對應的crud接口就自動生成了。前端

UI界面

表單列表java

建立表單ios

索引管理git

API

表單API包括基本的CRUD操做，具體的經過swagger文檔能夠查看。經過axios封裝api，名稱爲metadataTablegithub

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控件，每個字段對應一個行，web

<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的列屬性，涵蓋表單的所有屬性，好比名稱，是否爲一，數據類型，長度等。axios

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
  }
]

字段順序調整

支持上移，下移，置頂，置底四種操做。segmentfault

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