添加约车页面

config-overrides.js

@@ -35,7 +35,7 @@ module.exports = function override(config, env) {
         loader: require.resolve('less-loader'),
         options: {
           // theme vars, also can use theme.js instead of this.
-          modifyVars: { '@brand-primary': '#1DA57A' },
+          modifyVars: { '@brand-primary': '#3695c0' },
         },
       },
     ],

src/api/index.js

@@ -11,14 +11,22 @@ export const sendMsg = entity =>
 export const fetchRepairArea = () =>
   fetch({
     url: '/baseData/getBaseData',
-    method: 'post',
-    data: { type: 1 },
+    params: { type: 1 },
   });
 export const fetchRepairTerm = () =>
   fetch({
     url: '/baseData/getBaseData',
-    method: 'post',
-    data: { type: 2 },
+    params: { type: 2 },
+  });
+export const fetchCarCategory = () =>
+  fetch({
+    url: '/baseData/getBaseData',
+    params: { type: 3 },
+  });
+export const fetchCarPlateList = () =>
+  fetch({
+    url: '/baseData/getBaseData',
+    params: { type: 4 },
   });
 // publicCar
 export const fetchPublicCarList = entity =>

src/containers/PublicCar/PublicCarApply.js

 import React, { Component } from 'react';
-import { List, InputItem, DatePicker, Button, Toast } from 'antd-mobile';
+import { TextareaItem, DatePicker, Button, Toast } from 'antd-mobile';
+import { applyPublicCar, fetchCarCategory } from '../../api/index';
 import styles from './style.css';
-import { applyPublicCar, sendMsg } from '../../api/index';
+import { formatDate } from '../../utils/index';
+import arrIcon from '../../components/Input/Select/images/select_icon@2x.png';
+
+const CustomChildren = ({ extra, onClick, children }) => (
+  <div onClick={onClick} className={styles.selectWrap}>
+    <div className={extra === '请选择' ? '' : styles.selectValue}>
+      {extra === '请选择' ? '年-月-日 时-分' : extra}
+    </div>
+  </div>
+);
 
