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

Previous review

Weida has been developed PC Construction of client program , However, it is inconvenient that it is not reflected in the form of the official component library , You need to enable the template of the personnel recruitment management system to use PC End function .

In the first two sections, we built the home page and list page according to the idea of the official template , The list page only implements the function of table , In this section, we continue to build .

Buttons for processing tables

commonly PC End business , The button will have two positions , One is at the top of the table , Used to place new buttons . One is put in the operation column , Such as editing or deleting .

Select the left slot of the form template , Put three buttons inside

Insert picture description here

The title of the Modify button is business title

Insert picture description here

Then add a click event to the button , Use the navigation method of the platform method

Insert picture description here

Then add a button in the operation column slot of the table

Insert picture description here

Change the title and type of the button

Insert picture description here

Then you need to define events for the buttons , The official template is implemented in a low code way

Deleted business logic

/*
*  It can be done by  $page.handler.xxx  Access the methods defined here 
*  Be careful ： This method is only valid on the page to which it belongs 
*  if necessary  async-await, Please amend it to  export default async function() {}
*/
export default async function({event, data}) {
    const { record, context } = data.target
    const id = record._id;
    app.showModal({
        title: ' Are you sure you want to delete ？',
        success: async (res) => {
            if(res.cancel) {
                return;
            }
            const ret = await app.dataSources.post.delete({
                _id: id,
            });
            if (ret.code != 0) {
                app.showToast({
                    'title': ' Delete failed '
                });
                return;
            }
            if(context.reload) {
                try {
                    await context.reload()
                } catch(e) {
                    console.log('error',e)
                }
            }
            
            app.showToast({
                'title': ' Delete successful '
            });
        },
        fail: (res) => {
            
        },
    })
}

When calling low code, you need to pass parameters , Parameter settings

$scope.id44.recordSlot

Insert picture description here

PC The calling of the mobile terminal is slightly different from that of the mobile terminal

Updated business logic

The logic of uploading personnel is to open an updated page , But you need to pass parameters to the page

Insert picture description here

$scope.id44.recordSlot.record._id

Business logic for subsequent arrangement

This also defines a low code method

/*
*  It can be done by  $page.handler.xxx  Access the methods defined here 
*  Be careful ： This method is only valid on the page to which it belongs 
*  if necessary  async-await, Please amend it to  export default async function() {}
*/

export default function({event, data}) {
    const { context, record } = data.target;
    try {
        $page.dataset.state.reloadTableFunc = context.reload;
    } catch(e) {
        console.log('e is ', e);
    }
    $page.dataset.state.operObj.id = record._id;
    $page.dataset.state.operObj.action = record.operation;
    $page.dataset.state.isShowModal = !$page.dataset.state.isShowModal;
}

The parameter is passed during the call

$scope.id44.recordSlot

Looking at the logic of the code, a window pops up , as follows

Insert picture description here

Life cycle function

Generally, this kind of slightly complicated page , Some data will be loaded in the life cycle function , Let's see what the authorities have done

export default {
  onPageLoad(query) {
    const customHeader = $page.dataset.state.customHeader;
    try {
      customHeader.map((item) => {
        const header = JSON.parse(localStorage.getItem(item.key));
        // console.log('header is ', header);
        if (header) {
          item.header = header.value;
        }
        return item;
      });
      $page.dataset.state.customHeader = customHeader;
    }catch(e){
      console.log('candidateManage e is ', e);
    }
    $page.dataset.state.header = [ ...$page.dataset.state.defaultHeader, ...$page.dataset.state.customHeader ];
    // console.log('$page.dataset.state.header is ', $page.dataset.state.header);

    //console.log('---------> LifeCycle onPageLoad', query)
  },
  onPageShow() {
    //console.log('---------> LifeCycle onPageShow')
  },
  onPageReady() {
    //console.log('---------> LifeCycle onPageReady')
  },
  onPageHide() {
    //console.log('---------> LifeCycle onPageHide')
  },
  onPageUnload() {
    //console.log('---------> LifeCycle onPageUnload')
  },
}

At present, because of the official API Not updated yet , I still don't understand what specific operation he wants to do

summary

We use three sections to disassemble two businesses , Home page and list page . General feeling PC The end is still slightly complicated , There are a lot of places to set up , In addition, there are many places in business logic that need to write code . I feel that if I want to be proficient PC The client has to supplement some of the front-end knowledge , Otherwise, it is difficult to make the business you want .