search

src/components/ui/search.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import styles from './search.less'
+import { Input, Select, Button, Icon } from 'antd'
+
+const Search = (props) => {
+  const handleSearch = () => {
+    // console.log(this.refs.searchInput)
+  }
+  const handleInputChange = () => {
+
+  }
+  const handleClearInput = () => {
+
+  }
+  const {size, select, selectOptions, selectProps, onSearch} = props
+  return (
+    <Input.Group compact size={size} className={styles.search} >
+      {select ? <Select size={size} {...selectProps}>
+        {selectOptions.map((item, key) => <Select.Option value={item.value} key={key}>{item.name || item.value}</Select.Option>)}
+      </Select> : ''}
+      <Input size={size} onChange={handleInputChange} />
+      <Button size={size} type='primary' onClick={handleSearch}>搜索</Button>
+      <Icon type='cross' onClick={handleClearInput} />
+    </Input.Group>
+  )
+}
+
+export default Search

src/components/ui/search.less

@@ -0,0 +1,54 @@
+.no-highlight() {
+  border-color: #e5e5e5;
+  box-shadow: none;
+}
+
+.search {
+  display: flex;
+  width: 100%;
+  position: relative;
+
+  :global {
+    .anticon-cross{
+      position: absolute;
+      width: 18px;
+      height: 18px;
+      right: 84px;
+      cursor: pointer;
+      color: #fff;
+      line-height: 18px;
+      border-radius: 50%!important;
+      background-color: rgba(0, 0, 0, .16);
+      top:7px;
+      // opacity:
+    }
+    .ant-select {
+      width: 80px;
+      flex-shrink: 0;
+      flex-grow: 0;
+
+      &.ant-select-focused .ant-select-selection,
+      &.ant-select-open .ant-select-selection,
+      .ant-select-selection:active,
+      .ant-select-selection:focus,
+      .ant-select-selection:hover {
+        .no-highlight();
+      }
+    }
+
+    .ant-input {
+      &:focus,
+      &:hover {
+        .no-highlight();
+      }
+      flex-shrink: 1;
+      flex-grow: 1;
+    }
+
+    .ant-btn {
+      width: 80px;
+      flex-shrink: 0;
+      flex-grow: 0;
+    }
+  }
+}

src/components/users/search.js

@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react'
-import { Form, Input, Button, Select  } from 'antd'
+import { Form, Input, Button, Select, Row, Col } from 'antd'
 import styles from './search.less'
+import SearchGroup from '../ui/search'
 
 const search = ({
   field,
@@ -13,52 +14,39 @@ const search = ({
     getFieldsValue
   }
 }) => {
-  function handleSubmit (e) {
-    e.preventDefault()
-    validateFields((errors) => {
-      if (errors) {
-        return
-      }
-      onSearch(getFieldsValue())
-    })
+  // function handleSubmit (e) {
+  //   e.preventDefault()
+  //   validateFields((errors) => {
+  //     if (errors) {
+  //       return
+  //     }
+  //     onSearch(getFieldsValue())
+  //   })
+  // }
+
+  const searchGroupProps ={
+    field,
+    keyword,
+    size:'large',
+    select:true,
+    selectOptions:[{value:'姓名'},{value:'地址'}],
+    selectProps:{
+      defaultValue:"姓名"
+    },
+    onSearch:(res) => {
+      console.log(res)
+    }
   }
 
   return (
-    <div className={styles.normal}>
-      <div style={{width:400}}>
-        <Input.Group compact>
-          <Select  size="large" style={{width:100}}>
-            <Select.Option value='name'>名字</Select.Option>
-            <Select.Option value='address'>地址</Select.Option>
-          </Select>
-          <Input size="large" style={{width:200}}/>
-          {/* <Button size="large" type='primary'>搜索</Button> */}
-        </Input.Group>
-      </div>
-      <div className={styles.search}>
-        <Form inline>
-          <Form.Item>
-            {getFieldDecorator('field', {
-              initialValue: field || 'name'
-            })(
-              <Select size="large">
-                <Select.Option value='name'>名字</Select.Option>
-                <Select.Option value='address'>地址</Select.Option>
-              </Select>
-            )}
-          </Form.Item>
-          <Form.Item hasFeedback>
-            {getFieldDecorator('keyword', {
-              initialValue: keyword || ''
-            })(<Input size="large" />)}
-          </Form.Item>
-          <Button type='primary' onClick={handleSubmit}>搜索</Button>
-        </Form>
-      </div>
-      <div className={styles.create}>
-        <Button size="large"  type='ghost' onClick={onAdd}>添加</Button>
-      </div>
-    </div>
+      <Row gutter={24}>
+        <Col lg={8} md={12} sm={16} xs={24} style={{marginBottom:16}}>
+          <SearchGroup {...searchGroupProps} />
+        </Col>
+        <Col lg={{offset:8,span:8}} md={12} sm={8} xs={24} style={{marginBottom:16,textAlign:'right'}}>
+          <Button size='large' type='ghost' onClick={onAdd}>添加</Button>
+        </Col>
+      </Row>
   )
 }
 

src/components/users/search.less

@@ -1,8 +1,8 @@
-.normal {
-  display: flex;
-  margin-bottom: 20px;
-}
-
-.search {
-  flex: 1;
-}
+// .normal {
+//   display: flex;
+//   margin-bottom: 20px;
+// }
+// 
+// .search {
+//   flex: 1;
+// }