From 644e4183c6698698e4dbab02808d437d9e3ec3ee Mon Sep 17 00:00:00 2001 From: yms Date: Thu, 4 Jan 2024 15:49:20 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8E=A5=E5=85=A5=E4=B8=8A=E6=8A=A5?= =?UTF-8?q?=E7=9A=84=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .umirc.ts | 7 +++ src/api/config.ts | 2 + src/api/index.tsx | 76 ++++++++++++++++++++++++ src/app.ts | 2 +- src/models/global.ts | 11 +++- src/pages/historyDetail.tsx | 108 +++++++++++++++++++++++++---------- src/pages/historyList.less | 21 +++++-- src/pages/historyList.tsx | 99 ++++++++++++++++++++++++-------- src/pages/locationSearch.tsx | 82 +------------------------- src/pages/main.tsx | 35 +++++++----- src/pages/report.tsx | 94 ++++++++++++++++++++++++------ 11 files changed, 364 insertions(+), 173 deletions(-) diff --git a/.umirc.ts b/.umirc.ts index 7bbbab3..5b63a78 100644 --- a/.umirc.ts +++ b/.umirc.ts @@ -14,5 +14,12 @@ export default defineConfig({ /** 开启全局数据流 */ model: {}, request: {}, + proxy: { + "/apis/": { + target: "http://172.23.0.171:9300/", + changeOrigin: true, + pathRewrite: { "^/apis": "" }, + }, + }, npmClient: "yarn", }); diff --git a/src/api/config.ts b/src/api/config.ts index 29d12b6..7072388 100644 --- a/src/api/config.ts +++ b/src/api/config.ts @@ -9,6 +9,8 @@ const devConfig = { openApiUrl: "https://api-tfrm-dev.thecover.cn/openApi/gn", /** 当前部署的地址 */ devAppUrl: "http://171.217.92.33:58101/main", + /** */ + dev: "http://172.23.0.171:9300", }; const config = devConfig; diff --git a/src/api/index.tsx b/src/api/index.tsx index 66532d7..dbbfbde 100644 --- a/src/api/index.tsx +++ b/src/api/index.tsx @@ -1,5 +1,6 @@ import { request } from "umi"; import config from "./config"; +import { RespResult } from "./core/model/ReqData"; /** * 获取token * @param code @@ -32,3 +33,78 @@ export function getUserinfo(open_id: number, token: string) { }, }); } + +/** + * 上传文件 + * @param formData + * @returns + */ +export function uploadFile(formData: FormData) { + return request>( + `/apis/public/api/uploadMedia`, + { + data: formData, + requestType: "form", + method: "post", + } + ); +} +/** + * 上传表单 + * @param form 表单数据 + * @returns + */ +export function submitForm(form: { + address: string; + telphone: number; + problemDesc: string; + reporter: string; + longitude: number; + latitude: number; + belongArea: number; + belongAreaName: string; + fileNames: string; + filePaths: string; +}) { + return request>(`/apis/public/api/report`, { + data: form, + method: "post", + requestType: "form", + }); +} + +/** + * 获取报告列表 + * @param phone + * @param pageSize + * @returns + * + * */ +export function getReportList( + phone: string, + pageSize: number, + pageNum: number +) { + return request>("/apis/public/api/pageMyReportProblems", { + method: "get", + params: { + telphone: phone, + pageSize, + pageNo: pageNum, + }, + }); +} + +/** + * + * @param id 报告id + * @returns + */ +export function getReportDetail(id: string) { + return request>("/apis/public/api/queryProblemById", { + method: "get", + params: { + id, + }, + }); +} diff --git a/src/app.ts b/src/app.ts index c7b2b18..7cddaee 100644 --- a/src/app.ts +++ b/src/app.ts @@ -2,5 +2,5 @@ import "./global.css"; import { useModel, type RequestConfig } from "umi"; export const request: RequestConfig = { - timeout: 1000, + timeout: 5000, }; diff --git a/src/models/global.ts b/src/models/global.ts index f079e01..e0df798 100644 --- a/src/models/global.ts +++ b/src/models/global.ts @@ -1,5 +1,6 @@ // 全局共享数据 import { useState } from "react"; +import { UploaderValueItem } from "react-vant"; const useGlobal = () => { const [matterAddress, setMatterAddress] = useState({}); @@ -11,7 +12,9 @@ const useGlobal = () => { * 登录信息 */ const [loginInfo, setLoginInfo] = useState(); - + const [area, setArea] = useState(0); + const [problemDesc, setProblemDesc] = useState(""); + const [fileList, setFileList] = useState([]); return { matterAddress, setMatterAddress, @@ -19,6 +22,12 @@ const useGlobal = () => { setLoginInfo, user, setUser, + area, + setArea, + problemDesc, + setProblemDesc, + fileList, + setFileList, }; }; diff --git a/src/pages/historyDetail.tsx b/src/pages/historyDetail.tsx index fae3246..7766d05 100644 --- a/src/pages/historyDetail.tsx +++ b/src/pages/historyDetail.tsx @@ -6,46 +6,92 @@ import { Input, Uploader, Button, + Skeleton, + Loading, + Space, } from "react-vant"; import styles from "./historyList.less"; -import { history } from "umi"; +import { history, useLocation } from "umi"; +import { useEffect, useState } from "react"; +import { getReportDetail } from "@/api"; const src = "https://img.yzcdn.cn/vant/cat.jpeg"; const historyDetail = () => { + const location = useLocation(); + + const { id } = location.state as any; + + const [dataSource, setDataSource] = useState(); + const [loading, setLoading] = useState(true); + useEffect(() => { + setLoading(true); + getReportDetail(id).then((res) => { + if (res.data) { + setDataSource(res.data); + setTimeout(() => { + setLoading(false); + }, 200); + } + }); + }, [id]); return (
- {/* history.back()} - leftText="返回" - /> */} -
-
-
-
陈平安
-
温江区林泉南街
-
-
2023-03-06 09:16
+ {loading ? ( +
+ + 加载中... +
-
-

涌泉街道共和路402号违法宣传标语

- - - -
2016-07-12 12:40
-

尊敬的市民，您所反映的问题已上报

- - -
2016-07-12 12:40
-

尊敬的市民，您所反映的问题已上报

- - -
2016-07-12 12:40
-

尊敬的市民，您所反映的问题已上报

- - + ) : ( +
+
+
+ 案件编号：{dataSource?.caseinfo?.MISSION_NUM} +
+ +
+ {dataSource?.caseinfo?.INFORM_TIME} +
+
+ {dataSource?.caseinfo?.ADDR} +
+
+
+

{dataSource?.caseinfo?.PROBLEM_DESC}

+ + {dataSource?.attachment?.map((v: any) => { + return ( + + ); + })} + + + + {dataSource?.process?.map((v) => { + return ( + +
2016-07-12 12:40
+

+ {v?.OPERATION_DESC ?? + "尊敬的市民，您所反映的问题正在处理中"} +

+

案件状态：{v?.ACTION_NAME}

+

处理人：{v?.OPERATOR_NAME}

+ + ); + })} + +
-
+ )}
); }; diff --git a/src/pages/historyList.less b/src/pages/historyList.less index 61a09b6..0e722db 100644 --- a/src/pages/historyList.less +++ b/src/pages/historyList.less @@ -21,11 +21,17 @@ } .item_title { - display: flex; - justify-content: space-between; - align-items: center; + > :first-child { + display: flex; + justify-content: space-between; + align-items: center; + } +} +.item_content { + .item_content_desc { + margin: 8px 0; + } } - .item_time { font-size: 14px; color: #999; @@ -41,3 +47,10 @@ font-size: 14px; color: #999; } + +.loadingBox { + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/src/pages/historyList.tsx b/src/pages/historyList.tsx index a795b00..2c987ad 100644 --- a/src/pages/historyList.tsx +++ b/src/pages/historyList.tsx @@ -6,52 +6,103 @@ import { Input, Uploader, Button, + Loading, } from "react-vant"; import styles from "./historyList.less"; import { history } from "umi"; +import { useEffect, useState } from "react"; +import { getReportList } from "@/api"; const src = "https://img.yzcdn.cn/vant/cat.jpeg"; -const Item = (props: any) => { +const Item = ({ data }: { data: any }) => { return (
{ - history.push("/historyDetail"); + history.push("/historyDetail", { id: data.CASE_INFO_ID }); }} >
-
-
陈平安
-
温江区林泉南街
+
+ 案件编号：{data.MISSION_NUM}
-
2023-03-06 09:16
+ +
{data.INFORM_TIME}
+
{data.ADDR}
-

