blog-admin-web/src/views/system/SystemConfig.vue

<template>
<div>
  <el-form inline :model="search" @submit.prevent>
    <el-form-item label="配置项">
      <el-input placeholder="名称/描述" v-model="search.name" />
    </el-form-item>
  </el-form>
  <div class="btn-container">
    <el-button type="primary" @click="add">添加</el-button>
    <div class="search-btn">
      <el-button type="primary" @click="loadData" icon="Search">搜索</el-button>
      <el-button @click="reset" icon="RefreshLeft">重置</el-button>
    </div>
  </div>
  <div class="table-container">
    <el-table :data="systemConfigData" v-loading="loading" stripe>
      <el-table-column type="expand">
        <template #default="scope">
          <pre style="margin:0 10px;">{{ JSON.stringify(scope.row.value, null, ' ') }}</pre>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="配置项名称" />
      <el-table-column prop="description" label="配置项描述" />
      <el-table-column prop="is_public" label="是否公开" >
        <template #default="scope">
          {{ scope.row.is_public ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" >
        <template #default="scope">
          {{ datetimeFormat(scope.row.created_at) }}
        </template>
      </el-table-column>
      <el-table-column prop="updated_at" label="更新时间" >
        <template #default="scope">
          {{ datetimeFormat(scope.row.updated_at) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" >
        <template #default="scope">
          <el-button link icon="Edit" @click="update(scope.row)" title="修改"></el-button>
          <el-button link type="danger" icon="Delete" @click="remove(scope.row)" title="删除"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog v-model="addModal" :title="modalTitle" >
    <system-config-add ref="addForm" :formData="formData" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addModal = false">取消</el-button>
        <el-button type="primary" @click="save" :loading="modalLoading">确定</el-button>
      </span>
    </template>
  </el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import moment from 'moment'
import http from '@/utils/http'
import SystemConfigAdd from './SystemConfigAdd.vue'
import { SystemConfigModel } from '@/model/system/system-config'

const modalLoading = ref(false)
const loading = ref(false)
const search = ref<{name?: string}>({})
const systemConfigData = ref<SystemConfigModel[]>([])
const addModal = ref(false)
const modalTitle = ref('')
const formData = ref<SystemConfigModel>({
  name: '',
  value: '',
  description: '',
  is_public: false
})

const addForm = ref<InstanceType<typeof SystemConfigAdd>>()

function reset() {
  search.value = {}
  loadData()
}

async function loadData() {
  loading.value = true
  systemConfigData.value = await http.get('/api/v1/system/config/list', {params: search.value})
  loading.value = false
}

function add() {
  formData.value = {
    name: '',
    value: '',
    description: '',
    is_public: false
  }
  modalTitle.value = '新增配置项'
  addModal.value = true
}

function update(row: SystemConfigModel) {
  const data = Object.assign({}, row)
  data.value = JSON.stringify(data.value, null, ' ')
  formData.value = data
  modalTitle.value = '修改配置项'
  addModal.value = true
}

async function save() {
  addForm.value?.configForm?.validate(async (valid: boolean) => {
    if (!valid) return
    modalLoading.value = true
    const data = await http.post<SystemConfigModel, any>('/api/v1/system/config/save', formData.value)
    modalLoading.value = false
    addModal.value = false
    ElMessage.success(data.message)
    loadData()
  })
}

function remove(row: SystemConfigModel) {
  ElMessageBox.confirm(`是否确认删除 ${row.name} 配置项？`, '确认删除', {type: 'warning'}).then(async () => {
    const data = await http.delete<{params: {id: string}}, any>('/api/v1/system/config/delete', {params: {id: row._id}})
    if(data.status) {
      ElMessage.success(data.message)
      loadData()
    } else {
      ElMessage.warning(data.message)
    }
  }).catch(() => {})
}

function datetimeFormat(dateStr: string) {
  return dateStr ? moment(dateStr).format('YYYY-MM-DD HH:mm:ss') : null
}

loadData()
</script>