项目详情配置

项目详情配置主要用于配置项目详情页显示的模块

可根据实际分类情况，可以自定义创建不同的项目详情模板

展示

配置展示

效果展示

配置说明

主要分为三部分，配置的先后顺序为最终呈现的先后顺序

config
```
"config":{
  "enable_share":true
}
```

main_col

对应中间主体内容

type对应关系

type	对应的组件	使用方向	编辑或其它操作
project-info	ProjectInfo	展示基本信息
meta-form	MetaForm	项目信息
finance	Finance	财务信息
project-list	ProjectList	发票申请	发起流程
customer-binding	CustomerBinding	客户绑定情况	生成绑定码
comment-list	CommentList	评论	发布评论

代码:

{
  "type":"project-info",    // 类型
  "title":"基本信息",    // 标题
  "config":{   // 具体config配置详见对应的示例代码
  }
}

side_col 对应侧边目录

type对应关系如下：

type	对应组件	使用方向	编辑或其它操作
step-log	StepLog	流程日志	环节上的操作
attachment-list	AttachmentList	附件	点击查看附件
CustomFormList	CustomFormList	表单
project-list	ProjectList	子流程	发起子流程

代码：

{
  "type":"project-list",  // 类型
  "title":"子流程", // 标题
  "config":{    // 具体config配置详见对应的示例代码
      "flow_key":""
  }
}

示例代码

{
  "config":{
    "enable_share":true
  },
  "main_col":[
    {
      "type":"project-info",
      "title":"基本信息",
      "config":{  
        // "showProjectMsgBtn": false   //  是否显示查看详情按钮
      }
    },
    {
      "type":"meta-form",
      "title":"项目信息",
      "config":{   // 不用配置
      }
    },
    {
      "type":"finance",
      "title":"财务信息",
      "permission":"finance.list",
      "config":{   // 不用配置
      }
    },
    {
      "type":"project-list",
      "title":"发票申请",
      "config":{
        "flow_key":"flow233810562", // 环节key值
        "btn_text":"发起申请",     // 按钮文本
        "format":"table",     // 展示类型，以表格的形式
        "template_id":"672890427"  // 模板id
      }
    },
    {
      "type":"project-list",
      "title":"子业务项目",
      "config":{
        "flow_key":"flow744083397",   // 环节key值
        "btn_text":"创建项目",    // 按钮文本
        "format":"table",    //  展示类型，以表格的形式
        "template_id":""   // 模板id
      } 
    },
    {
      "type":"customer-binding",
      "title":"客户绑定情况",
      "config":{    // 无
        "fields":{
        }
      }
    },
    {
      "type":"delay-reason",
      "title":"逾期原因",
      "config":{
        "fields":{    
          "flowKey":"flow553651588",
          // "btn_text":"xxxx",   // 按钮文本
          // "table_template":"xxxx",   // table模板
        }
      }
    },
    {
      "type":"comment-list",
      "title":"评论",
      "config":{     // 无
      }
    }],
  "side_col":[
    {
      "type":"step-log",
      "title":"流程日志",
      "config":{
        "fields":{
          // "showEdit": false, // 是否显示编辑按钮
          // "showEnterStep" // 是否显示进行下一步按钮
        }
      }
    },
    {
      "type":"attachment-list",
      "title":"附件",
      "config":{    // 无
        "fields":{
        }
      }
    },
    {
      "title":"表单",
      "type":"CustomFormList",
      "config":{  // 无
      }
    },
    {
      "type":"project-list",
      "title":"子流程",
      "config":{
        "flow_key":""    // 如上 "type": "project-list"
      }
    }]
}

模块配置说明

编辑操作显隐总规则

详情页中的“编辑”“保存”“进入环节”等操作，不只由模板里某一个字段决定。页面会先读取详情模板中每个模块的 type 和 config，再结合当前用户权限、项目状态、当前环节状态以及模块自己的只读配置，最终决定按钮是否显示。

可以按下面顺序理解：

