U 合并报警服务设置和邮件服务设置

spug_web/src/pages/system/setting/AlarmSetting.js

@@ -5,40 +5,127 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Button, Form, Input, message } from 'antd';
+import { Button, Form, Input, Radio, message } from 'antd';
 import styles from './index.module.css';
 import { http } from 'libs';
 import store from './store';
 import lds from 'lodash';
 
+@observer
+class AlarmSetting extends React.Component {
+  constructor(props) {
+    super(props);
+    this.setting = JSON.parse(lds.get(store.settings, 'mail_service.value', "{}"));
+    this.state = {
+      mode: this.setting['server'] === undefined ? '1' : '2',
+      spug_key: lds.get(store.settings, 'spug_key.value')
+    }
+  }
 
-export default observer(function () {
+  _doSubmit = (formData) => {
-  function handleSubmit() {
     store.loading = true;
-    const value = lds.get(store.settings, 'spug_key.value');
+    http.post('/api/setting/', {data: formData})
-    http.post('/api/setting/', {data: [{key: 'spug_key', value}]})
       .then(() => {
         message.success('保存成功');
         store.fetchSettings()
       })
       .finally(() => store.loading = false)
-  }
+  };
 
+  handleSubmit = () => {
+    const {mode, spug_key} = this.state;
+    const formData = [{key: 'spug_key', value: spug_key}];
+    if (mode === '1') {
+      formData.push({key: 'mail_service', value: '{}'});
+      this._doSubmit(formData)
+    } else {
+      this.props.form.validateFields((err, data) => {
+        if (!err) {
+          formData.push({key: 'mail_service', value: JSON.stringify(data)});
+          this._doSubmit(formData)
+        }
+      })
+    }
+  };
+
+  render() {
+    const {getFieldDecorator} = this.props.form;
+    const {mode, spug_key} = this.state;
     return (
       <React.Fragment>
         <div className={styles.title}>报警服务设置</div>
-      <Form style={{maxWidth: 320}}>
+        <Form style={{maxWidth: 400}}>
           <Form.Item
             colon={false}
             label="调用凭据"
             help={<span>该凭据用于调用spug内置的报警服务，请关注公众号<span style={{color: '#008dff'}}>Spug运维</span>在我的页面查看调用凭据。</span>}>
             <Input
-            value={lds.get(store.settings, 'spug_key.value')}
+              value={spug_key}
-            onChange={e => lds.set(store.settings, 'spug_key.value', e.target.value)}
+              onChange={e => this.setState({spug_key: e.target.value})}
               placeholder="请输入"/>
           </Form.Item>
-        <Button type="primary" loading={store.loading} onClick={handleSubmit}>保存设置</Button>
+          <Form.Item colon={false} label="邮件服务" help="用于通过邮件方式发送报警信息">
+            <Radio.Group
+              value={mode}
+              style={{marginBottom: 8}}
+              buttonStyle="solid"
+              onChange={e => this.setState({mode: e.target.value})}>
+              <Radio.Button value="1">内置</Radio.Button>
+              <Radio.Button value="2">自定义</Radio.Button>
+            </Radio.Group>
+            <div style={{display: mode === '1' ? 'none' : 'block'}}>
+              <Form.Item labelCol={{span: 8}} wrapperCol={{span: 16}} required label="邮件服务器">
+                {getFieldDecorator('server', {
+                  initialValue: this.setting['server'], rules: [
+                    {required: true, message: '请输入邮件服务器地址'}
+                  ]
+                })(
+                  <Input placeholder="请输入，例如：smtp.exmail.qq.com"/>
+                )}
+              </Form.Item>
+              <Form.Item labelCol={{span: 8}} wrapperCol={{span: 16}} required label="端口">
+                {getFieldDecorator('port', {
+                  initialValue: this.setting['port'], rules: [
+                    {required: true, message: '请输入邮件服务端口'}
+                  ]
+                })(
+                  <Input placeholder="请输入，例如：465"/>
+                )}
+              </Form.Item>
+              <Form.Item labelCol={{span: 8}} wrapperCol={{span: 16}} required label="邮箱账号">
+                {getFieldDecorator('username', {
+                  initialValue: this.setting['username'], rules: [
+                    {required: true, message: '请输入邮箱账号'}
+                  ]
+                })(
+                  <Input placeholder="请输入，例如：dev@exmail.com"/>
+                )}
+              </Form.Item>
+              <Form.Item labelCol={{span: 8}} wrapperCol={{span: 16}} required label="账号密码">
+                {getFieldDecorator('password', {
+                  initialValue: this.setting['password'], rules: [
+                    {required: true, message: '请输入邮箱账号对应的密码'}
+                  ]
+                })(
+                  <Input.Password placeholder="请输入邮箱账号对应的密码"/>
+                )}
+              </Form.Item>
+              <Form.Item labelCol={{span: 8}} wrapperCol={{span: 16}} label="发件人昵称">
+                {getFieldDecorator('nickname', {initialValue: this.setting['nickname']})(
+                  <Input placeholder="请输入"/>
+                )}
+              </Form.Item>
+            </div>
+          </Form.Item>
+          <Button
+            type="primary"
+            loading={store.loading}
+            style={{marginTop: 20}}
+            onClick={this.handleSubmit}>保存设置</Button>
         </Form>
       </React.Fragment>
     )
-})
+  }
+}
+
+export default Form.create()(AlarmSetting)

