场景：项目内迭代工时统计
场景描述
用户希望在项目中通过表格的方式直观的看到项目内各迭代的工时信息
实现效果
在项目内添加自定义组件，可以通过表格的形式查看项目下各迭代的相关数据
解决方案
实现思路
使用插件承载 project 自定义组件能力，在插件内实现表格数据的自定义组件
插件开发
1. 添加插件承载 project 自定义组件能力,添加ones:project:component:new插槽，将对应组件的modules.id填入abilities.relateModule.componentModuleEnter中
config/plugin.yaml
service:
app_id: ...
name: 项目内迭代工时统计
version: 1.0.0
description: 展示项目内迭代的工时情况
mode: org
logo: null
language: nodejs
language_version: 16.13.0
host_version: 1.0.4
host_sub_version: 1.0.0
min_system_version: 3.5.0
auth: null
config: null
scope: 1
apis:
- type: addition
methods:
- POST
url: /hello
function: hello
modules:
- id: ones-project-component-new-aQbS
title: 迭代统计
moduleType: ones:project:component:new
entry: modules/ones-project-component-new-aQbS/index.html
abilities:
- id: tRUFWEsd
name: 自定义组件
abilityType: ProjectCustomComponent
function:
copyPluginData: copyTest
version: 1.0.0
relateModule:
componentModuleEnter: 'ones-project-component-new-aQbS'
config:
- key: component_name
label: 自定义组件名称
value: 迭代统计
fieldType: Input
show: false
- key: component_desc
label: 自定义组件描述
value: 展示迭代的工时消耗情况
fieldType: TextArea
show: false
props:
placeholder: 可配置自定义组件描述，允许为空
- key: is_support_copy
label: 是否支持插件数据复制
value: false
show: false
2. 完成自定义组件的功能
在插件前端目录下，完成数据表格的功能开发
index.tsx
web/src/modules/ones-project-component-new-aQbS/index.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import { ConfigProvider } from '@ones-design/core'
import { SprintStatistics } from './components/sprint-statistics'
import './index.css'
ReactDOM.render(
<ConfigProvider>
<SprintStatistics />
</ConfigProvider>,
document.getElementById('ones-mf-root')
)
表格样式
web/src/modules/ones-project-component-new-aQbS/index.css
body {
background: transparent;
font-family: PingFang SC, '微软雅黑', Arial;
line-height: 1.5;
padding: 20px 0;
}
#ones-mf-root {
overflow: hidden;
position: relative;
display: flex;
height: 100%;
flex-direction: column;
background: #fff;
.sprint-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
background: #fff;
.sprint-head {
.sprint-head-title {
font-weight: 500;
font-size: 18px;
line-height: 26px;
padding: 0 20px;
}
.sprint-head-alert {
margin: 20px 0px 15px;
padding: 0 20px;
}
}
.sprint-picker {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 20px;
width: 40%;
.sprint-status-select {
display: flex;
flex-direction: row;
align-items: center;
width: 60%;
margin-right: 20px;
.select-title {
width: 30%;
}
.select-main {
width: 70%
}
}
.sprint-done-interval {
width: 40%;
}
}
.sprint-table {
margin: 0 20px;
margin-top: 20px;
}
}
}
表格的数据构建
web/src/modules/ones-project-component-new-aQbS/components
import { Alert } from '@ones-design/core'
import VirtualTable from '@ones-design/table'
import React from 'react'
import {
SPRINT_STATISTICS_TITLE,
SPRINT_STATISTICS_ALERT,
} from '../../../common/constants/constants'
export const SprintStatistics = () => {
const sprintFilterChange = (params) => {
console.log('Change Params: ', params)
}
return (
<div className="sprint-container">
<div className="sprint-head">
<div className="sprint-head-title">{SPRINT_STATISTICS_TITLE}</div>
<Alert type="info" className="sprint-head-alert">
{SPRINT_STATISTICS_ALERT}
</Alert>
</div>
<VirtualTable
className="sprint-table"
columns={[
{
code: 'sprint',
features: {
autoWidth: {
min: 250,
},
},
lock: true,
name: '迭代',
width: 250,
},
{
code: 'startDate',
name: '计划开始',
width: 100,
},
{
code: 'endDate',
name: '计划结束',
width: 100,
},
{
code: 'status',
name: '状态',
},
{
code: 'progress',
name: '进度',
},
{
code: 'member',
name: '人员安排',
},
{
code: 'workHours',
name: '工时统计(前端/后端/测试)',
width: 200,
},
]}
dataSource={[
{
startDate: '2022-12-1',
endDate: '2022-12-12',
status: '进行中',
sprint: '【基础能力】插件日志开发开发',
progress: '50%',
member: '何文赋，林智敏',
workHours: '8h/20h/16h',
},
{
startDate: '2022-11-15',
endDate: '2022-12-30',
status: '已完成',
sprint: '【业务能力】插件承载脚本属性 - 浮点数开发',
progress: '80%',
member: '林智敏，谢子默',
workHours: '65h/90h/24h',
},
{
startDate: '2022-10-17',
endDate: '2022-11-1',
status: '进行中',
sprint: '【基础能力】插件文件操作开发',
progress: '90%',
member: '何文赋，邵远航',
workHours: '-/56h/8h',
},
{
startDate: '2022-10-1',
endDate: '2022-12-12',
status: '进行中',
sprint: '【业务能力】托管独立服务开发',
progress: '50%',
member: '谢子默，邵远航',
workHours: '36h/180h/40h',
},
{
startDate: '2022-12-15',
endDate: '2022-12-21',
status: '进行中',
sprint: '【基础能力】插件文件操作拓展',
progress: '50%',
member: '郑烨磊，陈玮',
workHours: '24h/32h/8h',
},
{
startDate: '2022-12-30',
endDate: '2023-2-27',
status: '进行中',
sprint: '【业务能力】插件承载脚本属性 - 单选/多选开发',
progress: '50%',
member: '张琪睿，王翰海',
workHours: '160h/192h/32h',
},
]}
/>
</div>
)
}
表头设计
web/src/common/constants/constants.ts
export const SPRINT_STATISTICS_TITLE = '迭代进度统计'
export const SPRINT_STATISTICS_ALERT = '统计项目下的全量迭代结果。'
export const SPRINT_STATUS = '迭代状态'
export const SPRINT_STATUS_SELECT_PLACEHOLDER = '支持筛选迭代状态'
export const SPRINT_DONE_INTERVAL_PLACEHOLDER = '支持筛选完成前天数'
export const SPRINT_STATUS_DONE = 'done'
// value 值对应迭代中迭代状态的 category 值
export const SPRINT_STATUS_OPTIONS = [
{
label: '未开始',
value: 'to_do',
},
{
label: '进行中',
value: 'in_progress',
},
{
label: '已完成',
value: 'done',
},
]