| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Tabs, Icon, Popover, Modal } from 'antd' |
| | | import { Tabs, Popover, Modal } from 'antd' |
| | | import { PlusOutlined, CloseOutlined, EditOutlined, DeleteOutlined, FontColorsOutlined, ToolOutlined } from '@ant-design/icons' |
| | | |
| | | import MKEmitter from '@/utils/events.js' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import asyncIconComponent from '@/utils/asyncIconComponent' |
| | | import MkIcon from '@/components/mk-icon' |
| | | import DraggableTabs from './dragabletabs' |
| | | 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 zhCN from '@/locales/zh-CN/model.js' |
| | | import enUS from '@/locales/en-US/model.js' |
| | | import './index.scss' |
| | | |
| | | const NormalForm = asyncIconComponent(() => import('@/components/normalform')) |
| | |
| | | } |
| | | |
| | | state = { |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | appType: sessionStorage.getItem('appType'), |
| | | tabs: null, |
| | | editab: null, |
| | |
| | | |
| | | editab.label = res.label |
| | | editab.icon = res.icon |
| | | editab.hasSearch = res.hasSearch || '' |
| | | // editab.hasSearch = res.hasSearch || '' |
| | | editab.controlVal = res.controlVal || '' |
| | | editab.blacklist = res.blacklist |
| | | |
| | | if (editab.uuid) { |
| | |
| | | getTabsForms = () => { |
| | | const { tabs } = this.state |
| | | |
| | | return getTabsSetForm(tabs.setting) |
| | | return getTabsSetForm(tabs.setting, tabs.uuid) |
| | | } |
| | | |
| | | updateTabs = (res) => { |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { tabs, appType, defaultActiveKey } = this.state |
| | | const { tabs, defaultActiveKey } = this.state |
| | | let _style = resetStyle(tabs.style) |
| | | |
| | | return ( |
| | |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <NormalForm title="标签编辑" width={600} update={this.updateTab} getForms={() => this.getTabForms(tab)}> |
| | | <Icon type="edit" style={{color: '#1890ff'}} title="编辑"/> |
| | | <EditOutlined style={{color: '#1890ff'}} title="编辑"/> |
| | | </NormalForm> |
| | | <PasteComponent Tab={tab} insert={this.insert} /> |
| | | <Icon className="close" title="delete" type="close" onClick={() => this.delTab(tab)} /> |
| | | <CloseOutlined className="close" onClick={() => this.delTab(tab)} /> |
| | | </div> |
| | | } trigger="hover"> |
| | | <span>{tab.icon ? <Icon type={tab.icon} /> : null}{tab.label}</span> |
| | | <span>{tab.icon ? <MkIcon type={tab.icon} /> : null}{tab.label}</span> |
| | | </Popover> |
| | | } key={tab.uuid}> |
| | | {appType === 'mob' && tabs.setting.position === 'top' && tabs.setting.display === 'inline-block' && tab.hasSearch === 'icon' ? |
| | | <Icon className="search-icon" onDoubleClick={() => this.setSearch(tab)} type="search" /> : null} |
| | | {/* {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> |
| | | ))} |
| | |
| | | <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ |
| | | <div className="mk-popover-control"> |
| | | <NormalForm title="添加标签" width={600} update={this.updateTab} getForms={() => this.getTabForms()}> |
| | | <Icon type="plus" className="plus" title="添加标签"/> |
| | | <PlusOutlined className="plus" title="添加标签"/> |
| | | </NormalForm> |
| | | <NormalForm title="标签页设置" width={700} update={this.updateTabs} getForms={this.getTabsForms}> |
| | | <Icon type="edit" style={{color: '#1890ff'}} title="编辑"/> |
| | | <EditOutlined style={{color: '#1890ff'}} title="编辑"/> |
| | | </NormalForm> |
| | | <CopyComponent type="tabs" card={tabs}/> |
| | | <Icon className="style" title="调整样式" onClick={this.changeStyle} type="font-colors" /> |
| | | <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(tabs.uuid)} /> |
| | | <FontColorsOutlined className="style" title="调整样式" onClick={this.changeStyle}/> |
| | | <DeleteOutlined className="close" onClick={() => this.props.deletecomponent(tabs.uuid)} /> |
| | | </div> |
| | | } trigger="hover"> |
| | | <Icon type="tool" /> |
| | | <ToolOutlined /> |
| | | </Popover> |
| | | </div> |
| | | ) |