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,59 +176,37 @@ class ComTable extends React.Component {
 
   }
 
-  render() {
+  return (
-    let data = store.records;
+    <TableCard
-    if (store.f_app_id) {
+      rowKey="id"
-      data = data.filter(item => item['app_id'] === store.f_app_id)
+      title="申请列表"
-    }
+      columns={columns}
-    if (store.f_env_id) {
+      loading={store.isFetching}
-      data = data.filter(item => item['env_id'] === store.f_env_id)
+      dataSource={store.dataSource}
-    }
+      onReload={store.fetchRecords}
-    if (store.f_s_date) {
+      actions={[
-      data = data.filter(item => {
+        <AuthButton
-        const date = item['created_at'].substr(0, 10);
+          auth="deploy.request.add"
-        return date >= store.f_s_date && date <= store.f_e_date
+          type="primary"
-      })
+          icon={<PlusOutlined/>}
-    }
+          onClick={() => store.addVisible = true}>新建申请</AuthButton>,
-    if (store.f_status !== 'all') {
+        <Radio.Group value={store.f_status} onChange={e => store.f_status = e.target.value}>
-      if (store.f_status === '99') {
+          <Radio.Button value="all">全部({store.counter['all'] || 0})</Radio.Button>
-        data = data.filter(item => ['-1', '2'].includes(item['status']))
+          <Radio.Button value="0">待审核({store.counter['0'] || 0})</Radio.Button>
-      } else {
+          <Radio.Button value="1">待发布({store.counter['1'] || 0})</Radio.Button>
-        data = data.filter(item => item['status'] === store.f_status)
+          <Radio.Button value="3">发布成功({store.counter['3'] || 0})</Radio.Button>
-      }
+          <Radio.Button value="-3">发布异常({store.counter['-3'] || 0})</Radio.Button>
-    }
+          <Radio.Button value="99">其他({store.counter['99'] || 0})</Radio.Button>
-    return (
+        </Radio.Group>
-      <TableCard
+      ]}
-        rowKey="id"
+      pagination={{
-        title="申请列表"
+        showSizeChanger: true,
-        loading={store.isFetching}
+        showLessItems: true,
-        dataSource={data}
+        hideOnSinglePage: true,
-        onReload={store.fetchRecords}
+        showTotal: total => `共 ${total} 条`,
-        actions={[
+        pageSizeOptions: ['10', '20', '50', '100']
-          <AuthButton
+      }}/>
-            auth="deploy.request.add"
+  )
-            type="primary"
-            icon={<PlusOutlined/>}
-            onClick={() => store.addVisible = true}>新建申请</AuthButton>,
-          <Radio.Group value={store.f_status} onChange={e => store.f_status = e.target.value}>
-            <Radio.Button value="all">全部({store.counter['all'] || 0})</Radio.Button>
-            <Radio.Button value="0">待审核({store.counter['0'] || 0})</Radio.Button>
-            <Radio.Button value="1">待发布({store.counter['1'] || 0})</Radio.Button>
-            <Radio.Button value="3">发布成功({store.counter['3'] || 0})</Radio.Button>
-            <Radio.Button value="-3">发布异常({store.counter['-3'] || 0})</Radio.Button>
-            <Radio.Button value="99">其他({store.counter['99'] || 0})</Radio.Button>
-          </Radio.Group>
-        ]}
-        pagination={{
-          showSizeChanger: true,
-          showLessItems: true,
-          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,77 +54,75 @@ class Index extends React.Component {
           })
       },
     })
