feat:告警配置界面接口对接

apps/web-antd/src/api/alert/alert.ts

@@ -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);
+}

apps/web-antd/src/locales/langs/en-US/alert.json

@@ -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"
+}

apps/web-antd/src/locales/langs/zh-CN/alert.json

@@ -0,0 +1,16 @@
+{
+  "list": "告警配置列表",
+  "reminderName": "提醒人",
+  "reminderNamePlaceholder": "请输入提醒人姓名",
+  "expireTime": "到期时间",
+  "expireTimePlaceholder": "请选择到期时间",
+  "reminderDays": "提醒天数",
+  "reminderDaysPlaceholder": "请输入提醒天数",
+  "email": "邮箱",
+  "emailPlaceholder": "请输入邮箱地址",
+  "description": "描述",
+  "descriptionPlaceholder": "请输入描述信息",
+  "createTime": "创建时间",
+  "updateTime": "更新时间",
+  "operation": "操作"
+}

apps/web-antd/src/views/alert/data.ts

@@ -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,
+    },
+  ];
+}

apps/web-antd/src/views/alert/index.vue

@@ -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>