列表模板配置

用于自定义表格

关键字段

is 指定需要渲染的组件，is字段的对应关系如下：

is指定组件	对应类型	对用type类型
IconCeil	Icon + 文字	1.内置Icon, type对应上面内置类型的名称即可如："type" : "greenDateIcon" 2.Element-ui中的Icon，type字段对应Icon的全称即可如："type" : "el-icon-phone" 3.头像类型，type设置为"headIcon"，需要通过headImg传入头像链接
ColorBackgroundText	彩色背景文字	目前针对年份，状态，进行状况进行了内置颜色 1. "type" : "year" - 年份颜色循环展示 2. "type" : "status" - 状态颜色（完结/待启动/进行中/失败/延期/暂停） 3. "type" : "process" - 进程状态颜色（正常/注意/冻结/暂停/延期）
SectorCeil	节点	不用设置type类型，存在默认节点Icon样式(跟随主题色)，也支持Element-ui中Icon,需要type传入相应的名称
ProcessBar	进度条	目前有两种展示方式，条形和圆形 1. "type" : "line" - 线性进度条 2. "type" : "circle" - 环形进度条（默认宽度45px）
ProjectDetailEdit	项目详情编辑	用于编辑项目详细信息的抽屉组件，支持基本信息和元数据表单编辑
StepOwnerChange	步骤负责人	用于修改项目步骤的负责人，支持用户选择

type 指定需要渲染的类型
如上表格, 不同组件含有不同的类型。如果type字段配置错误，会不显示Icon,直接显示内容（content）
content 对应的是单元格需要显示的内容
```
"content":{
	"$template":"{ const {name} = {{project.owner}}; return name?name:''; }",
     "eval":true
}
```
注意：复杂的内容可通过eval函数计算传入，如上,其中的参数可以参考上下文数据章节
headImg
Icon为用户头像时，头像链接需要通过headImg字段传入,type字段指定headIcon，其它情况不需要传入。如果未传入headImg，将显示默认头像。
```
"headImg":{
	"$template":"{ const {avatar} = {{project.owner}}; return avatar?avatar:''; }",
	"eval":true
},
```
color
针对以上type字段设置Element-ui中的Icon，如果不设置Icon颜色默认跟随主题色，color字段设置之后跟随设置的颜色

配置类型

自定义列表内容配置可以分为以下类型：

Icon + 文字

类型为IconCeil。除内置类型和头像Icon外，也支持Element-ui中的Icon

样式说明

图标宽度：20px
头像样式：20px x 20px，圆形（border-radius: 10px）
图标与文字间距：4px
默认图标颜色：跟随主题色（--primary-color）

效果展示

内置类型

Type(类型)	预计效果	例如：
greenDateIcon		开始时间
redDateIcon		预计结束时间
moneyIcon		预计金额
ticketIcon		已开票
clockIcon		工时
moneyBagIcon		外协总金额
agreementIcon		合同金额
headIcon	-	用户头像（需要配合headImg使用）

示例代码

{
    "title":"外协总金额（万）",     // 列名字段
    "props":{
        "fixed":"left"        // 对齐方式（所处的位置）
    },
    "createElement":{
        "children":{
            "is":"IconCeil",
            "attribute":{
                "props":{
                    "type":"moneyBagIcon",
                    "content":2000
                }
            }
        }
    }
}

Element-ui中的Icon 支持Element-ui中的Icon, type字段对应Icon名称即可

{
    "title":"xxx",
    "props":{
        "fixed":"left" 
    },
    "createElement":{
        "children":{
            "is":"IconCeil",
            "attribute":{
                "props":{
                    "type":"el-icon-warning-outline",
                    "content":2000,
                    "color":"#FF0000"  // 可选，设置图标颜色
                }
            }
        }
    }
}

彩色背景文字

类型为ColorBackgroundText。目前针对年份( year )，状态( status )，进行状况( process )进行了内置颜色。年份颜色会根据内容值循环使用6种预设颜色。状态和进程状态有固定的颜色映射关系。

样式说明

默认样式：
- 宽度：47px
- 高度：22px
- 内边距：2px 8px
- 圆角：16px
- 居中对齐
状态样式（status类型）：
- 宽度：65px
- 高度：22px
- 内边距：2px 8px
- 圆角：16px
- 字体大小：12px
- 可选是否显示状态点（hideStatusPoint）

状态颜色映射：

