From 18ce12667c39e1ee9090760aa4c97458834b68f8 Mon Sep 17 00:00:00 2001
From: vapao <live1989@foxmail.com>
Date: Fri, 3 Apr 2020 17:55:57 +0800
Subject: [PATCH] =?UTF-8?q?U=20=E4=BC=98=E5=8C=96=E5=88=9B=E5=BB=BA?=
 =?UTF-8?q?=E5=8F=91=E5=B8=83=E7=94=B3=E8=AF=B7=E5=BA=94=E7=94=A8=E5=90=8D?=
 =?UTF-8?q?=E7=A7=B0=E8=BF=87=E9=95=BF=E6=97=B6=E6=B0=94=E6=B3=A1=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E5=AE=8C=E6=95=B4=E5=90=8D=E7=A7=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/deploy/request/SelectApp.js     | 27 ++++++++++++++-----
 spug_web/src/pages/deploy/request/store.js    |  1 +
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/spug_web/src/pages/deploy/request/SelectApp.js b/spug_web/src/pages/deploy/request/SelectApp.js
index 9508aec..73767ab 100644
--- a/spug_web/src/pages/deploy/request/SelectApp.js
+++ b/spug_web/src/pages/deploy/request/SelectApp.js
@@ -6,7 +6,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { observer } from 'mobx-react';
-import { Modal, Button, Menu, Spin, Icon } from 'antd';
+import { Modal, Button, Menu, Spin, Icon, Tooltip } from 'antd';
 import store from './store';
 import styles from './index.module.css';
 import envStore from 'pages/config/environment/store';
@@ -30,6 +30,10 @@ class SelectApp extends React.Component {
     }
   }
 
+  componentWillUnmount() {
+    store.refs = {}
+  }
+
   _initEnv = () => {
     if (envStore.records.length) {
       this.setState({env_id: envStore.records[0].id})
@@ -46,6 +50,12 @@ class SelectApp extends React.Component {
     store.addVisible = false
   };
 
+  handleRef = (el, id) => {
+    if (el && !store.refs.hasOwnProperty(id)) {
+      setTimeout(() => store.refs[id] = el.scrollWidth > el.clientWidth, 200)
+    }
+  };
+
   render() {
     const {env_id} = this.state;
     const records = store.deploys.filter(x => x.env_id === Number(env_id));
@@ -75,12 +85,15 @@ class SelectApp extends React.Component {
             <Spin spinning={store.isLoading}>
               <div className={styles.title}>{lds.get(envStore.idMap, `${env_id}.name`)}</div>
               {records.map(item => (
-                <Button key={item.id} type="primary" className={styles.appBlock} onClick={() => this.handleClick(item)}>
-                  <div style={{width: 135, overflow: 'hidden', textOverflow: 'ellipsis'}}>
-                    <Icon type={item.extend === '1' ? 'ordered-list' : 'build'}
-                          style={{marginRight: 10}}/>{item['app_name']}
-                  </div>
-                </Button>
+                <Tooltip key={item.id} title={store.refs[item.id] ? item['app_name'] : null}>
+                  <Button type="primary" className={styles.appBlock} onClick={() => this.handleClick(item)}>
+                    <div ref={el => this.handleRef(el, item.id)}
+                         style={{width: 135, overflow: 'hidden', textOverflow: 'ellipsis'}}>
+                      <Icon type={item.extend === '1' ? 'ordered-list' : 'build'}
+                            style={{marginRight: 10}}/>{item['app_name']}
+                    </div>
+                  </Button>
+                </Tooltip>
               ))}
               {records.length === 0 &&
               <div className={styles.tips}>该环境下还没有可发布的应用哦，快去<Link to="/deploy/app">应用管理</Link>创建应用发布配置吧。</div>}
diff --git a/spug_web/src/pages/deploy/request/store.js b/spug_web/src/pages/deploy/request/store.js
index a709d50..e95696a 100644
--- a/spug_web/src/pages/deploy/request/store.js
+++ b/spug_web/src/pages/deploy/request/store.js
@@ -11,6 +11,7 @@ class Store {
   @observable deploys = [];
   @observable types = [];
   @observable record = {};
+  @observable refs = {};
   @observable isLoading = false;
   @observable isFetching = false;
   @observable addVisible = false;