From 5902ba5c3ff85efc78c95364196cd6ab5d2d1601 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期日, 11 十月 2020 12:21:17 +0800
Subject: [PATCH] 2020-10-11
---
src/menu/components/card/cardcellcomponent/index.jsx | 237 +++++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 221 insertions(+), 16 deletions(-)
diff --git a/src/menu/components/card/cardcellcomponent/index.jsx b/src/menu/components/card/cardcellcomponent/index.jsx
index 50a91b6..3e9eefb 100644
--- a/src/menu/components/card/cardcellcomponent/index.jsx
+++ b/src/menu/components/card/cardcellcomponent/index.jsx
@@ -16,6 +16,10 @@
import DragElement from './dragaction'
import ActionForm from '@/menu/actioncomponent/actionform'
import CreateFunc from '@/templates/zshare/createfunc'
+import VerifyCard from '@/templates/zshare/verifycard'
+import VerifyPrint from '@/menu/actioncomponent/verifyprint'
+import VerifyExcelIn from '@/menu/actioncomponent/verifyexcelin'
+import VerifyExcelOut from '@/menu/actioncomponent/verifyexcelout'
import './index.scss'
const { confirm } = Modal
@@ -23,7 +27,8 @@
class CardCellComponent extends Component {
static propTpyes = {
cards: PropTypes.object, // 鑿滃崟閰嶇疆淇℃伅
- card: PropTypes.object,
+ cardCell: PropTypes.object,
+ side: PropTypes.string,
elements: PropTypes.array, // 鍏冪礌闆�
updateElement: PropTypes.func // 鑿滃崟閰嶇疆鏇存柊
}
@@ -34,7 +39,8 @@
formlist: null, // 琛ㄥ崟淇℃伅
elements: null, // 鎸夐挳缁�
visible: false, // 妯℃�佹鎺у埗
- actvisible: false // 鎸夐挳缂栬緫妯℃�佹
+ actvisible: false, // 鎸夐挳缂栬緫妯℃�佹
+ profVisible: false
}
/**
@@ -50,10 +56,19 @@
componentDidMount () {
MKEmitter.addListener('cardAddElement', this.cardAddElement)
+ MKEmitter.addListener('submitStyle', this.getStyle)
}
shouldComponentUpdate (nextProps, nextState) {
return !is(fromJS(this.props.cards), fromJS(nextProps.cards)) || !is(fromJS(this.state), fromJS(nextState))
+ }
+
+ UNSAFE_componentWillReceiveProps(nextProps) {
+ if (this.props.side !== nextProps.side) {
+ this.setState({
+ elements: fromJS(nextProps.elements).toJS()
+ })
+ }
}
/**
@@ -67,17 +82,107 @@
}
cardAddElement = (ids, element) => {
- if (!ids || ids.length !== 2 || ids[0] !== this.props.cards.uuid || ids[1] !== this.props.card.uuid) return
+ const { cards, cardCell } = this.props
+
+ if (!ids || ids.length !== 2 || ids[0] !== cards.uuid || ids[1] !== cardCell.uuid) return
const { elements } = this.state
this.setState({elements: [...elements, element]})
+ this.handleElement(element)
+ }
+
+ handleStyle = (element) => {
+ const { cards, cardCell } = this.props
+
+ let _style = element.style ? fromJS(element.style).toJS() : {}
+ let options = ['font', 'border', 'padding', 'margin']
+
if (element.eleType === 'button') {
- this.handleAction(element)
- } else {
- this.handleElement(element)
+ options.push('background')
+ if (element.btnstyle) {
+ _style = {..._style, ...element.btnstyle}
+ }
+ } else if (element.eleType === 'picture') {
+ options = ['border', 'margin']
+ } else if (element.eleType === 'slider') {
+ options = ['padding', 'margin']
+ } else if (element.eleType === 'splitline') {
+ options = ['padding', 'margin']
}
+
+ this.setState({
+ card: element
+ })
+
+ MKEmitter.emit('changeStyle', [cards.uuid, cardCell.uuid, element.uuid], options, _style)
+ }
+
+ getStyle = (comIds, style) => {
+ const { cards, cardCell } = this.props
+ const { card, elements } = this.state
+
+ if (comIds.length !== 3 || comIds[0] !== cards.uuid || comIds[1] !== cardCell.uuid) return
+
+ let _card = fromJS(card).toJS()
+
+ if (card.eleType === 'button') { // 鎷嗗垎style
+ let _style = fromJS(style).toJS()
+ _card.style = {}
+
+ if (_style.marginTop) {
+ _card.style.marginTop = _style.marginTop
+ delete _style.marginTop
+ }
+ if (_style.marginBottom) {
+ _card.style.marginBottom = _style.marginBottom
+ delete _style.marginBottom
+ }
+ if (_style.marginLeft) {
+ _card.style.marginLeft = _style.marginLeft
+ delete _style.marginLeft
+ }
+ if (_style.marginRight) {
+ _card.style.marginRight = _style.marginRight
+ delete _style.marginRight
+ }
+ if (_style.paddingTop) {
+ _card.style.paddingTop = _style.paddingTop
+ delete _style.paddingTop
+ }
+ if (_style.paddingBottom) {
+ _card.style.paddingBottom = _style.paddingBottom
+ delete _style.paddingBottom
+ }
+ if (_style.paddingLeft) {
+ _card.style.paddingLeft = _style.paddingLeft
+ delete _style.paddingLeft
+ }
+ if (_style.paddingRight) {
+ _card.style.paddingRight = _style.paddingRight
+ delete _style.paddingRight
+ }
+ if (_style.textAlign) {
+ _card.style.textAlign = _style.textAlign
+ delete _style.textAlign
+ }
+
+ _card.btnstyle = _style
+ } else {
+ _card.style = style
+ }
+
+ let _elements = elements.map(cell => {
+ if (cell.uuid === _card.uuid) return _card
+ return cell
+ })
+
+ this.setState({
+ elements: _elements
+ }, () => {
+ this.props.updateElement(_elements)
+ })
}
/**
@@ -93,11 +198,15 @@
* @description 鍏冪礌缂栬緫锛岃幏鍙栧厓绱犺〃鍗曚俊鎭�
*/
handleElement = (card) => {
- this.setState({
- visible: true,
- card: card,
- formlist: getCardCellForm(card)
- })
+ if (card.eleType === 'button') {
+ this.handleAction(card)
+ } else {
+ this.setState({
+ visible: true,
+ card: card,
+ formlist: getCardCellForm(card)
+ })
+ }
}
/**
@@ -172,14 +281,14 @@
this.setState({
actvisible: true,
card: card,
- formlist: getActionForm(card, functip, cards.setting, menu.permFuncField, '', menulist, modules)
+ formlist: getActionForm(card, functip, cards.setting, menu.permFuncField, 'card', menulist, modules)
})
})
} else {
this.setState({
actvisible: true,
card: card,
- formlist: getActionForm(card, functip, cards.setting, menu.permFuncField, '', menulist, modules)
+ formlist: getActionForm(card, functip, cards.setting, menu.permFuncField, 'card', menulist, modules)
})
}
}
@@ -264,7 +373,11 @@
this.elementFormRef.handleConfirm().then(ele => {
let _elements = elements.map(cell => {
- if (cell.uuid === ele.uuid) return ele
+ if (cell.uuid === ele.uuid) {
+ ele.style = cell.style || {}
+ ele.btnstyle = cell.btnstyle || {}
+ return ele
+ }
return cell
})
@@ -285,7 +398,12 @@
this.actionFormRef.handleConfirm().then(ele => {
let _elements = elements.map(cell => {
- if (cell.uuid === ele.uuid) return ele
+ if (cell.uuid === ele.uuid) {
+ ele.eleType = 'button'
+ ele.style = cell.style || {}
+ return ele
+ }
+
return cell
})
@@ -320,9 +438,46 @@
})
}
+ /**
+ * @description 楠岃瘉淇℃伅閰嶇疆
+ */
+ profileAction = (element) => {
+ this.setState({
+ profVisible: true,
+ card: element
+ })
+ }
+
+ /**
+ * @description 楠岃瘉淇℃伅淇濆瓨
+ */
+ verifySubmit = () => {
+ const { elements } = this.state
+
+ this.verifyRef.handleConfirm().then(res => {
+ console.log(res)
+ let _elements = elements.map(cell => {
+ if (cell.uuid === res.uuid) {
+ res.eleType = 'button'
+ res.style = cell.style || {}
+ return res
+ }
+
+ return cell
+ })
+
+ this.setState({
+ elements: _elements,
+ actvisible: false
+ }, () => {
+ this.props.updateElement(_elements)
+ })
+ })
+ }
+
render() {
const { cards } = this.props
- const { elements, visible, actvisible, card, dict } = this.state
+ const { elements, visible, actvisible, profVisible, card, dict } = this.state
return (
<div className="model-menu-card-cell-list">
@@ -330,6 +485,8 @@
list={elements}
handleList={this.handleList}
handleMenu={this.handleElement}
+ handleStyle={this.handleStyle}
+ profileAction={this.profileAction}
deleteMenu={this.deleteElement}
/>
{/* 缂栬緫鎸夐挳锛氬鍒躲�佺紪杈� */}
@@ -374,6 +531,54 @@
wrappedComponentRef={(inst) => this.actionFormRef = inst}
/>
</Modal>
+ {/* 鎸夐挳浣跨敤绯荤粺瀛樺偍杩囩▼鏃讹紝楠岃瘉淇℃伅妯℃�佹 */}
+ <Modal
+ wrapClassName="model-table-action-verify-modal"
+ title={'楠岃瘉淇℃伅'}
+ visible={profVisible}
+ width={'75vw'}
+ maskClosable={false}
+ style={{minWidth: '900px', maxWidth: '1200px'}}
+ okText={dict['model.submit']}
+ onOk={this.verifySubmit}
+ onCancel={() => { this.setState({ profVisible: false }) }}
+ destroyOnClose
+ >
+ {card && !card.execMode && card.OpenType !== 'excelIn' && card.OpenType !== 'excelOut' ?
+ <VerifyCard
+ // floor={this.props.type}
+ card={card}
+ dict={dict}
+ config={cards}
+ columns={cards.columns}
+ wrappedComponentRef={(inst) => this.verifyRef = inst}
+ /> : null
+ }
+ {card && card.execMode ?
+ <VerifyPrint
+ card={card}
+ dict={dict}
+ columns={cards.columns}
+ wrappedComponentRef={(inst) => this.verifyRef = inst}
+ /> : null
+ }
+ {card && card.OpenType === 'excelIn' ?
+ <VerifyExcelIn
+ card={card}
+ dict={dict}
+ columns={cards.columns}
+ wrappedComponentRef={(inst) => this.verifyRef = inst}
+ /> : null
+ }
+ {card && card.OpenType === 'excelOut' ?
+ <VerifyExcelOut
+ card={card}
+ dict={dict}
+ config={cards}
+ wrappedComponentRef={(inst) => this.verifyRef = inst}
+ /> : null
+ }
+ </Modal>
</div>
)
}
--
Gitblit v1.8.0