Form 对象
由 0x400 发布于
`form` 对象用于操作流程表单或内容管理表单,提供数据处理、流程控制、UI 交互等功能。可通过 `this.form` 在表单脚本中访问。
## **二、核心属性**
### **1. 表单状态**
- **`readonly`**
描述:表单是否为只读状态(前端脚本只读)。
示例:
```javascript
const isReadonly = this.form.readonly;
```
- **`currentRouteName`**
描述:用户提交时选择的路由名称(仅流程表单)。
示例:
```javascript
const routeName = this.form.currentRouteName;
```
- **`opinion`**
描述:用户提交时输入的意见(仅流程表单)。
示例:
```javascript
const comment = this.form.opinion;
```
## **三、核心方法**
### **1. 表单组件操作**
#### **`get(name, subformName)`**
- **描述**:获取表单组件(支持子表单)。
- **参数**:
- `name`:组件标识(必填)。
- `subformName`:子表单标识(可选)。
- **示例**:
```javascript
const subjectField = this.form.get("subject"); // 获取主表单组件
const subformDiv = this.form.get("div", "subform1"); // 获取子表单组件
```
#### **`getData()`**
- **描述**:获取表单绑定的业务数据。
- **示例**:
```javascript
const formData = this.form.getData();
```
### **2. 数据操作**
#### **`save(callback, silent)`**
- **描述**:保存业务数据(触发 `beforeSave` 和 `afterSave` 事件)。
- **参数**:
- `callback`:保存成功后的回调函数(可选)。
- `silent`:是否静默保存(默认 `false`)。
- **示例**:
```javascript
this.form.save(() => {
this.form.notice("保存成功", "success");
}, true); // 静默保存
```
### **3. 流程控制(仅流程表单)**
#### **`process(option)`**
- **描述**:提交流程实例。
- **参数**:
```javascript
{
routeName: "送审", // 路由名称
opinion: "同意", // 意见
callback: (json) => {} // 回调函数
}
```
- **示例**:
```javascript
this.form.process({
routeName: "审批通过",
opinion: "请领导审批",
callback: (json) => {
if (json) this.form.close();
}
});
```
#### **`retract(option)`**
- **描述**:撤回流程(需权限)。
- **参数**:
```javascript
{
success: () => {}, // 成功回调
failure: (error) => {} // 失败回调
}
```
### **4. UI 交互**
#### **`notice(content, type, target, where, offset, option)`**
- **描述**:显示提示信息。
- **参数**:
- `content`:提示文本(必填)。
- `type`:类型(`success`/`info`/`error`/`warn`,可选)。
- **示例**:
```javascript
this.form.notice("操作成功", "success");
```
#### **`dialog(options)`**
- **描述**:弹出自定义对话框。
- **参数**:
```javascript
{
title: "确认",
width: 400,
height: 200,
html: "<div>内容</div>",
buttonList: [{ text: "确定", action: () => {} }]
}
```
- **示例**:
```javascript
const dialog = this.form.dialog({
title: "提示",
html: "是否继续?",
ok: () => { /* 确定逻辑 */ }
});
```
### **5. 高级功能**
#### **`selectOrg(container, options)`**
- **描述**:弹出人员组织选择器。
- **参数**:
```javascript
{
type: "person", // 选择类型(person/identity/unit/group)
units: ["开发部"], // 可选组织范围
onComplete: (items) => {} // 选中回调
}
```
- **示例**:
```javascript
this.form.selectOrg(null, {
type: "person",
onComplete: (selected) => {
const users = selected.map(item => item.data);
}
});
```
#### **`startProcess(app, process, data, identity, callback)`**
- **描述**:启动新流程实例。
- **参数**:
- `app`:流程应用名称/ID(可选)。
- `process`:流程名称/ID(可选)。
- `data`:初始化业务数据(可选)。
- **示例**:
```javascript
this.form.startProcess("公文管理", "发文流程", { title: "通知" }, "张三@I");
```
## **四、完整方法列表**
### **1. 表单控制**
- **`publish(callback)`**
描述:发布文档(仅内容管理)。
参数:`callback` 为发布后的回调函数。
- **`close()`**
描述:关闭当前表单。
### **2. 流程操作**
- **`pauseTask()`**
描述:挂起当前待办(需权限)。
- **`resumeTask()`**
描述:恢复挂起的待办(需权限)。
### **3. 对话框与提示**
- **`alert(type, title, text, width, height)`**
描述:弹出信息提示框。
参数:`type` 为类型,`text` 为内容。
### **4. 导航与打开功能**
- **`openWork(workId, title, options)`**
描述:打开流程实例(在流转或已完成)。
参数:`options` 包含 `readonly` 等配置。
## **五、示例代码**
### **1. 获取并设置组件值**
```javascript
// 获取文本输入框组件并设置值
const subjectField = this.form.get("subject");
subjectField.setValue("新标题");
// 获取子表单中的组件
const subformDiv = this.form.get("div", "subform1");
subformDiv.setStyle("background", "#f0f0f0");
```
### **2. 提交流程并处理回调**
```javascript
this.form.process({
routeName: "审批通过",
opinion: "同意",
callback: (json) => {
if (json) {
this.form.notice("流转成功", "success");
this.form.close();
}
}
});
```
## **六、注意事项**
1. **事件触发**:`process`、`save` 等方法会触发 `beforeSave`、`afterProcess` 等事件,避免在事件处理中调用。
2. **权限控制**:使用流程相关方法前需通过 `this.workContext.getControl()` 检查权限。
3. **移动端支持**:部分方法(如 `openWindow`)在移动端和桌面端表现可能不同。
**提示**:更多组件操作和事件请参考 `FormComponent` 文档。
评论