|
@@ -1,20 +1,23 @@
|
|
<template>
|
|
<template>
|
|
- <div class="cloudCoachList">
|
|
|
|
|
|
+ <div class="cloudCoachList" v-loading="loading">
|
|
<div class="name">乐谱</div>
|
|
<div class="name">乐谱</div>
|
|
- <div class="listCon" v-loading="loading">
|
|
|
|
|
|
+ <div class="listCon">
|
|
<div class="list" v-for="item in listData" :key="item.id">
|
|
<div class="list" v-for="item in listData" :key="item.id">
|
|
<div>曲目名称:{{ item.name }}</div>
|
|
<div>曲目名称:{{ item.name }}</div>
|
|
<ElButton @click="handleUpdate(item.id)">添加</ElButton>
|
|
<ElButton @click="handleUpdate(item.id)">添加</ElButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="pagination">
|
|
|
|
+ <el-pagination layout="prev, pager, next" :default-page-size="20" @current-change="handleCurrentChange" :total="paginationData.total" />
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
-import { ElButton, ElLoading } from "element-plus"
|
|
|
|
|
|
+import { ElButton, ElLoading, ElPagination } from "element-plus"
|
|
import { getMaterialQueryPage } from "@/api/pptOperate"
|
|
import { getMaterialQueryPage } from "@/api/pptOperate"
|
|
import { httpAjax } from "@/plugins/httpAjax"
|
|
import { httpAjax } from "@/plugins/httpAjax"
|
|
-import { ref } from "vue"
|
|
|
|
|
|
+import { ref, reactive } from "vue"
|
|
|
|
|
|
const emit = defineEmits<{
|
|
const emit = defineEmits<{
|
|
(event: "update", id: string): void
|
|
(event: "update", id: string): void
|
|
@@ -28,24 +31,38 @@ const loading = ref(false)
|
|
|
|
|
|
const listData = ref<any[]>([])
|
|
const listData = ref<any[]>([])
|
|
|
|
|
|
-loading.value = true
|
|
|
|
-httpAjax(getMaterialQueryPage, {
|
|
|
|
- type: "MUSIC",
|
|
|
|
- sourceType: 2,
|
|
|
|
- enableFlag: true,
|
|
|
|
|
|
+const paginationData = reactive({
|
|
page: 1,
|
|
page: 1,
|
|
- rows: 20
|
|
|
|
-}).then(res => {
|
|
|
|
- loading.value = false
|
|
|
|
- if (res.code === 200) {
|
|
|
|
- listData.value = res.data.rows
|
|
|
|
- }
|
|
|
|
|
|
+ total: 0
|
|
})
|
|
})
|
|
|
|
+
|
|
|
|
+function handleCurrentChange(e: number) {
|
|
|
|
+ paginationData.page = e
|
|
|
|
+ queryFun()
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+queryFun()
|
|
|
|
+function queryFun() {
|
|
|
|
+ loading.value = true
|
|
|
|
+ httpAjax(getMaterialQueryPage, {
|
|
|
|
+ type: "MUSIC",
|
|
|
|
+ sourceType: 2,
|
|
|
|
+ enableFlag: true,
|
|
|
|
+ page: paginationData.page,
|
|
|
|
+ rows: 20
|
|
|
|
+ }).then(res => {
|
|
|
|
+ loading.value = false
|
|
|
|
+ if (res.code === 200) {
|
|
|
|
+ listData.value = res.data.rows
|
|
|
|
+ paginationData.total = res.data.total
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
.cloudCoachList {
|
|
.cloudCoachList {
|
|
- padding: 40px;
|
|
|
|
|
|
+ padding: 40px 40px 20px 40px;
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
.name {
|
|
.name {
|
|
@@ -53,7 +70,7 @@ httpAjax(getMaterialQueryPage, {
|
|
font-size: 20px;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
.listCon {
|
|
.listCon {
|
|
- height: calc(100% - 40px);
|
|
|
|
|
|
+ height: calc(100% - 100px);
|
|
overflow: auto;
|
|
overflow: auto;
|
|
.list {
|
|
.list {
|
|
display: flex;
|
|
display: flex;
|
|
@@ -62,5 +79,12 @@ httpAjax(getMaterialQueryPage, {
|
|
height: 40px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .pagination {
|
|
|
|
+ margin-top: 20px;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
+ align-items: center;
|
|
|
|
+ height: 40px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|