improve app list

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

@@ -15,46 +15,33 @@ import {
 } from '@ant-design/icons';
 import { Table, Modal, Tag, Divider, message } from 'antd';
 import { http, hasPermission } from 'libs';
-import store from './store';
 import { Action, TableCard, AuthButton } from "components";
 import CloneConfirm from './CloneConfirm';
+import store from './store';
 import envStore from 'pages/config/environment/store';
 import lds from 'lodash';
 
-@observer
+function ComTable() {
-class ComTable extends React.Component {
+  function handleClone(e, id) {
-  constructor(props) {
-    super(props);
-    this.cloneObj = null;
-  }
-
-  componentDidMount() {
-    store.fetchRecords();
-    if (envStore.records.length === 0) {
-      envStore.fetchRecords()
-    }
-  }
-
-  handleClone = (e, id) => {
     e.stopPropagation();
-    this.cloneObj = null;
+    let cloneObj = null;
     Modal.confirm({
       icon: <ExclamationCircleOutlined/>,
       title: '选择克隆对象',
-      content: <CloneConfirm onChange={v => this.cloneObj = v[1]}/>,
+      content: <CloneConfirm onChange={v => cloneObj = v[1]}/>,
       onOk: () => {
-        if (!this.cloneObj) {
+        if (!cloneObj) {
           message.error('请选择目标应用及环境')
           return Promise.reject()
         }
-        const info = JSON.parse(this.cloneObj);
+        const info = JSON.parse(cloneObj);
         info.env_id = undefined;
         store.showExtForm(null, id, info, true)
       },
     })
-  };
+  }
 
-  handleDelete = (e, text) => {
+  function handleDelete(e, text) {
     e.stopPropagation();
     Modal.confirm({
       title: '删除确认',
@@ -67,9 +54,9 @@ class ComTable extends React.Component {
           })
       }
     })
-  };
+  }
 
-  handleDeployDelete = (text) => {
+  function handleDeployDelete(text) {
     Modal.confirm({
       title: '删除确认',
       content: `删除发布配置将会影响基于该配置所创建发布申请的发布和回滚功能，确定要删除【${lds.get(envStore.idMap, `${text.env_id}.name`)}】的发布配置?`,
@@ -81,20 +68,22 @@ class ComTable extends React.Component {
           })
       }
     })
-  };
+  }
 
-  handleSort = (e, info, sort) => {
+  function handleSort(e, info, sort) {
     e.stopPropagation();
     store.fetching = true;
     http.patch('/api/app/', {id: info.id, sort})
       .then(store.fetchRecords, () => store.fetching = false)
-  };
+  }
 
-  expandedRowRender = (record) => {
+  function handleExpand(expanded, row) {
-    if (!record.isLoaded) {
+    if (expanded && !row.isLoaded) {
-      store.loadDeploys(record.id)
+      store.loadDeploys(row.id)
     }
+  }
 
+  function expandedRowRender(record) {
     return (
       <Table
         rowKey="id"
@@ -116,64 +105,62 @@ class ComTable extends React.Component {
                 onClick={e => store.showExtForm(e, record.id, info, false, true)}>查看</Action.Button>
               <Action.Button auth="deploy.app.edit"
                              onClick={e => store.showExtForm(e, record.id, info)}>编辑</Action.Button>
-              <Action.Button auth="deploy.app.edit" onClick={() => this.handleDeployDelete(info)}>删除</Action.Button>
+              <Action.Button auth="deploy.app.edit" onClick={() => handleDeployDelete(info)}>删除</Action.Button>
             </Action>
           )}/>
         )}
       </Table>
     )