-  };
-
-  render() {
-    return (
-      <AuthDiv auth="deploy.request.view">
-        <Breadcrumb>
-          <Breadcrumb.Item>首页</Breadcrumb.Item>
-          <Breadcrumb.Item>应用发布</Breadcrumb.Item>
-          <Breadcrumb.Item>发布申请</Breadcrumb.Item>
-        </Breadcrumb>
-        <SearchForm>
-          <SearchForm.Item span={6} title="发布环境">
-            <Select
-              allowClear
-              showSearch
-              value={store.f_env_id}
-              filterOption={(i, o) => includes(o.children, i)}
-              onChange={v => store.f_env_id = v}
-              placeholder="请选择">
-              {envStore.records.map(item => (
-                <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
-              ))}
-            </Select>
-          </SearchForm.Item>
-          <SearchForm.Item span={6} title="应用名称">
-            <Select
-              allowClear
-              showSearch
-              value={store.f_app_id}
-              filterOption={(i, o) => includes(o.children, i)}
-              onChange={v => store.f_app_id = v}
-              placeholder="请选择">
-              {appStore.records.map(item => (
-                <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
-              ))}
-            </Select>
-          </SearchForm.Item>
-          <SearchForm.Item span={8} title="申请时间">
-            <DatePicker.RangePicker
-              value={store.f_s_date ? [moment(store.f_s_date), moment(store.f_e_date)] : undefined}
-              onChange={store.updateDate}/>
-          </SearchForm.Item>
-          <SearchForm.Item span={4} style={{textAlign: 'right'}}>
-            <AuthButton
-              auth="deploy.request.del"
-              type="danger"
-              icon={<DeleteOutlined/>}
-              onClick={this.handleBatchDel}>批量删除</AuthButton>
-          </SearchForm.Item>
-        </SearchForm>
-        <ComTable/>
-        <AppSelector
-          visible={store.addVisible}
-          onCancel={() => store.addVisible = false}
-          onSelect={store.confirmAdd}/>
-        {store.ext1Visible && <Ext1Form/>}
-        {store.ext2Visible && <Ext2Form/>}
-        {store.approveVisible && <Approve/>}
-        {store.tabs.length > 0 && (
-          <Row gutter={12} className={styles.miniConsole}>
-            {store.tabs.map(item => (
-              <Col key={item.id}>
-                <Ext1Console request={item}/>
-              </Col>
-            ))}
-          </Row>
-        )}
-        <div ref={el => store.box = el} id='floatBox' className={styles.floatBox}/>
-      </AuthDiv>
-    )
   }
+
+  return (
+    <AuthDiv auth="deploy.request.view">
+      <Breadcrumb>
+        <Breadcrumb.Item>首页</Breadcrumb.Item>
+        <Breadcrumb.Item>应用发布</Breadcrumb.Item>
+        <Breadcrumb.Item>发布申请</Breadcrumb.Item>
+      </Breadcrumb>
+      <SearchForm>
+        <SearchForm.Item span={6} title="发布环境">
+          <Select
+            allowClear
+            showSearch
+            value={store.f_env_id}
+            filterOption={(i, o) => includes(o.children, i)}
+            onChange={v => store.f_env_id = v}
+            placeholder="请选择">
+            {envStore.records.map(item => (
+              <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
+            ))}
+          </Select>
+        </SearchForm.Item>
+        <SearchForm.Item span={6} title="应用名称">
+          <Select
+            allowClear
+            showSearch
+            value={store.f_app_id}
+            filterOption={(i, o) => includes(o.children, i)}
+            onChange={v => store.f_app_id = v}
+            placeholder="请选择">
+            {appStore.records.map(item => (
+              <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>
+            ))}
+          </Select>
+        </SearchForm.Item>
+        <SearchForm.Item span={8} title="申请时间">
+          <DatePicker.RangePicker
+            value={store.f_s_date ? [moment(store.f_s_date), moment(store.f_e_date)] : undefined}
+            onChange={store.updateDate}/>
+        </SearchForm.Item>
+        <SearchForm.Item span={4} style={{textAlign: 'right'}}>
+          <AuthButton
+            auth="deploy.request.del"
+            type="danger"
+            icon={<DeleteOutlined/>}
+            onClick={handleBatchDel}>批量删除</AuthButton>
+        </SearchForm.Item>
+      </SearchForm>
+      <ComTable/>
+      <AppSelector
+        visible={store.addVisible}
+        onCancel={() => store.addVisible = false}
+        onSelect={store.confirmAdd}/>
+      {store.ext1Visible && <Ext1Form/>}
+      {store.ext2Visible && <Ext2Form/>}
+      {store.approveVisible && <Approve/>}
+      {store.tabs.length > 0 && (
+        <Row gutter={12} className={styles.miniConsole}>
+          {store.tabs.map(item => (
+            <Col key={item.id}>
+              <Ext1Console request={item}/>
+            </Col>
+          ))}
+        </Row>
+      )}
+      <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/')