一. 整体说明
1. 整体规划
首先利用el-form组件，封装一个 ypf-form组件，可以实现通过传入配置，显示各种Form表单。
然后封装 page-search 搜索框组件，该组件基于 YpfForm
然后封装 page-Modal 弹框组件，该组件基于 YpfForm
各组件的调用次序如下：
ypf-form：表单组件 → page-search：搜索框组件 → user.vue：用户管理页面 → search.config.ts 搜索框的配置文件
ypf-form: 表单组件 → page-modal：弹框组件 → user.vue：用户管理页面 → modal.config.ts 弹框的配置文件
2. 组件介绍
(1). ypf-form
form表单组件，主要支持 'input' | 'password' | 'select' | 'datepicker' 四种表单组件。
(2). page-search
页面搜索框组件， 处理表格的搜索业务
(3). page-modal
页面弹框组件 ，主要用来处理新增 和 编辑 等弹框逻辑
二. Form组件封装
1. 封装思路
(1). 首先该组件分为三部分，顶部是name为header的插槽，底部是name为footer的插槽，中间部分是利用el-form组成各种表单元素。（一般顶部header插槽调用者用来存放标题之类，footer插槽调用者用来存放按钮之类）
(2). 该组件接收的样式和布局方面的参数有：
A. labelWidth : 表单域的宽度，绑定在最外层el-form上
B. colLayout：表单的响应式布局
C. itemStyle：表单子元素的样式，绑定在el-form-item上的style属性里
(3). 该组件接收的表单类别和表单属性的参数为：formItems，详细参数如下， 具体分析：fieId、type、label、placeholder为表单通用元素，rules为表单验证规则，一些特有的属性通过otherOptions配置，通过isHidden配合v-if控制是否显示。
type IFormType = 'input' | 'password' | 'select' | 'datepicker'; export interface IFormItem { // 标识id field: string; // 表单类型，支持上述四种类型 type: IFormType; // 表单名称 label: string; // 输入框占位文本 placeholder?: any; // 表单校验规则 rules?: any[]; // 针对select选择框使用 options?: any[]; // 针对不同标签特有属性 otherOptions?: any; // 动态控制form中某个元素的显示和隐藏 isHidden?: boolean; }
传入的配置文件serach.config.ts代码如下：
IForm接口
export interface IForm { formItems: IFormItem[]; labelWidth?: string; colLayout: any; itemLayout: any; }
配置代码
import { IForm } from '@/base-ui/form';
export const searchFormConfig: IForm = {
labelWidth: '120px',
itemLayout: {
padding: '5px 5px',
},
colLayout: {
span: 8,
},
formItems: [
{
field: 'id',
type: 'input',
label: 'id',
placeholder: '请输入id',
otherOptions: {
size: 'small',
},
},
{
field: 'name',
type: 'input',
label: '用户名',
placeholder: '请输入用户名',
},
{
field: 'realname',
type: 'input',
label: '真实姓名',
placeholder: '请输入真实姓名',
},
{
field: 'cellphone',
type: 'input',
label: '电话号码',
placeholder: '请输入电话号码',
},
{
field: 'enable',
type: 'select',
label: '用户状态',
placeholder: '请选择用户状态',
options: [
{ title: '启用', value: 1 },
{ title: '禁用', value: 0 },
],
},
{
field: 'createAt',
type: 'datepicker',
label: '创建时间',
otherOptions: {
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
type: 'daterange',
},
},
],
};