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

<template>
  <div class="education-systems admin-page">
    <el-card>
      <div slot="header" class="admin-page-header">
        <span class="admin-page-title">教育体系管理</span>
        <div class="flex items-center gap-sm">
          <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"><el-table :data="filteredData" stripe>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="编码" width="120"></el-table-column>
        <el-table-column prop="label" label="显示名称"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column prop="sortOrder" label="排序" width="80"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 'ACTIVE' ? 'success' : 'danger'">
              {{ scope.row.status === 'ACTIVE' ? '启用' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" 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="row.status === 'ACTIVE' ? 'disable' : 'enable'" icon="el-icon-switch-button">{{ row.status === 'ACTIVE' ? '停用' : '启用' }}</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">
      <el-form :model="form" label-width="80px">
        <el-form-item label="编码">
          <el-input v-model="form.name" placeholder="如: bachelor"></el-input>
        </el-form-item>
        <el-form-item label="显示名称">
          <el-input v-model="form.label" placeholder="如: 本科"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.description" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="form.sortOrder" :min="0"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllEducationSystems, createEducationSystem, updateEducationSystem } from '@/api/admin'

export default {
  name: 'EducationSystems',
  data() {
    return {
      systems: [],
      keyword: '',
      dialogVisible: false,
      isEdit: false,
      form: {
        id: null,
        name: '',
        label: '',
        description: '',
        sortOrder: 0,
        status: 'ACTIVE'
      }
    }
  },
  computed: {
    filteredData() {
      if (!this.keyword) return this.systems
      const kw = this.keyword.toLowerCase()
      return this.systems.filter(item => item.name?.toLowerCase().includes(kw) || item.label?.toLowerCase().includes(kw))
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    async loadData() {
      try {
        const res = await getAllEducationSystems()
        if (res.data) {
          this.systems = res.data
        }
      } catch (e) {
        console.error(e)
      }
    },
    handleCreate() {
      this.isEdit = false
      this.form = { id: null, name: '', label: '', description: '', sortOrder: 0, status: 'ACTIVE' }
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.isEdit = true
      this.form = { ...row }
      this.dialogVisible = true
    },
    async toggleStatus(row) {
      row.status = row.status === 'ACTIVE' ? 'DISABLED' : 'ACTIVE'
      try {
        await updateEducationSystem(row)
        this.$message.success('状态已更新')
      } catch (e) {
        row.status = row.status === 'ACTIVE' ? 'DISABLED' : 'ACTIVE'
        this.$message.error('更新失败')
      }
    },
    async handleSubmit() {
      try {
        if (this.isEdit) {
          await updateEducationSystem(this.form)
        } else {
          await createEducationSystem(this.form)
        }
        this.$message.success('保存成功')
        this.dialogVisible = false
        this.loadData()
      } catch (e) {
        this.$message.error('保存失败')
      }
    },
    handleSearch() {},
    handleActionCmd(row, cmd) {
      switch (cmd) {
        case 'disable':
          row.status = 'DISABLED'
          this.toggleStatus(row)
          break
        case 'enable':
          row.status = 'ACTIVE'
          this.toggleStatus(row)
          break
      }
    }
  }
}
</script>

<style scoped>
</style>