feat: draggable list & useTableDrag hook (#38)

locales/en_US.json

@@ -89,6 +89,7 @@
   "route": {
     "appRoot": "Home",
     "cardList": "Card list",
+    "draggableList": "Draggable list",
     "commonList": "Common list",
     "dashboard": "Dashboard",
     "demo": "Function example",

locales/zh_CN.json

@@ -126,6 +126,7 @@
     "list": "列表页",
     "commonList": "常用列表",
     "cardList": "卡片列表",
+    "draggableList": "拖拽列表",
     "demo": "功能示例",
     "fetch": "请求示例",
     "echarts": "Echarts示例",

package.json

@@ -60,6 +60,7 @@
     "quill": "^2.0.2",
     "radash": "^12.1.0",
     "vue": "^3.5.1",
+    "vue-draggable-plus": "^0.5.3",
     "vue-i18n": "^9.14.0",
     "vue-router": "^4.4.3"
   },

src/hooks/useTableDrag.ts

@@ -0,0 +1,35 @@
+import type { NDataTable } from 'naive-ui'
+import { useDraggable } from 'vue-draggable-plus'
+
+export function useTableDrag<T = unknown>(params: {
+  tableRef: Ref<InstanceType<typeof NDataTable> | undefined>
+  data: Ref<T[]>
+  onRowDrag: (rows: T[]) => void
+}) {
+  const tableEl = computed(() => params.tableRef?.value?.$el as HTMLElement)
+  const tableBodyRef = ref<HTMLElement | undefined>(undefined)
+
+  const { start } = useDraggable(tableBodyRef, params.data, {
+    immediate: false,
+    animation: 150,
+    handle: '.drag-handle',
+    onEnd: (event) => {
+      const { oldIndex, newIndex } = event
+      const start = Math.min(oldIndex!, newIndex!)
+      const end = Math.max(oldIndex!, newIndex!) - start + 1
+      const changedRows = [...params.data.value].splice(start, end)
+      params.onRowDrag(unref([...changedRows]))
+    },
+  })
+
+  onMounted(async () => {
+    while (!tableBodyRef.value) {
+      tableBodyRef.value = tableEl.value?.querySelector('tbody') || undefined
+      await new Promise(resolve => setTimeout(resolve, 100))
+    }
+  })
+
+  watchOnce(() => tableBodyRef.value, (el) => {
+    el && start()
+  })
+}

src/router/routes.static.ts

@@ -435,4 +435,14 @@ export const staticRoutes: AppRoute.RowRoute[] = [
     id: 43,
     pid: 13,
   },
+  {
+    name: 'draggableList',
+    path: '/list/draggableList',
+    title: '拖拽列表',
+    requiresAuth: true,
+    icon: 'icon-park-outline:menu-fold',
+    componentPath: '/demo/list/draggableList/index.vue',
+    id: 44,
+    pid: 10,
+  },
 ]

src/styles/index.css

@@ -14,3 +14,7 @@ body,
 .gray-mode {
   filter: grayscale(100%);
 }
+
+.drag-handle {
+  cursor: move;
+}

src/views/demo/list/draggableList/index.vue

