preface

Company in the maintenance of one project, there are about 300 or so, the form and the form of page than about 50 percentage, in order to save development time, avoid collaboration, a set of redundant code, we will try to write the form and form generation tools, from the comb to regulate learning to summarize, harvest a lot, write down notes to share with you.

Form generation, Express+mongoDB+jquery writing

1. Table generation

2. Table preview

Table Generation preview

1. Select generated components

2. Edit component data

3. Table editing

4. Preview page

The following is only an introduction to the specification and development of table generation tools.

Existing page combing

All pages involved in the form of all 110 screenshots of the page, and then look for rules, roughly divided into five types of pages.

  • Routine operation: 56
  • Batch operation: 11 batches
  • TAB style: 4
  • Special style: 30 PCS

Conventional page

The batch operation

TAB style

Special style

According to the rough classification of the style, the query condition has a little rule, according to the content of the field itself, and no reusable rules found.

I felt that I had encountered a bottleneck, so I began to learn the design specifications of tables.

Table design specification learning

The links below are for study materials on table design specifications.

  • Design better Data Table design
  • Data tabular design | Comprehensive analysis from function, interaction and UI
  • Table design on a Web page is far from simple
  • Guide to data table design
  • Optimal user interface design for data sheets: A brief analysis of design structures, interaction modes, and technology lists

Gain knowledge as follows, after learning the form design specifications, know how to choose according to their own business scenarios UI framework and component, also found that the drawbacks of some frameworks, such as numeric types have a decimal point, to keep the decimal digits are consistent, the right alignment, in Element framework document exists the question, of course, is not to criticise us, It may not be perfect due to time or other factors.

  • Font requirements for tables
  • Title and alignment rules
  • 7 plus or minus 2 law
  • Filter and search
  • Batch operation and record option
  • feedback
  • Long content presentation
  • Empty cell processing
  • The use of secant lines
  • Real-time filtering and cross filtering
  • Determine whether to use a fixed list
  • Horizontal contrast and vertical contrast
  • All cases
  • Check the screening
  • Batch operation and single operation
  • Top batch operation
  • Hovering operation
  • The inline editor
  • A quick look at

Many of these points are used in UI frameworks, see table specifications for several frameworks.

  • Ant Design form
  • Element UI form
  • IView form

Summarize specifications according to the business

With an understanding of the specification, you can divide smaller components according to atomic design concepts.

Tomic Design Atomic Design concept: to build a scientific and standardized Design system

  • The title component

  • TAB components

  • Upload and Download components

  • Detail Display Component

  • Query condition component

  • Prompt text component

  • Form components

  • The paging component

  • Submit button component

In accordance with the idea after finishing, find our UI design and application of a lot of interaction specification, such as according to the scene to distinguish the complex pages with a simple paging, batch operation and single operation, inline editor and submitted, etc., of course, there are many non-standard place, such as upload download is not unified, TAB style more, show style more details.

Title style and TAB style, button style

Upload and download styles

Start and end dates and option titles

Depending on the component classification and sorting out of each component, and the requirements of the design team boss a discussion, whether can do some optimization and rules according to the existing scene, the result is satisfactory, preliminary component rules good agreement, remove is not standard, the interaction effect of demand will be in accordance with the rules of output after the prototype design statement.

Once the rules are in place, the idea of laziness becomes more serious. Why not develop an automated generation tool that can ensure code quality and specification and be more efficient?

Page generation tool development

The form generation tool we wrote before tasted some sweet, some accumulation and summary, based on the last experience, we started the work of this division.

1. Technical selection Last time using jquery development, need to operate back and forth between DOM and data, very troublesome, this time planning to use VUE development, high efficiency, two people completed in a few days, although it is only the first version, in addition, before using the form production tool, have to build node+MongoDB environment, very inconvenient. We are not going to store page data for the time being, getting rid of the server and database.

2. Data structure definition To ensure that each component’s data and types have a place to store, as well as the cost of future expansion and maintenance.

