124 lines
3.2 KiB
Vue
124 lines
3.2 KiB
Vue
<template>
|
|
<div class="container" style="overflow: auto;">
|
|
<el-page-header style="margin: 10px;" @back="router.push('/manage');">
|
|
<template #content>
|
|
<span class="text-large font-600 mr-3"> {{ set }} : {{ book }} ({{ id }}) </span>
|
|
</template>
|
|
<template #extra>
|
|
<el-dropdown trigger="click">
|
|
<el-button>
|
|
操作<v-icon size="20px">mdi-chevron-down</v-icon>
|
|
</el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item @click="download"><v-icon
|
|
size="20px">mdi-download</v-icon>下载</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</template>
|
|
</el-page-header>
|
|
<div class="colbox" id="main">
|
|
<div style="flex-grow: 1;" class="card">
|
|
<el-table :data="table" style="height:calc(100% - 10px);overflow: auto;border-radius: 10px;">
|
|
<el-table-column type="index" />
|
|
<el-table-column prop="word" label="单词" />
|
|
<el-table-column prop="type" label="词性" />
|
|
<el-table-column prop="trans" label="翻译" />
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useMainStore } from '@/store';
|
|
import { ElMessage } from 'element-plus';
|
|
import axios from 'axios';
|
|
|
|
interface WordEntry {
|
|
word: string;
|
|
type: string;
|
|
trans: string;
|
|
}
|
|
|
|
const table = ref<WordEntry[]>([]);
|
|
const set = ref('');
|
|
const book = ref('');
|
|
const id = ref('');
|
|
const name = ref('default');
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const store = useMainStore();
|
|
|
|
const download = () => {
|
|
store.wordsets.fromArray(table.value, book.value, name.value);
|
|
ElMessage("下载完毕");
|
|
};
|
|
|
|
const goBack = () => {
|
|
router.push('/manage');
|
|
};
|
|
|
|
onMounted(() => {
|
|
set.value = route.query.set as string;
|
|
book.value = route.query.book as string;
|
|
id.value = route.query.id as string;
|
|
name.value = (route.query.name as string) || "default";
|
|
|
|
if (set.value && book.value && id.value) {
|
|
axios.get("wordset/detail", {
|
|
params: {
|
|
set: set.value,
|
|
book: book.value,
|
|
id: id.value
|
|
}
|
|
}).then(res => {
|
|
table.value = res.data;
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
@media screen and (max-width: 500px) {
|
|
#main {
|
|
flex-direction: column;
|
|
overflow: scroll;
|
|
}
|
|
|
|
.container {
|
|
padding: 10px;
|
|
height: calc(100% - 20px);
|
|
}
|
|
|
|
.title {
|
|
font-size: 25px;
|
|
min-height: 50px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 500px) {
|
|
.title {
|
|
font-size: 35px;
|
|
min-height: 60px;
|
|
}
|
|
}
|
|
|
|
.container {
|
|
padding: 10px;
|
|
padding-top: 0;
|
|
}
|
|
|
|
#main {
|
|
height: calc(100% - 50px);
|
|
}
|
|
|
|
.el-table {
|
|
--el-table-bg-color: #FFFFFF00;
|
|
--el-table-tr-bg-color: #FFFFFF00;
|
|
}
|
|
</style> |