Gantt ​

<template>
    <ham-gantt :dataSource="dataSource" :fillMonthNull="1">
        <template #column-head-project="{ row }">
            <el-button v-bind="getIconProp(row)" size="small" circle />
            <div class="link" :title="row.title">
                {{ row.title }}
            </div>
        </template>
    </ham-gantt>
</template>

<script setup>
import { CircleCheck, Warning } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import axios from 'axios'

// 获取图标配置
const getIconProp = row => {
    const base = {}
    base.icon = row.type === 'warning' ? Warning : CircleCheck
    base.type = row.type
    return base
}

// 初始化
const dataSource = ref([])
onMounted(async () => {
    const result = await axios.post('/docApi/component/gantt')
    dataSource.value = result?.data?.data || []
    console.log(dataSource.value)
})
</script>
<style lang="scss" scoped>
.link {
    cursor: pointer;
    padding-left: 6px;
    font-size: 14px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    align-items: center;
    word-break: break-all;
    text-overflow: ellipsis;
    box-sizing: border-box;
    &:hover {
        color: var(--el-color-primary);
    }
}
</style>

<template>
    <ham-gantt :dataSource="dataSource" :fillMonthNull="1">
        <template #column-head-project="{ row }">
            <el-button v-bind="getIconProp(row)" size="small" circle />
            <div class="link" :title="row.title">
                {{ row.title }}
            </div>
        </template>
    </ham-gantt>
</template>

<script setup>
import { CircleCheck, Warning } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import axios from 'axios'

// 获取图标配置
const getIconProp = row => {
    const base = {}
    base.icon = row.type === 'warning' ? Warning : CircleCheck
    base.type = row.type
    return base
}

// 初始化
const dataSource = ref([])
onMounted(async () => {
    const result = await axios.post('/docApi/component/gantt')
    dataSource.value = result?.data?.data || []
    console.log(dataSource.value)
})
</script>
<style lang="scss" scoped>
.link {
    cursor: pointer;
    padding-left: 6px;
    font-size: 14px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    align-items: center;
    word-break: break-all;
    text-overflow: ellipsis;
    box-sizing: border-box;
    &:hover {
        color: var(--el-color-primary);
    }
}
</style>