@cimom/ci-web-plugins-commom 1.0.12 → 1.0.15

package/dist/DhtmlxGanttPro/README.md

@@ -0,0 +1,360 @@
+# DhtmlxGanttPro 插件
+
+基于 DHTMLX-Gantt 的 Vue3 封装组件，提供开箱即用的甘特图功能。
+
+## 功能特性
+
+- ✅ **Vue3 Composition API** - 使用最新的 Vue3 语法
+- ✅ **TypeScript 支持** - 完整的类型定义
+- ✅ **响应式数据** - 支持数据动态更新
+- ✅ **事件系统** - 完整的事件回调机制
+- ✅ **配置灵活** - 支持自定义配置和主题
+- ✅ **中文本地化** - 内置中文界面支持
+- ✅ **只读模式** - 支持只读和编辑模式切换
+- ✅ **生命周期管理** - 自动处理组件初始化和销毁
+- ✅ **错误处理** - 完善的错误处理和恢复机制
+
+## 安装
+
+```bash
+npm install @cimom/ci-web-plugins-commom dhtmlx-gantt
+```
+
+## 基础用法
+
+```vue
+<template>
+  <div>
+    <DhtmlxGanttPro
+      :data="ganttData"
+      :links="ganttLinks"
+      :height="'500px'"
+      @task-click="onTaskClick"
+      @task-change="onTaskChange"
+    />
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { DhtmlxGanttPro } from '@cimom/ci-web-plugins-commom'
+
+export default {
+  components: {
+    DhtmlxGanttPro
+  },
+  setup() {
+    const ganttData = ref([
+      { id: 1, text: '任务1', start_date: '2024-01-01', duration: 5, progress: 0.6 },
+      { id: 2, text: '任务2', start_date: '2024-01-08', duration: 3, progress: 0.3 }
+    ])
+
+    const ganttLinks = ref([
+      { id: 1, source: 1, target: 2, type: '0' }
+    ])
+
+    const onTaskClick = ({ task }) => {
+      console.log('点击任务:', task)
+    }
+
+    const onTaskChange = ({ id, task }) => {
+      console.log('任务变更:', id, task)
+    }
+
+    return {
+      ganttData,
+      ganttLinks,
+      onTaskClick,
+      onTaskChange
+    }
+  }
+}
+</script>
+```
+
+## 按需引入
+
+```javascript
+import { DhtmlxGanttPro } from '@cimom/ci-web-plugins-commom/DhtmlxGanttPro'
+```
+
+## 全局注册
+
+```javascript
+import { createApp } from 'vue'
+import CIWebPlugins from '@cimom/ci-web-plugins-commom'
+import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
+
+const app = createApp(App)
+app.use(CIWebPlugins)
+```
+
+## Props
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| width | String/Number | '100%' | 甘特图宽度 |
+| height | String/Number | '500px' | 甘特图高度 |
+| data | Array | [] | 任务数据 |
+| links | Array | [] | 任务依赖关系数据 |
+| config | Object | {} | 甘特图配置 |
+| readonly | Boolean | false | 是否只读模式 |
+| locale | String | 'cn' | 本地化语言 |
+| theme | String | 'default' | 主题样式 |
+
+## 数据格式
+
+### 任务数据 (data)
+
+```javascript
+[
+  {
+    id: 1,                    // 任务ID (必需)
+    text: '任务名称',          // 任务名称 (必需)
+    start_date: '2024-01-01', // 开始日期 (必需)
+    duration: 5,              // 工期 (必需)
+    progress: 0.6,            // 进度 0-1
+    parent: 0,                // 父任务ID
+    type: 'task',             // 任务类型
+    color: '#3498db',         // 颜色
+    priority: 1,              // 优先级
+    // ... 其他自定义字段
+  }
+]
+```
+
+### 依赖关系数据 (links)
+
+```javascript
+[
+  {
+    id: 1,        // 链接ID (必需)
+    source: 1,    // 源任务ID (必需)
+    target: 2,    // 目标任务ID (必需)
+    type: '0'     // 链接类型: '0'-'结束到开始', '1'-'开始到开始', '2'-'结束到结束', '3'-'开始到结束'
+  }
+]
+```
+
+## 事件
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| task-click | { task, event } | 任务点击 |
+| task-dblclick | { task, event } | 任务双击 |
+| task-change | { id, task } | 任务变更 |
+| task-add | { id, task } | 任务添加 |
+| task-delete | { id } | 任务删除 |
+| data-loaded | { data, links } | 数据加载完成 |
+| data-error | error | 数据加载错误 |
+| view-change | { mode } | 视图变更 |
+| scale-change | - | 时间尺度变更 |
+
+## 配置选项
+
+```javascript
+const config = {
+  // 日期格式
+  date_format: '%Y-%m-%d',
+  
+  // 时间尺度
+  scale_unit: 'day',        // 'minute', 'hour', 'day', 'week', 'month', 'year'
+  date_scale: '%m/%d',
+  step: 1,
+  
+  // 子尺度
+  subscales: [
+    { unit: 'month', step: 1, date: '%Y年%m月' }
+  ],
+  
+  // 列配置
+  columns: [
+    { name: 'text', label: '任务名称', width: 150, tree: true },
+    { name: 'start_date', label: '开始时间', width: 80 },
+    { name: 'duration', label: '工期', width: 60 },
+    { name: 'progress', label: '进度', width: 60 }
+  ],
+  
+  // 其他配置...
+}
+```
+
+## 方法
+
+通过 ref 可以调用以下方法：
+
+```javascript
+const ganttRef = ref(null)
+
+// 获取甘特图实例
+const ganttInstance = ganttRef.value.getGanttInstance()
+
+// 刷新甘特图 - 重新应用配置
+ganttRef.value.refresh()
+
+// 获取选中的任务
+const selectedTask = ganttRef.value.getSelectedTask()
+
+// 添加任务
+ganttRef.value.addTask({
+  text: '新任务',
+  start_date: '2024-01-01',
+  duration: 3
+})
+
+// 更新任务
+ganttRef.value.updateTask(1, {
+  text: '更新的任务',
+  progress: 0.8
+})
+
+// 删除任务
+ganttRef.value.deleteTask(1)
+
+// 缩放到适应所有任务
+ganttRef.value.fitToTask()
+```
+
+### 配置更新
+
+为了避免递归更新问题，配置变更不会自动应用到甘特图。如需更新配置，请调用 `refresh()` 方法：
+
+```javascript
+const ganttRef = ref(null)
+const ganttConfig = ref({
+  scale_unit: 'day',
+  date_scale: '%m/%d'
+})
+
+// 更新配置后刷新
+const updateConfig = () => {
+  ganttConfig.value.scale_unit = 'week'
+  ganttConfig.value.date_scale = '%W周'
+  
+  // 手动刷新以应用新配置
+  nextTick(() => {
+    ganttRef.value?.refresh()
+  })
+}
+```
+
+## 高级用法
+
+### 自定义主题
+
+```vue
+<template>
+  <DhtmlxGanttPro
+    :data="ganttData"
+    :theme="'dark'"
+    :config="customConfig"
+  />
+</template>
+
+<script>
+const customConfig = {
+  // 自定义样式配置
+  grid_width: 350,
+  add_column: false,
+  autosize: 'y',
+  details_on_create: true,
+  // 更多配置...
+}
+</script>
+```
+
+### 动态数据加载
+
+```javascript
+const loadProjectData = async (projectId) => {
+  try {
+    const response = await fetch(`/api/projects/${projectId}`)
+    const { data, links } = await response.json()
+    
+    ganttData.value = data
+    ganttLinks.value = links
+  } catch (error) {
+    console.error('数据加载失败:', error)
+  }
+}
+```
+
+### 只读模式
+
+```vue
+<template>
+  <div>
+    <button @click="toggleReadonly">
+      {{ readonly ? '编辑模式' : '只读模式' }}
+    </button>
+    
+    <DhtmlxGanttPro
+      :data="ganttData"
+      :readonly="readonly"
+    />
+  </div>
+</template>
+```
+
+## 样式定制
+
+```css
+/* 容器样式 */
+.dhtmlx-gantt-pro {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* 任务条样式 */
+:deep(.gantt_task_line) {
+  border-radius: 4px;
+}
+
+/* 进度条样式 */
+:deep(.gantt_task_progress) {
+  border-radius: 4px;
+  background: linear-gradient(90deg, #4CAF50, #45a049);
+}
+
+/* 网格头部样式 */
+:deep(.gantt_grid_scale) {
+  background: #f8f9fa;
+  border-bottom: 2px solid #e9ecef;
+}
+```
+
+## 注意事项
+
+1. **依赖版本**: 确保安装了正确版本的 `dhtmlx-gantt`
+2. **CSS 样式**: 需要导入 `dhtmlx-gantt/codebase/dhtmlxgantt.css`
+3. **数据格式**: 严格按照文档格式提供数据
+4. **性能优化**: 大量数据时建议使用分页或虚拟滚动
+5. **浏览器兼容**: 支持现代浏览器，IE 需要额外 polyfill
+
+## 常见问题
+
+### Q: 甘特图不显示？
+A: 检查是否正确导入了 CSS 文件，确保容器有正确的宽高。
+
+### Q: 数据更新后视图不刷新？
+A: 确保使用响应式数据，或者调用 `refresh()` 方法。
+
+### Q: 如何自定义列？
+A: 在 `config.columns` 中配置列定义。
+
+### Q: 如何处理大量数据？
+A: 建议使用分页加载，或者启用虚拟滚动。
+
+## 更新日志
+
+### v1.0.0
+- 🎉 初始版本发布
+- ✨ 支持 Vue3 Composition API
+- ✨ 完整的事件系统
+- ✨ 中文本地化支持
+- ✨ 只读模式
+- ✨ TypeScript 类型定义
+
+## 许可证
+
+MIT License

package/dist/DhtmlxGanttPro/index.js

@@ -0,0 +1 @@
+import"../components/DhtmlxGanttPro/index.vue/index.js";export{default}from"../components/DhtmlxGanttPro/index.vue/index2.js";