import React, {Component} from 'react'
|
import { Button, Modal, Form, Input, notification, Select, Divider } from 'antd'
|
import { PlusOutlined } from '@ant-design/icons'
|
|
import MKEmitter from '@/utils/events.js'
|
// import './index.scss'
|
|
const { Option } = Select
|
|
class SaveAsTemp extends Component {
|
state = {
|
visible: false,
|
name: '',
|
typeChar: '',
|
typeName: '',
|
menu: null
|
}
|
|
UNSAFE_componentWillMount() {
|
let menuId = '16289973311406f3ko9nm8ehotdmu80o'
|
let menu = window.GLOB.mkThdMenus.get(menuId)
|
|
if (menu) {
|
this.setState({menu: {
|
...menu,
|
param: {}
|
}})
|
}
|
}
|
|
submit = () => {
|
const { name, typeChar, typeName } = this.state
|
|
if (!typeChar) {
|
notification.warning({
|
top: 92,
|
message: '请选择模板类型！',
|
duration: 5
|
})
|
return
|
} else if (!name) {
|
notification.warning({
|
top: 92,
|
message: '请填写模板名称！',
|
duration: 5
|
})
|
return
|
}
|
|
this.setState({visible: false})
|
this.props.onChange(name, typeChar, typeName)
|
}
|
|
triggerSave = () => {
|
this.setState({visible: true, name: '', typeChar: '', typeName: ''})
|
}
|
|
changeType = (val, option) => {
|
if (option && option.props) {
|
this.setState({typeChar: option.props.value, typeName: option.props.children})
|
}
|
}
|
|
addType = () => {
|
const { menu } = this.state
|
|
this.setState({visible: false})
|
|
MKEmitter.emit('modifyTabs', menu, true)
|
}
|
|
render() {
|
const { tempTypes } = this.props
|
const { visible, menu } = this.state
|
|
return (
|
<>
|
<Button onClick={() => this.triggerSave()}>保存为模板</Button>
|
<Modal
|
title="添加模板"
|
wrapClassName="mk-temp-add-modal"
|
visible={visible}
|
width={600}
|
maskClosable={false}
|
onOk={this.submit}
|
onCancel={() => { this.setState({ visible: false })}}
|
destroyOnClose
|
>
|
{visible ? <Form>
|
<Form.Item label="模板类型">
|
{menu ? <Select placeholder="请选择模板类型" onChange={this.changeType} dropdownRender={menus => (
|
<div>
|
{menus}
|
<Divider style={{ margin: '4px 0' }} />
|
<div className="mk-add-book" onMouseDown={this.addType}>
|
<PlusOutlined /> 添加
|
</div>
|
</div>
|
)}>
|
{tempTypes.map(item => (
|
<Option key={item.data_code} value={item.data_code}>{item.data_name}</Option>
|
))}
|
</Select> : <Select placeholder="请选择模板类型" onChange={this.changeType}>
|
{tempTypes.map(item => (
|
<Option key={item.data_code} value={item.data_code}>{item.data_name}</Option>
|
))}
|
</Select>}
|
</Form.Item>
|
<Form.Item label="模板名称">
|
<Input onChange={(e) => this.setState({name: e.target.value})}/>
|
</Form.Item>
|
<div style={{clear: 'both'}}></div>
|
</Form> : null}
|
</Modal>
|
</>
|
)
|
}
|
}
|
|
export default SaveAsTemp
|
