| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { is, fromJS } from 'immutable' |
| | | import { Button, notification } from 'antd' |
| | | import { Button, notification, Modal } 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' |
| | | |
| | | const { confirm } = Modal |
| | | |
| | | class NewPageButton extends Component { |
| | | static propTpyes = { |
| | | show: PropTypes.any, // 按钮显示样式控制 |
| | | BData: PropTypes.any, // 主表数据 |
| | | btn: PropTypes.object, // 按钮 |
| | | selectedData: PropTypes.any, // 子表中选择数据 |
| | | setting: PropTypes.any, // 页面通用设置 |
| | | triggerBtn: PropTypes.any, |
| | | disabled: PropTypes.any, // 行按钮禁用 |
| | | } |
| | | |
| | | state = { |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS |
| | | dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | disabled: false, |
| | | hidden: false, |
| | | visible: 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) |
| | | UNSAFE_componentWillMount () { |
| | | const { btn, selectedData, BData, disabled } = this.props |
| | | |
| | | if (btn.controlField) { |
| | | this.setStatus(btn, selectedData || [], BData, disabled) |
| | | } else if (disabled) { |
| | | this.setState({disabled: true}) |
| | | } |
| | | } |
| | | |
| | | shouldComponentUpdate (nextProps, nextState) { |
| | | return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) |
| | | } |
| | | |
| | | componentDidMount () { |
| | | MKEmitter.addListener('triggerBtnId', this.actionTrigger) |
| | | } |
| | | |
| | | UNSAFE_componentWillReceiveProps (nextProps) { |
| | | const { btn } = this.props |
| | | |
| | | if (btn.controlField) { |
| | | this.setStatus(btn, nextProps.selectedData || [], nextProps.BData, nextProps.disabled) |
| | | } else { |
| | | this.setState({disabled: nextProps.disabled === true}) |
| | | } |
| | | } |
| | | |
| | | componentWillUnmount () { |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | 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)) { |
| | | 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 = (record) => { |
| | | const { setting, btn, selectedData } = this.props |
| | | let data = [] |
| | | actionTrigger = (triggerId, record, type) => { |
| | | const { btn, selectedData } = this.props |
| | | const { disabled } = this.state |
| | | |
| | | if (record) { // 表格中触发按钮 |
| | | data = [record] |
| | | } else { |
| | | data = selectedData || [] |
| | | if (disabled) return |
| | | if (triggerId && btn.uuid !== triggerId) return |
| | | |
| | | if (type === 'linkbtn' && !btn.$toolbtn && !is(fromJS(selectedData || []), fromJS(record))) { |
| | | return |
| | | } |
| | | |
| | | if (btn.Ot === 'requiredSgl' && data.length !== 1) { |
| | | let data = record || selectedData || [] |
| | | |
| | | if (btn.Ot && btn.Ot !== 'notRequired' && data.length === 0) { |
| | | // 需要选择行时,校验数据 |
| | | notification.warning({ |
| | | top: 92, |
| | | message: this.state.dict['main.action.confirm.selectline'], |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } else if (btn.Ot === 'requiredSgl' && data.length !== 1) { |
| | | // 需要选择单行时,校验数据 |
| | | notification.warning({ |
| | | top: 92, |
| | | message: this.state.dict['main.action.confirm.selectSingleLine'], |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } else if (btn.Ot === 'requiredSgl' && !setting.primaryKey) { |
| | | // 需要选择行时,校验是否设置主键 |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '未设置主键!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | |
| | | } |
| | | |
| | | let Id = '' |
| | | if (btn.Ot === 'requiredSgl') { |
| | | Id = data[0][setting.primaryKey] || '' |
| | | let name = '' |
| | | let MenuNo = '' |
| | | let Remark = '' |
| | | if (btn.Ot === 'requiredSgl' && data[0]) { |
| | | Id = data[0].$$uuid || '' |
| | | name = data[0].PrintTempName || '' |
| | | MenuNo = data[0].PrintTempNO || '' |
| | | Remark = data[0].Remark || '' |
| | | } |
| | | |
| | | if (btn.pageTemplate === 'print') { |
| | | let cloudmsg = '&cuid=' + (sessionStorage.getItem('CloudUserID') || '') + '&csid=' + (sessionStorage.getItem('CloudSessionUid') || '') + '&clid=' + (sessionStorage.getItem('CloudLoginUID') || '') + '&cun=' + (sessionStorage.getItem('CloudUserName') || '') |
| | | let msg = '&uid=' + sessionStorage.getItem('UserID') + '&sid=' + sessionStorage.getItem('SessionUid') + '&lid=' + sessionStorage.getItem('LoginUID') + '&un=' + sessionStorage.getItem('User_Name') |
| | | let _name = '新页面' |
| | | |
| | | if (btn.pageTemplate === 'billprint') { |
| | | _name = '单据打印' |
| | | if (btn.Ot === 'required' && data && data.length > 0) { |
| | | data.forEach((item, i) => { |
| | | let _id = item.$$uuid || '' |
| | | let url = '#/billprint/' + window.btoa(window.encodeURIComponent(JSON.stringify({ id: _id, tempId: btn.printTemp, dataM: sessionStorage.getItem('dataM') }))) |
| | | window.open(url) |
| | | }) |
| | | } else { |
| | | window.open('#/billprint/' + window.btoa(window.encodeURIComponent(JSON.stringify({ id: Id, tempId: btn.printTemp, dataM: sessionStorage.getItem('dataM') })))) |
| | | } |
| | | } else if (btn.pageTemplate === 'billprintTemp') { |
| | | let src = '#/menudesign/' + window.btoa(window.encodeURIComponent(JSON.stringify({ MenuType: 'billPrint', MenuId: Id, MenuNo: MenuNo, MenuName: name || '打印', Remark: Remark }))) |
| | | window.open(src) |
| | | } else if (btn.pageTemplate === 'print') { |
| | | let cloudmsg = '&cuid=' + (sessionStorage.getItem('CloudUserID') || '') + '&clid=' + (sessionStorage.getItem('CloudLoginUID') || '') + '&cun=' + (sessionStorage.getItem('CloudUserName') || '') |
| | | let msg = '&uid=' + sessionStorage.getItem('UserID') + '&lid=' + sessionStorage.getItem('LoginUID') + '&un=' + sessionStorage.getItem('User_Name') |
| | | let src = '#/print/' + window.btoa('ID=' + Id + msg + cloudmsg) |
| | | window.open(src) |
| | | } else if (btn.pageTemplate === 'pay') { |
| | | let url = '#/pay/' + window.btoa(`ID=${Id}&LoginUID=${sessionStorage.getItem('LoginUID')}`) |
| | | |
| | | let _p = `ID=${Id}&userid=${sessionStorage.getItem('UserID')}&LoginUID=${sessionStorage.getItem('LoginUID')}&logo=${window.GLOB.doclogo}&name=${sessionStorage.getItem('Full_Name')}&icp=${window.GLOB.ICP}©Right=${window.GLOB.copyRight}` |
| | | let url = '#/pay/' + window.btoa(window.encodeURIComponent(_p)) |
| | | _name = '支付' |
| | | |
| | | confirm({ |
| | | title: '请在付款页面完成订单支付。', |
| | | content: '', |
| | | className: 'pay-query', |
| | | okText: '支付成功', |
| | | cancelText: '支付遇到问题', |
| | | onOk() { |
| | | // 支付后刷新界面 |
| | | MKEmitter.emit('refreshByButtonResult', btn.$menuId, 'grid', btn) |
| | | }, |
| | | onCancel() { |
| | | MKEmitter.emit('refreshByButtonResult', btn.$menuId, 'grid', btn) |
| | | }, |
| | | }) |
| | | window.open(url) |
| | | } else if (btn.pageTemplate === 'custom') { |
| | | let url = btn.url |
| | | let con = '?' |
| | | |
| | | if (/\?/ig.test(url)) { |
| | | con = '&' |
| | | } |
| | | |
| | | if (btn.Ot === 'requiredSgl' && btn.joint !== 'false') { |
| | | url = url + `?ID=${Id}&appkey=${window.GLOB.appkey}&LoginUID=${sessionStorage.getItem('LoginUID') || ''}` |
| | | url = url + `${con}id=${Id}&appkey=${window.GLOB.appkey}&userid=${sessionStorage.getItem('UserID')}&LoginUID=${sessionStorage.getItem('LoginUID') || ''}` |
| | | } else if (btn.Ot === 'requiredSgl' && btn.joint === 'false') { |
| | | url = url + `${con}id=${Id}` |
| | | } else if (btn.joint !== 'false') { |
| | | url = url + `?appkey=${window.GLOB.appkey}&LoginUID=${sessionStorage.getItem('LoginUID') || ''}` |
| | | url = url + `${con}appkey=${window.GLOB.appkey}&userid=${sessionStorage.getItem('UserID')}&LoginUID=${sessionStorage.getItem('LoginUID') || ''}` |
| | | } |
| | | |
| | | window.open(url) |
| | | } |
| | | |
| | | if (window.GLOB.systemType === 'production') { |
| | | MKEmitter.emit('queryTrigger', {menuId: btn.uuid, name: _name}) |
| | | } |
| | | } |
| | | |
| | | render() { |
| | | const { btn, show } = this.props |
| | | const { btn } = this.props |
| | | const { disabled, hidden } = this.state |
| | | |
| | | if (hidden) return null |
| | | |
| | | let label = '' |
| | | let icon = '' |
| | | let type = 'link' |
| | | let className = '' |
| | | |
| | | if (btn.show === 'button') { |
| | | label = btn.label |
| | | icon = btn.icon || '' |
| | | } else if (btn.show === 'link') { |
| | | label = <span>{btn.label}{btn.icon ? <MkIcon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> |
| | | icon = '' |
| | | } else if (btn.show === 'icon') { |
| | | icon = btn.icon || '' |
| | | } else if (!btn.$toolbtn) { |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | } else { |
| | | type = '' |
| | | icon = btn.icon || '' |
| | | label = btn.label |
| | | className = 'mk-btn mk-' + btn.class |
| | | } |
| | | |
| | | 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> |
| | | <Button |
| | | type={type} |
| | | title={disabled ? (btn.reason || '') : (btn.show === 'icon' ? btn.label : '')} |
| | | style={btn.style || null} |
| | | disabled={disabled} |
| | | icon={icon} |
| | | className={className} |
| | | onClick={(e) => {e.stopPropagation(); this.actionTrigger()}} |
| | | >{label}</Button> |
| | | ) |
| | | } |
| | | } |