From 59c0a30bba7d72342a2baeb6334b65f16747f3ed Mon Sep 17 00:00:00 2001 From: liujiangyong Date: Tue, 26 Jul 2022 10:56:55 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B7=A1=E6=9F=A5=E5=85=BB=E6=8A=A4=E6=9F=A5?= =?UTF-8?q?=E7=9C=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../packages/components/inputPicker/index.jsx | 16 +- .../components/inputPicker/index.scss | 2 +- weapp/src/packages/patrol/index.jsx | 352 ++++++++++++------ weapp/src/packages/patrol/index.scss | 10 + weapp/src/packages/patrolView/index.jsx | 10 +- weapp/src/pages/home/index.jsx | 2 +- weapp/src/services/api.js | 11 +- 7 files changed, 282 insertions(+), 121 deletions(-) diff --git a/weapp/src/packages/components/inputPicker/index.jsx b/weapp/src/packages/components/inputPicker/index.jsx index f6b4b197..2525048b 100644 --- a/weapp/src/packages/components/inputPicker/index.jsx +++ b/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 ( - {title} + * {title} - - - + { + !isView && + + + + } ) } \ No newline at end of file diff --git a/weapp/src/packages/components/inputPicker/index.scss b/weapp/src/packages/components/inputPicker/index.scss index 5a167df3..52649cdc 100644 --- a/weapp/src/packages/components/inputPicker/index.scss +++ b/weapp/src/packages/components/inputPicker/index.scss @@ -13,7 +13,7 @@ align-items: center; .title { - margin-left: 30px; + margin-left: 12px; } .input { diff --git a/weapp/src/packages/patrol/index.jsx b/weapp/src/packages/patrol/index.jsx index aa7140d9..3ff00be1 100644 --- a/weapp/src/packages/patrol/index.jsx +++ b/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, - latitude: 69.000000000000 + // longitude: 37.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['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 + 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 } - 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' }) + + 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' }) + }) + } } - }, err => { - Taro.showToast({ title: err.message || '请求出错', icon: 'none' }) }) } @@ -139,18 +221,105 @@ const Index = () => { }) } - const typeList = [ - { - value: 'patrol', - text: '巡查', - checked: true - }, - { - value: 'conserve', - text: '养护', - checked: false - } - ] + function renderAddImg() { + return ( + reportType === 'patrol' ? + + 现场图片： + = 3 ? false : true} + files={scenePic} + onChange={files => handleImgChange(files, 'scenePic')} + onImageClick={handleImgClick} + /> + : + + 养护图片: + + + 养护前 + + = 3 ? false : true} + files={conserveBeforePic} + onChange={files => handleImgChange(files, 'conserveBeforePic')} + onImageClick={handleImgClick} + /> + + + 养护中 + + = 3 ? false : true} + files={conserveUnderwayPic} + onChange={files => handleImgChange(files, 'conserveUnderwayPic')} + onImageClick={handleImgClick} + /> + + + 养护后 + + = 3 ? false : true} + files={conserveAfterPic} + onChange={files => handleImgChange(files, 'conserveAfterPic')} + onImageClick={handleImgClick} + /> + + ) + } + + function renderViewImg() { + return ( + reportType === 'patrol' ? + + 现场图片： + + {scenePic.map(item => ( + handleImgClick(undefined, item)} /> + ))} + + : + + 养护图片: + + + 养护前 + + + {conserveBeforePic.map(item => ( + handleImgClick(undefined, item)} /> + ))} + + + + 养护中 + + + {conserveUnderwayPic.map(item => ( + handleImgClick(undefined, item)} /> + ))} + + + + 养护后 + + + {conserveAfterPic.map(item => ( + handleImgClick(undefined, item)} /> + ))} + + + ) + } return ( @@ -166,6 +335,7 @@ const Index = () => { checked={item.checked} className='radio' color='#346FC2' + disabled={isView} > {item.text} @@ -181,6 +351,7 @@ const Index = () => { value={projectType} onInput={setProjectType} selector={rPrjTypeSelector} + isView={isView} /> { value={road} onInput={setRoad} selector={rRoadSelector} + isView={isView} /> @@ -195,34 +367,42 @@ const Index = () => { handleInput(e, 'roadSectionStart')} + disabled={isView} /> - setRoadSectionStart(roadStartSelector[e.detail.value])} - > - - + { + isView && + setRoadSectionStart(roadStartSelector[e.detail.value])} + > + + + } 至  handleInput(e, 'roadSectionEnd')} + disabled={isView} /> - setRoadSectionEnd(roadEndSelector[e.detail.value])} - > - - + { + isView && + setRoadSectionEnd(roadEndSelector[e.detail.value])} + > + + + } @@ -230,73 +410,29 @@ const Index = () => { handleInput(e, 'address')} + disabled={isView} /> handleInput(e, 'content')} + disabled={isView} /> { - reportType === 'patrol' ? - - 现场图片： - = 3 ? false : true} - files={scenePic} - onChange={files => handleImgChange(files, 'scenePic')} - onImageClick={handleImgClick} - /> - : - - 养护图片: - - - 养护前 - - = 3 ? false : true} - files={conserveBeforePic} - onChange={files => handleImgChange(files, 'conserveBeforePic')} - onImageClick={handleImgClick} - /> - - - 养护中 - - = 3 ? false : true} - files={conserveUnderwayPic} - onChange={files => handleImgChange(files, 'conserveUnderwayPic')} - onImageClick={handleImgClick} - /> - - - 养护后 - - = 3 ? false : true} - files={conserveAfterPic} - onChange={files => handleImgChange(files, 'conserveAfterPic')} - onImageClick={handleImgClick} - /> - + isView ? + renderViewImg() : + renderAddImg() + } + { + !isView && 上报 } - 上报 ) } diff --git a/weapp/src/packages/patrol/index.scss b/weapp/src/packages/patrol/index.scss index 186500ad..d5040252 100644 --- a/weapp/src/packages/patrol/index.scss +++ b/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 { diff --git a/weapp/src/packages/patrolView/index.jsx b/weapp/src/packages/patrolView/index.jsx index 2b768793..7b55672d 100644 --- a/weapp/src/packages/patrolView/index.jsx +++ b/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 ( onTypeChange(true)}> - 巡查 + 巡查 onTypeChange(false)}> - 养护 + 养护 @@ -127,7 +131,7 @@ function Index() { {e.road} 填报人： - {e.user.name} + {e.user && e.user.name} {moment(e.time).format('YYYY-MM-DD HH:mm:ss')} diff --git a/weapp/src/pages/home/index.jsx b/weapp/src/pages/home/index.jsx index ca1d68ca..30856ce5 100644 --- a/weapp/src/pages/home/index.jsx +++ b/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() { diff --git a/weapp/src/services/api.js b/weapp/src/services/api.js index dab3cd0f..7579a34d 100644 --- a/weapp/src/services/api.js +++ b/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`; }; //行业查询