Analysis of official template of wechat personnel recruitment management system (II)

In our last article, we analyzed the homepage of the official template , In this article, we continue to analyze , Take a look at how the following table pages are implemented

Create a page

Insert picture description here

First create a blank page to practice

Official template analysis

Let's put the components away first , The big part is divided into several parts

Insert picture description here

The page consists of four parts , The content structure refers to the table , We don't know what the dialog box is for , Drawers are used to display charts , The node component is used to display copyright information

PC The trouble with the mobile terminal is that it has a complex structure , If you don't have a clear guide, you won't know what it means if you look at the code you have written for a period of time . Therefore, it is necessary to record your own development process on a daily basis , If you want to recall and look at the documents, you will understand .

Form effect

Insert picture description here

Copyright information

Insert picture description here

Drawer effect

Insert picture description here

We need this layer by layer analysis when looking at the official template , Deduce how the author thought about the implementation . Our derivation is divided into several steps , Let's first look at the composition of its components , Then analyze how the variables are set , Then analyze the low code settings . Basically, there are three steps to decompose .

The biggest feature of low code is that the intellectual property right of the template belongs to you , It can be expanded according to the original author's ideas , This is also the biggest charm of low code .

Header function implementation

We first drag a content structure component according to the idea of the template

Insert picture description here

Modify the title , Turn the back button on

Insert picture description here

The description text is bound to a variable , We need to create a variable , Click variable management , We create a global variable empty, The type of the variable is boolean

Insert picture description here

After the variables are created, they need to be bound

Insert picture description here

Insert picture description here

Then you need to define an event for the return button , We return to the workbench page

Insert picture description here

Table content function implementation

The next step is to place specific content in the content slot , Select tab + Table components

Insert picture description here

The first is to bind the data source

Insert picture description here

The next step is to define the contents of the tab , You need to define an array in variable management to define the various states of the tab

Insert picture description here

[
  {
    "id": null,
    "label": " All "
  },
  {
    "id": 0,
    "label": " Not uploaded "
  },
  {
    "id": 1,
    "label": " Under review "
  },
  {
    "id": 2,
    "label": " Approved by "
  },
  {
    "id": 3,
    "label": " Review rejected "
  }
]

Effect after data binding

Insert picture description here

Then you need to set the header , The header is also defined by defining variables , Create a header Variable , The array specifies the column names displayed in the header

Insert picture description here

[
  {
    "key": "reallyName",
    "header": " full name "
  },
  {
    "key": "company",
    "header": " Name of the current company "
  },
  {
    "key": "position",
    "header": " Current position "
  },
  {
    "key": "telephone",
    "header": " Contact information "
  },
  {
    "key": "experiences",
    "header": " Past Experience "
  },
  {
    "key": "city",
    "header": " place "
  },
  {
    "key": "gender",
    "header": " Gender "
  },
  {
    "key": "desire",
    "header": " Willingness "
  },
  {
    "key": "interviewStatus",
    "header": " Current interview process "
  },
  {
    "key": "operation",
    "header": " Follow up arrangements "
  },
  {
    "key": "resumeStatus",
    "header": " Audit status "
  },
  {
    "key": "createdAt",
    "header": " Creation time "
  },
  {
    "key": "opera",
    "header": " operation ",
    "cellType": "slot"
  }
]

After the variables are set, bind the data

Insert picture description here

After the header is defined , You need to create a variable to define the search field

Insert picture description here

[
  {
    "text": " full name ",
    "value": "reallyName"
  },
  {
    "text": " Name of the current company ",
    "value": "company"
  },
  {
    "text": " Current position ",
    "value": "position"
  },
  {
    "text": " Contact information ",
    "value": "telephone"
  },
  {
    "text": " Past Experience ",
    "value": "experiences"
  },
  {
    "text": " Gender ",
    "value": "gender"
  },
  {
    "text": " Willingness ",
    "value": "desire"
  },
  {
    "text": " place ",
    "value": "city"
  }
]

Then data binding

Insert picture description here

summary

Just beginning to learn PC End components are still difficult , There are many points set , Compared with PC The complexity of the components of the mobile terminal is much higher than that of the mobile terminal , Take your time , It is estimated that there is still a long way to go before the system can be developed .