From 5d83a3fefa760101620e58d1c585b05eb537ab19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=B7=E4=BA=8C=E7=8C=9B?= <live1989@foxmail.com>
Date: Fri, 6 Dec 2019 14:02:53 +0800
Subject: [PATCH] U web update

---
 .../src/pages/system/setting/MailServer.js    | 69 ++++++++++++++++---
 spug_web/src/pages/system/setting/index.js    |  5 ++
 spug_web/src/pages/system/setting/store.js    | 21 ++++++
 3 files changed, 85 insertions(+), 10 deletions(-)
 create mode 100644 spug_web/src/pages/system/setting/store.js

diff --git a/spug_web/src/pages/system/setting/MailServer.js b/spug_web/src/pages/system/setting/MailServer.js
index cbe6f0c..0e68024 100644
--- a/spug_web/src/pages/system/setting/MailServer.js
+++ b/spug_web/src/pages/system/setting/MailServer.js
@@ -1,30 +1,79 @@
-import React from 'react';
-import { Button, Form, Input } from 'antd';
+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';
 
 
-export default function MailServer(props) {
+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="邮件服务器">
-          <Input placeholder="请输入，例如：smtp.exmail.qq.com"/>
+          {getFieldDecorator('server', {
+            initialValue: setting['server'], rules: [
+              {required: true, message: '请输入邮件服务器地址'}
+            ]
+          })(
+            <Input placeholder="请输入，例如：smtp.exmail.qq.com"/>
+          )}
         </Form.Item>
         <Form.Item colon={false} required label="端口">
-          <Input placeholder="请输入，例如：465"/>
+          {getFieldDecorator('port', {
+            initialValue: setting['port'], rules: [
+              {required: true, message: '请输入邮件服务端口'}
+            ]
+          })(
+            <Input placeholder="请输入，例如：465"/>
+          )}
         </Form.Item>
         <Form.Item colon={false} required label="邮件账号">
-          <Input placeholder="请输入，例如：dev@exmail.com"/>
+          {getFieldDecorator('username', {
+            initialValue: setting['username'], rules: [
+              {required: true, message: '请输入邮件账号'}
+            ]
+          })(
+            <Input placeholder="请输入，例如：dev@exmail.com"/>
+          )}
         </Form.Item>
         <Form.Item colon={false} required label="账号密码">
-          <Input.Password placeholder="请输入邮箱账号对应的密码" />
+          {getFieldDecorator('password', {
+            initialValue: setting['password'], rules: [
+              {required: true, message: '请输入邮箱账号对应的密码'}
+            ]
+          })(
+            <Input.Password placeholder="请输入邮箱账号对应的密码"/>
+          )}
         </Form.Item>
         <Form.Item colon={false} label="发件人昵称">
-          <Input placeholder="请输入" />
+          {getFieldDecorator('nickname', {initialValue: setting['nickname']})(
+            <Input placeholder="请输入"/>
+          )}
         </Form.Item>
-        <Button type="primary">保存设置</Button>
+        <Button type="primary" loading={loading} onClick={handleSubmit}>保存设置</Button>
       </Form>
     </React.Fragment>
   )
-}
\ No newline at end of file
+}
+
+export default observer(Form.create()(MailServer))
\ No newline at end of file
diff --git a/spug_web/src/pages/system/setting/index.js b/spug_web/src/pages/system/setting/index.js
index a4fe55a..a821686 100644
--- a/spug_web/src/pages/system/setting/index.js
+++ b/spug_web/src/pages/system/setting/index.js
@@ -4,6 +4,7 @@ import BasicSetting from './BasicSetting';
 import AlarmSetting from './AlarmSetting';
 import MailServer from './MailServer';
 import styles from './index.module.css';
+import store from './store';
 
 
 class Index extends React.Component {
@@ -14,6 +15,10 @@ class Index extends React.Component {
     }
   }
 
+  componentDidMount() {
+    store.fetchSettings()
+  }
+
   render() {
     const {selectedKeys} = this.state;
     return (
diff --git a/spug_web/src/pages/system/setting/store.js b/spug_web/src/pages/system/setting/store.js
new file mode 100644
index 0000000..39cd360
--- /dev/null
+++ b/spug_web/src/pages/system/setting/store.js
@@ -0,0 +1,21 @@
+
+import { observable } from "mobx";
+import http from 'libs/http';
+
+class Store {
+  @observable settings = {};
+  @observable isFetching = false;
+
+  fetchSettings = () => {
+    this.isFetching = true;
+    http.get('/api/setting/')
+      .then(res => {
+        for (let item of res) {
+          this.settings[item.key] = item
+        }
+      })
+      .finally(() => this.isFetching = false)
+  };
+}
+
+export default new Store()
\ No newline at end of file