From 6257816acce548a113081578140058cd99e83160 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期一, 05 十月 2020 10:01:16 +0800
Subject: [PATCH] 2020-10-05
---
src/menu/components/card/cardcomponent/index.jsx | 129 ++++++++++++++++++++++++++++++------------
1 files changed, 92 insertions(+), 37 deletions(-)
diff --git a/src/menu/components/card/cardcomponent/index.jsx b/src/menu/components/card/cardcomponent/index.jsx
index 7eb7da9..78d436c 100644
--- a/src/menu/components/card/cardcomponent/index.jsx
+++ b/src/menu/components/card/cardcomponent/index.jsx
@@ -7,6 +7,7 @@
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
// import { getCardCellForm } from './formconfig'
+import SettingForm from './settingform'
import Utils from '@/utils/utils.js'
import MKEmitter from '@/utils/events.js'
@@ -19,15 +20,17 @@
static propTpyes = {
config: PropTypes.object, // 鑿滃崟閰嶇疆淇℃伅
card: PropTypes.object, // 鍗＄墖閰嶇疆淇℃伅
+ deleteElement: PropTypes.func, // 鍗＄墖鍒犻櫎
updateElement: PropTypes.func // 鑿滃崟閰嶇疆鏇存柊
}
state = {
dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
- card: null, // 鍗＄墖淇℃伅锛屽寘鎷鍙嶉潰
- formlist: null, // 璁剧疆琛ㄥ崟淇℃伅
- elements: null, // 缂栬緫缁�
- visible: false, // 妯℃�佹鎺у埗
+ card: null, // 鍗＄墖淇℃伅锛屽寘鎷鍙嶉潰
+ formlist: null, // 璁剧疆琛ㄥ崟淇℃伅
+ elements: null, // 缂栬緫缁�
+ visible: false, // 妯℃�佹鎺у埗
+ settingVisible: false,
side: 'front'
}
@@ -45,6 +48,7 @@
componentDidMount () {
MKEmitter.addListener('cardAddElement', this.cardAddElement)
+ MKEmitter.addListener('submitStyle', this.getStyle)
}
shouldComponentUpdate (nextProps, nextState) {
@@ -59,6 +63,31 @@
return
}
MKEmitter.removeListener('cardAddElement', this.cardAddElement)
+ MKEmitter.removeListener('submitStyle', this.getStyle)
+ }
+
+ getStyle = (comIds, style) => {
+ const { config } = this.props
+ const { card, side } = this.state
+
+ if (comIds.length !== 2 || comIds[0] !== config.uuid || comIds[1] !== card.uuid) return
+
+ let _card = fromJS(card).toJS()
+ if (side === 'back') {
+ _card.backStyle = style
+ } else {
+ _card.style = style
+ }
+
+ this.setState({
+ card: _card
+ })
+
+ this.props.updateElement(_card)
+ }
+
+ updateCard = (cell) => {
+
}
cardAddElement = (cardId, element) => {
@@ -206,6 +235,7 @@
newcard.uuid = Utils.getuuid()
newcard.focus = true
+ newcard.eleType = 'button'
newcard.label = 'button'
newcard.sqlType = ''
newcard.Ot = 'requiredSgl'
@@ -226,58 +256,83 @@
}
changeStyle = () => {
- const { card } = this.state
+ const { config } = this.props
+ const { card, side } = this.state
- MKEmitter.emit('changeStyle', [card.uuid], ['font', 'background', 'border'], {})
+ let _style = null
+ let options = ['height', 'background', 'border', 'padding', 'margin']
+ if (side === 'front') {
+ _style = card.style ? fromJS(card.style).toJS() : {}
+ } else if (side === 'back') {
+ _style = card.backStyle ? fromJS(card.backStyle).toJS() : {}
+ options = ['background', 'border', 'padding', 'margin']
+ }
+
+ MKEmitter.emit('changeStyle', [config.uuid, card.uuid], options, _style)
+ }
+
+ settingSubmit = () => {
+ const { card, side } = this.state
+
+ this.settingRef.handleConfirm().then(res => {
+ this.setState({
+ settingVisible: false,
+ card: {...card, setting: res}
+ })
+
+ if (side === 'back' && res.type === 'simple') {
+ this.setState({
+ side: 'front',
+ elements: fromJS(card.elements).toJS()
+ })
+ }
+
+ this.props.updateElement({...card, setting: res})
+ })
}
render() {
- // const { config } = this.props
- const { card, elements } = this.state
+ const { card, elements, side, settingVisible, dict } = this.state
+
+ let _style = card.style
+ if (side === 'back') {
+ _style = {...card.backStyle, height: card.style.height}
+ }
return (
- <div className={'ant-col card-item ant-col-' + (card.setting.width || 6)} style={{height: card.setting.height ? card.setting.height + 'px' : 'auto'}}>
+ <div className={'ant-col card-item ant-col-' + (card.setting.width || 6)} style={_style}>
<CardCellComponent config={card} elements={elements} updateElement={this.updateComponent}/>
<div className="card-control">
<Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
<div className="mk-popover-control">
<Icon className="plus" title="娣诲姞鍏冪礌" onClick={this.addElement} type="plus" />
<Icon className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton} type="plus-square" />
+ <Icon className="edit" type="edit" onClick={() => this.setState({settingVisible: true})} />
<Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" />
- <Switch size="small" onClick={this.changeSide} defaultChecked />
+ {card.setting.type === 'multi' ? <Switch size="small" onClick={this.changeSide} defaultChecked /> : null}
</div>
} trigger="hover">
<Icon type="tool" />
</Popover>
</div>
+ <Modal
+ wrapClassName="popview-modal"
+ title={'鍗＄墖璁剧疆'}
+ visible={settingVisible}
+ width={700}
+ maskClosable={false}
+ okText={dict['model.submit']}
+ onOk={this.settingSubmit}
+ onCancel={() => { this.setState({ settingVisible: false }) }}
+ destroyOnClose
+ >
+ <SettingForm
+ dict={dict}
+ setting={card.setting}
+ wrappedComponentRef={(inst) => this.settingRef = inst}
+ />
+ </Modal>
</div>
- // <div className="model-menu-card-cell-list">
- // <DragElement
- // list={elements}
- // handleList={this.handleList}
- // handleMenu={this.handleElement}
- // deleteMenu={this.deleteElement}
- // />
- // {/* 缂栬緫鎸夐挳锛氬鍒躲�佺紪杈� */}
- // <Modal
- // title={'缂栬緫鍏冪礌'}
- // visible={visible}
- // width={800}
- // maskClosable={false}
- // onCancel={this.editModalCancel}
- // onOk={this.handleSubmit}
- // destroyOnClose
- // >
- // <ElementForm
- // dict={dict}
- // card={card}
- // formlist={this.state.formlist}
- // inputSubmit={this.handleSubmit}
- // config={config}
- // wrappedComponentRef={(inst) => this.elementFormRef = inst}
- // />
- // </Modal>
- // </div>
)
}
}
--
Gitblit v1.8.0