涌泉街道共和路402号违法宣传标语

- - - 已上报 - 未受理 - 已立案 - 已结束 - +
{data.PROBLEM_DESC}
+
{data.rec_status}
); }; const historyList = () => { + const [pagination, setPagination] = useState({ + current: 1, + pageSize: 10, + end: false, + }); + const [dataSource, setDataSource] = useState([]); + useEffect(() => { + initData(); + }, []); + const initData = () => { + if (pagination.end) { + return; + } + if (pagination.current === 1) { + setLoading(true); + } + getReportList("123", pagination.pageSize, pagination.current).then( + (res) => { + if (res.data.length === pagination.pageSize) { + setPagination({ + ...pagination, + current: pagination.current + 1, + }); + if (res.data.length < pagination.pageSize) { + setPagination({ + ...pagination, + end: true, + }); + } + } + setDataSource([...dataSource, ...res.data]); + setTimeout(() => { + setLoading(false); + }, 200); + } + ); + }; + const [loading, setLoading] = useState(true); + + const onScroll = (e: React.UIEvent) => { + /** 判断滚动到底部 */ + if ( + e.currentTarget.scrollTop + e.currentTarget.clientHeight >= + e.currentTarget.scrollHeight - 30 + ) { + if (!pagination.end) { + initData(); + } + } + }; return (
- {/* history.back()} - leftText="返回" - /> */} -
- - - -
+ {loading ? ( +
+ + 加载中... + +
+ ) : ( +
+ {dataSource.map((v) => { + return ; + })} +
+ )}
); }; diff --git a/src/pages/locationSearch.tsx b/src/pages/locationSearch.tsx index 33d1e20..06c5b1d 100644 --- a/src/pages/locationSearch.tsx +++ b/src/pages/locationSearch.tsx @@ -24,6 +24,7 @@ const LocationSearch = () => { location: string; }[] >(); + /** * 获取当前位置 */ @@ -189,87 +190,6 @@ const LocationSearch = () => {
- // - // - // - - // {searchList && searchList.length > 0 ? ( - // - // - // {searchList?.map((v) => { - // return ( - // { - // console.log('点击'); - // onSelect(v); - // }} - // style={{ width: '100%', alignItems: 'center' }} - // > - // - // {v.address} - // - // - // ); - // })} - // - // - // ) : undefined} - // - - // - // { - // setSearchList([]); - // setCurLocation(e.nativeEvent); - // }} - // onCameraIdle={() => { - // setSearchList([]); - // }} - // onLoad={() => { - // getUserLocation(); - // }} - // > - // - // - // - - // ); }; diff --git a/src/pages/main.tsx b/src/pages/main.tsx index dad7724..53e7aff 100644 --- a/src/pages/main.tsx +++ b/src/pages/main.tsx @@ -13,24 +13,28 @@ const Main = () => { const { loginInfo, user, setUser, setLoginInfo } = useModel("global"); useEffect(() => { - /** 不存在先直接跳转 */ - if (!loginInfo?.token && !window.location.search) { - window.location.href = `${config.thirdPartyFrontEndPageUrl}/authorizedLogin.html?client_id=OM90JPKW&response_type=code&redirect_uri=${config.devAppUrl}`; - return; - } + try { + /** 不存在先直接跳转 */ + if (!loginInfo?.token && !window.location.search) { + window.location.href = `${config.thirdPartyFrontEndPageUrl}/authorizedLogin.html?client_id=OM90JPKW&response_type=code&redirect_uri=${config.devAppUrl}`; + return; + } - if (!loginInfo?.token && window.location.search) { - const params = new URLSearchParams(window.location.search); + if (!loginInfo?.token && window.location.search) { + const params = new URLSearchParams(window.location.search); - if (params.get("code")) { - getToken(params.get("code") as string) - .then((res) => { - setLoginInfo(res.data); - }) - .catch((err) => { - alert(JSON.stringify(err)); - }); + if (params.get("code")) { + getToken(params.get("code") as string) + .then((res) => { + setLoginInfo(res.data); + }) + .catch((err) => { + alert(JSON.stringify(err)); + }); + } } + } catch (error) { + alert(error); } }, []); @@ -38,6 +42,7 @@ const Main = () => { if (!user && loginInfo?.token) { getUserinfo(loginInfo?.openId, loginInfo?.token) .then((res) => { + alert(JSON.stringify(res.data)); setUser(res.data); }) .catch((err) => { diff --git a/src/pages/report.tsx b/src/pages/report.tsx index 7aae550..08bdf3e 100644 --- a/src/pages/report.tsx +++ b/src/pages/report.tsx @@ -9,17 +9,30 @@ import { Picker, Uploader, Button, + UploaderValueItem, + Notify, } from "react-vant"; import { history, useModel } from "umi"; +import { submitForm, uploadFile } from "@/api"; /** * 上报页 * @returns */ const Report = () => { - const { matterAddress } = useModel("global"); + const { + matterAddress, + setMatterAddress, + loginInfo, + user, + area, + setArea, + problemDesc, + setProblemDesc, + fileList, + setFileList, + } = useModel("global"); const [areaVisible, setAreaVisible] = React.useState(false); - const [area, setArea] = useState(0); - console.log(matterAddress); + const columns = [ { text: "广安市城南", value: 511600 }, { text: "广安市城北", value: 511602 }, @@ -34,19 +47,58 @@ const Report = () => { const findName = (id: number) => { return columns.find((v) => v.value == id)?.text; }; + + const handleSubmit = async () => { + /** 校验 */ + if (problemDesc.length === 0) { + Notify.show({ type: "warning", message: "请您描述您的问题" }); + return; + } + if (fileList.length === 0) { + Notify.show({ type: "warning", message: "请您上传问题图片" }); + return; + } + if (area === 0) { + Notify.show({ type: "warning", message: "请您选择所属地区" }); + return; + } + console.log(matterAddress); + if (!matterAddress?.addres || matterAddress?.addres === 0) { + Notify.show({ type: "warning", message: "请您选择事发位置" }); + return; + } + const uploadReq = fileList.map((v) => { + const formData = new FormData(); + + formData.append("file", v.file as File); + + return uploadFile(formData); + }); + + const imgList = (await Promise.all(uploadReq)).map((v) => v.data); + console.log(matterAddress); + const form = { + address: matterAddress.addres, + telphone: 123, + problemDesc: problemDesc, + reporter: "sadsa", + longitude: matterAddress.location.lng, + latitude: matterAddress.location.lat, + belongArea: area, + belongAreaName: findName(area) as string, + fileNames: imgList.map((v) => v.name).join(","), + filePaths: imgList.map((v) => v.path).join(","), + }; + + submitForm(form).then((res) => { + if (res.code === 200) { + Notify.show({ type: "success", message: "上报成功！" }); + } + }); + }; return (
- {/* history.back()} - leftText="返回" - /> */} - + { placeholder="输入问题描述，详细描述问题情况有助于我们及时解决上报的问哦，不低于5个字。。。。" style={{ backgroundColor: "#f3f3f3" }} autoSize={{ minHeight: 120, maxHeight: 160 }} + defaultValue={problemDesc} + onChange={(val) => { + setProblemDesc(val); + }} /> @@ -115,7 +171,13 @@ const Report = () => { 上传照片 - console.log(v)} /> + { + setFileList(v); + }} + /> @@ -132,7 +194,7 @@ const Report = () => {
-
-- GitLab