| | |
| | | .normal-navbar-edit-box { |
| | | position: fixed; |
| | | position: absolute; |
| | | bottom: 0px; |
| | | left: 0px; |
| | | width: 100%; |
| | |
| | | .normal-topbar-edit-box { |
| | | position: fixed; |
| | | position: absolute; |
| | | top: 0px; |
| | | left: 0px; |
| | | width: 100%; |
| | |
| | | const AntvBar = asyncComponent(() => import('@/menu/components/chart/antv-bar')) |
| | | const MainSearch = asyncComponent(() => import('@/menu/components/search/main-search')) |
| | | const AntvPie = asyncComponent(() => import('@/menu/components/chart/antv-pie')) |
| | | const AntvDashboard = asyncComponent(() => import('@/menu/components/chart/antv-dashboard')) |
| | | const AntvScatter = asyncComponent(() => import('@/menu/components/chart/antv-scatter')) |
| | | const AntvTabs = asyncComponent(() => import('@/menu/components/tabs/antv-tabs')) |
| | | const DataCard = asyncComponent(() => import('@/menu/components/card/data-card')) |
| | | const PropCard = asyncComponent(() => import('@/menu/components/card/prop-card')) |
| | |
| | | } |
| | | |
| | | let col = 'ant-col-' + (card.width || 24) |
| | | if (card.type === 'navbar' || card.type === 'topbar') { |
| | | col = '' |
| | | } else if (card.type === 'login') { |
| | | if (card.type === 'login') { |
| | | let height = '' |
| | | if (card.wrap && card.wrap.height) { |
| | | // scaleview |
| | |
| | | return (<MainSearch card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) |
| | | } else if (card.type === 'pie') { |
| | | return (<AntvPie card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) |
| | | } else if (card.type === 'dashboard') { |
| | | return (<AntvDashboard card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) |
| | | } else if (card.type === 'scatter') { |
| | | return (<AntvScatter card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) |
| | | } else if (card.type === 'form') { |
| | | return (<NormalForm card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) |
| | | } else if (card.type === 'tabs') { |
| | |
| | | } |
| | | } |
| | | |
| | | if (card.type === 'navbar' || card.type === 'topbar') { |
| | | return getCardComponent() |
| | | } else { |
| | | return ( |
| | | <div className={'ant-col mk-component-card ' + col} ref={node => drag(drop(node))} style={style}> |
| | | {getCardComponent()} |
| | | </div> |
| | | ) |
| | | } |
| | | } |
| | | export default Card |
| | |
| | | }) |
| | | return |
| | | } |
| | | } else if (item.component === 'navbar') { |
| | | if (cards.filter(card => card.type === 'navbar').length > 0) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '菜单栏不可重复添加!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | } else if (item.component === 'topbar') { |
| | | if (cards.filter(card => card.type === 'topbar').length > 0) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '导航栏不可重复添加!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | } |
| | | |
| | | let name = '' |
| | |
| | | } |
| | | |
| | | const { index: overIndex } = findCard(`${targetId}`) |
| | | const _cards = update(cards, { $splice: [[overIndex + 1, 0, newcard]] }) |
| | | let _cards = update(cards, { $splice: [[overIndex + 1, 0, newcard]] }) |
| | | let Topbar = null |
| | | let Navbar = null |
| | | _cards = _cards.filter(item => { |
| | | if (item.type === 'topbar') { |
| | | Topbar = item |
| | | } else if (item.type === 'navbar') { |
| | | Navbar = item |
| | | } |
| | | |
| | | return item.type !== 'topbar' && item.type !== 'navbar' |
| | | }) |
| | | |
| | | if (Topbar) { |
| | | _cards.unshift(Topbar) |
| | | } |
| | | if (Navbar) { |
| | | _cards.push(Navbar) |
| | | } |
| | | |
| | | handleList({...menu, components: _cards}) |
| | | setCards(_cards) |
| | |
| | | }) |
| | | |
| | | return ( |
| | | <div ref={drop} className="mob-shell-inner" id="menu-shell-inner" style={menu.style}> |
| | | <div className="ant-row"> |
| | | <div ref={drop} className="mob-shell-inner" id="menu-shell-inner"> |
| | | <div className="ant-row" style={menu.style}> |
| | | {cards.map(card => ( |
| | | <Card |
| | | id={card.uuid} |
| | |
| | | import Login from '@/assets/mobimg/login.png' |
| | | import dashboard from '@/assets/mobimg/dashboard.png' |
| | | import NavTop from '@/assets/mobimg/navtop-mob.png' |
| | | import scatter from '@/assets/mobimg/scatter.png' |
| | | |
| | | // 组件配置信息 |
| | | export const menuOptions = [ |
| | |
| | | { type: 'menu', url: Pie1, component: 'pie', subtype: 'ring', title: '环图', width: 24 }, |
| | | { type: 'menu', url: Pie2, component: 'pie', subtype: 'nightingale', title: '南丁格尔图', width: 24 }, |
| | | { type: 'menu', url: dashboard, component: 'dashboard', subtype: 'dashboard', title: '仪表盘', width: 12 }, |
| | | { type: 'menu', url: scatter, component: 'scatter', subtype: 'scatter', title: '散点图', width: 24 }, |
| | | { type: 'menu', url: SandBox, component: 'code', subtype: 'sandbox', title: '自定义', width: 24 }, |
| | | { type: 'menu', url: group, component: 'group', subtype: 'normalgroup', title: '分组', width: 24 }, |
| | | { type: 'menu', url: Login, component: 'login', subtype: 'normallogin', title: '登录', width: 24 }, |
| | |
| | | .login-way-wrap.simple { |
| | | display: none; |
| | | } |
| | | .login-way-wrap { |
| | | padding: 0 15px; |
| | | border-radius: 0; |
| | | .login-way { |
| | | border: 0; |
| | | background: transparent!important; |
| | | transition: all 0.3s; |
| | | border-bottom: 2px solid transparent; |
| | | } |
| | | .login-way.active, .login-way:hover { |
| | | color: #1890ff; |
| | | } |
| | | .login-way.active { |
| | | border-bottom: 2px solid #1890ff; |
| | | } |
| | | } |
| | | .ant-input { |
| | | border: 0; |
| | | border-radius: 0; |
| | |
| | | style = { opacity: 0.3} |
| | | } |
| | | let col = ' ant-col ant-col-' + (card.width || 24) |
| | | if (card.type === 'navbar') { |
| | | col = '' |
| | | } else if (card.type === 'login') { |
| | | if (card.type === 'login') { |
| | | let height = '' |
| | | if (card.wrap && card.wrap.height) { |
| | | // scaleview |
| | |
| | | return (<NormalLogin card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) |
| | | } |
| | | } |
| | | |
| | | if (card.type === 'navbar') { |
| | | return getCardComponent() |
| | | } else { |
| | | return ( |
| | | <div className={`mk-component-card ${col}`} ref={node => drag(drop(node))} style={style}> |
| | | {getCardComponent()} |
| | | </div> |
| | | ) |
| | | } |
| | | } |
| | | export default Card |
| | |
| | | import form from '@/assets/mobimg/form.png' |
| | | import Login from '@/assets/mobimg/login.png' |
| | | import dashboard from '@/assets/mobimg/dashboard.png' |
| | | import scatter from '@/assets/mobimg/scatter.png' |
| | | |
| | | // 组件配置信息 |
| | | export const menuOptions = [ |
| | |
| | | { type: 'menu', url: Pie1, component: 'pie', subtype: 'ring', title: '环图', width: 12 }, |
| | | { type: 'menu', url: Pie2, component: 'pie', subtype: 'nightingale', title: '南丁格尔图', width: 12 }, |
| | | { type: 'menu', url: dashboard, component: 'dashboard', subtype: 'dashboard', title: '仪表盘', width: 12 }, |
| | | { type: 'menu', url: scatter, component: 'scatter', subtype: 'scatter', title: '散点图', width: 24 }, |
| | | { type: 'menu', url: Editor, component: 'editor', subtype: 'brafteditor', title: '富文本', width: 24 }, |
| | | { type: 'menu', url: SandBox, component: 'code', subtype: 'sandbox', title: '自定义', width: 24 }, |
| | | { type: 'menu', url: group, component: 'group', subtype: 'normalgroup', title: '分组', width: 24 }, |
| | |
| | | <PasteController type="menu" Tab={null} insert={this.insert} /> |
| | | <Switch className="big" checkedChildren={dict['mob.enable']} unCheckedChildren={dict['mob.disable']} checked={config && config.enabled} onChange={this.onEnabledChange} /> |
| | | <Button type="primary" onClick={this.submitConfig} loading={menuloading}>{dict['mob.save']}</Button> |
| | | <Button type="default" onClick={this.closeView}>{dict['mob.return']}</Button> |
| | | <Button type="default" onClick={this.closeView}>关闭</Button> |
| | | </div> |
| | | } style={{ width: '100%' }}> |
| | | {config && config.components ? <MenuShell menu={config} handleList={this.updateConfig} /> : null} |
| | |
| | | <Quotecomponent config={config} updateConfig={this.updateConfig}/> |
| | | <Button className="mk-border-green" icon="home" onClick={this.setHomeView}>设为首页</Button> |
| | | <Button className="mk-border-danger" icon="redo" onClick={this.refreshView}>强制刷新</Button> |
| | | <Button type="default" onClick={this.closeView}>{dict['mob.return']}</Button> |
| | | <Button type="default" onClick={this.closeView}>关闭</Button> |
| | | </div> |
| | | <div className={'menu-body' + (menuloading ? 'saving' : '')}> |
| | | <div className="mob-shell"> |
| | |
| | | <Quotecomponent config={config} updateConfig={this.updateConfig}/> |
| | | <Button className="mk-border-green" icon="home" onClick={this.setHomeView}>设为首页</Button> |
| | | <Button className="mk-border-danger" icon="redo" onClick={this.refreshView}>强制刷新</Button> |
| | | <Button type="default" onClick={this.closeView}>{dict['mob.return']}</Button> |
| | | <Button type="default" onClick={this.closeView}>关闭</Button> |
| | | </div> |
| | | <div className={'menu-body ' + (menuloading ? 'saving' : '')}> |
| | | {config && config.components ? <MenuShell menu={config} handleList={this.updateConfig} /> : null} |