RunForge-Frontend/src/pages/admin/notice/index.vue

<template>
  <div class="container">
    <Breadcrumb :items="['公告管理', '横幅公告管理']" />
    <a-card title="横幅公告管理">
      <a-space style="margin-bottom: 12px;">
        <a-input v-model="query.keyword" placeholder="按标识或内容搜索" allow-clear style="width: 280px" />
        <a-button type="primary" @click="search">搜索</a-button>
        <a-button @click="openCreate">新增公告</a-button>
      </a-space>

      <a-table
        :data="data"
        :loading="loading"
        :pagination="{
          showPageSize: true,
          showJumper: true,
          showTotal: true,
          pageSize: pagination.pagesize,
          current: pagination.current,
          total: pagination.total
        }"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
      >
        <template #columns>
          <a-table-column title="公告标识" data-index="key" :width="220" />
          <a-table-column title="内容" data-index="content" ellipsis tooltip />
          <a-table-column title="操作" :width="180">
            <template #cell="{ record }">
              <a-space>
                <a-button size="mini" @click="openEdit(record)">编辑</a-button>
                <a-button status="danger" size="mini" @click="remove(record)">删除</a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>

    <a-modal v-model:visible="editorVisible" :title="form.mode === 'create' ? '新增横幅公告' : '编辑横幅公告'" @before-ok="submitEditor">
      <a-form :model="form" layout="vertical">
        <a-form-item label="公告标识（key）">
          <a-input v-model="form.key" :disabled="form.mode === 'edit'" allow-clear />
        </a-form-item>
        <a-form-item label="公告内容">
          <a-textarea v-model="form.content" :max-length="{ length: 1000 }" show-word-limit allow-clear />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { Modal, Notification, Message } from '@arco-design/web-vue'
import { getAdminNoticeList, saveAdminNotice, deleteAdminNotice } from '@/api/public'

const loading = ref(false)
const data = ref([])
const query = reactive({ keyword: '' })
const pagination = reactive({ total: 0, current: 1, pagesize: 20 })

const editorVisible = ref(false)
const form = reactive({
  mode: 'create',
  key: '',
  content: ''
})

const getList = async () => {
  try {
    loading.value = true
    const res = await getAdminNoticeList({
      keyword: query.keyword,
      pagesize: pagination.pagesize,
      current: pagination.current
    })
    if (!res || res.code !== 0) {
      return Notification.error({
        title: '获取横幅公告失败',
        content: res?.msg ?? '请稍后再试'
      })
    }
    data.value = Array.isArray(res.data) ? res.data : []
    pagination.total = res.pagination?.total || 0
  } catch (error) {
    Notification.error({
      title: '获取横幅公告失败',
      content: error.message || '请稍后再试'
    })
  } finally {
    loading.value = false
  }
}

const search = () => {
  pagination.current = 1
  getList()
}

const openCreate = () => {
  form.mode = 'create'
  form.key = ''
  form.content = ''
  editorVisible.value = true
}

const openEdit = (record) => {
  form.mode = 'edit'
  form.key = record.key
  form.content = record.content
  editorVisible.value = true
}

const submitEditor = async () => {
  if (!form.key || !form.content) {
    Message.error('请填写完整公告信息')
    return false
  }
  const res = await saveAdminNotice({
    key: form.key,
    content: form.content
  })
  if (!res || res.code !== 0) {
    Notification.error({
      title: '保存横幅公告失败',
      content: res?.msg ?? '请稍后再试'
    })
    return false
  }
  Message.success('保存成功')
  getList()
  return true
}

const remove = (record) => {
  Modal.confirm({
    title: '删除横幅公告',
    content: `确定删除公告标识「${record.key}」吗？`,
    onOk: async () => {
      const res = await deleteAdminNotice({ key: record.key })
      if (!res || res.code !== 0) {
        return Notification.error({
          title: '删除横幅公告失败',
          content: res?.msg ?? '请稍后再试'
        })
      }
      Message.success('删除成功')
      getList()
    }
  })
}

const onPageChange = (page) => {
  pagination.current = page
  getList()
}

const onPageSizeChange = (size) => {
  pagination.pagesize = size
  pagination.current = 1
  getList()
}

onMounted(() => {
  getList()
})
</script>

<style scoped>
.container {
  padding: 0 20px 20px 20px;
}
</style>