style migrate v3

2020-11-27 15:04:10 +08:00 · 2020-11-27 15:04:10 +08:00 · 4ed1cca33c
parent 62f43a7b37
commit 4ed1cca33c
10 changed files with 170 additions and 168 deletions
--- 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 {
              <Action.Button auth="config.app.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
              <Action.Button auth="config.app.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
              <Action.Button auth="config.app.view_config" onClick={() => store.showRel(info)}>依赖</Action.Button>
-              <Action.Link auth="config.app.view_config" to={`/config/setting/app/${info.id}`}>配置</Action.Link>
+              <Action.Button auth="config.app.view_config" onClick={() => this.toConfig(info)}>配置</Action.Button>
            </Action>
          )}/>
        )}
--- a/spug_web/src/pages/config/routes.js
+++ b/spug_web/src/pages/config/routes.js
@ -1,18 +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 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),
-]
--- 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 (
      <TableCard
@ -62,7 +67,7 @@ class ComTable extends React.Component {
            <Action>
              <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.Button auth="config.src.view_config" onClick={() => this.toConfig(info)}>配置</Action.Button>
            </Action>
          )}/>
        )}
--- 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 {
        <div style={{display: page === 0 ? 'block' : 'none'}}>
          <Alert style={{width: 500, margin: '10px auto 20px', color: '#31708f !important'}} type="info"
                 message="Tips: 通过对比配置功能，可以查看多个环境间的配置差异"/>
-          <Form.Item labelCol={{span: 6}} wrapperCol={{span: 14, offset: 1}} label="要对比的环境">
+          <Form.Item labelCol={{span: 6}} wrapperCol={{span: 14, offset: 1}} label="要对比的环境"
+                     style={{lineHeight: '40px'}}>
            {envStore.records.map((item, index) => (
              <Row
                key={item.id}
@ -85,13 +87,13 @@ class Record extends React.Component {
          </Form.Item>
        </div>
        <div style={{display: page === 1 ? 'block' : 'none'}}>
-          <Button type="link" icon="arrow-left" style={{marginRight: 20}}
+          <Button type="link" icon={<ArrowLeftOutlined/>} style={{marginRight: 20}}
                  onClick={() => this.setState({page: page - 1})}>上一步</Button>
          <Checkbox checked={hideSame} onChange={() => this.setState({hideSame: !hideSame})}>隐藏相同配置</Checkbox>
          <Table pagination={false} dataSource={records} loading={loading} columns={this.getColumns()}/>
        </div>
      </Modal>
-    )
+    );
  }
 }

--- a/spug_web/src/pages/config/setting/Form.js
+++ b/spug_web/src/pages/config/setting/Form.js
@ -3,62 +3,55 @@
 * 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, 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}))
-  };
+    }, () => setLoading(false))
+  }

