表单模块目前由3部分组成：schema定义、renderer渲染器、runtime运行时
schema定义
schema下定义了所有表单控件的类型、选项；基础的控件通过类型确定选项，复杂控件通过继承的方式扩展属性。
表单控件类型
FormControl 表单设计控件
FormSheet 子表控件，继承FormControl
FormSheetStatistic 子表统计控件，继承FormControl
FormControl
/** * 数据项code * 布局控件的key为type */ key: string /** * 控件选项 */ options: FormControlOptions /** * 控件类型 */ type: FormControlType /** * 父级key */ parentKey?: string
FormSheetStatistic
/**
* 子表统计控件
*/
export interface FormSheetStatistic extends FormControl {
columnKey: string
}FormSheet
/**
* 子表
*/
export interface FormSheet extends FormControl {
/**
* 列
*/
columns: FormControl[]
/**
* 统计
*/
statistics: FormSheetStatistic[]
}FormControlType 表单控件类型
/**
* 表单控件类型
*/
export enum FormControlType {
/**
* 标签
*/
Label = 0,
/**
* 单文本
*/
Text = 1,
/**
* 长文本
*/
Textarea = 2,
/**
* 日期
*/
Date = 3,
/**
* 数值
*/
Number = 4,
/**
* 单选
*/
Radio = 5,
/**
* 复选
*/
Checkbox = 6,
/**
* 下拉
*/
Dropdown = 7,
/**
* 逻辑
*/
Logic = 8,
/**
* 附件
*/
Attachment = 9,
/**
* 图片
*/
Image = 10,
/**
* 位置
*/
Location = 11,
/**
* 日期范围
*/
DateRange = 12,
/**
* 数值范围
*/
NumberRange = 13,
/**
* 地址
*/
Address = 14,
/**
* 签名
*/
Signature = 15,
/**
* 人员单选
*/
StaffSelector = 50,
/**
* 人员多选
*/
StaffMultiSelector = 51,
/**
* 部门单选
*/
DepartmentSelector = 60,
/**
* 部门多选
*/
DepartmentMultiSelector = 61,
/**
* 审批意见
*/
ApprovalOpinion = 70,
/**
* 关联表单
*/
RelevanceForm = 80,
/**
* 反向关联
*/
ReverseRelevance = 90,
/**
* 系统-流水号
*/
SequenceNo = 100,
/**
* 系统-创建人
*/
CreateBy = 101,
/**
* 系统-创建人部门
*/
CreateByParentId = 102,
/**
* 系统-修改人
*/
ModifyBy = 103,
/**
* 系统-创建时间
*/
CreatedTime = 104,
/**
* 系统-修改时间
*/
ModifiedTime = 105,
/**
* 系统-拥有者
*/
OwnerId = 106,
/**
* 系统-其他
*/
SystemOther = 107,
/**
* 布局-分组标题
*/
Group = 200,
/**
* 子表
*/
Sheet = 201,
/**
* 描述说明
*/
Description = 202,
/**
* 表单标题
*/
Title = 203,
/**
* 子表统计
*/
SheetStatistic = 300
}FormControlOptions 表单控件选项
FormControlOptions只是一个约束性的接口，具体属性声明在几个公共子类中，具体的控件选项基本都继承自这几个子类
export class StyleControlOptions implements FormControlOptions {
/**
* 控件名称
*/
name: string = ''
/**
* 是否可见
*/
visible: boolean = true
/**
* 控件样式
*/
style: string | null = null
}
export class EditableControlOptions extends StyleControlOptions {
/**
* 显示条件
*/
displayFormula = ''
/**
* 变更事件
*/
onChange: string | null = null
}
export class InputControlOptions extends EditableControlOptions {
/**
* 必填条件
*/
requiredFormula = ''
}renderer渲染器
renderer渲染器由pc、mobile渲染器，控件值服务，和一些抽象类构成；目前在列表查询表单、表单详情中有使用。
如何使用
引用
<template> <pc-form-renderer ref="formRenderer" :controls="controls"></pc-form-renderer> </template>
import { schema, renderer, runtime } from "@cloudpivot/form";
@Component({
name: "pc-form-detail",
components: {
PcFormRenderer: renderer.components.pc.FormRenderer
},合并controls
// 表单设计器控件属性json const formControls = JSON.parse(formDefine.publishedAttributesJson); // 表单设计器布局json const layout = JSON.parse(formDefine.publishedViewJson); this.controls = components.FormRendererHelper.convertDesign(formControls, layout);
FormRenderer
FormRenderer是pc、mobile渲染器的抽象父类，它实现了以下方法
/** * 查找所有表单控件 */ findFormControls(keys?: string[]): RendererFormControl[] /** * 校验表单 * @param excludes 不校验的控件 */ validate(excludes?: string[]): boolean /** * 表单所有错误 */ getErrors(): any /** * 获取错误 * @param controlId 控件ID * @param errCode 错误码 */ getErrorMessage(controlId: string, errCode: FormControlErrorCodes): string /** * 获取表单值对象 */ getValue(): any /** * 表单重置 */ reset(): void /** * 进入编辑状态 * @param keys 指定的控件ID */ edit(keys?: string[]): void /** * 进入只读状态 * @param keys 指定的控件ID */ readonly(keys?: string[]): void
可以通过refs的方式获取组件实例，调用方法
const formRenderer = this.$refs.formRenderer as any as FormRendererLike; formRenderer.validate();
服务注入
渲染器中一些控件运行依赖于外部服务、或者环境，为了实现关注与实现分离，有一些服务需要在项目中注入
FileService 文件服务，上传控件使用，上传下载相关服务
UserService 用户服务，选人控件使用，获取当前用户、当前用户部门
LocationService 位置服务，定位导航具体实现，移动端使用钉钉服务实现
RelevanceFormService 关联表单服务，列表相关数据获取、关联表单打开
ReverseRelevanceService 反向关联服务，反向关联数据获取，关联表单打开
renderer.RelevanceFormControl.listSelectorLoad 列表组件异步加载，列表模块依赖表单模块，使用这种方式解决循环依赖的问题
目前服务的配置在项目src/config/h3-form目录下
runtime运行时
runtime运行时由表单运行相关组件组成，下列组件都具有pc、mobile版
FormActionModal 操作弹窗组件
FormActions 表单按钮组件
FormDetail 表单详情
FormActionModal
方法
show (options: FormActionModalOptions) 显示
chose 关闭
事件
ok (ac: runtime.FormActionButton, data: any) 弹窗确认
FormActions
props
actions : runtime.FormActionButton[] 按钮列表
事件
action (ac: runtime.FormActionButton) 按钮点击
FormDetail
表单详情是一个组件抽象类，实现有默认表单运行相关的方法：
load 加载
save 暂存
submit 提交、同意、不同意
cancel 作废
delete 删除
finish 结束
retrieve 撤回
print 打印
edit 编辑
forword 转办
reject 驳回
除了运行相关方法，还有一些辅助方法：
loadCustomForm 加载自定义表单模板
initCustomForm 初始化自定义表单
initForm 初始化表单
onAction 表单按钮事件分发方法，处理按钮交互
doAction 表单按钮事件流程控制方法，如触发前，触发后
beforeAction 表单按钮操作前事件调用方法
executeAction 表单事件执行分发方法
onActionDone 表单按钮操作后事件调用方法
onCustomAction 自定义按钮事件调用方法
showActionModal 表单按钮弹窗
onActionModalOk 表单按钮弹窗确认事件执行方法
除load方法外，其他都由按钮事件驱动，不需要手动调用。
pc和mobile的差别
审批意见
pc、mobile的审批意见控件交互处理不同，mobile端的审批意见控件是在按钮点击通过校验后，再显示审批意见控件。校验
pc、mobile的错误消息交互不同，导致校验方法的是分开实现的
多语言
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import form_zh from '@cloudpivot/form/locales/zh-CN';
Vue.use(VueI18n);
const i18n = new VueI18n({
locale: localStorage.getItem('locale') || 'zh',
messages: {
zh: {
cloudpivot: {
form: form_zh
},
},
en: {
}
}
});-
有用（6）
-
没有用（0）
