@corgicoding-el/data-form-grid
v2.1.4
Published
基于 @corgicoding-el/* 的表单生成组件
Downloads
19
Maintainers
Readme
@corgicoding-el/data-form-grid
为 @corgicoding/web-quick-start
工程模板设定的表单设计器,通过数据驱动表单视图的快速生成绘制。
绑定依赖
@corgicoding/web-types
- NormalizedError: 统一错误返回
- NormalizedResponse: 统一接口返回
@corgicoding/axios-hook
- useService: 获取当前 axios 实例
@corgicoding/permission-hook
- 权限指令方法
@corgicoding-el/dict
- 字典集组件
@corgicoding-el/remote-select
- 远程下拉组件
@corgicoding-el/upload
- 上传组件
{
"peerDependencies": {
"@element-plus/icons-vue": "^2.1.0",
"element-plus": "^2.7.2",
"lodash-es": "^4.17.21",
"axios": "^1.4.0",
"vue-i18n": "^9.7.1",
"vue": "^3.4.25"
},
"dependencies": {
"@corgicoding/web-types": "workspace:^",
"@corgicoding/axios-hook": "workspace:^",
"@corgicoding/permission-hook": "workspace:^",
"@corgicoding-el/dict": "workspace:^",
"@corgicoding-el/remote-select": "workspace:^",
"@corgicoding-el/upload": "workspace:^"
},
"devDependencies": {
"@types/lodash-es": "^4.17.12"
}
}
前置依赖
- element-plus
- axios
- @vueuse/core
- vue (3.x)
- vue-i18n
- lodash-es
如果没有以上依赖,工程执行以下命令进行安装
pnpm install element-plus vue @vueuse/core vue-i18n lodash-es axios -S
如何使用
安装工程到本地,并按需使用或全局使用
安装
使用 pnpm
下载
pnpm install @corgicoding-el/data-form-grid -S
使用
假设要设计一个用户的简单编辑操作,可以将表单设计为:
username
的input
birthday
的date
userType
的dictRadio
<script setup>
import { DataFormGrid } from '@corgicoding-el/data-form-grid';
// 若使用全局则可以不引入 ( 按需引入则为必引 )
import '@corgicoding-el/data-form-grid/style.css';
const formValue = ref({
username: 'charleschan',
birthday: '1998-03-12',
userType: '2'
});
// 推荐使用 computed 以用于后续各种外部变量导致表单的配置变动
const formConfigs = computed(() => [
{
type: 'input',
name: '用户名称',
key: 'username'
},
{
type: 'date',
name: '出生日期',
key: 'birthday'
},
{
type: 'dictRadio',
name: '用户类型',
key: 'userType',
options: [
{
dictCode: 'user_type'
}
]
}
]);
</script>
<template>
<DataFormGrid v-model="formValue" :configs="formConfigs"></DataFormGrid>
</template>
props入参
import type { FormEmits, FormProps, FormRules } from 'element-plus';
export type DataFormGridProps = {
modelValue: any; // 表单绑定值
configs: Array<FormGridConfig>; // 配置项
labelWidth?: string | number; // 表单默认label宽度
labelPosition?: 'left' | 'right' | 'top'; // label位置
disabled?: boolean; // 禁用
formName?: string; // 表单名(用于提示)
type?: 'text' | 'form'; // 文本值显示模式 / 表单编辑模式
autoTrim?: boolean; // 自动去除空格检验
componentOptions?: FormProps; // 原生 el-form props
eventOptions?: FormEmits; // 原生 el-form emits
};
表单数组配置对象定义
export interface FormGridConfig {
required?: boolean; // 是否必填
requiredText?: string; // 必填校验悬浮提示显示
name: string; // 显示名称
key: string; // 取值key
span?: number; // 栅格占据
mdSpan?: number; // 中屏大小占据
type?: FormItemTypes; // 类型;
component?: any;
placeholder?: string; // 悬浮显示内容
labelWidth?: string; // 显示名称宽度
textFormatter?: (value: any, data: any) => string; // (!!! 文本模式优先级最高) 查看禁用时,取值转换
hidden?: boolean; // 隐藏显示
isIgnoreText?: boolean; // 是否忽略文本模式显示
options?: Array<{
// 选项,字典类型则取第一个option
label?: string;
value?: any;
dictCode?: string; // 字典类型 - 字典编码
url?: string; // 远程类型 - 地址
/**
* @deprecated 即将删除的功能,配置无意义
*/
noDictText?: boolean; // 远程类型 - 无字典翻译
hasSuffix?: boolean; // 标题类型 - 插槽使用
}>;
rules?: FormRules; // 表单规则
auth?: string;
componentOptions?: any;
eventOptions?: any;
}
emits 事件
const Emits = defineEmits(['update:modelValue', 'click-col']);
- click-col
- 点击当前表单项触发的事件
暴露参数
defineExpose({
elRef: formRef,
formValidate, // 表单校验
formReset // 表单重置回初始值
});
按需使用
完整的案例如下
<script setup lang="ts">
import {
DataFormGrid,
type FormGridConfig
} from '@corgicoding-el/data-form-grid';
// import '@corgicoding-el/data-form-grid/style.css';
import { computed, ref } from 'vue';
const formRef = ref<InstanceType<typeof DataFormGrid>>();
const formValue = ref<any>({});
const formConfigs = computed<FormGridConfig[]>(() => [
{
type: 'input',
span: 12,
name: '测试输入',
key: 'testInput'
}
]);
const submitForm = async () => {
const targetForm = await formRef.value?.formValidate();
// 校验过,则执行以下操作
console.log(targetForm);
};
const resetForm = () => {
formRef.value?.formReset();
};
</script>
<template>
<div>
<DataFormGrid
ref="formRef"
v-model="formValue"
:configs="formConfigs"
></DataFormGrid>
</div>
<div>
<el-button @click="resetForm">重置</el-button>
<el-button @click="submitForm">提交</el-button>
</div>
</template>
全局引入
在 main.ts
引入
import {
DataFormGrid,
type FormGridConfig
} from '@corgicoding-el/data-form-grid';
import '@corgicoding-el/data-form-grid/style.css';
app.use(DataFormGrid);
场景说明
支持的表单类型
export type FormItemTypes =
| 'select'
| 'remoteSelect'
| 'remoteTreeSelect'
| 'dictSelect'
| 'dictCheckbox'
| 'dictRadio'
| 'checkbox'
| 'radio'
| 'input'
| 'numberInput'
| 'uploadImage'
| 'uploadFiles'
| 'textarea'
| 'date'
| 'daterange'
| 'datetime'
| 'datetimerange'
| 'year'
| 'month'
| 'week'
| 'title'
| 'null'
| 'itemSlot'
| 'component'
| 'slot';
表单组件归类
/**
* @description 选择类型
*/
export const selectType = [
'select',
'remoteSelect',
'remoteTreeSelect',
'dictSelect',
'dictCheckbox',
'dictRadio',
'checkbox',
'radio',
'date',
'datetime',
'datetimerange',
'daterange',
'year',
'yearrange',
'month',
'monthrange',
'week',
'weekrange'
];
/**
* @description 时间类型
*/
export const timeType: Array<string> = [
'date',
'datetime',
'daterange',
'year',
'month',
'week',
'datetimerange'
];
/**
* @description 时间格式化默认
*/
export const timeFormat = {
date: 'YYYY-MM-DD',
datetime: 'YYYY-MM-DD HH:mm:ss',
daterange: 'YYYY-MM-DD',
year: 'YYYY',
month: 'MM',
datetimerange: 'YYYY-MM-DD HH:mm:ss'
};
/**
* 字典类型组件
*/
export const dictTextType: Array<string> = [
'dictSelect',
'dictCheckbox',
'dictRadio'
];
/**
* @description 固定数据选型类型
*/
export const localOptionType: Array<string> = ['select', 'radio', 'checkbox'];
/**
* @description 特殊组件
*/
export const ignoreType: Array<string> = [
'uploadImage',
'uploadFiles',
'remoteSelect',
'remoteTreeSelect'
];
特殊场景实现
待完善