模板中必须配置了对应模块。没有配置模块时，页面不会显示该模块，也就不会显示模块里的操作按钮。
模块本身不能是只读状态。例如 readonly: true 会让表单模块只展示内容，不显示编辑入口。
当前用户必须具备对应权限。比如项目基本信息和项目表单会检查项目创建后编辑权限，财务模块会检查财务相关权限。
项目或环节状态必须允许操作。已完成、历史环节、预览态等场景下，部分按钮会被隐藏。
editonly 表示“直接进入编辑模式”。它通常用于抽屉或内嵌编辑场景，此时内容处于可编辑状态，但外层的“编辑/保存/取消”按钮可能不显示，由父组件统一保存。

因此，模板配置里的 showEdit: false、readonly: true 这类字段可以主动隐藏操作；但配置为 true 只代表“允许显示”，最终是否出现还要看权限和运行时状态。

项目基本信息 `ProjectInfo`

功能说明：展示和编辑项目的基本信息,包括项目名称、负责人、说明、开始时间、计划完成时间等。支持根据角色和环节控制编辑权限。

编辑按钮显示逻辑

项目基本信息模块中的“修改”按钮，需要同时满足以下条件才会显示：

当前模块允许编辑，即 editable 不是 false。
当前模块不是 editonly 模式。
当前用户具备项目创建后编辑权限，或具备“管理我创建的项目”权限且是项目负责人。
项目处在特殊退回开始节点时，项目负责人也可以编辑。

parentEditable 适合父级组件统一控制编辑态时使用。普通详情页配置中，如果只是想控制这个模块是否允许编辑，优先使用 editable 和权限配置，不建议只依赖前端隐藏按钮来替代权限控制。

参数：

参数名	数据类型	说明
showProjectMsgBtn	Boolean	是否显示查看更多按钮
canEditUserRolesKey	Array	可编辑的用户角色key
canEditStepIdAfter	Array	可编辑的环节ID(之后)
canEditUserIdsAfter	Array	可编辑的用户ID(之后)
canEditStepIdBefore	Array	可编辑的环节ID(之前)
canEditUserIdsBefore	Array	可编辑的用户ID(之前)
editable	Boolean	是否可编辑
editonly	Boolean	是否仅编辑模式
parentEditable	Boolean	父组件是否可编辑

示例：

{
    "type": "project-info",
    "title": "基本信息",
    "config": {
        "showProjectMsgBtn": true,
        "canEditUserRolesKey": ["admin"],
        "canEditStepIdAfter": ["1", "2"],
        "canEditUserIdsAfter": ["1", "2"],
        "canEditStepIdBefore": ["3", "4"],
        "canEditUserIdsBefore": ["3", "4"],
        "editable": true,
        "editonly": false,
        "parentEditable": true
    }
}

项目列表（子流程项目列表）`ProjectList`

功能说明：展示项目关联的子流程项目列表。支持表格和列表两种展示模式,可配置是否显示创建按钮、筛选功能等。

参数：

参数名	数据类型	说明
mode	String	normal(默认)或project(项目页模式，有更多的功能，使用ES数据源)
flow_type	String	流程type
flow_key	String	子流程key
btn_text	String	按钮文案
disable_add	Boolean	隐藏normal模式的添加按钮
format	String	如果值为table，则以列表模式展示
template_id	String	要使用的模板ID
growY	Boolean	是否自适应高度
table_template	Object	表格模板配置

mode为project参数：

参数名	数据类型	说明
disableSearch	Boolean	隐藏筛选功能
disableCreate	Boolean	隐藏创建功能
disableFilter	Boolean	隐藏功能条
emptyText	String	空白时的文案
query	Object	查询逻辑，见示例

示例：

{
    "type": "project-list",
    "title": "子流程",
    "config": {
        "mode": "normal",
        "flow_key": "",
        "flow_type":"flow727052674",
        "disableSearch":true,
        "disableCreate":true,
        "disableFilter":false,
        "emptyText":"暂无记录",
        "growY": true,
        "query":{
            "__p_id":{
                "value":{
                    "$template":"ctx.$route.params.id",
                    "eval":true
                },
                "type":"term"
            }
        }
    }
}

项目日志 `StepLog`

