d8d-admin-mobile-starter-public/client/admin/pages_alert_notify_config.tsx

import React, { useState, useEffect } from 'react';
import { 
  Button, Table, Space,
  Form, Input, Select, message, Modal, Badge, 
  Popconfirm, Tag, Card
} from 'antd';
import 'dayjs/locale/zh-cn';
// 从share/types.ts导入所有类型，包括MapMode
import type { 
  AlertNotifyConfig
} from '../share/monitorTypes.ts';

import {
  AlertLevel, NotifyType, 
  AlertLevelNameMap, 
  NotifyTypeNameMap, 
} from '../share/monitorTypes.ts';

import {
  EnableStatus, EnableStatusNameMap, 
} from '../share/types.ts';

import { getEnumOptions } from './utils.ts';

import { DeviceInstanceAPI, UserAPI, AlertNotifyConfigAPI } from './api/index.ts';


// 告警通知配置页面
export const AlertNotifyConfigPage = () => {
  const [loading, setLoading] = useState(false);
  const [configData, setConfigData] = useState<AlertNotifyConfig[]>([]);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
  });
  const [deviceOptions, setDeviceOptions] = useState<{label: string, value: number}[]>([]);
  const [userOptions, setUserOptions] = useState<{label: string, value: number}[]>([]);
  const [modalVisible, setModalVisible] = useState(false);
  const [modalTitle, setModalTitle] = useState('新增告警通知配置');
  const [currentRecord, setCurrentRecord] = useState<AlertNotifyConfig | null>(null);
  const [formRef] = Form.useForm();
  const [modalForm] = Form.useForm();
  
  useEffect(() => {
    fetchDeviceOptions();
    fetchUserOptions();
    fetchConfigData();
  }, [pagination.current, pagination.pageSize]);

  const fetchDeviceOptions = async () => {
    try {
      const response = await DeviceInstanceAPI.getDeviceInstances();
      if (response && response.data) {
        const options = response.data.map((device) => ({
          label: device.asset_name || `设备${device.id}`,
          value: device.id
        }));
        setDeviceOptions(options);
      }
    } catch (error) {
      console.error('获取设备列表失败:', error);
      message.error('获取设备列表失败');
    }
  };

  const fetchUserOptions = async () => {
    try {
      const response = await UserAPI.getUsers();
      if (response && response.data) {
        const options = response.data.map((user) => ({
          label: user.nickname || user.username,
          value: user.id
        }));
        setUserOptions(options);
      }
    } catch (error) {
      console.error('获取用户列表失败:', error);
      message.error('获取用户列表失败');
    }
  };

  const fetchConfigData = async () => {
    setLoading(true);
    try {
      const values = formRef.getFieldsValue();
      const params = {
        page: pagination.current,
        pageSize: pagination.pageSize,
        device_id: values.device_id,
        alert_level: values.alert_level,
        notify_type: values.notify_type,
        is_enabled: values.is_enabled,
      };
      
      const response = await AlertNotifyConfigAPI.getAlertNotifyConfig(params);
      
      if (response) {
        setConfigData(response.data || []);
        setPagination({
          ...pagination,
          total: response.total || 0,
        });
      }
    } catch (error) {
      console.error('获取告警通知配置失败:', error);
      message.error('获取告警通知配置失败');
    } finally {
      setLoading(false);
    }
  };

  const handleSearch = (values: any) => {
    setPagination({
      ...pagination,
      current: 1,
    });
    fetchConfigData();
  };

  const handleTableChange = (newPagination: any) => {
    setPagination({
      ...pagination,
      current: newPagination.current,
      pageSize: newPagination.pageSize,
    });
  };

  const handleAdd = () => {
    setModalTitle('新增告警通知配置');
    setCurrentRecord(null);
    modalForm.resetFields();
    setModalVisible(true);
  };

  const handleEdit = (record: AlertNotifyConfig) => {
    setModalTitle('编辑告警通知配置');
    setCurrentRecord(record);
    
    // 将用户ID列表转为数组
    const formData = {
      ...record,
      notify_users: record.notify_users || [],
    };
    
    modalForm.setFieldsValue(formData);
    setModalVisible(true);
  };

  const handleDelete = async (id: number) => {
    try {
      await AlertNotifyConfigAPI.deleteAlertNotifyConfig(id);
      message.success('删除成功');
      fetchConfigData();
    } catch (error) {
      console.error('删除失败:', error);
      message.error('删除失败');
    }
  };

  const handleModalSubmit = async () => {
    try {
      const values = await modalForm.validateFields();
      
      // 根据通知类型处理提交数据
      const submitData = {
        ...values,
        notify_users: values.notify_type === NotifyType.SMS ? [] : values.notify_users,
      };

      // SMS通知特殊处理
      if (values.notify_type === NotifyType.SMS) {
        submitData.phone = values.phone_number; // 转换为后端需要的参数名
        submitData.content = values.notify_template || '系统告警通知';
      }
      
      if (currentRecord) {
        // 更新
        await AlertNotifyConfigAPI.updateAlertNotifyConfig(currentRecord.id, submitData);
        message.success('更新成功');
      } else {
        // 新增
        await AlertNotifyConfigAPI.createAlertNotifyConfig(submitData);
        message.success('添加成功');
      }
      
      setModalVisible(false);
      fetchConfigData();
    } catch (error) {
      console.error('操作失败:', error);
      message.error('操作失败');
    }
  };

  const alertLevelOptions = getEnumOptions(AlertLevel, AlertLevelNameMap);

  const notifyTypeOptions = getEnumOptions(NotifyType, NotifyTypeNameMap);

  const enableStatusOptions = getEnumOptions(EnableStatus, EnableStatusNameMap);

  const getAlertLevelTag = (level: AlertLevel) => {
    switch (level) {
      case AlertLevel.MINOR:
        return <Tag color="blue">次要</Tag>;
      case AlertLevel.NORMAL:
        return <Tag color="green">一般</Tag>;
      case AlertLevel.IMPORTANT:
        return <Tag color="orange">重要</Tag>;
      case AlertLevel.URGENT:
        return <Tag color="red">紧急</Tag>;
      default:
        return <Tag>未知</Tag>;
    }
  };

  const columns = [
    {
      title: '配置ID',
      dataIndex: 'id',
      key: 'id',
      width: 80,
    },
    {
      title: '设备',
      dataIndex: 'device_id',
      key: 'device_id',
      render: (id: number) => {
        const device = deviceOptions.find(opt => opt.value === id);
        return device ? device.label : id;
      },
    },
    {
      title: '告警等级',
      dataIndex: 'alert_level',
      key: 'alert_level',
      render: (level: AlertLevel) => getAlertLevelTag(level),
    },
    {
      title: '通知类型',
      dataIndex: 'notify_type',
      key: 'notify_type',
      render: (type: NotifyType) => NotifyTypeNameMap[type] || type,
    },
    {
      title: '通知模板',
      dataIndex: 'notify_template',
      key: 'notify_template',
      ellipsis: true,
    },
    {
      title: '通知用户',
      dataIndex: 'notify_users',
      key: 'notify_users',
      render: (users: number[]) => {
        if (!users || users.length === 0) return '无';
        
        return users.map(id => {
          const user = userOptions.find(opt => opt.value === id);
          return user ? user.label : id;
        }).join(', ');
      },
    },
    {
      title: '状态',
      dataIndex: 'is_enabled',
      key: 'is_enabled',
      render: (status: EnableStatus) => (
        status === EnableStatus.ENABLED ? 
          <Badge status="success" text="启用" /> : 
          <Badge status="default" text="禁用" />
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: AlertNotifyConfig) => (
        <Space size="middle">
          <Button size="small" type="primary" onClick={() => handleEdit(record)}>
            编辑
          </Button>
          <Popconfirm
            title="确定删除此配置?"
            onConfirm={() => handleDelete(record.id)}
            okText="确定"
            cancelText="取消"
          >
            <Button size="small" danger>
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Card title="告警通知配置" style={{ marginBottom: 16 }}>
        <Form
          form={formRef}
          layout="inline"
          onFinish={handleSearch}
          style={{ marginBottom: 16 }}
        >
          <Form.Item name="device_id" label="设备">
            <Select
              placeholder="选择设备"
              style={{ width: 200 }}
              allowClear
              options={deviceOptions}
            />
          </Form.Item>
          <Form.Item name="alert_level" label="告警等级">
            <Select
              placeholder="选择告警等级"
              style={{ width: 120 }}
              allowClear
              options={alertLevelOptions}
            />
          </Form.Item>
          <Form.Item name="notify_type" label="通知类型">
            <Select
              placeholder="选择通知类型"
              style={{ width: 120 }}
              allowClear
              options={notifyTypeOptions}
            />
          </Form.Item>
          <Form.Item name="is_enabled" label="状态">
            <Select
              placeholder="选择状态"
              style={{ width: 100 }}
              allowClear
              options={enableStatusOptions}
            />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
          </Form.Item>
          <Form.Item>
            <Button type="primary" onClick={handleAdd}>
              新增
            </Button>
          </Form.Item>
        </Form>
        
        <Table
          columns={columns}
          dataSource={configData}
          rowKey="id"
          pagination={pagination}
          loading={loading}
          onChange={handleTableChange}
        />
      </Card>
      
      <Modal
        title={modalTitle}
        open={modalVisible}
        onOk={handleModalSubmit}
        onCancel={() => setModalVisible(false)}
        width={600}
      >
        <Form
          form={modalForm}
          layout="vertical"
        >
          <Form.Item
            name="device_id"
            label="设备"
            rules={[{ required: true, message: '请选择设备' }]}
          >
            <Select
              placeholder="选择设备"
              options={deviceOptions}
            />
          </Form.Item>
          
          <Form.Item
            name="alert_level"
            label="告警等级"
            rules={[{ required: true, message: '请选择告警等级' }]}
          >
            <Select
              placeholder="选择告警等级"
              options={alertLevelOptions}
            />
          </Form.Item>
          
          <Form.Item
            name="notify_type"
            label="通知类型"
            rules={[{ required: true, message: '请选择通知类型' }]}
          >
            <Select
              placeholder="选择通知类型"
              options={notifyTypeOptions}
              onChange={(value) => {
                if (value === NotifyType.SMS) {
                  modalForm.setFieldsValue({ notify_users: [] });
                }
              }}
            />
          </Form.Item>
          
          <Form.Item
            name="notify_template"
            label="通知模板"
          >
            <Input.TextArea rows={3} placeholder="输入通知模板，可使用{{变量}}格式插入动态内容" />
          </Form.Item>
          
          <Form.Item
            noStyle
            shouldUpdate={(prevValues, currentValues) => prevValues.notify_type !== currentValues.notify_type}
          >
            {({ getFieldValue }) =>
              getFieldValue('notify_type') === NotifyType.SMS ? (
                <Form.Item
                  name="phone_number"
                  label="手机号码"
                  rules={[{ required: true, message: '请输入手机号码' }]}
                >
                  <Input placeholder="请输入接收短信的手机号码" />
                </Form.Item>
              ) : (
                <Form.Item
                  name="notify_users"
                  label="通知用户"
                  rules={[{ required: true, message: '请选择通知用户' }]}
                >
                  <Select
                    placeholder="选择通知用户"
                    mode="multiple"
                    options={userOptions}
                  />
                </Form.Item>
              )
            }
          </Form.Item>
          
          <Form.Item
            name="is_enabled"
            label="状态"
            initialValue={EnableStatus.ENABLED}
          >
            <Select
              placeholder="选择状态"
              options={enableStatusOptions}
            />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};