import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Modal, Button, Popconfirm, message } from 'antd'
|
import { StopTwoTone, ApiOutlined, CopyOutlined, EditOutlined, CheckCircleTwoTone, DeleteOutlined } from '@ant-design/icons'
|
|
import Utils from '@/utils/utils.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
import './index.scss'
|
|
const SettingForm = asyncComponent(() => import('./settingform'))
|
const EditTable = asyncComponent(() => import('@/templates/zshare/editTable'))
|
|
class InterfaceController extends Component {
|
static propTpyes = {
|
config: PropTypes.object, // 页面配置
|
updateConfig: PropTypes.func // 更新
|
}
|
|
state = {
|
visible: false,
|
setvisible: false,
|
interfaces: [],
|
card: null,
|
columns: [
|
{
|
title: '接口名称',
|
dataIndex: 'name',
|
width: '50%'
|
},
|
{
|
title: '状态',
|
dataIndex: 'status',
|
width: '20%',
|
render: (text, record) => record.status !== 'true' ?
|
(
|
<div>
|
禁用
|
<StopTwoTone style={{marginLeft: '5px'}} twoToneColor="#ff4d4f" />
|
</div>
|
) :
|
(
|
<div>
|
启用
|
<CheckCircleTwoTone style={{marginLeft: '5px'}} twoToneColor="#52c41a" />
|
</div>
|
)
|
},
|
{
|
title: '操作',
|
align: 'center',
|
width: '30%',
|
dataIndex: 'operation',
|
render: (text, record) =>
|
(<div style={{textAlign: 'center'}}>
|
<span onClick={() => this.handleEdit(record)} style={{color: '#1890ff', cursor: 'pointer', fontSize: '16px', marginRight: '15px'}}><EditOutlined /></span>
|
<span onClick={() => {this.copy(record)}} style={{color: '#26C281', cursor: 'pointer', fontSize: '16px', marginRight: '15px'}}><CopyOutlined /></span>
|
<Popconfirm
|
overlayClassName="popover-confirm"
|
title="确定删除？"
|
onConfirm={() => this.deleteScript(record)
|
}>
|
<span style={{color: '#ff4d4f', cursor: 'pointer', fontSize: '16px'}}><DeleteOutlined /></span>
|
</Popconfirm>
|
</div>)
|
}
|
]
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
copy = (item) => {
|
let msg = { key: 'interface', type: 'line', data: item }
|
|
try {
|
msg = window.btoa(window.encodeURIComponent(JSON.stringify(msg)))
|
} catch (e) {
|
console.warn('Stringify Failure')
|
msg = ''
|
}
|
|
if (msg) {
|
let oInput = document.createElement('input')
|
oInput.value = msg
|
document.body.appendChild(oInput)
|
oInput.select()
|
document.execCommand('Copy')
|
document.body.removeChild(oInput)
|
message.success('复制成功。')
|
}
|
}
|
|
trigger = () => {
|
const { config } = this.props
|
let interfaces = config.interfaces ? fromJS(config.interfaces).toJS() : []
|
|
this.setState({
|
visible: true,
|
interfaces
|
})
|
}
|
|
handleEdit = (record) => {
|
this.setState({card: record, setvisible: true})
|
}
|
|
deleteScript = (record) => {
|
const { config } = this.props
|
let interfaces = this.state.interfaces.filter(item => item.uuid !== record.uuid)
|
|
this.setState({ interfaces })
|
this.props.updateConfig({...config, interfaces})
|
}
|
|
changeScripts = (interfaces) => {
|
const { config } = this.props
|
|
this.setState({ interfaces })
|
this.props.updateConfig({...config, interfaces})
|
}
|
|
settingSave = () => {
|
const { config } = this.props
|
const { card } = this.state
|
let interfaces = fromJS(this.state.interfaces).toJS()
|
|
this.settingRef.handleConfirm().then(res => {
|
interfaces = interfaces.map(item => {
|
if (item.uuid === card.uuid) {
|
res.uuid = item.uuid
|
|
if (res.procMode !== 'inner' && res.preScripts && res.preScripts.filter(item => item.status !== 'false').length === 0) {
|
message.warning('未设置前置脚本，不可启用！')
|
res.status = 'false'
|
} else if (res.callbackType === 'script' && res.cbScripts && res.cbScripts.filter(item => item.status !== 'false').length === 0) {
|
message.warning('未设置回调脚本，不可启用！')
|
res.status = 'false'
|
}
|
|
return res
|
}
|
return item
|
})
|
|
this.setState({
|
card: null,
|
setvisible: false,
|
interfaces
|
})
|
|
this.props.updateConfig({...config, interfaces})
|
})
|
}
|
|
addInterface = () => {
|
const { config } = this.props
|
let interfaces = fromJS(this.state.interfaces).toJS()
|
|
interfaces.push({
|
uuid: Utils.getuuid(),
|
name: 'interface ' + (interfaces.length + 1),
|
procMode: 'script',
|
callbackType: 'script',
|
preScripts: [],
|
cbScripts: []
|
})
|
|
this.setState({
|
interfaces
|
})
|
this.props.updateConfig({...config, interfaces})
|
}
|
|
render() {
|
const { visible, setvisible, columns, interfaces, card } = this.state
|
|
return (
|
<div style={{display: 'inline-block'}}>
|
<Button className="mk-border-green" onClick={this.trigger}><ApiOutlined /> 接口管理</Button>
|
<Modal
|
title="接口管理"
|
wrapClassName="interface-controller-modal"
|
visible={visible}
|
width={800}
|
maskClosable={false}
|
onCancel={() => {this.setState({visible: false})}}
|
footer={[
|
<Button key="colse" onClick={() => {this.setState({visible: false})}}>
|
关闭
|
</Button>
|
]}
|
destroyOnClose
|
>
|
<Button key="add-interface" className="mk-border-green" onClick={this.addInterface}> 添加 </Button>
|
<EditTable key="manage-interface" actions={['move', 'copy']} type="interface" data={interfaces} columns={columns} onChange={this.changeScripts}/>
|
</Modal>
|
<Modal
|
title={card ? card.name : '接口'}
|
wrapClassName="interface-edit-modal"
|
visible={setvisible}
|
width={900}
|
maskClosable={false}
|
onOk={this.settingSave}
|
onCancel={() => { this.setState({ setvisible: false })}}
|
destroyOnClose
|
>
|
<SettingForm config={card} wrappedComponentRef={(inst) => this.settingRef = inst}/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default InterfaceController
|
