fix:添加审计和全局
This commit is contained in:
@@ -0,0 +1,474 @@
|
||||
<template>
|
||||
<div class="global-setting-container">
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header">
|
||||
<div class="left">
|
||||
<h2 class="title">全局设置</h2>
|
||||
<el-tag type="info" effect="plain" class="info-tag">系统全局配置管理</el-tag>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<el-button type="primary" @click="handleAdd" :icon="Plus" class="action-btn">
|
||||
新增设置
|
||||
</el-button>
|
||||
<el-button type="success" @click="handleRefresh" :icon="Refresh" class="action-btn">
|
||||
刷新
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索筛选 -->
|
||||
<!-- <el-card class="filter-container" shadow="never">
|
||||
<el-form :inline="true" :model="queryParams" class="search-form">
|
||||
<el-form-item label="设置名称">
|
||||
<el-input v-model="queryParams.name" placeholder="请输入设置名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="权限">
|
||||
<el-select v-model="queryParams.authority" placeholder="请选择权限" clearable>
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="公有" value="0" />
|
||||
<el-option label="私有" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery" :icon="Search">查询</el-button>
|
||||
<el-button @click="resetQuery" :icon="Delete">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card> -->
|
||||
|
||||
<!-- 设置列表 -->
|
||||
<el-card class="table-container" shadow="never">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="settingsList"
|
||||
style="width: 100%"
|
||||
border
|
||||
stripe
|
||||
>
|
||||
<el-table-column prop="setting_id" label="ID" width="80" />
|
||||
<el-table-column prop="name" label="Name值" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="value" label="Value值" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column label="权限" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getAuthorityType(row.authority)" size="small">
|
||||
{{ getAuthorityText(row.authority) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="notes" label="备注" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="created_at" label="创建时间" width="180" />
|
||||
<el-table-column label="操作" width="200" fixed="right" align="center">
|
||||
<template #default="{ row }">
|
||||
<div class="action-buttons">
|
||||
<el-tooltip content="编辑" placement="top">
|
||||
<el-button type="primary" :icon="Edit" circle size="small" @click="handleEdit(row)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button type="danger" :icon="Delete" circle size="small" @click="handleDelete(row)" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
|
||||
</el-card>
|
||||
|
||||
<!-- 新增/编辑设置对话框 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="dialogType === 'add' ? '新增设置' : '编辑设置'"
|
||||
width="600px"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form
|
||||
ref="settingFormRef"
|
||||
:model="settingForm"
|
||||
:rules="settingRules"
|
||||
label-width="120px"
|
||||
>
|
||||
<el-form-item label="设置名称" prop="name">
|
||||
<el-input v-model="settingForm.name" placeholder="请输入设置名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设置值" prop="value">
|
||||
<el-input v-model="settingForm.value" placeholder="请输入设置值" />
|
||||
</el-form-item>
|
||||
<el-form-item label="默认值" prop="default_value">
|
||||
<el-input v-model="settingForm.default_value" placeholder="请输入默认值" />
|
||||
</el-form-item>
|
||||
<el-form-item label="权限" prop="authority">
|
||||
<el-radio-group v-model="settingForm.authority">
|
||||
<el-radio :value="0">公有</el-radio>
|
||||
<el-radio :value="1">私有</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="notes">
|
||||
<el-input
|
||||
v-model="settingForm.notes"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入备注信息"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm" :loading="submitting">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue'
|
||||
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
|
||||
import {
|
||||
Plus, Refresh, Search, Delete, Edit
|
||||
} from '@element-plus/icons-vue'
|
||||
import {
|
||||
getSetting,
|
||||
updateSetting,
|
||||
addSetting,
|
||||
deleteSetting,
|
||||
getOneSetting,
|
||||
getSettings
|
||||
} from '@/utils/acs/setting'
|
||||
|
||||
// 查询参数
|
||||
const queryParams = reactive({
|
||||
name: '',
|
||||
authority: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
})
|
||||
|
||||
// 数据加载状态
|
||||
const loading = ref(false)
|
||||
const submitting = ref(false)
|
||||
|
||||
|
||||
|
||||
// 设置列表数据
|
||||
const settingsList = ref([])
|
||||
|
||||
// 对话框相关
|
||||
const dialogVisible = ref(false)
|
||||
const dialogType = ref('add') // 'add' | 'edit'
|
||||
const settingFormRef = ref(null)
|
||||
|
||||
// 表单数据
|
||||
const settingForm = reactive({
|
||||
setting_id: null,
|
||||
name: '',
|
||||
value: '',
|
||||
default_value: '',
|
||||
authority: 0,
|
||||
notes: ''
|
||||
})
|
||||
|
||||
// 表单验证规则
|
||||
const settingRules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入设置名称', trigger: 'blur' }
|
||||
],
|
||||
value: [
|
||||
{ required: true, message: '请输入设置值', trigger: 'blur' }
|
||||
],
|
||||
default_value: [
|
||||
{ required: true, message: '请输入默认值', trigger: 'blur' }
|
||||
],
|
||||
authority: [
|
||||
{ required: true, message: '请选择权限', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
|
||||
// 获取设置列表
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// const params = {
|
||||
// page: queryParams.pageNum,
|
||||
// count: queryParams.pageSize,
|
||||
// name: queryParams.name || '',
|
||||
// authority: queryParams.authority !== '' ? queryParams.authority : undefined
|
||||
// }
|
||||
|
||||
const response = await getSetting()
|
||||
console.log('获取设置列表结果', response)
|
||||
|
||||
if (response && response.data) {
|
||||
const apiData = response.data.data || []
|
||||
|
||||
// 处理API返回的数据
|
||||
settingsList.value = apiData.map(item => ({
|
||||
setting_id: item.setting_id,
|
||||
name: item.name,
|
||||
value: item.value,
|
||||
default_value: item.default_value,
|
||||
authority: item.authority,
|
||||
notes: item.notes || '',
|
||||
created_at: formatTime(item.created_at)
|
||||
}))
|
||||
|
||||
// pagination.total = response.data.total || response.data.count || settingsList.value.length
|
||||
} else {
|
||||
settingsList.value = []
|
||||
// pagination.total = 0
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取设置列表失败:', error)
|
||||
ElMessage.error('获取设置列表失败')
|
||||
settingsList.value = []
|
||||
// pagination.total = 0
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (timeStr) => {
|
||||
if (!timeStr) return '未知时间'
|
||||
|
||||
try {
|
||||
let dateStr = timeStr
|
||||
if (dateStr.includes('T')) {
|
||||
dateStr = dateStr.replace('T', ' ').substring(0, 19)
|
||||
}
|
||||
if (dateStr.includes('+') || dateStr.includes('Z')) {
|
||||
dateStr = dateStr.substring(0, 19)
|
||||
}
|
||||
return dateStr
|
||||
} catch (error) {
|
||||
return timeStr || '未知时间'
|
||||
}
|
||||
}
|
||||
|
||||
// 获取权限类型
|
||||
const getAuthorityType = (authority) => {
|
||||
return authority === 0 ? 'success' : 'warning'
|
||||
}
|
||||
|
||||
// 获取权限文本
|
||||
const getAuthorityText = (authority) => {
|
||||
return authority === 0 ? '公有' : '私有'
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 刷新
|
||||
const handleRefresh = () => {
|
||||
ElNotification({
|
||||
title: '刷新中',
|
||||
message: '正在重新获取设置数据',
|
||||
type: 'info',
|
||||
duration: 2000
|
||||
})
|
||||
getList()
|
||||
}
|
||||
|
||||
// 新增设置
|
||||
const handleAdd = () => {
|
||||
dialogType.value = 'add'
|
||||
resetForm()
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
// 编辑设置
|
||||
const handleEdit = (row) => {
|
||||
dialogType.value = 'edit'
|
||||
settingForm.setting_id = row.setting_id
|
||||
settingForm.name = row.name
|
||||
settingForm.value = row.value
|
||||
settingForm.default_value = row.default_value
|
||||
settingForm.authority = row.authority
|
||||
settingForm.notes = row.notes
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
// 删除设置
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
`确定要删除设置 "${row.name}" 吗？`,
|
||||
'删除确认',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
).then(async () => {
|
||||
try {
|
||||
const response = await deleteSetting({ setting_id: row.setting_id })
|
||||
console.log('删除设置结果', response)
|
||||
|
||||
if (response && response.data) {
|
||||
ElMessage.success('删除成功')
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error('删除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除设置失败:', error)
|
||||
ElMessage.error('删除设置失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
settingForm.setting_id = null
|
||||
settingForm.name = ''
|
||||
settingForm.value = ''
|
||||
settingForm.default_value = ''
|
||||
settingForm.authority = 0
|
||||
settingForm.notes = ''
|
||||
|
||||
if (settingFormRef.value) {
|
||||
settingFormRef.value.clearValidate()
|
||||
}
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const submitForm = async () => {
|
||||
if (!settingFormRef.value) return
|
||||
|
||||
try {
|
||||
await settingFormRef.value.validate()
|
||||
|
||||
submitting.value = true
|
||||
|
||||
const formData = {
|
||||
name: settingForm.name,
|
||||
value: settingForm.value,
|
||||
default_value: settingForm.default_value,
|
||||
authority: settingForm.authority,
|
||||
notes: settingForm.notes
|
||||
}
|
||||
|
||||
let response
|
||||
if (dialogType.value === 'add') {
|
||||
response = await addSetting(formData)
|
||||
console.log('新增设置结果', response)
|
||||
} else {
|
||||
formData.setting_id = settingForm.setting_id
|
||||
response = await updateSetting(formData)
|
||||
console.log('更新设置结果', response)
|
||||
}
|
||||
|
||||
if (response && response.data) {
|
||||
ElMessage.success(dialogType.value === 'add' ? '新增成功' : '更新成功')
|
||||
dialogVisible.value = false
|
||||
getList()
|
||||
} else {
|
||||
ElMessage.error(dialogType.value === 'add' ? '新增失败' : '更新失败')
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('提交表单失败:', error)
|
||||
ElMessage.error('操作失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.global-setting-container {
|
||||
padding: 20px;
|
||||
min-height: calc(100vh - 120px);
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
/* 页面标题样式 */
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.page-header .left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.page-header .title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.info-tag {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.page-header .actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 筛选容器 */
|
||||
.filter-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 表格容器 */
|
||||
.table-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 对话框底部 */
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.page-header .actions {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user