import React from 'react'; import { Select, Input, InputNumber, Button, DatePicker } from 'antd'; import moment from 'moment'; const Option = Select.Option; const text = [ 'BINARY', 'CHAR', 'GEOMETRY', 'GEOMETRYCOLLECTION', 'JSON', 'LINESTRING', 'LONGBLOB', 'LONGTEXT', 'MEDIUMBLOB', 'MEDIUMINT', 'MEDIUMTEXT', 'MULTILINESTRING', 'MULTIPOINT', 'MULTIPOLYGON', 'POINT', 'POLYGON', 'REAL', 'DECIMAL', 'ENUM', 'SET', 'TEXT', 'TINYBLOB', 'TIBYTEXT', 'VARBINARY', 'VARCHAR', ]; const number = ['BIGINT', 'DOUBLE', 'FLOAT', 'INT', 'INTEGER', 'NUMERIC', 'SMALLINT', 'TINYINT']; const data = ['DATE', 'DATETIME', 'TIME', 'TIMESTAMP', 'YEAR']; export default class QueryItem extends React.Component { constructor(props) { super(props); const value = props.value || {}; this.state = { stringX: value.stringX, string: value.string, disabled: value.disabled || false, }; } componentWillReceiveProps(nextProps) { // Should be a controlled component. if ('value' in nextProps) { const value = nextProps.value; this.setState(value); } } triggerChange = (changedValue) => { // Should provide an event to pass value to Form. const onChange = this.props.onChange; if (onChange) { onChange(Object.assign({}, this.state, changedValue)); } }; changeNumber = (e) => { if (!('value' in this.props)) { this.setState({ string: e }); } this.triggerChange({ string: e }); }; changeStringX = (e) => { var disabled = false; if (e == 'IS NOT NULL' || e == 'IS NULL') { disabled = true; } if (!('value' in this.props)) { this.setState({ stringX: e, disabled }); } this.triggerChange({ stringX: e, disabled }); }; changeString = (e) => { if (!('value' in this.props)) { this.setState({ string: e.target.value }); } this.triggerChange({ string: e.target.value }); }; changeDate = (date) => { if (!('value' in this.props)) { this.setState({ string: date.format('YYYY-MM-DD HH:mm:ss') }); } this.triggerChange({ string: date.format('YYYY-MM-DD HH:mm:ss') }); }; render() { const { obj } = this.props; const { string, stringX, disabled } = this.state; if (obj.options && obj.options.length > 0) { return ( <div> {' '} <Select onChange={this.changeStringX} value={stringX || '='} style={{ width: 100 }}> <Option value="=" key={'='}> 等于 </Option> <Option value="<>" key={'<>'}> 不等于 </Option> <Option value="IS NOT NULL" key={'IS NOT NULL'}> 不为空 </Option> <Option value="IS NULL" key={'IS NULL'}> 为空 </Option> </Select> {disabled ? ( '' ) : ( <span style={{ padding: '0px 10px' }}> <Select onChange={this.changeNumber} value={string} style={{ width: 200 }}> {obj.options.map((r) => ( <Option key={r.v} value={r.v}> {r.l} </Option> ))} </Select> </span> )} <Button type="danger" onClick={this.props.deleteQuery}> 删除 </Button> </div> ); } if (text.includes(obj.type)) { return ( <div> <Select onChange={this.changeStringX} value={stringX || '='} style={{ width: 100 }}> <Option value="=" key={'='}> 等于 </Option> <Option value="!=" key={'!='}> 不等于 </Option> <Option value="like" key={'link'}> 像 </Option> <Option value="IS NOT NULL" key={'IS NOT NULL'}> 不为空 </Option> <Option value="IS NULL" key={'IS NULL'}> 为空 </Option> </Select> {disabled ? ( '' ) : ( <span style={{ padding: '0px 10px' }}> <Input onChange={this.changeString} placeholder="请输入" value={string} style={{ width: 200 }} /> </span> )} <Button type="danger" onClick={this.props.deleteQuery}> 删除 </Button> </div> ); } else if (number.includes(obj.type)) { return ( <div> {' '} <Select onChange={this.changeStringX} value={stringX || '='} style={{ width: 100 }}> <Option value="=" key={'='}> 等于 </Option> <Option value="<>" key={'<>'}> 不等于 </Option> <Option value=">" key={'>'}> 大于 </Option> <Option value=">=" key={'>='}> 大于等于 </Option> <Option value="<" key={'<'}> 小于 </Option> <Option value="<=" key={'<='}> 小于等于 </Option> <Option value="IS NOT NULL" key={'IS NOT NULL'}> 不为空 </Option> <Option value="IS NULL" key={'IS NULL'}> 为空 </Option> </Select> {disabled ? ( '' ) : ( <span style={{ padding: '0px 10px' }}> <InputNumber onChange={this.changeNumber} placeholder="请输入" value={string} style={{ width: 200 }} /> </span> )} <Button type="danger" onClick={this.props.deleteQuery}> 删除 </Button> </div> ); } else if (obj.type === 'BIT') { return ( <div> <Select onChange={this.changeStringX} value={stringX || '='} style={{ width: 100 }}> <Option value="=" key={'='}> 等于 </Option> </Select> {disabled ? ( '' ) : ( <span style={{ padding: '0px 10px' }}> <Select onChange={this.changeNumber} value={string} style={{ width: 200 }}> <Option value={true} key={'true'}> 是 </Option> <Option value={false} key={'false'}> 否 </Option> </Select> </span> )} <Button type="danger" onClick={this.props.deleteQuery}> 删除 </Button> </div> ); } else if (data.includes(obj.type)) { return ( <div> <Select onChange={this.changeStringX} value={stringX || '='} style={{ width: 100 }}> <Option value="=" key={'='}> 等于 </Option> <Option value="<>" key={'<>'}> 不等于 </Option> <Option value=">" key={'>'}> 大于 </Option> <Option value=">=" key={'>='}> 大于等于 </Option> <Option value="<" key={'<'}> 小于 </Option> <Option value="<=" key={'<='}> 小于等于 </Option> <Option value="IS NOT NULL" key={'IS NOT NULL'}> 不为空 </Option> <Option value="IS NULL" key={'IS NULL'}> 为空 </Option> </Select> {disabled ? ( '' ) : ( <span style={{ padding: '0px 10px' }}> <DatePicker onChange={this.changeDate} showTime format="YYYY-MM-DD HH:mm:ss" allowClear={false} style={{ width: 200 }} value={string ? moment(string) : null} /> </span> )} <Button type="danger" onClick={this.props.deleteQuery}> 删除 </Button> </div> ); } else { return <span>暂无法处理</span>; } } }