93 lines
2.6 KiB
Vue
93 lines
2.6 KiB
Vue
<!-- MES 甘特图编辑 -->
|
||
<template>
|
||
<doc-alert title="【生产】生产排产、工序流转卡" url="https://doc.iocoder.cn/mes/pro/schedule-card/" />
|
||
|
||
<ContentWrap>
|
||
<div class="mb-10px flex items-center justify-between">
|
||
<span class="text-14px text-gray-500">
|
||
可直接拖拽/拉伸任务条，或双击编辑开始时间和时长，修改后点击"批量保存"
|
||
</span>
|
||
<div>
|
||
<el-badge :value="pendingCount" :hidden="pendingCount === 0" class="mr-10px">
|
||
<el-button
|
||
type="primary"
|
||
@click="handleSave"
|
||
:loading="formLoading"
|
||
:disabled="pendingCount === 0"
|
||
>
|
||
批量保存
|
||
</el-button>
|
||
</el-badge>
|
||
<el-button @click="handleRefresh">刷新</el-button>
|
||
</div>
|
||
</div>
|
||
<GanttChart
|
||
:tasks="taskList"
|
||
:readonly="false"
|
||
:height="ganttHeight"
|
||
@task-update="handleTaskUpdate"
|
||
/>
|
||
</ContentWrap>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ProTaskApi } from '@/api/mes/pro/task'
|
||
import GanttChart from '../components/GanttChart.vue'
|
||
|
||
defineOptions({ name: 'MesProTaskGanttEdit' })
|
||
|
||
const message = useMessage() // 消息弹窗
|
||
|
||
const formLoading = ref(false) // 提交的按钮禁用
|
||
const taskList = ref<any[]>([]) // 甘特图任务数据
|
||
|
||
const pendingChanges = ref(new Map<number, any>()) // 待保存的修改 Map<taskId, changeData>
|
||
const pendingCount = computed(() => pendingChanges.value.size) // 待保存数量
|
||
const ganttHeight = computed(() => window.innerHeight - 180) // 甘特图高度
|
||
|
||
/** 加载甘特图数据 */
|
||
const loadGanttData = async () => {
|
||
taskList.value = await ProTaskApi.getGanttTaskList({})
|
||
}
|
||
|
||
/** 任务编辑回调 */
|
||
const handleTaskUpdate = (change: any) => {
|
||
pendingChanges.value.set(change.id, change)
|
||
}
|
||
|
||
/** 批量保存 */
|
||
const handleSave = async () => {
|
||
if (pendingChanges.value.size === 0) {
|
||
return
|
||
}
|
||
formLoading.value = true
|
||
try {
|
||
const promises = Array.from(pendingChanges.value.values()).map((change) =>
|
||
ProTaskApi.updateTask({
|
||
id: change.id,
|
||
startTime: change.startTime,
|
||
endTime: change.endTime,
|
||
duration: change.duration
|
||
} as any)
|
||
)
|
||
await Promise.all(promises)
|
||
message.success(`已保存 ${pendingChanges.value.size} 条修改`)
|
||
pendingChanges.value = new Map()
|
||
// 重新加载数据
|
||
await loadGanttData()
|
||
} finally {
|
||
formLoading.value = false
|
||
}
|
||
}
|
||
|
||
/** 刷新 */
|
||
const handleRefresh = async () => {
|
||
pendingChanges.value = new Map()
|
||
await loadGanttData()
|
||
}
|
||
|
||
/** 初始化 */
|
||
onMounted(async () => {
|
||
await loadGanttData()
|
||
})
|
||
</script>
|