From 633cd9c4980adcdd649a8c3d64be875899263c8c Mon Sep 17 00:00:00 2001
From: vapao <live1989@foxmail.com>
Date: Mon, 8 Mar 2021 12:46:58 +0800
Subject: [PATCH] improve app list

---
 spug_web/src/pages/deploy/app/Table.js | 153 +++++++++++--------------
 spug_web/src/pages/deploy/app/index.js |   9 +-
 spug_web/src/pages/deploy/app/store.js |   2 +
 3 files changed, 80 insertions(+), 84 deletions(-)

diff --git a/spug_web/src/pages/deploy/app/Table.js b/spug_web/src/pages/deploy/app/Table.js
index d7b8a09..4877081 100644
--- a/spug_web/src/pages/deploy/app/Table.js
+++ b/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
-class ComTable extends React.Component {
-  constructor(props) {
-    super(props);
-    this.cloneObj = null;
-  }
-
-  componentDidMount() {
-    store.fetchRecords();
-    if (envStore.records.length === 0) {
-      envStore.fetchRecords()
-    }
-  }
-
-  handleClone = (e, id) => {
+function ComTable() {
+  function 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) => {
-    if (!record.isLoaded) {
-      store.loadDeploys(record.id)
+  function handleExpand(expanded, row) {
+    if (expanded && !row.isLoaded) {
+      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)
diff --git a/spug_web/src/pages/deploy/app/index.js b/spug_web/src/pages/deploy/app/index.js
index 3c66ebc..9c0d193 100644
--- a/spug_web/src/pages/deploy/app/index.js
+++ b/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>
diff --git a/spug_web/src/pages/deploy/app/store.js b/spug_web/src/pages/deploy/app/store.js
index 6c84051..96ce5e3 100644
--- a/spug_web/src/pages/deploy/app/store.js
+++ b/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