207 lines
9.6 KiB
JavaScript
207 lines
9.6 KiB
JavaScript
import React from 'react';
|
|
import { Button, Icon, Tabs, Modal } from 'antd';
|
|
import { WeaTools, WeaLocaleProvider, WeaDialog, WeaNewScroll } from 'ecCom';
|
|
|
|
const TabPane = Tabs.TabPane;
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
const E8_SYS_COLORS = ['#0070c1', '#cc3432', '#5c64c2', '#50833b', '#874d19', '#f46f43', '#22c9b2', '#b24079', '#83686c', '#666f81', '#627f7e'];
|
|
|
|
import './style/';
|
|
|
|
class WeaThemeCenter extends React.Component {
|
|
state = { visible: false, loading: false, tabKey: '', tabKey2: '', themes: [], curTheme: {}, hasRight: false };
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.getButtons = this.getButtons.bind(this);
|
|
this.onOk = this.onOk.bind(this);
|
|
this.onCancel = this.onCancel.bind(this);
|
|
this.onSetting = this.onSetting.bind(this);
|
|
this.onThemeChange = this.onThemeChange.bind(this);
|
|
this.onColorChange = this.onColorChange.bind(this);
|
|
}
|
|
|
|
render() {
|
|
const { visible, loading, tabKey, tabKey2, themes = [], curTheme = {}, hasRight } = this.state;
|
|
const { type: type_cur, templateid: templateid_cur, templatetype: templatetype_cur, skin: skin_cur, color: color_cur, layout: layout_cur } = curTheme;
|
|
|
|
const themeTabPaneComp = (
|
|
<TabPane tab={getLabel(0, '主题')} key="1">
|
|
<Tabs type="card" activeKey={tabKey2} onChange={key => this.setState({ tabKey2: key })}>
|
|
{
|
|
themes.map((themeType) => {
|
|
const { key, name, data = [] } = themeType;
|
|
|
|
return (
|
|
<TabPane tab={name} key={key}>
|
|
<WeaNewScroll height={327}>
|
|
<div className="wea-theme-center-items">
|
|
{
|
|
data.map((theme, index) => {
|
|
const { type, templateid, templatetype, skin, layout } = theme;
|
|
|
|
let previewComp = '';
|
|
if (key == 'ecology8') {
|
|
previewComp = <div className="wea-theme-center-preview" dangerouslySetInnerHTML={{ __html: theme.preview }} />;
|
|
} else {
|
|
previewComp = <div className="wea-theme-center-preview"><img src={theme.preview} alt={theme.name} /></div>;
|
|
}
|
|
|
|
let selectedComp = '';
|
|
if (type == type_cur && ((templateid == templateid_cur && templatetype == templatetype_cur && skin == skin_cur) || (layout == '5' && layout == layout_cur))) {
|
|
selectedComp = <img src="/wui/theme/ecology9/image/colors/selected.png" alt="" className="wea-theme-center-selected" />;
|
|
}
|
|
|
|
return (
|
|
<div key={index} className="wea-theme-center-item" onClick={() => this.onThemeChange(theme)}>
|
|
{previewComp}
|
|
<div className="wea-theme-center-title" title={theme.name}>{theme.name}</div>
|
|
{selectedComp}
|
|
</div>
|
|
);
|
|
})
|
|
}
|
|
</div>
|
|
</WeaNewScroll>
|
|
</TabPane>
|
|
);
|
|
})
|
|
}
|
|
</Tabs>
|
|
</TabPane>
|
|
);
|
|
|
|
let tabComp = <div />;
|
|
const operationComp = hasRight ? <Button type="primary" size="small" style={{ margin: '0 18px 5px', borderRadius: '2px' }} onClick={this.onSetting}>{getLabel(0, '管理')}</Button> : '';
|
|
if (templatetype_cur == 'ecology8') {
|
|
let colorImg = '';
|
|
let colorSelectedStyle = {};
|
|
if (color_cur) {
|
|
const _color = color_cur.replace(/[^0-9]/ig, '');
|
|
const _index = _color == '' ? 0 : parseInt(_color);
|
|
colorImg = `/wui/theme/ecology8/page/images/skin/color${_color}_wev8.png`;
|
|
colorSelectedStyle = { display: 'block', left: 50 * _index + 41, backgroundColor: E8_SYS_COLORS[_index] };
|
|
}
|
|
|
|
const colorTabPaneComp = (
|
|
<TabPane tab={getLabel(0, '颜色')} key="2">
|
|
<div className="wea-theme-center-color-preview">
|
|
<div className="wea-theme-center-color-img" style={{ background: `url(${colorImg})` }} />
|
|
</div>
|
|
<div className="wea-theme-center-colors">
|
|
<div className="wea-theme-center-color-selected" style={colorSelectedStyle} />
|
|
{
|
|
E8_SYS_COLORS.map((item, index) => (
|
|
<div key={index}
|
|
className="wea-theme-center-color"
|
|
style={{ backgroundColor: item }}
|
|
data-index={index == 0 ? '' : index}
|
|
onClick={this.onColorChange}
|
|
/>
|
|
))
|
|
}
|
|
</div>
|
|
</TabPane>
|
|
);
|
|
|
|
tabComp = (
|
|
<Tabs activeKey={tabKey} onChange={key => this.setState({ tabKey: key })} tabBarExtraContent={operationComp}>
|
|
{themeTabPaneComp}
|
|
{colorTabPaneComp}
|
|
</Tabs>
|
|
);
|
|
} else {
|
|
tabComp = (
|
|
<Tabs activeKey={tabKey} onChange={key => this.setState({ tabKey: key })} tabBarExtraContent={operationComp}>
|
|
{themeTabPaneComp}
|
|
</Tabs>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<WeaDialog
|
|
visible={visible}
|
|
loading={loading}
|
|
title={getLabel(0, '主题中心')}
|
|
icon="wevicon-theme-center"
|
|
iconBgcolor="#a7adb5"
|
|
style={{ width: 644, height: 435 }}
|
|
parentClassName="wea-theme-center"
|
|
mask={false}
|
|
zIndex={100}
|
|
hasScroll={true}
|
|
buttons={this.getButtons()}
|
|
onCancel={this.onCancel}
|
|
>
|
|
<div className="wea-theme-center-body">{tabComp}</div>
|
|
</WeaDialog>
|
|
);
|
|
}
|
|
|
|
onShow() {
|
|
this.setState({ visible: true, loading: true });
|
|
WeaTools.callApi('/api/portal/themeCenter/getAllThemes', 'GET', {}).then((result) => {
|
|
const { data = {} } = result;
|
|
const { curTheme = {} } = data;
|
|
const { templatetype, color, layout } = curTheme;
|
|
this.setState({ loading: false, tabKey: templatetype == 'ecology8' && color ? '2' : '1', tabKey2: layout == '5' ? 'ts' : templatetype, ...data });
|
|
});
|
|
}
|
|
|
|
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 });
|
|
}
|
|
|
|
onSetting() {
|
|
window.open('/spa/portal/engine.html#/portalengine/portalmaintenance/mainportal', '_blank');
|
|
}
|
|
|
|
onThemeChange(theme) {
|
|
const { type, templatetype } = theme;
|
|
|
|
if (type == 'preview') {
|
|
let redirectUrl = theme.url;
|
|
let width = screen.availWidth - 10;
|
|
let height = screen.availHeight - 60;
|
|
let szFeatures = 'top=0,';
|
|
szFeatures += 'left=0,';
|
|
szFeatures += `width=${width},`;
|
|
szFeatures += `height=${height},`;
|
|
szFeatures += 'directories=no,';
|
|
szFeatures += 'status=yes,';
|
|
szFeatures += 'menubar=no,';
|
|
szFeatures += 'scrollbars=yes,';
|
|
szFeatures += 'resizable=yes';
|
|
window.open(redirectUrl, '', szFeatures);
|
|
} else if (type == 'layout') {
|
|
this.setState({ loading: true });
|
|
doThemeAction('onLayoutChange', { type: theme.layout }, () => this.setState({ loading: false }));
|
|
} else if (templatetype == 'ecology8' || templatetype == 'ecology9') {
|
|
this.setState({ loading: true });
|
|
doThemeAction('onThemeChange', theme, () => this.setState({ loading: false, curTheme: theme }));
|
|
}
|
|
}
|
|
|
|
onColorChange(e) {
|
|
const $obj = jQuery(e.target);
|
|
const index = $obj.attr('data-index');
|
|
jQuery('.wea-theme-center-color-img').css('background', `url(/wui/theme/ecology8/page/images/skin/color${index}_wev8.png)`);
|
|
jQuery('.wea-theme-center-color-selected').css({ display: 'block', 'background-color': $obj.css('background-color') }).animate({ left: $obj.position().left - 5 });
|
|
|
|
this.setState({ loading: true });
|
|
doThemeAction('onColorChange', { color: `left${index}` }, () => this.setState({ loading: false }));
|
|
}
|
|
}
|
|
|
|
export default WeaThemeCenter;
|