108 lines
2.4 KiB
Vue
108 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { NSwitch } from "naive-ui"
|
|
import { parseTime } from "~/utils/functions"
|
|
import { Tutorial } from "~/utils/types"
|
|
import { getTutorialList, setTutorialVisibility } from "../api"
|
|
import Actions from "./components/Actions.vue"
|
|
|
|
const tutorials = ref<{ [key: string]: Tutorial[] }>({
|
|
python: [],
|
|
c: [],
|
|
})
|
|
const message = useMessage()
|
|
const activeTab = ref("python")
|
|
|
|
const columns: DataTableColumn<Tutorial>[] = [
|
|
{
|
|
title: "顺序",
|
|
key: "order",
|
|
width: 80,
|
|
},
|
|
{ title: "标题", key: "title", minWidth: 200 },
|
|
{
|
|
title: "作者",
|
|
key: "created_by",
|
|
render: (row) => row.created_by?.username,
|
|
width: 80,
|
|
},
|
|
{
|
|
title: "创建时间",
|
|
key: "created_at",
|
|
width: 180,
|
|
render: (row) => parseTime(row.created_at!, "YYYY-MM-DD HH:mm:ss"),
|
|
},
|
|
{
|
|
title: "更新时间",
|
|
key: "updated_at",
|
|
width: 180,
|
|
render: (row) => parseTime(row.updated_at!, "YYYY-MM-DD HH:mm:ss"),
|
|
},
|
|
{
|
|
title: "可见",
|
|
key: "is_public",
|
|
width: 100,
|
|
render: (row) =>
|
|
h(NSwitch, {
|
|
value: row.is_public,
|
|
size: "small",
|
|
rubberBand: false,
|
|
onUpdateValue: () => toggleVisible(row),
|
|
}),
|
|
},
|
|
{
|
|
title: "操作",
|
|
key: "actions",
|
|
width: 140,
|
|
render: (row) =>
|
|
h(Actions, { tutorialID: row.id, onDeleted: listTutorials }),
|
|
},
|
|
]
|
|
|
|
async function toggleVisible(tutorial: Tutorial) {
|
|
tutorial.is_public = !tutorial.is_public
|
|
try {
|
|
await setTutorialVisibility(tutorial.id, tutorial.is_public)
|
|
message.success("更新成功")
|
|
} catch (err: any) {
|
|
message.error(err.data)
|
|
tutorial.is_public = !tutorial.is_public
|
|
}
|
|
}
|
|
|
|
async function listTutorials() {
|
|
tutorials.value = await getTutorialList()
|
|
}
|
|
|
|
onMounted(listTutorials)
|
|
</script>
|
|
|
|
<template>
|
|
<n-flex align="center" class="titleWrapper">
|
|
<h2 class="title">教程列表</h2>
|
|
<n-button
|
|
type="primary"
|
|
@click="$router.push({ name: 'admin tutorial create' })"
|
|
>
|
|
新建
|
|
</n-button>
|
|
</n-flex>
|
|
<n-tabs v-model:value="activeTab" type="line" animated>
|
|
<n-tab-pane name="python" tab="Python">
|
|
<n-data-table striped :columns="columns" :data="tutorials.python" />
|
|
</n-tab-pane>
|
|
<n-tab-pane name="c" tab="C 语言">
|
|
<n-data-table striped :columns="columns" :data="tutorials.c" />
|
|
</n-tab-pane>
|
|
</n-tabs>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.titleWrapper {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.title {
|
|
margin: 0;
|
|
}
|
|
</style>
|