巡查上报

weapp/src/packages/components/inputPicker/index.jsx

@@ -0,0 +1,48 @@
+/*
+* 输入框筛选选择器
+*/
+import React, { useState, useEffect } from 'react'
+import { View, Picker, Image, Input } from '@tarojs/components'
+import arrowIcon from '../../../static/img/patrol/arrow-down.svg'
+import './index.scss'
+
+export default function InputPicker(props) {
+  const { title, placeholder, selector, value, onInput } = props
+  const [curSelector, setCurSelector] = useState([])
+
+  useEffect(() => {
+    setCurSelector(selector)
+  }, [])
+
+  function handleInput({ detail: { value: v } }) {
+    onInput(v)
+    if (v) {
+      setCurSelector(selector.filter(item => item.includes(v)))
+    } else {
+      setCurSelector(selector)
+    }
+  }
+
+  const handlePickerChange = (e) => {
+    onInput(curSelector[e.detail.value])
+  }
+
+  return (
+    <View className='input-picker'>
+      <View className='input-box'>
+        <View className='title'>{title}</View>
+        <Input
+          className='input'
+          type='text'
+          placeholder={placeholder}
+          border={false}
+          value={value}
+          onInput={handleInput}
+        />
+      </View>
+      <Picker mode='selector' range={curSelector} onChange={handlePickerChange}>
+        <Image src={arrowIcon} className='img' />
+      </Picker>
+    </View>
+  )
+}

weapp/src/packages/components/inputPicker/index.scss

@@ -0,0 +1,30 @@
+.input-picker {
+  display: flex;
+  justify-content: space-between;
+  height: 96px;
+  align-items: center;
+  background-color: #fff;
+  margin-bottom: 5px;
+
+  .input-box {
+    padding: 12px 0;
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+
+    .title {
+      margin-left: 30px;
+    }
+
+    .input {
+      margin-left: 20px;
+      flex-grow: 1;
+    }
+  }
+
+  .img {
+    width: 24px;
+    height: 14px;
+    margin: 0 30px;
+  }
+}

weapp/src/packages/patrol/index.jsx

@@ -7,86 +7,158 @@ import {
   Button,
   Image,
   Input,
-  Textarea,
   Picker
 } from '@tarojs/components';
