demo-sps-web/src/baseComponents/TreeBaseComponent/node.js

import React from 'react'
import styles from '../Component.css'
import { getDataFieldValue, permissionUtils } from "../../utils/common"
import { PictureThumb } from '@woowalker/feui'

export default class Node extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      showAdd: false
    }
  };
  componentDidMount () {
  };

  /*
  获取树节点标题
   */
  getTreeNodeTitle ({ treeCode, titleColumns, data }) {
    if (data.isAdd) {
      return '新增节点'
    }
    if (!titleColumns) {
      const treeConfig = this.getTreeConfig({ treeCode })
      if (treeConfig) {
        titleColumns = treeConfig.titleColumns
      }
    }
    if (titleColumns && titleColumns.length) {
      let title = ''
      titleColumns.forEach(t => {
        let tmpValue = getDataFieldValue(data, t.field.toLowerCase())
        tmpValue = tmpValue == null || tmpValue == undefined ? '' : tmpValue
        title += tmpValue + "/"
      })
      title = title.substring(0, title.length - 1)
      return title
    }
  }

  showaddfun = () => {
    // const nodeData = this.props.nodeData
    // if (!nodeData.parent_id) {
    //   return
    // }
    // if (this.showBtn(3)) {
    this.setState({
      showAdd: true
    })
    // }
  }

  hidenfun = () => {
    // const nodeData = this.props.nodeData
    // if (!nodeData.parent_id) {
    //   return
    // }
    if (this.props.showModal) {
      return
    }
    this.setState({
      showAdd: false
    })
  }

  getRenderBtn = nodeData => {
    const treeConfig = this.props.treeConfig
    const btns = treeConfig.btns
    let btnstmp = []
    for (let i = 0; i < btns.length; i++) {
      const t = btns[i]
      if (t.isRule && !permissionUtils(this.props.login).checkBtn(treeConfig.formId, (t.pId ? t.pId : t.id))) {
      } else {
        if (this.showBtn(t, nodeData)) {
          if (t.btnType === 3) {
            if (!t.isSameLevel) {
              //t.label = '新增下级'
            }
            else {
              //t.label='新增同级';
              t.btnType = -1
            }
          }
          btnstmp.push(t)
        }
      }
    }
    return btnstmp
  }

  showBtn = (t, nodeData) => {
    let isshow = false
    if (!t.btn_condition) {
      isshow = true
    } else {
      isshow = false
      const conditionsOr = t.btn_condition.split('|')
      const conditionsAnd = t.btn_condition.split('&')
      if (conditionsOr.length === 1 && conditionsAnd.length === 1) {
        // 只配置了一个条件
        const fields = t.btn_condition.split(',')
        const val = getDataFieldValue(nodeData, fields[0].toLowerCase())
        if (parseInt(fields[1], 10) === 1 && 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 (parseInt(fields[1], 10) === 1 && 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 (parseInt(fields[1], 10) === 1 && String(val) === String(fields[2].toLowerCase())) {
            showResults.push(true)
          }
        }
        isshow = showResults.length === conditionsAnd.length
      }
    }

    return isshow
  }

  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 }
  }

  getDefaultClickBtn = (record, toolBtns) => {
    const defaultBtns = toolBtns.filter(button => {
      const { btn = {} } = button
      return !!btn.IS_DEFAULT
    })
    const btnConfig = defaultBtns[0] || toolBtns[0]
    return btnConfig ? this.props.getRenderBtn({ record, btnConfig }) : null
  }

  render () {
    const { treeCode, treeConfig } = this.props
    const nodeData = this.props.nodeData || {}

    const thumbData = this.getThumbData()
    const toolBtns = this.getRenderBtn(nodeData)
    const extraElement = this.getDefaultClickBtn(nodeData.node, toolBtns)
    const treeNodeTitle = this.getTreeNodeTitle({ treeCode, titleColumns: treeConfig.titleColumns, data: nodeData.node })
    return (
      <div className={styles.node_div}>
        <PictureThumb
          thumbCodes={thumbData.thumbCodes}
          thumbConfigs={thumbData.thumbConfigs}
          nodeData={nodeData}
        >
          <div
            className={styles.fullname}
            onMouseEnter={this.showaddfun}
            onMouseLeave={this.hidenfun}>
            <div className="fullname__extra">{extraElement}</div>
            {
              this.state.showAdd ? (
                <div className={styles.htreenodeicon}>
                  {
                    toolBtns.map(item => {
                      return (
                        <div key={item.btnType} className={styles['htreenodeicon__iconwrap']}>
                          {this.props.getRenderBtn({ record: nodeData.node, btnConfig: item })}
                        </div>
                      )
                    })
                  }
                </div>
              ) : null
            }
          </div>
        </PictureThumb>
        <div className={styles.fullname__title} title={treeNodeTitle}>
          {treeNodeTitle}
        </div>
      </div>
    )
  }
}