| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | floor: card.floor, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'array', // 组件属性 - 数据格式 |
| | |
| | | search: [], |
| | | action: [], |
| | | plot: _plot, |
| | | btnlog: [], |
| | | } |
| | | |
| | | if (card.config) { |
| | |
| | | return col |
| | | }) |
| | | } |
| | | this.setState({ |
| | | card: _card |
| | | }) |
| | | this.props.updateConfig(_card) |
| | | |
| | | this.updateComponent(_card, true) |
| | | } else { |
| | | this.setState({ |
| | | card: fromJS(card).toJS() |
| | |
| | | } |
| | | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('submitStyle', this.getStyle) |
| | | MKEmitter.addListener('tabsChange', this.handleTabsChange) |
| | | setTimeout(() => { |
| | | this.viewrender() |
| | |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | MKEmitter.removeListener('submitStyle', this.getStyle) |
| | | MKEmitter.removeListener('tabsChange', this.handleTabsChange) |
| | | } |
| | | |
| | | handleTabsChange = (parentId) => { |
| | | const { card } = this.state |
| | | |
| | | if (parentId === card.parentId) { |
| | | if (parentId === card.parentId || parentId === 'all') { |
| | | let _element = document.getElementById(card.uuid + 'canvas') |
| | | if (_element) { |
| | | _element.innerHTML = '' |
| | |
| | | } |
| | | } |
| | | |
| | | updateComponent = (component) => { |
| | | const card = fromJS(this.state.card).toJS() |
| | | if (!is(fromJS(component.plot), fromJS(card.plot)) || !is(fromJS(component.style), fromJS(card.style)) || !is(fromJS(component.search), fromJS(card.search))) { |
| | | let _element = document.getElementById(card.uuid + 'canvas') |
| | | if (_element) { |
| | | _element.innerHTML = '' |
| | | _element.removeAttribute('_echarts_instance_') |
| | | _element.removeAttribute('style') |
| | | updateComponent = (card, init) => { |
| | | if (!init) { |
| | | if (!is(fromJS({plot: card.plot, style: card.style, search: card.search}), fromJS({plot: this.state.card.plot, style: this.state.card.style, search: this.state.card.search}))) { |
| | | let _element = document.getElementById(card.uuid + 'canvas') |
| | | if (_element) { |
| | | _element.innerHTML = '' |
| | | _element.removeAttribute('_echarts_instance_') |
| | | _element.removeAttribute('style') |
| | | } |
| | | this.$timer && clearTimeout(this.$timer) |
| | | this.$timer = setTimeout(() => { |
| | | this.viewrender() |
| | | }, 150) |
| | | } |
| | | this.$timer && clearTimeout(this.$timer) |
| | | this.$timer = setTimeout(() => { |
| | | this.viewrender() |
| | | }, 150) |
| | | } |
| | | |
| | | component.width = component.plot.width |
| | | component.name = component.plot.name |
| | | card.width = card.plot.width |
| | | card.name = card.plot.name |
| | | card.errors = [] |
| | | |
| | | let columns = card.columns.map(c => c.field) |
| | | |
| | | if (card.setting.interType === 'system' && card.setting.execute !== 'false' && !card.setting.dataresource) { |
| | | card.errors.push({ level: 0, detail: '未设置数据源!'}) |
| | | } else if (card.setting.interType === 'system' && card.setting.execute === 'false' && card.scripts.filter(script => script.status !== 'false').length === 0) { |
| | | card.errors.push({ level: 0, detail: '数据源中无可用脚本!'}) |
| | | } else if (!card.setting.primaryKey) { |
| | | card.errors.push({ level: 0, detail: '未设置主键!'}) |
| | | } else if (!columns.includes(card.setting.primaryKey)) { |
| | | card.errors.push({ level: 0, detail: '主键已失效!'}) |
| | | } else if (!card.setting.supModule) { |
| | | card.errors.push({ level: 0, detail: '未设置上级组件!'}) |
| | | } |
| | | |
| | | this.setState({ |
| | | card: component |
| | | card: card |
| | | }) |
| | | this.props.updateConfig(component) |
| | | this.props.updateConfig(card) |
| | | } |
| | | |
| | | addSearch = () => { |
| | |
| | | newcard.type = 'select' |
| | | newcard.resourceType = '0' |
| | | newcard.options = [] |
| | | newcard.setAll = 'false' |
| | | newcard.orderType = 'asc' |
| | | newcard.match = '=' |
| | | |
| | |
| | | changeStyle = () => { |
| | | const { card } = this.state |
| | | |
| | | MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin', 'shadow'], card.style) |
| | | MKEmitter.emit('changeStyle', ['background', 'border', 'padding', 'margin', 'shadow'], card.style, this.getStyle) |
| | | } |
| | | |
| | | getStyle = (comIds, style) => { |
| | | const { card } = this.state |
| | | |
| | | if (comIds[0] !== card.uuid || comIds.length > 1) return |
| | | |
| | | let _card = {...card, style} |
| | | getStyle = (style) => { |
| | | let _card = {...this.state.card, style} |
| | | |
| | | this.updateComponent(_card) |
| | | } |
| | |
| | | </Popover> |
| | | <NormalHeader config={card} updateComponent={this.updateComponent}/> |
| | | <div className="canvas" id={card.uuid + 'canvas'} ref={ref => this.wrap = ref}></div> |
| | | <div className="component-name"> |
| | | <div className="center"> |
| | | <div className="title">{card.name}</div> |
| | | <div className="content"> |
| | | {card.errors && card.errors.map((err, index) => { |
| | | if (err.level === 0) { |
| | | return <span key={index} className="error">{err.detail}</span> |
| | | } else { |
| | | return <span key={index} className="waring">{err.detail};</span> |
| | | } |
| | | })} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | ) |
| | | } |