delete Aof view

src/views/ProductQueueViewAof.vue

-<script setup>
-import { ref } from 'vue'
-import GanttChart from '@/components/GanttChartAof/GanttChart.vue'
-import EmployeeSector from '@/components/EmployeeSector.vue'
-
-
-const employees = Array.from({ length: 10 }, (_, i) => `EM${i + 1}`)
-const orders = ref([
-  { id: 1, name: 'ORDER1' },
-  { id: 2, name: 'ORDER2' },
-  { id: 3, name: 'ORDER3' }
-])
-
-// Drag and drop functionality
-const draggedOrder = ref(null)
-
-const handleDragStart = (order) => {
-  draggedOrder.value = order
-}
-
-const handleDragOver = (event) => {
-  event.preventDefault()
-}
-
-const handleDrop = (targetOrder) => {
-  if (!draggedOrder.value || draggedOrder.value === targetOrder) return
-
-  // Find the indices of the dragged and target orders
-  const draggedIndex = orders.value.findIndex((o) => o.id === draggedOrder.value.id)
-  const targetIndex = orders.value.findIndex((o) => o.id === targetOrder.id)
-
-  // Remove the dragged order from its original position
-  const [removed] = orders.value.splice(draggedIndex, 1)
-
-  // Insert the dragged order at the target position
-  orders.value.splice(targetIndex, 0, removed)
-
-  // Reset the dragged order
-  draggedOrder.value = null
-}
-</script>
-
-<template>
-  <v-container class="pa-0">
-    <!-- Gantt chart -->
-    <v-sheet class="pa-1 mb-3"
-      style="border-radius: 15px; max-width: 98%; margin-left: auto; margin-right: auto; min-height: 460px;">
-      <!-- Gantt Chart -->
-      <GanttChart />
-    </v-sheet>
-
-    <!-- Bottom Section -->
-    <v-row class="mt-1" style="max-width: 100%; margin-left: auto; margin-right: auto;">
-      <!-- Employee Selection -->
-      <v-col cols="6">
-        <v-card class="pa-4" style="background-color: white; border-radius: 15px; min-height: 280px;">
-          <!-- เลือกพนักงานวางทับตรงนี้ -->
-          <EmployeeSector :employees="employees" />
-        </v-card>
-      </v-col>
-
-      <!-- Order Priority -->
-      <v-col cols="6">
-        <v-card class="pa-5" style="background-color: white; border-radius: 15px; min-height: 280px">
-          <p class="text-center font-weight-bold mb-4 text-black" style="font-size: 20px;">ลำดับความสำคัญ</p>
-          <div v-for="order in orders" :key="order.id" class="order-item" draggable="true"
-            @dragstart="() => handleDragStart(order)" @dragover="handleDragOver" @drop="() => handleDrop(order)">
-            {{ order.name }}
-          </div>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-<!-- ส่วน UI ของปุ่ม Order1--2 -->
-<style scoped>
-.order-item {
-  background-color: #2b2e3f;
-  color: white;
-  padding: 7px;
-  margin-bottom: 8px;
-  text-align: center;
-  cursor: move;
-  user-select: none;
-}
-
-.order-item:hover {
-  opacity: 0.9;
-}
-</style>