sundongyu/dykj-college-back-office-management-system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://gitea.dykj.co/sundongyu/dykj-college-back-office-management-system into dev

Browse Source
This commit is contained in:
sundongyu 2024-04-16 16:12:42 +08:00
commit ff926d6f91
6 changed files with 120 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

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

3
src/layout/components/LayoutAside.vue
View File

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

13
src/pages/finance-bill-manage/components/DoubleBox.vue Normal file
View File

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

13
src/pages/finance-bill-manage/components/TextVue.vue Normal file
View File

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

81
src/pages/finance-bill-manage/drag.vue Normal file
View File

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

9
src/router/modules/financeBillManage.js
View File

@ -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: "拖拽效果",
},
},
],
},
];