<template>
<div>
<DxGantt
:tasks="tasks"
:dependencies="dependencies"
:resourceAssignments="resourceAssignments"
:resources="resources"
:columns="columns"
:rootTaskId="1"
:taskTitlePosition="'inside'"
:showResources="true"
:showRowLines="true"
:scaleType="'minutes'"
:editing="editing"
:validation="validation"
@taskUpdated="onTaskUpdated"
@taskMoving="onTaskMoving"
>
<DxBar
:items="toolbarItems"
:location="'before'"
/>
<DxSelectionSettings
:showCheckBoxesMode="'onClick'"
/>
<DxScaleTypeRangeSettings
:min="minScale"
:max="maxScale"
:scaleType="'minutes'"
/>
<DxExport :enabled="true" />
</DxGantt>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import {
DxGantt,
DxBar,
DxSelectionSettings,
DxScaleTypeRangeSettings,
DxExport,
} from 'devextreme-vue/gantt';
import 'devextreme/ui/gantt';
import 'devextreme/ui/toolbar';
export default defineComponent({
components: {
DxGantt,
DxBar,
DxSelectionSettings,
DxScaleTypeRangeSettings,
DxExport,
},
setup() {
const tasks = ref([{
id: 1,
title: 'Project',
start: '2020-01-01T08:00:00',
end: '2020-01-02T09:00:00',
progress: 0.6,
}]);
const dependencies = ref([]);
const resourceAssignments = ref([]);
const resources = ref([]);
const columns = ref([]);
const editing = ref({});
const validation = ref({});
const toolbarItems = ref([
'undo',
'redo',
'separator',
{
widget: 'dxButton',
location: 'before',
options: {
text: 'Custom',
onClick: () => alert('Custom button clicked'),
},
},
]);
const minScale = ref('minutes');
const maxScale = ref('months');
const onTaskUpdated = (e) => {
// 自定义任务更新逻辑
};
const onTaskMoving = (e) => {
// 自定义任务移动逻辑
};
return {
tasks,
dependencies,
resourceAssignments,
resources
评论已关闭