添加通知设置页面

src/pages/setting/index.tsx

@@ -30,6 +30,7 @@ import {
 } from '@ant-design/icons';
 import SecuritySettings from './security';
 import LoginLog from './loginLog';
+import NotificationSetting from './notification';
 
 const { Text } = Typography;
 const optionsWithDisabled = [
@@ -112,6 +113,7 @@ const Setting = ({ headerStyle, isPhone, user, reloadUser }: any) => {
   const [editedApp, setEditedApp] = useState();
   const [tabActiveKey, setTabActiveKey] = useState('security');
   const [loginLogData, setLoginLogData] = useState<any[]>([]);
+  const [notificationInfo, setNotificationInfo] = useState<any>();
 
   const themeChange = (e: any) => {
     setTheme(e.target.value);
@@ -238,9 +240,22 @@ const Setting = ({ headerStyle, isPhone, user, reloadUser }: any) => {
       getApps();
     } else if (activeKey === 'login') {
       getLoginLog();
+    } else if (activeKey === 'notification') {
+      getNotification();
     }
   };
 
+  const getNotification = () => {
+    request
+      .get(`${config.apiPrefix}user/notification`)
+      .then((data: any) => {
+        setNotificationInfo(data.data);
+      })
+      .catch((error: any) => {
+        console.log(error);
+      });
+  };
+
   useEffect(() => {
     setFetchMethod(window.fetch);
     if (theme === 'dark') {
@@ -289,6 +304,9 @@ const Setting = ({ headerStyle, isPhone, user, reloadUser }: any) => {
             loading={loading}
           />
         </Tabs.TabPane>
+        <Tabs.TabPane tab="通知设置" key="notification">
+          <NotificationSetting data={notificationInfo} />
+        </Tabs.TabPane>
         <Tabs.TabPane tab="登陆日志" key="login">
           <LoginLog data={loginLogData} />
         </Tabs.TabPane>

src/pages/setting/notification.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from 'react';
+import { Typography, Input, Form, Button, Select, message } from 'antd';
+import { request } from '@/utils/http';
+import config from '@/utils/config';
+
+const { Option } = Select;
+
+const NotificationSetting = ({ data }: any) => {
+  const [loading, setLoading] = useState(false);
+  const [notificationMode, setNotificationMode] = useState<string>('');
+  const [fields, setFields] = useState<any[]>([]);
+  const [form] = Form.useForm();
+
+  const handleOk = (values: any) => {
+    request
+      .put(`${config.apiPrefix}user/notification`, {
+        data: {
+          ...values,
+        },
+      })
+      .then((data: any) => {
+        if (data && data.code === 200) {
+          message.success('通知发送成功');
+        } else {
+          message.error(data.data);
+        }
+      })
+      .catch((error: any) => {
+        console.log(error);
+      });
+  };
+
+  const notificationModeChange = (value: string) => {
+    setNotificationMode(value);
+    const _fields = (config.notificationModeMap as any)[value];
+    setFields(_fields);
+  };
+
+  useEffect(() => {
+    if (data && data.type) {
+      notificationModeChange(data.type);
+      form.setFieldsValue({ ...data });
+    }
+  }, [data]);
+
+  return (
+    <div>
+      <Form onFinish={handleOk} form={form} layout="vertical">
+        <Form.Item
+          label="通知方式"
+          name="type"
+          rules={[{ required: true }]}
+          style={{ maxWidth: 400 }}
+          initialValue={notificationMode}
+        >
+          <Select onChange={notificationModeChange}>
+            {config.notificationModes.map((x) => (
+              <Option value={x.value}>{x.label}</Option>
+            ))}
+          </Select>
+        </Form.Item>
+        {fields.map((x) => (
+          <Form.Item
+            label={x.label}
+            name={x.label}
+            extra={x.tip}
+            rules={[{ required: x.required }]}
+            style={{ maxWidth: 400 }}
+          >
+            <Input.TextArea autoSize={true} placeholder={`请输入${x.label}`} />
+          </Form.Item>
+        ))}
+        {notificationMode !== '' && (
+          <Button type="primary" htmlType="submit">
+            保存
+          </Button>
+        )}
+      </Form>
+    </div>
+  );
+};
+
+export default NotificationSetting;