github
/
spug
mirror of https://github.com/openspug/spug
1
0
Fork 0
Code Issues Releases Wiki Activity

U 优化创建发布申请应用名称过长时气泡显示完整名称

pull/59/head
vapao 2020-04-03 17:55:57 +08:00
parent b5e3e0121c
commit 18ce12667c
2 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
spug_web/src/pages/deploy/request/SelectApp.js
View File

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

1
spug_web/src/pages/deploy/request/store.js
View File

@ -11,6 +11,7 @@ class Store {
@observable deploys = []; @observable deploys = [];
@observable types = []; @observable types = [];
@observable record = {}; @observable record = {};
@observable refs = {};
@observable isLoading = false; @observable isLoading = false;
@observable isFetching = false; @observable isFetching = false;
@observable addVisible = false; @observable addVisible = false;