diff --git a/spug_web/src/pages/config/app/index.js b/spug_web/src/pages/config/app/index.js index f1d0790..34b0141 100644 --- a/spug_web/src/pages/config/app/index.js +++ b/spug_web/src/pages/config/app/index.js @@ -16,10 +16,10 @@ export default observer(function () { return ( - 首页 - 配置中心 - 应用配置 - + 首页 + 配置中心 + 应用配置 + store.f_name = e.target.value} placeholder="请输入"/> @@ -27,7 +27,7 @@ export default observer(function () { {store.formVisible && } - {store.relVisible && } + {store.relVisible && } ) }) diff --git a/spug_web/src/pages/config/environment/index.js b/spug_web/src/pages/config/environment/index.js index 9fba7c7..cb81641 100644 --- a/spug_web/src/pages/config/environment/index.js +++ b/spug_web/src/pages/config/environment/index.js @@ -15,10 +15,10 @@ export default observer(function () { return ( - 首页 - 配置中心 - 环境管理 - + 首页 + 配置中心 + 环境管理 + store.f_name = e.target.value} placeholder="请输入"/> diff --git a/spug_web/src/pages/config/service/Form.js b/spug_web/src/pages/config/service/Form.js index 0069130..be6f479 100644 --- a/spug_web/src/pages/config/service/Form.js +++ b/spug_web/src/pages/config/service/Form.js @@ -3,65 +3,48 @@ * 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, 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/config/service/', 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('key', {initialValue: info['key']})( - - )} - - - {getFieldDecorator('desc', {initialValue: info['desc']})( - - )} - -
- - ) + }, () => setLoading(false)) } -} -export default Form.create()(ComForm) + return ( + store.formVisible = false} + confirmLoading={loading} + onOk={handleSubmit}> +
+ + + + + + + + + +
+ + ) +}) \ No newline at end of file diff --git a/spug_web/src/pages/config/service/Table.js b/spug_web/src/pages/config/service/Table.js index df8df67..db1fcf3 100644 --- a/spug_web/src/pages/config/service/Table.js +++ b/spug_web/src/pages/config/service/Table.js @@ -6,10 +6,10 @@ 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 { Action } from "components"; @observer class ComTable extends React.Component { @@ -32,39 +32,41 @@ 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())) - } return ( - - `共 ${total} 条`, - pageSizeOptions: ['10', '20', '50', '100'] - }}> - index + 1}/> - - - - {hasPermission('config.src.edit|config.src.del|config.src.view_config') && ( - ( - - 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'] + }}> + index + 1}/> + + + + {hasPermission('config.src.edit|config.src.del|config.src.view_config') && ( + ( + + store.showForm(info)}>编辑 + this.handleDelete(info)}>删除 + 配置 + + )}/> + )} + ) } } diff --git a/spug_web/src/pages/config/service/index.js b/spug_web/src/pages/config/service/index.js index cdaf7eb..5481e79 100644 --- a/spug_web/src/pages/config/service/index.js +++ b/spug_web/src/pages/config/service/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/config/service/store.js b/spug_web/src/pages/config/service/store.js index 663df31..b0844ae 100644 --- a/spug_web/src/pages/config/service/store.js +++ b/spug_web/src/pages/config/service/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,12 @@ 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())); + return records + } + fetchRecords = () => { this.isFetching = true; return http.get('/api/config/service/')