完成意见反馈功能

src/pages/Feedback/index.jsx

@@ -1,6 +1,13 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { Form, Input, Button, Space, Table, Menu, Image } from "antd";
-import { Routes, Route, Navigate, useNavigate,useLocation } from "react-router-dom";
+import {
+  Routes,
+  Route,
+  Navigate,
+  useNavigate,
+  useLocation,
+} from "react-router-dom";
+import baseRequest from "../../utils/baseRequest";
 
 const FeedbackContent = (props) => {
   const { TextArea } = Input;
@@ -24,32 +31,24 @@ const FeedbackContent = (props) => {
     },
     {
       title: "辅助材料",
-      dataIndex: "mediaInfo",
+      dataIndex: "credentials",
-      key: "mediaInfo",
+      key: "credentials",
-      render: (mediaInfo) => (
+      render: (data) => (
         <div>
-          {mediaInfo
+          {data.images?.map((item, index) => (
-            ? mediaInfo.map((item) =>
+            <Image
-                item.type === "img" ? (
+              key={index}
-                  <Image
+              src={item.urls[0]}
-                    key={item.url}
+              width={150}
-                    src={item.url}
+              style={{ marginBottom: 10 }}
-                    width={150}
+            />
-                    style={{ marginBottom: 10 }}
+          ))}
-                  />
+          {data.videos?.map((item, index) => (
-                ) : (
+            <video key={index} src={item.urls[0]} width={150} controls />
-                  <video key={item.url} src={item.url} width={150} controls />
+          ))}
-                )
-              )
-            : "无"}
         </div>
       ),
     },
-    {
-      title: "联系方式",
-      dataIndex: "contact",
-      key: "contact",
-    },
     {
       title: "提交时间",
       dataIndex: "submitTime",
@@ -115,95 +114,174 @@ const FeedbackContent = (props) => {
     formRef.current.submit();
   };
   //提交表单
-  const handleSubmit = (value) => {
+  const handleSubmit = async (value) => {
     //要提交的数据
     let status;
     if (formRef.current.btn === "invalid") {
-      status = "invalid";
+      status = 3;
     } else if (formRef.current.btn === "iteration") {
-      status = "iteration";
+      status = 4;
     } else {
       switch (current) {
         case "pending":
-          status = "inProgress";
+          status = 1;
           break;
         case "inProgress":
-          status = "done";
+          status = 2;
           break;
         case "done":
-          status = "inProgress";
+          status = 1;
           break;
         case "invalid":
-          status = "inProgress";
+          status = 1;
           break;
         case "iteration":
-          status = "done";
+          status = 2;
           break;
         default:
           break;
       }
     }
     const submitData = {
-      key: formRef.current.key,
+      id: formRef.current.key,
-      remark: value[formRef.current.key],
+      remarks: value[formRef.current.key],
       status: status,
     };
     //提交数据
-    console.log(submitData);
+    try {
-    //取消数据展示
+      const base = baseRequest();
-    setShowData(showData.filter((item) => item.key !== submitData.key));
+      const response = await fetch("/op/feedback/update", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          ...submitData,
+          ...base,
+        }),
+      });
+      const updateData = await response.json();
+      if (updateData.ret === -1) {
+        alert(updateData.msg);
+        return;
+      }
+      //取消数据展示
+      setShowData(showData.filter((item) => item.key !== submitData.id));
+    } catch (error) {
+      console.error(error);
+    }
   };
-  //全部数据
+
-  let data = [
+  //获取数据
-    {
+  const [data, setData] = useState([]);
-      key: "1",
+  const [offset, setOffset] = useState(0);
-      id: "123456",
+  const [more, setMore] = useState(1);
-      name: "马牛逼",
+  const getData = async () => {
-      description:
+    if (!more) return;
-        "马牛逼反馈马牛逼反馈马牛逼反馈马牛逼反馈马牛逼反馈马牛逼反馈马牛逼反馈马牛逼反馈",
+    let querryStatus;
-      mediaInfo: [
+    switch (current) {
-        {
+      case "pending":
-          type: "img",
+        querryStatus = 0;
-          url: "https://s2.loli.net/2023/07/25/fjouqVLAlTn2s58.png",
+        break;
+      case "inProgress":
+        querryStatus = 1;
+        break;
+      case "done":
+        querryStatus = 2;
+        break;
+      case "invalid":
+        querryStatus = 3;
+        break;
+      case "iteration":
+        querryStatus = 4;
+        break;
+      default:
+        break;
+    }
+    try {
+      const base = baseRequest();
+      const response = await fetch("/op/feedback/list", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
         },
-        {
+        body: JSON.stringify({
-          type: "video",
+          status: querryStatus,
-          url: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
+          offset: offset,
+          limit: 200,
+          ...base,
+        }),
+      });
+      const temData = await response.json();
+      if (temData.ret === -1) {
+        alert(temData.msg);
+        return;
+      }
+      const userMids = temData.data.list.map((item) => item.mid);
+      if (userMids.length === 0) {
+        setData([]);
+        return;
+      }
+      const userResponse = await fetch("/op/account/list_others_by_mids", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
         },
-      ],
+        body: JSON.stringify({
-      contact: "qq:123456789;wx:987654321",
+          mids: userMids,
-      submitTime: "2023-7-21 21:00",
+          ...base,
-      remark: "马牛逼的备注",
+        }),
-      status: "pending",
+      });
-    },
+      const userData = await userResponse.json();
-    {
+      if (userData.ret === -1) {
-      key: "2",
+        alert(userData.msg);
-      id: "10086",
+        return;
-      name: "迪迦",
+      }
-      description:
+      //合并未读信息和用户资料数组
-        "迪迦反馈迪迦反馈迪迦反馈迪迦反馈迪迦反馈迪迦反馈迪迦反馈迪迦反馈迪迦反馈迪迦反馈",
+      const combinedArray = temData.data.list.map((item1) => {
-      mediaInfo: [
+        const matchingItem = userData.data.list.find(
-        {
+          (item2) => item2.mid === item1.mid
-          type: "img",
+        );
-          url: "https://s2.loli.net/2023/07/25/1daCqmZGQNUzoJ8.png",
+        return { ...item1, ...matchingItem };
-        },
+      });
-        {
+      const structedData = combinedArray.map((item) => {
-          type: "video",
+        return {
-          url: "https://media.w3.org/2010/05/sintel/trailer.mp4",
+          key: item.id,
-        },
+          id: item.user_id,
-      ],
+          name: item.name,
-      contact: "qq:741741;wx:147147",
+          description: item.discription,
-      submitTime: "2023-7-22 20:59",
+          credentials: item.credentials,
-      remark: "迪迦的备注",
+          submitTime: new Date(item.ct * 1000).toLocaleString(),
-      status: "pending",
+          remark: item.remarks,
-    },
+          status: item.status,
-  ];
+        };
+      });
+      setData([...data, ...structedData]);
+      setOffset(temData.data.offset);
+      setMore(temData.data.more);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  useEffect(() => {
+    getData();
+  }, [current]);
+
   //展示的数据
   const [showData, setShowData] = useState(data);
+  useEffect(() => {
+    setShowData(data);
+  }, [data]);
   //搜索名人
   const search = (value) => {
-    value.name||value.id
+    value.name || value.id
-      ? setShowData(data.filter((item) => item.name === value.name||item.id===value.id))
+      ? setShowData(
+          data.filter(
+            (item) =>
+              item.name.toLowerCase().includes(value.name.toLowerCase()) &&
+              item.id.toString().includes(value.id)
+          )
+        )
       : setShowData(data);
   };
   //表单提交失败
@@ -221,7 +299,7 @@ const FeedbackContent = (props) => {
       </p>
       <Form name="search" onFinish={search} onFinishFailed={onFinishFailed}>
         <Space style={{ marginBottom: 20 }}>
-        <Form.Item label="用户ID" name="id" style={{ margin: 0 }}>
+          <Form.Item label="用户ID" name="id" style={{ margin: 0 }}>
             <Input />
           </Form.Item>
           <Form.Item label="用户昵称" name="name" style={{ margin: 0 }}>
@@ -253,7 +331,7 @@ export default function Feedback() {
   const navigate = useNavigate();
   //当前tab
   const location = useLocation();
-  const pathname = location.pathname.split("/")[2]||"pending";
+  const pathname = location.pathname.split("/")[2] || "pending";
   const [current, setCurrent] = useState(pathname);
   //tab名称
   const items = [
@@ -281,6 +359,7 @@ export default function Feedback() {
   const onClick = (e) => {
     setCurrent(e.key);
     navigate(e.key);
+    window.location.reload();
   };
 
   return (