Vuejs+ElementUI реализует настраиваемую динамическую конфигурацию формы.

Vue.js

Цель достижения: повторно визуализировать часть формы в фоновой системе управления, чтобы она была настраиваемой (посредством конфигурации базы данных) и динамической. Необходимо поддерживать все страницы в системе с элементами поиска (такими как поля ввода, раскрывающиеся списки, даты, переключатели и т. д.)

целевой спрос

  • Инкапсуляция повторно используемых компонентов требует рендеринга модулей поиска на основе фоновых данных.
  • Условия фильтрации должны динамически изменяться в соответствии с содержимым столбца таблицы конфигурации.

строить планы

Инкапсулировать каждую страницу с функцией поиска общей сборки модуля поиска, используя систему

DynamicFormDynamicFormItem.此处需要封装两个互为父子关系的组件。所需页面只是通过调用DynamicFormformсодержание формы.

Необходимо указать общую структуру данных информации о конфигурации для отображения страницы компонента.

структура данных

Данные, принятые компонентом, заключается в следующем:

В соответствии с предыдущей исходной системой, запрос на получение данных раскрывающегося списка при рендеринге компонента (включая данные, возвращаемые интерфейсом запроса, и полученную константу).

Формат данных, необходимый для панели поиска

searchParams: объект поиска, в качестве примера возьмем страницу управления системой.

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

Структура данных, необходимая для конфигурации панели поиска формы

configобъект, описывающий текущую страницуformВ случае формы визуализируйте фактическую отображаемую панель поиска. В качестве примера возьмем общую страницу пользователя системы управления.

config:{
attrs: {
	'inline': false,
	'labelPostion': 'right',
	'labelWidth': '70px',
	'size': 'small',
	'stateIcon': true
  },
layout: [{
	attrs: {
		 gutter: 0
		},
	formItem: [{
		 itemAttrs: {
				'type': 'input',
				'label': '姓名',
				'disable': false,
				'readonly': false,
				'placeholder': '请输入姓名',
				'rules': [],
				'key': 'employeeName',
				'subtype': 'text',
				'value': ''
				}
			}]
	}, {
	attrs: {
		gutter: 0
		},
	formItem: [{
		itemAttrs: {
				'type': 'select',
				'label': '性别',
				'disable': false,
				'readonly': false,
				'placeholder': '请选择',
				'rules': [],
				'key': 'sex',
				'subtype': 'text',
				'value': '',
				'options': [], // 注意此处的数据             
			},
		},... ],
	}, {
	attrs: {
		gutter: 0,
		},
	formItem: [{
		itemAttrs: {
				'type': 'date',
				'label': '截止日期',
				'disable': false,
				'readonly': false,
				'placeholder': '请选择',
				'rules': [],
				'key': 'endDate',
				'value': '',
				'options': [], // 注意此处的数据
			},
		}, ...],
	},... ]
}

проблема общности

Бизнес-компонент вызывает инкапсулированный компонент

Здесь для общей пользовательской страницы инкапсулированный компонент называется

    <dynamic-form ref='dynamicForm' :config='config' v-model='object' 
            @putHandle='handleCollapse'            @searchHandleEvent='getListData(1)'     />
  • форма поиска

пройти черезv-forВизуализируйте различные элементы поиска в цикле и перенесите исходное событие поиска, событие сброса и событие свертывания, как они есть.

  • Управляет отображаемой меткой элемента поиска

Рендеринг критериев поиска на основе данных, возвращаемых задневскими интерфейсами

форма поиска

упакованныйDynamicForm

    <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>

Обратите внимание на параметры поиска и параметры сброса здесь

Когда инициируется событие поиска, вызывается метод интерфейса поиска родительского компонента в соответствии сthis.objectОбъект получает соответствующие параметры

Просто позвоните, когда сработает событие сбросаsetDefaultValue Метод

Метод Collapse вызывает родительский компонент триггеров скрытых событий.

Управляет отображением условий поиска, инкапсулированныхDynamicFormItemкомпоненты

<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"/>
		<el-select v-else-if="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"/>
    </el-form-item>
</template>

Позднее расширение

Его также можно расширить на флажок, радио, время и т. д.


Категории