| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import {connect} from 'react-redux' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Button, notification, Icon } from 'antd' |
| | | import { Button, notification, Dropdown } from 'antd' |
| | | |
| | | import zhCN from '@/locales/zh-CN/main.js' |
| | | import enUS from '@/locales/en-US/main.js' |
| | | import MKEmitter from '@/utils/events.js' |
| | | import MkIcon from '@/components/mk-icon' |
| | | |
| | | import './index.scss' |
| | | |
| | | class TabButton extends Component { |
| | | static propTpyes = { |
| | | show: PropTypes.any, // 按钮显示样式控制 |
| | | position: PropTypes.any, // 按钮位置,工具栏为toolbar |
| | | BData: PropTypes.any, // 主表数据 |
| | | BID: PropTypes.any, |
| | | MenuID: PropTypes.string, // 菜单ID |
| | | btn: PropTypes.object, // 按钮 |
| | | selectedData: PropTypes.any, // 子表中选择数据 |
| | | setting: PropTypes.any, // 页面通用设置 |
| | | disabled: PropTypes.any, // 行按钮禁用 |
| | | name: PropTypes.any |
| | | } |
| | | |
| | | state = { |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | disabled: false, |
| | | primaryId: '' |
| | | hidden: false, |
| | | primaryId: '', |
| | | dict: window.GLOB.dict |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { btn, selectedData } = this.props |
| | | let disabled = false |
| | | const { btn, selectedData, BData, disabled } = this.props |
| | | |
| | | if (btn.controlField && selectedData && selectedData.length > 0) { // 表格中按钮隐藏控制 |
| | | selectedData.forEach(item => { |
| | | let s = item[btn.controlField] + '' |
| | | if (s === btn.controlVal || (btn.controlVal && btn.controlVal.split(',').includes(s))) { |
| | | disabled = true |
| | | } |
| | | }) |
| | | this.setState({disabled}) |
| | | if (btn.controlField) { |
| | | this.setStatus(btn, selectedData || [], BData, disabled) |
| | | } else if (disabled) { |
| | | this.setState({disabled: true}) |
| | | } |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | UNSAFE_componentWillReceiveProps (nextProps) { |
| | | const { btn, selectedData } = this.props |
| | | const { btn } = this.props |
| | | |
| | | if (btn.controlField && !is(fromJS(nextProps.selectedData || []), fromJS(selectedData || []))) { |
| | | let disabled = false |
| | | |
| | | if (nextProps.selectedData && nextProps.selectedData.length > 0) { // 表格中按钮隐藏控制 |
| | | nextProps.selectedData.forEach(item => { |
| | | let s = item[btn.controlField] + '' |
| | | if (s === btn.controlVal || (btn.controlVal && btn.controlVal.split(',').includes(s))) { |
| | | disabled = true |
| | | } |
| | | }) |
| | | } |
| | | this.setState({disabled}) |
| | | if (btn.controlField) { |
| | | this.setStatus(btn, nextProps.selectedData || [], nextProps.BData, nextProps.disabled) |
| | | } else { |
| | | this.setState({disabled: nextProps.disabled === true}) |
| | | } |
| | | } |
| | | |
| | |
| | | } |
| | | MKEmitter.removeListener('triggerBtnId', this.actionTrigger) |
| | | } |
| | | |
| | | setStatus = (btn, data, BData, disprop) => { |
| | | let disabled = false |
| | | let hidden = false |
| | | |
| | | if (btn.control !== 'parent') { |
| | | if (data.length > 0) { |
| | | data.forEach(item => { |
| | | let s = item[btn.controlField] !== undefined ? item[btn.controlField] + '' : '' |
| | | if (btn.controlVals.includes(s) || item.$lock) { |
| | | disabled = true |
| | | } |
| | | }) |
| | | } else if (btn.controlVals.includes('')) { |
| | | disabled = true |
| | | } |
| | | } else { |
| | | if (!BData || !BData.hasOwnProperty(btn.controlField)) { |
| | | hidden = true |
| | | } else { |
| | | let s = BData[btn.controlField] + '' |
| | | if (btn.controlVals.includes(s)) { |
| | | hidden = true |
| | | } |
| | | } |
| | | } |
| | | |
| | | if (disabled && btn.control === 'hidden') { |
| | | hidden = true |
| | | } |
| | | |
| | | if (disprop) { |
| | | disabled = true |
| | | } |
| | | |
| | | this.setState({hidden, disabled}) |
| | | } |
| | | |
| | | /** |
| | | * @description 触发按钮操作 |
| | | */ |
| | | actionTrigger = (triggerId, record, type) => { |
| | | const { setting, btn, selectedData } = this.props |
| | | const { disabled } = this.state |
| | | actionTrigger = (triggerId, record, type, lid) => { |
| | | const { btn, selectedData, BID, LID } = this.props |
| | | const { disabled, dict } = this.state |
| | | |
| | | if ((triggerId && btn.uuid !== triggerId) || disabled) return |
| | | |
| | | if (type === 'linkbtn' && selectedData && selectedData.length === 1) { |
| | | if (record[0].$Index !== selectedData[0].$Index) { |
| | | return |
| | | } |
| | | } |
| | | if (disabled || btn.multiMenus) return |
| | | if (triggerId && btn.uuid !== triggerId) return |
| | | if (type === 'linkbtn' && !btn.$toolbtn && LID !== lid) return |
| | | |
| | | let data = record || selectedData || [] |
| | | |
| | | if (btn.Ot === 'requiredSgl' && data.length !== 1) { |
| | | if (btn.Ot !== 'notRequired' && data.length === 0) { |
| | | // 需要选择行时,校验数据 |
| | | notification.warning({ |
| | | top: 92, |
| | | message: dict['select_row'] || '请选择行!', |
| | | duration: 5 |
| | | }) |
| | | return false |
| | | } else if (btn.Ot === 'requiredSgl' && data.length !== 1) { |
| | | // 需要选择单行时,校验数据 |
| | | notification.warning({ |
| | | top: 92, |
| | | message: this.state.dict['main.action.confirm.selectSingleLine'], |
| | | message: dict['select_single_row'] || '请选择单行数据!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | |
| | | |
| | | let primaryId = '' |
| | | |
| | | if (btn.Ot === 'requiredSgl' && setting.primaryKey) { |
| | | primaryId = data[0][setting.primaryKey] || '' |
| | | if (btn.Ot === 'requiredSgl') { |
| | | primaryId = data[0].$$uuid || '' |
| | | } else if (btn.Ot === 'requiredOnce') { |
| | | let ids = data.map(d => (d.$$uuid || '')) |
| | | ids = ids.filter(Boolean) |
| | | primaryId = ids.join(',') |
| | | } else if (btn.Ot === 'notRequired') { |
| | | if (btn.sysId === 'js') { |
| | | primaryId = (() => { |
| | | let uuid = [] |
| | | let timestamp = new Date().getTime() |
| | | let _options = '0123456789abcdefghigklmnopqrstuv' |
| | | for (let i = 0; i < 19; i++) { |
| | | uuid.push(_options.substr(Math.floor(Math.random() * 0x20), 1)) |
| | | } |
| | | uuid = timestamp + uuid.join('') |
| | | return uuid |
| | | })() |
| | | primaryId = primaryId + (btn.sign || '') |
| | | } else if (btn.sysId !== 'empty') { |
| | | primaryId = BID || '' |
| | | } |
| | | } |
| | | |
| | | let newtab = {} |
| | |
| | | primaryId: primaryId |
| | | } |
| | | } |
| | | } else { |
| | | } else if (btn.linkmenu && btn.linkmenu.length > 0) { |
| | | let menuId = btn.linkmenu.slice(-1)[0] |
| | | let menu = null |
| | | |
| | | if (btn.MenuID) { |
| | | if (window.GLOB.mkThdMenus.has(menuId)) { |
| | | menu = {...window.GLOB.mkThdMenus.get(menuId), param: { $BID: primaryId }} |
| | | } else if (btn.MenuID) { |
| | | menu = { |
| | | MenuID: btn.MenuID, |
| | | MenuName: btn.MenuName, |
| | | MenuNo: btn.MenuNo, |
| | | type: btn.tabType |
| | | type: btn.tabType, |
| | | param: { $BID: primaryId } |
| | | } |
| | | } else if (btn.linkmenu && btn.linkmenu.length > 0) { |
| | | let menu_id = btn.linkmenu.slice(-1)[0] |
| | | menu = this.props.permMenus.filter(m => m.MenuID === menu_id)[0] || '' |
| | | } |
| | | |
| | | if (!menu) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '菜单已删除或没有访问权限!', |
| | | message: dict['no_perm'] || `没有${btn.MenuName ? `菜单《${btn.MenuName}》的` : '此菜单的'}访问权限!`, |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | newtab = { |
| | | ...menu, |
| | | param: { |
| | | $BID: primaryId |
| | | } |
| | | if (btn.Ot === 'requiredSgl' || btn.Ot === 'requiredOnce') { |
| | | Object.keys(data[0]).forEach(key => { |
| | | if (/^\$/.test(key)) return |
| | | if (key === 'children') return |
| | | menu.param[key] = data[0][key] |
| | | }) |
| | | } |
| | | |
| | | newtab = menu |
| | | } |
| | | |
| | | if (btn.openTab === 'view') { |
| | | window.open('#/view/' + newtab.MenuID + '/' + primaryId) |
| | | } else { |
| | | MKEmitter.emit('modifyTabs', newtab, true) |
| | | |
| | | MKEmitter.emit('openNewTab') |
| | | } |
| | | |
| | | if (window.GLOB.systemType === 'production') { |
| | | MKEmitter.emit('queryTrigger', {menuId: btn.uuid, name: '标签页'}) |
| | | } |
| | | } |
| | | |
| | | triggerMenu = (tab) => { |
| | | const { btn, selectedData, BID } = this.props |
| | | const { dict } = this.state |
| | | |
| | | let data = selectedData || [] |
| | | |
| | | if (btn.Ot !== 'notRequired' && data.length === 0) { |
| | | // 需要选择行时,校验数据 |
| | | notification.warning({ |
| | | top: 92, |
| | | message: dict['select_row'] || '请选择行!', |
| | | duration: 5 |
| | | }) |
| | | return false |
| | | } else if (btn.Ot === 'requiredSgl' && data.length !== 1) { |
| | | // 需要选择单行时,校验数据 |
| | | notification.warning({ |
| | | top: 92, |
| | | message: dict['select_single_row'] || '请选择单行数据!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | let primaryId = '' |
| | | |
| | | if (btn.Ot === 'requiredSgl') { |
| | | primaryId = data[0].$$uuid || '' |
| | | } else if (btn.Ot === 'requiredOnce') { |
| | | let ids = data.map(d => (d.$$uuid || '')) |
| | | ids = ids.filter(Boolean) |
| | | primaryId = ids.join(',') |
| | | } else if (btn.Ot === 'notRequired') { |
| | | if (btn.sysId === 'js') { |
| | | primaryId = (() => { |
| | | let uuid = [] |
| | | let timestamp = new Date().getTime() |
| | | let _options = '0123456789abcdefghigklmnopqrstuv' |
| | | for (let i = 0; i < 19; i++) { |
| | | uuid.push(_options.substr(Math.floor(Math.random() * 0x20), 1)) |
| | | } |
| | | uuid = timestamp + uuid.join('') |
| | | return uuid |
| | | })() |
| | | primaryId = primaryId + (tab.sign || '') |
| | | } else if (btn.sysId !== 'empty') { |
| | | primaryId = BID || '' |
| | | } |
| | | } |
| | | |
| | | if (['linkage_navigation', 'linkage', 'menu_board'].includes(window.GLOB.navBar)) { |
| | | MKEmitter.emit('modifyTabs', newtab, 'replace') |
| | | } else { |
| | | MKEmitter.emit('modifyTabs', newtab, 'plus', true) |
| | | let menuId = tab.menuId.slice(-1)[0] |
| | | let menu = null |
| | | |
| | | if (window.GLOB.mkThdMenus.has(menuId)) { |
| | | menu = {...window.GLOB.mkThdMenus.get(menuId), param: { $BID: primaryId }} |
| | | } else if (tab.MenuID) { |
| | | menu = { |
| | | MenuID: tab.MenuID, |
| | | MenuName: tab.MenuName, |
| | | type: tab.tabType, |
| | | param: { $BID: primaryId } |
| | | } |
| | | } |
| | | |
| | | MKEmitter.emit('openNewTab') |
| | | if (!menu) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: dict['no_perm'] || '没有此菜单的访问权限!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | |
| | | |
| | | if (btn.openTab === 'view') { |
| | | window.open('#/view/' + menu.MenuID + '/' + primaryId) |
| | | } else { |
| | | MKEmitter.emit('modifyTabs', menu, true) |
| | | |
| | | MKEmitter.emit('openNewTab') |
| | | } |
| | | |
| | | if (window.GLOB.systemType === 'production') { |
| | | MKEmitter.emit('queryTrigger', {menuId: btn.uuid, name: '标签页'}) |
| | | } |
| | | } |
| | | |
| | | render() { |
| | | const { btn, show } = this.props |
| | | const { disabled } = this.state |
| | | const { btn, name } = this.props |
| | | const { disabled, hidden } = this.state |
| | | |
| | | if (show === 'actionList') { |
| | | return ( |
| | | <Button |
| | | className={'mk-btn mk-' + btn.class} |
| | | icon={btn.icon} |
| | | disabled={disabled} |
| | | onClick={(e) => {e.stopPropagation(); this.actionTrigger()}} |
| | | >{btn.label}</Button> |
| | | ) |
| | | } else { // icon、text、 all 卡片 |
| | | let label = '' |
| | | let icon = '' |
| | | if (hidden) return null |
| | | |
| | | if (show === 'button') { |
| | | label = btn.label |
| | | icon = btn.icon || '' |
| | | } else if (show === 'link') { |
| | | label = <span>{btn.label}{btn.icon ? <Icon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> |
| | | icon = '' |
| | | } else if (show === 'icon') { |
| | | icon = btn.icon || '' |
| | | // } else if (show === 'text') { |
| | | } else { |
| | | label = btn.label |
| | | } |
| | | let label = '' |
| | | |
| | | return ( |
| | | if (btn.show === 'link') { |
| | | label = <span>{name || btn.label}{btn.icon ? <MkIcon style={{marginLeft: '8px'}} type={btn.icon} /> : ''}</span> |
| | | } else if (btn.show === 'icon') { |
| | | label = <MkIcon type={btn.icon} /> |
| | | } else { |
| | | label = <span>{btn.icon ? <MkIcon style={{marginRight: '8px'}} type={btn.icon} /> : ''}{name || btn.label}</span> |
| | | } |
| | | |
| | | if (btn.multiMenus && !disabled) { |
| | | return (<Dropdown |
| | | overlay={<div className="mk-tab-dropdown-wrap">{ |
| | | btn.multiMenus.map(tab => <div key={tab.uuid} onClick={() => this.triggerMenu(tab)}>{tab.name}</div>) |
| | | }</div>} |
| | | trigger={['hover']} |
| | | > |
| | | <Button |
| | | type="link" |
| | | title={show === 'icon' ? btn.label : ''} |
| | | style={btn.style} |
| | | disabled={disabled} |
| | | icon={icon} |
| | | onClick={(e) => {e.stopPropagation(); this.actionTrigger()}} |
| | | title={btn.show === 'icon' ? btn.label : ''} |
| | | style={btn.style || null} |
| | | className={btn.hover || ''} |
| | | >{label}</Button> |
| | | ) |
| | | </Dropdown>) |
| | | } |
| | | |
| | | return ( |
| | | <Button |
| | | type="link" |
| | | id={'button' + btn.uuid} |
| | | title={disabled ? (btn.reason || '') : (btn.show === 'icon' ? btn.label : '')} |
| | | style={btn.style || null} |
| | | disabled={disabled} |
| | | className={btn.hover || ''} |
| | | onClick={(e) => {e.stopPropagation(); this.actionTrigger()}} |
| | | >{label}</Button> |
| | | ) |
| | | } |
| | | } |
| | | |
| | | const mapStateToProps = (state) => { |
| | | return { |
| | | permMenus: state.permMenus, |
| | | } |
| | | } |
| | | |
| | | const mapDispatchToProps = () => { |
| | | return {} |
| | | } |
| | | |
| | | export default connect(mapStateToProps, mapDispatchToProps)(TabButton) |
| | | export default TabButton |