From dbee03069ee6485cec7926858ffaf833dcd77020 Mon Sep 17 00:00:00 2001 From: vapao Date: Fri, 27 Nov 2020 16:07:05 +0800 Subject: [PATCH] style migrate v3 --- spug_web/src/pages/alarm/group/Form.js | 89 ++++++++++--------------- spug_web/src/pages/alarm/group/Table.js | 72 ++++++++++---------- spug_web/src/pages/alarm/group/index.js | 23 ++++--- spug_web/src/pages/alarm/group/store.js | 9 ++- spug_web/src/pages/alarm/routes.js | 16 ----- 5 files changed, 91 insertions(+), 118 deletions(-) delete mode 100644 spug_web/src/pages/alarm/routes.js diff --git a/spug_web/src/pages/alarm/group/Form.js b/spug_web/src/pages/alarm/group/Form.js index 419d998..2d7f7bc 100644 --- a/spug_web/src/pages/alarm/group/Form.js +++ b/spug_web/src/pages/alarm/group/Form.js @@ -3,71 +3,54 @@ * Copyright (c) * 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 ( - store.formVisible = false} - confirmLoading={this.state.loading} - onOk={this.handleSubmit}> -
- - {getFieldDecorator('name', {initialValue: info['name']})( - - )} - - - {getFieldDecorator('desc', {initialValue: info['desc']})( - - )} - - - {getFieldDecorator('contacts', {valuePropName: 'targetKeys', initialValue: info['contacts']})( - item.id} - titles={['已有联系人', '已选联系人']} - listStyle={{width: 199}} - dataSource={contactStore.records} - render={item => item.name}/> - )} - -
- - ) + }, () => setLoading(true)) } -} -export default Form.create()(ComForm) + return ( + store.formVisible = false} + confirmLoading={loading} + onOk={handleSubmit}> +
+ + + + + + + + item.id} + titles={['已有联系人', '已选联系人']} + listStyle={{width: 199}} + dataSource={contactStore.records} + render={item => item.name}/> + +
+ + ) +}) \ No newline at end of file diff --git a/spug_web/src/pages/alarm/group/Table.js b/spug_web/src/pages/alarm/group/Table.js index 0f53b49..c058af1 100644 --- 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 ( - - `共 ${total} 条`, - pageSizeOptions: ['10', '20', '50', '100'] - }}> - index + 1}/> - - value.map(x => lds.get(this.state.contactMap, `${x}.name`)).join(',')}/> - - {hasPermission('alarm.group.edit|alarm.group.del') && ( - ( - - store.showForm(info)}>编辑 - this.handleDelete(info)}>删除 - - )}/> - )} -
- {store.formVisible && } - + } + onClick={() => store.showForm()}>新建 + ]} + pagination={{ + showSizeChanger: true, + showLessItems: true, + hideOnSinglePage: true, + showTotal: total => `共 ${total} 条`, + pageSizeOptions: ['10', '20', '50', '100'] + }}> + + value.map(x => lds.get(this.state.contactMap, `${x}.name`)).join(',')}/> + + {hasPermission('alarm.group.edit|alarm.group.del') && ( + ( + + store.showForm(info)}>编辑 + this.handleDelete(info)}>删除 + + )}/> + )} + ) } } diff --git a/spug_web/src/pages/alarm/group/index.js b/spug_web/src/pages/alarm/group/index.js index 31cdc84..9a4ee35 100644 --- 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 ( - + + + 首页 + 报警中心 + 报警联系组 + store.f_name = e.target.value} placeholder="请输入"/> - - - - - - - - ) + {store.formVisible && } + + ); }) diff --git a/spug_web/src/pages/alarm/group/store.js b/spug_web/src/pages/alarm/group/store.js index 7aaad27..ffa113f 100644 --- a/spug_web/src/pages/alarm/group/store.js +++ b/spug_web/src/pages/alarm/group/store.js @@ -3,7 +3,7 @@ * Copyright (c) * 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/') diff --git a/spug_web/src/pages/alarm/routes.js b/spug_web/src/pages/alarm/routes.js deleted file mode 100644 index da05607..0000000 --- a/spug_web/src/pages/alarm/routes.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug - * Copyright (c) - * 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), -]