「免費開源」基于Vue和Quasar的前端SPA項目crudapi背景管理系統實戰之子產品管理（十四）

是以本文主要介紹表單子產品管理相關内容。屬于同一類型的表單可以添加到同一個子產品，比如字典相關的表建立“字典”子產品，使用者相關的表建立“使用者管理”子產品，子產品在首頁直接展示，使用者可以快速的操作對應的表單。

基于Vue和Quasar的前端SPA項目實戰之子產品管理（十四）

回顧

通過之前一篇文章 基于Vue和Quasar的前端SPA項目實戰之動态表單（五）的介紹，通過配置的方式可以零代碼實作表單管理功能，但是所有表單都沒有分類，如果表單數量很多的情況下不友善查找，是以本文主要介紹表單子產品管理相關内容。

簡介

屬于同一類型的表單可以添加到同一個子產品，比如字典相關的表建立“字典”子產品，使用者相關的表建立“使用者管理”子產品，子產品在首頁直接展示，使用者可以快速的操作對應的表單。

UI界面

首頁顯示子產品和表單連結

表單配置

通過資料庫逆向的方式，将中繼資料實體表ca_meta_table通過動态表單方式管理起來，可以利用動态表單功能進行查詢資料，但是不能修改資料。為了避免誤操作，這裡設定屬性為隻讀。

子產品和子產品行是一對多關系，子產品行和表是多對一關系。

子產品配置

字典子產品添加3個省，市，區三個表。

核心代碼

說明

表單配置好之後，api自動生成了，直接通過子產品api擷取背景資料，首頁展示子產品，每個子產品可以折疊。

代碼

async loadData() {
  try {
    const modules = await tableService.list("module", 0, 9999, null, null, null);
    
    for (let i = 0; i < modules.length; i++) {
        modules[i].expanded = true;
    }

    this.modules = modules;
  } catch (error) {
    console.error(error);
  }
}
           

擷取子產品資料

<div class="q-pt-md">
  <q-banner inline-actions class="text-black bg-listcolor">
      <span class="title">業務資料</span>
      <template v-slot:action>
        <q-btn
          dense
          flat
          unelevated
          round
          color="primary"
          @click="businessExpand = !businessExpand" 
          :icon="businessExpand ? 'expand_less' : 'expand_more'"
        />
      </template>
  </q-banner>

  <div v-show="businessExpand">
    <div class="q-pt-md  q-pl-md" :key="item.id" v-for="item in modules">
      <q-banner clickable inline-actions class="text-black bg-listcolor">
          <span class="title">{{item.name}}</span>
          <template v-slot:action>
            <q-btn
              dense
              flat
              unelevated
              round
              color="primary"
              @click="onConfigClick(item)"
              icon="settings"
            />
            <q-btn
              dense
              flat
              unelevated
              round
              color="primary"
              @click="item.expanded = !item.expanded" 
              :icon="item.expanded ? 'expand_less' : 'expand_more'"
            />
          </template>
      </q-banner>

      <div v-show="item.expanded" class="q-pt-md row items-start q-gutter-md">
          <q-item 
          :active="active" active-class="text-primary"
          clickable v-ripple @click="onModuleLineClick(moduleLine)" 
          :key="moduleLine.id" v-for="moduleLine in item.moduleLines"
          > 
            <q-item-section>
              <q-item-label>{{moduleLine.table.caption}}</q-item-label>
              <q-item-label caption>{{moduleLine.table.name}}</q-item-label>
            </q-item-section>
          </q-item>
      </div>
    </div>
  </div>
</div>
           

頁面繪制

小結

本文主要介紹了表單的子產品化管理，配置了使用者管理，檔案，字典等子產品，優化了首頁布局，使用起來更友善快捷。

crudapi簡介

crudapi是crud+api組合，表示增删改查接口，是一款零代碼可配置的産品。使用crudapi可以告别枯燥無味的增删改查代碼，讓您更加專注業務，節約大量成本，進而提高工作效率。

crudapi的目标是讓處理資料變得更簡單，所有人都可以免費使用！

無需程式設計，通過配置自動生成crud增删改查RESTful API，提供背景UI管理業務資料。基于主流的開源架構，擁有自主知識産權，支援二次開發。

demo示範

crudapi屬于産品級的零代碼平台，不同于自動代碼生成器，不需要生成Controller、Service、Repository、Entity等業務代碼，程式運作起來就可以使用，真正0代碼，可以覆寫基本的和業務無關的CRUD RESTful API。

官網位址：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即可，代碼同步更新。