Goal: To rerender the form part of the backend management system to be configurable (through database configuration) and dynamic. Need to support all pages in the system with search terms (such as input fields, drop-down boxes, dates, checkboxes, etc.)

Demand for the target

  • Encapsulating reusable components requires rendering search modules based on background data
  • The filtering criteria change dynamically with the columns in the configuration table

plan

Encapsulate a common search module component, using the system with each search function of the page

Put the search, reset, and collapse functions in one component DynamicForm and the search item in another component DynamicFormItem. Here you need to encapsulate two parent-child components. The required page simply calls the DynamicForm component to display the form content.

A data structure rendering component page that needs to specify a common configuration information.

The data structure

The component receives the following data:

In keeping with the original system, rendering components request data from the drop-down box (including data returned by the request interface and constants retrieved)

The data format required in the search bar

SearchParams: searches for objects. The system management page is used as an example.

{
    currentPage：1,
    pageSize:10,
    employeeName: 'fei',
    userName:'h',
    sex:'SEX_MALE',
    deptId:'11',
    positionId:'987',
    userStatus:'USER_STATUS_FORBIDDER'
}Copy the code

The data structure required to configure the form search bar

Config object that describes the form on the current page and renders the actual display of the search bar. Take the common user page of the management system as an example.

config:{
attrs: {
	'inline': false.'labelPostion': 'right'.'labelWidth': '70px'.'size': 'small'.'stateIcon': true
  },
layout: [{
	attrs: {
		 gutter: 0
		},
	formItem: [{
		 itemAttrs: {
				'type': 'input'.'label': 'name'.'disable': false.'readonly': false.'placeholder': 'Please enter your name'.'rules': [].'key': 'employeeName'.'subtype': 'text'.'value': ' '
				}
			}]
	}, {
	attrs: {
		gutter: 0
		},
	formItem: [{
		itemAttrs: {
				'type': 'select'.'label': 'gender'.'disable': false.'readonly': false.'placeholder': 'Please select'.'rules': [].'key': 'sex'.'subtype': 'text'.'value': ' '.'options': [], // Notice the data here},},... ] , }, { attrs: { gutter: 0, }, formItem: [{ itemAttrs: {'type': 'date'.'label': 'Due date'.'disable': false.'readonly': false.'placeholder': 'Please select'.'rules': [].'key': 'endDate'.'value': ' '.'options': [], // Notice the data here},},... ] ,},... ] }Copy the code

Universality problem

The business component calls the encapsulated component

Here, for a generic user page, the wrapped component is invoked

    <dynamic-form ref='dynamicForm' :config='config' v-model='object' 
            @putHandle='handleCollapse'            @searchHandleEvent='getListData(1)'     />Copy the code
  • The search form

Different search terms are rendered through the V-for loop, and the original search event, reset event, and unpacked event are migrated as is

  • Controls the rendered search term label

Render the search criteria based on the data returned by the background interface

The search form

The encapsulated DynamicForm component binds existing events in the system, searches for events, resets events, and collapses events

    <el-form-item v-for="con in config.layout" :key="con.key">
	<div v-for="item in con.formItem" :key="item.itemAttrs.key" class="item-width">
		<dynamic-form-item
			v-if="value[item.itemAttrs.key]! ==undefined"
			:key="item.itemAttrs.key"
			:item="item.itemAttrs"
			v-bind="item.itemAttrs"
			:value="value[item.itemAttrs.key]"
			@input="handleInput($event,item.itemAttrs.key)"
		/>
	</div>
</el-form-item>
<el-form-item class="search_btn"> <! <dr-btn-search @click="searchEvent"/ > <! --> <dr-btn-search-reset @click="reset"/ > <! <dr-btn-search-cancel @click="putArea"/>
</el-form-item>Copy the code

Notice the search and reset parameters here

When the search event is triggered, the parent component’s search interface method is called to get the corresponding parameters from the this.object object

The reset event is triggered by simply calling the setDefaultValue method

The collapse method of the parent component is called when the collapse event is triggered

Controls rendering of the search term, encapsulated DynamicFormItem component

<template>
    <el-form-item :rules="Rules" :label="item.label" :prop="item.key" class="item-style">
		<dr-input v-if="item.type==='input' v-bind="$attrs" :type="item.type" :placeholder="item.placeholder" :disabled="item.disabled" :readonly="item.readonly" maxlength="48" v-on="$listeners"/> item.type==='select' v-bind="$attrs"
		:multiple="item.multiple"
		:disabled="item.disabled"
		clearable
		v-on="$listeners">
			<el-option v-for="o in item.options" :key="o.key||o.id" 
			:label="o.label||o.lookupName" :value="o.value||o.lookupCode"/>
		</el-select>
		<el-date-picker v-else-if="item.type==='date' v-bind="$attrs" :type="item.type" :placeholder="item.placeholder" clearable v-on="$listeners"/>  Copy the code

Late expansibility

You can also expand checkbox,radio,time, etc