完结/已结束: 灰色背景 (#F2F4F7), 文字 (#344054)
待启动/未开始: 蓝色背景 (#EFF8FF), 文字 (#175CD3)
进行中: 绿色背景 (#ECFDF3), 文字 (#027A48)
失败: 红色背景 (#FEF3F2), 文字 (#F04438)
延期: 深红色背景 (#FEF3F2), 文字 (#B42318)
暂停: 蓝色背景 (#EFF8FF), 文字 (#175CD3)

进程状态颜色映射：

正常: 绿色背景 (#ECFDF3), 文字 (#027A48)
注意: 橙色背景 (#FFFAEB), 文字 (#B54708)
冻结: 深灰色背景 (#F8F9FC), 文字 (#363F72)
暂停: 蓝色背景 (#EFF8FF), 文字 (#175CD3)
延期: 红色背景 (#FEF3F2), 文字 (#B42318)

年份颜色循环：

紫色: 文字 (#6941C6), 背景 (#F9F5FF)
深蓝色: 文字 (#3538CD), 背景 (#EEF4FF)
蓝色: 文字 (#175CD3), 背景 (#EEF4FF)
深蓝色: 文字 (#3538CD), 背景 (#EEF4FF)
粉色: 文字 (#C11574), 背景 (#FDF2FA)
橙色: 文字 (#B93815), 背景 (#FFF4ED)

效果

示例代码

{
    "title":"财年归属",
    "props":{
        "fixed":"left"
    },
    "createElement":{
        "children":{
            "is":"ColorBackgroundText",
            "attribute":{
                "props":{
                    "type":"year",   // 对应类别
                    "content":{    // 单元格内容
                        "$template":"{ return 2017 }",
                        "eval":true
                    },
                    "hideStatusPoint": false  // 可选，仅用于status类型，是否隐藏状态点
                }
            }
        }
    }
},

节点

类型为SectorCeil。存在默认节点Icon样式(跟随主题色)，也支持Element-ui中Icon

样式说明

SVG图标宽度：16px
默认图标颜色：跟随主题色（--primary-color）
Element图标大小：20px
图标与文字间距：2px

效果

示例代码

 {
     "title":"当前环节",
     "props":{
         "width":"200px",
         "fixed":"left"
     },
     "createElement":{
         "children":{
             "is":"SectorCeil",
             "attribute":{
                 "props":{
                     "type":"el-icon-eleme",
                     "content":"【售前支持】xxx",
                     "color":"red"
                 }
             }
         }
     }
 },

进度条

类型为ProcessBar。目前有两种展示方式：

线性进度条（type: "line"）：宽度100%
环形进度条（type: "circle"）：固定宽度45px

进度值通过 current（当前值）和 max（总值）计算得出，最终显示百分比 = (current/max) * 100，结果会进行四舍五入。

效果

示例代码

{
    "title":"进度条",
    "props":{
        "fixed":"left"
    },
    "createElement":{
        "children":{
            "is":"ProcessBar",
            "attribute":{
                "props":{
                    "type":"line",
                    "current":3,    // 当前值
                    "max":9     // 总值，最终计算比例 当前值/总值
                }
            }
        }
    }
}

项目详情编辑

类型为ProjectDetailEdit。用于编辑项目详细信息的抽屉组件。

功能特点

支持基本项目信息编辑
支持元数据表单编辑
异步保存
自动刷新数据

属性说明

btnText: 按钮文字
title: 抽屉标题
projectId: 项目ID
icon: 按钮图标
enableEditBasicProjectInfo: 是否允许编辑基本项目信息

示例代码

{
  "title":"编辑项目",
  "isSort":false,
  "sortConf":{
    "field":""
  },
  "props":{
  },
  "createElement":{
    "children":{
      "is":"ProjectDetailEdit",
      "attribute":{
        "style":"margin-left: 10px",
        "props":{
          "text":"修改",
          "projectId":{
            "$template":"ctx.__id",
            "eval":true
          },
          "enableEditBasicProjectInfo": true
        },
        "on":{
          "change":{
            "handle":{
              "componentName":"project",
              "name":"reload",
              "type":"call",
              "args":{
                "$template":"ctx.__id",
                "eval":true
              }
            }
          }
        }
      }
    }
  }
}

步骤负责人修改

类型为StepOwnerChange。用于修改项目步骤的负责人。

功能特点

支持用户选择
支持用户组选择
异步保存
自动刷新数据

属性说明

text: 按钮文字
projectId: 项目ID
owners: 当前负责人列表
icon: 按钮图标
flowStepId: 步骤ID

示例代码

{
  "title":"修改负责人",
  "isSort":false,
  "sortConf":{
    "field":""
  },
  "props":{
  },
  "createElement":{
    "children":{
      "is":"StepOwnerChange",
      "attribute":{
        "style":"margin-left: 10px",
        "props":{
          "flowStepId":"1690618646800",
          "text":"修改",
          "projectId":{
            "$template":"ctx.__id",
            "eval":true
          },
          "owners":{
            "$template":"ctx.__step_owners.filter(u => u.flow_step_id=='1690618646800')",
            "eval":true
          }
        },
        "on":{
          "change":{
            "handle":{
              "componentName":"project",
              "name":"reload",
              "type":"call",
              "args":{
                "$template":"ctx.__id",
                "eval":true
              }
            }
          }
        }
      }
    }
  }
}