style migrate v3

spug_web/src/pages/system/account/Form.js

@@ -3,32 +3,27 @@
  * Copyright (c) <spug.dev@gmail.com>
  * Released under the AGPL-3.0 License.
  */
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { observer } from 'mobx-react';
-import { Modal, Form, Select, Input, message, Col } from 'antd';
+import { Modal, Form, Select, Input, message } from 'antd';
 import http from 'libs/http';
 import store from './store';
 import roleStore from '../role/store';
 import { Link } from "react-router-dom";
 
-@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);
 
-  componentDidMount() {
+  useEffect(() => {
     if (roleStore.records.length === 0) {
       roleStore.fetchRecords()
     }
-  }
+  }, [])
 
-  handleSubmit = () => {
-    this.setState({loading: true});
-    const formData = this.props.form.getFieldsValue();
+  function handleSubmit() {
+    setLoading(true);
+    const formData = form.getFieldsValue();
     let request;
     if (store.record.id) {
       formData['id'] = store.record.id;
@@ -40,57 +35,43 @@ class ComForm extends React.Component {
       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('username', {initialValue: info['username']})(
-              <Input placeholder="请输入登录名"/>
-            )}
-          </Form.Item>
-          <Form.Item required label="姓名">
-            {getFieldDecorator('nickname', {initialValue: info['nickname']})(
-              <Input placeholder="请输入姓名"/>
-            )}
-          </Form.Item>
-          {info.id === undefined && (
-            <Form.Item required label="密码">
-              {getFieldDecorator('password')(
-                <Input type="password" placeholder="请输入密码"/>
-              )}
-            </Form.Item>
-          )}
-          <Form.Item required label="角色">
-            <Col span={18}>
-              {getFieldDecorator('role_id', {initialValue: info['role_id']})(
-                <Select placeholder="请选择">
-                  {roleStore.records.map(item => (
-                    <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
-                  ))}
-                </Select>
-              )}
-            </Col>
-            <Col span={4} offset={2}>
-              <Link to="/system/role">新建角色</Link>
-            </Col>
-          </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="username" label="登录名">
+          <Input placeholder="请输入登录名"/>
+        </Form.Item>
+        <Form.Item required name="nickname" label="姓名">
+          <Input placeholder="请输入姓名"/>
+        </Form.Item>
+        {store.record.id === undefined && (
+          <Form.Item required name="password" label="密码">
+            <Input type="password" placeholder="请输入密码"/>
+          </Form.Item>
+        )}
+        <Form.Item required label="角色" style={{marginBottom: 0}}>
+          <Form.Item name="role_id" style={{display: 'inline-block', width: '80%'}}>
+            <Select placeholder="请选择">
+              {roleStore.records.map(item => (
+                <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
+              ))}
+            </Select>
+          </Form.Item>
+          <Form.Item style={{display: 'inline-block', width: '20%', textAlign: 'right'}}>
+            <Link to="/system/role">新建角色</Link>
+          </Form.Item>
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+})

spug_web/src/pages/system/account/Table.js

@@ -4,10 +4,10 @@
  * Released under the AGPL-3.0 License.
  */
 import React from 'react';
-import {observer} from 'mobx-react';
-import {Table, Divider, Modal, Badge, message, Form, Input} from 'antd';
-import {LinkButton} from 'components';
-import ComForm from './Form';
+import { observer } from 'mobx-react';
+import { ExclamationCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import { Divider, Form, Radio, Modal, Button, Badge, message, Input } from 'antd';
+import { LinkButton, TableCard } from 'components';
 import http from 'libs/http';
 import store from './store';
 
@@ -19,16 +19,12 @@ class ComTable extends React.Component {
       password: ''
     }
   }
+
   componentDidMount() {
     store.fetchRecords()
   }
 
   columns = [{
-    title: '序号',
-    key: 'series',
-    render: (_, __, index) => index + 1,
-    width: 80
-  }, {
     title: '登录名',
     dataIndex: 'username',
   }, {
@@ -77,9 +73,9 @@ class ComTable extends React.Component {
 
   handleReset = (info) => {
     Modal.confirm({
-      icon: 'exclamation-circle',
+      icon: <ExclamationCircleOutlined/>,
       title: '重置登录密码',
-      content: <Form>
+      content: <Form layout="vertical" style={{marginTop: 24}}>
         <Form.Item required label="重置后的新密码">
           <Input.Password onChange={val => this.setState({password: val.target.value})}/>
         </Form.Item>
@@ -106,29 +102,29 @@ class ComTable extends React.Component {
   };
 
   render() {
-    let data = store.records;
-    if (store.f_name) {
-      data = data.filter(item => item['username'].toLowerCase().includes(store.f_name.toLowerCase()))
-    }
-    if (store.f_status) {
-      data = data.filter(item => String(item['is_active']) === store.f_status)
-    }
     return (
-      <React.Fragment>
-        <Table
-          rowKey="id"
-          loading={store.isFetching}
-          dataSource={data}
-          pagination={{
-            showSizeChanger: true,
-            showLessItems: true,
-            hideOnSinglePage: true,
-            showTotal: total => `共 ${total} 条`,
-            pageSizeOptions: ['10', '20', '50', '100']
-          }}
-          columns={this.columns}/>
-        {store.formVisible && <ComForm/>}
-      </React.Fragment>
+      <TableCard
+        rowKey="id"
+        title="账户列表"
+        loading={store.isFetching}
+        dataSource={store.dataSource}
+        onReload={store.fetchRecords}
+        actions={[
+          <Button type="primary" icon={<PlusOutlined/>} onClick={() => store.showForm()}>新建</Button>,
+          <Radio.Group value={store.f_status} onChange={e => store.f_status = e.target.value}>
+            <Radio.Button value="">全部</Radio.Button>
+            <Radio.Button value="true">正常</Radio.Button>
+            <Radio.Button value="false">禁用</Radio.Button>
+          </Radio.Group>
+        ]}
+        pagination={{
+          showSizeChanger: true,
+          showLessItems: true,
+          hideOnSinglePage: true,
+          showTotal: total => `共 ${total} 条`,
+          pageSizeOptions: ['10', '20', '50', '100']
+        }}
+        columns={this.columns}/>
     )
   }
 }

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

@@ -5,32 +5,27 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Input, Select, Button } from 'antd';
-import { SearchForm, AuthCard } from 'components';
+import { Input } from 'antd';
+import { SearchForm, AuthDiv, Breadcrumb } from 'components';
 import ComTable from './Table';
+import ComForm from './Form';
 import store from './store';
 
 export default observer(function () {
   return (
-    <AuthCard auth="system.account.view">
+    <AuthDiv auth="system.account.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} title="账户状态">
-          <Select allowClear value={store.f_status} onChange={v => store.f_status = v} placeholder="请选择">
-            <Select.Option value="true">正常</Select.Option>
-            <Select.Option value="false">禁用</Select.Option>
-          </Select>
-        </SearchForm.Item>
-        <SearchForm.Item span={8}>
-          <Button type="primary" icon="sync" onClick={store.fetchRecords}>刷新</Button>
-        </SearchForm.Item>
       </SearchForm>
-      <div style={{marginBottom: 16}}>
-        <Button type="primary" icon="plus" onClick={() => store.showForm()}>新建</Button>
-      </div>
       <ComTable/>
-    </AuthCard>
+      {store.formVisible && <ComForm/>}
+    </AuthDiv>
   )
 })

spug_web/src/pages/system/account/store.js

@@ -3,7 +3,7 @@
  * Copyright (c) <spug.dev@gmail.com>
  * Released under the AGPL-3.0 License.
  */
-import { observable } from "mobx";
+import { observable, computed } from 'mobx';
 import http from 'libs/http';
 
 class Store {
@@ -13,7 +13,14 @@ class Store {
   @observable formVisible = false;
 
   @observable f_name;
-  @observable f_status;
+  @observable f_status = '';
+
+  @computed get dataSource() {
+    let records = this.records;
+    if (this.f_name) records = records.filter(x => x.username.toLowerCase().includes(this.f_name.toLowerCase()));
+    if (this.f_status) records = records.filter(x => String(x.is_active) === this.f_status);
+    return records
+  }
 
   fetchRecords = () => {
     this.isFetching = true;