"Free and Open Source" front-end SPA project crudapi back-end management system based on Vue and Quasar module management (14)

Front-end SPA project actual combat module management based on Vue and Quasar (14)

review

Through the previous article based on Vue and Quasar front-end SPA project actual combat dynamic form (5) , through the configuration method can realize the form management function with zero code, but all forms are not classified, if the number of forms is large It’s not easy to find, so this article mainly introduces the management related content of the form module.

Introduction

Forms of the same type can be added to the same module. For example, dictionary-related tables create a "dictionary" module, and user-related tables create a "user management" module. The modules are displayed directly on the homepage, and users can quickly operate the corresponding forms.

UI interface

Home page display module and form link

Form configuration

Through the database reverse method, the metadata physical table ca_meta_table is managed in a dynamic form. The dynamic form function can be used to query data, but the data cannot be modified. In order to avoid misoperation, the attribute is set to read-only here.

Modules and module rows have a one-to-many relationship, and module rows and tables have a many-to-one relationship.

Module configuration

The dictionary module adds 3 tables for provinces, cities, and districts.

Core code

illustrate

After the form is configured, the api is automatically generated, and the background data is obtained directly through the module api. The home page displays the modules, and each module can be folded.

Code

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

Get module data

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

Page rendering

summary

This article mainly introduces the modular management of forms, configures user management, files, dictionaries and other modules, optimizes the homepage layout, and makes it more convenient and faster to use.

Introduction to crudapi

Crudapi is a combination of crud+api, which means adding, deleting, modifying and checking interface. It is a zero-code configurable product. Using crudapi can say goodbye to boring additions, deletions, and code changes, allowing you to focus more on your business, save a lot of costs, and improve work efficiency.
The goal of crudapi is to make processing data easier, and everyone can use it for free!
No programming is required. The RESTful API is automatically generated through configuration to add, delete, modify, and check crud, and provide back-end UI to manage business data. Based on the mainstream open source framework, with independent intellectual property rights, it supports secondary development.

demo

Crudapi is a product-level zero-code platform, which is different from automatic code generators. It does not need to generate business codes such as Controller, Service, Repository, Entity, etc., and can be used when the program is running. The real zero code can cover basic CRUD that has nothing to do with business. RESTful API.

Official website address: https://crudapi.cn
Test address: https://demo.crudapi.cn/crudapi/login

Attached source code address

GitHub address

https://github.com/crudapi/crudapi-admin-web

Gitee address

https://gitee.com/crudapi/crudapi-admin-web

Due to network reasons, GitHub may be slow, just change to visit Gitee, and the code will be updated synchronously.