使用场景概览

主要用于界面配置相关的功能，包括：

项目列表模板
列表筛选器模板
项目详情模板
环节详情模板
数据看板

项目列表模板

脚本能力主要用于渲染一些通过项目上下文数据计算的字段，如通过项目表单或环节表单填写的数据进行计算的字段。
脚本复用vue组件，可以通过vue的语法进行渲染。
脚本示例：

{
  "config":[
    {
      "title":"名称",
      "props":{
        "width":"400px"
      },
      "createElement":{
        "is":"span",
        "children":{
          "$template":"{return ctx.project_name }",
          "eval":true
        }
      }
    },
    {
      "title":"合作渠道",
      "props":{
      },
      "createElement":{
        "children":{
          "$template":"{ const val = ctx.channel; return !val ? '-' : val }",
          "eval":true
        }
      }
    },
    {
      "title":"财年归属",
      "isSort":true,
      "sortConf":{
        "field":"finance_year"
      },
      "props":{
      },
      "createElement":{
        "children":{
          "is":"colorBackgroundText",
          "attribute":{
            "props":{
              "type":"year",
              "content":{
                "$template":"ctx.finance_year",
                "eval":true
              }
            }
          }
        }
      }
    },
    {
      "title":"合同额/万",
      "isSort":true,
      "sortConf":{
        "field":"contract_mount"
      },
      "props":{
      },
      "createElement":{
        "children":{
          "$template":"{ return (((ctx.contract_mount || 0)/10000).toFixed(4) - 0) || '-' }",
          "eval":true
        }
      }
    },
    {
      "title":"已回款/万",
      "isSort":true,
      "sortConf":{
        "field":"payed_mount"
      },
      "props":{
      },
      "createElement":{
        "children":{
          "$template":"{ return (((ctx.payed_mount || 0)/10000).toFixed(4) - 0) || '-' }",
          "eval":true
        }
      }
    },
    {
      "title":"内部成本/万",
      "isSort":true,
      "sortConf":{
        "field":"internal_cost"
      },
      "props":{
      },
      "createElement":{
        "children":{
          "$template":"{ return ((ctx.internal_cost || 0)*1.4/10000).toFixed(4) - 0 || '-' }",
          "eval":true
        }
      }
    },
    {
      "title":"负责人",
      "createElement":{
        "children":{
          "$template":"{const project_owner = ctx.__project_owner || {}; const name = project_owner.name || '';  return name}",
          "eval":true
        }
      }
    },
    {
      "title":"操作",
      "props":{
        "fixed":"right",
        "width":"120px"
      },
      "createElement":{
        "children":[
          {
            "is":"router-link",
            "attribute":{
              "style":"margin-left: 10px",
              "props":{
                "to":{
                  "path":{
                    "$template":"\n                      {\n                        const workspace = ctx.$WORKSPACE;\n                        return  '/' + workspace + '/project_detail/0/{{__id}}';\n                      }\n                    ",
                    "eval":true
                  }
                }
              }
            },
            "children":{
              "is":"el-button",
              "attribute":{
                "props":{
                  "size":"small",
                  "type":"text"
                }
              },
              "children":"详情"
            }
          },
          {
            "is":"el-button",
            "if":{
              "$template":"{return ctx.$CAN_EDIT || true}",
              "eval":true
            },
            "attribute":{
              "props":{
                "size":"small",
                "type":"text"
              },
              "style":"margin-left:10px;",
              "on":{
                "click":{
                  "handle":{
                    "componentName":"project",
                    "name":"deleteClick",
                    "type":"call",
                    "args":{
                      "$template":"{{__id}}",
                      "raw":true
                    }
                  }
                }
              }
            },
            "children":"删除"
          }]
      }
    }]
}

列表筛选器模板

目前采用JSON格式进行配置，后续会考虑通过界面进行配置。
脚本示例：


