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

<template>
  <div class="sys-config admin-page">
<div class="header admin-page-header">
      <h2 class="admin-page-title">系统配置</h2>
      <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="addConfig" icon="el-icon-plus">新增配置</el-button>
      </div>
    </div>
    <el-table :data="list" v-loading="loading" border stripe :max-height="tableHeight">
      <el-table-column prop="configKey" label="配置键" min-width="200" show-overflow-tooltip />
      <el-table-column prop="configValue" label="配置值" min-width="250" show-overflow-tooltip />
      <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
      <el-table-column label="类型" width="90">
        <template slot-scope="{ row }">
          {{ typeLabel(row.valueType) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template slot-scope="{ row }">
          <el-button size="mini" type="primary" @click="editConfig(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"
      class="pagination-wrap"
    />

    <!-- 编辑弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px" :close-on-click-modal="false">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="配置键" prop="configKey">
          <el-input v-model="form.configKey" :disabled="!!form.id" placeholder="如: shop.welcome.banner" />
        </el-form-item>
        <el-form-item label="配置值" prop="configValue">
          <el-input v-if="form.valueType === 'text'" v-model="form.configValue" type="textarea" :rows="3" placeholder="配置值" />
          <el-input v-else v-model="form.configValue" placeholder="配置值" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="form.description" placeholder="配置项描述" />
        </el-form-item>
        <el-form-item label="值类型" prop="valueType">
          <el-select v-model="form.valueType" style="width: 100%;">
            <el-option label="字符串" value="string" />
            <el-option label="数字" value="number" />
            <el-option label="布尔值" value="boolean" />
            <el-option label="多行文本" value="text" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmSave" :loading="submitting">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getSysConfigList, createSysConfig, updateSysConfig, deleteSysConfig } from '@/api/admin'

export default {
  name: 'SysConfig',
  computed: {
    tableHeight() {
      return window.innerHeight - 300
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      page: 1,
      size: 20,
      total: 0,
      dialogVisible: false,
      dialogTitle: '新增配置',
      submitting: false,
      form: {
        id: null,
        configKey: '',
        configValue: '',
        description: '',
        valueType: 'string'
      },
      keyword: '',
      rules: {
        configKey: [{ required: true, message: '请输入配置键', trigger: 'blur' }],
        configValue: [{ required: true, message: '请输入配置值', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.loadList()
  },
  methods: {
    async loadList() {
      this.loading = true
      try {
        const res = await getSysConfigList({ keyword: this.keyword || undefined })
        this.list = res.data || []
        this.total = (res.data || []).length
      } catch (e) {
        this.$message.error('加载失败')
      } finally {
        this.loading = false
      }
    },
    handleSearch() {
      this.page = 1
      this.loadList()
    },
    onSizeChange(val) {
      this.size = val
      this.page = 1
      this.loadList()
    },
    onPageChange(val) {
      this.page = val
      this.loadList()
    },
    typeLabel(type) {
      const map = { string: '字符串', number: '数字', boolean: '布尔值', text: '多行文本' }
      return map[type] || type
    },
    addConfig() {
      this.form = { id: null, configKey: '', configValue: '', description: '', valueType: 'string' }
      this.dialogTitle = '新增配置'
      this.dialogVisible = true
    },
    editConfig(row) {
      this.form = { ...row }
      this.dialogTitle = '编辑配置'
      this.dialogVisible = true
    },
    async confirmSave() {
      const valid = await this.$refs.form.validate().catch(() => false)
      if (!valid) return
      this.submitting = true
      try {
        if (this.form.id) {
          await updateSysConfig(this.form.id, this.form)
        } else {
          await createSysConfig(this.form)
        }
        this.$message.success('保存成功')
        this.dialogVisible = false
        this.loadList()
      } catch (e) {
        this.$message.error('保存失败')
      } finally {
        this.submitting = false
      }
    },
    async deleteConfig(row) {
      try {
        await this.$confirm(`确认删除配置「${row.configKey}」？`, '警告', { type: 'warning' })
        await deleteSysConfig(row.id)
        this.$message.success('删除成功')
        this.loadList()
      } catch (e) {
        if (e !== 'cancel') this.$message.error('删除失败')
      }
    },
    handleActionCmd(row, cmd) {
      switch (cmd) {
        case 'delete':
          this.deleteConfig(row)
          break
      }
    }
  }
}
</script>

<style scoped>
.sys-config {
  padding: 20px;
}
</style>