Merge branch 'develop' into 'test'

src/containers/Login/style.css

@@ -83,7 +83,7 @@
   color: #3695c0;
 }
 .canclbtn::before {
-  border-color: #3695c0;
+  border-color: #3695c0 !important;
 }
 
 .vcodeDialog {

src/containers/PublicCar/PublicCarApply.js

@@ -40,10 +40,15 @@ class PublicCarApply extends Component {
     });
   }
   selectCategory = id => {
+    const { showAllCategory } = this.state;
+    if (!showAllCategory) {
+      this.toggleCategoryOptions();
+    } else {
       this.setState({
         categoryId: id,
         showAllCategory: false,
       });
+    }
   };
   toggleCategoryOptions = () => {
     this.setState(({ showAllCategory }) => ({
@@ -149,6 +154,7 @@ class PublicCarApply extends Component {
           <div className={styles.listItemAutoHeight}>
             <div className={styles.itemLabel}>用车类型</div>
             <div className={styles.itemValue}>
+              {categoryId ? null : (
                 <div
                   className={styles.selectInput}
                   onClick={this.toggleCategoryOptions}
@@ -158,6 +164,7 @@ class PublicCarApply extends Component {
                     <img src={arrIcon} alt="" />
                   </span>
                 </div>
+              )}
               {showAllCategory
                 ? categoryList.map(i => (
                     <div

src/containers/PublicCar/components/PublicCarItem.js

@@ -72,8 +72,14 @@ class PublicCarItem extends Component {
                   </div>
                 </div>,
                 <div key="department" className={styles.listLine}>
+                  <div className={styles.mLineItem}>
                     <div className={styles.listLabel}>用车部门：</div>
                     <div className={styles.listValue}>{data.department}</div>
+                  </div>
+                  <div className={styles.mLineItem}>
+                    <div className={styles.listLabel}>申请人：</div>
+                    <div className={styles.listValue}>{data.name}</div>
+                  </div>
                 </div>,
                 <div key="userCount" className={styles.listLine}>
                   <div className={styles.listLabel}>用车人数：</div>
@@ -147,6 +153,16 @@ class PublicCarItem extends Component {
                   <div className={styles.listLabel}>用车时间：</div>
                   <div className={styles.listValue}>{data.createDate}</div>
                 </div>,
+                <div key="department" className={styles.listLine}>
+                  <div className={styles.mLineItem}>
+                    <div className={styles.listLabel}>用车部门：</div>
+                    <div className={styles.listValue}>{data.department}</div>
+                  </div>
+                  <div className={styles.mLineItem}>
+                    <div className={styles.listLabel}>申请人：</div>
+                    <div className={styles.listValue}>{data.name}</div>
+                  </div>
+                </div>,
                 <div key="type" className={styles.listLine}>
                   <div className={styles.listLabel}>用车类型：</div>
                   <div className={styles.listValue}>
@@ -155,9 +171,7 @@ class PublicCarItem extends Component {
                 </div>,
                 <div key="line" className={styles.listLine}>
                   <div className={styles.listLabel}>用车路线：</div>
-                  <div className={styles.listValue}>
-                    {data.lineDescription}
-                  </div>
+                  <div className={styles.listValue}>{data.lineDescription}</div>
                 </div>,
               ]}
         </div>

src/containers/PublicCar/components/style.css

@@ -43,6 +43,10 @@
 .listValueMutLine {
   composes: listValueMutLine from '../../Repair/components/style.css';
 }
+.mLineItem {
+  width: 50%;
+  display: flex;
+}
 .dealingColor {
   color: #ff3131;
 }

src/containers/PublicCarDeal/Select.js

+import React, { Component } from 'react';
+import styles from './style.css';
+import SelectIcon from './images/more_item_btn@2x.png';
+
+class Select extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showOptions: false,
+    };
+  }
+
+  componentWillMount() {
+    console.log(this.props.children);
+    if (this.props.children.length) {
+      this.props.onChange(this.props.children[0].props.value);
+    }
+  }
+
+  toggleOptions = () => {
+    console.log('in click');
+
+    this.setState(({ showOptions }) => ({
+      showOptions: !showOptions,
+    }));
+  };
+  selectHandle = (e, val) => {
+    e.preventDefault();
+    e.stopPropagation();
+    console.log(val);
+    this.setState({
+      showOptions: false,
+    });
+    this.props.onChange(val);
+  };
+  render() {
+    const { showOptions } = this.state;
+    const { value } = this.props;
+    return (
+      <div className={styles.selectWrap} onClick={this.toggleOptions}>
+        <div className={styles.selectValue}>
+          <div className={styles.selectOption}>{value}</div>
+          {showOptions && (
+            <div className={styles.selectOptionsBox}>
+              {this.props.children.map((i, idx) => (
+                <div
+                  className={styles.selectOption}
+                  key={idx}
+                  onClick={e => this.selectHandle(e, i.props.value)}
+                >
+                  {i}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className={styles.selectIcon}>
+          <img src={SelectIcon} alt="" />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Select;

src/containers/PublicCarDeal/index.js

@@ -8,10 +8,10 @@ import {
   fetchCarPlateList,
 } from '../../api/index';
 // import Select from '../../components/Input/Select/Select';
-import SelectIcon from './images/more_item_btn@2x.png';
 import offCheckIcon from '../../images/Check/radio_off_btn@2x.png';
 import onCheckIcon from '../../images/Check/radio_on_btn@2x.png';
 import UserInfoContext from '../../context/userinfo-context';
+import Select from './Select';
 
 class PublicCarDeal extends Component {
   constructor(props) {
@@ -181,9 +181,7 @@ class PublicCarDeal extends Component {
         Toast.fail(err.msg || '处理失败！');
       });
   };
-  onSelectHandle = e => {
-    console.log(e);
-    const val = e.target.value;
+  onSelectHandle = val => {
     this.setState(({ selected }) => ({
       selected: {
         ...selected,
@@ -201,7 +199,7 @@ class PublicCarDeal extends Component {
   };
   render() {
     const {
-      selected: { value, dealOpinion },
+      selected: { value, dealOpinion, carPlate },
       dealDialogVisible,
       carPlateList,
     } = this.state;
@@ -273,22 +271,18 @@ class PublicCarDeal extends Component {
             {value === 2 ? (
               <div key="agree" className={styles.agree}>
                 <span className={styles.dialogAgreeLabel}>派车车牌</span>
-                <div className={styles.selectWrap}>
-                  <div className={styles.selectIcon}>
-                    <img src={SelectIcon} alt="" />
-                  </div>
-                  <select
+                <div className={styles.selectWrapBox}>
+                  <Select
                     className={styles.select}
                     onChange={this.onSelectHandle}
-                    defaultValue="-1"
+                    value={carPlate}
                   >
-                    <option disabled value="-1" >请选择</option>
                     {carPlateList.map(i => (
-                      <option key={i.value} value={i.lable}>
+                      <div key={i.value} value={i.lable}>
                         {i.lable}
-                      </option>
+                      </div>
                     ))}
-                  </select>
+                  </Select>
                 </div>
               </div>
             ) : value === 3 ? (

src/containers/PublicCarDeal/style.css

@@ -46,22 +46,39 @@
   font-size: 26px;
   color: #333;
 }
+.selectWrapBox {
+  width: 310px;
+  /* height: 60px; */
+  height: auto;
+}
 .selectWrap {
+  box-sizing: border-box;
   position: relative;
-  width: 310px;
-  height: 60px;
+  width: 100%;
+  height: 100%;
   line-height: 60px;
-  background-color: #f2f2f2;
   border-radius: 8px;
+  display: flex;
+}
+.selectValue {
   padding-left: 26px;
+  flex: 1;
+  background-color: #f2f2f2;
 }
 .selectIcon {
-  position: absolute;
-  right: 0;
-  top: 0;
   width: 46px;
   height: 60px;
 }
+.selectOptionsBox {
+  z-index: 999;
+  width: 100%;
+  text-align: left;
+}
+.selectOption {
+  text-align: left;
+  height: 60px;
+  border-bottom: 1px solid #fff;
+}
 .select {
   border: none;
   appearance: none;

src/containers/Repair/components/style.css

@@ -54,7 +54,7 @@
 }
 .listLineArea {
   composes: listLine;
-  line-height: 26px;
+  line-height: 30px;
 }
 .listLine2Item {
   display: flex;