简单易用的vue3甘特图组件：mzgantt-vue3

基于 MZGantt 的 Vue 3 封装组件，在浏览器中以组件形式嵌入甘特图，支持编辑、导出图片、多语言等能力（具体能力以底层 MZGantt 版本为准）。

---

一、安装

在项目根目录执行：

npm install mzgantt-vue3 mzgantt

若使用 pnpm / yarn：

pnpm add mzgantt-vue3 mzgantt
# 或
yarn add mzgantt-vue3 mzgantt

安装完成后，在 package.json 的 dependencies 中应能看到 mzgantt-vue3 与 mzgantt。

---

二、在 Vite + Vue 3 项目中接入（详细步骤）

以下步骤与官方示例工程 mzgantt-vue3-sample 的用法一致，可按顺序操作。

步骤 1：确认工程为 Vue 3

使用 Vite 创建的项目需在 package.json 中依赖 vue ^3.x，入口一般为 main.js / main.ts：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

步骤 2：在页面中注册组件

在需要使用甘特图的 Vue 单文件组件（如 App.vue）的 <script setup> 中引入默认导出：

import MZGantt from 'mzgantt-vue3'

无需再注册全局组件；<script setup> 下导入的组件可直接在模板中使用。

步骤 3：编写模板与数据

在模板中放置组件，并传入数据、配置与事件。下面是一段与示例项目等价的结构（含工具栏与加载状态，可按需删减）：

<template>
  <div class="demo-container">
    <div class="toolbar">
      <button @click="exportImage">导出图片</button>
      <button @click="refresh">刷新甘特图</button>
      <button @click="changeScale('day')">日刻度</button>
      <button @click="changeScale('week')">周刻度</button>
      <button @click="changeScale('month')">月刻度</button>
      <button @click="toggleEditable">{{ editable ? '切换只读' : '切换编辑' }}</button>
      <button @click="reloadData" :disabled="loading">重新加载数据</button>
    </div>

    <div class="gantt-wrapper" :style="{ position: 'relative' }">
      <MZGantt
        ref="ganttRef"
        :data="ganttData"
        :config="ganttConfig"
        :editable="editable"
        :exportable="true"
        :onBeforeInit="handleBeforeInit"
        scale="day"
        lang="cn"
        @clickBar="onClickBar"
        @loaded="onLoaded"
      />

      <div v-if="loading" class="loading-overlay">
        <div class="spinner"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import MZGantt from 'mzgantt-vue3'

const ganttRef = ref(null)
const editable = ref(true)
const loading = ref(false)
const ganttData = ref([])

const ganttConfig = {
  columns: [
    { name: 'seq', field: 'seq' },
    { name: 'name', field: 'name', title: '任务名称', width: 150 },
    { name: 'resId', field: 'resId', title: '责任人', width: 80 },
    { name: 'planStart', field: 'planStart', title: '计划开始', width: 120 },
    { name: 'planEnd', field: 'planEnd', title: '计划完成', width: 120 },
    { name: 'pctComp', field: 'pctComp', title: '完成度', width: 80 }
  ],
  showTrack: 1,
  showDependencies: 1,
  ganttStatus: 'e',
  rowHeight: 40,
  leftSideWidth: 300
}

/** 初始化前回调：可在此写入 MZGantt 官方提供的授权逻辑（请使用您获得的授权代码） */
const handleBeforeInit = (MZGanttApi, props) => {
  // 将授权相关代码粘贴于此（示例项目中含完整演示）
}

const getMockData = () => [
  {
    id: 1,
    name: '任务 A',
    plan: [{ start: '2025-03-10', end: '2025-03-12', dur: 3 }],
    resId: '张三',
    pctComp: 30
  }
]

const fetchData = () =>
  new Promise((resolve) => {
    setTimeout(() => resolve(getMockData()), 100)
  })

const loadData = async () => {
  loading.value = true
  try {
    ganttData.value = await fetchData()
  } finally {
    loading.value = false
  }
}

const reloadData = () => loadData()

const exportImage = () => {
  ganttRef.value?.exportImage(60, '甘特图示例')
}

const refresh = () => {
  ganttRef.value?.refresh()
}

const changeScale = (scale) => {
  ganttRef.value?.changeScale(scale)
}

const toggleEditable = () => {
  editable.value = !editable.value
}

const onClickBar = (row, eventXY) => {
  console.log('点击进度条:', row?.name, '日期:', eventXY?.date)
}

const onLoaded = (instance) => {
  console.log('甘特图加载完成', instance)
}

onMounted(() => {
  loadData()
})
</script>

步骤 4：启动开发服务器

npm run dev

浏览器打开控制台，确认无模块解析错误；甘特图应随 ganttData 渲染。

步骤 5：生产构建

npm run build

将产物部署到静态服务器或集成到现有后端模板即可。

---

三、组件 API 说明

3.1 Props

属性	类型	默认值	说明
data	Array	[]	甘特图数据，需符合 MZGantt 数据模型
config	Object	{}	列、行高、左侧宽度等配置，见 MZGantt 文档
scale	string	'day'	时间刻度：day / week / month / quarter
editable	boolean	true	是否可编辑
exportable	boolean	true	是否启用导出图片能力
lang	string	'cn'	语言：cn / en / jp
licenseKey	string	''	授权 Key（若官方提供该方式）
width	string	'100%'	容器宽度
height	string	'500px'	容器高度
showInitLoading	`Object	null`	null
onBeforeInit	`Function	null`	null

3.2 事件（Emits）

事件名	说明
loaded	甘特图实例创建完成，参数为底层实例
clickBar	点击进度条
dblClickBar	双击进度条
rightClick	右键
cellRender / rowRender / barRender	单元格 / 行 / 条渲染
clickRow	点击行
cellBlur	单元格失焦
barDragEnd / rowDragEnd	拖拽结束

4.3 通过 ref 调用的方法（defineExpose）

在子组件上使用 ref="ganttRef" 后，可通过 ganttRef.value 调用：

方法	说明
updateData(newData)	更新数据并重绘
refresh()	刷新绘制
getAllRows()	获取所有行
getSelectedRows()	获取选中行
exportImage(titleHeight?, titleStr?)	导出图片
changeScale(newScale)	切换刻度
getInstance()	获取底层 MZGantt 实例

示例（与演示项目一致）：

ganttRef.value?.exportImage(60, '甘特图示例')
ganttRef.value?.changeScale('week')

---

四、数据与进阶配置

• 任务数据结构、config 各字段含义、与后端对接方式，请以 MZGantt 官方文档 为准。
• 列配置中的 field 需与数据字段对应；plan 等字段格式需符合核心库约定。

---

五、常见问题

1. 安装后报找不到 mzgantt

   请确认已执行 npm install mzgantt，且版本满足 mzgantt-vue3 的 peerDependencies。

2. 样式异常

   核心样式由 mzgantt 提供；若使用构建后的 mzgantt-vue3 产物，请按发布版本说明是否需额外引入 dist/style.css（以当前发布包为准）。

3. 本地调试组件源码

   可在业务项目 package.json 中使用 "mzgantt-vue3": "file:../mzgantt-vue3" 链接本地包，修改后需在组件包目录执行构建再刷新示例。

---