| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Affix } from 'antd' |
| | | import { Affix, Dropdown } from 'antd' |
| | | import { DownOutlined } from '@ant-design/icons' |
| | | |
| | | import asyncComponent from './asyncButtonComponent' |
| | | import zhCN from '@/locales/zh-CN/main.js' |
| | | import enUS from '@/locales/en-US/main.js' |
| | | import './index.scss' |
| | | |
| | | const NormalButton = asyncComponent(() => import('./normalbutton')) |
| | |
| | | const NewPageButton = asyncComponent(() => import('./newpagebutton')) |
| | | const ChangeUserButton = asyncComponent(() => import('./changeuserbutton')) |
| | | const PrintButton = asyncComponent(() => import('./printbutton')) |
| | | const FuncMegvii = asyncComponent(() => import('./funcMegvii')) |
| | | const FuncZip = asyncComponent(() => import('./funczip')) |
| | | const EditLine = asyncComponent(() => import('./editLine')) |
| | | const ExportPdf = asyncComponent(() => import('./exportPdf')) |
| | | const FuncButton = asyncComponent(() => import('./funcbutton')) |
| | | |
| | | class ActionList extends Component { |
| | | static propTpyes = { |
| | | BID: PropTypes.any, // 主表ID |
| | | BData: PropTypes.any, // 主表数据 |
| | | MenuName: PropTypes.any, // 菜单名称 |
| | | selectedData: PropTypes.any, // 子表中选择数据 |
| | | Tab: PropTypes.any, // 如果当前元素为标签时,tab为标签信息 |
| | | MenuID: PropTypes.string, // 菜单ID |
| | | actions: PropTypes.array, // 按钮组 |
| | | logcolumns: PropTypes.array, // 显示列 |
| | | columns: PropTypes.array, // 显示列 |
| | | setting: PropTypes.any, // 页面通用设置 |
| | | ContainerId: PropTypes.any, // tab页面ID,用于弹窗控制 |
| | | refreshdata: PropTypes.func, // 执行完成后数据刷新 |
| | | getexceloutparam: PropTypes.func, // 获取excel导出数据 |
| | | } |
| | | |
| | | state = { |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS |
| | | actions: [], |
| | | mores: null |
| | | } |
| | | |
| | | UNSAFE_componentWillMount() { |
| | | const { setting, actions } = this.props |
| | | |
| | | if (!setting.btnlimit || setting.btnlimit >= actions.length) { |
| | | this.setState({actions: actions}) |
| | | } else { |
| | | let mores = fromJS(actions).toJS() |
| | | |
| | | this.setState({ |
| | | actions: mores.splice(0, setting.btnlimit), |
| | | mores |
| | | }) |
| | | } |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | updateStatus = (type, positon) => { |
| | | if (type === 'refresh') { |
| | | this.props.refreshdata(positon) |
| | | } else if (type === 'trigger') { // 日历中的新标签页触发事件 |
| | | this.props.refreshdata('trigger') |
| | | } |
| | | } |
| | | |
| | | getButtonList = (actions) => { |
| | | const { BID, BData, MenuID, Tab, logcolumns, setting, ContainerId, selectedData, getexceloutparam, MenuName } = this.props |
| | | |
| | | const { BID, BData, MenuID, columns, setting, selectedData } = this.props |
| | | return actions.map(item => { |
| | | if (['exec', 'prompt', 'pop'].includes(item.OpenType)) { |
| | | return ( |
| | | <NormalButton |
| | | key={item.uuid} |
| | | show="actionList" |
| | | show={item.show || 'actionList'} |
| | | disabled={false} |
| | | BID={BID} |
| | | Tab={Tab} |
| | | btn={item} |
| | | BData={BData} |
| | | setting={setting} |
| | | MenuName={MenuName} |
| | | columns={logcolumns} |
| | | ContainerId={ContainerId} |
| | | columns={columns} |
| | | selectedData={selectedData} |
| | | updateStatus={this.updateStatus} |
| | | /> |
| | | ) |
| | | } else if (item.OpenType === 'excelIn') { |
| | | return ( |
| | | <ExcelInButton |
| | | key={item.uuid} |
| | | show="actionList" |
| | | show={item.show || 'actionList'} |
| | | disabled={false} |
| | | BID={BID} |
| | | Tab={Tab} |
| | | btn={item} |
| | | BData={BData} |
| | | setting={setting} |
| | | MenuName={MenuName} |
| | | selectedData={selectedData} |
| | | updateStatus={this.updateStatus} |
| | | /> |
| | | ) |
| | | } else if (item.OpenType === 'excelOut') { |
| | | return ( |
| | | <ExcelOutButton |
| | | key={item.uuid} |
| | | show="actionList" |
| | | show={item.show || 'actionList'} |
| | | disabled={false} |
| | | BID={BID} |
| | | Tab={Tab} |
| | | btn={item} |
| | | BData={BData} |
| | | setting={setting} |
| | | MenuName={MenuName} |
| | | getexceloutparam={getexceloutparam} |
| | | updateStatus={this.updateStatus} |
| | | selectedData={selectedData} |
| | | /> |
| | | ) |
| | | } else if (item.OpenType === 'popview') { |
| | | return ( |
| | | <PopupButton |
| | | key={item.uuid} |
| | | show="actionList" |
| | | show={item.show || 'actionList'} |
| | | disabled={false} |
| | | BID={BID} |
| | | Tab={Tab} |
| | | btn={item} |
| | | BData={BData} |
| | | setting={setting} |
| | | selectedData={selectedData} |
| | | updateStatus={this.updateStatus} |
| | | /> |
| | | ) |
| | | } else if (item.OpenType === 'tab' || item.OpenType === 'blank') { |
| | | } else if (item.OpenType === 'tab') { |
| | | return ( |
| | | <TabButton |
| | | key={item.uuid} |
| | | show="actionList" |
| | | show={item.show || 'actionList'} |
| | | disabled={false} |
| | | btn={item} |
| | | BID={BID} |
| | | BData={BData} |
| | | MenuID={MenuID} |
| | | setting={setting} |
| | | selectedData={selectedData} |
| | | updateStatus={this.updateStatus} |
| | | /> |
| | | ) |
| | | } else if (item.OpenType === 'innerpage' || item.OpenType === 'outerpage') { |
| | | return ( |
| | | <NewPageButton |
| | | key={item.uuid} |
| | | show="actionList" |
| | | show={item.show || 'actionList'} |
| | | disabled={false} |
| | | BID={BID} |
| | | btn={item} |
| | | setting={setting} |
| | | BData={BData} |
| | | selectedData={selectedData} |
| | | updateStatus={this.updateStatus} |
| | | /> |
| | | ) |
| | | } else if (item.OpenType === 'funcbutton') { |
| | | if (item.funcType === 'changeuser') { |
| | | if (item.funcType === 'changeuser' || item.funcType === 'closetab') { |
| | | return ( |
| | | <ChangeUserButton |
| | | key={item.uuid} |
| | | show="actionList" |
| | | show={item.show || 'actionList'} |
| | | disabled={false} |
| | | BID={BID} |
| | | btn={item} |
| | | BData={BData} |
| | | MenuID={MenuID} |
| | | setting={setting} |
| | | selectedData={selectedData} |
| | | updateStatus={this.updateStatus} |
| | | /> |
| | | ) |
| | | } else if (item.funcType === 'print') { |
| | | return ( |
| | | <PrintButton |
| | | key={item.uuid} |
| | | show="actionList" |
| | | show={item.show || 'actionList'} |
| | | disabled={false} |
| | | BID={BID} |
| | | Tab={Tab} |
| | | btn={item} |
| | | BData={BData} |
| | | setting={setting} |
| | | ContainerId={ContainerId} |
| | | columns={columns} |
| | | selectedData={selectedData} |
| | | updateStatus={this.updateStatus} |
| | | /> |
| | | ) |
| | | } else if (item.funcType === 'megvii') { |
| | | return ( |
| | | <FuncMegvii |
| | | key={item.uuid} |
| | | show={item.show || 'actionList'} |
| | | disabled={false} |
| | | BID={BID} |
| | | btn={item} |
| | | setting={setting} |
| | | selectedData={selectedData} |
| | | /> |
| | | ) |
| | | } else if (item.funcType === 'filezip') { |
| | | return ( |
| | | <FuncZip |
| | | key={item.uuid} |
| | | disabled={false} |
| | | BID={BID} |
| | | btn={item} |
| | | BData={BData} |
| | | setting={setting} |
| | | selectedData={selectedData} |
| | | /> |
| | | ) |
| | | } else if (item.funcType === 'expPdf') { |
| | | return ( |
| | | <ExportPdf |
| | | key={item.uuid} |
| | | btn={item} |
| | | /> |
| | | ) |
| | | } else if (item.funcType === 'addline' || item.funcType === 'delline') { |
| | | return ( |
| | | <EditLine |
| | | key={item.uuid} |
| | | disabled={false} |
| | | btn={item} |
| | | selectedData={selectedData} |
| | | /> |
| | | ) |
| | | } |
| | | } else { |
| | | return ( |
| | | <FuncButton |
| | | key={item.uuid} |
| | | BID={BID} |
| | | btn={item} |
| | | selectedData={selectedData} |
| | | /> |
| | | ) |
| | | } |
| | | } |
| | | return null |
| | | }) |
| | | } |
| | | |
| | | render() { |
| | | const { setting, MenuID, actions } = this.props |
| | | let fixed = setting.actionfixed && setting.tabType === 'main' // 按钮是否固定在头部 |
| | | const { setting } = this.props |
| | | const { actions, mores } = this.state |
| | | |
| | | if (fixed) { |
| | | if (setting.actionfixed === 'true') { |
| | | return ( |
| | | <Affix offsetTop={48}> |
| | | <div className="button-list toolbar-button" id={fixed ? MenuID + 'mainaction' : ''}> |
| | | <div className="button-list toolbar-button"> |
| | | {this.getButtonList(actions)} |
| | | {mores ? <Dropdown overlay={<div className="mk-button-dropdown-wrap">{this.getButtonList(mores)}</div>} trigger={['hover']}> |
| | | <div className="mk-button-more">{window.GLOB.dict['more'] || '更多'}<DownOutlined/></div> |
| | | </Dropdown> : null} |
| | | </div> |
| | | </Affix> |
| | | ) |
| | | } else { |
| | | return ( |
| | | <div className="button-list toolbar-button" id={fixed ? MenuID + 'mainaction' : ''}> |
| | | <div className="button-list toolbar-button"> |
| | | {this.getButtonList(actions)} |
| | | {mores ? <Dropdown overlay={<div className="mk-button-dropdown-wrap">{this.getButtonList(mores)}</div>} trigger={['hover']}> |
| | | <div className="mk-button-more">{window.GLOB.dict['more'] || '更多'}<DownOutlined/></div> |
| | | </Dropdown> : null} |
| | | </div> |
| | | ) |
| | | } |