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

<template>
  <div class="article-category admin-page">
    <el-card>
      <div slot="header" class="admin-page-header">
        <span class="admin-page-title">文章分类管理</span>
        <div class="admin-page-actions">
          <el-input v-model="keyword" placeholder="搜索分类..." prefix-icon="el-icon-search" clearable @keyup.enter.native="handleSearch" @clear="handleSearch" />
          <el-button type="primary" size="small" @click="handleCreate">+ 新增分类</el-button>
        </div>
      </div>
      <div class="table-scroll-wrap-sm">
      <el-table :data="filteredData" v-loading="loading" border stripe :max-height="tableHeight">
        <el-table-column prop="id" label="ID" width="70" />
        <el-table-column label="图标" width="80">
          <template slot-scope="{ row }">
            <span style="font-size: 22px">{{ row.icon || '📄' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" min-width="140" />
        <el-table-column label="颜色" width="100">
          <template slot-scope="{ row }">
            <span v-if="row.color" :style="{ display: 'inline-block', width: '20px', height: '20px', backgroundColor: row.color, borderRadius: '4px', verticalAlign: 'middle', border: '1px solid #ddd' }"></span>
            <span style="margin-left: 6px; color: #999;">{{ row.color || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sortOrder" label="排序" width="70" />
        <el-table-column label="状态" width="80">
          <template slot-scope="{ row }">
            <el-tag :type="row.status === 1 || row.status === 'ACTIVE' ? 'success' : 'danger'" size="small">
              {{ row.status === 1 || row.status === 'ACTIVE' ? '启用' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="{ row }">
            <el-button size="mini" type="primary" @click="handleEdit(row)">编辑</el-button>
            <el-dropdown trigger="hover" @command="(cmd) => handleActionCmd(row, cmd)">
              <el-button size="mini">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="delete" icon="el-icon-delete">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table></div>
    </el-card>

    <el-dialog :visible.sync="dialogVisible" :title="isEdit ? '编辑分类' : '新增分类'" width="500px" :close-on-click-modal="false">
      <el-form :model="form" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="form.name" placeholder="请输入分类名称" />
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="form.icon" placeholder="如: 📚 或 emoji 图标" />
        </el-form-item>
        <el-form-item label="颜色">
          <el-color-picker v-model="form.color" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="form.sortOrder" :min="0" :max="999" />
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="form.statusBool" active-text="启用" inactive-text="停用" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="操作成功" :visible.sync="successDialogVisible" width="400px" :close-on-click-modal="false">
      <div style="text-align:center;padding:10px 0">
        <i class="el-icon-success" style="color:#67C23A;font-size:32px"></i>
        <p style="margin:12px 0 0;font-size:16px;color:#303133">保存成功</p>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="handleContinue">继续添加</el-button>
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  adminArticleCategoriesList,
  adminArticleCategoryCreate,
  adminArticleCategoryUpdate,
  adminArticleCategoryDelete
} from '@/api/article.js'

export default {
  name: 'ArticleCategory',
  data() {
    return {
      loading: false,
      submitting: false,
      categories: [],
      dialogVisible: false,
      successDialogVisible: false,
      isEdit: false,
      keyword: '',
      form: {
        id: null,
        name: '',
        icon: '',
        color: '',
        sortOrder: 0,
        statusBool: true
      }
    }
  },
  created() {
    this.loadData()
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 300
    },
    filteredData() {
      if (!this.keyword) return this.categories
      const kw = this.keyword.toLowerCase()
      return this.categories.filter(item =>
        [item.name, item.id+''].some(v => (v||'').toLowerCase().includes(kw))
      )
    }
  },
  methods: {
    async loadData() {
      this.loading = true
      try {
        const res = await adminArticleCategoriesList()
        if (res.data) {
          this.categories = res.data
        }
      } catch (e) {
        this.$message.error('加载分类列表失败')
      } finally {
        this.loading = false
      }
    },
    handleSearch() {
      this.keyword = this.keyword
    },
    handleCreate() {
      this.isEdit = false
      this.form = { id: null, name: '', icon: '', color: '', sortOrder: 0, statusBool: true }
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.isEdit = true
      this.form = {
        id: row.id,
        name: row.name,
        icon: row.icon,
        color: row.color,
        sortOrder: row.sortOrder,
        statusBool: row.status === 1 || row.status === 'ACTIVE'
      }
      this.dialogVisible = true
    },
    async handleSubmit() {
      this.submitting = true
      try {
        const data = {
          name: this.form.name,
          icon: this.form.icon,
          color: this.form.color,
          sortOrder: this.form.sortOrder,
          status: this.form.statusBool ? 1 : 0
        }
        if (this.isEdit) {
          data.id = this.form.id
          await adminArticleCategoryUpdate(data)
        } else {
          await adminArticleCategoryCreate(data)
        }
        this.$message.success('保存成功')
        this.successDialogVisible = true
      } catch (e) {
        this.$message.error(e.message || '保存失败')
      } finally {
        this.submitting = false
      }
    },
    async handleDelete(row) {
      this.$confirm(`确定删除分类「${row.name}」吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await adminArticleCategoryDelete({ id: row.id })
          this.$message.success('删除成功')
          this.loadData()
        } catch (e) {
          this.$message.error(e.message || '删除失败')
        }
      }).catch(() => {})
    },
    handleActionCmd(row, cmd) {
      switch (cmd) {
        case 'delete':
          this.handleDelete(row)
          break
      }
    },
    handleContinue() {
      this.successDialogVisible = false
      this.isEdit = false
      this.form = { id: null, name: '', icon: '', color: '', sortOrder: 0, statusBool: true }
      this.dialogVisible = true
    },
    handleClose() {
      this.successDialogVisible = false
      this.dialogVisible = false
      this.loadData()
    }
  }
}
</script>

<style scoped>
.article-category {
  padding: 20px;
}
</style>