功能说明：展示项目各环节的执行日志,包括环节状态、处理人、处理时间等信息。可配置是否显示编辑和进入环节按钮。

操作按钮显示逻辑

showEdit 控制环节日志中的负责人编辑入口，showEnterStep 控制进入环节处理页的入口。两个字段默认都是显示；如果要在详情页隐藏对应操作，需要显式配置为 false。

需要注意的是，showEdit: true 只是允许显示编辑入口。实际页面还会继续判断当前环节是不是历史环节、环节是否已经失败或结束、当前用户是否是管理员或环节负责人，以及当前流程是否允许编辑环节负责人。任一条件不满足时，按钮仍然不会显示。

参数：

参数名	数据类型	说明
showEdit	Boolean	是否显示编辑按钮
showEnterStep	Boolean	是否显示进入环节按钮
isLoading	Boolean	是否加载中

示例：

{
    "type": "step-log",
    "title": "项目日志",
    "config": {
        "showEdit": true,
        "showEnterStep": true,
        "isLoading": false
    }
}

项目表单信息 `MetaForm`

功能说明：展示和编辑项目的自定义表单信息。支持只读模式和编辑模式,可用于收集项目相关的结构化数据。

编辑按钮显示逻辑

项目表单模块中的“修改”按钮，需要同时满足以下条件才会显示：

readonly 不是 true。
当前模块不是 editonly 模式。
当前用户具备项目创建后编辑权限，或具备“管理我创建的项目”权限且是项目负责人。
项目处在退回开始节点或撤回节点时，项目负责人也可以编辑。

如果配置 editonly: true，模块会直接进入编辑态，常用于列表操作列打开的编辑抽屉。这种模式下外层详情页不会显示独立的“修改/保存/取消”按钮，保存动作通常由父组件统一触发。

参数：

参数名	数据类型	说明
readonly	Boolean	是否只读
editonly	Boolean	是否仅编辑模式

示例：

{
    "type": "meta-form",
    "title": "项目表单信息",
    "config": {
        "readonly": false,
        "editonly": false
    }
}

项目表单信息 `StepForm`

功能说明：展示指定环节的表单信息。用于查看环节处理过程中填写的表单数据。

参数：

参数名	数据类型	说明
flow_step_id	String	环节ID

示例：

{
    "type": "step-form",
    "title": "环节表单信息",
    "config": {
        "flow_step_id": ""
    }
}

财务模块 `Finance`

功能说明：管理项目相关的财务信息,包括合同金额、收款记录、支出记录等。支持根据角色和环节控制编辑权限。

编辑按钮显示逻辑

财务模块的操作入口分为几类：创建财务信息、修改财务信息、添加到账记录等。它们会共同受到以下条件影响：

用户必须能查看财务模块，即具备财务查看权限。
创建财务信息需要具备财务创建权限，并且当前还没有合同金额。
修改财务信息需要具备财务编辑权限；如果只具备“编辑我负责/我创建项目的财务信息”一类权限，还需要是项目负责人。
详情页不能处于预览态。
如果配置了 canEditStepIdAfter、canEditUserIdsAfter、canEditStepIdBefore、canEditUserIdsBefore，还会按指定环节是否已完成以及当前用户是否在允许名单中继续判断。

这组参数适合表达“某个环节之前/之后，只有指定人员或指定角色可以编辑财务”的规则。角色配置 canEditUserRolesKey 优先级更高，命中角色后可直接通过这组模块内的编辑判断。

参数：

参数名	数据类型	说明
canEditUserRolesKey	Array	可编辑的用户角色key
canEditStepIdAfter	Array	可编辑的环节ID(之后)
canEditUserIdsAfter	Array	可编辑的用户ID(之后)
canEditStepIdBefore	Array	可编辑的环节ID(之前)
canEditUserIdsBefore	Array	可编辑的用户ID(之前)

示例：

{
    "type": "finance",
    "title": "财务信息",
    "config": {
        "canEditUserRolesKey": ["admin"],
        "canEditStepIdAfter": ["1", "2"],
        "canEditUserIdsAfter": ["1", "2"],
        "canEditStepIdBefore": ["3", "4"],
        "canEditUserIdsBefore": ["3", "4"]
    }
}

