style migrate v3

2020-11-27 16:07:05 +08:00 · 2020-11-27 16:07:05 +08:00 · dbee03069e
parent ef401d914f
commit dbee03069e
5 changed files with 91 additions and 118 deletions
--- a/spug_web/src/pages/alarm/group/Form.js
+++ b/spug_web/src/pages/alarm/group/Form.js
@ -3,71 +3,54 @@
 * 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, Transfer, message } from 'antd';
 import http from 'libs/http';
 import store from './store';
 import contactStore from '../contact/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/alarm/group/', 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 label="备注信息">
-            {getFieldDecorator('desc', {initialValue: info['desc']})(
-              <Input.TextArea placeholder="请输入模板备注信息"/>
-            )}
-          </Form.Item>
-          <Form.Item required label="选择联系人">
-            {getFieldDecorator('contacts', {valuePropName: 'targetKeys', initialValue: info['contacts']})(
-              <Transfer
-                rowKey={item => item.id}
-                titles={['已有联系人', '已选联系人']}
-                listStyle={{width: 199}}
-                dataSource={contactStore.records}
-                render={item => item.name}/>
-            )}
-          </Form.Item>
-        </Form>
-      </Modal>
-    )
+      }, () => setLoading(true))
  }
-}

-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 name="desc" label="备注信息">
+          <Input.TextArea placeholder="请输入模板备注信息"/>
+        </Form.Item>
+        <Form.Item required name="contacts" valuePropName="targetKeys" label="选择联系人">
+          <Transfer
+            rowKey={item => item.id}
+            titles={['已有联系人', '已选联系人']}
+            listStyle={{width: 199}}
+            dataSource={contactStore.records}
+            render={item => item.name}/>
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+})
--- a/spug_web/src/pages/alarm/group/Table.js
+++ b/spug_web/src/pages/alarm/group/Table.js
@ -6,11 +6,11 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import { Table, Modal, message } from 'antd';
-import ComForm from './Form';
+import { PlusOutlined } from '@ant-design/icons';
+import { Action, TableCard, AuthButton } from 'components';
 import { http, hasPermission } from 'libs';
 import store from './store';
 import contactStore from '../contact/store';
-import { Action } from "components";
 import lds from 'lodash';

@observer
@ -54,42 +54,40 @@ class ComTable extends React.Component {
  };

  render() {
-    let data = store.records;
-    if (store.f_name) {
-      data = data.filter(item => item['name'].toLowerCase().includes(store.f_name.toLowerCase()))
-    }
-    if (store.f_type) {
-      data = data.filter(item => item['type'].toLowerCase().includes(store.f_type.toLowerCase()))
-    }
    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']
-          }}>
-          <Table.Column title="序号" key="series" render={(_, __, index) => index + 1}/>
-          <Table.Column title="组名称" dataIndex="name"/>
-          <Table.Column ellipsis title="成员" dataIndex="contacts"
-                        render={value => value.map(x => lds.get(this.state.contactMap, `${x}.name`)).join(',')}/>
-          <Table.Column ellipsis title="描述信息" dataIndex="desc"/>
-          {hasPermission('alarm.group.edit|alarm.group.del') && (
-            <Table.Column title="操作" render={info => (
-              <Action>
-                <Action.Button auth="alarm.group.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
-                <Action.Button auth="alarm.group.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
-              </Action>
-            )}/>
-          )}
-        </Table>
-        {store.formVisible && <ComForm/>}
-      </React.Fragment>
+      <TableCard
+        rowKey="id"
+        title="报警联系组"
+        loading={store.isFetching}
+        dataSource={store.dataSource}
+        onReload={store.fetchRecords}
+        actions={[
+          <AuthButton
+            auth="alarm.group.add"
+            type="primary"
+            icon={<PlusOutlined/>}
+            onClick={() => store.showForm()}>新建</AuthButton>
+        ]}
+        pagination={{
+          showSizeChanger: true,
+          showLessItems: true,
+          hideOnSinglePage: true,
+          showTotal: total => `共 ${total} 条`,
+          pageSizeOptions: ['10', '20', '50', '100']
+        }}>
+        <Table.Column title="组名称" dataIndex="name"/>
+        <Table.Column ellipsis title="成员" dataIndex="contacts"
+                      render={value => value.map(x => lds.get(this.state.contactMap, `${x}.name`)).join(',')}/>
+        <Table.Column ellipsis title="描述信息" dataIndex="desc"/>
+        {hasPermission('alarm.group.edit|alarm.group.del') && (
+          <Table.Column title="操作" render={info => (
+            <Action>
+              <Action.Button auth="alarm.group.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
+              <Action.Button auth="alarm.group.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+            </Action>
+          )}/>
+        )}
+      </TableCard>
    )
  }
 }
--- a/spug_web/src/pages/alarm/group/index.js
+++ b/spug_web/src/pages/alarm/group/index.js
@ -5,26 +5,27 @@
 */
 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 store from './store';

 export default observer(function () {
  return (
-    <AuthCard auth="alarm.group.view">
+    <AuthDiv auth="alarm.group.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="alarm.group.add" style={{marginBottom: 16}}>
-        <Button type="primary" icon="plus" onClick={() => store.showForm()}>新建</Button>
-      </AuthDiv>
      <ComTable/>
-    </AuthCard>
-  )
+      {store.formVisible && <ComForm/>}
+    </AuthDiv>
+  );
 })
--- a/spug_web/src/pages/alarm/group/store.js
+++ b/spug_web/src/pages/alarm/group/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 {
@ -14,6 +14,13 @@ class Store {

  @observable f_name;

+  @computed get dataSource() {
+    let records = this.records;
+    if (this.f_name) records = records.filter(x => x.name.toLowerCase().includes(this.f_name.toLowerCase()));
+    if (this.f_type) records = records.filter(x => x.type.toLowerCase().includes(this.f_type.toLowerCase()));
+    return records
+  }
+
  fetchRecords = () => {
    this.isFetching = true;
    return http.get('/api/alarm/group/')
--- a/spug_web/src/pages/alarm/routes.js
+++ b/spug_web/src/pages/alarm/routes.js
@ -1,16 +0,0 @@
-/**
- * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
- * Copyright (c) <spug.dev@gmail.com>
- * Released under the AGPL-3.0 License.
- */
-import { makeRoute } from 'libs/router';
-import Alarm from './alarm';
-import Contact from './contact';
-import Group from './group';
-
-
-export default [
-  makeRoute('/alarm', Alarm),
-  makeRoute('/contact', Contact),
-  makeRoute('/group', Group),
-]