From c50457f8ee631d7725995d815e2850a1d8efd602 Mon Sep 17 00:00:00 2001
From: ycy <2861518472@qq.com>
Date: Tue, 16 Apr 2024 16:09:13 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=8B=96=E5=8A=A8=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  1 +
 src/layout/components/LayoutAside.vue         |  3 +
 .../components/DoubleBox.vue                  | 13 +++
 .../components/TextVue.vue                    | 13 +++
 src/pages/finance-bill-manage/drag.vue        | 81 +++++++++++++++++++
 src/router/modules/financeBillManage.js       |  9 +++
 6 files changed, 120 insertions(+)
 create mode 100644 src/pages/finance-bill-manage/components/DoubleBox.vue
 create mode 100644 src/pages/finance-bill-manage/components/TextVue.vue
 create mode 100644 src/pages/finance-bill-manage/drag.vue

diff --git a/package.json b/package.json
index f7e0f63..4d9efa9 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
     "prettier": "^3.2.5",
+    "sortablejs": "^1.15.2",
     "tdesign-vue-next": "^1.9.3",
     "vite-plugin-mock": "^3.0.1",
     "vue": "^3.4.21",
diff --git a/src/layout/components/LayoutAside.vue b/src/layout/components/LayoutAside.vue
index 5ee21e2..4b6e2af 100644
--- a/src/layout/components/LayoutAside.vue
+++ b/src/layout/components/LayoutAside.vue
@@ -37,6 +37,9 @@
         <t-menu-item value="2-8" to="/Bill/BillDraw">
           <span>票据列表</span>
         </t-menu-item>
+        <t-menu-item value="2-9" to="/Bill/drag">
+          <span>拖拽效果</span>
+        </t-menu-item>
       </t-submenu>
       <t-submenu value="3" title="应收款管理">
         <template #icon>
diff --git a/src/pages/finance-bill-manage/components/DoubleBox.vue b/src/pages/finance-bill-manage/components/DoubleBox.vue
new file mode 100644
index 0000000..5fb25cf
--- /dev/null
+++ b/src/pages/finance-bill-manage/components/DoubleBox.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <div class="double-box">double-box</div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.double-box {
+  width: 186px;
+  height: 180px;
+  background-color: rgb(8, 48, 139);
+}
+</style>
diff --git a/src/pages/finance-bill-manage/components/TextVue.vue b/src/pages/finance-bill-manage/components/TextVue.vue
new file mode 100644
index 0000000..0de0ecd
--- /dev/null
+++ b/src/pages/finance-bill-manage/components/TextVue.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <div class="little-box">little-box</div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.little-box {
+  width: 75px;
+  height: 75px;
+  background-color: greenyellow;
+}
+</style>
diff --git a/src/pages/finance-bill-manage/drag.vue b/src/pages/finance-bill-manage/drag.vue
new file mode 100644
index 0000000..ea110a2
--- /dev/null
+++ b/src/pages/finance-bill-manage/drag.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="grid">
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <TextVue class="grid-div grid-item-lm" />
+    <DoubleBox class="grid-double grid-item-lm" />
+    <DoubleBox class="grid-double grid-item-lm" />
+    <DoubleBox class="grid-double grid-item-lm" />
+    <DoubleBox class="grid-double grid-item-lm" />
+    <DoubleBox class="grid-double grid-item-lm" />
+    <DoubleBox class="grid-double grid-item-lm" />
+    <!-- <DoubleBox class="grid-double grid-item-lm" /> -->
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from "vue";
+import Sortable from "sortablejs";
+import TextVue from "./components/TextVue.vue";
+import DoubleBox from "./components/DoubleBox.vue";
+
+//使用onMounted是因为要等到标签渲染完成后在querySelector才能获取到带有grid类名的div盒子，否则grid常量为null，报错。
+onMounted(() => {
+  const grid = document.querySelector(".grid");
+
+  //sortable对象
+  new Sortable(grid, {
+    animation: 150,
+    handle: ".grid-item-lm", //对grid的子对象中，带有.grid-item启动拖拽效果
+  });
+});
+</script>
+
+<style scoped>
+.grid {
+  padding: 20px 10%;
+  display: grid;
+  justify-content: center;
+  align-items: center;
+  /*  声明列的高度  */
+  grid-template-columns: repeat(auto-fill, 75px);
+  /*  声明行的高度  */
+  grid-template-rows: repeat(auto-fill, 75px);
+  /*  声明行间距和列间距  */
+  grid-gap: 36px;
+}
+
+.grid-div {
+  /*  声明宽占4个小盒子  */
+  grid-column: span 1;
+  /*  声明高占2个小盒子  */
+  grid-row: span 1;
+}
+
+.grid-double {
+  grid-column: span 2;
+  grid-row: span 2;
+}
+</style>
diff --git a/src/router/modules/financeBillManage.js b/src/router/modules/financeBillManage.js
index 355bc5e..69676b1 100644
--- a/src/router/modules/financeBillManage.js
+++ b/src/router/modules/financeBillManage.js
@@ -7,6 +7,7 @@ import BillBreakagekURL from "@/pages/finance-bill-manage/billBreakage.vue";
 import BillDestroyURL from "@/pages/finance-bill-manage/billDestroy.vue";
 import DetailReportURL from "@/pages/finance-bill-manage/detailReport.vue";
 import BillDrawURL from "@/pages/finance-bill-manage/billDraw.vue";
+import dragUrl from "@/pages/finance-bill-manage/drag.vue";
 
 const financeBillManage = [
   {
@@ -79,6 +80,14 @@ const financeBillManage = [
           title: "报表明细",
         },
       },
+      {
+        path: "drag",
+        name: "drag",
+        component: dragUrl,
+        meta: {
+          title: "拖拽效果",
+        },
+      },
     ],
   },
 ];