89 lines
3.0 KiB
JavaScript
89 lines
3.0 KiB
JavaScript
import React from 'react';
|
|
import { Button, Icon } from 'antd';
|
|
import { WeaTools, WeaLocaleProvider, WeaDialog } from 'ecCom';
|
|
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
|
|
import './style/';
|
|
|
|
class WeaThemeLayout extends React.Component {
|
|
state = { visible: false, loading: false, layouts: [], curLayout: {} };
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.getButtons = this.getButtons.bind(this);
|
|
this.onOk = this.onOk.bind(this);
|
|
this.onCancel = this.onCancel.bind(this);
|
|
this.onChange = this.onChange.bind(this);
|
|
}
|
|
|
|
render() {
|
|
const { visible, loading, layouts = [], curLayout = {} } = this.state;
|
|
|
|
return (
|
|
<WeaDialog
|
|
visible={visible}
|
|
loading={loading}
|
|
title={getLabel(0, '布局选择')}
|
|
icon="icon-coms-plate"
|
|
iconBgcolor="#a7adb5"
|
|
style={{ width: 730, height: 400 }}
|
|
parentClassName="wea-theme-layout"
|
|
zIndex={100}
|
|
hasScroll={true}
|
|
buttons={this.getButtons()}
|
|
onCancel={this.onCancel}
|
|
>
|
|
<div className="wea-theme-layout-body">
|
|
{
|
|
layouts.map((layout) => {
|
|
const { key, type, name } = layout;
|
|
const isSelected = type == curLayout.type;
|
|
const selectedClassName = isSelected ? 'wea-theme-layout-selected' : '';
|
|
|
|
return (
|
|
<div key={key} className={`wea-theme-layout-item ${selectedClassName}`} title={name}>
|
|
<div className="wea-theme-layout-img" onClick={() => this.onChange(layout)}>
|
|
<img src={`/wui/theme/ecology9/image/layout/layout${key}.png`} alt="" />
|
|
</div>
|
|
<div className="wea-theme-layout-name">{name}</div>
|
|
{isSelected ? <Icon type="check-circle" className="wea-theme-layout-icon" /> : ''}
|
|
</div>
|
|
);
|
|
})
|
|
}
|
|
</div>
|
|
</WeaDialog>
|
|
);
|
|
}
|
|
|
|
getButtons() {
|
|
let buttons = [];
|
|
buttons.push(<Button type="primary" onClick={this.onCancel}>{getLabel(0, '关闭')}</Button>);
|
|
return buttons;
|
|
}
|
|
|
|
onOk() {
|
|
this.setState({ visible: false });
|
|
}
|
|
|
|
onCancel() {
|
|
this.setState({ visible: false });
|
|
}
|
|
|
|
onShow() {
|
|
this.setState({ visible: true, loading: true });
|
|
WeaTools.callApi('/api/portal/themeCenter/getAllLayouts', 'GET', {}).then((result) => {
|
|
const { data = {} } = result;
|
|
this.setState({ loading: false, ...data });
|
|
});
|
|
}
|
|
|
|
onChange(layout) {
|
|
this.setState({ curLayout: layout });
|
|
doThemeAction('onLayoutChange', layout);
|
|
}
|
|
}
|
|
|
|
export default WeaThemeLayout;
|