From 0a0372f158b7a4c786c67be6a6e3c84ff7608904 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 07 一月 2021 10:35:10 +0800
Subject: [PATCH] 2021-01-07
---
src/menu/components/chart/antv-pie/index.jsx | 11 ++-
src/menu/components/chart/antv-bar/index.jsx | 11 ++-
src/mob/colorsketch/index.jsx | 2
src/menu/stylecombcontrolbutton/index.scss | 2
src/menu/components/table/normal-table/columns/index.scss | 24 ++++---
src/menu/stylecombcontrolbutton/index.jsx | 52 +++++++++++++++-
src/menu/stylecombcontroller/index.jsx | 19 +++---
src/menu/components/tabs/antv-tabs/index.jsx | 20 ++++++
src/menu/components/group/normal-group/index.jsx | 20 ++++++
src/views/menudesign/index.jsx | 16 +++++
10 files changed, 137 insertions(+), 40 deletions(-)
diff --git a/src/menu/components/chart/antv-bar/index.jsx b/src/menu/components/chart/antv-bar/index.jsx
index 9be6de7..5c6b6ca 100644
--- a/src/menu/components/chart/antv-bar/index.jsx
+++ b/src/menu/components/chart/antv-bar/index.jsx
@@ -733,7 +733,7 @@
updateComponent = (component) => {
const card = fromJS(this.state.card).toJS()
let refresh = false
- if (!is(fromJS(component.plot), fromJS(card.plot))) {
+ if (!is(fromJS(component.plot), fromJS(card.plot)) || !is(fromJS(component.style), fromJS(card.style))) {
let _element = document.getElementById(card.uuid + 'canvas')
if (_element) {
_element.innerHTML = ''
@@ -819,11 +819,12 @@
let _card = {...card, style}
- this.setState({
- card: _card
- })
+ // this.setState({
+ // card: _card
+ // })
- this.props.updateConfig(_card)
+ this.updateComponent(_card)
+ // this.props.updateConfig(_card)
}
handleLog = (type, logs, item) => {
diff --git a/src/menu/components/chart/antv-pie/index.jsx b/src/menu/components/chart/antv-pie/index.jsx
index 819344e..cbd61d7 100644
--- a/src/menu/components/chart/antv-pie/index.jsx
+++ b/src/menu/components/chart/antv-pie/index.jsx
@@ -334,7 +334,7 @@
updateComponent = (component) => {
const card = fromJS(this.state.card).toJS()
let refresh = false
- if (!is(fromJS(component.plot), fromJS(card.plot))) {
+ if (!is(fromJS(component.plot), fromJS(card.plot)) || !is(fromJS(component.style), fromJS(card.style))) {
let _element = document.getElementById(card.uuid + 'canvas')
if (_element) {
_element.innerHTML = ''
@@ -391,11 +391,12 @@
let _card = {...card, style}
- this.setState({
- card: _card
- })
+ this.updateComponent(_card)
+ // this.setState({
+ // card: _card
+ // })
- this.props.updateConfig(_card)
+ // this.props.updateConfig(_card)
}
handleLog = (type, logs, item) => {
diff --git a/src/menu/components/group/normal-group/index.jsx b/src/menu/components/group/normal-group/index.jsx
index 06944e3..698c884 100644
--- a/src/menu/components/group/normal-group/index.jsx
+++ b/src/menu/components/group/normal-group/index.jsx
@@ -63,8 +63,9 @@
}
componentDidMount () {
- MKEmitter.addListener('tabsChange', this.handleTabsChange)
MKEmitter.addListener('submitStyle', this.getStyle)
+ MKEmitter.addListener('tabsChange', this.handleTabsChange)
+ MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle)
}
/**
@@ -74,8 +75,23 @@
this.setState = () => {
return
}
+ MKEmitter.removeListener('submitStyle', this.getStyle)
MKEmitter.removeListener('tabsChange', this.handleTabsChange)
- MKEmitter.addListener('submitStyle', this.getStyle)
+ MKEmitter.removeListener('submitComponentStyle', this.updateComponentStyle)
+ }
+
+ updateComponentStyle = (item) => {
+ const { group } = this.state
+
+ if (group.uuid !== item.uuid) return
+
+ this.setState({
+ group: {...group, components: []}
+ }, () => {
+ this.setState({
+ group: {...group, components: item.components}
+ })
+ })
}
changeStyle = () => {
diff --git a/src/menu/components/table/normal-table/columns/index.scss b/src/menu/components/table/normal-table/columns/index.scss
index d0c864d..582a76b 100644
--- a/src/menu/components/table/normal-table/columns/index.scss
+++ b/src/menu/components/table/normal-table/columns/index.scss
@@ -3,16 +3,20 @@
.ant-table-body {
overflow-x: auto;
padding-bottom: 20px;
- tr td:not(.ant-table-selection-column) {
- position: relative;
- padding: 12px 8px;
- background: #ffffff;
- >.profile {
- position: absolute;
- top: 2px;
- right: 2px;
- color: purple;
- font-size: 12px;
+ tr {
+ td {
+ background: #ffffff;
+ }
+ td:not(.ant-table-selection-column) {
+ position: relative;
+ padding: 12px 8px;
+ >.profile {
+ position: absolute;
+ top: 2px;
+ right: 2px;
+ color: purple;
+ font-size: 12px;
+ }
}
}
.action-column {
diff --git a/src/menu/components/tabs/antv-tabs/index.jsx b/src/menu/components/tabs/antv-tabs/index.jsx
index 022d777..54be4b6 100644
--- a/src/menu/components/tabs/antv-tabs/index.jsx
+++ b/src/menu/components/tabs/antv-tabs/index.jsx
@@ -74,8 +74,9 @@
}
componentDidMount () {
- MKEmitter.addListener('tabsChange', this.handleTabsChange)
MKEmitter.addListener('submitStyle', this.getStyle)
+ MKEmitter.addListener('tabsChange', this.handleTabsChange)
+ MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle)
}
/**
@@ -85,8 +86,23 @@
this.setState = () => {
return
}
+ MKEmitter.removeListener('submitStyle', this.getStyle)
MKEmitter.removeListener('tabsChange', this.handleTabsChange)
- MKEmitter.addListener('submitStyle', this.getStyle)
+ MKEmitter.removeListener('submitComponentStyle', this.updateComponentStyle)
+ }
+
+ updateComponentStyle = (item) => {
+ const { group } = this.state
+
+ if (group.uuid !== item.uuid) return
+
+ this.setState({
+ group: {...group, components: []}
+ }, () => {
+ this.setState({
+ group: {...group, components: item.components}
+ })
+ })
}
changeStyle = () => {
diff --git a/src/menu/stylecombcontrolbutton/index.jsx b/src/menu/stylecombcontrolbutton/index.jsx
index d8c6c16..eee97c5 100644
--- a/src/menu/stylecombcontrolbutton/index.jsx
+++ b/src/menu/stylecombcontrolbutton/index.jsx
@@ -18,6 +18,7 @@
}
componentDidMount () {
+ sessionStorage.setItem('style-control', 'false')
MKEmitter.addListener('clickComponent', this.clickComponent)
MKEmitter.addListener('submitCombineStyle', this.submitCombineStyle)
}
@@ -34,13 +35,50 @@
}
submitCombineStyle = (style) => {
- const { components } = this.state
+ const { menu } = this.props
+ const { components, parent } = this.state
- components.forEach((item, i) => {
- setTimeout(() => {
- MKEmitter.emit('submitStyle', [item.uuid], {...item.style, ...style})
- }, i * 5)
+ let _parent = null
+ let getParents = (box) => {
+ box.components.forEach(item => {
+ if (item.type === 'tabs') {
+ item.subtabs.forEach(tab => {
+ if (tab.uuid === parent.uuid) {
+ _parent = tab
+ } else {
+ getParents(tab)
+ }
+ })
+ } else if (item.type === 'group') {
+ if (item.uuid === parent.uuid) {
+ _parent = item
+ }
+ }
+ })
+ }
+
+ if (menu.uuid === parent.uuid) {
+ _parent = menu
+ } else {
+ getParents(menu)
+ }
+
+ let keys = components.map(item => item.uuid)
+
+ _parent.components = _parent.components.map(item => {
+ if (keys.includes(item.uuid)) {
+ item.style = {...item.style, ...style}
+ }
+ return item
})
+
+ MKEmitter.emit('submitComponentStyle', _parent)
+
+ setTimeout(() => {
+ keys.forEach(key => {
+ document.getElementById(key).classList.add('selected-control-element')
+ })
+ }, 100)
}
clickComponent = (card) => {
@@ -90,6 +128,10 @@
document.getElementById(card.uuid).classList.add('selected-control-element')
}
+ if (components.length === 0) {
+ MKEmitter.emit('closeCombineStyle')
+ }
+
this.setState({
components: components,
parent: components.length ? parent : null
diff --git a/src/menu/stylecombcontrolbutton/index.scss b/src/menu/stylecombcontrolbutton/index.scss
index af3aebe..e2354d3 100644
--- a/src/menu/stylecombcontrolbutton/index.scss
+++ b/src/menu/stylecombcontrolbutton/index.scss
@@ -28,6 +28,6 @@
}
.selected-control-element {
- box-shadow: 0px 0px 4px orange;
+ box-shadow: 0px 0px 6px orange;
}
}
\ No newline at end of file
diff --git a/src/menu/stylecombcontroller/index.jsx b/src/menu/stylecombcontroller/index.jsx
index eaa7e89..e8d6781 100644
--- a/src/menu/stylecombcontroller/index.jsx
+++ b/src/menu/stylecombcontroller/index.jsx
@@ -48,7 +48,8 @@
closeStyle = () => {
this.setState({
- visible: false
+ visible: false,
+ options: []
})
}
@@ -303,7 +304,7 @@
label={<Icon title="瀛椾綋棰滆壊" type="font-colors" />}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <ColorSketch value={''} onChange={this.changeFontColor} />
+ <ColorSketch onChange={this.changeFontColor} />
</Form.Item>
</Col>
<Col span={24}>
@@ -354,7 +355,7 @@
label={<Icon title="鑳屾櫙棰滆壊" type="bg-colors" />}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <ColorSketch value={''} onChange={this.changeBackgroundColor} />
+ <ColorSketch onChange={this.changeBackgroundColor} />
</Form.Item>
</Col>
</Panel> : null}
@@ -431,11 +432,11 @@
label={<Icon title="杈规棰滆壊" type="bg-colors" />}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- {borposition === 'outer' ? <ColorSketch defaultValue={'transparent'} onChange={this.changeBorderColor} /> : null}
- {borposition === 'left' ? <ColorSketch defaultValue={'transparent'} onChange={this.changeBorderColor} /> : null}
- {borposition === 'right' ? <ColorSketch defaultValue={'transparent'} onChange={this.changeBorderColor} /> : null}
- {borposition === 'top' ? <ColorSketch defaultValue={'transparent'} onChange={this.changeBorderColor} /> : null}
- {borposition === 'bottom' ? <ColorSketch defaultValue={'transparent'} onChange={this.changeBorderColor} /> : null}
+ {borposition === 'outer' ? <ColorSketch onChange={this.changeBorderColor} /> : null}
+ {borposition === 'left' ? <ColorSketch onChange={this.changeBorderColor} /> : null}
+ {borposition === 'right' ? <ColorSketch onChange={this.changeBorderColor} /> : null}
+ {borposition === 'top' ? <ColorSketch onChange={this.changeBorderColor} /> : null}
+ {borposition === 'bottom' ? <ColorSketch onChange={this.changeBorderColor} /> : null}
</Form.Item>
</Col>
<Col span={24}>
@@ -455,7 +456,7 @@
label={<Icon title="闃村奖棰滆壊" type="bg-colors" />}
labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
>
- <ColorSketch value={'transparent'} onChange={this.changeShadowColor} />
+ <ColorSketch onChange={this.changeShadowColor} />
</Form.Item>
</Col>
</Panel> : null}
diff --git a/src/mob/colorsketch/index.jsx b/src/mob/colorsketch/index.jsx
index c3fe986..753a443 100644
--- a/src/mob/colorsketch/index.jsx
+++ b/src/mob/colorsketch/index.jsx
@@ -39,7 +39,7 @@
handleChange = (color) => {
let _color = `rgba(${ color.rgb.r }, ${ color.rgb.g }, ${ color.rgb.b }, ${ color.rgb.a })`
-
+
this.setState({ color: _color }, () => {
this.props.onChange && this.props.onChange(_color)
})
diff --git a/src/views/menudesign/index.jsx b/src/views/menudesign/index.jsx
index fb9e3ae..2c188a0 100644
--- a/src/views/menudesign/index.jsx
+++ b/src/views/menudesign/index.jsx
@@ -93,6 +93,7 @@
MKEmitter.addListener('delButtons', this.delButtons)
MKEmitter.addListener('copyButtons', this.copyButtons)
MKEmitter.addListener('changePopview', this.initPopview)
+ MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle)
}
/**
@@ -105,6 +106,21 @@
MKEmitter.removeListener('delButtons', this.delButtons)
MKEmitter.removeListener('copyButtons', this.copyButtons)
MKEmitter.removeListener('changePopview', this.initPopview)
+ MKEmitter.removeListener('submitComponentStyle', this.updateComponentStyle)
+ }
+
+ updateComponentStyle = (item) => {
+ const { config } = this.state
+
+ if (config.uuid !== item.uuid) return
+
+ this.setState({
+ config: {...config, components: []}
+ }, () => {
+ this.setState({
+ config: {...config, components: item.components}
+ })
+ })
}
delButtons = (items) => {
--
Gitblit v1.8.0