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="=">等于</Option> <Option value="<>">不等于</Option> <Option value="IS NOT NULL">不为空</Option> <Option value="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="=">等于</Option> <Option value="!=">不等于</Option> <Option value="like">像</Option> <Option value="IS NOT NULL">不为空</Option> <Option value="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="=">等于</Option> <Option value="<>">不等于</Option> <Option value=">">大于</Option> <Option value=">=">大于等于</Option> <Option value="<">小于</Option> <Option value="<=">小于等于</Option> <Option value="IS NOT NULL">不为空</Option> <Option value="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="="> 等于 </Option> </Select> {disabled?"": <span style={{padding: '0px 10px'}}> <Select onChange={this.changeNumber} value={string} style={{width:200}} > <Option value={true}> 是 </Option> <Option value={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="=">等于</Option> <Option value="<>">不等于</Option> <Option value=">">大于</Option> <Option value=">=">大于等于</Option> <Option value="<">小于</Option> <Option value="<=">小于等于</Option> <Option value="IS NOT NULL">不为空</Option> <Option value="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>) } } }