From f267d04e0561a0a20d1f2a9f558a273558ece90d Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期一, 24 五月 2021 17:50:19 +0800 Subject: [PATCH] 2021-05-24 --- src/menu/components/table/normal-table/index.jsx | 161 ++++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 126 insertions(+), 35 deletions(-) diff --git a/src/menu/components/table/normal-table/index.jsx b/src/menu/components/table/normal-table/index.jsx index a85b644..aa19a47 100644 --- a/src/menu/components/table/normal-table/index.jsx +++ b/src/menu/components/table/normal-table/index.jsx @@ -1,12 +1,11 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import {connect} from 'react-redux' import { is, fromJS } from 'immutable' -import { Icon, Popover, Modal } from 'antd' +import { Icon, Popover, Modal, notification } from 'antd' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' - +import { resetStyle } from '@/utils/utils-custom.js' import MKEmitter from '@/utils/events.js' import Utils from '@/utils/utils.js' import zhCN from '@/locales/zh-CN/model.js' @@ -18,6 +17,10 @@ const SearchComponent = asyncComponent(() => import('@/templates/sharecomponent/searchcomponent')) const ActionComponent = asyncComponent(() => import('@/menu/components/share/actioncomponent')) const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader')) +const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) +const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent')) +const PasteComponent = asyncIconComponent(() => import('@/menu/components/share/pastecomponent')) +const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent')) const ColumnComponent = asyncComponent(() => import('./columns')) const WrapComponent = asyncIconComponent(() => import('./wrapsetting')) @@ -31,7 +34,7 @@ } state = { - dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, + dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, card: null, back: false } @@ -50,21 +53,21 @@ pageable: true, // 缁勪欢灞炴�� - 鏄惁鍙垎椤� switchable: true, // 缁勪欢灞炴�� - 鏁版嵁鏄惁鍙垏鎹� dataName: card.dataName || '', - width: 24, + width: card.width || 24, search: [ { origin: true, uuid: Utils.getuuid(), label: 'label', type: 'text', match: 'like' }, { origin: true, uuid: Utils.getuuid(), label: 'label', type: 'select', match: 'equal' }, { origin: true, uuid: Utils.getuuid(), label: 'label', type: 'date', match: 'greater' } ], action: [ - { origin: true, uuid: Utils.getuuid(), label: '娣诲姞', intertype: 'system', OpenType: 'pop', icon: 'plus', class: 'green', btnstyle: {color: 'rgb(255, 255, 255)', background: 'rgb(38, 194, 129)', marginRight: '15px'} }, - { origin: true, uuid: Utils.getuuid(), label: '淇敼', intertype: 'system', OpenType: 'pop', icon: 'form', class: 'purple', btnstyle: {color: 'rgb(255, 255, 255)', background: 'rgb(142, 68, 173)', marginRight: '15px'} }, - { origin: true, uuid: Utils.getuuid(), label: '鍒犻櫎', intertype: 'system', OpenType: 'prompt', icon: 'delete', class: 'danger', btnstyle: {color: 'rgb(255, 255, 255)', background: 'rgb(255, 77, 79)', marginRight: '15px'} } + { origin: true, uuid: Utils.getuuid(), label: '娣诲姞', intertype: 'system', OpenType: 'pop', icon: 'plus', class: 'green', style: {color: 'rgb(255, 255, 255)', background: 'rgb(38, 194, 129)', marginRight: '15px'} }, + { origin: true, uuid: Utils.getuuid(), label: '淇敼', intertype: 'system', OpenType: 'pop', icon: 'form', class: 'purple', style: {color: 'rgb(255, 255, 255)', background: 'rgb(142, 68, 173)', marginRight: '15px'} }, + { origin: true, uuid: Utils.getuuid(), label: '鍒犻櫎', intertype: 'system', OpenType: 'prompt', icon: 'delete', class: 'danger', style: {color: 'rgb(255, 255, 255)', background: 'rgb(255, 77, 79)', marginRight: '15px'} } ], name: card.name, subtype: card.subtype, setting: { interType: 'system' }, - wrap: { name: card.name, width: 24, bordered: 'true', tableType: 'checkbox' }, + wrap: { name: card.name, width: card.width || 24, bordered: 'true', tableType: 'checkbox' }, style: { marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' }, headerStyle: { fontSize: '16px', borderBottomWidth: '1px', borderBottomColor: '#e8e8e8' }, columns: [], @@ -75,6 +78,41 @@ ], scripts: [], btnlog: [], + } + + if (card.config) { + let config = fromJS(card.config).toJS() + + _card.wrap = config.wrap + _card.wrap.name = card.name + _card.style = config.style + _card.headerStyle = config.headerStyle + + _card.action = config.action.map(item => { + item.uuid = Utils.getuuid() + return item + }) + _card.search = config.search.map(item => { + item.uuid = Utils.getuuid() + return item + }) + _card.cols = config.cols.map(col => { + col.uuid = Utils.getuuid() + if (col.type === 'colspan' && col.subcols) { + col = this.loopCol(col) + } else if (col.type === 'custom' && col.elements) { + col.elements = col.elements.map(cell => { + cell.uuid = Utils.getuuid() + return cell + }) + } else if (col.type === 'action' && col.elements) { + col.elements = col.elements.map(cell => { + cell.uuid = Utils.getuuid() + return cell + }) + } + return col + }) } this.setState({ @@ -95,7 +133,7 @@ } shouldComponentUpdate (nextProps, nextState) { - return !is(fromJS(this.state), fromJS(nextState)) || (!this.props.menu && nextProps.menu) + return !is(fromJS(this.state), fromJS(nextState)) } /** @@ -108,6 +146,23 @@ MKEmitter.removeListener('submitStyle', this.getStyle) MKEmitter.removeListener('submitModal', this.handleSave) MKEmitter.removeListener('logButton', this.logButton) + } + + loopCol = (col) => { + col.subcols = col.subcols.map(c => { + c.uuid = Utils.getuuid() + if (c.type === 'colspan' && c.subcols) { + c = this.loopCol(c) + } else if (c.type === 'custom' && c.elements) { + c.elements = c.elements.map(cell => { + cell.uuid = Utils.getuuid() + return cell + }) + } + return c + }) + + return col } /** @@ -219,7 +274,7 @@ newcard.errorTime = 10 newcard.verify = null newcard.show = 'button' - newcard.btnstyle = {marginRight: '15px'} + newcard.style = {marginRight: '15px'} // 娉ㄥ唽浜嬩欢-娣诲姞鎸夐挳 MKEmitter.emit('addButton', card.uuid, newcard) @@ -235,28 +290,22 @@ this.props.updateConfig(config) } - setSubConfig = (btn) => { + setSubConfig = (item) => { const { card } = this.state + let btn = fromJS(item).toJS() - if (btn.OpenType === 'pop') { + if (btn.OpenType === 'pop' || btn.execMode === 'pop') { if (!btn.modal) { btn.modal = { - setting: { - title: btn.label, - width: 60, - cols: '2', - container: 'tab', - focus: '', - finish: 'close', - clickouter: 'unclose', - display: 'modal' - }, + setting: { title: btn.label, width: 60, cols: '2', container: 'view', focus: '', finish: 'close', clickouter: 'unclose', display: 'modal' }, tables: [], groups: [], fields: [] } } MKEmitter.emit('changeModal', card, btn) + } else if (btn.OpenType === 'popview') { + MKEmitter.emit('changePopview', card, btn) } } @@ -281,11 +330,59 @@ this.props.updateConfig(card) } + handleLog = (type, logs, item) => { + let card = fromJS(this.state.card).toJS() + + if (type === 'revert') { + let done = false + if (item.$parentId) { + card.cols.forEach(col => { + if (col.type !== 'action') return + if (item.$parentId === col.uuid) { + col.elements = col.elements ? [...col.elements, item] : [item] + done = true + } + }) + } + + if (!done) { + card.action = card.action ? [...card.action, item] : [item] + } + + card.btnlog = logs + + this.setState({ card }) + this.props.updateConfig(card) + notification.success({ + top: 92, + message: '鎭㈠鎴愬姛锛�', + duration: 2 + }) + } else { + card.btnlog = logs + this.setState({ card }) + this.props.updateConfig(card) + notification.success({ + top: 92, + message: '娓呴櫎鎴愬姛锛�', + duration: 2 + }) + } + } + + clickComponent = (e) => { + if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { + e.stopPropagation() + MKEmitter.emit('clickComponent', this.state.card) + } + } + render() { const { card } = this.state + let _style = resetStyle(card.style) return ( - <div className="menu-normal-table-edit-box" style={{...card.style, height: card.wrap.height}}> + <div className="menu-normal-table-edit-box" style={_style} onClick={this.clickComponent} id={card.uuid}> <NormalHeader defaultshow="hidden" hideSearch="true" config={card} updateComponent={this.updateComponent}/> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> @@ -293,7 +390,11 @@ <Icon className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch} type="plus-circle" /> <Icon className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton} type="plus-square" /> <WrapComponent config={card} updateConfig={this.updateComponent} /> + <CopyComponent type="normaltable" card={card}/> + <PasteComponent config={card} options={['action', 'search', 'form', 'cols']} updateConfig={this.updateComponent} /> <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} /> + <UserComponent config={card}/> <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> <SettingComponent config={card} updateConfig={this.updateComponent} /> </div> @@ -308,14 +409,4 @@ } } -const mapStateToProps = (state) => { - return { - menu: state.customMenu - } -} - -const mapDispatchToProps = () => { - return {} -} - -export default connect(mapStateToProps, mapDispatchToProps)(TableCardEditComponent) \ No newline at end of file +export default TableCardEditComponent \ No newline at end of file -- Gitblit v1.8.0