-import { AtForm, AtInput, AtButton, AtTextarea, AtImagePicker, AtTimeline } from 'taro-ui';
+import { AtButton, AtTextarea, AtImagePicker } from 'taro-ui';
-// import InputPicker from '../components/inputPicker';
+import InputPicker from '../components/inputPicker';
+import request from '@/services/request';
+import { postReport } from '@/services/api';
 import './index.scss';
 import arrowIcon from '../../static/img/patrol/arrow-down.svg';
 
 const Index = () => {
-  const [isPatrol, setIsPatrol] = useState(true) // 巡查 or 养护
+  const [reportType, setReportType] = useState('patrol') // 上报类型
-  const [prjTypeSelector, setPrjTypeSelector] = useState([])
+  const [projectType, setProjectType] = useState('') // 工程类型
-  const [roadSelector, setRoadSelector] = useState([])
+  const [road, setRoad] = useState('') // 所在道路
-  const [projectType, setProjectType] = useState('')
+  const [roadSectionStart, setRoadSectionStart] = useState('') // 路段 Start
-  const [road, setRoad] = useState('')
+  const [roadSectionEnd, setRoadSectionEnd] = useState('') // 路段 End
+  const [address, setAddress] = useState('') // 具体位置
+  const [content, setContent] = useState('') // 巡查内容
+  const [scenePic, setScenePic] = useState([]) // 现场图片
+  const [conserveBeforePic, setConserveBeforePic] = useState([]) // 养护前图片
+  const [conserveUnderwayPic, setConserveUnderwayPic] = useState([]) // 养护中图片
+  const [conserveAfterPic, setConserveAfterPic] = useState([]) // 养护后图片
 
-  const [images, setimages] = useState([])
+  const [roadStartSelector, setRoadStartSelector] = useState([])
+  const [roadEndSelector, setRoadEndSelector] = useState([])
 
-  const reportType = [
+  const rPrjTypeSelector = ['道路', '桥梁', '涵洞', '其他']
-    {
+  const rRoadSelector = ['富山一路', '金沙大道', '玉湖路']
-      value: '巡查',
+
-      text: '巡查',
+  const rRoadStartSelector = ['一段', '二段', '三段']
-      checked: true
+  const rRoadEndSelector = ['一段', '二段', '三段']
-    },
-    {
-      value: '养护',
-      text: '养护',
-      checked: false
-    }
-  ]
 
   useEffect(() => {
-    const prjTypeSelector = ['道路', '桥梁', '涵洞', '其他']
+    setRoadStartSelector(rRoadStartSelector)
-    const roadSelector = ['富山一路', '金沙大道', '玉湖路']
+    setRoadEndSelector(rRoadEndSelector)
-    setPrjTypeSelector(prjTypeSelector)
-    setRoadSelector(roadSelector)
   }, [])
 
-  useEffect(() => {
+  function report() {
-    if (projectType) {
+    let data = {
-      setPrjTypeSelector(prjTypeSelector.filter(s => s.includes(projectType)))
+      reportType,
+      projectType,
+      road,
+      roadSectionStart,
+      roadSectionEnd,
+      address,
+      content,
+      longitude: 37.000000000000,
+      latitude: 69.000000000000
     }
-  }, [projectType])
+    if (reportType === 'patrol') {
-  // useEffect(() => {
+      data['scenePic'] = scenePic.length > 0 && scenePic.map(item => item.url)
-  //   if (projectType) {
-  //     setPrjTypeSelector(prjTypeSelector.filter(s => s.includes(projectType)))
-  //   }
-  // }, [projectType])
-
-  function onTypeChange(e) {
-    if (e.detail.value === '巡查') {
-      setIsPatrol(true)
     } else {
-      setIsPatrol(false)
+      data['conserveBeforePic'] = conserveBeforePic.length > 0 && conserveBeforePic.map(item => item.url)
+      data['conserveUnderwayPic'] = conserveUnderwayPic.length > 0 && conserveUnderwayPic.map(item => item.url)
+      data['conserveAfterPic'] = conserveAfterPic.length > 0 && conserveAfterPic.map(item => item.url)
     }
+    for (var key in data) {
+      if (!data[key]) {
+        Taro.showToast({ title: '请完善信息', icon: 'none' })
+        return
+      }
+    }
+    if (rPrjTypeSelector.indexOf(data.projectType) === -1) {
+      Taro.showToast({ title: '工程类型错误', icon: 'none' })
+      return
+    }
+    request.post(postReport(), data).then(res => {
+      if (res.statusCode == 200 || res.statusCode == 204) {
+        Taro.showToast({ title: '上报成功', icon: 'none' })
+      } else {
+        Taro.showToast({ title: res.data.message || '请求出错', icon: 'none' })
+      }
+    }, err => {
+      Taro.showToast({ title: err.message || '请求出错', icon: 'none' })
+    })
   }
 
-  function onPrjTypeChange(e) {
+  function handleInput({ detail: { value } }, type) {
-    setProjectType(selector[e.detail.value])
+    switch (type) {
+      case 'roadSectionStart':
+        setRoadSectionStart(value)
+        if (value) {
+          setRoadStartSelector(rRoadStartSelector.filter(item => item.includes(value)))
+        } else {
+          setRoadStartSelector(rRoadStartSelector)
+        }
+        break;
+      case 'roadSectionEnd':
+        setRoadSectionEnd(value)
+        if (value) {
+          setRoadEndSelector(rRoadEndSelector.filter(item => item.includes(value)))
+        } else {
+          setRoadEndSelector(rRoadEndSelector)
+        }
+        break;
+      case 'address':
+        setAddress(value)
+        break;
+      case 'content':
+        setContent(value)
+      default:
+        break;
+    }
   }
 
-  function onImgPickerChange(files) {
+  function handleTypeChange(e) {
-    setimages(files)
+    setReportType(e.detail.value)
   }
-  function onImageClick(index, file) {
+
+  function handleImgChange(files, type) {
+    switch (type) {
+      case 'scenePic':
+        setScenePic(files)
+        break;
+      case 'conserveBeforePic':
+        setConserveBeforePic(files)
+        break;
+      case 'conserveUnderwayPic':
+        setConserveUnderwayPic(files)
+        break;
+      case 'conserveAfterPic':
+        setConserveAfterPic(files)
+        break;
+      default:
+        break;
+    }
+  }
+  function handleImgClick(index, file) {
     Taro.previewImage({
       urls: [file.url] // 需要预览的图片http链接列表
     })
   }
 
-  useEffect(() => {
+  const typeList = [
-    console.log(images);
+    {
-  }, [images])
+      value: 'patrol',
+      text: '巡查',
+      checked: true
+    },
+    {
+      value: 'conserve',
+      text: '养护',
+      checked: false
+    }
+  ]
 
   return (
-    <View>
+    <View className='patrol'>
       <View className='report-type'>
         <View className='text'>上报类型</View>
-        <RadioGroup onChange={onTypeChange}>
+        <RadioGroup onChange={handleTypeChange}>
           {
-            reportType.map((item, i) => {
+            typeList.map((item, i) => {
               return (
                 <Radio
                   key={i}
@@ -103,107 +175,88 @@ const Index = () => {
         </RadioGroup>
       </View>
 
-      <View className='input-picker'>
+      <InputPicker
-        <AtInput
-          className='input'
-          title='工程类型：'
-          type='text'
-          placeholder='请选择工程类型'
-          border={false}
-          value={projectType}
-          onChange={value => setProjectType(value)}
-        />
-        <Picker mode='selector' range={prjTypeSelector} onChange={onPrjTypeChange}>
-          <Image src={arrowIcon} className='img-r' />
-        </Picker>
-      </View>
-      <View className='input-picker'>
-        <AtInput
-          className='input'
-          title='所在道路：'
-          type='text'
-          placeholder='请选择您所在的道路'
-          border={false}
-          value={road}
-          onChange={value => setRoad(value)}
-        />
-        <Picker mode='selector' range={roadSelector} onChange={onPrjTypeChange}>
-          <Image src={arrowIcon} className='img-r' />
-        </Picker>
-      </View>
-
-      {/* <InputPicker 
-        className='input-picker'
         title='工程类型：'
         placeholder='请选择工程类型'
         value={projectType}
-        onChange={setProjectType}
+        onInput={setProjectType}
-        selector={prjTypeSelector}
+        selector={rPrjTypeSelector}
       />
       <InputPicker
-        className='input-picker'
         title='所在道路：'
-        placeholder='请选择您所在的道路'
+        placeholder='请选择或输入您所在的道路'
         value={road}
-        onChange={setRoad}
+        onInput={setRoad}
-        selector={roadSelector}
+        selector={rRoadSelector}
-      /> */}
+      />
 
-      <View className='input-picker'>
+      <View className='road-section'>
-        <AtInput
+        <View className='title'>所属路段：</View>
+        <Input
           className='input'
-          title='所属路段：'
           type='text'
           placeholder='路段名称'
           border={false}
-        // value={this.state.value}
+          value={roadSectionStart}
-        // onChange={this.handleChange.bind(this, 'value')}
+          onInput={e => handleInput(e, 'roadSectionStart')}
         />
-        <Picker mode='selector' range={roadSelector} onChange={onPrjTypeChange}>
+        <Picker
+          mode='selector'
+          range={roadStartSelector}
+          onChange={e => setRoadSectionStart(roadStartSelector[e.detail.value])}
+        >
           <Image src={arrowIcon} className='img-l' />
         </Picker>
-        <AtInput
+        <View>至&nbsp;</View>
+        <Input
           className='input'
           type='text'
           placeholder='路段名称'
           border={false}
-        // value={this.state.value}
+          value={roadSectionEnd}
-        // onChange={this.handleChange.bind(this, 'value')}
+          onInput={e => handleInput(e, 'roadSectionEnd')}
         />
-        <Picker mode='selector' range={roadSelector} onChange={onPrjTypeChange}>
+        <Picker
+          mode='selector'
+          range={roadEndSelector}
+          onChange={e => setRoadSectionEnd(roadEndSelector[e.detail.value])}
+        >
           <Image src={arrowIcon} className='img-r' />
         </Picker>
       </View>
 
-      <AtTextarea
+      <View className='address'>
-        count={false}
+        <View className='title'>具体位置：</View>
-        title='具体位置：'
+        <Input
-        placeholder='具体位置：根据定位自动获取，可手动修改'
+          className='input'
-      // value={this.state.value}
+          type='text'
-      // onChange={this.handleChange.bind(this, 'value')}
+          placeholder='根据定位自动获取，可手动修改'
-      />
+          value={address}
+          onInput={e => handleInput(e, 'address')}
+        />
+      </View>
+
       <AtTextarea
         count={false}
         title='巡查内容：'
         placeholder='请输入巡查内容'
-      // value={this.state.value}
+        value={content}
-      // onChange={this.handleChange.bind(this, 'value')}
+        onChange={(v, e) => handleInput(e, 'content')}
       />
-
       {
-        isPatrol ?
+        reportType === 'patrol' ?
-          <View className='patrol-picker'>
+          <View className='patrol-img'>
             现场图片：
             <AtImagePicker
               className='img-picker'
-              count={3 - images.length}
+              count={3 - scenePic.length}
-              showAddBtn={images.length >= 3 ? false : true}
+              showAddBtn={scenePic.length >= 3 ? false : true}
-              files={images}
+              files={scenePic}
-              onChange={onImgPickerChange}
+              onChange={files => handleImgChange(files, 'scenePic')}
-              onImageClick={onImageClick}
+              onImageClick={handleImgClick}
             />
           </View> :
-          <View className='conserve-picker'>
+          <View className='conserve-img'>
             养护图片:
             <View className='horizontal-line hl-one'>
               <View className='circle c-one'></View>
@@ -211,9 +264,11 @@ const Index = () => {
             </View>
             <AtImagePicker
               className='img-picker'
-              count={3}
+              count={3 - conserveBeforePic.length}
-              files={images}
+              showAddBtn={conserveBeforePic.length >= 3 ? false : true}
-              onChange={onImgPickerChange}
+              files={conserveBeforePic}
+              onChange={files => handleImgChange(files, 'conserveBeforePic')}
+              onImageClick={handleImgClick}
             />
             <View className='horizontal-line hl-two'>
               <View className='circle c-two'></View>
@@ -221,9 +276,11 @@ const Index = () => {
             </View>
             <AtImagePicker
               className='img-picker'
-              count={3}
+              count={3 - conserveUnderwayPic.length}
-              files={images}
+              showAddBtn={conserveUnderwayPic.length >= 3 ? false : true}
-              onChange={onImgPickerChange}
+              files={conserveUnderwayPic}
+              onChange={files => handleImgChange(files, 'conserveUnderwayPic')}
+              onImageClick={handleImgClick}
             />
             <View className='horizontal-line hl-three'>
               <View className='circle c-three'></View>
@@ -231,15 +288,15 @@ const Index = () => {
             </View>
             <AtImagePicker
               className='img-picker'
-              count={3}
+              count={3 - conserveAfterPic.length}
-              files={images}
+              showAddBtn={conserveAfterPic.length >= 3 ? false : true}
-              onChange={onImgPickerChange}
+              files={conserveAfterPic}
+              onChange={files => handleImgChange(files, 'conserveAfterPic')}
+              onImageClick={handleImgClick}
             />
           </View>
       }
-
+      <AtButton type='primary' className='sub-btn' onClick={report}>上报</AtButton>
-      <AtButton formType='submit' type='primary' className='sub-btn'>上报</AtButton>
-
     </View>
   )
 }

weapp/src/packages/patrol/index.scss

@@ -3,6 +3,10 @@ page {
   width: 100vw;
   background-color: #f6f6f6;
 
+  .patrol {
+    font-size: 28px;
+  }
+
   .report-type {
     height: 96px;
     background-color: #fff;
@@ -20,32 +24,58 @@ page {
     }
   }
 
-  .input-picker {
+  .road-section {
     display: flex;
     justify-content: space-between;
+    height: 96px;
     align-items: center;
     background-color: #fff;
     margin-bottom: 5px;
 
+    .title {
+      margin-left: 30px;
+    }
+
+    .input {
+      width: 200px;
+    }
+
     .img-r {
       width: 24px;
       height: 14px;
       margin-right: 30px;
-      // margin-left: 10px;
     }
     .img-l {
       width: 24px;
       height: 14px;
+      margin-right: 10px;
+    }
+  }
+
+  .address {
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    height: 96px;
+    margin-bottom: 5px;
+
+    .title {
+      margin-left: 30px;
+    }
+
+    .input {
+      margin-left: 20px;
+      flex-grow: 1;
     }
   }
 
-  .patrol-picker {
+  .patrol-img {
     background-color: #fff;
     padding: 20px;
 
   }
 
-  .conserve-picker {
+  .conserve-img {
     background-color: #fff;
     padding: 20px;
 

weapp/src/packages/patrolView/index.jsx

@@ -35,7 +35,7 @@ function Index() {
     throw new Error(error);
   }
   useEffect(() => {
-    request.get(getReportList(),{}, { hideErrorToast: true, hideLoading: true }).then(res => {
+    request.get(getReportList(), {}, { hideErrorToast: true, hideLoading: true }).then(res => {
       if (res.statusCode == 200) {
         console.log(res);
         setListData(res.data)

weapp/src/services/api.js

@@ -11,6 +11,10 @@ export const getReportList = () => {
   return `/report/list`;
 };
 
+export const postReport = () => {
+  return `/report`;
+};
+
 //行业查询
 export const getIndustryUrl = () => {
   return `/elec/business/industry`