vue 甘特圖 vxe-gantt 如何實現標記刪除數據，顯示標記刪除後行效果，獲取已標記的行數據

https://gantt.vxeui.com

標記為待刪除狀態，通過調用 setPendingRow 方法標記為待刪除狀態，由內部 CRUD 管理器自動記錄操作行為，可以通過 getPendingRecords 獲取；

<template>
  <div>
    <vxe-button status="success" @click="getPendingEvent">獲取已標記數據</vxe-button>
    <vxe-gantt ref="ganttRef" v-bind="ganttOptions">
      <template #action="{ row }">
        <vxe-button mode="text" status="error" @click="pendingRow(row, true)">標記</vxe-button>
        <vxe-button mode="text" @click="pendingRow(row, false)">取消</vxe-button>
      </template>
    </vxe-gantt>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { VxeUI, VxeGanttProps, VxeGanttInstance } from 'vxe-gantt'

interface RowVO {
  id: number
  title: string
  start: string
  end: string
  progress: number
}

const ganttRef = ref<VxeGanttInstance<RowVO>>()

const ganttOptions = reactive<VxeGanttProps<RowVO>>({
  border: true,
  showOverflow: true,
  keepSource: true,
  height: 500,
  taskBarConfig: {
    showProgress: true, // 是否顯示進度條
    showContent: true, // 是否在任務條顯示內容
    moveable: true, // 是否允許拖拽任務移動日期
    barStyle: {
      round: true, // 圓角
      bgColor: '#fca60b', // 任務條的背景顏色
      completedBgColor: '#65c16f' // 已完成部分任務條的背景顏色
    }
  },
  taskViewConfig: {
    tableStyle: {
      width: 480 // 表格寬度
    }
  },
  editConfig: {
    trigger: 'dblclick',
    mode: 'cell',
    showStatus: true
  },
  keyboardConfig: {
    isEdit: true, // 是否開啓任意鍵進入編輯（功能鍵除外）
    isDel: true, // 是否開啓刪除鍵功能
    isEsc: true // 是否開啓Esc鍵關閉編輯功能
  },
  columns: [
    { type: 'seq', width: 70 },
    { field: 'title', title: '任務名稱', minWidth: 160, editRender: { name: 'VxeInput' } },
    { field: 'start', title: '開始時間', width: 120, editRender: { name: 'VxeDatePicker' } },
    { field: 'end', title: '結束時間', width: 120, editRender: { name: 'VxeDatePicker' } },
    { field: 'progress', title: '進度(%)', width: 140, editRender: { name: 'VxeNumberInput' } },
    { field: 'action', title: '操作', fixed: 'right', width: 140, slots: { default: 'action' } }
  ],
  data: [
    { id: 10001, title: '任務1', start: '2024-03-01', end: '2024-03-04', progress: 3 },
    { id: 10002, title: '任務2', start: '2024-03-03', end: '2024-03-08', progress: 10 },
    { id: 10003, title: '任務3', start: '2024-03-03', end: '2024-03-11', progress: 90 },
    { id: 10004, title: '任務4', start: '2024-03-05', end: '2024-03-11', progress: 15 },
    { id: 10005, title: '任務5', start: '2024-03-08', end: '2024-03-15', progress: 100 },
    { id: 10006, title: '任務6', start: '2024-03-10', end: '2024-03-21', progress: 5 },
    { id: 10007, title: '任務7', start: '2024-03-15', end: '2024-03-24', progress: 70 },
    { id: 10008, title: '任務8', start: '2024-03-05', end: '2024-03-15', progress: 50 },
    { id: 10009, title: '任務9', start: '2024-03-19', end: '2024-03-20', progress: 5 },
    { id: 10010, title: '任務10', start: '2024-03-12', end: '2024-03-20', progress: 10 },
    { id: 10011, title: '任務11', start: '2024-03-01', end: '2024-03-08', progress: 90 },
    { id: 10012, title: '任務12', start: '2024-03-03', end: '2024-03-06', progress: 60 },
    { id: 10013, title: '任務13', start: '2024-03-02', end: '2024-03-05', progress: 50 },
    { id: 10014, title: '任務14', start: '2024-03-04', end: '2024-03-15', progress: 0 },
    { id: 10015, title: '任務15', start: '2024-03-01', end: '2024-03-05', progress: 30 }
  ]
})

const pendingRow = async (row: RowVO, status: boolean) => {
  const $gantt = ganttRef.value
  if ($gantt) {
    $gantt.setPendingRow(row, status)
  }
}

const getPendingEvent = () => {
  const $gantt = ganttRef.value
  if ($gantt) {
    const pendingRecords = $gantt.getPendingRecords()
    VxeUI.modal.alert(`標記：${pendingRecords.length} 行`)
  }
}
</script>

https://gitee.com/x-extends/vxe-gantt