-  handleEnvCheck = (id) => {
-    if (!this.isModify) {
-      const index = this.state.envs.indexOf(id);
+  function handleEnvCheck(id) {
+    if (!isModify) {
+      const tmp = lds.clone(envs);
+      const index = tmp.indexOf(id);
      if (index !== -1) {
-        this.state.envs.splice(index, 1);
+        tmp.splice(index, 1)
      } else {
-        this.state.envs.push(id);
+        tmp.push(id)
+      }
+      setEnvs(tmp)
    }
-      this.setState({envs: this.state.envs})
  }
-  };

-  render() {
-    const info = store.record;
-    const {envs} = this.state;
-    const {getFieldDecorator} = this.props.form;
  return (
    <Modal
      visible
@ -66,41 +59,34 @@ class ComForm extends React.Component {
      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="Key">
-            {getFieldDecorator('key', {initialValue: info['key']})(
-              <Input disabled={this.isModify} placeholder="请输入"/>
-            )}
+      confirmLoading={loading}
+      onOk={handleSubmit}>
+      <Form form={form} initialValues={store.record} labelCol={{span: 6}} wrapperCol={{span: 14}}>
+        <Form.Item required name="key" label="Key">
+          <Input disabled={isModify} placeholder="请输入"/>
        </Form.Item>
-          <Form.Item label="Value">
-            {getFieldDecorator('value', {initialValue: info['value']})(
+        <Form.Item name="value" label="Value">
          <Input.TextArea placeholder="请输入"/>
-            )}
        </Form.Item>
-          <Form.Item label="备注">
-            {getFieldDecorator('desc', {initialValue: info['desc']})(
+        <Form.Item name="desc" label="备注">
          <Input.TextArea placeholder="请输入备注信息"/>
-            )}
        </Form.Item>
        {store.type === 'app' && (
-            <Form.Item label="类型">
-              {getFieldDecorator('is_public', {
-                initialValue: info['is_public'] === undefined || info['is_public'],
-                valuePropName: 'checked'
-              })(
+          <Form.Item
+            label="类型"
+            name="is_public"
+            valuePropName="checked"
+            initialValue={store.record.is_public === undefined || store.record.is_public}>
            <Switch checkedChildren="公共" unCheckedChildren="私有"/>
-              )}
          </Form.Item>
        )}
-          <Form.Item label="选择环境">
+        <Form.Item label="选择环境" style={{lineHeight: '40px'}}>
          {envStore.records.map((item, index) => (
            <Row
              key={item.id}
-                onClick={() => this.handleEnvCheck(item.id)}
+              onClick={() => handleEnvCheck(item.id)}
              style={{cursor: 'pointer', borderTop: index ? '1px solid #e8e8e8' : ''}}>
-                <Col span={2}><Checkbox disabled={this.isModify} checked={envs.includes(item.id)}/></Col>
+              <Col span={2}><Checkbox disabled={isModify} checked={envs.includes(item.id)}/></Col>
              <Col span={4} className={styles.ellipsis}>{item.key}</Col>
              <Col span={9} className={styles.ellipsis}>{item.name}</Col>
              <Col span={9} className={styles.ellipsis}>{item.desc}</Col>
@ -110,7 +96,4 @@ class ComForm extends React.Component {
      </Form>
    </Modal>
  )
-  }
-}
-
-export default Form.create()(ComForm)
+})
--- 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 && <AuthButton
-          icon="edit"
+          icon={<EditOutlined/>}
          type="link"
          size="large"
          auth={`config.${store.type}.edit_config`}
          style={{position: 'absolute', top: 0, right: 0}}
          onClick={() => this.setState({readOnly: false})}>编辑</AuthButton>}
        {readOnly || <Button
-          icon="save"
+          icon={<SaveOutlined />}
          type="link"
          size="large"
          loading={loading}
--- a/spug_web/src/pages/config/setting/TableView.js
+++ b/spug_web/src/pages/config/setting/TableView.js
@ -5,7 +5,8 @@
 */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Table, Modal, Tooltip, Icon, message } from 'antd';
+import { LockOutlined } from '@ant-design/icons';
+import { Table, Modal, Tooltip, message } from 'antd';
 import { Action } from 'components';
 import ComForm from './Form';
 import { http, hasPermission } from 'libs';
@ -14,7 +15,7 @@ import store from './store';
@observer
 class TableView extends React.Component {
  lockIcon = <Tooltip title="私有配置应用专用，不会被其他应用获取到">
-    <Icon style={{marginRight: 5}} type="lock"/>
+    <LockOutlined style={{marginRight: 5}} />
  </Tooltip>;

  columns = [{
--- a/spug_web/src/pages/config/setting/TextView.js
+++ b/spug_web/src/pages/config/setting/TextView.js
@ -10,6 +10,7 @@ import 'ace-builds/src-noconflict/mode-space';
 import 'ace-builds/src-noconflict/theme-tomorrow';
 import store from './store';
 import { http } from "libs";
+import { SaveOutlined, EditOutlined } from '@ant-design/icons';
 import { Button, message } from 'antd';
 import { AuthButton } from 'components';

@ -61,14 +62,14 @@ class TextView extends React.Component {
          readOnly={readOnly}
          onChange={v => this.setState({body: v})}/>
        {readOnly && <AuthButton
-          icon="edit"
+          icon={<EditOutlined/>}
          type="link"
          size="large"
          auth={`config.${store.type}.edit_config`}
          style={{position: 'absolute', top: 0, right: 0}}
          onClick={() => this.setState({readOnly: false})}>编辑</AuthButton>}
        {readOnly || <Button
-          icon="save"
+          icon={<SaveOutlined />}
          type="link"
          size="large"
          loading={loading}
--- a/spug_web/src/pages/config/setting/index.js
+++ b/spug_web/src/pages/config/setting/index.js
@ -6,17 +6,27 @@
 import React from 'react';
 import { observer } from 'mobx-react';
 import { Menu, Input, Button, Select, PageHeader, Modal } from 'antd';
-import { TableOutlined, UnorderedListOutlined, NumberOutlined } from '@ant-design/icons';
+import {
+  DiffOutlined,
+  HistoryOutlined,
+  NumberOutlined,
+  SyncOutlined,
+  TableOutlined,
+  UnorderedListOutlined,
+  PlusOutlined,
+} from '@ant-design/icons';
 import envStore from '../environment/store';
 import styles from './index.module.css';
 import history from 'libs/history';
-import { SearchForm, AuthDiv, AuthButton } from 'components';
+import { SearchForm, AuthDiv, AuthButton, Breadcrumb } from 'components';
 import DiffConfig from './DiffConfig';
 import TableView from './TableView';
 import TextView from './TextView';
 import JSONView from './JSONView';
 import Record from './Record';
 import store from './store';
+import appStore from '../app/store';
+import srcStore from '../service/store';

@observer
 class Index extends React.Component {
@ -63,14 +73,22 @@ class Index extends React.Component {

  render() {
    const {view} = this.state;
+    const isApp = store.type === 'app';
+    const record = isApp ? appStore.record : srcStore.record;
    return (
-      <AuthDiv auth={`config.${store.type}.view_config`} className={styles.container}>
+      <AuthDiv auth={`config.${store.type}.view_config`}>
+        <Breadcrumb>
+          <Breadcrumb.Item>配置中心</Breadcrumb.Item>
+          <Breadcrumb.Item onClick={() => history.goBack()}>{isApp ? '应用配置' : '服务配置'}</Breadcrumb.Item>
+          <Breadcrumb.Item>{record.name}</Breadcrumb.Item>
+        </Breadcrumb>
+        <div className={styles.container}>
          <div className={styles.left}>
            <PageHeader
              title="环境列表"
              style={{padding: '0 0 10px 10px'}}
              onBack={() => history.goBack()}
-            extra={<Button type="link" icon="diff" onClick={store.showDiff}>对比配置</Button>}/>
+              extra={<Button type="link" icon={<DiffOutlined/>} onClick={store.showDiff}>对比配置</Button>}/>
            <Menu
              mode="inline"
              selectedKeys={[String(store.env.id)]}
@ -83,7 +101,7 @@ class Index extends React.Component {
          </div>
          <div className={styles.right}>
            <SearchForm>
-            <SearchForm.Item span={6} title="视图">
+              <SearchForm.Item span={6} title="视图" style={{paddingLeft: 0}}>
                <Select value={view} style={{width: '100%'}} onChange={v => this.setState({view: v})}>
                  <Select.Option value="1"><TableOutlined style={{marginRight: 10}}/>表格</Select.Option>
                  <Select.Option value="2"><UnorderedListOutlined style={{marginRight: 10}}/>文本</Select.Option>
@ -94,15 +112,16 @@ class Index extends React.Component {
                <Input allowClear value={store.f_name} onChange={e => store.f_name = e.target.value} placeholder="请输入"/>
              </SearchForm.Item>
              <SearchForm.Item span={3}>
-              <Button type="primary" icon="sync" onClick={this.handleRefresh}>刷新</Button>
+                <Button type="primary" icon={<SyncOutlined/>} onClick={this.handleRefresh}>刷新</Button>
              </SearchForm.Item>
              <SearchForm.Item span={4}>
-              <Button type="primary" style={{backgroundColor: 'orange', borderColor: 'orange'}} icon="history"
+                <Button type="primary" style={{backgroundColor: 'orange', borderColor: 'orange'}}
+                        icon={<HistoryOutlined/>}
                        onClick={store.showRecord}>更改历史</Button>
              </SearchForm.Item>
              <SearchForm.Item span={4} style={{textAlign: 'right'}}>
                <AuthButton auth="config.app.edit_config|config.service.edit_config" disabled={view !== '1'}
-                          type="primary" icon="plus" onClick={() => store.showForm()}>新增配置</AuthButton>
+                            type="primary" icon={<PlusOutlined/>} onClick={() => store.showForm()}>新增配置</AuthButton>
              </SearchForm.Item>
            </SearchForm>

@ -110,6 +129,7 @@ class Index extends React.Component {
            {view === '2' && <TextView ref={ref => this.textView = ref}/>}
            {view === '3' && <JSONView ref={ref => this.JSONView = ref}/>}
          </div>
+        </div>
        {store.recordVisible && <Record/>}
        {store.diffVisible && <DiffConfig/>}
      </AuthDiv>
--- 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: <MonitorOutlined/>, title: '监控中心', auth: 'monitor.monitor.view', path: '/monitor', component: MonitorIndex},