announcement.

src/admin/announcement/detail.vue

@@ -0,0 +1,94 @@
+<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: "",
+  content: "",
+  visible: false,
+})
+
+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
+}
+
+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-switch v-model:value="announcement.visible" />
+    </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;
+}
+
+.contestTitle {
+  width: 400px;
+}
+</style>