修改派车为多选

src/containers/PublicCar/components/PublicCarItem.js

@@ -128,7 +128,7 @@ class PublicCarItem extends Component {
                   }`}
                 >
                   <div className={styles.listLabel}>派车车牌：</div>
-                  <div className={styles.listValue}>
+                  <div className={styles.listValueMutLine}>
                     {data.dealResult === 1
                       ? '待处理后显示'
                       : data.carPlate

src/containers/PublicCarDeal/Select.js

@@ -13,13 +13,12 @@ class Select extends Component {
   componentWillMount() {
     console.log(this.props.children);
     if (this.props.children.length) {
-      this.props.onChange(this.props.children[0].props.value);
+      this.props.onChange([this.props.children[0].props.value]);
     }
   }
 
   toggleOptions = () => {
     console.log('in click');
-
     this.setState(({ showOptions }) => ({
       showOptions: !showOptions,
     }));
@@ -28,10 +27,15 @@ class Select extends Component {
     e.preventDefault();
     e.stopPropagation();
     console.log(val);
-    this.setState({
-      showOptions: false,
-    });
-    this.props.onChange(val);
+    // this.setState({
+    //   showOptions: false,
+    // });
+    const { value } = this.props;
+    if (value.indexOf(val) !== -1) {
+      this.props.onChange(value.filter(i => i !== val));
+    } else {
+      this.props.onChange([...value, val]);
+    }
   };
   render() {
     const { showOptions } = this.state;
@@ -39,10 +43,23 @@ class Select extends Component {
     return (
       <div className={styles.selectWrap} onClick={this.toggleOptions}>
         <div className={styles.selectValue}>
-          <div className={styles.selectOption}>{value}</div>
+          <div className={styles.selectValueOption}>{value.join(',')}</div>
           {showOptions && (
             <div className={styles.selectOptionsBox}>
-              {this.props.children.map((i, idx) => (
+              {this.props.children.map(
+                (i, idx) =>
+                  value.indexOf(i.props.value) !== -1 ? (
+                    <div
+                      className={styles.selectOptionChecked}
+                      key={idx}
+                      onClick={e => this.selectHandle(e, i.props.value)}
+                    >
+                      {i}
+                      <div className={styles.selected}>
+                        <div className={styles.selectedInner} />
+                      </div>
+                    </div>
+                  ) : (
                     <div
                       className={styles.selectOption}
                       key={idx}
@@ -50,7 +67,8 @@ class Select extends Component {
                     >
                       {i}
                     </div>
-              ))}
+                  )
+              )}
             </div>
           )}
         </div>

src/containers/PublicCarDeal/index.js

@@ -39,7 +39,7 @@ class PublicCarDeal extends Component {
       selected: {
         id: '',
         value: '',
-        carPlate: '',
+        carPlate: [],
         dealOpinion: '',
       },
       carPlateList: [],
@@ -129,7 +129,7 @@ class PublicCarDeal extends Component {
       selected: {
         id: '',
         value: '',
-        carPlate: '',
+        carPlate: [],
         dealOpinion: '',
       },
     }));
@@ -151,7 +151,7 @@ class PublicCarDeal extends Component {
       return false;
     }
     if (value === 2) {
-      if (carPlate === '-1') {
+      if (carPlate.length === 0) {
         Toast.fail('请选择派车！');
         return false;
       }
@@ -172,7 +172,7 @@ class PublicCarDeal extends Component {
             id: id,
             dealName: userinfo.name,
             dealResult: value,
-            carPlate: carPlate,
+            carPlate: carPlate.join(','),
           }
         : {
             id: id,
@@ -193,6 +193,8 @@ class PublicCarDeal extends Component {
       });
   };
   onSelectHandle = val => {
+    console.log(val);
+
     this.setState(({ selected }) => ({
       selected: {
         ...selected,

src/containers/PublicCarDeal/style.css

@@ -58,14 +58,16 @@
   height: 100%;
   line-height: 60px;
   border-radius: 8px;
-  display: flex;
 }
 .selectValue {
   padding-left: 26px;
-  flex: 1;
   background-color: #f2f2f2;
+  margin-right: 46px;
 }
 .selectIcon {
+  position: absolute;
+  right: 0;
+  top: 0;
   width: 46px;
   height: 60px;
 }
@@ -79,6 +81,27 @@
   height: 60px;
   border-bottom: 1px solid #fff;
 }
+.selectValueOption {
+  composes: selectOption;
+  white-space: nowrap;
+  width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.selectOptionChecked {
+  composes: selectOption;
+  position: relative;
+}
+.selected {
+  position: absolute;
+  right: 10px;
+  top: 20px;
+  width: 20px;
+  height: 10px;
+  border-left: 1px solid #666;
+  border-bottom: 1px solid #666;
+  transform: rotate(-45deg);
+}
 .select {
   border: none;
   appearance: none;