ttk-app-core/compatible/component/components/tableOperate/index.js

enterprise develop framework

import React from 'react'
import Icon from '../icon/index'
import classNames from 'classnames'
import isequal from 'lodash.isequal'
import { Popover, Input,Message} from 'edf-component'
class TableOperate extends React.Component {
    constructor (props){
        super(props)
        
        this.state = {
            noteLength: 0,
            noteContent: '',
            flag: true,
            initnoteContent:'',
            disable: false,
            checkFlag: true
        }
    }

    assitShouldComponent = (target) => {
        let obj = {}
        for( const [key, value] of Object.entries(target) ) {
            if( typeof(value) != 'function' ) {
                obj[key] = value
            }
        }
        return obj
    }

    shouldComponentUpdate(nextProps, nextState) {
        // console.log((isequal(this.props, nextProps) && isequal(this.state, nextState)))
        return !(isequal(this.assitShouldComponent(this.props), this.assitShouldComponent(nextProps)) && isequal(this.state, nextState))
    }

    handleClick = (type) => {
        const { status, disable, submitNote,viewClick, editClick, deleteClick, noteClick, className, style } = this.props
        
        switch (type){
            case 1:
                !(this.props.disable&&disable.includes('view'))&&viewClick&&viewClick()
                break
            case 2:
                !(disable&&disable.includes('edit'))&&editClick&&editClick()
                break
            case 3:
                !(disable&&disable.includes('delete'))&&deleteClick&&deleteClick()
                break
            case 4:
                if(!(disable&&disable.includes('note'))&&noteClick){
                    let value = noteClick()
                    this.setState({
                        initnoteContent: value
                    })
                }
                // !(disable&&disable.includes('note'))&&noteClick&&noteClick()
                break
        }
    }
    checkMaxInput = (e) => {
        if(this.state.flag) {
            let noteLength = e.target.value.length
            if(noteLength<100) this.setState({checkFlag: true})
            if(noteLength > 100){
                noteLength = 100
                e.target.value = e.target.value.substring(0,100)
                if(this.state.checkFlag){
                    Message.warning('最多输入100个字',1)
                    this.setState({checkFlag: false})
                }
                this.setState({
                    noteContent: e.target.value,
                    
                })
            }else{
                this.setState({
                    noteContent: e.target.value,
                    
                })
            }
            
        }
    }

    changeMaxInput = (e) => {
        let noteLength = e.target.value.length
        if(noteLength > 100){
            e.target.value = e.target.value.substring(0,100)
            this.setState({
                noteContent: e.target.value, 
            })
        }
    }
    
    onCompositionStart = (e)=> {
        this.setState({
            flag: false
        })
    }
    onCompositionEnd=(e) => {
        this.setState({
            flag: true,
            noteContent: e.target.value
        })
    }
    render(){
        const { status, disable, submitNote,viewClick, editClick, deleteClick, noteClick, className, style } = this.props
        const showBtn = []
        
        if( status == 1 ) {
            showBtn.push(
                <a 
                    className={`${disable&&disable.includes('view') ? 'disabled' : '' }`} 
                    onClick={()=>this.handleClick(1)} 
                    href="javascript:;"
                >
                    <Icon  fontFamily='edficon' type="chakan" title="查看" />
                </a>
            )
        } else if(status == 2) {
            showBtn.push(
                <a
                    className={`${disable&&disable.includes('edit') ? 'disabled' : '' }`} 
                    onClick={()=>this.handleClick(2)} 
                    href="javascript:;"
                >
                    <Icon fontFamily='edficon' type="bianji" title="编辑" />
                </a>
            )
            showBtn.push(
                <a 
                    className={`${disable&&disable.includes('delete') ? 'disabled' : '' }`} 
                    onClick={()=>this.handleClick(3)} 
                    href="javascript:;"
                >
                    <Icon fontFamily='edficon' type="shanchu" title="删除" />
                </a>
            )
            showBtn.push(
                <Popover content = {
                    
                    <div >
                        <Input.TextArea rows={7} 
                        placeholder={'请输入批注内容'} 
                        onCompositionStart = {(e) => this.onCompositionStart(e)} 
                        onCompositionEnd = {(e) =>this.onCompositionEnd(e)} 
                        onInput = { (e) => this.checkMaxInput(e)} 
                        onBlur = {() => submitNote(this.state.noteContent)} 
                        onChange = {(e) => this.changeMaxInput(e)}
                        id = "noteInput" 
                        disabled = {this.state.disable}
                        defaultValue = {this.state.initnoteContent}
                       />
                        <span className="statistics"><span id="statisticsNum">{this.state.noteContent?this.state.noteContent.length:this.state.initnoteContent.length}</span>/100</span>
                    </div>
                }
                    placement="bottom"
                    overlayClassName = "noteContainer"
                    trigger="click">
                    <a 
                        className={`${disable&&disable.includes('note') ? 'disabled' : '' }`} 
                        onClick={()=>this.handleClick(4)} 
                        href="javascript:;"
                    >
                        <Icon fontFamily='edficon' type="notes" title="批注" />
                    </a>
                    </Popover>
                
            )
        }
    
        let classNameContainer = classNames({
            'mk-tableOperate': true,
            [className]: !!className
        })
        return (
            <div className={classNameContainer}>
                {showBtn}
            </div>
        )
    }
}
export default TableOperate