export const TABLE_JSON = {
  "title": "Change in Level of assurance".// Title data
  "tab": ['insurance policy'.'Documents will be presented']./ / data TAB
  "download": [// Upload and download operations
          {
              label:'Upload list person Template'.buttonText:'Click to download'
          },
          {
              label:'Batch Modify template'.buttonText:'Click to download'
          },
          {
              label:'Import modification information'.buttonText:'import'
          },
          {
              label:'Batch import'.buttonText:'import'}]."search": [ // Query conditions
          {
              label:'Group Policy Number'.dataType:'input'.isRequired:true.placeholder:'Please enter'.value:' '
          },
          {
              label:'Type of document'.dataType:'select'.isRequired:false.placeholder:'Please select'.value: ['Military badge'.Identity card.'Residence Permit'] {},label:'Count date'.dataType:'date'.isRequired:false.placeholder:'Please select'.value:'2015-10-11'
          },
          {
              label:'Start and end dates'.dataType:'StartToEnd'.isRequired:false.placeholder: ['Select start date'.'Select end as scheduled'].value: ['2017-02-11'.'2017-10-11'] {},dataType:'button'.value:'query'
          },
          {
              dataType:'button'.value:'reset'}]."info": [ // Display details
    {label:'Name of Insured Unit'.val:Dongfeng Motor Co., LTD.},
    {label:'Group Policy Number'.val:'88681433942'},
    {label:'Insurance Period'.val:'From 0:00 on July 29, 2014-24 on July 28, 2015'},
    {label:'Policy Status'.val:'cover'},
    {label:'Total amount to be paid'.val:'1000'},
    {label:'Total payers empty'.val:'10'}]."note": {val:Note: If the status of the case is checked and revised back, please supplement or modify the application materials according to the feedback before submission. The validity period starts from the date of final acceptance. '.type:'normal'},  // Warning text type: normal,warning,danger
  "table": [ // Table data
        / / {
        // "type": 1,
        // "thead": [],
        // "tbody": []
        // }

    {
      "type": 1."thead": ['t1'.'t2'.'t3']."tbody": [[{"type": 1."icon": ""."nodes": ['c1'] {},"type": 2."icon": ""."nodes": ['c2'] {},"type": 1."icon": ""."nodes": ['c3']}]]}, {"type": 2."thead": ['d1'.'d2'.'d3']."tbody": [[{"type": 1."icon": ""."nodes": ['a1'] {},"type": 2."icon": ""."nodes": ['a2'] {},"type": 1."icon": ""."nodes": ['a3'[}]]}],"pagination": {type:'simple'}, // Pages and types
  "button": [ // Buttons and types
    {type:'dafult'.buttonText:'Previous step'},
    {type:'warning'.buttonText:'Confirm to join'},
    {type:'primary'.buttonText:'return'},
    {type:'info'.buttonText:'Previous step'}}]Copy the code

3. The idea of functional separation is that the parent component stores all the data, and the display element references the child component. In addition to the display, each component should support a box to modify the data, click OK and submit the data to the parent component, so that the team can also be multi-person development, the parent component is only responsible for storing and displaying data, with high flexibility.

Directory structure diagram, pages to place the main edit page, base to place child components.

Example: Prompt component code and preview

<template>
<div v-show="getjson != ''">
  <h3>Edit the prompt content</h3>
  <! -- Table display section -->
  <div style=Font-family :' Times New Roman '; font-size:12px; margin:0px 29px; height:30px; line-height:30px; padding:10px 0px; color: #666; ">
    {{getjson.val}}
  </div>

  <! -- Operation button -->
  <div class="controlbox">
      <el-button type="primary" icon="el-icon-edit" circle @click="msgBoxShow = true"></el-button>
      <el-button type="danger" icon="el-icon-delete" @click="deleteSelf" circle></el-button>
  </div>

  <! - the popup window - >
  <el-dialog title="Prompt message content editing" :visible.sync="msgBoxShow" center :show-close='false'>
    <el-input
      type="textarea"
      :autosize="{ minRows: 2, maxRows: 4}"
      placeholder="Please enter the content"
      v-model="getjson.val">
    </el-input>
    <el-select v-model="getjson.type" placeholder="Please select">
    <el-option
      v-for="item in noteType"
      :key="item.type"
      :label="item.name"
      :value="item.type">
    </el-option>
  </el-select>
    <div slot="footer" class="dialog-footer">
      <el-button @click="msgBoxShow = false">Take away</el-button>
      <el-button type="primary" @click="commit">determine</el-button>
    </div>
  </el-dialog>

</div>
</template>
<script>
  export default {
    name:"msgBox".props: ['noteData'],
    data() {
      return {
        getjson:this.noteData,
        msgBoxShow: false.noteType:[
          {type:'normal'.name:'Grey: General message'},
          {type:'warning'.name:'Orange: Less important news'},
          {type:'danger'.name:'Red: Important News'}].formLabelWidth: '120px'}; },methods:{
      commit() {
        this.msgBoxShow = false;
        this.$emit('noteConfig'.this.getjson)
      },
      deleteSelf(){
        this.getjson=' ';
        this.$emit('noteConfig'.this.getjson)

      }
    }
  }
</script>
Copy the code

4. Determine the functional process

  1. Select the component to display
  2. Determine the table type
  3. Edit individual component data
  4. preview
  5. Export HTML file (not made yet)

conclusion

In the development process of form and form generation tools, we always implement the functions first, and then reverse arrange the sASS files of the page. Problems such as the longest and shortest number of fields affecting the display style are found only after the functions are realized, leading to rework and modification. The following development sequence is best:

  1. Visual specification arrangement
  2. Component state and field rule collation
  3. HTML + SCSS component, page test component documentation
  4. Develop page generation tools

Inspiration and Follow-up

At present, the page is very ugly, and there are many bugs in the function, but the idea is feasible, and the development difficulty is not very high, and the efficiency and quality are guaranteed. In the future, I hope to use Node+mongoDB+Vue full stack to develop common page type generation tools, referring to the PPT of Wu Duoyi from Baidu FEX, but Baidu’s products are not open source. Commercialized,

The Ant Design framework page is divided into features => templates => components,

The specific implementation ideas should be sorted out clearly to facilitate the next step of work. If you are willing to complete with us or have better ideas, welcome to discuss with us.

Nearly 30, time is short, to step up efforts.

If there is a problem, please be corrected.

Source address query page

The form tool