更新
This commit is contained in:
489
resources/admin/src/pages/system/config/index.vue
Normal file
489
resources/admin/src/pages/system/config/index.vue
Normal file
@@ -0,0 +1,489 @@
|
||||
<template>
|
||||
<div class="config-management">
|
||||
<!-- 搜索表单 -->
|
||||
<a-card class="search-card" :bordered="false">
|
||||
<a-form :model="searchParams" layout="inline">
|
||||
<a-form-item label="关键词">
|
||||
<a-input v-model:value="searchParams.keyword" placeholder="配置名称/键" allow-clear style="width: 200px" />
|
||||
</a-form-item>
|
||||
<a-form-item label="分组">
|
||||
<a-select v-model:value="searchParams.group" allow-clear placeholder="请选择分组" style="width: 150px">
|
||||
<a-select-option v-for="group in groups" :key="group" :value="group">
|
||||
{{ group }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="状态">
|
||||
<a-select v-model:value="searchParams.status" allow-clear placeholder="请选择状态" style="width: 120px">
|
||||
<a-select-option :value="1">启用</a-select-option>
|
||||
<a-select-option :value="0">禁用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
<template #icon><RedoOutlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<a-card class="table-card" :bordered="false">
|
||||
<template #title>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
新增
|
||||
</a-button>
|
||||
<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchDelete" danger>
|
||||
<template #icon><DeleteOutlined /></template>
|
||||
批量删除
|
||||
</a-button>
|
||||
<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchStatus">
|
||||
<template #icon><CheckOutlined /></template>
|
||||
批量启用
|
||||
</a-button>
|
||||
<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchStatus(false)" danger>
|
||||
<template #icon><CloseOutlined /></template>
|
||||
批量禁用
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<sc-table
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
:row-selection="rowSelection"
|
||||
@page-change="handlePageChange"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'type'">
|
||||
<a-tag :color="getTypeColor(record.type)">
|
||||
{{ getTypeLabel(record.type) }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'value'">
|
||||
<span v-if="record.type === 'image' || record.type === 'file'" class="value-preview">
|
||||
<a-image
|
||||
v-if="record.type === 'image'"
|
||||
:src="record.value"
|
||||
:width="40"
|
||||
:height="40"
|
||||
style="object-fit: cover"
|
||||
/>
|
||||
<a-tag v-else color="blue">文件</a-tag>
|
||||
</span>
|
||||
<span v-else class="value-text">{{ formatValue(record.value, record.type) }}</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag :color="record.status === 1 ? 'success' : 'error'">
|
||||
{{ record.status === 1 ? '启用' : '禁用' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
|
||||
<a-popconfirm title="确定要删除该配置吗？" @confirm="handleDelete(record.id)">
|
||||
<a-button type="link" size="small" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</sc-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="modalVisible"
|
||||
:title="modalTitle"
|
||||
:width="700"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ span: 6 }">
|
||||
<a-form-item label="配置分组" name="group">
|
||||
<a-select v-model:value="formData.group" placeholder="请选择配置分组">
|
||||
<a-select-option v-for="group in groups" :key="group" :value="group">
|
||||
{{ group }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="配置键" name="key">
|
||||
<a-input v-model:value="formData.key" placeholder="请输入配置键，如：site_name" :disabled="!!formData.id" />
|
||||
</a-form-item>
|
||||
<a-form-item label="配置名称" name="name">
|
||||
<a-input v-model:value="formData.name" placeholder="请输入配置名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="配置描述" name="description">
|
||||
<a-textarea v-model:value="formData.description" placeholder="请输入配置描述" :rows="2" />
|
||||
</a-form-item>
|
||||
<a-form-item label="数据类型" name="type">
|
||||
<a-select v-model:value="formData.type" placeholder="请选择数据类型">
|
||||
<a-select-option value="string">字符串</a-select-option>
|
||||
<a-select-option value="number">数字</a-select-option>
|
||||
<a-select-option value="boolean">布尔值</a-select-option>
|
||||
<a-select-option value="array">数组</a-select-option>
|
||||
<a-select-option value="image">图片</a-select-option>
|
||||
<a-select-option value="file">文件</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="配置值" name="value">
|
||||
<template v-if="formData.type === 'boolean'">
|
||||
<a-radio-group v-model:value="formData.value">
|
||||
<a-radio :value="true">是</a-radio>
|
||||
<a-radio :value="false">否</a-radio>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
<template v-else-if="formData.type === 'number'">
|
||||
<a-input-number v-model:value="formData.value" style="width: 100%" />
|
||||
</template>
|
||||
<template v-else-if="formData.type === 'array'">
|
||||
<a-textarea
|
||||
v-model:value="arrayValue"
|
||||
placeholder="JSON数组格式，如：[1,2,3]"
|
||||
:rows="3"
|
||||
@blur="handleArrayBlur"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="formData.type === 'image'">
|
||||
<sc-upload v-model="formData.value" :limit="1" accept="image/*" list-type="picture-card" />
|
||||
</template>
|
||||
<template v-else-if="formData.type === 'file'">
|
||||
<sc-upload v-model="formData.value" :limit="1" list-type="text" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-textarea v-model:value="formData.value" placeholder="请输入配置值" :rows="3" />
|
||||
</template>
|
||||
</a-form-item>
|
||||
<a-form-item v-if="formData.type === 'string'" label="可选值" name="options">
|
||||
<a-textarea
|
||||
v-model:value="optionsValue"
|
||||
placeholder="每行一个选项，如：option1 option2 option3"
|
||||
:rows="3"
|
||||
@blur="handleOptionsBlur"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sort">
|
||||
<a-input-number v-model:value="formData.sort" :min="0" :max="9999" style="width: 100%" />
|
||||
</a-form-item>
|
||||
<a-form-item label="状态" name="status">
|
||||
<a-radio-group v-model:value="formData.status">
|
||||
<a-radio :value="1">启用</a-radio>
|
||||
<a-radio :value="0">禁用</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import {
|
||||
SearchOutlined,
|
||||
RedoOutlined,
|
||||
PlusOutlined,
|
||||
DeleteOutlined,
|
||||
CheckOutlined,
|
||||
CloseOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import systemApi from '@/api/system'
|
||||
import scTable from '@/components/scTable/index.vue'
|
||||
import scUpload from '@/components/scUpload/index.vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'ConfigManagement',
|
||||
})
|
||||
|
||||
const searchParams = ref({
|
||||
keyword: '',
|
||||
group: undefined,
|
||||
status: undefined,
|
||||
})
|
||||
|
||||
const loading = ref(false)
|
||||
const dataSource = ref([])
|
||||
const pagination = ref({
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
})
|
||||
|
||||
const selectedRowKeys = ref([])
|
||||
const rowSelection = computed(() => ({
|
||||
selectedRowKeys: selectedRowKeys.value,
|
||||
onChange: (keys) => {
|
||||
selectedRowKeys.value = keys
|
||||
},
|
||||
}))
|
||||
|
||||
const columns = [
|
||||
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
|
||||
{ title: '配置分组', dataIndex: 'group', key: 'group', width: 120 },
|
||||
{ title: '配置键', dataIndex: 'key', key: 'key', width: 200 },
|
||||
{ title: '配置名称', dataIndex: 'name', key: 'name', width: 150 },
|
||||
{ title: '数据类型', key: 'type', width: 100, align: 'center' },
|
||||
{ title: '配置值', key: 'value', width: 200 },
|
||||
{ title: '排序', dataIndex: 'sort', key: 'sort', width: 80, align: 'center' },
|
||||
{ title: '状态', key: 'status', width: 80, align: 'center' },
|
||||
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
|
||||
{ title: '操作', key: 'action', width: 150, fixed: 'right' },
|
||||
]
|
||||
|
||||
const groups = ref([])
|
||||
|
||||
const modalVisible = ref(false)
|
||||
const modalTitle = ref('新增配置')
|
||||
const formData = ref({})
|
||||
const formRef = ref(null)
|
||||
const formRules = {
|
||||
group: [{ required: true, message: '请选择配置分组', trigger: 'change' }],
|
||||
key: [{ required: true, message: '请输入配置键', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输入配置名称', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请选择数据类型', trigger: 'change' }],
|
||||
}
|
||||
|
||||
const arrayValue = ref('')
|
||||
const optionsValue = ref('')
|
||||
|
||||
const fetchData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await systemApi.configs.list.get({
|
||||
page: pagination.value.current,
|
||||
page_size: pagination.value.pageSize,
|
||||
...searchParams.value,
|
||||
})
|
||||
dataSource.value = res.data.list
|
||||
pagination.value.total = res.data.total
|
||||
} catch (error) {
|
||||
message.error('获取配置列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const fetchGroups = async () => {
|
||||
try {
|
||||
const res = await systemApi.configs.groups.get()
|
||||
groups.value = res.data
|
||||
} catch (error) {
|
||||
message.error('获取配置分组失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.value.current = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
searchParams.value = {
|
||||
keyword: '',
|
||||
group: undefined,
|
||||
status: undefined,
|
||||
}
|
||||
pagination.value.current = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handlePageChange = (page) => {
|
||||
pagination.value.current = page
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleAdd = () => {
|
||||
modalTitle.value = '新增配置'
|
||||
formData.value = {
|
||||
status: 1,
|
||||
sort: 0,
|
||||
type: 'string',
|
||||
}
|
||||
arrayValue.value = ''
|
||||
optionsValue.value = ''
|
||||
modalVisible.value = true
|
||||
}
|
||||
|
||||
const handleEdit = (record) => {
|
||||
modalTitle.value = '编辑配置'
|
||||
formData.value = { ...record }
|
||||
if (record.type === 'array') {
|
||||
arrayValue.value = typeof record.value === 'string' ? record.value : JSON.stringify(record.value)
|
||||
}
|
||||
if (record.options) {
|
||||
optionsValue.value = Array.isArray(record.options) ? record.options.join('\n') : record.options
|
||||
}
|
||||
modalVisible.value = true
|
||||
}
|
||||
|
||||
const handleArrayBlur = () => {
|
||||
try {
|
||||
if (arrayValue.value) {
|
||||
formData.value.value = JSON.parse(arrayValue.value)
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('数组格式错误，请输入正确的JSON格式')
|
||||
}
|
||||
}
|
||||
|
||||
const handleOptionsBlur = () => {
|
||||
if (optionsValue.value) {
|
||||
formData.value.options = optionsValue.value.split('\n').filter((item) => item.trim())
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
const submitData = { ...formData.value }
|
||||
if (submitData.type === 'array' && arrayValue.value) {
|
||||
submitData.value = JSON.parse(arrayValue.value)
|
||||
}
|
||||
if (submitData.type === 'boolean') {
|
||||
submitData.value = submitData.value === 'true' || submitData.value === true
|
||||
}
|
||||
if (optionsValue.value) {
|
||||
submitData.options = optionsValue.value.split('\n').filter((item) => item.trim())
|
||||
}
|
||||
if (submitData.id) {
|
||||
await systemApi.configs.edit.put(submitData.id, submitData)
|
||||
message.success('更新成功')
|
||||
} else {
|
||||
await systemApi.configs.add.post(submitData)
|
||||
message.success('创建成功')
|
||||
}
|
||||
modalVisible.value = false
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
if (error.errorFields) {
|
||||
return
|
||||
}
|
||||
message.error(error.message || '操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
modalVisible.value = false
|
||||
formData.value = {}
|
||||
arrayValue.value = ''
|
||||
optionsValue.value = ''
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
try {
|
||||
await systemApi.configs.delete.delete(id)
|
||||
message.success('删除成功')
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
message.error('删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleBatchDelete = async () => {
|
||||
try {
|
||||
await systemApi.configs.batchDelete.post({ ids: selectedRowKeys.value })
|
||||
message.success('批量删除成功')
|
||||
selectedRowKeys.value = []
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
message.error('批量删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleBatchStatus = async (status = 1) => {
|
||||
try {
|
||||
await systemApi.configs.batchStatus.post({ ids: selectedRowKeys.value, status })
|
||||
message.success(status ? '批量启用成功' : '批量禁用成功')
|
||||
selectedRowKeys.value = []
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
message.error('操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
const getTypeColor = (type) => {
|
||||
const colors = {
|
||||
string: 'blue',
|
||||
number: 'green',
|
||||
boolean: 'orange',
|
||||
array: 'purple',
|
||||
image: 'cyan',
|
||||
file: 'geekblue',
|
||||
}
|
||||
return colors[type] || 'default'
|
||||
}
|
||||
|
||||
const getTypeLabel = (type) => {
|
||||
const labels = {
|
||||
string: '字符串',
|
||||
number: '数字',
|
||||
boolean: '布尔值',
|
||||
array: '数组',
|
||||
image: '图片',
|
||||
file: '文件',
|
||||
}
|
||||
return labels[type] || type
|
||||
}
|
||||
|
||||
const formatValue = (value, type) => {
|
||||
if (type === 'array') {
|
||||
try {
|
||||
const arr = typeof value === 'string' ? JSON.parse(value) : value
|
||||
return Array.isArray(arr) ? arr.join(', ') : value
|
||||
} catch {
|
||||
return value
|
||||
}
|
||||
}
|
||||
if (type === 'boolean') {
|
||||
return value === 'true' || value === true ? '是' : '否'
|
||||
}
|
||||
if (typeof value === 'string' && value.length > 50) {
|
||||
return value.substring(0, 50) + '...'
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
fetchGroups()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.config-management {
|
||||
padding: 16px;
|
||||
|
||||
.search-card {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
:deep(.ant-card-body) {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.value-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.value-text {
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
463
resources/admin/src/pages/system/dictionary/index.vue
Normal file
463
resources/admin/src/pages/system/dictionary/index.vue
Normal file
@@ -0,0 +1,463 @@
|
||||
<template>
|
||||
<div class="dictionary-management">
|
||||
<!-- 搜索表单 -->
|
||||
<a-card class="search-card" :bordered="false">
|
||||
<a-form :model="searchParams" layout="inline">
|
||||
<a-form-item label="关键词">
|
||||
<a-input v-model:value="searchParams.keyword" placeholder="字典名称/编码" allow-clear style="width: 200px" />
|
||||
</a-form-item>
|
||||
<a-form-item label="状态">
|
||||
<a-select v-model:value="searchParams.status" allow-clear placeholder="请选择状态" style="width: 120px">
|
||||
<a-select-option :value="1">启用</a-select-option>
|
||||
<a-select-option :value="0">禁用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
<template #icon><RedoOutlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<a-card class="table-card" :bordered="false">
|
||||
<template #title>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
新增
|
||||
</a-button>
|
||||
<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchDelete" danger>
|
||||
<template #icon><DeleteOutlined /></template>
|
||||
批量删除
|
||||
</a-button>
|
||||
<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchStatus">
|
||||
<template #icon><CheckOutlined /></template>
|
||||
批量启用
|
||||
</a-button>
|
||||
<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchStatus(false)" danger>
|
||||
<template #icon><CloseOutlined /></template>
|
||||
批量禁用
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<sc-table
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
:row-selection="rowSelection"
|
||||
@page-change="handlePageChange"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'item_count'">
|
||||
<a-tag color="blue">{{ record.item_count || 0 }} 项</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag :color="record.status === 1 ? 'success' : 'error'">
|
||||
{{ record.status === 1 ? '启用' : '禁用' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="handleItems(record)">字典项</a-button>
|
||||
<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
|
||||
<a-popconfirm title="确定要删除该字典吗？" @confirm="handleDelete(record.id)">
|
||||
<a-button type="link" size="small" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</sc-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 新增/编辑弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="modalVisible"
|
||||
:title="modalTitle"
|
||||
:width="600"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ span: 6 }">
|
||||
<a-form-item label="字典名称" name="name">
|
||||
<a-input v-model:value="formData.name" placeholder="请输入字典名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="字典编码" name="code">
|
||||
<a-input v-model:value="formData.code" placeholder="请输入字典编码，如：user_status" :disabled="!!formData.id" />
|
||||
</a-form-item>
|
||||
<a-form-item label="描述" name="description">
|
||||
<a-textarea v-model:value="formData.description" placeholder="请输入描述" :rows="3" />
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sort">
|
||||
<a-input-number v-model:value="formData.sort" :min="0" :max="9999" style="width: 100%" />
|
||||
</a-form-item>
|
||||
<a-form-item label="状态" name="status">
|
||||
<a-radio-group v-model:value="formData.status">
|
||||
<a-radio :value="1">启用</a-radio>
|
||||
<a-radio :value="0">禁用</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<!-- 字典项弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="itemModalVisible"
|
||||
:title="`字典项 - ${currentDictionary?.name}`"
|
||||
:width="900"
|
||||
:footer="null"
|
||||
>
|
||||
<div class="dictionary-items">
|
||||
<a-space style="margin-bottom: 16px">
|
||||
<a-button type="primary" @click="handleAddItem">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
新增字典项
|
||||
</a-button>
|
||||
</a-space>
|
||||
|
||||
<a-table
|
||||
:columns="itemColumns"
|
||||
:data-source="itemDataSource"
|
||||
:loading="itemLoading"
|
||||
:pagination="false"
|
||||
row-key="id"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'status'">
|
||||
<a-tag :color="record.status === 1 ? 'success' : 'error'">
|
||||
{{ record.status === 1 ? '启用' : '禁用' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="handleEditItem(record)">编辑</a-button>
|
||||
<a-popconfirm title="确定要删除该字典项吗？" @confirm="handleDeleteItem(record.id)">
|
||||
<a-button type="link" size="small" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
<!-- 字典项编辑弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="itemEditVisible"
|
||||
:title="itemEditTitle"
|
||||
:width="500"
|
||||
@ok="handleItemSubmit"
|
||||
@cancel="itemEditVisible = false"
|
||||
>
|
||||
<a-form ref="itemFormRef" :model="itemFormData" :rules="itemFormRules" :label-col="{ span: 6 }">
|
||||
<a-form-item label="显示标签" name="label">
|
||||
<a-input v-model:value="itemFormData.label" placeholder="请输入显示标签" />
|
||||
</a-form-item>
|
||||
<a-form-item label="实际值" name="value">
|
||||
<a-input v-model:value="itemFormData.value" placeholder="请输入实际值" />
|
||||
</a-form-item>
|
||||
<a-form-item label="排序" name="sort">
|
||||
<a-input-number v-model:value="itemFormData.sort" :min="0" :max="9999" style="width: 100%" />
|
||||
</a-form-item>
|
||||
<a-form-item label="状态" name="status">
|
||||
<a-radio-group v-model:value="itemFormData.status">
|
||||
<a-radio :value="1">启用</a-radio>
|
||||
<a-radio :value="0">禁用</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import {
|
||||
SearchOutlined,
|
||||
RedoOutlined,
|
||||
PlusOutlined,
|
||||
DeleteOutlined,
|
||||
CheckOutlined,
|
||||
CloseOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import systemApi from '@/api/system'
|
||||
import scTable from '@/components/scTable/index.vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'DictionaryManagement',
|
||||
})
|
||||
|
||||
const searchParams = ref({
|
||||
keyword: '',
|
||||
status: undefined,
|
||||
})
|
||||
|
||||
const loading = ref(false)
|
||||
const dataSource = ref([])
|
||||
const pagination = ref({
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
})
|
||||
|
||||
const selectedRowKeys = ref([])
|
||||
const rowSelection = computed(() => ({
|
||||
selectedRowKeys: selectedRowKeys.value,
|
||||
onChange: (keys) => {
|
||||
selectedRowKeys.value = keys
|
||||
},
|
||||
}))
|
||||
|
||||
const columns = [
|
||||
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
|
||||
{ title: '字典名称', dataIndex: 'name', key: 'name', width: 200 },
|
||||
{ title: '字典编码', dataIndex: 'code', key: 'code', width: 200 },
|
||||
{ title: '描述', dataIndex: 'description', key: 'description', width: 250 },
|
||||
{ title: '字典项', key: 'item_count', width: 100, align: 'center' },
|
||||
{ title: '排序', dataIndex: 'sort', key: 'sort', width: 80, align: 'center' },
|
||||
{ title: '状态', key: 'status', width: 80, align: 'center' },
|
||||
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
|
||||
{ title: '操作', key: 'action', width: 200, fixed: 'right' },
|
||||
]
|
||||
|
||||
const modalVisible = ref(false)
|
||||
const modalTitle = ref('新增字典')
|
||||
const formData = ref({})
|
||||
const formRef = ref(null)
|
||||
const formRules = {
|
||||
name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入字典编码', trigger: 'blur' }],
|
||||
}
|
||||
|
||||
const itemModalVisible = ref(false)
|
||||
const itemLoading = ref(false)
|
||||
const itemDataSource = ref([])
|
||||
const currentDictionary = ref(null)
|
||||
const itemColumns = [
|
||||
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
|
||||
{ title: '显示标签', dataIndex: 'label', key: 'label', width: 200 },
|
||||
{ title: '实际值', dataIndex: 'value', key: 'value', width: 200 },
|
||||
{ title: '排序', dataIndex: 'sort', key: 'sort', width: 80, align: 'center' },
|
||||
{ title: '状态', key: 'status', width: 80, align: 'center' },
|
||||
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
|
||||
{ title: '操作', key: 'action', width: 150, fixed: 'right' },
|
||||
]
|
||||
|
||||
const itemEditVisible = ref(false)
|
||||
const itemEditTitle = ref('新增字典项')
|
||||
const itemFormData = ref({})
|
||||
const itemFormRef = ref(null)
|
||||
const itemFormRules = {
|
||||
label: [{ required: true, message: '请输入显示标签', trigger: 'blur' }],
|
||||
value: [{ required: true, message: '请输入实际值', trigger: 'blur' }],
|
||||
}
|
||||
|
||||
const fetchData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await systemApi.dictionaries.list.get({
|
||||
page: pagination.value.current,
|
||||
page_size: pagination.value.pageSize,
|
||||
...searchParams.value,
|
||||
})
|
||||
dataSource.value = res.data.list
|
||||
pagination.value.total = res.data.total
|
||||
} catch (error) {
|
||||
message.error('获取字典列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.value.current = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
searchParams.value = {
|
||||
keyword: '',
|
||||
status: undefined,
|
||||
}
|
||||
pagination.value.current = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handlePageChange = (page) => {
|
||||
pagination.value.current = page
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleAdd = () => {
|
||||
modalTitle.value = '新增字典'
|
||||
formData.value = {
|
||||
status: 1,
|
||||
sort: 0,
|
||||
}
|
||||
modalVisible.value = true
|
||||
}
|
||||
|
||||
const handleEdit = (record) => {
|
||||
modalTitle.value = '编辑字典'
|
||||
formData.value = { ...record }
|
||||
modalVisible.value = true
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
if (formData.value.id) {
|
||||
await systemApi.dictionaries.edit.put(formData.value.id, formData.value)
|
||||
message.success('更新成功')
|
||||
} else {
|
||||
await systemApi.dictionaries.add.post(formData.value)
|
||||
message.success('创建成功')
|
||||
}
|
||||
modalVisible.value = false
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
if (error.errorFields) {
|
||||
return
|
||||
}
|
||||
message.error(error.message || '操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
modalVisible.value = false
|
||||
formData.value = {}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
try {
|
||||
await systemApi.dictionaries.delete.delete(id)
|
||||
message.success('删除成功')
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
message.error('删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleBatchDelete = async () => {
|
||||
try {
|
||||
await systemApi.dictionaries.batchDelete.post({ ids: selectedRowKeys.value })
|
||||
message.success('批量删除成功')
|
||||
selectedRowKeys.value = []
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
message.error('批量删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleBatchStatus = async (status = 1) => {
|
||||
try {
|
||||
await systemApi.dictionaries.batchStatus.post({ ids: selectedRowKeys.value, status })
|
||||
message.success(status ? '批量启用成功' : '批量禁用成功')
|
||||
selectedRowKeys.value = []
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
message.error('操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleItems = async (record) => {
|
||||
currentDictionary.value = record
|
||||
itemModalVisible.value = true
|
||||
await fetchDictionaryItems(record.id)
|
||||
}
|
||||
|
||||
const fetchDictionaryItems = async (dictionaryId) => {
|
||||
itemLoading.value = true
|
||||
try {
|
||||
const res = await systemApi.dictionaryItems.list.get({ dictionary_id: dictionaryId })
|
||||
itemDataSource.value = res.data.list || res.data
|
||||
} catch (error) {
|
||||
message.error('获取字典项失败')
|
||||
} finally {
|
||||
itemLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddItem = () => {
|
||||
itemEditTitle.value = '新增字典项'
|
||||
itemFormData.value = {
|
||||
dictionary_id: currentDictionary.value.id,
|
||||
status: 1,
|
||||
sort: 0,
|
||||
}
|
||||
itemEditVisible.value = true
|
||||
}
|
||||
|
||||
const handleEditItem = (record) => {
|
||||
itemEditTitle.value = '编辑字典项'
|
||||
itemFormData.value = { ...record }
|
||||
itemEditVisible.value = true
|
||||
}
|
||||
|
||||
const handleItemSubmit = async () => {
|
||||
try {
|
||||
await itemFormRef.value.validate()
|
||||
if (itemFormData.value.id) {
|
||||
await systemApi.dictionaryItems.edit.put(itemFormData.value.id, itemFormData.value)
|
||||
message.success('更新成功')
|
||||
} else {
|
||||
await systemApi.dictionaryItems.add.post(itemFormData.value)
|
||||
message.success('创建成功')
|
||||
}
|
||||
itemEditVisible.value = false
|
||||
fetchDictionaryItems(currentDictionary.value.id)
|
||||
} catch (error) {
|
||||
if (error.errorFields) {
|
||||
return
|
||||
}
|
||||
message.error(error.message || '操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteItem = async (id) => {
|
||||
try {
|
||||
await systemApi.dictionaryItems.delete.delete(id)
|
||||
message.success('删除成功')
|
||||
fetchDictionaryItems(currentDictionary.value.id)
|
||||
} catch (error) {
|
||||
message.error('删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.dictionary-management {
|
||||
padding: 16px;
|
||||
|
||||
.search-card {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
:deep(.ant-card-body) {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.dictionary-items {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
368
resources/admin/src/pages/system/log/index.vue
Normal file
368
resources/admin/src/pages/system/log/index.vue
Normal file
@@ -0,0 +1,368 @@
|
||||
<template>
|
||||
<div class="log-management">
|
||||
<!-- 搜索表单 -->
|
||||
<a-card class="search-card" :bordered="false">
|
||||
<a-form :model="searchParams" layout="inline">
|
||||
<a-form-item label="关键词">
|
||||
<a-input v-model:value="searchParams.keyword" placeholder="日志内容" allow-clear style="width: 200px" />
|
||||
</a-form-item>
|
||||
<a-form-item label="日志类型">
|
||||
<a-select v-model:value="searchParams.type" allow-clear placeholder="请选择类型" style="width: 120px">
|
||||
<a-select-option value="info">信息</a-select-option>
|
||||
<a-select-option value="warning">警告</a-select-option>
|
||||
<a-select-option value="error">错误</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="时间范围">
|
||||
<a-range-picker
|
||||
v-model:value="searchParams.date_range"
|
||||
show-time
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
placeholder="['开始时间', '结束时间']"
|
||||
style="width: 350px"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<template #icon><SearchOutlined /></template>
|
||||
搜索
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
<template #icon><RedoOutlined /></template>
|
||||
重置
|
||||
</a-button>
|
||||
<a-button @click="handleExport">
|
||||
<template #icon><ExportOutlined /></template>
|
||||
导出
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<a-card class="table-card" :bordered="false">
|
||||
<template #title>
|
||||
<a-space>
|
||||
<a-button v-if="selectedRowKeys.length > 0" @click="handleBatchDelete" danger>
|
||||
<template #icon><DeleteOutlined /></template>
|
||||
批量删除
|
||||
</a-button>
|
||||
<a-popconfirm title="确定要清空所有日志吗？" @confirm="handleClearAll">
|
||||
<a-button danger>
|
||||
<template #icon><ClearOutlined /></template>
|
||||
清空日志
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<sc-table
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
:row-selection="rowSelection"
|
||||
@page-change="handlePageChange"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'type'">
|
||||
<a-tag :color="getTypeColor(record.type)">
|
||||
<template #icon>
|
||||
<InfoCircleOutlined v-if="record.type === 'info'" />
|
||||
<WarningOutlined v-else-if="record.type === 'warning'" />
|
||||
<CloseCircleOutlined v-else-if="record.type === 'error'" />
|
||||
</template>
|
||||
{{ getTypeLabel(record.type) }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'message'">
|
||||
<a-tooltip :title="record.message">
|
||||
<span class="log-message">{{ record.message }}</span>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="handleDetail(record)">详情</a-button>
|
||||
<a-popconfirm title="确定要删除该日志吗？" @confirm="handleDelete(record.id)">
|
||||
<a-button type="link" size="small" danger>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</sc-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 日志详情弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="detailVisible"
|
||||
title="日志详情"
|
||||
:width="800"
|
||||
:footer="null"
|
||||
>
|
||||
<div class="log-detail" v-if="currentLog">
|
||||
<a-descriptions :column="1" bordered>
|
||||
<a-descriptions-item label="ID">{{ currentLog.id }}</a-descriptions-item>
|
||||
<a-descriptions-item label="日志类型">
|
||||
<a-tag :color="getTypeColor(currentLog.type)">
|
||||
{{ getTypeLabel(currentLog.type) }}
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="用户">{{ currentLog.username || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="IP地址">{{ currentLog.ip || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="请求方法">{{ currentLog.method || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="请求路径">{{ currentLog.url || '-' }}</a-descriptions-item>
|
||||
<a-descriptions-item label="User Agent">
|
||||
<span class="user-agent">{{ currentLog.user_agent || '-' }}</span>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="日志内容">
|
||||
<pre class="log-content">{{ currentLog.message }}</pre>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item v-if="currentLog.context" label="上下文">
|
||||
<pre class="log-context">{{ formatJson(currentLog.context) }}</pre>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="创建时间">{{ currentLog.created_at }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import {
|
||||
SearchOutlined,
|
||||
RedoOutlined,
|
||||
DeleteOutlined,
|
||||
ExportOutlined,
|
||||
ClearOutlined,
|
||||
InfoCircleOutlined,
|
||||
WarningOutlined,
|
||||
CloseCircleOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import systemApi from '@/api/system'
|
||||
import scTable from '@/components/scTable/index.vue'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
defineOptions({
|
||||
name: 'LogManagement',
|
||||
})
|
||||
|
||||
const searchParams = ref({
|
||||
keyword: '',
|
||||
type: undefined,
|
||||
date_range: undefined,
|
||||
})
|
||||
|
||||
const loading = ref(false)
|
||||
const dataSource = ref([])
|
||||
const pagination = ref({
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
})
|
||||
|
||||
const selectedRowKeys = ref([])
|
||||
const rowSelection = computed(() => ({
|
||||
selectedRowKeys: selectedRowKeys.value,
|
||||
onChange: (keys) => {
|
||||
selectedRowKeys.value = keys
|
||||
},
|
||||
}))
|
||||
|
||||
const columns = [
|
||||
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
|
||||
{ title: '日志类型', key: 'type', width: 100, align: 'center' },
|
||||
{ title: '日志内容', key: 'message', width: 400 },
|
||||
{ title: '用户', dataIndex: 'username', key: 'username', width: 120 },
|
||||
{ title: 'IP地址', dataIndex: 'ip', key: 'ip', width: 130 },
|
||||
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
|
||||
{ title: '操作', key: 'action', width: 150, fixed: 'right' },
|
||||
]
|
||||
|
||||
const detailVisible = ref(false)
|
||||
const currentLog = ref(null)
|
||||
|
||||
const fetchData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
page: pagination.value.current,
|
||||
page_size: pagination.value.pageSize,
|
||||
...searchParams.value,
|
||||
}
|
||||
|
||||
if (params.date_range && params.date_range.length === 2) {
|
||||
params.start_time = dayjs(params.date_range[0]).format('YYYY-MM-DD HH:mm:ss')
|
||||
params.end_time = dayjs(params.date_range[1]).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
|
||||
delete params.date_range
|
||||
|
||||
const res = await systemApi.logs.list.get(params)
|
||||
dataSource.value = res.data.list
|
||||
pagination.value.total = res.data.total
|
||||
} catch (error) {
|
||||
message.error('获取日志列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.value.current = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
searchParams.value = {
|
||||
keyword: '',
|
||||
type: undefined,
|
||||
date_range: undefined,
|
||||
}
|
||||
pagination.value.current = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handlePageChange = (page) => {
|
||||
pagination.value.current = page
|
||||
fetchData()
|
||||
}
|
||||
|
||||
const handleDetail = (record) => {
|
||||
currentLog.value = record
|
||||
detailVisible.value = true
|
||||
}
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
try {
|
||||
await systemApi.logs.delete.delete(id)
|
||||
message.success('删除成功')
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
message.error('删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleBatchDelete = async () => {
|
||||
try {
|
||||
await systemApi.logs.batchDelete.post({ ids: selectedRowKeys.value })
|
||||
message.success('批量删除成功')
|
||||
selectedRowKeys.value = []
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
message.error('批量删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleClearAll = async () => {
|
||||
try {
|
||||
await systemApi.logs.clear.post()
|
||||
message.success('清空日志成功')
|
||||
fetchData()
|
||||
} catch (error) {
|
||||
message.error('清空日志失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
const params = { ...searchParams.value }
|
||||
if (params.date_range && params.date_range.length === 2) {
|
||||
params.start_time = dayjs(params.date_range[0]).format('YYYY-MM-DD HH:mm:ss')
|
||||
params.end_time = dayjs(params.date_range[1]).format('YYYY-MM-DD HH:mm:ss')
|
||||
}
|
||||
delete params.date_range
|
||||
|
||||
const res = await systemApi.logs.export.get(params)
|
||||
const url = window.URL.createObjectURL(new Blob([res]))
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.setAttribute('download', `logs_${Date.now()}.xlsx`)
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
message.success('导出成功')
|
||||
} catch (error) {
|
||||
message.error('导出失败')
|
||||
}
|
||||
}
|
||||
|
||||
const getTypeColor = (type) => {
|
||||
const colors = {
|
||||
info: 'blue',
|
||||
warning: 'orange',
|
||||
error: 'red',
|
||||
}
|
||||
return colors[type] || 'default'
|
||||
}
|
||||
|
||||
const getTypeLabel = (type) => {
|
||||
const labels = {
|
||||
info: '信息',
|
||||
warning: '警告',
|
||||
error: '错误',
|
||||
}
|
||||
return labels[type] || type
|
||||
}
|
||||
|
||||
const formatJson = (data) => {
|
||||
try {
|
||||
return typeof data === 'string' ? data : JSON.stringify(data, null, 2)
|
||||
} catch {
|
||||
return String(data)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.log-management {
|
||||
padding: 16px;
|
||||
|
||||
.search-card {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
:deep(.ant-card-body) {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.log-message {
|
||||
display: inline-block;
|
||||
max-width: 380px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.log-detail {
|
||||
.user-agent {
|
||||
word-break: break-all;
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.log-content,
|
||||
.log-context {
|
||||
margin: 0;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
background: #f5f5f5;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user