完成意见反馈功能
This commit is contained in:
parent
05b6f83567
commit
fce15a60d7
|
|
@ -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",
|
||||
key: "mediaInfo",
|
||||
render: (mediaInfo) => (
|
||||
dataIndex: "credentials",
|
||||
key: "credentials",
|
||||
render: (data) => (
|
||||
<div>
|
||||
{mediaInfo
|
||||
? mediaInfo.map((item) =>
|
||||
item.type === "img" ? (
|
||||
<Image
|
||||
key={item.url}
|
||||
src={item.url}
|
||||
width={150}
|
||||
style={{ marginBottom: 10 }}
|
||||
/>
|
||||
) : (
|
||||
<video key={item.url} src={item.url} width={150} controls />
|
||||
)
|
||||
)
|
||||
: "无"}
|
||||
{data.images?.map((item, index) => (
|
||||
<Image
|
||||
key={index}
|
||||
src={item.urls[0]}
|
||||
width={150}
|
||||
style={{ marginBottom: 10 }}
|
||||
/>
|
||||
))}
|
||||
{data.videos?.map((item, index) => (
|
||||
<video key={index} src={item.urls[0]} 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,
|
||||
remark: value[formRef.current.key],
|
||||
id: formRef.current.key,
|
||||
remarks: value[formRef.current.key],
|
||||
status: status,
|
||||
};
|
||||
//提交数据
|
||||
console.log(submitData);
|
||||
//取消数据展示
|
||||
setShowData(showData.filter((item) => item.key !== submitData.key));
|
||||
try {
|
||||
const base = baseRequest();
|
||||
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 = [
|
||||
{
|
||||
key: "1",
|
||||
id: "123456",
|
||||
name: "马牛逼",
|
||||
description:
|
||||
"马牛逼反馈马牛逼反馈马牛逼反馈马牛逼反馈马牛逼反馈马牛逼反馈马牛逼反馈马牛逼反馈",
|
||||
mediaInfo: [
|
||||
{
|
||||
type: "img",
|
||||
url: "https://s2.loli.net/2023/07/25/fjouqVLAlTn2s58.png",
|
||||
|
||||
//获取数据
|
||||
const [data, setData] = useState([]);
|
||||
const [offset, setOffset] = useState(0);
|
||||
const [more, setMore] = useState(1);
|
||||
const getData = async () => {
|
||||
if (!more) return;
|
||||
let querryStatus;
|
||||
switch (current) {
|
||||
case "pending":
|
||||
querryStatus = 0;
|
||||
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",
|
||||
},
|
||||
{
|
||||
type: "video",
|
||||
url: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
|
||||
body: JSON.stringify({
|
||||
status: querryStatus,
|
||||
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",
|
||||
},
|
||||
],
|
||||
contact: "qq:123456789;wx:987654321",
|
||||
submitTime: "2023-7-21 21:00",
|
||||
remark: "马牛逼的备注",
|
||||
status: "pending",
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
id: "10086",
|
||||
name: "迪迦",
|
||||
description:
|
||||
"迪迦反馈迪迦反馈迪迦反馈迪迦反馈迪迦反馈迪迦反馈迪迦反馈迪迦反馈迪迦反馈迪迦反馈",
|
||||
mediaInfo: [
|
||||
{
|
||||
type: "img",
|
||||
url: "https://s2.loli.net/2023/07/25/1daCqmZGQNUzoJ8.png",
|
||||
},
|
||||
{
|
||||
type: "video",
|
||||
url: "https://media.w3.org/2010/05/sintel/trailer.mp4",
|
||||
},
|
||||
],
|
||||
contact: "qq:741741;wx:147147",
|
||||
submitTime: "2023-7-22 20:59",
|
||||
remark: "迪迦的备注",
|
||||
status: "pending",
|
||||
},
|
||||
];
|
||||
body: JSON.stringify({
|
||||
mids: userMids,
|
||||
...base,
|
||||
}),
|
||||
});
|
||||
const userData = await userResponse.json();
|
||||
if (userData.ret === -1) {
|
||||
alert(userData.msg);
|
||||
return;
|
||||
}
|
||||
//合并未读信息和用户资料数组
|
||||
const combinedArray = temData.data.list.map((item1) => {
|
||||
const matchingItem = userData.data.list.find(
|
||||
(item2) => item2.mid === item1.mid
|
||||
);
|
||||
return { ...item1, ...matchingItem };
|
||||
});
|
||||
const structedData = combinedArray.map((item) => {
|
||||
return {
|
||||
key: item.id,
|
||||
id: item.user_id,
|
||||
name: item.name,
|
||||
description: item.discription,
|
||||
credentials: item.credentials,
|
||||
submitTime: new Date(item.ct * 1000).toLocaleString(),
|
||||
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
|
||||
? setShowData(data.filter((item) => item.name === value.name||item.id===value.id))
|
||||
value.name || 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 (
|
||||
|
|
|
|||
Loading…
Reference in New Issue