Compare commits

...

2 Commits

8 changed files with 102 additions and 4 deletions

14
package-lock.json generated
View File

@ -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",

View File

@ -24,6 +24,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": {

View File

@ -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" />
@ -75,6 +75,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>

View File

@ -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>

View File

@ -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>

View File

@ -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: "实验", },
}
],
},

View File

@ -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;
}

View File

@ -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;
}