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

<template>
  <div class="energy-rule-manage admin-page">
    <div class="header">
      <h2>能量规则管理</h2>
      <div class="filters">
        <el-input v-model="keyword" placeholder="搜索..." prefix-icon="el-icon-search" style="width:200px" clearable @keyup.enter.native="handleSearch" @clear="handleSearch" />
        <el-select v-model="dimensionFilter" placeholder="维度筛选" @change="loadList" style="width: 140px;" clearable>
          <el-option label="全部维度" value="" />
          <el-option v-for="d in dimensions" :key="d.code" :label="d.name" :value="d.code" />
        </el-select>
        <el-button type="primary" icon="el-icon-plus" @click="showDialog(null)">新增规则</el-button>
      </div>
      </div>
    <el-table :max-height="tableHeight" :data="list" v-loading="loading" border stripe>
      <el-table-column prop="id" label="ID" width="60" />
      <el-table-column prop="ruleCode" label="规则编码" width="140">
        <template slot="header">
          <span class="sort-header" @click.stop="onSortClick('ruleCode', $event)">规则编码<span v-if="sortIndex('ruleCode') !== null" class="sort-index" :class="sortClass('ruleCode') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('ruleCode') }}</span>{{ sortIcon('ruleCode') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="ruleName" label="规则名称" min-width="160" show-overflow-tooltip />
      <el-table-column prop="eventType" label="事件类型" width="120" />
      <el-table-column prop="dimensionCode" label="维度" width="80" />
      <el-table-column prop="amount" label="能量值" width="80" />
      <el-table-column label="优先级" width="70">
        <template slot-scope="{ row }">
          <el-tag size="mini">{{ row.priority || 0 }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="80">
        <template slot-scope="{ row }">
          <el-switch :value="row.status === 1" @change="toggleStatus(row)" />
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述" min-width="140" show-overflow-tooltip />
      <el-table-column label="操作" width="160" fixed="right">
        <template slot-scope="{ row }">
          <el-button size="mini" type="primary" @click="showDialog(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>

    <el-pagination
      @size-change="onSizeChange"
      @current-change="onPageChange"
      :current-page="page"
      :page-size="size"
      :total="total"
      layout="total, prev, pager, next"
      style="margin-top: 20px; text-align: right;"
    />

    <el-dialog :title="form.id ? '编辑规则' : '新增规则'" :visible.sync="dialogVisible" width="600px">
      <el-form :model="form" label-width="100px" size="small">
        <el-form-item label="规则编码">
          <el-input v-model="form.ruleCode" placeholder="唯一编码，如 DAILY_CHECKIN" />
        </el-form-item>
        <el-form-item label="规则名称">
          <el-input v-model="form.ruleName" placeholder="规则名称" />
        </el-form-item>
        <el-form-item label="事件类型">
          <el-input v-model="form.eventType" placeholder="如 checkin / task_complete" />
        </el-form-item>
        <el-form-item label="动作">
          <el-input v-model="form.action" placeholder="如 add_points / deduct" />
        </el-form-item>
        <el-form-item label="所属维度">
          <el-select v-model="form.dimensionCode" style="width:100%;">
            <el-option v-for="d in dimensions" :key="d.code" :label="d.name" :value="d.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="能量值">
          <el-input-number v-model="form.amount" :min="0" />
        </el-form-item>
        <el-form-item label="优先级">
          <el-input-number v-model="form.priority" :min="0" />
        </el-form-item>
        <el-form-item label="计算公式">
          <el-input v-model="form.amountFormula" placeholder="可选，如 [baseAmount] * [factor]" />
        </el-form-item>
        <el-form-item label="触发条件">
          <el-input v-model="form.conditions" type="textarea" :rows="2" placeholder="JSON 格式触发条件" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.description" type="textarea" :rows="2" />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave" :loading="saving">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SortMixin from '@/mixins/SortMixin'
import { getEnergyRuleList, createEnergyRule, updateEnergyRule, deleteEnergyRule, toggleEnergyRule, getEnergyDimensions } from '@/api/energy'

export default {
  mixins: [SortMixin],
  name: 'EnergyRuleManagement',
  mixins: [SortMixin],
  computed: {
    tableHeight() {
      return window.innerHeight - 300
    }
  },
  data() {
    return {
      list: [],
      dimensions: [],
      loading: false,
      page: 1,
      size: 15,
      total: 0,
      keyword: '',
      dimensionFilter: '',
      dialogVisible: false,
      saving: false,
      form: this.getEmptyForm(),
      sortableColumns: { id: 'ID', ruleCode: '规则编码', createdAt: '创建时间' },
      sortableColumns: { ruleCode: '规则编码', createdAt: '创建时间', id: 'ID' }
    }
  },
  mounted() {
    this.loadDimensions()
    this.loadList()
  },
  methods: {
    getEmptyForm() {
      return { id: null, ruleCode: '', ruleName: '', eventType: '', action: '', dimensionCode: '', amount: 0, amountFormula: '', priority: 0, conditions: '', status: 1, description: '' }
    },
    async loadDimensions() {
      try {
        const res = await getEnergyDimensions()
        if (res.code === 200) this.dimensions = res.data || []
      } catch (e) { console.error(e) }
    },
    async loadList() {
      this.loading = true
      try {
        const params = { page: this.page, size: this.size }
        if (this.dimensionFilter) params.dimensionCode = this.dimensionFilter
        if (this.keyword) params.keyword = this.keyword
        if (this.sortState.length > 0) params.sort = this.sortState
        const res = await getEnergyRuleList(params)
        if (res.code === 200 && res.data) {
          this.list = res.data.records || []
          this.total = res.data.total || 0
        }
      } catch (e) { console.error(e) }
      this.loading = false
    },
    onSizeChange(val) {
      this.size = val
      this.page = 1
      this.loadList()
    },
    onPageChange(p) {
      this.page = typeof p === 'number' ? p : 1
      this.loadList()
    },
    handleSearch() {
      this.page = 1
      this.loadList()
    },
    showDialog(row) {
      if (row) {
        this.form = { ...row }
      } else {
        this.form = this.getEmptyForm()
      }
      this.dialogVisible = true
    },
    async handleSave() {
      this.saving = true
      try {
        const fn = this.form.id ? updateEnergyRule : createEnergyRule
        const res = await fn(this.form)
        if (res.code === 200) {
          this.$message.success(this.form.id ? '更新成功' : '创建成功')
          this.dialogVisible = false
          this.loadList()
        } else {
          this.$message.error(res.message || '操作失败')
        }
      } catch (e) { this.$message.error('操作失败') }
      this.saving = false
    },
    async toggleStatus(row) {
      try {
        const res = await toggleEnergyRule(row.id)
        if (res.code === 200) {
          this.$message.success('状态已更新')
          this.loadList()
        }
      } catch (e) { this.$message.error('操作失败') }
    },
    handleActionCmd(row, cmd) {
      switch (cmd) {
        case 'delete': this.handleDelete(row); break
      }
    },
    async handleDelete(row) {
      this.$confirm('确认删除该规则？', '提示', { type: 'warning' }).then(async () => {
        const res = await deleteEnergyRule(row.id)
        if (res.code === 200) {
          this.$message.success('删除成功')
          this.loadList()
        }
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.header h2 { margin: 0; }
.filters { display: flex; align-items: center; gap: 12px; }
.sort-header {
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  font-size: 12px;
}
.sort-header:hover {
  color: #409eff;
}
</style>