@dt-frames/ui 2.0.24 → 4.0.1

package/dist/es/components/form/src/types/form.ts

@@ -0,0 +1,391 @@
+import type { Recordable } from '@dt-frames/core'
+import type { Component, Reactive, Ref } from 'vue'
+import type { FormSchema, StrOrDynamicStr } from './item'
+import type { ColProps, FormValidateCallback, RowProps } from 'element-plus'
+/**
+ * @desc
+ * 	 filter: 查询条件中的表单(表单布局不一样, 会多 查询/重置/更多 三个按钮)
+ *   model: 弹框中的表单
+ */
+type FormMode = 'filter' | 'modal' | null | '' | undefined
+
+/**
+ * @desc 按钮属性
+ */
+type ButtonTypes = {
+	/**
+	 * 按钮名称
+	 */
+	label: string | ((row: Recordable) => string)
+	/**
+	 * 按钮颜色
+	 */
+	color?: string
+	/**
+	 * 按钮类型
+	 * @default 'primary'
+	 */
+	type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
+	/**
+	 * 按钮class
+	 */
+	class?: string
+	/**
+	 * 是否禁用
+	 */
+	disabled?: boolean
+	/**
+	 * 是否显示
+	 */
+	show?: StrOrDynamicStr
+	/**
+	 * 按钮前面图标
+	 * @desc svg图标的名称
+	 */
+	preIcon?: string | Component
+	/**
+	 * 按钮后面图标
+	 * @desc svg图标的名称
+	 */
+	postIcon?: string | Component
+	/**
+	 * 图标大小
+	 */
+	iconSize?: number
+	/**
+	 * 按钮权限
+	 */
+	auth?: string
+	/**
+	 * 是否处于加载中
+	 */
+	loading?: Ref<boolean>
+	/**
+	 * 是否为朴素按钮
+	 */
+	plain?: boolean
+	/**
+	 * 是否为幽灵按钮
+	 */
+	ghost?: boolean
+	/**
+	 * 是否为圆角按钮
+	 */
+	round?: boolean
+	/**
+	 * 是否为圆形按钮
+	 */
+	circle?: boolean
+	/**
+	 * 按钮点击事件
+	 */
+	onClick?: (...args: any) => any
+}
+
+type Source = {
+	/**
+	 * 注册实例
+	 */
+	registerInstance?: (instance: FormInsType, type: 'form') => void
+}
+
+type FormProps = Source & {
+	/**
+	 * 表单模式
+	 */
+	mode?: FormMode
+
+	/**
+	 * 表单数据对象
+	 */
+	model?: Recordable
+
+	/**
+	 * 是否紧凑布局
+	 */
+	compact?: boolean
+
+	/**
+	 * 行内表单模式
+	 * @default false
+	 */
+	inline?: boolean
+
+	/**
+	 * 表单域标签的位置， 当设置为 left 或 right 时，则也需要设置 label-width 属性
+	 * @default 'right'
+	 */
+	labelPosition?: 'left' | 'right' | 'top'
+
+	/**
+	 * 标签的长度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 可以使用 auto
+	 * @default 100
+	 */
+	labelWidth?: string | number
+
+	/**
+	 * 表单域标签的后缀
+	 */
+	labelSuffix?: string
+
+	/**
+	 * 行相关样式
+	 */
+	rowProps?: RowProps
+
+	/**
+	 * 列相关样式
+	 */
+	colProps?: Partial<ColProps>
+	/**
+	 * 默认占多少, 总共24, 由于页面经常需要配置列占比，这里设置一个快捷参数
+	 */
+	span?: number
+	/**
+	 * 是否显示必填字段的标签旁边的红色星号
+	 * @default false
+	 */
+	hideRequiredAsterisk?: boolean
+	/**
+	 * 星号的位置
+	 */
+	requireAsteriskPosition?: 'left' | 'right'
+	/**
+	 * 是否在 rules 属性改变后立即触发一次验证
+	 * @default true
+	 */
+	validateOnRuleChange?: boolean
+
+	/**
+	 * 用于控制该表单内组件的尺寸
+	 */
+	size?: 'large' | 'default' | 'small'
+
+	/**
+	 * 是否禁用该表单内的所有组件。 如果设置为 true, 它将覆盖内部分已禁用 `` prop
+	 * @default false
+	 */
+	disabled?: boolean
+
+	/**
+	 * 是否显示清除按钮
+	 * @default false
+	 */
+	clearable?: boolean
+
+	/**
+	 * 表单数据配置项
+	 */
+	schemas?: FormSchema[]
+
+	/**
+	 * 仅查询模式支持
+	 * @default true
+	 */
+	autoFetchOnEnter?: boolean
+
+	/**
+	 * 自动查询 只支持在 'search' 模式, 应用在curd中
+	 */
+	autoFetch?: boolean
+
+	/**
+	 * 最小显示的条目数
+	 */
+	minShowColumn?: number
+
+	/**
+	 * 是否显示折叠按钮 在filter模式
+	 * @default true
+	 */
+	showAdvancedButton?: boolean
+
+	/**
+	 * label后面是否需要':'
+	 * @default true
+	 */
+	colon?: boolean
+	/**
+	 * 是否展示form 与table 联动中使用
+	 * @default true
+	 */
+	showSearch?: boolean
+	/**
+	 * 查询执行的函数
+	 */
+	onSearch?: (params: Recordable) => void
+
+	/**
+	 * 重置执行的函数
+	 */
+	onReset?: (params: Recordable) => void
+
+	/**
+	 * 修改按钮 仅弹框模式支持
+	 */
+	buttons?: ButtonTypes[] | null | boolean
+
+	/**
+	 * 按钮加载状态
+	 */
+	loading?: { [key: string]: boolean } | Ref<boolean>
+
+	/**
+	 * 表单发生改变
+	 */
+	modelChange?: (params: Recordable, key?: string, value?: any) => void
+}
+
+/**
+ * 表单暴露的方法，供外面使用
+ */
+type FormInsType = {
+	/**
+	 * 设置表单属性
+	 */
+	setProps: (props: FormProps) => void
+	/**
+	 * 更新表单项配置
+	 */
+	updateSchema: (schemas: Partial<FormSchema> | Partial<FormSchema>[]) => void
+	/**
+	 * 重置某个表单项
+	 */
+	resetSchema: (schemas: Partial<FormSchema> | Partial<FormSchema>[]) => void
+	/**
+	 * 根据名称 删除某个表单项
+	 */
+	removeFormByName: (name: string | string[]) => void
+	/**
+	 * 追加某个表单项
+	 */
+	appendFormItems: (
+		schema: FormSchema[],
+		prefixField?: string,
+		first?: boolean | undefined
+	) => void
+	/**
+	 * 清理某个字段的表单验证信息
+	 */
+	clearValidate: (name?: string | string[]) => Promise<void>
+
+	/**
+	 * 对整个表单的内容进行验证。 接收一个回调函数，或返回 Promise
+	 */
+	validate: (callback?: FormValidateCallback) => Promise<boolean | undefined>
+
+	/**
+	 *
+	 * @param nameList
+	 * @returns
+	 */
+	scrollToField: (name: string) => void
+
+	/**
+	 * 验证具体的某个字段
+	 */
+	validateField: (nameList: string[]) => Promise<boolean>
+
+	/**
+	 * 设置表单的参数配置
+	 * @param values 需要设置的属性
+	 * @param reset 是否重置表单
+	 *
+	 * @expample
+	 *	```ts
+	 *	// 原始值
+	 * formModel = { a: 1 }
+	 *
+	 * // 与原有的表单数据进行合并 Object.assign
+	 * setModel({b: 2, a: 3}) 		// formModel的值为 {a: 3, b: 2}
+	 * // 先重置 再进行值的设置
+	 * setModel({b: 1}, true) 		// formModel的值为 {b: 1}
+	 * `
+	 */
+	setModel: (values: Recordable, reset?: boolean) => Promise<void>
+
+	/**
+	 * 获取所有的表单值
+	 */
+	getModel: () => Recordable
+
+	/**
+	 * 重置该表单项，将其值重置为初始值，并移除校验结果
+	 * @param fields 需要重置的字段
+	 */
+	resetFields: (fields: string | string[]) => void
+	/**
+	 * 重置表单数据
+	 */
+	resetForms: () => void
+}
+
+/**
+ * 校验规则
+ */
+type RuleType = {
+	/**
+	 * 枚举类型
+	 * @example {
+			type: 'enum',
+			enum: [true],
+			message: '',
+		}
+	 */
+	enum?: string
+	/**
+	 * 字段长度
+	 */
+	len?: number
+	/**
+	 * 最大长度
+	 */
+	max?: number
+	/**
+	 * 校验文案
+	 */
+	message?: string
+	/**
+	 * 最小长度
+	 */
+	min?: number
+	/**
+	 * 正则表达式校验
+	 */
+	pattern?: RegExp
+	/**
+	 * 是否必选
+	 */
+	required?: boolean
+	/**
+	 * 校验前转换字段值
+	 */
+	transform?: (value: string) => string
+	/**
+	 * 校验触发的时机
+	 */
+	trigger?: 'blur' | 'change'
+	/**
+	 * 内置校验类型
+	 */
+	type?: string
+	/**
+	 * 自定义校验（注意，callback 必须被调用）
+	 */
+	validator?: (rule: any, value: any, callback: any) => void
+	/**
+	 * 必选时，空格是否会被视为错误
+	 * @default false
+	 */
+	whitespace?: boolean
+	[key: string]: any
+}
+
+/**
+ * 表单实例
+ */
+type FormRef = FormInsType & {
+	formModel: Reactive<Recordable>
+}
+
+export type { FormProps, FormMode, FormInsType, ButtonTypes, RuleType, FormRef }