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

<template>
  <div class="bazi-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="stemOrBranch" label="天干/地支" width="100">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('stemOrBranch', $event)">天干/地支<span v-if="sortIndex('stemOrBranch') !== null" class="sort-index" :class="sortClass('stemOrBranch') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('stemOrBranch') }}</span>{{ sortIcon('stemOrBranch') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="80">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('type', $event)">类型<span v-if="sortIndex('type') !== null" class="sort-index" :class="sortClass('type') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('type') }}</span>{{ sortIcon('type') }}</span>
          </template>
          <template slot-scope="scope">
            <el-tag :type="scope.row.type === 'stem' ? 'primary' : 'success'" size="mini">
              {{ scope.row.type === 'stem' ? '天干' : '地支' }}
            </el-tag>
          </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 prop="yinYang" label="阴阳">
          <template slot="header">
            <span class="sort-header" @click.stop="onSortClick('yinYang', $event)">阴阳<span v-if="sortIndex('yinYang') !== null" class="sort-index" :class="sortClass('yinYang') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('yinYang') }}</span>{{ sortIcon('yinYang') }}</span>
          </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="500px">
      <el-form :model="form" label-width="100px">
        <el-form-item label="天干/地支">
          <el-input v-model="form.stemOrBranch" placeholder="如: 甲"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="form.type" placeholder="选择类型">
            <el-option label="天干" value="stem"></el-option>
            <el-option label="地支" value="branch"></el-option>
          </el-select>
        </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-select v-model="form.yinYang" placeholder="选择阴阳">
            <el-option label="阳" value="yang"></el-option>
            <el-option label="阴" value="yin"></el-option>
          </el-select>
        </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>
  
  </div>

</div></template>

<script>
import SortMixin from '@/mixins/SortMixin'
import { listBaziConfigs, createBaziConfig, updateBaziConfig, deleteBaziConfig } from '@/api/admin'

export default {
  mixins: [SortMixin],
  name: 'BaziConfigs',
  data() {
    return {
      submitting: false,
      configs: [],
      keyword: '',
      dialogVisible: false,
      successDialogVisible: false,
      isEdit: false,
      form: this.getEmptyForm(),
      sortableColumns: { id: 'ID', stemOrBranch: '天干/地支', element: '五行', yinYang: '阴阳', 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.stemOrBranch, item.element, item.yinYang].some(v => (v||'').toLowerCase().includes(kw))
      )
    }
  },
  methods: {
    getEmptyForm() {
      return {
        id: null,
        stemOrBranch: '',
        type: 'stem',
        element: '',
        yinYang: 'yang',
        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 listBaziConfigs(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 deleteBaziConfig(row.id)
        this.$message.success('删除成功')
        this.loadData()
      } catch (e) {
        if (e !== 'cancel') this.$message.error('删除失败')
      }
    },
    async handleSubmit() {
      try {
        if (this.isEdit) {
          await updateBaziConfig(this.form)
        } else {
          await createBaziConfig(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>