github
/
spug
mirror of https://github.com/openspug/spug
1
0
Fork 0
Code Issues Releases Wiki Activity

style migrate v3

pull/289/head
vapao 2020-11-27 10:05:42 +08:00
parent 55ba3633c8
commit 62f43a7b37
6 changed files with 95 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
spug_web/src/pages/config/app/index.js
View File

@ -16,10 +16,10 @@ export default observer(function () {
return ( return (
<AuthDiv auth="config.app.view"> <AuthDiv auth="config.app.view">
<Breadcrumb> <Breadcrumb>
<Breadcrumb.Item>首页</Breadcrumb.Item> <Breadcrumb.Item>首页</Breadcrumb.Item>
<Breadcrumb.Item>配置中心</Breadcrumb.Item> <Breadcrumb.Item>配置中心</Breadcrumb.Item>
<Breadcrumb.Item>应用配置</Breadcrumb.Item> <Breadcrumb.Item>应用配置</Breadcrumb.Item>
</Breadcrumb> </Breadcrumb>
<SearchForm> <SearchForm>
<SearchForm.Item span={8} title="应用名称"> <SearchForm.Item span={8} title="应用名称">
<Input allowClear value={store.f_name} onChange={e => store.f_name = e.target.value} placeholder="请输入"/> <Input allowClear value={store.f_name} onChange={e => store.f_name = e.target.value} placeholder="请输入"/>
@ -27,7 +27,7 @@ export default observer(function () {
</SearchForm> </SearchForm>
<ComTable/> <ComTable/>
{store.formVisible && <ComForm/>} {store.formVisible && <ComForm/>}
{store.relVisible && <Rel />} {store.relVisible && <Rel/>}
</AuthDiv> </AuthDiv>
) )
}) })

8
spug_web/src/pages/config/environment/index.js
View File

