A web update

spug_api/apps/config/models.py

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

spug_web/src/components/ACEditor.js

@@ -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 (

spug_web/src/pages/config/setting/JSONView.js

@@ -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

spug_web/src/pages/config/setting/TableView.js

@@ -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

spug_web/src/pages/config/setting/TextView.js

@@ -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

spug_web/src/pages/config/setting/index.js

@@ -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>