style migrate v3

spug_web/src/pages/config/app/Form.js

@@ -3,65 +3,48 @@
  * Copyright (c) <spug.dev@gmail.com>
  * Released under the AGPL-3.0 License.
  */
-import React from 'react';
+import React, { useState } from 'react';
 import { observer } from 'mobx-react';
 import { Modal, Form, Input, message } from 'antd';
 import http from 'libs/http';
 import store from './store';
 
-@observer
-class ComForm extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      loading: false,
-    }
-  }
+export default observer(function () {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false)
 
-  handleSubmit = () => {
-    this.setState({loading: true});
-    const formData = this.props.form.getFieldsValue();
+  function handleSubmit() {
+    setLoading(true);
+    const formData = form.getFieldsValue();
     formData['id'] = store.record.id;
     http.post('/api/app/', formData)
       .then(res => {
         message.success('操作成功');
         store.formVisible = false;
         store.fetchRecords()
-      }, () => this.setState({loading: false}))
-  };
-
-  render() {
-    const info = store.record;
-    const {getFieldDecorator} = this.props.form;
-    return (
-      <Modal
-        visible
-        width={800}
-        maskClosable={false}
-        title={store.record.id ? '编辑应用' : '新建应用'}
-        onCancel={() => store.formVisible = false}
-        confirmLoading={this.state.loading}
-        onOk={this.handleSubmit}>
-        <Form labelCol={{span: 6}} wrapperCol={{span: 14}}>
-          <Form.Item required label="应用名称">
-            {getFieldDecorator('name', {initialValue: info['name']})(
-              <Input placeholder="请输入应用名称，例如：订单服务"/>
-            )}
-          </Form.Item>
-          <Form.Item required label="唯一标识符">
-            {getFieldDecorator('key', {initialValue: info['key']})(
-              <Input placeholder="请输入唯一标识符，例如：api_order"/>
-            )}
-          </Form.Item>
-          <Form.Item label="备注信息">
-            {getFieldDecorator('desc', {initialValue: info['desc']})(
-              <Input.TextArea placeholder="请输入备注信息"/>
-            )}
-          </Form.Item>
-        </Form>
-      </Modal>
-    )
+      }, () => setLoading(false))
   }
-}
 
-export default Form.create()(ComForm)
+  return (
+    <Modal
+      visible
+      width={800}
+      maskClosable={false}
+      title={store.record.id ? '编辑应用' : '新建应用'}
+      onCancel={() => store.formVisible = false}
+      confirmLoading={loading}
+      onOk={handleSubmit}>
+      <Form form={form} initialValues={store.record} labelCol={{span: 6}} wrapperCol={{span: 14}}>
+        <Form.Item required name="name" label="应用名称">
+          <Input placeholder="请输入应用名称，例如：订单服务"/>
+        </Form.Item>
+        <Form.Item required name="key" label="唯一标识符">
+          <Input placeholder="请输入唯一标识符，例如：api_order"/>
+        </Form.Item>
+        <Form.Item name="desc" label="备注信息">
+          <Input.TextArea placeholder="请输入备注信息"/>
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+})

spug_web/src/pages/config/app/Rel.js

@@ -4,8 +4,8 @@
  * Released under the AGPL-3.0 License.
  */
 import React from 'react';
-import {observer} from 'mobx-react';
-import {Modal, Form, Transfer, message, Tabs, Alert} from 'antd';
+import { observer } from 'mobx-react';
+import { Modal, Form, Transfer, message, Tabs, Alert } from 'antd';
 import { http, hasPermission } from 'libs';
 import serviceStore from '../service/store';
 import store from './store';

spug_web/src/pages/config/app/Table.js

@@ -6,9 +6,10 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import { Table, Modal, message } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { Action, TableCard, AuthButton } from 'components';
 import { http, hasPermission } from 'libs';
 import store from './store';
-import { Action } from 'components';
 
 @observer
 class ComTable extends React.Component {
@@ -36,10 +37,19 @@ class ComTable extends React.Component {
       data = data.filter(item => item['name'].toLowerCase().includes(store.f_name.toLowerCase()))
     }
     return (
-      <Table
+      <TableCard
         rowKey="id"
+        title="应用列表"
         loading={store.isFetching}
         dataSource={data}
+        onReload={store.fetchRecords}
+        actions={[
+          <AuthButton
+            auth="config.app.add"
+            type="primary"
+            icon={<PlusOutlined/>}
+            onClick={() => store.showForm()}>新建</AuthButton>
+        ]}
         pagination={{
           showSizeChanger: true,
           showLessItems: true,
@@ -52,7 +62,7 @@ class ComTable extends React.Component {
         <Table.Column title="标识符" dataIndex="key"/>
         <Table.Column ellipsis title="描述信息" dataIndex="desc"/>
         {hasPermission('config.app.edit|config.app.del|config.app.view_config') && (
-          <Table.Column title="操作" render={info => (
+          <Table.Column width={210} title="操作" render={info => (
             <Action>
               <Action.Button auth="config.app.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
               <Action.Button auth="config.app.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
@@ -61,7 +71,7 @@ class ComTable extends React.Component {
             </Action>
           )}/>
         )}
-      </Table>
+      </TableCard>
     )
   }
 }

spug_web/src/pages/config/app/index.js

@@ -5,8 +5,8 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Input, Button } from 'antd';
-import { SearchForm, AuthDiv, AuthCard } from 'components';
+import { Input } from 'antd';
+import { SearchForm, AuthDiv, Breadcrumb } from 'components';
 import ComTable from './Table';
 import ComForm from './Form';
 import Rel from './Rel';
@@ -14,21 +14,20 @@ import store from './store';
 
 export default observer(function () {
   return (
-    <AuthCard auth="config.app.view">
+    <AuthDiv auth="config.app.view">
+      <Breadcrumb>
+          <Breadcrumb.Item>首页</Breadcrumb.Item>
+          <Breadcrumb.Item>配置中心</Breadcrumb.Item>
+          <Breadcrumb.Item>应用配置</Breadcrumb.Item>
+        </Breadcrumb>
       <SearchForm>
         <SearchForm.Item span={8} title="应用名称">
           <Input allowClear value={store.f_name} onChange={e => store.f_name = e.target.value} placeholder="请输入"/>
         </SearchForm.Item>
-        <SearchForm.Item span={8}>
-          <Button type="primary" icon="sync" onClick={store.fetchRecords}>刷新</Button>
-        </SearchForm.Item>
       </SearchForm>
-      <AuthDiv auth="config.app.add" style={{marginBottom: 16}}>
-        <Button type="primary" icon="plus" onClick={() => store.showForm()}>新建</Button>
-      </AuthDiv>
       <ComTable/>
       {store.formVisible && <ComForm/>}
       {store.relVisible && <Rel />}
-    </AuthCard>
+    </AuthDiv>
   )
 })