@ -15,10 +15,10 @@ export default observer(function () {
return ( return (
<AuthDiv auth="config.env.view"> <AuthDiv auth="config.env.view">
<Breadcrumb> <Breadcrumb>
<Breadcrumb.Item>首页</Breadcrumb.Item> <Breadcrumb.Item>首页</Breadcrumb.Item>
<Breadcrumb.Item>配置中心</Breadcrumb.Item> <Breadcrumb.Item>配置中心</Breadcrumb.Item>
<Breadcrumb.Item>环境管理</Breadcrumb.Item> <Breadcrumb.Item>环境管理</Breadcrumb.Item>
</Breadcrumb> </Breadcrumb>
<SearchForm> <SearchForm>
<SearchForm.Item span={8} title="环境名称"> <SearchForm.Item span={8} title="环境名称">
<Input allowClear value={store.f_name} onChange={e => store.f_name = e.target.value} placeholder="请输入"/> <Input allowClear value={store.f_name} onChange={e => store.f_name = e.target.value} placeholder="请输入"/>

79
spug_web/src/pages/config/service/Form.js
View File

@ -3,65 +3,48 @@
* Copyright (c) <spug.dev@gmail.com> * Copyright (c) <spug.dev@gmail.com>
* Released under the AGPL-3.0 License. * Released under the AGPL-3.0 License.
*/ */
import React from 'react'; import React, { useState } from 'react';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import { Modal, Form, Input, message } from 'antd'; import { Modal, Form, Input, message } from 'antd';
import http from 'libs/http'; import http from 'libs/http';
import store from './store'; import store from './store';
@observer export default observer(function () {
class ComForm extends React.Component { const [form] = Form.useForm();
constructor(props) { const [loading, setLoading] = useState(false);
super(props);
this.state = {
loading: false,
}
}
handleSubmit = () => { function handleSubmit() {
this.setState({loading: true}); setLoading(true);
const formData = this.props.form.getFieldsValue(); const formData = form.getFieldsValue();
formData['id'] = store.record.id; formData['id'] = store.record.id;
http.post('/api/config/service/', formData) http.post('/api/config/service/', formData)
.then(res => { .then(res => {
message.success('操作成功'); message.success('操作成功');
store.formVisible = false; store.formVisible = false;
store.fetchRecords() store.fetchRecords()
}, () => this.setState({loading: false})) }, () => setLoading(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="请输入唯一标识符，例如：mysql_order"/>
)}
</Form.Item>
<Form.Item label="备注信息">
{getFieldDecorator('desc', {initialValue: info['desc']})(
<Input.TextArea placeholder="请输入备注信息"/>
)}
</Form.Item>
</Form>
</Modal>
)
} }
}
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="请输入唯一标识符，例如：mysql_order"/>
</Form.Item>
<Form.Item name="desc" label="备注信息">
<Input.TextArea placeholder="请输入备注信息"/>
</Form.Item>
</Form>
</Modal>
)
})

70
spug_web/src/pages/config/service/Table.js
View File

@ -6,10 +6,10 @@
import React from 'react'; import React from 'react';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import { Table, Modal, message } from 'antd'; 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 { http, hasPermission } from 'libs';
import store from './store'; import store from './store';
import { Action } from "components";
@observer @observer
class ComTable extends React.Component { class ComTable extends React.Component {
@ -32,39 +32,41 @@ class ComTable extends React.Component {
}; };
render() { render() {
let data = store.records;
if (store.f_name) {
data = data.filter(item => item['name'].toLowerCase().includes(store.f_name.toLowerCase()))
}
return ( return (
<React.Fragment> <TableCard
<Table rowKey="id"
rowKey="id" title="服务列表"
loading={store.isFetching} loading={store.isFetching}
dataSource={data} dataSource={store.dataSource}
pagination={{ onReload={store.fetchRecords}
showSizeChanger: true, actions={[
showLessItems: true, <AuthButton
hideOnSinglePage: true, auth="config.src.add"
showTotal: total => `共 ${total} 条`, type="primary"
pageSizeOptions: ['10', '20', '50', '100'] icon={<PlusOutlined/>}
}}> onClick={() => store.showForm()}>新建</AuthButton>
<Table.Column title="序号" key="series" render={(_, __, index) => index + 1}/> ]}
<Table.Column title="服务名称" dataIndex="name"/> pagination={{
<Table.Column title="标识符" dataIndex="key"/> showSizeChanger: true,
<Table.Column ellipsis title="描述信息" dataIndex="desc"/> showLessItems: true,
{hasPermission('config.src.edit|config.src.del|config.src.view_config') && ( hideOnSinglePage: true,
<Table.Column title="操作" render={info => ( showTotal: total => `共 ${total} 条`,
<Action> pageSizeOptions: ['10', '20', '50', '100']
<Action.Button auth="config.src.edit" onClick={() => store.showForm(info)}>编辑</Action.Button> }}>
<Action.Button auth="config.src.del" onClick={() => this.handleDelete(info)}>删除</Action.Button> <Table.Column title="序号" key="series" render={(_, __, index) => index + 1}/>
<Action.Link auth="config.src.view_config" to={`/config/setting/src/${info.id}`}>配置</Action.Link> <Table.Column title="服务名称" dataIndex="name"/>
</Action> <Table.Column title="标识符" dataIndex="key"/>
)}/> <Table.Column ellipsis title="描述信息" dataIndex="desc"/>
)} {hasPermission('config.src.edit|config.src.del|config.src.view_config') && (
</Table> <Table.Column title="操作" render={info => (
{store.formVisible && <ComForm/>} <Action>
</React.Fragment> <Action.Button auth="config.src.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
<Action.Button auth="config.src.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
<Action.Link auth="config.src.view_config" to={`/config/setting/src/${info.id}`}>配置</Action.Link>
</Action>
)}/>
)}
</TableCard>
) )
} }
} }

23
spug_web/src/pages/config/service/index.js
View File

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

8
spug_web/src/pages/config/service/store.js
View File

@ -3,7 +3,7 @@
* Copyright (c) <spug.dev@gmail.com> * Copyright (c) <spug.dev@gmail.com>
* Released under the AGPL-3.0 License. * Released under the AGPL-3.0 License.
*/ */
import { observable } from "mobx"; import { observable, computed } from 'mobx';
import http from 'libs/http'; import http from 'libs/http';
class Store { class Store {
@ -14,6 +14,12 @@ class Store {
@observable f_name; @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 = () => { fetchRecords = () => {
this.isFetching = true; this.isFetching = true;
return http.get('/api/config/service/') return http.get('/api/config/service/')