| | |
| | | const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) |
| | | const PasteComponent = asyncIconComponent(() => import('@/menu/components/share/pastecomponent')) |
| | | const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent')) |
| | | const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent')) |
| | | const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader')) |
| | | |
| | | const { confirm } = Modal |
| | |
| | | const { card } = this.props |
| | | |
| | | if (card.isNew) { |
| | | let subcards = null |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | floor: card.floor, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'object', // 组件属性 - 数据格式 |
| | | pageable: false, // 组件属性 - 是否可分页 |
| | | switchable: true, // 组件属性 - 数据是否可切换 |
| | | dataName: card.dataName || '', |
| | | width: card.width || 24, |
| | | name: card.name, |
| | | subtype: card.subtype, |
| | | setting: { interType: 'system' }, |
| | | wrap: { name: card.name, width: card.width || 24, title: '', addable: 'false', switch: 'false', datatype: 'static' }, |
| | | style: { marginLeft: '0px', marginRight: '0px', marginTop: '8px', marginBottom: '8px' }, |
| | | headerStyle: { fontSize: '16px', borderBottomWidth: '1px', borderBottomColor: '#e8e8e8' }, |
| | | columns: [], |
| | | scripts: [], |
| | | subcards: [{ |
| | | uuid: Utils.getuuid(), |
| | | setting: { width: 6, type: 'simple'}, |
| | | style: { |
| | | borderWidth: '1px', borderColor: '#e8e8e8', |
| | | paddingTop: '15px', paddingBottom: '15px', paddingLeft: '15px', paddingRight: '15px', |
| | | marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' |
| | | }, |
| | | backStyle: {}, |
| | | elements: [], |
| | | backElements: [] |
| | | }], |
| | | btnlog: [], |
| | | } |
| | | |
| | | if (card.config) { |
| | | subcards = JSON.parse(card.config) |
| | | subcards = subcards.map(scard => { |
| | | let config = fromJS(card.config).toJS() |
| | | |
| | | _card.wrap = config.wrap |
| | | _card.wrap.name = card.name |
| | | _card.style = config.style |
| | | _card.headerStyle = config.headerStyle |
| | | |
| | | _card.subcards = config.subcards.map(scard => { |
| | | scard.uuid = Utils.getuuid() |
| | | scard.elements = scard.elements.map(elem => { |
| | | elem.uuid = Utils.getuuid() |
| | |
| | | }) |
| | | return scard |
| | | }) |
| | | } else { |
| | | subcards = [{ |
| | | uuid: Utils.getuuid(), |
| | | setting: { width: 6, type: 'simple'}, |
| | | style: { |
| | | borderWidth: '1px', borderColor: '#e8e8e8', |
| | | paddingTop: '15px', paddingBottom: '15px', paddingLeft: '15px', paddingRight: '15px', |
| | | marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' |
| | | }, |
| | | backStyle: {}, |
| | | elements: [], |
| | | backElements: [] |
| | | }] |
| | | } |
| | | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | floor: card.floor, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'object', // 组件属性 - 数据格式 |
| | | pageable: false, // 组件属性 - 是否可分页 |
| | | switchable: true, // 组件属性 - 数据是否可切换 |
| | | dataName: card.dataName || '', |
| | | width: 24, |
| | | name: card.name, |
| | | subtype: card.subtype, |
| | | setting: { interType: 'system' }, |
| | | wrap: { name: card.name, width: 24, title: '', addable: 'false', switch: 'false', datatype: 'static' }, |
| | | style: { marginLeft: '0px', marginRight: '0px', marginTop: '8px', marginBottom: '8px' }, |
| | | headerStyle: { fontSize: '16px', borderBottomWidth: '1px', borderBottomColor: '#e8e8e8' }, |
| | | columns: [], |
| | | scripts: [], |
| | | subcards: subcards, |
| | | btnlog: [], |
| | | } |
| | | this.setState({ |
| | | card: _card |
| | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('submitStyle', this.getStyle) |
| | | MKEmitter.addListener('logButton', this.logButton) |
| | | MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle) |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | |
| | | } |
| | | MKEmitter.removeListener('submitStyle', this.getStyle) |
| | | MKEmitter.removeListener('logButton', this.logButton) |
| | | MKEmitter.removeListener('submitComponentStyle', this.updateComponentStyle) |
| | | } |
| | | |
| | | updateComponentStyle = (parentId, keys, style) => { |
| | | const { card } = this.state |
| | | |
| | | if (card.uuid !== parentId) return |
| | | |
| | | let subcards = card.subcards.map(item => { |
| | | if (keys.includes(item.uuid)) { |
| | | item.style = {...item.style, ...style} |
| | | } |
| | | return item |
| | | }) |
| | | |
| | | this.setState({card: {...card, subcards: []}}, () => { |
| | | this.updateComponent({...card, subcards: subcards}) |
| | | }) |
| | | } |
| | | |
| | | logButton = (id, item) => { |
| | |
| | | |
| | | card.btnlog = logs |
| | | |
| | | this.setState({ card }) |
| | | this.props.updateConfig(card) |
| | | this.setState({ card: {...card, subcards: []} }, () => { |
| | | this.setState({ card }) |
| | | this.props.updateConfig(card) |
| | | }) |
| | | if (!done) { |
| | | notification.warning({ |
| | | top: 92, |
| | |
| | | this.props.updateConfig(card) |
| | | } |
| | | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | } |
| | | } |
| | | |
| | | render() { |
| | | const { card } = this.state |
| | | |
| | |
| | | } |
| | | |
| | | return ( |
| | | <div className="menu-prop-card-edit-box" style={{...card.style}}> |
| | | <div className="menu-prop-card-edit-box" style={{...card.style}} onClick={this.clickComponent} id={card.uuid}> |
| | | <NormalHeader defaultshow="hidden" config={card} updateComponent={this.updateComponent}/> |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | |
| | | <PasteComponent config={card} options={['cardcell']} updateConfig={this.updateComponent} /> |
| | | <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" /> |
| | | <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} /> |
| | | <UserComponent config={card}/> |
| | | <Icon className="close" title="删除组件" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> |
| | | {card.wrap.datatype !== 'static' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : null} |
| | | {card.wrap.datatype === 'static' ? <Icon style={{color: '#eeeeee', cursor: 'not-allowed'}} type="setting"/> : null} |