@@ -0,0 +1,170 @@
+<script setup lang="tsx">
+import type { DataTableColumns, FormInst, NDataTable } from 'naive-ui'
+import { Gender } from '@/constants'
+import { useBoolean } from '@/hooks'
+import { useTableDrag } from '@/hooks/useTableDrag'
+import { fetchUserPage } from '@/service'
+import { NButton, NPopconfirm, NSpace, NSwitch, NTag } from 'naive-ui'
+
+const { bool: loading, setTrue: startLoading, setFalse: endLoading } = useBoolean(false)
+
+const initialModel = {
+  condition_1: '',
+  condition_2: '',
+  condition_3: '',
+  condition_4: '',
+}
+const model = ref({ ...initialModel })
+
+const formRef = ref<FormInst | null>()
+function sendMail(id?: number) {
+  window.$message.success(`删除用户id:${id}`)
+}
+const columns: DataTableColumns<Entity.User> = [
+  {
+    title: '姓名',
+    align: 'center',
+    key: 'userName',
+  },
+  {
+    title: '年龄',
+    align: 'center',
+    key: 'age',
+  },
+  {
+    title: '性别',
+    align: 'center',
+    key: 'gender',
+    render: (row) => {
+      const tagType = {
+        0: 'primary',
+        1: 'success',
+      } as const
+      if (row.gender) {
+        return (
+          <NTag type={tagType[row.gender]}>
+            {Gender[row.gender]}
+          </NTag>
+        )
+      }
+    },
+  },
+  {
+    title: '邮箱',
+    align: 'center',
+    key: 'email',
+  },
+  {
+    title: '状态',
+    align: 'center',
+    key: 'status',
+    render: (row) => {
+      return (
+        <NSwitch
+          value={row.status}
+          checked-value={1}
+          unchecked-value={0}
+          onUpdateValue={(value: 0 | 1) =>
+            handleUpdateDisabled(value, row.id!)}
+        >
+          {{ checked: () => '启用', unchecked: () => '禁用' }}
+        </NSwitch>
+      )
+    },
+  },
+  {
+    title: '操作',
+    align: 'center',
+    key: 'actions',
+    render: (row) => {
+      return (
+        <NSpace justify="center">
+          <NPopconfirm onPositiveClick={() => sendMail(row.id)}>
+            {{
+              default: () => '确认删除',
+              trigger: () => <NButton size="small">删除</NButton>,
+            }}
+          </NPopconfirm>
+        </NSpace>
+      )
+    },
+  },
+]
+
+const listData = ref<Entity.User[]>([])
+function handleUpdateDisabled(value: 0 | 1, id: number) {
+  const index = listData.value.findIndex(item => item.id === id)
+  if (index > -1)
+    listData.value[index].status = value
+}
+
+const tableRef = ref<InstanceType<typeof NDataTable>>()
+useTableDrag({
+  tableRef,
+  data: listData,
+  onRowDrag(data) {
+    const target = data[data.length - 1]
+    window.$message.success(`拖拽数据 id: ${target.id} name: ${target.userName}`)
+  },
+})
+
+onMounted(() => {
+  getUserList()
+})
+async function getUserList() {
+  startLoading()
+  await fetchUserPage().then((res: any) => {
+    listData.value = res.data.list
+    endLoading()
+  })
+}
+function changePage(page: number, size: number) {
+  window.$message.success(`分页器:${page},${size}`)
+}
+function handleResetSearch() {
+  model.value = { ...initialModel }
+}
+</script>
+
+<template>
+  <NSpace vertical size="large">
+    <n-card>
+      <n-form ref="formRef" :model="model" label-placement="left" inline :show-feedback="false">
+        <n-flex>
+          <n-form-item label="姓名" path="condition_1">
+            <n-input v-model:value="model.condition_1" placeholder="请输入" />
+          </n-form-item>
+          <n-form-item label="年龄" path="condition_2">
+            <n-input v-model:value="model.condition_2" placeholder="请输入" />
+          </n-form-item>
+          <n-form-item label="性别" path="condition_3">
+            <n-input v-model:value="model.condition_3" placeholder="请输入" />
+          </n-form-item>
+          <n-form-item label="地址" path="condition_4">
+            <n-input v-model:value="model.condition_4" placeholder="请输入" />
+          </n-form-item>
+          <n-flex class="ml-auto">
+            <NButton type="primary" @click="getUserList">
+              <template #icon>
+                <icon-park-outline-search />
+              </template>
+              搜索
+            </NButton>
+            <NButton strong secondary @click="handleResetSearch">
+              <template #icon>
+                <icon-park-outline-redo />
+              </template>
+              重置
+            </NButton>
+          </n-flex>
+        </n-flex>
+      </n-form>
+    </n-card>
+    <n-card>
+      <NSpace vertical size="large">
+        <n-data-table ref="tableRef" row-class-name="drag-handle" :columns="columns" :data="listData" :loading="loading" />
+        <Pagination :count="100" @change="changePage" />
+      </NSpace>
+    </n-card>
+  </NSpace>
+</template>