import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import {connect} from 'react-redux'
|
import { is, fromJS } from 'immutable'
|
import { Button, notification } from 'antd'
|
|
import { modifyTabview } from '@/store/action'
|
import zhCN from '@/locales/zh-CN/main.js'
|
import enUS from '@/locales/en-US/main.js'
|
import './index.scss'
|
|
class TabButton extends Component {
|
static propTpyes = {
|
show: PropTypes.any, // 按钮显示样式控制
|
MenuID: PropTypes.string, // 菜单ID
|
btn: PropTypes.object, // 按钮
|
selectedData: PropTypes.any, // 子表中选择数据
|
setting: PropTypes.any, // 页面通用设置
|
triggerBtn: PropTypes.any,
|
}
|
|
state = {
|
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
primaryId: ''
|
}
|
|
/**
|
* @description 外部触发按钮点击
|
*/
|
UNSAFE_componentWillReceiveProps(nextProps) {
|
if (nextProps.triggerBtn && !is(fromJS(this.props.triggerBtn), fromJS(nextProps.triggerBtn)) && nextProps.triggerBtn.button.uuid === this.props.btn.uuid) {
|
this.actionTrigger(nextProps.triggerBtn.data)
|
}
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
/**
|
* @description 触发按钮操作
|
*/
|
actionTrigger = (record) => {
|
const { setting, btn, tabviews, MenuID, selectedData } = this.props
|
let data = []
|
|
if (record) { // 表格中触发按钮
|
data = [record]
|
} else {
|
data = selectedData || []
|
}
|
|
if (btn.Ot === 'requiredSgl' && data.length !== 1) {
|
// 需要选择单行时，校验数据
|
notification.warning({
|
top: 92,
|
message: this.state.dict['main.action.confirm.selectSingleLine'],
|
duration: 5
|
})
|
return
|
} else if (!setting.primaryKey) {
|
// 需要选择行时，校验是否设置主键
|
notification.warning({
|
top: 92,
|
message: '未设置主键！',
|
duration: 5
|
})
|
return
|
}
|
|
let primaryId = ''
|
|
if (btn.Ot === 'requiredSgl') {
|
primaryId = data[0][setting.primaryKey] || ''
|
}
|
|
let newtab = {
|
MenuNo: '',
|
MenuID: btn.uuid,
|
MenuName: btn.label,
|
type: btn.tabTemplate,
|
selected: true,
|
param: {
|
parentId: this.props.MenuID,
|
btn: btn,
|
data: data[0] || null,
|
primaryId: primaryId
|
}
|
}
|
|
let index = 0
|
let isexit = false
|
let tabs = tabviews.map((tab, i) => {
|
tab.selected = false
|
|
if (tab.MenuID === MenuID) {
|
index = i
|
} else if (tab.MenuID === btn.uuid) {
|
tab.selected = true
|
isexit = true
|
}
|
|
return tab
|
})
|
|
if (!isexit) {
|
tabs.splice(index + 1, 0, newtab)
|
}
|
|
this.props.modifyTabview(tabs)
|
}
|
|
render() {
|
const { btn, show } = this.props
|
|
return (
|
<div className="mk-btn-wrap">
|
{!show ? <Button
|
className={'mk-btn mk-' + btn.class}
|
icon={btn.icon}
|
onClick={() => {this.actionTrigger()}}
|
>{btn.label}</Button> : null}
|
{show === 'icon' ? <Button className="action-cell" icon={btn.icon || 'dash'} onClick={() => {this.actionTrigger()}}></Button> : null}
|
{show === 'text' ? <Button className="action-cell" onClick={() => {this.actionTrigger()}}>{btn.label}</Button> : null}
|
{show === 'all' ? <Button className="action-cell" icon={btn.icon || ''} onClick={() => {this.actionTrigger()}}>{btn.label}</Button> : null}
|
</div>
|
)
|
}
|
}
|
|
const mapStateToProps = (state) => {
|
return {
|
tabviews: state.tabviews,
|
}
|
}
|
|
const mapDispatchToProps = (dispatch) => {
|
return {
|
modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews))
|
}
|
}
|
|
export default connect(mapStateToProps, mapDispatchToProps)(TabButton)
|
