From 137fb8ea6af2789b3238b22bac31d80bced41dfe Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期三, 28 七月 2021 11:39:39 +0800 Subject: [PATCH] 2021-07-28 --- src/menu/components/card/data-card/index.jsx | 116 ++++++++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 88 insertions(+), 28 deletions(-) diff --git a/src/menu/components/card/data-card/index.jsx b/src/menu/components/card/data-card/index.jsx index 7b12967..5c85b95 100644 --- a/src/menu/components/card/data-card/index.jsx +++ b/src/menu/components/card/data-card/index.jsx @@ -5,7 +5,7 @@ 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' @@ -15,6 +15,7 @@ const SettingComponent = asyncIconComponent(() => import('@/menu/datasource')) const WrapComponent = asyncIconComponent(() => import('./wrapsetting')) const CardComponent = asyncComponent(() => import('../cardcomponent')) +const MobPagination = asyncIconComponent(() => import('@/menu/components/share/mobPagination')) const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent')) const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent')) @@ -34,14 +35,15 @@ state = { dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, card: null, + appType: sessionStorage.getItem('appType'), back: false } UNSAFE_componentWillMount () { const { card } = this.props + const { appType } = this.state if (card.isNew) { - let ismob = sessionStorage.getItem('appType') === 'mob' let _card = { uuid: card.uuid, type: card.type, @@ -56,7 +58,7 @@ name: card.name, subtype: card.subtype, setting: { interType: 'system' }, - wrap: { name: card.name, width: card.width || 24, title: '', pagestyle: 'page', switch: 'false' }, + wrap: { name: card.name, width: card.width || 24, title: '', pagestyle: 'page', switch: 'false', cardType: '' }, style: { marginLeft: '0px', marginRight: '0px', marginTop: '8px', marginBottom: '8px' }, headerStyle: { fontSize: '16px', borderBottomWidth: '1px', borderBottomColor: '#e8e8e8' }, columns: [], @@ -66,7 +68,7 @@ btnlog: [], subcards: [{ uuid: Utils.getuuid(), - setting: { width: ismob ? 24 : 6, type: 'simple'}, + setting: { width: appType === 'mob' ? 24 : 6, type: 'simple'}, style: { borderWidth: '1px', borderColor: '#e8e8e8', paddingTop: '15px', paddingBottom: '15px', paddingLeft: '15px', paddingRight: '15px', @@ -192,6 +194,7 @@ * @description 鍗曚釜鍗$墖淇℃伅鏇存柊 */ deleteCard = (cell) => { + const { appType } = this.state let card = fromJS(this.state.card).toJS() let _this = this @@ -200,25 +203,31 @@ onOk() { card.subcards = card.subcards.filter(item => item.uuid !== cell.uuid) - let uuids = [] - cell.elements && cell.elements.forEach(c => { - if (c.eleType === 'button') { - uuids.push(c.uuid) - } - }) - cell.backElements && cell.backElements.forEach(c => { - if (c.eleType === 'button') { - uuids.push(c.uuid) - } - }) - MKEmitter.emit('delButtons', uuids) - if (card.btnlog) { card.btnlog = card.btnlog.filter(c => c.$parentId !== cell.uuid) } _this.setState({card}) _this.props.updateConfig(card) + + if (appType === 'mob') return + + let uuids = [] + + cell.elements && cell.elements.forEach(c => { + if (c.eleType !== 'button' || (appType === 'pc' && c.OpenType !== 'popview')) return + + uuids.push(c.uuid) + }) + cell.backElements && cell.backElements.forEach(c => { + if (c.eleType !== 'button' || (appType === 'pc' && c.OpenType !== 'popview')) return + + uuids.push(c.uuid) + }) + + if (uuids.length === 0) return + + MKEmitter.emit('delButtons', uuids) }, onCancel() {} }) @@ -285,27 +294,27 @@ newcard.execError = 'never' newcard.verify = null newcard.show = 'button' - newcard.btnstyle = {marginRight: '15px'} + newcard.style = {marginRight: '15px'} // 娉ㄥ唽浜嬩欢-娣诲姞鎸夐挳 MKEmitter.emit('addButton', card.uuid, newcard) } setSubConfig = (item) => { - const { card } = this.state + const { card, appType } = this.state let btn = fromJS(item).toJS() if (btn.OpenType === 'pop' || btn.execMode === 'pop') { if (!btn.modal) { btn.modal = { - setting: { title: btn.label, width: 60, cols: '2', container: 'view', focus: '', finish: 'close', clickouter: 'unclose', display: 'modal' }, + setting: { title: btn.label, width: appType === 'mob' ? 100 : 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') { + } else if (btn.OpenType === 'popview' && appType !== 'mob') { MKEmitter.emit('changePopview', card, btn) } } @@ -374,6 +383,54 @@ } } + addCard = () => { + let card = fromJS(this.state.card).toJS() + let height = card.subcards[0].style.height + if (height === 'auto') { + height = '100px' + } + + let newcard = { + uuid: Utils.getuuid(), + $cardType: 'extendCard', + setting: { width: 6, type: 'simple', click: 'button'}, + style: { + height, + borderWidth: '1px', borderColor: '#e8e8e8', + paddingTop: '15px', paddingBottom: '15px', paddingLeft: '15px', paddingRight: '15px', + marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px' + }, + backStyle: {}, + elements: [], + backElements: [] + } + + card.subcards.push(newcard) + + this.setState({card}) + this.props.updateConfig(card) + } + + move = (item, direction) => { + let card = fromJS(this.state.card).toJS() + + let dragIndex = card.subcards.findIndex(c => c.uuid === item.uuid) + let hoverIndex = null + + if (direction === 'left') { + hoverIndex = dragIndex - 1 + } else { + hoverIndex = dragIndex + 1 + } + + if (hoverIndex === -1 || hoverIndex === card.subcards.length) return + + card.subcards.splice(hoverIndex, 0, ...card.subcards.splice(dragIndex, 1)) + + this.setState({card}) + this.props.updateConfig(card) + } + clickComponent = (e) => { if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { e.stopPropagation() @@ -382,7 +439,7 @@ } render() { - const { card } = this.state + const { card, appType } = this.state let offset = 0 if (card.wrap.cardFloat && card.wrap.cardFloat !== 'left') { @@ -395,17 +452,19 @@ offset = Math.floor(offset / 2) } } + let _style = resetStyle(card.style) return ( - <div className="menu-data-card-edit-box" style={{...card.style}} onClick={this.clickComponent} id={card.uuid}> + <div className={'menu-data-card-edit-box ' + appType} style={_style} onClick={this.clickComponent} id={card.uuid}> <NormalHeader defaultshow="hidden" config={card} updateComponent={this.updateComponent}/> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch} type="plus-circle" /> + {appType !== 'mob' ? <Icon className="plus" title="娣诲姞鍗$墖" onClick={this.addCard} type="plus" /> : null} + {appType !== 'mob' ? <Icon className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch} type="plus-circle" /> : null} <Icon className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton} type="plus-square" /> <WrapComponent config={card} updateConfig={this.updateComponent} /> <CopyComponent type="datacard" card={card}/> - <PasteComponent config={card} options={['action', 'search', 'form']} updateConfig={this.updateComponent} /> + <PasteComponent config={card} options={['action', 'search', 'form', 'cardcell']} updateConfig={this.updateComponent} /> <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} /> <UserComponent config={card}/> @@ -415,10 +474,11 @@ } trigger="hover"> <Icon type="tool" /> </Popover> - <ActionComponent config={card} setSubConfig={this.setSubConfig} updateaction={this.updateComponent}/> - {card.subcards.map((subcard, index) => (<CardComponent key={subcard.uuid} offset={!index ? offset : 0} cards={card} card={subcard} updateElement={this.updateCard} deleteElement={this.deleteCard}/>))} + <ActionComponent config={card} type="datacard" setSubConfig={this.setSubConfig} updateaction={this.updateComponent}/> + {card.subcards.map((subcard, index) => (<CardComponent key={subcard.uuid} offset={!index ? offset : 0} cards={card} card={subcard} move={this.move} updateElement={this.updateCard} deleteElement={this.deleteCard}/>))} <div style={{clear: 'both'}}></div> - {card.wrap.pagestyle !== 'switch' && card.setting.laypage === 'true' ? <Pagination total={85} size="small" showTotal={total => `鍏� ${total} 鏉} pageSize={20} defaultCurrent={1}/> : null} + {card.wrap.pagestyle === 'page' && card.setting.laypage === 'true' && appType !== 'mob' ? <Pagination total={85} size="small" showTotal={total => `鍏� ${total} 鏉} pageSize={20} defaultCurrent={1}/> : null} + {card.wrap.pagestyle === 'page' && card.setting.laypage === 'true' && appType === 'mob' ? <MobPagination /> : null} </div> ) } -- Gitblit v1.8.0