vue3甘特图ganttastic高级修改版（日程安排组件）_vue-ganttastic

由于甘特图组件付费的太多晚上组件五花八门，所以我找了个还不错简单方便的组件进行了再封装和一些bug修复。原组件地址为Getting started | Vue-Ganttastic

上才艺：

可以拖到左右编辑更改时间，也可以双击它手动更改或删除日程

  1.先安装原版组件

npm install @infectoone/vue-ganttastic

2.vue3挂载组件

import { createApp } from "vue"
import App from "./App.vue"
...
import ganttastic from '@infectoone/vue-ganttastic'
...
createApp(App)
  .use(ganttastic)
  .mount('#app')

3.封装为组件（这里加了我自己更改所以封装成了组件，但是组件没有封装完成，数据传递都没写所以需要自己写这一部分因为每个人的后端返回数据不一样。）

<!-- 此组件暂未完成封装，需要与后端交流数据格式 -->
<!-- 具体怎么用呢？请看文档https://zunnzunn.github.io/vue-ganttastic/GGanttRow.html#slots -->
<template>
  <div>
    <g-gantt-chart
      chart-start="00:00"
      chart-end="23:59"
      precision="hour"
      date-format="HH:mm"
      bar-start="myBeginDate"
      bar-end="myEndDate"
      grid="true"
      @dblclick-bar="dbRow"
    >
      <!-- 这行代码确实有用请别删 -->
      <template #upper-timeunit>
        <div></div>
      </template>
 
      <g-gantt-row :bars="item" v-for="(item, index) in context" :key="index">
        <template #label>
          <div>{{ item[0].week }}</div>
 
          <el-tag
            @click="addTimeLine(item)"
            v-show="item[0].myBeginDate == '00:00' && item[0].myEndDate == '00:00'"
            style="margin-left: 10px"
            >点击添加时间线</el-tag
          >
        </template>
 
        <template #bar-label="scope">
          <el-tooltip effect="dark" content="双击编辑" placement="top">
            <div> {{ scope.bar.myBeginDate + '--' + scope.bar.myEndDate }}</div>
          </el-tooltip>
        </template>
      </g-gantt-row>
    </g-gantt-chart>
    <!-- 修改时间 -->
    <el-dialog v-model="visible" title="操作时间线" width="500" align-center class="dia">
      <el-time-picker
        v-model="value1"
        is-range
        format="HH:mm"
        value-format="HH:mm"
        range-separator="To"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="updateTime">确定</el-button>
          <el-button type="danger" @click="deleteTime"> 删除 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
//组件封装思路，由于这个组件必须传一个ganttBarConfig属性作为位置项，
//我估计后端会传回日期和起止时间，然后props接受日期和起止时间，还差一个ganttBarConfig参数，这里我
//想的是通过计算属性再加上这个ganttBarConfig
//双击row事件
const dbRow = (a) => {
  value1.value = [a.bar.myBeginDate, a.bar.myEndDate]
  indexNow.value = a.bar.ganttBarConfig.id
  visible.value = true
}
//时间选择器组件值
const value1 = ref<[string, string]>(['08:40', '09:50'])
//当前处于星期几
const indexNow = ref(0)
//添加时间线
const addTimeLine = (item) => {
  item[0].myBeginDate = '13:00'
  item[0].myEndDate = '18:00'
}
//更改时间线
const updateTime = () => {
  context.value[indexNow.value][0].myBeginDate = value1.value[0]
  context.value[indexNow.value][0].myEndDate = value1.value[1]
  visible.value = false
}
//删除操作及将时间设置为'00:00'
const deleteTime = () => {
  context.value[indexNow.value][0].myBeginDate = '00:00'
  context.value[indexNow.value][0].myEndDate = '00:00'
  visible.value = false
}
const visible = ref(false)
const context = ref([
  [
    {
      week: '星期一',
      myBeginDate: '00:00',
      myEndDate: '00:00',
      ganttBarConfig: {
        id: '0', //唯一标识不能一样
        hasHandles: true
      }
    }
  ],
  [
    {
      week: '星期二',
      myBeginDate: '13:00',
      myEndDate: '19:00',
      ganttBarConfig: {
        id: '1',
        hasHandles: true
      }
    }
  ],
  [
    {
      week: '星期三',
      myBeginDate: '13:00',
      myEndDate: '19:00',
      ganttBarConfig: {
        id: '2',
        hasHandles: true
      }
    }
  ],
  [
    {
      week: '星期四',
      myBeginDate: '13:00',
      myEndDate: '19:00',
      ganttBarConfig: {
        id: '3',
        hasHandles: true
      }
    }
  ],
  [
    {
      week: '星期五',
      myBeginDate: '13:00',
      myEndDate: '19:00',
      ganttBarConfig: {
        id: '4',
        hasHandles: true
      }
    }
  ],
  [
    {
      week: '星期六',
      myBeginDate: '13:00',
      myEndDate: '19:00',
      ganttBarConfig: {
        id: '5',
        hasHandles: true
      }
    }
  ],
  [
    {
      week: '星期天',
      myBeginDate: '13:00',
      myEndDate: '19:00',
      ganttBarConfig: {
        id: '6',
        hasHandles: true
      }
    }
  ]
])
// const row2BarList = ref()
</script>
<style scoped lang="scss">
.dialog-footer{
  display: flex;
  justify-content: center;
}
:deep(.g-upper-timeunit) {
  height: 0 !important;
}
:deep(.g-timeaxis) {
  height: auto !important;
  min-height: 0 !important;
}
:deep(.g-gantt-row-label) {
  height: 100% !important;
}
:deep(.dia .el-dialog__body) {
  padding: 20px !important;
}
:deep(.el-date-editor) {
  display: flex;
  margin: 0 auto;
}
</style>