feat:告警配置界面接口对接
This commit is contained in:
zhongzm
33
apps/web-antd/src/api/alert/alert.ts
Normal file
33
apps/web-antd/src/api/alert/alert.ts
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
import type { PageParam, PageResult } from '@vben/request';
|
||||||
|
|
||||||
|
import { requestClient } from '#/api/request';
|
||||||
|
|
||||||
|
export namespace AlertApi {
|
||||||
|
export interface Alert {
|
||||||
|
id: number;
|
||||||
|
users: [];
|
||||||
|
days: [];
|
||||||
|
content: string;
|
||||||
|
status: number;
|
||||||
|
templateCode: string;
|
||||||
|
remark: string;
|
||||||
|
createTime: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AlertPageReq extends PageParam {
|
||||||
|
reminderName?: string;
|
||||||
|
expireTime?: string;
|
||||||
|
reminderDays?: number;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 获取告警列表
|
||||||
|
export function getAlertPage(params: PageParam) {
|
||||||
|
return requestClient.get<PageResult<AlertApi.Alert>>('/license/alert/page', {
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改告警配置
|
||||||
|
export function updateAlert(data: AlertApi.Alert) {
|
||||||
|
return requestClient.put('/license/alert/update', data);
|
||||||
|
}
|
||||||
16
apps/web-antd/src/locales/langs/en-US/alert.json
Normal file
16
apps/web-antd/src/locales/langs/en-US/alert.json
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"list": "Alert Configuration List",
|
||||||
|
"reminderName": "Reminder Person",
|
||||||
|
"reminderNamePlaceholder": "Please enter reminder person name",
|
||||||
|
"expireTime": "Expire Time",
|
||||||
|
"expireTimePlaceholder": "Please select expire time",
|
||||||
|
"reminderDays": "Reminder Days",
|
||||||
|
"reminderDaysPlaceholder": "Please enter reminder days",
|
||||||
|
"email": "Email",
|
||||||
|
"emailPlaceholder": "Please enter email address",
|
||||||
|
"description": "Description",
|
||||||
|
"descriptionPlaceholder": "Please enter description",
|
||||||
|
"createTime": "Create Time",
|
||||||
|
"updateTime": "Update Time",
|
||||||
|
"operation": "Operation"
|
||||||
|
}
|
||||||
16
apps/web-antd/src/locales/langs/zh-CN/alert.json
Normal file
16
apps/web-antd/src/locales/langs/zh-CN/alert.json
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"list": "告警配置列表",
|
||||||
|
"reminderName": "提醒人",
|
||||||
|
"reminderNamePlaceholder": "请输入提醒人姓名",
|
||||||
|
"expireTime": "到期时间",
|
||||||
|
"expireTimePlaceholder": "请选择到期时间",
|
||||||
|
"reminderDays": "提醒天数",
|
||||||
|
"reminderDaysPlaceholder": "请输入提醒天数",
|
||||||
|
"email": "邮箱",
|
||||||
|
"emailPlaceholder": "请输入邮箱地址",
|
||||||
|
"description": "描述",
|
||||||
|
"descriptionPlaceholder": "请输入描述信息",
|
||||||
|
"createTime": "创建时间",
|
||||||
|
"updateTime": "更新时间",
|
||||||
|
"operation": "操作"
|
||||||
|
}
|
||||||
192
apps/web-antd/src/views/alert/data.ts
Normal file
192
apps/web-antd/src/views/alert/data.ts
Normal file
@@ -0,0 +1,192 @@
|
|||||||
|
import type { VbenFormSchema } from '#/adapter/form';
|
||||||
|
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||||
|
import type { AlertApi } from '#/api/alert/alert';
|
||||||
|
|
||||||
|
import { h, ref } from 'vue';
|
||||||
|
|
||||||
|
import { $t } from '#/locales';
|
||||||
|
|
||||||
|
export const formData = ref<AlertApi.Alert>();
|
||||||
|
|
||||||
|
export function useGridColumns(onActionClick: OnActionClickFn<AlertApi.Alert>) {
|
||||||
|
const columns: VxeTableGridOptions<AlertApi.Alert>['columns'] = [
|
||||||
|
{
|
||||||
|
title: $t('alert.reminderName'),
|
||||||
|
field: 'reminderName',
|
||||||
|
width: 200,
|
||||||
|
showOverflow: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: $t('alert.expireTime'),
|
||||||
|
field: 'expireTime',
|
||||||
|
width: 180,
|
||||||
|
formatter: ({ cellValue }) => {
|
||||||
|
return cellValue ? new Date(cellValue).toLocaleString() : '-';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: $t('alert.reminderDays'),
|
||||||
|
field: 'reminderDays',
|
||||||
|
width: 120,
|
||||||
|
formatter: ({ cellValue }) => {
|
||||||
|
return cellValue ? `${cellValue}天` : '-';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: $t('alert.createTime'),
|
||||||
|
field: 'createTime',
|
||||||
|
width: 180,
|
||||||
|
formatter: ({ cellValue }) => {
|
||||||
|
return cellValue ? new Date(cellValue).toLocaleString() : '-';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: $t('alert.operation'),
|
||||||
|
field: 'actions',
|
||||||
|
width: 120,
|
||||||
|
fixed: 'right',
|
||||||
|
slots: {
|
||||||
|
default: ({ row }) => [
|
||||||
|
h(
|
||||||
|
'div',
|
||||||
|
{
|
||||||
|
class: 'flex items-center gap-1',
|
||||||
|
},
|
||||||
|
[
|
||||||
|
h(
|
||||||
|
'button',
|
||||||
|
{
|
||||||
|
class: 'text-primary hover:text-primary-dark',
|
||||||
|
onClick: () => onActionClick({ code: 'edit', row }),
|
||||||
|
},
|
||||||
|
[
|
||||||
|
h('span', { class: 'i-mdi:pencil text-sm' }),
|
||||||
|
h('span', { class: 'ml-1' }, $t('ui.actionTitle.edit')),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
h(
|
||||||
|
'button',
|
||||||
|
{
|
||||||
|
class: 'text-destructive hover:text-destructive-dark',
|
||||||
|
onClick: () => onActionClick({ code: 'delete', row }),
|
||||||
|
},
|
||||||
|
[
|
||||||
|
h('span', { class: 'i-mdi:delete text-sm' }),
|
||||||
|
h('span', { class: 'ml-1' }, $t('ui.actionTitle.delete')),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return columns;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useGridFormSchema(): VbenFormSchema[] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
fieldName: 'reminderName',
|
||||||
|
label: $t('alert.reminderName'),
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'expireTime',
|
||||||
|
label: $t('alert.expireTime'),
|
||||||
|
component: 'RangePicker',
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'reminderDays',
|
||||||
|
label: $t('alert.reminderDays'),
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'email',
|
||||||
|
label: $t('alert.email'),
|
||||||
|
component: 'Input',
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useAlertFormSchema(
|
||||||
|
userOptions: any = [],
|
||||||
|
daysOptions: any = [],
|
||||||
|
): VbenFormSchema[] {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
fieldName: 'id',
|
||||||
|
component: 'Input',
|
||||||
|
dependencies: {
|
||||||
|
triggerFields: [''],
|
||||||
|
show: () => false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'users',
|
||||||
|
label: '提醒人',
|
||||||
|
rules: 'required',
|
||||||
|
component: 'Select',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择提醒人',
|
||||||
|
mode: 'multiple',
|
||||||
|
allowClear: true,
|
||||||
|
showSearch: true,
|
||||||
|
filterOption: (input: string, option: any) => {
|
||||||
|
return option?.label?.toLowerCase().includes(input.toLowerCase());
|
||||||
|
},
|
||||||
|
options: userOptions,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'days',
|
||||||
|
label: '提醒天数',
|
||||||
|
rules: 'required',
|
||||||
|
component: 'Select',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择提醒天数',
|
||||||
|
mode: 'multiple',
|
||||||
|
allowClear: true,
|
||||||
|
options: daysOptions,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'content',
|
||||||
|
label: '提醒内容',
|
||||||
|
rules: 'required',
|
||||||
|
component: 'Textarea',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入提醒内容',
|
||||||
|
rows: 4,
|
||||||
|
showCount: true,
|
||||||
|
maxlength: 500,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'status',
|
||||||
|
label: '启用状态',
|
||||||
|
component: 'Switch',
|
||||||
|
componentProps: {
|
||||||
|
checkedChildren: '启用',
|
||||||
|
unCheckedChildren: '禁用',
|
||||||
|
checkedValue: 1,
|
||||||
|
unCheckedValue: 2,
|
||||||
|
style: { width: 'auto' },
|
||||||
|
},
|
||||||
|
defaultValue: 1,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
191
apps/web-antd/src/views/alert/index.vue
Normal file
191
apps/web-antd/src/views/alert/index.vue
Normal file
@@ -0,0 +1,191 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, onMounted, ref } from 'vue';
|
||||||
|
|
||||||
|
import { Page } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import { Button, Card, message, Space } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { useVbenForm } from '#/adapter/form';
|
||||||
|
import { getAlertPage, updateAlert } from '#/api/alert/alert';
|
||||||
|
import { getUserPage } from '#/api/system/user';
|
||||||
|
|
||||||
|
// 表单数据
|
||||||
|
const formData = ref({
|
||||||
|
users: [],
|
||||||
|
days: [],
|
||||||
|
content: '',
|
||||||
|
status: 1,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 用户列表选项
|
||||||
|
const userOptions = ref([]);
|
||||||
|
|
||||||
|
// 提醒天数选项
|
||||||
|
const daysOptions = [
|
||||||
|
{ label: '15天', value: 15 },
|
||||||
|
{ label: '7天', value: 7 },
|
||||||
|
{ label: '2天', value: 2 },
|
||||||
|
{ label: '1天', value: 1 },
|
||||||
|
];
|
||||||
|
|
||||||
|
// 表单配置
|
||||||
|
const formSchema = computed(() => [
|
||||||
|
{
|
||||||
|
fieldName: 'id',
|
||||||
|
component: 'Input',
|
||||||
|
dependencies: {
|
||||||
|
triggerFields: [''],
|
||||||
|
show: () => false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'users',
|
||||||
|
label: '提醒人',
|
||||||
|
rules: 'required',
|
||||||
|
component: 'Select',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择提醒人',
|
||||||
|
mode: 'multiple',
|
||||||
|
allowClear: true,
|
||||||
|
showSearch: true,
|
||||||
|
filterOption: (input: string, option: any) => {
|
||||||
|
return option?.label?.toLowerCase().includes(input.toLowerCase());
|
||||||
|
},
|
||||||
|
options: userOptions.value,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'days',
|
||||||
|
label: '提醒天数',
|
||||||
|
rules: 'required',
|
||||||
|
component: 'Select',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择提醒天数',
|
||||||
|
mode: 'multiple',
|
||||||
|
allowClear: true,
|
||||||
|
options: daysOptions,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'content',
|
||||||
|
label: '提醒内容',
|
||||||
|
rules: 'required',
|
||||||
|
component: 'Textarea',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入提醒内容',
|
||||||
|
rows: 4,
|
||||||
|
showCount: true,
|
||||||
|
maxlength: 500,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
fieldName: 'status',
|
||||||
|
label: '启用状态',
|
||||||
|
component: 'Switch',
|
||||||
|
componentProps: {
|
||||||
|
checkedChildren: '启用',
|
||||||
|
unCheckedChildren: '禁用',
|
||||||
|
checkedValue: 1,
|
||||||
|
unCheckedValue: 2,
|
||||||
|
style: { width: 'auto' },
|
||||||
|
},
|
||||||
|
defaultValue: 1,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const [Form, formApi] = useVbenForm({
|
||||||
|
commonConfig: {
|
||||||
|
componentProps: {
|
||||||
|
class: 'w-full',
|
||||||
|
},
|
||||||
|
labelWidth: 120,
|
||||||
|
},
|
||||||
|
layout: 'horizontal',
|
||||||
|
schema: formSchema,
|
||||||
|
showDefaultActions: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 提交处理函数
|
||||||
|
async function handleSubmit() {
|
||||||
|
const { valid } = await formApi.validate();
|
||||||
|
|
||||||
|
if (!valid) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const values = await formApi.getValues();
|
||||||
|
|
||||||
|
// 添加必需的templateCode参数
|
||||||
|
const submitData = {
|
||||||
|
...values,
|
||||||
|
templateCode: 'expiration_reminder',
|
||||||
|
};
|
||||||
|
|
||||||
|
// 根据实际需要调用创建或更新接口
|
||||||
|
if (values.id) {
|
||||||
|
await updateAlert(submitData);
|
||||||
|
message.success('更新成功');
|
||||||
|
}
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置处理函数
|
||||||
|
function handleReset() {
|
||||||
|
loadUserList();
|
||||||
|
loadAlertConfig();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载用户列表
|
||||||
|
async function loadUserList() {
|
||||||
|
try {
|
||||||
|
// 参考部门管理界面的做法，使用getUserPage接口
|
||||||
|
const { list } = await getUserPage({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 100, // 获取前100个用户
|
||||||
|
});
|
||||||
|
|
||||||
|
userOptions.value = list.map((user) => ({
|
||||||
|
label: user.nickname || user.username,
|
||||||
|
value: user.id,
|
||||||
|
}));
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载现有配置
|
||||||
|
async function loadAlertConfig() {
|
||||||
|
try {
|
||||||
|
// 使用getAlertPage接口获取告警配置
|
||||||
|
const { list } = await getAlertPage({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 1,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 如果有配置数据，则加载第一个配置
|
||||||
|
if (list && list.length > 0) {
|
||||||
|
const config = list[0];
|
||||||
|
formData.value = config;
|
||||||
|
await formApi.setValues(config);
|
||||||
|
}
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
await loadUserList();
|
||||||
|
await loadAlertConfig();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Page auto-content-height>
|
||||||
|
<Card title="告警配置">
|
||||||
|
<Form />
|
||||||
|
<div class="mt-4 flex justify-end">
|
||||||
|
<Space>
|
||||||
|
<Button type="primary" @click="handleSubmit">保存</Button>
|
||||||
|
<Button @click="handleReset">重置</Button>
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</Page>
|
||||||
|
</template>
|
||||||
Reference in New Issue
Block a user