diff --git a/docs/dev_readme.md b/docs/dev_readme.md index 46b8d35..9a6d128 100644 --- a/docs/dev_readme.md +++ b/docs/dev_readme.md @@ -15,6 +15,25 @@ ### 为什么表单所有字段都成了必填 默认情况下,绑定流程后,新建节点的所有字段都被设置为必填,需要在流程的开始节点-表单设置中去掉非必填的项。 +### 如何在提交时也提交隐藏字段的值 +修改Form.vue里的validate方法,将最后的values改为 +```javascript +async function validate() { + let values = []; + try { + values = await systemFormRef.value?.validate(); + // 省略的代码 + } finally { + } + return systemFormRef.value?.getFieldsValue(); +} +``` +原理是validate方法在校验的同时,会返回**校验成功**字段的值,对于隐藏字段,因为跳过了校验,所以值也不会返回。而getFieldsValue方法会返回整个formModel。 + +### 为什么我的页面绑定流程后也没有相关按钮 +- 如果是可以重做,需要用**代码模版**(界面优先和数据优先都可以),而不是代码生成。 +- 需要排查菜单接口有没有返回流程定义ID,即system/menu/tree接口,对应菜单项里必须有schemaId这项 + ### 表单设计和代码模版有什么区别 代码模版生成的本地文件有二开支持,表单符合UI规范,表单设计可以在线发布,像低开一样,不用写代码,但是界面不符合UI规范。 diff --git a/docs/表单二开/7_自定义校验.md b/docs/表单二开/7_自定义校验.md new file mode 100644 index 0000000..bd636a0 --- /dev/null +++ b/docs/表单二开/7_自定义校验.md @@ -0,0 +1,42 @@ +## 如何实现表单自定义校验 + +下面的例子介绍如何为字段增加自定义校验,校验的条件是两个文本框内的数字之和必须大于100。任何多字段的校验都可以参照此进行,日期时间可以借助dayjs库比较。 + +首先,在config.ts里加入设置表单用的函数,以便我们在自定义校验中可以拿到全部表单的值。 +```javascript +let formRef = null; +export function setFormRef(ref) { + formRef = ref; +} +``` +然后再Form.vue中,将表单的引用传到config.ts里 +```javascript +// setFormRef要引入进来 +import { formProps, formEventConfigs, setFormRef } from './config'; + +const systemFormRef = ref(); +setFormRef(systemFormRef); //新加的 +``` + +最后就可以编写校验规则的代码,找到需要触发校验的字段,在rules里增加自定义规则。 + +validator可以是异步函数,因此通过接口验证也可以。默认参数为_rule: Rule, value: string,如果是单值校验可以不引入表单引用,直接在校验器拿值。 +```javascript +{ + rules: [{ + validator: async function() { + const formValues = formRef.value.getFieldsValue(); + const val1 = formValues.zhaGe15916; + const val2 = formValues.zhaGe22645; + if (!val1 || !val2) { + return Promise.resolve(); // 这里需要搭配必填校验 + } + if ((+val1) + (+val2) != 100) { + return Promise.reject('两数之和必须为100'); + } + return Promise.resolve(); + }, + trigger: 'blur' + }] +} +```