-  };
-
-  render() {
-    return (
-      <TableCard
-        title="应用列表"
-        rowKey="id"
-        loading={store.isFetching}
-        dataSource={store.dataSource}
-        expandable={{expandRowByClick: true, expandedRowRender: this.expandedRowRender}}
-        onReload={store.fetchRecords}
-        actions={[
-          <AuthButton
-            auth="deploy.app.add"
-            type="primary"
-            icon={<PlusOutlined/>}
-            onClick={() => store.showForm()}>新建</AuthButton>
-        ]}
-        pagination={{
-          showSizeChanger: true,
-          showLessItems: true,
-          hideOnSinglePage: true,
-          showTotal: total => `共 ${total} 条`,
-          pageSizeOptions: ['10', '20', '50', '100']
-        }}>
-        <Table.Column width={80} title="排序" key="series" render={(info) => (
-          <div>
-            <UpSquareOutlined
-              onClick={e => this.handleSort(e, info, 'up')}
-              style={{cursor: 'pointer', color: '#1890ff'}}/>
-            <Divider type="vertical"/>
-            <DownSquareOutlined
-              onClick={e => this.handleSort(e, info, 'down')}
-              style={{cursor: 'pointer', color: '#1890ff'}}/>
-          </div>
-        )}/>
-        <Table.Column title="应用名称" dataIndex="name"/>
-        <Table.Column title="标识符" dataIndex="key"/>
-        <Table.Column ellipsis title="描述信息" dataIndex="desc"/>
-        {hasPermission('deploy.app.edit|deploy.app.del') && (
-          <Table.Column width={260} title="操作" render={info => (
-            <Action>
-              <Action.Button auth="deploy.app.edit" onClick={e => store.showExtForm(e, info.id)}>新建发布</Action.Button>
-              <Action.Button auth="deploy.app.edit" onClick={e => this.handleClone(e, info.id)}>克隆发布</Action.Button>
-              <Action.Button auth="deploy.app.edit" onClick={e => store.showForm(e, info)}>编辑</Action.Button>
-              <Action.Button auth="deploy.app.del" onClick={e => this.handleDelete(e, info)}>删除</Action.Button>
-            </Action>
-          )}/>
-        )}
-      </TableCard>
-    )
   }
+
+  return (
+    <TableCard
+      title="应用列表"
+      rowKey="id"
+      loading={store.isFetching}
+      dataSource={store.dataSource}
+      expandable={{expandedRowRender, expandRowByClick: true, onExpand: handleExpand}}
+      onReload={store.fetchRecords}
+      actions={[
+        <AuthButton
+          auth="deploy.app.add"
+          type="primary"
+          icon={<PlusOutlined/>}
+          onClick={() => store.showForm()}>新建</AuthButton>
+      ]}
+      pagination={{
+        showSizeChanger: true,
+        showLessItems: true,
+        hideOnSinglePage: true,
+        showTotal: total => `共 ${total} 条`,
+        pageSizeOptions: ['10', '20', '50', '100']
+      }}>
+      <Table.Column width={80} title="排序" key="series" render={(info) => (
+        <div>
+          <UpSquareOutlined
+            onClick={e => handleSort(e, info, 'up')}
+            style={{cursor: 'pointer', color: '#1890ff'}}/>
+          <Divider type="vertical"/>
+          <DownSquareOutlined
+            onClick={e => handleSort(e, info, 'down')}
+            style={{cursor: 'pointer', color: '#1890ff'}}/>
+        </div>
+      )}/>
+      <Table.Column title="应用名称" dataIndex="name"/>
+      <Table.Column title="标识符" dataIndex="key"/>
+      <Table.Column ellipsis title="描述信息" dataIndex="desc"/>
+      {hasPermission('deploy.app.edit|deploy.app.del') && (
+        <Table.Column width={260} title="操作" render={info => (
+          <Action>
+            <Action.Button auth="deploy.app.edit" onClick={e => store.showExtForm(e, info.id)}>新建发布</Action.Button>
+            <Action.Button auth="deploy.app.edit" onClick={e => handleClone(e, info.id)}>克隆发布</Action.Button>
+            <Action.Button auth="deploy.app.edit" onClick={e => store.showForm(e, info)}>编辑</Action.Button>
+            <Action.Button auth="deploy.app.del" onClick={e => handleDelete(e, info)}>删除</Action.Button>
+          </Action>
+        )}/>
+      )}
+    </TableCard>
+  )
 }
 
-export default ComTable
+export default observer(ComTable)

spug_web/src/pages/deploy/app/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, { useEffect } from 'react';
 import { observer } from 'mobx-react';
 import { Input } from 'antd';
 import { SearchForm, AuthDiv, Breadcrumb } from 'components';
@@ -13,8 +13,15 @@ import Ext1Form from './Ext1Form';
 import Ext2Form from './Ext2Form';
 import AddSelect from './AddSelect';
 import store from './store';
+import envStore from 'pages/config/environment/store';
 
 export default observer(function () {
+  useEffect(() => {
+    store.fetchRecords();
+    if (envStore.records.length === 0) {
+      envStore.fetchRecords()
+    }
+  }, [])
   return (
     <AuthDiv auth="deploy.app.view">
       <Breadcrumb>

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

@@ -5,6 +5,7 @@
  */
 import { observable, computed, toJS } from 'mobx';
 import http from 'libs/http';
+import lds from 'lodash';
 
 class Store {
   @observable records = {};
@@ -40,6 +41,7 @@ class Store {
       .then(res => {
         const tmp = {};
         for (let item of res) {
+          Object.assign(item, lds.pick(this.records[`a${item.id}`], ['isLoaded', 'deploys']));
           tmp[`a${item.id}`] = item
         }
         this.records = tmp