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

<template>
<div>
  <el-form inline :model="search" @submit.prevent>
    <el-form-item :label="t('system.config.searchLabel')">
      <el-input :placeholder="t('system.config.searchPlaceholder')" v-model="search.name" />
    </el-form-item>
  </el-form>
  <div class="btn-container">
    <el-button type="primary" @click="add" v-permission="'config:save'" plain>{{ t('common.add') }}</el-button>
    <div class="search-btn">
      <el-button type="primary" @click="loadData" icon="Search" plain>{{ t('common.search') }}</el-button>
      <el-button @click="reset" icon="RefreshLeft" plain>{{ t('common.reset') }}</el-button>
    </div>
  </div>
  <el-table class="table-container" :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="t('system.config.tableName')" />
    <el-table-column prop="description" :label="t('system.config.tableDescription')" />
    <el-table-column prop="isPublic" :label="t('system.config.tableIsPublic')" >
      <template #default="scope">
        {{ scope.row.isPublic ? t('common.yes') : t('common.no') }}
      </template>
    </el-table-column>
    <el-table-column prop="createdAt" :label="t('common.createdAt')" >
      <template #default="scope">
        {{ datetimeFormat(scope.row.createdAt) }}
      </template>
    </el-table-column>
    <el-table-column prop="updatedAt" :label="t('common.updatedAt')" >
      <template #default="scope">
        {{ datetimeFormat(scope.row.updatedAt) }}
      </template>
    </el-table-column>
    <el-table-column :label="t('common.operation')" >
      <template #default="scope">
        <el-button link icon="Edit" @click="update(scope.row)" :title="t('common.edit')" v-permission="'config:save'"></el-button>
        <el-button link type="danger" icon="Delete" @click="remove(scope.row)" :title="t('common.delete')" v-permission="'config:delete'"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <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" plain>{{ t('common.cancel') }}</el-button>
        <el-button type="primary" @click="save" :loading="modalLoading" plain>{{ t('common.confirm') }}</el-button>
      </span>
    </template>
  </el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
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 { t } = useI18n()
const search = ref<{name?: string}>({})
const systemConfigData = ref<SystemConfigModel[]>([])
const addModal = ref(false)
const modalTitle = ref('')
const formData = ref<SystemConfigModel>({
  name: '',
  value: '',
  description: '',
  isPublic: false
})

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

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

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

function add() {
  formData.value = {
    name: '',
    value: '',
    description: '',
    isPublic: false
  }
  modalTitle.value = t('system.config.addTitle')
  addModal.value = true
}

function update(row: SystemConfigModel) {
  const data = Object.assign({}, row)
  data.value = JSON.stringify(data.value, null, ' ')
  formData.value = data
  modalTitle.value = t('system.config.editTitle')
  addModal.value = true
}

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

function remove(row: SystemConfigModel) {
  ElMessageBox.confirm(t('system.config.deleteConfirmMsg', {name: row.name}), t('common.deleteConfirm'), {type: 'warning'}).then(async () => {
    await http.delete<{params: {id: string}}, any>('/system/config/delete', {params: {id: row._id}})
    ElMessage.success(t('common.deleteSuccess'))
    loadData()
  })
}

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

loadData()
</script>