126 lines
2.8 KiB
Vue
126 lines
2.8 KiB
Vue
<template>
|
|
<LoadingComponent v-if="loading"> </LoadingComponent>
|
|
<v-container v-else>
|
|
<h1>资料库</h1>
|
|
|
|
<div>
|
|
{{ selected_ids }}
|
|
</div>
|
|
|
|
<v-btn @click="selectAll">全选</v-btn>
|
|
<v-card class="mt-3">
|
|
<v-list>
|
|
<v-list-item
|
|
v-for="item in libraries.Data"
|
|
:key="item.ID"
|
|
@click.stop="goto(item.ID)"
|
|
>
|
|
<template v-slot:prepend="{ isActive }">
|
|
<v-list-item-action start>
|
|
<v-checkbox-btn
|
|
:model-value="isSelected(item.ID)"
|
|
@click.stop="toggleSelection(item.ID)"
|
|
></v-checkbox-btn>
|
|
</v-list-item-action>
|
|
</template>
|
|
|
|
<template v-slot:append="{ isActive }">
|
|
<v-list-item-action end>
|
|
<v-btn rounded="xl" @click.stop="console.log(isActive)">
|
|
<v-icon>mdi-check</v-icon>
|
|
</v-btn>
|
|
</v-list-item-action>
|
|
</template>
|
|
|
|
<v-list-item-title>{{ item.Name }}</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-card>
|
|
|
|
|
|
</v-container>
|
|
|
|
<div class="text-center">
|
|
<v-container>
|
|
<v-row justify="center">
|
|
<v-col cols="8">
|
|
<v-container class="max-width">
|
|
<v-pagination
|
|
v-model="page"
|
|
class="my-4"
|
|
:length="libraries.Total"
|
|
:disabled="loading"
|
|
@update:model-value="load"
|
|
></v-pagination>
|
|
</v-container>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import { library } from "@/plugins/api";
|
|
import { ref } from "vue";
|
|
import LoadingComponent from "@/components/Loading.vue";
|
|
|
|
const loading = ref(false);
|
|
|
|
const page = ref(1);
|
|
const libraries = ref({});
|
|
|
|
const load = () => {
|
|
loading.value = true;
|
|
library
|
|
.librariesGet(page.value)
|
|
.then((r) => {
|
|
libraries.value = r.data;
|
|
console.log(r.data.Data);
|
|
})
|
|
.finally(() => {
|
|
loading.value = false;
|
|
});
|
|
};
|
|
|
|
load();
|
|
|
|
const goto = (libraryId) => {
|
|
console.log(libraryId);
|
|
};
|
|
|
|
const selected_ids = ref([]);
|
|
|
|
function isSelected(id) {
|
|
return this.selected_ids.includes(id);
|
|
}
|
|
|
|
function toggleSelection(id) {
|
|
const index = this.selected_ids.indexOf(id);
|
|
if (index !== -1) {
|
|
// 如果已经选中，点击后移除
|
|
this.selected_ids.splice(index, 1);
|
|
} else {
|
|
// 如果没有选中，点击后添加
|
|
this.selected_ids.push(id);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Selects all items if none are selected, otherwise clears the selection.
|
|
*
|
|
* @return {void}
|
|
*/
|
|
function selectAll() {
|
|
if (selected_ids.value.length > 0) {
|
|
selected_ids.value = [];
|
|
} else {
|
|
const data = libraries.value.Data;
|
|
if (data.length > 0) {
|
|
data.forEach((item) => selected_ids.value.push(item.ID));
|
|
}
|
|
}
|
|
}
|
|
</script>
|