From 89e7167a83e0d8409ca87698e4c08651a37cc26e Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 12 六月 2020 18:19:35 +0800
Subject: [PATCH] 2020-06-12
---
src/tabviews/zshare/cardcomponent/index.jsx | 250 ++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 193 insertions(+), 57 deletions(-)
diff --git a/src/tabviews/zshare/cardcomponent/index.jsx b/src/tabviews/zshare/cardcomponent/index.jsx
index d17f336..503416b 100644
--- a/src/tabviews/zshare/cardcomponent/index.jsx
+++ b/src/tabviews/zshare/cardcomponent/index.jsx
@@ -1,70 +1,75 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Icon, Card, Dropdown, Menu, Spin, Empty, Tabs } from 'antd'
+import { Icon, Card, Spin, Empty, Tabs } from 'antd'
+import asyncComponent from '@/utils/asyncComponent'
import './index.scss'
+
+const NormalButton = asyncComponent(() => import('@/tabviews/zshare/actionList/normalbutton'))
+const PopupButton = asyncComponent(() => import('@/tabviews/zshare/actionList/popupbutton'))
+const TabButton = asyncComponent(() => import('@/tabviews/zshare/actionList/tabbutton'))
+const NewPageButton = asyncComponent(() => import('@/tabviews/zshare/actionList/newpagebutton'))
+const ChangeUserButton = asyncComponent(() => import('@/tabviews/zshare/actionList/changeuserbutton'))
+const PrintButton = asyncComponent(() => import('@/tabviews/zshare/actionList/printbutton'))
const { TabPane } = Tabs
class CardCell extends Component {
static propTpyes = {
- card: PropTypes.object,
- data: PropTypes.object,
- selectKey: PropTypes.string,
- colMap: PropTypes.any,
- triggerBtn: PropTypes.func,
- switchCard: PropTypes.func
+ BID: PropTypes.any, // 涓昏〃ID
+ BData: PropTypes.any, // 涓昏〃鏁版嵁
+ Tab: PropTypes.any, // 濡傛灉褰撳墠鍏冪礌涓烘爣绛炬椂锛宼ab涓烘爣绛句俊鎭�
+ MenuID: PropTypes.string, // 鑿滃崟ID
+ setting: PropTypes.object, // 椤甸潰璁惧畾
+ logcolumns: PropTypes.array, // 瀛楁鍒�
+ card: PropTypes.object, // 鍗＄墖璁剧疆淇℃伅
+ data: PropTypes.object, // 鍗＄墖鏁版嵁
+ selectKey: PropTypes.string, // 閫夋嫨鍗＄墖鐨勫簭鍙�
+ colMap: PropTypes.any, // 鏄剧ず鍒椾俊鎭紝鐢ㄤ簬璁剧疆鏍囪
+ refreshdata: PropTypes.func, // 鎸夐挳鎿嶄綔鍚庢暟鎹埛鏂�
+ switchCard: PropTypes.func // 鍗＄墖鍒囨崲
}
state = {
- card: null,
- extra: null,
- actions: null
+ extra: null, // 椤堕儴鎸夐挳淇℃伅
+ actions: null // 搴曢儴鎸夐挳琛�
}
UNSAFE_componentWillMount () {
+ this.getCardActions()
+ }
+
+ /**
+ * @description 鏁版嵁鍒囨崲锛岄噸鏂扮粦瀹氭寜閽暟鎹�
+ */
+ UNSAFE_componentWillReceiveProps(nextProps) {
+ if (!is(fromJS(this.props.data), fromJS(nextProps.data))) {
+ this.setState({}, () => {
+ this.getCardActions()
+ })
+ }
+ }
+
+ shouldComponentUpdate (nextProps, nextState) {
+ return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
+ }
+
+ /**
+ * @description 鑾峰彇椤堕儴鍙婃寜閽鐨勬寜閽泦
+ */
+ getCardActions = () => {
const { card } = this.props
let extra = null
if (card.header && card.header.actions) {
- let actions = card.header.actions.map(item => {
- let _action = null
- if (card.header.show === 'icon') {
- _action = <span className="action-cell" onClick={() => this.triggerAction(item)} key={item.uuid}><Icon type={item.icon || 'dash'} /></span>
- } else if (card.bottom.show === 'text') {
- _action = <span className="action-cell" onClick={() => this.triggerAction(item)} key={item.uuid}>{item.label}</span>
- } else {
- _action = <span className="action-cell" onClick={() => this.triggerAction(item)} key={item.uuid}><Icon type={item.icon || 'dash'} /> {item.label}</span>
- }
-
- return _action
- })
- if (actions.length === 1) {
- extra = actions[0]
- } else {
- extra = <Dropdown overlay={
- <Menu>{actions.map((item, i) => <Menu.Item key={i}> {item} </Menu.Item>)}</Menu>
- } placement="bottomRight">
- Action
- </Dropdown>
- }
+ let actions = this.getActionList(card.header.actions, card.header.show)
+ extra = actions[0]
}
let _actions = null
if (card.bottom && card.bottom.actions) {
- _actions = card.bottom.actions.map(item => {
- let _action = null
- if (card.bottom.show === 'icon') {
- _action = <span className="action-cell" onClick={() => this.triggerAction(item)} key={item.uuid}><Icon type={item.icon || 'dash'} /></span>
- } else if (card.bottom.show === 'text') {
- _action = <span className="action-cell" onClick={() => this.triggerAction(item)} key={item.uuid}>{item.label}</span>
- } else {
- _action = <span className="action-cell" onClick={() => this.triggerAction(item)} key={item.uuid}><Icon type={item.icon || 'dash'} /> {item.label}</span>
- }
-
- return _action
- })
+ _actions = this.getActionList(card.bottom.actions, card.bottom.show)
}
this.setState({
@@ -72,15 +77,113 @@
extra: extra
})
}
-
- shouldComponentUpdate (nextProps, nextState) {
- return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
+
+ /**
+ * @description 鑾峰彇鎸夐挳鍏冪礌
+ */
+ getActionList = (actions, show) => {
+ const { BID, BData, Tab, setting, logcolumns, ContainerId, data, MenuID } = this.props
+
+ return actions.map(item => {
+ if (['exec', 'prompt', 'pop'].includes(item.OpenType)) {
+ return (
+ <NormalButton
+ key={item.uuid}
+ BID={BID}
+ Tab={Tab}
+ btn={item}
+ show={show}
+ BData={BData}
+ setting={setting}
+ columns={logcolumns}
+ selectedData={[data]}
+ ContainerId={ContainerId}
+ updateStatus={this.updateStatus}
+ />
+ )
+ } else if (item.OpenType === 'popview') {
+ return (
+ <PopupButton
+ key={item.uuid}
+ BID={BID}
+ Tab={Tab}
+ btn={item}
+ show={show}
+ BData={BData}
+ setting={setting}
+ selectedData={[data]}
+ updateStatus={this.updateStatus}
+ />
+ )
+ } else if (item.OpenType === 'tab' || item.OpenType === 'blank') {
+ return (
+ <TabButton
+ key={item.uuid}
+ btn={item}
+ show={show}
+ MenuID={MenuID}
+ setting={setting}
+ selectedData={[data]}
+ updateStatus={this.updateStatus}
+ />
+ )
+ } else if (item.OpenType === 'innerpage' || item.OpenType === 'outerpage') {
+ return (
+ <NewPageButton
+ key={item.uuid}
+ btn={item}
+ show={show}
+ setting={setting}
+ selectedData={[data]}
+ />
+ )
+ } else if (item.OpenType === 'funcbutton') {
+ if (item.funcType === 'changeuser') {
+ return (
+ <ChangeUserButton
+ key={item.uuid}
+ BID={BID}
+ btn={item}
+ show={show}
+ setting={setting}
+ selectedData={[data]}
+ updateStatus={this.updateStatus}
+ />
+ )
+ } else if (item.funcType === 'print') {
+ return (
+ <PrintButton
+ key={item.uuid}
+ BID={BID}
+ Tab={Tab}
+ btn={item}
+ show={show}
+ BData={BData}
+ setting={setting}
+ selectedData={[data]}
+ ContainerId={ContainerId}
+ updateStatus={this.updateStatus}
+ />
+ )
+ }
+ }
+
+ return null
+ })
}
- triggerAction = (btn) => {
- this.props.triggerBtn(btn, [this.props.data])
+ /**
+ * @description 鎿嶄綔瀹屾垚鍚庯紝鏁版嵁鍒锋柊
+ */
+ updateStatus = (type, positon) => {
+ if (type === 'refresh') {
+ this.props.refreshdata(positon)
+ }
}
+ /**
+ * @description 鍗＄墖涓厓绱犳爣璁拌缃�
+ */
getMark = (record, marks) => {
const { colMap } = this.props
let className = ''
@@ -150,6 +253,9 @@
}
}
+ /**
+ * @description 鑾峰彇鍗＄墖鍐呭
+ */
getContent = (col) => {
const { data } = this.props
@@ -232,6 +338,9 @@
}
}
+ /**
+ * @description 鑾峰彇鍗＄墖涓浘鐗囨垨鍥炬爣璁剧疆
+ */
getAvatar = () => {
const { card, data } = this.props
@@ -252,6 +361,9 @@
}
}
+ /**
+ * @description 鍗＄墖鐐瑰嚮鍒囨崲浜嬩欢
+ */
switchCard = () => {
const { card, data } = this.props
@@ -309,12 +421,18 @@
class CardChart extends Component {
static propTpyes = {
+ BID: PropTypes.any, // 涓昏〃ID
+ BData: PropTypes.any, // 涓昏〃鏁版嵁
+ Tab: PropTypes.any, // 濡傛灉褰撳墠鍏冪礌涓烘爣绛炬椂锛宼ab涓烘爣绛句俊鎭�
+ MenuID: PropTypes.string, // 鑿滃崟ID
+ config: PropTypes.object, // 椤甸潰閰嶇疆淇℃伅
+ logcolumns: PropTypes.array, // 鏄剧ず鍒�
+ ContainerId: PropTypes.any, // tab椤甸潰ID锛岀敤浜庡脊绐楁帶鍒�
plot: PropTypes.object,
- config: PropTypes.object,
tableId: PropTypes.string,
loading: PropTypes.bool,
data: PropTypes.array,
- buttonTrigger: PropTypes.func,
+ refreshdata: PropTypes.func,
handleTableId: PropTypes.func
}
@@ -324,6 +442,9 @@
selectKey: ''
}
+ /**
+ * @description 鍗＄墖鍒濆鍖栵紝璁剧疆鍗＄墖鐨勯厤缃俊鎭�
+ */
UNSAFE_componentWillMount () {
const { plot, config } = this.props
let card = {}
@@ -340,7 +461,7 @@
})
actions.forEach(item => {
- if (item.Ot && item.Ot !== 'notRequired' && !['excelIn', 'excelOut'].includes(item.OpenType)) {
+ if ((item.Ot && item.Ot !== 'notRequired' && !['excelIn', 'excelOut'].includes(item.OpenType)) || item.funcType === 'changeuser') {
actionMap.set(item.uuid, item)
}
})
@@ -362,6 +483,7 @@
if (!actionMap.get(item.value)) return
card.header.actions.push(actionMap.get(item.value))
})
+ card.header.actions.length = 1
}
if (card.header.actions.length === 0) {
card.header.actions = null
@@ -482,10 +604,10 @@
shouldComponentUpdate (nextProps, nextState) {
return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
}
- triggerBtn = (btn, data) => {
- this.props.buttonTrigger(btn, data)
- }
+ /**
+ * @description 鍗＄墖鍒囨崲
+ */
switchCard = (data) => {
const { config } = this.props
@@ -497,7 +619,7 @@
}
render() {
- const { plot, data, loading } = this.props
+ const { plot, data, loading, BID, BData, Tab, MenuID, config, logcolumns, ContainerId } = this.props
const { card, colMap, selectKey } = this.state
return (
@@ -513,12 +635,19 @@
data.map((item, i) => (
<CardCell
key={i}
+ BID={BID}
+ Tab={Tab}
card={card}
data={item}
+ BData={BData}
+ MenuID={MenuID}
colMap={colMap}
selectKey={selectKey}
- triggerBtn={this.triggerBtn}
+ logcolumns={logcolumns}
+ setting={config.setting}
+ ContainerId={ContainerId}
switchCard={this.switchCard}
+ refreshdata={this.props.refreshdata}
/>
))
}
@@ -526,12 +655,19 @@
<Tabs activeKey="">
{data.map((item, i) => (
<TabPane tab={<CardCell
+ BID={BID}
+ Tab={Tab}
card={card}
data={item}
+ BData={BData}
+ MenuID={MenuID}
colMap={colMap}
selectKey={selectKey}
- triggerBtn={this.triggerBtn}
+ logcolumns={logcolumns}
+ setting={config.setting}
+ ContainerId={ContainerId}
switchCard={this.switchCard}
+ refreshdata={this.props.refreshdata}
/>} key={i}></TabPane>
))}
--
Gitblit v1.8.0