From 547e5fe219ee7bee309ecd67db74bc8df66b5433 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 23 八月 2023 11:47:45 +0800
Subject: [PATCH] 2023-08-23
---
src/tabviews/zshare/actionList/popupbutton/index.jsx | 334 ++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 243 insertions(+), 91 deletions(-)
diff --git a/src/tabviews/zshare/actionList/popupbutton/index.jsx b/src/tabviews/zshare/actionList/popupbutton/index.jsx
index 2a5c6fa..efd9c5c 100644
--- a/src/tabviews/zshare/actionList/popupbutton/index.jsx
+++ b/src/tabviews/zshare/actionList/popupbutton/index.jsx
@@ -1,38 +1,44 @@
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 { Button, Modal, notification, Drawer } from 'antd'
import asyncSpinComponent from '@/utils/asyncSpinComponent'
-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 SubTabTable = asyncSpinComponent(() => import('@/tabviews/subtabtable'))
-const CustomPage = asyncSpinComponent(() => import('@/tabviews/custom'))
+const PopView = asyncSpinComponent(() => import('@/tabviews/custom/popview'))
class PopupButton extends Component {
static propTpyes = {
- show: PropTypes.any, // 鎸夐挳鏄剧ず鏍峰紡鎺у埗
- position: PropTypes.any, // 鎸夐挳浣嶇疆锛屽伐鍏锋爮涓簍oolbar
BID: PropTypes.string, // 涓昏〃ID
BData: PropTypes.any, // 涓昏〃鏁版嵁
selectedData: PropTypes.any, // 瀛愯〃涓�夋嫨鏁版嵁
- Tab: PropTypes.any, // 濡傛灉褰撳墠鍏冪礌涓烘爣绛炬椂锛宼ab涓烘爣绛句俊鎭�
MenuID: PropTypes.string, // 鑿滃崟ID
btn: PropTypes.object, // 鎸夐挳
setting: PropTypes.any, // 椤甸潰閫氱敤璁剧疆
- updateStatus: PropTypes.func, // 鎸夐挳鐘舵�佹洿鏂�
+ disabled: PropTypes.any, // 琛屾寜閽鐢�
}
state = {
- dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
visible: false,
popData: null,
primaryId: '',
+ disabled: false,
+ hidden: false,
loading: false,
+ }
+
+ 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) {
@@ -40,10 +46,19 @@
}
componentDidMount () {
- const { position } = this.props
+ MKEmitter.addListener('popclose', this.syspopclose)
+ MKEmitter.addListener('triggerBtnId', this.actionTrigger)
+ MKEmitter.addListener('openNewTab', this.openNewTab)
+ MKEmitter.addListener('refreshPopButton', this.refreshPopButton)
+ }
- if (position === 'toolbar') {
- 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})
}
}
@@ -51,24 +66,95 @@
this.setState = () => {
return
}
+ MKEmitter.removeListener('popclose', this.syspopclose)
+ MKEmitter.removeListener('openNewTab', this.openNewTab)
MKEmitter.removeListener('triggerBtnId', this.actionTrigger)
+ MKEmitter.removeListener('refreshPopButton', this.refreshPopButton)
+ }
+
+ 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 鎵撳紑鏂版爣绛炬椂锛屽叧闂脊绐楁爣绛鹃〉
+ */
+ openNewTab = () => {
+ this.setState({
+ visible: false,
+ loading: false
+ })
+ }
+
+ /**
+ * @description 寮圭獥鏍囩椤靛埛鏂�
+ */
+ refreshPopButton = (tabId) => {
+ const { btn } = this.props
+
+ if (btn.uuid !== tabId) return
+
+ if (btn.$view === 'popview') {
+ if (btn.popClose !== 'never') {
+ MKEmitter.emit('refreshByButtonResult', btn.$menuId, btn.popClose, btn)
+ }
+ } else {
+ let position = btn.popClose !== 'never' ? btn.popClose : 'grid'
+ MKEmitter.emit('refreshByButtonResult', btn.$menuId, position, btn)
+ }
+ }
+
+ /**
* @description 瑙﹀彂鎸夐挳鎿嶄綔
*/
- actionTrigger = (triggerId, record) => {
- const { setting, Tab, BID, btn, selectedData } = this.props
- const { loading } = this.state
+ actionTrigger = (triggerId, record, type) => {
+ const { setting, BID, btn, selectedData } = this.props
+ const { loading, disabled } = this.state
- if ((triggerId && btn.uuid !== triggerId) || loading) return
+ if (loading || disabled) return
+ if (triggerId && btn.uuid !== triggerId) return
- if (Tab && Tab.supMenu && !BID) {
+ if (setting.supModule && !BID) {
notification.warning({
top: 92,
message: '闇�瑕佷笂绾т富閿�硷紒',
duration: 5
})
+ return
+ } else if (type === 'linkbtn' && !btn.$toolbtn && !is(fromJS(selectedData || []), fromJS(record))) {
return
}
@@ -78,22 +164,7 @@
// 闇�瑕侀�夋嫨鍗曡鏃讹紝鏍￠獙鏁版嵁
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: '寮圭獥椤甸潰涓嶆敮鎸佹璁剧疆锛�',
+ message: data.length === 0 ? '璇烽�夋嫨琛岋紒' : '璇烽�夋嫨鍗曡鏁版嵁锛�',
duration: 5
})
return
@@ -102,9 +173,9 @@
let _data = null
let primaryId = ''
- if (btn.Ot === 'requiredSgl') {
+ if (btn.Ot === 'requiredSgl' && setting.primaryKey) {
_data = data[0]
- primaryId = _data[setting.primaryKey] || ''
+ primaryId = _data.$$uuid || _data[setting.primaryKey] || ''
}
this.setState({
@@ -113,12 +184,16 @@
primaryId: primaryId,
visible: true
})
+
+ if (window.GLOB.systemType === 'production') {
+ MKEmitter.emit('queryTrigger', {menuId: btn.uuid, name: '寮圭獥锛堟爣绛撅級'})
+ }
}
- // 鎿嶄綔鍚庡埛鏂颁富琛�
- reloadtable = () => {
- const { btn } = this.props
- this.props.updateStatus('refresh', 'grid', btn)
+ syspopclose = () => {
+ if (!this.state.visible) return
+
+ this.popclose()
}
/**
@@ -132,63 +207,140 @@
loading: false
})
- this.props.updateStatus('refresh', btn.popClose, btn)
+ if (btn.popClose !== 'never') {
+ MKEmitter.emit('refreshByButtonResult', btn.$menuId, btn.popClose, btn)
+ }
+
+ if (btn.syncComponentId) {
+ if (btn.syncComponentId === 'multiComponent') {
+ btn.syncComponentIds.forEach((id, i) => {
+ setTimeout(() => {
+ MKEmitter.emit('reloadData', id)
+ }, 20 * i)
+ })
+ } else {
+ MKEmitter.emit('reloadData', btn.syncComponentId)
+ }
+ }
+ }
+
+ getPop = () => {
+ const { btn } = this.props
+ const { popData, primaryId, visible } = this.state
+
+ let ratio = btn.ratio || 85
+
+ if (btn.display !== 'drawer') {
+ if (ratio > 100) {
+ ratio = ratio + 'px'
+ } else {
+ ratio = ratio + 'vw'
+ }
+ return <Modal
+ wrapClassName={'popview-modal ' + (!btn.$view ? '' : 'custom-popview ') + (btn.popshow || '')}
+ title={btn.label}
+ width={ratio}
+ maskClosable={btn.clickouter === 'close'}
+ visible={visible}
+ onCancel={this.popclose}
+ footer={[
+ <Button key="close" onClick={this.popclose}>鍏抽棴</Button>
+ ]}
+ destroyOnClose
+ >
+ {!btn.$view ? <SubTabTable Tab={btn} MenuID={btn.linkTab} SupMenuID={this.props.MenuID} BID={popData ? primaryId : this.props.BID} BData={popData || this.props.BData}/> : null}
+ {btn.$view === 'popview' ? <PopView Tab={btn} param={{$BID: (popData ? primaryId : this.props.BID), ...(popData || this.props.BData || {})}} /> : null}
+ </Modal>
+ } else {
+ let height = '100vh'
+ let width = '100vw'
+ if (btn.placement === 'top' || btn.placement === 'bottom') {
+ if (ratio > 100) {
+ ratio = ratio + 'px'
+ } else {
+ ratio = ratio + 'vh'
+ }
+
+ height = ratio
+ } else {
+ if (ratio > 100) {
+ ratio = ratio + 'px'
+ } else {
+ ratio = ratio + 'vw'
+ }
+
+ width = ratio
+ }
+
+ return (
+ <Drawer
+ title={btn.label}
+ className={!btn.$view ? 'table-drawer-popview' : 'custom-drawer-popview' }
+ width={width}
+ height={height}
+ maskClosable={btn.clickouter === 'close'}
+ onClose={this.popclose}
+ visible={visible}
+ placement={btn.placement || 'right'}
+ destroyOnClose
+ >
+ {!btn.$view ? <SubTabTable Tab={btn} MenuID={btn.linkTab} SupMenuID={this.props.MenuID} BID={popData ? primaryId : this.props.BID} BData={popData || this.props.BData}/> : null}
+ {btn.$view === 'popview' ? <PopView Tab={btn} param={{$BID: (popData ? primaryId : this.props.BID), ...(popData || this.props.BData || {})}} /> : null}
+ <div className="close-drawer">
+ <Button onClick={this.popclose}>
+ 鍏抽棴
+ </Button>
+ </div>
+ </Drawer>
+ )
+ }
}
render() {
- const { btn, show } = this.props
- const { loading, popData, primaryId } = this.state
+ const { btn } = this.props
+ const { loading, 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 style={{display: 'inline-block'}} onClick={(e) => e.stopPropagation()}>
- {show === 'actionList' ? <Button
- className={'mk-btn mk-' + btn.class}
- icon={btn.icon}
- onClick={() => {this.actionTrigger()}}
+ <>
+ <Button
+ type={type}
+ title={disabled ? (btn.reason || '') : (btn.show === 'icon' ? btn.label : '')}
loading={loading}
- >{btn.label}</Button> : null}
- {show !== 'actionList' ? <Button
- type="link"
- loading={loading}
- style={btn.btnstyle}
- icon={show === 'text' ? '' : (btn.icon || '')}
- onClick={() => {this.actionTrigger()}}
- >{show === 'icon' && btn.icon ? '' : btn.label}</Button> : null}
- <Modal
- className={'popview-modal ' + (btn.$menuId ? 'custom-popview' : '')}
- 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
- >
- {!btn.$menuId ? <SubTabTable
- Tab={btn}
- MenuID={btn.linkTab}
- BID={popData ? primaryId : this.props.BID}
- BData={popData || this.props.BData}
- SupMenuID={this.props.MenuID}
- refreshSupView={this.reloadtable}
- /> : null}
- {btn.$menuId ? <CustomPage MenuID={btn.uuid} param={{BID: (popData ? primaryId : this.props.BID), data: (popData || this.props.BData)}} /> : null}
- </Modal>
- </div>
+ disabled={disabled}
+ style={btn.style}
+ icon={icon}
+ className={className}
+ onClick={(e) => {e.stopPropagation(); this.actionTrigger()}}
+ >{label}</Button>
+ <span onClick={(e) => {e.stopPropagation()}} onDoubleClick={(e) => {e.stopPropagation()}}>{this.getPop()}</span>
+ </>
)
}
}
-
-const mapStateToProps = (state) => {
- return {
- tabviews: state.tabviews,
- }
-}
-
-const mapDispatchToProps = () => {
- return {}
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(PopupButton)
\ No newline at end of file
+export default PopupButton
\ No newline at end of file
--
Gitblit v1.8.0