feat: add audit logs and system configs
This commit is contained in:
@@ -20,7 +20,9 @@ const model = ref([
|
||||
{ label: 'Finance', icon: 'pi pi-fw pi-wallet', to: '/superadmin/finance' },
|
||||
{ label: 'Reports', icon: 'pi pi-fw pi-chart-line', to: '/superadmin/reports' },
|
||||
{ label: 'Assets', icon: 'pi pi-fw pi-folder', to: '/superadmin/assets' },
|
||||
{ label: 'Notifications', icon: 'pi pi-fw pi-bell', to: '/superadmin/notifications' }
|
||||
{ label: 'Notifications', icon: 'pi pi-fw pi-bell', to: '/superadmin/notifications' },
|
||||
{ label: 'Audit Logs', icon: 'pi pi-fw pi-shield', to: '/superadmin/audit-logs' },
|
||||
{ label: 'System Configs', icon: 'pi pi-fw pi-cog', to: '/superadmin/system-configs' }
|
||||
]
|
||||
}
|
||||
]);
|
||||
|
||||
@@ -174,6 +174,16 @@ const router = createRouter({
|
||||
name: 'superadmin-notifications',
|
||||
component: () => import('@/views/superadmin/Notifications.vue')
|
||||
},
|
||||
{
|
||||
path: '/superadmin/audit-logs',
|
||||
name: 'superadmin-audit-logs',
|
||||
component: () => import('@/views/superadmin/AuditLogs.vue')
|
||||
},
|
||||
{
|
||||
path: '/superadmin/system-configs',
|
||||
name: 'superadmin-system-configs',
|
||||
component: () => import('@/views/superadmin/SystemConfigs.vue')
|
||||
},
|
||||
{
|
||||
path: '/superadmin/orders/:orderID',
|
||||
name: 'superadmin-order-detail',
|
||||
|
||||
46
frontend/superadmin/src/service/AuditService.js
Normal file
46
frontend/superadmin/src/service/AuditService.js
Normal file
@@ -0,0 +1,46 @@
|
||||
import { requestJson } from './apiClient';
|
||||
|
||||
function normalizeItems(items) {
|
||||
if (Array.isArray(items)) return items;
|
||||
if (items && typeof items === 'object') return [items];
|
||||
return [];
|
||||
}
|
||||
|
||||
export const AuditService = {
|
||||
async listAuditLogs({ page, limit, id, tenant_id, tenant_code, tenant_name, operator_id, operator_name, action, target_id, keyword, created_at_from, created_at_to, sortField, sortOrder } = {}) {
|
||||
const iso = (d) => {
|
||||
if (!d) return undefined;
|
||||
const date = d instanceof Date ? d : new Date(d);
|
||||
if (Number.isNaN(date.getTime())) return undefined;
|
||||
return date.toISOString();
|
||||
};
|
||||
|
||||
const query = {
|
||||
page,
|
||||
limit,
|
||||
id,
|
||||
tenant_id,
|
||||
tenant_code,
|
||||
tenant_name,
|
||||
operator_id,
|
||||
operator_name,
|
||||
action,
|
||||
target_id,
|
||||
keyword,
|
||||
created_at_from: iso(created_at_from),
|
||||
created_at_to: iso(created_at_to)
|
||||
};
|
||||
if (sortField && sortOrder) {
|
||||
if (sortOrder === 1) query.asc = sortField;
|
||||
if (sortOrder === -1) query.desc = sortField;
|
||||
}
|
||||
|
||||
const data = await requestJson('/super/v1/audit-logs', { query });
|
||||
return {
|
||||
page: data?.page ?? page ?? 1,
|
||||
limit: data?.limit ?? limit ?? 10,
|
||||
total: data?.total ?? 0,
|
||||
items: normalizeItems(data?.items)
|
||||
};
|
||||
}
|
||||
};
|
||||
60
frontend/superadmin/src/service/SystemConfigService.js
Normal file
60
frontend/superadmin/src/service/SystemConfigService.js
Normal file
@@ -0,0 +1,60 @@
|
||||
import { requestJson } from './apiClient';
|
||||
|
||||
function normalizeItems(items) {
|
||||
if (Array.isArray(items)) return items;
|
||||
if (items && typeof items === 'object') return [items];
|
||||
return [];
|
||||
}
|
||||
|
||||
export const SystemConfigService = {
|
||||
async listConfigs({ page, limit, config_key, keyword, created_at_from, created_at_to, updated_at_from, updated_at_to, sortField, sortOrder } = {}) {
|
||||
const iso = (d) => {
|
||||
if (!d) return undefined;
|
||||
const date = d instanceof Date ? d : new Date(d);
|
||||
if (Number.isNaN(date.getTime())) return undefined;
|
||||
return date.toISOString();
|
||||
};
|
||||
|
||||
const query = {
|
||||
page,
|
||||
limit,
|
||||
config_key,
|
||||
keyword,
|
||||
created_at_from: iso(created_at_from),
|
||||
created_at_to: iso(created_at_to),
|
||||
updated_at_from: iso(updated_at_from),
|
||||
updated_at_to: iso(updated_at_to)
|
||||
};
|
||||
if (sortField && sortOrder) {
|
||||
if (sortOrder === 1) query.asc = sortField;
|
||||
if (sortOrder === -1) query.desc = sortField;
|
||||
}
|
||||
|
||||
const data = await requestJson('/super/v1/system-configs', { query });
|
||||
return {
|
||||
page: data?.page ?? page ?? 1,
|
||||
limit: data?.limit ?? limit ?? 10,
|
||||
total: data?.total ?? 0,
|
||||
items: normalizeItems(data?.items)
|
||||
};
|
||||
},
|
||||
async createConfig({ config_key, value, description } = {}) {
|
||||
return requestJson('/super/v1/system-configs', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
config_key,
|
||||
value,
|
||||
description
|
||||
}
|
||||
});
|
||||
},
|
||||
async updateConfig(id, { value, description } = {}) {
|
||||
return requestJson(`/super/v1/system-configs/${id}`, {
|
||||
method: 'PATCH',
|
||||
body: {
|
||||
value,
|
||||
description
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
192
frontend/superadmin/src/views/superadmin/AuditLogs.vue
Normal file
192
frontend/superadmin/src/views/superadmin/AuditLogs.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<script setup>
|
||||
import SearchField from '@/components/SearchField.vue';
|
||||
import SearchPanel from '@/components/SearchPanel.vue';
|
||||
import { AuditService } from '@/service/AuditService';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
const logs = ref([]);
|
||||
const loading = ref(false);
|
||||
const totalRecords = ref(0);
|
||||
const page = ref(1);
|
||||
const rows = ref(10);
|
||||
const sortField = ref('created_at');
|
||||
const sortOrder = ref(-1);
|
||||
|
||||
const logID = ref(null);
|
||||
const tenantID = ref(null);
|
||||
const tenantCode = ref('');
|
||||
const tenantName = ref('');
|
||||
const operatorID = ref(null);
|
||||
const operatorName = ref('');
|
||||
const action = ref('');
|
||||
const targetID = ref('');
|
||||
const keyword = ref('');
|
||||
const createdAtFrom = ref(null);
|
||||
const createdAtTo = ref(null);
|
||||
|
||||
function formatDate(value) {
|
||||
if (!value) return '-';
|
||||
if (String(value).startsWith('0001-01-01')) return '-';
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return String(value);
|
||||
return date.toLocaleString();
|
||||
}
|
||||
|
||||
function getActionSeverity(value) {
|
||||
if (!value) return 'secondary';
|
||||
if (value.includes('reject') || value.includes('freeze')) return 'danger';
|
||||
if (value.includes('approve') || value.includes('create')) return 'success';
|
||||
if (value.includes('update')) return 'info';
|
||||
return 'secondary';
|
||||
}
|
||||
|
||||
async function loadLogs() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const result = await AuditService.listAuditLogs({
|
||||
page: page.value,
|
||||
limit: rows.value,
|
||||
id: logID.value || undefined,
|
||||
tenant_id: tenantID.value || undefined,
|
||||
tenant_code: tenantCode.value,
|
||||
tenant_name: tenantName.value,
|
||||
operator_id: operatorID.value || undefined,
|
||||
operator_name: operatorName.value,
|
||||
action: action.value,
|
||||
target_id: targetID.value,
|
||||
keyword: keyword.value,
|
||||
created_at_from: createdAtFrom.value || undefined,
|
||||
created_at_to: createdAtTo.value || undefined,
|
||||
sortField: sortField.value,
|
||||
sortOrder: sortOrder.value
|
||||
});
|
||||
logs.value = result.items;
|
||||
totalRecords.value = result.total;
|
||||
} catch (error) {
|
||||
toast.add({ severity: 'error', summary: '加载失败', detail: error?.message || '无法加载审计日志', life: 4000 });
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onSearch() {
|
||||
page.value = 1;
|
||||
loadLogs();
|
||||
}
|
||||
|
||||
function onReset() {
|
||||
logID.value = null;
|
||||
tenantID.value = null;
|
||||
tenantCode.value = '';
|
||||
tenantName.value = '';
|
||||
operatorID.value = null;
|
||||
operatorName.value = '';
|
||||
action.value = '';
|
||||
targetID.value = '';
|
||||
keyword.value = '';
|
||||
createdAtFrom.value = null;
|
||||
createdAtTo.value = null;
|
||||
sortField.value = 'created_at';
|
||||
sortOrder.value = -1;
|
||||
page.value = 1;
|
||||
rows.value = 10;
|
||||
loadLogs();
|
||||
}
|
||||
|
||||
function onPage(event) {
|
||||
page.value = (event.page ?? 0) + 1;
|
||||
rows.value = event.rows ?? rows.value;
|
||||
loadLogs();
|
||||
}
|
||||
|
||||
function onSort(event) {
|
||||
sortField.value = event.sortField ?? sortField.value;
|
||||
sortOrder.value = event.sortOrder ?? sortOrder.value;
|
||||
loadLogs();
|
||||
}
|
||||
|
||||
loadLogs();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h4 class="m-0">审计日志</h4>
|
||||
</div>
|
||||
|
||||
<SearchPanel :loading="loading" @search="onSearch" @reset="onReset">
|
||||
<SearchField label="日志ID">
|
||||
<InputNumber v-model="logID" :min="1" placeholder="精确匹配" class="w-full" />
|
||||
</SearchField>
|
||||
<SearchField label="TenantID">
|
||||
<InputNumber v-model="tenantID" :min="1" placeholder="精确匹配" class="w-full" />
|
||||
</SearchField>
|
||||
<SearchField label="租户编码">
|
||||
<InputText v-model="tenantCode" placeholder="模糊匹配" class="w-full" @keyup.enter="onSearch" />
|
||||
</SearchField>
|
||||
<SearchField label="租户名称">
|
||||
<InputText v-model="tenantName" placeholder="模糊匹配" class="w-full" @keyup.enter="onSearch" />
|
||||
</SearchField>
|
||||
<SearchField label="操作者ID">
|
||||
<InputNumber v-model="operatorID" :min="1" placeholder="精确匹配" class="w-full" />
|
||||
</SearchField>
|
||||
<SearchField label="操作者">
|
||||
<InputText v-model="operatorName" placeholder="用户名/昵称" class="w-full" @keyup.enter="onSearch" />
|
||||
</SearchField>
|
||||
<SearchField label="动作">
|
||||
<InputText v-model="action" placeholder="动作标识" class="w-full" @keyup.enter="onSearch" />
|
||||
</SearchField>
|
||||
<SearchField label="目标ID">
|
||||
<InputText v-model="targetID" placeholder="目标ID" class="w-full" @keyup.enter="onSearch" />
|
||||
</SearchField>
|
||||
<SearchField label="关键字">
|
||||
<InputText v-model="keyword" placeholder="详情关键字" class="w-full" @keyup.enter="onSearch" />
|
||||
</SearchField>
|
||||
<SearchField label="创建时间 From">
|
||||
<DatePicker v-model="createdAtFrom" showIcon showButtonBar placeholder="开始时间" class="w-full" />
|
||||
</SearchField>
|
||||
<SearchField label="创建时间 To">
|
||||
<DatePicker v-model="createdAtTo" showIcon showButtonBar placeholder="结束时间" class="w-full" />
|
||||
</SearchField>
|
||||
</SearchPanel>
|
||||
|
||||
<DataTable :value="logs" :loading="loading" :rows="rows" :totalRecords="totalRecords" :first="(page - 1) * rows" paginator lazy dataKey="id" @page="onPage" @sort="onSort" :sortField="sortField" :sortOrder="sortOrder">
|
||||
<Column field="id" header="日志ID" style="min-width: 8rem" sortable />
|
||||
<Column header="租户" style="min-width: 14rem">
|
||||
<template #body="{ data }">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-medium">{{ data.tenant_name || '-' }}</span>
|
||||
<span class="text-sm text-muted-color">{{ data.tenant_code || '-' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="操作者" style="min-width: 12rem">
|
||||
<template #body="{ data }">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-medium">{{ data.operator_name || '-' }}</span>
|
||||
<span class="text-sm text-muted-color">ID: {{ data.operator_id ?? '-' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="action" header="动作" style="min-width: 10rem">
|
||||
<template #body="{ data }">
|
||||
<Tag :value="data.action || '-'" :severity="getActionSeverity(data.action)" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="target_id" header="目标ID" style="min-width: 10rem" />
|
||||
<Column header="详情" style="min-width: 16rem">
|
||||
<template #body="{ data }">
|
||||
<span class="block max-w-[320px] truncate" :title="data.detail">{{ data.detail || '-' }}</span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="created_at" header="创建时间" style="min-width: 14rem">
|
||||
<template #body="{ data }">
|
||||
{{ formatDate(data.created_at) }}
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</template>
|
||||
276
frontend/superadmin/src/views/superadmin/SystemConfigs.vue
Normal file
276
frontend/superadmin/src/views/superadmin/SystemConfigs.vue
Normal file
@@ -0,0 +1,276 @@
|
||||
<script setup>
|
||||
import SearchField from '@/components/SearchField.vue';
|
||||
import SearchPanel from '@/components/SearchPanel.vue';
|
||||
import { SystemConfigService } from '@/service/SystemConfigService';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
const toast = useToast();
|
||||
|
||||
const configs = ref([]);
|
||||
const loading = ref(false);
|
||||
const totalRecords = ref(0);
|
||||
const page = ref(1);
|
||||
const rows = ref(10);
|
||||
const sortField = ref('updated_at');
|
||||
const sortOrder = ref(-1);
|
||||
|
||||
const configKey = ref('');
|
||||
const keyword = ref('');
|
||||
const createdAtFrom = ref(null);
|
||||
const createdAtTo = ref(null);
|
||||
const updatedAtFrom = ref(null);
|
||||
const updatedAtTo = ref(null);
|
||||
|
||||
const editDialogVisible = ref(false);
|
||||
const editSubmitting = ref(false);
|
||||
const editingConfig = ref(null);
|
||||
const formKey = ref('');
|
||||
const formDescription = ref('');
|
||||
const formValueText = ref('');
|
||||
|
||||
const dialogTitle = computed(() => (editingConfig.value ? '编辑系统配置' : '新建系统配置'));
|
||||
|
||||
function formatDate(value) {
|
||||
if (!value) return '-';
|
||||
if (String(value).startsWith('0001-01-01')) return '-';
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return String(value);
|
||||
return date.toLocaleString();
|
||||
}
|
||||
|
||||
function formatJsonPreview(value) {
|
||||
if (value === undefined || value === null) return '-';
|
||||
try {
|
||||
return JSON.stringify(value);
|
||||
} catch (error) {
|
||||
return String(value);
|
||||
}
|
||||
}
|
||||
|
||||
function toJsonText(value) {
|
||||
if (value === undefined || value === null) return '';
|
||||
try {
|
||||
return JSON.stringify(value, null, 2);
|
||||
} catch (error) {
|
||||
return String(value);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadConfigs() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const result = await SystemConfigService.listConfigs({
|
||||
page: page.value,
|
||||
limit: rows.value,
|
||||
config_key: configKey.value,
|
||||
keyword: keyword.value,
|
||||
created_at_from: createdAtFrom.value || undefined,
|
||||
created_at_to: createdAtTo.value || undefined,
|
||||
updated_at_from: updatedAtFrom.value || undefined,
|
||||
updated_at_to: updatedAtTo.value || undefined,
|
||||
sortField: sortField.value,
|
||||
sortOrder: sortOrder.value
|
||||
});
|
||||
configs.value = result.items;
|
||||
totalRecords.value = result.total;
|
||||
} catch (error) {
|
||||
toast.add({ severity: 'error', summary: '加载失败', detail: error?.message || '无法加载系统配置', life: 4000 });
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onSearch() {
|
||||
page.value = 1;
|
||||
loadConfigs();
|
||||
}
|
||||
|
||||
function onReset() {
|
||||
configKey.value = '';
|
||||
keyword.value = '';
|
||||
createdAtFrom.value = null;
|
||||
createdAtTo.value = null;
|
||||
updatedAtFrom.value = null;
|
||||
updatedAtTo.value = null;
|
||||
sortField.value = 'updated_at';
|
||||
sortOrder.value = -1;
|
||||
page.value = 1;
|
||||
rows.value = 10;
|
||||
loadConfigs();
|
||||
}
|
||||
|
||||
function onPage(event) {
|
||||
page.value = (event.page ?? 0) + 1;
|
||||
rows.value = event.rows ?? rows.value;
|
||||
loadConfigs();
|
||||
}
|
||||
|
||||
function onSort(event) {
|
||||
sortField.value = event.sortField ?? sortField.value;
|
||||
sortOrder.value = event.sortOrder ?? sortOrder.value;
|
||||
loadConfigs();
|
||||
}
|
||||
|
||||
function openCreateDialog() {
|
||||
editingConfig.value = null;
|
||||
formKey.value = '';
|
||||
formDescription.value = '';
|
||||
formValueText.value = '{\n \n}';
|
||||
editDialogVisible.value = true;
|
||||
}
|
||||
|
||||
function openEditDialog(row) {
|
||||
editingConfig.value = row;
|
||||
formKey.value = row?.config_key || '';
|
||||
formDescription.value = row?.description || '';
|
||||
formValueText.value = toJsonText(row?.value);
|
||||
editDialogVisible.value = true;
|
||||
}
|
||||
|
||||
function parseValueOrToast() {
|
||||
const raw = formValueText.value.trim();
|
||||
if (!raw) {
|
||||
toast.add({ severity: 'warn', summary: '提示', detail: '请输入配置值(JSON)', life: 3000 });
|
||||
return null;
|
||||
}
|
||||
try {
|
||||
return JSON.parse(raw);
|
||||
} catch (error) {
|
||||
toast.add({ severity: 'error', summary: '格式错误', detail: '配置值必须是合法 JSON', life: 4000 });
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function submitConfig() {
|
||||
const desc = formDescription.value.trim();
|
||||
if (!desc) {
|
||||
toast.add({ severity: 'warn', summary: '提示', detail: '配置说明不能为空', life: 3000 });
|
||||
return;
|
||||
}
|
||||
|
||||
const value = parseValueOrToast();
|
||||
if (value === null) return;
|
||||
|
||||
editSubmitting.value = true;
|
||||
try {
|
||||
if (editingConfig.value) {
|
||||
await SystemConfigService.updateConfig(editingConfig.value.id, {
|
||||
value,
|
||||
description: desc
|
||||
});
|
||||
toast.add({ severity: 'success', summary: '已更新', detail: '系统配置已更新', life: 3000 });
|
||||
} else {
|
||||
const key = formKey.value.trim();
|
||||
if (!key) {
|
||||
toast.add({ severity: 'warn', summary: '提示', detail: '配置Key不能为空', life: 3000 });
|
||||
return;
|
||||
}
|
||||
await SystemConfigService.createConfig({
|
||||
config_key: key,
|
||||
value,
|
||||
description: desc
|
||||
});
|
||||
toast.add({ severity: 'success', summary: '已创建', detail: '系统配置已创建', life: 3000 });
|
||||
}
|
||||
editDialogVisible.value = false;
|
||||
loadConfigs();
|
||||
} catch (error) {
|
||||
toast.add({ severity: 'error', summary: '提交失败', detail: error?.message || '无法提交系统配置', life: 4000 });
|
||||
} finally {
|
||||
editSubmitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
loadConfigs();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h4 class="m-0">系统配置</h4>
|
||||
<Button label="新建配置" icon="pi pi-plus" @click="openCreateDialog" />
|
||||
</div>
|
||||
|
||||
<SearchPanel :loading="loading" @search="onSearch" @reset="onReset">
|
||||
<SearchField label="Config Key">
|
||||
<InputText v-model="configKey" placeholder="精确匹配" class="w-full" @keyup.enter="onSearch" />
|
||||
</SearchField>
|
||||
<SearchField label="关键字">
|
||||
<InputText v-model="keyword" placeholder="Key/说明" class="w-full" @keyup.enter="onSearch" />
|
||||
</SearchField>
|
||||
<SearchField label="创建时间 From">
|
||||
<DatePicker v-model="createdAtFrom" showIcon showButtonBar placeholder="开始时间" class="w-full" />
|
||||
</SearchField>
|
||||
<SearchField label="创建时间 To">
|
||||
<DatePicker v-model="createdAtTo" showIcon showButtonBar placeholder="结束时间" class="w-full" />
|
||||
</SearchField>
|
||||
<SearchField label="更新时间 From">
|
||||
<DatePicker v-model="updatedAtFrom" showIcon showButtonBar placeholder="开始时间" class="w-full" />
|
||||
</SearchField>
|
||||
<SearchField label="更新时间 To">
|
||||
<DatePicker v-model="updatedAtTo" showIcon showButtonBar placeholder="结束时间" class="w-full" />
|
||||
</SearchField>
|
||||
</SearchPanel>
|
||||
|
||||
<DataTable :value="configs" :loading="loading" :rows="rows" :totalRecords="totalRecords" :first="(page - 1) * rows" paginator lazy dataKey="id" @page="onPage" @sort="onSort" :sortField="sortField" :sortOrder="sortOrder">
|
||||
<Column field="id" header="ID" style="min-width: 6rem" sortable />
|
||||
<Column field="config_key" header="Key" style="min-width: 14rem" sortable />
|
||||
<Column header="说明" style="min-width: 14rem">
|
||||
<template #body="{ data }">
|
||||
<span class="block max-w-[260px] truncate" :title="data.description">{{ data.description || '-' }}</span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="配置值" style="min-width: 18rem">
|
||||
<template #body="{ data }">
|
||||
<span class="block max-w-[360px] truncate" :title="formatJsonPreview(data.value)">
|
||||
{{ formatJsonPreview(data.value) }}
|
||||
</span>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="updated_at" header="更新时间" style="min-width: 14rem" sortable>
|
||||
<template #body="{ data }">
|
||||
{{ formatDate(data.updated_at) }}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="created_at" header="创建时间" style="min-width: 14rem" sortable>
|
||||
<template #body="{ data }">
|
||||
{{ formatDate(data.created_at) }}
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="操作" style="min-width: 8rem">
|
||||
<template #body="{ data }">
|
||||
<Button label="编辑" icon="pi pi-pencil" text size="small" class="p-0" @click="openEditDialog(data)" />
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<Dialog v-model:visible="editDialogVisible" :modal="true" :style="{ width: '640px' }">
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-medium">{{ dialogTitle }}</span>
|
||||
<span v-if="editingConfig?.id" class="text-muted-color">ID: {{ editingConfig.id }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<label class="block font-medium mb-2">Config Key</label>
|
||||
<InputText v-model="formKey" placeholder="唯一Key" class="w-full" :disabled="!!editingConfig" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block font-medium mb-2">配置说明</label>
|
||||
<InputText v-model="formDescription" placeholder="配置说明" class="w-full" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block font-medium mb-2">配置值(JSON)</label>
|
||||
<Textarea v-model="formValueText" rows="8" placeholder='例如 {"enabled": true}' class="w-full font-mono" />
|
||||
<div class="text-sm text-muted-color mt-2">需输入合法 JSON;字符串需使用双引号包裹。</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<Button label="取消" icon="pi pi-times" text @click="editDialogVisible = false" :disabled="editSubmitting" />
|
||||
<Button label="确认保存" icon="pi pi-check" @click="submitConfig" :loading="editSubmitting" />
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
Reference in New Issue
Block a user