From fe5721c8efd837b13b7f2d2687da53637fc02919 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期四, 05 八月 2021 15:05:02 +0800 Subject: [PATCH] 2021-08-05 --- src/menu/components/card/cardsimplecomponent/index.jsx | 111 ++++++++++++++++++++++++------------------------------- 1 files changed, 49 insertions(+), 62 deletions(-) diff --git a/src/menu/components/card/table-card/cardcomponent/index.jsx b/src/menu/components/card/cardsimplecomponent/index.jsx similarity index 65% rename from src/menu/components/card/table-card/cardcomponent/index.jsx rename to src/menu/components/card/cardsimplecomponent/index.jsx index a46143b..f6dff48 100644 --- a/src/menu/components/card/table-card/cardcomponent/index.jsx +++ b/src/menu/components/card/cardsimplecomponent/index.jsx @@ -1,36 +1,32 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Modal, Popover, Icon } from 'antd' +import { Popover, Icon } from 'antd' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' -import SettingForm from './settingform' import { resetStyle } from '@/utils/utils-custom.js' +import { getTableSetting, getCarouselSetting } from './options' import Utils from '@/utils/utils.js' import MKEmitter from '@/utils/events.js' import './index.scss' -const CardCellComponent = asyncComponent(() => import('../../cardcellcomponent')) +const NormalForm = asyncIconComponent(() => import('@/components/normalform')) +const CardCellComponent = asyncComponent(() => import('../cardcellcomponent')) const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) class CardBoxComponent extends Component { static propTpyes = { cards: PropTypes.object, // 鍗$墖琛岄厤缃俊鎭� card: PropTypes.object, // 鍗$墖閰嶇疆淇℃伅 + move: PropTypes.func, // 鍗$墖绉诲姩 deleteElement: PropTypes.func, // 鍗$墖鍒犻櫎 updateElement: PropTypes.func // 鑿滃崟閰嶇疆鏇存柊 } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, - card: null, // 鍗$墖淇℃伅锛屽寘鎷鍙嶉潰 + card: null, // 鍗$墖淇℃伅 formlist: null, // 璁剧疆琛ㄥ崟淇℃伅 - elements: null, // 缂栬緫缁� - visible: false, // 妯℃�佹鎺у埗 - settingVisible: false, } /** @@ -40,8 +36,7 @@ const { card } = this.props this.setState({ - card: fromJS(card).toJS(), - elements: fromJS(card.elements).toJS(), + card: fromJS(card).toJS() }) } @@ -113,24 +108,10 @@ const { cards } = this.props const { card } = this.state - let newcard = {} + let newcard = {eleType: 'button', label: 'button', verify: null, show: 'link', sqlType: '', Ot: 'requiredSgl', OpenType: 'prompt', icon: '', class: 'primary', intertype: 'system', execSuccess: 'grid', execError: 'never', popClose: 'never'} newcard.uuid = Utils.getuuid() newcard.focus = true - newcard.eleType = 'button' - newcard.label = 'button' - newcard.sqlType = '' - newcard.Ot = 'requiredSgl' - newcard.OpenType = 'prompt' - newcard.icon = '' - newcard.class = 'primary' - newcard.intertype = 'system' - newcard.execSuccess = 'grid' - newcard.execError = 'never' - newcard.popClose = 'never' - newcard.errorTime = 10 - newcard.verify = null - newcard.show = 'link' // 娉ㄥ唽浜嬩欢-娣诲姞鍏冪礌 MKEmitter.emit('cardAddElement', [cards.uuid, card.uuid], newcard) @@ -141,76 +122,82 @@ const { card } = this.state let _style = null - let options = ['height', 'background', 'border', 'padding', 'margin'] + let options = ['height', 'background', 'border', 'padding', 'margin', 'shadow'] _style = card.style ? fromJS(card.style).toJS() : {} + + if (cards.type === 'carousel') { + options = ['background', 'border', 'padding', 'margin', 'shadow'] + } MKEmitter.emit('changeStyle', [cards.uuid, card.uuid], options, _style) } - settingSubmit = () => { + getSettingForms = () => { + const { cards } = this.props + const { setting } = this.state.card + + if (cards.type !== 'carousel') { + return getTableSetting(setting, cards.columns) + } else { + return getCarouselSetting(setting, cards.subtype === 'propcard') + } + } + + updateSetting = (res) => { const { card } = this.state - this.settingRef.handleConfirm().then(res => { - this.setState({ - settingVisible: false, - card: {...card, setting: res} - }) + if (res.appmenu) { + res.menu = res.appmenu + } + delete res.appmenu - this.props.updateElement({...card, setting: res}) - }) + let _card = {...card, setting: res} + + this.setState({ card: _card }) + this.props.updateElement(_card) } render() { const { cards } = this.props - const { card, elements, settingVisible, dict } = this.state - let _style = resetStyle(card.style) + const { card } = this.state + + let _style = {...card.style} + + if (cards.type === 'carousel') { + _style.height = cards.style.height + } + + _style = resetStyle(_style) return ( <div className="ant-col ant-col-24"> <div className="card-item" style={_style}> - <CardCellComponent cards={cards} cardCell={card} elements={elements} updateElement={this.updateCard}/> + <CardCellComponent cards={cards} cardCell={card} elements={card.elements} updateElement={this.updateCard}/> <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" title="缂栬緫" type="edit" onClick={() => this.setState({settingVisible: true})} /> + <NormalForm title="鍗$墖璁剧疆" width={700} update={this.updateSetting} getForms={this.getSettingForms}> + <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + </NormalForm> <CopyComponent type="cardcell" card={card}/> <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> - <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ + {cards.subtype !== 'datacard' ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> <Icon className="plus" title="鍓嶇Щ" type="arrow-left" onClick={() => this.props.move(card, 'left')} /> <Icon className="close" title="鍚庣Щ" type="arrow-right" onClick={() => this.props.move(card, 'right')} /> </div> } trigger="hover" getPopupContainer={() => document.getElementById(card.uuid + 'swap')}> <Icon type="swap" id={card.uuid + 'swap'}/> - </Popover> - <Icon className="close" title="鍒犻櫎鍗$墖" type="delete" onClick={() => this.props.deleteElement(card)} /> + </Popover> : null} + {cards.subtype !== 'datacard' ? <Icon className="close" title="鍒犻櫎鍗$墖" type="delete" onClick={() => this.props.deleteElement(card)} /> : null} </div> } trigger="hover"> <Icon type="tool" /> </Popover> </div> </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} - cards={cards} - setting={card.setting} - inputSubmit={this.settingSubmit} - wrappedComponentRef={(inst) => this.settingRef = inst} - /> - </Modal> </div> ) } -- Gitblit v1.8.0