137 lines
3.0 KiB
JavaScript
137 lines
3.0 KiB
JavaScript
import React from "react";
|
||
import { WeaReqTop,WeaDialog } from "ecCom";
|
||
import { Button } from "antd";
|
||
|
||
export default class SysConfig extends React.Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
visible:false,
|
||
title: "WeaReqTop",
|
||
icon: <i className="icon-portal-workflow"/>,
|
||
iconBgcolor: "lightblue",
|
||
loading: false,
|
||
selectedKey: "main",
|
||
selectArray: [
|
||
{ key: 200, selected: true, showname: "200" },
|
||
{ key: 100, selected: false, showname: "100" }
|
||
],
|
||
childComCont: "子组件内容"
|
||
};
|
||
}
|
||
|
||
render() {
|
||
const {
|
||
title,
|
||
icon,
|
||
iconBgcolor,
|
||
loading,
|
||
selectedKey,
|
||
selectArray,
|
||
childComCont,
|
||
visible
|
||
} = this.state;
|
||
const btns = [
|
||
<Button type="primary" disabled={true} onClick={() => this.dosubmit()}>
|
||
提交（禁用）
|
||
</Button>,
|
||
<Button type="glost" disabled={false} onClick={() => this.dosubmit()}>
|
||
提交
|
||
</Button>
|
||
];
|
||
const dropMenuDatas = [
|
||
{
|
||
key: 1,
|
||
disabled: loading,
|
||
icon: <i className="icon-search"/>,
|
||
content: "搜索"
|
||
}
|
||
];
|
||
const tabs = [
|
||
{
|
||
key: "main",
|
||
title: "主页"
|
||
},
|
||
{
|
||
key: "detail",
|
||
title: "详情"
|
||
},
|
||
{
|
||
key: "detail1",
|
||
title: "详情1"
|
||
},
|
||
{
|
||
key: "detail2",
|
||
title: "详情2"
|
||
},
|
||
{
|
||
key: "detail3",
|
||
title: "详情3"
|
||
},
|
||
{
|
||
key: "detail4",
|
||
title: "详情4"
|
||
},
|
||
{
|
||
key: "detail5",
|
||
title: "详情5"
|
||
},
|
||
{
|
||
key: "detail6",
|
||
title: "详情6"
|
||
},
|
||
{
|
||
key: "detail7",
|
||
title: "详情7"
|
||
},
|
||
{
|
||
key: "detail8",
|
||
title: "详情8"
|
||
}
|
||
];
|
||
return (
|
||
<div className="wea-top-demo">
|
||
<Button type="glost" onClick={() => this.setState({ visible: true })}>
|
||
点击
|
||
</Button>
|
||
<WeaDialog
|
||
onCancel={() => this.setState({ visible: false })}
|
||
visible={visible}
|
||
style={{ width: 800, height: 600 }}
|
||
hasScroll
|
||
>
|
||
<WeaReqTop
|
||
title={title}
|
||
icon={icon}
|
||
iconBgcolor={iconBgcolor}
|
||
loading={loading}
|
||
buttons={btns}
|
||
buttonSpace={10}
|
||
showDropIcon={true}
|
||
dropMenuDatas={dropMenuDatas}
|
||
onDropMenuClick={this.onDropMenuClick}
|
||
tabDatas={tabs}
|
||
selectedKey={selectedKey}
|
||
onChange={key => {
|
||
this.setState({
|
||
selectedKey: key,
|
||
childComCont: "你选择了 " + key + " tab页"
|
||
});
|
||
}}
|
||
>
|
||
<div style={{ height: 2000, background: "#fff" }}>{childComCont}</div>
|
||
</WeaReqTop>
|
||
</WeaDialog>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
onDropMenuClick(key) {
|
||
console.log(`点击了下拉菜单的第${key}项`);
|
||
}
|
||
|
||
dosubmit() {
|
||
console.log("点击了提交");
|
||
}
|
||
}
|