PC表单

zcForm

表单组件实例，可访问表单数据等关键内容

属性

formDomId

表单HTML元素ID

formData

表单数据

// 此案例在表单的onInited中调用
return async function ({ zcFormHelper, formData, extParams }) {
    // 设置表单中主表reason字段的值
    this.formData.aaa.delivery_m[0].reason = "Hello World";
    // 获取表单中主表reason字段的值
    let reason = this.formData.aaa.delivery_m[0].reason
    console.log("reason -> ", this.formData.aaa.delivery_m[0].reason)
}

formTables

表单中使用的数据表

formMethods

表单扩展方法

// 调用扩展方法中的demo1方法
formMethods.demo1();

formAxiosInst

表单Axios实例

// 调用自定义服务中的demo接口
formAxiosInst.get('/custom/demo').then(res => {
    console.log(res)
})

数据行

appendRow()

为指定明细表添加行

// 为数据源 aaa 的 delivery_t 明细表添加一行数据
appendRow("aaa", "delivery_t", null, {
    // 字段值
    pro_code: "1001",
});

// 为数据源 aaa 的 delivery_t 明细表添加多行数据
appendRowsAsync("aaa", "delivery_t", null, [
    {pro_code: "1001" },
    {pro_code: "1002" },
])

updateRow()

为指定明细表更新行

// 更新数据源 aaa 的 delivery_t 明细表的指定行数据，注意传递的需要是行的Guid，而非行号
// updateRow(ds, table, rowGuid, data)
updateRow("aaa", "delivery_t", this.zcRowGuid, { pro_code: "1001" });

removeRow()

从指定明细表移除行

// 删除数据源 aaa 的 delivery_t 明细表的指定行数据，注意传递的需要是行的Guid，而非行号
// removeRow(ds, table, rowGuid)
removeRow("aaa", "delivery_t", this.zcRowGuid);

clearRows()

为指定明细表清空行

// 清除 aaa 数据源中 delivery_t 明细表的所有行
// clearRows(ds, table)
clearRows("aaa", "delivery_t");

数据映射

mapData()

映射数据

mapOptionData()

映射选项数据

其它

validateForm()

校验表单

// 直接调用此方法即可，会触发校验当前表单中的校验规则
validateForm();

getFormCompSchema()

获取表单组件Schema，一般情况下在onParseLogic生命周期中调用，一般用于动态的修改表单组件

return function ({ zcFormHelper, formData, extParams }) {
    let schema = zcFormHelper.form.getFormCompSchema("33164c635f")
    schema.attrs.placeholder = "ssssss"
}

getFormCompRef()

获取表单组件实例

// 获取指定组件的实例，33164c635f代表组件的ID
let comp = zcFormHelper.form.getFormCompRef("33164c635f")

zcFormHelper

表单帮助类，常见于组件事件或生命周期方法参数中，用于辅助访问表单数据或调用表单组件API

表单

form.formData

表单数据，可以对表单数据进行修改

注意，对明细表进行操作时，需要使用 updateRow、appendRow、removeRow等方法，不要直接修改formData

// 取主表数据并进行修改
zcFormHelper.form.formData.aaa.delivery_m[0].reason = "Hello World"
// 取明细表第0行数据并进行修改，delivery_t[0]代表明细表的第0行，注意行号从0开始
zcFormHelper.form.formData.aaa.delivery_t[0].pro_code = "1001"

form.formCompRefs

表单组件实例集合

// 可以获取当前表单中的所有组件实例，一般推荐直接通过getFormCompRef方法获取
zcFormHelper.form.formCompRefs

form.formAxios

表单Axios实例，用于发起Http请求

// 发起一个Get请求，调用自定义服务的/custom/demo接口
zcFormHelper.form.formAxios.get('/custom/demo').then(res => {
    // res 即是服务返回的数据
    console.log(res)
})

form.formMethods

表单扩展方法集合

// 调用扩展方法中的demo1方法
zcFormHelper.form.formMethods.demo1()

form.extParams

表单扩展参数

let field = zcFormHelper.form.extParams.test_field
console.log(field)

form.getFormCompSchema()

获取表单组件Schema，用于搭配表单的onParseLogin生命周期，动态的修改表单组件

// 获取指定组件的Schema
let schema = zcFormHelper.form.getFormCompSchema("33164c635f")
// 修改组件的属性
schema.attrs.placeholder = "hello"

form.getFormCompRef()

获取表单组件实例

// 获取指定组件的Schema
let schema = zcFormHelper.form.getFormCompSchema("33164c635f")
// 修改组件的属性
schema.attrs.placeholder = "hello"

自定义监听

customListener.add()

添加自定义监听器，类似于 Vue 中的 watch

// 监听对象
let target = function () {
    // 返回需要监听的数据，此处返回了明细表，相当于明细表发生改变，就会触发监听处理
    return zcFormHelper.form.formData.aaa.delivery_t
};
// 监听处理
let handler = function (data) {
    // 这部分代码会在目标改变时触发
    console.log("----", data)
};
// 监听设置
let options = {
    // 绑定时触发
    immediate: false,
    // 是否深度监听
    deep: true
};
// 添加自定义监听器
zcFormHelper.customListener.add(target, handler, options);

customListener.remove()

移除自定义监听器

// 监听对象
let target = function () {
    return zcFormHelper.form.formData.aaa.delivery_t
};
// 监听处理
let handler = function (row) {
    console.log("----", row)
};
// 监听设置
let options = {
    immediate: true
};
// 添加自定义监听器时，会返回一个Object，其中的id即是监听的标识
let id = zcFormHelper.customListener.add(target, handler, options).id;
// 通过获取的id，移除自定义监听器
zcFormHelper.customListener.remove(id);

工具方法

utils.newUUID()

生成16位UUID

let uuid = zcFormHelper.utils.newUUID()

utils.getUrlParams()

获取URL参数

utils.parseFormTable()

解析数据表字符串

utils.parseDatabind()

解析数据绑定字符串

utils.formPost()

以Post方式打开链接

utils.generateRowNumbers()

以行号覆盖指定字段

zcFormElement

属性

label

组件标签文字

// 获取组件
let comp = zcFormHelper.form.getFormCompRef("33164c635f")
// 修改组件标签内容
comp.label = "新标签内容"

zcCompId

组件ID

zcDatabindModel

数据绑定模型

zcRowGuidValue

所在数据行标识

zcRowIndex

所在数据行索引

zcCompReadonly

组件是否为只读状态

let comp = zcFormHelper.form.getFormCompRef("33164c635f")
// 获取组件是否为只读状态
let isReadonly = comp.zcCompReadonly

zcCompHidden

组件是否为隐藏状态

let comp = zcFormHelper.form.getFormCompRef("33164c635f")
// 获取组件是否为隐藏状态
let isHidden = comp.zcCompHidden

方法

mapData()

映射数据