1094 lines
29 KiB
Vue
1094 lines
29 KiB
Vue
<script setup lang="ts">
|
||
import { ref, computed, watch } from 'vue'
|
||
import { GanttChart, TaskListColumn, useI18n, TaskListContextMenu, TaskBarContextMenu } from 'jordium-gantt-vue3'
|
||
import 'jordium-gantt-vue3/dist/assets/jordium-gantt-vue3.css'
|
||
|
||
const { t, getTranslation } = useI18n()
|
||
|
||
// GanttChart ref
|
||
const ganttRef = ref(null)
|
||
|
||
// 控制模式：'expose' 使用expose方法，'props' 使用Props
|
||
const controlMode = ref<'expose' | 'props'>('expose')
|
||
|
||
// 状态变量
|
||
const fullscreenStatus = ref(false)
|
||
const expandStatus = ref(false)
|
||
const currentLocaleStatus = ref<'zh-CN' | 'en-US'>('zh-CN')
|
||
const currentScaleStatus = ref<'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'>('week')
|
||
const currentThemeStatus = ref<'light' | 'dark'>('light')
|
||
|
||
// Props控制变量
|
||
const propsLocale = ref<'zh-CN' | 'en-US'>('zh-CN')
|
||
const propsTheme = ref<'light' | 'dark'>('light')
|
||
const propsTimeScale = ref<'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'>('week')
|
||
const propsFullscreen = ref(false)
|
||
const propsExpandAll = ref(false)
|
||
|
||
// 监听 Props 变化，同步 status
|
||
watch(propsLocale, (newLocale) => {
|
||
currentLocaleStatus.value = newLocale
|
||
})
|
||
watch(propsTheme, (newTheme) => {
|
||
currentThemeStatus.value = newTheme
|
||
})
|
||
watch(propsTimeScale, (newScale) => {
|
||
currentScaleStatus.value = newScale
|
||
})
|
||
watch(propsFullscreen, (newFullscreen) => {
|
||
fullscreenStatus.value = newFullscreen
|
||
})
|
||
watch(propsExpandAll, (newExpandAll) => {
|
||
expandStatus.value = newExpandAll
|
||
})
|
||
|
||
// 更新状态函数
|
||
const updateStatus = () => {
|
||
if (ganttRef.value) {
|
||
fullscreenStatus.value = ganttRef.value.isFullscreen()
|
||
expandStatus.value = ganttRef.value.isExpandAll()
|
||
currentLocaleStatus.value = ganttRef.value.currentLocale()
|
||
currentScaleStatus.value = ganttRef.value.currentScale()
|
||
currentThemeStatus.value = ganttRef.value.currentTheme()
|
||
}
|
||
}
|
||
|
||
// Expose 方法处理器
|
||
const handleToggleFullscreen = () => {
|
||
ganttRef.value?.toggleFullscreen()
|
||
updateStatus()
|
||
propsFullscreen.value = ganttRef.value?.isFullscreen() ?? false
|
||
}
|
||
|
||
const handleToggleExpandAll = () => {
|
||
ganttRef.value?.toggleExpandAll()
|
||
updateStatus()
|
||
propsExpandAll.value = ganttRef.value?.isExpandAll() ?? false
|
||
}
|
||
|
||
const handleSetLocale = (locale: 'zh-CN' | 'en-US') => {
|
||
ganttRef.value?.setLocale(locale)
|
||
currentLocaleStatus.value = locale
|
||
propsLocale.value = locale
|
||
}
|
||
|
||
const handleSetTimeScale = (scale: 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year') => {
|
||
ganttRef.value?.setTimeScale(scale)
|
||
updateStatus()
|
||
propsTimeScale.value = scale
|
||
}
|
||
|
||
const handleSetTheme = (mode: 'light' | 'dark') => {
|
||
ganttRef.value?.setTheme(mode)
|
||
updateStatus()
|
||
propsTheme.value = mode
|
||
}
|
||
|
||
const tasks = ref([
|
||
{
|
||
id: 1,
|
||
name: '项目启动',
|
||
startDate: '2025-10-30',
|
||
endDate: '2025-11-5',
|
||
progress: 100,
|
||
department: '管理部',
|
||
departmentCode: 'D001',
|
||
type: 'task',
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '项目启动2',
|
||
startDate: '2025-11-30',
|
||
endDate: '2025-12-5',
|
||
progress: 100,
|
||
department: '管理部',
|
||
departmentCode: 'D001',
|
||
type: 'task',
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '项目启动3',
|
||
startDate: '2025-11-30',
|
||
endDate: '2025-12-5',
|
||
progress: 100,
|
||
department: '管理部',
|
||
departmentCode: 'D001',
|
||
type: 'task',
|
||
},
|
||
])
|
||
|
||
const milestones = ref([
|
||
{
|
||
id: 101,
|
||
name: '项目立项',
|
||
startDate: '2025-10-29',
|
||
type: 'milestone',
|
||
icon: 'diamond',
|
||
},
|
||
])
|
||
|
||
const customMessages = {
|
||
'zh-CN': {
|
||
department: '部门',
|
||
departmentCode: '部门编号',
|
||
// 其他文本
|
||
days: '天111',
|
||
hours: '小时111',
|
||
overtime: '超时111',
|
||
overdue: '逾期111',
|
||
gantt: {
|
||
planStartDate: '计划开始时间',
|
||
//planEndDate: '计划结束时间',
|
||
},
|
||
},
|
||
'en-US': {
|
||
department: 'Department',
|
||
departmentCode: 'Department Code',
|
||
// 其他文本
|
||
days: 'Day111',
|
||
hours: 'Hour111',
|
||
overtime: 'OverTime111',
|
||
overdue: 'OverDue111',
|
||
gantt: {
|
||
planStartDate: 'Plan Start Date',
|
||
planEndDate: 'Plan End Date',
|
||
},
|
||
},
|
||
}
|
||
// const tasks = ref([])
|
||
|
||
// const milestones = ref([])
|
||
|
||
const showAddTaskDrawer = ref(false)
|
||
const showAddMilestoneDialog = ref(false)
|
||
const showTodayLocate = ref(true)
|
||
|
||
// 定义可动态配置的列
|
||
const availableColumns = ref<TaskListColumnConfig[]>([
|
||
{ key: 'startDate', label: '开始日期', visible: true },
|
||
{ key: 'endDate', label: '结束日期', visible: true },
|
||
{ key: 'progress', label: '进度', visible: true },
|
||
{ key: 'department', label: '部门', visible: true, width: 200 },
|
||
{ key: 'departmentCode', label: '部门编号', visible: true },
|
||
{ key: 'assigneeName', label: '负责人', visible: true },
|
||
])
|
||
|
||
// 使用内置TaskDrawer组件的时候，可以传入负责人选项
|
||
// 请先设置GanttChart组件属性use-default-drawer="true"
|
||
const assigneeOptions = ref([
|
||
{ value: 'zhangsan', label: '张三' },
|
||
{ value: 'lisi', label: '李四' },
|
||
{ value: 'wangwu', label: '王五' },
|
||
])
|
||
|
||
// TaskList宽度配置示例
|
||
const taskListConfig = {
|
||
defaultWidth: '50%', // 默认展开宽度50%
|
||
minWidth: '300px', // 最小宽度300px（默认280px）
|
||
maxWidth: '1200px', // 最大宽度1200px（默认1160px）
|
||
columns: availableColumns.value,
|
||
}
|
||
|
||
// toolbar配置示例
|
||
const toolbarConfig: ToolbarConfig = {
|
||
showAddTask: true, // 显示添加任务按钮
|
||
showAddMilestone: true, // 显示添加里程碑按钮
|
||
showTodayLocate: true, // 显示定位到今天按钮
|
||
showExportCsv: true, // 显示导出CSV按钮
|
||
showExportPdf: true, // 显示导出PDF按钮
|
||
showLanguage: true, // 显示语言切换按钮
|
||
showTheme: true, // 显示主题切换按钮
|
||
showFullscreen: true, // 显示全屏按钮
|
||
showTimeScale: true, // 显示时间刻度按钮组
|
||
timeScaleDimensions: [ // 显示所有时间刻度维度
|
||
'hour', 'day', 'week', 'month', 'quarter', 'year',
|
||
],
|
||
defaultTimeScale: 'week', // 默认选中周视图
|
||
showExpandCollapse: false, // 显示展开/折叠按钮
|
||
}
|
||
|
||
const newTask = ref({
|
||
name: '',
|
||
startDate: '',
|
||
endDate: '',
|
||
})
|
||
|
||
const addTask = () => {
|
||
tasks.value.push({
|
||
id: tasks.value.length + 1,
|
||
name: newTask.value.name,
|
||
startDate: newTask.value.startDate,
|
||
endDate: newTask.value.endDate,
|
||
progress: 0,
|
||
})
|
||
newTask.value = { name: '', startDate: '', endDate: '' }
|
||
showAddTaskDrawer.value = false
|
||
}
|
||
|
||
const addMilestone = () => {
|
||
milestones.value.push({
|
||
id: milestones.value.length + 1,
|
||
name: newTask.value.name,
|
||
startDate: newTask.value.startDate,
|
||
progress: 0,
|
||
type: 'milestone',
|
||
icon: 'diamond',
|
||
})
|
||
console.log('milestones: ', milestones.value)
|
||
newTask.value = { name: '', startDate: '', endDate: '' }
|
||
showAddMilestoneDialog.value = false
|
||
}
|
||
|
||
const onTaskDblclick = (task) => {
|
||
alert(`双击任务: ${task.name}`)
|
||
}
|
||
const onTaskClick = (task) => {
|
||
alert(`单击任务: ${task.name}`)
|
||
}
|
||
const onMilestoneDblclick = (milestone) => {
|
||
alert(`双击里程碑: ${milestone.name}`)
|
||
}
|
||
|
||
// 任务行拖拽完成事件（可选）
|
||
const handleTaskRowMoved = async (payload: {
|
||
draggedTask: Task
|
||
targetTask: Task
|
||
position: 'after' | 'child'
|
||
oldParent: Task | null
|
||
newParent: Task | null
|
||
}) => {
|
||
const { draggedTask, targetTask, position, oldParent, newParent } = payload
|
||
|
||
// 组件已自动完成任务移动、parentId更新和TaskList/Timeline同步
|
||
// 监听此事件为完全可选，仅用于：
|
||
|
||
// 1. 调用后端 API 保存新的任务层级关系（示例）
|
||
// 取消注释并替换为你的实际 API 调用
|
||
/*
|
||
try {
|
||
await fetch('/api/tasks/update-hierarchy', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
taskId: draggedTask.id,
|
||
targetTaskId: targetTask.id,
|
||
position: position,
|
||
oldParentId: oldParent?.id,
|
||
newParentId: newParent?.id,
|
||
})
|
||
})
|
||
console.log('任务层级保存成功')
|
||
} catch (error) {
|
||
console.error('保存任务层级失败:', error)
|
||
alert('保存失败，请刷新页面')
|
||
}
|
||
*/
|
||
|
||
// 3. 触发其他业务逻辑（如更新关联数据、记录操作日志等）
|
||
// ...
|
||
}
|
||
|
||
// 任务添加后回调
|
||
// 注意：当use-default-drawer="true"时，组件内部已经自动添加了任务到tasks数组
|
||
// 此回调仅用于补充业务逻辑，例如根据assignee填充assigneeName等
|
||
const onTaskAdded = (res) => {
|
||
// 组件已自动添加任务，这里只需要找到并更新额外字段
|
||
const addedTask = tasks.value.find(t => t.id === res.task.id)
|
||
|
||
if (addedTask && addedTask.assignee) {
|
||
// 根据assignee值查找对应的label并赋值给assigneeName
|
||
const assigneeOption = assigneeOptions.value.find(option => option.value === addedTask.assignee)
|
||
if (assigneeOption) {
|
||
addedTask.assigneeName = assigneeOption.label
|
||
}
|
||
}
|
||
|
||
// 不需要手动push，组件已处理
|
||
}
|
||
|
||
// 自定义右键菜单操作处理
|
||
const handleCustomMenuAction = (action: string, task: Task, onClose: () => void) => {
|
||
alert(`自定义操作: ${action} - 任务: ${task.name}`, 'info', { closable: true })
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<!-- 工具设置面板 -->
|
||
<div class="tool-settings-panel">
|
||
<h3>🔧 External Control Demo</h3>
|
||
|
||
<!-- 当前状态显示 -->
|
||
<div class="status-section">
|
||
<div class="status-item">
|
||
<span class="status-label">Fullscreen:</span>
|
||
<span :class="['status-value', { active: fullscreenStatus }]">
|
||
{{ fullscreenStatus ? '✓ Yes' : '✗ No' }}
|
||
</span>
|
||
</div>
|
||
<div class="status-item">
|
||
<span class="status-label">Expand All:</span>
|
||
<span :class="['status-value', { active: expandStatus }]">
|
||
{{ expandStatus ? '✓ Yes' : '✗ No' }}
|
||
</span>
|
||
</div>
|
||
<div class="status-item">
|
||
<span class="status-label">Locale:</span>
|
||
<span class="status-value active">{{ currentLocaleStatus }}</span>
|
||
</div>
|
||
<div class="status-item">
|
||
<span class="status-label">Time Scale:</span>
|
||
<span class="status-value active">{{ currentScaleStatus }}</span>
|
||
</div>
|
||
<div class="status-item">
|
||
<span class="status-label">Theme:</span>
|
||
<span class="status-value active">{{ currentThemeStatus }}</span>
|
||
</div>
|
||
<div class="status-item">
|
||
<span class="status-label">Control Mode:</span>
|
||
<span class="status-value active" :style="{ color: controlMode === 'props' ? '#67c23a' : '#409eff' }">
|
||
{{ controlMode === 'props' ? '📝 Props' : '⚡ Expose' }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 控制模式切换 -->
|
||
<div class="control-mode-section">
|
||
<h4>🎛️ Control Mode</h4>
|
||
<div class="button-group">
|
||
<button
|
||
class="mode-button"
|
||
:class="{ active: controlMode === 'expose' }"
|
||
@click="controlMode = 'expose'"
|
||
>
|
||
⚡ Expose Methods
|
||
</button>
|
||
<button
|
||
class="mode-button"
|
||
:class="{ active: controlMode === 'props' }"
|
||
@click="controlMode = 'props'"
|
||
>
|
||
📝 Props Control
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Expose 方法控制 -->
|
||
<div v-show="controlMode === 'expose'" class="control-section">
|
||
<h4>⚡ Expose Methods Control</h4>
|
||
|
||
<div class="controls-flow">
|
||
<div class="control-group">
|
||
<label>Fullscreen:</label>
|
||
<button class="control-btn" @click="handleToggleFullscreen">Toggle Fullscreen</button>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label>Expand All:</label>
|
||
<button class="control-btn" @click="handleToggleExpandAll">Toggle Expand All</button>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label>Locale:</label>
|
||
<div class="button-group">
|
||
<button class="control-btn" @click="handleSetLocale('zh-CN')">中文</button>
|
||
<button class="control-btn" @click="handleSetLocale('en-US')">English</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label>Time Scale:</label>
|
||
<div class="button-group">
|
||
<button class="control-btn" @click="handleSetTimeScale('day')">Day</button>
|
||
<button class="control-btn" @click="handleSetTimeScale('week')">Week</button>
|
||
<button class="control-btn" @click="handleSetTimeScale('month')">Month</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label>Theme:</label>
|
||
<div class="button-group">
|
||
<button class="control-btn" @click="handleSetTheme('light')">☀️ Light</button>
|
||
<button class="control-btn" @click="handleSetTheme('dark')">🌙 Dark</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Props 控制 -->
|
||
<div v-show="controlMode === 'props'" class="control-section">
|
||
<h4>📝 Props Control</h4>
|
||
|
||
<div class="controls-flow">
|
||
<div class="control-group">
|
||
<label>Locale Prop:</label>
|
||
<div class="button-group">
|
||
<button
|
||
class="control-btn"
|
||
:class="{ primary: propsLocale === 'zh-CN' }"
|
||
@click="propsLocale = 'zh-CN'"
|
||
>
|
||
中文
|
||
</button>
|
||
<button
|
||
class="control-btn"
|
||
:class="{ primary: propsLocale === 'en-US' }"
|
||
@click="propsLocale = 'en-US'"
|
||
>
|
||
English
|
||
</button>
|
||
</div>
|
||
<p class="prop-info">:locale="{{ propsLocale }}"</p>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label>Theme Prop:</label>
|
||
<div class="button-group">
|
||
<button
|
||
class="control-btn"
|
||
:class="{ primary: propsTheme === 'light' }"
|
||
@click="propsTheme = 'light'"
|
||
>
|
||
☀️ Light
|
||
</button>
|
||
<button
|
||
class="control-btn"
|
||
:class="{ primary: propsTheme === 'dark' }"
|
||
@click="propsTheme = 'dark'"
|
||
>
|
||
🌙 Dark
|
||
</button>
|
||
</div>
|
||
<p class="prop-info">:theme="{{ propsTheme }}"</p>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label>Time Scale Prop:</label>
|
||
<div class="button-group">
|
||
<button
|
||
class="control-btn"
|
||
:class="{ primary: propsTimeScale === 'day' }"
|
||
@click="propsTimeScale = 'day'"
|
||
>
|
||
Day
|
||
</button>
|
||
<button
|
||
class="control-btn"
|
||
:class="{ primary: propsTimeScale === 'week' }"
|
||
@click="propsTimeScale = 'week'"
|
||
>
|
||
Week
|
||
</button>
|
||
<button
|
||
class="control-btn"
|
||
:class="{ primary: propsTimeScale === 'month' }"
|
||
@click="propsTimeScale = 'month'"
|
||
>
|
||
Month
|
||
</button>
|
||
</div>
|
||
<p class="prop-info">:time-scale="{{ propsTimeScale }}"</p>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label>Fullscreen Prop:</label>
|
||
<div class="button-group">
|
||
<button
|
||
class="control-btn"
|
||
:class="{ primary: propsFullscreen }"
|
||
@click="propsFullscreen = true"
|
||
>
|
||
✓ True
|
||
</button>
|
||
<button
|
||
class="control-btn"
|
||
:class="{ primary: !propsFullscreen }"
|
||
@click="propsFullscreen = false"
|
||
>
|
||
✗ False
|
||
</button>
|
||
</div>
|
||
<p class="prop-info">:fullscreen="{{ propsFullscreen }}"</p>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label>Expand All Prop:</label>
|
||
<div class="button-group">
|
||
<button
|
||
class="control-btn"
|
||
:class="{ primary: propsExpandAll }"
|
||
@click="propsExpandAll = true"
|
||
>
|
||
✓ True
|
||
</button>
|
||
<button
|
||
class="control-btn"
|
||
:class="{ primary: !propsExpandAll }"
|
||
@click="propsExpandAll = false"
|
||
>
|
||
✗ False
|
||
</button>
|
||
</div>
|
||
<p class="prop-info">:expand-all="{{ propsExpandAll }}"</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Gantt Chart -->
|
||
<div style="height: 600px; margin-top: 20px;">
|
||
<GanttChart
|
||
ref="ganttRef"
|
||
:tasks="tasks"
|
||
:milestones="milestones"
|
||
:locale="controlMode === 'props' ? propsLocale : undefined"
|
||
:theme="controlMode === 'props' ? propsTheme : undefined"
|
||
:time-scale="controlMode === 'props' ? propsTimeScale : undefined"
|
||
:fullscreen="controlMode === 'props' ? propsFullscreen : undefined"
|
||
:expand-all="controlMode === 'props' ? propsExpandAll : undefined"
|
||
:task-list-config="taskListConfig"
|
||
:toolbar-config="toolbarConfig"
|
||
:use-default-drawer="true"
|
||
:use-default-milestone-dialog="false"
|
||
:locale-messages="customMessages"
|
||
:allow-drag-and-resize="true"
|
||
:enable-task-row-move="true"
|
||
:assignee-options="assigneeOptions"
|
||
@add-milestone="showAddMilestoneDialog = true"
|
||
@task-double-click="onTaskDblclick"
|
||
@task-click="onTaskClick"
|
||
@milestone-double-click="onMilestoneDblclick"
|
||
@task-added="onTaskAdded"
|
||
>
|
||
<TaskListColumn prop="name" label="任务名称" width="300">
|
||
<template #header>
|
||
<strong style="color: #1890ff;">任务名称 (自定义Header)</strong>
|
||
</template>
|
||
<template #default="scope">
|
||
<span style="color: #52c41a;">{{ scope.row.name }}</span>
|
||
</template>
|
||
</TaskListColumn>
|
||
<TaskListColumn prop="startDate" label="开始时间" width="250">
|
||
<template #header>
|
||
<strong style="color: #1890ff;">{{ t.department }}</strong>
|
||
</template>
|
||
</TaskListColumn>
|
||
<TaskListColumn prop="endDate" :label="getTranslation('gantt.planEndDate', '结束的时间')" width="250" />
|
||
|
||
<!-- 使用声明式的 TaskListContextMenu 组件 - 推荐方式 -->
|
||
<TaskListContextMenu>
|
||
<template #default="scope">
|
||
<div class="custom-menu">
|
||
<div class="custom-menu-header">声明式 TaskList 菜单</div>
|
||
<div class="custom-menu-item" @click="handleCustomMenuAction('extend', scope.row)">
|
||
➡️ 延长任务
|
||
</div>
|
||
<div class="custom-menu-item" @click="handleCustomMenuAction('move', scope.row)">
|
||
📅 移动任务
|
||
</div>
|
||
<div class="custom-menu-divider"></div>
|
||
<div class="custom-menu-item" @click="handleCustomMenuAction('copy', scope.row)">
|
||
📄 复制任务
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</TaskListContextMenu>
|
||
|
||
<!-- 使用声明式的 TaskBarContextMenu 组件 - 推荐方式 -->
|
||
<TaskBarContextMenu>
|
||
<template #default="scope">
|
||
<div class="custom-menu">
|
||
<div class="custom-menu-header">声明式 TaskBar 菜单</div>
|
||
<div class="custom-menu-item" @click="handleCustomMenuAction('extend', scope.row)">
|
||
➡️ 延长任务
|
||
</div>
|
||
<div class="custom-menu-item" @click="handleCustomMenuAction('move', scope.row)">
|
||
📅 移动任务
|
||
</div>
|
||
<div class="custom-menu-divider"></div>
|
||
<div class="custom-menu-item" @click="handleCustomMenuAction('copy', scope.row)">
|
||
📄 复制任务
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</TaskBarContextMenu>
|
||
</GanttChart>
|
||
</div>
|
||
<!-- 自定义添加任务按钮 -->
|
||
<div>
|
||
<button class="btn btn-primary" @click="showAddTaskDrawer = true">添加任务</button>
|
||
<button class="btn btn-primary" @click="showAddMilestoneDialog = true">添加里程碑</button>
|
||
<button class="btn btn-primary" @click="showTodayLocate = !showTodayLocate">开启/关闭今日按钮</button>
|
||
</div>
|
||
|
||
<!-- 自定义抽屉组件 (原生HTML替代 el-drawer) -->
|
||
<div v-if="showAddTaskDrawer" class="drawer-overlay" @click="showAddTaskDrawer = false">
|
||
<div class="drawer-container" @click.stop>
|
||
<div class="drawer-header">
|
||
<h3>自定义添加任务组件</h3>
|
||
<button class="close-btn" @click="showAddTaskDrawer = false">×</button>
|
||
</div>
|
||
|
||
<div class="drawer-body">
|
||
<div class="form-item">
|
||
<label>任务名称:</label>
|
||
<input v-model="newTask.name" type="text" placeholder="请输入任务名称" />
|
||
</div>
|
||
|
||
<div class="form-item">
|
||
<label>开始日期:</label>
|
||
<input v-model="newTask.startDate" type="date" />
|
||
</div>
|
||
|
||
<div class="form-item">
|
||
<label>结束日期:</label>
|
||
<input v-model="newTask.endDate" type="date" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="drawer-footer">
|
||
<button class="btn btn-primary" @click="addTask">确定</button>
|
||
<button class="btn btn-default" @click="showAddTaskDrawer = false">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 自定义Dialog组件基于element plus -->
|
||
<el-dialog
|
||
v-model="showAddMilestoneDialog"
|
||
title="自定义添加里程碑组件 - Element Plus"
|
||
width="400px"
|
||
@close="newTask = { name: '', startDate: '', endDate: '' }"
|
||
>
|
||
<template #default>
|
||
<div class="form-item">
|
||
<label>任务名称:</label>
|
||
<el-input v-model="newTask.name" placeholder="请输入任务名称" />
|
||
</div>
|
||
|
||
<div class="form-item">
|
||
<label>日期:</label>
|
||
<el-date-picker v-model="newTask.startDate" type="date" value-format="YYYY-MM-DD" />
|
||
</div>
|
||
</template>
|
||
|
||
<template #footer>
|
||
<el-button @click="addMilestone">确定</el-button>
|
||
<el-button @click="showAddMilestoneDialog = false">取消</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 工具设置面板 */
|
||
.tool-settings-panel {
|
||
background: #f5f7fa;
|
||
border: 1px solid #e4e7ed;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.tool-settings-panel h3 {
|
||
margin: 0 0 15px 0;
|
||
font-size: 18px;
|
||
color: #303133;
|
||
}
|
||
|
||
.tool-settings-panel h4 {
|
||
margin: 15px 0 10px 0;
|
||
font-size: 14px;
|
||
color: #606266;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 状态显示区域 */
|
||
.status-section {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
padding: 10px;
|
||
background: white;
|
||
border-radius: 6px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.status-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 6px 12px;
|
||
background: #f8f9fa;
|
||
border-radius: 4px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.status-label {
|
||
color: #909399;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.status-value {
|
||
color: #606266;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.status-value.active {
|
||
color: #409eff;
|
||
}
|
||
|
||
/* 控制模式区域 */
|
||
.control-mode-section {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.mode-button {
|
||
padding: 8px 20px;
|
||
border: 1px solid #dcdfe6;
|
||
background: white;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 13px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.mode-button:hover {
|
||
border-color: #409eff;
|
||
color: #409eff;
|
||
}
|
||
|
||
.mode-button.active {
|
||
background: #409eff;
|
||
color: white;
|
||
border-color: #409eff;
|
||
}
|
||
|
||
/* 控制区域 */
|
||
.control-section {
|
||
background: white;
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
/* 控制项流式布局容器 */
|
||
.controls-flow {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 15px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.control-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.control-group label {
|
||
font-size: 13px;
|
||
color: #606266;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.button-group {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.control-btn {
|
||
padding: 6px 16px;
|
||
border: 1px solid #dcdfe6;
|
||
background: white;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.control-btn:hover {
|
||
border-color: #409eff;
|
||
color: #409eff;
|
||
}
|
||
|
||
.control-btn.primary {
|
||
background: #67c23a;
|
||
color: white;
|
||
border-color: #67c23a;
|
||
}
|
||
|
||
.prop-info {
|
||
margin: 5px 0 0 0;
|
||
font-size: 11px;
|
||
color: #909399;
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
|
||
/* 暗色主题 */
|
||
:global(html[data-theme='dark']) .tool-settings-panel {
|
||
background: #1e1e1e;
|
||
border-color: #3a3a3a;
|
||
}
|
||
|
||
:global(html[data-theme='dark']) .tool-settings-panel h3,
|
||
:global(html[data-theme='dark']) .tool-settings-panel h4 {
|
||
color: #e0e0e0;
|
||
}
|
||
|
||
:global(html[data-theme='dark']) .status-section {
|
||
background: #2a2a2a;
|
||
}
|
||
|
||
:global(html[data-theme='dark']) .status-item {
|
||
background: #1e1e1e;
|
||
}
|
||
|
||
:global(html[data-theme='dark']) .control-section {
|
||
background: #2a2a2a;
|
||
}
|
||
|
||
:global(html[data-theme='dark']) .mode-button,
|
||
:global(html[data-theme='dark']) .control-btn {
|
||
background: #2a2a2a;
|
||
border-color: #3a3a3a;
|
||
color: #e0e0e0;
|
||
}
|
||
|
||
:global(html[data-theme='dark']) .mode-button:hover,
|
||
:global(html[data-theme='dark']) .control-btn:hover {
|
||
border-color: #409eff;
|
||
}
|
||
|
||
:global(html[data-theme='dark']) .mode-button.active {
|
||
background: #409eff;
|
||
}
|
||
|
||
/* 抽屉遮罩层 */
|
||
.drawer-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 1000;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
animation: fadeIn 0.3s;
|
||
}
|
||
|
||
/* 抽屉容器 */
|
||
.drawer-container {
|
||
width: 400px;
|
||
max-width: 90%;
|
||
background: white;
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
|
||
animation: slideIn 0.3s;
|
||
}
|
||
|
||
/* 抽屉头部 */
|
||
.drawer-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16px 20px;
|
||
border-bottom: 1px solid #e8e8e8;
|
||
}
|
||
|
||
.drawer-header h3 {
|
||
margin: 0;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.close-btn {
|
||
background: none;
|
||
border: none;
|
||
font-size: 24px;
|
||
cursor: pointer;
|
||
color: #999;
|
||
padding: 0;
|
||
width: 32px;
|
||
height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.close-btn:hover {
|
||
background: #f5f5f5;
|
||
color: #333;
|
||
}
|
||
|
||
/* 抽屉主体 */
|
||
.drawer-body {
|
||
flex: 1;
|
||
padding: 20px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* 表单项 */
|
||
.form-item {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.form-item label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.form-item input {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
box-sizing: border-box;
|
||
transition: border-color 0.3s;
|
||
}
|
||
|
||
.form-item input:focus {
|
||
outline: none;
|
||
border-color: #409eff;
|
||
}
|
||
|
||
/* 抽屉底部 */
|
||
.drawer-footer {
|
||
padding: 16px 20px;
|
||
border-top: 1px solid #e8e8e8;
|
||
display: flex;
|
||
gap: 10px;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
/* 按钮样式 */
|
||
.btn {
|
||
padding: 8px 16px;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
border: 1px solid #dcdfe6;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: #409eff;
|
||
color: white;
|
||
border-color: #409eff;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: #66b1ff;
|
||
border-color: #66b1ff;
|
||
}
|
||
|
||
.btn-default {
|
||
background: white;
|
||
color: #606266;
|
||
}
|
||
|
||
.btn-default:hover {
|
||
color: #409eff;
|
||
border-color: #409eff;
|
||
}
|
||
|
||
/* 动画 */
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from { transform: translateX(100%); }
|
||
to { transform: translateX(0); }
|
||
}
|
||
|
||
/* 自定义右键菜单样式 */
|
||
.custom-menu {
|
||
position: fixed;
|
||
z-index: 999999 !important;
|
||
background: white;
|
||
border: 1px solid #ddd;
|
||
border-radius: 6px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
min-width: 200px;
|
||
padding: 8px 0;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.custom-menu-header {
|
||
padding: 10px 16px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
background: #f8f8f8;
|
||
border-bottom: 1px solid #eee;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.custom-menu-item {
|
||
padding: 10px 16px;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
user-select: none;
|
||
}
|
||
|
||
.custom-menu-item:hover {
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
.custom-menu-item.danger {
|
||
color: #ff4d4f;
|
||
}
|
||
|
||
.custom-menu-item.danger:hover {
|
||
background: #fff1f0;
|
||
}
|
||
|
||
.custom-menu-divider {
|
||
height: 1px;
|
||
background: #eee;
|
||
margin: 4px 0;
|
||
}
|
||
|
||
/* 暗色主题下的自定义菜单 */
|
||
:global(html[data-theme='dark']) .custom-menu {
|
||
background: #2a2a2a;
|
||
border-color: #444;
|
||
}
|
||
|
||
:global(html[data-theme='dark']) .custom-menu-header {
|
||
background: #1e1e1e;
|
||
color: #e0e0e0;
|
||
border-bottom-color: #444;
|
||
}
|
||
|
||
:global(html[data-theme='dark']) .custom-menu-item {
|
||
color: #e0e0e0;
|
||
}
|
||
|
||
:global(html[data-theme='dark']) .custom-menu-item:hover {
|
||
background: #353535;
|
||
}
|
||
|
||
:global(html[data-theme='dark']) .custom-menu-item.danger {
|
||
color: #ff6b6b;
|
||
}
|
||
|
||
:global(html[data-theme='dark']) .custom-menu-item.danger:hover {
|
||
background: #3a2020;
|
||
}
|
||
|
||
:global(html[data-theme='dark']) .custom-menu-divider {
|
||
background: #444;
|
||
}
|
||
</style>
|