@vue3-simple-bui/project

项目管理业务组件库

📦 安装

npm install @vue3-simple-bui/project
# or
pnpm add @vue3-simple-bui/project

🔄 前置依赖

本组件库依赖以下包，请确保您的项目中已安装：

• vue >= 3.0.0
• axios >= 1.6.8
• dayjs >= 1.11.0
• vue-i18n >= 9.2.2
• lodash-es >= 4.17.21
• ant-design-vue >= 4.0.0
• @ant-design/icons-vue >= 7.0.0

如果您的项目中还未安装这些依赖，请先安装：

# npm
npm install vue vue-i18n dayjs lodash-es axios ant-design-vue @ant-design/icons-vue

# yarn
yarn add vue vue-i18n dayjs lodash-es axios ant-design-vue @ant-design/icons-vue

# pnpm
pnpm add vue vue-i18n dayjs lodash-es axios ant-design-vue @ant-design/icons-vue

🎯 组件概览

该包提供了完整的项目管理甘特图解决方案：

• HBBaseGantt - 业务甘特图基础组件
• HBBaseGanttViewer - 甘特图查看器（只读模式）
• HBBaseGanttEditor - 甘特图编辑器（完整编辑能力）

🚀 快速开始

全局注册

import { createApp } from 'vue'
import Project from '@vue3-simple-bui/project'
import '@vue3-simple-bui/project/dist/index.css'

const app = createApp(App)
app.use(Project)

按需引入

<script setup lang="ts">
import { HBBaseGantt } from '@vue3-simple-bui/project'
import '@vue3-simple-bui/project/es/base-gantt/style'

const ganttData = {
  data: [
    { id: 1, text: '任务1', start_date: '2024-01-01', duration: 3 }
  ],
  links: []
}

const columns = [
  { name: 'text', label: '任务名称', width: 200 }
]
</script>

<template>
  <HBBaseGantt 
    :data="ganttData" 
    :columns="columns"
    :readonly="false"
  />
</template>

📖 核心特性

业务甘特图 (HBBaseGantt)

• ✅ 完整的甘特图功能（任务、链接、资源）
• ✅ 事件拦截与业务调度
• ✅ 行内编辑与业务组件渲染
• ✅ 资源负荷与项目日历集成
• ✅ 多语言与主题支持
• ✅ TypeScript 类型支持

主要属性

| 属性 | 说明 | 类型 | 默认值 | |------|------|------|--------| | data | 甘特图数据（包含 data 和 links） | Object | {} | | columns | 列配置 | Array | [] | | readonly | 只读模式 | Boolean | false | | durationUnit | 工期单位 ('minute' / 'day') | String | 'minute' | | hoursPerDay | 每日工时 | Number | 8 | | calendars | 日历信息 | Array | [] |

甘特图查看器 (HBBaseGanttViewer)

只读模式的甘特图组件，适用于：

• 项目进度展示
• 报表查看
• 数据可视化

甘特图编辑器 (HBBaseGanttEditor)

完整编辑能力，支持：

• 任务增删改
• 拖拽调整
• 链接管理
• 资源分配

📚 数据格式

interface GanttData {
  data: Array<{
    id: number | string
    text: string
    start_date: string
    duration: number
    progress?: number
    parent?: number | string
    [key: string]: any
  }>
  links: Array<{
    id: number | string
    source: number | string
    target: number | string
    type: string
  }>
}

interface Column {
  name: string
  label: string
  width?: number
  align?: 'left' | 'center' | 'right'
  tree?: boolean
  [key: string]: any
}

🔗 相关资源

• 在线文档
• 示例代码
• 变更日志

📋 开发命令

# 构建 SVG 图标
pnpm run project-build-icons

# 构建组件
pnpm run project-build

# 打包
pnpm run project-packtgz

# 发布
pnpm run project-publish

📄 License

[MIT]

👨‍💻 维护者

LMX

更多详细文档和示例，请访问 官方文档