| | |
| | | import { resetStyle } from '@/utils/utils-custom.js' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import Utils from '@/utils/utils.js' |
| | | import getWrapForm from '../data-card/options' |
| | | import zhCN from '@/locales/zh-CN/model.js' |
| | | import enUS from '@/locales/en-US/model.js' |
| | | import './index.scss' |
| | | |
| | | const SettingComponent = asyncIconComponent(() => import('@/menu/datasource')) |
| | | const WrapComponent = asyncIconComponent(() => import('../data-card/wrapsetting')) |
| | | const CardComponent = asyncComponent(() => import('./cardcomponent')) |
| | | const NormalForm = asyncIconComponent(() => import('@/components/normalform')) |
| | | const CardSimpleComponent = asyncComponent(() => import('../cardsimplecomponent')) |
| | | const MobPagination = asyncIconComponent(() => import('@/menu/components/share/mobPagination')) |
| | | const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) |
| | | const PasteComponent = asyncIconComponent(() => import('@/menu/components/share/pastecomponent')) |
| | | const PasteComponent = asyncIconComponent(() => import('@/components/paste')) |
| | | const LogComponent = asyncIconComponent(() => import('@/menu/components/share/logcomponent')) |
| | | const UserComponent = asyncIconComponent(() => import('@/menu/components/share/usercomponent')) |
| | | const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader')) |
| | |
| | | changeStyle = () => { |
| | | const { card } = this.state |
| | | |
| | | MKEmitter.emit('changeStyle', [card.uuid], ['height', 'background', 'border', 'padding', 'margin'], card.style) |
| | | MKEmitter.emit('changeStyle', [card.uuid], ['height', 'background', 'border', 'padding', 'margin', 'shadow'], card.style) |
| | | } |
| | | |
| | | getStyle = (comIds, style) => { |
| | |
| | | this.props.updateConfig(_card) |
| | | } |
| | | |
| | | addCard = () => { |
| | | addCard = (copy) => { |
| | | let card = fromJS(this.state.card).toJS() |
| | | let newcard = {} |
| | | |
| | | let newcard = { |
| | | if (copy) { // 粘贴 |
| | | newcard = copy |
| | | } else { |
| | | newcard = { |
| | | uuid: Utils.getuuid(), |
| | | setting: { width: 6, type: 'simple'}, |
| | | style: { |
| | |
| | | return elem |
| | | }) |
| | | } |
| | | } |
| | | |
| | | card.subcards.push(newcard) |
| | | |
| | |
| | | this.props.updateConfig(card) |
| | | } |
| | | |
| | | addSearch = () => { |
| | | addSearch = (copy) => { |
| | | const { card } = this.state |
| | | |
| | | let newcard = {} |
| | | |
| | | if (copy) { |
| | | newcard = copy |
| | | newcard.focus = true |
| | | } else { |
| | | newcard.uuid = Utils.getuuid() |
| | | newcard.focus = true |
| | | |
| | |
| | | newcard.orderType = 'asc' |
| | | newcard.display = 'dropdown' |
| | | newcard.match = '=' |
| | | } |
| | | |
| | | // 注册事件-添加搜索 |
| | | MKEmitter.emit('addSearch', card.uuid, newcard) |
| | |
| | | this.props.updateConfig(card) |
| | | } |
| | | |
| | | getWrapForms = () => { |
| | | const { card } = this.state |
| | | |
| | | return getWrapForm(card.wrap, card.subtype) |
| | | } |
| | | |
| | | updateWrap = (res) => { |
| | | this.updateComponent({...this.state.card, wrap: res}) |
| | | } |
| | | |
| | | pasteComponent = (res, resolve) => { |
| | | const { card, appType } = this.state |
| | | |
| | | let type = res.copyType |
| | | delete res.copyType |
| | | |
| | | if (type === 'cardcell') { |
| | | res.uuid = Utils.getuuid() |
| | | res.setting = res.setting || {} |
| | | res.setting.width = res.setting.width || 6 |
| | | |
| | | let copyBtns = [] |
| | | let mobtypes = ['pop', 'prompt', 'exec', 'innerpage'] |
| | | |
| | | let elements = [] |
| | | res.elements && res.elements.forEach(cell => { |
| | | if (cell.eleType !== 'button') { |
| | | cell.uuid = Utils.getuuid() |
| | | elements.push(cell) |
| | | } else if (appType === 'mob' && !mobtypes.includes(cell.OpenType)) { |
| | | return |
| | | } else { |
| | | let _uuid = Utils.getuuid() |
| | | |
| | | if (cell.OpenType === 'popview') { |
| | | let _cell = fromJS(cell).toJS() |
| | | _cell.$originUuid = _cell.uuid |
| | | _cell.uuid = _uuid |
| | | copyBtns.push(_cell) |
| | | } |
| | | |
| | | cell.uuid = _uuid |
| | | elements.push(cell) |
| | | } |
| | | }) |
| | | |
| | | res.elements = elements |
| | | |
| | | delete res.$cardType |
| | | delete res.backElements |
| | | |
| | | if (copyBtns.length > 0) { |
| | | MKEmitter.emit('copyButtons', copyBtns) |
| | | } |
| | | |
| | | resolve({status: true}) |
| | | |
| | | this.addCard(res) |
| | | } else if (type === 'search' || type === 'form') { |
| | | if (appType === 'mob') { |
| | | resolve({status: false, message: '移动端数据卡不支持添加搜索条件。'}) |
| | | } else { |
| | | res.uuid = Utils.getuuid() |
| | | let keys = card.search.map(item => item.field.toLowerCase()) |
| | | |
| | | if (type === 'form') { |
| | | if (['number', 'switch', 'textarea', 'fileupload', 'hint', 'color', 'funcvar'].includes(res.type)) { |
| | | res.type = 'text' |
| | | } else if (res.type === 'radio') { |
| | | res.type = 'select' |
| | | } else if (res.type === 'checkbox') { |
| | | res.type = 'multiselect' |
| | | } else if (res.type === 'datetime') { |
| | | res.type = 'date' |
| | | } |
| | | } |
| | | |
| | | if (res.field && keys.includes(res.field.toLowerCase())) { |
| | | resolve({status: false, message: '搜索字段已存在!'}) |
| | | return |
| | | } |
| | | |
| | | resolve({status: true}) |
| | | |
| | | this.addSearch(res) |
| | | } |
| | | } |
| | | } |
| | | |
| | | clickComponent = (e) => { |
| | | if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { |
| | | e.stopPropagation() |
| | |
| | | <NormalHeader 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.addCard} type="plus" /> |
| | | {appType !== 'mob' ? <Icon className="plus" title="添加搜索" onClick={this.addSearch} type="plus-circle" /> : null} |
| | | <WrapComponent config={card} updateConfig={this.updateComponent} /> |
| | | <Icon className="plus" title="添加卡片" onClick={() => this.addCard()} type="plus" /> |
| | | {appType !== 'mob' ? <Icon className="plus" title="添加搜索" onClick={() => this.addSearch()} type="plus-circle" /> : null} |
| | | <NormalForm title="表格设置" width={800} update={this.updateWrap} getForms={this.getWrapForms}> |
| | | <Icon type="edit" style={{color: '#1890ff'}} title="编辑"/> |
| | | </NormalForm> |
| | | <CopyComponent type="tablecard" card={card}/> |
| | | <PasteComponent config={card} options={['cardcell', 'search', 'form']} updateConfig={this.updateComponent} /> |
| | | <PasteComponent options={['cardcell', 'search', 'form']} updateConfig={this.pasteComponent} /> |
| | | <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" /> |
| | | <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} /> |
| | | <UserComponent config={card}/> |
| | |
| | | <Icon type="tool" /> |
| | | </Popover> |
| | | <div style={{minHeight: 'calc(100% - 90px)'}}> |
| | | {card.subcards.map(subcard => (<CardComponent key={subcard.uuid} cards={card} card={subcard} updateElement={this.updateCard} move={this.move} deleteElement={this.deleteCard}/>))} |
| | | {card.subcards.map(subcard => (<CardSimpleComponent key={subcard.uuid} cards={card} card={subcard} updateElement={this.updateCard} move={this.move} deleteElement={this.deleteCard}/>))} |
| | | </div> |
| | | {card.setting.laypage === 'true' && card.wrap.pagestyle !== 'slide' && appType !== 'mob' ? <Pagination size="small" total={50} /> : null} |
| | | {card.setting.laypage === 'true' && card.wrap.pagestyle !== 'slide' && appType === 'mob' ? <MobPagination /> : null} |