vue3写拖拉拽list

<template>
  <div mt20px>
    <!-- 左侧面板 - 审批流程 -->
    <div class="md:col-span-1">
      <a-card>
        <div font-600>审批流程</div>
        <div class="text-sm text-gray-500" my10px>拖拽调整审批组顺序</div>
 
        <VueDraggable v-model="approvalGroups" item-key="id" @end="handleDragEnd">
          <div v-for="(item, index) in approvalGroups" :key="item.id" mb10px>
            <div
              :class="[
                'p-1 border rounded-md flex items-center justify-between',
                selectedGroupIndex === index ? 'border-primary bg-primary-50' : 'border-gray-200',
              ]"
              @click="setSelectedGroupIndex(index)"
            >
              <div class="flex items-center gap-2">
                <icon-drag class="h-5 w-5 text-gray-500 cursor-grab" />
                <div>
                  <p class="font-medium">{{ item.name }}</p>
                  <p class="text-sm text-gray-500">{{ item.approvers.length }} 位审批人</p>
                </div>
              </div>
              <a-button type="text" shape="circle" @click.stop="removeApprovalGroup(index)">
                <template #icon>
                  <icon-delete class="h-4 w-4" />
                </template>
              </a-button>
            </div>
          </div>
        </VueDraggable>
 
        <a-button class="w-full mt-4" @click="addApprovalGroup">
          <template #icon>
            <icon-plus class="h-4 w-4 mr-2" />
          </template>
          添加审批组
        </a-button>
      </a-card>
    </div>
  </div>
 
  <div @click="ceshi">123123</div>
</template>
 
<script setup lang="ts">
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
 
// 审批组状态
const approvalGroups = ref([
  {
    id: 'group1',
    name: '部门经理审批',
    description: '由部门经理进行初步审批',
    approvers: [
      { id: 'user1', name: '张三', type: 'user', source: 'platform' },
      { id: 'user2', name: '李四', type: 'user', source: 'platform' },
    ],
    approvalType: 'any',
  },
  {
    id: 'group2',
    name: '财务审批',
    description: '由财务部门进行审批',
    approvers: [
      { id: 'group1', name: '财务部', type: 'group', source: 'platform' },
      { id: 'user4', name: '赵六', type: 'user', source: 'external' },
    ],
    approvalType: 'any',
  },
])
 
// 当前选中审批组的索引
const selectedGroupIndex = ref<number | null>(null)
 
// 添加新审批组
const addApprovalGroup = () => {
  const newGroup = {
    id: `group${approvalGroups.value.length + 1}`,
    name: `审批组 ${approvalGroups.value.length + 1}`,
    description: '请添加描述',
    approvers: [],
    approvalType: 'any',
  }
  approvalGroups.value.push(newGroup)
  selectedGroupIndex.value = approvalGroups.value.length - 1
}
 
// 删除审批组
const removeApprovalGroup = (index: number) => {
  approvalGroups.value.splice(index, 1)
 
  if (selectedGroupIndex.value === index) {
    selectedGroupIndex.value = null
  } else if (selectedGroupIndex.value !== null && selectedGroupIndex.value > index) {
    selectedGroupIndex.value -= 1
  }
}
 
// 处理拖拽结束
const handleDragEnd = (event: any) => {
  const { oldIndex, newIndex } = event
  if (selectedGroupIndex.value === oldIndex) {
    selectedGroupIndex.value = newIndex
  }
}
 
// 设置选中审批组
const setSelectedGroupIndex = (index: number) => {
  selectedGroupIndex.value = index
}
 
const ceshi = () => {
  console.log(approvalGroups.value, '123123')
}
</script>