@ttk/component
Version:
ttk组件库
314 lines (289 loc) • 13 kB
JavaScript
import React, { Component } from 'react'
import classNames from 'classnames'
import isequal from 'lodash.isequal'
import { Icon, Popover, Input, Message } from '@ttk/component'
import './style.less'
class TableOperate extends Component {
constructor(props) {
super(props)
this.state = {
noteLength: 0,
noteContent: '',
flag: true,
initnoteContent: '',
disable: false,
checkFlag: true,
visible: false
}
}
assitShouldComponent = (target) => {
let obj = {}
for (const [key, value] of Object.entries(target)) {
if (typeof (value) != 'function') {
obj[key] = value
}
}
return obj
}
shouldComponentUpdate(nextProps, nextState) {
return !(isequal(this.assitShouldComponent(this.props), this.assitShouldComponent(nextProps)) && isequal(this.state, nextState))
}
handleClick = (type) => {
const { status, disable, submitNote, viewClick, editClick, deleteClick, noteClick, copyClick, 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,
visible: true
})
}
break
case 5:
!(disable && disable.includes('copy')) && copyClick && copyClick()
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,
visible: true
})
}
}
}
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,
visible: true
})
}
}
onCompositionStart = (e) => {
this.setState({
flag: false,
visible: true
})
}
onCompositionEnd = (e) => {
this.setState({
flag: true,
visible: true,
noteContent: e.target.value
})
}
handleVisibleChange = visible => {
this.setState({ visible });
};
render() {
const { status, disable, submitNote, viewClick, editClick, deleteClick, noteClick, className, style ,settleAccounts, row,menuAuth} = 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>
)
if(!menuAuth){
showBtn.push(
<a
className={`${disable && disable.includes('copy') ? 'disabled' : ''}`}
onClick={() => this.handleClick(5)}
href="javascript:;"
>
<Icon fontFamily='edficon' type="fuzhi" title="复制" />
</a>
)
}else{
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={() => {this.setState({visible: false});submitNote(this.state.noteContent)}}
onChange={(e) => this.changeMaxInput(e)}
id="noteInput"
disabled={true}
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"
visible={this.state.visible}
onVisibleChange={this.handleVisibleChange}
overlayClassName="noteContainer"
trigger="click">
<a
// className={`${disable && disable.includes('note') ? 'disabled' : ''}`}
className = {!row.note?'disabledNote':''}
onClick={() => this.handleClick(4)}
href="javascript:;"
>
<Icon fontFamily='edficon' type="pizhu" title="批注" />
</a>
</Popover>
)
}
} else if (status == 2) {
if(!menuAuth){
showBtn.push(
<a
className={`${disable && disable.includes('edit') ? 'disabled' : ''}`}
onClick={() => this.handleClick(2)}
href="javascript:;"
>
<Icon fontFamily='edficon' type="bianji" title="编辑" />
</a>
)
if(settleAccounts){
showBtn.push(
<a
className={ 'disabled'}
href="javascript:;"
>
<Icon fontFamily='edficon' type="shanchu" title="已月结不能删除" />
</a>
)
}else{
showBtn.push(
<a
className={`${disable && disable.includes('delete') ? 'disabled' : ''}`}
onClick={() => this.handleClick(3)}
href="javascript:;"
>
<Icon fontFamily='edficon' type="shanchu" title="删除" />
</a>
)
}
showBtn.push(
<a
className={`${disable && disable.includes('copy') ? 'disabled' : ''}`}
onClick={() => this.handleClick(5)}
href="javascript:;"
>
<Icon fontFamily='edficon' type="fuzhi" 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={() => {this.setState({visible: false});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"
visible={this.state.visible}
onVisibleChange={this.handleVisibleChange}
overlayClassName="noteContainer"
trigger="click">
<a
// className={`${disable && disable.includes('note') ? 'disabled' : ''}`}
className = {!row.note?'disabledNote':''}
onClick={() => this.handleClick(4)}
href="javascript:;"
>
<Icon fontFamily='edficon' type="pizhu" title="批注" />
</a>
</Popover>
)
}else{
showBtn.push(
<a
className={`${disable && disable.includes('view') ? 'disabled' : ''}`}
onClick={() => this.handleClick(1)}
href="javascript:;"
>
<Icon fontFamily='edficon' type="chakan" 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={() => {this.setState({visible: false});submitNote(this.state.noteContent)}}
onChange={(e) => this.changeMaxInput(e)}
id="noteInput"
disabled={true}
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"
visible={this.state.visible}
onVisibleChange={this.handleVisibleChange}
overlayClassName="noteContainer"
trigger="click">
<a
// className={`${disable && disable.includes('note') ? 'disabled' : ''}`}
className = {!row.note?'disabledNote':''}
onClick={() => this.handleClick(4)}
href="javascript:;"
>
<Icon fontFamily='edficon' type="pizhu" title="批注" />
</a>
</Popover>
)
}
}
let classNameContainer = classNames({
'mk-tableOperate': true,
[className]: !!className
})
return (
<div className={classNameContainer}>
{showBtn}
</div>
)
}
}
export default TableOperate