import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Modal, notification, Typography, Popconfirm } from 'antd'
|
import { CheckCircleOutlined, StopOutlined, SwapOutlined, DeleteOutlined, BorderOutlined } from '@ant-design/icons'
|
|
import MinView from '@/assets/img/minview.png'
|
import './index.scss'
|
|
const { Paragraph } = Typography
|
|
class fullScripts extends Component {
|
static propTpyes = {
|
scripts: PropTypes.array,
|
getScriptsForm: PropTypes.func
|
}
|
|
state = {
|
visible: false,
|
scriptId: '',
|
columns: []
|
}
|
|
trigger = () => {
|
const { getScriptsForm } = this.props
|
|
let scriptsForm = getScriptsForm()
|
|
if (scriptsForm) {
|
let sql = scriptsForm.props.form.getFieldValue('sql') || ''
|
if (scriptsForm.state.editItem || (sql && !/^\s+$/.test(sql))) {
|
notification.warning({
|
top: 92,
|
message: '请保存自定义脚本！',
|
duration: 5
|
})
|
return
|
}
|
}
|
|
this.setState({visible: true, scriptId: ''})
|
}
|
|
render() {
|
const { scripts, children } = this.props
|
const { visible, scriptId } = this.state
|
|
if (scripts.length === 0) return null
|
|
return (
|
<>
|
<BorderOutlined className="full-scripts" onClick={this.trigger}/>
|
<Modal
|
wrapClassName="model-custom-scripts-modal"
|
title="自定义脚本"
|
visible={visible}
|
width={'95vw'}
|
maskClosable={false}
|
destroyOnClose
|
>
|
<img className="unfull-scripts" src={MinView} onClick={() => this.setState({visible: false, scriptId: ''})} alt=""/>
|
<div className="script-table-wrap">
|
{scripts.map(item => {
|
let title = item.sql.match(/^\s*\/\*.+\*\//)
|
title = title && title[0] ? title[0] : ''
|
let _text = title ? item.sql.replace(title, '') : item.sql
|
|
let position = null
|
if (item.position === 'init') {
|
position = <span style={{color: 'orange'}}>初始化</span>
|
} else if (item.position === 'front') {
|
position = <span style={{color: '#26C281'}}>sql前</span>
|
} else if (item.position === 'back') {
|
position = <span style={{color: '#1890ff'}}>sql后</span>
|
}
|
|
if (item.status === 'false') {
|
return (
|
<div className="script-item" key={item.uuid}>
|
<div style={{cursor: 'not-allowed'}}>
|
{title ? <div style={{color: '#a50', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>{title}</div> : null}
|
<Paragraph copyable={{ text: item.sql }} ellipsis={{ rows: 4 }}>{_text}</Paragraph>
|
<div>{position}
|
<span style={{color: '#ff4d4f', marginLeft: '20px'}}>
|
禁用
|
<StopOutlined style={{marginLeft: '5px'}} />
|
</span>
|
</div>
|
</div>
|
<div style={{height: '24px'}}></div>
|
</div>
|
)
|
} else {
|
return (
|
<div className={'script-item ' + (scriptId === item.uuid ? 'active' : '') } key={item.uuid}>
|
<div style={{cursor: 'pointer'}} onClick={() => {
|
let scriptsFullForm = this.props.getScriptsFullForm()
|
scriptsFullForm && scriptsFullForm.edit(item)
|
|
this.setState({scriptId: item.uuid})
|
}}>
|
{title ? <div style={{color: '#a50', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>{title}</div> : null}
|
<Paragraph copyable={{ text: item.sql }} ellipsis={{ rows: 4 }}>{_text}</Paragraph>
|
<div>{position}
|
<span style={{color: '#26C281', marginLeft: '20px'}}>
|
启用
|
<CheckCircleOutlined style={{marginLeft: '5px'}}/>
|
</span>
|
</div>
|
</div>
|
<div style={{textAlign: 'right'}}>
|
<span className="operation-btn" onClick={() => this.props.handleStatus(item, 'scripts')} style={{color: '#8E44AD'}}><SwapOutlined /></span>
|
<Popconfirm
|
overlayClassName="popover-confirm"
|
title="确定删除吗?"
|
onConfirm={() => this.props.handleDelete(item, 'scripts')
|
}>
|
<span className="operation-btn" style={{color: '#ff4d4f'}}><DeleteOutlined /></span>
|
</Popconfirm>
|
</div>
|
</div>
|
)
|
}
|
})}
|
</div>
|
{visible ? children : null}
|
</Modal>
|
</>
|
)
|
}
|
}
|
|
export default fullScripts
|
