Highways4Good/weapp/src/packages/patrol/index.jsx

import React, { useState, useEffect } from 'react';
import Taro, { useRouter } from '@tarojs/taro';
import { View, RadioGroup, Radio, Image, Input, Picker } from '@tarojs/components';
import { AtButton, AtTextarea, AtImagePicker } from 'taro-ui';
import InputPicker from '../components/inputPicker';
import request from '@/services/request';
import { postReport, getReportDetail, delReport, getRoadSection } 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('') // 所在道路
  const [roadSectionStart, setRoadSectionStart] = useState('') // 路段 Start
  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 [longitude, setLongitude] = useState(0) // 经度
  const [latitude, setLatitude] = useState(0) // 纬度

  const [sourceRoadSel, setSourceRoadSel] = useState([])
  const [sourceRoadStartSel, setSourceRoadStartSel] = useState([])
  const [sourceRoadEndSel, setSourceRoadEndSel] = useState([])

  const prjTypeSelector = ['道路', '桥梁', '涵洞', '其他']
  const [roadStartSel, setRoadStartSel] = useState([])
  const [roadEndSel, setRoadEndSel] = useState([])

  const [canReport, setCanReport] = useState(true)

  const [typeList, setTypeList] = useState([
    {
      value: 'patrol',
      text: '巡查',
      checked: true
    },
    {
      value: 'conserve',
      text: '养护',
      checked: false
    }
  ])

  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' })
      })
    } else { // 填报
      Taro.showLoading({ title: '加载中' })
      let key = 'ODQBZ-3FZAU-6VIVL-2XXNM-F7CP7-WVFCY' // 写自己申请的key
      Taro.getLocation({
        type: 'wgs84',
        success: function (res) {
          setLongitude(res.longitude)
          setLatitude(res.latitude)
          Taro.request({
            url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=${key}`,
            success: function (res) {
              // 根据自己项目需求获取res内容
              let addresscity = res.data.result.address_component.province + res.data.result.address_component.city + res.data.result.address_component.district
              setAddress(addresscity + res.data.result.address_component.street_number)
            }
          })
        }
      })
      request.get(getRoadSection()).then(res => {
        Taro.hideLoading()
        if (res.statusCode == 200 || res.statusCode == 204) {
          const { data } = res
          let nextSourceRoadSel = []
          let nextSourceRoadStartSel = []
          let nextSourceRoadEndSel = []
          data.map(item => {
            nextSourceRoadSel.push(item.routeName)
            nextSourceRoadStartSel.push(item.startingPlaceName)
            nextSourceRoadEndSel.push(item.stopPlaceName)
          })
          setSourceRoadSel(nextSourceRoadSel)
          setSourceRoadStartSel(nextSourceRoadStartSel)
          setSourceRoadEndSel(nextSourceRoadEndSel)
        } else {
          Taro.showToast({ title: res.data.message || '请求出错', icon: 'none' })
        }
      }, err => {
        Taro.showToast({ title: err.message || '请求出错', icon: 'none' })
      })
    }
  }, [])
  useEffect(() => {
    setRoadStartSel(sourceRoadStartSel)
    setRoadEndSel(sourceRoadEndSel)
  }, [sourceRoadStartSel, sourceRoadEndSel])

  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 (prjTypeSelector.indexOf(projectType) === -1) {
      Taro.showToast({ title: '工程类型错误', icon: 'none' })
      return
    }
    let data = {
      reportType,
      projectType,
      road,
      roadSectionStart,
      roadSectionEnd,
      address,
      content,
      longitude,
      latitude
    }
    if (reportType === 'patrol') {
      data['scenePic'] = scenePic.length > 0 ? scenePic.map(item => item.url) : null
    } else {
      data['conserveBeforePic'] = conserveBeforePic.length > 0 ? conserveBeforePic.map(item => item.url) : null
      data['conserveUnderwayPic'] = conserveUnderwayPic.length > 0 ? conserveUnderwayPic.map(item => item.url) : null
      data['conserveAfterPic'] = conserveAfterPic.length > 0 ? conserveAfterPic.map(item => item.url) : null
    }

    Taro.showModal({
      title: '提示',
      content: '您要进行信息上报么？',
      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' })
          })
        }
      }
    })
  }

  function deleteReport() {
    Taro.showModal({
      title: '提示',
      content: '确定删除吗？',
      success: function (res) {
        if (res.confirm) {
          Taro.showLoading({
            title: '删除中'
          })
          request.del(delReport(router.params.id)).then(res => {
            Taro.hideLoading()
            if (res.statusCode == 200 || res.statusCode == 204) {
              Taro.showToast({ title: '删除成功', icon: 'none', duration: 1500 })
              setTimeout(() => {
                Taro.navigateBack()
              }, 1000)
            } else {
              Taro.showToast({ title: res.data.message || '请求出错', icon: 'none' })
            }
          }, err => {
            Taro.showToast({ title: err.message || '请求出错', icon: 'none' })
          })
        }
      }
    })
  }

  function handleInput({ detail: { value } }, type) {
    switch (type) {
      case 'roadSectionStart':
        setRoadSectionStart(value)
        if (value) {
          setRoadStartSel(sourceRoadStartSel.filter(item => item && item.includes(value)))
        } else {
          setRoadStartSel(sourceRoadStartSel)
        }
        break;
      case 'roadSectionEnd':
        setRoadSectionEnd(value)
        if (value) {
          setRoadEndSel(sourceRoadEndSel.filter(item => item && item.includes(value)))
        } else {
          setRoadEndSel(sourceRoadEndSel)
        }
        break;
      case 'address':
        setAddress(value)
        break;
      case 'content':
        setContent(value)
      default:
        break;
    }
  }

  function handleTypeChange(e) {
    setReportType(e.detail.value)
  }

  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链接列表
    })
  }

  return (
    <View className='patrol'>
      <View className='report-type'>
        <View className='text'>上报类型</View>
        <RadioGroup onChange={handleTypeChange}>
          {
            typeList.map((item, i) => {
              return (
                <Radio
                  key={i}
                  value={item.value}
                  checked={item.checked}
                  className='radio'
                  color='#346FC2'
                  disabled={isView}
                >
                  {item.text}
                </Radio>
              )
            })
          }
        </RadioGroup>
      </View>

      <InputPicker
        title='工程类型：'
        placeholder='请选择工程类型'
        value={projectType}
        onInput={setProjectType}
        selector={prjTypeSelector}
        isView={isView}
      />
      <InputPicker
        key={sourceRoadSel} // 添加key保证selector更新重新渲染
        title='所在道路：'
        placeholder='请选择或输入您所在的道路'
        value={road}
        onInput={setRoad}
        selector={sourceRoadSel}
        isView={isView}
      />

      <View className='road-section'>
        <View className='title'>所属路段：</View>
        <Input
          className='input'
          type='text'
          placeholder={isView ? '' : '路段名称'}
          border={false}
          value={roadSectionStart}
          onInput={e => handleInput(e, 'roadSectionStart')}
          disabled={isView}
        />
        {
          !isView &&
          <Picker
            mode='selector'
            range={roadStartSel}
            onChange={e => setRoadSectionStart(roadStartSel[e.detail.value])}
          >
            <Image src={arrowIcon} className='img-l' />
          </Picker>
        }
        <View>至&nbsp;</View>
        <Input
          className='input'
          type='text'
          placeholder={isView ? '' : '路段名称'}
          border={false}
          value={roadSectionEnd}
          onInput={e => handleInput(e, 'roadSectionEnd')}
          disabled={isView}
        />
        {
          !isView &&
          <Picker
            mode='selector'
            range={roadEndSel}
            onChange={e => setRoadSectionEnd(roadEndSel[e.detail.value])}
          >
            <Image src={arrowIcon} className='img-r' />
          </Picker>
        }
      </View>

      <View className='address'>
        <View className='title'>具体位置：</View>
        <Input
          className='input'
          type='text'
          placeholder={isView ? '' : '根据定位自动获取，可手动修改'}
          value={address}
          onInput={e => handleInput(e, 'address')}
          disabled={isView}
        />
      </View>

      <AtTextarea
        count={false}
        title='巡查内容：'
        placeholder={isView ? '' : '请输入巡查内容'}
        value={content}
        onChange={(v, e) => handleInput(e, 'content')}
        disabled={isView}
      />
      {
        reportType === 'patrol' ?
          <View className='patrol-img'>
            现场图片：
            {
              isView ?
                <View className='img-box'>
                  {scenePic.map(item => (
                    <Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} />
                  ))}
                </View> :
                <AtImagePicker
                  className='img-picker'
                  count={3 - scenePic.length}
                  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>
            {
              isView ?
                <View className='img-box'>
                  {conserveBeforePic.map(item => (
                    <Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} />
                  ))}
                </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>
            {
              isView ?
                <View className='img-box'>
                  {conserveUnderwayPic.map(item => (
                    <Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} />
                  ))}
                </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>
            {
              isView ?
                <View className='img-box'>
                  {conserveAfterPic.map(item => (
                    <Image className='img' src={item.url} onClick={() => handleImgClick(undefined, item)} />
                  ))}
                </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>
      }
      {
        isView ?
          <AtButton type='primary' className='del-btn' onClick={deleteReport}>删除</AtButton> :
          <AtButton type='primary' className='sub-btn' onClick={report}>上报</AtButton>
      }
    </View>
  )
}

export default Index