-const minDate = new Date();
 class PublicCarApply extends Component {
-  state = {
+  constructor(props) {
+    super(props);
+    this.state = {
       department: '',
-    createDate: '',
+      createDate: formatDate(new Date(), 'yyyy-MM-dd'),
       name: '',
-    categoryName: '',
+      categoryId: '',
       userCount: '',
       beginDate: '',
       endDate: '',
       lineDescription: '',
+      showAllCategory: true,
+      categoryList: [],
+    };
+  }
+  componentDidMount() {
+    fetchCarCategory().then(res => {
+      this.setState({
+        categoryList: res.data,
+      });
+    });
+  }
+  selectCategory = id => {
+    this.setState({
+      categoryId: id,
+    });
+  };
+  validateForm = () => {
+    if (!this.state.categoryId) {
+      Toast.fail('请选择用车类型');
+      return false;
+    }
+    if (!this.state.userCount) {
+      Toast.fail('请填写用车人数');
+      return false;
+    }
+    if (!this.state.beginDate) {
+      Toast.fail('请选择用车开始时间');
+      return false;
+    }
+    if (!this.state.endDate) {
+      Toast.fail('请选择用车结束时间');
+      return false;
+    }
+    return true;
   };
   onSubmit = () => {
-    applyPublicCar({
-      ...this.state,
-    })
+    if (!this.validateForm()) {
+      return;
+    }
+    let categoryName = JSON.stringify(
+      this.state.categoryList.map(i => ({
+        id: i.id,
+        name: i.name,
+        checked: i.id === this.state.categoryId,
+      }))
+    );
+    const entity = {
+      userId: this.state.userId,
+      department: this.state.department,
+      name: this.state.name,
+      categoryName: categoryName,
+      beginDate: this.state.beginDate,
+      endDate: this.state.endDate,
+      lineDescription: this.state.lineDescription,
+      userCount: this.state.userCount,
+    };
+    applyPublicCar(entity)
       .then(res => {
         console.log('res: ' + res);
       })
       .catch(err => {
         console.log('err: ' + err);
       });
-    sendMsg({
-      cellphone: '18108096099',
-    })
-      .then(res => {
-        console.log(res);
-        Toast.success('发送成功！');
-      })
-      .catch(err => {
-        console.log(err);
-      });
+    // sendMsg({
+    //   cellphone: '18108096099',
+    // })
+    //   .then(res => {
+    //     console.log(res);
+    //     Toast.success('发送成功！');
+    //   })
+    //   .catch(err => {
+    //     console.log(err);
+    //   });
   };
   render() {
+    const {
+      name,
+      department,
+      createDate,
+      categoryList,
+      categoryId,
+      lineDescription,
+    } = this.state;
     return (
       <div className={styles.bg}>
-        <List className={styles.content}>
-          <InputItem clear placeholder="用车部门">
-            用车部门
-          </InputItem>
-          <InputItem clear placeholder="申请时间">
-            申请时间
-          </InputItem>
-          <InputItem clear placeholder="申请人">
-            申请人
-          </InputItem>
-          <InputItem clear placeholder="用车类型">
-            用车类型
-          </InputItem>
-          <InputItem clear placeholder="用车人数">
-            用车人数
-          </InputItem>
+        <div className={styles.content}>
+          <div className={styles.listItem}>
+            <div className={styles.itemLabel}>用车部门</div>
+            <div className={styles.itemValue}>{department}</div>
+          </div>
+          <div className={styles.listItem}>
+            <div className={styles.itemLabel}>申请时间</div>
+            <div className={styles.itemValue}>{createDate}</div>
+          </div>
+          <div className={styles.listItem}>
+            <div className={styles.itemLabel}>申请人</div>
+            <div className={styles.itemValue}>{name}</div>
+          </div>
+          <div className={styles.listItemAutoHeight}>
+            <div className={styles.itemLabel}>用车类型</div>
+            <div className={styles.itemValue}>
+              <div className={styles.selectInput}>
+                请选择
+                <span className={styles.arrow}>
+                  <img src={arrIcon} alt="" />
+                </span>
+              </div>
+              {categoryList.map(i => (
+                <div
+                  key={i.id}
+                  className={styles.optionItem}
+                  onClick={() => this.selectCategory(i.id)}
+                >
+                  <div className={styles.radioLabel}>
+                    {i.id === categoryId ? (
+                      <div className={styles.inner} />
+                    ) : null}
+                  </div>
+                  <div className={styles.radioValue}>{i.name}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className={styles.listItem}>
+            <div className={styles.itemLabel}>用车人数</div>
+            <div className={styles.itemValue}>
+              <input
+                className={styles.itemInput}
+                type="text"
+                value={this.state.userCount}
+                onChange={e =>
+                  this.setState({
+                    userCount: e.target.value,
+                  })
+                }
+              />
+            </div>
+          </div>
+          <div className={styles.listItem}>
+            <div className={styles.itemLabel}>用车开始时间</div>
+            <div className={styles.itemSelect}>
               <DatePicker
-            minDate={minDate}
                 value={this.state.beginDate}
                 onChange={date => this.setState({ beginDate: date })}
               >
-            <List.Item arrow="horizontal">用车开始时间</List.Item>
+                <CustomChildren className={styles.DateInnerWrap} />
               </DatePicker>
+            </div>
+          </div>
+          <div className={styles.listItem}>
+            <div className={styles.itemLabel}>用车结束时间</div>
+            <div className={styles.itemSelect}>
               <DatePicker
-            minDate={this.state.beginDate}
+                className={styles.DateWrap}
                 value={this.state.endDate}
                 onChange={date => this.setState({ endDate: date })}
               >
-            <List.Item arrow="horizontal">用车结束时间</List.Item>
+                <CustomChildren className={styles.DateInnerWrap} />
               </DatePicker>
-        </List>
-        <Button type="primary" size="small" inline onClick={this.onSubmit}>
+            </div>
+          </div>
+          <div className={styles.listItemAutoHeight}>
+            <div className={styles.itemLabel}>用车详细线路</div>
+            <div className={styles.itemValue}>
+              <TextareaItem
+                className={styles.textarea}
+                placeholder="例：温江校区-富顺县-川大望江校区"
+                rows={4}
+                count={50}
+                value={lineDescription}
+                onChange={val => this.setState({ lineDescription: val })}
+              />
+            </div>
+          </div>
+        </div>
+        <Button className={styles.submitBtn} onClick={this.onSubmit}>
           提交
         </Button>
       </div>

src/containers/PublicCar/PublicCarList.js

@@ -13,6 +13,7 @@ class PublicCarList extends Component {
       height: document.documentElement.clientHeight,
       list: [],
       pagination: {
+        lastIndex: null,
         pageNum: 1,
         pageSize: 50,
       },
@@ -33,12 +34,18 @@ class PublicCarList extends Component {
   }
   fetchList = () => {
     const { pagination } = this.state;
-    fetchPublicCarList(pagination)
+    return fetchPublicCarList({ ...pagination })
       .then(res => {
         console.log(res);
-        this.setState({
+        if (res.data) {
+          this.setState(({ pagination }) => ({
             list: res.data,
-        });
+            pagination: {
+              ...pagination,
+              lastIndex: res.data[res.data.length - 1].lastIndex,
+            },
+          }));
+        }
       })
       .catch(err => {
         console.log(err);
@@ -46,9 +53,9 @@ class PublicCarList extends Component {
   };
   refreshHandle = () => {
     this.setState({ refreshing: true });
-    setTimeout(() => {
+    this.fetchList().then(() => {
       this.setState({ refreshing: false });
-    }, 1000);
+    });
   };
   render() {
     return (

src/containers/PublicCar/components/PublicCarItem.js

@@ -103,7 +103,9 @@ class PublicCarItem extends Component {
                   }`}
                 >
                   <div className={styles.listLabel}>处理人：</div>
-                  <div className={styles.listValue}>{data.dealName}</div>
+                  <div className={styles.listValue}>
+                    {data.dealResult === 1 ? '处理中' : data.dealName}
+                  </div>
                 </div>,
                 <div
                   key="dealDate"
@@ -114,7 +116,9 @@ class PublicCarItem extends Component {
                   }`}
                 >
                   <div className={styles.listLabel}>处理时间：</div>
-                  <div className={styles.listValue}>{data.dealDate}</div>
+                  <div className={styles.listValue}>
+                    {data.dealResult === 1 ? '待处理后显示' : data.dealDate}
+                  </div>
                 </div>,
                 <div
                   key="carPlate"
@@ -125,7 +129,9 @@ class PublicCarItem extends Component {
                   }`}
                 >
                   <div className={styles.listLabel}>派车车牌：</div>
-                  <div className={styles.listValue}>{data.carPlate}</div>
+                  <div className={styles.listValue}>
+                    {data.dealResult === 1 ? '待处理后显示' : data.carPlate}
+                  </div>
                 </div>,
                 data.dealResult === 3 ? (
                   <div

src/containers/PublicCar/style.css

@@ -13,3 +13,101 @@
 .noData {
   composes: noData from '../Repair/style.css';
 }
+/* apply */
+.content {
+  padding: 30px 40px 20px;
+}
+.listItem {
+  composes: listItem from '../Repair/style.css';
+  padding: 0;
+  min-height: 53px;
+  line-height: 53px;
+  align-items: center;
+}
+.listItemAutoHeight {
+  composes: listItem;
+  height: auto;
+  align-items: flex-start;
+}
+.optionItem {
+  display: flex;
+}
+.radioLabel {
+  composes: checkLabel from '../RepairDeal/style.css';
+  margin-top: 10px;
+}
+.inner {
+  composes: checkInner from '../RepairDeal/style.css';
+}
+.radioValue {
+  text-align: left;
+  flex: 1;
+}
+.itemValue {
+  composes: inputBox from '../Repair/style.css';
+  flex: 1;
+}
+.itemValue::after {
+  display: none;
+}
+.inputBox {
+  background-color: #f0f0f0;
+  border-radius: 8px;
+}
+
+.itemLabel {
+  composes: itemLabel from '../Repair/style.css';
+  margin: 0;
+  margin-right: 14px;
+  width: 160px;
+  text-align: right;
+  text-align-last: right;
+}
+.itemInput {
+  composes: input from '../Repair/style.css';
+  background-color: #f0f0f0;
+  border-radius: 8px;
+  line-height: 48px;
+  height: 48px;
+}
+.selectInput {
+  composes: inputBox from '../Repair/style.css';
+  min-height: 50px;
+}
+.arrow {
+  composes: arrow from '../../components/Input/Select/style.css';
+}
+.itemSelect {
+  flex: 1;
+}
+.DateWrap {
+  width: 100%;
+}
+.DateInnerWrap {
+  width: 100%;
+}
+.selectWrap {
+  background-color: #f0f0f0;
+  border-radius: 8px;
+  height: 48px;
+  line-height: 48px;
+  text-align: center;
+  color: #999;
+}
+.selectValue {
+  text-align: center;
+  color: #333;
+}
+.textarea {
+  background-color: #f0f0f0;
+  border-radius: 8px;
+  font-size: 22px;
+}
+.submitBtn {
+  width: 560px;
+  height: 80px;
+  line-height: 80px;
+  background: #3695c0;
+  color: #fff;
+  margin: 40px auto 0;
+}

src/containers/PublicCarDeal/index.js

@@ -2,7 +2,13 @@ import React, { Component } from 'react';
 import { PullToRefresh, Modal, Toast, TextareaItem } from 'antd-mobile';
 import styles from './style.css';
 import PublicCarItem from '../PublicCar/components/PublicCarItem';
-import { fetchApplyPublicCarList, dealPublicCar } from '../../api/index';
+import {
+  fetchApplyPublicCarList,
+  dealPublicCar,
+  fetchCarPlateList,
+} from '../../api/index';
+// import Select from '../../components/Input/Select/Select';
+import SelectIcon from './images/more_item_btn@2x.png';
 
 class PublicCarDeal extends Component {
   constructor(props) {
@@ -23,31 +29,36 @@ class PublicCarDeal extends Component {
         carPlate: '',
         dealOpinion: '',
       },
+      carPlateList: [],
     };
   }
   componentDidMount() {
     this.fetchList();
   }
-  fetchList = () => {
+  fetchList = fetchMore => {
     const { pagination } = this.state;
     fetchApplyPublicCarList({
       ...pagination,
+      pageNum: fetchMore ? ++pagination.pageNum : pagination.pageNum,
     }).then(res => {
       // const { list, ...pagination } = res.data;
       // this.setState({
       //   list: list,
       //   pagination: pagination,
       // });
+      if (fetchMore) {
+        this.setState(({ list }) => ({
+          list: [...list, ...res.data],
+        }));
+      } else {
         this.setState({
-        list: res.data.map(i => ({
-          ...i,
-          dealResult: 1,
-        })),
+          list: res.data,
         });
+      }
     });
   };
   refreshHandle = () => {
-    this.fetchList();
+    this.fetchList(true);
   };
   toggleSelectedState = val => {
     this.setState({
@@ -55,6 +66,20 @@ class PublicCarDeal extends Component {
     });
   };
   dealHandle = id => {
+    if (this.state.carPlateList.length === 0) {
+      fetchCarPlateList()
+        .then(res => {
+          this.setState(({ carPlateList }) => ({
+            carPlateList: res.data.map(i => ({
+              value: i.id,
+              lable: i.name,
+            })),
+          }));
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    }
     this.setState(({ selected }) => ({
       dealDialogVisible: true,
       selected: {
@@ -63,7 +88,17 @@ class PublicCarDeal extends Component {
       },
     }));
   };
-  resetDialog = () => {};
+  resetDialog = () => {
+    this.setState(({ selected }) => ({
+      dealDialogVisible: false,
+      selected: {
+        id: '',
+        value: '',
+        carPlate: '',
+        dealOpinion: '',
+      },
+    }));
+  };
   toggleSelectedState = val => {
     this.setState(({ selected }) => ({
       selected: {
@@ -72,7 +107,26 @@ class PublicCarDeal extends Component {
       },
     }));
   };
+  validateSelect = () => {
+    const {
+      selected: { value, carPlate },
+    } = this.state;
+    if (!value) {
+      Toast.fail('请选择处理结果！');
+      return false;
+    }
+    if (value === 1) {
+      if (!carPlate) {
+        Toast.fail('请选择派车！');
+        return false;
+      }
+    }
+    return true;
+  };
   submitHandle = () => {
+    if (!this.validateSelect()) {
+      return;
+    }
     const {
       selected: { id, value, carPlate, dealOpinion },
     } = this.state;
@@ -86,20 +140,42 @@ class PublicCarDeal extends Component {
         : {
             id: id,
             dealResult: value,
-            dealOpinion: dealOpinion,
+            dealOpinion: dealOpinion
+              ? `不同意 - ${dealOpinion}`
+              : '不同意 - 无车可派送',
           };
     dealPublicCar(entity)
       .then(res => {
-        Toast.fail(res.msg || '处理成功！');
+        this.resetDialog();
+        Toast.success(res.msg || '处理成功！');
       })
       .catch(err => {
         Toast.fail(err.msg || '处理失败！');
       });
   };
+  onSelectHandle = e => {
+    console.log(e);
+    const val = e.target.value;
+    this.setState(({ selected }) => ({
+      selected: {
+        ...selected,
+        carPlate: val,
+      },
+    }));
+  };
+  onInputHandle = val => {
+    this.setState(({ selected }) => ({
+      selected: {
+        ...selected,
+        dealOpinion: val,
+      },
+    }));
+  };
   render() {
     const {
       selected: { value, carPlate, dealOpinion },
       dealDialogVisible,
+      carPlateList,
     } = this.state;
     return (
       <PullToRefresh
@@ -130,13 +206,14 @@ class PublicCarDeal extends Component {
           onClose={this.resetDialog}
           title=""
           footer={[
-            { text: '放弃', onPress: () => console.log('cancel') },
+            { text: '放弃', onPress: this.resetDialog },
             {
               text: '提交',
               onPress: this.submitHandle,
             },
           ]}
         >
+          <div className={styles.dialogBody}>
             <div key="radio" className={styles.alertInfo}>
               <div
                 className={styles.radioBox}
@@ -159,7 +236,30 @@ class PublicCarDeal extends Component {
             </div>
             {value === 1 ? (
               <div key="agree" className={styles.agree}>
-              <span className={styles.dialogLabel}>派车车牌</span>
+                <span className={styles.dialogAgreeLabel}>派车车牌</span>
+                <div className={styles.selectWrap}>
+                  <div className={styles.selectIcon}>
+                    <img src={SelectIcon} alt="" />
+                  </div>
+                  <select
+                    className={styles.select}
+                    value={carPlate}
+                    onChange={this.onSelectHandle}
+                  >
+                    {carPlateList.map(i => (
+                      <option key={i.value} value={i.value}>
+                        {i.lable}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                {/* <Select
+                  placeholder="请选择"
+                  data={carPlateList}
+                  cols={1}
+                  onChange={this.onSelectHandle}
+                /> */}
               </div>
             ) : value === 2 ? (
               <div key="notAgree" className={styles.notAgree}>
@@ -169,10 +269,12 @@ class PublicCarDeal extends Component {
                   placeholder="输入报修地址"
                   rows={3}
                   count={50}
-                // value={dealOpinion}
+                  value={dealOpinion}
+                  onChange={this.onInputHandle}
                 />
               </div>
             ) : null}
+          </div>
         </Modal>
       </PullToRefresh>
     );

src/containers/PublicCarDeal/style.css

@@ -5,12 +5,16 @@
   composes: noData from '../Repair/style.css';
 }
 
+.dialogBody {
+  /* height: 200px; */
+}
 .dealDialog {
   width: 520px;
 }
 .alertInfo {
   display: flex;
   justify-content: center;
+  margin-bottom: 20px;
 }
 .radioBox {
   display: flex;
@@ -32,12 +36,42 @@
   margin-left: 30px;
   margin-right: 14px;
 }
+.dialogAgreeLabel {
+  line-height: 60px;
+  margin-right: 14px;
+}
+.agree,
 .notAgree {
   display: flex;
   font-size: 26px;
   color: #333;
 }
+.selectWrap {
+  position: relative;
+  width: 310px;
+  height: 60px;
+  line-height: 60px;
+  background-color: #f2f2f2;
+  border-radius: 8px;
+  padding-left: 26px;
+}
+.selectIcon {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 46px;
+  height: 60px;
+}
+.select {
+  border: none;
+  appearance: none;
+  outline: none;
+  width: 100%;
+  height: 100%;
+  background-color: #f2f2f2;
+}
 .textarea {
+  background-color: #f2f2f2;
   width: 310px;
   height: 180px;
   box-sizing: border-box;

src/containers/Repair/style.css

@@ -176,7 +176,6 @@
   margin: 20px auto 0;
   color: #fff;
   font-size: 30px;
-  font-weight: bold;
   background-color: #3695c0;
 }
 /* reportList */

src/store/index.js

@@ -2,12 +2,12 @@ class Store {
   constructor() {
     this.userId = '1';
   }
-  static getUserId = () => {
+  getUserId = () => {
     return this.userId;
   };
-  static updateUserId = userId => {
+  updateUserId = userId => {
     this.userId = userId;
   };
 }
 
-export default Store;
+export default new Store();