{
  "config":[
    {
      "is":"input",
      "field":"name_text",
      "label":"项目名称",
      "props":{
        "placeholder":"请输入名称"
      },
      "type":"match_phrase"
    },
    {
      "is":"autocomplete",
      "field":"channel",
      "form_field":"9f45v2p34at1",
      "form_template_id":83568911,
      "props":{
        "placeholder":"合作渠道"
      },
      "options":[
      ],
      "label":"合作渠道",
      "type":"match_phrase"
    }]
}

项目详情模板

目前采用JSON格式进行配置，后续会考虑通过界面进行配置。
脚本示例：

{
  "config":{
    "enable_share":true
  },
  "main_col":[
    {
      "type":"project-info",
      "title":"基本信息",
      "config":{
      }
    },
    {
      "type":"meta-form",
      "title":"项目信息",
      "config":{
      }
    },
    {
      "type":"step-form",
      "title":"售前信息",
      "config":{
        "flow_step_id":"1654071630673"
      }
    },
    {
      "type":"step-form",
      "title":"合同信息",
      "config":{
        "flow_step_id":"1654069923869"
      }
    },
    {
      "type":"step-form",
      "title":"运维信息",
      "config":{
        "flow_step_id":"1654069928636"
      }
    },
    {
      "type":"project-list",
      "title":"回款",
      "config":{
        "flow_key":"flow779071184",
        "btn_text":"新增回款"
      }
    },
    {
      "type":"project-list",
      "title":"供应商",
      "config":{
        "flow_key":"flow542534895",
        "btn_text":"添加供应商"
      }
    },
    {
      "type":"comment-list",
      "title":"评论",
      "config":{
      }
    }],
  "side_col":[
    {
      "type":"step-log",
      "title":"流程日志",
      "config":{
        "fields":{
        }
      }
    },
    {
      "type":"attachment-list",
      "title":"附件",
      "config":{
        "fields":{
        }
      }
    }]
}

环节详情模板

该模板通过界面进行配置

数据看板配置

数据看板的配置包括数据源和表达式两部分，数据源部分负责从数据集中提取所需数据，表达式部分负责数据的可视化。
目前采用echarts进行数据可视化，只需要在脚本中返回echarts的option即可。

脚本示例与看板展示：

数据源

const $lodash = ctx.$lodash;
let begin = ctx.$QUERY.date_range_begin;
let query = {
  bool: {
    must: [
      {
        range: {
          "create_time": {
            "gte": 1 // valid_time 大于 0
          }
        },
      },
      {
        "exists": {
          "field": "status"
        }
      },
    ],
  },
};
if (begin) {
  query.bool.must[0].range.create_time.gte = begin;
}
if (ctx.$QUERY.date_range_end) {
  query.bool.must[0].range.create_time.lte = ctx.$QUERY.date_range_end;
}
["bug_fixer", "project_owner", "release_version"].forEach(k => {
  if (ctx.$QUERY[k]) {
    query.bool.must.push({
      term: {
        [k]: ctx.$QUERY[k],
      },
    });
  }
});
return {
  bugResult: {
    "driver": "es",
    "config": {
      "flow_type": "flow282650791",
      "flow_key": "",
      "data_set_key": "bug_list",
      "body": {
        "size": 0, // 不需要原始文档，只需要聚合结果
        query,
        "aggs": {
          "group_by_status": {
            "terms": {
              "field": "status"
            }
          }
        }
      }
    }
  }
}

表达式

const {
  bugResult } = ctx;
return [
  {
    title: '未关闭BUG总数',
    amount: bugResult.hits.total.value,
    icon: 'total'
  },
  {
    title: '正在修复',
    amount: bugResult.aggregations.group_by_status.buckets.find(bucket => bucket.key === '修复')?.doc_count || 0,
    icon: 'finished'
  },
  {
    title: '待部署',
    amount: bugResult.aggregations.group_by_status.buckets.find(bucket => bucket.key === '部署')?.doc_count || 0,
    icon: 'delay_warning'
  },
  {
    title: '待验证',
    amount: bugResult.aggregations.group_by_status.buckets.find(bucket => bucket.key === '验证')?.doc_count || 0,
    icon: 'delay'
  }
];

看板展示