99 lines
3.8 KiB
JavaScript
99 lines
3.8 KiB
JavaScript
import React from 'react';
|
|
import { Button, Icon } from 'antd';
|
|
import { WeaTools, WeaLocaleProvider, WeaDialog } from 'ecCom';
|
|
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
|
|
import './style/';
|
|
import { addContentPath } from '../util/pathUtil';
|
|
|
|
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 ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@n5me39`}
|
|
visible={visible}
|
|
loading={loading}
|
|
title={getLabel(385781, '布局选择')}
|
|
icon="icon-coms-plate"
|
|
iconBgcolor="#a7adb5"
|
|
style={{ width: 730 }}
|
|
parentClassName="wea-theme-layout"
|
|
zIndex={100}
|
|
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={addContentPath(`/wui/theme/ecology9/image/layout/layout${key}.png`)} alt="" />
|
|
</div>
|
|
<div className="wea-theme-layout-name">{name}</div>
|
|
{isSelected ? <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@c42ca7@${key}`} type="check-circle" className="wea-theme-layout-icon" /> : ''}
|
|
</div>
|
|
);
|
|
})
|
|
}
|
|
</div>
|
|
</WeaDialog>
|
|
);
|
|
}
|
|
|
|
onShow(isSetting = false, curLayout = {}) {
|
|
this.setState({ visible: true, loading: true, isSetting });
|
|
WeaTools.callApi('/api/portal/themeCenter/getAllLayouts', 'GET', {}).then((result) => {
|
|
const { data = {} } = result;
|
|
if (isSetting) {
|
|
this.setState({ loading: false, ...data, curLayout });
|
|
} else {
|
|
this.setState({ loading: false, ...data });
|
|
}
|
|
});
|
|
}
|
|
|
|
getButtons() {
|
|
const { isSetting } = this.state;
|
|
|
|
let buttons = [];
|
|
isSetting && buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@j2j1pd`} type="primary" onClick={this.onOk}>{getLabel(83446, '确定')}</Button>);
|
|
buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@69xb1d`} type="primary" onClick={this.onCancel}>{getLabel(309, '关闭')}</Button>);
|
|
return buttons;
|
|
}
|
|
|
|
onOk() {
|
|
const { curLayout } = this.state;
|
|
this.props.onChange(curLayout);
|
|
this.setState({ visible: false });
|
|
}
|
|
|
|
onCancel() {
|
|
this.setState({ visible: false });
|
|
}
|
|
|
|
onChange(layout) {
|
|
const { isSetting } = this.state;
|
|
this.setState({ curLayout: layout });
|
|
!isSetting && doThemeAction('onLayoutChange', layout);
|
|
}
|
|
}
|
|
|
|
export default WeaThemeLayout;
|