评论模块 `CommentList`

功能说明：展示项目相关的评论记录,支持用户添加新的评论,实现项目相关人员的交流讨论。

参数：

参数名	数据类型	说明
无

示例：

{
    "type": "comment-list",
    "title": "评论模块",
    "config": {
    }
}

功能说明：管理项目相关的附件文件,支持按环节分类展示附件,并可查看历史版本。

参数：

参数名	数据类型	说明
enableChoose	Boolean	是否启用选择模式
list	Array	附件列表

示例：

{
    "type": "attachment-list",
    "title": "附件模块",
    "config": {
        "enableChoose": false,
        "list": []
    }
}

客户绑定码模块 `CustomerBinding`

功能说明：生成和管理项目的客户绑定码,用于将项目与客户关联。支持查看绑定状态和过期状态。

参数：

参数名	数据类型	说明
无

示例：

{
    "type": "customer-binding",
    "title": "绑定码模块",
    "config": {
    }
}

环节配置模块 `StepArrange`

功能说明：配置项目环节的处理人员,支持根据项目表单值动态分配环节处理人。

参数：

参数名	数据类型	说明
无

示例：

{
    "type": "step-arrange",
    "title": "环节配置模块",
    "config": {
    }
}

显示阶段进度 `Periods`

功能说明：以时间轴的形式展示项目各阶段的进度状态,支持通过过滤条件控制显示的阶段。

参数：

参数名	数据类型	说明
filter	String	过滤条件表达式

示例：

{
    "type": "periods",
    "title": "显示阶段进度",
    "config": {
        "filter": "return true"
    }
}

显示周期生成项目信息 `AutoReplayInfo`

功能说明：展示和配置项目的自动生成规则,用于设置定时任务自动创建子项目。

参数：

参数名	数据类型	说明
readonly	Boolean	是否只读模式

示例：

{
    "type": "auto-replay-info",
    "title": "显示阶段进度",
    "config": {
        "readonly": false
    }
}

传阅模块 `Circulate`

功能说明：管理项目的传阅记录,支持选择传阅对象并添加传阅说明,实现项目信息的知会传达。

参数：

参数名	数据类型	说明
无

示例：

{
    "type": "circulate",
    "title": "传阅记录",
    "config": {
    }
}

延期原因 `DelayReason` （已弃用）

功能说明：记录和展示项目延期的原因说明,当项目状态为延期时可查看。

参数：

参数名	数据类型	说明
fields.flowKey	String	流程key

示例：

{
    "type": "delay-reason",
    "title": "延期原因",
    "config": {
        "fields": {
            "flowKey": "flow_key"
        }
    }
}

生成报告 `GenerateReport`

功能说明：根据配置的模板生成项目报告,支持不同类型流程的报告生成。

模板创建、字段脚本编写和成品文档下载接口，详见《报告模板与文档生成》。

参数：

参数名	数据类型	说明
flow_key	String	流程key
flow_type	String	流程类型

示例：

{
    "type": "generate-report",
    "title": "生成报告",
    "config": {
        "flow_key": "",
        "flow_type": ""
    }
}

项目详情面板 `ProjectDetailPanel`

功能说明：展示项目的详细信息面板,可自定义配置展示内容和样式。

参数：

参数名	数据类型	说明
无

示例：

{
    "type": "project-detail-panel",
    "title": "项目详情",
    "config": {
    }
}

项目元信息 `ProjectMetaInfo`

功能说明：展示项目的基本信息和自定义表单信息的组合展示,支持侧边栏模式。

参数：

参数名	数据类型	说明
side	Boolean	是否侧边栏模式

示例：

{
    "type": "project-meta-info",
    "title": "项目元信息",
    "config": {
        "side": false
    }
}

项目重启 `ProjectReopen`

功能说明：对已结束的项目进行重启操作,仅当项目状态为已结束且有结束环节时可用。

参数：

参数名	数据类型	说明
无

示例：

{
    "type": "project-reopen",
    "title": "项目重启",
    "config": {
    }
}