spug_web/src/pages/system/setting/MailServer.js

@@ -1,84 +0,0 @@
-/**
- * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
- * Copyright (c) <spug.dev@gmail.com>
- * Released under the MIT License.
- */
-import React, { useState } from 'react';
-import {observer} from 'mobx-react';
-import { Button, Form, Input, message } from 'antd';
-import { http } from 'libs';
-import styles from './index.module.css';
-import store from './store'
-import lds from 'lodash';
-
-
-function MailServer(props) {
-  const [loading, setLoading] = useState(false);
-
-  const handleSubmit = () => {
-    props.form.validateFields((err, formData) => {
-      if (!err) {
-        setLoading(true);
-        const data = {key: 'mail_service', value: JSON.stringify(formData), desc: 'mail service'};
-        http.post('/api/setting/', {data: [data]})
-          .then(() => {
-            message.success('保存成功')
-          })
-          .finally(() => setLoading(false))
-      }
-    });
-  };
-  const {getFieldDecorator} = props.form;
-  const setting = JSON.parse(lds.get(store.settings, 'mail_service.value', "{}"));
-  return (
-    <React.Fragment>
-      <div className={styles.title}>邮件服务设置</div>
-      <Form className={styles.form}>
-        <Form.Item colon={false} required label="邮件服务器">
-          {getFieldDecorator('server', {
-            initialValue: setting['server'], rules: [
-              {required: true, message: '请输入邮件服务器地址'}
-            ]
-          })(
-            <Input placeholder="请输入，例如：smtp.exmail.qq.com"/>
-          )}
-        </Form.Item>
-        <Form.Item colon={false} required label="端口">
-          {getFieldDecorator('port', {
-            initialValue: setting['port'], rules: [
-              {required: true, message: '请输入邮件服务端口'}
-            ]
-          })(
-            <Input placeholder="请输入，例如：465"/>
-          )}
-        </Form.Item>
-        <Form.Item colon={false} required label="邮件账号">
-          {getFieldDecorator('username', {
-            initialValue: setting['username'], rules: [
-              {required: true, message: '请输入邮件账号'}
-            ]
-          })(
-            <Input placeholder="请输入，例如：dev@exmail.com"/>
-          )}
-        </Form.Item>
-        <Form.Item colon={false} required label="账号密码">
-          {getFieldDecorator('password', {
-            initialValue: setting['password'], rules: [
-              {required: true, message: '请输入邮箱账号对应的密码'}
-            ]
-          })(
-            <Input.Password placeholder="请输入邮箱账号对应的密码"/>
-          )}
-        </Form.Item>
-        <Form.Item colon={false} label="发件人昵称">
-          {getFieldDecorator('nickname', {initialValue: setting['nickname']})(
-            <Input placeholder="请输入"/>
-          )}
-        </Form.Item>
-        <Button type="primary" loading={loading} onClick={handleSubmit}>保存设置</Button>
-      </Form>
-    </React.Fragment>
-  )
-}
-
-export default observer(Form.create()(MailServer))

spug_web/src/pages/system/setting/index.js

@@ -8,7 +8,6 @@ import { Menu } from 'antd';
 import {AuthDiv} from 'components';
 import BasicSetting from './BasicSetting';
 import AlarmSetting from './AlarmSetting';
-import MailServer from './MailServer';
 import OpenService from './OpenService';
 import styles from './index.module.css';
 import store from './store';
@@ -38,13 +37,11 @@ class Index extends React.Component {
             onSelect={({selectedKeys}) => this.setState({selectedKeys})}>
             <Menu.Item key="basic">基本设置</Menu.Item>
             <Menu.Item key="alarm">报警服务设置</Menu.Item>
-            <Menu.Item key="mail">邮件服务设置</Menu.Item>
             <Menu.Item key="service">开放服务设置</Menu.Item>
           </Menu>
         </div>
         <div className={styles.right}>
           {selectedKeys[0] === 'basic' && <BasicSetting />}
-          {selectedKeys[0] === 'mail' && <MailServer />}
           {selectedKeys[0] === 'alarm' && <AlarmSetting />}
           {selectedKeys[0] === 'service' && <OpenService />}
         </div>