The business scenario

With standard line wrap, use up to 100 lines of code to do all of the functions in the white area below except create and edit.

This page in the management system is very much, excluding new and edit, so the general function is as follows:

  • search
  • reset
  • delete
  • Batch delete
  • The import
  • export
  • paging
  • Switching page capacity
  • Sort by the specified column

Start to design

As always, as an eight-year-old, I like to figure out how to use it first. I wish I could complete such a set of pages as follows.

<template>
  <! -- Search criteria form -->
  <! -- Operation button -->
  <el-button @click="search">search</el-button>
  <el-button @click="importExcel">The import</el-button>
  <el-button @click="exportExcel">export</el-button>
  <el-button @click="reset">reset</el-button>
  <el-button @click="deleteBatch">Batch delete</el-button>
  
  <! - form - >
  <el-table>
    <el-table-column
      label="Operation"
      min-width="120"
    >
      <template slot-scope="{row}">
        <el-button @click="DeleteById (row)> delete </el-button> </template> </el-table-column> </el-table> <! --> <pagination @sie-change ="handleSizeChange"@current-change="handlePageChange"
    :pagination="tableData.pagination"
  ></pagination>
</template>

<script>
export default {
  name: 'MyPage'.extends: BaseTable, // Inherit BaseTable to get the default implementation method of the function
  data () {
    return {
      form: {form search criteria field definition}}}, created () {this.config({
      module: 'rights'.// Module name
      api: '/system/permission'.// Interface file
      sorts: [{ // Default sort field configuration
        property: 'perm.CREATE_TIME'.direction: 'DESC'}]})this.search()
  }
}
</script>

Copy the code

The whole page through such a structure, you can complete the above 9 tedious functions. Then there are the following problems.

1. What can I do if the default functions do not meet the requirements of the current page?

Cover! For example, if the method we inherit from BaseTable is deleteById, then we can write deleteById in methods, as follows

methods: {
  deleteById(row) {
    // Custom implementation}}Copy the code

In this case, the inherited method is overridden and calls the page’s deleteById method. Similarly, if the current page has more functions, add a method.

2. What can I do if the page contains only some functions?

Don’t deal with it! Although it inherits nine default implementations, it is not necessary to use them.

According to?

Why? Imagine how redundant it would be if each page wrote these features independently. Also, the implementation logic of each development is different, and the default implementation meeting most of the implementation logic means that we can maintain it uniformly without losing unique business processes.

Code implementation

The specific implementation of the code depends on the design characteristics of the project. I have a default implementation in my open source framework, Eva. In the SRC/components/base/BaseTable. Vue. Since the code implementation is over 200 lines, I won’t post it here, just to implement the function, but the design idea is covered.

  • Eva Open Source Framework GITEE: gitee.com/coderd-repo…
  • Eva Open Source framework GITHUB: github.com/coderd-repo…

Welcome to star!

Follow me and explore the art of code design with you.