improve code

spug_web/src/pages/deploy/request/Table.js

@@ -12,20 +12,8 @@ import { Action, AuthButton, TableCard } from 'components';
 import styles from './index.module.less';
 import store from './store';
 
-@observer
+function ComTable() {
-class ComTable extends React.Component {
+  const columns = [{
-  constructor(props) {
-    super(props);
-    this.state = {
-      loading: false
-    }
-  }
-
-  componentDidMount() {
-    store.fetchRecords()
-  }
-
-  columns = [{
     title: '申请标题',
     render: info => (
       <div>
@@ -98,14 +86,13 @@ class ComTable extends React.Component {
         case '-3':
           return <Action>
             <Action.Button auth="deploy.request.do" onClick={() => store.readConsole(info)}>查看</Action.Button>
-            <Popconfirm title="确认要执行该发布申请？" onConfirm={e => this.handleCCC(e, info)}>
+            <Popconfirm title="确认要执行该发布申请？" onConfirm={e => handleDeploy(e, info)}>
               <Action.Button auth="deploy.request.do">发布</Action.Button>
             </Popconfirm>
             <Action.Button
               auth="deploy.request.do"
               disabled={info.type === '2'}
-              loading={this.state.loading}
+              onClick={() => handleRollback(info)}>回滚</Action.Button>
-              onClick={() => this.handleRollback(info)}>回滚</Action.Button>
           </Action>;
         case '3':
           return <Action>
@@ -115,30 +102,27 @@ class ComTable extends React.Component {
             <Action.Button
               auth="deploy.request.do"
               disabled={info.type === '2'}
-              loading={this.state.loading}
+              onClick={() => handleRollback(info)}>回滚</Action.Button>
-              onClick={() => this.handleRollback(info)}>回滚</Action.Button>
           </Action>;
         case '-1':
           return <Action>
             <Action.Button auth="deploy.request.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
-            <Action.Button auth="deploy.request.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+            <Action.Button auth="deploy.request.del" onClick={() => handleDelete(info)}>删除</Action.Button>
           </Action>;
         case '0':
           return <Action>
             <Action.Button auth="deploy.request.approve" onClick={() => store.showApprove(info)}>审核</Action.Button>
             <Action.Button auth="deploy.request.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
-            <Action.Button auth="deploy.request.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+            <Action.Button auth="deploy.request.del" onClick={() => handleDelete(info)}>删除</Action.Button>
           </Action>;
         case '1':
           return <Action>
             <Action.Button auth="deploy.request.do" onClick={() => store.showConsole(info)}>发布</Action.Button>
-            <Action.Button auth="deploy.request.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+            <Action.Button auth="deploy.request.del" onClick={() => handleDelete(info)}>删除</Action.Button>
           </Action>;
         case '2':
           return <Action>
-            <Action.Link
+            <Action.Button auth="deploy.request.do" onClick={() => store.readConsole(info)}>查看</Action.Button>
-              auth="deploy.request.do"
-              to={`/deploy/do/ext${info['app_extend']}/${info.id}/1`}>查看</Action.Link>
           </Action>;
         default:
           return null
@@ -146,8 +130,7 @@ class ComTable extends React.Component {
     }
   }];
 
-  handleRollback = (info) => {
+  function handleRollback(info) {
-    this.setState({loading: true});
     http.put('/api/deploy/request/', {id: info.id, action: 'check'})
       .then(res => {
         Modal.confirm({
@@ -162,10 +145,9 @@ class ComTable extends React.Component {
           }
         })
       })
-      .finally(() => this.setState({loading: false}))
+  }
-  };
 
-  handleDelete = (info) => {
+  function handleDelete(info) {
     Modal.confirm({
       title: '删除确认',
       content: `确定要删除【${info['name']}】?`,
@@ -177,9 +159,9 @@ class ComTable extends React.Component {
           })
       }
     })
-  };
+  }
 
-  handleCCC = (e, info) => {
+  function handleDeploy(e, info) {
     const right = document.body.clientWidth - 25 - e.target.getBoundingClientRect().x;
     const bottom = document.body.clientHeight - 40 - e.target.getBoundingClientRect().y;
     store.box.setAttribute('style', `display: block; bottom: ${bottom}px; right: ${right}px;`);
@@ -194,33 +176,13 @@ class ComTable extends React.Component {
 
   }
 
-  render() {
-    let data = store.records;
-    if (store.f_app_id) {
-      data = data.filter(item => item['app_id'] === store.f_app_id)
-    }
-    if (store.f_env_id) {
-      data = data.filter(item => item['env_id'] === store.f_env_id)
-    }
-    if (store.f_s_date) {
-      data = data.filter(item => {
-        const date = item['created_at'].substr(0, 10);
-        return date >= store.f_s_date && date <= store.f_e_date
-      })
-    }
-    if (store.f_status !== 'all') {
-      if (store.f_status === '99') {
-        data = data.filter(item => ['-1', '2'].includes(item['status']))
-      } else {
-        data = data.filter(item => item['status'] === store.f_status)
-      }
-    }
   return (
     <TableCard
       rowKey="id"
       title="申请列表"
+      columns={columns}
       loading={store.isFetching}
-        dataSource={data}
+      dataSource={store.dataSource}
       onReload={store.fetchRecords}
       actions={[
         <AuthButton
@@ -243,10 +205,8 @@ class ComTable extends React.Component {
         hideOnSinglePage: true,
         showTotal: total => `共 ${total} 条`,
         pageSizeOptions: ['10', '20', '50', '100']
-        }}
+      }}/>
-        columns={this.columns}/>
   )
-  }
 }
 
-export default ComTable
+export default observer(ComTable)

spug_web/src/pages/deploy/request/index.js

@@ -3,7 +3,7 @@
  * Copyright (c) <spug.dev@gmail.com>
  * Released under the AGPL-3.0 License.
  */
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { observer } from 'mobx-react';
 import { ExclamationCircleOutlined, DeleteOutlined } from '@ant-design/icons';
 import { Form, Select, DatePicker, Modal, Input, Row, Col, message } from 'antd';
@@ -20,26 +20,17 @@ import store from './store';
 import moment from 'moment';
 import styles from './index.module.less';
 
-@observer
+function Index() {
-class Index extends React.Component {
+  const [expire, setExpire] = useState();
-  constructor(props) {
+  const [count, setCount] = useState();
-    super(props);
-    this.state = {
-      expire: undefined,
-      count: ''
-    }
-  }
 
-  componentDidMount() {
+  useEffect(() => {
-    if (envStore.records.length === 0) {
+    store.fetchRecords()
-      envStore.fetchRecords()
+    if (envStore.records.length === 0) envStore.fetchRecords()
-    }
+    if (appStore.records.length === 0) appStore.fetchRecords()
-    if (appStore.records.length === 0) {
+  }, [])
-      appStore.fetchRecords()
-    }
-  }
 
-  handleBatchDel = () => {
+  function handleBatchDel() {
     Modal.confirm({
       icon: <ExclamationCircleOutlined/>,
       title: '批量删除发布申请',
@@ -47,16 +38,15 @@ class Index extends React.Component {
         <Form layout="vertical" style={{marginTop: 24}}>
           <Form.Item label="截止日期 :" help={<div>将删除截止日期<span style={{color: 'red'}}>之前</span>的所有发布申请记录。</div>}>
             <DatePicker style={{width: 200}} placeholder="请输入"
-                        onChange={val => this.setState({expire: val.format('YYYY-MM-DD')})}/>
+                        onChange={val => setExpire(val.format('YYYY-MM-DD'))}/>
           </Form.Item>
           <Form.Item label="保留记录 :" help="每个应用每个环境仅保留最新的N条发布申请，优先级高于截止日期">
             <Input allowClear style={{width: 200}} placeholder="请输入保留个数"
-                   onChange={e => this.setState({count: e.target.value})}/>
+                   onChange={e => setCount(e.target.value)}/>
           </Form.Item>
         </Form>
       ),
       onOk: () => {
-        const {expire, count} = this.state;
         return http.delete('/api/deploy/request/', {params: {expire, count}})
           .then(res => {
             message.success(`成功删除${res}条记录`);
@@ -64,9 +54,8 @@ class Index extends React.Component {
           })
       },
     })
-  };
+  }
 
-  render() {
   return (
     <AuthDiv auth="deploy.request.view">
       <Breadcrumb>
@@ -111,7 +100,7 @@ class Index extends React.Component {
             auth="deploy.request.del"
             type="danger"
             icon={<DeleteOutlined/>}
-              onClick={this.handleBatchDel}>批量删除</AuthButton>
+            onClick={handleBatchDel}>批量删除</AuthButton>
         </SearchForm.Item>
       </SearchForm>
       <ComTable/>
@@ -134,7 +123,6 @@ class Index extends React.Component {
       <div ref={el => store.box = el} id='floatBox' className={styles.floatBox}/>
     </AuthDiv>
   )
-  }
 }
 
-export default Index
+export default observer(Index)

spug_web/src/pages/deploy/request/store.js

@@ -3,7 +3,7 @@
  * Copyright (c) <spug.dev@gmail.com>
  * Released under the AGPL-3.0 License.
  */
-import { observable } from "mobx";
+import { observable, computed } from "mobx";
 import http from 'libs/http';
 import lds from 'lodash';
 
@@ -19,6 +19,7 @@ class Store {
   @observable ext1Visible = false;
   @observable ext2Visible = false;
   @observable approveVisible = false;
+  @observable rbVisible = false;
 
   @observable f_status = 'all';
   @observable f_app_id;
@@ -26,6 +27,24 @@ class Store {
   @observable f_s_date;
   @observable f_e_date;
 
+  @computed get dataSource() {
+    let data = this.records;
+    if (this.f_app_id) data = data.filter(x => x.app_id === this.f_app_id)
+    if (this.f_env_id) data = data.filter(x => x.env_id === this.f_env_id)
+    if (this.f_s_date) data = data.filter(x => {
+        const date = x.created_at.substr(0, 10);
+        return date >= this.f_s_date && date <= this.f_e_date
+      })
+    if (this.f_status !== 'all') {
+      if (this.f_status === '99') {
+        data = data.filter(x => ['-1', '2'].includes(x.status))
+      } else {
+        data = data.filter(x => x.status === this.f_status)
+      }
+    }
+    return data
+  }
+
   fetchRecords = () => {
     this.isFetching = true;
     http.get('/api/deploy/request/')