cfc/cfc-web/src/views/admin/NoticeManage.vue

<template>
  <div class="admin-page">
    <el-card>
      <div slot="header" class="admin-page-header">
        <span class="admin-page-title">公告管理</span>
        <el-button type="primary" size="small" @click="openCreate">+ 新建公告</el-button>
      </div>

      <div class="table-scroll-wrap-lg">
        <el-table :data="list" v-loading="loading" border stripe :max-height="tableHeight">
          <el-table-column prop="id" label="ID" width="70" />
          <el-table-column label="类型" width="90">
            <template slot-scope="{ row }">
              <el-tag size="mini" :type="typeTagType(row.type)">{{ typeLabel(row.type) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="标题" min-width="200">
            <template slot-scope="{ row }">{{ row.title }}</template>
          </el-table-column>
          <el-table-column label="内容" min-width="200" show-overflow-tooltip>
            <template slot-scope="{ row }">{{ row.content }}</template>
          </el-table-column>
          <el-table-column label="状态" width="90">
            <template slot-scope="{ row }">
              <el-tag size="mini" :type="row.status === 'active' ? 'success' : 'info'">
                {{ row.status === 'active' ? '已发布' : '草稿' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="160">
            <template slot-scope="{ row }">{{ formatTime(row.createdAt) }}</template>
          </el-table-column>
          <el-table-column label="操作" width="140" fixed="right">
            <template slot-scope="{ row }">
              <el-button size="mini" type="primary" @click="openEdit(row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!-- 创建/编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio label="platform">平台公告</el-radio>
            <el-radio label="activity">活动</el-radio>
            <el-radio label="promotion">优惠</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题" maxlength="200" show-word-limit />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="form.content" type="textarea" :rows="5" placeholder="请输入公告内容" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="submitting" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { adminNoticeList, adminNoticeCreate, adminNoticeUpdate, adminNoticeDelete } from '@/api/notice'

export default {
  name: 'NoticeManage',
  data() {
    return {
      list: [],
      loading: false,
      tableHeight: 400,
      dialogVisible: false,
      submitting: false,
      editId: null,
      form: {
        type: 'platform',
        title: '',
        content: ''
      },
      rules: {
        type: [{ required: true, message: '请选择类型', trigger: 'change' }],
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      }
    }
  },
  computed: {
    dialogTitle() {
      return this.editId ? '编辑公告' : '新建公告'
    }
  },
  mounted() {
    this.loadList()
    window.addEventListener('resize', this.calcHeight)
    this.calcHeight()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.calcHeight)
  },
  methods: {
    calcHeight() {
      this.tableHeight = window.innerHeight - 280
    },
    loadList() {
      this.loading = true
      adminNoticeList({ page: 1, size: 50 }).then(res => {
        this.list = res.data || []
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    openCreate() {
      this.editId = null
      this.form = { type: 'platform', title: '', content: '' }
      this.dialogVisible = true
      this.$nextTick(() => { this.$refs.form && this.$refs.form.clearValidate() })
    },
    openEdit(row) {
      this.editId = row.id
      this.form = { type: row.type, title: row.title, content: row.content }
      this.dialogVisible = true
      this.$nextTick(() => { this.$refs.form && this.$refs.form.clearValidate() })
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (!valid) return
        this.submitting = true
        var fn = this.editId ? adminNoticeUpdate : adminNoticeCreate
        fn(this.form).then(res => {
          this.submitting = false
          this.dialogVisible = false
          this.loadList()
          this.$message.success(this.editId ? '更新成功' : '创建成功')
        }).catch(() => {
          this.submitting = false
        })
      })
    },
    handleDelete(row) {
      this.$confirm('确定删除该公告？', '提示', { type: 'warning' }).then(() => {
        adminNoticeDelete({ id: row.id }).then(() => {
          this.loadList()
          this.$message.success('删除成功')
        })
      }).catch(() => {})
    },
    typeLabel(type) {
      var map = { platform: '公告', activity: '活动', promotion: '优惠' }
      return map[type] || type
    },
    typeTagType(type) {
      var map = { platform: 'warning', activity: 'primary', promotion: 'danger' }
      return map[type] || ''
    },
    formatTime(time) {
      if (!time) return '-'
      var d = new Date(time)
      return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0') + ' ' + String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0')
    }
  }
}
</script>

<style scoped>
.admin-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>