新增表单
# 前端项目
# 1.打开api/form/data.ts
在相应的类别下创建表单属性
{
name: "单行文本",
type: "Input",
typeName: "单行文本",
icon: "EditPen",
placeholder: "请填写",
required: false,
printable: true,
props: {
value: "",
regex: "",
regexDesc: "",
minLength:undefined,
maxLength:undefined
},
dynamicForm:[
{
id: 'value', name: '值'
}, {
id: 'minLength', name: '最小长度'
}, {
id: 'maxLength', name: '最大长度'
}, {
id: 'perm', name: '表单权限'
}, {
id: 'required', name: '是否必填'
}
]
}
表名 | 含义 | 备注 |
---|---|---|
name | 表单名称 | |
type | 表单类型 | |
typeName | 表单类型显示名称 | |
icon | 表单图标 | 参考ElementPlus的ICON |
placeholder | 表单提示 | |
required | 是否必填 | |
printable | 是否可打印 | |
props | 表单属性 | |
value | 表单值 | 这个是必须的 ,其他自定义 |
dynamicForm | 动态表单 | |
id | 可以改变的属性key | value:值, minLength:最小长度,maxLength:最大长度,perm:表单权限,required:是否必填,min:最小值,max:最大值,radixNum:小数位数 |
name | 可以改变的属性名称 |
- 新增表单页面
comonents/form/A.vue
,此处A
需要和上述的type
一致
<template v-if="mode==='D'">
<design-default-form :form="form"></design-default-form>
</template>
<el-input v-else
v-model="form.props.value"
:disabled="form.perm === 'R'"
:placeholder="form.placeholder"
/>
第一个判断(D)是设计页面,第二个判断是编辑页面
let props = defineProps({
mode: {
type: String,
default: 'D'
},
form: {
type: Object, default: () => {
}
}
});
默认所有的表单都有此处属性传递
添加发起、待办的表单校验规则:getValidateRule
新增表单页面
comonents/form/config/A.vue
,此处A
需要和上述的type
一致 此处用来配置表单的具体属性,例如默认值
、最小值
等打开
formValidate.ts
配置新增修改表单的验证规则如果该表单不能当做分支条件 打开
components/drawer/components/condition.vue
,新增一个排除
let $deepCopy = util.deepCopy(fList.filter(res =>
res.type != 'SelectMultiUser' &&
res.type != 'SelectMultiDept' &&
res.type != 'Description' &&
// res.type != 'MultiSelect' &&
res.type != 'Signature' &&
res.type != 'RelatedProcess' &&
res.type != 'Layout' &&
res.type != 'UploadImage' &&
res.type != 'UploadFile'
));
如果该表单能当做分支条件
打开
components/drawer/components/condition.vue
,随便找到一个是分支条件的内容,根据配置模仿处理如果该表单需要单独处理报表显示(例如多选、用户等),打开
components/flow/flowData.vue
,添加对应的表单来处理
# 后端项目
- 如果在创建表单时有额外添加的配置,打开
FormItemVO.java
添加字段 - 打开
FormTypeEnum.java
添加表单类型 - 新增表单配置:
biz
:com.cxygzl.biz.form.impl
- 如果表单当做条件,新增条件配置:
core
:com.cxygzl.core.expression.condition.impl