巡查养护查看

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

@@ -2,12 +2,12 @@
 * 输入框筛选选择器
 */
 import React, { useState, useEffect } from 'react'
-import { View, Picker, Image, Input } from '@tarojs/components'
+import { View, Picker, Image, Input, Text } 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 { title, placeholder, selector, value, onInput, isView } = props
   const [curSelector, setCurSelector] = useState([])
 
   useEffect(() => {
@@ -30,7 +30,7 @@ export default function InputPicker(props) {
   return (
     <View className='input-picker'>
       <View className='input-box'>
-        <View className='title'>{title}</View>
+        <View className='title'><Text style={{ color: 'red' }}>*&nbsp;</Text>{title}</View>
         <Input
           className='input'
           type='text'
@@ -38,11 +38,15 @@ export default function InputPicker(props) {
           border={false}
           value={value}
           onInput={handleInput}
+          disabled={isView}
         />
       </View>
-      <Picker mode='selector' range={curSelector} onChange={handlePickerChange}>
+      {
-        <Image src={arrowIcon} className='img' />
+        !isView &&
-      </Picker>
+        <Picker mode='selector' range={curSelector} onChange={handlePickerChange}>
+          <Image src={arrowIcon} className='img' />
+        </Picker>
+      }
     </View>
   )
 }

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

@@ -13,7 +13,7 @@
     align-items: center;
 
     .title {
-      margin-left: 30px;
+      margin-left: 12px;
     }
 
     .input {

weapp/src/packages/patrol/index.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import Taro from '@tarojs/taro';
+import Taro, { useRouter } from '@tarojs/taro';
 import {
   View,
   RadioGroup,
@@ -9,14 +9,19 @@ import {
   Input,
   Picker
 } from '@tarojs/components';
-import { AtButton, AtTextarea, AtImagePicker } from 'taro-ui';
+import { AtButton, AtTextarea, AtImagePicker, AtAvatar } from 'taro-ui';
 import InputPicker from '../components/inputPicker';
 import request from '@/services/request';
-import { postReport } from '@/services/api';
+import { postReport, getReportDetail } from '@/services/api';
 import './index.scss';
 import arrowIcon from '../../static/img/patrol/arrow-down.svg';
 
 const Index = () => {
+  const router = useRouter()
+  const { params: { type } } = router
+  const isView = type === 'view' ? true : false
+
+
   const [reportType, setReportType] = useState('patrol') // 上报类型
   const [projectType, setProjectType] = useState('') // 工程类型
   const [road, setRoad] = useState('') // 所在道路
@@ -32,6 +37,21 @@ const Index = () => {
   const [roadStartSelector, setRoadStartSelector] = useState([])
   const [roadEndSelector, setRoadEndSelector] = useState([])
 
+  const [canReport, setCanReport] = useState(true)
+
+  const [typeList, setTypeList] = useState([
+    {
+      value: 'patrol',
+      text: '巡查',
+      checked: true
+    },
+    {
+      value: 'conserve',
+      text: '养护',
+      checked: false
+    }
+  ])
+
   const rPrjTypeSelector = ['道路', '桥梁', '涵洞', '其他']
   const rRoadSelector = ['富山一路', '金沙大道', '玉湖路']
 
@@ -39,11 +59,61 @@ const Index = () => {
   const rRoadEndSelector = ['一段', '二段', '三段']
 
   useEffect(() => {
+    if (isView) {
+      Taro.showLoading({
+        title: '加载中'
+      })
+      request.get(getReportDetail(router.params.id)).then(res => {
+        Taro.hideLoading()
+        if (res.statusCode == 200 || res.statusCode == 204) {
+          const { data } = res
+          setReportType(data.reportType)
+          setProjectType(data.projectType)
+          setRoad(data.road)
+          setRoadSectionStart(data.roadSectionStart)
+          setRoadSectionEnd(data.roadSectionEnd)
+          setAddress(data.address)
+          setContent(data.content)
+          setScenePic(data.scenePic ? data.scenePic.map(item => ({ url: item })) : [])
+          setConserveBeforePic(data.conserveBeforePic ? data.conserveBeforePic.map(item => ({ url: item })) : [])
+          setConserveUnderwayPic(data.conserveUnderwayPic ? data.conserveUnderwayPic.map(item => ({ url: item })) : [])
+          setConserveAfterPic(data.conserveAfterPic ? data.conserveAfterPic.map(item => ({ url: item })) : [])
+        } else {
+          Taro.showToast({ title: res.data.message || '请求出错', icon: 'none' })
+        }
+      }, err => {
+        Taro.showToast({ title: err.message || '请求出错', icon: 'none' })
+      })
+    }
     setRoadStartSelector(rRoadStartSelector)
     setRoadEndSelector(rRoadEndSelector)
   }, [])
 
+  useEffect(() => {
+    setTypeList([
+      {
+        value: 'patrol',
+        text: '巡查',
+        checked: reportType === 'patrol' ? true : false
+      },
+      {
+        value: 'conserve',
+        text: '养护',
+        checked: reportType === 'conserve' ? true : false
+      }
+    ])
+  }, [reportType])
+
   function report() {
+    if (!canReport) { return }
+    if (!projectType || !road) {
+      Taro.showToast({ title: '请完善必填信息', icon: 'none' })
+      return
+    }
+    if (rPrjTypeSelector.indexOf(projectType) === -1) {
+      Taro.showToast({ title: '工程类型错误', icon: 'none' })
+      return
+    }
     let data = {
       reportType,
       projectType,
@@ -52,34 +122,46 @@ const Index = () => {
       roadSectionEnd,
       address,
       content,
-      longitude: 37.000000000000,
+      // longitude: 37.000000000000,
-      latitude: 69.000000000000
+      // latitude: 69.000000000000
     }
     if (reportType === 'patrol') {
-      data['scenePic'] = scenePic.length > 0 && scenePic.map(item => item.url)
+      data['scenePic'] = scenePic.length > 0 ? scenePic.map(item => item.url) : null
     } else {
-      data['conserveBeforePic'] = conserveBeforePic.length > 0 && conserveBeforePic.map(item => item.url)
+      data['conserveBeforePic'] = conserveBeforePic.length > 0 ? conserveBeforePic.map(item => item.url) : null
-      data['conserveUnderwayPic'] = conserveUnderwayPic.length > 0 && conserveUnderwayPic.map(item => item.url)
+      data['conserveUnderwayPic'] = conserveUnderwayPic.length > 0 ? conserveUnderwayPic.map(item => item.url) : null
-      data['conserveAfterPic'] = conserveAfterPic.length > 0 && conserveAfterPic.map(item => item.url)
+      data['conserveAfterPic'] = conserveAfterPic.length > 0 ? conserveAfterPic.map(item => item.url) : null
-    }
-    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.showModal({
-        Taro.showToast({ title: '上报成功', icon: 'none' })
+      title: '提示',
-      } else {
+      content: '您要进行信息上报么？',
-        Taro.showToast({ title: res.data.message || '请求出错', icon: 'none' })
+      success: function (res) {
+        if (res.confirm) {
+          setCanReport(false)
+          setTimeout(() => {
+            setCanReport(true)
+          }, 3000) // 3秒内不可以重复点击
+          Taro.showLoading({
+            title: '上报中'
+          })
+          request.post(postReport(), data).then(res => {
+            Taro.hideLoading()
+            if (res.statusCode == 200 || res.statusCode == 204) {
+              Taro.showToast({ title: '上报成功', icon: 'none', duration: 1500 })
+              setTimeout(() => {
+                Taro.reLaunch({
+                  url: '/pages/home/index'
+                });
+              }, 1500)
+            } else {
+              Taro.showToast({ title: res.data.message || '请求出错', icon: 'none' })
+            }
+          }, err => {
+            Taro.showToast({ title: err.message || '请求出错', icon: 'none' })
+          })
+        }
       }
-    }, err => {
-      Taro.showToast({ title: err.message || '请求出错', icon: 'none' })
     })
   }
 
@@ -139,18 +221,105 @@ const Index = () => {
     })
   }
 
-  const typeList = [
+  function renderAddImg() {
-    {
+    return (
-      value: 'patrol',
+      reportType === 'patrol' ?
-      text: '巡查',
+        <View className='patrol-img'>
-      checked: true
+          现场图片：
-    },
+          <AtImagePicker
-    {
+            className='img-picker'
-      value: 'conserve',
+            count={3 - scenePic.length}
-      text: '养护',
+            showAddBtn={scenePic.length >= 3 ? false : true}
-      checked: false
+            files={scenePic}
-    }
+            onChange={files => handleImgChange(files, 'scenePic')}
-  ]
+            onImageClick={handleImgClick}
+          />
+        </View> :
+        <View className='conserve-img'>
+          养护图片:
+          <View className='horizontal-line hl-one'>
+            <View className='circle c-one'></View>
+            <View className='text t-one'>养护前</View>
+          </View>
+          <AtImagePicker
+            className='img-picker'
+            count={3 - conserveBeforePic.length}
+            showAddBtn={conserveBeforePic.length >= 3 ? false : true}
+            files={conserveBeforePic}
+            onChange={files => handleImgChange(files, 'conserveBeforePic')}
+            onImageClick={handleImgClick}
+          />
+          <View className='horizontal-line hl-two'>
+            <View className='circle c-two'></View>
+            <View className='text t-two'>养护中</View>
+          </View>
+          <AtImagePicker
+            className='img-picker'
+            count={3 - conserveUnderwayPic.length}
+            showAddBtn={conserveUnderwayPic.length >= 3 ? false : true}
+            files={conserveUnderwayPic}
+            onChange={files => handleImgChange(files, 'conserveUnderwayPic')}
+            onImageClick={handleImgClick}
+          />
+          <View className='horizontal-line hl-three'>
+            <View className='circle c-three'></View>
+            <View className='text t-three'>养护后</View>
+          </View>
+          <AtImagePicker
+            className='img-picker'
+            count={3 - conserveAfterPic.length}
+            showAddBtn={conserveAfterPic.length >= 3 ? false : true}
+            files={conserveAfterPic}
+            onChange={files => handleImgChange(files, 'conserveAfterPic')}
+            onImageClick={handleImgClick}
+          />
+        </View>
+    )
+  }
+
+  function renderViewImg() {
+    return (
+      reportType === 'patrol' ?
+        <View className='patrol-img'>
+          现场图片：
+          <View className='img-box'>
+            {scenePic.map(item => (
+              <Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} />
+            ))}
+          </View>
+        </View> :
+        <View className='conserve-img'>
+          养护图片:
+          <View className='horizontal-line hl-one'>
+            <View className='circle c-one'></View>
+            <View className='text t-one'>养护前</View>
+          </View>
+          <View className='img-box'>
+            {conserveBeforePic.map(item => (
+              <Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} />
+            ))}
+          </View>
+          <View className='horizontal-line hl-two'>
+            <View className='circle c-two'></View>
+            <View className='text t-two'>养护中</View>
+          </View>
+          <View className='img-box'>
+            {conserveUnderwayPic.map(item => (
+              <Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} />
+            ))}
+          </View>
+          <View className='horizontal-line hl-three'>
+            <View className='circle c-three'></View>
+            <View className='text t-three'>养护后</View>
+          </View>
+          <View className='img-box'>
+            {conserveAfterPic.map(item => (
+              <Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} />
+            ))}
+          </View>
+        </View>
+    )
+  }
 
   return (
     <View className='patrol'>
@@ -166,6 +335,7 @@ const Index = () => {
                   checked={item.checked}
                   className='radio'
                   color='#346FC2'
+                  disabled={isView}
                 >
                   {item.text}
                 </Radio>
@@ -181,6 +351,7 @@ const Index = () => {
         value={projectType}
         onInput={setProjectType}
         selector={rPrjTypeSelector}
+        isView={isView}
       />
       <InputPicker
         title='所在道路：'
@@ -188,6 +359,7 @@ const Index = () => {
         value={road}
         onInput={setRoad}
         selector={rRoadSelector}
+        isView={isView}
       />
 
       <View className='road-section'>
@@ -195,34 +367,42 @@ const Index = () => {
         <Input
           className='input'
           type='text'
-          placeholder='路段名称'
+          placeholder={isView ? '' : '路段名称'}
           border={false}
           value={roadSectionStart}
           onInput={e => handleInput(e, 'roadSectionStart')}
+          disabled={isView}
         />
-        <Picker
+        {
-          mode='selector'
+          isView &&
-          range={roadStartSelector}
+          <Picker
-          onChange={e => setRoadSectionStart(roadStartSelector[e.detail.value])}
+            mode='selector'
-        >
+            range={roadStartSelector}
-          <Image src={arrowIcon} className='img-l' />
+            onChange={e => setRoadSectionStart(roadStartSelector[e.detail.value])}
-        </Picker>
+          >
+            <Image src={arrowIcon} className='img-l' />
+          </Picker>
+        }
         <View>至&nbsp;</View>
         <Input
           className='input'
           type='text'
-          placeholder='路段名称'
+          placeholder={isView ? '' : '路段名称'}
           border={false}
           value={roadSectionEnd}
           onInput={e => handleInput(e, 'roadSectionEnd')}
+          disabled={isView}
         />
-        <Picker
+        {
-          mode='selector'
+          isView &&
-          range={roadEndSelector}
+          <Picker
-          onChange={e => setRoadSectionEnd(roadEndSelector[e.detail.value])}
+            mode='selector'
-        >
+            range={roadEndSelector}
-          <Image src={arrowIcon} className='img-r' />
+            onChange={e => setRoadSectionEnd(roadEndSelector[e.detail.value])}
-        </Picker>
+          >
+            <Image src={arrowIcon} className='img-r' />
+          </Picker>
+        }
       </View>
 
       <View className='address'>
@@ -230,73 +410,29 @@ const Index = () => {
         <Input
           className='input'
           type='text'
-          placeholder='根据定位自动获取，可手动修改'
+          placeholder={isView ? '' : '根据定位自动获取，可手动修改'}
           value={address}
           onInput={e => handleInput(e, 'address')}
+          disabled={isView}
         />
       </View>
 
       <AtTextarea
         count={false}
         title='巡查内容：'
-        placeholder='请输入巡查内容'
+        placeholder={isView ? '' : '请输入巡查内容'}
         value={content}
         onChange={(v, e) => handleInput(e, 'content')}
+        disabled={isView}
       />
       {
-        reportType === 'patrol' ?
+        isView ?
-          <View className='patrol-img'>
+          renderViewImg() :
-            现场图片：
+          renderAddImg()
-            <AtImagePicker
+      }
-              className='img-picker'
+      {
-              count={3 - scenePic.length}
+        !isView && <AtButton type='primary' className='sub-btn' onClick={report}>上报</AtButton>
-              showAddBtn={scenePic.length >= 3 ? false : true}
-              files={scenePic}
-              onChange={files => handleImgChange(files, 'scenePic')}
-              onImageClick={handleImgClick}
-            />
-          </View> :
-          <View className='conserve-img'>
-            养护图片:
-            <View className='horizontal-line hl-one'>
-              <View className='circle c-one'></View>
-              <View className='text t-one'>养护前</View>
-            </View>
-            <AtImagePicker
-              className='img-picker'
-              count={3 - conserveBeforePic.length}
-              showAddBtn={conserveBeforePic.length >= 3 ? false : true}
-              files={conserveBeforePic}
-              onChange={files => handleImgChange(files, 'conserveBeforePic')}
-              onImageClick={handleImgClick}
-            />
-            <View className='horizontal-line hl-two'>
-              <View className='circle c-two'></View>
-              <View className='text t-two'>养护中</View>
-            </View>
-            <AtImagePicker
-              className='img-picker'
-              count={3 - conserveUnderwayPic.length}
-              showAddBtn={conserveUnderwayPic.length >= 3 ? false : true}
-              files={conserveUnderwayPic}
-              onChange={files => handleImgChange(files, 'conserveUnderwayPic')}
-              onImageClick={handleImgClick}
-            />
-            <View className='horizontal-line hl-three'>
-              <View className='circle c-three'></View>
-              <View className='text t-three'>养护后</View>
-            </View>
-            <AtImagePicker
-              className='img-picker'
-              count={3 - conserveAfterPic.length}
-              showAddBtn={conserveAfterPic.length >= 3 ? false : true}
-              files={conserveAfterPic}
-              onChange={files => handleImgChange(files, 'conserveAfterPic')}
-              onImageClick={handleImgClick}
-            />
-          </View>
       }
-      <AtButton type='primary' className='sub-btn' onClick={report}>上报</AtButton>
     </View>
   )
 }

weapp/src/packages/patrol/index.scss

@@ -73,6 +73,16 @@ page {
     background-color: #fff;
     padding: 20px;
 
+    .img-box {
+      display: flex;
+      flex-wrap: wrap;
+
+      .img {
+        width: 170px;
+        height: 170px;
+        margin: 10px 0 0 10px;
+      }
+    }
   }
 
   .conserve-img {

weapp/src/packages/patrolView/index.jsx

@@ -89,17 +89,21 @@ function Index() {
     }
   }
 
+  const handleDetail = index => {
+    Taro.navigateTo({ url: `/packages/patrol/index?type=view&id=${listData[index].id}` })
+  }
+
   return (
     <View>
       <View className='type-box'>
         <View className='item' onClick={() => onTypeChange(true)}>
           <Image className='type-img' src={isPatrol ? patrolActiveIcon : patrolIcon} />
-          <View style={{color: isPatrol ? '#346FC2': '#999999'}}>巡查</View>
+          <View style={{ color: isPatrol ? '#346FC2' : '#999999' }}>巡查</View>
         </View>
         <View className='line'></View>
         <View className='item' onClick={() => onTypeChange(false)}>
           <Image className='type-img' src={isPatrol ? conserveIcon : conserveActiveIcon} />
-          <View style={{color: isPatrol ? '#999999': '#346FC2'}}>养护</View>
+          <View style={{ color: isPatrol ? '#999999' : '#346FC2' }}>养护</View>
         </View>
       </View>
       <View className='filter-box'>
@@ -127,7 +131,7 @@ function Index() {
                     <View className='card-title'>{e.road}</View>
                     <View style={{ float: 'left', width: '100%', fontSize: '28rpx', marginTop: '16rpx' }}>
                       <View style={{ float: 'left' }}>填报人：</View>
-                      <View style={{ float: 'left' }}>{e.user.name}</View>
+                      <View style={{ float: 'left' }}>{e.user && e.user.name}</View>
                     </View>
                     <View className='card-date'>{moment(e.time).format('YYYY-MM-DD HH:mm:ss')}</View>
                   </View>

weapp/src/pages/home/index.jsx

@@ -10,7 +10,7 @@ const Index = () => {
 
   function toPatrol() {
     Taro.navigateTo({
-      url: '/packages/patrol/index'
+      url: '/packages/patrol/index?type=edit'
     })
   }
   function toPatrolView() {

weapp/src/services/api.js

@@ -7,12 +7,19 @@ export const getLogoutUrl = () => {
   return `/logout`;
 };
 
+// 巡查上报
+export const postReport = () => {
+  return `/report`;
+};
+
+// 获取上报列表
 export const getReportList = () => {
   return `/report/list`;
 };
 
-export const postReport = () => {
+// 获取上报详情
-  return `/report`;
+export const getReportDetail = id => {
+  return `/report/${id}/detail`;
 };
 
 //行业查询