A web update

pull/22/head
雷二猛 2019-12-08 01:19:32 +08:00
parent b0b8a3f243
commit 80657d4649
6 changed files with 97 additions and 13 deletions

View File

@ -53,6 +53,7 @@ class Config(models.Model, ModelMixin):
class Meta:
db_table = 'configs'
ordering = ('-id',)
class ConfigHistory(models.Model, ModelMixin):

View File

@ -2,12 +2,8 @@ import React from "react";
import Editor from 'react-ace';
import 'ace-builds/src-noconflict/ext-language_tools';
import 'ace-builds/src-noconflict/mode-sh';
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/mode-text';
import 'ace-builds/src-noconflict/theme-tomorrow';
import 'ace-builds/src-noconflict/snippets/sh';
import 'ace-builds/src-noconflict/snippets/json';
import 'ace-builds/src-noconflict/snippets/text';
export default function (props) {
return (

View File

@ -0,0 +1,42 @@
import React from 'react';
import { observer } from 'mobx-react';
import Editor from 'react-ace';
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/theme-tomorrow';
import store from './store';
@observer
class JSONView extends React.Component {
constructor(props) {
super(props);
this.state = {
body: ''
}
}
componentDidMount() {
const body = {};
for (let item of store.records) {
body[item.key] = item.value
}
this.setState({body: JSON.stringify(body, null, 2)})
}
render() {
return (
<Editor
mode="json"
theme="tomorrow"
height="500px"
width="100%"
readOnly={true}
setOptions={{useWorker: false}}
style={{fontSize: 14}}
value={this.state.body}
onChange={v => this.setState({body: v})}
/>
)
}
}
export default JSONView

View File

@ -7,7 +7,7 @@ import http from 'libs/http';
import store from './store';
@observer
class ComTable extends React.Component {
class TableView extends React.Component {
columns = [{
title: 'Key',
key: 'key',
@ -57,11 +57,11 @@ class ComTable extends React.Component {
}
return (
<React.Fragment>
<Table rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>
<Table size="small" rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>
{store.formVisible && <ComForm/>}
</React.Fragment>
)
}
}
export default ComTable
export default TableView

View File

@ -0,0 +1,32 @@
import React from 'react';
import { observer } from 'mobx-react';
import Editor from 'react-ace';
import 'ace-builds/src-noconflict/mode-space';
import 'ace-builds/src-noconflict/theme-tomorrow';
import store from './store';
@observer
class TextView extends React.Component {
constructor(props) {
super(props);
this.state = {
body: ''
}
}
componentDidMount() {
let body = '';
for (let item of store.records) {
body += `${item.key} = ${item.value}\n`
}
this.setState({body})
}
render() {
return (
<Editor style={{fontSize: 14}} value={this.state.body} mode="space" theme="tomorrow" height="500px" width="100%"/>
)
}
}
export default TextView

View File

@ -1,10 +1,12 @@
import React from 'react';
import { observer } from 'mobx-react';
import { Menu, Input, Button } from 'antd';
import { Menu, Input, Button, Select, Icon } from 'antd';
import envStore from '../environment/store';
import styles from './index.module.css';
import { SearchForm } from 'components';
import ComTable from './Table';
import TableView from './TableView';
import TextView from './TextView';
import JSONView from './JSONView';
import Record from './Record';
import store from './store';
@ -13,7 +15,7 @@ class Index extends React.Component {
constructor(props) {
super(props);
this.state = {
// envId: 0
view: '1'
}
}
@ -34,6 +36,7 @@ class Index extends React.Component {
};
render() {
const {view} = this.state;
return (
<div className={styles.container}>
<div className={styles.left}>
@ -49,7 +52,14 @@ class Index extends React.Component {
</div>
<div className={styles.right}>
<SearchForm>
<SearchForm.Item span={8} title="Key">
<SearchForm.Item span={5} title="视图">
<Select value={view} style={{width: '100%'}} onChange={v => this.setState({view: v})}>
<Select.Option value="1"><Icon type="table" style={{marginRight: 10}} />表格</Select.Option>
<Select.Option value="2"><Icon type="unordered-list" style={{marginRight: 10}} />文本</Select.Option>
<Select.Option value="3"><Icon type="number" style={{marginRight: 10}} />JSON</Select.Option>
</Select>
</SearchForm.Item>
<SearchForm.Item span={7} title="Key">
<Input allowClear onChange={e => store.f_name = e.target.value} placeholder="请输入"/>
</SearchForm.Item>
<SearchForm.Item span={4}>
@ -59,11 +69,14 @@ class Index extends React.Component {
<Button type="primary" style={{backgroundColor: 'orange', borderColor: 'orange'}} icon="history"
onClick={store.showRecord}>更改历史</Button>
</SearchForm.Item>
<SearchForm.Item span={8} style={{textAlign: 'right'}}>
<SearchForm.Item span={4} style={{textAlign: 'right'}}>
<Button type="primary" icon="plus" onClick={() => store.showForm()}>新增配置</Button>
</SearchForm.Item>
</SearchForm>
<ComTable/>
{view === '1' && <TableView />}
{view === '2' && <TextView />}
{view === '3' && <JSONView />}
</div>
{store.recordVisible && <Record />}
</div>