diff --git a/weapp/src/packages/components/inputPicker/index.jsx b/weapp/src/packages/components/inputPicker/index.jsx new file mode 100644 index 00000000..f6b4b197 --- /dev/null +++ b/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 ( + + + {title} + + + + + + + ) +} \ No newline at end of file diff --git a/weapp/src/packages/components/inputPicker/index.scss b/weapp/src/packages/components/inputPicker/index.scss new file mode 100644 index 00000000..5a167df3 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/weapp/src/packages/patrol/index.jsx b/weapp/src/packages/patrol/index.jsx index 36390b54..aa7140d9 100644 --- a/weapp/src/packages/patrol/index.jsx +++ b/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 InputPicker from '../components/inputPicker'; +import { AtButton, AtTextarea, AtImagePicker } from 'taro-ui'; +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 [prjTypeSelector, setPrjTypeSelector] = useState([]) - const [roadSelector, setRoadSelector] = useState([]) - const [projectType, setProjectType] = useState('') - const [road, setRoad] = useState('') + 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 [images, setimages] = useState([]) + const [roadStartSelector, setRoadStartSelector] = useState([]) + const [roadEndSelector, setRoadEndSelector] = useState([]) - const reportType = [ - { - value: '巡查', - text: '巡查', - checked: true - }, - { - value: '养护', - text: '养护', - checked: false - } - ] + const rPrjTypeSelector = ['道路', '桥梁', '涵洞', '其他'] + const rRoadSelector = ['富山一路', '金沙大道', '玉湖路'] + + const rRoadStartSelector = ['一段', '二段', '三段'] + const rRoadEndSelector = ['一段', '二段', '三段'] useEffect(() => { - const prjTypeSelector = ['道路', '桥梁', '涵洞', '其他'] - const roadSelector = ['富山一路', '金沙大道', '玉湖路'] - setPrjTypeSelector(prjTypeSelector) - setRoadSelector(roadSelector) + setRoadStartSelector(rRoadStartSelector) + setRoadEndSelector(rRoadEndSelector) }, []) - useEffect(() => { - if (projectType) { - setPrjTypeSelector(prjTypeSelector.filter(s => s.includes(projectType))) + function report() { + let data = { + reportType, + projectType, + road, + roadSectionStart, + roadSectionEnd, + address, + content, + longitude: 37.000000000000, + latitude: 69.000000000000 } - }, [projectType]) - // useEffect(() => { - // if (projectType) { - // setPrjTypeSelector(prjTypeSelector.filter(s => s.includes(projectType))) - // } - // }, [projectType]) - - function onTypeChange(e) { - if (e.detail.value === '巡查') { - setIsPatrol(true) + if (reportType === 'patrol') { + data['scenePic'] = scenePic.length > 0 && scenePic.map(item => item.url) } 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) { - setProjectType(selector[e.detail.value]) + function handleInput({ detail: { value } }, type) { + 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) { - setimages(files) + function handleTypeChange(e) { + 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(() => { - console.log(images); - }, [images]) + const typeList = [ + { + value: 'patrol', + text: '巡查', + checked: true + }, + { + value: 'conserve', + text: '养护', + checked: false + } + ] return ( - + 上报类型 - + { - reportType.map((item, i) => { + typeList.map((item, i) => { return ( { - - setProjectType(value)} - /> - - - - - - setRoad(value)} - /> - - - - - - {/* - */} + onInput={setRoad} + selector={rRoadSelector} + /> - - + 所属路段: + handleInput(e, 'roadSectionStart')} /> - + setRoadSectionStart(roadStartSelector[e.detail.value])} + > - 至  + handleInput(e, 'roadSectionEnd')} /> - + setRoadSectionEnd(roadEndSelector[e.detail.value])} + > - + + 具体位置: + handleInput(e, 'address')} + /> + + handleInput(e, 'content')} /> - { - isPatrol ? - + reportType === 'patrol' ? + 现场图片: = 3 ? false : true} - files={images} - onChange={onImgPickerChange} - onImageClick={onImageClick} + count={3 - scenePic.length} + showAddBtn={scenePic.length >= 3 ? false : true} + files={scenePic} + onChange={files => handleImgChange(files, 'scenePic')} + onImageClick={handleImgClick} /> : - + 养护图片: @@ -211,9 +264,11 @@ const Index = () => { = 3 ? false : true} + files={conserveBeforePic} + onChange={files => handleImgChange(files, 'conserveBeforePic')} + onImageClick={handleImgClick} /> @@ -221,9 +276,11 @@ const Index = () => { = 3 ? false : true} + files={conserveUnderwayPic} + onChange={files => handleImgChange(files, 'conserveUnderwayPic')} + onImageClick={handleImgClick} /> @@ -231,15 +288,15 @@ const Index = () => { = 3 ? false : true} + files={conserveAfterPic} + onChange={files => handleImgChange(files, 'conserveAfterPic')} + onImageClick={handleImgClick} /> } - - 上报 - + 上报 ) } diff --git a/weapp/src/packages/patrol/index.scss b/weapp/src/packages/patrol/index.scss index 83057e4b..186500ad 100644 --- a/weapp/src/packages/patrol/index.scss +++ b/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; diff --git a/weapp/src/packages/patrolView/index.jsx b/weapp/src/packages/patrolView/index.jsx index 04792eea..2b768793 100644 --- a/weapp/src/packages/patrolView/index.jsx +++ b/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) diff --git a/weapp/src/services/api.js b/weapp/src/services/api.js index bc0f6aeb..dab3cd0f 100644 --- a/weapp/src/services/api.js +++ b/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`