117 lines
2.7 KiB
Vue
117 lines
2.7 KiB
Vue
<script lang="ts" setup>
|
|
import TextEditor from "~/shared/components/TextEditor.vue"
|
|
import { createAnnouncement, editAnnouncement, getAnnouncement } from "../api"
|
|
import { AnnouncementEdit } from "~/utils/types"
|
|
|
|
interface Props {
|
|
announcementID?: string
|
|
}
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const message = useMessage()
|
|
const props = defineProps<Props>()
|
|
const [ready, toggleReady] = useToggle()
|
|
|
|
const announcement = reactive<AnnouncementEdit>({
|
|
id: 0,
|
|
title: "",
|
|
tag: "公告",
|
|
content: "",
|
|
visible: false,
|
|
top: false,
|
|
})
|
|
|
|
const tags: SelectOption[] = [
|
|
{ label: "公告", value: "公告" },
|
|
{ label: "更新", value: "更新" },
|
|
]
|
|
|
|
async function init() {
|
|
if (!props.announcementID) {
|
|
toggleReady(true)
|
|
return
|
|
}
|
|
const id = parseInt(route.params.announcementID as string)
|
|
const res = await getAnnouncement(id)
|
|
toggleReady(true)
|
|
announcement.id = id
|
|
announcement.title = res.data.title
|
|
announcement.content = res.data.content
|
|
announcement.visible = res.data.visible
|
|
announcement.top = res.data.top
|
|
}
|
|
|
|
async function submit() {
|
|
if (announcement.content === "<p><br></p>") {
|
|
announcement.content = ""
|
|
}
|
|
if (!announcement.title || !announcement.content) {
|
|
message.error("标题和正文必填")
|
|
return
|
|
}
|
|
const api = {
|
|
"admin announcement create": createAnnouncement,
|
|
"admin announcement edit": editAnnouncement,
|
|
}[<string>route.name]
|
|
try {
|
|
await api!(announcement)
|
|
if (route.name === "admin announcement create") {
|
|
message.success("成功新建公告 💐")
|
|
} else {
|
|
message.success("修改已保存")
|
|
}
|
|
router.push({ name: "admin announcement list" })
|
|
} catch (err: any) {
|
|
message.error(err.data)
|
|
}
|
|
}
|
|
|
|
onMounted(init)
|
|
</script>
|
|
<template>
|
|
<h2 class="title">
|
|
{{ route.name === "admin announcement create" ? "新建公告" : "编辑公告" }}
|
|
</h2>
|
|
<n-form inline>
|
|
<n-form-item label="标题">
|
|
<n-input class="contestTitle" v-model:value="announcement.title" />
|
|
</n-form-item>
|
|
<n-form-item label="标签">
|
|
<n-select
|
|
class="select"
|
|
v-model:value="announcement.tag"
|
|
:options="tags"
|
|
/>
|
|
</n-form-item>
|
|
<n-form-item label="可见">
|
|
<n-switch v-model:value="announcement.visible" />
|
|
</n-form-item>
|
|
<n-form-item label="置顶">
|
|
<n-switch v-model:value="announcement.top" />
|
|
</n-form-item>
|
|
</n-form>
|
|
<TextEditor
|
|
v-if="ready"
|
|
title="正文"
|
|
v-model:value="announcement.content"
|
|
:min-height="200"
|
|
/>
|
|
<n-space justify="end">
|
|
<n-button type="primary" @click="submit">保存</n-button>
|
|
</n-space>
|
|
</template>
|
|
<style scoped>
|
|
.title {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.select {
|
|
width: 100px;
|
|
}
|
|
|
|
.contestTitle {
|
|
width: 400px;
|
|
}
|
|
</style>
|