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

<template>
  <div class="zodiac-configs 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="adm-table-wrap">
      <el-table :data="filteredData" stripe height="100%">
        <el-table-column prop="id" label="ID" width="80">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('id', $event)">ID<span v-if="sortIndex('id') !== null" class="sort-index" :class="sortClass('id') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('id') }}</span>{{ sortIcon('id') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="zodiacCode" label="代码" width="120">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('zodiacCode', $event)">代码<span v-if="sortIndex('zodiacCode') !== null" class="sort-index" :class="sortClass('zodiacCode') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('zodiacCode') }}</span>{{ sortIcon('zodiacCode') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="zodiacName" label="名称">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('zodiacName', $event)">名称<span v-if="sortIndex('zodiacName') !== null" class="sort-index" :class="sortClass('zodiacName') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('zodiacName') }}</span>{{ sortIcon('zodiacName') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="element" label="五行">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('element', $event)">五行<span v-if="sortIndex('element') !== null" class="sort-index" :class="sortClass('element') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('element') }}</span>{{ sortIcon('element') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="日期范围">
          <template slot-scope="scope">
            {{ scope.row.startMonth }}.{{ scope.row.startDay }} - {{ scope.row.endMonth }}.{{ scope.row.endDay }}
          </template>
        </el-table-column>
        <el-table-column prop="mindBase" label="心基础分" width="100">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('mindBase', $event)">心基础分<span v-if="sortIndex('mindBase') !== null" class="sort-index" :class="sortClass('mindBase') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('mindBase') }}</span>{{ sortIcon('mindBase') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="wisdomBase" label="智基础分" width="100">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('wisdomBase', $event)">智基础分<span v-if="sortIndex('wisdomBase') !== null" class="sort-index" :class="sortClass('wisdomBase') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('wisdomBase') }}</span>{{ sortIcon('wisdomBase') }}</span>
          </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="delete" icon="el-icon-delete">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
    </el-card>

    <el-dialog :visible.sync="dialogVisible" :title="isEdit ? '编辑星座配置' : '添加星座配置'" width="600px">
      <el-form :model="form" label-width="100px">
        <el-form-item label="代码">
          <el-input v-model="form.zodiacCode" placeholder="如: aries"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.zodiacName" placeholder="如: 白羊座"></el-input>
        </el-form-item>
        <el-form-item label="五行">
          <el-select v-model="form.element" placeholder="选择五行">
            <el-option label="金" value="金"></el-option>
            <el-option label="木" value="木"></el-option>
            <el-option label="水" value="水"></el-option>
            <el-option label="火" value="火"></el-option>
            <el-option label="土" value="土"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起始日期">
          <el-input-number v-model="form.startMonth" :min="1" :max="12" style="width:100px"></el-input-number> 月
          <el-input-number v-model="form.startDay" :min="1" :max="31" style="width:100px"></el-input-number> 日
        </el-form-item>
        <el-form-item label="结束日期">
          <el-input-number v-model="form.endMonth" :min="1" :max="12" style="width:100px"></el-input-number> 月
          <el-input-number v-model="form.endDay" :min="1" :max="31" style="width:100px"></el-input-number> 日
        </el-form-item>
        <el-form-item label="心基础分">
          <el-input-number v-model="form.mindBase" :min="0" :max="100" :precision="2" style="width:150px"></el-input-number>
        </el-form-item>
        <el-form-item label="智基础分">
          <el-input-number v-model="form.wisdomBase" :min="0" :max="100" :precision="2" style="width:150px"></el-input-number>
        </el-form-item>
        <el-form-item label="身修正系数">
          <el-input-number v-model="form.bodyModifier" :min="0" :max="2" :precision="2" :step="0.05" style="width:150px"></el-input-number>
        </el-form-item>
        <el-form-item label="行修正系数">
          <el-input-number v-model="form.actionModifier" :min="0" :max="2" :precision="2" :step="0.05" style="width:150px"></el-input-number>
        </el-form-item>
        <el-form-item label="富修正系数">
          <el-input-number v-model="form.wealthModifier" :min="0" :max="2" :precision="2" :step="0.05" style="width:150px"></el-input-number>
        </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>

    <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>
  </el-table>
  </div>

</div></template>

<script>
import SortMixin from '@/mixins/SortMixin'
import { listZodiacConfigs, createZodiacConfig, updateZodiacConfig, deleteZodiacConfig } from '@/api/admin'

export default {
  mixins: [SortMixin],
  name: 'ZodiacConfigs',
  data() {
    return {
      submitting: false,
      configs: [],
      keyword: '',
      dialogVisible: false,
      successDialogVisible: false,
      isEdit: false,
      form: this.getEmptyForm(),
      sortableColumns: { id: 'ID', zodiacCode: '代码', zodiacName: '名称', element: '五行', mindBase: '心基础分', wisdomBase: '智基础分' }
    }
  },
  created() {
    this.loadData()
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 300
    },
    filteredData() {
      if (!this.keyword) return this.configs
      const kw = this.keyword.toLowerCase()
      return this.configs.filter(item =>
        [item.zodiacCode, item.zodiacName, item.element].some(v => (v||'').toLowerCase().includes(kw))
      )
    }
  },
  methods: {
    getEmptyForm() {
      return {
        id: null,
        zodiacCode: '',
        zodiacName: '',
        element: '',
        startMonth: 1,
        startDay: 1,
        endMonth: 12,
        endDay: 31,
        mindBase: 60,
        wisdomBase: 60,
        bodyModifier: 1.00,
        actionModifier: 1.00,
        wealthModifier: 1.00
      }
    },
    async loadData() {
      try {
        const params = {}
        if (this.sortState.length > 0) params.sort = this.sortState
        const res = await listZodiacConfigs(params)
        if (res.data) this.configs = res.data
      } catch (e) {
        console.error(e)
      }
    },
    loadList() { this.loadData() },
    handleSearch() {
    },
    handleCreate() {
      this.isEdit = false
      this.form = this.getEmptyForm()
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.isEdit = true
      this.form = { ...row }
      this.dialogVisible = true
    },
    async handleDelete(row) {
      try {
        await this.$confirm('确定删除该配置吗？', '提示', { type: 'warning' })
        await deleteZodiacConfig(row.id)
        this.$message.success('删除成功')
        this.loadData()
      } catch (e) {
        if (e !== 'cancel') this.$message.error('删除失败')
      }
    },
    async handleSubmit() {
      try {
        if (this.isEdit) {
          await updateZodiacConfig(this.form)
        } else {
          await createZodiacConfig(this.form)
        }
        this.$message.success('保存成功')
        this.successDialogVisible = true
      } catch (e) {
        this.$message.error('保存失败')
      }
    },
    handleActionCmd(row, cmd) {
      switch (cmd) {
        case 'delete':
          this.handleDelete(row)
          break
      }
    },
    handleContinue() {
      this.successDialogVisible = false
      this.isEdit = false
      this.form = this.getEmptyForm()
      this.dialogVisible = true
    },
    handleClose() {
      this.successDialogVisible = false
      this.dialogVisible = false
      this.loadData()
    }
  }
}
</script>

<style scoped>
.sort-header {
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  font-size: 12px;
}
.sort-header:hover {
  color: #409eff;
}
.sort-tag {
  margin-left: 8px;
  cursor: pointer;
  white-space: nowrap;
}
</style>