From 4ed1cca33cc8607a8ad84bcdcc4f43a20222db8f Mon Sep 17 00:00:00 2001 From: vapao Date: Fri, 27 Nov 2020 15:04:10 +0800 Subject: [PATCH] style migrate v3 --- spug_web/src/pages/config/app/Table.js | 9 +- spug_web/src/pages/config/routes.js | 18 -- spug_web/src/pages/config/service/Table.js | 9 +- .../src/pages/config/setting/DiffConfig.js | 10 +- spug_web/src/pages/config/setting/Form.js | 163 ++++++++---------- spug_web/src/pages/config/setting/JSONView.js | 5 +- .../src/pages/config/setting/TableView.js | 5 +- spug_web/src/pages/config/setting/TextView.js | 5 +- spug_web/src/pages/config/setting/index.js | 112 +++++++----- spug_web/src/routes.js | 2 + 10 files changed, 170 insertions(+), 168 deletions(-) delete mode 100644 spug_web/src/pages/config/routes.js diff --git a/spug_web/src/pages/config/app/Table.js b/spug_web/src/pages/config/app/Table.js index 4679e7b..3418e22 100644 --- a/spug_web/src/pages/config/app/Table.js +++ b/spug_web/src/pages/config/app/Table.js @@ -8,7 +8,7 @@ import { observer } from 'mobx-react'; import { Table, Modal, message } from 'antd'; import { PlusOutlined } from '@ant-design/icons'; import { Action, TableCard, AuthButton } from 'components'; -import { http, hasPermission } from 'libs'; +import { http, hasPermission, history } from 'libs'; import store from './store'; @observer @@ -31,6 +31,11 @@ class ComTable extends React.Component { }) }; + toConfig = (info) => { + store.record = info; + history.push(`/config/setting/app/${info.id}`) + } + render() { let data = store.records; if (store.f_name) { @@ -67,7 +72,7 @@ class ComTable extends React.Component { store.showForm(info)}>编辑 this.handleDelete(info)}>删除 store.showRel(info)}>依赖 - 配置 + this.toConfig(info)}>配置 )}/> )} diff --git a/spug_web/src/pages/config/routes.js b/spug_web/src/pages/config/routes.js deleted file mode 100644 index 40c1007..0000000 --- a/spug_web/src/pages/config/routes.js +++ /dev/null @@ -1,18 +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 Environment from './environment'; -import Service from './service'; -import App from './app'; -import Setting from './setting'; - - -export default [ - makeRoute('/environment', Environment), - makeRoute('/service', Service), - makeRoute('/app', App), - makeRoute('/setting/:type/:id', Setting), -] diff --git a/spug_web/src/pages/config/service/Table.js b/spug_web/src/pages/config/service/Table.js index db1fcf3..77a8259 100644 --- a/spug_web/src/pages/config/service/Table.js +++ b/spug_web/src/pages/config/service/Table.js @@ -8,7 +8,7 @@ import { observer } from 'mobx-react'; import { Table, Modal, message } from 'antd'; import { PlusOutlined } from '@ant-design/icons'; import { Action, TableCard, AuthButton } from 'components'; -import { http, hasPermission } from 'libs'; +import { http, hasPermission, history } from 'libs'; import store from './store'; @observer @@ -31,6 +31,11 @@ class ComTable extends React.Component { }) }; + toConfig = (info) => { + store.record = info; + history.push(`/config/setting/src/${info.id}`) + } + render() { return ( store.showForm(info)}>编辑 this.handleDelete(info)}>删除 - 配置 + this.toConfig(info)}>配置 )}/> )} diff --git a/spug_web/src/pages/config/setting/DiffConfig.js b/spug_web/src/pages/config/setting/DiffConfig.js index fb9bcb8..ff79f3f 100644 --- a/spug_web/src/pages/config/setting/DiffConfig.js +++ b/spug_web/src/pages/config/setting/DiffConfig.js @@ -5,7 +5,8 @@ */ import React from 'react'; import { observer } from 'mobx-react'; -import { Modal, Table, Row, Col, Checkbox, Form, Button, Alert } from 'antd'; +import { ArrowLeftOutlined } from '@ant-design/icons'; +import { Modal, Form, Table, Row, Col, Checkbox, Button, Alert } from 'antd'; import http from 'libs/http'; import envStore from '../environment/store'; import styles from './index.module.css'; @@ -67,7 +68,8 @@ class Record extends React.Component {
- + {envStore.records.map((item, index) => (
- this.setState({hideSame: !hideSame})}>隐藏相同配置 - ) + ); } } diff --git a/spug_web/src/pages/config/setting/Form.js b/spug_web/src/pages/config/setting/Form.js index 0c59a40..f7fce97 100644 --- a/spug_web/src/pages/config/setting/Form.js +++ b/spug_web/src/pages/config/setting/Form.js @@ -3,114 +3,97 @@ * Copyright (c) * Released under the AGPL-3.0 License. */ -import React from 'react'; -import {observer} from 'mobx-react'; -import {Modal, Form, Input, Checkbox, Switch, Row, Col, message} from 'antd'; +import React, { useState } from 'react'; +import { observer } from 'mobx-react'; +import { Modal, Form, Input, Checkbox, Switch, Row, Col, message } from 'antd'; import http from 'libs/http'; import store from './store'; import envStore from '../environment/store' import styles from './index.module.css'; +import lds from 'lodash'; -@observer -class ComForm extends React.Component { - constructor(props) { - super(props); - this.isModify = store.record.id !== undefined; - this.state = { - loading: false, - envs: this.isModify ? [store.env.id] : [] - } - } +export default observer(function () { + const isModify = store.record.id !== undefined; + const [form] = Form.useForm(); + const [loading, setLoading] = useState(false); + const [envs, setEnvs] = useState(isModify ? [store.env.id] : []); - handleSubmit = () => { - this.setState({loading: true}); - const formData = this.props.form.getFieldsValue(); + function handleSubmit() { + setLoading(true); + const formData = form.getFieldsValue(); formData['is_public'] = store.type === 'src' ? false : formData['is_public']; let request; - if (this.isModify) { + if (isModify) { formData['id'] = store.record.id; request = http.patch('/api/config/', formData) } else { formData['type'] = store.type; formData['o_id'] = store.id; - formData['envs'] = this.state.envs; + formData['envs'] = envs; request = http.post('/api/config/', formData) } request.then(res => { message.success('操作成功'); store.formVisible = false; store.fetchRecords() - }, () => this.setState({loading: false})) - }; - - handleEnvCheck = (id) => { - if (!this.isModify) { - const index = this.state.envs.indexOf(id); - if (index !== -1) { - this.state.envs.splice(index, 1); - } else { - this.state.envs.push(id); - } - this.setState({envs: this.state.envs}) - } - }; - - render() { - const info = store.record; - const {envs} = this.state; - const {getFieldDecorator} = this.props.form; - return ( - store.formVisible = false} - confirmLoading={this.state.loading} - onOk={this.handleSubmit}> -
- - {getFieldDecorator('key', {initialValue: info['key']})( - - )} - - - {getFieldDecorator('value', {initialValue: info['value']})( - - )} - - - {getFieldDecorator('desc', {initialValue: info['desc']})( - - )} - - {store.type === 'app' && ( - - {getFieldDecorator('is_public', { - initialValue: info['is_public'] === undefined || info['is_public'], - valuePropName: 'checked' - })( - - )} - - )} - - {envStore.records.map((item, index) => ( - this.handleEnvCheck(item.id)} - style={{cursor: 'pointer', borderTop: index ? '1px solid #e8e8e8' : ''}}> - - {item.key} - {item.name} - {item.desc} - - ))} - - - - ) + }, () => setLoading(false)) } -} -export default Form.create()(ComForm) + function handleEnvCheck(id) { + if (!isModify) { + const tmp = lds.clone(envs); + const index = tmp.indexOf(id); + if (index !== -1) { + tmp.splice(index, 1) + } else { + tmp.push(id) + } + setEnvs(tmp) + } + } + + return ( + store.formVisible = false} + confirmLoading={loading} + onOk={handleSubmit}> +
+ + + + + + + + + + {store.type === 'app' && ( + + + + )} + + {envStore.records.map((item, index) => ( + handleEnvCheck(item.id)} + style={{cursor: 'pointer', borderTop: index ? '1px solid #e8e8e8' : ''}}> + + {item.key} + {item.name} + {item.desc} + + ))} + + + + ) +}) \ No newline at end of file diff --git a/spug_web/src/pages/config/setting/JSONView.js b/spug_web/src/pages/config/setting/JSONView.js index 6ca5a09..ea1f0ea 100644 --- a/spug_web/src/pages/config/setting/JSONView.js +++ b/spug_web/src/pages/config/setting/JSONView.js @@ -5,6 +5,7 @@ */ import React from 'react'; import { observer } from 'mobx-react'; +import { SaveOutlined, EditOutlined } from '@ant-design/icons'; import { Button, message } from 'antd'; import Editor from 'react-ace'; import 'ace-builds/src-noconflict/mode-json'; @@ -67,14 +68,14 @@ class JSONView extends React.Component { value={body} onChange={v => this.setState({body: v})}/> {readOnly && } type="link" size="large" auth={`config.${store.type}.edit_config`} style={{position: 'absolute', top: 0, right: 0}} onClick={() => this.setState({readOnly: false})}>编辑} {readOnly || }/> - this.updateEnv(item.props.env)}> - {envStore.records.map(item => ( - {item.name} ({item.key}) - ))} - - -
- - - - - - store.f_name = e.target.value} placeholder="请输入"/> - - - - - - - - - store.showForm()}>新增配置 - - + + + 配置中心 + history.goBack()}>{isApp ? '应用配置' : '服务配置'} + {record.name} + +
+
+ history.goBack()} + extra={}/> + this.updateEnv(item.props.env)}> + {envStore.records.map(item => ( + {item.name} ({item.key}) + ))} + +
+
+ + + + + + store.f_name = e.target.value} placeholder="请输入"/> + + + + + + + + + } onClick={() => store.showForm()}>新增配置 + + - {view === '1' && } - {view === '2' && this.textView = ref}/>} - {view === '3' && this.JSONView = ref}/>} + {view === '1' && } + {view === '2' && this.textView = ref}/>} + {view === '3' && this.JSONView = ref}/>} +
{store.recordVisible && } {store.diffVisible && } diff --git a/spug_web/src/routes.js b/spug_web/src/routes.js index 43df8bb..ed19077 100644 --- a/spug_web/src/routes.js +++ b/spug_web/src/routes.js @@ -32,6 +32,7 @@ import ScheduleIndex from './pages/schedule'; import ConfigEnvironment from './pages/config/environment'; import ConfigService from './pages/config/service'; import ConfigApp from './pages/config/app'; +import ConfigSetting from './pages/config/setting'; import MonitorIndex from './pages/monitor'; @@ -77,6 +78,7 @@ export default [ {title: '环境管理', auth: 'config.env.view', path: '/config/environment', component: ConfigEnvironment}, {title: '服务配置', auth: 'config.src.view', path: '/config/service', component: ConfigService}, {title: '应用配置', auth: 'config.app.view', path: '/config/app', component: ConfigApp}, + {path: '/config/setting/:type/:id', component: ConfigSetting}, ] }, {icon: , title: '监控中心', auth: 'monitor.monitor.view', path: '/monitor', component: MonitorIndex},