/**
* Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
* Copyright (c) <spug.dev@gmail.com>
* Released under the AGPL-3.0 License.
*/
import React from ‘react‘;
import { Link } from ‘react-router-dom‘;
import { observer } from ‘mobx-react‘;
import { Modal, Button, Menu, Spin, Icon, Input, Tree } from ‘antd‘;
import store from ‘./store‘;
import styles from ‘./index.module.css‘;
import envStore from ‘pages/config/environment/store‘;
import lds from ‘lodash‘;
const TreeNode = Tree.TreeNode;
/*
const x = 5;//递归n个子类
const y = 5;//递归处理每层前n个目录
const z = 0;//n层目录
const gData = [];
const treeData = [
{
key: "aaaa",
title: "aaaaa",
children: [
{
key: ‘1‘,
title: "mall-all"
}
]
},
{
key: "本地测试",
title: "本地测试",
children: [
{
key: ‘6‘,
title: "test4"
},
{
key: ‘5‘,
title: "test3"
},
{
key: ‘4‘,
title: "test2"
},
{
key: ‘3‘,
title: "test1"
}
]
}
]
const treeData = [];
const generateData = (_level, _preKey, _tns) => {
const preKey = _preKey || ‘0‘;
const tns = _tns || gData;
const children = [];
for (let i = 0; i < x; i++) {
const key = `${preKey}-${i}`;
tns.push({ title: key, key });
if (i < y) {
children.push(key);
}
}
if (_level < 0) {
return tns;
}
const level = _level - 1;
children.forEach((key, index) => {
tns[index].children = [];
return generateData(level, key, tns[index].children);
});
};
generateData(z);
const dataList = [];
const generateList = (data) => {
for (let i = 0; i < data.length; i++) {
const node = data[i];
const key = node.key;
dataList.push({ key, title: key });
if (node.children) {
generateList(node.children);
}
}
};
generateList(treeData);
*/
@observer
class SelectApp extends React.Component {
constructor(props) {
super(props);
this.state = {
env_id: 0,
search: ‘‘,
expandedKeys: [],
searchValue: ‘‘,
autoExpandParent: true,
treeData: [],
dataList: [],
}
}
componentDidMount() {
store.loadDeploys()
if (envStore.records.length === 0) {
envStore.fetchRecords().then(this._initEnv)
} else {
this._initEnv()
}
}
componentWillUnmount() {
store.refs = {}
}
_initEnv = () => {
if (envStore.records.length) {
this.setState({ env_id: envStore.records[0].id })
}
};
handleClick = (deploy) => {
store.record = { deploy_id: deploy.id, app_host_ids: deploy.host_ids };
if ([‘1‘, ‘3‘].includes(deploy.extend)) {
store.ext1Visible = true
} else {
store.ext2Visible = true
}
store.addVisible = false
};
handleRef = (el, id) => {
if (el && !store.refs.hasOwnProperty(id)) {
setTimeout(() => store.refs[id] = el.scrollWidth > el.clientWidth, 200)
}
};
generateList = () => {
const data = store.deploys
//console.log(data)
//this.setState({treeData:data})
for (let i = 0; i < data.length; i++) {
const node = data[i];
const key = node.key;
this.state.dataList.push({ key, title: key });
if (node.children) {
this.generateList(node.children);
}
}
};
getParentKey = (key, tree) => {
let parentKey;
for (let i = 0; i < tree.length; i++) {
const node = tree[i];
if (node.children) {
if (node.children.some(item => item.key === key)) {
parentKey = node.key;
} else if (this.getParentKey(key, node.children)) {
parentKey = this.getParentKey(key, node.children);
}
}
}
return parentKey;
};
onExpand = (expandedKeys) => {
this.setState({
expandedKeys,
autoExpandParent: false,
});
}
onChange = (e) => {
const value = e.target.value;
const treeData = store.deploys;
const dataList = store.deploys;
const expandedKeys = dataList.map((item) => {
if (item.key.indexOf(value) > -1) {
return this.getParentKey(item.key, treeData);
}
return null;
}).filter((item, i, self) => item && self.indexOf(item) === i);
this.setState({
expandedKeys,
searchValue: value,
autoExpandParent: true,
});
};
renderTreeNode = data => data.map((item) => {
const { searchValue } = this.state;
const index = item.key.indexOf(searchValue);
const beforeStr = item.key.substr(0, index);
const afterStr = item.key.substr(index + searchValue.length);
const title = index > -1 ? (
<span>
{beforeStr}
<span style={{ color: ‘#f50‘ }}>{searchValue}</span>
{afterStr}
</span>
) : <span>{item.key}</span>;
if (item.children) {
return (
<TreeNode key={item.key} title={title}>
{this.renderTreeNode(item.children)}
</TreeNode>
);
}
return <TreeNode key={item.key} title={title} />;
});
render() {
//console.log(JSON.stringify(store.deploys))
const { env_id } = this.state;
//this.state.treeData= treeData;
//this.setState({gData:treeData})
//console.log(store.deploys)
const treeData = store.deploys;
/*if (this.state.search) {
records = records.filter(x => x[‘app_name‘].toLowerCase().includes(this.state.search.toLowerCase()))
}*/
const { expandedKeys, autoExpandParent } = this.state;
return (
<Modal
visible
width={800}
maskClosable={false}
title="选择应用"
bodyStyle={{ padding: 0 }}
onCancel={() => store.addVisible = false}
footer={null}>
<div className={styles.container}>
<div className={styles.left}>
<Spin spinning={envStore.isFetching}>
<Menu
mode="inline"
selectedKeys={[String(env_id)]}
style={{ border: ‘none‘ }}
onSelect={({ selectedKeys }) => this.setState({ env_id: selectedKeys[0] })}>
{envStore.records.map(item => <Menu.Item key={item.id}>{item.name}</Menu.Item>)}
</Menu>
</Spin>
</div>
<div className={styles.right}>
<Spin spinning={store.isLoading}>
<Input.Search style={{ marginBottom: 8 }} placeholder="Search" onChange={this.onChange} />
<Tree
onExpand={this.onExpand}
expandedKeys={expandedKeys}
autoExpandParent={autoExpandParent}
>
{this.renderTreeNode(treeData)}
</Tree>
</Spin>
</div>
</div >
</Modal >
)
}
}
export default SelectApp
