From 839c0ed6e17e3ac6704a2a407ffc2ba727d796d6 Mon Sep 17 00:00:00 2001
From: sundongyu <2811054731@qq.com>
Date: Tue, 16 Apr 2024 16:12:38 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9E=20fix:=E4=BF=AE=E5=A4=8D=E4=BA=86?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                           | 14 ++++
 package.json                                |  1 +
 src/layout/components/LayoutAside.vue       |  5 +-
 src/layout/components/LayoutContent.vue     |  2 +-
 src/pages/receivables-management/ShiYan.vue | 74 +++++++++++++++++++++
 src/router/modules/receivablesManagement.js |  6 ++
 src/style/index.css                         |  2 +-
 src/style/index.less                        |  2 +-
 8 files changed, 102 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/receivables-management/ShiYan.vue

diff --git a/package-lock.json b/package-lock.json
index 54f7fbf..1bf72a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "tdesign-vue-next": "^1.9.3",
         "vite-plugin-mock": "^3.0.1",
         "vue": "^3.4.21",
+        "vue-draggable-plus": "^0.4.0",
         "vue-router": "^4.3.0"
       },
       "devDependencies": {
@@ -4505,6 +4506,19 @@
         }
       }
     },
+    "node_modules/vue-draggable-plus": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/vue-draggable-plus/-/vue-draggable-plus-0.4.0.tgz",
+      "integrity": "sha512-CcvSopMmSZY9McCdQ56QsAydT5cZilx9LzLU0UIz6KDYe9ll6QnmNHN80t6wnxN402ZECSXc5X1dm/myiMFi+A==",
+      "peerDependencies": {
+        "@types/sortablejs": "^1.15.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.3.0",
       "license": "MIT",
diff --git a/package.json b/package.json
index f7e0f63..e88802e 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "tdesign-vue-next": "^1.9.3",
     "vite-plugin-mock": "^3.0.1",
     "vue": "^3.4.21",
+    "vue-draggable-plus": "^0.4.0",
     "vue-router": "^4.3.0"
   },
   "devDependencies": {
diff --git a/src/layout/components/LayoutAside.vue b/src/layout/components/LayoutAside.vue
index 5ee21e2..5812d6c 100644
--- a/src/layout/components/LayoutAside.vue
+++ b/src/layout/components/LayoutAside.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="height: 100%">
-    <t-menu>
+    <t-menu style="height: 100vh">
       <t-submenu value="1" title="首页">
         <template #icon>
           <t-icon name="home" />
@@ -72,6 +72,9 @@
         <t-menu-item value="3-10" to="/student-information">
           <span>学生信息统计表</span>
         </t-menu-item>
+        <t-menu-item value="3-11" to="/shi-yan">
+          <span>实验</span>
+        </t-menu-item>
       </t-submenu>
       <t-submenu value="4" title="学生管理">
         <template #icon>
diff --git a/src/layout/components/LayoutContent.vue b/src/layout/components/LayoutContent.vue
index f45892d..d9c8296 100644
--- a/src/layout/components/LayoutContent.vue
+++ b/src/layout/components/LayoutContent.vue
@@ -4,7 +4,7 @@
       <t-content>
         <RouterView />
       </t-content>
-      <t-footer style="height: 2px">Footer</t-footer>
+      <!-- <t-footer style="height: 2px">Footer</t-footer> -->
     </t-layout>
   </div>
 </template>
diff --git a/src/pages/receivables-management/ShiYan.vue b/src/pages/receivables-management/ShiYan.vue
new file mode 100644
index 0000000..b8f6918
--- /dev/null
+++ b/src/pages/receivables-management/ShiYan.vue
@@ -0,0 +1,74 @@
+<template>
+  <button @click="start">start</button>
+  <button @click="pause">pause</button>
+  <button @click="disabled = true">disabled</button>
+  <div class="flex">
+    <VueDraggable
+      ref="el"
+      v-model="list"
+      :disabled="disabled"
+      :animation="150"
+      ghostClass="ghost"
+      class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded"
+      @start="onStart"
+      @update="onUpdate"
+    >
+      <div
+        v-for="item in list"
+        :key="item.id"
+        class="cursor-move h-30 bg-gray-500/5 rounded p-3 cursor-move"
+      >
+        {{ item.name }}
+      </div>
+    </VueDraggable>
+    <preview-list :list="list" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { type UseDraggableReturn, VueDraggable } from 'vue-draggable-plus'
+const list = ref([
+  {
+    name: 'Joao',
+    id: 1
+  },
+  {
+    name: 'Jean',
+    id: 2
+  },
+  {
+    name: 'Johanna',
+    id: 3
+  },
+  {
+    name: 'Juan',
+    id: 4
+  }
+])
+
+const el = ref<UseDraggableReturn>()
+const disabled = ref(false)
+function pause() {
+  el.value?.pause()
+}
+
+function start() {
+  el.value?.start()
+}
+
+const onStart = () => {
+  console.log('start')
+}
+
+const onUpdate = () => {
+  console.log('update')
+}
+</script>
+
+<style scoped>
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+</style>
diff --git a/src/router/modules/receivablesManagement.js b/src/router/modules/receivablesManagement.js
index 775beba..3fcc4ad 100644
--- a/src/router/modules/receivablesManagement.js
+++ b/src/router/modules/receivablesManagement.js
@@ -79,6 +79,12 @@ const ReceivablesManagement = [
         name: "Arrearage",
         component: () => import("@/pages/receivables-management/Arrearage.vue"),
         meta: { title: "学生欠费明细表", },
+      },
+      {
+        path: "/shi-yan",
+        name: "Shiyan",
+        component: () => import("@/pages/receivables-management/ShiYan.vue"),
+        meta: { title: "实验", },
       }
     ],
   },
diff --git a/src/style/index.css b/src/style/index.css
index 5137eee..af89832 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -186,7 +186,7 @@ pre {
 .back-color {
   background-color: #f5f7fb;
   padding: 16px 24px;
-  height: calc(94vh - 64px);
+  height: calc(101vh - 64px);
   overflow-y: auto;
   overflow-x: hidden;
 }
diff --git a/src/style/index.less b/src/style/index.less
index 0879991..02f867a 100644
--- a/src/style/index.less
+++ b/src/style/index.less
@@ -26,7 +26,7 @@
 .back-color {
     background-color: #f5f7fb;
     padding: 16px 24px;
-    height: calc(94vh - 64px);
+    height: calc(101vh - 64px);
     overflow-y: auto;
     overflow-x: hidden;
 }