import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import {connect} from 'react-redux'
|
import { is, fromJS } from 'immutable'
|
import { Button, Modal, notification } from 'antd'
|
|
import asyncSpinComponent from '@/utils/asyncSpinComponent'
|
import zhCN from '@/locales/zh-CN/main.js'
|
import enUS from '@/locales/en-US/main.js'
|
import './index.scss'
|
|
const SubTabTable = asyncSpinComponent(() => import('@/tabviews/subtabtable'))
|
|
class NormalButton extends Component {
|
static propTpyes = {
|
show: PropTypes.any, // 按钮显示样式控制
|
BID: PropTypes.string, // 主表ID
|
BData: PropTypes.any, // 主表数据
|
selectedData: PropTypes.any, // 子表中选择数据
|
Tab: PropTypes.any, // 如果当前元素为标签时，tab为标签信息
|
MenuID: PropTypes.string, // 菜单ID
|
btn: PropTypes.object, // 按钮
|
setting: PropTypes.any, // 页面通用设置
|
updateStatus: PropTypes.func, // 按钮状态更新
|
triggerBtn: PropTypes.any,
|
}
|
|
state = {
|
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
visible: false,
|
popData: null,
|
primaryId: '',
|
loading: false,
|
}
|
|
/**
|
* @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, Tab, BID, btn, selectedData } = this.props
|
|
if (Tab && Tab.supMenu && !BID) {
|
notification.warning({
|
top: 92,
|
message: '需要上级主键值！',
|
duration: 5
|
})
|
return
|
}
|
|
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
|
} else if (setting.tabType === 'subtab') {
|
notification.warning({
|
top: 92,
|
message: '弹窗页面不支持此设置！',
|
duration: 5
|
})
|
return
|
}
|
|
let _data = null
|
let primaryId = ''
|
|
if (btn.Ot === 'requiredSgl') {
|
_data = data[0]
|
primaryId = _data[setting.primaryKey] || ''
|
}
|
|
this.setState({
|
loading: true,
|
popData: _data,
|
primaryId: primaryId,
|
visible: true
|
})
|
this.props.updateStatus('start')
|
}
|
|
// 操作后刷新主表
|
reloadtable = () => {
|
this.props.updateStatus('refresh', 'grid', true)
|
}
|
|
/**
|
* @description 弹窗关闭
|
*/
|
popclose = () => {
|
const { btn } = this.props
|
|
this.setState({
|
visible: false,
|
loading: false
|
})
|
|
this.props.updateStatus('refresh', btn.popClose)
|
}
|
|
render() {
|
const { btn, show } = this.props
|
const { loading, popData, primaryId } = this.state
|
|
return (
|
<div className="mk-btn-wrap">
|
{!show ? <Button
|
className={'mk-btn mk-' + btn.class}
|
icon={btn.icon}
|
onClick={() => {this.actionTrigger()}}
|
loading={loading}
|
>{btn.label}</Button> : null}
|
{show === 'icon' ? <Button className="action-cell" icon={btn.icon || 'dash'} loading={loading} onClick={() => {this.actionTrigger()}}></Button> : null}
|
{show === 'text' ? <Button className="action-cell" loading={loading} onClick={() => {this.actionTrigger()}}>{btn.label}</Button> : null}
|
{show === 'all' ? <Button className="action-cell" icon={btn.icon || ''} loading={loading} onClick={() => {this.actionTrigger()}}>{btn.label}</Button> : null}
|
<Modal
|
className="popview-modal"
|
title={btn.label}
|
width={'80vw'}
|
maskClosable={false}
|
visible={this.state.visible}
|
onCancel={this.popclose}
|
footer={[
|
<Button key="close" onClick={this.popclose}>{this.state.dict['main.close']}</Button>
|
]}
|
destroyOnClose
|
>
|
<SubTabTable
|
BID={popData ? primaryId : this.props.BID}
|
BData={popData || this.props.BData}
|
SupMenuID={this.props.MenuID}
|
MenuID={btn.linkTab}
|
refreshSupView={this.reloadtable}
|
/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
const mapStateToProps = (state) => {
|
return {
|
tabviews: state.tabviews,
|
}
|
}
|
|
const mapDispatchToProps = () => {
|
return {}
|
}
|
|
export default connect(mapStateToProps, mapDispatchToProps)(NormalButton)
|
