import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Affix } from 'antd'
|
|
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 ExcelInButton = asyncComponent(() => import('./excelInbutton'))
|
const ExcelOutButton = asyncComponent(() => import('./exceloutbutton'))
|
const PopupButton = asyncComponent(() => import('./popupbutton'))
|
const TabButton = asyncComponent(() => import('./tabbutton'))
|
const NewPageButton = asyncComponent(() => import('./newpagebutton'))
|
const ChangeUserButton = asyncComponent(() => import('./changeuserbutton'))
|
const PrintButton = asyncComponent(() => import('./printbutton'))
|
|
class ActionList extends Component {
|
static propTpyes = {
|
BID: PropTypes.any, // 主表ID
|
BData: PropTypes.any, // 主表数据
|
selectedData: PropTypes.any, // 子表中选择数据
|
Tab: PropTypes.any, // 如果当前元素为标签时，tab为标签信息
|
MenuID: PropTypes.string, // 菜单ID
|
actions: PropTypes.array, // 按钮组
|
operations: PropTypes.array, // 表格中按钮组
|
logcolumns: PropTypes.array, // 显示列
|
setting: PropTypes.any, // 页面通用设置
|
ContainerId: PropTypes.any, // tab页面ID，用于弹窗控制
|
refreshdata: PropTypes.func, // 执行完成后数据刷新
|
getexceloutparam: PropTypes.func, // 获取excel导出数据
|
triggerBtn: PropTypes.any, // 快捷键触发的按钮
|
}
|
|
state = {
|
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
running: false,
|
triggerBtn: null
|
}
|
|
/**
|
* @description 上级菜单id变化时，刷新数据
|
*/
|
UNSAFE_componentWillReceiveProps(nextProps) {
|
if (nextProps.triggerBtn && !is(fromJS(this.props.triggerBtn), fromJS(nextProps.triggerBtn)) && nextProps.triggerBtn.parentId === this.props.MenuID) {
|
if (!this.state.running) {
|
this.setState({
|
triggerBtn: nextProps.triggerBtn
|
})
|
}
|
}
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
updateStatus = (type, positon, unclose) => {
|
if (type === 'start') {
|
this.setState({running: true})
|
} else if (type === 'over') {
|
this.setState({running: false})
|
} else if (type === 'refresh') {
|
this.props.refreshdata(positon)
|
if (!unclose) {
|
this.setState({running: false})
|
}
|
} else if (type === 'trigger') { // 日历中的新标签页触发事件
|
this.props.refreshdata('trigger')
|
}
|
}
|
|
getButtonList = (actions) => {
|
const { BID, BData, MenuID, Tab, logcolumns, setting, ContainerId, selectedData, getexceloutparam } = this.props
|
|
return actions.map(item => {
|
if (['exec', 'prompt', 'pop'].includes(item.OpenType)) {
|
return (
|
<NormalButton
|
key={item.uuid}
|
BID={BID}
|
Tab={Tab}
|
btn={item}
|
BData={BData}
|
setting={setting}
|
columns={logcolumns}
|
ContainerId={ContainerId}
|
selectedData={selectedData}
|
triggerBtn={this.state.triggerBtn}
|
updateStatus={this.updateStatus}
|
/>
|
)
|
} else if (item.OpenType === 'excelIn') {
|
return (
|
<ExcelInButton
|
key={item.uuid}
|
BID={BID}
|
Tab={Tab}
|
btn={item}
|
setting={setting}
|
selectedData={selectedData}
|
triggerBtn={this.state.triggerBtn}
|
updateStatus={this.updateStatus}
|
/>
|
)
|
} else if (item.OpenType === 'excelOut') {
|
return (
|
<ExcelOutButton
|
key={item.uuid}
|
BID={BID}
|
Tab={Tab}
|
btn={item}
|
setting={setting}
|
triggerBtn={this.state.triggerBtn}
|
getexceloutparam={getexceloutparam}
|
updateStatus={this.updateStatus}
|
/>
|
)
|
} else if (item.OpenType === 'popview') {
|
return (
|
<PopupButton
|
key={item.uuid}
|
BID={BID}
|
Tab={Tab}
|
btn={item}
|
BData={BData}
|
setting={setting}
|
selectedData={selectedData}
|
triggerBtn={this.state.triggerBtn}
|
updateStatus={this.updateStatus}
|
/>
|
)
|
} else if (item.OpenType === 'tab' || item.OpenType === 'blank') {
|
return (
|
<TabButton
|
key={item.uuid}
|
btn={item}
|
MenuID={MenuID}
|
setting={setting}
|
selectedData={selectedData}
|
triggerBtn={this.state.triggerBtn}
|
updateStatus={this.updateStatus}
|
/>
|
)
|
} else if (item.OpenType === 'innerpage' || item.OpenType === 'outerpage') {
|
return (
|
<NewPageButton
|
key={item.uuid}
|
btn={item}
|
setting={setting}
|
selectedData={selectedData}
|
updateStatus={this.updateStatus}
|
triggerBtn={this.state.triggerBtn}
|
/>
|
)
|
} else if (item.OpenType === 'funcbutton') {
|
if (item.funcType === 'changeuser') {
|
return (
|
<ChangeUserButton
|
key={item.uuid}
|
BID={BID}
|
btn={item}
|
setting={setting}
|
selectedData={selectedData}
|
triggerBtn={this.state.triggerBtn}
|
updateStatus={this.updateStatus}
|
/>
|
)
|
} else if (item.funcType === 'print') {
|
return (
|
<PrintButton
|
key={item.uuid}
|
BID={BID}
|
Tab={Tab}
|
btn={item}
|
BData={BData}
|
setting={setting}
|
ContainerId={ContainerId}
|
selectedData={selectedData}
|
triggerBtn={this.state.triggerBtn}
|
updateStatus={this.updateStatus}
|
/>
|
)
|
}
|
}
|
return null
|
})
|
}
|
|
render() {
|
const { setting, MenuID, actions, operations } = this.props
|
let fixed = setting.actionfixed && setting.tabType === 'main' // 按钮是否固定在头部
|
|
if (fixed) {
|
return (
|
<Affix offsetTop={48}>
|
<div className="button-list toolbar-button" id={fixed ? MenuID + 'mainaction' : ''}>
|
{this.getButtonList(actions)}
|
{operations && operations.length > 0 ? <div className="grid-button-list">{this.getButtonList(operations)}</div> : null}
|
</div>
|
</Affix>
|
)
|
} else {
|
return (
|
<div className="button-list toolbar-button" id={fixed ? MenuID + 'mainaction' : ''}>
|
{this.getButtonList(actions)}
|
{operations && operations.length > 0 ? <div className="grid-button-list">{this.getButtonList(operations)}</div> : null}
|
</div>
|
)
|
}
|
}
|
}
|
|
export default ActionList
|
