A web update

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Modal, Table, Tooltip, Tag } from 'antd';
+import http from 'libs/http';
+import store from './store';
+
+@observer
+class Record extends React.Component {
+  constructor(props) {
+    super(props);
+    this.isModify = store.record.id !== undefined;
+    this.state = {
+      loading: true,
+      envs: this.isModify ? [store.env.id] : []
+    }
+  }
+
+  componentDidMount() {
+    const formData = {type: store.type, id: store.id, env_id: store.env.id};
+    http.post('/api/config/history/', formData)
+      .then(res => this.setState({records: res}))
+      .finally(() => this.setState({loading: false}))
+  }
+
+  colorMap = {'1': 'green', '2': 'orange', '3': 'red'};
+
+  columns = [{
+    title: 'Key',
+    key: 'key',
+    render: info => <Tooltip title={info.desc}>{info.key}</Tooltip>
+  }, {
+    title: 'Old Value',
+    dataIndex: 'old_value',
+    ellipsis: true
+  }, {
+    title: 'New Value',
+    dataIndex: 'value',
+    ellipsis: true
+  }, {
+    title: '动作',
+    render: info => <Tag color={this.colorMap[info.action]}>{info['action_alias']}</Tag>
+  }, {
+    title: '操作人',
+    width: 120,
+    dataIndex: 'update_user'
+  }, {
+    title: '操作时间',
+    width: 180,
+    dataIndex: 'updated_at'
+  }];
+
+  render() {
+    const {loading, records} = this.state;
+    return (
+      <Modal
+        visible
+        width={1000}
+        maskClosable={false}
+        title={`${store.env.name} - 更改历史记录`}
+        onCancel={() => store.recordVisible = false}
+        footer={null}>
+        <Table rowKey="id" loading={loading} dataSource={records} columns={this.columns} />
+      </Modal>
+    )
+  }
+}
+
+export default Record

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

@@ -5,6 +5,7 @@ import envStore from '../environment/store';
 import styles from './index.module.css';
 import { SearchForm } from 'components';
 import ComTable from './Table';
+import Record from './Record';
 import store from './store';
 
 @observer
@@ -56,7 +57,7 @@ class Index extends React.Component {
             </SearchForm.Item>
             <SearchForm.Item span={4}>
               <Button type="primary" style={{backgroundColor: 'orange', borderColor: 'orange'}} icon="history"
-                      onClick={store.fetchRecords}>更改历史</Button>
+                      onClick={store.showRecord}>更改历史</Button>
             </SearchForm.Item>
             <SearchForm.Item span={8} style={{textAlign: 'right'}}>
               <Button type="primary" icon="plus" onClick={() => store.showForm()}>新增配置</Button>
@@ -64,6 +65,7 @@ class Index extends React.Component {
           </SearchForm>
           <ComTable/>
         </div>
+        {store.recordVisible && <Record />}
       </div>
     )
   }

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

@@ -9,6 +9,7 @@ class Store {
   @observable id;
   @observable isFetching = false;
   @observable formVisible = false;
+  @observable recordVisible = false;
 
   @observable f_name;
 
@@ -23,6 +24,10 @@ class Store {
   showForm = (info) => {
     this.formVisible = true;
     this.record = info || {};
+  };
+
+  showRecord = () => {
+    this.recordVisible = true
   }
 }