全代码框架文档
首页
快速上手
前端组件
前端二开
首页
快速上手
前端组件
前端二开
  • 二开前准备
  • 对接移动办公
  • 表单介绍

    • 表单封装逻辑
    • 传值和formModel
    • 组件的封装
    • 显示隐藏控制
    • 字段事件
  • 基础二开

    • 值计算
    • 修改组件值
    • 自定义校验
    • 使用远程数据源
    • 为工具栏添加按钮
    • 为表单添加新字段
  • 高级二开

    • 自定义字段
    • 自定义页面
    • 弹窗
    • 表单
    • 表格

为表单添加新字段

添加新字段有两种方式,一种是重新生成代码,另一种是直接修改代码。如果已经修改表单生成的源码很多次,建议直接修改代码。

这里仅提供修改代码添加表单的方式,步骤如下:

  1. 在config.ts文件中,找到formProps对象,按照格式在其中添加新的字段,其中key值与field值必须与其他项不同,均为唯一项。
{
      key: '9e85022cc6ba44bdb8312bca957cad0a1',
      field: 'auditContentId',
      label: '关联内容ID',
      type: 'input',
      component: 'Input',
      colProps: { span: 24 },
      defaultValue: '',
      componentProps: {
        width: '100%',
        span: '',
        defaultValue: '',
        labelWidthMode: 'fix',
        labelFixWidth: 120,
        responsive: true,
        respNewRow: false,
        placeholder: '请输入问题定性',
        prefix: '',
        suffix: '',
        addonBefore: '',
        addonAfter: '',
        disabled: false,
        allowClear: false,
        showLabel: true,
        required: false,
        rules: [],
        events: {},
        isSave: false,
        isShow: true,
        scan: false,
        style: { width: '100%' },
      },
},
  1. 在CustomDevForm.vue文件中,添加新的formItem项,注意修改key值与config中相同。格式如下
    <Col v-if="getIfShow2('e6a64e2b22c049e1abb65804b565d759')" v-show="getIsShow2('e6a64e2b22c049e1abb65804b565d759')" :span="getColWidth(schemaMap['e6a64e2b22c049e1abb65804b565d759'])">
        <template v-if="showComponent(schemaMap['e6a64e2b22c049e1abb65804b565d759'])">
            <SimpleFormItem v-model:value="formModel[schemaMap['e6a64e2b22c049e1abb65804b565d759'].field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schemaMap['e6a64e2b22c049e1abb65804b565d759']" />
        </template>
    </Col>
  1. 在代码生成的workflowPermission.ts文件中,添加新的字段权限。格式如下:
{
    required: true,
    view: true,
    edit: true,
    disabled: false,
    isSaveTable: false,
    tableName: '',
    fieldName: '问题定性',
    fieldId: 'problemQualitative',
    isSubTable: false,
    showChildren: true,
    type: 'input',
    key: 'xxxxx',
    children: [],
},

注意key值和fieldId值必须与config.ts文件中相同。

  1. 在系统管理的工作流程模块的流程设计页面中,找到对应要修改的流程编辑,在弹窗中点击更新表单 流程编辑 更新成功点击确定。需要注意的是每个流程节点都需要修改字段的权限,字段初始的默认权限是查看编辑并必填。当设置成功后点击右上角保存模版即可。

需要注意的是,添加新字段后,需要重新创建流程才会生效,旧流程会遵循历史的权限。

Last Updated:: 4/10/25, 11:56 AM
Contributors: DESKTOP-45LLIKH\11405
Prev
为工具栏添加按钮