| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'object', // 组件属性 - 数据格式 |
| | | pageable: false, // 组件属性 - 是否可分页 |
| | | switchable: false, // 组件属性 - 数据是否可切换 |
| | |
| | | const clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'cardcell') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', card, parent, 'cardcell') |
| | | MKEmitter.emit('clickComponent', card.uuid, parent.uuid) |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | if (cardCell.uuid !== parentId) return |
| | | |
| | | const { elements } = this.state |
| | | |
| | | let _elements = elements.map(item => { |
| | | let _elements = this.state.elements.map(item => { |
| | | if (keys.includes(item.uuid)) { |
| | | return this.resetCardStyle(item, {...item.style, ...style}) |
| | | } |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'array', // 组件属性 - 数据格式 |
| | | pageable: true, // 组件属性 - 是否可分页 |
| | | switchable: true, // 组件属性 - 数据是否可切换 |
| | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { |
| | | let _card = {...this.state.card} |
| | | _card.style = {..._card.style, ...style} |
| | | |
| | | this.setState({ card: _card }) |
| | | this.props.updateConfig(_card) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'object', // 组件属性 - 数据格式 |
| | | pageable: false, // 组件属性 - 是否可分页 |
| | | switchable: true, // 组件属性 - 数据是否可切换 |
| | |
| | | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('mkUpdateInter', this.mkUpdateInter) |
| | | MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle) |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | |
| | | return |
| | | } |
| | | MKEmitter.removeListener('mkUpdateInter', this.mkUpdateInter) |
| | | 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}) |
| | | }) |
| | | } |
| | | |
| | | mkUpdateInter = (inter, split) => { |
| | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { |
| | | let _card = {...this.state.card} |
| | | _card.style = {..._card.style, ...style} |
| | | |
| | | this.setState({ card: _card }) |
| | | this.props.updateConfig(_card) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'array', // 组件属性 - 数据格式 |
| | | pageable: true, // 组件属性 - 是否可分页 |
| | | switchable: false, // 组件属性 - 数据是否可切换 |
| | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { |
| | | let _card = {...this.state.card} |
| | | _card.style = {..._card.style, ...style} |
| | | |
| | | this.setState({ card: _card }) |
| | | this.props.updateConfig(_card) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'array', // 组件属性 - 数据格式 |
| | | pageable: false, // 组件属性 - 是否可分页 |
| | | switchable: false, // 组件属性 - 数据是否可切换 |
| | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { |
| | | let _card = {...this.state.card} |
| | | _card.style = {..._card.style, ...style} |
| | | |
| | | this.setState({ card: _card }) |
| | | this.props.updateConfig(_card) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'object', // 组件属性 - 数据格式 |
| | | pageable: false, // 组件属性 - 是否可分页 |
| | | switchable: false, // 组件属性 - 数据是否可切换 |
| | |
| | | } |
| | | } |
| | | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle) |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | 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}) |
| | | }) |
| | | } |
| | | |
| | | /** |
| | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { |
| | | let _card = {...this.state.card} |
| | | _card.style = {..._card.style, ...style} |
| | | |
| | | this.setState({ card: _card }) |
| | | this.props.updateConfig(_card) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'array', // 组件属性 - 数据格式 |
| | | pageable: false, // 组件属性 - 是否可分页 |
| | | switchable: card.type === 'bar' ? true : false, // 组件属性 - 数据是否可切换 |
| | |
| | | handleTabsChange = (parentId) => { |
| | | const { card } = this.state |
| | | |
| | | if (parentId === card.parentId || parentId === 'all') { |
| | | if (parentId.indexOf(card.uuid) > -1 || parentId === 'all') { |
| | | let _element = document.getElementById(card.uuid + 'canvas') |
| | | if (_element) { |
| | | _element.innerHTML = '' |
| | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { |
| | | let _card = {...this.state.card} |
| | | _card.style = {..._card.style, ...style} |
| | | |
| | | this.updateComponent(_card) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: card.subtype === 'ratioboard' ? 'array' : 'object', // 组件属性 - 数据格式 |
| | | pageable: false, // 组件属性 - 是否可分页 |
| | | switchable: false, // 组件属性 - 数据是否可切换 |
| | |
| | | handleTabsChange = (parentId) => { |
| | | const { card } = this.state |
| | | |
| | | if (parentId === card.parentId || parentId === 'all') { |
| | | if (parentId.indexOf(card.uuid) > -1 || parentId === 'all') { |
| | | let _element = document.getElementById(card.uuid + 'dashboard') |
| | | if (_element) { |
| | | _element.innerHTML = '' |
| | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { |
| | | let _card = {...this.state.card} |
| | | _card.style = {..._card.style, ...style} |
| | | |
| | | this.updateComponent(_card) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'array', // 组件属性 - 数据格式 |
| | | pageable: false, // 组件属性 - 是否可分页 |
| | | switchable: false, // 组件属性 - 数据是否可切换 |
| | |
| | | handleTabsChange = (parentId) => { |
| | | const { card } = this.state |
| | | |
| | | if (parentId === card.parentId || parentId === 'all') { |
| | | if (parentId.indexOf(card.uuid) > -1 || parentId === 'all') { |
| | | let _element = document.getElementById(card.uuid + 'canvas') |
| | | if (_element) { |
| | | _element.innerHTML = '' |
| | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { |
| | | let _card = {...this.state.card} |
| | | _card.style = {..._card.style, ...style} |
| | | |
| | | this.updateComponent(_card) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'array', // 组件属性 - 数据格式 |
| | | pageable: false, // 组件属性 - 是否可分页 |
| | | switchable: false, // 组件属性 - 数据是否可切换 |
| | |
| | | handleTabsChange = (parentId) => { |
| | | const { card } = this.state |
| | | |
| | | if (parentId === card.parentId || parentId === 'all') { |
| | | if (parentId.indexOf(card.uuid) > -1 || parentId === 'all') { |
| | | let _element = document.getElementById(card.uuid + 'canvas') |
| | | if (_element) { |
| | | _element.innerHTML = '' |
| | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { |
| | | let _card = {...this.state.card} |
| | | _card.style = {..._card.style, ...style} |
| | | |
| | | this.updateComponent(_card) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'array', // 组件属性 - 数据格式 |
| | | pageable: false, // 组件属性 - 是否可分页 |
| | | switchable: false, // 组件属性 - 数据是否可切换 |
| | |
| | | handleTabsChange = (parentId) => { |
| | | const { card } = this.state |
| | | |
| | | if (parentId === card.parentId || parentId === 'all') { |
| | | if (parentId.indexOf(card.uuid) > -1 || parentId === 'all') { |
| | | let _element = document.getElementById(card.uuid + 'canvas') |
| | | if (_element) { |
| | | _element.innerHTML = '' |
| | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { |
| | | let _card = {...this.state.card} |
| | | _card.style = {..._card.style, ...style} |
| | | |
| | | this.updateComponent(_card) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'object', // 组件属性 - 数据格式 |
| | | pageable: false, // 组件属性 - 是否可分页 |
| | | switchable: false, // 组件属性 - 数据是否可切换 |
| | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { |
| | | let _card = {...this.state.card} |
| | | _card.style = {..._card.style, ...style} |
| | | |
| | | this.setState({ card: _card }) |
| | | this.props.updateConfig(_card) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'object', // 组件属性 - 数据格式 |
| | | pageable: false, // 组件属性 - 是否可分页 |
| | | switchable: false, // 组件属性 - 数据是否可切换 |
| | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { |
| | | let _card = {...this.state.card} |
| | | _card.style = {..._card.style, ...style} |
| | | |
| | | this.setState({ card: _card }) |
| | | this.props.updateConfig(_card) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'object', // 组件属性 - 数据格式 |
| | | pageable: false, // 组件属性 - 是否可分页 |
| | | switchable: false, // 组件属性 - 数据是否可切换 |
| | |
| | | } |
| | | } |
| | | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle) |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | 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}) |
| | | }) |
| | | } |
| | | |
| | | /** |
| | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { |
| | | let _card = {...this.state.card} |
| | | _card.style = {..._card.style, ...style} |
| | | |
| | | this.setState({ card: _card }) |
| | | this.props.updateConfig(_card) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'object', // 组件属性 - 数据格式 |
| | | pageable: false, // 组件属性 - 是否可分页 |
| | | switchable: false, // 组件属性 - 数据是否可切换 |
| | |
| | | } |
| | | } |
| | | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle) |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | 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}) |
| | | }) |
| | | } |
| | | |
| | | /** |
| | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { |
| | | let _card = {...this.state.card} |
| | | _card.style = {..._card.style, ...style} |
| | | |
| | | this.setState({ card: _card }) |
| | | this.props.updateConfig(_card) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'object', // 组件属性 - 数据格式 |
| | | pageable: false, // 组件属性 - 是否可分页 |
| | | switchable: false, // 组件属性 - 数据是否可切换 |
| | |
| | | } |
| | | } |
| | | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle) |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | 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}) |
| | | }) |
| | | } |
| | | |
| | | /** |
| | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { |
| | | let _card = {...this.state.card} |
| | | _card.style = {..._card.style, ...style} |
| | | |
| | | this.setState({ card: _card }) |
| | | this.props.updateConfig(_card) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | let newcard = { |
| | | uuid: Utils.getuuid(), |
| | | tabId: config.uuid, |
| | | parentId: config.parentId, |
| | | type: item.component, |
| | | subtype: item.subtype, |
| | | config: item.config, |
| | |
| | | let _group = { |
| | | uuid: group.uuid, |
| | | type: group.type, |
| | | tabId: group.tabId || '', |
| | | parentId: group.parentId || '', |
| | | subtype: group.subtype, |
| | | width: 24, |
| | | name: group.name, |
| | |
| | | return !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('tabsChange', this.handleTabsChange) |
| | | MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle) |
| | | } |
| | | |
| | | /** |
| | | * @description 组件销毁,清除state更新,清除快捷键设置 |
| | | */ |
| | |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | MKEmitter.removeListener('tabsChange', this.handleTabsChange) |
| | | MKEmitter.removeListener('submitComponentStyle', this.updateComponentStyle) |
| | | } |
| | | |
| | | updateComponentStyle = (parentId, keys, style) => { |
| | | const { group } = this.state |
| | | |
| | | if (group.uuid !== parentId) return |
| | | |
| | | let components = group.components.map(item => { |
| | | if (keys.includes(item.uuid)) { |
| | | item.style = {...item.style, ...style} |
| | | } |
| | | return item |
| | | }) |
| | | |
| | | this.setState({ |
| | | group: {...group, components: []} |
| | | }, () => { |
| | | this.updateComponent({...group, components: components}) |
| | | }) |
| | | } |
| | | |
| | | changeStyle = () => { |
| | |
| | | this.props.updateConfig(_card) |
| | | } |
| | | |
| | | handleTabsChange = (parentId) => { |
| | | const { group } = this.state |
| | | |
| | | if (parentId === group.parentId) { |
| | | MKEmitter.emit('tabsChange', group.uuid) |
| | | } |
| | | } |
| | | |
| | | updateComponent = (component) => { |
| | | const { group } = this.state |
| | | |
| | | if (!is(fromJS(group.setting), fromJS(component.setting)) || !is(fromJS(group.style), fromJS(component.style))) { |
| | | // 注册事件-标签变化,通知组内元素 |
| | | MKEmitter.emit('tabsChange', group.uuid) |
| | | let ids = [] |
| | | group.components.forEach(item => { |
| | | ids.push(item.uuid) |
| | | }) |
| | | MKEmitter.emit('tabsChange', ids.join(',')) |
| | | } |
| | | |
| | | component.width = component.setting.width |
| | |
| | | |
| | | insert = (item) => { |
| | | let group = fromJS(this.state.group).toJS() |
| | | |
| | | item.parentId = group.parentId |
| | | |
| | | group.components.push(item) |
| | | |
| | |
| | | this.updateComponent({...this.state.group, setting: res}) |
| | | } |
| | | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.group) |
| | | } |
| | | } |
| | | |
| | | render() { |
| | | const { group } = this.state |
| | | let _style = resetStyle(group.style) |
| | |
| | | } |
| | | |
| | | return ( |
| | | <div className={'menu-group-edit-box ' + (paddingTop ? 'padding ' : '') + (group.setting.layout || '')} style={_style} onClick={this.clickComponent} id={group.uuid}> |
| | | <div className={'menu-group-edit-box ' + (paddingTop ? 'padding ' : '') + (group.setting.layout || '')} style={_style} id={group.uuid}> |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <NormalForm title="分组设置" width={700} update={this.updateWrap} getForms={this.getWrapForms}> |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'array', // 组件属性 - 数据格式 |
| | | pageable: false, // 组件属性 - 是否可分页 |
| | | switchable: false, // 组件属性 - 数据是否可切换 |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | width: 24, |
| | | name: card.name, |
| | | subtype: card.subtype, |
| | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { |
| | | let _card = {...this.state.card} |
| | | _card.style = {..._card.style, ...style} |
| | | |
| | | this.setState({ card: _card }) |
| | | this.props.updateConfig(_card) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | <EditOutlined className="edit" onClick={() => editCard(id)} /> |
| | | <CopyOutlined className="copy" onClick={() => copyCard(id)} /> |
| | | <CloseOutlined className="close" onClick={() => delCard(id)} /> |
| | | {type !== 'datacard' ? <FontColorsOutlined className="style" title="调整样式" onClick={() => changeStyle(id)}/> : ''} |
| | | {type !== 'datacard' && type !== 'basetable' ? <FontColorsOutlined className="style" title="调整样式" onClick={() => changeStyle(id)}/> : ''} |
| | | {hasProfile ? <ProfileOutlined className="profile" title="验证" onClick={() => profileCard(id)} /> : null} |
| | | </div> |
| | | } trigger="hover"> |
| | |
| | | accept: 'action', |
| | | drop(item) { |
| | | if (item.$init) { // 拖拽添加 |
| | | let newcard = {} |
| | | newcard.uuid = Utils.getuuid() |
| | | newcard.focus = true |
| | | |
| | | if (item.class === 'element') { |
| | | delete item.overIndex |
| | | return |
| | | } else { |
| | | } |
| | | let newcard = {} |
| | | newcard.uuid = Utils.getuuid() |
| | | newcard.focus = true |
| | | newcard.label = 'button' |
| | | newcard.verify = null |
| | | newcard.show = 'link' |
| | |
| | | newcard.label = item.text |
| | | newcard.class = 'dgreen' |
| | | newcard.Ot = 'notRequired' |
| | | } else if (item.subType === 'excelOut') { |
| | | } else if (newcard.OpenType === 'excelOut') { |
| | | newcard.label = item.text |
| | | newcard.execSuccess = 'never' |
| | | newcard.class = 'dgreen' |
| | | } |
| | | } |
| | | |
| | | if (item.overIndex) { |
| | |
| | | import { btnCustomClasses } from '@/utils/option.js' |
| | | import { btnCustomClasses, btnClasses } from '@/utils/option.js' |
| | | |
| | | |
| | | /** |
| | |
| | | |
| | | return forms |
| | | } |
| | | |
| | | /** |
| | | * @description 获取按钮表单配置信息 |
| | | * @param {*} card 编辑按钮 |
| | | * @param {*} functip 生成存储过程提示 |
| | | * @param {*} setting 组件配置 |
| | | * @param {*} usefulFields 存储过程可用的开始字段 |
| | | */ |
| | | export function getBaseTableActionForm (card, functip, config, usefulFields) { |
| | | let viewType = sessionStorage.getItem('editMenuType') // 弹窗 popview |
| | | let printTemps = sessionStorage.getItem('printTemps') |
| | | printTemps = printTemps ? JSON.parse(printTemps) : [] |
| | | let setting = config.setting || {} |
| | | let columns = config.columns || [] |
| | | let modules = [] |
| | | |
| | | let opentypes = [ |
| | | { |
| | | value: 'pop', |
| | | text: '弹窗(表单)' |
| | | }, { |
| | | value: 'prompt', |
| | | text: '提示框' |
| | | }, { |
| | | value: 'exec', |
| | | text: '直接执行' |
| | | }, { |
| | | value: 'excelIn', |
| | | text: '导入Excel' |
| | | }, { |
| | | value: 'excelOut', |
| | | text: '导出Excel' |
| | | }, { |
| | | value: 'popview', |
| | | text: '弹窗(标签)' |
| | | }, { |
| | | value: 'tab', |
| | | text: '标签页' |
| | | }, { |
| | | value: 'innerpage', |
| | | text: '新页面' |
| | | }, { |
| | | value: 'funcbutton', |
| | | text: '功能按钮' |
| | | } |
| | | ] |
| | | |
| | | let pageTemps = [ |
| | | { value: 'billprint', text: '单据打印' }, |
| | | { value: 'pay', text: '支付' }, |
| | | { value: 'custom', text: '自定义' } |
| | | ] |
| | | |
| | | let funTypes = [ |
| | | { value: 'print', text: '标签打印' }, |
| | | { value: 'refund', text: '退款' }, |
| | | { value: 'closetab', text: '标签关闭' }, |
| | | { value: 'changeuser', text: '切换用户' }, |
| | | { value: 'megvii', text: '旷视面板机' }, |
| | | { value: 'filezip', text: '文件压缩包' }, |
| | | ] |
| | | |
| | | let menulist = sessionStorage.getItem('fstMenuList') |
| | | if (menulist) { |
| | | try { |
| | | menulist = JSON.parse(menulist) |
| | | } catch (e) { |
| | | menulist = [] |
| | | } |
| | | } else { |
| | | menulist = [] |
| | | } |
| | | |
| | | let refresh = [] |
| | | if (viewType === 'popview') { // 弹窗标签 |
| | | opentypes = opentypes.filter(item => item.value !== 'popview' && item.value !== 'funcbutton') |
| | | refresh.push({ |
| | | value: 'closepoptab', // 关闭弹窗标签 |
| | | text: '关闭弹窗' |
| | | }) |
| | | } |
| | | |
| | | if (card.OpenType === 'form') { // 拖拽添加类型转换 |
| | | card.OpenType = 'pop' |
| | | } |
| | | |
| | | let forms = [ |
| | | { |
| | | type: 'select', |
| | | key: 'OpenType', |
| | | label: '打开方式', |
| | | initVal: card.OpenType, |
| | | required: true, |
| | | options: opentypes |
| | | }, |
| | | { |
| | | type: 'text', |
| | | key: 'label', |
| | | label: '按钮名称', |
| | | initVal: card.label, |
| | | required: true, |
| | | }, |
| | | { |
| | | type: 'select', |
| | | key: 'funcType', |
| | | label: '功能类型', |
| | | initVal: card.funcType || '', |
| | | required: true, |
| | | options: funTypes |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'subFunc', |
| | | label: '接口名称', |
| | | initVal: card.subFunc || 'addUser', |
| | | required: true, |
| | | options: [ |
| | | { value: 'addUser', text: '添加用户' }, |
| | | ] |
| | | }, |
| | | { |
| | | type: 'select', |
| | | key: 'execMode', |
| | | label: '执行方式', |
| | | initVal: card.execMode || 'exec', |
| | | required: true, |
| | | options: [{ |
| | | value: 'exec', |
| | | text: '直接执行' |
| | | }, { |
| | | value: 'prompt', |
| | | text: '提示框' |
| | | }, { |
| | | value: 'pop', |
| | | text: '弹窗(表单)' |
| | | }] |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'intertype', |
| | | label: '接口类型', |
| | | initVal: card.intertype || 'system', |
| | | required: true, |
| | | options: [] |
| | | }, |
| | | { |
| | | type: 'checkbox', |
| | | key: 'payType', |
| | | label: '支付方式', |
| | | initVal: card.payType || [], |
| | | required: true, |
| | | options: [{ |
| | | value: 'wxpay', |
| | | text: '微信' |
| | | // }, { |
| | | // value: 'alipay', |
| | | // text: '支付宝' |
| | | }] |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'procMode', |
| | | label: '参数处理', |
| | | initVal: card.procMode || (card.innerFunc ? 'inner' : 'system'), |
| | | required: true, |
| | | options: [{ |
| | | value: 'system', |
| | | text: '系统函数' |
| | | }, { |
| | | value: 'inner', |
| | | text: '内部函数' |
| | | }, { |
| | | value: 'none', |
| | | text: '无' |
| | | }] |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'sqlType', |
| | | label: '操作类型', |
| | | initVal: card.sqlType || '', |
| | | required: true, |
| | | options: [] |
| | | }, |
| | | { |
| | | type: 'text', |
| | | key: 'sql', |
| | | label: '表名', |
| | | initVal: card.sql || setting.tableName || '', |
| | | required: true |
| | | }, |
| | | { |
| | | type: 'text', |
| | | key: 'innerFunc', |
| | | label: '内部函数', |
| | | initVal: card.innerFunc || '', |
| | | tooltip: functip, |
| | | fields: usefulFields, |
| | | required: false, |
| | | }, |
| | | { |
| | | type: 'text', |
| | | key: 'urlkey', |
| | | label: '地址字段', |
| | | initVal: card.urlkey || '', |
| | | tooltip: '图片(文件)链接的字段名。', |
| | | required: false, |
| | | readonly: false |
| | | }, |
| | | { |
| | | type: 'select', |
| | | key: 'pageTemplate', |
| | | label: '页面类型', |
| | | initVal: card.pageTemplate || '', |
| | | required: true, |
| | | options: pageTemps |
| | | }, |
| | | { |
| | | type: 'select', |
| | | key: 'printTemp', |
| | | label: '打印模板', |
| | | initVal: card.printTemp || '', |
| | | required: true, |
| | | options: printTemps |
| | | }, |
| | | { |
| | | type: 'cascader', |
| | | key: 'linkmenu', |
| | | label: '关联菜单', |
| | | initVal: card.linkmenu || [], |
| | | required: true, |
| | | extendName: 'MenuNo', |
| | | options: menulist |
| | | }, |
| | | { |
| | | type: 'textarea', |
| | | key: 'url', |
| | | label: '页面地址', |
| | | initVal: card.url || '', |
| | | required: true |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'sysInterface', |
| | | label: '系统接口', |
| | | initVal: card.sysInterface || 'false', |
| | | required: true, |
| | | options: [{ |
| | | value: 'true', |
| | | text: '是' |
| | | }, { |
| | | value: 'false', |
| | | text: '否' |
| | | }] |
| | | }, |
| | | { |
| | | type: 'text', |
| | | key: 'outerFunc', |
| | | label: '外部函数', |
| | | initVal: card.outerFunc || '', |
| | | required: false, |
| | | }, |
| | | { |
| | | type: 'textarea', |
| | | key: 'interface', |
| | | label: '测试地址', |
| | | initVal: card.sysInterface === 'true' ? (window.GLOB.mainSystemApi || '') : (card.interface || ''), |
| | | required: true, |
| | | readonly: card.sysInterface === 'true' |
| | | }, |
| | | { |
| | | type: 'textarea', |
| | | key: 'proInterface', |
| | | label: '正式地址', |
| | | initVal: card.proInterface || '', |
| | | tooltip: '正式系统所使用的接口地址。', |
| | | required: false |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'method', |
| | | label: '请求方式', |
| | | initVal: card.method || 'post', |
| | | required: true, |
| | | options: [{ |
| | | value: 'get', |
| | | text: 'GET' |
| | | }, { |
| | | value: 'post', |
| | | text: 'POST' |
| | | }] |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'cross', |
| | | label: '跨域请求', |
| | | initVal: card.cross || 'true', |
| | | tooltip: '如果自定义接口不支持跨域请求,会通过当前系统转发。', |
| | | required: false, |
| | | options: [{ |
| | | value: 'true', |
| | | text: '支持' |
| | | }, { |
| | | value: 'false', |
| | | text: '不支持' |
| | | }] |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'callbackType', |
| | | label: '回调方式', |
| | | initVal: card.callbackType || (card.callbackFunc ? 'func' : 'none'), |
| | | tooltip: '使用后台脚本执行时,需要配合计划任务。', |
| | | required: true, |
| | | options: [{ |
| | | value: 'script', |
| | | text: '自定义脚本' |
| | | }, { |
| | | value: 'default', |
| | | text: '后台脚本' |
| | | }, { |
| | | value: 'func', |
| | | text: '回调函数' |
| | | }, { |
| | | value: 'none', |
| | | text: '无' |
| | | }] |
| | | }, |
| | | { |
| | | type: 'text', |
| | | key: 'cbTable', |
| | | label: '回调表名', |
| | | initVal: card.cbTable || '', |
| | | required: true |
| | | }, |
| | | { |
| | | type: 'text', |
| | | key: 'callbackFunc', |
| | | label: '回调函数', |
| | | initVal: card.callbackFunc || '', |
| | | required: true |
| | | }, |
| | | { |
| | | type: 'select', |
| | | key: 'Ot', |
| | | label: '行设置', |
| | | initVal: card.Ot || (card.sqlType === 'insert' ? 'notRequired' : 'requiredSgl'), |
| | | required: true, |
| | | options: [] |
| | | }, |
| | | { |
| | | type: 'select', |
| | | key: 'execSuccess', |
| | | label: '成功后', |
| | | initVal: card.execSuccess || 'grid', |
| | | tooltip: refresh.length ? '执行刷新源组件时,请在源按钮中设置关闭后刷新那一项,注:此时会同步刷新当前组件和上级组件-行。' : '选择刷新行时,如果选择多条数据会刷新表格。注:上级组件在数据源中添加。', |
| | | required: true, |
| | | options: [{ |
| | | value: 'never', |
| | | text: '不刷新' |
| | | }, { |
| | | value: 'line', |
| | | text: '刷新行' |
| | | }, { |
| | | value: 'grid', |
| | | text: '刷新当前组件' |
| | | }, { |
| | | value: 'mainline', |
| | | text: '刷新上级组件 - 行' |
| | | }, |
| | | ...refresh] |
| | | }, |
| | | { |
| | | type: 'select', |
| | | key: 'execError', |
| | | label: '失败后', |
| | | initVal: card.execError || 'never', |
| | | tooltip: refresh.length ? '执行刷新源组件时,请在源按钮中设置关闭后刷新那一项,注:此时会同步刷新当前组件和上级组件-行。' : '选择刷新行时,如果选择多条数据会刷新表格,注:上级组件在数据源中添加。', |
| | | required: true, |
| | | options: [{ |
| | | value: 'never', |
| | | text: '不刷新' |
| | | }, { |
| | | value: 'line', |
| | | text: '刷新行' |
| | | }, { |
| | | value: 'grid', |
| | | text: '刷新当前组件' |
| | | }, { |
| | | value: 'mainline', |
| | | text: '刷新上级组件 - 行' |
| | | }, |
| | | ...refresh] |
| | | }, |
| | | { |
| | | type: 'select', |
| | | key: 'popClose', |
| | | label: '关闭后', |
| | | initVal: card.popClose || 'never', |
| | | required: true, |
| | | options: [{ |
| | | value: 'never', |
| | | text: '不刷新' |
| | | }, { |
| | | value: 'grid', |
| | | text: '刷新当前组件' |
| | | }, { |
| | | value: 'mainline', |
| | | text: '刷新上级组件 - 行' |
| | | }] |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'resetPageIndex', |
| | | label: '刷新时', |
| | | initVal: card.resetPageIndex || 'true', |
| | | required: false, |
| | | options: [{ |
| | | value: 'true', |
| | | text: '重置页码' |
| | | }, { |
| | | value: 'false', |
| | | text: '不重置' |
| | | }] |
| | | }, |
| | | { |
| | | type: 'icon', |
| | | key: 'icon', |
| | | label: '图标', |
| | | initVal: card.icon, |
| | | required: false, |
| | | options: [] |
| | | }, |
| | | { |
| | | type: 'select', |
| | | key: 'class', |
| | | label: '颜色', |
| | | initVal: card.class, |
| | | required: false, |
| | | options: btnClasses |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'joint', |
| | | label: '拼接参数', |
| | | initVal: card.joint || 'true', |
| | | required: false, |
| | | options: [{ |
| | | value: 'true', |
| | | text: '是' |
| | | }, { |
| | | value: 'false', |
| | | text: '否' |
| | | }] |
| | | }, |
| | | { |
| | | type: 'text', |
| | | key: 'sheet', |
| | | label: '表名', |
| | | initVal: card.sheet || setting.tableName || '', |
| | | required: true |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'pagination', |
| | | label: '分页', |
| | | initVal: card.pagination || 'false', |
| | | required: false, |
| | | options: [{ |
| | | value: 'true', |
| | | text: '是' |
| | | }, { |
| | | value: 'false', |
| | | text: '否' |
| | | }] |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'search', |
| | | label: '搜索条件', |
| | | initVal: card.search || 'false', |
| | | required: false, |
| | | options: [{ |
| | | value: 'true', |
| | | text: '必填' |
| | | }, { |
| | | value: 'false', |
| | | text: '非必填' |
| | | }] |
| | | }, |
| | | { |
| | | type: 'cascader', |
| | | key: 'syncComponent', |
| | | label: '刷新组件', |
| | | initVal: card.syncComponent || [], |
| | | tooltip: '执行成功后(或弹窗标签关闭时),需要同步刷新的组件。注:选择当前组件的上级组件无效,刷新上级组件请选择成功后“刷新上级组件 - 行”。', |
| | | required: false, |
| | | options: modules |
| | | }, |
| | | { |
| | | type: 'cascader', |
| | | key: 'refreshTab', |
| | | label: '刷新菜单', |
| | | initVal: card.refreshTab || [], |
| | | tooltip: '执行成功后(或功能按钮中标签关闭类型),需要同步刷新的菜单', |
| | | required: false, |
| | | forbid: viewType === 'popview', |
| | | options: menulist |
| | | }, |
| | | { |
| | | type: 'cascader', |
| | | key: 'openmenu', |
| | | label: '打开菜单', |
| | | tooltip: '执行成功后需要打开的菜单。', |
| | | initVal: card.openmenu || [], |
| | | extendName: 'MenuNo', |
| | | required: false, |
| | | allowClear: true, |
| | | options: menulist, |
| | | forbid: viewType === 'popview' |
| | | }, |
| | | { |
| | | type: 'text', |
| | | key: 'output', |
| | | label: '返回值', |
| | | tooltip: '执行成功后的返回值。系统函数可指定返回的变量(以@符开头,返回id时可使用@id@);自定义函数可指定返回字段(如id)。', |
| | | initVal: card.output || '', |
| | | required: false, |
| | | forbid: viewType === 'popview' |
| | | }, |
| | | { |
| | | type: 'text', |
| | | key: 'tipTitle', |
| | | label: '确认提示', |
| | | initVal: card.tipTitle || '', |
| | | tooltip: '注:弹窗(表单)在显示为是否框时有效。', |
| | | required: false |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'display', |
| | | label: '显示方式', |
| | | initVal: card.display || 'modal', |
| | | required: true, |
| | | options: [{ |
| | | value: 'modal', |
| | | text: '模态框' |
| | | }, { |
| | | value: 'drawer', |
| | | text: '抽屉' |
| | | }] |
| | | }, |
| | | { |
| | | type: 'number', |
| | | key: 'ratio', |
| | | min: 1, |
| | | max: 3000, |
| | | precision: 0, |
| | | label: '比例', |
| | | initVal: card.ratio || 85, |
| | | tooltip: '模态框或抽屉的宽度,小于100为窗口宽度(或高度)百分比,大于100为像素值。', |
| | | required: true |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'placement', |
| | | label: '抽屉方向', |
| | | initVal: card.placement || 'right', |
| | | required: false, |
| | | options: [{ |
| | | value: 'right', |
| | | text: '右侧' |
| | | }, { |
| | | value: 'left', |
| | | text: '左侧' |
| | | }, { |
| | | value: 'top', |
| | | text: '上侧' |
| | | }, { |
| | | value: 'bottom', |
| | | text: '下侧' |
| | | }] |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'clickouter', |
| | | label: '点击蒙层', |
| | | initVal: card.clickouter || 'unclose', |
| | | required: false, |
| | | options: [{ |
| | | value: 'unclose', |
| | | text: '不关闭' |
| | | }, { |
| | | value: 'close', |
| | | text: '关闭' |
| | | }] |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'control', |
| | | label: '按钮控制', |
| | | initVal: card.control || (card.controlField ? 'disabled' : ''), |
| | | tooltip: '当选择禁用或隐藏,且字段值与控制值相等时,按钮会隐藏或禁用。当选择上级,主表字段值与控制值相等或主表字段值不存在时,按钮会隐藏。注:多个值用逗号分隔', |
| | | required: false, |
| | | options: [{ |
| | | value: '', |
| | | text: '无' |
| | | }, { |
| | | value: 'disabled', |
| | | text: '禁用' |
| | | }, { |
| | | value: 'hidden', |
| | | text: '隐藏' |
| | | }, { |
| | | value: 'parent', |
| | | text: '上级' |
| | | }] |
| | | }, |
| | | { |
| | | type: 'select', |
| | | key: 'controlField', |
| | | label: '控制字段', |
| | | initVal: card.controlField || '', |
| | | required: true, |
| | | allowClear: true, |
| | | options: columns |
| | | }, |
| | | { |
| | | type: 'text', |
| | | key: 'controlVal', |
| | | label: '控制值', |
| | | initVal: card.controlVal || '', |
| | | required: false |
| | | }, |
| | | { |
| | | type: 'text', |
| | | key: 'reason', |
| | | label: '禁用原因', |
| | | initVal: card.reason || '', |
| | | required: false |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'hidden', |
| | | label: '隐藏', |
| | | initVal: card.hidden || 'false', |
| | | tooltip: '隐藏后按钮在页面中不显示,且不参与权限分配。', |
| | | required: false, |
| | | options: [{ |
| | | value: 'false', |
| | | text: '否' |
| | | }, { |
| | | value: 'true', |
| | | text: '是' |
| | | }] |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'progress', |
| | | label: '进度提示', |
| | | initVal: card.progress || 'number', |
| | | required: false, |
| | | options: [{ |
| | | value: 'number', |
| | | text: '剩余数' |
| | | }, { |
| | | value: 'progressbar', |
| | | text: '进度条' |
| | | }] |
| | | } |
| | | ] |
| | | |
| | | return forms |
| | | } |
| | |
| | | import { Modal, notification, Button } from 'antd' |
| | | |
| | | import Utils, { FuncUtils } from '@/utils/utils.js' |
| | | import { getActionForm } from './formconfig' |
| | | import { getActionForm, getBaseTableActionForm } from './formconfig' |
| | | import asyncSpinComponent from '@/utils/asyncSpinComponent' |
| | | |
| | | import MKEmitter from '@/utils/events.js' |
| | |
| | | functip = '' |
| | | } |
| | | |
| | | if (config.subtype === 'basetable') { |
| | | this.setState({ |
| | | visible: true, |
| | | card: card, |
| | | formlist: getBaseTableActionForm(card, functip, config, usefulFields) |
| | | }) |
| | | return |
| | | } |
| | | |
| | | let supId = '' |
| | | if (config.setting && config.setting.supModule) { |
| | | let pid = config.setting.supModule[config.setting.supModule.length - 1] |
| | |
| | | */ |
| | | handleSubmit = () => { |
| | | const { config } = this.props |
| | | let color = { primary: '#1890ff', yellow: '#c49f47', orange: 'orange', danger: '#ff4d4f', green: '#26C281', dgreen: '#32c5d2', purple: '#8E44AD', cyan: '#13c2c2', gray: '#666666' } |
| | | let color = { primary: '#1890ff', yellow: '#c49f47', orange: 'orange', danger: '#ff4d4f', green: '#26C281', dgreen: '#32c5d2', purple: '#8E44AD', cyan: '#13c2c2', gray: '#666666', default: '#333333' } |
| | | let _actionlist = fromJS(this.state.actionlist).toJS() |
| | | |
| | | this.actionFormRef.handleConfirm().then(btn => { |
| | |
| | | } |
| | | |
| | | if (item.uuid === btn.uuid) { |
| | | if (config.subtype === 'basetable') { |
| | | let _c = btn.class.replace('border-', '') |
| | | if (btn.class.indexOf('border') > -1 || btn.class === 'default') { |
| | | btn.style = {color: color[_c], backgroundColor: '#fff', borderColor: color[_c]} |
| | | } else { |
| | | btn.style = {color: '#fff', backgroundColor: color[_c], borderColor: color[_c]} |
| | | } |
| | | } else { |
| | | btn.style = item.style || {} |
| | | if (btn.class !== item.class || btn.show !== item.show || !btn.style.color || item.focus) { |
| | | if (btn.show === 'icon') { |
| | |
| | | } else { |
| | | btn.style.color = '#ffffff' |
| | | btn.style.backgroundColor = color[btn.class] |
| | | } |
| | | } |
| | | } |
| | | return btn |
| | |
| | | <div className={'model-menu-action-list length' + actionlist.length}> |
| | | <DragElement |
| | | list={actionlist} |
| | | type={appType === 'mob' ? config.subtype : ''} |
| | | type={appType === 'mob' || config.subtype === 'basetable' ? config.subtype : ''} |
| | | handleList={this.handleList} |
| | | dropButton={this.dropButton} |
| | | handleMenu={this.handleAction} |
| | |
| | | * @param {object} card // 搜索条件对象 |
| | | */ |
| | | export function getColumnForm (card, fields = []) { |
| | | let appType = sessionStorage.getItem('appType') |
| | | let roleList = sessionStorage.getItem('sysRoles') |
| | | if (roleList) { |
| | | try { |
| | |
| | | roleList = [] |
| | | } |
| | | |
| | | let menulist = [] |
| | | |
| | | if (appType === 'pc') { |
| | | menulist = sessionStorage.getItem('appMenus') |
| | | } else if (!appType) { |
| | | menulist = sessionStorage.getItem('fstMenuList') |
| | | } |
| | | let menulist = sessionStorage.getItem('fstMenuList') |
| | | |
| | | if (menulist) { |
| | | try { |
| | |
| | | }) |
| | | } |
| | | |
| | | if (!card.linkurl && (!card.linkmenu || card.linkmenu.length === 0)) { |
| | | card.perspective = '' |
| | | } |
| | | |
| | | return [ |
| | | { |
| | | type: 'text', |
| | |
| | | options: options |
| | | }, |
| | | { |
| | | type: 'select', |
| | | type: card.isSub ? 'select' : 'text', |
| | | key: 'field', |
| | | label: '字段', |
| | | initVal: card.field, |
| | | required: true, |
| | | options: fields |
| | | options: card.isSub ? fields : [] |
| | | }, |
| | | { |
| | | type: 'select', |
| | | type: 'text', |
| | | key: 'nameField', |
| | | label: '名称字段', |
| | | initVal: card.nameField || '', |
| | | required: false, |
| | | options: [{uuid: 'empty', field: '', label: '空'}, ...fields] |
| | | required: false |
| | | }, |
| | | { |
| | | type: 'number', |
| | |
| | | value: 'linkurl', |
| | | text: '链接' |
| | | }], |
| | | forbidden: appType === 'mob' |
| | | }, |
| | | { |
| | | type: appType === 'pc' ? 'select' : 'cascader', |
| | | type: 'cascader', |
| | | key: 'linkmenu', |
| | | label: '菜单', |
| | | initVal: card.linkmenu || (appType === 'pc' ? '' : []), |
| | | initVal: card.linkmenu || [], |
| | | required: true, |
| | | options: menulist, |
| | | forbidden: appType === 'mob' |
| | | options: menulist |
| | | }, |
| | | { |
| | | type: 'textarea', |
| | | key: 'linkurl', |
| | | label: '链接地址', |
| | | initVal: card.linkurl || '', |
| | | required: true, |
| | | forbidden: appType === 'mob' |
| | | required: true |
| | | }, |
| | | { |
| | | type: 'multiselect', |
| | |
| | | initVal: card.linkfields || [], |
| | | required: false, |
| | | options: fields, |
| | | forbidden: appType === 'mob' |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | key: 'open', |
| | | label: '打开方式', |
| | | initVal: card.open || 'blank', |
| | | required: false, |
| | | forbid: appType !== 'pc', |
| | | options: [ |
| | | { value: 'blank', text: '新窗口' }, |
| | | { value: 'self', text: '当前窗口' } |
| | | ] |
| | | }, |
| | | { |
| | | type: 'radio', |
| | |
| | | label: '黑名单', |
| | | initVal: card.blacklist || [], |
| | | required: false, |
| | | options: roleList, |
| | | forbidden: appType === 'mob' |
| | | options: roleList |
| | | } |
| | | ] |
| | | } |
| | |
| | | const EditColumn = asyncIconComponent(() => import('./editColumn')) |
| | | const MarkColumn = asyncIconComponent(() => import('@/menu/components/share/markcomponent')) |
| | | const CardCellComponent = asyncComponent(() => import('@/menu/components/card/cardcellcomponent')) |
| | | const MobPagination = asyncIconComponent(() => import('@/menu/components/share/mobPagination')) |
| | | const PasteComponent = asyncIconComponent(() => import('@/components/paste')) |
| | | |
| | | class HeaderCol extends Component { |
| | |
| | | |
| | | return !is(fromJS(column), fromJS(nextProps.column)) || |
| | | !is(fromJS(config.columns), fromJS(nextProps.config.columns)) || |
| | | !is(fromJS(config.action), fromJS(nextProps.config.action)) || |
| | | !is(fromJS(config.search), fromJS(nextProps.config.search)) |
| | | !is(fromJS(config.action), fromJS(nextProps.config.action)) |
| | | } |
| | | |
| | | render() { |
| | |
| | | } |
| | | |
| | | state = { |
| | | appType: sessionStorage.getItem('appType'), |
| | | tableId: '', |
| | | data: [{uuid: Utils.getuuid()}], |
| | | refresh: false, // 强制刷新 |
| | |
| | | |
| | | return !is(fromJS(this.state), fromJS(nextState)) || |
| | | !is(fromJS(config.wrap), fromJS(nextProps.config.wrap)) || |
| | | !is(fromJS(config.search), fromJS(nextProps.config.search)) || |
| | | !is(fromJS(config.action), fromJS(nextProps.config.action)) || |
| | | config.setting.laypage !== nextProps.config.setting.laypage |
| | | } |
| | |
| | | } |
| | | |
| | | deleteCol = (col) => { |
| | | const { appType } = this.state |
| | | let _columns = fromJS(this.state.columns).toJS() |
| | | |
| | | _columns = this.loopDelCol(_columns, col) |
| | |
| | | this.props.updatecolumn({...this.props.config, cols: _columns}) |
| | | }) |
| | | |
| | | if (col.type !== 'action' || appType === 'mob') return |
| | | if (col.type !== 'action') return |
| | | |
| | | let uuids = [] |
| | | col.elements && col.elements.forEach(c => { |
| | | if (appType === 'pc' && c.OpenType !== 'popview') return |
| | | if (c.OpenType !== 'popview') return |
| | | |
| | | uuids.push(c.uuid) |
| | | }) |
| | |
| | | |
| | | render() { |
| | | const { config } = this.props |
| | | const { fields, card, lineMarks, tableId, appType } = this.state |
| | | const { fields, card, lineMarks, tableId } = this.state |
| | | const components = { |
| | | header: { |
| | | cell: DragableHeaderCol |
| | |
| | | dataSource={this.state.data} |
| | | rowSelection={config.wrap.tableType ? { type: 'radio' } : null} |
| | | columns={columns} |
| | | pagination={appType !== 'mob' ? { |
| | | pagination={{ |
| | | current: 1, |
| | | pageSize: 10, |
| | | pageSizeOptions: ['10', '25', '50', '100', '500', '1000'], |
| | | showSizeChanger: true, |
| | | total: 58, |
| | | showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条` |
| | | } : false} |
| | | }} |
| | | /> |
| | | {appType === 'mob' && config.setting.laypage !== 'fasle' ? <MobPagination /> : null} |
| | | </DndProvider> |
| | | <EditColumn column={card} fields={fields} submitCol={this.submitCol} cancelCol={this.cancelCol}/> |
| | | </div> |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'array', // 组件属性 - 数据格式 |
| | | pageable: true, // 组件属性 - 是否可分页 |
| | | switchable: true, // 组件属性 - 数据是否可切换 |
| | |
| | | } |
| | | } |
| | | } |
| | | .model-table-search-list.length0 { |
| | | min-height: 10px; |
| | | border-bottom: 0; |
| | | >.quickly-add { |
| | | right: unset; |
| | | left: -8px; |
| | | bottom: 0; |
| | | } |
| | | >.ant-row { |
| | | display: none; |
| | | } |
| | | >.ant-switch { |
| | | display: none; |
| | | } |
| | | } |
| | | .model-table-search-list.length0 + .length0 { |
| | | margin-top: -25px; |
| | | } |
| | | .anticon-tool { |
| | | position: absolute; |
| | | z-index: 2; |
| | |
| | | * @description Wrap表单配置信息 |
| | | */ |
| | | export default function (wrap, action = [], columns = []) { |
| | | let roleList = sessionStorage.getItem('sysRoles') |
| | | let appType = sessionStorage.getItem('appType') |
| | | |
| | | if (roleList) { |
| | | try { |
| | | roleList = JSON.parse(roleList) |
| | | } catch (e) { |
| | | roleList = [] |
| | | } |
| | | } else { |
| | | roleList = [] |
| | | } |
| | | |
| | | const wrapForm = [ |
| | | // { |
| | | // type: 'text', |
| | | // field: 'title', |
| | | // label: '标题', |
| | | // initval: wrap.title || '', |
| | | // required: false |
| | | // }, |
| | | // { |
| | | // type: 'text', |
| | | // field: 'name', |
| | | // label: '组件名称', |
| | | // initval: wrap.name || '', |
| | | // tooltip: '用于组件间的区分。', |
| | | // required: true |
| | | // }, |
| | | // { |
| | | // type: 'number', |
| | | // field: 'width', |
| | | // label: '宽度', |
| | | // initval: wrap.width || 24, |
| | | // tooltip: '栅格布局,每行等分为24列。', |
| | | // min: 1, |
| | | // max: 24, |
| | | // precision: 0, |
| | | // required: true |
| | | // }, |
| | | { |
| | | type: 'number', |
| | | field: 'height', |
| | | label: '表格高度', |
| | | initval: wrap.height || '', |
| | | tooltip: '表格高度,空值时高度自适应。', |
| | | min: 10, |
| | | max: 3000, |
| | | precision: 0, |
| | | required: false, |
| | | forbid: appType === 'mob' |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | field: 'tableType', |
| | |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | field: 'tableHeader', |
| | | label: '表头', |
| | | initval: wrap.tableHeader || 'show', |
| | | required: false, |
| | | options: [ |
| | | {value: 'show', label: '显示'}, |
| | | {value: 'hidden', label: '隐藏'}, |
| | | ] |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | field: 'collapse', |
| | | label: '可收起', |
| | | initval: wrap.collapse || 'false', |
| | | field: 'actionfixed', |
| | | label: '按钮固定', |
| | | initval: wrap.actionfixed || 'false', |
| | | required: false, |
| | | options: [ |
| | | {value: 'true', label: '是'}, |
| | | {value: 'false', label: '否'}, |
| | | ], |
| | | forbid: appType === 'mob' || appType === 'pc' |
| | | ] |
| | | }, |
| | | { |
| | | type: 'radio', |
| | |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | field: 'mode', |
| | | label: '模式', |
| | | initval: wrap.mode || 'default', |
| | | required: false, |
| | | options: [ |
| | | {value: 'default', label: '常规'}, |
| | | {value: 'ghost', label: '透明'}, |
| | | ] |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | field: 'selected', |
| | | label: '首行选中', |
| | | initval: wrap.selected || 'false', |
| | |
| | | {value: 'false', label: '无'}, |
| | | {value: 'init', label: '初始化'}, |
| | | {value: 'always', label: '数据加载'}, |
| | | ] |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | field: 'tableMode', |
| | | label: '加载模式', |
| | | initval: wrap.tableMode || 'compatible', |
| | | tooltip: '使用急速模式时,表格中的标记、双击事件、格式化、行合并、前缀、后缀、字段透视等效果将无效,且数据都会以文本格式显示。', |
| | | required: false, |
| | | options: [ |
| | | {value: 'compatible', label: '兼容'}, |
| | | {value: 'fast', label: '急速'}, |
| | | ] |
| | | }, |
| | | { |
| | |
| | | required: false |
| | | }, |
| | | { |
| | | type: 'number', |
| | | field: 'height', |
| | | label: '表格高度', |
| | | initval: wrap.height || '', |
| | | tooltip: '表格高度,空值时高度自适应。', |
| | | min: 10, |
| | | max: 3000, |
| | | precision: 0, |
| | | required: false, |
| | | }, |
| | | { |
| | | type: 'select', |
| | | field: 'doubleClick', |
| | | label: '双击事件', |
| | |
| | | required: false, |
| | | allowClear: true, |
| | | options: action.map(item => ({value: item.uuid, label: item.label})), |
| | | forbid: appType === 'mob' |
| | | }, |
| | | { |
| | | type: 'select', |
| | |
| | | initval: wrap.controlVal || '', |
| | | tooltip: '当字段值与禁用值相等时,行数据会禁用,多个值用逗号分隔。', |
| | | required: false |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | field: 'empty', |
| | | label: '空值隐藏', |
| | | initval: wrap.empty || 'show', |
| | | tooltip: '当查询数据为空时,隐藏该组件。', |
| | | required: false, |
| | | options: [ |
| | | {value: 'show', label: '否'}, |
| | | {value: 'hidden', label: '是'}, |
| | | ], |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | field: 'supKey', |
| | | label: '上级主键', |
| | | initval: wrap.supKey || 'true', |
| | | tooltip: '当设置上级组件时,上级主键值为空是否进行数据查询。', |
| | | required: false, |
| | | options: [ |
| | | {value: 'true', label: '验证'}, |
| | | {value: 'false', label: '忽略'}, |
| | | ], |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | field: 'permission', |
| | | label: '权限验证', |
| | | initval: wrap.permission || 'false', |
| | | required: false, |
| | | options: [ |
| | | {value: 'true', label: '启用'}, |
| | | {value: 'false', label: '禁用'}, |
| | | ], |
| | | forbid: !appType |
| | | }, |
| | | { |
| | | type: 'multiselect', |
| | | field: 'blacklist', |
| | | label: '黑名单', |
| | | initval: wrap.blacklist || [], |
| | | required: false, |
| | | options: roleList, |
| | | forbid: !!appType |
| | | }, |
| | | } |
| | | ] |
| | | |
| | | return wrapForm |
| | |
| | | |
| | | return !is(fromJS(column), fromJS(nextProps.column)) || |
| | | !is(fromJS(config.columns), fromJS(nextProps.config.columns)) || |
| | | !is(fromJS(config.action), fromJS(nextProps.config.action)) || |
| | | !is(fromJS(config.search), fromJS(nextProps.config.search)) |
| | | !is(fromJS(config.action), fromJS(nextProps.config.action)) |
| | | } |
| | | |
| | | render() { |
| | |
| | | return !is(fromJS(this.state), fromJS(nextState)) || |
| | | !is(fromJS(config.wrap), fromJS(nextProps.config.wrap)) || |
| | | !is(fromJS(config.submit), fromJS(nextProps.config.submit)) || |
| | | !is(fromJS(config.search), fromJS(nextProps.config.search)) || |
| | | !is(fromJS(config.action), fromJS(nextProps.config.action)) || |
| | | config.setting.laypage !== nextProps.config.setting.laypage |
| | | } |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'array', // 组件属性 - 数据格式 |
| | | pageable: true, // 组件属性 - 是否可分页 |
| | | switchable: false, // 组件属性 - 数据是否可切换 |
| | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { |
| | | let _card = {...this.state.card} |
| | | _card.style = {..._card.style, ...style} |
| | | |
| | | this.setState({ card: _card }) |
| | | this.props.updateConfig(_card) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | return !is(fromJS(column), fromJS(nextProps.column)) || |
| | | !is(fromJS(config.columns), fromJS(nextProps.config.columns)) || |
| | | !is(fromJS(config.action), fromJS(nextProps.config.action)) || |
| | | !is(fromJS(config.search), fromJS(nextProps.config.search)) |
| | | !is(fromJS(config.action), fromJS(nextProps.config.action)) |
| | | } |
| | | |
| | | render() { |
| | |
| | | |
| | | return !is(fromJS(this.state), fromJS(nextState)) || |
| | | !is(fromJS(config.wrap), fromJS(nextProps.config.wrap)) || |
| | | !is(fromJS(config.search), fromJS(nextProps.config.search)) || |
| | | !is(fromJS(config.action), fromJS(nextProps.config.action)) || |
| | | config.setting.laypage !== nextProps.config.setting.laypage |
| | | } |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'array', // 组件属性 - 数据格式 |
| | | pageable: true, // 组件属性 - 是否可分页 |
| | | switchable: true, // 组件属性 - 数据是否可切换 |
| | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { |
| | | let _card = {...this.state.card} |
| | | _card.style = {..._card.style, ...style} |
| | | |
| | | this.setState({ card: _card }) |
| | | this.props.updateConfig(_card) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | const dragIndex = newOrder.indexOf(dragKey) |
| | | const hoverIndex = newOrder.indexOf(hoverKey) |
| | | |
| | | if (dragIndex === -1) return |
| | | |
| | | newOrder.splice(dragIndex, 1) |
| | | newOrder.splice(hoverIndex, 0, dragKey) |
| | | |
| | |
| | | let _tabs = { |
| | | uuid: tabs.uuid, |
| | | type: tabs.type, |
| | | tabId: tabs.tabId || '', |
| | | parentId: tabs.parentId || '', |
| | | subtype: tabs.subtype, |
| | | width: 24, |
| | | name: tabs.name, |
| | | setting: {width: 24, position: 'top', tabStyle: 'line', name: tabs.name}, |
| | | style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' }, |
| | | subtabs: [ |
| | | { uuid: Utils.getuuid(), parentId: tabs.uuid, label: 'Tab 1', icon: '', components: [] }, |
| | | { uuid: Utils.getuuid(), parentId: tabs.uuid, label: 'Tab 2', icon: '', components: [] }, |
| | | { uuid: Utils.getuuid(), parentId: tabs.uuid, label: 'Tab 3', icon: '', components: [] } |
| | | { uuid: Utils.getuuid(), label: 'Tab 1', icon: '', components: [] }, |
| | | { uuid: Utils.getuuid(), label: 'Tab 2', icon: '', components: [] }, |
| | | { uuid: Utils.getuuid(), label: 'Tab 3', icon: '', components: [] } |
| | | ] |
| | | } |
| | | this.setState({ |
| | |
| | | return !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('submitSearch', this.getSearch) |
| | | MKEmitter.addListener('tabsChange', this.handleTabsChange) |
| | | MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle) |
| | | } |
| | | |
| | | /** |
| | | * @description 组件销毁,清除state更新,清除快捷键设置 |
| | | */ |
| | |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | MKEmitter.removeListener('submitSearch', this.getSearch) |
| | | MKEmitter.removeListener('tabsChange', this.handleTabsChange) |
| | | MKEmitter.removeListener('submitComponentStyle', this.updateComponentStyle) |
| | | } |
| | | |
| | | updateComponentStyle = (parentId, keys, style) => { |
| | | const { tabs } = this.state |
| | | |
| | | if (tabs.subtabs.findIndex(tab => tab.uuid === parentId) === -1) return |
| | | |
| | | let _tabs = fromJS(tabs).toJS() |
| | | let _tabs_ = fromJS(tabs).toJS() |
| | | |
| | | let components = [] |
| | | _tabs.subtabs.forEach(tab => { |
| | | if (tab.uuid === parentId) { |
| | | components = tab.components.map(item => { |
| | | if (keys.includes(item.uuid)) { |
| | | item.style = {...item.style, ...style} |
| | | } |
| | | return item |
| | | }) |
| | | tab.components = [] |
| | | } |
| | | }) |
| | | |
| | | _tabs_.subtabs = _tabs_.subtabs.map(tab => { |
| | | if (tab.uuid === parentId) { |
| | | tab.components = components |
| | | } |
| | | return tab |
| | | }) |
| | | |
| | | this.setState({tabs: _tabs}, () => { |
| | | this.updateComponent(_tabs_) |
| | | }) |
| | | } |
| | | |
| | | changeStyle = () => { |
| | |
| | | this.props.updateConfig(_card) |
| | | } |
| | | |
| | | handleTabsChange = (parentId) => { |
| | | const { tabs } = this.state |
| | | |
| | | if (parentId === tabs.parentId) { |
| | | MKEmitter.emit('tabsChange', tabs.uuid) |
| | | getSubIds = (components, ids) => { |
| | | components.forEach(item => { |
| | | if (item.type === 'tabs') { |
| | | item.subtabs.forEach(tab => { |
| | | this.getSubIds(tab.components, ids) |
| | | }) |
| | | } else if (item.type === 'group') { |
| | | this.getSubIds(item.components, ids) |
| | | } else { |
| | | ids.push(item.uuid) |
| | | } |
| | | }) |
| | | } |
| | | |
| | | updateComponent = (component) => { |
| | |
| | | |
| | | if (!is(fromJS(tabs.setting), fromJS(component.setting)) || !is(fromJS(tabs.style), fromJS(component.style))) { |
| | | // 注册事件-标签变化,通知标签内元素 |
| | | MKEmitter.emit('tabsChange', tabs.uuid) |
| | | let ids = [] |
| | | tabs.subtabs.forEach(tab => { |
| | | this.getSubIds(tab.components, ids) |
| | | }) |
| | | MKEmitter.emit('tabsChange', ids.join(',')) |
| | | } |
| | | |
| | | component.width = component.setting.width |
| | |
| | | this.props.updateConfig(tabs) |
| | | } |
| | | |
| | | getSearch = (config) => { |
| | | const { tabs } = this.state |
| | | |
| | | if (tabs.uuid !== config.uuid) return |
| | | |
| | | let _tabs = fromJS(tabs).toJS() |
| | | |
| | | _tabs.subtabs = _tabs.subtabs.map(t => { |
| | | if (t.uuid === config.tabId) { |
| | | t.search = config.search |
| | | } |
| | | return t |
| | | }) |
| | | |
| | | this.setState({ |
| | | tabs: _tabs |
| | | }) |
| | | this.props.updateConfig(_tabs) |
| | | } |
| | | |
| | | setSearch = (tab) => { |
| | | const { tabs } = this.state |
| | | let card = { |
| | | uuid: tabs.uuid, |
| | | tabId: tab.uuid, |
| | | search: tab.search |
| | | } |
| | | |
| | | if (!card.search) { |
| | | card.search = { |
| | | floor: 1, |
| | | setting: { type: 'title', field: '', title: '', focus: 'true', btn: 'hidden' }, |
| | | groups: [], |
| | | fields: [] |
| | | } |
| | | } |
| | | MKEmitter.emit('changeSearch', card) |
| | | } |
| | | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.tabs) |
| | | } |
| | | } |
| | | |
| | | getTabForms = (tab) => { |
| | | const { tabs } = this.state |
| | | |
| | | if (!tab) { |
| | | tab = { |
| | | uuid: '', |
| | | parentId: tabs.uuid, |
| | | label: '', |
| | | icon: '', |
| | | components: [] |
| | |
| | | let _style = resetStyle(tabs.style) |
| | | |
| | | return ( |
| | | <div className={'menu-tabs-edit-box ' + (tabs.setting.display || '')} style={_style} onClick={this.clickComponent} id={tabs.uuid}> |
| | | <div className={'menu-tabs-edit-box ' + (tabs.setting.display || '')} style={_style} id={tabs.uuid}> |
| | | <DraggableTabs defaultActiveKey={defaultActiveKey} tabBarStyle={{background: tabs.setting.backgroundColor || 'transparent'}} tabPosition={tabs.setting.position} type={tabs.setting.tabStyle} tabsMove={this.moveSwitch} onChange={this.onChange}> |
| | | {tabs.subtabs.map(tab => ( |
| | | <TabPane tab={ |
| | |
| | | <span style={{textDecoration: tab.hide === 'true' ? 'line-through' : 'none'}}>{tab.icon ? <MkIcon type={tab.icon} /> : null}{tab.label}</span> |
| | | </Popover> |
| | | } key={tab.uuid} style={{backgroundColor: tab.backgroundColor || 'transparent'}}> |
| | | {/* {appType === 'mob' && tabs.setting.position === 'top' && tabs.setting.display === 'inline-block' && tab.hasSearch === 'icon' ? |
| | | <SearchOutlined className="search-icon" onDoubleClick={() => this.setSearch(tab)}/> : null} */} |
| | | <TabComponents config={tab} handleList={this.updateTabComponent} deleteCard={this.deleteCard} /> |
| | | </TabPane> |
| | | ))} |
| | |
| | | this.setState({visible: true}) |
| | | } |
| | | |
| | | resetconfig = (item, Tab, copyBtns, uuids = {}, floor) => { |
| | | item.tabId = Tab.uuid |
| | | item.parentId = Tab.parentId |
| | | |
| | | resetconfig = (item, copyBtns, uuids = {}) => { |
| | | if (item.type === 'tabs') { |
| | | uuids[item.uuid] = MenuUtils.getuuid() |
| | | item.uuid = uuids[item.uuid] |
| | |
| | | item.subtabs.forEach(tab => { |
| | | uuids[tab.uuid] = MenuUtils.getuuid() |
| | | tab.uuid = uuids[tab.uuid] |
| | | tab.parentId = item.uuid |
| | | |
| | | if (floor >= 3) { |
| | | tab.components = tab.components.filter(cell => cell.type !== 'tabs') |
| | | } |
| | | |
| | | tab.components = tab.components.map(cell => { |
| | | cell = this.resetconfig(cell, tab, copyBtns, uuids, floor + 1) |
| | | cell = this.resetconfig(cell, copyBtns, uuids) |
| | | return cell |
| | | }) |
| | | }) |
| | |
| | | item.name = item.setting.name |
| | | |
| | | item.components = item.components.map(cell => { |
| | | cell.tabId = Tab.uuid |
| | | cell.parentId = Tab.parentId |
| | | |
| | | cell = MenuUtils.resetComponentConfig(cell, copyBtns, uuids) |
| | | |
| | | return cell |
| | |
| | | } |
| | | |
| | | let copyBtns = new Map() |
| | | let floor = MenuUtils.getFloor(Tab.parentId) |
| | | |
| | | res = this.resetconfig(res, Tab, copyBtns, {}, floor) |
| | | res = this.resetconfig(res, copyBtns, {}) |
| | | |
| | | delete res.copyType |
| | | |
| | |
| | | }) |
| | | return |
| | | } |
| | | } else if (item.component === 'tabs') { |
| | | let floor = MenuUtils.getFloor(config.parentId) |
| | | if (floor >= 3 ) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '标签页最多为三重结构!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | } |
| | | |
| | | let name = '' |
| | |
| | | |
| | | let newcard = { |
| | | uuid: Utils.getuuid(), |
| | | tabId: config.uuid, |
| | | parentId: config.parentId, |
| | | type: item.component, |
| | | subtype: item.subtype, |
| | | config: item.config, |
| | |
| | | |
| | | if (dragKey === hoverKey) { |
| | | return; |
| | | } else if (!dragKey) { |
| | | monitor.getItem().added = true |
| | | props.tabsDrop(hoverKey) |
| | | } |
| | | |
| | | props.moveTabNode(dragKey, hoverKey) |
| | |
| | | } |
| | | } |
| | | |
| | | const WrapTabNode = DropTarget('DND_NODE', cardTarget, connect => ({ |
| | | const WrapTabNode = DropTarget('menu', cardTarget, connect => ({ |
| | | connectDropTarget: connect.dropTarget(), |
| | | }))( |
| | | DragSource('DND_NODE', cardSource, (connect, monitor) => ({ |
| | | DragSource('menu', cardSource, (connect, monitor) => ({ |
| | | connectDragSource: connect.dragSource(), |
| | | isDragging: monitor.isDragging(), |
| | | }))(TabNode) |
| | |
| | | const dragIndex = newOrder.indexOf(dragKey) |
| | | const hoverIndex = newOrder.indexOf(hoverKey) |
| | | |
| | | if (dragIndex === -1) { |
| | | this.props.tabsDrop(hoverKey, dragKey) |
| | | return |
| | | } |
| | | |
| | | newOrder.splice(dragIndex, 1) |
| | | newOrder.splice(hoverIndex, 0, dragKey) |
| | | |
| | |
| | | renderTabBar = (props, DefaultTabBar) => ( |
| | | <DefaultTabBar {...props}> |
| | | {node => ( |
| | | <WrapTabNode key={node.key} index={node.key} moveTabNode={this.moveTabNode}> |
| | | <WrapTabNode key={node.key} index={node.key} moveTabNode={this.moveTabNode} tabsDrop={this.props.tabsDrop}> |
| | | {node} |
| | | </WrapTabNode> |
| | | )} |
| | |
| | | ) |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.state), fromJS(nextState)) || |
| | | !is(fromJS(nextProps.children), fromJS(this.props.children)) || |
| | | nextProps.tabPosition !== this.props.tabPosition || |
| | | nextProps.type !== this.props.type |
| | | return !is(fromJS(this.state), fromJS(nextState)) || !is(fromJS(nextProps.children), fromJS(this.props.children)) |
| | | } |
| | | |
| | | render() { |
| | |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Tabs, Popover, Modal } from 'antd' |
| | | import { PlusOutlined, CloseOutlined, EditOutlined, DeleteOutlined, FontColorsOutlined, ToolOutlined } from '@ant-design/icons' |
| | | import { PlusOutlined, CloseOutlined, EditOutlined, DeleteOutlined, ToolOutlined } from '@ant-design/icons' |
| | | |
| | | import MKEmitter from '@/utils/events.js' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | |
| | | import { resetStyle } from '@/utils/utils-custom.js' |
| | | import MenuUtils from '@/utils/utils-custom.js' |
| | | import Utils from '@/utils/utils.js' |
| | | import { getTabForm, getTabsSetForm } from './options' |
| | | import { getTabForm } from './options' |
| | | import './index.scss' |
| | | |
| | | const NormalForm = asyncIconComponent(() => import('@/components/normalform')) |
| | | const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) |
| | | // const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) |
| | | const PasteComponent = asyncIconComponent(() => import('../paste')) |
| | | const TabComponents = asyncComponent(() => import('../tabcomponents')) |
| | | const BaseTable = asyncComponent(() => import('@/menu/components/table/base-table')) |
| | | |
| | | const { TabPane } = Tabs |
| | | const { confirm } = Modal |
| | |
| | | } |
| | | |
| | | state = { |
| | | appType: sessionStorage.getItem('appType'), |
| | | tabs: null, |
| | | editab: null, |
| | | defaultActiveKey: '' |
| | | editab: null |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | |
| | | let _tabs = { |
| | | uuid: tabs.uuid, |
| | | type: tabs.type, |
| | | tabId: tabs.tabId || '', |
| | | parentId: tabs.parentId || '', |
| | | subtype: tabs.subtype, |
| | | width: 24, |
| | | name: tabs.name, |
| | | setting: {width: 24, position: 'top', tabStyle: 'line', name: tabs.name}, |
| | | setting: {}, |
| | | style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' }, |
| | | subtabs: [ |
| | | { uuid: Utils.getuuid(), parentId: tabs.uuid, label: 'Tab 1', icon: '', components: [] }, |
| | | { uuid: Utils.getuuid(), parentId: tabs.uuid, label: 'Tab 2', icon: '', components: [] }, |
| | | { uuid: Utils.getuuid(), parentId: tabs.uuid, label: 'Tab 3', icon: '', components: [] } |
| | | { uuid: Utils.getuuid(), label: '子表1', icon: '', components: [{uuid: Utils.getuuid(), type: 'table', subtype: 'basetable', isNew: true}] }, |
| | | ] |
| | | } |
| | | this.setState({ |
| | | defaultActiveKey: _tabs.subtabs[0].uuid, |
| | | tabs: _tabs |
| | | }) |
| | | this.props.updateConfig(_tabs) |
| | | } else { |
| | | this.setState({ |
| | | defaultActiveKey: window.GLOB.TabsMap.get(tabs.uuid) || '', |
| | | tabs: fromJS(tabs).toJS() |
| | | }) |
| | | } |
| | |
| | | return !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('submitSearch', this.getSearch) |
| | | MKEmitter.addListener('tabsChange', this.handleTabsChange) |
| | | MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle) |
| | | } |
| | | componentDidMount () {} |
| | | |
| | | /** |
| | | * @description 组件销毁,清除state更新,清除快捷键设置 |
| | |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | MKEmitter.removeListener('submitSearch', this.getSearch) |
| | | MKEmitter.removeListener('tabsChange', this.handleTabsChange) |
| | | MKEmitter.removeListener('submitComponentStyle', this.updateComponentStyle) |
| | | } |
| | | |
| | | updateComponentStyle = (parentId, keys, style) => { |
| | | const { tabs } = this.state |
| | | |
| | | if (tabs.subtabs.findIndex(tab => tab.uuid === parentId) === -1) return |
| | | |
| | | let _tabs = fromJS(tabs).toJS() |
| | | let _tabs_ = fromJS(tabs).toJS() |
| | | |
| | | let components = [] |
| | | _tabs.subtabs.forEach(tab => { |
| | | if (tab.uuid === parentId) { |
| | | components = tab.components.map(item => { |
| | | if (keys.includes(item.uuid)) { |
| | | item.style = {...item.style, ...style} |
| | | } |
| | | return item |
| | | }) |
| | | tab.components = [] |
| | | } |
| | | }) |
| | | |
| | | _tabs_.subtabs = _tabs_.subtabs.map(tab => { |
| | | if (tab.uuid === parentId) { |
| | | tab.components = components |
| | | } |
| | | return tab |
| | | }) |
| | | |
| | | this.setState({tabs: _tabs}, () => { |
| | | this.updateComponent(_tabs_) |
| | | }) |
| | | } |
| | | |
| | | changeStyle = () => { |
| | |
| | | this.props.updateConfig(_card) |
| | | } |
| | | |
| | | handleTabsChange = (parentId) => { |
| | | const { tabs } = this.state |
| | | |
| | | if (parentId === tabs.parentId) { |
| | | MKEmitter.emit('tabsChange', tabs.uuid) |
| | | } |
| | | } |
| | | |
| | | updateComponent = (component) => { |
| | | const { tabs } = this.state |
| | | |
| | | if (!is(fromJS(tabs.setting), fromJS(component.setting)) || !is(fromJS(tabs.style), fromJS(component.style))) { |
| | | // 注册事件-标签变化,通知标签内元素 |
| | | MKEmitter.emit('tabsChange', tabs.uuid) |
| | | } |
| | | |
| | | component.width = component.setting.width |
| | | component.name = component.setting.name |
| | | |
| | |
| | | this.props.updateConfig(tabs) |
| | | } |
| | | |
| | | dropTable = (hoverKey, dragKey) => { |
| | | // let tabs = fromJS(this.state.tabs).toJS() |
| | | // let subtab = {} |
| | | // tabs.subtabs.forEach(item => { |
| | | // subtab[item.uuid] = item |
| | | // }) |
| | | |
| | | // tabs.subtabs = [] |
| | | |
| | | // order.forEach(item => { |
| | | // if (subtab[item]) { |
| | | // tabs.subtabs.push(subtab[item]) |
| | | // } |
| | | // }) |
| | | |
| | | // this.setState({tabs}) |
| | | // this.props.updateConfig(tabs) |
| | | } |
| | | |
| | | insert = (item, tab) => { |
| | | let tabs = fromJS(this.state.tabs).toJS() |
| | | |
| | |
| | | this.props.updateConfig(tabs) |
| | | } |
| | | |
| | | getSearch = (config) => { |
| | | const { tabs } = this.state |
| | | |
| | | if (tabs.uuid !== config.uuid) return |
| | | |
| | | let _tabs = fromJS(tabs).toJS() |
| | | |
| | | _tabs.subtabs = _tabs.subtabs.map(t => { |
| | | if (t.uuid === config.tabId) { |
| | | t.search = config.search |
| | | } |
| | | return t |
| | | }) |
| | | |
| | | this.setState({ |
| | | tabs: _tabs |
| | | }) |
| | | this.props.updateConfig(_tabs) |
| | | } |
| | | |
| | | setSearch = (tab) => { |
| | | const { tabs } = this.state |
| | | let card = { |
| | | uuid: tabs.uuid, |
| | | tabId: tab.uuid, |
| | | search: tab.search |
| | | } |
| | | |
| | | if (!card.search) { |
| | | card.search = { |
| | | floor: 1, |
| | | setting: { type: 'title', field: '', title: '', focus: 'true', btn: 'hidden' }, |
| | | groups: [], |
| | | fields: [] |
| | | } |
| | | } |
| | | MKEmitter.emit('changeSearch', card) |
| | | } |
| | | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.tabs) |
| | | } |
| | | } |
| | | |
| | | getTabForms = (tab) => { |
| | | const { tabs } = this.state |
| | | |
| | | if (!tab) { |
| | | tab = { |
| | | uuid: '', |
| | | parentId: tabs.uuid, |
| | | label: '', |
| | | icon: '', |
| | | components: [] |
| | |
| | | |
| | | editab.label = res.label |
| | | editab.icon = res.icon |
| | | // editab.hasSearch = res.hasSearch || '' |
| | | editab.hide = res.hide || 'false' |
| | | editab.backgroundColor = res.backgroundColor |
| | | editab.controlVal = res.controlVal || '' |
| | |
| | | this.props.updateConfig(tabs) |
| | | } |
| | | |
| | | getTabsForms = () => { |
| | | const { tabs } = this.state |
| | | updateConfig = () => { |
| | | |
| | | return getTabsSetForm(tabs.setting, tabs.uuid) |
| | | } |
| | | |
| | | updateTabs = (res) => { |
| | | this.updateComponent({...this.state.tabs, setting: res}) |
| | | } |
| | | |
| | | onChange = (key) => { |
| | | const { tabs } = this.state |
| | | window.GLOB.TabsMap.set(tabs.uuid, key) |
| | | } |
| | | |
| | | render() { |
| | | const { tabs, defaultActiveKey } = this.state |
| | | const { tabs } = this.state |
| | | let _style = resetStyle(tabs.style) |
| | | |
| | | return ( |
| | | <div className={'menu-tabs-edit-box ' + (tabs.setting.display || '')} style={_style} onClick={this.clickComponent} id={tabs.uuid}> |
| | | <DraggableTabs defaultActiveKey={defaultActiveKey} tabBarStyle={{background: tabs.setting.backgroundColor || 'transparent'}} tabPosition={tabs.setting.position} type={tabs.setting.tabStyle} tabsMove={this.moveSwitch} onChange={this.onChange}> |
| | | <div className={'menu-tabs-edit-box ' + (tabs.setting.display || '')} style={_style} id={tabs.uuid}> |
| | | <DraggableTabs tabsMove={this.moveSwitch} tabsDrop={this.dropTable}> |
| | | {tabs.subtabs.map(tab => ( |
| | | <TabPane tab={ |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | |
| | | <NormalForm title="标签编辑" width={800} update={this.updateTab} getForms={() => this.getTabForms(tab)}> |
| | | <EditOutlined style={{color: '#1890ff'}} title="编辑"/> |
| | | </NormalForm> |
| | | <PasteComponent Tab={tab} insert={this.insert} /> |
| | | <CloseOutlined className="close" onClick={() => this.delTab(tab)} /> |
| | | </div> |
| | | } trigger="hover"> |
| | | <span style={{textDecoration: tab.hide === 'true' ? 'line-through' : 'none'}}>{tab.icon ? <MkIcon type={tab.icon} /> : null}{tab.label}</span> |
| | | </Popover> |
| | | } key={tab.uuid} style={{backgroundColor: tab.backgroundColor || 'transparent'}}> |
| | | {/* {appType === 'mob' && tabs.setting.position === 'top' && tabs.setting.display === 'inline-block' && tab.hasSearch === 'icon' ? |
| | | <SearchOutlined className="search-icon" onDoubleClick={() => this.setSearch(tab)}/> : null} */} |
| | | <TabComponents config={tab} handleList={this.updateTabComponent} deleteCard={this.deleteCard} /> |
| | | } key={tab.uuid}> |
| | | <BaseTable card={tab.components[0]} updateConfig={this.updateConfig} /> |
| | | </TabPane> |
| | | ))} |
| | | </DraggableTabs> |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <NormalForm title="添加标签" width={800} update={this.updateTab} getForms={() => this.getTabForms()}> |
| | | <PlusOutlined className="plus" title="添加标签"/> |
| | | </NormalForm> |
| | | <NormalForm title="标签页设置" width={800} update={this.updateTabs} getForms={this.getTabsForms}> |
| | | <EditOutlined style={{color: '#1890ff'}} title="编辑"/> |
| | | </NormalForm> |
| | | <CopyComponent type="tabs" card={tabs}/> |
| | | <FontColorsOutlined className="style" title="调整样式" onClick={this.changeStyle}/> |
| | | <PlusOutlined className="plus" title="添加子表"/> |
| | | <PasteComponent insert={this.insert} /> |
| | | <DeleteOutlined className="close" onClick={() => this.props.deletecomponent(tabs.uuid)} /> |
| | | </div> |
| | | } trigger="hover"> |
| | |
| | | padding-top: 15px; |
| | | } |
| | | } |
| | | .ant-tabs-left-content { |
| | | padding-left: 0; |
| | | } |
| | | .ant-tabs-right-content { |
| | | padding-right: 0; |
| | | } |
| | | .ant-tabs-bottom-bar { |
| | | margin-top: 0; |
| | | } |
| | | |
| | | >.anticon-tool { |
| | | position: absolute; |
| | |
| | | background: rgba(255, 255, 255, 0.55); |
| | | } |
| | | |
| | | .ant-tabs.ant-tabs-left, .ant-tabs.ant-tabs-bottom { |
| | | .tab-shell-inner { |
| | | padding-top: 25px; |
| | | } |
| | | } |
| | | |
| | | .ant-tabs-tabpane-active { |
| | | min-height: 200px; |
| | | } |
| | |
| | | min-height: 100%; |
| | | } |
| | | |
| | | .ant-tabs .ant-tabs-top-bar > .ant-tabs-nav-container { |
| | | min-height: 40px; |
| | | >.ant-tabs-tab-next:not(.ant-tabs-tab-arrow-show) + .ant-tabs-nav-wrap > .ant-tabs-nav-scroll > .ant-tabs-nav { |
| | | width: 100%; |
| | | > div > .ant-tabs-tab-disabled { |
| | | float: right; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .ant-tabs .ant-tabs-left-bar .ant-tabs-tab { |
| | | text-align: right; |
| | | > span { |
| | | display: inline-block; |
| | | padding: 8px 24px; |
| | | } |
| | | } |
| | | .ant-tabs .ant-tabs-right-bar .ant-tabs-tab { |
| | | text-align: left; |
| | | > span { |
| | | display: inline-block; |
| | | padding: 8px 24px; |
| | | } |
| | | } |
| | | .ant-tabs-tab { |
| | | padding: 0px!important; |
| | | text-align: center; |
| | |
| | | padding: 12px 16px; |
| | | } |
| | | } |
| | | .ant-tabs-bottom .ant-tabs-bottom-bar .ant-tabs-ink-bar { |
| | | top: 0px; |
| | | } |
| | | .ant-tabs-card { |
| | | .ant-tabs-left-bar, .ant-tabs-right-bar { |
| | | .ant-tabs-tab { |
| | | > span { |
| | | padding: 0px 16px; |
| | | .ant-tabs-nav-container-scrolling { |
| | | padding-left: 0px; |
| | | padding-right: 0px; |
| | | .ant-tabs-tab-arrow-show { |
| | | display: none; |
| | | } |
| | | } |
| | | .ant-tabs-tab-active { |
| | | padding-left: 0px!important; |
| | | padding-right: 0px!important; |
| | | .ant-tabs-nav { |
| | | transform: none!important; |
| | | } |
| | | } |
| | | |
| | | .ant-tabs-card-bar { |
| | | .ant-tabs-tab { |
| | | > span { |
| | | .ant-tabs-tab:last-child::after { |
| | | content: ' '; |
| | | display: inline-block; |
| | | padding: 0px 16px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .search-icon { |
| | | position: absolute; |
| | | top: 10px; |
| | | right: 40px; |
| | | font-size: 18px; |
| | | cursor: pointer; |
| | | padding: 3px; |
| | | } |
| | | } |
| | | .menu-tabs-edit-box:hover { |
| | | z-index: 1; |
| | | box-shadow: 0px 0px 4px #1890ff; |
| | | } |
| | | |
| | | .mob-shell { |
| | | .menu-tabs-edit-box.flex { |
| | | >.ant-tabs.ant-tabs-top, >.ant-tabs.ant-tabs-bottom { |
| | | >.ant-tabs-bar { |
| | | >.ant-tabs-nav-container { |
| | | >.ant-tabs-nav-wrap { |
| | | >.ant-tabs-nav-scroll { |
| | | >.ant-tabs-nav { |
| | | display: block; |
| | | >div { |
| | | display: flex; |
| | | >.ant-tabs-tab { |
| | | flex: 1; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | left: 100%; |
| | | height: 45px; |
| | | width: 100vw; |
| | | cursor: default; |
| | | } |
| | | } |
| | |
| | | import MenuUtils from '@/utils/utils-custom.js' |
| | | |
| | | /** |
| | | * @description tab表单配置信息 |
| | | */ |
| | | export function getTabForm(tab, setting) { |
| | | let appType = sessionStorage.getItem('appType') |
| | | export function getTabForm(tab) { |
| | | let roleList = sessionStorage.getItem('sysRoles') |
| | | |
| | | if (roleList) { |
| | |
| | | label: '名称', |
| | | initval: tab.label || '', |
| | | required: true, |
| | | focus: true, |
| | | focus: true |
| | | }, |
| | | { |
| | | type: 'mkicon', |
| | |
| | | label: '图标', |
| | | initval: tab.icon || '', |
| | | required: false, |
| | | allowClear: true, |
| | | }, |
| | | // { |
| | | // type: 'radio', |
| | | // field: 'hasSearch', |
| | | // label: '搜索', |
| | | // initval: tab.hasSearch || 'false', |
| | | // required: false, |
| | | // options: [ |
| | | // {value: 'false', label: '无'}, |
| | | // {value: 'icon', label: '有'}, |
| | | // ], |
| | | // forbid: appType !== 'mob' || setting.position !== 'top' || setting.display !== 'inline-block', |
| | | // span: 22 |
| | | // }, |
| | | { |
| | | type: 'text', |
| | | field: 'controlVal', |
| | | label: '隐藏标记', |
| | | initval: tab.controlVal || '', |
| | | tooltip: '当禁用字段值与隐藏标记相等时,标签页会隐藏。注:多个值请用逗号分隔。', |
| | | required: false, |
| | | }, |
| | | { |
| | | type: 'text', |
| | | field: 'selectVal', |
| | | label: '选中标记', |
| | | initval: tab.selectVal || '', |
| | | tooltip: '当选中字段值与选中标记相等时,标签页默认选中。', |
| | | required: false |
| | | }, |
| | | { |
| | | type: 'color', |
| | | field: 'backgroundColor', |
| | | label: '背景(内容区)', |
| | | initval: tab.backgroundColor || 'transparent', |
| | | required: false, |
| | | allowClear: true |
| | | }, |
| | | { |
| | | type: 'radio', |
| | |
| | | label: '黑名单', |
| | | initval: tab.blacklist || [], |
| | | required: false, |
| | | options: roleList, |
| | | forbid: !!appType, |
| | | }, |
| | | ] |
| | | |
| | | return tabForm |
| | | } |
| | | |
| | | /** |
| | | * @description tabs表单配置信息 |
| | | */ |
| | | export function getTabsSetForm(setting, uuid) { |
| | | let appType = sessionStorage.getItem('appType') |
| | | let roleList = sessionStorage.getItem('sysRoles') |
| | | |
| | | let modules = MenuUtils.getSupModules(window.GLOB.customMenu.components, uuid) || [] |
| | | modules.push({ |
| | | value: 'preview', |
| | | label: '上一页(url参数)' |
| | | }) |
| | | |
| | | if (roleList) { |
| | | try { |
| | | roleList = JSON.parse(roleList) |
| | | } catch (e) { |
| | | roleList = [] |
| | | } |
| | | } else { |
| | | roleList = [] |
| | | } |
| | | |
| | | const tabForm = [ |
| | | { |
| | | type: 'text', |
| | | field: 'name', |
| | | label: '组件名称', |
| | | initval: setting.name || '', |
| | | tooltip: '用于组件间的区分。', |
| | | required: true |
| | | }, |
| | | { |
| | | type: 'number', |
| | | field: 'width', |
| | | label: '宽度', |
| | | initval: setting.width || 24, |
| | | tooltip: '栅格布局,每行等分为24列。', |
| | | min: 1, |
| | | max: 24, |
| | | precision: 0, |
| | | required: true |
| | | }, |
| | | { |
| | | type: 'select', |
| | | field: 'position', |
| | | label: '标签位置', |
| | | initval: setting.position || 'top', |
| | | required: true, |
| | | options: [ |
| | | {value: 'top', label: 'top'}, |
| | | {value: 'bottom', label: 'bottom'}, |
| | | {value: 'left', label: 'left'}, |
| | | {value: 'right', label: 'right'}, |
| | | ], |
| | | controlFields: [ |
| | | {field: 'display', values: ['top', 'bottom']}, |
| | | ] |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | field: 'tabStyle', |
| | | label: '页签样式', |
| | | initval: setting.tabStyle || 'line', |
| | | tooltip: '标签位置为top时有效,默认值为line。', |
| | | required: true, |
| | | options: [ |
| | | {value: 'line', label: 'line'}, |
| | | {value: 'card', label: 'card'}, |
| | | ], |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | field: 'autoSwitch', |
| | | label: '自动切换', |
| | | initval: setting.autoSwitch || 'false', |
| | | tooltip: '存在两个及以上标签时有效。', |
| | | required: false, |
| | | options: [ |
| | | {value: 'true', label: '是'}, |
| | | {value: 'false', label: '否'}, |
| | | ], |
| | | controlFields: [ |
| | | {field: 'interval', values: ['true']}, |
| | | {field: 'tabLabel', values: ['true']}, |
| | | ] |
| | | }, |
| | | { |
| | | type: 'number', |
| | | field: 'interval', |
| | | label: '间隔(s)', |
| | | initval: setting.interval || 5, |
| | | min: 1, |
| | | max: 1000, |
| | | precision: 0, |
| | | required: true |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | field: 'tabLabel', |
| | | label: '标签栏', |
| | | initval: setting.tabLabel || 'show', |
| | | required: false, |
| | | options: [ |
| | | {value: 'show', label: '显示'}, |
| | | {value: 'hide', label: '隐藏'}, |
| | | ] |
| | | }, |
| | | { |
| | | type: 'cascader', |
| | | field: 'supModule', |
| | | label: '上级组件', |
| | | initval: setting.supModule || [], |
| | | tooltip: '标签组可以选择上级组件,填入禁用字段,用于控制标签隐藏。', |
| | | help: '用于控制标签页隐藏。', |
| | | required: false, |
| | | allowClear: true, |
| | | options: modules, |
| | | controlFields: [ |
| | | {field: 'controlField', notNull: true}, |
| | | ], |
| | | }, |
| | | { |
| | | type: 'text', |
| | | field: 'controlField', |
| | | label: '禁用字段', |
| | | initval: setting.controlField || '', |
| | | tooltip: '用于控制标签隐藏的字段,在标签中填入隐藏标记。', |
| | | required: true, |
| | | }, |
| | | { |
| | | type: 'text', |
| | | field: 'selectField', |
| | | label: '选中字段', |
| | | initval: setting.selectField || '', |
| | | tooltip: '用于控制标签页初始化选中,在标签中填入选中标记,注:数据源于url参数。', |
| | | required: false |
| | | }, |
| | | { |
| | | type: 'color', |
| | | field: 'backgroundColor', |
| | | label: '背景(标题栏)', |
| | | initval: setting.backgroundColor || 'transparent', |
| | | required: false |
| | | }, |
| | | { |
| | | type: 'radio', |
| | | field: 'permission', |
| | | label: '权限验证', |
| | | initval: setting.permission || 'false', |
| | | required: false, |
| | | options: [ |
| | | {value: 'true', label: '启用'}, |
| | | {value: 'false', label: '禁用'}, |
| | | ], |
| | | forbid: !appType |
| | | }, |
| | | { |
| | | type: 'multiselect', |
| | | field: 'blacklist', |
| | | label: '黑名单', |
| | | initval: setting.blacklist || [], |
| | | required: false, |
| | | options: roleList, |
| | | forbid: !!appType |
| | | options: roleList |
| | | }, |
| | | ] |
| | | |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'array', // 组件属性 - 数据格式 |
| | | pageable: false, // 组件属性 - 是否可分页 |
| | | switchable: false, // 组件属性 - 数据是否可切换 |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | format: 'array', // 组件属性 - 数据格式 |
| | | pageable: false, // 组件属性 - 是否可分页 |
| | | switchable: true, // 组件属性 - 数据是否可切换 |
| | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { |
| | | let _card = {...this.state.card} |
| | | _card.style = {..._card.style, ...style} |
| | | |
| | | this.setState({ card: _card }) |
| | | this.props.updateConfig(_card) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | item.subtabs.forEach(tab => { |
| | | uuids[tab.uuid] = MenuUtils.getuuid() |
| | | tab.uuid = uuids[tab.uuid] |
| | | tab.parentId = item.uuid |
| | | |
| | | if (appType !== 'mob') { |
| | | tab.components = tab.components.filter(cell => cell.type !== 'menubar') |
| | | } |
| | | |
| | | tab.components = tab.components.map(cell => { |
| | | cell.tabId = tab.uuid |
| | | cell.parentId = tab.parentId |
| | | |
| | | cell = this.resetconfig(cell, copyBtns, uuids) |
| | | return cell |
| | | }) |
| | |
| | | item.name = item.setting.name |
| | | |
| | | item.components = item.components.map(cell => { |
| | | cell.tabId = item.tabId || '' |
| | | cell.parentId = item.parentId || '' |
| | | |
| | | cell = MenuUtils.resetComponentConfig(cell, copyBtns, uuids) |
| | | return cell |
| | | }) |
| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { fromJS } from 'immutable' |
| | | import { Button } from 'antd' |
| | | import { FontColorsOutlined } from '@ant-design/icons' |
| | | |
| | |
| | | type: '', |
| | | components: [] |
| | | } |
| | | |
| | | type = null |
| | | |
| | | components = {} |
| | | |
| | | componentDidMount () { |
| | | sessionStorage.setItem('style-control', 'false') |
| | |
| | | } |
| | | |
| | | submitCombineStyle = (style) => { |
| | | const { components, parent } = this.state |
| | | |
| | | let keys = components.map(item => item.uuid) |
| | | |
| | | MKEmitter.emit('submitComponentStyle', parent.uuid, keys, style) |
| | | |
| | | if (this.type === 'component') { |
| | | Object.keys(this.components).forEach((key, i) => { |
| | | setTimeout(() => { |
| | | keys.forEach(key => { |
| | | document.getElementById(key).classList.add('selected-control-element') |
| | | }) |
| | | }, 100) |
| | | } |
| | | |
| | | clickComponent = (card, _p, _type) => { |
| | | const { menu } = this.props |
| | | const { parent, type } = this.state |
| | | let components = fromJS(this.state.components).toJS() |
| | | |
| | | if (!parent) { |
| | | let _parent = null |
| | | |
| | | if (_type === 'cardcell') { |
| | | _parent = _p |
| | | MKEmitter.emit('switchMultiStyle', 'open') |
| | | } else { |
| | | let getParents = (box) => { |
| | | box.components.forEach(item => { |
| | | if (item.type === 'tabs') { |
| | | item.subtabs.forEach(tab => { |
| | | if (tab.components.findIndex(cell => cell.uuid === card.uuid) > -1) { |
| | | _parent = tab |
| | | } else { |
| | | getParents(tab) |
| | | } |
| | | }) |
| | | } else if (item.type === 'group') { |
| | | if (item.components.findIndex(cell => cell.uuid === card.uuid) > -1) { |
| | | _parent = item |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | |
| | | if (menu.components.findIndex(cell => cell.uuid === card.uuid) > -1) { |
| | | _parent = menu |
| | | } else { |
| | | getParents(menu) |
| | | } |
| | | |
| | | MKEmitter.emit('switchMultiStyle', 'open') |
| | | } |
| | | |
| | | document.getElementById(card.uuid).classList.add('selected-control-element') |
| | | |
| | | sessionStorage.setItem('style-control', (_type ? _type : 'component')) |
| | | |
| | | this.setState({ |
| | | type: _type ? _type : 'component', |
| | | parent: _parent, |
| | | components: [card] |
| | | this.components[key](style) |
| | | }, i * 10) |
| | | }) |
| | | } else { |
| | | if (components.findIndex(cell => cell.uuid === card.uuid) > -1) { |
| | | components = components.filter(cell => cell.uuid !== card.uuid) |
| | | document.getElementById(card.uuid).classList.remove('selected-control-element') |
| | | } else if (type === 'cardcell' && parent.elements.findIndex(cell => cell.uuid === card.uuid) > -1) { |
| | | components.push(card) |
| | | document.getElementById(card.uuid).classList.add('selected-control-element') |
| | | Object.keys(this.components).forEach((key, i) => { |
| | | setTimeout(() => { |
| | | MKEmitter.emit('submitComponentStyle', key, this.components[key], style) |
| | | }, i * 10) |
| | | }) |
| | | } |
| | | } |
| | | |
| | | if (components.length === 0) { |
| | | clickComponent = (id, pid, callback) => { |
| | | if (!this.type) { |
| | | if (pid) { |
| | | this.type = 'cardcell' |
| | | } else { |
| | | this.type = 'component' |
| | | } |
| | | } else if ((this.type === 'cardcell' && !pid) || (this.type === 'component' && pid)) { |
| | | return |
| | | } |
| | | |
| | | let plus = true |
| | | if (this.type === 'cardcell') { |
| | | if (this.components[pid]) { |
| | | if (this.components[pid].includes(id)) { |
| | | this.components[pid] = this.components[pid].filter(item => item !== id) |
| | | if (this.components[pid].length === 0) { |
| | | delete this.components[pid] |
| | | } |
| | | plus = false |
| | | } else { |
| | | this.components[pid].push(id) |
| | | } |
| | | } else { |
| | | this.components[pid] = [id] |
| | | } |
| | | } else { |
| | | if (this.components[id]) { |
| | | delete this.components[id] |
| | | plus = false |
| | | } else { |
| | | this.components[id] = callback |
| | | } |
| | | } |
| | | |
| | | if (plus) { |
| | | document.getElementById(id).classList.add('selected-control-element') |
| | | MKEmitter.emit('switchMultiStyle', 'open', this.type) |
| | | } else { |
| | | document.getElementById(id).classList.remove('selected-control-element') |
| | | } |
| | | |
| | | let length = Object.keys(this.components).length |
| | | |
| | | if (length === 0) { |
| | | MKEmitter.emit('switchMultiStyle', 'close') |
| | | sessionStorage.setItem('style-control', 'true') |
| | | } |
| | | |
| | | this.setState({ |
| | | components: components, |
| | | parent: components.length ? parent : null |
| | | }) |
| | | this.type = null |
| | | } else { |
| | | sessionStorage.setItem('style-control', this.type) |
| | | } |
| | | } |
| | | |
| | | triggerStyleChange = () => { |
| | | const { label, components } = this.state |
| | | const { label } = this.state |
| | | |
| | | if (label === '批量调整') { |
| | | document.body.className = 'style-control' |
| | |
| | | document.body.className = '' |
| | | sessionStorage.setItem('style-control', 'false') |
| | | |
| | | components.forEach(item => { |
| | | document.getElementById(item.uuid).classList.remove('selected-control-element') |
| | | if (this.type === 'cardcell') { |
| | | Object.keys(this.components).forEach(key => { |
| | | this.components[key].forEach(id => { |
| | | document.getElementById(id).classList.remove('selected-control-element') |
| | | }) |
| | | }) |
| | | } else { |
| | | Object.keys(this.components).forEach(key => { |
| | | document.getElementById(key).classList.remove('selected-control-element') |
| | | }) |
| | | } |
| | | |
| | | MKEmitter.emit('switchMultiStyle', 'close') |
| | | this.components = {} |
| | | this.type = null |
| | | |
| | | this.setState({label: '批量调整', parent: null, components: []}) |
| | | this.setState({label: '批量调整'}) |
| | | } |
| | | } |
| | | |
| | |
| | | background: #ffffff; |
| | | } |
| | | body.style-control { |
| | | .pc-menu-view::before { |
| | | .pc-menu-view::before, .menu-control::before { |
| | | content: ' '; |
| | | position: absolute; |
| | | left: 0; |
| | |
| | | |
| | | state = { |
| | | style: {}, |
| | | type: '', |
| | | borposition: 'outer' |
| | | } |
| | | |
| | |
| | | MKEmitter.removeListener('switchMultiStyle', this.switchMultiStyle) |
| | | } |
| | | |
| | | switchMultiStyle = (type) => { |
| | | if (type === 'open') { |
| | | switchMultiStyle = (swit, type) => { |
| | | if (swit === 'open') { |
| | | this.setState({ |
| | | visible: true, |
| | | style: {}, |
| | | type: type, |
| | | borposition: 'outer' |
| | | }) |
| | | } else { |
| | |
| | | <div className="menu-combine-style-controller"> |
| | | <Form {...formItemLayout}> |
| | | <Collapse expandIconPosition="right" destroyInactivePanel={true} defaultActiveKey="margin"> |
| | | <Panel header="字体" key="font"> |
| | | {this.state.type === 'cardcell' ? <Panel header="字体" key="font"> |
| | | <Col span={12}> |
| | | <Form.Item colon={false} label={<FontSizeOutlined title="字体大小"/>}> |
| | | <InputNumber defaultValue={''} min={12} max={100} precision={0} onChange={this.changeFontSize} /> |
| | |
| | | </Radio.Group> |
| | | </Form.Item> |
| | | </Col> |
| | | </Panel> |
| | | </Panel> : null} |
| | | <Panel header="背景" key="background"> |
| | | <Col span={24}> |
| | | <Form.Item |
| | |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import './index.scss' |
| | | |
| | | const AntvTabs = asyncComponent(() => import('@/menu/components/tabs/antv-tabs')) |
| | | const AntvTabs = asyncComponent(() => import('@/menu/components/tabs/table-tabs')) |
| | | const BaseTable = asyncComponent(() => import('@/menu/components/table/base-table')) |
| | | |
| | | const Card = ({ id, card, delCard, updateConfig }) => { |
| | |
| | | const [, drop] = useDrop({ |
| | | accept: 'menu', |
| | | drop(item) { |
| | | if (item.hasOwnProperty('originalIndex') || item.added) { |
| | | if (item.added) { |
| | | delete item.added // 删除组件添加标记 |
| | | return |
| | | } |
| | | |
| | | let newcard = { |
| | | uuid: Utils.getuuid(), |
| | | type: item.component, |
| | | subtype: item.subtype, |
| | | config: item.config, |
| | | width: item.width || 24, |
| | | isNew: true // 新添加标志,用于初始化 |
| | | type: 'tabs', |
| | | subtype: 'tabs', |
| | | isNew: true |
| | | } |
| | | |
| | | let targetId = '' |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: '', |
| | | parentId: '', |
| | | format: 'object', // 组件属性 - 数据格式 |
| | | pageable: false, // 组件属性 - 是否可分页 |
| | | switchable: false, // 组件属性 - 数据是否可切换 |
| | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { |
| | | let _card = {...this.state.card} |
| | | _card.style = {..._card.style, ...style} |
| | | |
| | | this.setState({ card: _card }) |
| | | this.props.updateConfig(_card) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: '', |
| | | parentId: '', |
| | | format: 'object', // 组件属性 - 数据格式 |
| | | pageable: false, // 组件属性 - 是否可分页 |
| | | switchable: false, // 组件属性 - 数据是否可切换 |
| | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { |
| | | let _card = {...this.state.card} |
| | | _card.style = {..._card.style, ...style} |
| | | |
| | | this.setState({ card: _card }) |
| | | this.props.updateConfig(_card) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | width: 24, |
| | | name: card.name, |
| | | subtype: card.subtype, |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | width: 24, |
| | | name: card.name, |
| | | subtype: card.subtype, |
| | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { |
| | | let _card = {...this.state.card} |
| | | _card.style = {..._card.style, ...style} |
| | | |
| | | this.setState({ card: _card }) |
| | | this.props.updateConfig(_card) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | const dragIndex = newOrder.indexOf(dragKey) |
| | | const hoverIndex = newOrder.indexOf(hoverKey) |
| | | |
| | | if (dragIndex === -1) return |
| | | |
| | | newOrder.splice(dragIndex, 1) |
| | | newOrder.splice(hoverIndex, 0, dragKey) |
| | | |
| | |
| | | let _tabs = { |
| | | uuid: tabs.uuid, |
| | | type: tabs.type, |
| | | tabId: tabs.tabId || '', |
| | | parentId: tabs.parentId || '', |
| | | subtype: tabs.subtype, |
| | | width: 24, |
| | | name: tabs.name, |
| | | setting: {width: 24, position: 'top', tabStyle: 'line', name: tabs.name}, |
| | | style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' }, |
| | | subtabs: [ |
| | | { uuid: Utils.getuuid(), parentId: tabs.uuid, label: 'Tab 1', icon: '', components: [] }, |
| | | { uuid: Utils.getuuid(), parentId: tabs.uuid, label: 'Tab 2', icon: '', components: [] }, |
| | | { uuid: Utils.getuuid(), parentId: tabs.uuid, label: 'Tab 3', icon: '', components: [] } |
| | | { uuid: Utils.getuuid(), label: 'Tab 1', icon: '', components: [] }, |
| | | { uuid: Utils.getuuid(), label: 'Tab 2', icon: '', components: [] }, |
| | | { uuid: Utils.getuuid(), label: 'Tab 3', icon: '', components: [] } |
| | | ] |
| | | } |
| | | |
| | |
| | | return !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('submitSearch', this.getSearch) |
| | | MKEmitter.addListener('tabsChange', this.handleTabsChange) |
| | | MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle) |
| | | } |
| | | |
| | | /** |
| | | * @description 组件销毁,清除state更新,清除快捷键设置 |
| | | */ |
| | |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | MKEmitter.removeListener('submitSearch', this.getSearch) |
| | | MKEmitter.removeListener('tabsChange', this.handleTabsChange) |
| | | MKEmitter.removeListener('submitComponentStyle', this.updateComponentStyle) |
| | | } |
| | | |
| | | updateComponentStyle = (parentId, keys, style) => { |
| | | const { tabs } = this.state |
| | | |
| | | if (tabs.subtabs.findIndex(tab => tab.uuid === parentId) === -1) return |
| | | |
| | | let _tabs = fromJS(tabs).toJS() |
| | | let _tabs_ = fromJS(tabs).toJS() |
| | | |
| | | let components = [] |
| | | _tabs.subtabs.forEach(tab => { |
| | | if (tab.uuid === parentId) { |
| | | components = tab.components.map(item => { |
| | | if (keys.includes(item.uuid)) { |
| | | item.style = {...item.style, ...style} |
| | | } |
| | | return item |
| | | }) |
| | | tab.components = [] |
| | | } |
| | | }) |
| | | |
| | | _tabs_.subtabs = _tabs_.subtabs.map(tab => { |
| | | if (tab.uuid === parentId) { |
| | | tab.components = components |
| | | } |
| | | return tab |
| | | }) |
| | | |
| | | this.setState({tabs: _tabs}, () => { |
| | | this.updateComponent(_tabs_) |
| | | }) |
| | | } |
| | | |
| | | changeStyle = () => { |
| | |
| | | this.props.updateConfig(_card) |
| | | } |
| | | |
| | | handleTabsChange = (parentId) => { |
| | | const { tabs } = this.state |
| | | |
| | | if (parentId === tabs.parentId) { |
| | | MKEmitter.emit('tabsChange', tabs.uuid) |
| | | getSubIds = (components, ids) => { |
| | | components.forEach(item => { |
| | | if (item.type === 'tabs') { |
| | | item.subtabs.forEach(tab => { |
| | | this.getSubIds(tab.components, ids) |
| | | }) |
| | | } else if (item.type === 'group') { |
| | | this.getSubIds(item.components, ids) |
| | | } else { |
| | | ids.push(item.uuid) |
| | | } |
| | | }) |
| | | } |
| | | |
| | | updateComponent = (component) => { |
| | |
| | | |
| | | if (!is(fromJS(tabs.setting), fromJS(component.setting)) || !is(fromJS(tabs.style), fromJS(component.style))) { |
| | | // 注册事件-标签变化,通知标签内元素 |
| | | MKEmitter.emit('tabsChange', tabs.uuid) |
| | | let ids = [] |
| | | tabs.subtabs.forEach(tab => { |
| | | this.getSubIds(tab.components, ids) |
| | | }) |
| | | MKEmitter.emit('tabsChange', ids.join(',')) |
| | | } |
| | | |
| | | component.width = component.setting.width |
| | |
| | | this.props.updateConfig(tabs) |
| | | } |
| | | |
| | | getSearch = (config) => { |
| | | const { tabs } = this.state |
| | | |
| | | if (tabs.uuid !== config.uuid) return |
| | | |
| | | let _tabs = fromJS(tabs).toJS() |
| | | |
| | | _tabs.subtabs = _tabs.subtabs.map(t => { |
| | | if (t.uuid === config.tabId) { |
| | | t.search = config.search |
| | | } |
| | | return t |
| | | }) |
| | | |
| | | this.setState({ |
| | | tabs: _tabs |
| | | }) |
| | | this.props.updateConfig(_tabs) |
| | | } |
| | | |
| | | setSearch = (tab) => { |
| | | const { tabs } = this.state |
| | | let card = { |
| | | uuid: tabs.uuid, |
| | | tabId: tab.uuid, |
| | | search: tab.search |
| | | } |
| | | |
| | | if (!card.search) { |
| | | card.search = { |
| | | floor: 1, |
| | | setting: { type: 'title', field: '', title: '', focus: 'true', btn: 'hidden' }, |
| | | groups: [], |
| | | fields: [] |
| | | } |
| | | } |
| | | MKEmitter.emit('changeSearch', card) |
| | | } |
| | | |
| | | getTabForms = (tab) => { |
| | | const { tabs } = this.state |
| | | |
| | | if (!tab) { |
| | | tab = { |
| | | uuid: '', |
| | | parentId: tabs.uuid, |
| | | label: '', |
| | | icon: '', |
| | | components: [] |
| | |
| | | window.GLOB.TabsMap.set(tabs.uuid, key) |
| | | } |
| | | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.tabs) |
| | | } |
| | | } |
| | | |
| | | render() { |
| | | const { tabs, defaultActiveKey } = this.state |
| | | let _style = resetStyle(tabs.style) |
| | | let _tabStyle = resetStyle(tabs.tabStyle) |
| | | |
| | | return ( |
| | | <div className={'mob-tabs-edit-box ' + tabs.setting.display} style={_style} onClick={this.clickComponent} id={tabs.uuid}> |
| | | <div className={'mob-tabs-edit-box ' + tabs.setting.display} style={_style} id={tabs.uuid}> |
| | | <DraggableTabs defaultActiveKey={defaultActiveKey} tabBarStyle={{background: tabs.setting.backgroundColor || 'transparent'}} tabPosition={'top'} type={tabs.setting.tabStyle} tabsMove={this.moveSwitch} onChange={this.onChange}> |
| | | {tabs.subtabs.map(tab => ( |
| | | <TabPane tab={ |
| | |
| | | <span style={{..._tabStyle, textDecoration: tab.hide === 'true' ? 'line-through' : 'none'}}>{tab.icon ? <MkIcon type={tab.icon} /> : null}{tab.label}</span> |
| | | </Popover> |
| | | } key={tab.uuid} style={{backgroundColor: tab.backgroundColor || 'transparent'}}> |
| | | {/* {appType === 'mob' && tabs.setting.display === 'inline-block' && tab.hasSearch === 'icon' ? |
| | | <SearchOutlined className="search-icon" onDoubleClick={() => this.setSearch(tab)}/> : null} */} |
| | | <TabComponents config={tab} handleList={this.updateTabComponent} deleteCard={this.deleteCard} /> |
| | | </TabPane> |
| | | ))} |
| | |
| | | import { useDrop } from 'react-dnd' |
| | | import { is, fromJS } from 'immutable' |
| | | import update from 'immutability-helper' |
| | | import { Empty, notification, Modal } from 'antd' |
| | | import { Empty, Modal } from 'antd' |
| | | |
| | | import Utils from '@/utils/utils.js' |
| | | import MKEmitter from '@/utils/events.js' |
| | |
| | | item.added = true |
| | | |
| | | if (item.component === 'search') { // 移动端标签页中不可添加搜索 |
| | | // if (cards.filter(card => card.type === 'search').length > 0) { |
| | | // notification.warning({ |
| | | // top: 92, |
| | | // message: '搜索条件不可重复添加!', |
| | | // duration: 5 |
| | | // }) |
| | | // return |
| | | // } |
| | | item.added = false |
| | | return |
| | | } else if (item.component === 'tabs') { |
| | | let floor = MenuUtils.getFloor(config.parentId) |
| | | if (floor >= 3 ) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '标签页最多为三重结构!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | } |
| | | |
| | | let name = '' |
| | |
| | | |
| | | let newcard = { |
| | | uuid: Utils.getuuid(), |
| | | tabId: config.uuid, |
| | | parentId: config.parentId, |
| | | type: item.component, |
| | | subtype: item.subtype, |
| | | config: item.config, |
| | |
| | | MKEmitter.emit('changeStyle', ['font', 'background', 'border'], card.searchStyle || {}, this.getSearchStyle) |
| | | } |
| | | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | } |
| | | } |
| | | |
| | | getSearch = (config) => { |
| | | const { card } = this.state |
| | | |
| | |
| | | } |
| | | |
| | | return ( |
| | | <div className="normal-topbar-edit-box" style={card.style} onClick={this.clickComponent} id={card.uuid}> |
| | | <div className="normal-topbar-edit-box" style={card.style} id={card.uuid}> |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <NormalForm title="导航栏设置" width={900} update={this.updateWrap} getForms={this.getWrapForms}> |
| | |
| | | let _card = { |
| | | uuid: card.uuid, |
| | | type: card.type, |
| | | tabId: card.tabId || '', |
| | | parentId: card.parentId || '', |
| | | width: card.width || 24, |
| | | name: card.name, |
| | | subtype: card.subtype, |
| | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | MKEmitter.emit('clickComponent', this.state.card.uuid, null, (style) => { |
| | | let _card = {...this.state.card} |
| | | _card.style = {..._card.style, ...style} |
| | | |
| | | this.setState({ card: _card }) |
| | | this.props.updateConfig(_card) |
| | | }) |
| | | } |
| | | } |
| | | |
| | |
| | | MKEmitter.emit('changeStyle', ['width', 'margin'], card.logoStyle, this.getLogoStyle) |
| | | } |
| | | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | | MKEmitter.emit('clickComponent', this.state.card) |
| | | } |
| | | } |
| | | |
| | | changeMenu = (menu) => { |
| | | if (menu.property === 'link') { |
| | | window.open(menu.link) |
| | |
| | | const { card } = this.state |
| | | |
| | | return ( |
| | | <div className="normal-navbar-edit-box" style={card.style} onClick={this.clickComponent} id={card.uuid}> |
| | | <div className="normal-navbar-edit-box" style={card.style} id={card.uuid}> |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <MenuComponent config={card} updateConfig={this.updateComponent} /> |
| | |
| | | btn={card} |
| | | BData={data.$$BData || ''} |
| | | disabled={_disabled} |
| | | setting={cards.setting} |
| | | selectedData={_data} |
| | | /> |
| | | </Col> |
| | |
| | | btn={card} |
| | | BData={data.$$BData || ''} |
| | | disabled={_disabled} |
| | | setting={cards.setting} |
| | | selectedData={_data} |
| | | /> |
| | | </Col> |
| | |
| | | config = JSON.parse(window.decodeURIComponent(window.atob(result.LongParam))) |
| | | config.setting.MenuName = Tab.label |
| | | config.setting.$name = Tab.label |
| | | config.setting.foreignKey = Tab.foreignKey || '' |
| | | config.setting.supModule = Tab.supMenu || '' |
| | | } catch (e) { |
| | | console.warn('Parse Failure') |
| | | config = '' |
| | |
| | | setting={setting} |
| | | actions={actions} |
| | | columns={columns} |
| | | Tab={this.props.Tab} |
| | | MenuID={this.props.MenuID} |
| | | selectedData={selectedData} |
| | | ContainerId={this.props.ContainerId} |
| | |
| | | BData={BData} |
| | | config={config} |
| | | columns={columns} |
| | | Tab={this.props.Tab} |
| | | data={this.state.data} |
| | | MenuID={this.props.MenuID} |
| | | loading={this.state.loading} |
| | |
| | | BID={BID} |
| | | plot={item} |
| | | config={config} |
| | | Tab={this.props.Tab} |
| | | data={this.state.data} |
| | | loading={this.state.loading} |
| | | /> |
| | |
| | | setting={setting} |
| | | actions={actions} |
| | | columns={columns} |
| | | Tab={this.props.Tab} |
| | | MenuID={this.props.MenuID} |
| | | selectedData={selectedData} |
| | | ContainerId={this.props.ContainerId} |
| | |
| | | BID: PropTypes.string, // 主表ID |
| | | BData: PropTypes.any, // 主表数据 |
| | | selectedData: PropTypes.any, // 子表中选择数据 |
| | | Tab: PropTypes.any, // 如果当前元素为标签时,tab为标签信息 |
| | | btn: PropTypes.object, // 按钮 |
| | | setting: PropTypes.any, // 页面通用设置 |
| | | disabled: PropTypes.any, // 行按钮禁用 |
| | |
| | | * @description 触发按钮操作 |
| | | */ |
| | | actionTrigger = (triggerId, record, type) => { |
| | | const { setting, Tab, BID, btn, selectedData } = this.props |
| | | const { setting, BID, btn, selectedData } = this.props |
| | | const { loading, disabled } = this.state |
| | | |
| | | if (loading || disabled) return |
| | | if (triggerId && btn.uuid !== triggerId) return |
| | | |
| | | if (((Tab && Tab.supMenu) || setting.supModule) && !BID) { |
| | | if (setting.supModule && !BID) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '需要上级主键值!', |
| | |
| | | static propTpyes = { |
| | | BID: PropTypes.string, // 主表ID |
| | | BData: PropTypes.any, // 主表数据 |
| | | Tab: PropTypes.any, // 如果当前元素为标签时,tab为标签信息 |
| | | btn: PropTypes.object, // 按钮 |
| | | setting: PropTypes.any, // 页面通用设置 |
| | | updateStatus: PropTypes.func, // 按钮状态更新 |
| | |
| | | * @description 触发按钮操作 |
| | | */ |
| | | actionTrigger = (triggerId, record, type) => { |
| | | const { setting, Tab, BID, btn } = this.props |
| | | const { setting, BID, btn } = this.props |
| | | const { loading, disabled } = this.state |
| | | |
| | | if (loading || disabled) return |
| | | if (triggerId && btn.uuid !== triggerId) return |
| | | |
| | | if (((Tab && Tab.supMenu) || setting.supModule) && !BID) { |
| | | if (setting.supModule && !BID) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '需要上级主键值!', |
| | |
| | | * @description 触发按钮操作 |
| | | */ |
| | | actionTrigger = (triggerId, record, type) => { |
| | | const { Tab, BID, btn, selectedData, setting } = this.props |
| | | const { BID, btn, selectedData, setting } = this.props |
| | | const { loading, disabled } = this.state |
| | | |
| | | if (loading || disabled) return |
| | | if (triggerId && btn.uuid !== triggerId) return |
| | | |
| | | if (((Tab && Tab.supMenu) || setting.supModule) && !BID) { |
| | | if (setting.supModule && !BID) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '需要上级主键值!', |
| | |
| | | * @description 触发按钮操作 |
| | | */ |
| | | actionTrigger = (triggerId, record, type) => { |
| | | const { Tab, BID, btn, selectedData, setting } = this.props |
| | | const { BID, btn, selectedData, setting } = this.props |
| | | const { loading, disabled } = this.state |
| | | |
| | | if (loading || disabled) return |
| | | if (triggerId && btn.uuid !== triggerId) return |
| | | |
| | | if (((Tab && Tab.supMenu) || setting.supModule) && !BID) { |
| | | if (setting.supModule && !BID) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '需要上级主键值!', |
| | |
| | | lock: PropTypes.any, // 可编辑表中按钮锁定 |
| | | BData: PropTypes.any, // 主表数据 |
| | | selectedData: PropTypes.any, // 子表中选择数据 |
| | | Tab: PropTypes.any, // 如果当前元素为标签时,tab为标签信息 |
| | | MenuID: PropTypes.string, // 菜单ID |
| | | actions: PropTypes.array, // 按钮组 |
| | | columns: PropTypes.array, // 显示列 |
| | |
| | | } |
| | | |
| | | getButtonList = (actions) => { |
| | | const { BID, BData, MenuID, Tab, columns, setting, ContainerId, selectedData, lock } = this.props |
| | | const { BID, BData, MenuID, columns, setting, ContainerId, selectedData, lock } = this.props |
| | | return actions.map(item => { |
| | | if (['exec', 'prompt', 'pop'].includes(item.OpenType)) { |
| | | return ( |
| | |
| | | show={item.show || 'actionList'} |
| | | disabled={lock || false} |
| | | BID={BID} |
| | | Tab={Tab} |
| | | btn={item} |
| | | BData={BData} |
| | | setting={setting} |
| | |
| | | show={item.show || 'actionList'} |
| | | disabled={lock || false} |
| | | BID={BID} |
| | | Tab={Tab} |
| | | btn={item} |
| | | BData={BData} |
| | | setting={setting} |
| | |
| | | show={item.show || 'actionList'} |
| | | disabled={lock || false} |
| | | BID={BID} |
| | | Tab={Tab} |
| | | btn={item} |
| | | BData={BData} |
| | | setting={setting} |
| | |
| | | show={item.show || 'actionList'} |
| | | disabled={lock || false} |
| | | BID={BID} |
| | | Tab={Tab} |
| | | btn={item} |
| | | BData={BData} |
| | | setting={setting} |
| | |
| | | btn={item} |
| | | BData={BData} |
| | | MenuID={MenuID} |
| | | setting={setting} |
| | | selectedData={selectedData} |
| | | /> |
| | | ) |
| | |
| | | disabled={lock || false} |
| | | btn={item} |
| | | BData={BData} |
| | | setting={setting} |
| | | selectedData={selectedData} |
| | | /> |
| | | ) |
| | |
| | | show={item.show || 'actionList'} |
| | | disabled={lock || false} |
| | | BID={BID} |
| | | Tab={Tab} |
| | | btn={item} |
| | | BData={BData} |
| | | setting={setting} |
| | |
| | | show={item.show || 'actionList'} |
| | | disabled={lock || false} |
| | | BID={BID} |
| | | Tab={Tab} |
| | | btn={item} |
| | | setting={setting} |
| | | selectedData={selectedData} |
| | |
| | | show={item.show || 'actionList'} |
| | | disabled={lock || false} |
| | | BID={BID} |
| | | Tab={Tab} |
| | | btn={item} |
| | | setting={setting} |
| | | selectedData={selectedData} |
| | |
| | | BData: PropTypes.any, // 主表数据 |
| | | btn: PropTypes.object, // 按钮 |
| | | selectedData: PropTypes.any, // 子表中选择数据 |
| | | setting: PropTypes.any, // 页面通用设置 |
| | | disabled: PropTypes.any, // 行按钮禁用 |
| | | } |
| | | |
| | |
| | | * @description 触发按钮操作 |
| | | */ |
| | | actionTrigger = (triggerId, record, type) => { |
| | | const { setting, btn, selectedData } = this.props |
| | | const { btn, selectedData } = this.props |
| | | const { disabled } = this.state |
| | | |
| | | if (disabled) return |
| | |
| | | let MenuNo = '' |
| | | let Remark = '' |
| | | if (btn.Ot === 'requiredSgl' && data[0]) { |
| | | Id = setting.primaryKey ? (data[0][setting.primaryKey] || '') : '' |
| | | Id = data[0].$$uuid || '' |
| | | name = data[0].PrintTempName || '' |
| | | MenuNo = data[0].PrintTempNO || '' |
| | | Remark = data[0].Remark || '' |
| | |
| | | _name = '单据打印' |
| | | if (btn.Ot === 'required' && data && data.length > 0) { |
| | | data.forEach((item, i) => { |
| | | let _id = setting.primaryKey ? (item[setting.primaryKey] || '') : '' |
| | | let _id = item.$$uuid || '' |
| | | let url = '#/billprint/' + window.btoa(window.encodeURIComponent(JSON.stringify({ id: _id, tempId: btn.printTemp, dataM: sessionStorage.getItem('dataM') }))) |
| | | window.open(url) |
| | | }) |
| | |
| | | BData: PropTypes.any, // 主表数据 |
| | | style: PropTypes.any, // 按钮样式 |
| | | selectedData: PropTypes.any, // 子表中选择数据 |
| | | Tab: PropTypes.any, // 如果当前元素为标签时,tab为标签信息 |
| | | btn: PropTypes.object, // 按钮 |
| | | columns: PropTypes.any, // 字段列 |
| | | setting: PropTypes.any, // 页面通用设置 |
| | |
| | | * @description 触发按钮操作 |
| | | */ |
| | | actionTrigger = (triggerId, record, type) => { |
| | | const { Tab, BID, btn, selectedData, setting } = this.props |
| | | const { BID, btn, selectedData, setting } = this.props |
| | | const { loading, disabled } = this.state |
| | | |
| | | if (loading || disabled) return |
| | | if (triggerId && btn.uuid !== triggerId) return |
| | | |
| | | if (((Tab && Tab.supMenu) || setting.supModule) && !BID) { |
| | | if (setting.supModule && !BID) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '需要上级主键值!', |
| | |
| | | param.ID = primaryId |
| | | |
| | | if (retmsg) { |
| | | const { sql, callbacksql } = getSysDefaultSql(btn, setting, '', param, data[0], columns, this.props.Tab, retmsg, this.moduleParams, Utils.getAllSearchOptions) // 数据源 |
| | | const { sql, callbacksql } = getSysDefaultSql(btn, setting, '', param, data[0], columns, retmsg, this.moduleParams, Utils.getAllSearchOptions) // 数据源 |
| | | param.LText = sql |
| | | param.$callbacksql = callbacksql |
| | | } else { |
| | | param.LText = getSysDefaultSql(btn, setting, '', param, data[0], columns, this.props.Tab, false, this.moduleParams, Utils.getAllSearchOptions) // 数据源 |
| | | param.LText = getSysDefaultSql(btn, setting, '', param, data[0], columns, false, this.moduleParams, Utils.getAllSearchOptions) // 数据源 |
| | | if (btn.output) { |
| | | param.key_back_type = 'Y' |
| | | } |
| | |
| | | param.ID = primaryId || Utils.getguid() |
| | | |
| | | if (retmsg) { |
| | | const { sql, callbacksql } = getSysDefaultSql(btn, setting, formdata, param, data[0], columns, this.props.Tab, retmsg, this.moduleParams, Utils.getAllSearchOptions) // 数据源 |
| | | const { sql, callbacksql } = getSysDefaultSql(btn, setting, formdata, param, data[0], columns, retmsg, this.moduleParams, Utils.getAllSearchOptions) // 数据源 |
| | | param.LText = sql |
| | | param.$callbacksql = callbacksql |
| | | } else { |
| | | param.LText = getSysDefaultSql(btn, setting, formdata, param, data[0], columns, this.props.Tab, false, this.moduleParams, Utils.getAllSearchOptions) // 数据源 |
| | | param.LText = getSysDefaultSql(btn, setting, formdata, param, data[0], columns, false, this.moduleParams, Utils.getAllSearchOptions) // 数据源 |
| | | if (btn.output) { |
| | | param.key_back_type = 'Y' |
| | | } |
| | |
| | | param.ID = primaryId |
| | | |
| | | if (retmsg) { |
| | | const { sql, callbacksql } = getSysDefaultSql(btn, setting, formdata, param, data[0], columns, this.props.Tab, retmsg, this.moduleParams, Utils.getAllSearchOptions) // 数据源 |
| | | const { sql, callbacksql } = getSysDefaultSql(btn, setting, formdata, param, data[0], columns, retmsg, this.moduleParams, Utils.getAllSearchOptions) // 数据源 |
| | | param.LText = sql |
| | | param.$callbacksql = callbacksql |
| | | } else { |
| | | param.LText = getSysDefaultSql(btn, setting, formdata, param, data[0], columns, this.props.Tab, false, this.moduleParams, Utils.getAllSearchOptions) // 数据源 |
| | | param.LText = getSysDefaultSql(btn, setting, formdata, param, data[0], columns, false, this.moduleParams, Utils.getAllSearchOptions) // 数据源 |
| | | if (btn.output) { |
| | | param.key_back_type = 'Y' |
| | | } |
| | |
| | | param.ID = primaryId |
| | | |
| | | if (retmsg) { |
| | | const { sql, callbacksql } = getSysDefaultSql(btn, setting, '', param, cell, columns, this.props.Tab, retmsg, this.moduleParams, Utils.getAllSearchOptions) // 数据源 |
| | | const { sql, callbacksql } = getSysDefaultSql(btn, setting, '', param, cell, columns, retmsg, this.moduleParams, Utils.getAllSearchOptions) // 数据源 |
| | | param.LText = sql |
| | | param.$callbacksql = callbacksql |
| | | } else { |
| | | param.LText = getSysDefaultSql(btn, setting, '', param, cell, columns, this.props.Tab, false, this.moduleParams, Utils.getAllSearchOptions, Utils.getAllSearchOptions) // 数据源 |
| | | param.LText = getSysDefaultSql(btn, setting, '', param, cell, columns, false, this.moduleParams, Utils.getAllSearchOptions, Utils.getAllSearchOptions) // 数据源 |
| | | if (btn.output) { |
| | | param.key_back_type = 'Y' |
| | | } |
| | |
| | | param.ID = Utils.getguid() |
| | | |
| | | if (retmsg) { |
| | | const { sql, callbacksql } = getSysDefaultSql(btn, setting, formdata, param, cell, columns, this.props.Tab, retmsg, this.moduleParams, Utils.getAllSearchOptions) // 数据源 |
| | | const { sql, callbacksql } = getSysDefaultSql(btn, setting, formdata, param, cell, columns, retmsg, this.moduleParams, Utils.getAllSearchOptions) // 数据源 |
| | | param.LText = sql |
| | | param.$callbacksql = callbacksql |
| | | } else { |
| | | param.LText = getSysDefaultSql(btn, setting, formdata, param, cell, columns, this.props.Tab, false, this.moduleParams, Utils.getAllSearchOptions) // 数据源 |
| | | param.LText = getSysDefaultSql(btn, setting, formdata, param, cell, columns, false, this.moduleParams, Utils.getAllSearchOptions) // 数据源 |
| | | if (btn.output) { |
| | | param.key_back_type = 'Y' |
| | | } |
| | |
| | | param.ID = primaryId |
| | | |
| | | if (retmsg) { |
| | | const { sql, callbacksql } = getSysDefaultSql(btn, setting, formdata, param, cell, columns, this.props.Tab, retmsg, this.moduleParams, Utils.getAllSearchOptions) // 数据源 |
| | | const { sql, callbacksql } = getSysDefaultSql(btn, setting, formdata, param, cell, columns, retmsg, this.moduleParams, Utils.getAllSearchOptions) // 数据源 |
| | | param.LText = sql |
| | | param.$callbacksql = callbacksql |
| | | } else { |
| | | param.LText = getSysDefaultSql(btn, setting, formdata, param, cell, columns, this.props.Tab, false, this.moduleParams, Utils.getAllSearchOptions) // 数据源 |
| | | param.LText = getSysDefaultSql(btn, setting, formdata, param, cell, columns, false, this.moduleParams, Utils.getAllSearchOptions) // 数据源 |
| | | if (btn.output) { |
| | | param.key_back_type = 'Y' |
| | | } |
| | |
| | | } |
| | | |
| | | execRealSubmit = (data, _resolve, formdata) => { |
| | | const { setting, btn, Tab, BID } = this.props |
| | | const { setting, btn, BID } = this.props |
| | | |
| | | if (((Tab && Tab.supMenu) || setting.supModule) && !BID) { |
| | | if (setting.supModule && !BID) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '需要上级主键值!', |
| | |
| | | BID: PropTypes.string, // 主表ID |
| | | BData: PropTypes.any, // 主表数据 |
| | | selectedData: PropTypes.any, // 子表中选择数据 |
| | | Tab: PropTypes.any, // 如果当前元素为标签时,tab为标签信息 |
| | | MenuID: PropTypes.string, // 菜单ID |
| | | btn: PropTypes.object, // 按钮 |
| | | setting: PropTypes.any, // 页面通用设置 |
| | |
| | | * @description 触发按钮操作 |
| | | */ |
| | | actionTrigger = (triggerId, record, type) => { |
| | | const { setting, Tab, BID, btn, selectedData } = this.props |
| | | const { setting, BID, btn, selectedData } = this.props |
| | | const { loading, disabled } = this.state |
| | | |
| | | if (loading || disabled) return |
| | | if (triggerId && btn.uuid !== triggerId) return |
| | | |
| | | if (((Tab && Tab.supMenu) || setting.supModule) && !BID) { |
| | | if (setting.supModule && !BID) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '需要上级主键值!', |
| | |
| | | BID: PropTypes.string, // 主表ID |
| | | BData: PropTypes.any, // 主表数据 |
| | | selectedData: PropTypes.any, // 子表中选择数据 |
| | | Tab: PropTypes.any, // 如果当前元素为标签时,tab为标签信息 |
| | | MenuID: PropTypes.string, // 菜单ID |
| | | btn: PropTypes.object, // 按钮 |
| | | setting: PropTypes.any, // 页面通用设置 |
| | |
| | | * @description 触发按钮操作 |
| | | */ |
| | | actionTrigger = (triggerId, record, type) => { |
| | | const { Tab, BID, btn, selectedData, setting } = this.props |
| | | const { BID, btn, selectedData, setting } = this.props |
| | | const { loading, disabled } = this.state |
| | | |
| | | if (loading || disabled) return |
| | | if (triggerId && btn.uuid !== triggerId) return |
| | | |
| | | if (((Tab && Tab.supMenu) || setting.supModule) && !BID) { |
| | | if (setting.supModule && !BID) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '需要上级主键值!', |
| | |
| | | MenuID: PropTypes.string, // 菜单ID |
| | | btn: PropTypes.object, // 按钮 |
| | | selectedData: PropTypes.any, // 子表中选择数据 |
| | | setting: PropTypes.any, // 页面通用设置 |
| | | disabled: PropTypes.any, // 行按钮禁用 |
| | | } |
| | | |
| | |
| | | * @description 触发按钮操作 |
| | | */ |
| | | actionTrigger = (triggerId, record, type) => { |
| | | const { setting, btn, selectedData } = this.props |
| | | const { btn, selectedData } = this.props |
| | | const { disabled } = this.state |
| | | |
| | | if (disabled) return |
| | |
| | | |
| | | let primaryId = '' |
| | | |
| | | if (btn.Ot === 'requiredSgl' && setting.primaryKey) { |
| | | primaryId = data[0][setting.primaryKey] || '' |
| | | if (btn.Ot === 'requiredSgl') { |
| | | primaryId = data[0].$$uuid || '' |
| | | } else if (btn.Ot === 'notRequired' && data[0]) { |
| | | primaryId = data[0].$$BID || '' |
| | | } |
| | | |
| | | let newtab = {} |
| | |
| | | type: PropTypes.any, // 卡片类型,添加按钮为 insert |
| | | BID: PropTypes.any, // 主表ID |
| | | BData: PropTypes.any, // 主表数据 |
| | | Tab: PropTypes.any, // 如果当前元素为标签时,tab为标签信息 |
| | | MenuID: PropTypes.string, // 菜单ID |
| | | setting: PropTypes.object, // 页面设定 |
| | | columns: PropTypes.array, // 显示列 |
| | |
| | | * @description 获取按钮元素 |
| | | */ |
| | | getActionList = (actions) => { |
| | | const { BData, Tab, setting, columns, ContainerId, data, MenuID } = this.props |
| | | const { BData, setting, columns, ContainerId, data, MenuID } = this.props |
| | | |
| | | return actions.map(item => { |
| | | if (['exec', 'prompt', 'pop'].includes(item.OpenType)) { |
| | |
| | | <NormalButton |
| | | key={item.uuid} |
| | | BID={data.$$BID} |
| | | Tab={Tab} |
| | | btn={item} |
| | | BData={BData} |
| | | setting={setting} |
| | |
| | | <PopupButton |
| | | key={item.uuid} |
| | | BID={data.$$BID} |
| | | Tab={Tab} |
| | | btn={item} |
| | | BData={BData} |
| | | setting={setting} |
| | |
| | | key={item.uuid} |
| | | btn={item} |
| | | MenuID={MenuID} |
| | | setting={setting} |
| | | selectedData={[data]} |
| | | /> |
| | | ) |
| | |
| | | <NewPageButton |
| | | key={item.uuid} |
| | | btn={item} |
| | | setting={setting} |
| | | selectedData={[data]} |
| | | /> |
| | | ) |
| | |
| | | <PrintButton |
| | | key={item.uuid} |
| | | BID={data.$$BID} |
| | | Tab={Tab} |
| | | btn={item} |
| | | BData={BData} |
| | | setting={setting} |
| | |
| | | <div className="mk-card-insert"> |
| | | <NormalButton |
| | | BID={this.props.BID} |
| | | Tab={this.props.Tab} |
| | | btn={{...card.insertAction, style}} |
| | | BData={this.props.BData} |
| | | setting={this.props.setting} |
| | |
| | | static propTpyes = { |
| | | BID: PropTypes.any, // 主表ID |
| | | BData: PropTypes.any, // 主表数据 |
| | | Tab: PropTypes.any, // 如果当前元素为标签时,tab为标签信息 |
| | | MenuID: PropTypes.string, // 菜单ID |
| | | config: PropTypes.object, // 页面配置信息 |
| | | columns: PropTypes.array, // 显示列 |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { plot, data, loading, BID, BData, Tab, MenuID, config, columns, ContainerId } = this.props |
| | | const { plot, data, loading, BID, BData, MenuID, config, columns, ContainerId } = this.props |
| | | const { card, colMap, selectKey, actionList } = this.state |
| | | |
| | | return ( |
| | |
| | | <ExcelInButton |
| | | key={action.uuid} |
| | | BID={BID} |
| | | Tab={Tab} |
| | | btn={action} |
| | | setting={config.setting} |
| | | /> |
| | |
| | | <ExcelOutButton |
| | | key={action.uuid} |
| | | BID={BID} |
| | | Tab={Tab} |
| | | btn={action} |
| | | setting={config.setting} |
| | | /> |
| | |
| | | <CardCell |
| | | key={i} |
| | | BID={BID} |
| | | Tab={Tab} |
| | | card={card} |
| | | data={item} |
| | | BData={BData} |
| | |
| | | key="insert" |
| | | type="insert" |
| | | BID={BID} |
| | | Tab={Tab} |
| | | card={card} |
| | | data={{key: 'insert'}} |
| | | BData={BData} |
| | |
| | | class LineChart extends Component { |
| | | static propTpyes = { |
| | | BID: PropTypes.any, // 父级Id |
| | | Tab: PropTypes.any, // 标签信息 |
| | | plot: PropTypes.object, // 图标设置信息 |
| | | data: PropTypes.array, // 图表传入数据 |
| | | loading: PropTypes.bool, // 数据加载中 |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { plot, loading, config, BID, Tab } = this.props |
| | | const { plot, loading, config, BID } = this.props |
| | | const { empty, chartFields, selectFields, actions } = this.state |
| | | |
| | | return ( |
| | |
| | | <ExcelOutButton |
| | | key={item.uuid} |
| | | BID={BID} |
| | | Tab={Tab} |
| | | btn={item} |
| | | show="icon" |
| | | setting={config.setting} |
| | |
| | | <ExcelInButton |
| | | key={item.uuid} |
| | | BID={BID} |
| | | Tab={Tab} |
| | | btn={item} |
| | | show="icon" |
| | | setting={config.setting} |
| | |
| | | selectedData={[record]} |
| | | BData={this.props.BData} |
| | | MenuID={this.props.MenuID} |
| | | setting={this.props.setting} |
| | | /> |
| | | ) |
| | | } else if (btn.OpenType === 'innerpage' || btn.OpenType === 'outerpage') { |
| | |
| | | disabled={record.$disabled} |
| | | selectedData={[record]} |
| | | BData={this.props.BData} |
| | | setting={this.props.setting} |
| | | /> |
| | | ) |
| | | } |
| | |
| | | item.subtabs.forEach(tab => { |
| | | uuids[tab.uuid] = this.getuuid() |
| | | tab.uuid = uuids[tab.uuid] |
| | | tab.parentId = item.uuid |
| | | |
| | | tab.components = tab.components.map(cell => { |
| | | cell.tabId = tab.uuid |
| | | cell.parentId = item.uuid |
| | | return cell |
| | | }) |
| | | tab.components = this.resetConfig(tab.components, uuids, clear) |
| | | }) |
| | | } else if (item.type === 'group') { |
| | | item.components = item.components.map(cell => { |
| | | cell.parentId = item.uuid |
| | | return cell |
| | | }) |
| | | item.components = this.resetConfig(item.components, uuids, clear) |
| | | } else if (item.type === 'menubar') { |
| | | item.subMenus = item.subMenus.map(cell => { |
| | |
| | | |
| | | return item |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * @description 重置菜单配置,页面整体复制 |
| | | * @return {String} components 配置信息 |
| | | */ |
| | | static getFloor = (id) => { |
| | | let floor = 1 |
| | | let finish = false |
| | | |
| | | let reCheck = (components, f) => { |
| | | components.forEach(item => { |
| | | if (finish) return |
| | | if (item.type === 'tabs') { |
| | | if (item.uuid === id) { |
| | | floor = f |
| | | finish = true |
| | | } else { |
| | | item.subtabs.forEach(tab => { |
| | | reCheck(tab.components, f + 1) |
| | | }) |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | |
| | | reCheck(window.GLOB.customMenu.components, 1) |
| | | |
| | | return floor |
| | | } |
| | | |
| | | /** |
| | |
| | | * @return {Object} param 请求参数 |
| | | * @return {Array} data 列表行数据 |
| | | * @return {Array} columns 显示列 |
| | | * @return {Object} tab 标签信息 |
| | | * @return {Boolean} retmsg 是否需要数据返回 |
| | | */ |
| | | export function getSysDefaultSql (btn, setting, formdata, param, data, columns, tab, retmsg = false, moduleParams, getOptions) { |
| | | export function getSysDefaultSql (btn, setting, formdata, param, data, columns, retmsg = false, moduleParams, getOptions) { |
| | | let primaryId = param.ID |
| | | let BID = param.BID || '' |
| | | let verify = btn.verify || {} |
| | | let datavars = {} // 声明的变量,表单及显示列 |
| | | let _actionType = null |
| | | let _callbacksql = '' |
| | | let foreignKey = tab && tab.foreignKey ? tab.foreignKey.toLowerCase() : '' |
| | | let foreignKey = setting.foreignKey ? setting.foreignKey.toLowerCase() : '' |
| | | |
| | | if (verify.default !== 'false') { // 判断是否使用默认sql |
| | | _actionType = btn.sqlType |
| | |
| | | createDate: '', |
| | | formData: [], |
| | | headers: [], |
| | | interface: window.GLOB.baseurl + 'webapi/logon', |
| | | interface: window.GLOB.baseurl + 'webapi/dologon', |
| | | method: 'POST', |
| | | params: [], |
| | | raw: "{\n \"UserName\":\"******\",\n \"Password\":\"******\",\n \"systemType\":\"local\",\n \"Type\":\"公钥\",\n \"privatekey\":\"私钥\",\n \"timestamp\":\"" + moment().format('YYYY-MM-DD HH:mm:ss') + "\",\n \"appkey\":\"" + window.GLOB.appkey + "\"\n}", |
| | | uuid: 'dologon' |
| | | } |
| | | |
| | | if (window.GLOB.mainSystemApi) { |
| | | m.raw = "{\n \"UserName\":\"******\",\n \"Password\":\"******\",\n \"systemType\":\"local\",\n \"Type\":\"公钥\",\n \"privatekey\":\"私钥\",\n \"timestamp\":\"" + moment().format('YYYY-MM-DD HH:mm:ss') + "\",\n \"appkey\":\"" + window.GLOB.appkey + "\",\n \"rduri\":\"" + window.GLOB.mainSystemApi.replace(/\/webapi(.*)/, '/webapi/dologon') + "\"\n}" |
| | | } |
| | | MKEmitter.emit('useInterface', m) |
| | | } |
| | |
| | | <div className="line-title">示例</div> |
| | | <div className="line-item" key="dologon"> |
| | | <div className="method">POST</div> |
| | | <div className="inter" style={{lineHeight: '40px'}}>logon</div> |
| | | <div className="inter" style={{lineHeight: '40px'}}>dologon</div> |
| | | <div className="action" style={{paddingLeft: '40px'}}> |
| | | <RightOutlined onClick={this.uselogon} /> |
| | | </div> |
| | |
| | | MKEmitter.addListener('copyButtons', this.copyButtons) |
| | | MKEmitter.addListener('changePopview', this.initPopview) |
| | | MKEmitter.addListener('triggerMenuSave', this.triggerMenuSave) |
| | | MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle) |
| | | MKEmitter.addListener('updateCustomComponent', this.updateCustomComponent) |
| | | setTimeout(() => { |
| | | if (sessionStorage.getItem('app_custom_components')) { |
| | |
| | | MKEmitter.removeListener('copyButtons', this.copyButtons) |
| | | MKEmitter.removeListener('changePopview', this.initPopview) |
| | | MKEmitter.removeListener('triggerMenuSave', this.triggerMenuSave) |
| | | MKEmitter.removeListener('submitComponentStyle', this.updateComponentStyle) |
| | | MKEmitter.removeListener('updateCustomComponent', this.updateCustomComponent) |
| | | } |
| | | |
| | |
| | | }) |
| | | }) |
| | | this.setState({customComponents: coms}) |
| | | } |
| | | |
| | | updateComponentStyle = (parentId, keys, style) => { |
| | | const { config } = this.state |
| | | |
| | | if (config.uuid !== parentId) return |
| | | |
| | | let components = config.components.map(item => { |
| | | if (keys.includes(item.uuid)) { |
| | | item.style = {...item.style, ...style} |
| | | } |
| | | return item |
| | | }) |
| | | |
| | | this.setState({ |
| | | config: {...config, components}, |
| | | comloading: true |
| | | }, () => { |
| | | this.setState({ |
| | | comloading: false |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | delButtons = (items) => { |
| | |
| | | MKEmitter.addListener('modalStatus', this.modalStatus) |
| | | MKEmitter.addListener('triggerMenuSave', this.submitConfig) |
| | | MKEmitter.addListener('changeEditMenu', this.changeEditMenu) |
| | | MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle) |
| | | MKEmitter.addListener('updateCustomComponent', this.updateCustomComponent) |
| | | setTimeout(() => { |
| | | if (sessionStorage.getItem('app_custom_components')) { |
| | |
| | | MKEmitter.removeListener('modalStatus', this.modalStatus) |
| | | MKEmitter.removeListener('triggerMenuSave', this.submitConfig) |
| | | MKEmitter.removeListener('changeEditMenu', this.changeEditMenu) |
| | | MKEmitter.removeListener('submitComponentStyle', this.updateComponentStyle) |
| | | MKEmitter.removeListener('updateCustomComponent', this.updateCustomComponent) |
| | | } |
| | | |
| | |
| | | this.setState({customComponents: coms}) |
| | | } |
| | | |
| | | updateComponentStyle = (parentId, keys, style) => { |
| | | const { config } = this.state |
| | | |
| | | if (config.uuid !== parentId) return |
| | | |
| | | let components = config.components.map(item => { |
| | | if (keys.includes(item.uuid)) { |
| | | item.style = {...item.style, ...style} |
| | | } |
| | | return item |
| | | }) |
| | | |
| | | this.setState({ |
| | | config: {...config, components}, |
| | | comloading: true |
| | | }, () => { |
| | | this.setState({ |
| | | comloading: false |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | closeView = () => { |
| | | const { oriConfig, config } = this.state |
| | | |
| | |
| | | backElements: [] |
| | | } |
| | | ], |
| | | headerStyle: {}, parentId: '', width: 24, scripts: [], pageable: false, |
| | | headerStyle: {}, width: 24, scripts: [], pageable: false, |
| | | wrap: {name: 'logo', width: 24, datatype: 'static', cardType: '', blacklist: []}, |
| | | name: 'logo', floor: 1, switchable: true, |
| | | setting:{interType: 'system'}, tabId: '', style:{paddingTop: '8vh', paddingBottom: '10vh'}, format: 'object', subtype: 'propcard', type: 'card', uuid: Utils.getuuid(), columns: [] |
| | | setting:{interType: 'system'}, style:{paddingTop: '8vh', paddingBottom: '10vh'}, format: 'object', subtype: 'propcard', type: 'card', uuid: Utils.getuuid(), columns: [] |
| | | }) |
| | | |
| | | config.components.push({ |
| | | uuid: Utils.getuuid(), |
| | | type: 'login', |
| | | floor: 1, |
| | | tabId: '', |
| | | parentId: '', |
| | | width: 24, |
| | | name: '用户绑定', |
| | | subtype: 'bindlogin', |
| | |
| | | backElements: [] |
| | | } |
| | | ], |
| | | headerStyle: {}, parentId: '', width: 24, scripts: [], pageable: false, |
| | | headerStyle: {}, width: 24, scripts: [], pageable: false, |
| | | wrap: {name: 'Power', width: 24, datatype: 'static', cardType: '', blacklist: []}, |
| | | name: 'Power', floor: 1, switchable: true, |
| | | setting:{interType: 'system'}, tabId: '', style:{}, format: 'object', subtype: 'propcard', type: 'card', uuid: Utils.getuuid(), columns: [] |
| | | setting:{interType: 'system'}, style:{}, format: 'object', subtype: 'propcard', type: 'card', uuid: Utils.getuuid(), columns: [] |
| | | }) |
| | | } |
| | | |
| | |
| | | <SysInterface config={config} updateConfig={this.updateConfig}/> |
| | | <PictureController/> |
| | | <Quotecomponent config={config} updateConfig={this.updateConfig}/> |
| | | <StyleCombControlButton menu={config} /> |
| | | <Button className="mk-border-green set-home" onClick={this.setHomeView}><HomeOutlined /> 设为首页</Button> |
| | | <Button className="mk-border-purple set-login" onClick={this.setLoginView}><LoginOutlined /> 设为登录页</Button> |
| | | <ReplaceField type="custom" config={config} updateConfig={this.resetConfig}/> |
| | | <Transfer MenuID={MenuId} /> |
| | | <Versions MenuId={MenuId} open_edition={config ? config.open_edition : ''}/> |
| | | <StyleCombControlButton menu={config} /> |
| | | <Button className="mk-border-danger" onClick={this.refreshView}><RedoOutlined /> 强制刷新</Button> |
| | | <Button type="default" onClick={this.closeView}>关闭</Button> |
| | | </div> |
| | |
| | | MKEmitter.addListener('changePopview', this.initPopview) |
| | | MKEmitter.addListener('changeEditMenu', this.changeEditMenu) |
| | | MKEmitter.addListener('triggerMenuSave', this.triggerMenuSave) |
| | | MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle) |
| | | MKEmitter.addListener('updateCustomComponent', this.updateCustomComponent) |
| | | setTimeout(() => { |
| | | if (sessionStorage.getItem('app_custom_components')) { |
| | |
| | | MKEmitter.removeListener('changePopview', this.initPopview) |
| | | MKEmitter.removeListener('changeEditMenu', this.changeEditMenu) |
| | | MKEmitter.removeListener('triggerMenuSave', this.triggerMenuSave) |
| | | MKEmitter.removeListener('submitComponentStyle', this.updateComponentStyle) |
| | | MKEmitter.removeListener('updateCustomComponent', this.updateCustomComponent) |
| | | } |
| | | |
| | |
| | | }) |
| | | }) |
| | | this.setState({customComponents: coms}) |
| | | } |
| | | |
| | | updateComponentStyle = (parentId, keys, style) => { |
| | | const { config } = this.state |
| | | |
| | | if (config.uuid !== parentId) return |
| | | |
| | | let components = config.components.map(item => { |
| | | if (keys.includes(item.uuid)) { |
| | | item.style = {...item.style, ...style} |
| | | } |
| | | return item |
| | | }) |
| | | |
| | | this.setState({ |
| | | config: {...config, components}, |
| | | comloading: true |
| | | }, () => { |
| | | this.setState({ |
| | | comloading: false |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | delButtons = (items) => { |
| | |
| | | <SysInterface config={config} updateConfig={this.updateConfig}/> |
| | | <PictureController/> |
| | | <Quotecomponent config={config} updateConfig={this.updateConfig}/> |
| | | <StyleCombControlButton menu={config} /> |
| | | <Button className="mk-border-green" onClick={this.setHomeView}><HomeOutlined /> 设为首页</Button> |
| | | <Button className="mk-border-purple" onClick={this.setLoginView}><LoginOutlined/> 设为登录页</Button> |
| | | <ReplaceField type="custom" config={config} updateConfig={this.resetConfig}/> |
| | | <Transfer MenuID={MenuId} /> |
| | | <Versions MenuId={MenuId} open_edition={config ? config.open_edition : ''}/> |
| | | <StyleCombControlButton menu={config} /> |
| | | <Button className="mk-border-danger" onClick={this.refreshView}><RedoOutlined /> 强制刷新</Button> |
| | | <Button type="default" onClick={this.closeView}>关闭</Button> |
| | | </div> |
| | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('delButtons', this.delButtons) |
| | | MKEmitter.addListener('triggerMenuSave', this.submitConfig) |
| | | MKEmitter.addListener('submitComponentStyle', this.updateComponentStyle) |
| | | MKEmitter.addListener('updateCustomComponent', this.updateCustomComponent) |
| | | setTimeout(() => { |
| | | if (sessionStorage.getItem('app_custom_components')) { |
| | |
| | | } |
| | | MKEmitter.removeListener('delButtons', this.delButtons) |
| | | MKEmitter.removeListener('triggerMenuSave', this.submitConfig) |
| | | MKEmitter.removeListener('submitComponentStyle', this.updateComponentStyle) |
| | | MKEmitter.removeListener('updateCustomComponent', this.updateCustomComponent) |
| | | } |
| | | |
| | |
| | | }) |
| | | }) |
| | | this.setState({customComponents: coms}) |
| | | } |
| | | |
| | | updateComponentStyle = (parentId, keys, style) => { |
| | | const { config } = this.state |
| | | |
| | | if (config.uuid !== parentId) return |
| | | |
| | | let components = config.components.map(item => { |
| | | if (keys.includes(item.uuid)) { |
| | | item.style = {...item.style, ...style} |
| | | } |
| | | return item |
| | | }) |
| | | |
| | | this.setState({ |
| | | config: {...config, components}, |
| | | comloading: true |
| | | }, () => { |
| | | this.setState({ |
| | | comloading: false |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | delButtons = (items) => { |
| | |
| | | |
| | | changeSetting = () => { |
| | | this.setState({settingshow: !this.state.settingshow}) |
| | | |
| | | setTimeout(() => { |
| | | MKEmitter.emit('tabsChange', 'all') |
| | | }, 400) |
| | | } |
| | | |
| | | render () { |
| | |
| | | { |
| | | type: 'action', |
| | | label: '弹窗(表单)', |
| | | subType: 'pop', |
| | | url: '' |
| | | text: '弹窗(表单)', |
| | | value: 'pop', |
| | | $init: true |
| | | }, |
| | | { |
| | | type: 'action', |
| | | label: '提示框', |
| | | subType: 'prompt', |
| | | url: '' |
| | | text: '提示框', |
| | | value: 'prompt', |
| | | $init: true |
| | | }, |
| | | { |
| | | type: 'action', |
| | | label: '直接执行', |
| | | subType: 'exec', |
| | | url: '' |
| | | text: '直接执行', |
| | | value: 'exec', |
| | | $init: true |
| | | }, |
| | | { |
| | | type: 'action', |
| | | label: '导入Excel', |
| | | subType: 'excelIn', |
| | | url: '' |
| | | text: '导入Excel', |
| | | value: 'excelIn', |
| | | $init: true |
| | | }, |
| | | { |
| | | type: 'action', |
| | | label: '导出Excel', |
| | | subType: 'excelOut', |
| | | url: '' |
| | | text: '导出Excel', |
| | | value: 'excelOut', |
| | | $init: true |
| | | }, |
| | | { |
| | | type: 'action', |
| | | label: '弹窗(标签)', |
| | | subType: 'popview', |
| | | url: '' |
| | | text: '弹窗(标签)', |
| | | value: 'popview', |
| | | $init: true |
| | | }, |
| | | { |
| | | type: 'action', |
| | | label: '标签页', |
| | | subType: 'tab', |
| | | url: '' |
| | | text: '标签页', |
| | | value: 'tab', |
| | | $init: true |
| | | }, |
| | | { |
| | | type: 'action', |
| | | label: '新页面', |
| | | subType: 'innerpage', |
| | | url: '' |
| | | text: '新页面', |
| | | value: 'innerpage', |
| | | $init: true |
| | | }, |
| | | { |
| | | type: 'action', |
| | | label: '功能按钮', |
| | | subType: 'funcbutton', |
| | | url: '' |
| | | text: '功能按钮', |
| | | value: 'funcbutton', |
| | | $init: true |
| | | } |
| | | ], |
| | | columnItems: [ |