577 lines
21 KiB
JavaScript
577 lines
21 KiB
JavaScript
// 核心库
|
||
import React, { Component } from 'react'
|
||
import { connect } from 'dva'
|
||
// 组件库
|
||
import { Tree, Icon, Tabs, Input, message } from 'antd'
|
||
import { Scrollbars } from 'react-custom-scrollbars'
|
||
import { PictureThumb } from '@woowalker/feui'
|
||
import ListPage from '../../components/Table/ListPage'
|
||
import Edit from '../../components/Edit/Edit'
|
||
import CombinationPage from '../../components/Combination/CombinationPage'
|
||
import FormPage from '../../components/FormPage'
|
||
// 工具库
|
||
import { cloneDeep, isEqual } from 'lodash'
|
||
import { getDataFieldValue, permissionUtils, getCustomParams, flatTreeData } from '../../utils/common'
|
||
// 样式
|
||
import classNames from 'classnames'
|
||
import styles from '../Component.css'
|
||
import customTabStyles from '../../components/Combination/combinationPage.css'
|
||
|
||
class VPage extends Component {
|
||
constructor (props) {
|
||
super(props)
|
||
this.state = {
|
||
activeKey: '',
|
||
// 是否多选
|
||
multiCheck: props.treeConfig.multiCheck,
|
||
multiCheckCount: props.treeConfig.multiCheckCount,
|
||
// 多选选中的节点
|
||
selectedKeys: this.getDefaultSelectedKeys(props),
|
||
// 拍平后的树数据
|
||
flatedTreeData: [],
|
||
searchTreeData: [],
|
||
// 是否收起左侧树
|
||
collapse: false
|
||
}
|
||
}
|
||
|
||
componentDidMount () {
|
||
const { treeData } = this.props
|
||
this.checkFlatTreeData(treeData)
|
||
}
|
||
|
||
UNSAFE_componentWillReceiveProps (nextProps) {
|
||
if (!isEqual(nextProps.treeData, this.props.treeData)) {
|
||
this.checkFlatTreeData(nextProps.treeData)
|
||
}
|
||
}
|
||
|
||
getThumbData = () => {
|
||
const { treePicFilter } = this.props
|
||
|
||
const thumbCodes = []
|
||
const thumbConfigs = []
|
||
if (Array.isArray(treePicFilter) && treePicFilter.length) {
|
||
treePicFilter.forEach(({ Nav_PicFilterDetail = [], Nav_Picture }) => {
|
||
thumbCodes.push(Nav_Picture.CODE)
|
||
thumbConfigs.push({
|
||
target: Nav_Picture.CODE,
|
||
rules: Nav_PicFilterDetail.map(npd => ({
|
||
field: npd.FIELD_TYPE === 1 ? `Node.${npd.NAME}` : npd.NAME,
|
||
operate: Number(npd.OPERATE),
|
||
value: typeof npd.VALUE === 'string' ? npd.VALUE.toLowerCase() : npd.VALUE
|
||
}))
|
||
})
|
||
})
|
||
}
|
||
return { thumbCodes, thumbConfigs }
|
||
}
|
||
|
||
getDefaultSelectedKeys = (props) => {
|
||
const { multiCheck, multiCheckCount } = props.treeConfig
|
||
const defaultSelectedKeys = []
|
||
if (props.treeData && Array.isArray(props.treeData)) {
|
||
props.treeData.forEach(({ node = { id: '' } }) => {
|
||
node.id && defaultSelectedKeys.push(node.id)
|
||
})
|
||
}
|
||
return multiCheck ? (multiCheckCount ? defaultSelectedKeys.slice(0, multiCheckCount) : defaultSelectedKeys) : [defaultSelectedKeys[0]]
|
||
}
|
||
|
||
getDefaultExpandedKeys = () => {
|
||
const { treeData, treeConfig } = this.props
|
||
const { expandLevel } = treeConfig
|
||
if (expandLevel) {
|
||
const keys = []
|
||
function checkTreeDataLevel (data) {
|
||
data.forEach(item => {
|
||
if (item.level < expandLevel) {
|
||
keys.push(item.node.id)
|
||
if (Array.isArray(item.children) && item.children.length) {
|
||
checkTreeDataLevel(item.children)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
checkTreeDataLevel(treeData)
|
||
return keys
|
||
}
|
||
return []
|
||
}
|
||
|
||
checkShowBtn = (btn, nodeData) => {
|
||
let isShow = !btn.btn_condition
|
||
if (btn.btn_condition) {
|
||
// 菜单参数
|
||
const { currActivatedMenu } = this.props.app || {}
|
||
const menuFormParameter = currActivatedMenu?.MENU_FORM_PARAMS
|
||
// 按钮配置条件
|
||
const conditionsOr = btn.btn_condition.split('|')
|
||
const conditionsAnd = btn.btn_condition.split('&')
|
||
if (conditionsOr.length === 1 && conditionsAnd.length === 1) {
|
||
// 只配置了一个条件
|
||
const fields = btn.btn_condition.split(',')
|
||
const val = getDataFieldValue(nodeData, fields[0].toLowerCase())
|
||
// 条件直接命中菜单参数，则直接显示
|
||
if (btn.btn_condition === menuFormParameter) {
|
||
isShow = true
|
||
}
|
||
// 1 等于
|
||
else if (parseInt(fields[1], 10) === 1) {
|
||
if (String(val) === String(fields[2].toLowerCase())) {
|
||
isShow = true
|
||
}
|
||
}
|
||
// 2 不等于
|
||
else if (parseInt(fields[1], 10) === 2) {
|
||
if (String(val) !== String(fields[2].toLowerCase())) {
|
||
isShow = true
|
||
}
|
||
}
|
||
} else if (conditionsOr.length > 1) {
|
||
// 或条件
|
||
for (let conditionOr of conditionsOr) {
|
||
const fields = conditionOr.split(',')
|
||
const val = getDataFieldValue(nodeData, fields[0].toLowerCase())
|
||
// 条件直接命中菜单参数，则直接显示
|
||
if (conditionOr === menuFormParameter) {
|
||
isShow = true
|
||
break
|
||
}
|
||
// 1 等于
|
||
else if (parseInt(fields[1], 10) === 1) {
|
||
if (String(val) === String(fields[2].toLowerCase())) {
|
||
isShow = true
|
||
break
|
||
}
|
||
}
|
||
// 2 不等于
|
||
else if (parseInt(fields[1], 10) === 2) {
|
||
if (String(val) !== String(fields[2].toLowerCase())) {
|
||
isShow = true
|
||
break
|
||
}
|
||
}
|
||
}
|
||
} else if (conditionsAnd.length > 1) {
|
||
// 与条件
|
||
const showResults = []
|
||
for (let conditionAnd of conditionsAnd) {
|
||
const fields = conditionAnd.split(',')
|
||
const val = getDataFieldValue(nodeData, fields[0].toLowerCase())
|
||
// 条件直接命中菜单参数，则直接显示
|
||
if (conditionAnd === menuFormParameter) {
|
||
showResults.push(true)
|
||
}
|
||
// 1 等于
|
||
else if (parseInt(fields[1], 10) === 1) {
|
||
if (String(val) === String(fields[2].toLowerCase())) {
|
||
showResults.push(true)
|
||
}
|
||
}
|
||
// 2 不等于
|
||
else if (parseInt(fields[1], 10) === 2) {
|
||
if (String(val) !== String(fields[2].toLowerCase())) {
|
||
showResults.push(true)
|
||
}
|
||
}
|
||
}
|
||
isShow = showResults.length === conditionsAnd.length
|
||
}
|
||
}
|
||
return isShow
|
||
}
|
||
|
||
checkMultiShowBtn = (btn) => {
|
||
const { currActivatedMenu } = this.props.app || {}
|
||
const menuFormParameter = currActivatedMenu?.MENU_FORM_PARAMS
|
||
|
||
let isShow = !btn.btn_condition || !menuFormParameter
|
||
if (btn.btn_condition && menuFormParameter) {
|
||
const conditionsOr = btn.btn_condition.split('|')
|
||
const conditionsAnd = btn.btn_condition.split('&')
|
||
if (conditionsOr.length === 1 && conditionsAnd.length === 1) {
|
||
// 只配置了一个条件
|
||
if (btn.btn_condition === menuFormParameter) {
|
||
isShow = true
|
||
}
|
||
} else if (conditionsOr.length > 1) {
|
||
// 或条件
|
||
for (let conditionOr of conditionsOr) {
|
||
if (conditionOr === menuFormParameter) {
|
||
isShow = true
|
||
break
|
||
}
|
||
}
|
||
} else if (conditionsAnd.length > 1) {
|
||
// 与条件
|
||
const showResults = []
|
||
for (let conditionAnd of conditionsAnd) {
|
||
if (conditionAnd === menuFormParameter) {
|
||
showResults.push(true)
|
||
}
|
||
}
|
||
isShow = showResults.length === conditionsAnd.length
|
||
}
|
||
}
|
||
|
||
return isShow
|
||
}
|
||
|
||
checkRenderBtn = (nodeData, treeConfig) => {
|
||
const { btns = [] } = treeConfig
|
||
const btnsTmp = []
|
||
btns.forEach(btn => {
|
||
if (!btn.isRule || permissionUtils(this.props.login).checkBtn(treeConfig.formId, btn.pId || btn.id)) {
|
||
// 如果配置了树多选，那么直接显示所配置的所有页面
|
||
if (treeConfig.multiCheck ? this.checkMultiShowBtn(btn) : this.checkShowBtn(btn, nodeData)) {
|
||
btn.btnType === 3 && btn.isSameLevel && (btn.btnType = -1) // 新增同级
|
||
btnsTmp.push(btn)
|
||
}
|
||
}
|
||
})
|
||
return btnsTmp
|
||
}
|
||
|
||
checkFlatTreeData = (treeData) => {
|
||
// 拍平树数据
|
||
const flatedTreeData = []
|
||
flatTreeData(treeData, flatedTreeData)
|
||
this.setState({
|
||
flatedTreeData: cloneDeep(flatedTreeData)
|
||
}, () => {
|
||
const { flatedTreeData, selectedKeys } = this.state
|
||
const allKeys = flatedTreeData.map(({ node }) => node.id)
|
||
const validKeys = selectedKeys.filter(item => allKeys.indexOf(item) !== -1)
|
||
this.handleTreeNodesSelect(validKeys.length ? validKeys : this.getDefaultSelectedKeys(this.props))
|
||
})
|
||
}
|
||
|
||
checkFlatTreeNodes = (treeData, treeConfig, selectedKeys) => {
|
||
const selectedNodes = this.state.flatedTreeData.filter(item => selectedKeys.indexOf(item.node.id) !== -1)
|
||
treeData.forEach(item => {
|
||
const showBtns = this.checkRenderBtn(item, treeConfig)
|
||
|
||
item.btns = showBtns.map(btnConfig => {
|
||
// false 以按钮形式展示 true 以页面形式展示
|
||
let typePage = btnConfig.btnType === 5 || btnConfig.btnType === 12 || btnConfig.btnType === 14 || btnConfig.btnType === 0
|
||
// component 的赋值逻辑请参考 TreeBaseComponent -> Hindex -> getRenderBtn （取的是 modal 里面的表单）
|
||
const { getRenderBtn, onSave } = this.props
|
||
let component = getRenderBtn({ record: item.node, btnConfig })
|
||
// 表单编辑
|
||
if (btnConfig.btnType === 5) {
|
||
const params = {
|
||
id: item.node.id,
|
||
parentId: item.node.id,
|
||
formCode: treeConfig.formCode,
|
||
data: {
|
||
record: item.node
|
||
},
|
||
onSave: (params) => {
|
||
onSave instanceof Function && onSave(params)
|
||
}
|
||
}
|
||
component = <Edit {...params} />
|
||
}
|
||
// 列表查看
|
||
else if (btnConfig.btnType === 12) {
|
||
const params = {
|
||
formCode: btnConfig.formCode,
|
||
formParam: this.props.formParam,
|
||
data: {
|
||
// 当前选中的节点
|
||
selectedNodes,
|
||
// 传递给页面选中的节点参数
|
||
TreeSelected: selectedKeys,
|
||
TreeSelectId: btnConfig.customParams,
|
||
// 页面操作取消树节点选中
|
||
setTreeNodeUnCheck: this.handleTreeNodesUnCheck,
|
||
rules: [
|
||
{
|
||
field: 'TreeSelected',
|
||
operator: 1,
|
||
value: selectedKeys,
|
||
isCustom: true
|
||
}
|
||
]
|
||
},
|
||
isQuery: true
|
||
}
|
||
if (btnConfig.customParams) {
|
||
params.data.rules.push({
|
||
field: btnConfig.customParams,
|
||
operator: 1,
|
||
value: item.node.id
|
||
})
|
||
}
|
||
component = <ListPage {...params} />
|
||
}
|
||
// 组合表单
|
||
else if (btnConfig.btnType === 14) {
|
||
const params = {
|
||
formCode: btnConfig.formCode,
|
||
formParam: this.props.formParam,
|
||
data: {
|
||
// 当前选中的节点
|
||
selectedNodes,
|
||
// 传递给页面选中的节点参数
|
||
TreeSelected: selectedKeys,
|
||
// 页面操作取消树节点选中
|
||
setTreeNodeUnCheck: this.handleTreeNodesUnCheck,
|
||
rules: [
|
||
{
|
||
field: btnConfig.customParams,
|
||
operator: 1,
|
||
value: item.node.id,
|
||
isCustom: true
|
||
}
|
||
]
|
||
}
|
||
}
|
||
component = <CombinationPage {...params} />
|
||
}
|
||
// 自定义弹窗
|
||
else if (btnConfig.btnType === 0) {
|
||
const record = item.node
|
||
const custParams = getCustomParams(btnConfig.customParams)
|
||
const params = {
|
||
id: record.id,
|
||
parentId: record.id,
|
||
formCode: btnConfig.formCode,
|
||
formParam: this.props.formParam,
|
||
data: {
|
||
...record,
|
||
...custParams,
|
||
customParams: btnConfig.customParams,
|
||
// 当前选中的节点
|
||
selectedNodes,
|
||
// 传递给页面选中的节点参数
|
||
TreeSelected: selectedKeys,
|
||
// 页面操作取消树节点选中
|
||
setTreeNodeUnCheck: this.handleTreeNodesUnCheck
|
||
}
|
||
}
|
||
component = <FormPage {...params} />
|
||
}
|
||
return {
|
||
typePage,
|
||
component,
|
||
btnConfig
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
renderTreeNodes = (treeData, thumbData) => {
|
||
return treeData.map(item => {
|
||
const { children, node } = item
|
||
const { name, is_exist_alarm, child_exist_alarm, appliance_id, nav_appliance } = node
|
||
|
||
const alert = `${name}${is_exist_alarm ? '(节点异常)' : child_exist_alarm ? '(存在子节点异常)' : (appliance_id != null && nav_appliance?.is_report == false) ? '(器具未采集数据)' : ''}`
|
||
const color = is_exist_alarm ? 'red' : child_exist_alarm ? 'orange' : (appliance_id != null && nav_appliance?.is_report == false) ? 'rgba(170, 170, 170)' : 'inhert'
|
||
const title = (
|
||
<span title={alert}>
|
||
<span style={{ color }}>{name}</span>
|
||
{
|
||
is_exist_alarm || child_exist_alarm || (appliance_id != null && nav_appliance?.is_report == false)
|
||
? (
|
||
<Icon
|
||
type={is_exist_alarm || child_exist_alarm ? 'alert' : 'disconnect'}
|
||
style={{ color: is_exist_alarm ? 'red' : child_exist_alarm ? 'orange' : 'rgba(170, 170, 170)', marginLeft: 2 }}
|
||
/>
|
||
)
|
||
: ''
|
||
}
|
||
</span>
|
||
)
|
||
const style = { width: 24, height: 24, position: 'relative', top: '-1px' }
|
||
if (children) {
|
||
return (
|
||
<Tree.TreeNode
|
||
title={title}
|
||
key={node.id}
|
||
icon={
|
||
<PictureThumb
|
||
thumbCodes={thumbData.thumbCodes}
|
||
thumbConfigs={thumbData.thumbConfigs}
|
||
nodeData={item}
|
||
defaultThumb={require('../../assets/file.png')}
|
||
style={style}
|
||
/>
|
||
}
|
||
>
|
||
{this.renderTreeNodes(children, thumbData)}
|
||
</Tree.TreeNode>
|
||
)
|
||
}
|
||
return (
|
||
<Tree.TreeNode
|
||
title={title}
|
||
key={node.id}
|
||
icon={
|
||
<PictureThumb
|
||
thumbCodes={thumbData.thumbCodes}
|
||
thumbConfigs={thumbData.thumbConfigs}
|
||
defaultThumb={require('../../assets/file.png')}
|
||
nodeData={item}
|
||
style={style}
|
||
/>
|
||
}
|
||
/>
|
||
)
|
||
})
|
||
}
|
||
|
||
handleTreeNodesSelect = (selectedKeys) => {
|
||
const { treeConfig } = this.props
|
||
const { flatedTreeData, activeKey } = this.state
|
||
// 获取选中节点所配置的按钮页面，并直接附在 flatedTreeData 数据之上
|
||
this.checkFlatTreeNodes(flatedTreeData, treeConfig, selectedKeys)
|
||
// 查找被激活 tab 的 key 值
|
||
const findNode = flatedTreeData.find(item => item.node.id === selectedKeys[0])
|
||
const pageBtns = findNode && findNode.btns ? findNode.btns.filter(btn => btn.typePage) : []
|
||
const currActived = pageBtns.find(item => item.btnConfig.id === activeKey)
|
||
this.setState({
|
||
selectedKeys,
|
||
activeKey: !currActived ? (pageBtns.length > 1 ? pageBtns[0].btnConfig.id : '') : activeKey
|
||
})
|
||
}
|
||
|
||
handleTreeNodesCheck = ({ checked: selectedKeys }) => {
|
||
const { multiCheckCount } = this.state
|
||
if (multiCheckCount && selectedKeys.length > multiCheckCount) {
|
||
message.error(`最多可选${multiCheckCount}个节点`)
|
||
return
|
||
}
|
||
this.handleTreeNodesSelect(selectedKeys)
|
||
}
|
||
|
||
handleTreeNodesUnCheck = (applianceId) => {
|
||
const { flatedTreeData, selectedKeys } = this.state
|
||
const find = flatedTreeData.find(item => item.node?.appliance_id === applianceId)
|
||
if (find) {
|
||
const copyKeys = cloneDeep(selectedKeys)
|
||
const findIndex = copyKeys.findIndex(item => item === find.node?.id)
|
||
findIndex !== -1 && copyKeys.splice(findIndex, 1)
|
||
this.handleTreeNodesCheck({ checked: copyKeys })
|
||
}
|
||
}
|
||
|
||
renderTabBar = (pageBtns) => {
|
||
const { activeKey } = this.state
|
||
return (
|
||
<div className={customTabStyles.tabBar__wrap}>
|
||
{
|
||
pageBtns.map(item => {
|
||
return (
|
||
<div
|
||
key={`${item.btnConfig.id}--customTabBar`}
|
||
onClick={() => this.setState({ activeKey: item.btnConfig.id })}
|
||
className={classNames(customTabStyles.tabBar__tab, { [customTabStyles.activated]: item.btnConfig.id === activeKey })}>
|
||
{item.btnConfig.label}
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
handleSearch = (evt) => {
|
||
const { value } = evt.target
|
||
const searchTreeData = this.state.flatedTreeData.filter(({ node = {} }) => (node.name || '').indexOf(value) !== -1)
|
||
this.setState({ searchTreeData: value ? searchTreeData : [] })
|
||
}
|
||
|
||
render () {
|
||
const { treeData, treeConfig } = this.props
|
||
const thumbData = this.getThumbData()
|
||
const defaultExpandedKeys = this.getDefaultExpandedKeys()
|
||
const expandProps = defaultExpandedKeys.length ? { defaultExpandedKeys } : { defaultExpandAll: true }
|
||
|
||
const { activeKey, multiCheck, selectedKeys, flatedTreeData, searchTreeData, collapse } = this.state
|
||
// 多选时，所有节点都会展示全部配置的页面，单选时，就一个 selectedKeys[0]，所以直接取 selectedKeys[0] 来获取配置的页面
|
||
const targetNodes = flatedTreeData.find(item => item.node.id === selectedKeys[0]) || { node: {} }
|
||
const toolBtns = targetNodes.btns ? targetNodes.btns.filter(btn => !btn.typePage) : []
|
||
const pageBtns = targetNodes.btns ? targetNodes.btns.filter(btn => btn.typePage) : []
|
||
const selectedTitle = multiCheck && selectedKeys.length > 1 ? `${selectedKeys.length}个` : targetNodes.node.name
|
||
const selectedEvtKey = multiCheck && selectedKeys.length > 1 ? selectedKeys.join(';') : targetNodes.node.id
|
||
return (
|
||
<div className={styles.treeV}>
|
||
<div className={classNames(styles.treeVLeft, { [styles.treeVCollapse]: collapse })}>
|
||
<Icon
|
||
type={collapse ? 'menu-unfold' : 'menu-fold'}
|
||
title={collapse ? '展开' : '收起'}
|
||
onClick={() => this.setState({ collapse: !collapse })}
|
||
className={styles.treeVFold}
|
||
/>
|
||
<div onClick={() => collapse && this.setState({ collapse: false })} className={styles.treeVWrap}>
|
||
<span className={styles.treeVTitle}>{treeConfig.labelName}</span>
|
||
<div className={styles.treeVDivider}></div>
|
||
<div className={styles.treeVSelect}>
|
||
<div title={selectedTitle || '无'} className={styles.treeVSelectTitle}>当前选中：{selectedTitle || '无'}</div>
|
||
<div className={styles.treeVSelectBtns}>
|
||
{
|
||
!multiCheck || selectedKeys.length === 1
|
||
? toolBtns.map(tb => tb.component)
|
||
: null
|
||
}
|
||
</div>
|
||
</div>
|
||
<Input.Search
|
||
allowClear
|
||
onChange={this.handleSearch}
|
||
placeholder='关键字搜索'
|
||
className={styles.treeVSearch}
|
||
/>
|
||
<div className={styles.treeVTree}>
|
||
<Scrollbars autoHide autoHideTimeout={1000} autoHideDuration={200}>
|
||
<Tree
|
||
showIcon
|
||
checkStrictly
|
||
checkable={multiCheck}
|
||
selectable={!multiCheck}
|
||
checkedKeys={selectedKeys}
|
||
selectedKeys={selectedKeys}
|
||
{...expandProps}
|
||
switcherIcon={<Icon type='caret-down' style={{ fontSize: 18 }} />}
|
||
onSelect={this.handleTreeNodesSelect}
|
||
onCheck={this.handleTreeNodesCheck}
|
||
>
|
||
{this.renderTreeNodes(searchTreeData.length ? searchTreeData : treeData, thumbData)}
|
||
</Tree>
|
||
</Scrollbars>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div key={selectedEvtKey} className={classNames(styles.treeVRight, { [styles.treeVCollapse]: collapse })}>
|
||
{
|
||
pageBtns.length
|
||
? (
|
||
pageBtns.length > 1
|
||
? (
|
||
<Tabs
|
||
activeKey={activeKey}
|
||
renderTabBar={() => this.renderTabBar(pageBtns)}
|
||
animated={false}
|
||
className='combination-page__mainTab'
|
||
>
|
||
{
|
||
pageBtns.map(pb => (
|
||
<Tabs.TabPane key={pb.btnConfig.id} tab={pb.btnConfig.label}>{pb.component}</Tabs.TabPane>
|
||
))
|
||
}
|
||
</Tabs>
|
||
)
|
||
: pageBtns[0].component
|
||
)
|
||
: null
|
||
}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default connect(({ login, app }) => ({ login, app }))(VPage)
|