import React, {Component} from 'react'
|
import { Button, Modal, notification, Empty, Input } from 'antd'
|
|
import './index.scss'
|
|
const { Search } = Input
|
|
class LoadFromTemp extends Component {
|
state = {
|
visible: false,
|
tempId: '',
|
searchkey: '',
|
temps: []
|
}
|
|
submit = () => {
|
const { tempId } = this.state
|
|
if (!tempId) {
|
notification.warning({
|
top: 92,
|
message: '请选择模板！',
|
duration: 5
|
})
|
return
|
}
|
|
this.setState({visible: false})
|
this.props.onChange(tempId)
|
}
|
|
trigger = () => {
|
const { tempTypes } = this.props
|
let temps = []
|
|
tempTypes.forEach(item => {
|
if (item.temp_list && item.temp_list.length > 0) {
|
item.temp_list.forEach(cell => {
|
temps.push({
|
id: cell.temp_id,
|
voucher_text: cell.voucher_text || '',
|
data_name: item.data_name || ''
|
})
|
})
|
}
|
})
|
|
this.setState({visible: true, tempId: '', temps, searchkey: ''})
|
}
|
|
checkItem = (id) => {
|
this.setState({tempId: id})
|
}
|
|
render() {
|
const { visible, tempId, temps, searchkey } = this.state
|
|
let _temps = temps
|
|
if (searchkey) {
|
_temps = temps.filter(item => item.voucher_text.indexOf(searchkey) > -1 || item.data_name.indexOf(searchkey) > -1)
|
}
|
|
return (
|
<>
|
<Button onClick={() => this.trigger()}>从模板中加载</Button>
|
<Modal
|
title="从模板中加载"
|
wrapClassName="mk-temp-list-wrap"
|
visible={visible}
|
width={700}
|
maskClosable={false}
|
onOk={this.submit}
|
onCancel={() => { this.setState({ visible: false })}}
|
destroyOnClose
|
>
|
{visible ? <div className="document-wrap">
|
<Search placeholder="" defaultValue="" style={{ minWidth: '200px' }} onSearch={(val) => this.setState({searchkey: val, tempId: ''})}/>
|
<div className="document-title">
|
<div className="folder-box">模板类型</div>
|
<div className="folder">
|
模板名称
|
</div>
|
</div>
|
<div className="document-body">
|
{_temps.length ? <div className="file-wrap">
|
{_temps.map(doc => {
|
return <div className="file-item" onClick={() => this.checkItem(doc.id)} key={doc.id}>
|
<span className={'square-select' + (tempId === doc.id ? ' active' : '')}></span>
|
<span className="folder-name">{doc.data_name}</span>
|
<span className="file-name">{doc.voucher_text}</span>
|
</div>
|
})}
|
</div> : <Empty style={{padding: '10px 0px'}} description={null}/>}
|
</div>
|
</div> : null}
|
</Modal>
|
</>
|
)
|
}
|
}
|
|
export default LoadFromTemp
|
