FddContract

类型和常量

合同

Viewer interface

/** 文档查看 FaContract 组件实例 */
export interface Viewer
  extends ComponentInstance,
    ReturnType<typeof useWidgetActive>,
    ReturnType<typeof useWidgetSort>,
    ReturnType<typeof useWidgetOperate>,
    ReturnType<typeof useWidgetValidate> {
  /**
   * 文档展示
   */

  /** 文档列表 - 用于批量文档 */
  docs: DocData[]

  /** 当前文档 */
  doc: DocData

  /** 当前文档索引，需要 `.sync` 双向同步 */
  docIndex: number

  /**
   * 页面图片地址
   * @description 如果文档页面数据 `PageData` 未设置 `src`，则可使用该选项统一设置文档图片地址
   * @version v1.4.0
   */
  pageSrc?: (doc: DocData, page: PageData) => string | void

  /**
   * 页面 HTML 内容
   * @description 如未设置页面图片，可使用该方法设置每页 HTML 内容，支持异步
   */
  pageHtml?: (doc: DocData, page: PageData) => string | Promise<string> | void

  /** 页面上下间距 */
  pageSpacing: number

  /** 是否开启工具栏 */
  toolbar: boolean

  /** 工具栏缩放级别列表 */
  zoomLevels: number[]

  /** 滚动节点 */
  scroller: HTMLElement | null

  /**
   * 控件配置
   */

  /** 是否启用控件 */
  widget: boolean

  /** 控件列表 */
  widgets: Widget[]

  /** 是否允许拖入控件 */
  droppable: boolean

  /** 控件自定义类名 */
  widgetClassName?: (widget: Widget) => string | void

  /** 控件自定义提示 */
  widgetTips?: (widget: Widget) => string | void

  /** 控件是否支持跨页拖动（仅限普通控件，骑缝和批量控件不允许跨页拖动） */
  widgetMovingAcrossPages: boolean

  /** 控件名称是否必填 */
  widgetNameRequired: boolean | ((widget: Widget) => boolean)

  /** 控件参与方是否必须选择 */
  widgetActorRequired: boolean | ((widget: Widget) => boolean)

  /** 控件数据来源 */
  widgetSources?: (widget: Widget) => WidgetSourceItem[]

  /** 控件数据来源加载 */
  widgetSourceLoader?: (widgets: Widget[]) => Promise<Record<WidgetSource | string, string> | void>

  /** 控件数据来源是否自动加载 */
  widgetSourceAutoLoad: boolean

  /** 控件拖入前，可返回 `Promise.reject` 阻止 */
  beforeWidgetDrop?: (widget: Widget) => void

  /** 控件删除前，可返回 `Promise.reject` 阻止 */
  beforeWidgetRemove?: (...widgets: Widget[]) => void

  /**
   * 签署控件
   */

  /**
   * 签章配置选项
   * @description 可配置日期章图片地址、日期章全局配置、签章全局切换、签章自定义 class 等
   * @version v1.4.0
   */
  signOptions: SignOptions

  /** 是否启用骑缝控件 */
  riding: boolean

  /** 骑缝控件列表(包含所有文档) */
  ridings: Widget[]

  /** 当前文档骑缝控件列表 */
  docRidings: Widget[]

  /** 骑缝区域宽度 (px) */
  ridingWidth: number

  /** 允许的骑缝控件类型 */
  allowedRidingTypes: WidgetType[]

  /** 批量控件列表(包含所有文档) */
  batches: Widget[]

  /** 签名列表 - 用于签名切换 */
  signatures: SignData[]

  /** 印章列表 - 用于印章切换 */
  seals: SignData[]

  /** 切换签章前，可返回 `Promise.reject` 阻止 */
  beforeSignChange?: (widget: Widget, sign: SignData) => void

  /**
   * 填写控件
   */

  /** 附件上传方法 */
  attachmentUpload?: (file: File, widget: Widget) => Promise<{ id: string; fileName: string }>

  /** 附件接受上传的文件类型 */
  attachmentAccept?: string

  /** 图片控件上传方法 */
  imageUpload?: (file: File, widget: Widget) => Promise<{ id: string; name?: string; src?: string }>

  /** 图片控件接受上传的文件类型 */
  imageAccept?: string

  /**
   * 图片控件地址
   * @description 如果图片控件为设置 `image.src`，则可使用该选项统一设置图片控件地址
   */
  imageSrc?: (widget: Widget) => string | void

  /**
   * 图片上传前是否裁剪
   */
  imageCrop: boolean

  /**
   * 其他
   */

  /** 状态 */
  state: ReturnType<typeof useDocState>

  /** 滚动 */
  scroll: ReturnType<typeof useDocScroll>

  /** 缩放 */
  zoom: ReturnType<typeof useZoom>

  /** 布局 */
  layout: ReturnType<typeof useLayout>

  /** 工具区域 */
  tools: ReturnType<typeof useTools>

  /** 控件数据来源 */
  source: ReturnType<typeof useWidgetSource>

  /** 控件选择 */
  selection: ReturnType<typeof useSelection>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178

ActorData interface

/** 参与方数据 */
export interface ActorData {
  /** 参与方 id */
  id: string

  /** 参与方名称 */
  name: string

  /** 参与方索引，用来确定参与方颜色 */
  index: number

  /** 是否填写 */
  fill?: boolean

  /** 是否签署 */
  sign?: boolean

  /** 是否发起人 */
  isSender?: boolean

  /** 是否个人，个人无法使用印章控件 */
  isPerson?: boolean

  // eslint-disable-next-line
  [key: string]: any
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

DocData interface

/** 合同文档基础信息 */
export interface DocData {
  /** 文档 id */
  id: string

  /** 文档名 */
  name: string

  /** 页面数据 */
  pages: PageData[]

  // eslint-disable-next-line
  [key: string]: any
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

PageData interface

/** 页面信息 */
export interface PageData {
  /** 宽度 */
  w: number

  /** 高度 */
  h: number

  /** 页码，从 0 开始 */
  p: number

  /** 页面图片 */
  src?: string

  /** 页面 HTML */
  html?: string

  // eslint-disable-next-line
  [key: string]: any
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

PageSum interface

/** 合同页面统计 */
export interface PageSum {
  /** 最小宽度 */
  minWidth: number

  /** 最小高度 */
  minHeight: number

  /** 最大宽度 */
  maxWidth: number

  /** 最大高度 */
  maxHeight: number
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

ScrollSmooth type

/**
 * 滚动是否平滑
 * 如果为 `'auto'` 则根据配置的平滑滚动距离调整，距离内平滑，距离外不平滑
 */
export type ScrollSmooth = boolean | 'auto'
1
2
3
4
5

拖拽

DragBox interface

/** 拖拽盒子数据 */
export interface DragBox {
  /** 宽度 */
  w: number | string
  /** 高度 */
  h: number | string
  /** 水平坐标 */
  x: number
  /** 垂直坐标 */
  y: number
  /** 最小宽度 */
  minW: number
  /** 最大宽度 */
  maxW: number
  /** 最小高度 */
  minH: number
  /** 最大高度 */
  maxH: number
  /** CSS3 缩放 */
  scale: number | number[]
  /** zoom 外部节点缩放，无需当前节点 */
  zoom: number
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

DragBoxDefault const

/** 拖拽盒子默认选项 */
export const DragBoxDefault: DragBox = {
  w: 200,
  h: 200,
  x: 0,
  y: 0,
  minW: 0,
  maxW: Infinity,
  minH: 0,
  maxH: Infinity,
  scale: 1,
  zoom: 1
}
1
2
3
4
5
6
7
8
9
10
11
12
13

DragState interface

/** 拖拽状态，用以记录操作时的状态 */
export interface DragState {
  /** 是否激活 */
  active: boolean
  /** 是否限定移动范围为父元素，如果为 string 则指定 parent 节点 */
  parent: boolean | string
  /** 是否限定调整大小范围为父元素 */
  resizeParent: boolean
  /** 是否以中心点位置调整大小 */
  resizeAtCenter: boolean
  /** 宽度 */
  w: number
  /** 高度 */
  h: number
  /** X 坐标 */
  x: number
  /** Y 坐标 */
  y: number
  /** 父节点宽度 */
  pw: number
  /** 父节点高度 */
  ph: number
  /** 更新状态 */
  update: () => void
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

DragAxis enum

/** 拖拽坐标轴 */
export enum DragAxis {
  /** X 轴 */
  X = 'x',
  /** Y 轴 */
  Y = 'y',
  /** 都支持 */
  BOTH = 'both'
}
1
2
3
4
5
6
7
8
9

MovingData interface

/** 移动中数据 */
export interface MovingData {
  /** 实时 x 坐标 */
  x: number
  /** 实时 y 坐标 */
  y: number
  /** 拖拽移动水平距离 */
  moveX: number
  /** 拖拽移动垂直距离 */
  moveY: number
}
1
2
3
4
5
6
7
8
9
10
11

ResizeData type

/** 调整大小数据 */
export type ResizeData = Pick<DragState, 'x' | 'y' | 'w' | 'h'>
1
2

ResizeHandle enum

/** 调整大小句柄 */
export enum ResizeHandle {
  /** 上左 */
  TL = 'tl',
  /** 上中 */
  TC = 'tc',
  /** 上右 */
  TR = 'tr',
  /** 左中 */
  LM = 'lm',
  /** 右中 */
  RM = 'rm',
  /** 下左 */
  BL = 'bl',
  /** 下中 */
  BC = 'bc',
  /** 下右 */
  BR = 'br'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

控件

WidgetType enum

/** 控件类型: 签名/印章/日期/文本/复选框/附件... */
export enum WidgetType {
  /** 未知 */
  UNKNOWN = -1,

  /**
   * 签署控件
   */

  /** 签名 */
  SIGNATURE = 0,

  /** 印章 */
  SEAL = 1,

  /** 日期签署 */
  DATE = 2,

  /** 签署备注 */
  REMARK = 15,

  /**
   * 填写控件
   */

  /** 单行文本 */
  INPUT = 3,

  /** 多行文本 */
  TEXTAREA = 4,

  /** 复选框 */
  CHECKBOX = 5,

  /** 附件 */
  ATTACHMENT = 6,

  /** API 旧的表格，暂不支持 */
  TABLE_API3 = 7,

  /** 图片 */
  IMAGE = 8,

  /** 数字 */
  NUMBER = 9,

  /** 身份证号 */
  ID = 10,

  /** 日期填写 */
  DATE_FILL = 11,

  /** 单选框 */
  RADIO_GROUP = 12,

  /** 复选框 */
  CHECKBOX_GROUP = 13,

  /** 下拉选择 */
  SELECT = 14,

  /** 表格 */
  TABLE = 16
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

WidgetStyle enum

/** 控件风格: 签署/填写 */
export enum WidgetStyle {
  /** 未知 */
  UNKNOWN = 'unknown',
  /** 签署控件 */
  SIGN = 'sign',
  /** 填写控件 */
  FILL = 'fill'
}
1
2
3
4
5
6
7
8
9

WidgetMode enum

/** 控件模式: 设置/使用/查看/完成 */
export enum WidgetMode {
  /** 设置模式，如指定控件位置和设置控件信息 */
  SET = 'set',
  /** 使用模式，如填写和签署 */
  USE = 'use',
  /** 查看模式，如控件预览 */
  VIEW = 'view',
  /** 完成模式，如预览已填写定稿的控件 */
  DONE = 'done'
}
1
2
3
4
5
6
7
8
9
10
11

WidgetKind enum

/** 控件种类: 普通/骑缝/批量 */
export enum WidgetKind {
  /** 普通控件 */
  NORMAL = 1,
  /** 骑缝控件 */
  RIDING = 2,
  /** 批量控件 */
  BATCH = 3
}
1
2
3
4
5
6
7
8
9

WidgetData interface

/** 控件信息 */
export interface WidgetData extends Omit<Partial<Widget>, 'text' | 'checkOptions' | 'tableOptions'> {
  /** 拖拽时坐标偏移 */
  dragOffset?: {
    x: number
    y: number
  }

  /** 文本信息 */
  text?: Partial<TextData>

  /** 选项列表 */
  checkOptions?: Partial<CheckOption>[]

  /** 选项列表 */
  tableOptions?: Partial<TableOptions>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

WidgetOption interface

/** 控件选项 */
export interface WidgetOption {
  /** 控件名 - 英文 */
  key: string

  /** 控件名称 - 展示 */
  name: string

  /** 控件类型 */
  type: WidgetType

  /** 控件风格 */
  style: WidgetStyle

  /** 控件图标 */
  icon: string

  /** 控件初始宽度 */
  width: number

  /** 控件初始高度 */
  height: number

  /** 控件最小宽度 */
  minWidth?: number

  /** 控件最小高度 */
  minHeight?: number

  /** 控件最大宽度 */
  maxWidth?: number

  /** 控件最大高度 */
  maxHeight?: number

  /** 默认配置 */
  default?: Record<string, unknown>

  /** 控件是否允许调整大小，默认 `false` */
  resizable?: boolean | ((widget: Widget) => boolean | void)

  /** 是否以中心点位置调整大小 */
  resizeAtCenter?: boolean

  /** 控件组件 */
  component?: Component | GetWidgetComponent

  /** 控件组件扩展 */
  componentExtend?: Component

  /** 控件设置组件 */
  settingComponent?: Component

  /** 控件填写组件 */
  fillingComponent?: Component

  /** 控件设置是否自定义填写要求 */
  settingCustomFillRequirements?: boolean

  /** 文本控件数据 */
  text?: Partial<TextData>

  /** 控件初始方法 */
  init?: (widget: Widget, data: WidgetData) => void

  /** 控件设置校验 */
  settingValidate?: (widget: Widget) => string | void

  /** 控件使用校验 */
  usingValidate?: (widget: Widget) => string | void

  /** 检测控件是否有填写值 */
  hasFillValue?: (widget: Widget) => boolean

  /** 清除控件数据 */
  clear?: (widget: Widget) => void

  /** 根据原始控件数据创建控件扩展 */
  rawWidgetCreator?: (widgetData: WidgetData, data: RawField) => WidgetData | void

  /** 根据控件获取原始控件数据扩展 */
  rawFieldGetter?: (widget: Widget, data: RawField) => RawField | void

  /** 控件 label 次级提示 */
  labelTips?: (widget: Widget) => string | void

  // eslint-disable-next-line
  [key: string]: any
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

WidgetMenuItem interface

/** 控件操作菜单 */
export interface WidgetMenuItem {
  /** 菜单文本 */
  text: string

  /** 菜单图标 */
  icon?: string

  /** 是否启用 */
  enable?: boolean

  /** 点击触发 */
  handler: () => void

  // eslint-disable-next-line
  [key: string]: any
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

WidgetError interface

/** 控件错误 */
export interface WidgetError extends Error {
  /** 未通过校验的控件 */
  invalidWidgets: Widget[]
}
1
2
3
4
5

RawField interface

/**
 * 原始控件数据
 * @description 后端存储的控件 JSON 原始数据
 */
export interface RawField {
  /** 控件 id */
  id: string

  /** 控件类型名称 */
  label: string

  /** 控件参与方 */
  name: string

  /** 控件类型 */
  type: WidgetType

  /** 控件签署类型，应优先使用 type */
  signStyle: WidgetType

  /** 控件所在页，0 开始 */
  p: number

  /** 控件宽度 */
  w: number

  /** 控件高度 */
  h: number

  /** 定位方式，默认以中心点定位 */
  locateType?: LocateType

  /** 控件坐标 x，默认相对中心点 */
  x: number

  /** 控件坐标 y，默认相对中心点 */
  y: number

  /** 填写控件名称 */
  widgetName: string

  /** 控件值 */
  widgetValue: string

  /** 是否骑缝控件，1 是；0 否 */
  crossPageSeal?: number

  /** 是否控件批量 */
  batch?: boolean

  /**
   * 控件批量 id
   *
   * @description
   *
   * 为应对不支持批量控件的端，需要将批量控件当作多个普通控件处理。
   *
   * 提交时会将批量控件按页面复制多份并指定对应页码，额外复制的控件会填写 `batchId` 以作区分，便于后续标记删除
   *
   * 支持批量控件的端，需要忽略带 `batchId` 控件，不支持的当普通控件处理即可
   */
  batchId?: string

  /**
   * 应用的页面，用于批量和骑缝控件
   * @description
   * - `undefined`: 全部页面
   * - `'ODD'`: 奇数页
   * - `'EVEN'`: 偶数页
   * - `'1, 2, 5-8'`: 指定页（仅批量控件，从 1 开始）
   */
  applyPage?: string

  /**
   * 控件关联 id
   * @description
   * 骑缝、批量控件应用到其它文档时通过 `linkId` 关联
   */
  linkId?: string

  /** 签章控件是否跟随签章图片规格尺寸 */
  followSignSize?: boolean

  /**
   * 签章控件自定义规格时是否保持比例，
   * `followSignSize` 为 `false` 时生效
   */
  keepSignAspect?: boolean

  /** 是否必填 */
  isRequired: boolean

  /** 文本对齐 */
  align?: TextAlign

  /** 文字大小 */
  fontSize?: number

  /** 字体 */
  fontType?: FontFamily

  /** 占位文本 */
  placeholder?: string

  /** 数字是否固定小数位 */
  isDecimalLimit?: boolean

  /** 数字小数位 */
  numberFormat?: number

  /** 数字是否显示千分位 */
  thousands?: boolean

  /** 日期格式 */
  dateFormat?: DateFormat

  /** 单选/复选框组 子项列表 */
  childWidgetList?: FillRadioGroupItem[] | FillCheckboxGroupItem[]

  /** 下拉选择选项 */
  selectOptions?: string[]

  /** 图片名称 */
  imageName?: string

  /** 图片长宽比 */
  aspectRatio?: ImageAspect

  /** 表格控件设置 */
  tableOptions?: Partial<TableOptions>

  /** 表格控件字段 */
  tableFields?: TableField[]

  /** 表格列宽百分比 */
  colWidthPercent?: TableColWidths

  /** 表格插入方式，新表格默认按插入坐标 */
  tableInsertWay?: TableInsertWay.AXIS

  /** 控件数据来源 */
  widgetSource?: WidgetSource

  // eslint-disable-next-line
  [key: string]: any
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

LocateType enum

/** 控件定位方式 */
export enum LocateType {
  /** 中心点 */
  CENTER = 0,

  /** 左上角 */
  LEFT_TOP = 1
}
1
2
3
4
5
6
7
8

WidgetSource enum

/** 控件数据来源 - 枚举  */
export enum WidgetSource {
  /** 认证姓名 */
  CERTIFIED_NAME = 'CERTIFIED_NAME',

  /** 认证身份证 */
  CERTIFIED_ID = 'CERTIFIED_ID',

  /** 认证证件号 */
  CERTIFIED_CREDENTIAL = 'CERTIFIED_CREDENTIAL',

  /** 认证企业名称 */
  CERTIFIED_CORP_NAME = 'CERTIFIED_CORP_NAME',

  /** 统一社会信用代码 */
  CERTIFIED_CORP_USCC = 'CERTIFIED_CORP_USCC'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

WidgetSourceItem interface

/** 控件数据来源项 */
export interface WidgetSourceItem {
  /** 来源名称 */
  name: string

  /** 来源 key */
  key: string | WidgetSource

  /** 来源图标 */
  icon?: string
}
1
2
3
4
5
6
7
8
9
10
11

WidgetSources const

/** 认证图标 */
const IconCertified = 'fa-icon-auth'

/** 控件数据来源 - 列表 */
export const WidgetSources: WidgetSourceItem[] = [
  {
    name: '认证姓名',
    key: WidgetSource.CERTIFIED_NAME,
    icon: IconCertified
  },
  {
    name: '认证身份证',
    key: WidgetSource.CERTIFIED_ID,
    icon: IconCertified
  },
  {
    name: '认证证件号',
    key: WidgetSource.CERTIFIED_CREDENTIAL,
    icon: IconCertified
  },
  {
    name: '认证企业名称',
    key: WidgetSource.CERTIFIED_CORP_NAME,
    icon: IconCertified
  },
  {
    name: '统一社会信用代码',
    key: WidgetSource.CERTIFIED_CORP_USCC,
    icon: IconCertified
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

签署

SignType enum

/** 签章类型: 签名/印章/日期 */
export enum SignType {
  /** 签名 */
  SIGNATURE = 'signature',

  /** 印章 */
  SEAL = 'seal',

  /** 日期 */
  DATE = 'date'
}
1
2
3
4
5
6
7
8
9
10
11

SignData interface

/** 签章数据 */
export interface SignData {
  /** 签章 id */
  id?: string

  /** 签章名称 */
  name?: string

  /** 图片地址 */
  img?: string

  /** 规格说明 */
  specs?: string

  /** 宽 */
  w?: number

  /** 高 */
  h?: number

  /** 自定义类名 */
  className?: string

  /** 标签 */
  tag?: string | TagProps

  /** 是否默认 */
  default?: boolean

  /** 是否禁用 */
  disabled?: boolean

  // eslint-disable-next-line
  [key: string]: any
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

SignState interface

/** 签章状态 */
export interface SignState {
  /** 当前签章是否禁用 */
  disabled: boolean

  /** 当前签章是否可拖拽 */
  draggable: boolean

  /** 当前签章是否选中 */
  selected: boolean

  /** 当前签章是否指定 */
  assigned: boolean
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

DateSign interface

/** 日期章数据 */
export interface DateSign {
  /** 图片地址 */
  img?: string

  /** 字体大小 */
  fontSize: number

  /** 日期格式 */
  dateFormat: DateFormat

  // eslint-disable-next-line
  [key: string]: any
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

TagProps interface

/** 签章标签选项 */
export interface TagProps {
  /** 标签文本内容 */
  text: string

  /** 尺寸 */
  size?: 'medium' | 'small' | 'mini'

  /** 类型，主题色 */
  type?: 'primary' | 'success' | 'info' | 'danger' | 'warning'

  /**
   * 主题
   * - light: 淡色背景，文字主题色，无边框
   * - normal: 浅色背景，文字白色，无边框
   * - dark: 主题色背景，文字白色，无边框
   * - plain: 边框浅色，文字主题色，无背景
   */
  effect?: 'light' | 'normal' | 'dark' | 'plain'

  /** 自定义标签样式 */
  tagClass?: string
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

SignOptions interface

/**
 * 签章配置选项
 * @description 可配置日期章图片地址、日期章全局配置、签章全局切换、签章自定义 class 等
 */
export interface SignOptions {
  /** 签章自定义 class */
  signClassName?: (sign: SignData) => string | void

  /** 签章控件标签 */
  signTag?: (widget: Widget) => string | TagProps | void

  /**
   * 签章选择时的签章标签
   * @description `widget` 存在则为更换控件印章选择，否则为全局选择
   */
  signSelectTag?: (sign: SignData, type: SignType, state: SignState, widget?: Widget) => string | TagProps | void

  /** 是否允许切换签章 */
  signChangeable?: (widget: Widget) => boolean

  /** 签署时是否允许调整签章尺寸，默认为 `false` */
  signResizable?: boolean | ((widget: Widget) => boolean)

  /** 签章是否全局切换 */
  signGlobal?: boolean

  /**
   * 日期章图片地址
   * @description 如果日期章数据 `widget.sign` 未设置 `img`，则可使用该选项统一设置日期章图片地址
   */
  dateSignSrc?: string | ((widget: Widget) => string | void)

  /** 是否开启日期章设置，默认为 `true` */
  dateSignSetting?: boolean | ((widget: Widget) => boolean)

  /** 日期章是否全局配置 */
  dateSignGlobal?: boolean
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

填写

TextData interface

/** 文本控件数据 */
export interface TextData {
  /** 字体大小 */
  fontSize: number

  /** 字体 */
  fontFamily: FontFamily

  /** 对齐方式 */
  textAlign: TextAlign

  /** 最大长度 */
  maxLength?: number

  /** 占位文本 */
  placeholder?: string
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

TextDefault const

/** 文本默认选项 */
export const TextDefault: TextData = {
  fontSize: 16,

  fontFamily: FontFamily.Regular,

  textAlign: TextAlign.LEFT,

  maxLength: 3000,

  placeholder: ''
}
1
2
3
4
5
6
7
8
9
10
11
12

FontFamily enum

/** 文本框字体 */
export enum FontFamily {
  /** 宋体 */
  Song = 0,

  /** 仿宋 */
  FangSong = 1,

  /** 黑体 */
  Bold = 2,

  /** 楷体 */
  Regular = 3,

  Arial = 6
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

TextAlign enum

/** 文本对齐 */
export enum TextAlign {
  /** 左对齐 */
  LEFT = 'left',
  /** 居中 */
  CENTER = 'center',
  /** 右对齐 */
  RIGHT = 'right'
}
1
2
3
4
5
6
7
8
9

DateFormat enum

/** 日期格式 */
export enum DateFormat {
  /** YYYY年MM月DD日 */
  LOCAL = 0,

  /** YYYY-MM-DD */
  HYPHEN = 1,

  /** YYYY/MM/DD */
  SLASH = 2
}
1
2
3
4
5
6
7
8
9
10
11

CheckOption class

/** 单、多选控件选项 */
export default class CheckOption extends WidgetBox {
  constructor(raw: Partial<CheckOption>) {
    super()

    const data = normalizeModel(raw) as typeof raw

    Object.assign(this, data)
  }

  /** 组件唯一 key */
  key = createId()

  /** 选项文本 */
  label = ''

  /** 是否勾选 */
  value = false

  /** 宽度 */
  w = config.checkOption.width

  /** 高度 */
  h = config.checkOption.height

  /** 单选按钮展示类型 */
  type?: FillRadioType
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

AttachmentData interface

/** 附件控件数据 */
export interface AttachmentData {
  /** 文件名称 */
  fileName: string

  /** 接受上传的文件类型 */
  accept: string

  /** 是否上传中 loading */
  loading: boolean

  /** 上传进度 */
  progress: number
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

ImageData interface

/** 图片控件数据 */
export interface ImageData {
  /** 图片地址 */
  src: string

  /** 图片名称 */
  name: string

  /** 图片比例 */
  aspect: ImageAspect

  /** 接受上传的图片类型 */
  accept: string

  /** 是否上传中 loading */
  loading: boolean

  /** 上传进度 */
  progress: number
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

ImageAspect enum

/** 图片宽高比 */
export enum ImageAspect {
  /** 不限 */
  NONE = '',

  /** 1:1 */
  RATIO_1_1 = '1:1',

  /** 3:2 */
  RATIO_3_2 = '3:2',

  /** 4:3 */
  RATIO_4_3 = '4:3',

  /** 16:9 */
  RATIO_16_9 = '16:9',

  /** 2:3 */
  RATIO_2_3 = '2:3',

  /** 3:4 */
  RATIO_3_4 = '3:4',

  /** 9:16 */
  RATIO_9_16 = '9:16'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

TableOptions interface

/** 表格控件选项 */
export interface TableOptions {
  /** 行数，不包含表头和动态添加的行 */
  rows: number

  /** 列数，不包含表头 */
  cols: number

  /** 表格行高 */
  rowHeight: number

  /** 表格默认列宽 */
  colWidthDefault: number

  /** 表头宽度，仅适用纵向表格 */
  headerWidth: number

  /** 表头高度，仅适用横向表格 */
  headerHeight: number

  /** 表头位置 */
  headerPosition: TableHeaderPosition

  /** 隐藏表头 */
  headerHidden: boolean

  /**
   * 是否动态表格
   * 动态时允许填写时新增数据条目
   * 表头位置为 TableHeaderPosition.LEFT 时无法设置为动态
   */
  dynamic: boolean

  /** 必填数量 */
  requiredCount: number
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

TableDefault const

/** 表格控件默认选项 */
export const TableDefault: TableOptions = {
  rows: 3,

  cols: 3,

  rowHeight: 32,

  colWidthDefault: 100,

  headerWidth: 100,

  headerHeight: 32,

  headerPosition: TableHeaderPosition.TOP,

  headerHidden: false,

  dynamic: false,

  requiredCount: 1
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

TableField interface

/** 表格控件字段 */
export interface TableField {
  /** 表头标题 */
  label: string

  /** 填写占位文本 */
  placeholder: string

  /** 字段是否必填 */
  required: boolean

  /** 字段 id */
  id?: string

  /** 字段宽度，表头顶部时起作用 */
  width?: number
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

TableItem interface

/** 表格控件数据项 */
export interface TableItem {
  /** 纵向表格时列宽 */
  width?: number

  /** 对应字段的值，为 string */
  [fieldId: string]: string | number | undefined
}
1
2
3
4
5
6
7
8

TableHeaderPosition enum

/** 表头位置 */
export enum TableHeaderPosition {
  /** 头部，默认 */
  TOP = 0,

  /** 左侧 */
  LEFT = 1
}
1
2
3
4
5
6
7
8

TableInsertWay enum

/** 表格插入方式，后端切图配置 */
export enum TableInsertWay {
  /** 新建页面添加 Table */
  Page = 0,

  /** 在某个坐标后面添加 Table */
  AXIS = 2
}
1
2
3
4
5
6
7
8