| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { Form, Row, Col, InputNumber, Select, Radio, Tooltip, Input } from 'antd' |
| | | import { Form, Row, Col, InputNumber, Select, Radio, Tooltip, Input, Modal } from 'antd' |
| | | import { QuestionCircleOutlined, EditOutlined } from '@ant-design/icons' |
| | | |
| | | import CodeMirror from '@/templates/zshare/codemirror' |
| | | // import './index.scss' |
| | | |
| | | class MainSearch extends Component { |
| | | static propTpyes = { |
| | | config: PropTypes.object, |
| | | updateConfig: PropTypes.func |
| | | } |
| | | |
| | | state = { |
| | | visible: false, |
| | | printScripts: '' |
| | | } |
| | | |
| | | selectChange = (key, value) => { |
| | |
| | | }) |
| | | } |
| | | |
| | | onScriptChange = (val) => { |
| | | this.setState({printScripts: val}) |
| | | } |
| | | |
| | | submit = () => { |
| | | const { config } = this.props |
| | | const { printScripts } = this.state |
| | | |
| | | this.setState({visible: false}) |
| | | this.props.updateConfig({...config, printScripts}) |
| | | } |
| | | |
| | | render() { |
| | | const { config } = this.props |
| | | const { getFieldDecorator } = this.props.form |
| | | const { visible, printScripts } = this.state |
| | | const formItemLayout = { |
| | | labelCol: { |
| | | xs: { span: 24 }, |
| | |
| | | } |
| | | |
| | | return ( |
| | | <> |
| | | <Form {...formItemLayout}> |
| | | <Row> |
| | | <Col span={24}> |
| | |
| | | {getFieldDecorator('printPage', { |
| | | initialValue: config.printPage || 'auto' |
| | | })( |
| | | <Radio.Group onChange={(e) => this.selectChange('printPage', e.target.value)}> |
| | | <Radio.Group className="mini-radio" onChange={(e) => this.selectChange('printPage', e.target.value)}> |
| | | <Radio value="auto">自适应</Radio> |
| | | <Radio value="page">分页</Radio> |
| | | <Radio value="custom">自定义</Radio> |
| | | </Radio.Group> |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | {config.printPage === 'custom' ? <Col span={24}> |
| | | <Form.Item label="自定义脚本"> |
| | | <EditOutlined style={{color: '#1890ff'}} onClick={() => this.setState({visible: true, printScripts: config.printScripts || ''})} /> |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {config.printPage === 'page' ? <Col span={24}> |
| | | <Form.Item label="每页数(条)"> |
| | | {getFieldDecorator('everyPCount', { |
| | |
| | | </Col> |
| | | </Row> |
| | | </Form> |
| | | <Modal |
| | | title="自定义脚本" |
| | | wrapClassName="normal-css-modal" |
| | | visible={visible} |
| | | width={800} |
| | | maskClosable={false} |
| | | onOk={this.submit} |
| | | onCancel={() => { this.setState({ visible: false })}} |
| | | destroyOnClose |
| | | > |
| | | <CodeMirror mode="text/javascript" theme="cobalt" value={printScripts} onChange={this.onScriptChange} /> |
| | | </Modal> |
| | | </> |
| | | ) |
| | | } |
| | | } |