134 lines
3.4 KiB
TypeScript
134 lines
3.4 KiB
TypeScript
// TaskList 列配置类型定义
|
||
|
||
export type TaskListColumnType =
|
||
| 'name'
|
||
| 'predecessor'
|
||
| 'assignee'
|
||
| 'startDate'
|
||
| 'endDate'
|
||
| 'estimatedHours'
|
||
| 'actualHours'
|
||
| 'progress'
|
||
|
||
export interface TaskListColumnConfig {
|
||
type?: TaskListColumnType
|
||
key: string // 用于国际化的key，也可以作为识别符
|
||
label?: string // 显示标签
|
||
cssClass?: string // CSS类名
|
||
width?: number | string // 列宽度，支持像素（120）或百分比（'15%'）
|
||
visible?: boolean // 是否显示，默认true
|
||
}
|
||
|
||
export interface TaskListConfig {
|
||
columns?: TaskListColumnConfig[]
|
||
showAllColumns?: boolean // 是否显示所有列，默认true
|
||
defaultWidth?: number | string // 默认展开宽度，支持像素数字（如 320）或百分比字符串（如 '30%'），默认320px
|
||
minWidth?: number | string // 最小宽度，支持像素数字（如 280）或百分比字符串（如 '20%'），默认280px，不能小于280px
|
||
maxWidth?: number | string // 最大宽度，支持像素数字（如 1160）或百分比字符串（如 '80%'），默认1160px
|
||
}
|
||
|
||
// 默认宽度配置
|
||
export const DEFAULT_TASK_LIST_WIDTH = 320 // 默认展开宽度
|
||
export const DEFAULT_TASK_LIST_MIN_WIDTH = 280 // 最小宽度
|
||
export const DEFAULT_TASK_LIST_MAX_WIDTH = 1160 // 最大宽度
|
||
|
||
/**
|
||
* 解析宽度值（支持像素数字或百分比字符串）
|
||
* @param value 宽度值，可以是数字（像素）或字符串（百分比，如 '30%'）
|
||
* @param containerWidth 容器宽度（用于计算百分比）
|
||
* @param defaultValue 默认值
|
||
* @returns 解析后的像素值
|
||
*/
|
||
export function parseWidthValue(
|
||
value: number | string | undefined,
|
||
containerWidth: number,
|
||
defaultValue: number,
|
||
): number {
|
||
if (value === undefined || value === null) {
|
||
return defaultValue
|
||
}
|
||
|
||
// 如果是数字，直接返回
|
||
if (typeof value === 'number') {
|
||
return value
|
||
}
|
||
|
||
// 如果是字符串，检查是否是百分比
|
||
if (typeof value === 'string') {
|
||
const trimmed = value.trim()
|
||
if (trimmed.endsWith('%')) {
|
||
const percentage = parseFloat(trimmed)
|
||
if (!isNaN(percentage)) {
|
||
return Math.round((containerWidth * percentage) / 100)
|
||
}
|
||
}
|
||
// 尝试解析为数字
|
||
const parsed = parseFloat(trimmed)
|
||
if (!isNaN(parsed)) {
|
||
return parsed
|
||
}
|
||
}
|
||
|
||
return defaultValue
|
||
}
|
||
|
||
// 默认列配置
|
||
export const DEFAULT_TASK_LIST_COLUMNS: TaskListColumnConfig[] = [
|
||
{
|
||
type: 'name',
|
||
key: 'taskName',
|
||
label: '任务名称',
|
||
cssClass: 'col-name',
|
||
visible: true,
|
||
},
|
||
{
|
||
type: 'predecessor',
|
||
key: 'predecessor',
|
||
label: '前置任务',
|
||
cssClass: 'col-pre',
|
||
visible: true,
|
||
},
|
||
{
|
||
type: 'assignee',
|
||
key: 'assignee',
|
||
label: '负责人',
|
||
cssClass: 'col-assignee',
|
||
visible: true,
|
||
},
|
||
{
|
||
type: 'startDate',
|
||
key: 'startDate',
|
||
label: '开始日期',
|
||
cssClass: 'col-date',
|
||
visible: true,
|
||
},
|
||
{
|
||
type: 'endDate',
|
||
key: 'endDate',
|
||
label: '结束日期',
|
||
cssClass: 'col-date',
|
||
visible: true,
|
||
},
|
||
{
|
||
type: 'estimatedHours',
|
||
key: 'estimatedHours',
|
||
label: '预估工时',
|
||
cssClass: 'col-hours',
|
||
visible: true,
|
||
},
|
||
{
|
||
type: 'actualHours',
|
||
key: 'actualHours',
|
||
label: '实际工时',
|
||
cssClass: 'col-hours',
|
||
visible: true,
|
||
},
|
||
{
|
||
type: 'progress',
|
||
key: 'progress',
|
||
label: '进度',
|
||
cssClass: 'col-progress',
|
||
visible: true,
|
||
},
|
||
]
|